@misoto22/folio 0.0.0 → 0.16.0

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,112 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/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",
+  previousLabel = "Previous page",
+  nextLabel = "Next page",
+  pageLabel = (page2) => `Page ${page2}`,
+  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": previousLabel,
+        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(RiArrowLeftSLine, { size: 16, "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-folio-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": pageLabel(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": nextLabel,
+        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(RiArrowRightSLine, { size: 16, "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 { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/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   * Names the two step controls.\n   *\n   * Each is a chevron and nothing else, so these strings are its entire\n   * accessible name — the same reason `AppShell` exposes `openLabel` and\n   * `closeLabel` rather than baking them in.\n   */\n  previousLabel?: string\n  nextLabel?: string\n  /**\n   * Names one numbered page.\n   *\n   * A function rather than a template, because the number does not sit in the\n   * same place in every language and neither does the noun around it —\n   * `\"Page 3\"`, `\"第 3 页\"`, `\"Seite 3\"`. The visible digit is the same either\n   * way; this is what a screen reader hears instead of a bare number.\n   */\n  pageLabel?: (page: number) => 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 * Every string a reader hears is a prop. The chevrons carry no text, so\n * `previousLabel` and `nextLabel` are the whole of those two controls' names,\n * and `pageLabel` is a function because \"Page 3\" is a phrase whose parts move\n * around between languages.\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  previousLabel = 'Previous page',\n  nextLabel = 'Next page',\n  pageLabel = (page) => `Page ${page}`,\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={previousLabel}\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        <RiArrowLeftSLine size={16} 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-folio-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={pageLabel(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={nextLabel}\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        <RiArrowRightSLine size={16} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":["page"]}

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 { RiCloseLine } from "@remixicon/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-folio-animated": true,
+      className: cn(
+        "z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 shadow-(--panel-lift) panel-blur",
+        "data-[state=open]:animate-[folio-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[folio-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(RiCloseLine, { size: 14, "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 { RiCloseLine } from '@remixicon/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-folio-animated\n        className={cn(\n          'z-(--z-dropdown) w-72 rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) p-4 shadow-(--panel-lift) panel-blur',\n          'data-[state=open]:animate-[folio-pop-in_var(--duration-fast)_var(--ease-out-expo)] data-[state=closed]:animate-[folio-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            <RiCloseLine size={14} 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,mBAAmB;AAE5B,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,uBAAmB;AAAA,MACnB,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,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,QACrC;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

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

@@ -0,0 +1,43 @@
+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' | 'max'> {
+    /**
+     * 0 to `max`, which is 100 unless you say otherwise. 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;
+    /**
+     * What `value` is measured against. 100 by default.
+     *
+     * The width is computed from it as well as announced from it. It used to be
+     * only announced: `max` reached Radix through `...rest` while the width was
+     * `value` clamped to 100, so `max={500}` with `value={100}` painted a full
+     * bar and told a screen reader "100 of 500". A max that is not a positive
+     * number is refused the way Radix refuses it — Radix warns, and both fall
+     * back to 100 rather than drawing one picture and announcing another.
+     */
+    max?: number;
+    /** 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, max, label, showValue, className, ...rest }: ProgressProps): react.JSX.Element;
+
+export { Progress, type ProgressProps, Progress as default };

package/dist/components/Progress/Progress.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/cn.js";
+import { warnBlankName } from "../../lib/warn.js";
+function Progress({
+  value = null,
+  max,
+  label,
+  showValue = false,
+  className,
+  ...rest
+}) {
+  warnBlankName("Progress", "label", label, "the progressbar is announced with no name and its percentage describes nothing");
+  const indeterminate = value === null || value === void 0;
+  const ceiling = typeof max === "number" && !Number.isNaN(max) && max > 0 ? max : 100;
+  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value));
+  const percent = bounded / ceiling * 100;
+  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(percent),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ProgressPrimitive.Root,
+      {
+        value: indeterminate ? null : bounded,
+        max,
+        "aria-label": label,
+        className: "relative h-1 w-full overflow-hidden rounded-(--radius-pill) bg-(--stone)",
+        ...rest,
+        children: indeterminate ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-folio-animated": true,
+            className: "absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[folio-sweep_1.4s_var(--ease)_infinite]"
+          }
+        ) : /* @__PURE__ */ jsx(
+          ProgressPrimitive.Indicator,
+          {
+            className: "h-full rounded-(--radius-pill) bg-(--accent) transition-[width] duration-(--duration-slow) ease-(--ease-out-expo)",
+            style: { width: `${percent}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+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'\nimport { warnBlankName } from '../../lib/warn'\n\nexport interface ProgressProps\n  extends Omit<ComponentProps<typeof ProgressPrimitive.Root>, 'value' | 'max'> {\n  /**\n   * 0 to `max`, which is 100 unless you say otherwise. Omit (or pass `null`)\n   * when the duration is genuinely unknown — the bar then sweeps instead of\n   * filling, and Radix drops `aria-valuenow` so a screen reader is told\n   * \"indeterminate\" rather than a number that is a guess.\n   */\n  value?: number | null\n  /**\n   * What `value` is measured against. 100 by default.\n   *\n   * The width is computed from it as well as announced from it. It used to be\n   * only announced: `max` reached Radix through `...rest` while the width was\n   * `value` clamped to 100, so `max={500}` with `value={100}` painted a full\n   * bar and told a screen reader \"100 of 500\". A max that is not a positive\n   * number is refused the way Radix refuses it — Radix warns, and both fall\n   * back to 100 rather than drawing one picture and announcing another.\n   */\n  max?: number\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({\n  value = null,\n  max,\n  label,\n  showValue = false,\n  className,\n  ...rest\n}: ProgressProps) {\n  warnBlankName('Progress', 'label', label, 'the progressbar is announced with no name and its percentage describes nothing')\n  const indeterminate = value === null || value === undefined\n  // Radix's own test for a usable max, so the fallback below is the same\n  // fallback it applies — and `max` is forwarded raw, so Radix still prints the\n  // warning rather than this component swallowing a bad prop quietly.\n  const ceiling = typeof max === 'number' && !Number.isNaN(max) && max > 0 ? max : 100\n  const bounded = indeterminate ? 0 : Math.min(ceiling, Math.max(0, value))\n  const percent = (bounded / ceiling) * 100\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(percent)}%</span>\n        </div>\n      )}\n      <ProgressPrimitive.Root\n        value={indeterminate ? null : bounded}\n        max={max}\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-folio-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            //\n            // Nothing overrides it under `motion-reduce`, and that is the fix\n            // rather than an omission: it used to become `w-full` at 40%\n            // opacity, which is the shape of a FINISHED bar at rest, so a\n            // reader who asked for less motion was told the operation was done.\n            // Still, it is a quarter of the track at the inline start — the\n            // same answer Spinner gives, where a ring that has stopped turning\n            // still reads as unfinished because it is not a whole circle.\n            className=\"absolute inset-y-0 start-0 w-1/4 rounded-(--radius-pill) bg-(--accent) rtl:-scale-x-100 motion-safe:animate-[folio-sweep_1.4s_var(--ease)_infinite]\"\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: `${percent}%` }}\n          />\n        )}\n      </ProgressPrimitive.Root>\n    </div>\n  )\n}\n\nexport default Progress\n"],"mappings":";AAkEU,cACA,YADA;AAhEV,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AACnB,SAAS,qBAAqB;AAwCvB,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,gBAAc,YAAY,SAAS,OAAO,gFAAgF;AAC1H,QAAM,gBAAgB,UAAU,QAAQ,UAAU;AAIlD,QAAM,UAAU,OAAO,QAAQ,YAAY,CAAC,OAAO,MAAM,GAAG,KAAK,MAAM,IAAI,MAAM;AACjF,QAAM,UAAU,gBAAgB,IAAI,KAAK,IAAI,SAAS,KAAK,IAAI,GAAG,KAAK,CAAC;AACxE,QAAM,UAAW,UAAU,UAAW;AAEtC,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;AAAA,QACA,cAAY;AAAA,QACZ,WAAU;AAAA,QACT,GAAG;AAAA,QAEH,0BACC;AAAA,UAAC;AAAA;AAAA,YACC,uBAAmB;AAAA,YAcnB,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,49 @@
+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.
+ *
+ * Inside a `Field` the group takes its name from that label, by pointing back
+ * at it: the root is a `<div role="radiogroup">` and `<label for>` does not bind
+ * to one, so the words above it click through no more than a `<legend>` does.
+ * Standing alone, it still needs an `aria-label` of its own — an unnamed group
+ * is three unlabelled radios.
+ *
+ * @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,53 @@
+"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";
+import { useFieldControl } from "../Field/field-control.js";
+const ARROW_GRACE_MS = 300;
+function RadioGroup({ className, ...props }) {
+  const field = useFieldControl();
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      "aria-labelledby": named ? void 0 : field?.labelId,
+      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'\nimport { useFieldControl } from '../Field/field-control'\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 * Inside a `Field` the group takes its name from that label, by pointing back\n * at it: the root is a `<div role=\"radiogroup\">` and `<label for>` does not bind\n * to one, so the words above it click through no more than a `<legend>` does.\n * Standing alone, it still needs an `aria-label` of its own — an unnamed group\n * is three unlabelled radios.\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  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  return (\n    <RadioGroupPrimitive.Root\n      aria-labelledby={named ? undefined : field?.labelId}\n      className={cn('flex flex-col gap-2.5', className)}\n      {...props}\n    />\n  )\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":";AA+CI,cA+CA,YA/CA;AA7CJ,YAAY,yBAAyB;AACrC,SAAS,WAAW,cAAoE;AACxF,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAahC,MAAM,iBAAiB;AAwBhB,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AACnE,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAEzE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAC5C,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;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,46 @@
+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;
+    /**
+     * Which axes get a bar — and therefore which axes scroll at all. Radix sets
+     * the viewport's overflow from the bars that are mounted, so an axis without
+     * one is `hidden`: what is past that edge is not merely unmarked, it is
+     * unreachable by every key and every gesture.
+     *
+     * `both` is the default for that reason. Narrow it only when clipping the
+     * other axis is the thing you meant.
+     */
+    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.
+ *
+ * Both axes scroll unless a caller says otherwise. The old vertical default
+ * read as a statement about which bar to draw and was in fact a statement about
+ * which half of the content existed: Radix sets the viewport's overflow from
+ * the mounted bars, so the axis without one was `hidden` and everything past it
+ * was unreachable — silently, and with the content perfectly well rendered.
+ *
+ * @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 };

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/cn.js";
+function ScrollArea({
+  label,
+  orientation = "both",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      type: "hover",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            tabIndex: 0,
+            role: "region",
+            "aria-label": label,
+            className: "relative size-full rounded-[inherit]",
+            children
+          }
+        ),
+        (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx(Bar, { orientation: "vertical" }),
+        (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx(Bar, { orientation: "horizontal" }),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function Bar({ orientation }) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      orientation,
+      className: cn(
+        "flex touch-none select-none p-0.5 transition-colors duration-(--duration-fast)",
+        orientation === "vertical" ? "h-full w-2" : "h-2 flex-col"
+      ),
+      children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-(--radius-pill) bg-(--rule-2)" })
+    }
+  );
+}
+var ScrollArea_default = ScrollArea;
+export {
+  ScrollArea,
+  ScrollArea_default as default
+};
+//# sourceMappingURL=ScrollArea.js.map

package/dist/components/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["'use client'\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport type { ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Names the region. Required, and not decoration: a scroll container is a\n   * keyboard stop, and an unnamed stop announces \"group\" and nothing else.\n   */\n  label: string\n  /**\n   * Which axes get a bar — and therefore which axes scroll at all. Radix sets\n   * the viewport's overflow from the bars that are mounted, so an axis without\n   * one is `hidden`: what is past that edge is not merely unmarked, it is\n   * unreachable by every key and every gesture.\n   *\n   * `both` is the default for that reason. Narrow it only when clipping the\n   * other axis is the thing you meant.\n   */\n  orientation?: 'vertical' | 'horizontal' | 'both'\n}\n\n/**\n * A box that scrolls, with a scrollbar that looks the same on every platform.\n *\n * The reason to reach for this over `overflow-auto` is not the scrollbar — it\n * is that Radix keeps the viewport focusable and the bar operable, which a bare\n * overflow container does not. A scrollable region whose contents are not\n * themselves focusable is unreachable by keyboard: there is nothing to Tab to,\n * so everything past the fold does not exist without a mouse.\n *\n * For a page-level or prose scroll, the `scroll-slim` utility is lighter and\n * needs no component. This is for a bounded panel: a long option list, a log,\n * a sidebar that outgrows its column.\n *\n * Both axes scroll unless a caller says otherwise. The old vertical default\n * read as a statement about which bar to draw and was in fact a statement about\n * which half of the content existed: Radix sets the viewport's overflow from\n * the mounted bars, so the axis without one was `hidden` and everything past it\n * was unreachable — silently, and with the content perfectly well rendered.\n *\n * @example\n * <ScrollArea label=\"Deploy log\" className=\"h-48\">…</ScrollArea>\n */\nexport function ScrollArea({\n  label,\n  orientation = 'both',\n  className,\n  children,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      type=\"hover\"\n      className={cn('relative overflow-hidden', className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        tabIndex={0}\n        role=\"region\"\n        aria-label={label}\n        // Positioned, so an absolutely-positioned descendant — an `sr-only`\n        // label, a pinned marker — resolves against the thing that scrolls and\n        // travels with the content, rather than against the root and hanging\n        // still over it.\n        className=\"relative size-full rounded-[inherit]\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      {(orientation === 'vertical' || orientation === 'both') && <Bar orientation=\"vertical\" />}\n      {(orientation === 'horizontal' || orientation === 'both') && <Bar orientation=\"horizontal\" />}\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction Bar({ orientation }: { orientation: 'vertical' | 'horizontal' }) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      orientation={orientation}\n      className={cn(\n        'flex touch-none select-none p-0.5 transition-colors duration-(--duration-fast)',\n        orientation === 'vertical' ? 'h-full w-2' : 'h-2 flex-col',\n      )}\n    >\n      <ScrollAreaPrimitive.Thumb className=\"relative flex-1 rounded-(--radius-pill) bg-(--rule-2)\" />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport default ScrollArea\n"],"mappings":";AAsDI,SAKE,KALF;AApDJ,YAAY,yBAAyB;AAErC,SAAS,UAAU;AA0CZ,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC,oBAAoB;AAAA,UAApB;AAAA,YACC,UAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY;AAAA,YAKZ,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA,SACE,gBAAgB,cAAc,gBAAgB,WAAW,oBAAC,OAAI,aAAY,YAAW;AAAA,SACrF,gBAAgB,gBAAgB,gBAAgB,WAAW,oBAAC,OAAI,aAAY,cAAa;AAAA,QAC3F,oBAAC,oBAAoB,QAApB,EAA2B;AAAA;AAAA;AAAA,EAC9B;AAEJ;AAEA,SAAS,IAAI,EAAE,YAAY,GAA+C;AACxE,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,aAAa,eAAe;AAAA,MAC9C;AAAA,MAEA,8BAAC,oBAAoB,OAApB,EAA0B,WAAU,yDAAwD;AAAA;AAAA,EAC/F;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}