@misoto22/design 0.7.0 → 0.8.0

package/dist/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../Button/Button.js";
+const LANGUAGE_LABEL = {
+  bash: "Shell",
+  css: "CSS",
+  html: "HTML",
+  js: "JavaScript",
+  json: "JSON",
+  jsx: "JSX",
+  md: "Markdown",
+  sh: "Shell",
+  ts: "TypeScript",
+  tsx: "TSX"
+};
+const HIGHLIGHTED = "[&_pre]:m-0 [&_pre]:min-w-max [&_pre]:bg-transparent [&_pre]:p-0 [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-[1.7] [&_code]:bg-transparent";
+function CodeBlock({
+  code,
+  html,
+  title,
+  lang,
+  maxHeight,
+  copyable = true,
+  label,
+  className,
+  lineNumbers = false,
+  highlightLines
+}) {
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1600);
+    return () => clearTimeout(timer);
+  }, [copied]);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+    } catch {
+    }
+  };
+  const languageLabel = lang ? LANGUAGE_LABEL[lang] ?? lang.toUpperCase() : void 0;
+  const banded = new Set(highlightLines ?? []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // `min-w-0` is what lets the body below actually scroll: a grid or flex
+        // item defaults to `min-width: auto`, so without it the block grows to
+        // the min-content width of its longest line — an unbroken install
+        // command — and pushes the whole page sideways on a phone.
+        "flex min-w-0 flex-col overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--paper-2)",
+        className
+      ),
+      children: [
+        title || languageLabel || copyable ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b border-(--rule) py-1.5 ps-4 pe-1.5", children: [
+          title ? /* @__PURE__ */ jsx("span", { className: "mono-meta truncate text-(--ink-2)", children: title }) : null,
+          languageLabel ? /* @__PURE__ */ jsx("span", { className: "mono-meta shrink-0 text-(--ink-3-aa)", children: languageLabel }) : null,
+          copyable ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              iconOnly: true,
+              size: "sm",
+              variant: "ghost",
+              onClick: copy,
+              "aria-label": copied ? "Copied" : "Copy the snippet",
+              className: "ms-auto shrink-0 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+              children: copied ? /* @__PURE__ */ jsx(Check, { size: 14, strokeWidth: 1.5, "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { size: 14, strokeWidth: 1.5, "aria-hidden": true })
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            tabIndex: 0,
+            role: "group",
+            "aria-label": label ?? title ?? "Code",
+            style: maxHeight === void 0 ? void 0 : { maxHeight },
+            className: "overflow-auto px-4 py-3.5 scroll-slim",
+            children: html === void 0 ? /* @__PURE__ */ jsx("pre", { className: "m-0 min-w-max bg-transparent p-0 font-mono text-[13px] leading-[1.7]", children: /* @__PURE__ */ jsx("code", { className: "block", children: code.split("\n").map((line, index) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-line": index + 1,
+                "data-highlighted": banded.has(index + 1) ? "" : void 0,
+                className: cn(
+                  "block min-h-[1.7em] border-s-2 border-transparent ps-2",
+                  banded.has(index + 1) && "border-(--accent) bg-(--stone)"
+                ),
+                children: [
+                  lineNumbers ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "inline-block w-8 shrink-0 select-none pe-3 text-end tabular-nums text-(--ink-3-aa)",
+                      children: index + 1
+                    }
+                  ) : null,
+                  line
+                ]
+              },
+              index
+            )) }) }) : (
+              // Trusted markup only: the output of the caller's own highlighter, run
+              // over the caller's own `code`. It is not a place to put anything a
+              // reader wrote — hand that to `code` and let the block render it as
+              // text, which it cannot mis-execute.
+              /* @__PURE__ */ jsx("div", { className: HIGHLIGHTED, dangerouslySetInnerHTML: { __html: html } })
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var CodeBlock_default = CodeBlock;
+export {
+  CodeBlock,
+  CodeBlock_default as default
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/CodeBlock/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["'use client'\n\nimport { Check, Copy } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Button } from '../Button/Button'\n\n/**\n * What a language id is CALLED, for the handful where the id is not a label.\n *\n * Shiki's ids are identifiers, not words: `tsx` and `bash` read fine in upper\n * case, `md` and `ts` do not, and nobody reads `sh` as \"shell\". Anything absent\n * falls through to the id upper-cased, which is right far more often than it is\n * wrong — and a wrong label here is a label, not a crash.\n */\nconst LANGUAGE_LABEL: Record<string, string> = {\n  bash: 'Shell',\n  css: 'CSS',\n  html: 'HTML',\n  js: 'JavaScript',\n  json: 'JSON',\n  jsx: 'JSX',\n  md: 'Markdown',\n  sh: 'Shell',\n  ts: 'TypeScript',\n  tsx: 'TSX',\n}\n\ninterface CommonProps {\n  /**\n   * The snippet, verbatim.\n   *\n   * Required even when `html` is supplied, and that is the point: this is what\n   * the copy button puts on the clipboard. A block that copies its own rendered\n   * markup hands the reader a wall of `<span>`s, and one that copies\n   * `textContent` scraped back out of the DOM is a single non-breaking space\n   * away from pasting something that does not run.\n   */\n  code: string\n  /** A filename or a caption, printed at the start of the strip. */\n  title?: string\n  /**\n   * The language, printed at the end of the strip.\n   *\n   * Optional, and the omission is visible rather than silent: a block with no\n   * language gets no label instead of claiming a wrong one. A code block that\n   * does not say what it is written in makes the reader infer it from the\n   * syntax, which is the one thing they came to the block to learn.\n   */\n  lang?: string\n  /**\n   * Caps the block's height and scrolls past it.\n   *\n   * A number is pixels; a string is any CSS length (`'24rem'`, `'50vh'`). The\n   * body scrolls in both axes and is focusable, so what is past the fold stays\n   * reachable with a keyboard rather than merely present in the DOM.\n   */\n  maxHeight?: number | string\n  /** Drops the copy button, for a block nobody is meant to run. */\n  copyable?: boolean\n  /**\n   * Names the scrollable body for a screen reader. Defaults to `title`, and to\n   * \"Code\" when there is not one.\n   */\n  label?: string\n  className?: string\n}\n\n/**\n * The two forms, and why they are two.\n *\n * `html` is pre-highlighted markup for the SAME snippet. The package does not\n * highlight, and will not: a highlighter is a few hundred kilobytes of grammar\n * and a build-time job. The documentation site runs Shiki inside its generator\n * and hands the result here, which is the shape that half exists for. Without\n * `html` the block renders `code` as text, which is what a template, a README\n * or an agent's answer has and all it needs.\n *\n * `lineNumbers` and `highlightLines` belong to the plain form only, and that is\n * enforced in the TYPE rather than left to a note. They are a per-LINE\n * structure, and `html` is one opaque string this component is not going to\n * start parsing. Typed apart, passing both is a compile error at the call site;\n * typed together it is a prop that renders nothing and says nothing.\n *\n * The plain form is written first because the emitted prop table reads the\n * first arm of a union: this way `lineNumbers` documents as `boolean` rather\n * than as the `never` the other arm gives it.\n */\ntype WithPlainSource = CommonProps & {\n  /**\n   * Absent on this form; `string` on the other.\n   *\n   * Pass pre-highlighted markup — Shiki's output, run at build time over this\n   * same `code` — and the block renders that instead of the plain text. Doing\n   * so takes `lineNumbers` and `highlightLines` away with it.\n   */\n  html?: undefined\n  /** Numbers every line, counting from one. */\n  lineNumbers?: boolean\n  /**\n   * Lines to band, counting from one. A number past the end of the snippet is\n   * ignored rather than throwing — the usual cause is a snippet that got\n   * shorter while the annotation did not.\n   */\n  highlightLines?: number[]\n}\n\ntype WithHighlightedHtml = CommonProps & {\n  html: string\n  /** Not available alongside `html`, which the component does not parse. */\n  lineNumbers?: never\n  /** Not available alongside `html`, which the component does not parse. */\n  highlightLines?: never\n}\n\nexport type CodeBlockProps = WithPlainSource | WithHighlightedHtml\n\n/**\n * The caller's `<pre>`, normalised to ours.\n *\n * Shiki emits a `<pre>` of its own with a background and padding baked in, so\n * the highlighted path would otherwise draw a second plate a shade off the one\n * it is sitting on, at a size that does not match the plain path.\n */\nconst HIGHLIGHTED =\n  '[&_pre]:m-0 [&_pre]:min-w-max [&_pre]:bg-transparent [&_pre]:p-0 [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-[1.7] [&_code]:bg-transparent'\n\n/**\n * A multi-line snippet, on a plate, with a way to take it away.\n *\n * The strip along the top carries the title, the language and the copy button,\n * and it is there whenever there is anything to put in it. It is deliberately\n * not a hover affordance: a control that appears on hover does not exist on a\n * touch screen, which is where a reader is most likely to want the snippet and\n * least able to select it by hand.\n *\n * Line numbers live INSIDE their own line's row rather than in a parallel gutter\n * column. Two columns sharing a line-height align right up until one of them\n * wraps, ships a different font, or scrolls on its own; a number that is a child\n * of the line it numbers cannot come apart from it. The cost is that a number\n * scrolls away with its line: it is inside the scrolling box, not in a gutter\n * beside it. A gutter that stayed put would be a second column to keep in sync,\n * which is the failure this avoids.\n *\n * The body is a focusable, named `role=\"group\"`, and both halves of that are\n * load-bearing. Focusable, because a scrollable box whose contents are not\n * themselves focusable is unreachable by keyboard — there is nothing to Tab to\n * and therefore no way to press an arrow key at it, so the right-hand half of a\n * long line does not exist for anyone not using a mouse. Named, because a tab\n * stop that announces nothing lands the reader in an anonymous box and leaves\n * them to work out what they have arrived in.\n *\n * `group` rather than `region`, and that is the deliberate half. A region is a\n * LANDMARK — one of the handful of major sections a reader navigates a whole\n * page by — and a snippet is not one of those. Three fenced blocks in one\n * article would put three landmarks called \"Code\" into that map, which is\n * exactly the noise the `landmark-unique` rule exists to catch, and it would\n * push the page's real landmarks down a list nobody can now skim. `group`\n * carries the same accessible name to the same reader on the way in, and\n * carries it nowhere else.\n *\n * For a function name inside a sentence, reach for `Code`.\n *\n * @example\n * <CodeBlock code=\"pnpm add @misoto22/design\" lang=\"bash\" />\n * @example\n * <CodeBlock\n *   title=\"cn.ts\"\n *   lang=\"ts\"\n *   lineNumbers\n *   highlightLines={[2]}\n *   maxHeight=\"24rem\"\n *   code={source}\n * />\n * @example\n * // Highlighted at build time by the site's own Shiki pass.\n * <CodeBlock code={source} html={highlighted} lang=\"tsx\" />\n */\nexport function CodeBlock({\n  code,\n  html,\n  title,\n  lang,\n  maxHeight,\n  copyable = true,\n  label,\n  className,\n  lineNumbers = false,\n  highlightLines,\n}: CodeBlockProps) {\n  const [copied, setCopied] = useState(false)\n\n  useEffect(() => {\n    if (!copied) return\n    const timer = setTimeout(() => setCopied(false), 1600)\n    return () => clearTimeout(timer)\n  }, [copied])\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(code)\n      setCopied(true)\n    } catch {\n      // Clipboard access is denied in an insecure context and inside some\n      // embeds. The snippet is still selectable, so there is nothing to\n      // recover — and an unhandled rejection here would take the page with it.\n    }\n  }\n\n  const languageLabel = lang ? (LANGUAGE_LABEL[lang] ?? lang.toUpperCase()) : undefined\n  const banded = new Set(highlightLines ?? [])\n\n  return (\n    <div\n      className={cn(\n        // `min-w-0` is what lets the body below actually scroll: a grid or flex\n        // item defaults to `min-width: auto`, so without it the block grows to\n        // the min-content width of its longest line — an unbroken install\n        // command — and pushes the whole page sideways on a phone.\n        'flex min-w-0 flex-col overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--paper-2)',\n        className,\n      )}\n    >\n      {title || languageLabel || copyable ? (\n        <div className=\"flex items-center gap-3 border-b border-(--rule) py-1.5 ps-4 pe-1.5\">\n          {title ? <span className=\"mono-meta truncate text-(--ink-2)\">{title}</span> : null}\n          {languageLabel ? (\n            <span className=\"mono-meta shrink-0 text-(--ink-3-aa)\">{languageLabel}</span>\n          ) : null}\n          {copyable ? (\n            <Button\n              iconOnly\n              size=\"sm\"\n              variant=\"ghost\"\n              onClick={copy}\n              aria-label={copied ? 'Copied' : 'Copy the snippet'}\n              // `sm` is 36px, under the 44px a finger needs. The bump is gated\n              // on a coarse pointer so a mouse-driven page keeps the compact\n              // strip (WCAG 2.5.5).\n              className=\"ms-auto shrink-0 pointer-coarse:min-h-11 pointer-coarse:min-w-11\"\n            >\n              {copied ? (\n                <Check size={14} strokeWidth={1.5} aria-hidden />\n              ) : (\n                <Copy size={14} strokeWidth={1.5} aria-hidden />\n              )}\n            </Button>\n          ) : null}\n        </div>\n      ) : null}\n\n      <div\n        tabIndex={0}\n        // A named group, not a landmark: see the note above the component.\n        role=\"group\"\n        aria-label={label ?? title ?? 'Code'}\n        style={maxHeight === undefined ? undefined : { maxHeight }}\n        className=\"overflow-auto px-4 py-3.5 scroll-slim\"\n      >\n        {html === undefined ? (\n          <pre className=\"m-0 min-w-max bg-transparent p-0 font-mono text-[13px] leading-[1.7]\">\n            <code className=\"block\">\n              {code.split('\\n').map((line, index) => (\n                <span\n                  key={index}\n                  data-line={index + 1}\n                  data-highlighted={banded.has(index + 1) ? '' : undefined}\n                  // The transparent border is carried by EVERY row, banded or\n                  // not. On the banded ones alone it would shift them two pixels\n                  // along the inline axis — which is the exact misalignment a\n                  // highlight is there to help the reader see past.\n                  //\n                  // `min-h` is what keeps a blank line a line: an empty block\n                  // has no line box and would otherwise collapse to nothing,\n                  // taking every number below it out of step with its code.\n                  className={cn(\n                    'block min-h-[1.7em] border-s-2 border-transparent ps-2',\n                    banded.has(index + 1) && 'border-(--accent) bg-(--stone)',\n                  )}\n                >\n                  {lineNumbers ? (\n                    <span\n                      aria-hidden\n                      className=\"inline-block w-8 shrink-0 select-none pe-3 text-end tabular-nums text-(--ink-3-aa)\"\n                    >\n                      {index + 1}\n                    </span>\n                  ) : null}\n                  {line}\n                </span>\n              ))}\n            </code>\n          </pre>\n        ) : (\n          // Trusted markup only: the output of the caller's own highlighter, run\n          // over the caller's own `code`. It is not a place to put anything a\n          // reader wrote — hand that to `code` and let the block render it as\n          // text, which it cannot mis-execute.\n          <div className={HIGHLIGHTED} dangerouslySetInnerHTML={{ __html: html }} />\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport default CodeBlock\n"],"mappings":"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","names":[]}

package/dist/components/Collapsible/Collapsible.js

@@ -12,8 +12,9 @@ function CollapsibleContent({
   return /* @__PURE__ */ jsx(
     CollapsiblePrimitive.Content,
     {
+      "data-m22-animated": true,
       className: cn(
-        "overflow-hidden data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)] motion-reduce:animate-none",
+        "overflow-hidden data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]",
         className
       ),
       ...props
@@ -39,7 +40,14 @@ function CollapsibleSection({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]", children: /* @__PURE__ */ jsx("div", { className: "pb-3", children }) })
+    /* @__PURE__ */ jsx(
+      CollapsiblePrimitive.Content,
+      {
+        "data-m22-animated": true,
+        className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]",
+        children: /* @__PURE__ */ jsx("div", { className: "pb-3", children })
+      }
+    )
   ] });
 }
 var Collapsible_default = Collapsible;

package/dist/components/Collapsible/Collapsible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { ChevronDown } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Collapsible root, as a typed passthrough. */\nexport const Collapsible = CollapsiblePrimitive.Root\n\n/**\n * The trigger and the panel, unstyled, for a disclosure that needs its own\n * layout — a sidebar group whose header carries a count and a chevron on\n * opposite sides, say. `CollapsibleSection` is the composed version and is what\n * most call sites want; these two exist so the ones that do not have to reach\n * for Radix directly and re-derive the keyboard and `aria-expanded` wiring.\n *\n * The panel animates on `--radix-collapsible-content-height`, which Radix\n * measures — so it opens to its real height rather than to a guessed\n * `max-height`, which is what makes a long group and a short one take the same\n * time instead of the long one appearing to stall.\n */\nexport const CollapsibleTrigger = CollapsiblePrimitive.Trigger\n\nexport function CollapsibleContent({\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      className={cn(\n        'overflow-hidden data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)] motion-reduce:animate-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CollapsibleSectionProps\n  extends Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, 'children' | 'title'> {\n  /** What the trigger says. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One thing that opens, on its own.\n *\n * The difference from `Accordion` is arithmetic: an accordion is a SET, and a\n * set can coordinate — opening one closes another. A collapsible is one\n * disclosure with nothing to coordinate with. Reaching for an accordion of one\n * gets you a component managing a value you never read.\n *\n * The marker here is a chevron rather than the accordion's plus, and\n * deliberately: this reveals more of the same thing, where an accordion row\n * opens a distinct answer.\n *\n * @example\n * <CollapsibleSection title=\"Advanced settings\">\n *   <Field label=\"Retries\"><Input type=\"number\" /></Field>\n * </CollapsibleSection>\n */\nexport function CollapsibleSection({\n  title,\n  children,\n  className,\n  ...props\n}: CollapsibleSectionProps) {\n  return (\n    <CollapsiblePrimitive.Root className={cn('w-full', className)} {...props}>\n      <CollapsiblePrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-3 text-start text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n        {title}\n        <ChevronDown\n          size={16}\n          strokeWidth={1.5}\n          aria-hidden\n          className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-180\"\n        />\n      </CollapsiblePrimitive.Trigger>\n      <CollapsiblePrimitive.Content className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]\">\n        <div className=\"pb-3\">{children}</div>\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  )\n}\n\nexport default Collapsible\n"],"mappings":";AA6BI,cA0CE,YA1CF;AA3BJ,YAAY,0BAA0B;AACtC,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAGZ,MAAM,cAAc,qBAAqB;AAczC,MAAM,qBAAqB,qBAAqB;AAEhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AA0BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE,qBAAC,qBAAqB,MAArB,EAA0B,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACjE;AAAA,yBAAC,qBAAqB,SAArB,EAA6B,WAAU,+JACrC;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,aAAa;AAAA,UACb,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACA,oBAAC,qBAAqB,SAArB,EAA6B,WAAU,8NACtC,8BAAC,SAAI,WAAU,QAAQ,UAAS,GAClC;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["'use client'\n\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { ChevronDown } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/** Radix Collapsible root, as a typed passthrough. */\nexport const Collapsible = CollapsiblePrimitive.Root\n\n/**\n * The trigger and the panel, unstyled, for a disclosure that needs its own\n * layout — a sidebar group whose header carries a count and a chevron on\n * opposite sides, say. `CollapsibleSection` is the composed version and is what\n * most call sites want; these two exist so the ones that do not have to reach\n * for Radix directly and re-derive the keyboard and `aria-expanded` wiring.\n *\n * The panel animates on `--radix-collapsible-content-height`, which Radix\n * measures — so it opens to its real height rather than to a guessed\n * `max-height`, which is what makes a long group and a short one take the same\n * time instead of the long one appearing to stall.\n */\nexport const CollapsibleTrigger = CollapsiblePrimitive.Trigger\n\nexport function CollapsibleContent({\n  className,\n  ...props\n}: ComponentProps<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-m22-animated\n      className={cn(\n        'overflow-hidden data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CollapsibleSectionProps\n  extends Omit<ComponentProps<typeof CollapsiblePrimitive.Root>, 'children' | 'title'> {\n  /** What the trigger says. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One thing that opens, on its own.\n *\n * The difference from `Accordion` is arithmetic: an accordion is a SET, and a\n * set can coordinate — opening one closes another. A collapsible is one\n * disclosure with nothing to coordinate with. Reaching for an accordion of one\n * gets you a component managing a value you never read.\n *\n * The marker here is a chevron rather than the accordion's plus, and\n * deliberately: this reveals more of the same thing, where an accordion row\n * opens a distinct answer.\n *\n * @example\n * <CollapsibleSection title=\"Advanced settings\">\n *   <Field label=\"Retries\"><Input type=\"number\" /></Field>\n * </CollapsibleSection>\n */\nexport function CollapsibleSection({\n  title,\n  children,\n  className,\n  ...props\n}: CollapsibleSectionProps) {\n  return (\n    <CollapsiblePrimitive.Root className={cn('w-full', className)} {...props}>\n      <CollapsiblePrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-3 text-start text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n        {title}\n        <ChevronDown\n          size={16}\n          strokeWidth={1.5}\n          aria-hidden\n          className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-180\"\n        />\n      </CollapsiblePrimitive.Trigger>\n      <CollapsiblePrimitive.Content\n        data-m22-animated\n        className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-collapsible-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-collapsible-down_var(--duration-base)_var(--ease)]\"\n      >\n        <div className=\"pb-3\">{children}</div>\n      </CollapsiblePrimitive.Content>\n    </CollapsiblePrimitive.Root>\n  )\n}\n\nexport default Collapsible\n"],"mappings":";AA6BI,cA2CE,YA3CF;AA3BJ,YAAY,0BAA0B;AACtC,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAGZ,MAAM,cAAc,qBAAqB;AAczC,MAAM,qBAAqB,qBAAqB;AAEhD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AA0BO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA4B;AAC1B,SACE,qBAAC,qBAAqB,MAArB,EAA0B,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACjE;AAAA,yBAAC,qBAAqB,SAArB,EAA6B,WAAU,+JACrC;AAAA;AAAA,MACD;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,aAAa;AAAA,UACb,eAAW;AAAA,UACX,WAAU;AAAA;AAAA,MACZ;AAAA,OACF;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,qBAAiB;AAAA,QACjB,WAAU;AAAA,QAEV,8BAAC,SAAI,WAAU,QAAQ,UAAS;AAAA;AAAA,IAClC;AAAA,KACF;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Combobox/Combobox.d.ts

@@ -9,7 +9,13 @@ interface ComboboxOption {
 }
 interface CommonProps {
     options: ComboboxOption[];
-    /** Names the control. Required — the trigger's text is a value, not a label. */
+    /**
+     * Names the control. Required — the trigger's text is a value, not a label.
+     *
+     * Announced together with the summary rather than instead of it, so a reader
+     * hears "Tags, 3 selected". Inside a `Field` with a label, that label names
+     * the trigger and this one is not repeated.
+     */
     label: string;
     /** Shown on the trigger when nothing is chosen. */
     placeholder?: string;
@@ -19,6 +25,14 @@ interface CommonProps {
     emptyMessage?: string;
     disabled?: boolean;
     className?: string;
+    /** The TRIGGER's id — the element a label points at. A `Field` sets it. */
+    id?: string;
+    /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */
+    'aria-describedby'?: string;
+    /** Paints the resting border with `--danger` and is announced. A `Field` sets it from `error`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
 }
 interface SingleProps extends CommonProps {
     multiple?: false;

package/dist/components/Combobox/Combobox.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronsUpDown, X } from "lucide-react";
-import { useState } from "react";
+import { useId, useState } from "react";
 import { cn } from "../../lib/cn.js";
+import { CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { warnBlankName } from "../../lib/warn.js";
 import {
   Command,
   CommandEmpty,
@@ -21,9 +24,20 @@ function Combobox(props) {
     searchPlaceholder = "Search\u2026",
     emptyMessage = "Nothing matches.",
     disabled = false,
-    className
+    className,
+    id,
+    "aria-describedby": describedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
   } = props;
   const multiple = props.multiple === true;
+  warnBlankName("Combobox", "label", label, "the trigger is announced with no name");
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const summaryId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const bad = isInvalid(void 0, ariaInvalid);
   const [open, setOpen] = useState(false);
   const [uncontrolled, setUncontrolled] = useState(() => {
     if (props.multiple === true) return props.defaultValue ?? [];
@@ -51,16 +65,22 @@ function Combobox(props) {
       PopoverTrigger,
       {
         role: "combobox",
+        id: triggerId,
         "aria-expanded": open,
-        "aria-label": label,
+        "aria-labelledby": `${nameId} ${summaryId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
         disabled,
         className: cn(
-          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          "group flex w-full items-center justify-between gap-2 rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
           chosen.length > 0 ? "text-(--ink)" : "text-(--ink-3-aa)",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: summary }),
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: summaryId, className: "truncate", children: summary }),
           /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [
             multiple && chosen.length > 0 && // A `<span role="button">` rather than a nested `<button>`, which
             // is invalid inside the trigger and which browsers reparent — the

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client'\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  /** Extra text matched by the filter but not shown as the label. */\n  keywords?: string[]\n  disabled?: boolean\n}\n\ninterface CommonProps {\n  options: ComboboxOption[]\n  /** Names the control. Required — the trigger's text is a value, not a label. */\n  label: string\n  /** Shown on the trigger when nothing is chosen. */\n  placeholder?: string\n  /** Placeholder inside the filter field. */\n  searchPlaceholder?: string\n  /** Shown when the filter matches nothing. Say what WOULD match. */\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n}\n\ninterface SingleProps extends CommonProps {\n  multiple?: false\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ninterface MultipleProps extends CommonProps {\n  /**\n   * Several at once. The trigger then summarises the choice rather than naming\n   * it — \"3 selected\" past a threshold, because a trigger that grows with its\n   * value reflows the form every time someone picks another one.\n   */\n  multiple: true\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxProps = SingleProps | MultipleProps\n\n/** How many labels the trigger prints before it starts counting instead. */\nconst SUMMARISE_AFTER = 2\n\n/**\n * A select you can type into, choosing one or several.\n *\n * The line against `Select` is length, and it is not a matter of taste: a\n * styled select is better up to roughly a dozen options, because a list nobody\n * can filter is faster to scan than one they have to think about. Past that,\n * this is the right answer.\n *\n * Filtering, the highlighted row and the arrow keys come from cmdk, which\n * implements the ARIA combobox pattern properly: the highlight moves through\n * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes\n * move focus into the list instead, and the typed text stops being editable.\n *\n * Controlled or uncontrolled, like every other form control here.\n *\n * @example\n * <Combobox label=\"Framework\" options={FRAMEWORKS} placeholder=\"Pick one\" />\n * @example\n * <Combobox multiple label=\"Tags\" options={TAGS} />\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    label,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyMessage = 'Nothing matches.',\n    disabled = false,\n    className,\n  } = props\n  const multiple = props.multiple === true\n\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<string[]>(() => {\n    if (props.multiple === true) return props.defaultValue ?? []\n    return props.defaultValue ? [props.defaultValue] : []\n  })\n\n  const controlled =\n    props.multiple === true\n      ? props.value\n      : props.value === undefined\n        ? undefined\n        : props.value === ''\n          ? []\n          : [props.value]\n  const current = controlled ?? uncontrolled\n\n  const commit = (next: string[]) => {\n    if (controlled === undefined) setUncontrolled(next)\n    if (props.multiple === true) props.onValueChange?.(next)\n    else props.onValueChange?.(next[0] ?? '')\n  }\n\n  const choose = (option: string) => {\n    if (multiple) {\n      // Toggling, and the panel stays open — picking three things should not\n      // cost three round trips through the trigger.\n      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option])\n      return\n    }\n    // Choosing the selected option again clears it, which is what a reader\n    // expects from a control whose value is optional.\n    commit(current.includes(option) ? [] : [option])\n    setOpen(false)\n  }\n\n  const chosen = options.filter((option) => current.includes(option.value))\n  const summary =\n    chosen.length === 0\n      ? placeholder\n      : chosen.length <= SUMMARISE_AFTER\n        ? chosen.map((option) => option.label).join(', ')\n        : `${chosen.length} selected`\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        // A combobox trigger is a button that OPENS a listbox; the roles for\n        // the list itself belong to cmdk inside the panel.\n        role=\"combobox\"\n        aria-expanded={open}\n        aria-label={label}\n        disabled={disabled}\n        className={cn(\n          'group flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n          chosen.length > 0 ? 'text-(--ink)' : 'text-(--ink-3-aa)',\n          className,\n        )}\n      >\n        <span className=\"truncate\">{summary}</span>\n        <span className=\"flex shrink-0 items-center gap-1\">\n          {multiple && chosen.length > 0 && (\n            // A `<span role=\"button\">` rather than a nested `<button>`, which\n            // is invalid inside the trigger and which browsers reparent — the\n            // clear control then falls outside the field entirely.\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              onKeyDown={(event) => {\n                if (event.key !== 'Enter' && event.key !== ' ') return\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              className=\"grid size-5 cursor-pointer place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n            >\n              <X size={12} strokeWidth={2} aria-hidden />\n            </span>\n          )}\n          <ChevronsUpDown size={14} strokeWidth={1.5} aria-hidden className=\"text-(--ink-3-aa)\" />\n        </span>\n      </PopoverTrigger>\n      <PopoverContent\n        label={label}\n        // `overflow-hidden` so the panel's own corners clip the square-cornered\n        // command list inside it; without it the list's edges poked through the\n        // radius and the two bottom corners looked chipped.\n        className=\"w-(--radix-popover-trigger-width) overflow-hidden p-0\"\n        align=\"start\"\n      >\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          {/* The panel's own name is \"<label>: <placeholder>\", set on Command\n              above. cmdk points the input's aria-labelledby at it, and\n              aria-labelledby beats aria-label — so naming the input directly\n              did nothing, and a screen reader met two comboboxes called \"Tags\",\n              one inside the other. */}\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const selected = current.includes(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    keywords={[option.label, ...(option.keywords ?? [])]}\n                    disabled={option.disabled}\n                    onSelect={choose}\n                    aria-selected={selected}\n                  >\n                    <span\n                      className={cn(\n                        'grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)',\n                        multiple &&\n                          'rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)',\n                      )}\n                      data-on={selected}\n                    >\n                      <Check\n                        size={12}\n                        strokeWidth={2.5}\n                        aria-hidden\n                        className={selected ? 'opacity-100' : 'opacity-0'}\n                      />\n                    </span>\n                    {option.label}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default Combobox\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client'\n\nimport { Check, ChevronsUpDown, X } from 'lucide-react'\nimport { useId, useState } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BORDER, isInvalid } from '../../lib/control'\nimport { useFieldControl } from '../Field/field-control'\nimport { warnBlankName } from '../../lib/warn'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '../Command/Command'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport interface ComboboxOption {\n  value: string\n  label: string\n  /** Extra text matched by the filter but not shown as the label. */\n  keywords?: string[]\n  disabled?: boolean\n}\n\ninterface CommonProps {\n  options: ComboboxOption[]\n  /**\n   * Names the control. Required — the trigger's text is a value, not a label.\n   *\n   * Announced together with the summary rather than instead of it, so a reader\n   * hears \"Tags, 3 selected\". Inside a `Field` with a label, that label names\n   * the trigger and this one is not repeated.\n   */\n  label: string\n  /** Shown on the trigger when nothing is chosen. */\n  placeholder?: string\n  /** Placeholder inside the filter field. */\n  searchPlaceholder?: string\n  /** Shown when the filter matches nothing. Say what WOULD match. */\n  emptyMessage?: string\n  disabled?: boolean\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** Paints the resting border with `--danger` and is announced. A `Field` sets it from `error`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n  /** Announced on the trigger. A `Field` sets it from `required`. */\n  'aria-required'?: boolean\n}\n\ninterface SingleProps extends CommonProps {\n  multiple?: false\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\ninterface MultipleProps extends CommonProps {\n  /**\n   * Several at once. The trigger then summarises the choice rather than naming\n   * it — \"3 selected\" past a threshold, because a trigger that grows with its\n   * value reflows the form every time someone picks another one.\n   */\n  multiple: true\n  value?: string[]\n  defaultValue?: string[]\n  onValueChange?: (value: string[]) => void\n}\n\nexport type ComboboxProps = SingleProps | MultipleProps\n\n/** How many labels the trigger prints before it starts counting instead. */\nconst SUMMARISE_AFTER = 2\n\n/**\n * A select you can type into, choosing one or several.\n *\n * The line against `Select` is length, and it is not a matter of taste: a\n * styled select is better up to roughly a dozen options, because a list nobody\n * can filter is faster to scan than one they have to think about. Past that,\n * this is the right answer.\n *\n * Filtering, the highlighted row and the arrow keys come from cmdk, which\n * implements the ARIA combobox pattern properly: the highlight moves through\n * `aria-activedescendant` while focus stays in the input. Hand-rolled comboboxes\n * move focus into the list instead, and the typed text stops being editable.\n *\n * Controlled or uncontrolled, like every other form control here.\n *\n * @example\n * <Combobox label=\"Framework\" options={FRAMEWORKS} placeholder=\"Pick one\" />\n * @example\n * <Combobox multiple label=\"Tags\" options={TAGS} />\n */\nexport function Combobox(props: ComboboxProps) {\n  const {\n    options,\n    label,\n    placeholder = 'Select…',\n    searchPlaceholder = 'Search…',\n    emptyMessage = 'Nothing matches.',\n    disabled = false,\n    className,\n    id,\n    'aria-describedby': describedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n  } = props\n  const multiple = props.multiple === true\n  warnBlankName('Combobox', 'label', label, 'the trigger is announced with no name')\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const summaryId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n  const bad = isInvalid(undefined, ariaInvalid)\n\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<string[]>(() => {\n    if (props.multiple === true) return props.defaultValue ?? []\n    return props.defaultValue ? [props.defaultValue] : []\n  })\n\n  const controlled =\n    props.multiple === true\n      ? props.value\n      : props.value === undefined\n        ? undefined\n        : props.value === ''\n          ? []\n          : [props.value]\n  const current = controlled ?? uncontrolled\n\n  const commit = (next: string[]) => {\n    if (controlled === undefined) setUncontrolled(next)\n    if (props.multiple === true) props.onValueChange?.(next)\n    else props.onValueChange?.(next[0] ?? '')\n  }\n\n  const choose = (option: string) => {\n    if (multiple) {\n      // Toggling, and the panel stays open — picking three things should not\n      // cost three round trips through the trigger.\n      commit(current.includes(option) ? current.filter((v) => v !== option) : [...current, option])\n      return\n    }\n    // Choosing the selected option again clears it, which is what a reader\n    // expects from a control whose value is optional.\n    commit(current.includes(option) ? [] : [option])\n    setOpen(false)\n  }\n\n  const chosen = options.filter((option) => current.includes(option.value))\n  const summary =\n    chosen.length === 0\n      ? placeholder\n      : chosen.length <= SUMMARISE_AFTER\n        ? chosen.map((option) => option.label).join(', ')\n        : `${chosen.length} selected`\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        // A combobox trigger is a button that OPENS a listbox; the roles for\n        // the list itself belong to cmdk inside the panel.\n        role=\"combobox\"\n        id={triggerId}\n        aria-expanded={open}\n        // The label and the summary, in that order — never the label alone.\n        // `aria-label` outranks the trigger's own text, so a reader was told\n        // \"Tags\" and never \"3 selected\". The two ids are named explicitly\n        // rather than pointing at the whole trigger, which would drag the clear\n        // control's own name into the value.\n        aria-labelledby={`${nameId} ${summaryId}`}\n        aria-describedby={describedBy}\n        aria-required={ariaRequired}\n        aria-invalid={bad || undefined}\n        disabled={disabled}\n        className={cn(\n          'group flex w-full items-center justify-between gap-2 rounded-(--radius) border bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          chosen.length > 0 ? 'text-(--ink)' : 'text-(--ink-3-aa)',\n          className,\n        )}\n      >\n        {field?.labelId == null && (\n          <span id={nameId} className=\"sr-only\">\n            {label}\n          </span>\n        )}\n        <span id={summaryId} className=\"truncate\">\n          {summary}\n        </span>\n        <span className=\"flex shrink-0 items-center gap-1\">\n          {multiple && chosen.length > 0 && (\n            // A `<span role=\"button\">` rather than a nested `<button>`, which\n            // is invalid inside the trigger and which browsers reparent — the\n            // clear control then falls outside the field entirely.\n            <span\n              role=\"button\"\n              tabIndex={0}\n              aria-label={`Clear ${label}`}\n              onClick={(event) => {\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              onKeyDown={(event) => {\n                if (event.key !== 'Enter' && event.key !== ' ') return\n                event.preventDefault()\n                event.stopPropagation()\n                commit([])\n              }}\n              className=\"grid size-5 cursor-pointer place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n            >\n              <X size={12} strokeWidth={2} aria-hidden />\n            </span>\n          )}\n          <ChevronsUpDown size={14} strokeWidth={1.5} aria-hidden className=\"text-(--ink-3-aa)\" />\n        </span>\n      </PopoverTrigger>\n      <PopoverContent\n        label={label}\n        // `overflow-hidden` so the panel's own corners clip the square-cornered\n        // command list inside it; without it the list's edges poked through the\n        // radius and the two bottom corners looked chipped.\n        className=\"w-(--radix-popover-trigger-width) overflow-hidden p-0\"\n        align=\"start\"\n      >\n        <Command label={`${label}: ${searchPlaceholder}`} className=\"rounded-none border-0\">\n          {/* The panel's own name is \"<label>: <placeholder>\", set on Command\n              above. cmdk points the input's aria-labelledby at it, and\n              aria-labelledby beats aria-label — so naming the input directly\n              did nothing, and a screen reader met two comboboxes called \"Tags\",\n              one inside the other. */}\n          <CommandInput placeholder={searchPlaceholder} />\n          <CommandList>\n            <CommandEmpty>{emptyMessage}</CommandEmpty>\n            <CommandGroup>\n              {options.map((option) => {\n                const selected = current.includes(option.value)\n                return (\n                  <CommandItem\n                    key={option.value}\n                    value={option.value}\n                    keywords={[option.label, ...(option.keywords ?? [])]}\n                    disabled={option.disabled}\n                    onSelect={choose}\n                    aria-selected={selected}\n                  >\n                    <span\n                      className={cn(\n                        'grid size-4 shrink-0 place-items-center transition-opacity duration-(--duration-fast)',\n                        multiple &&\n                          'rounded-(--radius-sm) border border-(--rule-2) text-(--accent-foreground) data-[on=true]:border-(--accent) data-[on=true]:bg-(--accent)',\n                      )}\n                      data-on={selected}\n                    >\n                      <Check\n                        size={12}\n                        strokeWidth={2.5}\n                        aria-hidden\n                        className={selected ? 'opacity-100' : 'opacity-0'}\n                      />\n                    </span>\n                    {option.label}\n                  </CommandItem>\n                )\n              })}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default Combobox\n"],"mappings":";AA+LU,cAOF,YAPE;AA7LV,SAAS,OAAO,gBAAgB,SAAS;AACzC,SAAS,OAAO,gBAAgB;AAChC,SAAS,UAAU;AACnB,SAAS,gBAAgB,iBAAiB;AAC1C,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,SAAS,gBAAgB,sBAAsB;AA4DxD,MAAM,kBAAkB;AAsBjB,SAAS,SAAS,OAAsB;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,eAAe;AAAA,IACf,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,EACnB,IAAI;AACJ,QAAM,WAAW,MAAM,aAAa;AACpC,gBAAc,YAAY,SAAS,OAAO,uCAAuC;AAEjF,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,GAAG,SAAS;AAC9B,QAAM,SAAS,OAAO,WAAW,GAAG,SAAS;AAC7C,QAAM,MAAM,UAAU,QAAW,WAAW;AAE5C,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,MAAM;AAC/D,QAAI,MAAM,aAAa,KAAM,QAAO,MAAM,gBAAgB,CAAC;AAC3D,WAAO,MAAM,eAAe,CAAC,MAAM,YAAY,IAAI,CAAC;AAAA,EACtD,CAAC;AAED,QAAM,aACJ,MAAM,aAAa,OACf,MAAM,QACN,MAAM,UAAU,SACd,SACA,MAAM,UAAU,KACd,CAAC,IACD,CAAC,MAAM,KAAK;AACtB,QAAM,UAAU,cAAc;AAE9B,QAAM,SAAS,CAAC,SAAmB;AACjC,QAAI,eAAe,OAAW,iBAAgB,IAAI;AAClD,QAAI,MAAM,aAAa,KAAM,OAAM,gBAAgB,IAAI;AAAA,QAClD,OAAM,gBAAgB,KAAK,CAAC,KAAK,EAAE;AAAA,EAC1C;AAEA,QAAM,SAAS,CAAC,WAAmB;AACjC,QAAI,UAAU;AAGZ,aAAO,QAAQ,SAAS,MAAM,IAAI,QAAQ,OAAO,CAAC,MAAM,MAAM,MAAM,IAAI,CAAC,GAAG,SAAS,MAAM,CAAC;AAC5F;AAAA,IACF;AAGA,WAAO,QAAQ,SAAS,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AAC/C,YAAQ,KAAK;AAAA,EACf;AAEA,QAAM,SAAS,QAAQ,OAAO,CAAC,WAAW,QAAQ,SAAS,OAAO,KAAK,CAAC;AACxE,QAAM,UACJ,OAAO,WAAW,IACd,cACA,OAAO,UAAU,kBACf,OAAO,IAAI,CAAC,WAAW,OAAO,KAAK,EAAE,KAAK,IAAI,IAC9C,GAAG,OAAO,MAAM;AAExB,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA;AAAA,MAAC;AAAA;AAAA,QAGC,MAAK;AAAA,QACL,IAAI;AAAA,QACJ,iBAAe;AAAA,QAMf,mBAAiB,GAAG,MAAM,IAAI,SAAS;AAAA,QACvC,oBAAkB;AAAA,QAClB,iBAAe;AAAA,QACf,gBAAc,OAAO;AAAA,QACrB;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C,OAAO,SAAS,IAAI,iBAAiB;AAAA,UACrC;AAAA,QACF;AAAA,QAEC;AAAA,iBAAO,WAAW,QACjB,oBAAC,UAAK,IAAI,QAAQ,WAAU,WACzB,iBACH;AAAA,UAEF,oBAAC,UAAK,IAAI,WAAW,WAAU,YAC5B,mBACH;AAAA,UACA,qBAAC,UAAK,WAAU,oCACb;AAAA,wBAAY,OAAO,SAAS;AAAA;AAAA;AAAA,YAI3B;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,cAAY,SAAS,KAAK;AAAA,gBAC1B,SAAS,CAAC,UAAU;AAClB,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AACtB,yBAAO,CAAC,CAAC;AAAA,gBACX;AAAA,gBACA,WAAW,CAAC,UAAU;AACpB,sBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,wBAAM,eAAe;AACrB,wBAAM,gBAAgB;AACtB,yBAAO,CAAC,CAAC;AAAA,gBACX;AAAA,gBACA,WAAU;AAAA,gBAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,GAAG,eAAW,MAAC;AAAA;AAAA,YAC3C;AAAA,YAEF,oBAAC,kBAAe,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,qBAAoB;AAAA,aACxF;AAAA;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA,WAAU;AAAA,QACV,OAAM;AAAA,QAEN,+BAAC,WAAQ,OAAO,GAAG,KAAK,KAAK,iBAAiB,IAAI,WAAU,yBAM1D;AAAA,8BAAC,gBAAa,aAAa,mBAAmB;AAAA,UAC9C,qBAAC,eACC;AAAA,gCAAC,gBAAc,wBAAa;AAAA,YAC5B,oBAAC,gBACE,kBAAQ,IAAI,CAAC,WAAW;AACvB,oBAAM,WAAW,QAAQ,SAAS,OAAO,KAAK;AAC9C,qBACE;AAAA,gBAAC;AAAA;AAAA,kBAEC,OAAO,OAAO;AAAA,kBACd,UAAU,CAAC,OAAO,OAAO,GAAI,OAAO,YAAY,CAAC,CAAE;AAAA,kBACnD,UAAU,OAAO;AAAA,kBACjB,UAAU;AAAA,kBACV,iBAAe;AAAA,kBAEf;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAW;AAAA,0BACT;AAAA,0BACA,YACE;AAAA,wBACJ;AAAA,wBACA,WAAS;AAAA,wBAET;AAAA,0BAAC;AAAA;AAAA,4BACC,MAAM;AAAA,4BACN,aAAa;AAAA,4BACb,eAAW;AAAA,4BACX,WAAW,WAAW,gBAAgB;AAAA;AAAA,wBACxC;AAAA;AAAA,oBACF;AAAA,oBACC,OAAO;AAAA;AAAA;AAAA,gBAtBH,OAAO;AAAA,cAuBd;AAAA,YAEJ,CAAC,GACH;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Command/Command.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { ComponentProps, ReactNode } from 'react';
 import { Command as Command$1 } from 'cmdk';
+import { LucideIcon } from 'lucide-react';
 
 /**
  * A filterable list of actions — the ⌘K surface.
@@ -66,12 +67,13 @@ interface CommandItemProps extends ComponentProps<typeof Command$1.Item> {
     /** A shortcut printed at the end of the row. */
     shortcut?: string;
     /**
-     * A leading glyph. Pass the icon element, sized 16.
+     * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes
+     * the element, `icon={Settings}` passes the component and this sizes it.
      *
      * It is what makes a long list scannable — the eye sorts by shape before it
      * reads, and forty identical rows of text defeat that.
      */
-    icon?: ReactNode;
+    icon?: LucideIcon | ReactNode;
     /**
      * A quiet note at the end of the row — what kind of thing this is, or its
      * current state. Not a description: a palette that prints a sentence per row

package/dist/components/Command/Command.js

@@ -2,7 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
+import { isValidElement } from "react";
 import { cn } from "../../lib/cn.js";
+function isIconComponent(icon) {
+  if (isValidElement(icon)) return false;
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon === null) return false;
+  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !("then" in icon);
+}
+function iconNode(icon) {
+  if (!isIconComponent(icon)) return icon;
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, "aria-hidden": true });
+}
 import { Dialog, DialogContent } from "../Dialog/Dialog.js";
 import { Kbd } from "../Kbd/Kbd.js";
 function Command({
@@ -122,7 +134,7 @@ function CommandItem({ shortcut, icon, meta, className, children, ...props }) {
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4", children: icon }),
+        icon && /* @__PURE__ */ jsx("span", { className: "grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4", children: iconNode(icon) }),
         children,
         meta && /* @__PURE__ */ jsx("span", { className: "ms-auto ps-3 mono-meta text-(--ink-3-aa)", children: meta }),
         shortcut && /* @__PURE__ */ jsx(Kbd, { className: cn(meta ? "" : "ms-auto"), children: shortcut })

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Pass the icon element, sized 16.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {icon}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { Search, type LucideIcon } from 'lucide-react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Lucide icon is none of those, it is a `forwardRef`\n * object. So both spellings are tellable apart at runtime, which is what lets\n * one prop take either — and it has to, because this prop meant the opposite\n * thing one import away and the wrong spelling failed at render, not at the\n * type.\n */\nfunction isIconComponent(icon: LucideIcon | ReactNode): icon is LucideIcon {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: LucideIcon | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} strokeWidth={1.5} aria-hidden />\n}\nimport { Dialog, DialogContent } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <Search size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: LucideIcon | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  children: ReactNode\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({ open, onOpenChange, label, children }: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={label}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { LucideIcon } from 'lucide-react';
 
@@ -25,14 +25,39 @@ declare const ContextMenuTrigger: react.ForwardRefExoticComponent<ContextMenuPri
  */
 declare function ContextMenuContent({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Content>): react.JSX.Element;
 interface ContextMenuItemProps extends ComponentProps<typeof ContextMenuPrimitive.Item> {
-    icon?: LucideIcon;
+    /**
+     * Optional leading icon. Either spelling — `icon={Copy}` passes the component
+     * and this sizes it, `icon={<Copy size={16} />}` passes the element and this
+     * places it.
+     */
+    icon?: LucideIcon | ReactNode;
+    /** Paints the row as destructive. Use for delete, revoke, disconnect. */
     destructive?: boolean;
 }
 /** A row. Highlight follows `data-highlighted`, which covers hover and keyboard. */
-declare function ContextMenuItem({ icon: Icon, destructive, className, children, ...rest }: ContextMenuItemProps): react.JSX.Element;
+declare function ContextMenuItem({ icon, destructive, className, children, ...rest }: ContextMenuItemProps): react.JSX.Element;
 /** Hairline divider between groups. */
 declare function ContextMenuSeparator({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Separator>): react.JSX.Element;
-/** Mono eyebrow heading for a group. */
+/**
+ * Mono eyebrow heading, on its own.
+ *
+ * Visual only: Radix renders it as a bare `<div>` with no role. Reach for
+ * `ContextMenuGroup` when the eyebrow is a HEADING over rows; this is right for
+ * a line that heads nothing.
+ */
 declare function ContextMenuLabel({ className, ...rest }: ComponentProps<typeof ContextMenuPrimitive.Label>): react.JSX.Element;
+interface ContextMenuGroupProps extends ComponentProps<typeof ContextMenuPrimitive.Group> {
+    /** The eyebrow over the rows, and the group's accessible name. */
+    label?: ReactNode;
+}
+/**
+ * A named section of a menu.
+ *
+ * The eyebrow alone was a picture of a heading: Radix's `MenuLabel` carries no
+ * role and no `aria-labelledby` wiring, so a sighted reader saw sections and a
+ * screen-reader user got one undifferentiated list. This renders the group,
+ * renders the label inside it, and points the one at the other.
+ */
+declare function ContextMenuGroup({ label, children, ...rest }: ContextMenuGroupProps): react.JSX.Element;
 
-export { ContextMenu, ContextMenuContent, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, ContextMenu as default };
+export { ContextMenu, ContextMenuContent, ContextMenuGroup, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, ContextMenu as default };

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,8 +1,23 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { isValidElement, useId } from "react";
 import { cn } from "../../lib/cn.js";
 import { useOverlayContainer } from "../../lib/overlay-container.js";
+function isIconComponent(icon) {
+  if (isValidElement(icon)) return false;
+  if (typeof icon === "function") return true;
+  if (typeof icon !== "object" || icon === null) return false;
+  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !("then" in icon);
+}
+function iconNode(icon) {
+  if (icon === void 0 || icon === null || icon === false) return null;
+  if (!isIconComponent(icon)) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "grid size-4 shrink-0 place-items-center [&_svg]:size-4", children: icon });
+  }
+  const Icon = icon;
+  return /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true });
+}
 const ContextMenu = ContextMenuPrimitive.Root;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 function ContextMenuContent({
@@ -26,7 +41,7 @@ function ContextMenuContent({
   ) });
 }
 function ContextMenuItem({
-  icon: Icon,
+  icon,
   destructive = false,
   className,
   children,
@@ -42,7 +57,7 @@ function ContextMenuItem({
       ),
       ...rest,
       children: [
-        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, strokeWidth: 1.5, className: "shrink-0", "aria-hidden": true }),
+        iconNode(icon),
         children
       ]
     }
@@ -66,10 +81,25 @@ function ContextMenuLabel({
     }
   );
 }
+function ContextMenuGroup({ label, children, ...rest }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.Group,
+    {
+      "aria-labelledby": label === void 0 ? void 0 : id,
+      ...rest,
+      children: [
+        label !== void 0 && /* @__PURE__ */ jsx(ContextMenuLabel, { id, children: label }),
+        children
+      ]
+    }
+  );
+}
 var ContextMenu_default = ContextMenu;
 export {
   ContextMenu,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
   ContextMenuSeparator,