@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Menu.js

@@ -0,0 +1,185 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Menu as a } from "@base-ui/react/menu";
+import { cn as s } from "../lib/cn.js";
+import { Icon as x } from "./Icon.js";
+import { Spinner as f } from "./Spinner.js";
+import { ANCHORED_POPUP_SURFACE as b, ANCHORED_POPUP_MOTION as N } from "./overlay-shell.js";
+const v = [
+  "min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto",
+  b,
+  "p-1",
+  ...N
+], h = [
+  "dx-tap relative flex cursor-pointer select-none items-center gap-2.5 rounded-md py-2 pr-2.5 pl-8",
+  "text-sm text-secondary outline-none",
+  "transition-[var(--tx-colors)] duration-(--dur-instant)",
+  /* `data-highlighted` covers keyboard AND pointer, so the highlight never
+     splits into two competing states when the mouse moves mid-navigation. */
+  "data-highlighted:bg-surface-hover data-highlighted:text-primary",
+  "data-disabled:pointer-events-none data-disabled:not-data-loading:opacity-45",
+  "data-loading:cursor-wait"
+], k = [
+  "bg-control-subtle font-medium text-control-text",
+  "data-selected:data-highlighted:bg-control-subtle-hover"
+], I = [
+  "data-highlighted:bg-danger-subtle data-highlighted:text-danger-text",
+  "active:bg-danger-subtle-hover"
+];
+function z({
+  trigger: t,
+  side: r = "bottom",
+  align: n = "end",
+  open: o,
+  onOpenChange: i,
+  finalFocus: l,
+  className: c,
+  children: u
+}) {
+  return /* @__PURE__ */ d(a.Root, { open: o, onOpenChange: i, children: [
+    /* @__PURE__ */ e(a.Trigger, { render: t }),
+    /* @__PURE__ */ e(a.Portal, { children: /* @__PURE__ */ e(
+      a.Positioner,
+      {
+        side: r,
+        align: n,
+        sideOffset: 6,
+        className: "z-(--z-popover) outline-none",
+        children: /* @__PURE__ */ e(a.Popup, { finalFocus: l, className: s(v, c), children: u })
+      }
+    ) })
+  ] });
+}
+const y = [
+  "text-warning-text",
+  "data-highlighted:bg-warning-subtle data-highlighted:text-warning-text",
+  "active:bg-warning-subtle-hover"
+];
+function G({
+  className: t,
+  icon: r,
+  selected: n,
+  tone: o = "neutral",
+  description: i,
+  loading: l = !1,
+  disabled: c,
+  children: u,
+  ref: g,
+  ...p
+}) {
+  const m = l ? /* @__PURE__ */ e(f, { size: "sm" }) : r;
+  return /* @__PURE__ */ d(
+    a.Item,
+    {
+      ref: g,
+      disabled: c || l,
+      "data-loading": l || void 0,
+      "aria-busy": l || void 0,
+      "data-selected": n || void 0,
+      className: s(
+        h,
+        o === "danger" && I,
+        o === "warning" && y,
+        n && k,
+        i && "items-start",
+        t
+      ),
+      ...p,
+      children: [
+        m && /* @__PURE__ */ e("span", { className: s("absolute left-2 flex size-4 items-center justify-center", i && "top-2.5"), children: m }),
+        i ? /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ e("span", { children: u }),
+          /* @__PURE__ */ e("span", { className: "text-xs leading-snug text-tertiary", children: i })
+        ] }) : u
+      ]
+    }
+  );
+}
+function T({ className: t, children: r, ...n }) {
+  return /* @__PURE__ */ e(a.RadioGroup, { className: s("flex flex-col", t), ...n, children: r });
+}
+function _({ className: t, children: r, ref: n, ...o }) {
+  return /* @__PURE__ */ d(
+    a.RadioItem,
+    {
+      ref: n,
+      className: s(
+        h,
+        "data-checked:bg-control-subtle data-checked:font-medium data-checked:text-control-text",
+        /* Checked AND highlighted — see SELECTED_ITEM. Base UI spells this
+           state `data-checked` on a radio item, so the stacked rule has to be
+           written out again rather than reused. */
+        "data-checked:data-highlighted:bg-control-subtle-hover",
+        t
+      ),
+      ...o,
+      children: [
+        /* @__PURE__ */ e(a.RadioItemIndicator, { className: "absolute left-2 grid place-items-center", children: /* @__PURE__ */ e(x, { name: "check", size: "sm", className: "animate-scale-in text-control-text" }) }),
+        r
+      ]
+    }
+  );
+}
+function C({
+  className: t,
+  icon: r,
+  description: n,
+  indicator: o,
+  children: i,
+  ref: l,
+  ...c
+}) {
+  return /* @__PURE__ */ d(
+    a.CheckboxItem,
+    {
+      ref: l,
+      className: s(h, "group/toggle items-start pr-3", t),
+      ...c,
+      children: [
+        r && /* @__PURE__ */ e("span", { className: "absolute top-2.5 left-2 flex size-4 items-center justify-center", children: r }),
+        /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ e("span", { children: i }),
+          n && /* @__PURE__ */ e("span", { className: "text-xs leading-snug text-tertiary", children: n })
+        ] }),
+        o ? /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "mt-px flex shrink-0 items-center", children: o }) : /* @__PURE__ */ e(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: s(
+              "mt-0.5 flex h-4 w-7 shrink-0 items-center rounded-full border border-border bg-surface-raised p-px",
+              "transition-[var(--tx-colors)] duration-(--dur-fast)",
+              "group-data-checked/toggle:border-control group-data-checked/toggle:bg-control"
+            ),
+            children: /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "block size-3 rounded-full bg-tertiary transition-[var(--tx-colors),transform,translate] duration-(--dur-fast)",
+                  "group-data-checked/toggle:translate-x-3 group-data-checked/toggle:bg-surface"
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function A({ label: t, children: r }) {
+  return /* @__PURE__ */ d(a.Group, { children: [
+    t && /* @__PURE__ */ e(a.GroupLabel, { className: "px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase", children: t }),
+    r
+  ] });
+}
+function S({ className: t }) {
+  return /* @__PURE__ */ e(a.Separator, { className: s("my-1 h-px bg-border-subtle", t) });
+}
+export {
+  z as Menu,
+  C as MenuCheckboxItem,
+  A as MenuGroup,
+  G as MenuItem,
+  T as MenuRadioGroup,
+  _ as MenuRadioItem,
+  S as MenuSeparator
+};
+//# sourceMappingURL=Menu.js.map

package/dist/components/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sources":["../../src/components/Menu.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { Menu as BaseMenu } from \"@base-ui/react/menu\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\nimport { Spinner } from \"./Spinner\";\nimport { ANCHORED_POPUP_MOTION, ANCHORED_POPUP_SURFACE } from \"./overlay-shell\";\n\n/* ----------------------------------------------------------------------------\n   Menu — a popup of actions or a single-choice setting.\n\n   The popup animates from `--transform-origin`, which Base UI's positioner\n   sets from the side it actually landed on. That matters more than it sounds:\n   near a viewport edge the menu flips, and a fixed origin then makes it grow\n   from the wrong corner — pointing away from the control that opened it.\n\n   Exit is faster and does not scale back down. Re-animating geometry on\n   dismissal makes every close feel like an undo.\n   -------------------------------------------------------------------------- */\n\nconst POPUP = [\n  \"min-w-[var(--anchor-width)] max-h-[var(--available-height)] overflow-y-auto\",\n  ANCHORED_POPUP_SURFACE,\n  \"p-1\",\n  ...ANCHORED_POPUP_MOTION,\n];\n\nconst ITEM = [\n  \"dx-tap relative flex cursor-pointer select-none items-center gap-2.5 rounded-md py-2 pr-2.5 pl-8\",\n  \"text-sm text-secondary outline-none\",\n  \"transition-[var(--tx-colors)] duration-(--dur-instant)\",\n  /* `data-highlighted` covers keyboard AND pointer, so the highlight never\n     splits into two competing states when the mouse moves mid-navigation. */\n  \"data-highlighted:bg-surface-hover data-highlighted:text-primary\",\n  \"data-disabled:pointer-events-none data-disabled:not-data-loading:opacity-45\",\n  \"data-loading:cursor-wait\",\n];\n\n/* The CURRENT choice in a menu, and that choice under the pointer.\n\n   Two fills rather than one: with only the first, moving onto the checked row\n   repaints it with the plain highlight above and it reads as unchecked while\n   you point at it. Both conditions are stacked on the second rule so it\n   out-specifies the single-condition highlight — class order does not decide\n   it. */\nconst SELECTED_ITEM = [\n  \"bg-control-subtle font-medium text-control-text\",\n  \"data-selected:data-highlighted:bg-control-subtle-hover\",\n];\n\n/* THE DESTRUCTIVE ROW — `Button`'s `ghost-danger` variant, translated onto the\n   attribute a menu actually uses.\n\n   TWO DECISIONS ARE INHERITED FROM `Button`, DELIBERATELY, so a \"Delete\" row\n   and a \"Delete\" button are the same control wearing different geometry.\n\n   QUIET AT REST. The resting colour is the ordinary row's; the danger arrives\n   on approach. A menu whose last item is red before you touch it turns the\n   whole popup into a warning, and spends that signal on the fifteen times\n   somebody opened the menu for something else. `Button` documents the same\n   choice at length and this is the same argument, not a second one.\n\n   THE TINT IS A BACKGROUND, NOT ONLY A HUE. A filled plate changes luminance,\n   so the row still reads as armed for someone who cannot separate red from\n   grey — for whom a hue rotation is the entire signal and therefore no signal.\n\n   ONE DECISION IS NOT INHERITED, AND IT IS THE POINT OF PUTTING THIS HERE.\n   `Button` keys on `hover:` and `focus-visible:` because those are the two ways\n   a button is approached. A menu row is approached a third way — arrowing onto\n   it moves the highlight WITHOUT moving the pointer and WITHOUT taking DOM\n   focus, since Base UI keeps focus on the popup and marks the active row with\n   `data-highlighted`. So a consumer copying `hover:bg-danger-subtle` across\n   gets a delete row that is only ever marked for a mouse. `data-highlighted`\n   covers pointer and keyboard in one attribute, which is why `ITEM` above uses\n   it for the neutral highlight too.\n\n   Stacked ordering matters: this list is merged AFTER `ITEM`, so twMerge\n   displaces the neutral `data-highlighted:` fill rather than leaving two rules\n   under one modifier for stylesheet order to decide between. */\nconst DANGER_ITEM = [\n  \"data-highlighted:bg-danger-subtle data-highlighted:text-danger-text\",\n  \"active:bg-danger-subtle-hover\",\n];\n\nexport interface MenuProps {\n  /** The control that opens the menu. */\n  trigger: ReactNode;\n  /** Which side of the trigger the popup prefers. */\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  /** How the popup lines up along that side. */\n  align?: \"start\" | \"center\" | \"end\";\n  /**\n   * Controlled open state.\n   *\n   * Not decoration: a menu that advertises a keyboard shortcut has to know\n   * when it is open in order to honour it, and a caller cannot listen for a\n   * key that only applies while a popup it cannot see is showing.\n   */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Where focus goes when the menu closes. Default: back to the trigger. A function runs at every close and answers\n   * `true` for that default, `false` to leave focus where the closing action put it, or an element to focus. A row\n   * whose action removes the trigger or moves focus on (a delete, a rename field) answers `false`, or focus would be\n   * pulled back to a trigger that is gone, or off the field the action just focused.\n   */\n  finalFocus?: boolean | (() => boolean | HTMLElement | null);\n  className?: string;\n  children: ReactNode;\n}\n\nexport function Menu({\n  trigger,\n  side = \"bottom\",\n  align = \"end\",\n  open,\n  onOpenChange,\n  finalFocus,\n  className,\n  children,\n}: MenuProps) {\n  return (\n    <BaseMenu.Root open={open} onOpenChange={onOpenChange}>\n      <BaseMenu.Trigger render={trigger as React.ReactElement} />\n      <BaseMenu.Portal>\n        <BaseMenu.Positioner\n          side={side}\n          align={align}\n          sideOffset={6}\n          className=\"z-(--z-popover) outline-none\"\n        >\n          <BaseMenu.Popup finalFocus={finalFocus} className={cn(POPUP, className)}>{children}</BaseMenu.Popup>\n        </BaseMenu.Positioner>\n      </BaseMenu.Portal>\n    </BaseMenu.Root>\n  );\n}\n\n/**\n * Neutral, destructive, or a caution.\n *\n * Not a palette: a menu row is picked, not read, so each tone beyond neutral\n * is a property of the ACTION. `danger` says \"this deletes something\";\n * `warning` says \"this works, but not in the state the thing is in right\n * now\" (promote docs before the plan is complete, publish a draft). `Badge`\n * has seven because a badge's whole job is to carry a state.\n */\nexport type MenuItemTone = \"neutral\" | \"danger\" | \"warning\";\n\n/* THE CAUTION ROW. Unlike `DANGER_ITEM` it is NOT quiet at rest, and that is\n   deliberate rather than inconsistent: a destructive action is dangerous\n   always, so its colour waits for approach to avoid turning the popup into an\n   alarm; a caution is a fact about the CURRENT STATE of the thing the row acts\n   on (\"the plan is not finished\"), so a reader choosing between rows needs it\n   BEFORE they approach. It is carried by the amber label AND the caller's\n   warning glyph in the icon slot, so colour alone is never the signal.\n   Merged after `ITEM` for the same twMerge-displaces-the-neutral-highlight\n   reason as `DANGER_ITEM`. */\nconst WARNING_ITEM = [\n  \"text-warning-text\",\n  \"data-highlighted:bg-warning-subtle data-highlighted:text-warning-text\",\n  \"active:bg-warning-subtle-hover\",\n];\n\nexport interface MenuItemProps extends Omit<BaseMenu.Item.Props, \"className\"> {\n  className?: string;\n  /**\n   * Leading icon, positioned absolutely at the row's left edge, inside the\n   * `pl-8` the row's own padding already reserves for it.\n   *\n   * A ROW WITH AN ICON MUST USE THIS, NOT AN INLINE `<Icon>` AMONG `children`.\n   * `ITEM`'s `pl-8` exists so an icon rendered here lines up consistently\n   * across every row in the same popup — an icon laid out inline as a normal\n   * flex child instead sits to the RIGHT of that padding, one full\n   * icon-width further in than a row using this prop. That drift is exactly\n   * what misaligned this app's account menu before this prop existed:\n   * `children` carried a hand-rolled `<span className=\"flex items-center\n   * gap-2\">` wrapping icon and label together, which reads fine in isolation\n   * and wrong the moment a differently-iconed row shares the same popup.\n   */\n  icon?: ReactNode;\n  /**\n   * Marks this row as the current choice among alternatives.\n   *\n   * For menus that ARE a choice but are not a radio group — a model picker\n   * that draws its own tick, say. Without it the only signal is the tick, and\n   * a tick is not a state a pointer can see it is already on.\n   */\n  selected?: boolean;\n  /**\n   * `danger` marks the row destructive. Resting state is unchanged.\n   *\n   * Same sentence as `IconButton.tone`, and the same contract behind it — the\n   * row is quiet until approached, and \"approached\" here includes arrowing onto\n   * it, which a `hover:` rule cannot see. See `DANGER_ITEM` above for why that\n   * distinction is the reason this lives in the library rather than in each\n   * consumer's stylesheet.\n   *\n   * A DANGER ROW THAT IS ALSO `selected` DRAWS AS SELECTED. The two are merged\n   * in that order deliberately: \"this is the one you are on\" is the more urgent\n   * of the two things to say, and a destructive action is a poor candidate for\n   * being the current choice in the first place.\n   */\n  tone?: MenuItemTone;\n  /**\n   * A second, quieter line saying what picking the row DOES (or why it is\n   * cautioned) — shown under the label, like `MenuCheckboxItem.description`.\n   * Without it a caller hand-builds a two-line `children` stack, and the row's\n   * icon (absolutely positioned for a one-line row) stops lining up with it.\n   */\n  description?: ReactNode;\n  /**\n   * DX-6426 - what this row sends is out and unanswered: the row's icon slot shows a spinner and the row refuses a second activation until it is\n   * answered. Pass it from the pending state of the write. The row is not dimmed (it is working, not unavailable).\n   */\n  loading?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MenuItem({\n  className,\n  icon,\n  selected,\n  tone = \"neutral\",\n  description,\n  loading = false,\n  disabled,\n  children,\n  ref,\n  ...props\n}: MenuItemProps) {\n  const lead = loading ? <Spinner size=\"sm\" /> : icon;\n  return (\n    <BaseMenu.Item\n      ref={ref}\n      disabled={disabled || loading}\n      data-loading={loading || undefined}\n      aria-busy={loading || undefined}\n      /* The attribute, not just the class: it is what the stacked\n         `data-selected:data-highlighted:` rule keys on, and what a probe can\n         find the chosen row by. */\n      data-selected={selected || undefined}\n      className={cn(\n        ITEM,\n        tone === \"danger\" && DANGER_ITEM,\n        tone === \"warning\" && WARNING_ITEM,\n        selected && SELECTED_ITEM,\n        description && \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* See the `icon` prop doc above for why this must be an absolutely\n          positioned span rather than an inline child. */}\n      {lead && (\n        <span className={cn(\"absolute left-2 flex size-4 items-center justify-center\", description && \"top-2.5\")}>\n          {lead}\n        </span>\n      )}\n      {description ? (\n        <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n          <span>{children}</span>\n          <span className=\"text-xs leading-snug text-tertiary\">{description}</span>\n        </span>\n      ) : (\n        children\n      )}\n    </BaseMenu.Item>\n  );\n}\n\nexport interface MenuRadioGroupProps extends Omit<BaseMenu.RadioGroup.Props, \"className\"> {\n  className?: string;\n}\n\n/** Single-choice group — for a setting rather than a list of actions. */\nexport function MenuRadioGroup({ className, children, ...props }: MenuRadioGroupProps) {\n  return (\n    <BaseMenu.RadioGroup className={cn(\"flex flex-col\", className)} {...props}>\n      {children}\n    </BaseMenu.RadioGroup>\n  );\n}\n\nexport interface MenuRadioItemProps extends Omit<BaseMenu.RadioItem.Props, \"className\"> {\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function MenuRadioItem({ className, children, ref, ...props }: MenuRadioItemProps) {\n  return (\n    <BaseMenu.RadioItem\n      ref={ref}\n      className={cn(\n        ITEM,\n        \"data-checked:bg-control-subtle data-checked:font-medium data-checked:text-control-text\",\n        /* Checked AND highlighted — see SELECTED_ITEM. Base UI spells this\n           state `data-checked` on a radio item, so the stacked rule has to be\n           written out again rather than reused. */\n        \"data-checked:data-highlighted:bg-control-subtle-hover\",\n        className,\n      )}\n      {...props}\n    >\n      <BaseMenu.RadioItemIndicator className=\"absolute left-2 grid place-items-center\">\n        <Icon name=\"check\" size=\"sm\" className=\"animate-scale-in text-control-text\" />\n      </BaseMenu.RadioItemIndicator>\n      {children}\n    </BaseMenu.RadioItem>\n  );\n}\n\nexport interface MenuCheckboxItemProps extends Omit<BaseMenu.CheckboxItem.Props, \"className\"> {\n  className?: string;\n  /** Leading icon — same slot, and same reason it is a prop, as `MenuItem.icon`. */\n  icon?: ReactNode;\n  /**\n   * A second, quieter line saying what the toggle DOES — shown under the label.\n   * A switch row that cannot say what it controls sends the reader to a help\n   * page; one line here is the whole help page.\n   */\n  description?: ReactNode;\n  /**\n   * Draws the state in place of the trailing switch.\n   *\n   * For a setting whose on/off is better said by a meaningful glyph than by a\n   * generic track and thumb - a plan's sign-off, say: a filled check when signed,\n   * an empty \"not approved\" mark when not. The caller hands in the glyph for the\n   * CURRENT state (it already holds `checked`); the switch is then not drawn at\n   * all, so the row never states its state twice. The row stays a\n   * `menuitemcheckbox` carrying `aria-checked`, which is what assistive tech\n   * reads - the indicator is decoration and is hidden from it.\n   */\n  indicator?: ReactNode;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * An independent on/off setting inside a menu.\n *\n * A `MenuItem` is an ACTION and closes the menu when picked; a setting that is\n * flipped three at a time must not. Base UI's checkbox item keeps the menu open\n * (`closeOnClick` defaults to `false` here, not by our choice) and announces\n * itself as `menuitemcheckbox` with `aria-checked`, which a `MenuItem` carrying\n * a hand-drawn tick cannot — that is the reason this is its own row and not a\n * `selected` `MenuItem`.\n *\n * The state is drawn as a small trailing switch rather than a leading tick:\n * every other row in the same popup puts its icon on the left, and a tick there\n * reads as \"this is the current choice among alternatives\" (`MenuRadioItem`),\n * not \"this is on\". The track is fill AND thumb position, so on/off survives\n * the loss of colour.\n */\nexport function MenuCheckboxItem({\n  className,\n  icon,\n  description,\n  indicator,\n  children,\n  ref,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <BaseMenu.CheckboxItem\n      ref={ref}\n      className={cn(ITEM, \"group/toggle items-start pr-3\", className)}\n      {...props}\n    >\n      {icon && <span className=\"absolute top-2.5 left-2 flex size-4 items-center justify-center\">{icon}</span>}\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span>{children}</span>\n        {description && <span className=\"text-xs leading-snug text-tertiary\">{description}</span>}\n      </span>\n      {indicator ? (\n        <span aria-hidden=\"true\" className=\"mt-px flex shrink-0 items-center\">\n          {indicator}\n        </span>\n      ) : (\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            \"mt-0.5 flex h-4 w-7 shrink-0 items-center rounded-full border border-border bg-surface-raised p-px\",\n            \"transition-[var(--tx-colors)] duration-(--dur-fast)\",\n            \"group-data-checked/toggle:border-control group-data-checked/toggle:bg-control\",\n          )}\n        >\n          <span\n            className={cn(\n              \"block size-3 rounded-full bg-tertiary transition-[var(--tx-colors),transform,translate] duration-(--dur-fast)\",\n              \"group-data-checked/toggle:translate-x-3 group-data-checked/toggle:bg-surface\",\n            )}\n          />\n        </span>\n      )}\n    </BaseMenu.CheckboxItem>\n  );\n}\n\nexport interface MenuGroupProps {\n  /**\n   * The group's heading. A prop rather than a child component, so a label\n   * cannot be placed outside a group — where it would throw at render.\n   */\n  label?: ReactNode;\n  children: ReactNode;\n}\n\nexport function MenuGroup({ label, children }: MenuGroupProps) {\n  return (\n    <BaseMenu.Group>\n      {label && (\n        <BaseMenu.GroupLabel className=\"px-2 py-1.5 text-2xs font-semibold tracking-wide text-tertiary uppercase\">\n          {label}\n        </BaseMenu.GroupLabel>\n      )}\n      {children}\n    </BaseMenu.Group>\n  );\n}\n\nexport function MenuSeparator({ className }: { className?: string }) {\n  return <BaseMenu.Separator className={cn(\"my-1 h-px bg-border-subtle\", className)} />;\n}\n"],"names":["POPUP","ANCHORED_POPUP_SURFACE","ANCHORED_POPUP_MOTION","ITEM","SELECTED_ITEM","DANGER_ITEM","Menu","trigger","side","align","open","onOpenChange","finalFocus","className","children","jsxs","BaseMenu","jsx","cn","WARNING_ITEM","MenuItem","icon","selected","tone","description","loading","disabled","ref","props","lead","Spinner","MenuRadioGroup","MenuRadioItem","Icon","MenuCheckboxItem","indicator","MenuGroup","label","MenuSeparator"],"mappings":"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"}

package/dist/components/Navigation.js

@@ -0,0 +1,87 @@
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { cn as u } from "../lib/cn.js";
+import { Icon as h } from "./Icon.js";
+import { Button as v } from "./Button.js";
+import { IconButton as f } from "./IconButton.js";
+import { useBelow as b } from "../lib/use-media-query.js";
+import { useUiStrings as x } from "../lib/i18n/provider.js";
+import { useNumberFormat as w } from "../lib/i18n/number-format.js";
+function I({ items: r, maxItems: a = 4, className: e }) {
+  const i = x().navigation, t = r.length > a ? [r[0], "ellipsis", ...r.slice(-2)] : r;
+  return /* @__PURE__ */ n("nav", { "aria-label": i.breadcrumb, className: u("min-w-0", e), children: /* @__PURE__ */ n("ol", { className: "flex min-w-0 flex-wrap items-center gap-1 text-sm", children: t.map((s, o) => {
+    const d = o === t.length - 1;
+    return /* @__PURE__ */ p("li", { className: "flex min-w-0 items-center gap-1", children: [
+      o > 0 && /* @__PURE__ */ n(h, { name: "chevron-right", size: "xs", className: "shrink-0 text-tertiary" }),
+      s === "ellipsis" ? /* @__PURE__ */ n("span", { className: "px-1 text-tertiary", "aria-hidden": !0, children: "…" }) : d ? (
+        /* The current page is NOT a link, and carries aria-current.
+           A link to where you already are is a small lie that screen
+           readers repeat out loud. */
+        /* @__PURE__ */ n("span", { "aria-current": "page", className: "truncate font-medium text-primary", children: s.label })
+      ) : /* @__PURE__ */ n(
+        "a",
+        {
+          href: s.href ?? "#",
+          onClick: s.onClick,
+          className: "truncate rounded-sm px-1 text-tertiary transition-colors duration-(--dur-fast) hover:text-accent-text",
+          children: s.label
+        }
+      )
+    ] }, o);
+  }) }) });
+}
+function L({
+  page: r,
+  pageCount: a,
+  onPageChange: e,
+  siblings: i = 1,
+  className: l
+}) {
+  const t = x().navigation, s = w(), o = b("sm"), d = N(r, a, o ? 0 : i);
+  return /* @__PURE__ */ p("nav", { "aria-label": t.pagination, className: u("flex items-center gap-1", l), children: [
+    /* @__PURE__ */ n(
+      f,
+      {
+        label: t.previousPage,
+        icon: /* @__PURE__ */ n(h, { name: "chevron-left", size: "sm" }),
+        disabledReason: r <= 1 ? t.onFirstPage : void 0,
+        onClick: () => e(r - 1)
+      }
+    ),
+    d.map(
+      (c, g) => c === "gap" ? /* @__PURE__ */ n("span", { className: "px-1 text-tertiary", "aria-hidden": !0, children: "…" }, `gap-${g}`) : /* @__PURE__ */ n(
+        v,
+        {
+          size: "sm",
+          variant: c === r ? "solid" : "ghost",
+          "aria-label": t.page(s(c)),
+          "aria-current": c === r ? "page" : void 0,
+          onClick: () => e(c),
+          className: "min-w-(--control-sm) tabular-nums",
+          children: c
+        },
+        c
+      )
+    ),
+    /* @__PURE__ */ n(
+      f,
+      {
+        label: t.nextPage,
+        icon: /* @__PURE__ */ n(h, { name: "chevron-right", size: "sm" }),
+        disabledReason: r >= a ? t.onLastPage : void 0,
+        onClick: () => e(r + 1)
+      }
+    )
+  ] });
+}
+function N(r, a, e) {
+  const i = e * 2 + 5;
+  if (a <= i) return m(1, a);
+  const l = Math.max(r - e, 1), t = Math.min(r + e, a), s = l > 3, o = t < a - 2;
+  return !s && o ? [...m(1, i - 2), "gap", a] : s && !o ? [1, "gap", ...m(a - i + 3, a)] : [1, "gap", ...m(l, t), "gap", a];
+}
+const m = (r, a) => Array.from({ length: a - r + 1 }, (e, i) => r + i);
+export {
+  I as Breadcrumb,
+  L as Pagination
+};
+//# sourceMappingURL=Navigation.js.map

package/dist/components/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sources":["../../src/components/Navigation.tsx"],"sourcesContent":["import type { MouseEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../lib/i18n\";\nimport { Icon } from \"./Icon\";\nimport { Button } from \"./Button\";\nimport { IconButton } from \"./IconButton\";\nimport { useBelow } from \"../lib/use-media-query\";\n\n/* ============================================================================\n   BREADCRUMB + PAGINATION — the two small navigation pieces every app needs\n   and almost every design system treats as an afterthought.\n   ========================================================================= */\n\nexport type Crumb = {\n  label: ReactNode;\n  href?: string;\n  /**\n   * Receives the click event, which a client-side router NEEDS in order to\n   * suppress the browser's own navigation.\n   *\n   * The anchor below keeps its real `href` (hover URL, ctrl/cmd-click to a new\n   * tab) and only falls back to `#` when there is none, so a crumb with an\n   * `href` and a router-driven `onClick` used to do the client-side navigation\n   * AND a full page load. Take the event and suppress it:\n   *\n   * ```tsx\n   * onClick: (e) => {\n   *   // A modified or middle click is a request for a new tab — let it through.\n   *   if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n   *   e.preventDefault();\n   *   navigate(crumb.href);\n   * }\n   * ```\n   *\n   * A zero-argument `() => void` handler still type-checks. The last crumb is\n   * the current page, a non-link span, and never fires this.\n   */\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n};\n\nexport interface BreadcrumbProps {\n  items: Crumb[];\n  /**\n   * Collapse the middle when the trail is longer than this.\n   *\n   * A trail that wraps to two lines has stopped being a trail. Collapsing\n   * keeps the two ends — where you came from and where you are — which is the\n   * information people actually use; the middle is nearly always scenery.\n   */\n  maxItems?: number;\n  className?: string;\n}\n\nexport function Breadcrumb({ items, maxItems = 4, className }: BreadcrumbProps) {\n  const strings = useUiStrings().navigation;\n  const collapsed = items.length > maxItems;\n  const shown: (Crumb | \"ellipsis\")[] = collapsed\n    ? [items[0], \"ellipsis\", ...items.slice(-2)]\n    : items;\n\n  return (\n    <nav aria-label={strings.breadcrumb} className={cn(\"min-w-0\", className)}>\n      <ol className=\"flex min-w-0 flex-wrap items-center gap-1 text-sm\">\n        {shown.map((item, i) => {\n          const last = i === shown.length - 1;\n          return (\n            <li key={i} className=\"flex min-w-0 items-center gap-1\">\n              {i > 0 && (\n                <Icon name=\"chevron-right\" size=\"xs\" className=\"shrink-0 text-tertiary\" />\n              )}\n              {item === \"ellipsis\" ? (\n                <span className=\"px-1 text-tertiary\" aria-hidden>\n                  …\n                </span>\n              ) : last ? (\n                /* The current page is NOT a link, and carries aria-current.\n                   A link to where you already are is a small lie that screen\n                   readers repeat out loud. */\n                <span aria-current=\"page\" className=\"truncate font-medium text-primary\">\n                  {item.label}\n                </span>\n              ) : (\n                <a\n                  href={item.href ?? \"#\"}\n                  onClick={item.onClick}\n                  className=\"truncate rounded-sm px-1 text-tertiary transition-colors duration-(--dur-fast) hover:text-accent-text\"\n                >\n                  {item.label}\n                </a>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nexport interface PaginationProps {\n  page: number;\n  pageCount: number;\n  onPageChange: (page: number) => void;\n  /**\n   * How many numbers to show around the current page.\n   *\n   * CLAMPED TO 0 BELOW 640px, whatever is passed. Every control in this row is\n   * at least 44px wide once the pointer is coarse, so the default window is\n   * nine targets plus eight gaps — 428px, which does not fit a 375px phone and\n   * pushed the entire page sideways. Fewer numbers is the only thing that can\n   * give here: a horizontally scrolling pagination control is a worse answer\n   * than a shorter one, because the pages you cannot see are the ones you were\n   * looking for.\n   */\n  siblings?: number;\n  className?: string;\n}\n\n/**\n * Numbered pagination with a stable width.\n *\n * The window of page numbers is padded so the control does not change size as\n * you move through it — a row of buttons that grows and shrinks under the\n * pointer makes people misclick, and it is the single most common flaw in\n * hand-rolled pagination.\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  className,\n}: PaginationProps) {\n  const strings = useUiStrings().navigation;\n  const fmt = useNumberFormat();\n  /* The stable-width promise above holds WITHIN a width class, which is what it\n     is for — the control must not resize as you page through it. Crossing a\n     breakpoint is a different event, and one nobody is mid-click for. */\n  const narrow = useBelow(\"sm\");\n  const pages = paginationWindow(page, pageCount, narrow ? 0 : siblings);\n\n  return (\n    <nav aria-label={strings.pagination} className={cn(\"flex items-center gap-1\", className)}>\n      {/* At the first page this used to be a natively-disabled button: no\n          cursor, no hover, and nothing at all if you pointed at it wondering\n          why the arrow had stopped working. `disabledReason` says so. */}\n      <IconButton\n        label={strings.previousPage}\n        icon={<Icon name=\"chevron-left\" size=\"sm\" />}\n        disabledReason={page <= 1 ? strings.onFirstPage : undefined}\n        onClick={() => onPageChange(page - 1)}\n      />\n\n      {pages.map((entry, i) =>\n        entry === \"gap\" ? (\n          <span key={`gap-${i}`} className=\"px-1 text-tertiary\" aria-hidden>\n            …\n          </span>\n        ) : (\n          <Button\n            key={entry}\n            size=\"sm\"\n            variant={entry === page ? \"solid\" : \"ghost\"}\n            aria-label={strings.page(fmt(entry))}\n            aria-current={entry === page ? \"page\" : undefined}\n            onClick={() => onPageChange(entry)}\n            className=\"min-w-(--control-sm) tabular-nums\"\n          >\n            {entry}\n          </Button>\n        ),\n      )}\n\n      <IconButton\n        label={strings.nextPage}\n        icon={<Icon name=\"chevron-right\" size=\"sm\" />}\n        disabledReason={page >= pageCount ? strings.onLastPage : undefined}\n        onClick={() => onPageChange(page + 1)}\n      />\n    </nav>\n  );\n}\n\n/**\n * The visible page numbers, always the same COUNT.\n *\n * Near the ends there are no siblings on one side, so the window borrows the\n * missing slots from the other side. Without that, the control is narrower on\n * page 1 than on page 5 and everything after it shifts as you page through.\n */\nfunction paginationWindow(page: number, pageCount: number, siblings: number): (number | \"gap\")[] {\n  const slots = siblings * 2 + 5; // first, last, two gaps, and the window\n  if (pageCount <= slots) return range(1, pageCount);\n\n  const left = Math.max(page - siblings, 1);\n  const right = Math.min(page + siblings, pageCount);\n  const showLeftGap = left > 3;\n  const showRightGap = right < pageCount - 2;\n\n  // I18N-ALLOW: page-list gap sentinel; its render branch prints an ellipsis\n  if (!showLeftGap && showRightGap) return [...range(1, slots - 2), \"gap\", pageCount];\n  // I18N-ALLOW: page-list gap sentinel; its render branch prints an ellipsis\n  if (showLeftGap && !showRightGap) return [1, \"gap\", ...range(pageCount - slots + 3, pageCount)];\n  // I18N-ALLOW: page-list gap sentinel; its render branch prints an ellipsis\n  return [1, \"gap\", ...range(left, right), \"gap\", pageCount];\n}\n\nconst range = (from: number, to: number) =>\n  Array.from({ length: to - from + 1 }, (_, i) => from + i);\n"],"names":["Breadcrumb","items","maxItems","className","strings","useUiStrings","shown","cn","jsx","item","i","last","jsxs","Icon","Pagination","page","pageCount","onPageChange","siblings","fmt","useNumberFormat","narrow","useBelow","pages","paginationWindow","IconButton","entry","Button","slots","range","left","right","showLeftGap","showRightGap","from","to","_"],"mappings":"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"}

package/dist/components/NumberInput.js

@@ -0,0 +1,119 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { NumberField as t } from "@base-ui/react/number-field";
+import { tv as j } from "tailwind-variants";
+import { cn as i } from "../lib/cn.js";
+import { Icon as s } from "./Icon.js";
+import { parseCurrency as C } from "../lib/values/currency.js";
+import { useUiLocale as F } from "../lib/i18n/provider.js";
+const P = j({
+  slots: {
+    group: [
+      "flex w-full min-w-0 items-stretch overflow-hidden rounded-md",
+      "border border-field-border bg-field",
+      "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+      "hover:not-has-disabled:border-field-border-hover",
+      "has-focus:border-control has-focus:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+      "has-data-invalid:border-danger",
+      "has-disabled:opacity-45"
+    ],
+    input: [
+      "w-full min-w-0 bg-transparent font-mono tabular-nums text-primary",
+      "outline-none placeholder:font-sans placeholder:text-field-placeholder",
+      "disabled:cursor-not-allowed"
+    ],
+    stepper: [
+      /* The steppers are the width-constrained case: the group already takes
+         its height from --control-*, so on a touch pointer only w-8/w-10 keeps
+         them under the floor. The input beside them is flexible and gives the
+         width up. */
+      "dx-tap grid shrink-0 cursor-pointer place-items-center text-tertiary select-none",
+      "transition-[var(--tx-colors)] duration-(--dur-instant)",
+      "hover:bg-surface-hover hover:text-primary",
+      "active:bg-surface-active",
+      "disabled:pointer-events-none disabled:opacity-40"
+    ],
+    scrub: "cursor-ew-resize text-xs font-medium text-secondary select-none"
+  },
+  variants: {
+    size: {
+      sm: { group: "h-control-sm", input: "text-xs", stepper: "w-8" },
+      md: { group: "h-control-md", input: "text-sm", stepper: "w-10" },
+      lg: { group: "h-control-lg rounded-lg", input: "text-md", stepper: "w-12" }
+    },
+    /**
+     * Centered is the field's own long-standing look — a value read the way a
+     * calculator or a stepper shows one, and unchanged for every existing
+     * caller (SG-907 adds this variant; it does not touch the default). A
+     * data-entry field reads the opposite way: left-aligned, like every other
+     * text box beside it, so a column of them lines up on their leading edge
+     * rather than swimming around a shared centre.
+     */
+    align: {
+      center: { input: "text-center" },
+      start: { input: "text-left" }
+    }
+  },
+  defaultVariants: { size: "md", align: "center" }
+}), R = /[-−－‒–—﹣]/;
+function B({
+  size: f,
+  align: b,
+  className: h,
+  hideSteppers: d = !1,
+  scrubLabel: c,
+  ref: x,
+  "aria-label": g,
+  "aria-labelledby": w,
+  "aria-describedby": y,
+  placeholder: N,
+  allowDecimal: D,
+  onKeyDown: v,
+  onPaste: K,
+  ...l
+}) {
+  const a = P({ size: f, align: b }), z = F(), m = l.min, I = l.format, u = D ?? I?.maximumFractionDigits !== 0, p = m != null && m >= 0, _ = (e) => {
+    !u && e.key === "." && !e.ctrlKey && !e.metaKey && !e.altKey || p && R.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey ? e.preventDefault() : v?.(e);
+  }, k = (e) => {
+    const A = e.clipboardData?.getData("text/plain") ?? "", n = C(A, z);
+    if (n !== null) {
+      if (!u && !Number.isInteger(n)) {
+        e.preventDefault();
+        return;
+      }
+      if (p && n < 0) {
+        e.preventDefault();
+        return;
+      }
+    }
+    K?.(e);
+  };
+  return /* @__PURE__ */ o(t.Root, { ref: x, className: i("flex w-full min-w-0 flex-col gap-1.5", h), ...l, children: [
+    c && /* @__PURE__ */ o(t.ScrubArea, { className: a.scrub(), children: [
+      /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ r(s, { name: "arrow-up-down", size: "xs", className: "rotate-90" }),
+        c
+      ] }),
+      /* @__PURE__ */ r(t.ScrubAreaCursor, { className: "drop-shadow-md", children: /* @__PURE__ */ r(s, { name: "arrow-up-down", size: "sm", className: "rotate-90 text-primary" }) })
+    ] }),
+    /* @__PURE__ */ o(t.Group, { className: a.group(), children: [
+      !d && /* @__PURE__ */ r(t.Decrement, { className: i(a.stepper(), "border-r border-field-border"), children: /* @__PURE__ */ r(s, { name: "minus", size: "sm" }) }),
+      /* @__PURE__ */ r(
+        t.Input,
+        {
+          className: a.input(),
+          "aria-label": g,
+          "aria-labelledby": w,
+          "aria-describedby": y,
+          placeholder: N,
+          onKeyDown: _,
+          onPaste: k
+        }
+      ),
+      !d && /* @__PURE__ */ r(t.Increment, { className: i(a.stepper(), "border-l border-field-border"), children: /* @__PURE__ */ r(s, { name: "plus", size: "sm" }) })
+    ] })
+  ] });
+}
+export {
+  B as NumberInput
+};
+//# sourceMappingURL=NumberInput.js.map

package/dist/components/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":["../../src/components/NumberInput.tsx"],"sourcesContent":["import type { KeyboardEvent, ClipboardEvent, Ref } from \"react\";\nimport { NumberField } from \"@base-ui/react/number-field\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\nimport { parseCurrency } from \"../lib/values/currency\";\nimport { useUiLocale } from \"../lib/i18n\";\n\n/* ----------------------------------------------------------------------------\n   NUMBER INPUT\n\n   NOT `<input type=\"number\">`. That control is genuinely broken in ways nobody\n   can style around: the spinners are a different size and shape in every\n   engine, a scroll wheel over a focused field silently changes the value, and\n   several browsers accept \"e\", \"+\" and \"-\" anywhere in the string and then\n   report the whole field as empty rather than invalid. Base UI's field is a\n   text input with real numeric behaviour behind it.\n\n   THREE WAYS TO CHANGE THE VALUE, because people reach for different ones:\n   type it, press the steppers, or DRAG the label sideways. The scrub area is\n   the one nobody expects and everybody keeps using once they find it — it\n   turns \"nudge this by a bit\" into a gesture instead of eleven clicks.\n\n   Tabular figures, always: a value that changes width as it counts makes the\n   steppers beside it shift under the pointer.\n   -------------------------------------------------------------------------- */\n\nconst numberInput = tv({\n  slots: {\n    group: [\n      \"flex w-full min-w-0 items-stretch overflow-hidden rounded-md\",\n      \"border border-field-border bg-field\",\n      \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n      \"hover:not-has-disabled:border-field-border-hover\",\n      \"has-focus:border-control has-focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n      \"has-data-invalid:border-danger\",\n      \"has-disabled:opacity-45\",\n    ],\n    input: [\n      \"w-full min-w-0 bg-transparent font-mono tabular-nums text-primary\",\n      \"outline-none placeholder:font-sans placeholder:text-field-placeholder\",\n      \"disabled:cursor-not-allowed\",\n    ],\n    stepper: [\n      /* The steppers are the width-constrained case: the group already takes\n         its height from --control-*, so on a touch pointer only w-8/w-10 keeps\n         them under the floor. The input beside them is flexible and gives the\n         width up. */\n      \"dx-tap grid shrink-0 cursor-pointer place-items-center text-tertiary select-none\",\n      \"transition-[var(--tx-colors)] duration-(--dur-instant)\",\n      \"hover:bg-surface-hover hover:text-primary\",\n      \"active:bg-surface-active\",\n      \"disabled:pointer-events-none disabled:opacity-40\",\n    ],\n    scrub: \"cursor-ew-resize text-xs font-medium text-secondary select-none\",\n  },\n  variants: {\n    size: {\n      sm: { group: \"h-control-sm\", input: \"text-xs\", stepper: \"w-8\" },\n      md: { group: \"h-control-md\", input: \"text-sm\", stepper: \"w-10\" },\n      lg: { group: \"h-control-lg rounded-lg\", input: \"text-md\", stepper: \"w-12\" },\n    },\n    /**\n     * Centered is the field's own long-standing look — a value read the way a\n     * calculator or a stepper shows one, and unchanged for every existing\n     * caller (SG-907 adds this variant; it does not touch the default). A\n     * data-entry field reads the opposite way: left-aligned, like every other\n     * text box beside it, so a column of them lines up on their leading edge\n     * rather than swimming around a shared centre.\n     */\n    align: {\n      center: { input: \"text-center\" },\n      start: { input: \"text-left\" },\n    },\n  },\n  defaultVariants: { size: \"md\", align: \"center\" },\n});\n\n/**\n * The five props below are declared here, EXPLICITLY, rather than left to flow through the\n * `Omit<NumberField.Root.Props, ...>` this interface otherwise extends (SG-907).\n *\n * `NumberField.Root` renders a `<div>` — `aria-label`/`aria-labelledby`/`aria-describedby` are\n * universal ARIA attributes TypeScript accepts on any element, so they type-checked and silently\n * landed on that wrapping div, never reaching the `<input>` a screen reader (or\n * `getByRole(\"textbox\", { name })`) actually reads the accessible name from. `placeholder` was\n * worse: `NumberFieldRootProps` never declared it at all, so a caller could not pass one through\n * this component regardless of which element it would have reached. Both are fixed the same way\n * — destructured out of the props this component accepts from its caller, forwarded to\n * `NumberField.Input` below, which is exactly where `<input>`-shaped props belong.\n *\n * `name` stays out of this list on purpose. It is already declared on `NumberFieldRootProps`\n * itself (not inherited from the generic div props the way the three ARIA attributes are), and\n * Base UI's own `NumberField.Root` reads it to name a HIDDEN native `<input type=\"hidden\">` it\n * renders for real form submission — never the visible text `<input>`, which the library\n * deliberately gives no `name` of its own so a form posts the field exactly once. Moving `name`\n * onto the visible input here would give the form two same-named inputs instead of fixing\n * anything.\n */\nexport interface NumberInputProps\n  extends Omit<NumberField.Root.Props, \"className\" | \"render\" | \"aria-label\" | \"aria-labelledby\" | \"aria-describedby\">,\n    VariantProps<typeof numberInput> {\n  className?: string;\n  /** Hide the +/− buttons — for a field driven by typing or scrubbing alone. */\n  hideSteppers?: boolean;\n  /**\n   * A draggable label. Dragging it left or right changes the value.\n   *\n   * Worth adding wherever the exact number matters less than the relationship\n   * between it and what it affects — a delay, a threshold, a weight.\n   */\n  scrubLabel?: string;\n  ref?: Ref<HTMLDivElement>;\n  /** The accessible name — reaches the `<input>` itself, never the wrapping group (SG-907). */\n  \"aria-label\"?: string;\n  /** @see `aria-label`'s own note above — same fix, same reason. */\n  \"aria-labelledby\"?: string;\n  /** @see `aria-label`'s own note above — same fix, same reason. */\n  \"aria-describedby\"?: string;\n  /** What an empty field says. Reaches the `<input>` — `NumberFieldRootProps` never had one. */\n  placeholder?: string;\n  /**\n   * Whether a decimal separator may be typed or pasted at all.\n   *\n   * Base UI's own `NumberField` keeps the decimal key typeable even under an integer-only\n   * `format` (its own source: \"must stay typeable regardless of whether the format renders a\n   * fraction\") and instead ROUNDS a typed fraction away on blur — `3.7` silently becomes `4`,\n   * which is a value the reviewer never typed. `allowDecimal={false}` refuses the keystroke (and\n   * a pasted fraction) outright, so nothing the reviewer entered is ever changed behind their\n   * back. Defaults to `false` exactly when `format?.maximumFractionDigits === 0` — an\n   * integer-only format refuses a decimal point unless a caller explicitly asks otherwise.\n   */\n  allowDecimal?: boolean;\n}\n\n/** ASCII and the small set of Unicode minus glyphs a paste (or an IME) might carry. */\nconst MINUS_RE = /[-−－‒–—﹣]/;\n\nexport function NumberInput({\n  size,\n  align,\n  className,\n  hideSteppers = false,\n  scrubLabel,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  placeholder,\n  allowDecimal,\n  onKeyDown,\n  onPaste,\n  ...props\n}: NumberInputProps) {\n  const s = numberInput({ size, align });\n  const locale = useUiLocale();\n  const min = props.min;\n  const format = props.format;\n  const resolvedAllowDecimal = allowDecimal ?? format?.maximumFractionDigits !== 0;\n  const refuseNegative = min != null && min >= 0;\n\n  /**\n   * Blocks the keystroke, rather than letting it insert and correcting it later — a value a\n   * reviewer typed must never be changed behind their back. `event.preventDefault()` here runs\n   * BEFORE `NumberField.Input`'s own `onKeyDown` (Base UI merges rightmost-first — see\n   * `mergeProps`'s own doc comment), and that handler's first line bails out on exactly\n   * `event.defaultPrevented`, so blocking here is enough to stop the character reaching the\n   * field at all; nothing downstream still needs to notice it.\n   */\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (!resolvedAllowDecimal && event.key === \".\" && !event.ctrlKey && !event.metaKey && !event.altKey) {\n      event.preventDefault();\n    } else if (refuseNegative && MINUS_RE.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey) {\n      event.preventDefault();\n    } else {\n      onKeyDown?.(event as never);\n    }\n  };\n\n  /**\n   * A paste is one event carrying a whole string, not a single character — `$1,500.00` must be\n   * ACCEPTED (SG-907 AC), so this cannot reject on sight of \".\" the way the keystroke guard does.\n   * It parses what was actually pasted (`parseCurrency`, which already strips \"$\"/\",\"/parens the\n   * same way this app's own typed-value refusal does) and refuses only a paste that would\n   * actually introduce a fraction on a no-decimal field, or a negative on a non-negative one —\n   * everything else reaches `NumberField.Input`'s own paste handling unchanged.\n   */\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {\n    const text = event.clipboardData?.getData(\"text/plain\") ?? \"\";\n    const parsed = parseCurrency(text, locale);\n    if (parsed !== null) {\n      if (!resolvedAllowDecimal && !Number.isInteger(parsed)) {\n        event.preventDefault();\n        return;\n      }\n      if (refuseNegative && parsed < 0) {\n        event.preventDefault();\n        return;\n      }\n    }\n    onPaste?.(event as never);\n  };\n\n  return (\n    <NumberField.Root ref={ref} className={cn(\"flex w-full min-w-0 flex-col gap-1.5\", className)} {...props}>\n      {scrubLabel && (\n        <NumberField.ScrubArea className={s.scrub()}>\n          <span className=\"inline-flex items-center gap-1\">\n            <Icon name=\"arrow-up-down\" size=\"xs\" className=\"rotate-90\" />\n            {scrubLabel}\n          </span>\n          {/* The cursor swaps to a horizontal resize glyph and the pointer is\n              locked, so the drag can run past the edge of the screen without\n              stopping — which is what makes a wide range usable in one gesture. */}\n          <NumberField.ScrubAreaCursor className=\"drop-shadow-md\">\n            <Icon name=\"arrow-up-down\" size=\"sm\" className=\"rotate-90 text-primary\" />\n          </NumberField.ScrubAreaCursor>\n        </NumberField.ScrubArea>\n      )}\n\n      <NumberField.Group className={s.group()}>\n        {!hideSteppers && (\n          <NumberField.Decrement className={cn(s.stepper(), \"border-r border-field-border\")}>\n            <Icon name=\"minus\" size=\"sm\" />\n          </NumberField.Decrement>\n        )}\n        <NumberField.Input\n          className={s.input()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          placeholder={placeholder}\n          onKeyDown={handleKeyDown}\n          onPaste={handlePaste}\n        />\n        {!hideSteppers && (\n          <NumberField.Increment className={cn(s.stepper(), \"border-l border-field-border\")}>\n            <Icon name=\"plus\" size=\"sm\" />\n          </NumberField.Increment>\n        )}\n      </NumberField.Group>\n    </NumberField.Root>\n  );\n}\n"],"names":["numberInput","tv","MINUS_RE","NumberInput","size","align","className","hideSteppers","scrubLabel","ref","ariaLabel","ariaLabelledBy","ariaDescribedBy","placeholder","allowDecimal","onKeyDown","onPaste","props","s","locale","useUiLocale","min","format","resolvedAllowDecimal","refuseNegative","handleKeyDown","event","handlePaste","text","parsed","parseCurrency","jsxs","NumberField","cn","jsx","Icon"],"mappings":"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"}

package/dist/components/OTPInput.js

@@ -0,0 +1,71 @@
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useRef as m, useEffect as b, useCallback as h } from "react";
+import { OTPField as i } from "@base-ui/react/otp-field";
+import { cn as c } from "../lib/cn.js";
+function y({
+  length: a = 6,
+  groupAfter: s,
+  className: f,
+  autoFocus: n,
+  ref: e,
+  ...p
+}) {
+  const d = m(null);
+  b(() => {
+    n && d.current?.querySelector("input")?.focus();
+  }, [n]);
+  const u = h(
+    (r) => {
+      d.current = r, typeof e == "function" ? e(r) : e && (e.current = r);
+    },
+    [e]
+  );
+  return /* @__PURE__ */ o(
+    i.Root,
+    {
+      ref: u,
+      length: a,
+      className: c("flex items-center gap-2", f),
+      ...p,
+      children: Array.from({ length: a }, (r, t) => /* @__PURE__ */ l("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ l("span", { className: "relative", children: [
+          /* @__PURE__ */ o(
+            i.Input,
+            {
+              "data-autofocus": n && t === 0 ? "" : void 0,
+              className: c(
+                "peer",
+                "grid h-control-md w-11 place-items-center rounded-md",
+                "border border-field-border bg-field",
+                "text-center font-mono text-lg tabular-nums text-primary",
+                "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+                "hover:not-disabled:border-field-border-hover",
+                /* DX-5127: the box holding real focus IS the active slot (the
+                   next digit goes into the focused box), so it gets the ring;
+                   Base UI has no per-slot "active" attribute. A filled box
+                   reads as filled: stronger border and a tinted background. */
+                "focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+                "data-filled:border-border-strong data-filled:bg-surface-sunken",
+                "data-invalid:border-danger",
+                "disabled:opacity-45",
+                "outline-none"
+              )
+            }
+          ),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              "aria-hidden": !0,
+              className: "pointer-events-none absolute left-1/2 top-1/2 hidden h-5 w-px -translate-x-1/2 -translate-y-1/2 bg-primary peer-focus:peer-not-data-filled:block motion-safe:peer-focus:peer-not-data-filled:animate-[dx-otp-caret_1s_steps(1)_infinite]"
+            }
+          )
+        ] }),
+        s && t === s - 1 && t < a - 1 && /* @__PURE__ */ o("span", { "aria-hidden": !0, className: "h-px w-2.5 rounded-full bg-border-strong" })
+      ] }, t))
+    }
+  );
+}
+export {
+  y as OTPInput
+};
+//# sourceMappingURL=OTPInput.js.map

package/dist/components/OTPInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sources":["../../src/components/OTPInput.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, type Ref } from \"react\";\nimport { OTPField } from \"@base-ui/react/otp-field\";\nimport { cn } from \"../lib/cn\";\n\n/* ----------------------------------------------------------------------------\n   OTP INPUT\n\n   The reason a one-time code gets its own component rather than a text field\n   is entirely about what happens around the typing:\n\n     PASTE fills every box at once. People paste these codes far more often\n           than they type them, and a field that takes only the first character\n           of a pasted string is the single most infuriating version of this\n           control.\n     BACKSPACE steps back into the previous box when the current one is empty,\n           instead of stopping dead.\n     AUTOFILL from an SMS works, because the underlying input keeps\n           `autocomplete=\"one-time-code\"` — separate inputs per digit break\n           that, which is why the hand-rolled six-input version is wrong even\n           when it looks identical.\n\n   The caret is drawn, not native. A real caret in a centred single-character\n   box sits beside the digit rather than under the next slot, so the active box\n   is marked with a ring and a blinking bar instead.\n   -------------------------------------------------------------------------- */\n\nexport interface OTPInputProps\n  extends Omit<OTPField.Root.Props, \"className\" | \"render\" | \"length\"> {\n  /** How many characters. 6 is the near-universal default. */\n  length?: number;\n  /** Draw a gap after this many characters — \"123 456\" reads faster than \"123456\". */\n  groupAfter?: number;\n  className?: string;\n  /** Focus the first box when the input appears, so typing lands at once. */\n  autoFocus?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function OTPInput({\n  length = 6,\n  groupAfter,\n  className,\n  autoFocus,\n  ref,\n  ...props\n}: OTPInputProps) {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // DX-5127: the root is a div, so the DOM autofocus attribute does nothing;\n  // focus the first box ourselves when the input mounts.\n  useEffect(() => {\n    if (autoFocus) rootRef.current?.querySelector(\"input\")?.focus();\n  }, [autoFocus]);\n  const setRoot = useCallback(\n    (node: HTMLDivElement | null) => {\n      rootRef.current = node;\n      if (typeof ref === \"function\") ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n  return (\n    <OTPField.Root\n      ref={setRoot}\n      length={length}\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    >\n      {/* Slots take their index from their POSITION, not a prop — which is\n          why the count lives on the root and these are rendered bare. */}\n      {Array.from({ length }, (_, index) => (\n        <span key={index} className=\"flex items-center gap-2\">\n          <span className=\"relative\">\n            <OTPField.Input\n              data-autofocus={autoFocus && index === 0 ? \"\" : undefined}\n              className={cn(\n                \"peer\",\n                \"grid h-control-md w-11 place-items-center rounded-md\",\n                \"border border-field-border bg-field\",\n                \"text-center font-mono text-lg tabular-nums text-primary\",\n                \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n                \"hover:not-disabled:border-field-border-hover\",\n                /* DX-5127: the box holding real focus IS the active slot (the\n                   next digit goes into the focused box), so it gets the ring;\n                   Base UI has no per-slot \"active\" attribute. A filled box\n                   reads as filled: stronger border and a tinted background. */\n                \"focus:border-control focus:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n                \"data-filled:border-border-strong data-filled:bg-surface-sunken\",\n                \"data-invalid:border-danger\",\n                \"disabled:opacity-45\",\n                \"outline-none\",\n              )}\n            />\n            {/* The drawn caret: only in the focused, still-empty box. */}\n            <span\n              aria-hidden\n              className=\"pointer-events-none absolute left-1/2 top-1/2 hidden h-5 w-px -translate-x-1/2 -translate-y-1/2 bg-primary peer-focus:peer-not-data-filled:block motion-safe:peer-focus:peer-not-data-filled:animate-[dx-otp-caret_1s_steps(1)_infinite]\"\n            />\n          </span>\n          {groupAfter && index === groupAfter - 1 && index < length - 1 && (\n            <span aria-hidden className=\"h-px w-2.5 rounded-full bg-border-strong\" />\n          )}\n        </span>\n      ))}\n    </OTPField.Root>\n  );\n}\n"],"names":["OTPInput","length","groupAfter","className","autoFocus","ref","props","rootRef","useRef","useEffect","setRoot","useCallback","node","jsx","OTPField","cn","_","index","jsxs"],"mappings":";;;;AAsCO,SAASA,EAAS;AAAA,EACvB,QAAAC,IAAS;AAAA,EACT,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAUC,EAA8B,IAAI;AAGlD,EAAAC,EAAU,MAAM;AACd,IAAIL,KAAWG,EAAQ,SAAS,cAAc,OAAO,GAAG,MAAA;AAAA,EAC1D,GAAG,CAACH,CAAS,CAAC;AACd,QAAMM,IAAUC;AAAA,IACd,CAACC,MAAgC;AAC/B,MAAAL,EAAQ,UAAUK,GACd,OAAOP,KAAQ,aAAYA,EAAIO,CAAI,IAC9BP,QAAS,UAAUO;AAAA,IAC9B;AAAA,IACA,CAACP,CAAG;AAAA,EAAA;AAEN,SACE,gBAAAQ;AAAA,IAACC,EAAS;AAAA,IAAT;AAAA,MACC,KAAKJ;AAAA,MACL,QAAAT;AAAA,MACA,WAAWc,EAAG,2BAA2BZ,CAAS;AAAA,MACjD,GAAGG;AAAA,MAIH,UAAA,MAAM,KAAK,EAAE,QAAAL,EAAA,GAAU,CAACe,GAAGC,MAC1B,gBAAAC,EAAC,QAAA,EAAiB,WAAU,2BAC1B,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAL;AAAA,YAACC,EAAS;AAAA,YAAT;AAAA,cACC,kBAAgBV,KAAaa,MAAU,IAAI,KAAK;AAAA,cAChD,WAAWF;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,UAGF,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ,GACF;AAAA,QACCX,KAAce,MAAUf,IAAa,KAAKe,IAAQhB,IAAS,KAC1D,gBAAAY,EAAC,QAAA,EAAK,eAAW,IAAC,WAAU,2CAAA,CAA2C;AAAA,MAAA,EAAA,GA7BhEI,CA+BX,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}