@agentero/design-system 0.34.2 → 0.35.1

package/mcp/manifests/components.json

@@ -6779,6 +6779,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",
@@ -6941,6 +7109,154 @@
       ],
       "import": "import { Field, FieldText, InputSearch, Label } from \"@agentero/design-system\";"
     },
+    "components-inputtel": {
+      "id": "components-inputtel",
+      "name": "InputTel",
+      "path": "./src/input-tel/input-tel.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "US phone input with a +1 prefix that masks as you type"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-tel\" on the frame"
+        ],
+        "example": [
+          "<FieldText>\n  <Label>Phone number</Label>\n  <InputTel name=\"phone\" autoComplete=\"tel-national\" placeholder=\"(555) 000-0000\" />\n</FieldText>"
+        ]
+      },
+      "description": "InputTel is a US phone number field that masks as you type: the digits are\nlaid out as `(555) 123-4567`, anything else is dropped and the caret stays\nnext to the digit just edited. It is an `Input` of `type=\"tel\"` inside an\n`InputGroup` frame with a `+1` prefix; `onChange` receives the native event\nwith the masked text already in `event.target.value`.",
+      "summary": "US phone input with a +1 prefix that masks as you type",
+      "reactComponentMeta": {
+        "displayName": "InputTel",
+        "exportName": "InputTel",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-tel/input-tel.tsx",
+        "description": "InputTel is a US phone number field that masks as you type: the digits the\nuser enters are laid out as `(555) 123-4567` while typing, pasting or\ndeleting, anything that is not a digit is dropped, and the caret stays next\nto the digit just edited instead of jumping to the end. A leading `+1`\ncountry code, as pasted or filled in by the browser's autofill, is dropped\ntoo; past that, the eleventh digit and beyond are ignored. `onChange`\nreceives the native change event with the masked text already in\n`event.target.value`, so a controlled field, an uncontrolled one and one\nregistered with react-hook-form all store `(555) 123-4567`, never the bare\ndigits.\n\nIt is an [Input](?path=/docs/components-input--docs) of `type=\"tel\"` inside\nan [InputGroup](?path=/docs/components-inputgroup--docs) frame that always\nshows a `+1` prefix in front of the number. The prefix is part of the frame,\nnot of the value. `className` styles the frame. Every other prop goes to the\n`<input>`: the `ref`, `id`, `name`, `value`, `onChange`, `aria-*` and every\nother standard attribute, such as `placeholder`, `autoComplete` or\n`required`. Only `type` is not accepted. Inside a `FieldText` the input\ntakes its label, messages and states from the field as a plain `Input` does.\nThe invalid state comes from `aria-invalid`, and the frame paints the\ndestructive border.\n\nDo not use it for international numbers or extensions; the mask only knows\nthe ten-digit US format. For free-form text that happens to hold a number,\nuse `Input`.",
+        "jsDocTags": {
+          "summary": [
+            "US phone input with a +1 prefix that masks as you type"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-tel\" on the frame"
+          ],
+          "example": [
+            "<FieldText>\n  <Label>Phone number</Label>\n  <InputTel name=\"phone\" autoComplete=\"tel-national\" placeholder=\"(555) 000-0000\" />\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"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputtel--default",
+          "name": "Default",
+          "snippet": "const Default = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "An uncontrolled phone field with its `+1` prefix. Typing the ten digits lays\nthem out as `(555) 123-4567`, and every `onChange` call carries the masked\ntext in `event.target.value`; the prefix never enters the value.",
+          "summary": "Phone field with a +1 prefix masking the digits as they are typed"
+        },
+        {
+          "id": "components-inputtel--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [phone, setPhone] = useState('');\n\n    return (\n        <InputTel\n            aria-label=\"Phone number\"\n            value={phone}\n            onChange={event => {\n                setPhone(event.target.value);\n                args.onChange?.(event);\n            }} />\n    );\n};",
+          "description": "A controlled phone field. The state that owns the value stores what\n`event.target.value` reports, which is already masked, and the input shows\nit back unchanged. A partial number carries the separator that comes before\nthe next digit, so six digits read `(555) 123-`.",
+          "summary": "Controlled phone field storing the masked value"
+        },
+        {
+          "id": "components-inputtel--caret-in-the-middle",
+          "name": "Caret In The Middle",
+          "snippet": "const CaretInTheMiddle = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "Editing in the middle of a full number: a digit typed after `(5` shifts the\nrest right, the eleventh digit falls off the end and the caret stays after\nthe digit just typed instead of jumping to the end.",
+          "summary": "Caret staying put when a digit is inserted mid-number"
+        },
+        {
+          "id": "components-inputtel--backspace-over-mask-characters",
+          "name": "Backspace Over Mask Characters",
+          "snippet": "const BackspaceOverMaskCharacters = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "Backspace over the mask's own characters: after `555` the field shows\n`(555) `, and deleting backwards trims the separators along with the digit\nunder the caret instead of leaving a dangling `) `.",
+          "summary": "Backspace trimming the separators the mask added"
+        },
+        {
+          "id": "components-inputtel--paste",
+          "name": "Paste",
+          "snippet": "const Paste = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "A pasted number in any format is reduced to its digits and masked, so\n`555-123-4567` from a clipboard ends up as `(555) 123-4567`.",
+          "summary": "Pasted number reduced to its digits and masked"
+        },
+        {
+          "id": "components-inputtel--paste-with-country-code",
+          "name": "Paste With Country Code",
+          "snippet": "const PasteWithCountryCode = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)} />;",
+          "description": "A number that carries the `+1` country code, as copied from a signature or\nfilled in by the browser's autofill, loses the code and keeps its ten\nnational digits: `+1 (555) 123-4567` ends up as `(555) 123-4567`.",
+          "summary": "Pasted number with a +1 country code"
+        },
+        {
+          "id": "components-inputtel--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <FieldText>\n        <Label>Phone number</Label>\n        <InputTel />\n        <Field.Description>We only call about your account.</Field.Description>\n    </FieldText>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field, and the masked value still reaches a handler the field provides.",
+          "summary": "Label and description reaching the input through the field"
+        },
+        {
+          "id": "components-inputtel--with-react-hook-form",
+          "name": "With React Hook Form",
+          "snippet": "const WithReactHookForm = () => {\n    const { register, handleSubmit } = useForm<ContactValues>({\n        defaultValues: { phone: '' }\n    });\n\n    return (\n        <form\n            aria-label=\"Contact\"\n            noValidate\n            onSubmit={handleSubmit(values => onSubmit(values))}\n            style={{ display: 'grid', gap: '1rem' }}>\n            <InputTel aria-label=\"Phone number\" {...register('phone')} />\n            <Button type=\"submit\">Save</Button>\n        </form>\n    );\n};",
+          "description": "Registered with react-hook-form, the form receives the masked value: the\n`register` handler reads `event.target.value` like any other change.",
+          "summary": "Masked value reaching react-hook-form through register"
+        },
+        {
+          "id": "components-inputtel--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <InputTel\n    aria-label=\"Phone number\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    disabled\n    defaultValue=\"(555) 123-4567\" />;",
+          "description": "A disabled phone field keeps its masked value and takes no input.",
+          "summary": "Disabled phone field"
+        },
+        {
+          "id": "components-inputtel--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => (\n    <FieldText invalid>\n        <Label>Phone number</Label>\n        <InputTel defaultValue=\"(555) 12\" />\n        <Field.Error errors={[{ message: 'Enter a 10-digit phone number.' }]} />\n    </FieldText>\n);",
+          "description": "`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,\nwhich paints the frame's destructive border, and `Field.Error` is announced\nwith the input.",
+          "summary": "Invalid field driving the frame's destructive border"
+        },
+        {
+          "id": "components-inputtel--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"sm\"\n        aria-label=\"Small\"\n        defaultValue=\"(555) 123-4567\" />\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"md\"\n        aria-label=\"Medium\"\n        defaultValue=\"(555) 123-4567\" />\n    <InputTel\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"lg\"\n        aria-label=\"Large\"\n        defaultValue=\"(555) 123-4567\" />\n</div>;",
+          "description": "The three sizes match Input's: the frame is 32, 40 or 48px tall.",
+          "summary": "The three sizes side by side"
+        }
+      ],
+      "import": "import { Button, Field, FieldText, InputContext, InputTel, Label } from \"@agentero/design-system\";"
+    },
     "components-input": {
       "id": "components-input",
       "name": "Input",
@@ -9907,6 +10223,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3150
+    "durationMs": 3866
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.34.2",
+	"version": "0.35.1",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -105,6 +105,10 @@
 			"types": "./src/input-search/index.d.ts",
 			"import": "./src/input-search/index.js"
 		},
+		"./input-tel": {
+			"types": "./src/input-tel/index.d.ts",
+			"import": "./src/input-tel/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"
@@ -212,6 +216,7 @@
 		"cmdk": "^1.1.1",
 		"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-search/constants.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Milliseconds DebouncedInputSearch waits after the last keystroke before it
+ * calls `onChange`.
+ *
+ * @summary Debounce delay of DebouncedInputSearch, in milliseconds
+ */
+export declare const DEBOUNCE_TIME = 300;

package/src/input-search/constants.js

@@ -0,0 +1,4 @@
+//#region src/input-search/constants.ts
+var e = 300;
+//#endregion
+export { e as DEBOUNCE_TIME };

package/src/input-search/debounced-input-search.d.ts

@@ -0,0 +1,56 @@
+import { ChangeEventHandler } from 'react';
+import { InputSearchProps } from './input-search';
+export type DebouncedInputSearchProps = Omit<InputSearchProps, 'value' | 'defaultValue' | 'onChange'> & {
+    /**
+     * The query the page is filtering by. The field shows it, and follows it
+     * when it changes from outside (a reset button, a saved filter, navigation),
+     * unless the user is in the middle of typing: then what they typed stays,
+     * and `onChange` reports it once they pause.
+     */
+    value: string;
+    /**
+     * Fires once the user has stopped typing for `DEBOUNCE_TIME` milliseconds,
+     * with the change event of the last keystroke; clearing the field goes
+     * through the same delay. A pending call fires at once when the user
+     * presses Enter, and is dropped when the field unmounts, so a page that is
+     * navigating away is not sent back. Read the text from `event.target.value`, which is
+     * what the field shows at that moment. `event.currentTarget` is no longer
+     * set by then, since the event is delivered after the browser's dispatch.
+     */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+};
+/**
+ * DebouncedInputSearch is an [InputSearch](?path=/docs/components-inputsearch--docs)
+ * for filters that are expensive to run: a table query, a request to the
+ * server. Keystrokes show up in the field at once, but `onChange` fires only
+ * once the user pauses for `DEBOUNCE_TIME` (300ms), with the last change
+ * event, so the page runs one search per pause instead of one per key. It is
+ * always controlled: `value` and `onChange` are required, the page owns the
+ * query, and the field follows a `value` changed from outside while the user
+ * is not typing.
+ *
+ * Every other prop goes to the InputSearch and from there to the `<input>`:
+ * the `ref`, `size`, `isLoading`, `placeholder`, `aria-*` and every other
+ * standard attribute. Only `type` is not accepted. `className` styles the
+ * frame.
+ *
+ * Do not use it where every keystroke matters, such as filtering a short list
+ * already in memory; that is a plain
+ * [InputSearch](?path=/docs/components-inputsearch--docs). To pick a value from
+ * the results, use [Combobox](?path=/docs/components-combobox--docs).
+ *
+ * @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
+ *   aria-label="Search agencies"
+ *   value={filters.query}
+ *   onChange={event => setFilters({ ...filters, query: event.target.value })}
+ *   isLoading={isFetching}
+ * />
+ */
+export declare const DebouncedInputSearch: {
+    ({ value, onChange, onKeyDown, ...props }: DebouncedInputSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-search/debounced-input-search.js

@@ -0,0 +1,27 @@
+"use client";
+import { chain as e } from "../../lib/merge-props.js";
+import "./constants.js";
+import { InputSearch as t } from "./input-search.js";
+import { useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useDebouncedCallback as i } from "use-debounce";
+//#region src/input-search/debounced-input-search.tsx
+var a = ({ value: a, onChange: o, onKeyDown: s, ...c }) => {
+	let [l, u] = n(a), [d, f] = n(a), p = i(o, 300);
+	a !== d && (f(a), p.isPending() || u(a));
+	let m = (e) => {
+		u(e.target.value), p(e);
+	}, h = (e) => {
+		let t = e.nativeEvent.isComposing || e.keyCode === 229;
+		e.key === "Enter" && !t && p.flush();
+	};
+	return /* @__PURE__ */ r(t, {
+		...c,
+		value: l,
+		onChange: m,
+		onKeyDown: e(h, s)
+	});
+};
+a.displayName = "DebouncedInputSearch";
+//#endregion
+export { a as DebouncedInputSearch };

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

@@ -1,2 +1,5 @@
+export { DEBOUNCE_TIME } from './constants';
+export { DebouncedInputSearch } from './debounced-input-search';
+export type { DebouncedInputSearchProps } from './debounced-input-search';
 export { InputSearch, inputSearchRecipe } from './input-search';
 export type { InputSearchProps } from './input-search';

package/src/input-search/index.js

@@ -1,2 +1,4 @@
-import { InputSearch as e, inputSearchRecipe as t } from "./input-search.js";
-export { e as InputSearch, t as inputSearchRecipe };
+import { DEBOUNCE_TIME as e } from "./constants.js";
+import { InputSearch as t, inputSearchRecipe as n } from "./input-search.js";
+import { DebouncedInputSearch as r } from "./debounced-input-search.js";
+export { e as DEBOUNCE_TIME, r as DebouncedInputSearch, t as InputSearch, n as inputSearchRecipe };

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

@@ -0,0 +1,2 @@
+export { InputTel } from './input-tel';
+export type { InputTelProps } from './input-tel';

package/src/input-tel/index.js

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

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

@@ -0,0 +1,42 @@
+import { InputProps } from '../input';
+export type InputTelProps = Omit<InputProps, 'type'>;
+/**
+ * InputTel is a US phone number field that masks as you type: the digits the
+ * user enters are laid out as `(555) 123-4567` while typing, pasting or
+ * deleting, anything that is not a digit is dropped, and the caret stays next
+ * to the digit just edited instead of jumping to the end. A leading `+1`
+ * country code, as pasted or filled in by the browser's autofill, is dropped
+ * too; past that, the eleventh digit and beyond are ignored. `onChange`
+ * receives the native change event with the masked text already in
+ * `event.target.value`, so a controlled field, an uncontrolled one and one
+ * registered with react-hook-form all store `(555) 123-4567`, never the bare
+ * digits.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) of `type="tel"` inside
+ * an [InputGroup](?path=/docs/components-inputgroup--docs) frame that always
+ * shows a `+1` prefix in front of the number. The prefix is part of the frame,
+ * not of the value. `className` styles the frame. Every other prop goes to the
+ * `<input>`: the `ref`, `id`, `name`, `value`, `onChange`, `aria-*` and every
+ * other standard attribute, such as `placeholder`, `autoComplete` or
+ * `required`. Only `type` is not accepted. Inside a `FieldText` the input
+ * takes its label, messages and states from the field as a plain `Input` does.
+ * The invalid state comes from `aria-invalid`, and the frame paints the
+ * destructive border.
+ *
+ * Do not use it for international numbers or extensions; the mask only knows
+ * the ten-digit US format. For free-form text that happens to hold a number,
+ * use `Input`.
+ *
+ * @summary US phone input with a +1 prefix that masks as you type
+ * @dataAttribute {string} data-slot - Always set to "input-tel" on the frame
+ *
+ * @example
+ * <FieldText>
+ *   <Label>Phone number</Label>
+ *   <InputTel name="phone" autoComplete="tel-national" placeholder="(555) 000-0000" />
+ * </FieldText>
+ */
+export declare const InputTel: {
+    (props: InputTelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-tel/input-tel.js

@@ -0,0 +1,46 @@
+"use client";
+import { mergeRefs as e } from "../../lib/merge-props.js";
+import { InputContext as t, useInputContext as n } from "../input/context.js";
+import { Input as r } from "../input/input.js";
+import { InputGroup as i } from "../input-group/index.js";
+import { US_PHONE_MASK as a, applyMask as o, getCursorPosition as s, getDeletionType as c, toNationalDigits as l } from "./mask.js";
+import { useMemo as u, useRef as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/input-tel/input-tel.tsx
+var m = (m) => {
+	let { className: h, onChange: g, ref: _, ...v } = n(m), y = d(null), b = u(() => e(y, _), [_]), x = (e) => {
+		let t = c(e.nativeEvent.inputType), { value: n, selectionStart: r } = e.target, i = o({
+			value: l(n),
+			mask: a,
+			maskSymbol: ".",
+			trimNonMaskCharsLeftover: t === "backward"
+		}), u = s({
+			cursorPositionAfterInput: r ?? 0,
+			phoneAfterInput: n,
+			phoneAfterFormatted: i,
+			deletion: t
+		});
+		e.target.value = i;
+		let d = () => {
+			let e = y.current;
+			e && e === document.activeElement && e.setSelectionRange(u, u);
+		};
+		g ? (g(e), Promise.resolve().then(d)) : d();
+	};
+	return /* @__PURE__ */ p(i.Root, {
+		"data-slot": "input-tel",
+		className: h,
+		children: [/* @__PURE__ */ f(i.Text, { children: "+1" }), /* @__PURE__ */ f(t, {
+			value: null,
+			children: /* @__PURE__ */ f(r, {
+				...v,
+				type: "tel",
+				ref: b,
+				onChange: x
+			})
+		})]
+	});
+};
+m.displayName = "InputTel";
+//#endregion
+export { m as InputTel };

package/src/input-tel/mask.d.ts

@@ -0,0 +1,51 @@
+/** The US phone mask InputTel applies: three groups of 3, 3 and 4 digits. */
+export declare const US_PHONE_MASK = "(...) ...-....";
+/** The character that marks a digit slot in a mask. */
+export declare const MASK_SYMBOL = ".";
+/**
+ * Reduces a phone number in any format to its national digits: drops
+ * everything that is not a digit and, past ten digits, the leading `1` of the
+ * `+1` country code. No US area code starts with `1`, so a national number is
+ * never cut.
+ */
+export declare const toNationalDigits: (value: string) => string;
+type ApplyMaskArgs = {
+    value: string;
+    mask: string;
+    maskSymbol: string;
+    /**
+     * @description Removes all non-maskSymbol chars from the result's ending if the value is shorter than the mask
+     * @example
+     * value: "1234"
+     * mask: "(....) ...."
+     * if true -> "(1234"
+     * if false -> "(1234) "
+     */
+    trimNonMaskCharsLeftover?: boolean;
+};
+/**
+ * Places each character of `value` in the next `maskSymbol` slot of `mask`,
+ * keeping the mask's own characters in between. A value longer than the mask
+ * is cut; a shorter one stops at its last character, followed by the
+ * separators up to the next slot unless `trimNonMaskCharsLeftover` is set.
+ */
+export declare const applyMask: ({ value, mask, maskSymbol, trimNonMaskCharsLeftover }: ApplyMaskArgs) => string;
+export declare const isNumeric: (str?: string) => boolean;
+type GetCursorPositionProps = {
+    phoneAfterInput: string;
+    phoneAfterFormatted: string;
+    cursorPositionAfterInput: number;
+    deletion?: 'forward' | 'backward' | undefined;
+};
+/**
+ * Finds where the caret should sit in the formatted phone after an edit, so
+ * that it stays after the digit the user just typed or removed instead of
+ * jumping to the end when the mask characters move around it.
+ */
+export declare const getCursorPosition: ({ phoneAfterInput, phoneAfterFormatted, cursorPositionAfterInput, deletion }: GetCursorPositionProps) => number;
+/**
+ * Reads the `inputType` of a native `input` event and tells whether the edit
+ * removed characters, and in which direction. `undefined` for an insertion.
+ */
+export declare const getDeletionType: (inputType?: string) => "forward" | "backward" | undefined;
+export {};