@misoto22/design 0.7.0 → 0.9.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/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,67 @@
+import * as react from 'react';
+
+interface ColorPickerProps {
+    /**
+     * Names the control. Required — the trigger shows a colour, and a colour is
+     * not a name.
+     *
+     * Announced together with the value, the way `Select`'s is: a reader hears
+     * "Brand colour, #a78bfa". Inside a `Field` with a label, that label is used
+     * and this one is not repeated.
+     */
+    label: string;
+    /** The colour, as any absolute CSS colour string. */
+    value?: string;
+    defaultValue?: string;
+    /**
+     * Fires with a CSS colour string in whichever notation the panel is set to —
+     * so the notation a caller passes in is the notation they get back until
+     * somebody changes it in the panel.
+     */
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    /** Paints the resting border with `--danger` and reflects `aria-invalid`. */
+    invalid?: 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;
+    /** The spelling a form library sets; read together with `invalid`. */
+    'aria-invalid'?: boolean | 'true' | 'false';
+    /** Announced on the trigger. A `Field` sets it from `required`. */
+    'aria-required'?: boolean;
+}
+/**
+ * A colour, chosen or typed.
+ *
+ * The panel works in OKLCH, and that is the reason to reach for this rather
+ * than `<input type="color">`. In HSV — which is what the native picker and
+ * most libraries use — dragging along a row of constant "lightness" walks
+ * through colours the eye reads as getting darker, so a reader tuning a palette
+ * is fighting the instrument. OKLCH's lightness is the one a person sees, so
+ * two colours at the same height on the plane genuinely match, and the hue
+ * strip stays at the lightness already chosen instead of showing a rainbow that
+ * belongs to some other colour.
+ *
+ * The plane is normalised to the gamut ROW BY ROW: its right edge is the most
+ * chroma that exists at that lightness and hue, so the whole surface is
+ * reachable rather than a lens of colour inside a field of clipped duplicates.
+ *
+ * **What it accepts.** Hex, `rgb()`, `hsl()`, `oklch()` and
+ * `color(display-p3 …)`, in both syntaxes. Named colours are not accepted:
+ * resolving them needs a table of every CSS name or a live DOM, and a box that
+ * takes "rebeccapurple" but not "papayawhip" is worse than one that takes
+ * neither.
+ *
+ * **Keyboard.** The plane is a group of two real sliders — chroma across,
+ * lightness up — so the arrows move it and a screen reader announces where it
+ * is. That is the part a 2D canvas usually leaves out, and leaving it out makes
+ * the control unusable rather than merely awkward.
+ *
+ * @example
+ * <Field label="Brand colour"><ColorPicker label="Brand colour" defaultValue="#a78bfa" /></Field>
+ */
+declare function ColorPicker({ label, value: controlled, defaultValue, onValueChange, disabled, invalid, className, id, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, }: ColorPickerProps): react.JSX.Element;
+
+export { ColorPicker, type ColorPickerProps, ColorPicker as default };

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,334 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  clamp,
+  colorFormat,
+  colorToRgb,
+  fitGamut,
+  formatColor,
+  maxChroma,
+  parseColor
+} from "../../lib/color.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+import { warnBlankName } from "../../lib/warn.js";
+import { useFieldControl } from "../Field/field-control.js";
+import { Input } from "../Input/Input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
+import { ToggleGroup, ToggleGroupItem } from "../ToggleGroup/ToggleGroup.js";
+const PLANE_W = 256;
+const PLANE_H = 160;
+const HUE_STOPS = 73;
+const BLACK = { l: 0, c: 0, h: 0, a: 1 };
+const FORMAT_LABELS = {
+  hex: "Hex",
+  oklch: "OKLCH",
+  // Not "Display P3": the three segments share the strip evenly, and the long
+  // name wraps to two lines inside its third and makes the whole row twice as
+  // tall as the two beside it.
+  p3: "P3"
+};
+const checkerboard = (square) => `repeating-conic-gradient(var(--stone) 0% 25%, var(--paper) 0% 50%) 0 0 / ${square} ${square}`;
+function ColorPicker({
+  label,
+  value: controlled,
+  defaultValue = "#000000",
+  onValueChange,
+  disabled,
+  invalid,
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired
+}) {
+  warnBlankName("ColorPicker", "label", label, "the trigger is announced with no name");
+  const bad = isInvalid(invalid, ariaInvalid);
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const value = controlled ?? uncontrolled;
+  const [color, setColor] = useState(() => parseColor(defaultValue) ?? BLACK);
+  const [format, setFormat] = useState(() => colorFormat(defaultValue));
+  const emitted = useRef(null);
+  const saturationRef = useRef(0);
+  useEffect(() => {
+    if (value === emitted.current) return;
+    const parsed = parseColor(value);
+    if (!parsed) return;
+    setColor((prev) => ({ ...parsed, h: parsed.c < 1e-7 ? prev.h : parsed.h }));
+    setFormat(colorFormat(value));
+  }, [value]);
+  const space = format === "hex" ? "srgb" : "p3";
+  const ceiling = maxChroma(color.l, color.h, space);
+  const saturation = ceiling > 0 ? clamp(color.c / ceiling) : saturationRef.current;
+  useEffect(() => {
+    if (ceiling > 0) saturationRef.current = saturation;
+  }, [ceiling, saturation]);
+  const commit = (next, nextFormat = format) => {
+    const fitted = nextFormat === "oklch" ? next : fitGamut(next, nextFormat === "p3" ? "p3" : "srgb");
+    setColor(fitted);
+    setFormat(nextFormat);
+    const text = formatColor(fitted, nextFormat);
+    emitted.current = text;
+    if (controlled === void 0) setUncontrolled(text);
+    onValueChange?.(text);
+  };
+  const setPlane = (nextSaturation, lightness) => {
+    saturationRef.current = nextSaturation;
+    commit({ ...color, l: lightness, c: nextSaturation * maxChroma(lightness, color.h, space) });
+  };
+  const planeRef = useRef(null);
+  const canvasRef = useRef(null);
+  const painted = useRef("");
+  const trackPointer = (event) => {
+    const rect = planeRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return;
+    setPlane(
+      clamp((event.clientX - rect.left) / rect.width),
+      clamp(1 - (event.clientY - rect.top) / rect.height)
+    );
+  };
+  const paint = (canvas) => {
+    if (!canvas) return;
+    const key = `${color.h.toFixed(3)}:${space}`;
+    if (painted.current === key) return;
+    const context = canvas.getContext("2d");
+    if (!context || typeof context.createImageData !== "function") return;
+    painted.current = key;
+    const pixels = context.createImageData(PLANE_W, PLANE_H);
+    for (let y = 0; y < PLANE_H; y++) {
+      const l = 1 - y / (PLANE_H - 1);
+      const rowMax = maxChroma(l, color.h, space);
+      for (let x = 0; x < PLANE_W; x++) {
+        const rgb = colorToRgb({ l, c: x / (PLANE_W - 1) * rowMax, h: color.h, a: 1 }, "srgb");
+        const at = (y * PLANE_W + x) * 4;
+        for (let channel = 0; channel < 3; channel++) {
+          pixels.data[at + channel] = Math.round(clamp(rgb[channel] ?? 0) * 255);
+        }
+        pixels.data[at + 3] = 255;
+      }
+    }
+    context.putImageData(pixels, 0, 0);
+  };
+  useEffect(() => {
+    paint(canvasRef.current);
+  });
+  const opaque = formatColor({ ...color, a: 1 }, "oklch");
+  const hueTrack = Array.from({ length: HUE_STOPS }, (_, i) => {
+    const h = i * (360 / (HUE_STOPS - 1));
+    return formatColor({ l: color.l, c: saturation * maxChroma(color.l, h, space), h, a: 1 }, "oklch");
+  }).join(", ");
+  const typed = parseColor(value);
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        id: triggerId,
+        disabled,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-required": ariaRequired,
+        "aria-invalid": bad || void 0,
+        className: cn(
+          CONTROL_BASE,
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          "flex cursor-pointer items-center gap-2.5 text-start",
+          className
+        ),
+        children: [
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-4 shrink-0 rounded-(--radius-xs) border border-(--rule-2)",
+              style: { background: `linear-gradient(${value}, ${value}), ${checkerboard("4px")}` }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "mono-meta truncate", children: value })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { label: `${label} picker`, className: "flex w-72 flex-col gap-3", children: [
+      /* @__PURE__ */ jsx(
+        ToggleGroup,
+        {
+          type: "single",
+          value: format,
+          onValueChange: (next) => next && commit(color, next),
+          "aria-label": "Colour notation",
+          className: "w-full",
+          children: Object.keys(FORMAT_LABELS).map((option) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: option, className: "flex-1", children: FORMAT_LABELS[option] }, option))
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: planeRef,
+          role: "group",
+          "aria-label": `${label} field`,
+          onPointerDown: (event) => {
+            if (event.button !== 0) return;
+            event.preventDefault();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            trackPointer(event);
+          },
+          onPointerMove: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) trackPointer(event);
+          },
+          onPointerUp: (event) => {
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+              event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+          },
+          className: "relative h-40 w-full cursor-crosshair touch-none select-none rounded-(--radius) focus-within:[outline:var(--focus-w)_solid_var(--focus)] focus-within:[outline-offset:var(--focus-off)]",
+          children: [
+            /* @__PURE__ */ jsx(
+              "canvas",
+              {
+                ref: (node) => {
+                  canvasRef.current = node;
+                  if (!node) painted.current = "";
+                  paint(node);
+                },
+                width: PLANE_W,
+                height: PLANE_H,
+                "aria-hidden": "true",
+                className: "block size-full rounded-(--radius)"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute inset-0 rounded-(--radius) shadow-[inset_0_0_0_1px_var(--rule)]"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "pointer-events-none absolute -m-1.5 size-3 rounded-(--radius-pill) border-2 border-(--paper) shadow-[0_0_0_1px_var(--rule-hard)]",
+                style: { left: `${saturation * 100}%`, top: `${(1 - color.l) * 100}%`, background: opaque }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(saturation * 100),
+                "aria-label": "Chroma",
+                "aria-valuetext": `${Math.round(saturation * 100)} percent chroma`,
+                onChange: (event) => setPlane(Number(event.target.value) / 100, color.l),
+                className: "sr-only"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: Math.round(color.l * 100),
+                "aria-label": "Lightness",
+                "aria-valuetext": `${Math.round(color.l * 100)} percent lightness`,
+                onChange: (event) => setPlane(saturation, Number(event.target.value) / 100),
+                className: "sr-only"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Hue",
+          max: 360,
+          step: 1,
+          value: color.h,
+          announce: `${Math.round(color.h)} degrees`,
+          thumb: opaque,
+          track: `linear-gradient(to right in oklab, ${hueTrack})`,
+          onChange: (h) => commit({ ...color, h, c: saturation * maxChroma(color.l, h, space) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ColorTrack,
+        {
+          name: "Opacity",
+          max: 100,
+          step: 1,
+          value: color.a * 100,
+          announce: `${Math.round(color.a * 100)} percent`,
+          thumb: formatColor(color, "oklch"),
+          track: `linear-gradient(to right, transparent, ${opaque}), ${checkerboard("8px")}`,
+          onChange: (percent) => commit({ ...color, a: percent / 100 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          value,
+          spellCheck: false,
+          autoComplete: "off",
+          "aria-label": `${label} as CSS`,
+          invalid: typed === null,
+          onChange: (event) => {
+            const next = event.target.value;
+            emitted.current = next;
+            if (controlled === void 0) setUncontrolled(next);
+            const parsed = parseColor(next);
+            if (parsed) {
+              setColor(parsed);
+              setFormat(colorFormat(next));
+            }
+            onValueChange?.(next);
+          },
+          className: "mono-meta"
+        }
+      )
+    ] })
+  ] });
+}
+function ColorTrack({ name, max, step, value, announce, track, thumb, onChange }) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-3 text-sm text-(--ink-2)", children: [
+    /* @__PURE__ */ jsx("span", { className: "w-14 shrink-0", children: name }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "range",
+        min: 0,
+        max,
+        step,
+        value,
+        "aria-valuetext": announce,
+        onChange: (event) => onChange(Number(event.target.value)),
+        style: { background: track },
+        className: cn(
+          "h-4 w-full cursor-pointer appearance-none rounded-(--radius-xs) shadow-[inset_0_0_0_1px_var(--rule)]",
+          "[&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-(--radius-xs) [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-(--paper) [&::-webkit-slider-thumb]:bg-(--thumb) [&::-webkit-slider-thumb]:bg-clip-padding [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]",
+          "[&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-(--radius-xs) [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-(--paper) [&::-moz-range-thumb]:bg-(--thumb) [&::-moz-range-thumb]:bg-clip-padding [&::-moz-range-thumb]:shadow-[0_0_0_1px_var(--rule-hard)]"
+        ),
+        ref: (node) => {
+          node?.style.setProperty("--thumb", thumb);
+        }
+      }
+    )
+  ] });
+}
+var ColorPicker_default = ColorPicker;
+export {
+  ColorPicker,
+  ColorPicker_default as default
+};
+//# sourceMappingURL=ColorPicker.js.map