@agentero/design-system 0.33.1 → 0.34.0

package/mcp/manifests/components.json

@@ -2798,7 +2798,7 @@
           "id": "components-combobox--default",
           "name": "Default",
           "snippet": "const Default = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
-          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list. The field is\na search out of the box — a magnifier in front, a clear button once something is\npicked — and the list hangs from the whole field.",
+          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list. The field is\na search out of the box — a magnifier in front, a clear button once there is\ntext — and the list hangs from the whole field. Clearing drops the picked option.",
           "summary": "Search field with a magnifier and clear button over an in-memory list"
         },
         {
@@ -2837,14 +2837,14 @@
         {
           "id": "components-combobox--async-search",
           "name": "Async Search",
-          "snippet": "const AsyncSearch = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        // No `items` and `filter={null}`: the server did the filtering, the child renders what came\n        // back, and `isItemEqualToValue` keeps a re-fetched copy counting as the selected one.\n        <Combobox.Root\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={(value, { reason }) => {\n                // Picking a row writes its label into the input; that is not a new search.\n                if (reason !== 'item-press') setQuery(value);\n            }}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content>\n                <Suspense fallback={<SkeletonRows />}>\n                    <AgencyItems query={query} />\n                </Suspense>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "Options fetched as you type, the way the apps load data: the rows are a component\nthat suspends on the request, so a `Suspense` boundary inside `Content` shows\nplaceholder rows until they land. Nothing tracks `loading` by hand and no stale\nlist lingers under the wait: the data is read by query, which is also what makes\nout-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is."
+          "snippet": "const AsyncSearch = () => {\n    const [query, setQuery] = useState('');\n    // The rows read the deferred query: while the new one suspends, React keeps rendering the\n    // old rows instead of falling back to the placeholders.\n    const deferredQuery = useDeferredValue(query);\n    const isStale = query !== deferredQuery;\n\n    return (\n        // No `items` and `filter={null}`: the server did the filtering, the child renders what came\n        // back, and `isItemEqualToValue` keeps a re-fetched copy counting as the selected one.\n        <Combobox.Root\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={(value, { reason }) => {\n                // Picking a row writes its label into the input; that is not a new search.\n                if (reason !== 'item-press') setQuery(value);\n            }}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isStale || undefined}>\n                <Suspense fallback={<SkeletonRows />}>\n                    <AgencyItems query={deferredQuery} />\n                </Suspense>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "Options fetched as you type, the way the apps load data: the rows are a component\nthat suspends on the request, so a `Suspense` boundary inside `Content` shows\nplaceholder rows until the first results land. The rows read a deferred copy of\nthe query, so a new search keeps the previous rows on screen while it loads and\n`Content` is marked busy until they are replaced; the placeholders never come\nback. Nothing tracks `loading` by hand, and reading the data by query is what\nmakes out-of-order responses harmless. With react-query, drop a\n`useSuspenseQuery` where `use()` is, or use `placeholderData: keepPreviousData`\nwith a plain `useQuery` for the same behaviour."
         },
         {
           "id": "components-combobox--async-search-with-status",
           "name": "Async Search With Status",
-          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows go before the wait starts: a list that no longer matches what is typed\n        // must not sit under the loading state.\n        setResults([]);\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
+          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows stay through the wait, marked busy, rather than blinking out and back.\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && results.length === 0 && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. Placeholder rows show\nonly while there is nothing to show yet; after that, the previous rows stay\nuntil the new ones replace them. A request that is no longer the latest is\ndropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
           "summary": "API search that waits for two characters, with loading status"
         },
         {
@@ -6552,7 +6552,7 @@
           "id": "components-inputgroup--default",
           "name": "Default",
           "snippet": "const Default = () => (\n    <InputGroup.Root>\n        <InputGroup.Addon>\n            <IconSearch />\n        </InputGroup.Addon>\n        <Input type=\"search\" placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n    </InputGroup.Root>\n);",
-          "description": "A search field: the icon leads and the input takes the rest of the frame.\nPressing the icon focuses the input, and the frame — not the input — draws the\nfocus ring, so the two never show a double border.",
+          "description": "A search field: the icon leads and the input takes the rest of the frame.\nPressing the icon focuses the input, and the frame — not the input — draws the\nfocus ring, so the two never show a double border. A search field with a\nclear button and a loading state is\n[InputSearch](?path=/docs/components-inputsearch--docs), built on this frame.",
           "summary": "Leading icon addon with the frame drawing the focus ring"
         },
         {
@@ -6609,11 +6609,6 @@
           "description": "Inside a `FieldText` nothing changes for the group: the `Input` reads the\nfield's context at any depth, so the label names it and the description\ndescribes it with no ids written by hand. The frame is not in the way.",
           "summary": "Label and description reaching the input through the frame"
         },
-        {
-          "id": "components-inputgroup--search-field",
-          "name": "Search Field",
-          "snippet": "const SearchField = () => (\n    <form onSubmit={handleSearchSubmit}>\n        <FieldStates\n            label=\"Agency\"\n            tooltip=\"Search by agency name or NPN.\"\n            required\n            error=\"Pick an agency from the list.\">\n            <SearchInput />\n        </FieldStates>\n    </form>\n);"
-        },
         {
           "id": "components-inputgroup--email-field",
           "name": "Email Field",
@@ -6636,7 +6631,7 @@
           "summary": "Phone field with a leading country code picker, valid and invalid"
         }
       ],
-      "import": "import {\n    Button,\n    Divider,\n    DropdownMenu,\n    Field,\n    FieldText,\n    IconCancel,\n    IconKeyboardArrowDown,\n    IconSearch,\n    Input,\n    InputGroup,\n    Label,\n    Tag,\n} from \"@agentero/design-system\";"
+      "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-inputpassword": {
       "id": "components-inputpassword",
@@ -6744,6 +6739,168 @@
       ],
       "import": "import { Field, FieldText, InputPassword, Label } from \"@agentero/design-system\";"
     },
+    "components-inputsearch": {
+      "id": "components-inputsearch",
+      "name": "InputSearch",
+      "path": "./src/input-search/input-search.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Search input with a leading icon, a clear button and a loading slot"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-search\" on the frame"
+        ],
+        "example": [
+          "<InputSearch\n  aria-label=\"Search agencies\"\n  value={query}\n  onChange={event => setQuery(event.target.value)}\n  isLoading={isFetching}\n/>"
+        ]
+      },
+      "description": "InputSearch is a search field with a magnifier in front and a clear button\nonce there is text. It is an `Input` of `type=\"search\"` inside an\n`InputGroup`: `className` styles the frame and every other prop reaches the\n`<input>`. Clearing reports a real change event with an empty value, and\n`isLoading` swaps the clear button for a spinner.",
+      "summary": "Search input with a leading icon, a clear button and a loading slot",
+      "reactComponentMeta": {
+        "displayName": "InputSearch",
+        "exportName": "InputSearch",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-search/input-search.tsx",
+        "description": "InputSearch is a search field: a magnifier in front of the text and, once\nthere is text, a clear button after it, named \"Clear search\" unless\n`clearLabel` says otherwise. The clear button empties the field\nand puts focus back in it, and it reports the change through `onChange` like\na keystroke would: a real change event whose `event.target.value` is `''`,\nso a controlled field, an uncontrolled one and one registered with\nreact-hook-form all clear the same way. While `isLoading` is set, a spinner\ntakes the clear button's place. The clear button is not rendered while the\ninput is disabled, whether `disabled` comes from the prop, from a\nsurrounding `FieldText` or from a `<fieldset disabled>`.\n\nIt is an [Input](?path=/docs/components-input--docs) of `type=\"search\"`\ninside an [InputGroup](?path=/docs/components-inputgroup--docs) frame, so\nit is announced as a search box. `className` styles the frame. Every other\nprop goes to the `<input>`: the `ref`, `id`, `name`, `value`, `onChange`,\n`aria-*` and every other standard attribute. Only `type` is not accepted.\n`placeholder` defaults to `'Search'`. Inside a `FieldText` the input takes\nits label, messages and states from the field as a plain `Input` does. The\ninvalid state comes from `aria-invalid`, and the frame paints the\ndestructive border.\n\nDo not use it to pick a value from a list; that is\n[Combobox](?path=/docs/components-combobox--docs), whose `search` field is\ndrawn by InputSearch. For a filter that should\nrun only once the user pauses typing, use `DebouncedInputSearch`.",
+        "jsDocTags": {
+          "summary": [
+            "Search input with a leading icon, a clear button and a loading slot"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-search\" on the frame"
+          ],
+          "example": [
+            "<InputSearch\n  aria-label=\"Search agencies\"\n  value={query}\n  onChange={event => setQuery(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"
+              }
+            ]
+          },
+          "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": {
+              "value": "false"
+            },
+            "parent": {
+              "name": "InputSearchProps",
+              "fileName": "src/input-search/input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/input-search.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": {
+              "value": "'Clear search'"
+            },
+            "parent": {
+              "name": "InputSearchProps",
+              "fileName": "src/input-search/input-search.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-search/input-search.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputsearch--default",
+          "name": "Default",
+          "snippet": "const Default = () => {\n    const [query, setQuery] = useState('');\n\n    return (\n        <InputSearch\n            aria-label=\"Search agencies\"\n            value={query}\n            onChange={event => {\n                setQuery(event.target.value);\n                args.onChange?.(event);\n            }} />\n    );\n};",
+          "description": "A controlled search. The clear button appears once there is text; pressing\nit calls `onChange` with an empty `event.target.value`, so the state that\nowns the query empties too, and focus goes back to the input. The browser's\nown cancel button is hidden.",
+          "summary": "Controlled search with a clear button that empties the query"
+        },
+        {
+          "id": "components-inputsearch--loading",
+          "name": "Loading",
+          "snippet": "const Loading = () => <InputSearch\n    aria-label=\"Search agencies\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    isLoading\n    defaultValue=\"Acme\" />;",
+          "description": "While `isLoading` is set a spinner takes the clear button's place, even with\ntext in the field.",
+          "summary": "Spinner in place of the clear button while results load"
+        },
+        {
+          "id": "components-inputsearch--uncontrolled",
+          "name": "Uncontrolled",
+          "snippet": "const Uncontrolled = () => <InputSearch\n    aria-label=\"Search agencies\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    defaultValue=\"Acme Insurance\" />;",
+          "description": "An uncontrolled search with a `defaultValue`. The clear button follows what\nis in the field, and clearing still calls `onChange` with an empty value.",
+          "summary": "Uncontrolled search starting from a default value"
+        },
+        {
+          "id": "components-inputsearch--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputSearch\n        aria-label=\"Search agencies\"\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        disabled\n        defaultValue=\"Acme\" />\n    <fieldset disabled style={{ border: 0, margin: 0, padding: 0 }}>\n        <InputSearch\n            onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n            aria-label=\"Search carriers\"\n            defaultValue=\"Travelers\" />\n    </fieldset>\n</div>;",
+          "description": "A disabled search has no clear button, whether `disabled` is set on the\ninput itself or comes from a `<fieldset disabled>` around it.",
+          "summary": "Disabled search with the clear button removed"
+        },
+        {
+          "id": "components-inputsearch--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputSearch\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"sm\"\n        aria-label=\"Small\"\n        defaultValue=\"Acme\" />\n    <InputSearch\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"md\"\n        aria-label=\"Medium\"\n        defaultValue=\"Acme\" />\n    <InputSearch\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        size=\"lg\"\n        aria-label=\"Large\"\n        defaultValue=\"Acme\" />\n</div>;",
+          "description": "The three sizes match Input's: the frame is 32, 40 or 48px tall.",
+          "summary": "The three sizes side by side"
+        },
+        {
+          "id": "components-inputsearch--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <div style={{ display: 'grid', gap: '1.5rem' }}>\n        <FieldText>\n            <Label>Agency</Label>\n            <InputSearch defaultValue=\"Acme\" />\n            <Field.Description>Search by agency name or NPN.</Field.Description>\n        </FieldText>\n        <FieldText disabled>\n            <Label>Carrier</Label>\n            <InputSearch defaultValue=\"Travelers\" />\n        </FieldText>\n    </div>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field through the frame. A disabled field removes the clear button too.",
+          "summary": "Label and disabled state reaching the input through the frame"
+        },
+        {
+          "id": "components-inputsearch--clear-label",
+          "name": "Clear Label",
+          "snippet": "const ClearLabel = () => <InputSearch\n    aria-label=\"Search agencies\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    defaultValue=\"Acme\"\n    clearLabel=\"Clear agency search\" />;",
+          "description": "`clearLabel` names the clear button after what is searched, so a page with\nseveral search fields does not read \"Clear search\" twice.",
+          "summary": "Clear button named after what the field searches"
+        }
+      ],
+      "import": "import { Field, FieldText, InputSearch, Label } from \"@agentero/design-system\";"
+    },
     "components-input": {
       "id": "components-input",
       "name": "Input",
@@ -9710,6 +9867,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3879
+    "durationMs": 3754
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.33.1",
+	"version": "0.34.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -101,6 +101,10 @@
 			"types": "./src/input-password/index.d.ts",
 			"import": "./src/input-password/index.js"
 		},
+		"./input-search": {
+			"types": "./src/input-search/index.d.ts",
+			"import": "./src/input-search/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"

package/src/combobox/combobox.d.ts

@@ -145,7 +145,8 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
      */
     variant?: 'search' | 'plain' | 'select';
     /**
-     * Whether a clear button follows the input once an option is picked.
+     * Whether a clear button follows the input: on `search` once there is text,
+     * on the others once an option is picked.
      * Defaults to `true` for `search` and `false` for `plain` and `select`; pass
      * it to override the variant. On a `select` it replaces the chevron while
      * there is a value. Ignored under a `multiple` root, which never
@@ -185,11 +186,13 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
  *   the user may want to browse before typing.
  *
  * Only `search` carries a clear button by default; `showClear` adds it to the
- * other two or drops it from `search`. On a `select`, the clear button takes the
- * chevron's place once an option is picked; the list still opens from the input. Base UI mounts it only once there is
- * something to clear — a picked option — so an untouched field shows nothing. Name it with
- * `clearLabel`, and the chevron with `triggerLabel`, when a page has more than
- * one combobox.
+ * other two or drops it from `search`. The `search` field is an
+ * [InputSearch](?path=/docs/components-inputsearch--docs): its clear button
+ * shows as soon as there is text, typed or picked, and pressing it empties the
+ * text, which drops the picked option and closes the list. On a `select`, the
+ * clear button takes the chevron's place once an option is picked; the list
+ * still opens from the input. Name it with `clearLabel`, and the chevron with
+ * `triggerLabel`, when a page has more than one combobox.
  *
  * Under a `multiple` root there is neither: the list stays open between picks,
  * so a chevron has nothing to toggle, and Base UI's clear button would drop the
@@ -198,7 +201,9 @@ type InputProps = Omit<ComponentPropsWithRef<typeof ComboboxPrimitive.Input>, 's
  * remove each entry.
  *
  * Every native input attribute is accepted and forwarded to the `<input>` —
- * `placeholder`, `disabled`, `autoComplete` — and so is `className`.
+ * `placeholder`, `disabled`, `autoComplete`. `className` styles the `<input>`
+ * too, except on the `search` field with a clear button, where it styles the
+ * frame, as on InputSearch.
  *
  * @summary Search, plain or select field that opens and filters the list
  * @dataAttribute {string} data-slot - Always set to "combobox-input"

package/src/combobox/combobox.js

@@ -5,13 +5,14 @@ import { useFieldContext as n } from "../field/context.js";
 import { InputContext as r } from "../input/context.js";
 import { inputRecipe as i } from "../input/input.js";
 import { InputGroup as a } from "../input-group/index.js";
-import { IconCancel as o, IconCheck as s, IconKeyboardArrowDown as c, IconSearch as l } from "./icons.js";
-import { tv as u } from "tailwind-variants";
-import { createContext as d, use as f, useRef as p, useState as m } from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Combobox as _ } from "@base-ui/react/combobox";
+import { InputSearch as o } from "../input-search/input-search.js";
+import { IconCancel as s, IconCheck as c, IconKeyboardArrowDown as l, IconSearch as u } from "./icons.js";
+import { tv as d } from "tailwind-variants";
+import { createContext as f, use as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Combobox as v } from "@base-ui/react/combobox";
 //#region src/combobox/combobox.tsx
-var v = u({ slots: {
+var y = d({ slots: {
 	action: [
 		"flex size-6 shrink-0 cursor-pointer items-center justify-center self-center rounded-sm",
 		"[&>svg>path]:fill-icon-input-default hover:[&>svg>path]:fill-icon-default-base-primary",
@@ -47,78 +48,94 @@ var v = u({ slots: {
 		"group-data-disabled/item:data-selected:bg-bg-checkbox-disabled"
 	],
 	message: ["mx-2 my-px px-3 py-2 text-sm text-text-default-base-tertiary", "empty:m-0 empty:p-0"]
-} }), y = v(), b = d(!1), x = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
-	let s = !!o.multiple, [c, l] = m(n), u = p(String(o.inputValue ?? o.defaultInputValue ?? ""));
+} }), b = y(), x = f(!1), S = ({ minInputLength: e = 0, open: t, defaultOpen: n = !1, onOpenChange: r, onOpenChangeComplete: i, onInputValueChange: a, ...o }) => {
+	let s = !!o.multiple, [c, l] = h(n), u = m(String(o.inputValue ?? o.defaultInputValue ?? ""));
 	o.inputValue !== void 0 && (u.current = String(o.inputValue));
-	let d = (t) => t.trim().length < e, f = p(!1), g = p(!1), v = (e, t) => {
+	let d = (t) => t.trim().length < e, f = m(!1), p = m(!1), _ = (e, t) => {
 		if (e && d(u.current)) {
 			t.cancel();
 			return;
 		}
 		f.current = !1, r?.(e, t), s && !e && t.reason === "item-press" && t.cancel(), t.isCanceled || l(e);
 	}, y = (e) => {
-		i?.(e), !e && f.current && (f.current = !1, g.current = !0, queueMicrotask(() => g.current = !1));
-	}, x = (e, n) => {
-		if (g.current) {
-			g.current = !1, n.cancel();
+		i?.(e), !e && f.current && (f.current = !1, p.current = !0, queueMicrotask(() => p.current = !1));
+	}, b = (e, n) => {
+		if (p.current) {
+			p.current = !1, n.cancel();
 			return;
 		}
 		u.current = e, a?.(e, n), d(e) && t === void 0 && c && (f.current = !0, l(!1));
 	}, S = t ?? (e > 0 ? c : void 0);
-	return /* @__PURE__ */ h(b, {
+	return /* @__PURE__ */ g(x, {
 		value: s,
-		children: /* @__PURE__ */ h(_.Root, {
+		children: /* @__PURE__ */ g(v.Root, {
 			open: S,
 			defaultOpen: n,
-			onOpenChange: v,
+			onOpenChange: _,
 			onOpenChangeComplete: y,
-			onInputValueChange: x,
+			onInputValueChange: b,
 			...o
 		})
 	});
 };
-x.displayName = "Combobox.Root";
-var S = /* @__PURE__ */ new Set([
+S.displayName = "Combobox.Root";
+var C = /* @__PURE__ */ new Set([
 	"value",
 	"defaultValue",
 	"onChange"
-]), C = (e) => {
-	let i = f(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !S.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
+]), w = (e) => {
+	let i = p(r), a = n(), o = i ? Object.fromEntries(Object.entries(i).filter(([e]) => !C.has(e))) : null, s = !("aria-label" in e || "aria-labelledby" in e) && a ? { "aria-labelledby": a.labelId } : null;
 	return t({
 		...o,
 		...s
 	}, e);
-}, w = ({ variant: t = "search", showClear: n = t === "search", clearLabel: r = "Clear", triggerLabel: s = "Show options", ...u }) => {
-	let { className: d, size: p = "md", ...m } = C(u), v = f(b);
-	return /* @__PURE__ */ g(_.InputGroup, {
-		render: /* @__PURE__ */ h(a.Root, {}),
+}, T = ({ variant: t = "search", showClear: n = t === "search", clearLabel: c = "Clear", triggerLabel: d = "Show options", ...f }) => {
+	let { className: m, size: h = "md", ...y } = w(f), S = p(x);
+	return t === "search" && n && !S ? /* @__PURE__ */ g(v.InputGroup, {
+		render: /* @__PURE__ */ g("div", {}),
+		"data-slot": "combobox-field",
+		children: /* @__PURE__ */ g(r, {
+			value: null,
+			children: /* @__PURE__ */ g(v.Input, {
+				"data-slot": "combobox-input",
+				className: m,
+				...y,
+				render: (e) => /* @__PURE__ */ g(o, {
+					...e,
+					size: h,
+					clearLabel: c
+				})
+			})
+		})
+	}) : /* @__PURE__ */ _(v.InputGroup, {
+		render: /* @__PURE__ */ g(a.Root, {}),
 		"data-slot": "combobox-field",
 		className: t === "plain" ? "px-4" : void 0,
 		children: [
-			t === "search" && /* @__PURE__ */ h(a.Addon, { children: /* @__PURE__ */ h(l, {}) }),
-			/* @__PURE__ */ h(_.Input, {
+			t === "search" && /* @__PURE__ */ g(a.Addon, { children: /* @__PURE__ */ g(u, {}) }),
+			/* @__PURE__ */ g(v.Input, {
 				"data-slot": "combobox-input",
-				"data-size": p,
-				className: e(i({ size: p }), d),
-				...m
+				"data-size": h,
+				className: e(i({ size: h }), m),
+				...y
 			}),
-			n && !v && /* @__PURE__ */ h(_.Clear, {
+			n && !S && /* @__PURE__ */ g(v.Clear, {
 				"data-slot": "combobox-clear",
-				"aria-label": r,
-				className: y.action(),
-				children: /* @__PURE__ */ h(o, {})
+				"aria-label": c,
+				className: b.action(),
+				children: /* @__PURE__ */ g(s, {})
 			}),
-			t === "select" && !v && /* @__PURE__ */ h(_.Trigger, {
+			t === "select" && !S && /* @__PURE__ */ g(v.Trigger, {
 				"data-slot": "combobox-trigger",
-				"aria-label": s,
-				className: e(y.action(), y.trigger(), n && y.triggerReplaced()),
-				children: /* @__PURE__ */ h(c, {})
+				"aria-label": d,
+				className: e(b.action(), b.trigger(), n && b.triggerReplaced()),
+				children: /* @__PURE__ */ g(l, {})
 			})
 		]
 	});
 };
-w.displayName = "Combobox.Input";
-var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ h(_.Portal, { children: /* @__PURE__ */ h(_.Positioner, {
+T.displayName = "Combobox.Input";
+var E = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i = 12, alignOffset: a, anchor: o, collisionPadding: s = 8, ...c }) => /* @__PURE__ */ g(v.Portal, { children: /* @__PURE__ */ g(v.Positioner, {
 	side: n,
 	align: r,
 	sideOffset: i,
@@ -126,49 +143,49 @@ var T = ({ className: t, side: n = "bottom", align: r = "start", sideOffset: i =
 	anchor: o,
 	collisionPadding: s,
 	className: "isolate z-(--z-index-top-layer) pointer-events-auto",
-	children: /* @__PURE__ */ h(_.Popup, {
+	children: /* @__PURE__ */ g(v.Popup, {
 		"data-slot": "combobox-content",
-		className: e(y.content(), t),
+		className: e(b.content(), t),
 		...c
 	})
 }) });
-T.displayName = "Combobox.Content";
-var E = ({ className: t, ...n }) => {
+E.displayName = "Combobox.Content";
+var D = ({ className: t, ...n }) => {
 	let r = "aria-label" in n || "aria-labelledby" in n;
-	return /* @__PURE__ */ h(_.List, {
+	return /* @__PURE__ */ g(v.List, {
 		"data-slot": "combobox-list",
 		"aria-label": r ? void 0 : "Suggestions",
-		className: e(y.list(), t),
+		className: e(b.list(), t),
 		...n
 	});
 };
-E.displayName = "Combobox.List";
-var D = ({ className: t, children: n, ...r }) => {
-	let i = f(b);
-	return /* @__PURE__ */ g(_.Item, {
+D.displayName = "Combobox.List";
+var O = ({ className: t, children: n, ...r }) => {
+	let i = p(x);
+	return /* @__PURE__ */ _(v.Item, {
 		"data-slot": "combobox-item",
-		className: e(y.item(), t),
+		className: e(b.item(), t),
 		...r,
-		children: [i && /* @__PURE__ */ h(_.ItemIndicator, {
+		children: [i && /* @__PURE__ */ g(v.ItemIndicator, {
 			keepMounted: !0,
 			"data-slot": "combobox-item-indicator",
-			className: y.indicator(),
-			children: /* @__PURE__ */ h(s, { className: "size-3.5" })
+			className: b.indicator(),
+			children: /* @__PURE__ */ g(c, { className: "size-3.5" })
 		}), n]
 	});
 };
-D.displayName = "Combobox.Item";
-var O = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Empty, {
+O.displayName = "Combobox.Item";
+var k = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Empty, {
 	"data-slot": "combobox-empty",
-	className: e(y.message(), t),
+	className: e(b.message(), t),
 	...n
 });
-O.displayName = "Combobox.Empty";
-var k = ({ className: t, ...n }) => /* @__PURE__ */ h(_.Status, {
+k.displayName = "Combobox.Empty";
+var A = ({ className: t, ...n }) => /* @__PURE__ */ g(v.Status, {
 	"data-slot": "combobox-status",
-	className: e(y.message(), t),
+	className: e(b.message(), t),
 	...n
 });
-k.displayName = "Combobox.Status";
+A.displayName = "Combobox.Status";
 //#endregion
-export { T as Content, O as Empty, w as Input, D as Item, E as List, x as Root, k as Status, v as comboboxRecipe };
+export { E as Content, k as Empty, T as Input, O as Item, D as List, S as Root, A as Status, y as comboboxRecipe };

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

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+/**
+ * Magnifier leading InputSearch, the same glyph `Combobox` uses. Fill color
+ * comes from the input group addon, so the icon follows the field's state.
+ *
+ * @summary 24px search icon leading the InputSearch field
+ */
+export declare const IconSearch: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Circled cross on the InputSearch clear button, the same glyph `Combobox`
+ * uses. Fill color comes from the button's class, so the icon follows its
+ * hover and disabled states.
+ *
+ * @summary 24px cancel icon on the InputSearch clear button
+ */
+export declare const IconCancel: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/input-search/icons.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/input-search/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M9.52 15.615q-2.562 0-4.34-1.777Q3.405 12.062 3.405 9.5T5.18 5.162q1.776-1.777 4.338-1.777t4.339 1.777q1.777 1.776 1.777 4.338 0 1.071-.36 2.046a5.7 5.7 0 0 1-.96 1.696l5.754 5.754q.209.209.213.522a.7.7 0 0 1-.213.532.72.72 0 0 1-.527.217.72.72 0 0 1-.527-.217l-5.753-5.754q-.75.62-1.725.97t-2.018.35m0-1.5q1.933 0 3.273-1.341 1.342-1.34 1.342-3.274 0-1.932-1.342-3.274-1.34-1.341-3.274-1.341-1.932 0-3.274 1.34Q4.904 7.569 4.904 9.5q0 1.933 1.341 3.274 1.342 1.341 3.274 1.341" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12 13.0538L15.0731 16.1269C15.2115 16.2654 15.3856 16.3362 15.5952 16.3394C15.8048 16.3426 15.982 16.2718 16.1269 16.1269C16.2718 15.982 16.3442 15.8064 16.3442 15.6C16.3442 15.3936 16.2718 15.218 16.1269 15.0731L13.0538 12L16.1269 8.9269C16.2653 8.78845 16.3362 8.61442 16.3394 8.4048C16.3426 8.1952 16.2718 8.01797 16.1269 7.8731C15.982 7.72822 15.8064 7.65577 15.6 7.65577C15.3936 7.65577 15.2179 7.72822 15.0731 7.8731L12 10.9462L8.92688 7.8731C8.78842 7.73463 8.61439 7.6638 8.40478 7.6606C8.19518 7.65738 8.01794 7.72822 7.87308 7.8731C7.72819 8.01797 7.65575 8.1936 7.65575 8.4C7.65575 8.6064 7.72819 8.78203 7.87308 8.9269L10.9461 12L7.87308 15.0731C7.73461 15.2115 7.66378 15.3856 7.66058 15.5952C7.65736 15.8048 7.72819 15.982 7.87308 16.1269C8.01794 16.2718 8.19358 16.3442 8.39998 16.3442C8.60638 16.3442 8.78201 16.2718 8.92688 16.1269L12 13.0538ZM12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5766 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45271 3.248 8.29657C3.74667 7.14042 4.42342 6.13474 5.27825 5.27952C6.1331 4.42429 7.13834 3.74723 8.29398 3.24835C9.44959 2.74947 10.6844 2.50002 11.9983 2.50002C13.3122 2.50002 14.5473 2.74936 15.7034 3.24802C16.8596 3.74669 17.8652 4.42344 18.7205 5.27827C19.5757 6.13312 20.2527 7.13837 20.7516 8.294C21.2505 9.44962 21.5 10.6844 21.5 11.9983C21.5 13.3123 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8653 18.7217 18.7205C17.8669 19.5757 16.8616 20.2528 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76664 4 7.87498 4.775 6.32498 6.325C4.77498 7.875 3.99998 9.76667 3.99998 12C3.99998 14.2333 4.77498 16.125 6.32498 17.675C7.87498 19.225 9.76664 20 12 20Z" })
+});
+//#endregion
+export { n as IconCancel, t as IconSearch };

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

@@ -0,0 +1,2 @@
+export { InputSearch, inputSearchRecipe } from './input-search';
+export type { InputSearchProps } from './input-search';

package/src/input-search/index.js

@@ -0,0 +1,2 @@
+import { InputSearch as e, inputSearchRecipe as t } from "./input-search.js";
+export { e as InputSearch, t as inputSearchRecipe };