@dowel-ui/react 0.5.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        \"ml-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/collapsible/collapsible.d.ts

@@ -0,0 +1,30 @@
+import { Collapsible } from "radix-ui";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/collapsible/collapsible.d.ts
+/**
+ * A section that opens and closes.
+ *
+ * Unlike Accordion, there is no set: one region, one trigger, no notion of
+ * "only one open at a time". Reaching for an Accordion with a single item
+ * gives that item a `heading` role and a position in a list of one, both of
+ * which are noise.
+ *
+ * The height animation is driven by the primitive's own measured height rather
+ * than a guess, so content of any size opens smoothly, and it derives from
+ * `--duration-*` so the motion scale applies.
+ */
+type CollapsibleProps = ComponentPropsWithRef<typeof Collapsible.Root>;
+/**
+ * Wrapped rather than re-exported.
+ *
+ * A bare `export const Collapsible = CollapsiblePrimitive.Root` leaves the
+ * inferred type pointing into the primitive's own package, which TypeScript
+ * cannot name in declaration output (TS2883). It also gives every other
+ * component's `data-slot` a hole where this one should be.
+ */
+declare function Collapsible$1({ className, ...props }: CollapsibleProps): import("react").JSX.Element;
+declare function CollapsibleTrigger({ className, ...props }: ComponentPropsWithRef<typeof Collapsible.Trigger>): import("react").JSX.Element;
+declare function CollapsibleContent({ className, ...props }: ComponentPropsWithRef<typeof Collapsible.Content>): import("react").JSX.Element;
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger };
+//# sourceMappingURL=collapsible.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","names":[],"sources":["../../../src/components/collapsible/collapsible.tsx"],"mappings":";;;;;;;;;;;;;;;KAoBY,mBAAmB,6BAA6B,YAAqB;;;;;;;;;iBAUjE,gBAAc,cAAc,SAAS,mCAAgB,IAAA;iBAIrD,qBACd,cACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA;iBAU7C,qBACd,cACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA"}

package/dist/components/collapsible/collapsible.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Collapsible } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/collapsible/collapsible.tsx
+/**
+* Wrapped rather than re-exported.
+*
+* A bare `export const Collapsible = CollapsiblePrimitive.Root` leaves the
+* inferred type pointing into the primitive's own package, which TypeScript
+* cannot name in declaration output (TS2883). It also gives every other
+* component's `data-slot` a hole where this one should be.
+*/
+function Collapsible$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		className,
+		...props
+	});
+}
+function CollapsibleTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"data-slot": "collapsible-trigger",
+		className: cn("outline-none", className),
+		...props
+	});
+}
+function CollapsibleContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Content, {
+		"data-slot": "collapsible-content",
+		className: cn("overflow-hidden", "data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down", className),
+		...props
+	});
+}
+//#endregion
+export { Collapsible$1 as Collapsible, CollapsibleContent, CollapsibleTrigger };
+
+//# sourceMappingURL=collapsible.js.map

package/dist/components/collapsible/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","names":["Collapsible","CollapsiblePrimitive"],"sources":["../../../src/components/collapsible/collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A section that opens and closes.\n *\n * Unlike Accordion, there is no set: one region, one trigger, no notion of\n * \"only one open at a time\". Reaching for an Accordion with a single item\n * gives that item a `heading` role and a position in a list of one, both of\n * which are noise.\n *\n * The height animation is driven by the primitive's own measured height rather\n * than a guess, so content of any size opens smoothly, and it derives from\n * `--duration-*` so the motion scale applies.\n */\n\nexport type CollapsibleProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;\n\n/**\n * Wrapped rather than re-exported.\n *\n * A bare `export const Collapsible = CollapsiblePrimitive.Root` leaves the\n * inferred type pointing into the primitive's own package, which TypeScript\n * cannot name in declaration output (TS2883). It also gives every other\n * component's `data-slot` a hole where this one should be.\n */\nexport function Collapsible({ className, ...props }: CollapsibleProps) {\n  return <CollapsiblePrimitive.Root data-slot=\"collapsible\" className={className} {...props} />;\n}\n\nexport function CollapsibleTrigger({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Trigger>) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"collapsible-trigger\"\n      className={cn(\"outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CollapsibleContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"collapsible-content\"\n      className={cn(\n        \"overflow-hidden\",\n        \"data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AA8BA,SAAgBA,cAAY,EAAE,WAAW,GAAG,SAA2B;CACrE,OAAO,oBAACC,YAAqB,MAAtB;EAA2B,aAAU;EAAyB;EAAW,GAAI;CAAQ,CAAA;AAC9F;AAEA,SAAgB,mBAAmB,EACjC,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GAAG,gBAAgB,SAAS;EACvC,GAAI;CACL,CAAA;AAEL;AAEA,SAAgB,mBAAmB,EACjC,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,mBACA,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

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

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleContent, CollapsibleProps, CollapsibleTrigger } from "./collapsible.js";
+export { Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger };

package/dist/components/collapsible/index.js

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/collapsible/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/collapsible/meta.ts
+const meta = defineMeta({
+	name: "collapsible",
+	title: "Collapsible",
+	description: "A single section that opens and closes, without an accordion's set semantics.",
+	category: "layout",
+	status: "stable",
+	dependencies: ["radix-ui"],
+	registryDependencies: [],
+	files: ["collapsible.tsx"],
+	a11y: "The trigger carries aria-expanded and points at the region it controls, both from the primitive. Reach for this rather than an Accordion of one item: a single-item Accordion gives its trigger a heading role and a position in a list of one, neither of which is true."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/collapsible/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"collapsible\",\n  title: \"Collapsible\",\n  description: \"A single section that opens and closes, without an accordion's set semantics.\",\n  category: \"layout\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"collapsible.tsx\"],\n  a11y:\n    \"The trigger carries aria-expanded and points at the region it controls, both from the \" +\n    \"primitive. Reach for this rather than an Accordion of one item: a single-item Accordion \" +\n    \"gives its trigger a heading role and a position in a list of one, neither of which is true.\",\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,iBAAiB;CACzB,MACE;AAGJ,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
@@ -308,30 +380,38 @@ function ComboboxItem({ className, value, keywords, disabled, children, ...props
 				select(value);
 			}
 		},
-		className: cn("relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 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),
+		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 right-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