@uisatin/ui 0.0.0-stage → 0.1.0

package/chunk-WTMZT3IT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/segmented-control.tsx"],"names":[],"mappings":"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","file":"chunk-WTMZT3IT.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { ToggleGroup } from 'radix-ui'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\nimport { useSlidingIndicator } from './sliding-indicator'\n\n/**\n * SegmentedControl, from the uiKit `segmented control` page: 2–5 segments that switch\n * views or filters in place. One segment is always selected; the selected pill slides under\n * the labels to the new segment, as in Tabs and Pagination (sliding-indicator.tsx: 300 ms,\n * the leading edge first): a white card with Shadow/sm in Light. Arrow keys move between segments.\n * Values 1:1 with the uiKit `_segmentedControl/item` (3080:20278) and `SegmentedControl` (3080:21247) sets.\n */\ntype Size = 'xs' | 'md' | 'lg'\ntype Shape = 'default' | 'rounded'\n\nexport interface SegmentedControlItem {\n  value: string\n  label: React.ReactNode\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\nexport interface SegmentedControlProps {\n  items: SegmentedControlItem[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  size?: Size\n  shape?: Shape\n  /** A 1px border-subtle outline around the track. */\n  border?: boolean\n  fullWidth?: boolean\n  /** Required when the segments have no visible text of their own. */\n  'aria-label'?: string\n  className?: string\n}\n\nconst track = cva('relative isolate inline-flex items-center gap-0.5 bg-bg-muted p-1', {\n  variants: {\n    shape: { default: 'rounded-lg', rounded: 'rounded-pill' },\n    border: { true: 'border border-border-subtle', false: '' },\n    fullWidth: { true: 'flex w-full', false: '' },\n  },\n})\n\nconst segment = cva(\n  [\n    'relative z-10 inline-flex items-center justify-center font-medium whitespace-nowrap text-text-muted select-none',\n    'transition-[color,background-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n    'satin-hover:text-text-default data-[state=on]:text-text-default',\n    'satin-pressed:bg-component-segmented-pressed satin-pressed:text-text-default',\n    'focus-visible:outline-none satin-focus:text-text-default satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n    'disabled:pointer-events-none disabled:text-text-subtle',\n    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:[stroke-width:1.875]',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-control-height-xs gap-1 px-2.5 text-sm [&_svg]:size-icon-size-sm',\n        md: 'h-control-height gap-1.5 px-3 text-sm [&_svg]:size-icon-size',\n        lg: 'h-control-height-lg gap-1.5 px-4 text-base [&_svg]:size-icon-size',\n      },\n      shape: { default: 'rounded-sm', rounded: 'rounded-pill' },\n      fullWidth: { true: 'flex-1', false: '' },\n    },\n  },\n)\n\nexport function SegmentedControl({\n  items,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  size = 'md',\n  shape = 'default',\n  border = false,\n  fullWidth = false,\n  className,\n  ...aria\n}: SegmentedControlProps) {\n  const [inner, setInner] = React.useState(defaultValue ?? items[0]?.value ?? '')\n  const value = valueProp ?? inner\n  const trackRef = React.useRef<HTMLDivElement>(null)\n  // The pill slides under the selected segment (sliding-indicator.tsx).\n  const pill = useSlidingIndicator(trackRef, '[data-state=\"on\"]', `${value}|${size}|${fullWidth}|${items.length}`)\n\n  return (\n    <ToggleGroup.Root\n      ref={trackRef}\n      type=\"single\"\n      value={value}\n      onValueChange={(next) => {\n        // A segmented control never ends up with nothing selected.\n        if (!next) return\n        setInner(next)\n        onValueChange?.(next)\n      }}\n      data-slot=\"segmented-control\"\n      className={cn(track({ shape, border, fullWidth }), className)}\n      {...aria}\n    >\n      <span\n        ref={pill.ref}\n        aria-hidden\n        className={cn(\n          'pointer-events-none absolute top-1 bottom-1 left-0 z-0 bg-component-segmented-selected opacity-0 [box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]',\n          shape === 'rounded' ? 'rounded-pill' : 'rounded-sm',\n        )}\n      />\n      {items.map((item) => (\n        <ToggleGroup.Item\n          key={item.value}\n          value={item.value}\n          disabled={item.disabled}\n          className={cn(\n            segment({ size, shape, fullWidth }),\n            // Unselected focus: bg/muted under the ring. Selected focus keeps the pill's fill.\n            'data-[state=off]:satin-focus:bg-bg-muted',\n            // Before the pill is measured (server render), the selected segment paints its own fill.\n            !pill.ready && 'data-[state=on]:bg-component-segmented-selected data-[state=on]:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]',\n          )}\n        >\n          {item.icon}\n          {item.label}\n        </ToggleGroup.Item>\n      ))}\n    </ToggleGroup.Root>\n  )\n}\n"]}

package/chunk-WX6BP5ZP.js

@@ -0,0 +1,39 @@
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var emptyStateVariants = cva(
+  "flex w-[350px] max-w-[560px] min-w-[min(320px,100%)] flex-col items-center gap-4 rounded-2xl px-4 pt-4 pb-5 text-center",
+  {
+    variants: {
+      border: {
+        ghost: "",
+        dashed: "border border-dashed border-border-default",
+        outline: "border border-border-default"
+      }
+    },
+    defaultVariants: { border: "ghost" }
+  }
+);
+function EmptyState({ className, border, title, description, icon, actions, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "empty-state", className: cn(emptyStateVariants({ border }), className), ...props, children: [
+    icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "flex shrink-0 items-center justify-center rounded-lg bg-bg-muted p-2.5 text-text-default [&_svg]:size-4 [&_svg]:[stroke-width:1.875]",
+        children: icon
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "w-full text-lg font-medium text-text-default", children: title }),
+      description && /* @__PURE__ */ jsx("p", { className: "w-full text-body-lg text-text-muted", children: description })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start justify-center gap-2", children: actions })
+  ] });
+}
+
+export { EmptyState, emptyStateVariants };
+//# sourceMappingURL=chunk-WX6BP5ZP.js.map
+//# sourceMappingURL=chunk-WX6BP5ZP.js.map

package/chunk-WX6BP5ZP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/empty-state.tsx"],"names":[],"mappings":";;;;;AAgBA,IAAM,kBAAA,GAAqB,GAAA;AAAA,EACzB,yHAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,MAAA,EAAQ;AAAA,QACN,KAAA,EAAO,EAAA;AAAA,QACP,MAAA,EAAQ,4CAAA;AAAA,QACR,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,MAAA,EAAQ,OAAA;AAAQ;AAEvC;AAaO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,MAAA,EAAQ,KAAA,EAAO,aAAa,IAAA,EAAM,OAAA,EAAS,GAAG,KAAA,EAAM,EAAoB;AAC9G,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,aAAA,EAAc,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,MAAA,EAAQ,CAAA,EAAG,SAAS,CAAA,EAAI,GAAG,KAAA,EACxF,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAW,IAAA;AAAA,QACX,SAAA,EAAU,sIAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAClE,WAAA,oBAAe,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,uCAAuC,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAClF,CAAA;AAAA,IACC,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mDAAmD,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EACxF,CAAA;AAEJ","file":"chunk-WX6BP5ZP.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\n\n/**\n * EmptyState, 1:1 with the uiKit `EmptyState` set (852:51897) and its `_buttonGroup`\n * (852:51922): a centred column 350 wide (320–560), padding 16 / 16 / 20, 16 apart, radius-2xl.\n *\n * - icon: a 16px glyph in text/default on a bg/muted tile, 10 padding, radius-lg (36 square).\n * - title in text/lg medium (16/24), description in Body/lg (14/21) text/muted, 8 apart, centred.\n * - actions: a row of Buttons 8 apart: Primary + Secondary, Secondary alone, or a Tertiary\n *   \"Learn more\" with a trailing arrow. Pass them as `<Button>` elements.\n * - border: ghost (none), dashed or outline, both 1px border/default.\n */\nconst emptyStateVariants = cva(\n  'flex w-[350px] max-w-[560px] min-w-[min(320px,100%)] flex-col items-center gap-4 rounded-2xl px-4 pt-4 pb-5 text-center',\n  {\n    variants: {\n      border: {\n        ghost: '',\n        dashed: 'border border-dashed border-border-default',\n        outline: 'border border-border-default',\n      },\n    },\n    defaultVariants: { border: 'ghost' },\n  },\n)\n\nexport interface EmptyStateProps\n  extends Omit<React.ComponentProps<'div'>, 'title'>,\n    VariantProps<typeof emptyStateVariants> {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** A 16px icon, e.g. from iconoir-react. */\n  icon?: React.ReactNode\n  /** One or two Buttons. */\n  actions?: React.ReactNode\n}\n\nexport function EmptyState({ className, border, title, description, icon, actions, ...props }: EmptyStateProps) {\n  return (\n    <div data-slot=\"empty-state\" className={cn(emptyStateVariants({ border }), className)} {...props}>\n      {icon && (\n        <div\n          aria-hidden\n          className=\"flex shrink-0 items-center justify-center rounded-lg bg-bg-muted p-2.5 text-text-default [&_svg]:size-4 [&_svg]:[stroke-width:1.875]\"\n        >\n          {icon}\n        </div>\n      )}\n      <div className=\"flex w-full flex-col items-center gap-2\">\n        <p className=\"w-full text-lg font-medium text-text-default\">{title}</p>\n        {description && <p className=\"w-full text-body-lg text-text-muted\">{description}</p>}\n      </div>\n      {actions && <div className=\"flex flex-wrap items-start justify-center gap-2\">{actions}</div>}\n    </div>\n  )\n}\n\nexport { emptyStateVariants }\n"]}

package/chunk-X3PQANZO.js

@@ -0,0 +1,255 @@
+import { Checkbox } from './chunk-FDKIX4DC.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function SortIcon({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": true,
+      className: cn("shrink-0 text-text-muted", direction === "desc" && "rotate-180"),
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M7.00025 11.4515L7.00025 2.54852M11.2044 6.7527L7.00025 2.54852L2.79608 6.7527",
+          stroke: "currentColor",
+          strokeWidth: "1.09375",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var cellHover = {
+  first: [
+    "group-hover/row:rounded-l-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "group-data-[force=hover]/row:rounded-l-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+  ].join(" "),
+  middle: [
+    "group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+  ].join(" "),
+  last: [
+    "group-hover/row:rounded-r-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]",
+    "group-data-[force=hover]/row:rounded-r-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]"
+  ].join(" "),
+  only: [
+    "group-hover/row:rounded-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]",
+    "group-data-[force=hover]/row:rounded-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]"
+  ].join(" ")
+};
+var rowHover = "hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]";
+function compare(a, b) {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a ?? "").localeCompare(String(b ?? ""), void 0, { numeric: true });
+}
+function Table({
+  columns,
+  rows,
+  selectable = false,
+  zebra = false,
+  overflow = "fit",
+  onSortChange,
+  defaultSort = null,
+  manualSort = false,
+  selected: selectedProp,
+  onSelectedChange,
+  label,
+  className,
+  ...props
+}) {
+  const [sort, setSort] = React.useState(defaultSort);
+  const [selectedState, setSelectedState] = React.useState([]);
+  const selected = selectedProp ?? selectedState;
+  const setSelected = (ids) => {
+    if (selectedProp === void 0) setSelectedState(ids);
+    onSelectedChange?.(ids);
+  };
+  const cycleSort = (key) => {
+    const next = sort?.key !== key ? { key, direction: "asc" } : sort.direction === "asc" ? { key, direction: "desc" } : null;
+    setSort(next);
+    onSortChange?.(next);
+  };
+  const sortedRows = React.useMemo(() => {
+    if (!sort || manualSort) return rows;
+    const s = [...rows].sort((a, b) => compare(a[sort.key], b[sort.key]));
+    return sort.direction === "desc" ? s.reverse() : s;
+  }, [rows, sort, manualSort]);
+  const scroll = overflow === "scroll";
+  const allSelected = rows.length > 0 && rows.every((r) => selected.includes(r.id));
+  const someSelected = !allSelected && rows.some((r) => selected.includes(r.id));
+  const totalFr = columns.reduce((n, c) => n + (c.width ?? 1), 0);
+  const colWidth = (c) => scroll ? `${c.width ?? 160}px` : `${(c.width ?? 1) / totalFr * 100}%`;
+  const tableWidth = scroll ? columns.reduce((n, c) => n + (c.width ?? 160), selectable ? 24 : 0) : void 0;
+  const viewport = React.useRef(null);
+  const [bar, setBar] = React.useState({ size: 1, offset: 0, atEnd: true });
+  React.useEffect(() => {
+    const el = viewport.current;
+    if (!scroll || !el) return;
+    const update = () => {
+      const size = el.clientWidth / el.scrollWidth;
+      const max = el.scrollWidth - el.clientWidth;
+      setBar({ size, offset: max > 0 ? el.scrollLeft / el.scrollWidth : 0, atEnd: el.scrollLeft >= max - 1 });
+    };
+    update();
+    el.addEventListener("scroll", update, { passive: true });
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", update);
+      ro.disconnect();
+    };
+  }, [scroll, columns, rows]);
+  const stickyFirst = (bg) => scroll ? cn("sticky z-[1]", bg) : "";
+  const firstDataLeft = selectable ? "left-6" : "left-0";
+  const cellPosition = (index, count) => count === 1 ? cellHover.only : index === 0 ? cellHover.first : index === count - 1 ? cellHover.last : cellHover.middle;
+  const cellCount = columns.length + (selectable ? 1 : 0);
+  const table = /* @__PURE__ */ jsxs(
+    "table",
+    {
+      "aria-label": label,
+      className: "w-full table-fixed border-separate border-spacing-0 text-left",
+      style: tableWidth ? { width: tableWidth, minWidth: "100%" } : { minWidth: columns.length * 120 + (selectable ? 24 : 0) },
+      children: [
+        /* @__PURE__ */ jsxs("colgroup", { children: [
+          selectable && /* @__PURE__ */ jsx("col", { style: { width: 24 } }),
+          columns.map((c) => /* @__PURE__ */ jsx("col", { style: { width: colWidth(c) } }, c.key))
+        ] }),
+        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-component-table-header", children: [
+          selectable && /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              className: cn("border-b border-border-subtle py-2 pl-2 align-middle", stickyFirst("left-0 bg-component-table-header")),
+              children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  "aria-label": "Select all rows",
+                  checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                  onCheckedChange: (v) => setSelected(v === true ? rows.map((r) => r.id) : []),
+                  className: "align-middle"
+                }
+              )
+            }
+          ),
+          columns.map((c, i) => {
+            const active = sort?.key === c.key ? sort.direction : void 0;
+            const labelClass = "inline-flex max-w-full items-center gap-2.5 overflow-hidden rounded-md px-2 py-[3px] text-sm leading-[18px] font-medium whitespace-nowrap text-text-muted";
+            return /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "col",
+                "aria-sort": c.sortable ? active === "asc" ? "ascending" : active === "desc" ? "descending" : "none" : void 0,
+                className: cn(
+                  "h-8 overflow-hidden border-b border-border-subtle py-1 pr-2 pl-1 align-middle font-medium",
+                  c.align === "right" && "text-right",
+                  i === 0 && stickyFirst(cn(firstDataLeft, "bg-component-table-header"))
+                ),
+                children: c.sortable ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => cycleSort(c.key),
+                    className: cn(
+                      labelClass,
+                      "transition-colors duration-(--duration-fast) ease-(--ease-out) focus-visible:outline-none",
+                      "satin-hover:bg-bg-hover satin-focus:bg-bg-hover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: c.header }),
+                      active && /* @__PURE__ */ jsx(SortIcon, { direction: active })
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: labelClass, children: c.header })
+              },
+              c.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx("tbody", { children: sortedRows.map((row, r) => {
+          const isSelected = selected.includes(row.id);
+          const rowBg = zebra && r % 2 === 1 ? "bg-component-table-zebra" : "bg-bg-card";
+          return /* @__PURE__ */ jsxs("tr", { "data-state": isSelected ? "selected" : void 0, className: cn("group/row", rowBg, rowHover), children: [
+            selectable && /* @__PURE__ */ jsx("td", { className: cn("py-2 pl-2 align-middle", cellPosition(0, cellCount), stickyFirst(cn("left-0", rowBg))), children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                "aria-label": `Select row ${r + 1}`,
+                checked: isSelected,
+                onCheckedChange: (v) => setSelected(v === true ? [...selected, row.id] : selected.filter((id) => id !== row.id)),
+                className: "align-middle"
+              }
+            ) }),
+            columns.map((c, i) => {
+              const content = c.cell ? c.cell(row) : row[c.key];
+              const plain = typeof content === "string" || typeof content === "number";
+              return /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: cn(
+                    "h-10 overflow-hidden py-2 pr-2.5 pl-3 align-middle text-body leading-(--text-body--line-height) text-text-default",
+                    c.align === "right" && "text-right",
+                    cellPosition(i + (selectable ? 1 : 0), cellCount),
+                    i === 0 && stickyFirst(cn(firstDataLeft, rowBg))
+                  ),
+                  children: plain ? /* @__PURE__ */ jsx("span", { className: "block truncate", children: content }) : /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-1 overflow-hidden", c.align === "right" && "justify-end"), children: content })
+                },
+                c.key
+              );
+            })
+          ] }, row.id);
+        }) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "table",
+      className: cn("relative overflow-hidden rounded-xl border border-border-subtle bg-bg-card", className),
+      ...props,
+      children: scroll ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: viewport,
+              tabIndex: 0,
+              role: "region",
+              "aria-label": label ? `${label}, scrolls sideways` : "Table, scrolls sideways",
+              className: "overflow-x-auto [scrollbar-width:none] focus-visible:outline-none [&::-webkit-scrollbar]:hidden",
+              children: table
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-r from-bg-card-fade to-bg-card",
+                "transition-opacity duration-(--duration-fast) ease-(--ease-out)",
+                bar.atEnd && "opacity-0"
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "px-3 pt-1.5 pb-1", children: /* @__PURE__ */ jsx("div", { className: "relative h-1.5 overflow-hidden rounded-full bg-bg-muted", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-y-0 left-0 rounded-full bg-border-strong",
+            style: { width: `${bar.size * 100}%`, transform: `translateX(${bar.offset / bar.size * 100}%)` }
+          }
+        ) }) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "overflow-x-auto overscroll-x-contain", children: table })
+    }
+  );
+}
+
+export { Table };
+//# sourceMappingURL=chunk-X3PQANZO.js.map
+//# sourceMappingURL=chunk-X3PQANZO.js.map

package/chunk-X3PQANZO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/table.tsx"],"names":[],"mappings":"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","file":"chunk-X3PQANZO.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\nimport { Checkbox } from './checkbox'\n\n/**\n * Table, 1:1 with the uiKit `Table` set (3411:21610) and its parts: table/header (3410:17835),\n * table/row (3410:18040), table/cell (3409:17760), table/headerCell (3409:17734) and\n * table/checkboxCell (3409:17703). A real `<table>`.\n *\n * - Frame: bg/card, 1px border-subtle, radius-xl, clipped.\n * - Header row: component/table-header fill, 1px border-subtle under it. Header cells pad\n *   4 / 8 / 4 / 4 around a label button (8px sides, 3px top and bottom, radius-md, medium\n *   13/18, text-muted); hover tints the button bg-hover. Sortable headers cycle\n *   none → asc → desc with a 14px arrow 10px after the label, and set aria-sort.\n * - Cells: 12 left, 10 right, 8 top and bottom, at least 40 high, regular 13/19.5, clipped\n *   with an ellipsis. Chips and other nodes sit in a row 4px apart.\n * - Checkbox column: 8px left padding, no right padding; the header box selects all.\n * - zebra: every second row on component/table-zebra.\n * - Row hover lifts the row: bg-hover, 1px border-strong edge, radius-xl, shadow sm.\n * - overflow=\"fit\": columns are proportional (`width` is an fr weight). overflow=\"scroll\":\n *   columns keep their pixel `width`, the first column stays in place, a 64px fade marks\n *   the clipped edge and a 6px scrollbar (bg-muted track, border-strong thumb) sits below.\n *\n * The row edge is drawn with inset shadows on the cells, since table rows can't take a\n * border radius. `data-force=\"hover\"` on a `<tr>` shows the hover state.\n */\n\nexport type Sort = { key: string; direction: 'asc' | 'desc' } | null\n\nexport type Row = { id: string } & Record<string, unknown>\n\nexport interface Column<R extends Row = Row> {\n  key: string\n  header: React.ReactNode\n  /** fr weight with overflow=\"fit\" (default 1), pixels with overflow=\"scroll\" (default 160). */\n  width?: number\n  sortable?: boolean\n  /** Renders the cell; defaults to the row's value at `key`. */\n  cell?: (row: R) => React.ReactNode\n  align?: 'left' | 'right'\n}\n\nexport interface TableProps<R extends Row = Row> extends Omit<React.ComponentProps<'div'>, 'children'> {\n  columns: Column<R>[]\n  rows: R[]\n  selectable?: boolean\n  zebra?: boolean\n  overflow?: 'fit' | 'scroll'\n  /** Called with the new sort; rows are sorted by value unless `manualSort` is set. */\n  onSortChange?: (sort: Sort) => void\n  defaultSort?: Sort\n  /** Leave rows in the order given (sort them yourself in onSortChange). */\n  manualSort?: boolean\n  selected?: string[]\n  onSelectedChange?: (ids: string[]) => void\n  /** Accessible name of the table. */\n  label?: string\n}\n\n/** The Figma sort arrow, 14 at 1.09. Pointing down for descending. */\nfunction SortIcon({ direction }: { direction: 'asc' | 'desc' }) {\n  return (\n    <svg\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      fill=\"none\"\n      aria-hidden\n      className={cn('shrink-0 text-text-muted', direction === 'desc' && 'rotate-180')}\n    >\n      <path\n        d=\"M7.00025 11.4515L7.00025 2.54852M11.2044 6.7527L7.00025 2.54852L2.79608 6.7527\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.09375\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n// Hover styles for the cells of a hovered (or data-force=\"hover\") row. Written out in full so\n// Tailwind sees every class.\nconst cellHover = {\n  first: [\n    'group-hover/row:rounded-l-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n    'group-data-[force=hover]/row:rounded-l-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n  ].join(' '),\n  middle: [\n    'group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n    'group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n  ].join(' '),\n  last: [\n    'group-hover/row:rounded-r-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n    'group-data-[force=hover]/row:rounded-r-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_-1px_0_0_var(--border-strong),inset_0_1px_0_var(--border-strong),inset_0_-1px_0_var(--border-strong)]',\n  ].join(' '),\n  only: [\n    'group-hover/row:rounded-xl group-hover/row:bg-bg-hover group-hover/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]',\n    'group-data-[force=hover]/row:rounded-xl group-data-[force=hover]/row:bg-bg-hover group-data-[force=hover]/row:[box-shadow:inset_0_0_0_1px_var(--border-strong)]',\n  ].join(' '),\n}\n\n// Shadow sm under a hovered row (Figma: 0 1 1 and 0 1 1.5 in effect/shadow-sm).\nconst rowHover =\n  'hover:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))] data-[force=hover]:[filter:drop-shadow(0_1px_1px_var(--effect-shadow-sm))_drop-shadow(0_1px_1.5px_var(--effect-shadow-sm))]'\n\nfunction compare(a: unknown, b: unknown) {\n  if (typeof a === 'number' && typeof b === 'number') return a - b\n  return String(a ?? '').localeCompare(String(b ?? ''), undefined, { numeric: true })\n}\n\nexport function Table<R extends Row = Row>({\n  columns,\n  rows,\n  selectable = false,\n  zebra = false,\n  overflow = 'fit',\n  onSortChange,\n  defaultSort = null,\n  manualSort = false,\n  selected: selectedProp,\n  onSelectedChange,\n  label,\n  className,\n  ...props\n}: TableProps<R>) {\n  const [sort, setSort] = React.useState<Sort>(defaultSort)\n  const [selectedState, setSelectedState] = React.useState<string[]>([])\n  const selected = selectedProp ?? selectedState\n  const setSelected = (ids: string[]) => {\n    if (selectedProp === undefined) setSelectedState(ids)\n    onSelectedChange?.(ids)\n  }\n\n  const cycleSort = (key: string) => {\n    const next: Sort =\n      sort?.key !== key ? { key, direction: 'asc' } : sort.direction === 'asc' ? { key, direction: 'desc' } : null\n    setSort(next)\n    onSortChange?.(next)\n  }\n\n  const sortedRows = React.useMemo(() => {\n    if (!sort || manualSort) return rows\n    const s = [...rows].sort((a, b) => compare(a[sort.key], b[sort.key]))\n    return sort.direction === 'desc' ? s.reverse() : s\n  }, [rows, sort, manualSort])\n\n  const scroll = overflow === 'scroll'\n  const allSelected = rows.length > 0 && rows.every((r) => selected.includes(r.id))\n  const someSelected = !allSelected && rows.some((r) => selected.includes(r.id))\n\n  // Column widths: fr weights as percentages, or fixed pixels when scrolling.\n  const totalFr = columns.reduce((n, c) => n + (c.width ?? 1), 0)\n  const colWidth = (c: Column<R>) => (scroll ? `${c.width ?? 160}px` : `${((c.width ?? 1) / totalFr) * 100}%`)\n  const tableWidth = scroll ? columns.reduce((n, c) => n + (c.width ?? 160), selectable ? 24 : 0) : undefined\n\n  // The custom scrollbar and the edge fade follow the viewport's scroll position.\n  const viewport = React.useRef<HTMLDivElement>(null)\n  const [bar, setBar] = React.useState({ size: 1, offset: 0, atEnd: true })\n  React.useEffect(() => {\n    const el = viewport.current\n    if (!scroll || !el) return\n    const update = () => {\n      const size = el.clientWidth / el.scrollWidth\n      const max = el.scrollWidth - el.clientWidth\n      setBar({ size, offset: max > 0 ? el.scrollLeft / el.scrollWidth : 0, atEnd: el.scrollLeft >= max - 1 })\n    }\n    update()\n    el.addEventListener('scroll', update, { passive: true })\n    const ro = new ResizeObserver(update)\n    ro.observe(el)\n    return () => {\n      el.removeEventListener('scroll', update)\n      ro.disconnect()\n    }\n  }, [scroll, columns, rows])\n\n  // The leading column(s) stay put while the rest scroll.\n  const stickyFirst = (bg: string) => (scroll ? cn('sticky z-[1]', bg) : '')\n  const firstDataLeft = selectable ? 'left-6' : 'left-0'\n\n  const cellPosition = (index: number, count: number) =>\n    count === 1 ? cellHover.only : index === 0 ? cellHover.first : index === count - 1 ? cellHover.last : cellHover.middle\n  const cellCount = columns.length + (selectable ? 1 : 0)\n\n  const table = (\n    <table\n      aria-label={label}\n      className=\"w-full table-fixed border-separate border-spacing-0 text-left\"\n      // With overflow=\"fit\" the columns keep at least 120px each, so a phone scrolls instead of crushing them.\n      style={tableWidth ? { width: tableWidth, minWidth: '100%' } : { minWidth: columns.length * 120 + (selectable ? 24 : 0) }}\n    >\n      <colgroup>\n        {selectable && <col style={{ width: 24 }} />}\n        {columns.map((c) => (\n          <col key={c.key} style={{ width: colWidth(c) }} />\n        ))}\n      </colgroup>\n      <thead>\n        <tr className=\"bg-component-table-header\">\n          {selectable && (\n            <th\n              scope=\"col\"\n              className={cn('border-b border-border-subtle py-2 pl-2 align-middle', stickyFirst('left-0 bg-component-table-header'))}\n            >\n              <Checkbox\n                aria-label=\"Select all rows\"\n                checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n                onCheckedChange={(v) => setSelected(v === true ? rows.map((r) => r.id) : [])}\n                className=\"align-middle\"\n              />\n            </th>\n          )}\n          {columns.map((c, i) => {\n            const active = sort?.key === c.key ? sort.direction : undefined\n            const labelClass =\n              'inline-flex max-w-full items-center gap-2.5 overflow-hidden rounded-md px-2 py-[3px] text-sm leading-[18px] font-medium whitespace-nowrap text-text-muted'\n            return (\n              <th\n                key={c.key}\n                scope=\"col\"\n                aria-sort={c.sortable ? (active === 'asc' ? 'ascending' : active === 'desc' ? 'descending' : 'none') : undefined}\n                className={cn(\n                  'h-8 overflow-hidden border-b border-border-subtle py-1 pr-2 pl-1 align-middle font-medium',\n                  c.align === 'right' && 'text-right',\n                  i === 0 && stickyFirst(cn(firstDataLeft, 'bg-component-table-header')),\n                )}\n              >\n                {c.sortable ? (\n                  <button\n                    type=\"button\"\n                    onClick={() => cycleSort(c.key)}\n                    className={cn(\n                      labelClass,\n                      'transition-colors duration-(--duration-fast) ease-(--ease-out) focus-visible:outline-none',\n                      'satin-hover:bg-bg-hover satin-focus:bg-bg-hover satin-focus:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n                    )}\n                  >\n                    <span className=\"truncate\">{c.header}</span>\n                    {active && <SortIcon direction={active} />}\n                  </button>\n                ) : (\n                  <span className={labelClass}>{c.header}</span>\n                )}\n              </th>\n            )\n          })}\n        </tr>\n      </thead>\n      <tbody>\n        {sortedRows.map((row, r) => {\n          const isSelected = selected.includes(row.id)\n          const rowBg = zebra && r % 2 === 1 ? 'bg-component-table-zebra' : 'bg-bg-card'\n          return (\n            <tr key={row.id} data-state={isSelected ? 'selected' : undefined} className={cn('group/row', rowBg, rowHover)}>\n              {selectable && (\n                <td className={cn('py-2 pl-2 align-middle', cellPosition(0, cellCount), stickyFirst(cn('left-0', rowBg)))}>\n                  <Checkbox\n                    aria-label={`Select row ${r + 1}`}\n                    checked={isSelected}\n                    onCheckedChange={(v) =>\n                      setSelected(v === true ? [...selected, row.id] : selected.filter((id) => id !== row.id))\n                    }\n                    className=\"align-middle\"\n                  />\n                </td>\n              )}\n              {columns.map((c, i) => {\n                const content = c.cell ? c.cell(row) : (row[c.key] as React.ReactNode)\n                const plain = typeof content === 'string' || typeof content === 'number'\n                return (\n                  <td\n                    key={c.key}\n                    className={cn(\n                      'h-10 overflow-hidden py-2 pr-2.5 pl-3 align-middle text-body leading-(--text-body--line-height) text-text-default',\n                      c.align === 'right' && 'text-right',\n                      cellPosition(i + (selectable ? 1 : 0), cellCount),\n                      i === 0 && stickyFirst(cn(firstDataLeft, rowBg)),\n                    )}\n                  >\n                    {plain ? (\n                      <span className=\"block truncate\">{content}</span>\n                    ) : (\n                      <div className={cn('flex min-w-0 items-center gap-1 overflow-hidden', c.align === 'right' && 'justify-end')}>\n                        {content}\n                      </div>\n                    )}\n                  </td>\n                )\n              })}\n            </tr>\n          )\n        })}\n      </tbody>\n    </table>\n  )\n\n  return (\n    <div\n      data-slot=\"table\"\n      className={cn('relative overflow-hidden rounded-xl border border-border-subtle bg-bg-card', className)}\n      {...props}\n    >\n      {scroll ? (\n        <>\n          <div className=\"relative\">\n            <div\n              ref={viewport}\n              tabIndex={0}\n              role=\"region\"\n              aria-label={label ? `${label}, scrolls sideways` : 'Table, scrolls sideways'}\n              className=\"overflow-x-auto [scrollbar-width:none] focus-visible:outline-none [&::-webkit-scrollbar]:hidden\"\n            >\n              {table}\n            </div>\n            <div\n              aria-hidden\n              className={cn(\n                'pointer-events-none absolute inset-y-0 right-0 w-16 bg-linear-to-r from-bg-card-fade to-bg-card',\n                'transition-opacity duration-(--duration-fast) ease-(--ease-out)',\n                bar.atEnd && 'opacity-0',\n              )}\n            />\n          </div>\n          <div aria-hidden className=\"px-3 pt-1.5 pb-1\">\n            <div className=\"relative h-1.5 overflow-hidden rounded-full bg-bg-muted\">\n              <div\n                className=\"absolute inset-y-0 left-0 rounded-full bg-border-strong\"\n                style={{ width: `${bar.size * 100}%`, transform: `translateX(${(bar.offset / bar.size) * 100}%)` }}\n              />\n            </div>\n          </div>\n        </>\n      ) : (\n        <div className=\"overflow-x-auto overscroll-x-contain\">{table}</div>\n      )}\n    </div>\n  )\n}\n"]}

package/chunk-XILQ7GXE.js

@@ -0,0 +1,66 @@
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { Xmark } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var cardVariants = cva(
+  "relative flex w-[405px] max-w-full flex-col overflow-clip rounded-2xl border border-border-default bg-bg-card",
+  {
+    variants: {
+      size: {
+        md: "[--card-pad:calc(var(--spacing)*4)]",
+        sm: "[--card-pad:calc(var(--spacing)*3)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function Card({
+  className,
+  size,
+  title,
+  description,
+  footer,
+  onClose,
+  closeLabel = "Close",
+  children,
+  ...props
+}) {
+  const titleId = React.useId();
+  const hasHeader = title != null || description != null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "card",
+      role: title != null ? "group" : void 0,
+      "aria-labelledby": title != null ? titleId : void 0,
+      className: cn(cardVariants({ size }), className),
+      ...props,
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs("div", { "data-slot": "card-header", className: cn("flex flex-col gap-0.5 px-(--card-pad) pt-(--card-pad)", onClose && "pr-10"), children: [
+          title != null && /* @__PURE__ */ jsx("div", { id: titleId, className: "text-base leading-[14px] font-medium tracking-normal text-text-default", children: title }),
+          description != null && /* @__PURE__ */ jsx("p", { className: "text-body text-text-muted", children: description })
+        ] }),
+        children != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-body", className: "flex flex-col gap-2 p-(--card-pad)", children }),
+        footer != null && /* @__PURE__ */ jsx("div", { "data-slot": "card-footer", className: "flex items-center gap-2 p-(--card-pad)", children: footer }),
+        onClose && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "tertiary",
+            iconOnly: true,
+            "aria-label": closeLabel,
+            onClick: onClose,
+            className: "absolute top-[7px] right-[7px]",
+            children: /* @__PURE__ */ jsx(Xmark, { "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Card, cardVariants };
+//# sourceMappingURL=chunk-XILQ7GXE.js.map
+//# sourceMappingURL=chunk-XILQ7GXE.js.map

package/chunk-XILQ7GXE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/card.tsx"],"names":[],"mappings":";;;;;;;AAoBA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,+GAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,qCAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAAK;AAElC;AAYO,SAAS,IAAA,CAAK;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,OAAA;AAAA,EACb,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,MAAM,UAAgB,KAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,SAAA,GAAY,KAAA,IAAS,IAAA,IAAQ,WAAA,IAAe,IAAA;AAClD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,IAAA,EAAM,KAAA,IAAS,IAAA,GAAO,OAAA,GAAU,MAAA;AAAA,MAChC,iBAAA,EAAiB,KAAA,IAAS,IAAA,GAAO,OAAA,GAAU,MAAA;AAAA,MAC3C,WAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC9C,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,SAAI,WAAA,EAAU,aAAA,EAAc,WAAW,EAAA,CAAG,uDAAA,EAAyD,OAAA,IAAW,OAAO,CAAA,EACnH,QAAA,EAAA;AAAA,UAAA,KAAA,IAAS,wBACR,GAAA,CAAC,KAAA,EAAA,EAAI,IAAI,OAAA,EAAS,SAAA,EAAU,0EACzB,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,eAAe,IAAA,oBAAQ,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,6BAA6B,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EAChF,CAAA;AAAA,QAED,QAAA,IAAY,wBACX,GAAA,CAAC,KAAA,EAAA,EAAI,aAAU,WAAA,EAAY,SAAA,EAAU,sCAClC,QAAA,EACH,CAAA;AAAA,QAED,MAAA,IAAU,wBACT,GAAA,CAAC,KAAA,EAAA,EAAI,aAAU,aAAA,EAAc,SAAA,EAAU,0CACpC,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,QAED,OAAA,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,UAAA;AAAA,YACR,QAAA,EAAQ,IAAA;AAAA,YACR,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS,OAAA;AAAA,YACT,SAAA,EAAU,gCAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACrB;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-XILQ7GXE.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Xmark } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\n/**\n * Card, 1:1 with the uiKit `Card` set (1122:20156): bg/card, 1px border/default, radius-2xl (16),\n * no shadow, 405 wide by default. Three stacked sections with no gap between them:\n *\n * - header: title in Label/lg (14/14 medium), description in text/sm muted, 2px apart.\n *   Padding 16 / 16 / 0 on md, 12 / 12 / 0 on sm (no bottom padding: the body's top padding\n *   is the space under it).\n * - body (children): 16 padding on md, 12 on sm, children 8 apart.\n * - footer: same padding as the body; its items sit in a row, 8 apart.\n *\n * `onClose` adds a tertiary 28px icon button 7px from the top-right corner.\n */\nconst cardVariants = cva(\n  'relative flex w-[405px] max-w-full flex-col overflow-clip rounded-2xl border border-border-default bg-bg-card',\n  {\n    variants: {\n      size: {\n        md: '[--card-pad:calc(var(--spacing)*4)]',\n        sm: '[--card-pad:calc(var(--spacing)*3)]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport interface CardProps extends Omit<React.ComponentProps<'div'>, 'title'>, VariantProps<typeof cardVariants> {\n  title?: React.ReactNode\n  description?: React.ReactNode\n  footer?: React.ReactNode\n  /** Shows the close button. */\n  onClose?: () => void\n  /** Accessible name of the close button. */\n  closeLabel?: string\n}\n\nexport function Card({\n  className,\n  size,\n  title,\n  description,\n  footer,\n  onClose,\n  closeLabel = 'Close',\n  children,\n  ...props\n}: CardProps) {\n  const titleId = React.useId()\n  const hasHeader = title != null || description != null\n  return (\n    <div\n      data-slot=\"card\"\n      role={title != null ? 'group' : undefined}\n      aria-labelledby={title != null ? titleId : undefined}\n      className={cn(cardVariants({ size }), className)}\n      {...props}\n    >\n      {hasHeader && (\n        <div data-slot=\"card-header\" className={cn('flex flex-col gap-0.5 px-(--card-pad) pt-(--card-pad)', onClose && 'pr-10')}>\n          {title != null && (\n            <div id={titleId} className=\"text-base leading-[14px] font-medium tracking-normal text-text-default\">\n              {title}\n            </div>\n          )}\n          {description != null && <p className=\"text-body text-text-muted\">{description}</p>}\n        </div>\n      )}\n      {children != null && (\n        <div data-slot=\"card-body\" className=\"flex flex-col gap-2 p-(--card-pad)\">\n          {children}\n        </div>\n      )}\n      {footer != null && (\n        <div data-slot=\"card-footer\" className=\"flex items-center gap-2 p-(--card-pad)\">\n          {footer}\n        </div>\n      )}\n      {onClose && (\n        <Button\n          variant=\"tertiary\"\n          iconOnly\n          aria-label={closeLabel}\n          onClick={onClose}\n          className=\"absolute top-[7px] right-[7px]\"\n        >\n          <Xmark aria-hidden />\n        </Button>\n      )}\n    </div>\n  )\n}\n\nexport { cardVariants }\n"]}

package/chunk-XL75JRUA.js

@@ -0,0 +1,130 @@
+import { useFieldChrome, FieldChrome } from './chunk-72OCFAPT.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { CheckCircle } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function InputOTP({
+  length = 6,
+  groupSize = 3,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  pattern = /^\d$/,
+  label,
+  hint,
+  error,
+  success,
+  disabled,
+  autoFocus,
+  id,
+  name,
+  className,
+  ...props
+}) {
+  const chrome = useFieldChrome({ id, disabled, error: error ? true : void 0 });
+  const isError = typeof error === "string" || React.isValidElement(error);
+  const isSuccess = !chrome.invalid && Boolean(success);
+  const successMessage = isSuccess && success !== true ? success : null;
+  const message = isError ? error : successMessage ?? (chrome.invalid ? null : hint);
+  const messageId = message ? `${chrome.controlId}-message` : void 0;
+  const describedBy = [chrome.describedBy, messageId].filter(Boolean).join(" ") || void 0;
+  const [inner, setInner] = React.useState(defaultValue);
+  const value = (valueProp ?? inner).slice(0, length);
+  const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef(null);
+  const set = (raw) => {
+    const next = [...raw].filter((c) => pattern.test(c)).join("").slice(0, length);
+    if (valueProp == null) setInner(next);
+    onValueChange?.(next);
+    if (next.length === length && next !== value) onComplete?.(next);
+  };
+  const active = Math.min(value.length, length - 1);
+  const cells = Array.from({ length }, (_, i) => i);
+  return /* @__PURE__ */ jsxs(FieldChrome, { label, chrome, className: cn("w-fit", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "input-otp",
+        "data-disabled": chrome.disabled || void 0,
+        className: cn("relative flex w-fit items-center gap-2", chrome.disabled && "opacity-50"),
+        children: [
+          cells.map((i) => {
+            const isActive = focused && i === active;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              groupSize > 0 && i > 0 && i % groupSize === 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-px w-2 shrink-0 bg-border-strong" }),
+              /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  "aria-hidden": true,
+                  "data-active": isActive || void 0,
+                  className: cn(
+                    "relative grid size-9 shrink-0 place-items-center rounded-lg border bg-bg-field text-base leading-[21px] font-medium text-text-default",
+                    "[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]",
+                    "transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)",
+                    chrome.invalid ? "border-action-destructive-bg" : isSuccess ? "border-status-green-fg" : "border-border-default",
+                    isActive && (chrome.invalid ? "[box-shadow:0_0_0_2px_var(--action-destructive-glow)]" : isSuccess ? "[box-shadow:0_0_0_2px_var(--status-green-border)]" : "border-border-focus [box-shadow:0_0_0_2px_var(--action-focus-ring)]")
+                  ),
+                  children: [
+                    value[i] ?? "",
+                    isActive && value.length < length && /* @__PURE__ */ jsx("span", { className: "absolute h-[18px] w-px animate-[satin-caret_1s_steps(1)_infinite] bg-text-default" })
+                  ]
+                }
+              )
+            ] }, i);
+          }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: chrome.controlId,
+              name,
+              value,
+              onChange: (e) => set(e.target.value),
+              onFocus: (e) => {
+                setFocused(true);
+                const end = e.currentTarget.value.length;
+                requestAnimationFrame(() => inputRef.current?.setSelectionRange(end, end));
+              },
+              onBlur: () => setFocused(false),
+              onSelect: (e) => {
+                const end = e.currentTarget.value.length;
+                if (e.currentTarget.selectionStart !== end) e.currentTarget.setSelectionRange(end, end);
+              },
+              maxLength: length,
+              inputMode: pattern.test("5") && !pattern.test("a") ? "numeric" : "text",
+              autoComplete: "one-time-code",
+              autoFocus,
+              disabled: chrome.disabled,
+              "aria-invalid": chrome.invalid || void 0,
+              "aria-describedby": describedBy,
+              "aria-label": props["aria-label"],
+              spellCheck: false,
+              className: "absolute inset-0 w-full cursor-text bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:[box-shadow:none] disabled:cursor-not-allowed"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "p",
+      {
+        id: messageId,
+        "aria-live": "polite",
+        className: cn(
+          "flex min-h-5 w-0 min-w-full items-start gap-1.5 text-sm leading-5",
+          isError ? "text-action-destructive-bg" : successMessage ? "text-status-green-fg" : "text-text-muted"
+        ),
+        children: [
+          successMessage && /* @__PURE__ */ jsx(CheckCircle, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 [stroke-width:1.875]" }),
+          message
+        ]
+      }
+    )
+  ] });
+}
+
+export { InputOTP };
+//# sourceMappingURL=chunk-XL75JRUA.js.map
+//# sourceMappingURL=chunk-XL75JRUA.js.map

package/chunk-XL75JRUA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input-otp.tsx"],"names":[],"mappings":";;;;;;AAuDO,SAAS,QAAA,CAAS;AAAA,EACvB,MAAA,GAAS,CAAA;AAAA,EACT,SAAA,GAAY,CAAA;AAAA,EACZ,KAAA,EAAO,SAAA;AAAA,EACP,YAAA,GAAe,EAAA;AAAA,EACf,aAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA,GAAU,MAAA;AAAA,EACV,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,EAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAEhB,EAAA,MAAM,MAAA,GAAS,eAAe,EAAE,EAAA,EAAI,UAAU,KAAA,EAAO,KAAA,GAAQ,IAAA,GAAO,MAAA,EAAW,CAAA;AAC/E,EAAA,MAAM,OAAA,GAAU,OAAO,KAAA,KAAU,QAAA,IAAkB,qBAAe,KAAK,CAAA;AACvE,EAAA,MAAM,SAAA,GAAY,CAAC,MAAA,CAAO,OAAA,IAAW,QAAQ,OAAO,CAAA;AACpD,EAAA,MAAM,cAAA,GAAiB,SAAA,IAAa,OAAA,KAAY,IAAA,GAAQ,OAAA,GAA8B,IAAA;AACtF,EAAA,MAAM,UAAU,OAAA,GAAW,KAAA,GAA4B,cAAA,KAAmB,MAAA,CAAO,UAAU,IAAA,GAAO,IAAA,CAAA;AAClG,EAAA,MAAM,SAAA,GAAY,OAAA,GAAU,CAAA,EAAG,MAAA,CAAO,SAAS,CAAA,QAAA,CAAA,GAAa,MAAA;AAC5D,EAAA,MAAM,WAAA,GAAc,CAAC,MAAA,CAAO,WAAA,EAAa,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AACjF,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAS,YAAY,CAAA;AACrD,EAAA,MAAM,KAAA,GAAA,CAAS,SAAA,IAAa,KAAA,EAAO,KAAA,CAAM,GAAG,MAAM,CAAA;AAClD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,eAAS,KAAK,CAAA;AAClD,EAAA,MAAM,QAAA,GAAiB,aAAyB,IAAI,CAAA;AAEpD,EAAA,MAAM,GAAA,GAAM,CAAC,GAAA,KAAgB;AAC3B,IAAA,MAAM,OAAO,CAAC,GAAG,GAAG,CAAA,CAAE,MAAA,CAAO,CAAC,CAAA,KAAM,OAAA,CAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA,CAAE,KAAA,CAAM,GAAG,MAAM,CAAA;AAC7E,IAAA,IAAI,SAAA,IAAa,IAAA,EAAM,QAAA,CAAS,IAAI,CAAA;AACpC,IAAA,aAAA,GAAgB,IAAI,CAAA;AACpB,IAAA,IAAI,KAAK,MAAA,KAAW,MAAA,IAAU,IAAA,KAAS,KAAA,eAAoB,IAAI,CAAA;AAAA,EACjE,CAAA;AAEA,EAAA,MAAM,SAAS,IAAA,CAAK,GAAA,CAAI,KAAA,CAAM,MAAA,EAAQ,SAAS,CAAC,CAAA;AAChD,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,CAAK,EAAE,QAAO,EAAG,CAAC,CAAA,EAAG,CAAA,KAAM,CAAC,CAAA;AAEhD,EAAA,uBACE,IAAA,CAAC,eAAY,KAAA,EAAc,MAAA,EAAgB,WAAW,EAAA,CAAG,OAAA,EAAS,SAAS,CAAA,EACzE,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,WAAA;AAAA,QACV,eAAA,EAAe,OAAO,QAAA,IAAY,MAAA;AAAA,QAClC,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,MAAA,CAAO,YAAY,YAAY,CAAA;AAAA,QAEtF,QAAA,EAAA;AAAA,UAAA,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,KAAM;AAChB,YAAA,MAAM,QAAA,GAAW,WAAW,CAAA,KAAM,MAAA;AAClC,YAAA,uBACE,IAAA,CAAO,gBAAN,EACE,QAAA,EAAA;AAAA,cAAA,SAAA,GAAY,CAAA,IAAK,CAAA,GAAI,CAAA,IAAK,CAAA,GAAI,SAAA,KAAc,CAAA,oBAC3C,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAW,IAAA,EAAC,SAAA,EAAU,oCAAA,EAAqC,CAAA;AAAA,8BAEnE,IAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAW,IAAA;AAAA,kBACX,eAAa,QAAA,IAAY,MAAA;AAAA,kBACzB,SAAA,EAAW,EAAA;AAAA,oBACT,uIAAA;AAAA,oBACA,kDAAA;AAAA,oBACA,mFAAA;AAAA,oBACA,MAAA,CAAO,OAAA,GAAU,8BAAA,GAAiC,SAAA,GAAY,wBAAA,GAA2B,uBAAA;AAAA,oBACzF,QAAA,KACG,MAAA,CAAO,OAAA,GACJ,uDAAA,GACA,YACE,mDAAA,GACA,qEAAA;AAAA,mBACV;AAAA,kBAEC,QAAA,EAAA;AAAA,oBAAA,KAAA,CAAM,CAAC,CAAA,IAAK,EAAA;AAAA,oBACZ,YAAY,KAAA,CAAM,MAAA,GAAS,0BAC1B,GAAA,CAAC,MAAA,EAAA,EAAK,WAAU,mFAAA,EAAoF;AAAA;AAAA;AAAA;AAExG,aAAA,EAAA,EAxBmB,CAyBrB,CAAA;AAAA,UAEJ,CAAC,CAAA;AAAA,0BACD,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,QAAA;AAAA,cACL,IAAI,MAAA,CAAO,SAAA;AAAA,cACX,IAAA;AAAA,cACA,KAAA;AAAA,cACA,UAAU,CAAC,CAAA,KAAM,GAAA,CAAI,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,cACnC,OAAA,EAAS,CAAC,CAAA,KAAM;AACd,gBAAA,UAAA,CAAW,IAAI,CAAA;AAEf,gBAAA,MAAM,GAAA,GAAM,CAAA,CAAE,aAAA,CAAc,KAAA,CAAM,MAAA;AAClC,gBAAA,qBAAA,CAAsB,MAAM,QAAA,CAAS,OAAA,EAAS,iBAAA,CAAkB,GAAA,EAAK,GAAG,CAAC,CAAA;AAAA,cAC3E,CAAA;AAAA,cACA,MAAA,EAAQ,MAAM,UAAA,CAAW,KAAK,CAAA;AAAA,cAC9B,QAAA,EAAU,CAAC,CAAA,KAAM;AACf,gBAAA,MAAM,GAAA,GAAM,CAAA,CAAE,aAAA,CAAc,KAAA,CAAM,MAAA;AAClC,gBAAA,IAAI,CAAA,CAAE,cAAc,cAAA,KAAmB,GAAA,IAAO,aAAA,CAAc,iBAAA,CAAkB,KAAK,GAAG,CAAA;AAAA,cACxF,CAAA;AAAA,cACA,SAAA,EAAW,MAAA;AAAA,cACX,SAAA,EAAW,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAA,IAAK,CAAC,OAAA,CAAQ,IAAA,CAAK,GAAG,CAAA,GAAI,SAAA,GAAY,MAAA;AAAA,cACjE,YAAA,EAAa,eAAA;AAAA,cACb,SAAA;AAAA,cACA,UAAU,MAAA,CAAO,QAAA;AAAA,cACjB,cAAA,EAAc,OAAO,OAAA,IAAW,MAAA;AAAA,cAChC,kBAAA,EAAkB,WAAA;AAAA,cAClB,YAAA,EAAY,MAAM,YAAY,CAAA;AAAA,cAC9B,UAAA,EAAY,KAAA;AAAA,cACZ,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KACF;AAAA,oBAEA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,SAAA;AAAA,QACJ,WAAA,EAAU,QAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,mEAAA;AAAA,UACA,OAAA,GAAU,4BAAA,GAA+B,cAAA,GAAiB,sBAAA,GAAyB;AAAA,SACrF;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,cAAA,oBAAkB,GAAA,CAAC,WAAA,EAAA,EAAY,aAAA,EAAW,IAAA,EAAC,WAAU,6CAAA,EAA8C,CAAA;AAAA,UACnG;AAAA;AAAA;AAAA;AACH,GAAA,EACF,CAAA;AAEJ","file":"chunk-XL75JRUA.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { CheckCircle } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { FieldChrome, useFieldChrome } from './select'\n\n/**\n * InputOTP, 1:1 with the uiKit design (🆕 input otp & number): a one-time code as 36×36 cells,\n * 8px apart, in groups (3 + 3 by default) split by an 8px border/strong dash. Each cell wears the\n * field skin (bg/field, border/default, radius-lg, shadow xs); the cell the next digit goes into\n * gets the focus border and ring and a blinking caret while the field has focus. A digit is\n * text/base medium. With an error every cell turns action/destructive and the message replaces the\n * hint under the cells; label, hint and error sit like Input's. With `success` (the code checked\n * out) every cell's border turns status/green/fg and the message, in the same colour, leads with a\n * 16px check.\n *\n * The message never moves the cells: it is as wide as the cells (it wraps rather than widening\n * the field, which would shift a centred field sideways) and keeps a 20px line even while empty,\n * so swapping hint → \"Checking…\" → success or error leaves the code where it is.\n *\n * The field is as wide as its cells, so it centres wherever it is placed. Focus shows only on\n * the active cell: the real input carries no ring of its own.\n *\n * One real <input> lies over the cells (transparent text and caret), so typing, deleting, paste\n * and the browser's SMS autofill (`autocomplete=\"one-time-code\"`) all work as in any field, and\n * screen readers hear one text box. Only digits by default (`pattern`); `onComplete` fires when\n * every cell is filled.\n */\nexport interface InputOTPProps {\n  /** How many characters. */\n  length?: number\n  /** Cells per group; groups are split by a dash. 0 for one group. */\n  groupSize?: number\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Every cell is filled. */\n  onComplete?: (value: string) => void\n  /** Which characters are allowed. Digits by default. */\n  pattern?: RegExp\n  label?: React.ReactNode\n  hint?: React.ReactNode\n  /** An error message (replaces the hint), or `true` to mark the cells invalid without one. */\n  error?: React.ReactNode | boolean\n  /** The code checked out: a message under the cells (replaces the hint), or `true` for green cells alone. Ignored while there is an error. */\n  success?: React.ReactNode | boolean\n  disabled?: boolean\n  autoFocus?: boolean\n  id?: string\n  name?: string\n  'aria-label'?: string\n  className?: string\n}\n\nexport function InputOTP({\n  length = 6,\n  groupSize = 3,\n  value: valueProp,\n  defaultValue = '',\n  onValueChange,\n  onComplete,\n  pattern = /^\\d$/,\n  label,\n  hint,\n  error,\n  success,\n  disabled,\n  autoFocus,\n  id,\n  name,\n  className,\n  ...props\n}: InputOTPProps) {\n  // The message under the cells is drawn here, so the chrome only gets whether there is an error.\n  const chrome = useFieldChrome({ id, disabled, error: error ? true : undefined })\n  const isError = typeof error === 'string' || React.isValidElement(error)\n  const isSuccess = !chrome.invalid && Boolean(success)\n  const successMessage = isSuccess && success !== true ? (success as React.ReactNode) : null\n  const message = isError ? (error as React.ReactNode) : successMessage ?? (chrome.invalid ? null : hint)\n  const messageId = message ? `${chrome.controlId}-message` : undefined\n  const describedBy = [chrome.describedBy, messageId].filter(Boolean).join(' ') || undefined\n  const [inner, setInner] = React.useState(defaultValue)\n  const value = (valueProp ?? inner).slice(0, length)\n  const [focused, setFocused] = React.useState(false)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  const set = (raw: string) => {\n    const next = [...raw].filter((c) => pattern.test(c)).join('').slice(0, length)\n    if (valueProp == null) setInner(next)\n    onValueChange?.(next)\n    if (next.length === length && next !== value) onComplete?.(next)\n  }\n\n  const active = Math.min(value.length, length - 1)\n  const cells = Array.from({ length }, (_, i) => i)\n\n  return (\n    <FieldChrome label={label} chrome={chrome} className={cn('w-fit', className)}>\n      <div\n        data-slot=\"input-otp\"\n        data-disabled={chrome.disabled || undefined}\n        className={cn('relative flex w-fit items-center gap-2', chrome.disabled && 'opacity-50')}\n      >\n        {cells.map((i) => {\n          const isActive = focused && i === active\n          return (\n            <React.Fragment key={i}>\n              {groupSize > 0 && i > 0 && i % groupSize === 0 && (\n                <span aria-hidden className=\"h-px w-2 shrink-0 bg-border-strong\" />\n              )}\n              <span\n                aria-hidden\n                data-active={isActive || undefined}\n                className={cn(\n                  'relative grid size-9 shrink-0 place-items-center rounded-lg border bg-bg-field text-base leading-[21px] font-medium text-text-default',\n                  '[box-shadow:0_1px_2px_0_var(--effect-shadow-xs)]',\n                  'transition-[border-color,box-shadow] duration-(--duration-fast) ease-(--ease-out)',\n                  chrome.invalid ? 'border-action-destructive-bg' : isSuccess ? 'border-status-green-fg' : 'border-border-default',\n                  isActive &&\n                    (chrome.invalid\n                      ? '[box-shadow:0_0_0_2px_var(--action-destructive-glow)]'\n                      : isSuccess\n                        ? '[box-shadow:0_0_0_2px_var(--status-green-border)]'\n                        : 'border-border-focus [box-shadow:0_0_0_2px_var(--action-focus-ring)]'),\n                )}\n              >\n                {value[i] ?? ''}\n                {isActive && value.length < length && (\n                  <span className=\"absolute h-[18px] w-px animate-[satin-caret_1s_steps(1)_infinite] bg-text-default\" />\n                )}\n              </span>\n            </React.Fragment>\n          )\n        })}\n        <input\n          ref={inputRef}\n          id={chrome.controlId}\n          name={name}\n          value={value}\n          onChange={(e) => set(e.target.value)}\n          onFocus={(e) => {\n            setFocused(true)\n            // Always type at the end: the cells show where.\n            const end = e.currentTarget.value.length\n            requestAnimationFrame(() => inputRef.current?.setSelectionRange(end, end))\n          }}\n          onBlur={() => setFocused(false)}\n          onSelect={(e) => {\n            const end = e.currentTarget.value.length\n            if (e.currentTarget.selectionStart !== end) e.currentTarget.setSelectionRange(end, end)\n          }}\n          maxLength={length}\n          inputMode={pattern.test('5') && !pattern.test('a') ? 'numeric' : 'text'}\n          autoComplete=\"one-time-code\"\n          autoFocus={autoFocus}\n          disabled={chrome.disabled}\n          aria-invalid={chrome.invalid || undefined}\n          aria-describedby={describedBy}\n          aria-label={props['aria-label']}\n          spellCheck={false}\n          className=\"absolute inset-0 w-full cursor-text bg-transparent text-transparent caret-transparent outline-none selection:bg-transparent focus-visible:outline-none focus-visible:ring-0 focus-visible:[box-shadow:none] disabled:cursor-not-allowed\"\n        />\n      </div>\n      {/* 0 wide and min-w-full: as wide as the cells, never wider; min-h-5 holds the line while empty. */}\n      <p\n        id={messageId}\n        aria-live=\"polite\"\n        className={cn(\n          'flex min-h-5 w-0 min-w-full items-start gap-1.5 text-sm leading-5',\n          isError ? 'text-action-destructive-bg' : successMessage ? 'text-status-green-fg' : 'text-text-muted',\n        )}\n      >\n        {successMessage && <CheckCircle aria-hidden className=\"mt-0.5 size-4 shrink-0 [stroke-width:1.875]\" />}\n        {message}\n      </p>\n    </FieldChrome>\n  )\n}\n"]}