@misoto22/design 0.3.1

package/dist/components/NativeSelect/NativeSelect.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { CONTROL_BASE, CONTROL_BORDER, isInvalid } from "../../lib/control.js";
+function NativeSelect({
+  invalid,
+  className,
+  ref,
+  children,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}) {
+  const bad = isInvalid(invalid, ariaInvalid);
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref,
+        "aria-invalid": ariaInvalid ?? (invalid ? true : void 0),
+        className: cn(
+          CONTROL_BASE,
+          "cursor-pointer appearance-none pe-9",
+          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,
+          className
+        ),
+        ...rest,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        size: 16,
+        strokeWidth: 1.5,
+        className: "pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)",
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+var NativeSelect_default = NativeSelect;
+export {
+  NativeSelect,
+  NativeSelect_default as default
+};
+//# sourceMappingURL=NativeSelect.js.map

package/dist/components/NativeSelect/NativeSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NativeSelect/NativeSelect.tsx"],"sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport type { Ref, SelectHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { CONTROL_BASE, CONTROL_BORDER, isInvalid } from '../../lib/control'\n\nexport interface NativeSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {\n  /** Paints the resting border with `--danger` and reflects `aria-invalid`. */\n  invalid?: boolean\n  ref?: Ref<HTMLSelectElement>\n}\n\n/**\n * A native `<select>`, restyled.\n *\n * The escape hatch, not the default — `Select` is the styled one. Reach for\n * this where the platform's own picker is genuinely better: a very long list on\n * a phone, a form that must work without JavaScript, a page where the last\n * kilobyte matters. The browser gives typeahead and the mobile wheel for free,\n * and those are real.\n *\n * What it cannot do is look like the rest of the system once open. The option\n * list is drawn by the operating system, so it carries none of these tokens —\n * which is exactly why it stopped being the default.\n *\n * @example\n * <NativeSelect defaultValue=\"au\"><option value=\"au\">Australia</option></NativeSelect>\n */\nexport function NativeSelect({\n  invalid,\n  className,\n  ref,\n  children,\n  'aria-invalid': ariaInvalid,\n  ...rest\n}: NativeSelectProps) {\n  const bad = isInvalid(invalid, ariaInvalid)\n  return (\n    <div className=\"relative\">\n      <select\n        ref={ref}\n        aria-invalid={ariaInvalid ?? (invalid ? true : undefined)}\n        className={cn(\n          CONTROL_BASE,\n          'cursor-pointer appearance-none pe-9',\n          bad ? CONTROL_BORDER.invalid : CONTROL_BORDER.resting,\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </select>\n      <ChevronDown\n        size={16}\n        strokeWidth={1.5}\n        className=\"pointer-events-none absolute end-3 top-1/2 -translate-y-1/2 text-(--ink-3-aa)\"\n        aria-hidden\n      />\n    </div>\n  )\n}\n\nexport default NativeSelect\n"],"mappings":"AAqCI,SACE,KADF;AArCJ,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AACnB,SAAS,cAAc,gBAAgB,iBAAiB;AAwBjD,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,GAAG;AACL,GAAsB;AACpB,QAAM,MAAM,UAAU,SAAS,WAAW;AAC1C,SACE,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,gBAAc,gBAAgB,UAAU,OAAO;AAAA,QAC/C,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,MAAM,eAAe,UAAU,eAAe;AAAA,UAC9C;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,aAAa;AAAA,QACb,WAAU;AAAA,QACV,eAAW;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;","names":[]}

package/dist/components/NavItem/NavItem.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface NavItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> {
+    href: string;
+    /** Optional leading icon (a lucide-react component, rendered at 18px). */
+    icon?: LucideIcon;
+    /** Marks the current route. Also sets `aria-current="page"`. */
+    active?: boolean;
+    /**
+     * Hand the styling to a router's own `Link` instead of a native `<a>`.
+     *
+     * The slotted child receives the classes and `aria-current`, and becomes the
+     * row — so `icon` is not rendered in this mode; put it inside the child.
+     */
+    asChild?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * A row in a sidebar.
+ *
+ * `aria-current="page"` and not only a colour: the active row has to be
+ * identifiable to a reader who cannot see that it is darker. In this system it
+ * is also carried by weight and by a filled ground, so it survives monochrome
+ * printing and low contrast.
+ *
+ * Framework-agnostic. `asChild` is how a Next or React Router app gets
+ * client-side navigation without this package importing either.
+ *
+ * @example
+ * <NavItem href="/components/button" icon={Square} active>Button</NavItem>
+ * @example
+ * <NavItem asChild href="/work"><Link href="/work">Work</Link></NavItem>
+ */
+declare function NavItem({ href, icon: Icon, active, asChild, children, className, ...rest }: NavItemProps): react.JSX.Element;
+
+export { NavItem, type NavItemProps, NavItem as default };

package/dist/components/NavItem/NavItem.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../../lib/cn.js";
+function NavItem({
+  href,
+  icon: Icon,
+  active = false,
+  asChild = false,
+  children,
+  className,
+  ...rest
+}) {
+  const cls = cn(
+    "flex min-h-(--control-h-sm) items-center gap-3 rounded-(--radius) px-3 py-2 text-sm transition-colors duration-(--duration-fast)",
+    active ? "bg-(--stone) font-medium text-(--ink)" : "text-(--ink-3-aa) hover:bg-(--stone) hover:text-(--ink)",
+    className
+  );
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { "aria-current": active ? "page" : void 0, className: cls, ...rest, children });
+  }
+  return /* @__PURE__ */ jsxs("a", { href, "aria-current": active ? "page" : void 0, className: cls, ...rest, children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { size: 18, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0" }),
+    children
+  ] });
+}
+var NavItem_default = NavItem;
+export {
+  NavItem,
+  NavItem_default as default
+};
+//# sourceMappingURL=NavItem.js.map

package/dist/components/NavItem/NavItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/NavItem/NavItem.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { LucideIcon } from 'lucide-react'\nimport type { AnchorHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface NavItemProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> {\n  href: string\n  /** Optional leading icon (a lucide-react component, rendered at 18px). */\n  icon?: LucideIcon\n  /** Marks the current route. Also sets `aria-current=\"page\"`. */\n  active?: boolean\n  /**\n   * Hand the styling to a router's own `Link` instead of a native `<a>`.\n   *\n   * The slotted child receives the classes and `aria-current`, and becomes the\n   * row — so `icon` is not rendered in this mode; put it inside the child.\n   */\n  asChild?: boolean\n  children: ReactNode\n  className?: string\n}\n\n/**\n * A row in a sidebar.\n *\n * `aria-current=\"page\"` and not only a colour: the active row has to be\n * identifiable to a reader who cannot see that it is darker. In this system it\n * is also carried by weight and by a filled ground, so it survives monochrome\n * printing and low contrast.\n *\n * Framework-agnostic. `asChild` is how a Next or React Router app gets\n * client-side navigation without this package importing either.\n *\n * @example\n * <NavItem href=\"/components/button\" icon={Square} active>Button</NavItem>\n * @example\n * <NavItem asChild href=\"/work\"><Link href=\"/work\">Work</Link></NavItem>\n */\nexport function NavItem({\n  href,\n  icon: Icon,\n  active = false,\n  asChild = false,\n  children,\n  className,\n  ...rest\n}: NavItemProps) {\n  const cls = cn(\n    'flex min-h-(--control-h-sm) items-center gap-3 rounded-(--radius) px-3 py-2 text-sm transition-colors duration-(--duration-fast)',\n    active\n      ? 'bg-(--stone) font-medium text-(--ink)'\n      : 'text-(--ink-3-aa) hover:bg-(--stone) hover:text-(--ink)',\n    className,\n  )\n\n  if (asChild) {\n    // Slot demands exactly ONE child, and `{Icon && …}` is a second one the\n    // moment `icon` is omitted — which is how a whole sidebar of slotted rows\n    // failed to render at all. So a slotted row takes its icon inside the child\n    // it was handed, and this branch passes `children` through untouched.\n    return (\n      <Slot aria-current={active ? 'page' : undefined} className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  return (\n    <a href={href} aria-current={active ? 'page' : undefined} className={cls} {...rest}>\n      {Icon && <Icon size={18} strokeWidth={1.5} aria-hidden className=\"shrink-0\" />}\n      {children}\n    </a>\n  )\n}\n\nexport default NavItem\n"],"mappings":"AA8DM,cAOF,YAPE;AA9DN,SAAS,YAAY;AAGrB,SAAS,UAAU;AAoCZ,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,QAAM,MAAM;AAAA,IACV;AAAA,IACA,SACI,0CACA;AAAA,IACJ;AAAA,EACF;AAEA,MAAI,SAAS;AAKX,WACE,oBAAC,QAAK,gBAAc,SAAS,SAAS,QAAW,WAAW,KAAM,GAAG,MAClE,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAE,MAAY,gBAAc,SAAS,SAAS,QAAW,WAAW,KAAM,GAAG,MAC3E;AAAA,YAAQ,oBAAC,QAAK,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC,WAAU,YAAW;AAAA,IAC3E;AAAA,KACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 1-based. */
+    page: number;
+    /** Total pages. A value of 1 or less renders nothing. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** How many numbered pages sit either side of the current one. */
+    siblings?: number;
+    label?: string;
+}
+declare const GAP: "\u2026";
+/**
+ * Builds the visible page list: always the first and last page, a window around
+ * the current one, and an ellipsis wherever the sequence skips.
+ *
+ * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,
+ * so the shape is testable without a DOM — the off-by-one at the window edges
+ * is the whole difficulty of this component.
+ */
+declare function paginationRange(page: number, pageCount: number, siblings?: number): (number | typeof GAP)[];
+/**
+ * Numbered pagination.
+ *
+ * The current page is marked by one filled pill that TRAVELS between the
+ * numbers rather than by a background switching off on one and on on another.
+ * Two backgrounds cross-fading reads as two things changing; a shape moving
+ * reads as the one thing that actually did.
+ *
+ * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`
+ * rather than a styled `<span>` — a reader jumping by landmark needs to find
+ * the control, and a reader on the current page needs to be told they are
+ * already there.
+ *
+ * Renders nothing at one page or fewer. A pager for a single page is furniture.
+ *
+ * @example
+ * <Pagination page={page} pageCount={12} onPageChange={setPage} />
+ */
+declare function Pagination({ page, pageCount, onPageChange, siblings, label, className, ...rest }: PaginationProps): react.JSX.Element | null;
+
+export { Pagination, type PaginationProps, Pagination as default, paginationRange };

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { useSelectionIndicator } from "../../lib/useSelectionIndicator.js";
+const GAP = "\u2026";
+function paginationRange(page, pageCount, siblings = 1) {
+  const first = 1;
+  const last = pageCount;
+  const widest = 2 * siblings + 5;
+  if (pageCount <= widest) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  const start = Math.max(first, page - siblings);
+  const end = Math.min(last, page + siblings);
+  const pages = [];
+  if (start > first) {
+    pages.push(first);
+    if (start > first + 2) pages.push(GAP);
+    else if (start === first + 2) pages.push(first + 1);
+  }
+  for (let n = start; n <= end; n += 1) pages.push(n);
+  if (end < last) {
+    if (end < last - 2) pages.push(GAP);
+    else if (end === last - 2) pages.push(last - 1);
+    pages.push(last);
+  }
+  return pages;
+}
+const STEP = "inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none";
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  siblings = 1,
+  label = "Pagination",
+  className,
+  ...rest
+}) {
+  const [listRef, indicator] = useSelectionIndicator(String(page));
+  if (pageCount <= 1) return null;
+  const pages = paginationRange(page, pageCount, siblings);
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className: cn("flex items-center gap-1.5", className), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Previous page",
+        disabled: page <= 1,
+        onClick: () => onPageChange(page - 1),
+        className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, strokeWidth: 1.5, "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsxs("ol", { ref: listRef, className: "relative m-0 flex list-none items-center gap-1 p-0", children: [
+      indicator.ready && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          "data-m22-animated": true,
+          className: "absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
+          style: {
+            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,
+            width: indicator.width,
+            height: indicator.height,
+            insetInlineStart: 0,
+            top: 0
+          }
+        }
+      ),
+      pages.map(
+        (entry, index) => entry === GAP ? /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "px-1 mono-meta text-(--ink-3-aa)", children: GAP }, `gap-${index}`) : /* @__PURE__ */ jsx("li", { className: "relative z-1", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-current": entry === page ? "page" : void 0,
+            "aria-label": `Page ${entry}`,
+            "data-indicator-active": entry === page ? "true" : void 0,
+            onClick: () => onPageChange(entry),
+            className: cn(
+              STEP,
+              "mono-meta tabular-nums",
+              entry === page ? "border-transparent text-(--accent-foreground)" : "border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)"
+            ),
+            children: entry
+          }
+        ) }, entry)
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Next page",
+        disabled: page >= pageCount,
+        onClick: () => onPageChange(page + 1),
+        className: cn(STEP, "border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)"),
+        children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, strokeWidth: 1.5, "aria-hidden": true })
+      }
+    )
+  ] });
+}
+var Pagination_default = Pagination;
+export {
+  Pagination,
+  Pagination_default as default,
+  paginationRange
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label=\"Previous page\"\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronLeft size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-m22-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={`Page ${entry}`}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label=\"Next page\"\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <ChevronRight size={16} strokeWidth={1.5} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":[]}

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,39 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+/** Radix Popover root, trigger, anchor and close, as typed passthroughs. */
+declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverClose: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
+interface PopoverContentProps extends ComponentProps<typeof PopoverPrimitive.Content> {
+    /** Names the panel for assistive tech. Required — a popover is a dialog. */
+    label: string;
+    /** Show the top-end close control. */
+    showClose?: boolean;
+}
+/**
+ * A panel anchored to a control, holding content the reader can interact with.
+ *
+ * The line against `Tooltip` is not visual, it is behavioural: a tooltip
+ * describes and cannot be entered; a popover holds things you tab to. Anything
+ * with a link, a field or a button in it is a popover, and putting that inside
+ * a tooltip makes it unreachable — the tooltip closes as soon as focus tries to
+ * move into it.
+ *
+ * Against `DropdownMenu`: a menu is a list of actions with menu semantics and
+ * arrow-key navigation. A popover is free-form, and its contents Tab like the
+ * rest of the page.
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger asChild><Button variant="secondary">Filters</Button></PopoverTrigger>
+ *   <PopoverContent label="Filters">
+ *     <Field label="Status"><Select>…</Select></Field>
+ *   </PopoverContent>
+ * </Popover>
+ */
+declare function PopoverContent({ label, showClose, className, sideOffset, children, ...rest }: PopoverContentProps): react.JSX.Element;
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverTrigger, Popover as default };

package/dist/components/Popover/Popover.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { useOverlayContainer } from "../../lib/overlay-container.js";
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+function PopoverContent({
+  label,
+  showClose = false,
+  className,
+  sideOffset = 8,
+  children,
+  ...rest
+}) {
+  const container = useOverlayContainer();
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
+    PopoverPrimitive.Content,
+    {
+      collisionBoundary: container ?? void 0,
+      collisionPadding: 8,
+      "aria-label": label,
+      sideOffset,
+      "data-m22-animated": true,
+      className: cn(
+        "z-(--z-dropdown) w-72 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-4",
+        "data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)",
+        className
+      ),
+      ...rest,
+      children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(
+          PopoverPrimitive.Close,
+          {
+            "aria-label": "Close",
+            className: "absolute end-2 top-2 grid size-8 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+            children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 1.5, "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  ) });
+}
+var Popover_default = Popover;
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+  Popover_default as default
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { X } from 'lucide-react'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useOverlayContainer } from '../../lib/overlay-container'\n\n/** Radix Popover root, trigger, anchor and close, as typed passthroughs. */\nexport const Popover = PopoverPrimitive.Root\nexport const PopoverTrigger = PopoverPrimitive.Trigger\nexport const PopoverAnchor = PopoverPrimitive.Anchor\nexport const PopoverClose = PopoverPrimitive.Close\n\nexport interface PopoverContentProps\n  extends ComponentProps<typeof PopoverPrimitive.Content> {\n  /** Names the panel for assistive tech. Required — a popover is a dialog. */\n  label: string\n  /** Show the top-end close control. */\n  showClose?: boolean\n}\n\n/**\n * A panel anchored to a control, holding content the reader can interact with.\n *\n * The line against `Tooltip` is not visual, it is behavioural: a tooltip\n * describes and cannot be entered; a popover holds things you tab to. Anything\n * with a link, a field or a button in it is a popover, and putting that inside\n * a tooltip makes it unreachable — the tooltip closes as soon as focus tries to\n * move into it.\n *\n * Against `DropdownMenu`: a menu is a list of actions with menu semantics and\n * arrow-key navigation. A popover is free-form, and its contents Tab like the\n * rest of the page.\n *\n * @example\n * <Popover>\n *   <PopoverTrigger asChild><Button variant=\"secondary\">Filters</Button></PopoverTrigger>\n *   <PopoverContent label=\"Filters\">\n *     <Field label=\"Status\"><Select>…</Select></Field>\n *   </PopoverContent>\n * </Popover>\n */\nexport function PopoverContent({\n  label,\n  showClose = false,\n  className,\n  sideOffset = 8,\n  children,\n  ...rest\n}: PopoverContentProps) {\n  const container = useOverlayContainer()\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? undefined}>\n      <PopoverPrimitive.Content\n        collisionBoundary={container ?? undefined}\n        collisionPadding={8}\n        aria-label={label}\n        sideOffset={sideOffset}\n        data-m22-animated\n        className={cn(\n          'z-(--z-dropdown) w-72 rounded-(--radius) border border-(--rule-2) bg-(--paper) p-4',\n          'data-[state=open]:animate-[m22-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[m22-pop-out_var(--duration-fast)_var(--ease)] origin-(--radix-popper-transform-origin)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n        {showClose && (\n          <PopoverPrimitive.Close\n            aria-label=\"Close\"\n            className=\"absolute end-2 top-2 grid size-8 place-items-center rounded-(--radius-pill) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n          >\n            <X size={14} strokeWidth={1.5} aria-hidden />\n          </PopoverPrimitive.Close>\n        )}\n      </PopoverPrimitive.Content>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nexport default Popover\n"],"mappings":";AAuDM,SAmBM,KAnBN;AArDN,YAAY,sBAAsB;AAClC,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AAG7B,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AACxC,MAAM,gBAAgB,iBAAiB;AACvC,MAAM,eAAe,iBAAiB;AA+BtC,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,oBAAoB;AAEtC,SACE,oBAAC,iBAAiB,QAAjB,EAAwB,WAAW,aAAa,QAC/C;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,mBAAmB,aAAa;AAAA,MAChC,kBAAkB;AAAA,MAClB,cAAY;AAAA,MACZ;AAAA,MACA,qBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC,iBAAiB;AAAA,UAAjB;AAAA,YACC,cAAW;AAAA,YACX,WAAU;AAAA,YAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,QAC7C;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+interface ProgressProps extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {
+    /**
+     * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the
+     * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a
+     * screen reader is told "indeterminate" rather than a number that is a guess.
+     */
+    value?: number | null;
+    /** Names what is progressing. Required: a bare bar announces nothing. */
+    label: string;
+    /** Prints the percentage above the bar. Only meaningful when `value` is set. */
+    showValue?: boolean;
+}
+/**
+ * A bar that fills, or sweeps when the end is unknown.
+ *
+ * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no
+ * gradient and no glow, so the only thing carrying the reading is the boundary
+ * between the two.
+ *
+ * @example
+ * <Progress value={62} label="Uploading photos" showValue />
+ * @example
+ * <Progress label="Indexing" />
+ */
+declare function Progress({ value, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
+
+export { Progress, type ProgressProps, Progress as default };

package/dist/components/Progress/Progress.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/cn.js";
+function Progress({ value = null, label, showValue = false, className, ...rest }) {
+  const indeterminate = value === null || value === void 0;
+  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full flex-col gap-2", className), children: [
+    showValue && !indeterminate && /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mono-meta text-(--ink-3-aa)", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+        Math.round(clamped),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      {
+        value: indeterminate ? null : clamped,
+        "aria-label": label,
+        className: "relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)",
+        ...rest,
+        children: indeterminate ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-m22-animated": true,
+            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40"
+          }
+        ) : /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: "h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)",
+            style: { width: `${clamped}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+var Progress_default = Progress;
+export {
+  Progress,
+  Progress_default as default
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["'use client'\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /**\n   * 0–100. Omit (or pass `null`) when the duration is genuinely unknown — the\n   * bar then sweeps instead of filling, and Radix drops `aria-valuenow` so a\n   * screen reader is told \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /** Names what is progressing. Required: a bare bar announces nothing. */\n  label: string\n  /** Prints the percentage above the bar. Only meaningful when `value` is set. */\n  showValue?: boolean\n}\n\n/**\n * A bar that fills, or sweeps when the end is unknown.\n *\n * Flat: a track in `--stone`, a fill in `--ink`. The White Reset has no\n * gradient and no glow, so the only thing carrying the reading is the boundary\n * between the two.\n *\n * @example\n * <Progress value={62} label=\"Uploading photos\" showValue />\n * @example\n * <Progress label=\"Indexing\" />\n */\nexport function Progress({ value = null, label, showValue = false, className, ...rest }: ProgressProps) {\n  const indeterminate = value === null || value === undefined\n  const clamped = indeterminate ? 0 : Math.min(100, Math.max(0, value))\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2', className)}>\n      {showValue && !indeterminate && (\n        <div className=\"flex items-baseline justify-between mono-meta text-(--ink-3-aa)\">\n          <span>{label}</span>\n          <span className=\"tabular-nums\">{Math.round(clamped)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : clamped}\n        aria-label={label}\n        className=\"relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)\"\n        {...rest}\n      >\n        {indeterminate ? (\n          <span\n            data-m22-animated\n            // A quarter-width bar travelling the track. `transform` only, so it\n            // runs on the compositor and never triggers layout. `rtl:-scale-x-100`\n            // mirrors the whole motion rather than needing a second keyframe:\n            // in a right-to-left document the sweep has to run the other way, or\n            // it reads as progress running backwards.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[m22-sweep_1.4s_var(--ease)_infinite] motion-reduce:w-full motion-reduce:opacity-40\"\n          />\n        ) : (\n          <ProgressPrimitive.Indicator\n            // Width, not a translate. A `translateX(-N%)` fill has to be negated\n            // in a right-to-left document, and an inline style cannot carry a\n            // direction variant — so the bar grew from the wrong edge. Width\n            // grows from the inline start on its own, in either direction.\n            className=\"h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)\"\n            style={{ width: `${clamped}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAwCU,cACA,YADA;AAtCV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AA4BZ,SAAS,SAAS,EAAE,QAAQ,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,KAAK,GAAkB;AACtG,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAClD,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AAEpE,SACE,qBAAC,SAAI,WAAW,GAAG,8BAA8B,SAAS,GACvD;AAAA,iBAAa,CAAC,iBACb,qBAAC,SAAI,WAAU,mEACb;AAAA,0BAAC,UAAM,iBAAM;AAAA,MACb,qBAAC,UAAK,WAAU,gBAAgB;AAAA,aAAK,MAAM,OAAO;AAAA,QAAE;AAAA,SAAC;AAAA,OACvD;AAAA,IAEF;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC,OAAO,gBAAgB,OAAO;AAAA,QAC9B,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,qBAAiB;AAAA,YAMjB,WAAU;AAAA;AAAA,QACZ,IAEA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YAKC,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI;AAAA;AAAA,QAChC;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>;
+/**
+ * A set of mutually exclusive choices.
+ *
+ * Radix owns the roving tabindex, so the whole group is ONE tab stop and the
+ * arrow keys move between options — which is what the ARIA radiogroup pattern
+ * requires and what a stack of hand-rolled `<input type="radio">` wrappers
+ * usually gets wrong.
+ *
+ * @example
+ * <RadioGroup defaultValue="light" aria-label="Theme">
+ *   <RadioGroupItem value="light">Light</RadioGroupItem>
+ *   <RadioGroupItem value="dark">Dark</RadioGroupItem>
+ * </RadioGroup>
+ */
+declare function RadioGroup({ className, ...props }: RadioGroupProps): react.JSX.Element;
+interface RadioGroupItemProps extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {
+    /** The visible label. Rendered inside the `<label>` that wraps the control. */
+    children: ReactNode;
+}
+/**
+ * One option, and its label, as a single click target.
+ *
+ * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle
+ * is below every pointer-target guideline and is miserable on a phone. It is
+ * also what gives the control its accessible name: remove the wrapper and the
+ * radio has no name at all.
+ *
+ * Selection follows focus, which is the half of the pattern that makes a
+ * radiogroup usable from the keyboard: moving to an option chooses it, so
+ * nobody has to press an extra key to commit. That is implemented here rather
+ * than inherited, because the upstream primitive gates it on a flag cleared by
+ * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.
+ * Re-selecting an already-selected option is a no-op, so this stays correct
+ * even where the upstream path does fire.
+ */
+declare function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps): react.JSX.Element;
+
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RadioGroup as default };

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { useEffect, useRef } from "react";
+import { cn } from "../../lib/cn.js";
+const ARROW_GRACE_MS = 300;
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("flex flex-col gap-2.5", className), ...props });
+}
+function RadioGroupItem({ children, className, id, onFocus, ...props }) {
+  const arrowPressedAt = useRef(0);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (event.key.startsWith("Arrow")) arrowPressedAt.current = Date.now();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+  const selectOnArrowFocus = (event) => {
+    onFocus?.(event);
+    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click();
+  };
+  return /* @__PURE__ */ jsxs("label", { className: cn("flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)", className), children: [
+    /* @__PURE__ */ jsx(
+      RadioGroupPrimitive.Item,
+      {
+        id,
+        onFocus: selectOnArrowFocus,
+        className: "grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
+        ...props,
+        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "size-2.5 rounded-full bg-(--accent)" })
+      }
+    ),
+    children
+  ] });
+}
+var RadioGroup_default = RadioGroup;
+export {
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroup_default as default
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { useEffect, useRef, type ComponentProps, type FocusEvent, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * How recently an arrow key was pressed, in milliseconds, for selection to\n * still count as \"caused by\" it.\n *\n * A boolean cleared on `keyup` — which is how the upstream primitive tracks\n * this — loses the race: the roving focus moves through a React state update,\n * and by the time the commit lands and the element takes focus, a normal\n * keypress has already released. The result is a group whose arrow keys move\n * the outline and select nothing, which is half the ARIA radiogroup pattern\n * missing. A timestamp cannot be cleared out from under the focus handler.\n */\nconst ARROW_GRACE_MS = 300\n\nexport type RadioGroupProps = ComponentProps<typeof RadioGroupPrimitive.Root>\n\n/**\n * A set of mutually exclusive choices.\n *\n * Radix owns the roving tabindex, so the whole group is ONE tab stop and the\n * arrow keys move between options — which is what the ARIA radiogroup pattern\n * requires and what a stack of hand-rolled `<input type=\"radio\">` wrappers\n * usually gets wrong.\n *\n * @example\n * <RadioGroup defaultValue=\"light\" aria-label=\"Theme\">\n *   <RadioGroupItem value=\"light\">Light</RadioGroupItem>\n *   <RadioGroupItem value=\"dark\">Dark</RadioGroupItem>\n * </RadioGroup>\n */\nexport function RadioGroup({ className, ...props }: RadioGroupProps) {\n  return <RadioGroupPrimitive.Root className={cn('flex flex-col gap-2.5', className)} {...props} />\n}\n\nexport interface RadioGroupItemProps\n  extends Omit<ComponentProps<typeof RadioGroupPrimitive.Item>, 'children'> {\n  /** The visible label. Rendered inside the `<label>` that wraps the control. */\n  children: ReactNode\n}\n\n/**\n * One option, and its label, as a single click target.\n *\n * The `<label>` wraps both, so the whole row is clickable — a bare 18px circle\n * is below every pointer-target guideline and is miserable on a phone. It is\n * also what gives the control its accessible name: remove the wrapper and the\n * radio has no name at all.\n *\n * Selection follows focus, which is the half of the pattern that makes a\n * radiogroup usable from the keyboard: moving to an option chooses it, so\n * nobody has to press an extra key to commit. That is implemented here rather\n * than inherited, because the upstream primitive gates it on a flag cleared by\n * `keyup` and loses the race against its own focus move — see ARROW_GRACE_MS.\n * Re-selecting an already-selected option is a no-op, so this stays correct\n * even where the upstream path does fire.\n */\nexport function RadioGroupItem({ children, className, id, onFocus, ...props }: RadioGroupItemProps) {\n  const arrowPressedAt = useRef(0)\n\n  useEffect(() => {\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key.startsWith('Arrow')) arrowPressedAt.current = Date.now()\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => document.removeEventListener('keydown', onKeyDown)\n  }, [])\n\n  const selectOnArrowFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    onFocus?.(event)\n    if (Date.now() - arrowPressedAt.current < ARROW_GRACE_MS) event.currentTarget.click()\n  }\n\n  return (\n    <label className={cn('flex cursor-pointer items-center gap-2.5 text-sm text-(--ink-2)', className)}>\n      <RadioGroupPrimitive.Item\n        id={id}\n        onFocus={selectOnArrowFocus}\n        className=\"grid size-[18px] shrink-0 place-items-center rounded-full border border-(--rule-2) bg-(--paper) transition-colors duration-(--duration-fast) data-[state=checked]:border-(--accent) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"size-2.5 rounded-full bg-(--accent)\" />\n      </RadioGroupPrimitive.Item>\n      {children}\n    </label>\n  )\n}\n\nexport default RadioGroup\n"],"mappings":";AAoCS,cA0CL,YA1CK;AAlCT,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AAanB,MAAM,iBAAiB;AAkBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,SAAO,oBAAC,oBAAoB,MAApB,EAAyB,WAAW,GAAG,yBAAyB,SAAS,GAAI,GAAG,OAAO;AACjG;AAwBO,SAAS,eAAe,EAAE,UAAU,WAAW,IAAI,SAAS,GAAG,MAAM,GAAwB;AAClG,QAAM,iBAAiB,OAAO,CAAC;AAE/B,YAAU,MAAM;AACd,UAAM,YAAY,CAAC,UAAyB;AAC1C,UAAI,MAAM,IAAI,WAAW,OAAO,EAAG,gBAAe,UAAU,KAAK,IAAI;AAAA,IACvE;AACA,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM,SAAS,oBAAoB,WAAW,SAAS;AAAA,EAChE,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,CAAC,UAAyC;AACnE,cAAU,KAAK;AACf,QAAI,KAAK,IAAI,IAAI,eAAe,UAAU,eAAgB,OAAM,cAAc,MAAM;AAAA,EACtF;AAEA,SACE,qBAAC,WAAM,WAAW,GAAG,mEAAmE,SAAS,GAC/F;AAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC;AAAA,QACA,SAAS;AAAA,QACT,WAAU;AAAA,QACT,GAAG;AAAA,QAEJ,8BAAC,oBAAoB,WAApB,EAA8B,WAAU,uCAAsC;AAAA;AAAA,IACjF;AAAA,IACC;AAAA,KACH;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Names the region. Required, and not decoration: a scroll container is a
+     * keyboard stop, and an unnamed stop announces "group" and nothing else.
+     */
+    label: string;
+    orientation?: 'vertical' | 'horizontal' | 'both';
+}
+/**
+ * A box that scrolls, with a scrollbar that looks the same on every platform.
+ *
+ * The reason to reach for this over `overflow-auto` is not the scrollbar — it
+ * is that Radix keeps the viewport focusable and the bar operable, which a bare
+ * overflow container does not. A scrollable region whose contents are not
+ * themselves focusable is unreachable by keyboard: there is nothing to Tab to,
+ * so everything past the fold does not exist without a mouse.
+ *
+ * For a page-level or prose scroll, the `scroll-slim` utility is lighter and
+ * needs no component. This is for a bounded panel: a long option list, a log,
+ * a sidebar that outgrows its column.
+ *
+ * @example
+ * <ScrollArea label="Deploy log" className="h-48">…</ScrollArea>
+ */
+declare function ScrollArea({ label, orientation, className, children, ...props }: ScrollAreaProps): react.JSX.Element;
+
+export { ScrollArea, type ScrollAreaProps, ScrollArea as default };