@rtkelly-labs/design-system 0.0.0-bootstrap.0 → 0.16.0-dev.0.37dedac

package/dist/components/docs/CodeBlock.js

@@ -0,0 +1,63 @@
+"use client";
+
+// src/components/docs/CodeBlock.tsx
+import { createContext, useCallback, useContext, useRef } from "react";
+import { Check, Copy } from "lucide-react";
+import { useCopyToClipboard } from "../../hooks/useCopyToClipboard.js";
+import { cn } from "../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeBlockAttachment = createContext(false);
+var ATTACHED_STYLE = { marginTop: 0, borderTopWidth: 0 };
+function CodeBlock({
+  children,
+  title,
+  language,
+  copyable = true,
+  attached,
+  className = "",
+  ...rest
+}) {
+  const attachedByContext = useContext(CodeBlockAttachment);
+  const isAttached = attached ?? attachedByContext;
+  const preRef = useRef(null);
+  const { copied, copy } = useCopyToClipboard();
+  const onCopy = useCallback(() => {
+    const text = preRef.current?.innerText ?? "";
+    if (text) void copy(text);
+  }, [copy]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "code-block",
+      className: cn("docs-codeblock", className),
+      style: isAttached ? ATTACHED_STYLE : void 0,
+      "data-attached": isAttached ? "true" : void 0,
+      children: [
+        (title || language) && /* @__PURE__ */ jsxs("div", { className: "docs-codeblock-bar", children: [
+          title && /* @__PURE__ */ jsx("span", { className: "docs-codeblock-title", children: title }),
+          language && /* @__PURE__ */ jsx("span", { className: "docs-codeblock-lang", children: language })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "docs-codeblock-body", children: [
+          copyable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onCopy,
+              className: "docs-codeblock-copy",
+              "data-copied": copied ? "true" : void 0,
+              "aria-label": copied ? "Copied" : "Copy code",
+              title: copied ? "Copied!" : "Copy code",
+              children: copied ? /* @__PURE__ */ jsx(Check, { size: 14 }) : /* @__PURE__ */ jsx(Copy, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsx("pre", { ref: preRef, tabIndex: 0, role: "region", "aria-label": title ?? "Code", ...rest, children })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CodeBlock,
+  CodeBlockAttachment
+};
+//# sourceMappingURL=CodeBlock.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useContext, useRef } from 'react';\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\nimport { Check, Copy } from 'lucide-react';\nimport { useCopyToClipboard } from '../../hooks/useCopyToClipboard';\nimport { cn } from '../../lib/recipe';\n\nexport interface CodeBlockProps extends HTMLAttributes<HTMLPreElement> {\n  children: ReactNode;\n  /** Filename or caption shown in the header bar. */\n  title?: string;\n  /** Language tag shown on the right of the header bar. */\n  language?: string;\n  /** Hide the copy button (e.g. for output-only samples). */\n  copyable?: boolean;\n  /**\n   * Sit flush under a control that draws the top edge — a {@link CodeTabs}\n   * strip. Drops the block's own top margin and top rule so the seam between\n   * strip and block is one 2px line rather than two stacked ones. Defaults to\n   * whatever the nearest {@link CodeBlockAttachment} says, so a fenced block\n   * inside a tab panel attaches without the author knowing the prop exists.\n   */\n  attached?: boolean;\n}\n\n/**\n * Tells every `CodeBlock` underneath that it is sitting inside a control that\n * already draws its top edge. Provided by `CodeTabs`; read by `CodeBlock`.\n */\nexport const CodeBlockAttachment = createContext(false);\n\n/**\n * `.docs-codeblock` is still plain CSS in `prose.css`, and plain CSS is\n * unlayered — it beats every Tailwind utility regardless of source order, so\n * `mt-0 border-t-0` on the wrapper would do nothing. Until the block migrates\n * to a `recipe`, the override has to be inline. Delete this with the migration.\n */\nconst ATTACHED_STYLE: CSSProperties = { marginTop: 0, borderTopWidth: 0 };\n\n/**\n * Fenced code block with a copy button and an optional filename bar.\n *\n * The copy ref sits on the `<pre>` rather than the outer wrapper so the\n * button's own label never ends up in the clipboard — an easy thing to get\n * wrong when the control is rendered inside the measured element.\n *\n * The button is always in the DOM (revealed on hover/focus via CSS) instead of\n * being conditionally rendered on hover: a mount-on-hover button cannot be\n * reached by keyboard at all.\n */\nexport function CodeBlock({\n  children,\n  title,\n  language,\n  copyable = true,\n  attached,\n  className = '',\n  ...rest\n}: CodeBlockProps) {\n  const attachedByContext = useContext(CodeBlockAttachment);\n  const isAttached = attached ?? attachedByContext;\n  const preRef = useRef<HTMLPreElement>(null);\n  const { copied, copy } = useCopyToClipboard();\n\n  const onCopy = useCallback(() => {\n    const text = preRef.current?.innerText ?? '';\n    if (text) void copy(text);\n  }, [copy]);\n\n  return (\n    <div data-slot=\"code-block\"\n      className={cn('docs-codeblock', className)}\n      style={isAttached ? ATTACHED_STYLE : undefined}\n      data-attached={isAttached ? 'true' : undefined}\n    >\n      {(title || language) && (\n        <div className=\"docs-codeblock-bar\">\n          {title && <span className=\"docs-codeblock-title\">{title}</span>}\n          {language && <span className=\"docs-codeblock-lang\">{language}</span>}\n        </div>\n      )}\n\n      <div className=\"docs-codeblock-body\">\n        {copyable && (\n          <button\n            type=\"button\"\n            onClick={onCopy}\n            className=\"docs-codeblock-copy\"\n            data-copied={copied ? 'true' : undefined}\n            aria-label={copied ? 'Copied' : 'Copy code'}\n            title={copied ? 'Copied!' : 'Copy code'}\n          >\n            {copied ? <Check size={14} /> : <Copy size={14} />}\n          </button>\n        )}\n        {/*\n          `tabIndex={0}` because the block scrolls horizontally at narrow widths\n          (`prose.css` gives it `overflow-x: auto`). A scrollable region that\n          cannot be focused cannot be scrolled by keyboard at all — axe's\n          `scrollable-region-focusable`, and a real trap rather than a technicality:\n          the content is simply unreachable without a pointer.\n        */}\n        <pre ref={preRef} tabIndex={0} role=\"region\" aria-label={title ?? 'Code'} {...rest}>\n          {children}\n        </pre>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,eAAe,aAAa,YAAY,cAAc;AAE/D,SAAS,OAAO,YAAY;AAC5B,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAuEX,SACY,KADZ;AA/CD,IAAM,sBAAsB,cAAc,KAAK;AAQtD,IAAM,iBAAgC,EAAE,WAAW,GAAG,gBAAgB,EAAE;AAajE,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAmB;AACjB,QAAM,oBAAoB,WAAW,mBAAmB;AACxD,QAAM,aAAa,YAAY;AAC/B,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,EAAE,QAAQ,KAAK,IAAI,mBAAmB;AAE5C,QAAM,SAAS,YAAY,MAAM;AAC/B,UAAM,OAAO,OAAO,SAAS,aAAa;AAC1C,QAAI,KAAM,MAAK,KAAK,IAAI;AAAA,EAC1B,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MAAI,aAAU;AAAA,MACb,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACzC,OAAO,aAAa,iBAAiB;AAAA,MACrC,iBAAe,aAAa,SAAS;AAAA,MAEnC;AAAA,kBAAS,aACT,qBAAC,SAAI,WAAU,sBACZ;AAAA,mBAAS,oBAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,UACvD,YAAY,oBAAC,UAAK,WAAU,uBAAuB,oBAAS;AAAA,WAC/D;AAAA,QAGF,qBAAC,SAAI,WAAU,uBACZ;AAAA,sBACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,WAAU;AAAA,cACV,eAAa,SAAS,SAAS;AAAA,cAC/B,cAAY,SAAS,WAAW;AAAA,cAChC,OAAO,SAAS,YAAY;AAAA,cAE3B,mBAAS,oBAAC,SAAM,MAAM,IAAI,IAAK,oBAAC,QAAK,MAAM,IAAI;AAAA;AAAA,UAClD;AAAA,UASF,oBAAC,SAAI,KAAK,QAAQ,UAAU,GAAG,MAAK,UAAS,cAAY,SAAS,QAAS,GAAG,MAC3E,UACH;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/docs/CodeTabs.js

@@ -0,0 +1,71 @@
+"use client";
+
+// src/components/docs/CodeTabs.tsx
+import { Children, Fragment, isValidElement } from "react";
+import { cn } from "../../lib/recipe.js";
+import { Tabs, TabsList, TabsPanel, TabsTab } from "../Tabs.js";
+import { CodeBlock, CodeBlockAttachment } from "./CodeBlock.js";
+import { useTabGroup } from "./codeTabsStore.js";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function flattenFragments(children) {
+  return Children.toArray(children).flatMap(
+    (child) => isValidElement(child) && child.type === Fragment ? flattenFragments(child.props.children) : [child]
+  );
+}
+function CodeTab({ children }) {
+  return /* @__PURE__ */ jsx(Fragment2, { children });
+}
+function CodeTabs({
+  children,
+  group,
+  variant = "merged",
+  accent = "primary",
+  label,
+  className = ""
+}) {
+  const tabs = flattenFragments(children).filter(isValidElement).map((child, index) => ({
+    label: child.props.label || `Tab ${index + 1}`,
+    language: child.props.language,
+    body: child.props.children
+  }));
+  const [selected, select] = useTabGroup(group, tabs[0]?.label ?? "");
+  const activeLabel = tabs.some((tab) => tab.label === selected) ? selected : tabs[0]?.label ?? "";
+  const name = label ?? group;
+  return (
+    // Controlled, because the selection lives in the group store rather than
+    // in the strip: two blocks sharing a group have one selection between them.
+    /* @__PURE__ */ jsxs(
+      Tabs,
+      {
+        value: activeLabel,
+        onValueChange: select,
+        variant,
+        font: "mono",
+        accent,
+        className: cn("my-6", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            TabsList,
+            {
+              label: name ?? "Code variants",
+              caption: variant === "segmented" ? name ?? "source" : void 0,
+              children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTab, { value: tab.label, children: tab.label }, tab.label))
+            }
+          ),
+          /* @__PURE__ */ jsx(CodeBlockAttachment, { value: true, children: tabs.map((tab) => (
+            // Hidden panels stay in the document rather than unmounting, so
+            // every variant of a snippet is in the HTML for a crawler and a
+            // switch costs no re-render of the code. That is what `keepMounted`
+            // is for, and it is why this did not become a Base UI tablist.
+            /* @__PURE__ */ jsx(TabsPanel, { value: tab.label, keepMounted: true, children: typeof tab.body === "string" ? /* @__PURE__ */ jsx(CodeBlock, { language: tab.language, children: tab.body }) : tab.body }, tab.label)
+          )) })
+        ]
+      }
+    )
+  );
+}
+export {
+  CodeTab,
+  CodeTabs
+};
+//# sourceMappingURL=CodeTabs.js.map

package/dist/components/docs/CodeTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/CodeTabs.tsx"],"sourcesContent":["'use client';\n\nimport { Children, Fragment, isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { cn } from '../../lib/recipe';\nimport type { AccentToken } from '../../lib/theme';\nimport { Tabs, TabsList, TabsPanel, TabsTab } from '../Tabs';\nimport type { TabsVariant } from '../Tabs';\nimport { CodeBlock, CodeBlockAttachment } from './CodeBlock';\nimport { useTabGroup } from './codeTabsStore';\n\n/**\n * The code-block language switcher every developer documentation portal has:\n * a strip of tabs standing on a code block, one panel of the same content in\n * another form per tab.\n *\n * This is a **content switcher, not navigation** — a real `tablist` with\n * roving focus and arrow-key traversal, whose panels hold the same snippet in\n * another language or tool. That is why it is not a sidebar rotated: the\n * contract is different.\n *\n * ## It is a `Tabs` now\n *\n * The tablist this component used to hand-roll is {@link Tabs}, the public\n * primitive, and it was extracted from here rather than rewritten — same\n * markup, same classes, same keyboard model, same tests. What stays here is\n * the part that is documentation-specific and does not belong in a primitive:\n * the group store, the `CodeBlock` attachment, and reading tabs out of\n * children.\n *\n * ## `group` is what earns it\n *\n * Blocks sharing a group switch together, and the choice persists across\n * pages: a reader picks a package manager once, not once per snippet. A block\n * whose tab set does not include the group's choice falls back to its own first\n * tab rather than showing nothing.\n *\n * ## The state rule\n *\n * The selected tab is marked with an accent **fill** or a 4px accent **edge**,\n * never by swapping one surface for another. `surface.raised` against\n * `surface.base` is a few percent of lightness on the light rungs of the\n * ladder — enough to layer a strip over a page, not enough to tell a reader\n * which tab they are on. `pnpm check:contrast` asserts both devices clear 3:1\n * on every level, and reports the surface pair so nobody has to rediscover\n * why it is not an option.\n *\n * ## Usage in MDX\n *\n * ```mdx\n * <CodeTabs group=\"pkg\">\n *   <CodeTab label=\"pnpm\">\n *\n *     ```bash\n *     pnpm add @rtkelly-labs/design-system\n *     ```\n *\n *   </CodeTab>\n *   <CodeTab label=\"npm\">\n *\n *     ```bash\n *     npm install @rtkelly-labs/design-system\n *     ```\n *\n *   </CodeTab>\n * </CodeTabs>\n * ```\n *\n * Blank lines around the fences are load-bearing — MDX only parses markdown\n * inside a JSX block that opens and closes on its own lines. The fences compile\n * to `CodeBlock`, which reads {@link CodeBlockAttachment} and drops its own top\n * rule so the seam between strip and block is one line. A `CodeTab` whose\n * children are a plain string is wrapped in a `CodeBlock` here, for `.tsx`\n * callers with no MDX pipeline.\n */\n\n/**\n * The strip's shape. The same three the primitive declares — this alias is\n * kept because it is what existing call sites import.\n */\nexport type CodeTabsVariant = TabsVariant;\n\n/**\n * `Children.toArray` stops at a `<>…</>`, so a set of tabs an author keeps in\n * a fragment — the natural way to reuse one set across several blocks — would\n * read as a single tab called \"Tab 1\". Unwrap fragments to any depth.\n */\nfunction flattenFragments(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap((child) =>\n    isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment\n      ? flattenFragments(child.props.children)\n      : [child],\n  );\n}\n\nexport interface CodeTabProps {\n  /** Tab text: the language, tool or filename. Read by {@link CodeTabs}. */\n  label: string;\n  /**\n   * Language tag for the block, when `children` is a plain string and this\n   * component wraps it in a `CodeBlock` itself. Fenced MDX carries its own.\n   */\n  language?: string;\n  children: ReactNode;\n}\n\n/**\n * One tab inside a {@link CodeTabs}. A marker component: `CodeTabs` reads its\n * `label` and renders its children into a panel. Rendered on its own it is\n * just its children, so a tab that ends up outside a `CodeTabs` still shows\n * its code rather than vanishing.\n */\nexport function CodeTab({ children }: CodeTabProps) {\n  return <>{children}</>;\n}\n\nexport interface CodeTabsProps {\n  /** `CodeTab` children. Anything else is ignored. */\n  children: ReactNode;\n  /** Blocks sharing a group switch together, and the choice persists. */\n  group?: string;\n  variant?: CodeTabsVariant;\n  /**\n   * Semantic accent for the selected tab. Accepts an `Emphasis` or an\n   * `Intent`; the legacy hue names still resolve to the same values.\n   */\n  accent?: AccentToken;\n  /**\n   * Caption for the `segmented` variant — a filename or a title. Also the\n   * accessible name of the tab list, ahead of `group`.\n   */\n  label?: string;\n  className?: string;\n}\n\nexport function CodeTabs({\n  children,\n  group,\n  variant = 'merged',\n  accent = 'primary',\n  label,\n  className = '',\n}: CodeTabsProps) {\n  const tabs = flattenFragments(children)\n    .filter(isValidElement<CodeTabProps>)\n    .map((child, index) => ({\n      label: child.props.label || `Tab ${index + 1}`,\n      language: child.props.language,\n      body: child.props.children,\n    }));\n\n  const [selected, select] = useTabGroup(group, tabs[0]?.label ?? '');\n\n  // A group can be shared by blocks with different tab sets — `pnpm | npm` in\n  // one and `pnpm | npm | yarn` in another. Fall back rather than showing an\n  // empty block when the group's choice is not on offer here.\n  const activeLabel = tabs.some((tab) => tab.label === selected)\n    ? selected\n    : (tabs[0]?.label ?? '');\n\n  const name = label ?? group;\n\n  return (\n    // Controlled, because the selection lives in the group store rather than\n    // in the strip: two blocks sharing a group have one selection between them.\n    <Tabs\n      value={activeLabel}\n      onValueChange={select}\n      variant={variant}\n      font=\"mono\"\n      accent={accent}\n      className={cn('my-6', className)}\n    >\n      <TabsList\n        label={name ?? 'Code variants'}\n        caption={variant === 'segmented' ? (name ?? 'source') : undefined}\n      >\n        {tabs.map((tab) => (\n          <TabsTab key={tab.label} value={tab.label}>\n            {tab.label}\n          </TabsTab>\n        ))}\n      </TabsList>\n\n      <CodeBlockAttachment value={true}>\n        {tabs.map((tab) => (\n          // Hidden panels stay in the document rather than unmounting, so\n          // every variant of a snippet is in the HTML for a crawler and a\n          // switch costs no re-render of the code. That is what `keepMounted`\n          // is for, and it is why this did not become a Base UI tablist.\n          <TabsPanel key={tab.label} value={tab.label} keepMounted>\n            {typeof tab.body === 'string' ? (\n              <CodeBlock language={tab.language}>{tab.body}</CodeBlock>\n            ) : (\n              tab.body\n            )}\n          </TabsPanel>\n        ))}\n      </CodeBlockAttachment>\n    </Tabs>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,UAAU,UAAU,sBAAsB;AAEnD,SAAS,UAAU;AAEnB,SAAS,MAAM,UAAU,WAAW,eAAe;AAEnD,SAAS,WAAW,2BAA2B;AAC/C,SAAS,mBAAmB;AAwGnB,qBAAAA,WAAA,KAoDL,YApDK;AA1BT,SAAS,iBAAiB,UAAkC;AAC1D,SAAO,SAAS,QAAQ,QAAQ,EAAE;AAAA,IAAQ,CAAC,UACzC,eAAyC,KAAK,KAAK,MAAM,SAAS,WAC9D,iBAAiB,MAAM,MAAM,QAAQ,IACrC,CAAC,KAAK;AAAA,EACZ;AACF;AAmBO,SAAS,QAAQ,EAAE,SAAS,GAAiB;AAClD,SAAO,oBAAAA,WAAA,EAAG,UAAS;AACrB;AAqBO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA,YAAY;AACd,GAAkB;AAChB,QAAM,OAAO,iBAAiB,QAAQ,EACnC,OAAO,cAA4B,EACnC,IAAI,CAAC,OAAO,WAAW;AAAA,IACtB,OAAO,MAAM,MAAM,SAAS,OAAO,QAAQ,CAAC;AAAA,IAC5C,UAAU,MAAM,MAAM;AAAA,IACtB,MAAM,MAAM,MAAM;AAAA,EACpB,EAAE;AAEJ,QAAM,CAAC,UAAU,MAAM,IAAI,YAAY,OAAO,KAAK,CAAC,GAAG,SAAS,EAAE;AAKlE,QAAM,cAAc,KAAK,KAAK,CAAC,QAAQ,IAAI,UAAU,QAAQ,IACzD,WACC,KAAK,CAAC,GAAG,SAAS;AAEvB,QAAM,OAAO,SAAS;AAEtB;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,WAAW,GAAG,QAAQ,SAAS;AAAA,QAE/B;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,QAAQ;AAAA,cACf,SAAS,YAAY,cAAe,QAAQ,WAAY;AAAA,cAEvD,eAAK,IAAI,CAAC,QACT,oBAAC,WAAwB,OAAO,IAAI,OACjC,cAAI,SADO,IAAI,KAElB,CACD;AAAA;AAAA,UACH;AAAA,UAEA,oBAAC,uBAAoB,OAAO,MACzB,eAAK,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,YAKT,oBAAC,aAA0B,OAAO,IAAI,OAAO,aAAW,MACrD,iBAAO,IAAI,SAAS,WACnB,oBAAC,aAAU,UAAU,IAAI,UAAW,cAAI,MAAK,IAE7C,IAAI,QAJQ,IAAI,KAMpB;AAAA,WACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA;AAEJ;","names":["Fragment"]}

package/dist/components/docs/DocPager.js

@@ -0,0 +1,28 @@
+// src/components/docs/DocPager.tsx
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { DocsLink } from "./DocsLinkProvider.js";
+import { cn } from "../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DocPager({ prev, next, className = "" }) {
+  if (!prev && !next) return null;
+  return /* @__PURE__ */ jsxs("nav", { "data-slot": "doc-pager", className: cn("not-prose docs-pager print:hidden", className), "aria-label": "Page navigation", children: [
+    prev ? /* @__PURE__ */ jsxs(DocsLink, { href: prev.href, className: "docs-pager-link", rel: "prev", children: [
+      /* @__PURE__ */ jsxs("span", { className: "docs-pager-dir", children: [
+        /* @__PURE__ */ jsx(ArrowLeft, { size: 13, "aria-hidden": "true" }),
+        " PREVIOUS"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "docs-pager-label", children: prev.label })
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }),
+    next ? /* @__PURE__ */ jsxs(DocsLink, { href: next.href, className: "docs-pager-link docs-pager-next", rel: "next", children: [
+      /* @__PURE__ */ jsxs("span", { className: "docs-pager-dir", children: [
+        "NEXT ",
+        /* @__PURE__ */ jsx(ArrowRight, { size: 13, "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "docs-pager-label", children: next.label })
+    ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" })
+  ] });
+}
+export {
+  DocPager
+};
+//# sourceMappingURL=DocPager.js.map

package/dist/components/docs/DocPager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/DocPager.tsx"],"sourcesContent":["import { ArrowLeft, ArrowRight } from 'lucide-react';\nimport { DocsLink } from './DocsLinkProvider';\nimport { cn } from '../../lib/recipe';\n\nexport interface DocPagerTarget {\n  label: string;\n  href: string;\n}\n\nexport interface DocPagerProps {\n  prev?: DocPagerTarget;\n  next?: DocPagerTarget;\n  className?: string;\n}\n\n/**\n * Titled previous/next navigation for the foot of a documentation page.\n *\n * Distinct from {@link Pagination}, which counts numbered pages (`[ 3 / 12 ]`)\n * for list views. Readers moving through docs sequentially need the *name* of\n * the adjacent page, not its index.\n *\n * Renders an empty spacer when only one side exists so `next` stays\n * right-aligned on a page with no predecessor.\n */\nexport function DocPager({ prev, next, className = '' }: DocPagerProps) {\n  if (!prev && !next) return null;\n\n  return (\n    <nav data-slot=\"doc-pager\" className={cn('not-prose docs-pager print:hidden', className)} aria-label=\"Page navigation\">\n      {prev ? (\n        <DocsLink href={prev.href} className=\"docs-pager-link\" rel=\"prev\">\n          <span className=\"docs-pager-dir\">\n            <ArrowLeft size={13} aria-hidden=\"true\" /> PREVIOUS\n          </span>\n          <span className=\"docs-pager-label\">{prev.label}</span>\n        </DocsLink>\n      ) : (\n        <span aria-hidden=\"true\" />\n      )}\n\n      {next ? (\n        <DocsLink href={next.href} className=\"docs-pager-link docs-pager-next\" rel=\"next\">\n          <span className=\"docs-pager-dir\">\n            NEXT <ArrowRight size={13} aria-hidden=\"true\" />\n          </span>\n          <span className=\"docs-pager-label\">{next.label}</span>\n        </DocsLink>\n      ) : (\n        <span aria-hidden=\"true\" />\n      )}\n    </nav>\n  );\n}\n"],"mappings":";AAAA,SAAS,WAAW,kBAAkB;AACtC,SAAS,gBAAgB;AACzB,SAAS,UAAU;AA8BT,SACE,KADF;AAPH,SAAS,SAAS,EAAE,MAAM,MAAM,YAAY,GAAG,GAAkB;AACtE,MAAI,CAAC,QAAQ,CAAC,KAAM,QAAO;AAE3B,SACE,qBAAC,SAAI,aAAU,aAAY,WAAW,GAAG,qCAAqC,SAAS,GAAG,cAAW,mBAClG;AAAA,WACC,qBAAC,YAAS,MAAM,KAAK,MAAM,WAAU,mBAAkB,KAAI,QACzD;AAAA,2BAAC,UAAK,WAAU,kBACd;AAAA,4BAAC,aAAU,MAAM,IAAI,eAAY,QAAO;AAAA,QAAE;AAAA,SAC5C;AAAA,MACA,oBAAC,UAAK,WAAU,oBAAoB,eAAK,OAAM;AAAA,OACjD,IAEA,oBAAC,UAAK,eAAY,QAAO;AAAA,IAG1B,OACC,qBAAC,YAAS,MAAM,KAAK,MAAM,WAAU,mCAAkC,KAAI,QACzE;AAAA,2BAAC,UAAK,WAAU,kBAAiB;AAAA;AAAA,QAC1B,oBAAC,cAAW,MAAM,IAAI,eAAY,QAAO;AAAA,SAChD;AAAA,MACA,oBAAC,UAAK,WAAU,oBAAoB,eAAK,OAAM;AAAA,OACjD,IAEA,oBAAC,UAAK,eAAY,QAAO;AAAA,KAE7B;AAEJ;","names":[]}

package/dist/components/docs/DocsHeader.js

@@ -0,0 +1,124 @@
+"use client";
+
+// src/components/docs/DocsHeader.tsx
+import { useEffect, useRef } from "react";
+import { Menu as MenuIcon, Palette, Search, X } from "lucide-react";
+import { DocsLink } from "./DocsLinkProvider.js";
+import { useOptionalTheme } from "../ThemeProvider.js";
+import { LEVELS, isThemeLevel } from "../../theme/levels.js";
+import { cn } from "../../lib/recipe.js";
+import { Menu, MenuRadioGroup, MenuRadioItem } from "../Menu.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DocsHeader({
+  title,
+  titleHref = "/",
+  icon: Icon,
+  nav = [],
+  onSearch,
+  searchShortcut = "\u2318K",
+  onToggleSidebar,
+  sidebarOpen = false,
+  children,
+  className = ""
+}) {
+  const ref = useRef(null);
+  const theme = useOptionalTheme();
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof window === "undefined") return;
+    const publish = () => {
+      document.documentElement.style.setProperty(
+        "--docs-header-height",
+        `${Math.round(el.getBoundingClientRect().height)}px`
+      );
+    };
+    publish();
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", publish);
+      return () => window.removeEventListener("resize", publish);
+    }
+    const observer = new ResizeObserver(publish);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs("header", { "data-slot": "docs-header", ref, className: cn("not-prose docs-header print:hidden", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "docs-header-left", children: [
+      onToggleSidebar && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onToggleSidebar,
+          className: "docs-header-icon-btn docs-header-sidebar-toggle",
+          "aria-label": sidebarOpen ? "Close navigation" : "Open navigation",
+          "aria-expanded": sidebarOpen,
+          children: sidebarOpen ? /* @__PURE__ */ jsx(X, { size: 18 }) : /* @__PURE__ */ jsx(MenuIcon, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsxs(DocsLink, { href: titleHref, className: "docs-header-brand", children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { className: "docs-header-brand-icon" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "[ ",
+          title.toUpperCase(),
+          " ]"
+        ] })
+      ] })
+    ] }),
+    nav.length > 0 && /* @__PURE__ */ jsx("nav", { className: "docs-header-nav", "aria-label": "Main", children: nav.map((item) => /* @__PURE__ */ jsx(
+      DocsLink,
+      {
+        href: item.href,
+        className: "docs-header-nav-link",
+        ...item.active ? { "aria-current": "page" } : {},
+        children: item.label
+      },
+      item.href
+    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "docs-header-right", children: [
+      children,
+      onSearch && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: onSearch,
+          className: "docs-header-search",
+          "aria-label": "Search documentation",
+          children: [
+            /* @__PURE__ */ jsx(Search, { size: 15, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "docs-header-search-label", children: "SEARCH" }),
+            searchShortcut && /* @__PURE__ */ jsx("kbd", { className: "docs-header-kbd", children: searchShortcut })
+          ]
+        }
+      ),
+      theme && /* @__PURE__ */ jsx(
+        Menu,
+        {
+          align: "end",
+          trigger: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "docs-header-icon-btn",
+              "aria-label": `Theme level (current: ${LEVELS[theme.level].label})`,
+              children: /* @__PURE__ */ jsx(Palette, { size: 18, "aria-hidden": "true" })
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            MenuRadioGroup,
+            {
+              label: "Level",
+              value: theme.level,
+              onValueChange: (next) => {
+                if (isThemeLevel(next)) theme.setLevel(next);
+              },
+              children: theme.levels.map((level) => /* @__PURE__ */ jsx(MenuRadioItem, { value: level, closeOnClick: true, children: LEVELS[level].label }, level))
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  DocsHeader
+};
+//# sourceMappingURL=DocsHeader.js.map

package/dist/components/docs/DocsHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/DocsHeader.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\nimport type { ElementType, ReactNode } from 'react';\nimport { Menu as MenuIcon, Palette, Search, X } from 'lucide-react';\nimport { DocsLink } from './DocsLinkProvider';\nimport { useOptionalTheme } from '../ThemeProvider';\nimport { LEVELS, isThemeLevel } from '../../theme/levels';\nimport { cn } from '../../lib/recipe';\nimport { Menu, MenuRadioGroup, MenuRadioItem } from '../Menu';\n\nexport interface DocsNavItem {\n  label: string;\n  href: string;\n  /** Marks the item active. Callers own route matching. */\n  active?: boolean;\n  external?: boolean;\n}\n\nexport interface DocsHeaderProps {\n  /** Brand text, rendered bracketed and uppercased. */\n  title: string;\n  /** Href the brand links to. Defaults to the site root. */\n  titleHref?: string;\n  /** Optional glyph before the brand — a lucide icon or any SVG component. */\n  icon?: ElementType<{ className?: string }>;\n  /** Top-level sections, shown inline on desktop only. */\n  nav?: readonly DocsNavItem[];\n  /** Invoked by the search button. Omit to hide the button entirely. */\n  onSearch?: () => void;\n  /** Keyboard hint rendered inside the search button. */\n  searchShortcut?: string;\n  /** Controls the mobile sidebar toggle. Omit to hide it. */\n  onToggleSidebar?: () => void;\n  sidebarOpen?: boolean;\n  /** Extra trailing content — version switcher, repo link, and so on. */\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * The persistent top bar for a docs site.\n *\n * Beyond navigation it owns one piece of cross-cutting state: it measures its\n * own rendered height and publishes it as `--docs-header-height` on the root\n * element. A sticky header silently swallows anchor targets — jump to\n * `#some-section` and the heading lands underneath the bar — so the offset has\n * to reach `scroll-margin-top` in `prose.css` and the scroll-spy reading line\n * in `useActiveHeading`. Measuring rather than hard-coding keeps all three\n * correct when the bar wraps on narrow screens or a consumer restyles it.\n */\nexport function DocsHeader({\n  title,\n  titleHref = '/',\n  icon: Icon,\n  nav = [],\n  onSearch,\n  searchShortcut = '⌘K',\n  onToggleSidebar,\n  sidebarOpen = false,\n  children,\n  className = '',\n}: DocsHeaderProps) {\n  const ref = useRef<HTMLElement | null>(null);\n  /*\n   * `useOptionalTheme`, not `useTheme`. A docs header is chrome, and ADR 0004\n   * says a consumer may theme with the `data-theme` attribute alone and never\n   * mount a provider — developer themes consume colour only, the host owns the\n   * geometry and the clock. The strict hook throws, so requiring it here takes\n   * the whole page down rather than degrading.\n   *\n   * This component *adapts* to the level rather than requiring it: with no\n   * provider there is no level to choose, so the control is omitted and the rest\n   * of the header renders.\n   */\n  const theme = useOptionalTheme();\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el || typeof window === 'undefined') return;\n\n    const publish = () => {\n      document.documentElement.style.setProperty(\n        '--docs-header-height',\n        `${Math.round(el.getBoundingClientRect().height)}px`,\n      );\n    };\n\n    publish();\n\n    // ResizeObserver is absent in older jsdom-based test environments; the\n    // initial measurement above is still correct there.\n    if (typeof ResizeObserver === 'undefined') {\n      window.addEventListener('resize', publish);\n      return () => window.removeEventListener('resize', publish);\n    }\n\n    const observer = new ResizeObserver(publish);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <header data-slot=\"docs-header\" ref={ref} className={cn('not-prose docs-header print:hidden', className)}>\n      <div className=\"docs-header-left\">\n        {onToggleSidebar && (\n          <button\n            type=\"button\"\n            onClick={onToggleSidebar}\n            className=\"docs-header-icon-btn docs-header-sidebar-toggle\"\n            aria-label={sidebarOpen ? 'Close navigation' : 'Open navigation'}\n            aria-expanded={sidebarOpen}\n          >\n            {sidebarOpen ? <X size={18} /> : <MenuIcon size={18} />}\n          </button>\n        )}\n\n        <DocsLink href={titleHref} className=\"docs-header-brand\">\n          {Icon && <Icon className=\"docs-header-brand-icon\" />}\n          <span>[ {title.toUpperCase()} ]</span>\n        </DocsLink>\n      </div>\n\n      {nav.length > 0 && (\n        <nav className=\"docs-header-nav\" aria-label=\"Main\">\n          {nav.map((item) => (\n            <DocsLink\n              key={item.href}\n              href={item.href}\n              className=\"docs-header-nav-link\"\n              {...(item.active ? { 'aria-current': 'page' as const } : {})}\n            >\n              {item.label}\n            </DocsLink>\n          ))}\n        </nav>\n      )}\n\n      <div className=\"docs-header-right\">\n        {children}\n\n        {onSearch && (\n          <button\n            type=\"button\"\n            onClick={onSearch}\n            className=\"docs-header-search\"\n            aria-label=\"Search documentation\"\n          >\n            <Search size={15} aria-hidden=\"true\" />\n            <span className=\"docs-header-search-label\">SEARCH</span>\n            {searchShortcut && (\n              <kbd className=\"docs-header-kbd\">{searchShortcut}</kbd>\n            )}\n          </button>\n        )}\n\n        {/*\n          * A menu of the levels, not a button that cycles through them (#166).\n          * Cycling made the choice a guess: nothing said what the next press\n          * would pick, and reaching the last of N levels took N-1 presses.\n          * The menu names every level, marks the current one, and closes on\n          * a choice — the choice is the whole point of opening it.\n          */}\n        {theme && (\n          <Menu\n            align=\"end\"\n            trigger={\n              <button\n                type=\"button\"\n                className=\"docs-header-icon-btn\"\n                aria-label={`Theme level (current: ${LEVELS[theme.level].label})`}\n              >\n                <Palette size={18} aria-hidden=\"true\" />\n              </button>\n            }\n          >\n            <MenuRadioGroup\n              label=\"Level\"\n              value={theme.level}\n              onValueChange={(next) => {\n                if (isThemeLevel(next)) theme.setLevel(next);\n              }}\n            >\n              {theme.levels.map((level) => (\n                <MenuRadioItem key={level} value={level} closeOnClick>\n                  {LEVELS[level].label}\n                </MenuRadioItem>\n              ))}\n            </MenuRadioGroup>\n          </Menu>\n        )}\n      </div>\n    </header>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/docs/DocsLayout.js

@@ -0,0 +1,61 @@
+"use client";
+
+// src/components/docs/DocsLayout.tsx
+import { useEffect } from "react";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import { cn } from "../../lib/recipe.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DocsLayout({
+  header,
+  sidebar,
+  toc,
+  children,
+  sidebarOpen = false,
+  onCloseSidebar,
+  className = ""
+}) {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (!sidebarOpen) return;
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previous;
+    };
+  }, [sidebarOpen]);
+  useHotkey("Escape", () => onCloseSidebar?.(), {
+    enabled: sidebarOpen && Boolean(onCloseSidebar),
+    preventDefault: false,
+    stopPropagation: false,
+    meta: { name: "Close navigation", description: "Dismisses the open docs drawer" }
+  });
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "docs-layout", className: cn("docs-layout", className), children: [
+    header,
+    /* @__PURE__ */ jsxs("div", { className: "docs-layout-body", children: [
+      sidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+        sidebarOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "docs-layout-scrim",
+            onClick: onCloseSidebar,
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: "docs-layout-sidebar",
+            "data-open": sidebarOpen ? "true" : void 0,
+            children: sidebar
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("main", { className: "docs-layout-main", id: "docs-content", children }),
+      toc && /* @__PURE__ */ jsx("aside", { className: "docs-layout-toc", children: toc })
+    ] })
+  ] });
+}
+export {
+  DocsLayout
+};
+//# sourceMappingURL=DocsLayout.js.map

package/dist/components/docs/DocsLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/DocsLayout.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { useHotkey } from '@tanstack/react-hotkeys';\nimport { cn } from '../../lib/recipe';\n\nexport interface DocsLayoutProps {\n  /** Rendered above everything, sticky. Normally a `DocsHeader`. */\n  header?: ReactNode;\n  /** Left rail. Normally a `DocsSidebar`. */\n  sidebar?: ReactNode;\n  /** Right rail. Normally a `TableOfContents`. Hidden below `xl`. */\n  toc?: ReactNode;\n  children: ReactNode;\n  /** Mobile drawer state. Ignored at `lg` and up, where the rail is always shown. */\n  sidebarOpen?: boolean;\n  onCloseSidebar?: () => void;\n  className?: string;\n}\n\n/**\n * Three-column documentation shell: sidebar, content, contents rail.\n *\n * Below `lg` the sidebar becomes an overlay drawer. Scroll on `<body>` is\n * locked while it is open, otherwise the page behind scrolls under the drawer\n * on touch devices and the reader loses their place on close.\n */\nexport function DocsLayout({\n  header,\n  sidebar,\n  toc,\n  children,\n  sidebarOpen = false,\n  onCloseSidebar,\n  className = '',\n}: DocsLayoutProps) {\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n    if (!sidebarOpen) return;\n\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = previous;\n    };\n  }, [sidebarOpen]);\n\n  // Escape belongs to the drawer only while the drawer is open; `enabled`\n  // says so declaratively where the old code rebuilt a `window` listener\n  // around that condition. `preventDefault` stays off: closing a drawer is\n  // not the kind of default that should be swallowed.\n  useHotkey('Escape', () => onCloseSidebar?.(), {\n    enabled: sidebarOpen && Boolean(onCloseSidebar),\n    preventDefault: false,\n    stopPropagation: false,\n    meta: { name: 'Close navigation', description: 'Dismisses the open docs drawer' },\n  });\n\n  return (\n    <div data-slot=\"docs-layout\" className={cn('docs-layout', className)}>\n      {header}\n\n      <div className=\"docs-layout-body\">\n        {sidebar && (\n          <>\n            {sidebarOpen && (\n              <div\n                className=\"docs-layout-scrim\"\n                onClick={onCloseSidebar}\n                aria-hidden=\"true\"\n              />\n            )}\n            <aside\n              className=\"docs-layout-sidebar\"\n              data-open={sidebarOpen ? 'true' : undefined}\n            >\n              {sidebar}\n            </aside>\n          </>\n        )}\n\n        <main className=\"docs-layout-main\" id=\"docs-content\">\n          {children}\n        </main>\n\n        {toc && <aside className=\"docs-layout-toc\">{toc}</aside>}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAS,iBAAiB;AAE1B,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AA4DT,mBAEI,KAFJ;AArCH,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,YAAY;AACd,GAAoB;AAClB,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,YAAa;AACrC,QAAI,CAAC,YAAa;AAElB,UAAM,WAAW,SAAS,KAAK,MAAM;AACrC,aAAS,KAAK,MAAM,WAAW;AAC/B,WAAO,MAAM;AACX,eAAS,KAAK,MAAM,WAAW;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAMhB,YAAU,UAAU,MAAM,iBAAiB,GAAG;AAAA,IAC5C,SAAS,eAAe,QAAQ,cAAc;AAAA,IAC9C,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,MAAM,EAAE,MAAM,oBAAoB,aAAa,iCAAiC;AAAA,EAClF,CAAC;AAED,SACE,qBAAC,SAAI,aAAU,eAAc,WAAW,GAAG,eAAe,SAAS,GAChE;AAAA;AAAA,IAED,qBAAC,SAAI,WAAU,oBACZ;AAAA,iBACC,iCACG;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,eAAY;AAAA;AAAA,QACd;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,aAAW,cAAc,SAAS;AAAA,YAEjC;AAAA;AAAA,QACH;AAAA,SACF;AAAA,MAGF,oBAAC,UAAK,WAAU,oBAAmB,IAAG,gBACnC,UACH;AAAA,MAEC,OAAO,oBAAC,WAAM,WAAU,mBAAmB,eAAI;AAAA,OAClD;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/docs/DocsLinkProvider.js

@@ -0,0 +1,25 @@
+"use client";
+
+// src/components/docs/DocsLinkProvider.tsx
+import {
+  LinkProvider,
+  renderProvidedLink,
+  useLinkComponent
+} from "../LinkProvider.js";
+import { jsx } from "react/jsx-runtime";
+function DocsLinkProvider({ component, children }) {
+  return /* @__PURE__ */ jsx(LinkProvider, { component, children });
+}
+function useDocsLinkComponent() {
+  return useLinkComponent();
+}
+function DocsLink(props) {
+  const Component = useLinkComponent();
+  return renderProvidedLink(Component, { "data-slot": "docs-link", ...props });
+}
+export {
+  DocsLink,
+  DocsLinkProvider,
+  useDocsLinkComponent
+};
+//# sourceMappingURL=DocsLinkProvider.js.map

package/dist/components/docs/DocsLinkProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/DocsLinkProvider.tsx"],"sourcesContent":["'use client';\n\nimport type { ElementType, ReactNode } from 'react';\nimport {\n  LinkProvider,\n  renderProvidedLink,\n  useLinkComponent,\n} from '../LinkProvider';\nimport type { LinkComponentProps } from '../LinkProvider';\n\nexport type DocsLinkProps = LinkComponentProps;\n\n// The docs chrome's name for the package's one link adapter.\n//\n// This file used to own the context. Since issue 246 it lives in\n// `components/LinkProvider.tsx`, shared with the site chrome, and these are\n// the docs-family names for it: a `DocsLinkProvider` and a `LinkProvider`\n// write to the same context, so either one reaches `DocsHeader`, `SiteHeader`\n// and everything else that renders a link.\n\nexport interface DocsLinkProviderProps {\n  /** Any component accepting `href` and the usual anchor props. */\n  component: ElementType<DocsLinkProps>;\n  children: ReactNode;\n}\n\n/**\n * Injects the component every docs chrome element uses to render an internal\n * link.\n *\n * Defaults to a plain `<a>`, which is correct for Storybook, MDX previews, and\n * statically-rendered output. Apps with a client-side router inject their own\n * (`react-router`'s `Link`, `next/link`, …) so sidebar, breadcrumb, pager, and\n * TOC navigation stops triggering full page loads. Without this the docs chrome\n * would hard-navigate on every click and lose scroll position, focus, and any\n * client state on each hop.\n *\n * The same context as {@link LinkProvider}, which also takes `isCurrent`.\n */\nexport function DocsLinkProvider({ component, children }: DocsLinkProviderProps) {\n  return <LinkProvider component={component}>{children}</LinkProvider>;\n}\n\nexport function useDocsLinkComponent(): ElementType<DocsLinkProps> {\n  return useLinkComponent();\n}\n\n/**\n * Renders an internal link through the injected component and an external one\n * through a plain `<a>` with `rel=\"noopener noreferrer\"`. Pure in-page hashes\n * stay plain too — routers tend to treat `#section` as a route change and\n * scroll to the top instead of to the anchor.\n */\nexport function DocsLink(props: DocsLinkProps) {\n  const Component = useLinkComponent();\n  return renderProvidedLink(Component, { 'data-slot': 'docs-link', ...props } as DocsLinkProps);\n}\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAiCE;AADF,SAAS,iBAAiB,EAAE,WAAW,SAAS,GAA0B;AAC/E,SAAO,oBAAC,gBAAa,WAAuB,UAAS;AACvD;AAEO,SAAS,uBAAmD;AACjE,SAAO,iBAAiB;AAC1B;AAQO,SAAS,SAAS,OAAsB;AAC7C,QAAM,YAAY,iBAAiB;AACnC,SAAO,mBAAmB,WAAW,EAAE,aAAa,aAAa,GAAG,MAAM,CAAkB;AAC9F;","names":[]}

package/dist/components/docs/DocsSidebar.js

@@ -0,0 +1,147 @@
+"use client";
+
+// src/components/docs/DocsSidebar.tsx
+import { useCallback, useMemo, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { DocsLink } from "./DocsLinkProvider.js";
+import { cn } from "../../lib/recipe.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function containsPath(node, path) {
+  if (!path) return false;
+  if (node.href === path) return true;
+  return (node.items ?? []).some((child) => containsPath(child, path));
+}
+function DocsSidebar({
+  nav,
+  currentPath,
+  label = "DOCS",
+  onNavigate,
+  className = ""
+}) {
+  const [overrides, setOverrides] = useState({});
+  const toggle = useCallback((key, next) => {
+    setOverrides((prev) => ({ ...prev, [key]: next }));
+  }, []);
+  return /* @__PURE__ */ jsxs("nav", { "data-slot": "docs-sidebar", className: cn("not-prose print:hidden", className), "aria-label": "Documentation", children: [
+    label && /* @__PURE__ */ jsxs("p", { className: "docs-sidebar-label", children: [
+      "[ ",
+      label,
+      " ]"
+    ] }),
+    /* @__PURE__ */ jsx(
+      NodeList,
+      {
+        nodes: nav,
+        currentPath,
+        depth: 0,
+        path: "",
+        overrides,
+        onToggle: toggle,
+        onNavigate
+      }
+    )
+  ] });
+}
+function NodeList({ nodes, depth, path, ...rest }) {
+  return /* @__PURE__ */ jsx("ul", { className: "docs-sidebar-list", "data-depth": depth, children: nodes.map((node, index) => /* @__PURE__ */ jsx(
+    NodeItem,
+    {
+      node,
+      depth,
+      path: `${path}/${node.href ?? node.label}`,
+      ...rest
+    },
+    `${path}/${node.href ?? node.label}#${index}`
+  )) });
+}
+function NodeItem({
+  node,
+  currentPath,
+  depth,
+  path,
+  overrides,
+  onToggle,
+  onNavigate
+}) {
+  const hasChildren = (node.items?.length ?? 0) > 0;
+  const isActive = Boolean(node.href && node.href === currentPath);
+  const onActiveBranch = useMemo(
+    () => containsPath(node, currentPath),
+    [node, currentPath]
+  );
+  const expanded = overrides[path] ?? (onActiveBranch || node.defaultCollapsed !== true);
+  if (!hasChildren) {
+    return /* @__PURE__ */ jsx("li", { children: node.href ? /* @__PURE__ */ jsx(
+      DocsLink,
+      {
+        href: node.href,
+        className: "docs-sidebar-link",
+        "data-active": isActive ? "true" : void 0,
+        onClick: onNavigate,
+        ...isActive ? { "aria-current": "page" } : {},
+        children: node.label
+      }
+    ) : /* @__PURE__ */ jsx("span", { className: "docs-sidebar-link docs-sidebar-link-static", children: node.label }) });
+  }
+  return /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "docs-sidebar-group", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "docs-sidebar-toggle",
+          onClick: () => onToggle(path, !expanded),
+          "aria-expanded": expanded,
+          "aria-label": `${expanded ? "Collapse" : "Expand"} ${node.label}`,
+          children: /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              size: 14,
+              "aria-hidden": "true",
+              style: {
+                transform: expanded ? "rotate(90deg)" : "none",
+                transition: "transform 0.15s ease"
+              }
+            }
+          )
+        }
+      ),
+      node.href ? /* @__PURE__ */ jsx(
+        DocsLink,
+        {
+          href: node.href,
+          className: "docs-sidebar-link docs-sidebar-group-label",
+          "data-active": isActive ? "true" : void 0,
+          onClick: onNavigate,
+          ...isActive ? { "aria-current": "page" } : {},
+          children: node.label
+        }
+      ) : /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "docs-sidebar-link docs-sidebar-group-label",
+          onClick: () => onToggle(path, !expanded),
+          "aria-expanded": expanded,
+          children: node.label
+        }
+      )
+    ] }),
+    expanded && /* @__PURE__ */ jsx(
+      NodeList,
+      {
+        nodes: node.items ?? [],
+        currentPath,
+        depth: depth + 1,
+        path,
+        overrides,
+        onToggle,
+        onNavigate
+      }
+    )
+  ] });
+}
+export {
+  DocsSidebar
+};
+//# sourceMappingURL=DocsSidebar.js.map

package/dist/components/docs/DocsSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/docs/DocsSidebar.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useState } from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport { DocsLink } from './DocsLinkProvider';\nimport { cn } from '../../lib/recipe';\n\nexport interface DocsNavNode {\n  label: string;\n  /** Omit for a pure grouping node. */\n  href?: string;\n  items?: readonly DocsNavNode[];\n  /** Start collapsed even when it does not contain the active page. */\n  defaultCollapsed?: boolean;\n}\n\nexport interface DocsSidebarProps {\n  nav: readonly DocsNavNode[];\n  /** Current page path, matched against `href` to mark the active item. */\n  currentPath?: string;\n  /** Shown above the tree. Pass `null` to omit. */\n  label?: string | null;\n  /** Called after any nav link is clicked — close the mobile drawer here. */\n  onNavigate?: () => void;\n  className?: string;\n}\n\n/** Does this subtree contain `path`? Drives auto-expansion of the active branch. */\nfunction containsPath(node: DocsNavNode, path: string | undefined): boolean {\n  if (!path) return false;\n  if (node.href === path) return true;\n  return (node.items ?? []).some((child) => containsPath(child, path));\n}\n\n/**\n * Collapsible documentation navigation tree.\n *\n * Groups containing the current page expand on mount and cannot be\n * force-collapsed by stale state — expansion is stored as an override keyed by\n * group path, so navigating into a collapsed section still reveals it.\n */\nexport function DocsSidebar({\n  nav,\n  currentPath,\n  label = 'DOCS',\n  onNavigate,\n  className = '',\n}: DocsSidebarProps) {\n  const [overrides, setOverrides] = useState<Record<string, boolean>>({});\n\n  const toggle = useCallback((key: string, next: boolean) => {\n    setOverrides((prev) => ({ ...prev, [key]: next }));\n  }, []);\n\n  return (\n    <nav data-slot=\"docs-sidebar\" className={cn('not-prose print:hidden', className)} aria-label=\"Documentation\">\n      {label && <p className=\"docs-sidebar-label\">[ {label} ]</p>}\n      <NodeList\n        nodes={nav}\n        currentPath={currentPath}\n        depth={0}\n        path=\"\"\n        overrides={overrides}\n        onToggle={toggle}\n        onNavigate={onNavigate}\n      />\n    </nav>\n  );\n}\n\ninterface NodeListProps {\n  nodes: readonly DocsNavNode[];\n  currentPath: string | undefined;\n  depth: number;\n  path: string;\n  overrides: Record<string, boolean>;\n  onToggle: (key: string, next: boolean) => void;\n  onNavigate: (() => void) | undefined;\n}\n\nfunction NodeList({ nodes, depth, path, ...rest }: NodeListProps) {\n  return (\n    <ul className=\"docs-sidebar-list\" data-depth={depth}>\n      {nodes.map((node, index) => (\n        <NodeItem\n          key={`${path}/${node.href ?? node.label}#${index}`}\n          node={node}\n          depth={depth}\n          path={`${path}/${node.href ?? node.label}`}\n          {...rest}\n        />\n      ))}\n    </ul>\n  );\n}\n\ninterface NodeItemProps extends Omit<NodeListProps, 'nodes'> {\n  node: DocsNavNode;\n}\n\nfunction NodeItem({\n  node,\n  currentPath,\n  depth,\n  path,\n  overrides,\n  onToggle,\n  onNavigate,\n}: NodeItemProps) {\n  const hasChildren = (node.items?.length ?? 0) > 0;\n  const isActive = Boolean(node.href && node.href === currentPath);\n\n  const onActiveBranch = useMemo(\n    () => containsPath(node, currentPath),\n    [node, currentPath],\n  );\n\n  // Precedence: an explicit user toggle wins; otherwise the branch holding the\n  // current page is open, and `defaultCollapsed` decides the rest.\n  const expanded =\n    overrides[path] ?? (onActiveBranch || node.defaultCollapsed !== true);\n\n  if (!hasChildren) {\n    return (\n      <li>\n        {node.href ? (\n          <DocsLink\n            href={node.href}\n            className=\"docs-sidebar-link\"\n            data-active={isActive ? 'true' : undefined}\n            onClick={onNavigate}\n            {...(isActive ? { 'aria-current': 'page' as const } : {})}\n          >\n            {node.label}\n          </DocsLink>\n        ) : (\n          <span className=\"docs-sidebar-link docs-sidebar-link-static\">{node.label}</span>\n        )}\n      </li>\n    );\n  }\n\n  return (\n    <li>\n      <div className=\"docs-sidebar-group\">\n        <button\n          type=\"button\"\n          className=\"docs-sidebar-toggle\"\n          onClick={() => onToggle(path, !expanded)}\n          aria-expanded={expanded}\n          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${node.label}`}\n        >\n          <ChevronRight\n            size={14}\n            aria-hidden=\"true\"\n            style={{\n              transform: expanded ? 'rotate(90deg)' : 'none',\n              transition: 'transform 0.15s ease',\n            }}\n          />\n        </button>\n\n        {node.href ? (\n          <DocsLink\n            href={node.href}\n            className=\"docs-sidebar-link docs-sidebar-group-label\"\n            data-active={isActive ? 'true' : undefined}\n            onClick={onNavigate}\n            {...(isActive ? { 'aria-current': 'page' as const } : {})}\n          >\n            {node.label}\n          </DocsLink>\n        ) : (\n          <button\n            type=\"button\"\n            className=\"docs-sidebar-link docs-sidebar-group-label\"\n            onClick={() => onToggle(path, !expanded)}\n            aria-expanded={expanded}\n          >\n            {node.label}\n          </button>\n        )}\n      </div>\n\n      {expanded && (\n        <NodeList\n          nodes={node.items ?? []}\n          currentPath={currentPath}\n          depth={depth + 1}\n          path={path}\n          overrides={overrides}\n          onToggle={onToggle}\n          onNavigate={onNavigate}\n        />\n      )}\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}