fix(components): forward native props the UI kit accepted but dropped

.changepacks/changepack_log_ui_kit_forward_native_props.json

@@ -0,0 +1,7 @@
+{
+  "changes": {
+    "packages/components/package.json": "Patch"
+  },
+  "note": "Input readOnly now reaches the native input, making the field read-only while keeping its clear button hidden; no new build errors.",
+  "date": "2026-10-24T00:00:00.000Z"
+}

packages/components/src/components/Input/__tests__/native-props.browser.test.tsx

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'bun:test'
+import { render } from 'bun-test-env-dom'
+
+import { Input } from '..'
+
+describe('Input native props', () => {
+  it('should render a read-only native input when readOnly is true', () => {
+    const { container } = render(<Input readOnly />)
+
+    expect(container.querySelector('input')?.getAttribute('readonly')).toBe('')
+  })
+
+  it('should hide the clear button when readOnly and a value are provided', () => {
+    const { container } = render(<Input defaultValue="test" readOnly />)
+
+    expect(
+      container.querySelector('[aria-label="clear-button"]'),
+    ).not.toBeInTheDocument()
+  })
+
+  it('should show the clear button when a value is provided without readOnly', () => {
+    const { container } = render(<Input defaultValue="test" />)
+
+    expect(
+      container.querySelector('[aria-label="clear-button"]'),
+    ).toBeInTheDocument()
+    expect(container.querySelector('input')).not.toHaveAttribute('readonly')
+  })
+})

packages/components/src/components/Input/index.tsx

@@ -176,6 +176,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
         pl={icon ? '36px' : '12px'}
         pr={allowClear ? '36px' : '12px'}
         py="12px"
+        readOnly={readOnly}
         styleOrder={1}
         transition="all 0.1s ease-in-out"
         typography={typography}