@misoto22/design 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Henry Chen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+
+/**
+ * Radix root, re-exported. Pass `type="single" collapsible` for an FAQ and
+ * `type="multiple"` for a settings stack; Radix's own discriminated union then
+ * types `value` correctly for each.
+ */
+declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
+interface AccordionItemProps extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {
+    /** The row's summary — what the reader clicks. Named `title` rather than
+     *  inherited from the DOM attribute of the same name, which is a tooltip. */
+    title: ReactNode;
+    children: ReactNode;
+}
+/**
+ * One disclosure row: a hairline-ruled trigger and its panel.
+ *
+ * The marker is a plus that rotates into a minus, not a chevron. A chevron says
+ * "there is more below"; a plus says "this opens" — and in a stack of rows the
+ * difference decides whether the reader expects navigation or expansion.
+ *
+ * The panel animates on Radix's own `--radix-accordion-content-height`, so it
+ * opens to its real height without measuring anything at the call site.
+ *
+ * @example
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="ship" title="How do I ship it?">Push to main.</AccordionItem>
+ * </Accordion>
+ */
+declare function AccordionItem({ title, children, className, ...rest }: AccordionItemProps): react.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, Accordion as default };

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { Plus } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const Accordion = AccordionPrimitive.Root;
+function AccordionItem({ title, children, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Item,
+    {
+      className: cn("border-b border-(--rule)", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "m-0", children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, { className: "group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)", children: [
+          title,
+          /* @__PURE__ */ jsx(
+            Plus,
+            {
+              size: 16,
+              strokeWidth: 1.5,
+              "aria-hidden": true,
+              className: "shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-45"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]", children: /* @__PURE__ */ jsx("div", { className: "pb-4 pe-8", children }) })
+      ]
+    }
+  );
+}
+var Accordion_default = Accordion;
+export {
+  Accordion,
+  AccordionItem,
+  Accordion_default as default
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { Plus } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Radix root, re-exported. Pass `type=\"single\" collapsible` for an FAQ and\n * `type=\"multiple\"` for a settings stack; Radix's own discriminated union then\n * types `value` correctly for each.\n */\nexport const Accordion = AccordionPrimitive.Root\n\nexport interface AccordionItemProps\n  extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {\n  /** The row's summary — what the reader clicks. Named `title` rather than\n   *  inherited from the DOM attribute of the same name, which is a tooltip. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One disclosure row: a hairline-ruled trigger and its panel.\n *\n * The marker is a plus that rotates into a minus, not a chevron. A chevron says\n * \"there is more below\"; a plus says \"this opens\" — and in a stack of rows the\n * difference decides whether the reader expects navigation or expansion.\n *\n * The panel animates on Radix's own `--radix-accordion-content-height`, so it\n * opens to its real height without measuring anything at the call site.\n *\n * @example\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"ship\" title=\"How do I ship it?\">Push to main.</AccordionItem>\n * </Accordion>\n */\nexport function AccordionItem({ title, children, className, ...rest }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b border-(--rule)', className)}\n      {...rest}\n    >\n      <AccordionPrimitive.Header className=\"m-0\">\n        <AccordionPrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n          {title}\n          <Plus\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-45\"\n          />\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n      <AccordionPrimitive.Content className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]\">\n        <div className=\"pb-4 pe-8\">{children}</div>\n      </AccordionPrimitive.Content>\n    </AccordionPrimitive.Item>\n  )\n}\n\nexport default Accordion\n"],"mappings":";AA4CQ,SAEE,KAFF;AA1CR,YAAY,wBAAwB;AACpC,SAAS,YAAY;AAErB,SAAS,UAAU;AAOZ,MAAM,YAAY,mBAAmB;AAyBrC,SAAS,cAAc,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAuB;AACzF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAmB,QAAnB,EAA0B,WAAU,OACnC,+BAAC,mBAAmB,SAAnB,EAA2B,WAAU,yKACnC;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAa;AAAA,cACb,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,WACF,GACF;AAAA,QACA,oBAAC,mBAAmB,SAAnB,EAA2B,WAAU,0NACpC,8BAAC,SAAI,WAAU,aAAa,UAAS,GACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type AlertTone = 'info' | 'success' | 'warning' | 'danger';
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    tone?: AlertTone;
+    title?: ReactNode;
+    children?: ReactNode;
+    /** Optional action — a retry, a link to the settings that fix this. */
+    action?: ReactNode;
+    /** Hides the leading icon for a dense inline notice. */
+    hideIcon?: boolean;
+}
+/**
+ * A message about the page, in place.
+ *
+ * Carries `role="alert"` for the danger tone and `role="status"` for the rest,
+ * which is the difference between interrupting the reader and waiting for a
+ * pause. Getting that backwards is the usual accessibility failure here: a
+ * "saved" toast that talks over someone mid-sentence, or a payment error that
+ * is never announced at all.
+ *
+ * The tone is the message's SEVERITY, not its decoration. Colour is doubled by
+ * an icon and by the words, so the meaning survives both monochrome printing
+ * and colour-blindness.
+ *
+ * @example
+ * <Alert tone="danger" title="Upload failed">The file exceeds 25 MB.</Alert>
+ */
+declare function Alert({ tone, title, children, action, hideIcon, className, ...rest }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertTone, Alert as default };

package/dist/components/Alert/Alert.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+const TONE = {
+  info: { surface: "border-(--rule-2) bg-(--paper-2)", mark: "text-(--ink-2)", icon: Info, live: "polite" },
+  success: { surface: "border-transparent bg-(--ok-soft)", mark: "text-(--ok)", icon: CheckCircle2, live: "polite" },
+  warning: { surface: "border-transparent bg-(--warn-soft)", mark: "text-(--warn)", icon: AlertTriangle, live: "polite" },
+  /* Assertive: a danger alert interrupts because whatever the reader is doing
+     is already failing. The other three wait for a pause in speech. */
+  danger: { surface: "border-transparent bg-(--danger-soft)", mark: "text-(--danger)", icon: XCircle, live: "assertive" }
+};
+function Alert({
+  tone = "info",
+  title,
+  children,
+  action,
+  hideIcon = false,
+  className,
+  ...rest
+}) {
+  const { surface, mark, icon: Icon, live } = TONE[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: tone === "danger" ? "alert" : "status",
+      "aria-live": live,
+      className: cn(
+        "flex gap-3 rounded-(--radius) border p-4 text-sm text-(--ink-2)",
+        surface,
+        className
+      ),
+      ...rest,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(Icon, { size: 18, strokeWidth: 1.5, className: cn("mt-px shrink-0", mark), "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "m-0 font-medium text-(--ink)", children: title }),
+          children && /* @__PURE__ */ jsx("div", { className: cn("leading-relaxed", title && "mt-1"), children }),
+          action && /* @__PURE__ */ jsx("div", { className: "mt-3", children: action })
+        ] })
+      ]
+    }
+  );
+}
+var Alert_default = Alert;
+export {
+  Alert,
+  Alert_default as default
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type AlertTone = 'info' | 'success' | 'warning' | 'danger'\n\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  tone?: AlertTone\n  title?: ReactNode\n  children?: ReactNode\n  /** Optional action — a retry, a link to the settings that fix this. */\n  action?: ReactNode\n  /** Hides the leading icon for a dense inline notice. */\n  hideIcon?: boolean\n}\n\nconst TONE: Record<AlertTone, { surface: string; mark: string; icon: typeof Info; live: 'polite' | 'assertive' }> = {\n  info: { surface: 'border-(--rule-2) bg-(--paper-2)', mark: 'text-(--ink-2)', icon: Info, live: 'polite' },\n  success: { surface: 'border-transparent bg-(--ok-soft)', mark: 'text-(--ok)', icon: CheckCircle2, live: 'polite' },\n  warning: { surface: 'border-transparent bg-(--warn-soft)', mark: 'text-(--warn)', icon: AlertTriangle, live: 'polite' },\n  /* Assertive: a danger alert interrupts because whatever the reader is doing\n     is already failing. The other three wait for a pause in speech. */\n  danger: { surface: 'border-transparent bg-(--danger-soft)', mark: 'text-(--danger)', icon: XCircle, live: 'assertive' },\n}\n\n/**\n * A message about the page, in place.\n *\n * Carries `role=\"alert\"` for the danger tone and `role=\"status\"` for the rest,\n * which is the difference between interrupting the reader and waiting for a\n * pause. Getting that backwards is the usual accessibility failure here: a\n * \"saved\" toast that talks over someone mid-sentence, or a payment error that\n * is never announced at all.\n *\n * The tone is the message's SEVERITY, not its decoration. Colour is doubled by\n * an icon and by the words, so the meaning survives both monochrome printing\n * and colour-blindness.\n *\n * @example\n * <Alert tone=\"danger\" title=\"Upload failed\">The file exceeds 25 MB.</Alert>\n */\nexport function Alert({\n  tone = 'info',\n  title,\n  children,\n  action,\n  hideIcon = false,\n  className,\n  ...rest\n}: AlertProps) {\n  const { surface, mark, icon: Icon, live } = TONE[tone]\n\n  return (\n    <div\n      role={tone === 'danger' ? 'alert' : 'status'}\n      aria-live={live}\n      className={cn(\n        'flex gap-3 rounded-(--radius) border p-4 text-sm text-(--ink-2)',\n        surface,\n        className,\n      )}\n      {...rest}\n    >\n      {!hideIcon && <Icon size={18} strokeWidth={1.5} className={cn('mt-px shrink-0', mark)} aria-hidden />}\n      <div className=\"min-w-0 flex-1\">\n        {title && <p className=\"m-0 font-medium text-(--ink)\">{title}</p>}\n        {children && <div className={cn('leading-relaxed', title && 'mt-1')}>{children}</div>}\n        {action && <div className=\"mt-3\">{action}</div>}\n      </div>\n    </div>\n  )\n}\n\nexport default Alert\n"],"mappings":"AA+DoB,cACd,YADc;AA/DpB,SAAS,eAAe,cAAc,MAAM,eAAe;AAE3D,SAAS,UAAU;AAcnB,MAAM,OAA8G;AAAA,EAClH,MAAM,EAAE,SAAS,oCAAoC,MAAM,kBAAkB,MAAM,MAAM,MAAM,SAAS;AAAA,EACxG,SAAS,EAAE,SAAS,qCAAqC,MAAM,eAAe,MAAM,cAAc,MAAM,SAAS;AAAA,EACjH,SAAS,EAAE,SAAS,uCAAuC,MAAM,iBAAiB,MAAM,eAAe,MAAM,SAAS;AAAA;AAAA;AAAA,EAGtH,QAAQ,EAAE,SAAS,yCAAyC,MAAM,mBAAmB,MAAM,SAAS,MAAM,YAAY;AACxH;AAkBO,SAAS,MAAM;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAe;AACb,QAAM,EAAE,SAAS,MAAM,MAAM,MAAM,KAAK,IAAI,KAAK,IAAI;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,SAAS,WAAW,UAAU;AAAA,MACpC,aAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,SAAC,YAAY,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,WAAW,GAAG,kBAAkB,IAAI,GAAG,eAAW,MAAC;AAAA,QACnG,qBAAC,SAAI,WAAU,kBACZ;AAAA,mBAAS,oBAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,UAC5D,YAAY,oBAAC,SAAI,WAAW,GAAG,mBAAmB,SAAS,MAAM,GAAI,UAAS;AAAA,UAC9E,UAAU,oBAAC,SAAI,WAAU,QAAQ,kBAAO;AAAA,WAC3C;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/AppShell/AppShell.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
+    /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */
+    sidebar: ReactNode;
+    /** Optional content for the sticky topbar, laid out after the mobile toggle. */
+    topbar?: ReactNode;
+    /** Optional brand lockup pinned to the top of the sidebar. */
+    brand?: ReactNode;
+    /**
+     * Which element the content well renders as.
+     *
+     * `main` is right for the shell of an application, and is the default. A
+     * document may contain exactly one `main` landmark, so an AppShell rendered
+     * INSIDE another page — a preview on a documentation site, a screenshot
+     * harness — must pass `div`, or the page has two and assistive tech can no
+     * longer answer "where is the content".
+     */
+    contentAs?: 'main' | 'div';
+    children: ReactNode;
+}
+/**
+ * Two columns on a desktop, one column and a drawer on a phone.
+ *
+ * The drawer closes on Escape as well as on the scrim, because a drawer that
+ * only closes by tapping outside it strands a keyboard user inside a menu they
+ * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with
+ * an `onClick` is not reachable by keyboard and not announced as anything.
+ *
+ * @example
+ * <AppShell brand={<Wordmark />} sidebar={<NavItem href="/">Home</NavItem>}>
+ *   <Card>…</Card>
+ * </AppShell>
+ */
+declare function AppShell({ sidebar, topbar, brand, contentAs: Content, children, className, ...rest }: AppShellProps): react.JSX.Element;
+
+export { AppShell, type AppShellProps, AppShell as default };

package/dist/components/AppShell/AppShell.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, X } from "lucide-react";
+import { useEffect, useId, useState } from "react";
+import { cn } from "../../lib/cn.js";
+function AppShell({
+  sidebar,
+  topbar,
+  brand,
+  contentAs: Content = "main",
+  children,
+  className,
+  ...rest
+}) {
+  const [open, setOpen] = useState(false);
+  const sidebarId = useId();
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (event) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]", className),
+      ...rest,
+      children: [
+        open && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close navigation",
+            onClick: () => setOpen(false),
+            className: "fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            id: sidebarId,
+            "aria-label": "Sidebar",
+            className: cn(
+              "fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)",
+              // The drawer slides in from the edge reading STARTS at, so in an
+              // right-to-left document it comes from the right.
+              open ? "translate-x-0" : "-translate-x-full rtl:translate-x-full",
+              "md:static md:z-auto md:translate-x-0"
+            ),
+            children: [
+              brand && /* @__PURE__ */ jsx("div", { className: "flex h-14 items-center border-b border-(--rule) px-5", children: brand }),
+              /* @__PURE__ */ jsx(
+                "nav",
+                {
+                  "aria-label": "Primary",
+                  className: "flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim",
+                  children: sidebar
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+          /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": open ? "Close navigation" : "Open navigation",
+                "aria-expanded": open,
+                "aria-controls": sidebarId,
+                onClick: () => setOpen((previous) => !previous),
+                className: "-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden",
+                children: open ? /* @__PURE__ */ jsx(X, { size: 20, strokeWidth: 1.5, "aria-hidden": true }) : /* @__PURE__ */ jsx(Menu, { size: 20, strokeWidth: 1.5, "aria-hidden": true })
+              }
+            ),
+            topbar
+          ] }),
+          /* @__PURE__ */ jsx(Content, { className: "mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8", children })
+        ] })
+      ]
+    }
+  );
+}
+var AppShell_default = AppShell;
+export {
+  AppShell,
+  AppShell_default as default
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/AppShell/AppShell.tsx"],"sourcesContent":["'use client'\n\nimport { Menu, X } from 'lucide-react'\nimport { useEffect, useId, useState } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AppShellProps extends HTMLAttributes<HTMLDivElement> {\n  /** Navigation content for the sidebar (e.g. a stack of `NavItem`s). */\n  sidebar: ReactNode\n  /** Optional content for the sticky topbar, laid out after the mobile toggle. */\n  topbar?: ReactNode\n  /** Optional brand lockup pinned to the top of the sidebar. */\n  brand?: ReactNode\n  /**\n   * Which element the content well renders as.\n   *\n   * `main` is right for the shell of an application, and is the default. A\n   * document may contain exactly one `main` landmark, so an AppShell rendered\n   * INSIDE another page — a preview on a documentation site, a screenshot\n   * harness — must pass `div`, or the page has two and assistive tech can no\n   * longer answer \"where is the content\".\n   */\n  contentAs?: 'main' | 'div'\n  children: ReactNode\n}\n\n/**\n * Two columns on a desktop, one column and a drawer on a phone.\n *\n * The drawer closes on Escape as well as on the scrim, because a drawer that\n * only closes by tapping outside it strands a keyboard user inside a menu they\n * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with\n * an `onClick` is not reachable by keyboard and not announced as anything.\n *\n * @example\n * <AppShell brand={<Wordmark />} sidebar={<NavItem href=\"/\">Home</NavItem>}>\n *   <Card>…</Card>\n * </AppShell>\n */\nexport function AppShell({\n  sidebar,\n  topbar,\n  brand,\n  contentAs: Content = 'main',\n  children,\n  className,\n  ...rest\n}: AppShellProps) {\n  const [open, setOpen] = useState(false)\n  const sidebarId = useId()\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') setOpen(false)\n    }\n    document.addEventListener('keydown', onKey)\n    return () => document.removeEventListener('keydown', onKey)\n  }, [open])\n\n  return (\n    <div\n      className={cn('min-h-svh bg-(--paper) md:grid md:grid-cols-[15rem_1fr]', className)}\n      {...rest}\n    >\n      {open && (\n        <button\n          type=\"button\"\n          aria-label=\"Close navigation\"\n          onClick={() => setOpen(false)}\n          className=\"fixed inset-0 z-(--z-scrim) bg-(--scrim) md:hidden\"\n        />\n      )}\n\n      <aside\n        id={sidebarId}\n        aria-label=\"Sidebar\"\n        className={cn(\n          'fixed inset-y-0 start-0 z-(--z-modal) flex w-60 flex-col border-e border-(--rule) bg-(--paper) transition-transform duration-(--duration-slow) ease-(--ease-out-expo)',\n          // The drawer slides in from the edge reading STARTS at, so in an\n          // right-to-left document it comes from the right.\n          open ? 'translate-x-0' : '-translate-x-full rtl:translate-x-full',\n          'md:static md:z-auto md:translate-x-0',\n        )}\n      >\n        {brand && (\n          <div className=\"flex h-14 items-center border-b border-(--rule) px-5\">{brand}</div>\n        )}\n        <nav\n          aria-label=\"Primary\"\n          className=\"flex flex-1 flex-col gap-1 overflow-y-auto p-3 scroll-slim\"\n        >\n          {sidebar}\n        </nav>\n      </aside>\n\n      <div className=\"flex min-w-0 flex-col\">\n        <header className=\"sticky top-0 z-(--z-sticky) flex h-14 items-center gap-3 border-b border-(--rule) bg-(--paper)/85 px-(--page-pad) backdrop-blur\">\n          <button\n            type=\"button\"\n            aria-label={open ? 'Close navigation' : 'Open navigation'}\n            aria-expanded={open}\n            aria-controls={sidebarId}\n            onClick={() => setOpen((previous) => !previous)}\n            className=\"-ms-2.5 grid size-11 place-items-center rounded-(--radius) text-(--ink-2) transition-colors duration-(--duration-fast) hover:text-(--ink) md:hidden\"\n          >\n            {open ? <X size={20} strokeWidth={1.5} aria-hidden /> : <Menu size={20} strokeWidth={1.5} aria-hidden />}\n          </button>\n          {topbar}\n        </header>\n\n        <Content className=\"mx-auto w-full max-w-(--w-page) px-(--page-pad) py-8\">{children}</Content>\n      </div>\n    </div>\n  )\n}\n\nexport default AppShell\n"],"mappings":";AAmEQ,cAQF,YARE;AAjER,SAAS,MAAM,SAAS;AACxB,SAAS,WAAW,OAAO,gBAAgB;AAE3C,SAAS,UAAU;AAmCZ,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,YAAY,MAAM;AAExB,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,UAAyB;AACtC,UAAI,MAAM,QAAQ,SAAU,SAAQ,KAAK;AAAA,IAC3C;AACA,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAAA,EAC5D,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEH;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,cAAW;AAAA,YACX,SAAS,MAAM,QAAQ,KAAK;AAAA,YAC5B,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,cAAW;AAAA,YACX,WAAW;AAAA,cACT;AAAA;AAAA;AAAA,cAGA,OAAO,kBAAkB;AAAA,cACzB;AAAA,YACF;AAAA,YAEC;AAAA,uBACC,oBAAC,SAAI,WAAU,wDAAwD,iBAAM;AAAA,cAE/E;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAW;AAAA,kBACX,WAAU;AAAA,kBAET;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QACF;AAAA,QAEA,qBAAC,SAAI,WAAU,yBACb;AAAA,+BAAC,YAAO,WAAU,mIAChB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAY,OAAO,qBAAqB;AAAA,gBACxC,iBAAe;AAAA,gBACf,iBAAe;AAAA,gBACf,SAAS,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ;AAAA,gBAC9C,WAAU;AAAA,gBAET,iBAAO,oBAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,IAAK,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,YACxG;AAAA,YACC;AAAA,aACH;AAAA,UAEA,oBAAC,WAAQ,WAAU,wDAAwD,UAAS;AAAA,WACtF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {
+    src?: string;
+    /**
+     * Describes the person, not the picture. Empty string is correct and
+     * deliberate when the name is already printed beside the avatar — repeating
+     * it makes a screen reader say it twice.
+     */
+    alt: string;
+    /** Shown while the image loads and if it never does. Usually initials. */
+    fallback: string;
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * A person, as a circle.
+ *
+ * Wraps Radix so the fallback appears only after the image has actually failed
+ * or is still loading — a hand-rolled `onError` swap flashes the initials on
+ * every render before the cache answers.
+ *
+ * @example
+ * <Avatar src={user.photo} alt={user.name} fallback="HC" />
+ */
+declare function Avatar({ src, alt, fallback, size, className, ...rest }: AvatarProps): react.JSX.Element;
+
+export { Avatar, type AvatarProps, Avatar as default };

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../lib/cn.js";
+const SIZE = {
+  sm: "size-7 text-[10px]",
+  md: "size-9 text-[11px]",
+  lg: "size-12 text-[13px]"
+};
+function Avatar({ src, alt, fallback, size = "md", className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    AvatarPrimitive.Root,
+    {
+      className: cn(
+        "relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)",
+        SIZE[size],
+        className
+      ),
+      ...rest,
+      children: [
+        src && /* @__PURE__ */ jsx(AvatarPrimitive.Image, { src, alt, className: "size-full object-cover" }),
+        /* @__PURE__ */ jsx(
+          AvatarPrimitive.Fallback,
+          {
+            "aria-hidden": "true",
+            className: "grid size-full place-items-center font-mono uppercase tracking-wider text-(--ink-3-aa)",
+            children: fallback
+          }
+        )
+      ]
+    }
+  );
+}
+var Avatar_default = Avatar;
+export {
+  Avatar,
+  Avatar_default as default
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface AvatarProps extends Omit<ComponentProps<typeof AvatarPrimitive.Root>, 'children'> {\n  src?: string\n  /**\n   * Describes the person, not the picture. Empty string is correct and\n   * deliberate when the name is already printed beside the avatar — repeating\n   * it makes a screen reader say it twice.\n   */\n  alt: string\n  /** Shown while the image loads and if it never does. Usually initials. */\n  fallback: string\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst SIZE = {\n  sm: 'size-7 text-[10px]',\n  md: 'size-9 text-[11px]',\n  lg: 'size-12 text-[13px]',\n} as const\n\n/**\n * A person, as a circle.\n *\n * Wraps Radix so the fallback appears only after the image has actually failed\n * or is still loading — a hand-rolled `onError` swap flashes the initials on\n * every render before the cache answers.\n *\n * @example\n * <Avatar src={user.photo} alt={user.name} fallback=\"HC\" />\n */\nexport function Avatar({ src, alt, fallback, size = 'md', className, ...rest }: AvatarProps) {\n  return (\n    <AvatarPrimitive.Root\n      className={cn(\n        'relative inline-flex shrink-0 overflow-hidden rounded-full border border-(--rule) bg-(--stone)',\n        SIZE[size],\n        className,\n      )}\n      {...rest}\n    >\n      {src && (\n        <AvatarPrimitive.Image src={src} alt={alt} className=\"size-full object-cover\" />\n      )}\n      <AvatarPrimitive.Fallback\n        // Nothing to announce: either the image's alt carries the identity, or\n        // the name is printed beside it. Initials read aloud are noise.\n        aria-hidden=\"true\"\n        className=\"grid size-full place-items-center font-mono uppercase tracking-wider text-(--ink-3-aa)\"\n      >\n        {fallback}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n}\n\nexport default Avatar\n"],"mappings":";AAqCI,SASI,KATJ;AAnCJ,YAAY,qBAAqB;AAEjC,SAAS,UAAU;AAenB,MAAM,OAAO;AAAA,EACX,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,SAAS,OAAO,EAAE,KAAK,KAAK,UAAU,OAAO,MAAM,WAAW,GAAG,KAAK,GAAgB;AAC3F,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,eACC,oBAAC,gBAAgB,OAAhB,EAAsB,KAAU,KAAU,WAAU,0BAAyB;AAAA,QAEhF;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAGC,eAAY;AAAA,YACZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,iBAAQ;","names":[]}

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,30 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline';
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    /**
+     * `neutral` is the default and the right answer nearly always. The three
+     * status tones are the system's only chroma and are bound to STATE — a badge
+     * that is red because the design wanted a red badge is the thing this scale
+     * exists to prevent.
+     */
+    tone?: BadgeTone;
+}
+/**
+ * A count, a state, a small inline marker.
+ *
+ * Mono and small, so it reads as metadata rather than as content. A badge is
+ * not interactive — if it can be clicked or dismissed it is a `Tag` or a
+ * button, and giving this one an `onClick` produces a control a keyboard cannot
+ * reach.
+ *
+ * @example
+ * <Badge>12</Badge>
+ * @example
+ * <Badge tone="success">Deployed</Badge>
+ */
+declare function Badge({ children, tone, className, ...rest }: BadgeProps): react.JSX.Element;
+
+export { Badge, type BadgeProps, type BadgeTone, Badge as default };

package/dist/components/Badge/Badge.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const TONE = {
+  neutral: "bg-(--stone) text-(--ink-2) border-transparent",
+  success: "bg-(--ok-soft) text-(--ok) border-transparent",
+  warning: "bg-(--warn-soft) text-(--warn) border-transparent",
+  danger: "bg-(--danger-soft) text-(--danger) border-transparent",
+  outline: "bg-transparent text-(--ink-2) border-(--rule-2)"
+};
+function Badge({ children, tone = "neutral", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-(--radius-sm) border px-2.5 py-1 font-mono text-xs tracking-wide",
+        TONE[tone],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Badge_default = Badge;
+export {
+  Badge,
+  Badge_default as default
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline'\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  children: ReactNode\n  /**\n   * `neutral` is the default and the right answer nearly always. The three\n   * status tones are the system's only chroma and are bound to STATE — a badge\n   * that is red because the design wanted a red badge is the thing this scale\n   * exists to prevent.\n   */\n  tone?: BadgeTone\n}\n\nconst TONE: Record<BadgeTone, string> = {\n  neutral: 'bg-(--stone) text-(--ink-2) border-transparent',\n  success: 'bg-(--ok-soft) text-(--ok) border-transparent',\n  warning: 'bg-(--warn-soft) text-(--warn) border-transparent',\n  danger: 'bg-(--danger-soft) text-(--danger) border-transparent',\n  outline: 'bg-transparent text-(--ink-2) border-(--rule-2)',\n}\n\n/**\n * A count, a state, a small inline marker.\n *\n * Mono and small, so it reads as metadata rather than as content. A badge is\n * not interactive — if it can be clicked or dismissed it is a `Tag` or a\n * button, and giving this one an `onClick` produces a control a keyboard cannot\n * reach.\n *\n * @example\n * <Badge>12</Badge>\n * @example\n * <Badge tone=\"success\">Deployed</Badge>\n */\nexport function Badge({ children, tone = 'neutral', className, ...rest }: BadgeProps) {\n  return (\n    <span\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-(--radius-sm) border px-2.5 py-1 font-mono text-xs tracking-wide',\n        TONE[tone],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default Badge\n"],"mappings":"AAuCI;AAtCJ,SAAS,UAAU;AAenB,MAAM,OAAkC;AAAA,EACtC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AAeO,SAAS,MAAM,EAAE,UAAU,OAAO,WAAW,WAAW,GAAG,KAAK,GAAe;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,KAAK,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,gBAAQ;","names":[]}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface Crumb {
+    label: ReactNode;
+    /** Omit on the last crumb — the page you are already on is not a link. */
+    href?: string;
+}
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    items: Crumb[];
+    /** Names this trail when a page has more than one. */
+    label?: string;
+    /** Rendered between crumbs. A slash by default; it is decorative either way. */
+    separator?: ReactNode;
+}
+/**
+ * Where you are, as a path.
+ *
+ * The last crumb is plain text with `aria-current="page"` rather than a link to
+ * itself — a self-link is the most common breadcrumb bug, and it makes a screen
+ * reader offer a navigation that goes nowhere.
+ *
+ * Separators live in `<li aria-hidden>` so the trail is read as its items and
+ * not as "home slash work slash".
+ *
+ * @example
+ * <Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />
+ */
+declare function Breadcrumb({ items, label, separator, className, ...rest }: BreadcrumbProps): react.JSX.Element;
+
+export { Breadcrumb, type BreadcrumbProps, type Crumb, Breadcrumb as default };

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { cn } from "../../lib/cn.js";
+function Breadcrumb({
+  items,
+  label = "Breadcrumb",
+  separator = "/",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label, className: cn("mono-meta text-(--ink-3-aa)", className), ...rest, children: /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-wrap items-center gap-2 p-0", children: items.map((item, index) => {
+    const last = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("li", { className: "min-w-0", children: item.href && !last ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "text-(--ink-3-aa) underline decoration-transparent underline-offset-4 transition-colors duration-(--duration-fast) hover:text-(--ink) hover:decoration-(--rule-2)",
+          children: item.label
+        }
+      ) : /* @__PURE__ */ jsx("span", { "aria-current": last ? "page" : void 0, className: last ? "text-(--ink)" : void 0, children: item.label }) }),
+      !last && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "select-none text-(--rule-2)", children: separator })
+    ] }, index);
+  }) }) });
+}
+var Breadcrumb_default = Breadcrumb;
+export {
+  Breadcrumb,
+  Breadcrumb_default as default
+};
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Crumb {\n  label: ReactNode\n  /** Omit on the last crumb — the page you are already on is not a link. */\n  href?: string\n}\n\nexport interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {\n  items: Crumb[]\n  /** Names this trail when a page has more than one. */\n  label?: string\n  /** Rendered between crumbs. A slash by default; it is decorative either way. */\n  separator?: ReactNode\n}\n\n/**\n * Where you are, as a path.\n *\n * The last crumb is plain text with `aria-current=\"page\"` rather than a link to\n * itself — a self-link is the most common breadcrumb bug, and it makes a screen\n * reader offer a navigation that goes nowhere.\n *\n * Separators live in `<li aria-hidden>` so the trail is read as its items and\n * not as \"home slash work slash\".\n *\n * @example\n * <Breadcrumb items={[{ label: 'Components', href: '/components' }, { label: 'Button' }]} />\n */\nexport function Breadcrumb({\n  items,\n  label = 'Breadcrumb',\n  separator = '/',\n  className,\n  ...rest\n}: BreadcrumbProps) {\n  return (\n    <nav aria-label={label} className={cn('mono-meta text-(--ink-3-aa)', className)} {...rest}>\n      <ol className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\">\n        {items.map((item, index) => {\n          const last = index === items.length - 1\n          return (\n            <Fragment key={index}>\n              <li className=\"min-w-0\">\n                {item.href && !last ? (\n                  <a\n                    href={item.href}\n                    className=\"text-(--ink-3-aa) underline decoration-transparent underline-offset-4 transition-colors duration-(--duration-fast) hover:text-(--ink) hover:decoration-(--rule-2)\"\n                  >\n                    {item.label}\n                  </a>\n                ) : (\n                  <span aria-current={last ? 'page' : undefined} className={last ? 'text-(--ink)' : undefined}>\n                    {item.label}\n                  </span>\n                )}\n              </li>\n              {!last && (\n                <li aria-hidden=\"true\" className=\"select-none text-(--rule-2)\">\n                  {separator}\n                </li>\n              )}\n            </Fragment>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n\nexport default Breadcrumb\n"],"mappings":"AA4CY,SAGM,KAHN;AA5CZ,SAAS,gBAAgB;AAEzB,SAAS,UAAU;AA6BZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE,oBAAC,SAAI,cAAY,OAAO,WAAW,GAAG,+BAA+B,SAAS,GAAI,GAAG,MACnF,8BAAC,QAAG,WAAU,uDACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,UAAM,OAAO,UAAU,MAAM,SAAS;AACtC,WACE,qBAAC,YACC;AAAA,0BAAC,QAAG,WAAU,WACX,eAAK,QAAQ,CAAC,OACb;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,KAAK;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,IAEA,oBAAC,UAAK,gBAAc,OAAO,SAAS,QAAW,WAAW,OAAO,iBAAiB,QAC/E,eAAK,OACR,GAEJ;AAAA,MACC,CAAC,QACA,oBAAC,QAAG,eAAY,QAAO,WAAU,+BAC9B,qBACH;AAAA,SAlBW,KAoBf;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface CommonProps {
+    children?: ReactNode;
+    /**
+     * Which action this is. `primary` is the one thing the screen wants you to
+     * do, so there is at most one per view; `danger` is reserved for destructive
+     * actions and is the only place chroma is allowed on a control.
+     */
+    variant?: ButtonVariant;
+    /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */
+    size?: ButtonSize;
+    /** Optional mono keycap glyph rendered after the label (e.g. "P"). */
+    keycap?: string;
+    /**
+     * Swaps the leading content for a spinner and blocks interaction. The label
+     * stays put — a button that empties out while it works loses its width, and
+     * the page reflows under the pointer that just clicked it.
+     */
+    loading?: boolean;
+    /**
+     * Square control with no label. REQUIRES `aria-label`: an icon-only button
+     * with no accessible name is invisible to a screen reader, and this is the
+     * single most common way a design system ships an unusable control.
+     */
+    iconOnly?: boolean;
+    /**
+     * Render the child element instead of a `<button>`, keeping these styles.
+     * Use it to hand the styling to a router's `Link` — `asChild` is what keeps
+     * this package free of any one router.
+     *
+     * The decoration slots (`keycap`, `loading`) are not injected into a slotted
+     * child; compose them inside it yourself.
+     *
+     * @example
+     * <Button asChild><Link href="/work">Work</Link></Button>
+     */
+    asChild?: boolean;
+    className?: string;
+}
+type ButtonAsLink = CommonProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & {
+    href: string;
+};
+type ButtonAsButton = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & {
+    href?: undefined;
+};
+type ButtonProps = ButtonAsLink | ButtonAsButton;
+/**
+ * The system's action.
+ *
+ * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it
+ * via `asChild`. No router is imported, so the package stays framework-agnostic
+ * and a Next or React Router app wires its own `Link` at the call site.
+ *
+ * Server-component friendly: there is no client boundary here, so it renders in
+ * a static page as well as an interactive one.
+ *
+ * @example
+ * <Button variant="secondary" keycap="P">View projects</Button>
+ * @example
+ * <Button loading disabled>Saving…</Button>
+ * @example
+ * <Button iconOnly aria-label="Close"><X size={16} /></Button>
+ */
+declare function Button(props: ButtonProps): react.JSX.Element;
+
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, Button as default };