@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/code-block/code-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-block.js","names":[],"sources":["../../../src/components/code-block/code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState, type ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A block of code, with a copy control.\n *\n * Syntax highlighting is deliberately not built in. A highlighter is a large\n * dependency, a theme system of its own, and a choice between build-time and\n * runtime that belongs to the application. Pass already-highlighted markup as\n * children and the styling here applies to it; pass a plain string and it\n * renders as plain code.\n */\n\nexport interface CodeBlockProps extends ComponentPropsWithRef<\"div\"> {\n  /** Shown in the header and used as the language hint. */\n  language?: string;\n  /** Filename or other caption for the header. */\n  title?: string;\n  /**\n   * The text the copy button puts on the clipboard.\n   *\n   * Required when children are rendered markup, because reading text back out\n   * of highlighted DOM loses whitespace in ways that break pasted code.\n   */\n  code?: string;\n  /** Hides the copy control. */\n  hideCopy?: boolean;\n}\n\nexport function CodeBlock({\n  className,\n  language,\n  title,\n  code,\n  hideCopy,\n  children,\n  ...props\n}: CodeBlockProps) {\n  const preRef = useRef<HTMLPreElement | null>(null);\n  const showHeader = Boolean(title ?? language) || !hideCopy;\n\n  return (\n    <div\n      data-slot=\"code-block\"\n      data-language={language}\n      className={cn(\"overflow-hidden rounded-lg border border-border bg-muted/40\", className)}\n      {...props}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center gap-2 border-b border-border px-3 py-1.5\">\n          <span className=\"truncate text-2xs font-medium text-muted-foreground\">\n            {title ?? language}\n          </span>\n          {hideCopy ? null : (\n            <CopyButton getText={() => code ?? preRef.current?.textContent ?? \"\"} />\n          )}\n        </div>\n      ) : null}\n      <pre\n        ref={preRef}\n        // Focusable named region: code overflows horizontally, and a scroll box\n        // that cannot take focus is unreachable by keyboard.\n        tabIndex={0}\n        role=\"region\"\n        aria-label={title ?? (language ? `${language} code` : \"Code\")}\n        className={cn(\n          \"overflow-x-auto p-3 font-mono text-xs leading-relaxed\",\n          focusRing,\n          \"focus-visible:ring-inset\",\n        )}\n      >\n        <code>{children}</code>\n      </pre>\n    </div>\n  );\n}\n\nexport interface CopyButtonProps extends Omit<ComponentPropsWithRef<\"button\">, \"onClick\"> {\n  getText: () => string;\n  label?: string;\n  copiedLabel?: string;\n  /** How long the confirmation stays, in milliseconds. */\n  resetAfter?: number;\n}\n\n/**\n * Copies text and confirms it.\n *\n * The confirmation is announced politely as well as shown — a checkmark that\n * only appears visually leaves a screen reader user with no idea whether the\n * button did anything. Failure is surfaced too, rather than silently looking\n * like success, since the clipboard API can be refused outright.\n */\nexport function CopyButton({\n  className,\n  getText,\n  label = \"Copy code\",\n  copiedLabel = \"Copied\",\n  resetAfter = 2000,\n  ...props\n}: CopyButtonProps) {\n  const [state, setState] = useState<\"idle\" | \"copied\" | \"error\">(\"idle\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const copy = useCallback(() => {\n    const reset = () => {\n      if (timer.current) clearTimeout(timer.current);\n      timer.current = setTimeout(() => {\n        setState(\"idle\");\n      }, resetAfter);\n    };\n\n    navigator.clipboard.writeText(getText()).then(\n      () => {\n        setState(\"copied\");\n        reset();\n      },\n      () => {\n        // Refused by the browser or unavailable outside a secure context.\n        // Saying so beats pretending it worked.\n        setState(\"error\");\n        reset();\n      },\n    );\n  }, [getText, resetAfter]);\n\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"copy-button\"\n      data-state={state}\n      onClick={copy}\n      aria-label={label}\n      className={cn(\n        \"ms-auto grid size-6 shrink-0 place-items-center rounded text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {state === \"copied\" ? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <path\n            d=\"m5 13 4 4L19 7\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      ) : (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <rect\n            x=\"9\"\n            y=\"9\"\n            width=\"12\"\n            height=\"12\"\n            rx=\"2\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          />\n          <path\n            d=\"M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      )}\n      {/* Announced, not just drawn. */}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {state === \"copied\" ? copiedLabel : state === \"error\" ? \"Copy failed\" : \"\"}\n      </span>\n    </button>\n  );\n}\n"],"mappings":";;;;;;AAiCA,SAAgB,UAAU,EACxB,WACA,UACA,OACA,MACA,UACA,UACA,GAAG,SACc;CACjB,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,aAAa,QAAQ,SAAS,QAAQ,KAAK,CAAC;CAElD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;EAJN,UAAA,CAMG,aACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,SAAS;GACN,CAAA,GACL,WAAW,OACV,oBAAC,YAAD,EAAY,eAAe,QAAQ,OAAO,SAAS,eAAe,GAAK,CAAA,CAEtE;EACH,CAAA,IAAA,MACJ,oBAAC,OAAD;GACE,KAAK;GAGL,UAAU;GACV,MAAK;GACL,cAAY,UAAU,WAAW,GAAG,SAAS,SAAS;GACtD,WAAW,GACT,yDACA,WACA,0BACF;GAEA,UAAA,oBAAC,QAAD,EAAO,SAAe,CAAA;EACnB,CAAA,CACF;;AAET;;;;;;;;;AAkBA,SAAgB,WAAW,EACzB,WACA,SACA,QAAQ,aACR,cAAc,UACd,aAAa,KACb,GAAG,SACe;CAClB,MAAM,CAAC,OAAO,YAAY,SAAsC,MAAM;CACtE,MAAM,QAAQ,OAA6C,IAAI;CAE/D,sBACc;EACV,IAAI,MAAM,SAAS,aAAa,MAAM,OAAO;CAC/C,GACA,CAAC,CACH;CAEA,MAAM,OAAO,kBAAkB;EAC7B,MAAM,cAAc;GAClB,IAAI,MAAM,SAAS,aAAa,MAAM,OAAO;GAC7C,MAAM,UAAU,iBAAiB;IAC/B,SAAS,MAAM;GACjB,GAAG,UAAU;EACf;EAEA,UAAU,UAAU,UAAU,QAAQ,CAAC,CAAC,CAAC,WACjC;GACJ,SAAS,QAAQ;GACjB,MAAM;EACR,SACM;GAGJ,SAAS,OAAO;GAChB,MAAM;EACR,CACF;CACF,GAAG,CAAC,SAAS,UAAU,CAAC;CAExB,OACE,qBAAC,UAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,SAAS;EACT,cAAY;EACZ,WAAW,GACT,iFACA,2FACA,WACA,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UAAU,WACT,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA,IAEL,qBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAAlE,UAAA,CACE,oBAAC,QAAD;IACE,GAAE;IACF,GAAE;IACF,OAAM;IACN,QAAO;IACP,IAAG;IACH,QAAO;IACP,aAAY;GACb,CAAA,GACD,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;GACf,CAAA,CACE;EAGP,CAAA,GAAA,oBAAC,QAAD;GAAM,MAAK;GAAS,aAAU;GAAS,WAAU;GAC9C,UAAA,UAAU,WAAW,cAAc,UAAU,UAAU,gBAAgB;EACpE,CAAA,CACA;;AAEZ"}
+{"version":3,"file":"code-block.js","names":[],"sources":["../../../src/components/code-block/code-block.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef, type ComponentPropsWithRef } from \"react\";\n\nimport { CopyButton } from \"@/components/copy-button\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A block of code, with a copy control.\n *\n * Syntax highlighting is deliberately not built in. A highlighter is a large\n * dependency, a theme system of its own, and a choice between build-time and\n * runtime that belongs to the application. Pass already-highlighted markup as\n * children and the styling here applies to it; pass a plain string and it\n * renders as plain code.\n */\n\nexport interface CodeBlockProps extends ComponentPropsWithRef<\"div\"> {\n  /** Shown in the header and used as the language hint. */\n  language?: string;\n  /** Filename or other caption for the header. */\n  title?: string;\n  /**\n   * The text the copy button puts on the clipboard.\n   *\n   * Required when children are rendered markup, because reading text back out\n   * of highlighted DOM loses whitespace in ways that break pasted code.\n   */\n  code?: string;\n  /** Hides the copy control. */\n  hideCopy?: boolean;\n}\n\nexport function CodeBlock({\n  className,\n  language,\n  title,\n  code,\n  hideCopy,\n  children,\n  ...props\n}: CodeBlockProps) {\n  const preRef = useRef<HTMLPreElement | null>(null);\n  const showHeader = Boolean(title ?? language) || !hideCopy;\n\n  return (\n    <div\n      data-slot=\"code-block\"\n      data-language={language}\n      className={cn(\"overflow-hidden rounded-lg border border-border bg-muted/40\", className)}\n      {...props}\n    >\n      {showHeader ? (\n        <div className=\"flex items-center gap-2 border-b border-border px-3 py-1.5\">\n          <span className=\"truncate text-2xs font-medium text-muted-foreground\">\n            {title ?? language}\n          </span>\n          {hideCopy ? null : (\n            <CopyButton\n              value={() => code ?? preRef.current?.textContent ?? \"\"}\n              variant=\"ghost\"\n              aria-label=\"Copy code\"\n              className={cn(\n                \"ms-auto size-6 rounded text-muted-foreground hover:text-foreground\",\n                \"[&_svg:not([class*='size-'])]:size-3.5\",\n              )}\n            />\n          )}\n        </div>\n      ) : null}\n      <pre\n        ref={preRef}\n        // Focusable named region: code overflows horizontally, and a scroll box\n        // that cannot take focus is unreachable by keyboard.\n        tabIndex={0}\n        role=\"region\"\n        aria-label={title ?? (language ? `${language} code` : \"Code\")}\n        className={cn(\n          \"overflow-x-auto p-3 font-mono text-xs leading-relaxed\",\n          focusRing,\n          \"focus-visible:ring-inset\",\n        )}\n      >\n        <code>{children}</code>\n      </pre>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAkCA,SAAgB,UAAU,EACxB,WACA,UACA,OACA,MACA,UACA,UACA,GAAG,SACc;CACjB,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,aAAa,QAAQ,SAAS,QAAQ,KAAK,CAAC;CAElD,OACE,qBAAC,OAAD;EACE,aAAU;EACV,iBAAe;EACf,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;EAJN,UAAA,CAMG,aACC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IACb,UAAA,SAAS;GACN,CAAA,GACL,WAAW,OACV,oBAAC,YAAD;IACE,aAAa,QAAQ,OAAO,SAAS,eAAe;IACpD,SAAQ;IACR,cAAW;IACX,WAAW,GACT,sEACA,wCACF;GACD,CAAA,CAEA;EACH,CAAA,IAAA,MACJ,oBAAC,OAAD;GACE,KAAK;GAGL,UAAU;GACV,MAAK;GACL,cAAY,UAAU,WAAW,GAAG,SAAS,SAAS;GACtD,WAAW,GACT,yDACA,WACA,0BACF;GAEA,UAAA,oBAAC,QAAD,EAAO,SAAe,CAAA;EACnB,CAAA,CACF;;AAET"}

package/dist/components/code-block/index.d.ts

@@ -1,2 +1,4 @@
-import { CodeBlock, CodeBlockProps, CopyButton, CopyButtonProps } from "./code-block.js";
+import { CodeBlock, CodeBlockProps } from "./code-block.js";
+import { CopyButton, CopyButtonProps } from "../copy-button/copy-button.js";
+import "../copy-button/index.js";
 export { CodeBlock, type CodeBlockProps, CopyButton, type CopyButtonProps };

package/dist/components/code-block/index.js

@@ -1,2 +1,3 @@
-import { CodeBlock, CopyButton } from "./code-block.js";
+import { CopyButton } from "../copy-button/copy-button.js";
+import { CodeBlock } from "./code-block.js";
 export { CodeBlock, CopyButton };

package/dist/components/code-block/meta.js

@@ -7,7 +7,7 @@ const meta = defineMeta({
 	category: "data",
 	status: "stable",
 	dependencies: [],
-	registryDependencies: [],
+	registryDependencies: ["copy-button"],
 	files: ["code-block.tsx"],
 	a11y: "The pre is a focusable named region, since code overflows horizontally and an unfocusable scroll box is unreachable by keyboard. Copying is announced through a polite live region as well as shown, and a refused clipboard write reports failure rather than looking like success."
 });

package/dist/components/code-block/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/code-block/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"code-block\",\n  title: \"Code Block\",\n  description: \"A block of code with a copy control, ready for any highlighter.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"code-block.tsx\"],\n  a11y:\n    \"The pre is a focusable named region, since code overflows horizontally and an unfocusable \" +\n    \"scroll box is unreachable by keyboard. Copying is announced through a polite live region as \" +\n    \"well as shown, and a refused clipboard write reports failure rather than looking like \" +\n    \"success.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/code-block/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"code-block\",\n  title: \"Code Block\",\n  description: \"A block of code with a copy control, ready for any highlighter.\",\n  category: \"data\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"copy-button\"],\n  files: [\"code-block.tsx\"],\n  a11y:\n    \"The pre is a focusable named region, since code overflows horizontally and an unfocusable \" +\n    \"scroll box is unreachable by keyboard. Copying is announced through a polite live region as \" +\n    \"well as shown, and a refused clipboard write reports failure rather than looking like \" +\n    \"success.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,aAAa;CACpC,OAAO,CAAC,gBAAgB;CACxB,MACE;AAIJ,CAAC"}

package/dist/components/combobox/combobox.d.ts

@@ -27,9 +27,25 @@ interface ComboboxProps {
   onOpenChange?: (open: boolean) => void;
   /** Overrides how a search string is matched against an option. */
   filter?: (search: string, haystack: string[]) => boolean;
+  /**
+   * Set `false` when the options are already the results for the search — for
+   * example when `onSearchChange` fetches them — so they are not filtered twice.
+   */
+  shouldFilter?: boolean;
+  /** Called as the search text changes, including the reset when it closes. */
+  onSearchChange?: (search: string) => void;
+  /** Milliseconds of quiet typing before `onSearchChange` fires. */
+  searchDebounce?: number;
+  /**
+   * Results are on their way: the listbox is `aria-busy`, `ComboboxLoading`
+   * shows and `ComboboxEmpty` holds back, so "No results" never flashes first.
+   */
+  loading?: boolean;
+  /** Choosing the selected option again clears it, reporting `""`. */
+  allowDeselect?: boolean;
   children?: ReactNode;
 }
-declare function Combobox({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, filter, children }: ComboboxProps): import("react").JSX.Element;
+declare function Combobox({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, filter: filterProp, shouldFilter, onSearchChange, searchDebounce, loading, allowDeselect, children }: ComboboxProps): import("react").JSX.Element;
 interface ComboboxTriggerProps extends ComponentPropsWithRef<"button"> {
   /** Shown when nothing is selected. */
   placeholder?: string;
@@ -40,8 +56,11 @@ interface ComboboxContentProps extends ComponentPropsWithRef<typeof Popover.Cont
   label?: string;
 }
 declare function ComboboxContent({ className, align, sideOffset, label, children, ...props }: ComboboxContentProps): import("react").JSX.Element;
-type ComboboxInputProps = Omit<ComponentPropsWithRef<"input">, "value" | "onChange">;
-declare function ComboboxInput({ className, ...props }: ComboboxInputProps): import("react").JSX.Element;
+interface ComboboxInputProps extends Omit<ComponentPropsWithRef<"input">, "value" | "onChange"> {
+  /** Shows a button that clears the search while there is text to clear. */
+  clearable?: boolean;
+}
+declare function ComboboxInput({ className, clearable, ...props }: ComboboxInputProps): import("react").JSX.Element;
 declare function ComboboxList({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 interface ComboboxItemProps extends Omit<ComponentPropsWithRef<"div">, "onSelect" | "children"> {
   /** The value reported by onValueChange, and the primary search term. */
@@ -54,6 +73,11 @@ interface ComboboxItemProps extends Omit<ComponentPropsWithRef<"div">, "onSelect
 declare function ComboboxItem({ className, value, keywords, disabled, children, ...props }: ComboboxItemProps): import("react").JSX.Element | null;
 /** Shown only when the filter leaves nothing. */
 declare function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element | null;
+/**
+ * Shown only while `loading` is set on Combobox. Render it beside ComboboxList,
+ * as with ComboboxEmpty; pass a Spinner as a child if wanted.
+ */
+declare function ComboboxLoading({ className, children, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element | null;
 //#endregion
-export { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter };
+export { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxLoading, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter };
 //# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","names":[],"sources":["../../../src/components/combobox/combobox.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;iBAqCgB,sBAAsB,gBAAgB;UAkCrC;EACf;EACA;EACA,iBAAiB;EACjB;EACA;EACA,gBAAgB;;EAEhB,UAAU,gBAAgB;EAC1B,WAAW;;iBAGG,WACd,OAAO,WACP,cACA,eACA,MAAM,UACN,aACA,cACA,QACA,YACC,gCAAa,IAAA;UA4FC,6BAA6B;;EAE5C;;iBAGc,kBACd,WACA,aACA,aACG,SACF,uCAAoB,IAAA;UA0CN,6BAA6B,6BACrC,QAAiB;;EAGxB;;iBAGc,kBACd,WACA,OACA,YACA,OACA,aACG,SACF,uCAAoB,IAAA;KAiCX,qBAAqB,KAAK;iBAEtB,gBAAgB,cAAc,SAAS,qCAAkB,IAAA;iBAkHzD,eAAe,cAAc,SAAS,+CAA4B,IAAA;UAejE,0BAA0B,KACzC;;EAIA;;EAEA;EACA;EACA,WAAW;;iBAGG,eACd,WACA,OACA,UACA,UACA,aACG,SACF,oCAAiB,IAAA;;iBAgGJ,gBAAgB,WAAW,aAAa,SAAS,+CAA4B,IAAA"}
+{"version":3,"file":"combobox.d.ts","names":[],"sources":["../../../src/components/combobox/combobox.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;iBAuCgB,sBAAsB,gBAAgB;UAmCrC;EACf;EACA;EACA,iBAAiB;EACjB;EACA;EACA,gBAAgB;;EAEhB,UAAU,gBAAgB;;;;;EAK1B;;EAEA,kBAAkB;;EAElB;;;;;EAKA;;EAEA;EACA,WAAW;;iBAoBG,WACd,OAAO,WACP,cACA,eACA,MAAM,UACN,aACA,cACA,QAAQ,YACR,cACA,gBACA,gBACA,SACA,eACA,YACC,gCAAa,IAAA;UAmIC,6BAA6B;;EAE5C;;iBAGc,kBACd,WACA,aACA,aACG,SACF,uCAAoB,IAAA;UA+CN,6BAA6B,6BACrC,QAAiB;;EAGxB;;iBAGc,kBACd,WACA,OACA,YACA,OACA,aACG,SACF,uCAAoB,IAAA;UAiCN,2BAA2B,KAC1C;;EAIA;;iBAGc,gBAAgB,WAAW,cAAsB,SAAS,qCAAkB,IAAA;iBAgJ5E,eAAe,cAAc,SAAS,+CAA4B,IAAA;UAgBjE,0BAA0B,KACzC;;EAIA;;EAEA;EACA;EACA,WAAW;;iBAGG,eACd,WACA,OACA,UACA,UACA,aACG,SACF,oCAAiB,IAAA;;iBAmGJ,gBAAgB,WAAW,aAAa,SAAS,+CAA4B,IAAA;;;;;iBAoB7E,kBACd,WACA,aACG,SACF,+CAA4B,IAAA"}

package/dist/components/combobox/combobox.js

@@ -32,13 +32,41 @@ function useCombobox(component) {
 	if (!context) throw new Error(`${component} must be rendered inside <Combobox>.`);
 	return context;
 }
-function Combobox({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, filter = defaultComboboxFilter, children }) {
+const ITEM_KEYFRAMES = `
+@keyframes dowel-combobox-item-in{from{opacity:0;transform:translateY(0.25rem)}}
+[data-slot="combobox-item"]{animation:dowel-combobox-item-in var(--duration-normal) var(--ease-out-quint) backwards}
+${Array.from({ length: 8 }, (_, index) => `[data-slot="combobox-item"]:nth-child(${String(index + 2)}){animation-delay:calc(${String((index + 1) * 20)}ms * var(--motion-scale, 1))}`).join("")}
+`;
+function Combobox({ value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen = false, onOpenChange, filter: filterProp = defaultComboboxFilter, shouldFilter = true, onSearchChange, searchDebounce = 0, loading = false, allowDeselect = false, children }) {
 	const uid = useId();
+	const filter = shouldFilter ? filterProp : acceptAll;
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const value = valueProp === void 0 ? uncontrolledValue : valueProp;
 	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
 	const open = openProp === void 0 ? uncontrolledOpen : openProp;
-	const [search, setSearch] = useState("");
+	const [search, setSearchState] = useState("");
+	const searchRef = useRef("");
+	const debounceRef = useRef(void 0);
+	const onSearchChangeRef = useRef(onSearchChange);
+	useEffect(() => {
+		onSearchChangeRef.current = onSearchChange;
+	}, [onSearchChange]);
+	const setSearch = useCallback((next) => {
+		if (next === searchRef.current) return;
+		searchRef.current = next;
+		setSearchState(next);
+		clearTimeout(debounceRef.current);
+		if (searchDebounce <= 0) {
+			onSearchChangeRef.current?.(next);
+			return;
+		}
+		debounceRef.current = setTimeout(() => {
+			onSearchChangeRef.current?.(next);
+		}, searchDebounce);
+	}, [searchDebounce]);
+	useEffect(() => () => {
+		clearTimeout(debounceRef.current);
+	}, []);
 	const [activeValue, setActiveValue] = useState(void 0);
 	const listRef = useRef(null);
 	const visibleValues = useRef(/* @__PURE__ */ new Set());
@@ -58,15 +86,22 @@ function Combobox({ value: valueProp, defaultValue, onValueChange, open: openPro
 			setSearch("");
 			setActiveValue(void 0);
 		}
-	}, [openProp, onOpenChange]);
-	const select = useCallback((next) => {
-		if (valueProp === void 0) setUncontrolledValue(next);
+	}, [
+		openProp,
+		onOpenChange,
+		setSearch
+	]);
+	const select = useCallback((chosen) => {
+		const next = allowDeselect && chosen === value ? "" : chosen;
+		if (valueProp === void 0) setUncontrolledValue(next || void 0);
 		onValueChange?.(next);
 		setOpen(false);
 	}, [
 		valueProp,
 		onValueChange,
-		setOpen
+		setOpen,
+		allowDeselect,
+		value
 	]);
 	const context = useMemo(() => ({
 		open,
@@ -83,11 +118,14 @@ function Combobox({ value: valueProp, defaultValue, onValueChange, open: openPro
 		optionId: (optionValue) => `${uid}-option-${optionValue.replace(/\s+/g, "-").toLowerCase()}`,
 		listRef,
 		registerVisible,
-		visibleCount
+		visibleCount,
+		loading
 	}), [
 		open,
 		setOpen,
 		search,
+		setSearch,
+		loading,
 		value,
 		select,
 		activeValue,
@@ -105,6 +143,9 @@ function Combobox({ value: valueProp, defaultValue, onValueChange, open: openPro
 		})
 	});
 }
+function acceptAll() {
+	return true;
+}
 function ComboboxTrigger({ className, placeholder = "Select…", children, ...props }) {
 	const { value, open } = useCombobox("ComboboxTrigger");
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
@@ -122,7 +163,8 @@ function ComboboxTrigger({ className, placeholder = "Select…", children, ...pr
 				viewBox: "0 0 24 24",
 				fill: "none",
 				"aria-hidden": "true",
-				className: "size-4 shrink-0 opacity-60",
+				"data-slot": "combobox-chevron",
+				className: cn("size-4 shrink-0 opacity-60", "transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", open && "rotate-180"),
 				children: /* @__PURE__ */ jsx("path", {
 					d: "m7 10 5 5 5-5",
 					stroke: "currentColor",
@@ -153,7 +195,7 @@ function visibleOptions(list) {
 	if (!list) return [];
 	return Array.from(list.querySelectorAll("[role=\"option\"]:not([data-disabled])"));
 }
-function ComboboxInput({ className, ...props }) {
+function ComboboxInput({ className, clearable = false, ...props }) {
 	const { search, setSearch, activeValue, setActiveValue, select, setOpen, listId, inputId, optionId, listRef } = useCombobox("ComboboxInput");
 	const inputRef = useRef(null);
 	useEffect(() => {
@@ -207,51 +249,81 @@ function ComboboxInput({ className, ...props }) {
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2 border-b border-border px-3",
-		children: [/* @__PURE__ */ jsxs("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none",
-			"aria-hidden": "true",
-			className: "size-4 shrink-0 opacity-55",
-			children: [/* @__PURE__ */ jsx("circle", {
-				cx: "11",
-				cy: "11",
-				r: "7",
-				stroke: "currentColor",
-				strokeWidth: "2"
-			}), /* @__PURE__ */ jsx("path", {
-				d: "m20 20-3.5-3.5",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round"
-			})]
-		}), /* @__PURE__ */ jsx("input", {
-			ref: inputRef,
-			id: inputId,
-			"data-slot": "combobox-input",
-			type: "text",
-			role: "combobox",
-			autoComplete: "off",
-			"aria-expanded": "true",
-			"aria-controls": listId,
-			"aria-autocomplete": "list",
-			"aria-activedescendant": activeValue ? optionId(activeValue) : void 0,
-			value: search,
-			onChange: (event) => {
-				setSearch(event.target.value);
-				setActiveValue(void 0);
-			},
-			onKeyDown: handleKeyDown,
-			className: cn("h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground", className),
-			...props
-		})]
+		children: [
+			/* @__PURE__ */ jsxs("svg", {
+				viewBox: "0 0 24 24",
+				fill: "none",
+				"aria-hidden": "true",
+				className: "size-4 shrink-0 opacity-55",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "11",
+					cy: "11",
+					r: "7",
+					stroke: "currentColor",
+					strokeWidth: "2"
+				}), /* @__PURE__ */ jsx("path", {
+					d: "m20 20-3.5-3.5",
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				id: inputId,
+				"data-slot": "combobox-input",
+				type: "text",
+				role: "combobox",
+				autoComplete: "off",
+				"aria-expanded": "true",
+				"aria-controls": listId,
+				"aria-autocomplete": "list",
+				"aria-activedescendant": activeValue ? optionId(activeValue) : void 0,
+				value: search,
+				onChange: (event) => {
+					setSearch(event.target.value);
+					setActiveValue(void 0);
+				},
+				onKeyDown: handleKeyDown,
+				className: cn("h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground", className),
+				...props
+			}),
+			clearable && search ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "combobox-clear",
+				"aria-label": "Clear search",
+				onMouseDown: (event) => {
+					event.preventDefault();
+				},
+				onClick: () => {
+					setSearch("");
+					setActiveValue(void 0);
+					inputRef.current?.focus();
+				},
+				className: cn("-me-1 grid size-6 shrink-0 place-items-center rounded-sm opacity-60 hover:opacity-100", "transition-opacity duration-[var(--duration-fast)]", focusRing),
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					"aria-hidden": "true",
+					className: "size-3.5",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "M6 6l12 12M18 6 6 18",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round"
+					})
+				})
+			}) : null
+		]
 	});
 }
 function ComboboxList({ className, ...props }) {
-	const { listId, listRef } = useCombobox("ComboboxList");
+	const { listId, listRef, loading } = useCombobox("ComboboxList");
 	return /* @__PURE__ */ jsx("div", {
 		ref: listRef,
 		id: listId,
 		role: "listbox",
+		"aria-busy": loading || void 0,
 		"data-slot": "combobox-list",
 		className: cn("max-h-64 overflow-y-auto overscroll-contain p-1", className),
 		...props
@@ -310,28 +382,36 @@ function ComboboxItem({ className, value, keywords, disabled, children, ...props
 		},
 		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[active]:bg-accent data-[active]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
-		children: [children ?? value, selected ? /* @__PURE__ */ jsx("span", {
-			className: "absolute end-2 grid size-4 place-items-center",
-			children: /* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 24 24",
-				fill: "none",
-				"aria-hidden": "true",
-				className: "size-3.5",
-				children: /* @__PURE__ */ jsx("path", {
-					d: "m5 13 4 4L19 7",
-					stroke: "currentColor",
-					strokeWidth: "2.5",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-combobox",
+				precedence: "dowel",
+				children: ITEM_KEYFRAMES
+			}),
+			children ?? value,
+			selected ? /* @__PURE__ */ jsx("span", {
+				className: "absolute end-2 grid size-4 place-items-center",
+				children: /* @__PURE__ */ jsx("svg", {
+					viewBox: "0 0 24 24",
+					fill: "none",
+					"aria-hidden": "true",
+					className: "size-3.5",
+					children: /* @__PURE__ */ jsx("path", {
+						d: "m5 13 4 4L19 7",
+						stroke: "currentColor",
+						strokeWidth: "2.5",
+						strokeLinecap: "round",
+						strokeLinejoin: "round"
+					})
 				})
-			})
-		}) : null]
+			}) : null
+		]
 	});
 }
 /** Shown only when the filter leaves nothing. */
 function ComboboxEmpty({ className, children, ...props }) {
-	const { visibleCount } = useCombobox("ComboboxEmpty");
-	if (visibleCount > 0) return null;
+	const { visibleCount, loading } = useCombobox("ComboboxEmpty");
+	if (visibleCount > 0 || loading) return null;
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "combobox-empty",
 		role: "presentation",
@@ -340,7 +420,22 @@ function ComboboxEmpty({ className, children, ...props }) {
 		children: children ?? "No results found."
 	});
 }
+/**
+* Shown only while `loading` is set on Combobox. Render it beside ComboboxList,
+* as with ComboboxEmpty; pass a Spinner as a child if wanted.
+*/
+function ComboboxLoading({ className, children, ...props }) {
+	const { loading } = useCombobox("ComboboxLoading");
+	if (!loading) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "combobox-loading",
+		role: "status",
+		className: cn("flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground", "animate-float-in", className),
+		...props,
+		children: children ?? "Loading…"
+	});
+}
 //#endregion
-export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter };
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, ComboboxTrigger, defaultComboboxFilter };
 
 //# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":["PopoverPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable single-select.\n *\n * Implements the ARIA combobox pattern directly on a popover rather than\n * depending on a command-menu package: the input owns `role=\"combobox\"`, the\n * list owns `role=\"listbox\"`, and the active option is tracked with\n * `aria-activedescendant` so focus never leaves the input while typing.\n *\n * Navigation reads the rendered options from the DOM rather than a registry,\n * which keeps the active option correct as filtering adds and removes items —\n * a registry has to be kept in sync with what is actually on screen, and drifts.\n *\n * This version is single-select and flat. Multi-select and grouping can be\n * added without changing this API.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultComboboxFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface ComboboxContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  search: string;\n  setSearch: (search: string) => void;\n  value: string | undefined;\n  select: (value: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useCombobox(component: string): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Combobox>.`);\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Overrides how a search string is matched against an option. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  children?: ReactNode;\n}\n\nexport function Combobox({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  filter = defaultComboboxFilter,\n  children,\n}: ComboboxProps) {\n  const uid = useId();\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp === undefined ? uncontrolledValue : valueProp;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp === undefined ? uncontrolledOpen : openProp;\n\n  const [search, setSearch] = useState(\"\");\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  // Counted rather than listed: the empty state only needs to know whether\n  // anything survived the filter.\n  const visibleValues = useRef(new Set<string>());\n  const [visibleCount, setVisibleCount] = useState(0);\n\n  const registerVisible = useCallback((optionValue: string, visible: boolean) => {\n    const set = visibleValues.current;\n    const had = set.has(optionValue);\n    if (visible && !had) set.add(optionValue);\n    else if (!visible && had) set.delete(optionValue);\n    else return;\n    setVisibleCount(set.size);\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      // Reopening should start from a clean search rather than resuming a\n      // half-typed query the user has forgotten about.\n      if (!next) {\n        setSearch(\"\");\n        setActiveValue(undefined);\n      }\n    },\n    [openProp, onOpenChange],\n  );\n\n  const select = useCallback(\n    (next: string) => {\n      if (valueProp === undefined) setUncontrolledValue(next);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [valueProp, onValueChange, setOpen],\n  );\n\n  const context = useMemo<ComboboxContextValue>(\n    () => ({\n      open,\n      setOpen,\n      search,\n      setSearch,\n      value,\n      select,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (optionValue: string) =>\n        `${uid}-option-${optionValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible,\n      visibleCount,\n    }),\n    [\n      open,\n      setOpen,\n      search,\n      value,\n      select,\n      activeValue,\n      filter,\n      uid,\n      registerVisible,\n      visibleCount,\n    ],\n  );\n\n  return (\n    <ComboboxContext.Provider value={context}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        {children}\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nexport interface ComboboxTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shown when nothing is selected. */\n  placeholder?: string;\n}\n\nexport function ComboboxTrigger({\n  className,\n  placeholder = \"Select…\",\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  const { value, open } = useCombobox(\"ComboboxTrigger\");\n\n  return (\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"combobox-trigger\"\n        aria-expanded={open}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n          \"px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-visible:border-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-55\",\n          \"aria-invalid:border-destructive\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n          {children ?? value ?? placeholder}\n        </span>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          className=\"size-4 shrink-0 opacity-60\"\n        >\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport interface ComboboxContentProps extends ComponentPropsWithRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  label = \"Search options\",\n  children,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-label={label}\n        // Focus belongs in the search input, which the input claims on mount.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n        }}\n        className={cn(\n          \"z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden\",\n          \"rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-popover-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Options currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleOptions(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport type ComboboxInputProps = Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"onChange\">;\n\nexport function ComboboxInput({ className, ...props }: ComboboxInputProps) {\n  const {\n    search,\n    setSearch,\n    activeValue,\n    setActiveValue,\n    select,\n    setOpen,\n    listId,\n    inputId,\n    optionId,\n    listRef,\n  } = useCombobox(\"ComboboxInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const options = visibleOptions(listRef.current);\n      if (options.length === 0) return;\n\n      const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = options.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;\n      // Wraps, so holding an arrow key never dead-ends at the edge of the list.\n      else nextIndex = (currentIndex + delta + options.length) % options.length;\n\n      const next = options[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        select(activeValue);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        setOpen(false);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"combobox-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The previous active option may have just been filtered out.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n}\n\nexport function ComboboxList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef } = useCombobox(\"ComboboxList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      data-slot=\"combobox-list\"\n      className={cn(\"max-h-64 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** The value reported by onValueChange, and the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown, such as synonyms or an id. */\n  keywords?: string[];\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function ComboboxItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  children,\n  ...props\n}: ComboboxItemProps) {\n  const {\n    search,\n    filter,\n    value: selectedValue,\n    activeValue,\n    setActiveValue,\n    select,\n    optionId,\n    registerVisible,\n  } = useCombobox(\"ComboboxItem\");\n\n  // A string child is the visible label, so it is searchable for free. Richer\n  // children cannot be read purely, so those pass `keywords` instead.\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const selected = selectedValue === value;\n  const active = activeValue === value;\n\n  useEffect(() => {\n    registerVisible(value, visible && !disabled);\n    return () => {\n      registerVisible(value, false);\n    };\n  }, [registerVisible, value, visible, disabled]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"combobox-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but out of the tab order: in an\n      // aria-activedescendant listbox the input keeps real focus and options are\n      // only virtually focused, so they must never become tab stops.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Without this, pressing on an option blurs the search input, which\n        // breaks aria-activedescendant and can dismiss the popover before the\n        // click ever lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) select(value);\n      }}\n      onKeyDown={(event) => {\n        // Reachable only if a consumer focuses an option directly; the normal\n        // path is Enter on the input, handled by ComboboxInput.\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          select(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? value}\n      {selected ? (\n        <span className=\"absolute end-2 grid size-4 place-items-center\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Shown only when the filter leaves nothing. */\nexport function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount } = useCombobox(\"ComboboxEmpty\");\n  if (visibleCount > 0) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":["PopoverPrimitive"],"sources":["../../../src/components/combobox/combobox.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Combobox and SearchableDropdown (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport { Popover as PopoverPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A searchable single-select.\n *\n * Implements the ARIA combobox pattern directly on a popover rather than\n * depending on a command-menu package: the input owns `role=\"combobox\"`, the\n * list owns `role=\"listbox\"`, and the active option is tracked with\n * `aria-activedescendant` so focus never leaves the input while typing.\n *\n * Navigation reads the rendered options from the DOM rather than a registry,\n * which keeps the active option correct as filtering adds and removes items —\n * a registry has to be kept in sync with what is actually on screen, and drifts.\n *\n * This version is single-select and flat. Multi-select and grouping can be\n * added without changing this API.\n */\n\n/** Default match: case-insensitive substring over the value and any keywords. */\nexport function defaultComboboxFilter(search: string, haystack: string[]): boolean {\n  const needle = search.trim().toLowerCase();\n  if (!needle) return true;\n  return haystack.some((entry) => entry.toLowerCase().includes(needle));\n}\n\ninterface ComboboxContextValue {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  search: string;\n  setSearch: (search: string) => void;\n  value: string | undefined;\n  select: (value: string) => void;\n  activeValue: string | undefined;\n  setActiveValue: (value: string | undefined) => void;\n  filter: (search: string, haystack: string[]) => boolean;\n  listId: string;\n  inputId: string;\n  optionId: (value: string) => string;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  registerVisible: (value: string, visible: boolean) => void;\n  visibleCount: number;\n  loading: boolean;\n}\n\nconst ComboboxContext = createContext<ComboboxContextValue | null>(null);\n\nfunction useCombobox(component: string): ComboboxContextValue {\n  const context = useContext(ComboboxContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Combobox>.`);\n  }\n  return context;\n}\n\nexport interface ComboboxProps {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Overrides how a search string is matched against an option. */\n  filter?: (search: string, haystack: string[]) => boolean;\n  /**\n   * Set `false` when the options are already the results for the search — for\n   * example when `onSearchChange` fetches them — so they are not filtered twice.\n   */\n  shouldFilter?: boolean;\n  /** Called as the search text changes, including the reset when it closes. */\n  onSearchChange?: (search: string) => void;\n  /** Milliseconds of quiet typing before `onSearchChange` fires. */\n  searchDebounce?: number;\n  /**\n   * Results are on their way: the listbox is `aria-busy`, `ComboboxLoading`\n   * shows and `ComboboxEmpty` holds back, so \"No results\" never flashes first.\n   */\n  loading?: boolean;\n  /** Choosing the selected option again clears it, reporting `\"\"`. */\n  allowDeselect?: boolean;\n  children?: ReactNode;\n}\n\n/*\n * Motion (SmoothUI's Combobox): options rise in, the first few a beat apart,\n * and the trigger's chevron turns while open. Keyframes ship with the\n * component (ADR 0014); every duration and delay runs on the motion scale.\n */\nconst ITEM_STAGGER = Array.from(\n  { length: 8 },\n  (_, index) =>\n    `[data-slot=\"combobox-item\"]:nth-child(${String(index + 2)}){animation-delay:calc(${String((index + 1) * 20)}ms * var(--motion-scale, 1))}`,\n).join(\"\");\n\nconst ITEM_KEYFRAMES = `\n@keyframes dowel-combobox-item-in{from{opacity:0;transform:translateY(0.25rem)}}\n[data-slot=\"combobox-item\"]{animation:dowel-combobox-item-in var(--duration-normal) var(--ease-out-quint) backwards}\n${ITEM_STAGGER}\n`;\n\nexport function Combobox({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  filter: filterProp = defaultComboboxFilter,\n  shouldFilter = true,\n  onSearchChange,\n  searchDebounce = 0,\n  loading = false,\n  allowDeselect = false,\n  children,\n}: ComboboxProps) {\n  const uid = useId();\n  const filter = shouldFilter ? filterProp : acceptAll;\n\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = valueProp === undefined ? uncontrolledValue : valueProp;\n\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const open = openProp === undefined ? uncontrolledOpen : openProp;\n\n  const [search, setSearchState] = useState(\"\");\n  const searchRef = useRef(\"\");\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  const onSearchChangeRef = useRef(onSearchChange);\n  useEffect(() => {\n    onSearchChangeRef.current = onSearchChange;\n  }, [onSearchChange]);\n\n  const setSearch = useCallback(\n    (next: string) => {\n      if (next === searchRef.current) return;\n      searchRef.current = next;\n      setSearchState(next);\n      clearTimeout(debounceRef.current);\n      if (searchDebounce <= 0) {\n        onSearchChangeRef.current?.(next);\n        return;\n      }\n      debounceRef.current = setTimeout(() => {\n        onSearchChangeRef.current?.(next);\n      }, searchDebounce);\n    },\n    [searchDebounce],\n  );\n\n  useEffect(\n    () => () => {\n      clearTimeout(debounceRef.current);\n    },\n    [],\n  );\n  const [activeValue, setActiveValue] = useState<string | undefined>(undefined);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  // Counted rather than listed: the empty state only needs to know whether\n  // anything survived the filter.\n  const visibleValues = useRef(new Set<string>());\n  const [visibleCount, setVisibleCount] = useState(0);\n\n  const registerVisible = useCallback((optionValue: string, visible: boolean) => {\n    const set = visibleValues.current;\n    const had = set.has(optionValue);\n    if (visible && !had) set.add(optionValue);\n    else if (!visible && had) set.delete(optionValue);\n    else return;\n    setVisibleCount(set.size);\n  }, []);\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (openProp === undefined) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n      // Reopening should start from a clean search rather than resuming a\n      // half-typed query the user has forgotten about.\n      if (!next) {\n        setSearch(\"\");\n        setActiveValue(undefined);\n      }\n    },\n    [openProp, onOpenChange, setSearch],\n  );\n\n  const select = useCallback(\n    (chosen: string) => {\n      const next = allowDeselect && chosen === value ? \"\" : chosen;\n      if (valueProp === undefined) setUncontrolledValue(next || undefined);\n      onValueChange?.(next);\n      setOpen(false);\n    },\n    [valueProp, onValueChange, setOpen, allowDeselect, value],\n  );\n\n  const context = useMemo<ComboboxContextValue>(\n    () => ({\n      open,\n      setOpen,\n      search,\n      setSearch,\n      value,\n      select,\n      activeValue,\n      setActiveValue,\n      filter,\n      listId: `${uid}-list`,\n      inputId: `${uid}-input`,\n      optionId: (optionValue: string) =>\n        `${uid}-option-${optionValue.replace(/\\s+/g, \"-\").toLowerCase()}`,\n      listRef,\n      registerVisible,\n      visibleCount,\n      loading,\n    }),\n    [\n      open,\n      setOpen,\n      search,\n      setSearch,\n      loading,\n      value,\n      select,\n      activeValue,\n      filter,\n      uid,\n      registerVisible,\n      visibleCount,\n    ],\n  );\n\n  return (\n    <ComboboxContext.Provider value={context}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        {children}\n      </PopoverPrimitive.Root>\n    </ComboboxContext.Provider>\n  );\n}\n\nfunction acceptAll(): boolean {\n  return true;\n}\n\nexport interface ComboboxTriggerProps extends ComponentPropsWithRef<\"button\"> {\n  /** Shown when nothing is selected. */\n  placeholder?: string;\n}\n\nexport function ComboboxTrigger({\n  className,\n  placeholder = \"Select…\",\n  children,\n  ...props\n}: ComboboxTriggerProps) {\n  const { value, open } = useCombobox(\"ComboboxTrigger\");\n\n  return (\n    <PopoverPrimitive.Trigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"combobox-trigger\"\n        aria-expanded={open}\n        className={cn(\n          \"flex h-9 w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n          \"px-3 text-sm shadow-xs transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-visible:border-ring\",\n          \"disabled:cursor-not-allowed disabled:opacity-55\",\n          \"aria-invalid:border-destructive\",\n          focusRing,\n          className,\n        )}\n        {...props}\n      >\n        <span className={cn(\"truncate\", !value && \"text-muted-foreground\")}>\n          {children ?? value ?? placeholder}\n        </span>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n          data-slot=\"combobox-chevron\"\n          className={cn(\n            \"size-4 shrink-0 opacity-60\",\n            \"transition-[rotate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            open && \"rotate-180\",\n          )}\n        >\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </button>\n    </PopoverPrimitive.Trigger>\n  );\n}\n\nexport interface ComboboxContentProps extends ComponentPropsWithRef<\n  typeof PopoverPrimitive.Content\n> {\n  /** Names the popover, which carries role=\"dialog\". */\n  label?: string;\n}\n\nexport function ComboboxContent({\n  className,\n  align = \"start\",\n  sideOffset = 6,\n  label = \"Search options\",\n  children,\n  ...props\n}: ComboboxContentProps) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"combobox-content\"\n        align={align}\n        sideOffset={sideOffset}\n        aria-label={label}\n        // Focus belongs in the search input, which the input claims on mount.\n        onOpenAutoFocus={(event) => {\n          event.preventDefault();\n        }}\n        className={cn(\n          \"z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] min-w-48 overflow-hidden\",\n          \"rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-popover-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  );\n}\n\n/** Options currently rendered, in DOM order and excluding disabled ones. */\nfunction visibleOptions(list: HTMLElement | null): HTMLElement[] {\n  if (!list) return [];\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"option\"]:not([data-disabled])'));\n}\n\nexport interface ComboboxInputProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  \"value\" | \"onChange\"\n> {\n  /** Shows a button that clears the search while there is text to clear. */\n  clearable?: boolean;\n}\n\nexport function ComboboxInput({ className, clearable = false, ...props }: ComboboxInputProps) {\n  const {\n    search,\n    setSearch,\n    activeValue,\n    setActiveValue,\n    select,\n    setOpen,\n    listId,\n    inputId,\n    optionId,\n    listRef,\n  } = useCombobox(\"ComboboxInput\");\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  useEffect(() => {\n    inputRef.current?.focus();\n  }, []);\n\n  const move = useCallback(\n    (delta: number | \"first\" | \"last\") => {\n      const options = visibleOptions(listRef.current);\n      if (options.length === 0) return;\n\n      const currentIndex = options.findIndex((option) => option.dataset.value === activeValue);\n\n      let nextIndex: number;\n      if (delta === \"first\") nextIndex = 0;\n      else if (delta === \"last\") nextIndex = options.length - 1;\n      else if (currentIndex === -1) nextIndex = delta > 0 ? 0 : options.length - 1;\n      // Wraps, so holding an arrow key never dead-ends at the edge of the list.\n      else nextIndex = (currentIndex + delta + options.length) % options.length;\n\n      const next = options[nextIndex];\n      if (!next) return;\n      setActiveValue(next.dataset.value);\n      next.scrollIntoView({ block: \"nearest\" });\n    },\n    [activeValue, listRef, setActiveValue],\n  );\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLInputElement>) {\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        move(1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        move(-1);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        move(\"first\");\n        break;\n      case \"End\":\n        event.preventDefault();\n        move(\"last\");\n        break;\n      case \"Enter\": {\n        if (activeValue === undefined) return;\n        event.preventDefault();\n        select(activeValue);\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        setOpen(false);\n        break;\n      default:\n        break;\n    }\n  }\n\n  return (\n    <div className=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 opacity-55\"\n      >\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" />\n        <path d=\"m20 20-3.5-3.5\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n      </svg>\n      <input\n        ref={inputRef}\n        id={inputId}\n        data-slot=\"combobox-input\"\n        type=\"text\"\n        role=\"combobox\"\n        autoComplete=\"off\"\n        aria-expanded=\"true\"\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeValue ? optionId(activeValue) : undefined}\n        value={search}\n        onChange={(event) => {\n          setSearch(event.target.value);\n          // The previous active option may have just been filtered out.\n          setActiveValue(undefined);\n        }}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"h-10 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\",\n          className,\n        )}\n        {...props}\n      />\n      {clearable && search ? (\n        <button\n          type=\"button\"\n          data-slot=\"combobox-clear\"\n          aria-label=\"Clear search\"\n          // Keeps focus, and so aria-activedescendant, in the input.\n          onMouseDown={(event) => {\n            event.preventDefault();\n          }}\n          onClick={() => {\n            setSearch(\"\");\n            setActiveValue(undefined);\n            inputRef.current?.focus();\n          }}\n          className={cn(\n            \"-me-1 grid size-6 shrink-0 place-items-center rounded-sm opacity-60 hover:opacity-100\",\n            \"transition-opacity duration-[var(--duration-fast)]\",\n            focusRing,\n          )}\n        >\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"M6 6l12 12M18 6 6 18\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n            />\n          </svg>\n        </button>\n      ) : null}\n    </div>\n  );\n}\n\nexport function ComboboxList({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { listId, listRef, loading } = useCombobox(\"ComboboxList\");\n\n  return (\n    <div\n      ref={listRef}\n      id={listId}\n      role=\"listbox\"\n      aria-busy={loading || undefined}\n      data-slot=\"combobox-list\"\n      className={cn(\"max-h-64 overflow-y-auto overscroll-contain p-1\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ComboboxItemProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onSelect\" | \"children\"\n> {\n  /** The value reported by onValueChange, and the primary search term. */\n  value: string;\n  /** Extra search terms that are not shown, such as synonyms or an id. */\n  keywords?: string[];\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\nexport function ComboboxItem({\n  className,\n  value,\n  keywords,\n  disabled,\n  children,\n  ...props\n}: ComboboxItemProps) {\n  const {\n    search,\n    filter,\n    value: selectedValue,\n    activeValue,\n    setActiveValue,\n    select,\n    optionId,\n    registerVisible,\n  } = useCombobox(\"ComboboxItem\");\n\n  // A string child is the visible label, so it is searchable for free. Richer\n  // children cannot be read purely, so those pass `keywords` instead.\n  const haystack = useMemo(\n    () => [value, ...(keywords ?? []), typeof children === \"string\" ? children : \"\"],\n    [value, keywords, children],\n  );\n\n  const visible = filter(search, haystack);\n  const selected = selectedValue === value;\n  const active = activeValue === value;\n\n  useEffect(() => {\n    registerVisible(value, visible && !disabled);\n    return () => {\n      registerVisible(value, false);\n    };\n  }, [registerVisible, value, visible, disabled]);\n\n  if (!visible) return null;\n\n  return (\n    <div\n      id={optionId(value)}\n      role=\"option\"\n      data-slot=\"combobox-item\"\n      data-value={value}\n      data-active={active || undefined}\n      data-disabled={disabled || undefined}\n      aria-selected={selected}\n      aria-disabled={disabled || undefined}\n      // Programmatically focusable but out of the tab order: in an\n      // aria-activedescendant listbox the input keeps real focus and options are\n      // only virtually focused, so they must never become tab stops.\n      tabIndex={-1}\n      onPointerMove={() => {\n        if (!disabled) setActiveValue(value);\n      }}\n      onMouseDown={(event) => {\n        // Without this, pressing on an option blurs the search input, which\n        // breaks aria-activedescendant and can dismiss the popover before the\n        // click ever lands.\n        event.preventDefault();\n      }}\n      onClick={() => {\n        if (!disabled) select(value);\n      }}\n      onKeyDown={(event) => {\n        // Reachable only if a consumer focuses an option directly; the normal\n        // path is Enter on the input, handled by ComboboxInput.\n        if (disabled) return;\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          select(value);\n        }\n      }}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[active]:bg-accent data-[active]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <style href=\"dowel-combobox\" precedence=\"dowel\">\n        {ITEM_KEYFRAMES}\n      </style>\n      {children ?? value}\n      {selected ? (\n        <span className=\"absolute end-2 grid size-4 place-items-center\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\n/** Shown only when the filter leaves nothing. */\nexport function ComboboxEmpty({ className, children, ...props }: ComponentPropsWithRef<\"div\">) {\n  const { visibleCount, loading } = useCombobox(\"ComboboxEmpty\");\n  if (visibleCount > 0 || loading) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-empty\"\n      role=\"presentation\"\n      className={cn(\"px-3 py-6 text-center text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      {children ?? \"No results found.\"}\n    </div>\n  );\n}\n\n/**\n * Shown only while `loading` is set on Combobox. Render it beside ComboboxList,\n * as with ComboboxEmpty; pass a Spinner as a child if wanted.\n */\nexport function ComboboxLoading({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<\"div\">) {\n  const { loading } = useCombobox(\"ComboboxLoading\");\n  if (!loading) return null;\n\n  return (\n    <div\n      data-slot=\"combobox-loading\"\n      role=\"status\"\n      className={cn(\n        \"flex items-center justify-center gap-2 px-3 py-6 text-sm text-muted-foreground\",\n        \"animate-float-in\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? \"Loading…\"}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/combobox/index.d.ts

@@ -1,2 +1,2 @@
-import { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter } from "./combobox.js";
-export { Combobox, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxList, type ComboboxProps, ComboboxTrigger, type ComboboxTriggerProps, defaultComboboxFilter };
+import { Combobox, ComboboxContent, ComboboxContentProps, ComboboxEmpty, ComboboxInput, ComboboxInputProps, ComboboxItem, ComboboxItemProps, ComboboxList, ComboboxLoading, ComboboxProps, ComboboxTrigger, ComboboxTriggerProps, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, type ComboboxContentProps, ComboboxEmpty, ComboboxInput, type ComboboxInputProps, ComboboxItem, type ComboboxItemProps, ComboboxList, ComboboxLoading, type ComboboxProps, ComboboxTrigger, type ComboboxTriggerProps, defaultComboboxFilter };

package/dist/components/combobox/index.js

@@ -1,2 +1,2 @@
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter } from "./combobox.js";
-export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, defaultComboboxFilter };
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, ComboboxTrigger, defaultComboboxFilter } from "./combobox.js";
+export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxLoading, ComboboxTrigger, defaultComboboxFilter };

package/dist/components/combobox/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["combobox.tsx"],
-	a11y: "The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes."
+	a11y: "The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays in the input while arrow keys move aria-activedescendant, so typing is never interrupted. Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes. With loading set, the listbox is aria-busy, ComboboxLoading is a status and the empty state waits for the answer. The optional clear button is a named button that returns focus to the input."
 });
 //#endregion
 export { meta };

package/dist/components/combobox/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/combobox/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"combobox\",\n  title: \"Combobox\",\n  description: \"A searchable single-select built on the ARIA combobox pattern.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"combobox.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; ' +\n    'the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays ' +\n    \"in the input while arrow keys move aria-activedescendant, so typing is never interrupted. \" +\n    \"Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/combobox/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"combobox\",\n  title: \"Combobox\",\n  description: \"A searchable single-select built on the ARIA combobox pattern.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"combobox.tsx\"],\n  a11y:\n    'The input owns role=\"combobox\" with aria-expanded, aria-controls and aria-autocomplete; ' +\n    'the list owns role=\"listbox\" and each option role=\"option\" with aria-selected. Focus stays ' +\n    \"in the input while arrow keys move aria-activedescendant, so typing is never interrupted. \" +\n    \"Arrow navigation wraps, Home/End jump, Enter selects the active option and Escape closes.\" +\n    \" With loading set, the listbox is aria-busy, ComboboxLoading is a status and the empty state waits for the answer. The optional clear button is a named button that returns focus to the input.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,cAAc;CACtB,MACE;AAKJ,CAAC"}