@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/SortMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortMenu.js","sources":["../../src/components/SortMenu.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport type { ButtonProps } from \"./Button\";\nimport { Icon, type IconName } from \"./Icon\";\nimport { IconButton } from \"./IconButton\";\nimport { Popover, PopoverClose } from \"./Popover\";\n\n/* ============================================================================\n   SORT MENU — the one control for ordering a list: every field it can be\n   ordered by, each with its own up and down arrow, in a popover.\n\n   WHY A COMPONENT AND NOT A `Menu` OF RADIO ITEMS. A radio list can offer one\n   order per row, so a list sortable by three fields in both directions becomes\n   six rows (\"Name, A-Z\", \"Name, Z-A\", ...) the person has to read to find the\n   field they mean, and a list that grows a field grows two rows. Here a row is\n   a FIELD, and the direction is a second, separate choice on the same row —\n   two arrow buttons, the pressed one being the active order. The person who\n   knows what they want to sort by never reads a direction word; the one who\n   does not sees every field once.\n\n   THE TRIGGER IS ICON-ONLY (DX-4378, DX-4615). The closed control is an\n   `IconButton` drawing the arrow of the CURRENT direction (up for ascending,\n   down for descending), preceded by the sorted field's own icon when its\n   option carries one: no field name, no chevron. The field and the\n   direction, in the field's own words (\"Sort plans: Created, Newest first\"),\n   are its accessible name and its tooltip, which is the non-enterable label\n   `IconButton` always gives. A text trigger (\"↓ Created\" + chevron) spent a\n   row's width on a word the list already implies and was not what was asked\n   for; the icon and arrow answer \"what, which way?\" at a glance and the\n   tooltip spells it out on hover or focus. There is no text variant. The\n   trigger's resting look is one of two, `triggerVariant` \"outline\" (default)\n   or \"ghost\" (borderless, for a header of bare icons).\n\n   STRUCTURE ONLY. This knows nothing of any list: `SortOption` is a plain\n   `{value, label}` and the caller maps `{field, direction}` to whatever its\n   data layer accepts. Choosing an arrow picks field AND direction in one click\n   and closes the popover; picking the active order again closes it unchanged.\n   ========================================================================== */\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface SortOption<Field extends string = string> {\n  value: Field;\n  /** The field as a person names it (\"Name\", \"Created\"). */\n  label: string;\n  /**\n   * What each direction means for THIS field, in the words that fit it\n   * (\"A to Z\" / \"Z to A\", \"Oldest first\" / \"Newest first\"). Absent, the\n   * directions read the built-in \"Ascending\" / \"Descending\" words of the active `UiLocaleProvider`. It names the arrows to\n   * assistive technology and appears in their tooltips, so a person is never\n   * left decoding which way an arrow sorts a date.\n   */\n  directions?: { asc: string; desc: string };\n  /**\n   * A registered icon for the field (DX-4615). When the sorted field carries one, the closed control draws it before the\n   * direction's arrow (\"what\" then \"which way\"), and the popover draws it beside the field's label. A list whose options\n   * carry none renders exactly as it did; give every option an icon or none, so the rows and the trigger stay one shape.\n   */\n  icon?: IconName;\n}\n\nexport interface SortValue<Field extends string = string> {\n  field: Field;\n  direction: SortDirection;\n}\n\nexport interface SortMenuProps<Field extends string = string> {\n  options: readonly SortOption<Field>[];\n  value: SortValue<Field>;\n  onValueChange: (value: SortValue<Field>) => void;\n  /** Names the control for assistive technology, e.g. \"Sort plans\". The active order is appended to it. */\n  \"aria-label\": string;\n  size?: ButtonProps[\"size\"];\n  /**\n   * The trigger's resting look (DX-4615). `outline` (default) draws the bordered button; `ghost` draws the bare arrow, for a\n   * header that already holds other borderless icons (a board lane's title row). Same arrow, same tooltip, same popover.\n   */\n  triggerVariant?: \"outline\" | \"ghost\";\n  align?: \"start\" | \"center\" | \"end\";\n  className?: string;\n}\n\nfunction directionLabel(option: SortOption, direction: SortDirection, defaults: { asc: string; desc: string }): string {\n  return (option.directions ?? defaults)[direction];\n}\n\nexport function SortMenu<Field extends string = string>({\n  options,\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel,\n  size = \"sm\",\n  triggerVariant = \"outline\",\n  align = \"end\",\n  className,\n}: SortMenuProps<Field>) {\n  const strings = useUiStrings().sortMenu;\n  const nameId = useId();\n  const current = options.find((option) => option.value === value.field);\n  if (current === undefined) {\n    throw new Error(\n      `SortMenu: no option carries the sorted field ${JSON.stringify(value.field)}. ` +\n        `The control would name an order that is not on offer; pass an option for the field the list is actually sorted by.`,\n    );\n  }\n  const currentDirection = directionLabel(current, value.direction, strings.directions);\n\n  return (\n    <Popover\n      align={align}\n      aria-labelledby={nameId}\n      width=\"calc(16rem*var(--ui-scale))\"\n      trigger={\n        <IconButton\n          icon={\n            <>\n              {current.icon !== undefined && <Icon name={current.icon} size=\"sm\" />}\n              <Icon name={value.direction === \"asc\" ? \"arrow-up\" : \"arrow-down\"} size=\"sm\" />\n            </>\n          }\n          label={strings.currentOrder(ariaLabel, current.label, currentDirection)}\n          variant={triggerVariant}\n          size={size}\n          className={cn(current.icon !== undefined && \"aspect-auto w-auto gap-0.5 px-1.5\", className)}\n        />\n      }\n    >\n      <div className=\"flex w-full min-w-0 flex-col gap-0.5\">\n        <span id={nameId} className=\"px-1.5 pb-1 text-2xs font-medium uppercase tracking-wide text-tertiary\">\n          {ariaLabel}\n        </span>\n        {options.map((option) => (\n          <div key={option.value} className=\"flex items-center justify-between gap-2 rounded-md px-1.5 py-0.5\">\n            <span className={cn(\"flex min-w-0 items-center gap-1.5 text-sm\", option.value === value.field ? \"font-medium text-primary\" : \"text-secondary\")}>\n              {option.icon !== undefined && <Icon name={option.icon} size=\"sm\" />}\n              <span className=\"min-w-0 truncate\">{option.label}</span>\n            </span>\n            <span className=\"flex shrink-0 items-center gap-0.5\">\n              {([\"asc\", \"desc\"] as const).map((direction) => {\n                const active = option.value === value.field && direction === value.direction;\n                const words = directionLabel(option, direction, strings.directions);\n                return (\n                  <PopoverClose key={direction}>\n                    <IconButton\n                      icon={<Icon name={direction === \"asc\" ? \"arrow-up\" : \"arrow-down\"} size=\"xs\" />}\n                      label={strings.optionDirection(option.label, words)}\n                      variant={active ? \"subtle\" : \"ghost\"}\n                      size=\"xs\"\n                      aria-pressed={active}\n                      onClick={() => onValueChange({ field: option.value, direction })}\n                    />\n                  </PopoverClose>\n                );\n              })}\n            </span>\n          </div>\n        ))}\n      </div>\n    </Popover>\n  );\n}\n"],"names":["directionLabel","option","direction","defaults","SortMenu","options","value","onValueChange","ariaLabel","size","triggerVariant","align","className","strings","useUiStrings","nameId","useId","current","currentDirection","jsx","Popover","IconButton","jsxs","Fragment","Icon","cn","active","words","PopoverClose"],"mappings":"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"}

package/dist/components/Spinner.js

@@ -0,0 +1,42 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import { cn as t } from "../lib/cn.js";
+const l = {
+  xs: "var(--icon-xs)",
+  sm: "var(--icon-sm)",
+  md: "var(--icon-md)",
+  lg: "var(--icon-lg)",
+  xl: "var(--icon-xl)"
+};
+function x({ size: n = "md", label: r, className: o, style: e, ref: s, ...c }) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      ref: s,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      className: t("dx-icon shrink-0 animate-spin", o),
+      style: { "--dx-icon-size": l[n], ...e },
+      ...r ? { role: "status", "aria-label": r } : { "aria-hidden": !0 },
+      ...c,
+      children: [
+        /* @__PURE__ */ i("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2.5", opacity: "0.18" }),
+        /* @__PURE__ */ i(
+          "circle",
+          {
+            cx: "12",
+            cy: "12",
+            r: "9",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            className: "[animation:var(--animate-spinner-dash)]"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  x as Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import type { CSSProperties, Ref, SVGProps } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { IconSize } from \"./Icon\";\n\nexport interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, \"ref\"> {\n  size?: IconSize;\n  /**\n   * An accessible name. Omitted by default because a spinner is almost always\n   * inside something that already announces its own busy state — a button with\n   * `aria-busy`, or a region with `aria-live`. Announcing \"Loading\" a second\n   * time from the spinner itself is noise, not help.\n   */\n  label?: string;\n  ref?: Ref<SVGSVGElement>;\n}\n\nconst SIZE_VAR: Record<IconSize, string> = {\n  xs: \"var(--icon-xs)\",\n  sm: \"var(--icon-sm)\",\n  md: \"var(--icon-md)\",\n  lg: \"var(--icon-lg)\",\n  xl: \"var(--icon-xl)\",\n};\n\n/**\n * An indeterminate spinner built from TWO nested rates: the whole SVG rotates\n * at a constant speed while the visible arc grows and shrinks underneath it.\n *\n * That combination is what separates a spinner that reads as alive from one\n * that reads as mechanical. A single constant rotation has one frequency, and\n * the eye locks onto it within a second — which is precisely when a spinner\n * starts feeling like the app has hung. The second rate keeps the motion from\n * ever repeating exactly where the eye expects it.\n *\n * Both animations are transform / stroke-dash on a ~20px element, so the cost\n * is inside the paint budget even though `stroke-dasharray` is a paint\n * property: the rule is animated AREA x FREQUENCY, and this loops forever but\n * over almost no area.\n */\nexport function Spinner({ size = \"md\", label, className, style, ref, ...props }: SpinnerProps) {\n  return (\n    <svg\n      ref={ref}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      className={cn(\"dx-icon shrink-0 animate-spin\", className)}\n      style={{ \"--dx-icon-size\": SIZE_VAR[size], ...style } as CSSProperties}\n      {...(label ? { role: \"status\", \"aria-label\": label } : { \"aria-hidden\": true })}\n      {...props}\n    >\n      {/* The track. Faint rather than absent, so the spinner keeps a stable\n          silhouette instead of appearing to change size as the arc travels. */}\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.18\" />\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        className=\"[animation:var(--animate-spinner-dash)]\"\n      />\n    </svg>\n  );\n}\n"],"names":["SIZE_VAR","Spinner","size","label","className","style","ref","props","jsxs","cn","jsx"],"mappings":";;AAgBA,MAAMA,IAAqC;AAAA,EACzC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAiBO,SAASC,EAAQ,EAAE,MAAAC,IAAO,MAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,GAAK,GAAGC,KAAuB;AAC7F,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,WAAWG,EAAG,iCAAiCL,CAAS;AAAA,MACxD,OAAO,EAAE,kBAAkBJ,EAASE,CAAI,GAAG,GAAGG,EAAA;AAAA,MAC7C,GAAIF,IAAQ,EAAE,MAAM,UAAU,cAAcA,EAAA,IAAU,EAAE,eAAe,GAAA;AAAA,MACvE,GAAGI;AAAA,MAIJ,UAAA;AAAA,QAAA,gBAAAG,EAAC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI,QAAO,gBAAe,aAAY,OAAM,SAAQ,QAAO;AAAA,QACrF,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,IAAG;AAAA,YACH,GAAE;AAAA,YACF,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,eAAc;AAAA,YACd,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Stat.js

@@ -0,0 +1,148 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { tv as h } from "tailwind-variants";
+import { cn as p } from "../lib/cn.js";
+import { Icon as b } from "./Icon.js";
+const g = "max-w-[var(--stat-measure,var(--stat-measure-default))]", y = h({
+  slots: {
+    /* The outer box carries the size's default measure, so both prose slots
+       inherit it — and a consumer's `className` lands here too, which is where
+       a per-instance `[--stat-measure:…]` belongs. */
+    box: "flex items-start justify-between gap-4",
+    root: "flex min-w-0 flex-col gap-1",
+    label: `text-2xs font-semibold tracking-widest text-tertiary uppercase ${g}`,
+    value: "font-display font-bold tabular-nums text-primary",
+    unit: "font-sans text-sm font-medium text-tertiary",
+    delta: "inline-flex items-center gap-1 text-xs font-semibold tabular-nums",
+    hint: `text-2xs text-tertiary text-pretty ${g}`
+  },
+  variants: {
+    size: {
+      /* THE ROW SIZE — five across a 722px header column. 7rem is the measured
+         one: 836.51px across two rows becomes 672px across one, five 112px
+         stats plus four 28px gaps. Not less, either: "Declinations" is one
+         unbreakable word 106px wide, and a budget under that leaves a label
+         overflowing its own box with nothing to break at. */
+      xs: { box: "[--stat-measure-default:calc(var(--spacing)*28)]", value: "text-base" },
+      sm: { box: "[--stat-measure-default:calc(var(--spacing)*36)]", value: "text-xl" },
+      md: { box: "[--stat-measure-default:calc(var(--spacing)*44)]", value: "text-3xl" },
+      /* The hero. One or two of these own a band, so the measure is the widest
+         on the ladder — still narrow enough to bind on a long label. */
+      lg: { box: "[--stat-measure-default:calc(var(--spacing)*52)]", value: "text-4xl" }
+    }
+  },
+  defaultVariants: { size: "md" }
+}), w = {
+  positive: "text-success",
+  negative: "text-danger",
+  neutral: "text-tertiary"
+}, N = { up: "trending-up", down: "trending-down", flat: "arrow-right" };
+function k({
+  label: e,
+  value: r,
+  unit: i,
+  delta: s,
+  trend: o,
+  sentiment: c = "neutral",
+  hint: n,
+  visual: x,
+  size: m,
+  className: u,
+  ref: d
+}) {
+  const t = y({ size: m });
+  return /* @__PURE__ */ l("div", { ref: d, className: p(t.box(), u), children: [
+    /* @__PURE__ */ l("div", { className: t.root(), children: [
+      /* @__PURE__ */ a("span", { className: t.label(), children: e }),
+      /* @__PURE__ */ l("span", { className: "flex items-baseline gap-1.5", children: [
+        /* @__PURE__ */ a("span", { className: t.value(), children: r }),
+        i && /* @__PURE__ */ a("span", { className: t.unit(), children: i })
+      ] }),
+      (s || n) && /* @__PURE__ */ l("span", { className: "flex flex-wrap items-center gap-2", children: [
+        s && /* @__PURE__ */ l("span", { className: p(t.delta(), w[c]), children: [
+          o && /* @__PURE__ */ a(b, { name: N[o], size: "xs" }),
+          s
+        ] }),
+        n && /* @__PURE__ */ a("span", { className: t.hint(), children: n })
+      ] })
+    ] }),
+    x
+  ] });
+}
+const j = h({
+  base: "flex flex-wrap",
+  variants: {
+    /* GAPS RIDE THE SIZE, because a fixed gap reads as crowded beside a `lg`
+       figure and as a chasm beside an `xs` one. The column gap is roughly a
+       quarter of the measure at each step, which is what keeps the boundary
+       between two stats unambiguous once labels wrap onto two lines. */
+    size: {
+      xs: "gap-x-7 gap-y-3",
+      sm: "gap-x-8 gap-y-4",
+      md: "gap-x-10 gap-y-5",
+      lg: "gap-x-12 gap-y-6"
+    },
+    align: {
+      start: "justify-start",
+      end: "justify-end",
+      between: "justify-between"
+    }
+  },
+  defaultVariants: { size: "md", align: "start" }
+});
+function M({ stats: e, size: r = "md", align: i = "start", className: s, ref: o }) {
+  return e.length === 0 ? null : /* @__PURE__ */ a("div", { ref: o, className: p(j({ size: r, align: i }), s), children: e.map((c, n) => (
+    /* INDEX IS THE KEY DELIBERATELY. A readout is a fixed, hand-authored
+       list per screen — never reordered, never filtered — so there is no
+       identity for a key to preserve. Keying on the label would read better
+       and would break the first time two stats legitimately share one. */
+    /* @__PURE__ */ a(k, { size: r, ...c }, n)
+  )) });
+}
+const E = {
+  positive: "text-success",
+  negative: "text-danger",
+  neutral: "text-accent"
+};
+function z({ values: e, sentiment: r = "neutral", className: i }) {
+  if (e.length < 2) return null;
+  const s = Math.min(...e), c = Math.max(...e) - s || 1, n = 100 / (e.length - 1), x = e.map((t, f) => [f * n, 30 - (t - s) / c * 26 - 2]), m = x.map(([t, f], v) => `${v ? "L" : "M"}${t.toFixed(2)} ${f.toFixed(2)}`).join(" "), [u, d] = x[x.length - 1];
+  return /* @__PURE__ */ l(
+    "svg",
+    {
+      viewBox: "0 0 100 30",
+      preserveAspectRatio: "none",
+      "aria-hidden": !0,
+      className: p("h-10 w-24 shrink-0 overflow-visible", E[r], i),
+      children: [
+        /* @__PURE__ */ a(
+          "path",
+          {
+            d: `${m} L100 30 L0 30 Z`,
+            fill: "currentColor",
+            opacity: "0.12",
+            stroke: "none"
+          }
+        ),
+        /* @__PURE__ */ a(
+          "path",
+          {
+            d: m,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.75",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            vectorEffect: "non-scaling-stroke"
+          }
+        ),
+        /* @__PURE__ */ a("circle", { cx: u, cy: d, r: "2.5", fill: "currentColor", vectorEffect: "non-scaling-stroke" })
+      ]
+    }
+  );
+}
+export {
+  z as Sparkline,
+  k as Stat,
+  M as StatRow
+};
+//# sourceMappingURL=Stat.js.map

package/dist/components/Stat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stat.js","sources":["../../src/components/Stat.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Icon } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   STAT — a single number, given the room to be read at a glance.\n\n   TABULAR FIGURES ARE NOT OPTIONAL. A row of stats that updates live will\n   visibly jitter as proportional digits change width — 1 is much narrower than\n   8 in most faces — and the jitter is far more distracting than the number is\n   informative.\n\n   DIRECTION IS NOT SENTIMENT. \"Up\" is good for throughput and bad for error\n   rate, so the arrow and the colour are separate props. Tying them together is\n   how dashboards end up showing a cheerful green arrow next to a rising\n   failure count.\n   -------------------------------------------------------------------------- */\n\n/* ----------------------------------------------------------------------------\n   THE PROSE BUDGET — `--stat-measure`, and why it is a custom property.\n\n   THE DEFECT IT CLOSES, at EVERY size. A flex item's preferred size is its\n   max-content width, and in a wrapping row the browser only shrinks an item\n   that cannot fit a line by itself — so a stat claims its longest unbroken line\n   of prose. That line is the LABEL, or the HINT where the hint is longer.\n   Neither is `nowrap`; they are simply never given a reason to break.\n\n   MEASURED on the case that reported it: five stats in a 722px page-header\n   column needed 836.51px and wrapped four-then-one. The FIGURES were 15 to 30px\n   wide; the LABELS were 133 to 158px. A smaller number moved the total by\n   single digits, which is why \"use a smaller size\" is not the fix and never was.\n\n   2.9.0 put a 7rem budget on `xs` alone, reasoning that `sm`/`md`/`lg` were\n   already placed and should not move. That was the wrong branch: those three\n   have the identical defect and were waiting for a consumer with a long label.\n   Every size now has one.\n\n   THE LADDER IS NOT A FORMULA, and pretending otherwise would be worse than\n   saying so. The label and hint are `text-2xs` at every size — the same type —\n   so nothing about the prose itself derives a per-size number. What the size\n   ramp expresses is how much of a row this stat is meant to own: `xs` is the\n   row size, five across a header column; `lg` is a hero, one or two across. The\n   budget follows that, +2rem a step from the 7rem that was measured, and each\n   step was verified to bind on a long label rather than assumed to:\n\n     xs   28  7rem  112px      sm   36   9rem  144px\n     md   44 11rem  176px      lg   52  13rem  208px\n\n   WHAT IT MAKES A STAT'S WIDTH, exactly, because it is not what it looks like.\n   A capped line still STRETCHES to its budget, so a stat whose prose is longer\n   than the budget is exactly the budget wide — not the width of its widest\n   wrapped line. That is the useful behaviour rather than a side effect: every\n   over-long stat in a row lands on the same width, and a label gaining a word\n   stops shoving its neighbours along. Shorter prose still takes only what it\n   needs.\n\n   A CUSTOM PROPERTY RATHER THAN FOUR `max-w-*` VARIANTS, for two reasons.\n\n   It is a knob a consumer can legitimately need: a readout in a full-width\n   panel has room for a wider measure than one in a header column, and\n   `className=\"[--stat-measure:16rem]\"` says so in one place instead of\n   reaching past the component into a slot it does not expose.\n\n   And `[--stat-measure:none]` turns the fix OFF, which is what makes the\n   defect measurable. `probe-stat-row.mjs` renders an unbudgeted row every run\n   and asserts it does NOT fit — so the probe proves it can still see the bug it\n   was written for, rather than remembering that it could.\n\n   TWO PROPERTIES, NOT ONE, and the second is what makes the first work. The\n   per-size value is set ON THE STAT, so an override set on an ANCESTOR — a\n   `StatRow`, a panel — would be overwritten by the stat's own declaration the\n   moment it inherited past it. So the size writes `--stat-measure-default` and\n   the prose reads `var(--stat-measure, var(--stat-measure-default))`: the\n   public knob is consulted first and can be set at any depth, while the size\n   still supplies the value when nobody has.\n\n   `var(--spacing)` and not a literal `7rem`: the size control multiplies the\n   spacing scale, and a budget in fixed rem would stop tracking it. Where\n   `--spacing` is undefined the whole `max-width` is invalid and drops to\n   `none`, which is exactly the pre-2.9.0 behaviour — a degradation, not a break.\n\n   NOT ON THE ROOT COLUMN, and not on the outer box. A cap on the column would\n   also cap the FIGURE, which must never wrap and which `tabular-nums` exists to\n   keep still. A cap on the outer box would squeeze a `visual` — a sparkline is\n   6rem on its own — into the same budget as the text beside it. It goes on the\n   two prose slots, which are the only two lines that can usefully break.\n   -------------------------------------------------------------------------- */\nconst MEASURE = \"max-w-[var(--stat-measure,var(--stat-measure-default))]\";\n\nconst stat = tv({\n  slots: {\n    /* The outer box carries the size's default measure, so both prose slots\n       inherit it — and a consumer's `className` lands here too, which is where\n       a per-instance `[--stat-measure:…]` belongs. */\n    box: \"flex items-start justify-between gap-4\",\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: `text-2xs font-semibold tracking-widest text-tertiary uppercase ${MEASURE}`,\n    value: \"font-display font-bold tabular-nums text-primary\",\n    unit: \"font-sans text-sm font-medium text-tertiary\",\n    delta: \"inline-flex items-center gap-1 text-xs font-semibold tabular-nums\",\n    hint: `text-2xs text-tertiary text-pretty ${MEASURE}`,\n  },\n  variants: {\n    size: {\n      /* THE ROW SIZE — five across a 722px header column. 7rem is the measured\n         one: 836.51px across two rows becomes 672px across one, five 112px\n         stats plus four 28px gaps. Not less, either: \"Declinations\" is one\n         unbreakable word 106px wide, and a budget under that leaves a label\n         overflowing its own box with nothing to break at. */\n      xs: { box: \"[--stat-measure-default:calc(var(--spacing)*28)]\", value: \"text-base\" },\n      sm: { box: \"[--stat-measure-default:calc(var(--spacing)*36)]\", value: \"text-xl\" },\n      md: { box: \"[--stat-measure-default:calc(var(--spacing)*44)]\", value: \"text-3xl\" },\n      /* The hero. One or two of these own a band, so the measure is the widest\n         on the ladder — still narrow enough to bind on a long label. */\n      lg: { box: \"[--stat-measure-default:calc(var(--spacing)*52)]\", value: \"text-4xl\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type StatSize = NonNullable<VariantProps<typeof stat>[\"size\"]>;\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n/** Whether this movement is good news, bad news, or neither. */\nexport type StatSentiment = \"positive\" | \"negative\" | \"neutral\";\n\nconst SENTIMENT: Record<StatSentiment, string> = {\n  positive: \"text-success\",\n  negative: \"text-danger\",\n  neutral: \"text-tertiary\",\n};\n\nconst TREND_ICON = { up: \"trending-up\", down: \"trending-down\", flat: \"arrow-right\" } as const;\n\nexport interface StatProps extends VariantProps<typeof stat> {\n  label: ReactNode;\n  value: ReactNode;\n  /** Rendered smaller, beside the value — \"ms\", \"/min\", \"GB\". */\n  unit?: ReactNode;\n  /** The change itself — \"12%\", \"+1.2K\". */\n  delta?: ReactNode;\n  trend?: StatTrend;\n  /** Whether that movement is good. Independent of direction, on purpose. */\n  sentiment?: StatSentiment;\n  hint?: ReactNode;\n  /** A sparkline, ring, or icon shown alongside. */\n  visual?: ReactNode;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Stat({\n  label,\n  value,\n  unit,\n  delta,\n  trend,\n  sentiment = \"neutral\",\n  hint,\n  visual,\n  size,\n  className,\n  ref,\n}: StatProps) {\n  const s = stat({ size });\n\n  return (\n    <div ref={ref} className={cn(s.box(), className)}>\n      <div className={s.root()}>\n        <span className={s.label()}>{label}</span>\n        <span className=\"flex items-baseline gap-1.5\">\n          <span className={s.value()}>{value}</span>\n          {unit && <span className={s.unit()}>{unit}</span>}\n        </span>\n        {(delta || hint) && (\n          <span className=\"flex flex-wrap items-center gap-2\">\n            {delta && (\n              <span className={cn(s.delta(), SENTIMENT[sentiment])}>\n                {trend && <Icon name={TREND_ICON[trend]} size=\"xs\" />}\n                {delta}\n              </span>\n            )}\n            {hint && <span className={s.hint()}>{hint}</span>}\n          </span>\n        )}\n      </div>\n      {visual}\n    </div>\n  );\n}\n\n/* ----------------------------------------------------------------------------\n   STAT ROW — the layout algorithm for a SET of stats, which used to live in\n   every consumer.\n\n   WHY IT SHIPS. Every application that shows more than one stat hand-writes the\n   same wrapper: `flex flex-wrap gap-x-7 gap-y-3`, sometimes with an alignment,\n   sometimes as a grid instead. Eight screens of one consuming app each wrote\n   their own before a ninth pulled them into a local `PageHeader` — and that\n   local component then carried the reasoning for the whole layout, including\n   the part that is not the consumer's business. A row of stats has a right\n   answer and the library owns the pieces; owning the arrangement too is what\n   stops nine screens drifting into nine arrangements.\n\n   FLEX, NEVER GRID, and this is the part most consumers get wrong. A grid gives\n   every stat an equal share of the row whether it needs one or not — so four\n   numbers on a wide screen become four enormous columns, and the count of rows\n   in a screen gets the visual weight of the screen's title. A wrapping flex row\n   lets each stat take the width of its own content, bounded by the prose budget\n   above. That is why `Stat` needed the budget before this could exist: without\n   it, \"the width of its own content\" is the width of its longest sentence.\n\n   THE STATS ARE DATA, not children. A caller handed `ReactNode` can pass a\n   `Stat` at any size, or a `div`, and the row is back to being a convention\n   with a component around it. `stats` plus one `size` is the whole API, and it\n   is also what makes `size` a property of the ROW — five stats at four sizes is\n   not a readout, it is a mistake, and there is now no way to write it.\n\n   ALIGNMENT CARRIES NO BREAKPOINT. `align=\"end\"` is `justify-end` and nothing\n   more. The row cannot know that its container stacks at some width, and a\n   library that guesses a breakpoint into an alignment prop is a library that is\n   wrong on every consumer whose layout breaks somewhere else. A consumer that\n   wants \"end once there is room\" passes `className=\"md:justify-end\"`, which is\n   one utility and says exactly what it means.\n   -------------------------------------------------------------------------- */\n\nconst statRow = tv({\n  base: \"flex flex-wrap\",\n  variants: {\n    /* GAPS RIDE THE SIZE, because a fixed gap reads as crowded beside a `lg`\n       figure and as a chasm beside an `xs` one. The column gap is roughly a\n       quarter of the measure at each step, which is what keeps the boundary\n       between two stats unambiguous once labels wrap onto two lines. */\n    size: {\n      xs: \"gap-x-7 gap-y-3\",\n      sm: \"gap-x-8 gap-y-4\",\n      md: \"gap-x-10 gap-y-5\",\n      lg: \"gap-x-12 gap-y-6\",\n    },\n    align: {\n      start: \"justify-start\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n    },\n  },\n  defaultVariants: { size: \"md\", align: \"start\" },\n});\n\nexport interface StatRowProps {\n  /**\n   * The readout, as DATA. Every entry is the props of one `Stat`; `size` is the\n   * row's, not each stat's, so they cannot disagree.\n   */\n  stats: readonly Omit<StatProps, \"size\">[];\n  size?: StatSize;\n  /** Which edge the row settles against when it has spare width. */\n  align?: \"start\" | \"end\" | \"between\";\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function StatRow({ stats, size = \"md\", align = \"start\", className, ref }: StatRowProps) {\n  if (stats.length === 0) return null;\n\n  return (\n    <div ref={ref} className={cn(statRow({ size, align }), className)}>\n      {stats.map((props, i) => (\n        /* INDEX IS THE KEY DELIBERATELY. A readout is a fixed, hand-authored\n           list per screen — never reordered, never filtered — so there is no\n           identity for a key to preserve. Keying on the label would read better\n           and would break the first time two stats legitimately share one. */\n        <Stat key={i} size={size} {...props} />\n      ))}\n    </div>\n  );\n}\n\nexport interface SparklineProps {\n  values: number[];\n  /** Matches the stat's sentiment, so the line agrees with the delta beside it. */\n  sentiment?: StatSentiment;\n  className?: string;\n}\n\nconst SPARK_STROKE: Record<StatSentiment, string> = {\n  positive: \"text-success\",\n  negative: \"text-danger\",\n  neutral: \"text-accent\",\n};\n\n/**\n * A bare trend line — no axes, no grid, no labels.\n *\n * A sparkline answers \"which way, and how steadily\", not \"what value\". Adding\n * axes makes it a bad chart instead of a good sparkline, and at this size the\n * ink spent on them is ink taken from the only thing being communicated.\n *\n * The last point is marked, because \"where it ended up\" is the one specific\n * value anyone reads off a shape this small.\n */\nexport function Sparkline({ values, sentiment = \"neutral\", className }: SparklineProps) {\n  if (values.length < 2) return null;\n\n  const min = Math.min(...values);\n  const max = Math.max(...values);\n  /* A flat series would divide by zero; drawing it down the middle is the\n     honest rendering of \"no change\". */\n  const span = max - min || 1;\n  const step = 100 / (values.length - 1);\n\n  const points = values.map((v, i) => [i * step, 30 - ((v - min) / span) * 26 - 2] as const);\n  const path = points.map(([x, y], i) => `${i ? \"L\" : \"M\"}${x.toFixed(2)} ${y.toFixed(2)}`).join(\" \");\n  const [lastX, lastY] = points[points.length - 1];\n\n  return (\n    <svg\n      viewBox=\"0 0 100 30\"\n      preserveAspectRatio=\"none\"\n      aria-hidden\n      className={cn(\"h-10 w-24 shrink-0 overflow-visible\", SPARK_STROKE[sentiment], className)}\n    >\n      {/* A faint fill under the line gives the shape weight without competing\n          with it — at this size a fill alone would read as a blob. */}\n      <path\n        d={`${path} L100 30 L0 30 Z`}\n        fill=\"currentColor\"\n        opacity=\"0.12\"\n        stroke=\"none\"\n      />\n      <path\n        d={path}\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        vectorEffect=\"non-scaling-stroke\"\n      />\n      <circle cx={lastX} cy={lastY} r=\"2.5\" fill=\"currentColor\" vectorEffect=\"non-scaling-stroke\" />\n    </svg>\n  );\n}\n"],"names":["MEASURE","stat","tv","SENTIMENT","TREND_ICON","Stat","label","value","unit","delta","trend","sentiment","hint","visual","size","className","ref","s","jsxs","cn","jsx","Icon","statRow","StatRow","stats","align","props","i","SPARK_STROKE","Sparkline","values","min","span","step","points","v","path","x","y","lastX","lastY"],"mappings":"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"}

package/dist/components/StatusSelect.js

@@ -0,0 +1,119 @@
+import { jsx as a, jsxs as d } from "react/jsx-runtime";
+import { useId as N, useState as k } from "react";
+import { Badge as P } from "./Badge.js";
+import { Icon as E } from "./Icon.js";
+import { Popover as O, PopoverClose as j } from "./Popover.js";
+import { cn as l } from "../lib/cn.js";
+import { devWarn as C } from "../lib/dev-warn.js";
+import { useUiStrings as A } from "../lib/i18n/provider.js";
+const T = { sm: "text-xs", md: "text-sm", lg: "text-base" };
+function u({ option: t, size: o, id: c, children: r }) {
+  return t?.plain ? /* @__PURE__ */ a("span", { id: c, className: l("text-muted-text", T[o]), children: t.label }) : /* @__PURE__ */ a(P, { id: c, size: o, tone: t?.tone ?? "neutral", color: t?.color, dot: t?.dot, pulse: t?.pulse, icon: t?.icon, children: r ?? t?.label });
+}
+function D({
+  value: t,
+  options: o,
+  onValueChange: c,
+  size: r = "sm",
+  "aria-label": f,
+  disabled: h = !1,
+  busy: s = !1,
+  readOnly: I = !1,
+  changeIcon: m = !1,
+  placeholder: p,
+  className: v
+}) {
+  const x = A().statusSelect, i = o.find((e) => e.value === t), _ = N(), b = N(), [g, w] = k(!1);
+  s && g && w(!1);
+  for (const e of o) {
+    if (e.plain && (e.tone !== void 0 || e.color !== void 0 || e.icon !== void 0 || e.dot))
+      throw new Error(`StatusSelect: option "${e.value}" is plain but also carries a tone, color, icon or dot. Plain is text only.`);
+    if (e.tone !== void 0 && e.color !== void 0)
+      throw new Error(`StatusSelect: option "${e.value}" carries both a tone and a color. Pass one.`);
+    if (e.refusal === "")
+      throw new Error(
+        `StatusSelect: option "${e.value}" refuses with an empty reason. A reason nobody can read leaves a dead row with nothing beside it — omit \`refusal\` to allow the option, or say why it cannot be chosen.`
+      );
+  }
+  return i === void 0 && C(
+    "StatusSelect",
+    `no option carries ${JSON.stringify(t)} — the trigger is showing the placeholder rather than painting the raw value into the interface. Either the value is stale, or \`options\` is missing a status the record can actually hold; a status the consumer does not assign belongs in the list with a \`refusal\`, not out of it.`
+  ), I ? /* @__PURE__ */ a("span", { role: "group", className: l("inline-flex", v), "aria-label": f, children: /* @__PURE__ */ a(u, { option: i, size: r, children: i === void 0 ? p ?? x.unknown : void 0 }) }) : /* @__PURE__ */ a(
+    O,
+    {
+      open: g && !s,
+      onOpenChange: (e) => !s && w(e),
+      align: "start",
+      width: "calc(15rem*var(--ui-scale))",
+      trigger: /* @__PURE__ */ d(
+        "button",
+        {
+          type: "button",
+          disabled: h,
+          "aria-label": f,
+          "aria-describedby": b,
+          "aria-disabled": s || void 0,
+          "aria-busy": s || void 0,
+          className: l(
+            s && "cursor-wait opacity-50",
+            "dx-tap group/status inline-flex items-center gap-1 rounded-full outline-none",
+            "transition-[var(--tx-colors),box-shadow,opacity] duration-(--dur-fast) ease-hover",
+            /* DX-5143: a busy trigger is aria-disabled, not natively disabled, so it must also be excluded here or it undims under the pointer. */
+            "hover:not-disabled:not-aria-busy:opacity-85",
+            "focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            v
+          ),
+          children: [
+            /* @__PURE__ */ a(u, { option: i, size: r, id: b, children: i === void 0 ? p ?? x.unknown : void 0 }),
+            !h && /* @__PURE__ */ a(
+              E,
+              {
+                name: m ? "pencil" : "chevron-down",
+                size: r === "lg" ? "sm" : "xs",
+                className: l("text-tertiary transition-[var(--tx-colors),transform] duration-(--dur-fast)", !m && "group-data-popup-open/status:rotate-180")
+              }
+            )
+          ]
+        }
+      ),
+      children: /* @__PURE__ */ a("div", { className: "flex w-full min-w-0 flex-col gap-0.5", children: o.map((e, $) => {
+        const n = e.refusal !== void 0, y = `${_}-${$}`, S = /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            onClick: n ? void 0 : () => c(e.value),
+            "aria-label": e.label,
+            "aria-current": e.value === t ? "true" : void 0,
+            "aria-disabled": n || void 0,
+            "aria-describedby": n ? y : void 0,
+            className: l(
+              "dx-tap flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5",
+              "text-left outline-none transition-[var(--tx-colors)] duration-(--dur-instant)",
+              "focus-visible:bg-surface-hover",
+              n ? (
+                /* Dimmed by LUMINANCE, and a cursor the pointer actually
+                   reaches — same treatment `IconButton` gives a refusing
+                   control, and for the same reason: it must not look
+                   armed, but it must still be askable. */
+                "cursor-not-allowed opacity-60"
+              ) : "hover:bg-surface-hover"
+            ),
+            children: [
+              /* @__PURE__ */ d("span", { className: "flex min-w-0 flex-col items-start gap-1", children: [
+                /* @__PURE__ */ a(u, { option: e, size: r }),
+                n && /* @__PURE__ */ a("span", { id: y, className: "text-2xs leading-snug text-tertiary", children: e.refusal })
+              ] }),
+              e.value === t && /* @__PURE__ */ a(E, { name: "check", size: "xs", className: "shrink-0 text-success" })
+            ]
+          }
+        );
+        return n ? /* @__PURE__ */ a("div", { children: S }, e.value) : /* @__PURE__ */ a(j, { children: S }, e.value);
+      }) })
+    }
+  );
+}
+export {
+  D as StatusSelect
+};
+//# sourceMappingURL=StatusSelect.js.map

package/dist/components/StatusSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusSelect.js","sources":["../../src/components/StatusSelect.tsx"],"sourcesContent":["import { useId, useState, type ReactNode } from \"react\";\nimport { Badge, type BadgeProps } from \"./Badge\";\nimport { Icon } from \"./Icon\";\nimport { Popover, PopoverClose } from \"./Popover\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { devWarn } from \"../lib/dev-warn\";\n\n/* ============================================================================\n   STATUS SELECT — a status picker whose TRIGGER is the colored Badge itself,\n   not a boxed input field with the badge trapped inside it. Opens a Popover\n   listing every option the same way — each one its own full Badge, not a row\n   of plain text — so picking a status is a visual scan, not a read.\n\n   STRUCTURE ONLY. This has no idea what a \"status\" is — `StatusOption` is a\n   plain `{value, label, tone, icon?, dot?, pulse?}`, the same arm's-length\n   relationship `Badge` already has with its own `tone` prop. A consumer's\n   fixed status enum (this library's own `UseCaseStatus`, or a future\n   vertical's order-fulfillment states) supplies the concrete options; this\n   component only ever renders whatever list it's handed.\n\n   WHY A POPOVER OF BUTTONS, NOT `<Select>`. `<Select>` already exists and\n   already supports custom content per item — but its trigger is a bordered\n   field box (`border border-field-border bg-field ...`) that any child sits\n   INSIDE, so a Badge placed in it still reads as \"a dropdown containing a\n   badge,\" not \"a badge that happens to be clickable.\" Personality here means\n   the colored pill IS the control — no separate box drawn around it — which\n   is a Popover of plain buttons, the same primitive `AccountMenu`'s \"Switch\n   team\" rows already use.\n\n   NOT EVERY STATUS IS ASSIGNABLE, AND THE LIST MUST STILL CARRY ALL OF THEM.\n   A consumer whose pipeline enters three of its six stages by itself had no\n   way to say so: passing the three assignable ones painted the raw value into\n   the trigger for a record sitting in any of the others, and passing all six\n   made three lanes look choosable until the click. `StatusOption.refusal` is\n   `KanbanLane.refusal` per option — the reason is on screen before anyone\n   tries, and the row never accepts. Pass EVERY status the record can hold and\n   refuse the ones the consumer does not assign by hand.\n   ========================================================================= */\n\nexport interface StatusOption<Value extends string = string> {\n  value: Value;\n  label: string;\n  /** One of the fixed tones. Absent when `color` or `plain` draws the option instead. */\n  tone?: BadgeProps[\"tone\"];\n  /**\n   * DX-5143 - a CSS colour the option's Badge is drawn in, for a colour the consuming app lets a person choose (a board list's\n   * colour) and so cannot be one of the fixed tones. See `Badge`'s `color`. Not with `tone`.\n   */\n  color?: string;\n  /**\n   * DX-5143 - the option is \"nothing chosen\" (Not mapped, None): drawn as plain muted text, with no pill, in the trigger, the\n   * popover row and the read-only form alike. Not with `tone`, `color`, `icon` or `dot`.\n   */\n  plain?: boolean;\n  /** Rendered inside the Badge via its own `icon` slot — pass an `<Icon>`. */\n  icon?: ReactNode;\n  dot?: boolean;\n  /** Reserved for a genuinely live state — see `Badge`'s own `pulse` doc. */\n  pulse?: boolean;\n  /**\n   * Why this status cannot be chosen HERE. Absent means it can.\n   *\n   * The option is still listed, still carries its own tone and label, and is\n   * still what the trigger shows when the record is sitting in it — it simply\n   * never accepts. That is the difference between a status the consumer does\n   * not assign and a status the consumer does not have, and only one of them\n   * belongs out of the list.\n   *\n   * Written for the person who would have picked it — \"the pipeline enters\n   * this stage on its own\", not \"not allowed\". It is rendered under the badge\n   * rather than only dimming the row, and attached to the row as its\n   * description, so the refusal is never mute. Same call `IconButton`'s\n   * `disabledReason` makes, and it is `aria-disabled` there for the same\n   * reason: a natively disabled control cannot be reached to be asked why.\n   *\n   * AN EMPTY STRING THROWS, matching `Step.blocked` rather than\n   * `KanbanLane.refusal`. There the reason is supporting detail on a lane that\n   * is already visibly refusing; here the sentence IS the mechanism, and an\n   * empty one produces exactly the dead row with nothing beside it that this\n   * prop exists to prevent.\n   */\n  refusal?: string;\n}\n\nexport interface StatusSelectProps<Value extends string = string> {\n  value: Value;\n  options: StatusOption<Value>[];\n  onValueChange: (value: Value) => void;\n  /**\n   * The same three steps `Badge` has, because the trigger IS a Badge.\n   *\n   * It stopped at `md` for no reason anybody could point at, and the cost was\n   * paid one surface at a time: a consumer that wanted the status at the weight\n   * of a page heading pinned the metrics by hand, beside a component that\n   * already knew how to draw them and would have kept them in step with the\n   * rest of the scale for free.\n   *\n   * The chevron travels with it — see the trigger below. Defaults to `sm`,\n   * unchanged: this is a step ADDED to the top of the scale, not a new default.\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Accessible name for the trigger — there is no visible label otherwise. */\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  /**\n   * DX-5143 - a change is being saved: the trigger refuses to open and is dimmed, but stays a FOCUSABLE button (`aria-disabled` +\n   * `aria-busy`, never the native `disabled`). A natively disabled button drops keyboard focus to <body> the moment it is disabled, so a\n   * person who chose by keyboard lost their place on every save; this keeps it. The chevron or pencil is still drawn.\n   */\n  busy?: boolean;\n  /**\n   * DX-5143 - draw a pencil after the value instead of the dropdown chevron, saying \"this value can be changed\" rather than \"this\n   * is a menu\". The whole value plus the pencil stays the one click target. Never drawn read-only or disabled.\n   */\n  changeIcon?: boolean;\n  /**\n   * DX-5143 - the person may see the value but not change it: the current option is drawn at full strength with no chevron, no\n   * popover and no button (unlike `disabled`, which dims a control that exists). The caller says why elsewhere on the screen.\n   */\n  readOnly?: boolean;\n  /**\n   * What the trigger says when `value` matches no option — a state that is\n   * always a mistake somewhere, so this is the wording of the report rather\n   * than a label anyone should be seeing.\n   *\n   * Absent, the built-in \"Unknown\" word of the active `UiLocaleProvider`. It is NOT the raw value: see the component body.\n   */\n  placeholder?: ReactNode;\n  className?: string;\n}\n\n/** One option drawn the one way everywhere it appears: the trigger, each popover row and the read-only form. */\nconst PLAIN_TEXT_SIZE = { sm: \"text-xs\", md: \"text-sm\", lg: \"text-base\" } as const;\n\nfunction OptionFace({ option, size, id, children }: { option: StatusOption | undefined; size: \"sm\" | \"md\" | \"lg\"; id?: string; children?: ReactNode }) {\n  if (option?.plain) return <span id={id} className={cn(\"text-muted-text\", PLAIN_TEXT_SIZE[size])}>{option.label}</span>;\n  return (\n    <Badge id={id} size={size} tone={option?.tone ?? \"neutral\"} color={option?.color} dot={option?.dot} pulse={option?.pulse} icon={option?.icon}>\n      {children ?? option?.label}\n    </Badge>\n  );\n}\n\nexport function StatusSelect<Value extends string = string>({\n  value,\n  options,\n  onValueChange,\n  size = \"sm\",\n  \"aria-label\": ariaLabel,\n  disabled = false,\n  busy = false,\n  readOnly = false,\n  changeIcon = false,\n  placeholder,\n  className,\n}: StatusSelectProps<Value>) {\n  const strings = useUiStrings().statusSelect;\n  const current = options.find((option) => option.value === value);\n  /* One base id, indexed per option. A `useId()` per row is not expressible —\n     the row count is data — and a key built from the value would collide with\n     anything else on the page holding the same status. */\n  const reasonIds = useId();\n  /* DX-5143: the trigger's `aria-label` REPLACES its content as its name, so the value would never be announced; the face is its description. */\n  const faceId = useId();\n  /* Always controlled, so a busy StatusSelect can refuse to open (and close an open popover) without switching between controlled and uncontrolled. */\n  const [open, setOpen] = useState(false);\n  /* DX-5143: a save that starts while the popover is open closes it for good; without this, `open` stays true and the popover reopens when the save ends. */\n  if (busy && open) setOpen(false);\n\n  for (const option of options) {\n    if (option.plain && (option.tone !== undefined || option.color !== undefined || option.icon !== undefined || option.dot)) {\n      throw new Error(`StatusSelect: option \"${option.value}\" is plain but also carries a tone, color, icon or dot. Plain is text only.`);\n    }\n    if (option.tone !== undefined && option.color !== undefined) {\n      throw new Error(`StatusSelect: option \"${option.value}\" carries both a tone and a color. Pass one.`);\n    }\n    if (option.refusal === \"\") {\n      throw new Error(\n        `StatusSelect: option \"${option.value}\" refuses with an empty reason. ` +\n          `A reason nobody can read leaves a dead row with nothing beside it — ` +\n          `omit \\`refusal\\` to allow the option, or say why it cannot be chosen.`,\n      );\n    }\n  }\n\n  if (current === undefined) {\n    /* THE RAW VALUE NEVER REACHES THE INTERFACE. It used to: `current?.label ??\n       value` painted the key into the badge, so a record in a stage the caller\n       had not listed rendered a coloured pill reading `extracting`. That is the\n       same defect `Select` shipped and fixed — a key where a label belongs —\n       and it is worse here, because a pill reads as a designed label rather\n       than as a fallback. See `select-label.test.tsx` for the reported case.\n\n       A placeholder alone would be QUIET, which is how the stale value stays in\n       the consumer's state unreported, so the warning names the value. */\n    devWarn(\n      \"StatusSelect\",\n      `no option carries ${JSON.stringify(value)} — the trigger is showing the placeholder ` +\n        \"rather than painting the raw value into the interface. Either the value is stale, or \" +\n        \"`options` is missing a status the record can actually hold; a status the consumer does \" +\n        \"not assign belongs in the list with a `refusal`, not out of it.\",\n    );\n  }\n\n  if (readOnly) {\n    return (\n      <span role=\"group\" className={cn(\"inline-flex\", className)} aria-label={ariaLabel}>\n        <OptionFace option={current} size={size}>{current === undefined ? (placeholder ?? strings.unknown) : undefined}</OptionFace>\n      </span>\n    );\n  }\n\n  return (\n    <Popover\n      open={open && !busy}\n      onOpenChange={(next) => !busy && setOpen(next)}\n      align=\"start\"\n      width=\"calc(15rem*var(--ui-scale))\"\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-describedby={faceId}\n          aria-disabled={busy || undefined}\n          aria-busy={busy || undefined}\n          className={cn(\n            busy && \"cursor-wait opacity-50\",\n            \"dx-tap group/status inline-flex items-center gap-1 rounded-full outline-none\",\n            \"transition-[var(--tx-colors),box-shadow,opacity] duration-(--dur-fast) ease-hover\",\n            /* DX-5143: a busy trigger is aria-disabled, not natively disabled, so it must also be excluded here or it undims under the pointer. */\n            \"hover:not-disabled:not-aria-busy:opacity-85\",\n            \"focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n            \"disabled:cursor-not-allowed disabled:opacity-50\",\n            className,\n          )}\n        >\n          <OptionFace option={current} size={size} id={faceId}>{current === undefined ? (placeholder ?? strings.unknown) : undefined}</OptionFace>\n          {!disabled && (\n            <Icon\n              name={changeIcon ? \"pencil\" : \"chevron-down\"}\n              /* THE GLYPH IS PART OF THE SIZE STEP, not a fixed ornament beside\n                 it. An `lg` pill (h-7, text-sm) with an `xs` chevron reads as a\n                 large badge that somebody forgot to finish — and \"the scale is\n                 consistent across components\" is the whole reason the step was\n                 added. `sm` and `md` keep the `xs` glyph they have always had,\n                 so nothing existing moves. */\n              size={size === \"lg\" ? \"sm\" : \"xs\"}\n              /* The colour half is not optional: naming a transition REPLACES\n                 the global one, so a bare `transition-transform` leaves this\n                 chevron cutting between themes while the badge beside it fades.\n                 The rendered walk in `audit:motion` never saw this — the\n                 chevron only exists inside an expanded card. The source sweep\n                 does. */\n              className={cn(\"text-tertiary transition-[var(--tx-colors),transform] duration-(--dur-fast)\", !changeIcon && \"group-data-popup-open/status:rotate-180\")}\n            />\n          )}\n        </button>\n      }\n    >\n      <div className=\"flex w-full min-w-0 flex-col gap-0.5\">\n        {options.map((option, index) => {\n          const refused = option.refusal !== undefined;\n          const reasonId = `${reasonIds}-${index}`;\n\n          const row = (\n            <button\n              type=\"button\"\n              /* The guard is the ABSENCE of a handler rather than a check\n                 inside one, so there is no path where a refused row reports a\n                 change. `aria-disabled` keeps it focusable, which is the only\n                 way a keyboard user ever reaches the sentence below. */\n              onClick={refused ? undefined : () => onValueChange(option.value)}\n              /* THE NAME IS THE LABEL, NOT THE LABEL PLUS THE REASON. The\n                 refusal sentence lives inside this button AND is pointed at by\n                 `aria-describedby`, so without this the row computed its name\n                 from its own contents and announced the sentence twice:\n\n                   NAME: \"Extracting documents The pipeline enters this stage on its own.\"\n                   DESC: \"The pipeline enters this stage on its own.\"\n\n                 `IconButton` documents the exact guard — \"`aria-label` replaces\n                 content outright, which is the one place that behaviour is\n                 working for us\" — and puts its own `sr-only` reason inside a\n                 button that carries one. This row cited that precedent without\n                 applying it. */\n              aria-label={option.label}\n              aria-current={option.value === value ? \"true\" : undefined}\n              aria-disabled={refused || undefined}\n              aria-describedby={refused ? reasonId : undefined}\n              className={cn(\n                \"dx-tap flex items-center justify-between gap-2 rounded-md px-1.5 py-1.5\",\n                \"text-left outline-none transition-[var(--tx-colors)] duration-(--dur-instant)\",\n                \"focus-visible:bg-surface-hover\",\n                refused\n                  ? /* Dimmed by LUMINANCE, and a cursor the pointer actually\n                       reaches — same treatment `IconButton` gives a refusing\n                       control, and for the same reason: it must not look\n                       armed, but it must still be askable. */\n                    \"cursor-not-allowed opacity-60\"\n                  : \"hover:bg-surface-hover\",\n              )}\n            >\n              <span className=\"flex min-w-0 flex-col items-start gap-1\">\n                <OptionFace option={option} size={size} />\n                {refused && (\n                  <span id={reasonId} className=\"text-2xs leading-snug text-tertiary\">\n                    {option.refusal}\n                  </span>\n                )}\n              </span>\n              {option.value === value && <Icon name=\"check\" size=\"xs\" className=\"shrink-0 text-success\" />}\n            </button>\n          );\n\n          /* A REFUSING ROW IS NOT WRAPPED IN `PopoverClose`. Wrapped, clicking\n             it dismisses the popup — which is exactly what a successful pick\n             looks like, so the refusal would read as having worked. The list\n             staying open IS the feedback. */\n          return refused ? (\n            <div key={option.value}>{row}</div>\n          ) : (\n            <PopoverClose key={option.value}>{row}</PopoverClose>\n          );\n        })}\n      </div>\n    </Popover>\n  );\n}\n"],"names":["PLAIN_TEXT_SIZE","OptionFace","option","size","id","children","jsx","cn","Badge","StatusSelect","value","options","onValueChange","ariaLabel","disabled","busy","readOnly","changeIcon","placeholder","className","strings","useUiStrings","current","reasonIds","useId","faceId","open","setOpen","useState","devWarn","Popover","next","jsxs","Icon","index","refused","reasonId","row","PopoverClose"],"mappings":"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"}