@agentero/design-system 0.35.0 → 0.36.0

package/mcp/manifests/components.json

@@ -6673,6 +6673,284 @@
       ],
       "import": "import {\n    Button,\n    Divider,\n    DropdownMenu,\n    Field,\n    FieldText,\n    IconKeyboardArrowDown,\n    IconSearch,\n    Input,\n    InputGroup,\n    Label,\n    Tag,\n} from \"@agentero/design-system\";"
     },
+    "components-inputnumber": {
+      "id": "components-inputnumber",
+      "name": "InputNumber",
+      "path": "./src/input-number/input-number.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Numeric input formatting as you type, built on react-number-format"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-number\""
+        ],
+        "example": [
+          "<FieldText>\n  <Label>Annual premium</Label>\n  <InputNumber name=\"premium\" thousandSeparator allowLeadingZeros={false} />\n</FieldText>"
+        ]
+      },
+      "description": "InputNumber is a text field that only takes digits and a decimal point and\nformats them as the user types: thousands separators on request, leading\nzeros kept unless turned off, no sign. `onChange` fires with the formatted text in\n`event.target.value`. It is an `Input` driven by `react-number-format`, so\nit takes its label, messages and states from a surrounding `FieldText`.",
+      "summary": "Numeric input formatting as you type, built on react-number-format",
+      "reactComponentMeta": {
+        "displayName": "InputNumber",
+        "exportName": "InputNumber",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-number/input-number.tsx",
+        "description": "InputNumber is a text field that only takes digits and a decimal point and\nformats them as the user types: a thousands separator when\n`thousandSeparator` is set, leading zeros kept unless `allowLeadingZeros` is\noff, no sign, no decimal rounding.\nAnything that is not a digit or the decimal point is ignored, and\n`maxNumber` drops any edit that would exceed it. `onChange` fires with the\nformatted text in `event.target.value` (`\"1,234\"`, not `1234`), which is\nwhat a form library stores; parse it where the number is consumed.\n\nIt is an [Input](?path=/docs/components-input--docs) driven by\n`react-number-format`, so it keeps the caret in place while it reformats\nand takes its wiring from a surrounding `FieldText` as a plain `Input`\ndoes. Every standard `<input>` attribute is accepted and forwarded, such as\n`placeholder`, `required`, `maxLength` or `aria-invalid`; `type` is limited\nto `text`, `tel` and `password`, and `value` and `defaultValue` also take a\nnumber or `null`. The invalid state comes from `aria-invalid`, which paints\nthe destructive border. Place it inside an\n[InputGroup](?path=/docs/components-inputgroup--docs) to show a currency or\nunit affix.\n\nDo not use it for a phone number, which is formatted by `InputTel`, nor for\nfree text with some digits in it, which is a plain `Input`. It is not a\n`type=\"number\"` input on purpose: that one drops leading zeros and cannot\nshow separators, which identifiers and amounts both need.\n\nIt renders from `value`, not from the DOM, so bind it to a form through a\ncontrolled value (react-hook-form's `Controller` or `useController`), not\nthrough `register`: a value `register` writes into the `<input>`, such as a\ndefault or a `reset`, is wiped on the next render.",
+        "jsDocTags": {
+          "summary": [
+            "Numeric input formatting as you type, built on react-number-format"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-number\""
+          ],
+          "example": [
+            "<FieldText>\n  <Label>Annual premium</Label>\n  <InputNumber name=\"premium\" thousandSeparator allowLeadingZeros={false} />\n</FieldText>"
+          ]
+        },
+        "props": {
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n  the text to `base` and the corner radius to `lg`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputProps",
+              "fileName": "src/input/input.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "maxNumber": {
+            "name": "maxNumber",
+            "required": false,
+            "type": {
+              "name": "number"
+            },
+            "description": "Highest value the field accepts. A keystroke or paste that would take\nthe number above it is dropped before it reaches the field, so `onChange`\nis not called for it. No limit by default.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "thousandSeparator": {
+            "name": "thousandSeparator",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Groups the integer part in thousands with a comma as the user types\n(`1,234,567`). The separators are part of `event.target.value`. Defaults\nto `false`.",
+            "defaultValue": {
+              "value": "false"
+            },
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "allowLeadingZeros": {
+            "name": "allowLeadingZeros",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Keeps zeros typed in front of the number (`007`), which an identifier\nsuch as an NPN or a ZIP code needs. Set it to `false` for an amount, so\n`007` becomes `7` once the field loses focus, and `onChange` fires with\nthe trimmed value. Defaults to `true`.",
+            "defaultValue": {
+              "value": "true"
+            },
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "type": {
+            "name": "type",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"text\" | \"tel\" | \"password\"",
+              "value": [
+                {
+                  "value": "\"text\""
+                },
+                {
+                  "value": "\"tel\""
+                },
+                {
+                  "value": "\"password\""
+                }
+              ]
+            },
+            "description": "The underlying `<input>` type. Defaults to `'text'`.\n- `text` — the general case.\n- `tel` — brings up the numeric keypad on phones, for codes and\n  identifiers that are digits only.\n- `password` — masks the digits, for a PIN.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "value": {
+            "name": "value",
+            "required": false,
+            "type": {
+              "name": "string | number | null | undefined"
+            },
+            "description": "The number to show, as a number or as a string of digits. It is displayed\nformatted according to `thousandSeparator`. `null` and `''` both clear the\nfield.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "defaultValue": {
+            "name": "defaultValue",
+            "required": false,
+            "type": {
+              "name": "string | number | null | undefined"
+            },
+            "description": "Initial value of an uncontrolled field, in the same forms as `value`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputnumber--default",
+          "name": "Default",
+          "snippet": "const Default = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    ref={inputRef} />;",
+          "description": "Only digits and a decimal point make it into the field: letters and a minus\nsign are ignored as they are typed. `onChange` reports the text as it is shown, and the `ref`\npoints at the `<input>` element.",
+          "summary": "Numeric field that ignores letters and signs"
+        },
+        {
+          "id": "components-inputnumber--type-tel",
+          "name": "Type Tel",
+          "snippet": "const TypeTel = () => <InputNumber\n    aria-label=\"NPN\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    type=\"tel\" />;",
+          "description": "`type=\"tel\"` brings up the numeric keypad on phones. The field still\nformats and filters the same way; only the underlying input type changes.",
+          "summary": "Numeric keypad on phones through the tel input type"
+        },
+        {
+          "id": "components-inputnumber--thousand-separator",
+          "name": "Thousand Separator",
+          "snippet": "const ThousandSeparator = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    thousandSeparator />;",
+          "description": "With `thousandSeparator` the integer part is grouped with commas as the\nuser types, and the commas are part of what `onChange` reports.",
+          "summary": "Thousands grouped with commas as the user types"
+        },
+        {
+          "id": "components-inputnumber--max-number",
+          "name": "Max Number",
+          "snippet": "const MaxNumber = () => <InputNumber\n    aria-label=\"Commission rate\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    maxNumber={100} />;",
+          "description": "`maxNumber` caps the value: a keystroke that would push the number above\nit is dropped, so the field keeps its previous value and `onChange` is not\ncalled for it.",
+          "summary": "Keystrokes that would exceed a maximum are dropped"
+        },
+        {
+          "id": "components-inputnumber--leading-zeros",
+          "name": "Leading Zeros",
+          "snippet": "const LeadingZeros = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        aria-label=\"ZIP code\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        aria-label=\"Amount\"\n        allowLeadingZeros={false} />\n</div>;",
+          "description": "Leading zeros are kept by default, as an NPN or a ZIP code needs. With\n`allowLeadingZeros` off they are dropped once the field loses focus, which\nis what an amount wants, and `onChange` reports the trimmed value.",
+          "summary": "Leading zeros kept by default, dropped on blur when turned off"
+        },
+        {
+          "id": "components-inputnumber--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [premium, setPremium] = useState<number | string>(1234);\n\n    return (\n        <InputNumber\n            aria-label=\"Premium\"\n            thousandSeparator\n            value={premium}\n            onChange={event => {\n                setPremium(event.target.value);\n                args.onChange?.(event);\n            }} />\n    );\n};",
+          "description": "A controlled field takes `value` as a number and shows it formatted. The\nstate keeps what `onChange` reports, so it holds the formatted text.",
+          "summary": "Controlled field showing a numeric value formatted"
+        },
+        {
+          "id": "components-inputnumber--inside-input-group",
+          "name": "Inside Input Group",
+          "snippet": "const InsideInputGroup = () => <InputGroup.Root>\n    <InputGroup.Text>$</InputGroup.Text>\n    <InputNumber\n        aria-label=\"Premium\"\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        allowLeadingZeros={false}\n        placeholder=\"0\" />\n</InputGroup.Root>;",
+          "description": "Inside an `InputGroup` the field sits behind a currency affix and the\nframe takes its focus, disabled and invalid states from the input.",
+          "summary": "Amount with a currency prefix inside an input group"
+        },
+        {
+          "id": "components-inputnumber--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <div style={{ display: 'grid', gap: '1.5rem' }}>\n        <FieldText required>\n            <Label>NPN</Label>\n            <InputNumber type=\"tel\" />\n            <Field.Description>The 7 to 10 digit National Producer Number.</Field.Description>\n        </FieldText>\n        <FieldText invalid>\n            <Label>Years in business</Label>\n            <InputNumber defaultValue={150} />\n            <Field.Error errors={[{ message: 'Enter at most 100 years.' }]} />\n        </FieldText>\n        <FieldText disabled>\n            <Label>Agency code</Label>\n            <InputNumber defaultValue=\"00412\" />\n        </FieldText>\n    </div>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field. `invalid` on the field sets `aria-invalid`, which paints the\ndestructive border, and `disabled` reaches the input the same way.",
+          "summary": "Label, messages and states reaching the input from a FieldText"
+        },
+        {
+          "id": "components-inputnumber--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    disabled\n    thousandSeparator\n    defaultValue={12500} />;",
+          "description": "A disabled field keeps its formatted value and takes no input.",
+          "summary": "Disabled field with a formatted value"
+        },
+        {
+          "id": "components-inputnumber--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    aria-invalid\n    defaultValue={0} />;",
+          "description": "`aria-invalid` paints the destructive border, the same way it does on a\nplain `Input`.",
+          "summary": "Invalid state driven by aria-invalid"
+        },
+        {
+          "id": "components-inputnumber--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"sm\"\n        aria-label=\"Small\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"md\"\n        aria-label=\"Medium\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"lg\"\n        aria-label=\"Large\" />\n</div>;",
+          "description": "The three sizes match Input's: 32, 40 or 48px tall.",
+          "summary": "The three sizes side by side"
+        }
+      ],
+      "import": "import { Controller, Field, FieldText, InputContext, InputGroup, InputNumber, Label } from \"@agentero/design-system\";"
+    },
     "components-inputpassword": {
       "id": "components-inputpassword",
       "name": "InputPassword",
@@ -6779,6 +7057,174 @@
       ],
       "import": "import { Field, FieldText, InputPassword, Label } from \"@agentero/design-system\";"
     },
+    "components-debouncedinputsearch": {
+      "id": "components-debouncedinputsearch",
+      "name": "DebouncedInputSearch",
+      "path": "./src/input-search/debounced-input-search.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Search input that reports the query once the user pauses typing"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-search\" on the frame"
+        ],
+        "example": [
+          "<DebouncedInputSearch\n  aria-label=\"Search agencies\"\n  value={filters.query}\n  onChange={event => setFilters({ ...filters, query: event.target.value })}\n  isLoading={isFetching}\n/>"
+        ]
+      },
+      "description": "DebouncedInputSearch is an `InputSearch` for filters that are expensive to\nrun. Keystrokes show up at once, but `onChange` fires only once the user\npauses for 300ms, with the last change event. It is always controlled:\n`value` and `onChange` are required, and the field follows a `value`\nchanged from outside.",
+      "summary": "Search input that reports the query once the user pauses typing",
+      "reactComponentMeta": {
+        "displayName": "DebouncedInputSearch",
+        "exportName": "DebouncedInputSearch",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-search/debounced-input-search.tsx",
+        "description": "DebouncedInputSearch is an [InputSearch](?path=/docs/components-inputsearch--docs)\nfor filters that are expensive to run: a table query, a request to the\nserver. Keystrokes show up in the field at once, but `onChange` fires only\nonce the user pauses for `DEBOUNCE_TIME` (300ms), with the last change\nevent, so the page runs one search per pause instead of one per key. It is\nalways controlled: `value` and `onChange` are required, the page owns the\nquery, and the field follows a `value` changed from outside while the user\nis not typing.\n\nEvery other prop goes to the InputSearch and from there to the `<input>`:\nthe `ref`, `size`, `isLoading`, `placeholder`, `aria-*` and every other\nstandard attribute. Only `type` is not accepted. `className` styles the\nframe.\n\nDo not use it where every keystroke matters, such as filtering a short list\nalready in memory; that is a plain\n[InputSearch](?path=/docs/components-inputsearch--docs). To pick a value from\nthe results, use [Combobox](?path=/docs/components-combobox--docs).",
+        "jsDocTags": {
+          "summary": [
+            "Search input that reports the query once the user pauses typing"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-search\" on the frame"
+          ],
+          "example": [
+            "<DebouncedInputSearch\n  aria-label=\"Search agencies\"\n  value={filters.query}\n  onChange={event => setFilters({ ...filters, query: event.target.value })}\n  isLoading={isFetching}\n/>"
+          ]
+        },
+        "props": {
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n  the text to `base` and the corner radius to `lg`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputProps",
+              "fileName": "src/input/input.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          },
+          "clearLabel": {
+            "name": "clearLabel",
+            "required": false,
+            "type": {
+              "name": "string"
+            },
+            "description": "Accessible name of the clear button. Defaults to `'Clear search'`; name it\nafter what is searched (`'Clear agency search'`) when a page carries\nseveral search fields.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputSearchProps",
+              "fileName": "src/input-search/input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/input-search.tsx"
+              }
+            ]
+          },
+          "isLoading": {
+            "name": "isLoading",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Shows a spinner at the end of the frame, in place of the clear button,\nwhile the results for the current text are on their way. Defaults to\n`false`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputSearchProps",
+              "fileName": "src/input-search/input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/input-search.tsx"
+              }
+            ]
+          },
+          "value": {
+            "name": "value",
+            "required": true,
+            "type": {
+              "name": "string"
+            },
+            "description": "The query the page is filtering by. The field shows it, and follows it\nwhen it changes from outside (a reset button, a saved filter, navigation),\nunless the user is in the middle of typing: then what they typed stays,\nand `onChange` reports it once they pause.",
+            "defaultValue": null,
+            "parent": {
+              "name": "DebouncedInputSearchProps",
+              "fileName": "src/input-search/debounced-input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/debounced-input-search.tsx"
+              }
+            ]
+          },
+          "onChange": {
+            "name": "onChange",
+            "required": true,
+            "type": {
+              "name": "ChangeEventHandler<HTMLInputElement>"
+            },
+            "description": "Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,\nwith the change event of the last keystroke; clearing the field goes\nthrough the same delay. A pending call fires at once when the user\npresses Enter, and is dropped when the field unmounts, so a page that is\nnavigating away is not sent back. Read the text from `event.target.value`, which is\nwhat the field shows at that moment. `event.currentTarget` is no longer\nset by then, since the event is delivered after the browser's dispatch.",
+            "defaultValue": null,
+            "parent": {
+              "name": "DebouncedInputSearchProps",
+              "fileName": "src/input-search/debounced-input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/debounced-input-search.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-debouncedinputsearch--default",
+          "name": "Default",
+          "snippet": "const Default = () => {\n    const [query, setQuery] = useState(args.value);\n\n    return (\n        <div style={{ display: 'grid', gap: '1rem' }}>\n            <DebouncedInputSearch\n                aria-label=\"Search agencies\"\n                value={query}\n                onChange={event => {\n                    setQuery(event.target.value);\n                    args.onChange(event);\n                }} />\n            <output>Filtering by: {query}</output>\n        </div>\n    );\n};",
+          "description": "A page filtering by a query it owns, shown below the field. Typing shows up\nin the field at once; `onChange` arrives once the user pauses, with the\nwhole text in `event.target.value`, and only then does the query below\nchange. Clearing the field goes through the same delay.",
+          "summary": "Controlled query reported once the user stops typing"
+        },
+        {
+          "id": "components-debouncedinputsearch--external-value",
+          "name": "External Value",
+          "snippet": "const ExternalValue = () => {\n    const [query, setQuery] = useState('Acme');\n\n    return (\n        <div style={{ display: 'grid', gap: '1rem' }}>\n            <DebouncedInputSearch\n                aria-label=\"Search agencies\"\n                value={query}\n                onChange={event => {\n                    setQuery(event.target.value);\n                    args.onChange(event);\n                }} />\n            <Button variant=\"secondary\" size=\"sm\" onClick={() => setQuery('Travelers')}>Apply saved search\n                                </Button>\n            <output>Filtering by: {query}</output>\n        </div>\n    );\n};",
+          "description": "The field follows `value` when the page changes it from outside, here a\nsaved search applied with a button: nothing is being typed, so the new\nquery replaces the text.",
+          "summary": "Field following a value changed from outside while idle"
+        },
+        {
+          "id": "components-debouncedinputsearch--submit-on-enter",
+          "name": "Submit On Enter",
+          "snippet": "const SubmitOnEnter = () => {\n    const [query, setQuery] = useState(args.value);\n\n    return (\n        <div style={{ display: 'grid', gap: '1rem' }}>\n            <DebouncedInputSearch\n                aria-label=\"Search agencies\"\n                value={query}\n                onChange={event => {\n                    setQuery(event.target.value);\n                    args.onChange(event);\n                }} />\n            <output>Filtering by: {query}</output>\n        </div>\n    );\n};",
+          "description": "Pressing Enter reports the text at once instead of waiting for the pause.",
+          "summary": "Enter reports the pending query without waiting"
+        }
+      ],
+      "import": "import { Button, DebouncedInputSearch } from \"@agentero/design-system\";"
+    },
     "components-inputsearch": {
       "id": "components-inputsearch",
       "name": "InputSearch",
@@ -10055,6 +10501,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4990
+    "durationMs": 5136
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.35.0",
+	"version": "0.36.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -97,6 +97,10 @@
 			"types": "./src/input-group/index.d.ts",
 			"import": "./src/input-group/index.js"
 		},
+		"./input-number": {
+			"types": "./src/input-number/index.d.ts",
+			"import": "./src/input-number/index.js"
+		},
 		"./input-password": {
 			"types": "./src/input-password/index.d.ts",
 			"import": "./src/input-password/index.js"
@@ -214,8 +218,10 @@
 		"@radix-ui/react-tooltip": "^1.2.11",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
+		"react-number-format": "5.4.5",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",
-		"tailwind-variants": "^3.2.2"
+		"tailwind-variants": "^3.2.2",
+		"use-debounce": "^10.1.1"
 	}
 }

package/src/input/context.d.ts

@@ -6,12 +6,21 @@ import { InputProps } from './input';
  * and `ref`. An `Input` with no provider above it reads `null` and uses only
  * its own props.
  */
-export declare const InputContext: import('react').Context<Partial<InputProps> | null>;
+export type InputContextValue = Pick<InputProps, 'id' | 'aria-describedby' | 'aria-invalid' | 'required' | 'disabled' | 'readOnly' | 'name' | 'onChange' | 'onBlur' | 'ref'> & {
+    value?: string | number;
+};
+export declare const InputContext: import('react').Context<InputContextValue | null>;
 /**
  * Merges the surrounding `InputContext`, if any, under the input's own props.
  * Own props win; handlers present on both sides are chained and
  * `aria-describedby` ids are concatenated. In development it warns when the
  * input carries an `id` that differs from the one the container provides,
  * since the label would then point elsewhere.
+ *
+ * Generic over the props so a wrapper whose props narrow or widen the
+ * input's (a `type` limited to a few values, a `value` that takes `null`)
+ * gets its own type back, with the context's wiring merged in. The props must
+ * accept everything the context can carry; when they do not, `props` resolves
+ * to `never` and the call does not compile.
  */
-export declare const useInputContext: (props: InputProps) => InputProps;
+export declare const useInputContext: <P extends Pick<InputProps, "id">>(props: P & (InputContextValue extends Partial<P> ? unknown : never)) => P;

package/src/input/index.d.ts

@@ -1,3 +1,4 @@
 export { InputContext, useInputContext } from './context';
+export type { InputContextValue } from './context';
 export { Input, inputRecipe } from './input';
 export type { InputProps, InputSize, InputVariants } from './input';

package/src/input-number/index.d.ts

@@ -0,0 +1,2 @@
+export { InputNumber } from './input-number';
+export type { InputNumberProps } from './input-number';

package/src/input-number/index.js

@@ -0,0 +1,2 @@
+import { InputNumber as e } from "./input-number.js";
+export { e as InputNumber };

package/src/input-number/input-number.d.ts

@@ -0,0 +1,82 @@
+import { InputProps } from '../input';
+export type InputNumberProps = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
+    /**
+     * Highest value the field accepts. A keystroke or paste that would take
+     * the number above it is dropped before it reaches the field, so `onChange`
+     * is not called for it. No limit by default.
+     */
+    maxNumber?: number;
+    /**
+     * Groups the integer part in thousands with a comma as the user types
+     * (`1,234,567`). The separators are part of `event.target.value`. Defaults
+     * to `false`.
+     */
+    thousandSeparator?: boolean;
+    /**
+     * Keeps zeros typed in front of the number (`007`), which an identifier
+     * such as an NPN or a ZIP code needs. Set it to `false` for an amount, so
+     * `007` becomes `7` once the field loses focus, and `onChange` fires with
+     * the trimmed value. Defaults to `true`.
+     */
+    allowLeadingZeros?: boolean;
+    /**
+     * The underlying `<input>` type. Defaults to `'text'`.
+     * - `text` — the general case.
+     * - `tel` — brings up the numeric keypad on phones, for codes and
+     *   identifiers that are digits only.
+     * - `password` — masks the digits, for a PIN.
+     */
+    type?: 'password' | 'tel' | 'text';
+    /**
+     * The number to show, as a number or as a string of digits. It is displayed
+     * formatted according to `thousandSeparator`. `null` and `''` both clear the
+     * field.
+     */
+    value?: number | string | null;
+    /** Initial value of an uncontrolled field, in the same forms as `value`. */
+    defaultValue?: number | string | null;
+};
+/**
+ * InputNumber is a text field that only takes digits and a decimal point and
+ * formats them as the user types: a thousands separator when
+ * `thousandSeparator` is set, leading zeros kept unless `allowLeadingZeros` is
+ * off, no sign, no decimal rounding.
+ * Anything that is not a digit or the decimal point is ignored, and
+ * `maxNumber` drops any edit that would exceed it. `onChange` fires with the
+ * formatted text in `event.target.value` (`"1,234"`, not `1234`), which is
+ * what a form library stores; parse it where the number is consumed.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) driven by
+ * `react-number-format`, so it keeps the caret in place while it reformats
+ * and takes its wiring from a surrounding `FieldText` as a plain `Input`
+ * does. Every standard `<input>` attribute is accepted and forwarded, such as
+ * `placeholder`, `required`, `maxLength` or `aria-invalid`; `type` is limited
+ * to `text`, `tel` and `password`, and `value` and `defaultValue` also take a
+ * number or `null`. The invalid state comes from `aria-invalid`, which paints
+ * the destructive border. Place it inside an
+ * [InputGroup](?path=/docs/components-inputgroup--docs) to show a currency or
+ * unit affix.
+ *
+ * Do not use it for a phone number, which is formatted by `InputTel`, nor for
+ * free text with some digits in it, which is a plain `Input`. It is not a
+ * `type="number"` input on purpose: that one drops leading zeros and cannot
+ * show separators, which identifiers and amounts both need.
+ *
+ * It renders from `value`, not from the DOM, so bind it to a form through a
+ * controlled value (react-hook-form's `Controller` or `useController`), not
+ * through `register`: a value `register` writes into the `<input>`, such as a
+ * default or a `reset`, is wiped on the next render.
+ *
+ * @summary Numeric input formatting as you type, built on react-number-format
+ * @dataAttribute {string} data-slot - Always set to "input-number"
+ *
+ * @example
+ * <FieldText>
+ *   <Label>Annual premium</Label>
+ *   <InputNumber name="premium" thousandSeparator allowLeadingZeros={false} />
+ * </FieldText>
+ */
+export declare const InputNumber: {
+    (props: InputNumberProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};