@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Button.js

@@ -0,0 +1,327 @@
+import { jsxs as i, Fragment as X, jsx as a } from "react/jsx-runtime";
+import { useState as Y, useRef as A, useId as O } from "react";
+import { useRender as q } from "@base-ui/react/use-render";
+import { tv as F } from "tailwind-variants";
+import { cn as m } from "../lib/cn.js";
+import { Spinner as L } from "./Spinner.js";
+import { Tooltip as Z } from "./Popover.js";
+const G = F({
+  base: [
+    "relative inline-flex select-none items-center justify-center gap-2 overflow-hidden",
+    "font-sans font-semibold whitespace-nowrap",
+    /* THE POINTER IS PART OF THE AFFORDANCE, and it belongs HERE.
+    
+           A `<button>` computes `cursor: default` — the same arrow as the dead
+           space around it — so nothing about resting on one says it can be
+           pressed. The library had been paying for that one control at a time:
+           31 hand-written `cursor-pointer`s scattered across components, and
+           every control whose author forgot read as inert. `Button` itself was
+           one of the ones that forgot, which meant EVERY consumer of it was too.
+    
+           Declaring it on the base makes it unforgettable rather than
+           remembered — a caller cannot ship a Button without it. */
+    "cursor-pointer",
+    "transition-[var(--tx-colors),box-shadow,translate]",
+    "duration-(--dur-instant) ease-hover",
+    "active:translate-y-px",
+    "disabled:pointer-events-none",
+    /* A LOADING button is still `disabled` — that is what stops a second submit
+       and blocks keyboard activation — but it must NOT wear the disabled
+       LOOK. Dimming it says "unavailable" when the truth is "working", and the
+       button visibly changes colour the instant you press it, which reads as
+       breakage. So the dimming is scoped to genuinely-disabled buttons only.
+       The size never moves either: the label stays in the layout at opacity 0
+       with the spinner absolutely positioned over it. */
+    "disabled:not-data-loading:opacity-45",
+    /* THE SOFT FORM OF OFF HAS TO DIM TOO, and until now only the native one
+           did. `aria-disabled` is this library's stance for a control that must
+           stay hoverable so it can explain itself (`IconButton.disabledReason`) —
+           and it is ALSO what a control becomes when it is not asking to: Base UI
+           deletes the native `disabled` attribute off a composite item that renders
+           another button (`useButton`: "the `disabled` prop needs to pass through 2
+           `useButton`s then finally delete the `disabled` attribute from DOM").
+    
+           MEASURED, because the form matters and the obvious reading of it is
+           wrong. `<ToolbarButton render={<Button disabled/>}/>` — disabled on the
+           INNER button — keeps `disabled=true` and dims as it always did. It is
+           `disabled` on the TOOLBAR ITEM that gets deleted: both
+           `<ToolbarButton disabled render={<Button/>}/>` and a plain
+           `<ToolbarButton disabled>` come out `disabled=false`,
+           `aria-disabled="true"`, `data-disabled=""` — full opacity, pointer
+           cursor, no-op click. A control that looks armed and does nothing is the
+           worst of the three states, and it was reported by a consumer who kept a
+           hand-rolled action bar rather than accept it.
+    
+           So the look is keyed to BOTH forms. Not `pointer-events-none` though:
+           that is exactly what makes a natively-disabled control unhoverable and
+           its tooltip unreachable, and reaching it is the entire reason the soft
+           form exists. The click is already inert — `Button` treats `aria-disabled`
+           as disabled for the ripple, Base UI no-ops the handler — so what was
+           missing was only the two lines that SAY so. */
+    "aria-disabled:not-data-loading:opacity-45",
+    "aria-disabled:cursor-not-allowed aria-disabled:active:translate-y-0",
+    "data-loading:pointer-events-none data-loading:cursor-wait"
+  ],
+  variants: {
+    variant: {
+      solid: [
+        "bg-accent text-accent-contrast shadow-sm",
+        "hover:bg-accent-hover hover:shadow-md",
+        "active:bg-accent-active active:shadow-xs"
+      ],
+      brand: [
+        "bg-brand text-brand-contrast shadow-sm",
+        "hover:bg-brand-hover hover:shadow-md",
+        "active:shadow-xs"
+      ],
+      subtle: ["bg-accent-subtle text-accent-text", "hover:bg-accent-subtle-hover"],
+      outline: [
+        "border border-border-strong bg-surface text-primary shadow-xs",
+        "hover:border-border-interactive hover:bg-surface-hover hover:shadow-sm",
+        "active:bg-surface-active"
+      ],
+      ghost: ["text-secondary", "hover:bg-surface-hover hover:text-primary"],
+      /* DESTRUCTIVE, BUT QUIET AT REST. A row of delete controls that is red
+               before you touch it turns the whole list into an alarm, and the one
+               genuinely dangerous thing on the page stops standing out. So the
+               resting state is the same neutral as `ghost` and the danger arrives on
+               approach — hover and focus alike, because a keyboard user reaches this
+               control without ever generating a hover.
+      
+               The tint is a BACKGROUND appearing, not only a hue rotation. Hue alone
+               would be the entire signal for anyone who cannot separate red from
+               grey; a filled plate behind the glyph changes luminance too, and reads
+               as "armed" without reference to colour. */
+      "ghost-danger": [
+        "text-secondary",
+        "hover:bg-danger-subtle hover:text-danger-text",
+        "focus-visible:bg-danger-subtle focus-visible:text-danger-text",
+        "active:bg-danger-subtle-hover"
+      ],
+      "outline-danger": [
+        "border border-border-strong bg-surface text-primary shadow-xs",
+        "hover:border-danger-border hover:bg-danger-subtle hover:text-danger-text hover:shadow-sm",
+        "focus-visible:border-danger-border focus-visible:bg-danger-subtle focus-visible:text-danger-text",
+        "active:bg-danger-subtle-hover"
+      ],
+      danger: [
+        "bg-danger text-danger-contrast shadow-sm",
+        "hover:bg-danger-hover hover:shadow-md",
+        "active:shadow-xs"
+      ],
+      /* A TOKEN, not `hover:brightness-110`. A filter does not change the
+         computed background, so this variant's hover was invisible to every
+         contrast check in the repo — and a brightness step is not a colour the
+         theme can tune, which is the whole point of the token layer. */
+      "danger-subtle": ["bg-danger-subtle text-danger-text", "hover:bg-danger-subtle-hover"],
+      /* CAUTION, NOT DANGER. A toned, bordered chip rather than a solid fill —
+         the same weight `outline-danger` carries, in the hue that means "this
+         is reversible but worth a second look" rather than "this destroys
+         something". Added SG-833 slice 7: three call sites
+         (`ConfirmAction.tsx`, `AnswerKeyPanel.tsx`, `DataPointModal.tsx` in
+         gpt-manager's Demand Desk) were each hand-rolling this exact recipe —
+         `border-warning-border bg-warning-subtle text-warning-text` — because
+         this design system had no `warning` variant. `--warning-subtle-hover`
+         did not exist before this change either (see `token-parity.test.ts`,
+         which used to assert exactly that as a regression guard); it is added
+         alongside this variant so the hover step is real rather than a class
+         that compiles to nothing. */
+      warning: [
+        "border border-warning-border bg-warning-subtle text-warning-text shadow-xs",
+        "hover:bg-warning-subtle-hover hover:shadow-sm",
+        "active:bg-warning-subtle-hover"
+      ],
+      link: [
+        "text-accent-text underline-offset-4 hover:underline",
+        "h-auto overflow-visible p-0 active:translate-y-0"
+      ]
+    },
+    size: {
+      /* DX-4031 — the dense size: 20px tall on every pointer, no tap floor (`--control-2xs`, scale.css). `overflow-visible`
+         because the 44px coarse-pointer target is an `::after` that reaches OUT of the box, and the base's
+         `overflow-hidden` would clip it; the ripple (which needs that clip) is skipped for this size. The reach reads
+         the row-owned `--hit-t` / `--hit-b` / `--hit-x`, falling back to centring out to the target, so a row of dense
+         controls can tile its targets instead of overlapping. */
+      "2xs": [
+        "h-control-2xs overflow-visible rounded-sm px-2 text-2xs gap-1",
+        "pointer-coarse:after:absolute pointer-coarse:after:content-['']",
+        "pointer-coarse:after:top-[calc(var(--hit-t,var(--hit-reach-2xs))*-1)]",
+        "pointer-coarse:after:bottom-[calc(var(--hit-b,var(--hit-reach-2xs))*-1)]",
+        "pointer-coarse:after:left-[calc(var(--hit-x,var(--hit-reach-2xs))*-1)]",
+        "pointer-coarse:after:right-[calc(var(--hit-x,var(--hit-reach-2xs))*-1)]"
+      ],
+      xs: "h-control-xs rounded-sm px-2.5 text-2xs gap-1.5",
+      sm: "h-control-sm rounded-md px-3.5 text-xs",
+      md: "h-control-md rounded-md px-5 text-sm",
+      lg: "h-control-lg rounded-lg px-6 text-md",
+      xl: "h-control-xl rounded-lg px-8 text-lg",
+      /* DX-3406 — auto-height, wrapping, left-aligned: the shape a fixed
+         single-line `h-control-*` size can never be. Every other size pins a
+         fixed height and forbids wrapping (`whitespace-nowrap` on the shared
+         `base` above) because a control-height button is a single-line
+         affordance; a rich multi-line list-item row is a genuinely different
+         shape, not a bigger version of the same one — `justify-start` and
+         `items-start` (against `base`'s `justify-center`/`items-center`)
+         top-left-align whatever's inside instead of centering it, matching
+         how a text row reads, not how an icon button does. `ListItemButton`
+         below is the intended consumer; used directly, `children` is
+         whatever multi-line content the caller composes. */
+      list: "h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal"
+    },
+    /* Square icon-only sizing. Width is pinned to the control height, so the
+           hit-area stays square and can never drop below the tap minimum.
+    
+           DX-5319 - `shrink-0` is load-bearing, not tidiness. `aspect-square` sizes the box off a definite height, but a flex
+           item still shrinks, and the base's `overflow-hidden` gives it an automatic minimum width of 0: in a row that ran out of
+           room (an app header on a phone) these buttons were squeezed to thin vertical lines while their siblings kept their
+           size. `IconButton` carried this class alone, so every other icon-only `Button` (ThemeMenu, DevToolsPopover) shrank. */
+    iconOnly: { true: "px-0 aspect-square shrink-0", false: "" },
+    fullWidth: { true: "w-full", false: "" }
+  },
+  compoundVariants: [
+    { variant: "link", size: ["2xs", "xs", "sm", "md", "lg", "xl"], class: "h-auto px-0" }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    size: "md",
+    iconOnly: !1,
+    fullWidth: !1
+  }
+}), H = { "2xs": "xs", xs: "xs", sm: "sm", md: "md", lg: "lg", xl: "xl", list: "md" };
+function J({
+  className: l,
+  variant: n,
+  size: o,
+  iconOnly: d,
+  fullWidth: c,
+  render: h,
+  loading: t = !1,
+  leadingIcon: N,
+  trailingIcon: k,
+  disabled: v,
+  children: z,
+  onPointerDown: I,
+  onClick: j,
+  disabledReason: u,
+  disabledReasonTooltip: D = !0,
+  attention: f = !1,
+  ref: S,
+  "aria-disabled": _,
+  ...B
+}) {
+  const [C, p] = Y([]), E = A(0), w = O(), s = u !== void 0, x = s ? !0 : _, b = t || v || s || x === !0 || x === "true";
+  function M(e) {
+    if (s) {
+      e.preventDefault();
+      return;
+    }
+    j?.(e);
+  }
+  function P(e) {
+    if (I?.(e), n === "link" || o === "2xs" || b) return;
+    const r = e.currentTarget.getBoundingClientRect(), g = Math.max(e.clientX - r.left, r.right - e.clientX), R = Math.max(e.clientY - r.top, r.bottom - e.clientY), T = 2 * Math.hypot(g, R), V = {
+      id: E.current++,
+      x: e.clientX - r.left,
+      y: e.clientY - r.top,
+      size: T
+    };
+    p((W) => [...W, V]);
+  }
+  const y = q({
+    render: h,
+    ref: S,
+    // I18N-ALLOW: DOM tag name handed to the Base UI render slot
+    defaultTagName: "button",
+    props: {
+      className: m(
+        G({ variant: n, size: o, iconOnly: d, fullWidth: c }),
+        f && !b && "dx-attention",
+        l
+      ),
+      "data-attention": f && !b ? "" : void 0,
+      disabled: v ?? t,
+      "aria-disabled": x,
+      /* The tooltip below carries the VISUAL reason; Base UI's tooltip does not
+         wire `aria-describedby` back to its trigger (measured, not assumed —
+         see `IconButton`'s own header), so a screen reader would announce the
+         button, dimmed, and never say why without this. */
+      "aria-describedby": s ? w : void 0,
+      "data-loading": t || void 0,
+      "aria-busy": t || void 0,
+      onPointerDown: P,
+      onClick: M,
+      children: /* @__PURE__ */ i(X, { children: [
+        C.map((e) => /* @__PURE__ */ a(
+          "span",
+          {
+            "aria-hidden": !0,
+            onAnimationEnd: () => p((r) => r.filter((g) => g.id !== e.id)),
+            className: "pointer-events-none absolute rounded-full bg-current opacity-0 [animation:dx-ripple_var(--dur-slower)_var(--ease-standard)_forwards]",
+            style: {
+              left: e.x - e.size / 2,
+              top: e.y - e.size / 2,
+              width: e.size,
+              height: e.size
+            }
+          },
+          e.id
+        )),
+        t && /* @__PURE__ */ a("span", { className: "absolute inset-0 grid place-items-center", children: /* @__PURE__ */ a(L, { size: H[o ?? "md"] }) }),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            className: m(
+              "inline-flex items-center gap-[inherit] transition-[var(--tx-colors),opacity] duration-(--dur-fast)",
+              t && "opacity-0"
+            ),
+            children: [
+              N,
+              z,
+              k
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ a("span", { id: w, className: "sr-only", children: u })
+      ] }),
+      ...B
+    }
+  });
+  return !s || !D ? y : /* @__PURE__ */ a(Z, { content: u, side: "top", children: y });
+}
+function ae({
+  leading: l,
+  detail: n,
+  subline: o,
+  selected: d = !1,
+  variant: c = "ghost",
+  className: h,
+  ...t
+}) {
+  return /* @__PURE__ */ a(
+    J,
+    {
+      variant: c,
+      size: "list",
+      fullWidth: !0,
+      "data-selected": d ? "true" : void 0,
+      className: m(d && "bg-accent-subtle hover:bg-accent-subtle-hover", h),
+      ...t,
+      children: /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left", children: [
+        /* @__PURE__ */ i("span", { className: "block w-full text-sm text-primary", children: [
+          /* @__PURE__ */ a("span", { className: "font-semibold", children: l }),
+          n != null ? /* @__PURE__ */ i("span", { className: "font-normal text-secondary", children: [
+            " ",
+            n
+          ] }) : null
+        ] }),
+        o != null ? /* @__PURE__ */ a("span", { className: "block w-full font-normal text-xs text-tertiary", children: o }) : null
+      ] })
+    }
+  );
+}
+export {
+  J as Button,
+  ae as ListItemButton,
+  G as buttonVariants
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, MouseEvent, ReactNode, Ref } from \"react\";\nimport { useId, useRef, useState } from \"react\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Spinner } from \"./Spinner\";\nimport { Tooltip } from \"./Popover\";\n\n/* ----------------------------------------------------------------------------\n   THE PRESS AFFORDANCE\n\n   A 1px translate-y on :active, paired with a shadow drop. That pairing is what\n   makes a button read as a physical key rather than a colour swap — the shadow\n   shrinking as the surface descends is the depth cue; the translate alone reads\n   as a glitch, and the colour change alone reads as a link.\n\n   It runs at --dur-instant (70ms). Press feedback is the highest-frequency\n   motion in any UI and the only band where slower reads as broken rather than\n   as considered.\n\n   The ripple below is the second half: press communicates that the button\n   received the input, the ripple communicates WHERE. It is a scale+opacity\n   transform on a single absolutely-positioned span, so it costs no layout and\n   no paint beyond its own bounds.\n\n   CONSUMERS: DO NOT POSITION A BUTTON WITH A TRANSLATE UTILITY.\n\n   `active:translate-y-px` writes the SAME property a positioning translate\n   writes, so on mousedown :active REPLACES your offset instead of adding to\n   it. A button centred with `top-1/2 -translate-y-1/2` jumps down by half its\n   own height the instant it is pressed — measured in gpt-manager's Demand Desk\n   as a 15px drop on a 28px icon button, which read as \"the button moves when I\n   click it\" and survived many attempts to fix it in the consumer's own layout\n   code, because the cause is here and the symptom is there.\n\n   Centre with something that cannot collide: `inset-y-0 my-auto` for a fixed\n   height, or a positioned wrapper with the button static inside it.\n   -------------------------------------------------------------------------- */\n\nconst button = tv({\n  base: [\n    \"relative inline-flex select-none items-center justify-center gap-2 overflow-hidden\",\n    \"font-sans font-semibold whitespace-nowrap\",\n    /* THE POINTER IS PART OF THE AFFORDANCE, and it belongs HERE.\n\n       A `<button>` computes `cursor: default` — the same arrow as the dead\n       space around it — so nothing about resting on one says it can be\n       pressed. The library had been paying for that one control at a time:\n       31 hand-written `cursor-pointer`s scattered across components, and\n       every control whose author forgot read as inert. `Button` itself was\n       one of the ones that forgot, which meant EVERY consumer of it was too.\n\n       Declaring it on the base makes it unforgettable rather than\n       remembered — a caller cannot ship a Button without it. */\n    \"cursor-pointer\",\n    \"transition-[var(--tx-colors),box-shadow,translate]\",\n    \"duration-(--dur-instant) ease-hover\",\n    \"active:translate-y-px\",\n    \"disabled:pointer-events-none\",\n    /* A LOADING button is still `disabled` — that is what stops a second submit\n       and blocks keyboard activation — but it must NOT wear the disabled\n       LOOK. Dimming it says \"unavailable\" when the truth is \"working\", and the\n       button visibly changes colour the instant you press it, which reads as\n       breakage. So the dimming is scoped to genuinely-disabled buttons only.\n       The size never moves either: the label stays in the layout at opacity 0\n       with the spinner absolutely positioned over it. */\n    \"disabled:not-data-loading:opacity-45\",\n    /* THE SOFT FORM OF OFF HAS TO DIM TOO, and until now only the native one\n       did. `aria-disabled` is this library's stance for a control that must\n       stay hoverable so it can explain itself (`IconButton.disabledReason`) —\n       and it is ALSO what a control becomes when it is not asking to: Base UI\n       deletes the native `disabled` attribute off a composite item that renders\n       another button (`useButton`: \"the `disabled` prop needs to pass through 2\n       `useButton`s then finally delete the `disabled` attribute from DOM\").\n\n       MEASURED, because the form matters and the obvious reading of it is\n       wrong. `<ToolbarButton render={<Button disabled/>}/>` — disabled on the\n       INNER button — keeps `disabled=true` and dims as it always did. It is\n       `disabled` on the TOOLBAR ITEM that gets deleted: both\n       `<ToolbarButton disabled render={<Button/>}/>` and a plain\n       `<ToolbarButton disabled>` come out `disabled=false`,\n       `aria-disabled=\"true\"`, `data-disabled=\"\"` — full opacity, pointer\n       cursor, no-op click. A control that looks armed and does nothing is the\n       worst of the three states, and it was reported by a consumer who kept a\n       hand-rolled action bar rather than accept it.\n\n       So the look is keyed to BOTH forms. Not `pointer-events-none` though:\n       that is exactly what makes a natively-disabled control unhoverable and\n       its tooltip unreachable, and reaching it is the entire reason the soft\n       form exists. The click is already inert — `Button` treats `aria-disabled`\n       as disabled for the ripple, Base UI no-ops the handler — so what was\n       missing was only the two lines that SAY so. */\n    \"aria-disabled:not-data-loading:opacity-45\",\n    \"aria-disabled:cursor-not-allowed aria-disabled:active:translate-y-0\",\n    \"data-loading:pointer-events-none data-loading:cursor-wait\",\n  ],\n  variants: {\n    variant: {\n      solid: [\n        \"bg-accent text-accent-contrast shadow-sm\",\n        \"hover:bg-accent-hover hover:shadow-md\",\n        \"active:bg-accent-active active:shadow-xs\",\n      ],\n      brand: [\n        \"bg-brand text-brand-contrast shadow-sm\",\n        \"hover:bg-brand-hover hover:shadow-md\",\n        \"active:shadow-xs\",\n      ],\n      subtle: [\"bg-accent-subtle text-accent-text\", \"hover:bg-accent-subtle-hover\"],\n      outline: [\n        \"border border-border-strong bg-surface text-primary shadow-xs\",\n        \"hover:border-border-interactive hover:bg-surface-hover hover:shadow-sm\",\n        \"active:bg-surface-active\",\n      ],\n      ghost: [\"text-secondary\", \"hover:bg-surface-hover hover:text-primary\"],\n      /* DESTRUCTIVE, BUT QUIET AT REST. A row of delete controls that is red\n         before you touch it turns the whole list into an alarm, and the one\n         genuinely dangerous thing on the page stops standing out. So the\n         resting state is the same neutral as `ghost` and the danger arrives on\n         approach — hover and focus alike, because a keyboard user reaches this\n         control without ever generating a hover.\n\n         The tint is a BACKGROUND appearing, not only a hue rotation. Hue alone\n         would be the entire signal for anyone who cannot separate red from\n         grey; a filled plate behind the glyph changes luminance too, and reads\n         as \"armed\" without reference to colour. */\n      \"ghost-danger\": [\n        \"text-secondary\",\n        \"hover:bg-danger-subtle hover:text-danger-text\",\n        \"focus-visible:bg-danger-subtle focus-visible:text-danger-text\",\n        \"active:bg-danger-subtle-hover\",\n      ],\n      \"outline-danger\": [\n        \"border border-border-strong bg-surface text-primary shadow-xs\",\n        \"hover:border-danger-border hover:bg-danger-subtle hover:text-danger-text hover:shadow-sm\",\n        \"focus-visible:border-danger-border focus-visible:bg-danger-subtle focus-visible:text-danger-text\",\n        \"active:bg-danger-subtle-hover\",\n      ],\n      danger: [\n        \"bg-danger text-danger-contrast shadow-sm\",\n        \"hover:bg-danger-hover hover:shadow-md\",\n        \"active:shadow-xs\",\n      ],\n      /* A TOKEN, not `hover:brightness-110`. A filter does not change the\n         computed background, so this variant's hover was invisible to every\n         contrast check in the repo — and a brightness step is not a colour the\n         theme can tune, which is the whole point of the token layer. */\n      \"danger-subtle\": [\"bg-danger-subtle text-danger-text\", \"hover:bg-danger-subtle-hover\"],\n      /* CAUTION, NOT DANGER. A toned, bordered chip rather than a solid fill —\n         the same weight `outline-danger` carries, in the hue that means \"this\n         is reversible but worth a second look\" rather than \"this destroys\n         something\". Added SG-833 slice 7: three call sites\n         (`ConfirmAction.tsx`, `AnswerKeyPanel.tsx`, `DataPointModal.tsx` in\n         gpt-manager's Demand Desk) were each hand-rolling this exact recipe —\n         `border-warning-border bg-warning-subtle text-warning-text` — because\n         this design system had no `warning` variant. `--warning-subtle-hover`\n         did not exist before this change either (see `token-parity.test.ts`,\n         which used to assert exactly that as a regression guard); it is added\n         alongside this variant so the hover step is real rather than a class\n         that compiles to nothing. */\n      warning: [\n        \"border border-warning-border bg-warning-subtle text-warning-text shadow-xs\",\n        \"hover:bg-warning-subtle-hover hover:shadow-sm\",\n        \"active:bg-warning-subtle-hover\",\n      ],\n      link: [\n        \"text-accent-text underline-offset-4 hover:underline\",\n        \"h-auto overflow-visible p-0 active:translate-y-0\",\n      ],\n    },\n    size: {\n      /* DX-4031 — the dense size: 20px tall on every pointer, no tap floor (`--control-2xs`, scale.css). `overflow-visible`\n         because the 44px coarse-pointer target is an `::after` that reaches OUT of the box, and the base's\n         `overflow-hidden` would clip it; the ripple (which needs that clip) is skipped for this size. The reach reads\n         the row-owned `--hit-t` / `--hit-b` / `--hit-x`, falling back to centring out to the target, so a row of dense\n         controls can tile its targets instead of overlapping. */\n      \"2xs\": [\n        \"h-control-2xs overflow-visible rounded-sm px-2 text-2xs gap-1\",\n        \"pointer-coarse:after:absolute pointer-coarse:after:content-['']\",\n        \"pointer-coarse:after:top-[calc(var(--hit-t,var(--hit-reach-2xs))*-1)]\",\n        \"pointer-coarse:after:bottom-[calc(var(--hit-b,var(--hit-reach-2xs))*-1)]\",\n        \"pointer-coarse:after:left-[calc(var(--hit-x,var(--hit-reach-2xs))*-1)]\",\n        \"pointer-coarse:after:right-[calc(var(--hit-x,var(--hit-reach-2xs))*-1)]\",\n      ],\n      xs: \"h-control-xs rounded-sm px-2.5 text-2xs gap-1.5\",\n      sm: \"h-control-sm rounded-md px-3.5 text-xs\",\n      md: \"h-control-md rounded-md px-5 text-sm\",\n      lg: \"h-control-lg rounded-lg px-6 text-md\",\n      xl: \"h-control-xl rounded-lg px-8 text-lg\",\n      /* DX-3406 — auto-height, wrapping, left-aligned: the shape a fixed\n         single-line `h-control-*` size can never be. Every other size pins a\n         fixed height and forbids wrapping (`whitespace-nowrap` on the shared\n         `base` above) because a control-height button is a single-line\n         affordance; a rich multi-line list-item row is a genuinely different\n         shape, not a bigger version of the same one — `justify-start` and\n         `items-start` (against `base`'s `justify-center`/`items-center`)\n         top-left-align whatever's inside instead of centering it, matching\n         how a text row reads, not how an icon button does. `ListItemButton`\n         below is the intended consumer; used directly, `children` is\n         whatever multi-line content the caller composes. */\n      list: \"h-auto w-full items-start justify-start gap-3 rounded-md px-3 py-2 text-left text-sm whitespace-normal\",\n    },\n    /* Square icon-only sizing. Width is pinned to the control height, so the\n       hit-area stays square and can never drop below the tap minimum.\n\n       DX-5319 - `shrink-0` is load-bearing, not tidiness. `aspect-square` sizes the box off a definite height, but a flex\n       item still shrinks, and the base's `overflow-hidden` gives it an automatic minimum width of 0: in a row that ran out of\n       room (an app header on a phone) these buttons were squeezed to thin vertical lines while their siblings kept their\n       size. `IconButton` carried this class alone, so every other icon-only `Button` (ThemeMenu, DevToolsPopover) shrank. */\n    iconOnly: { true: \"px-0 aspect-square shrink-0\", false: \"\" },\n    fullWidth: { true: \"w-full\", false: \"\" },\n  },\n  compoundVariants: [\n    { variant: \"link\", size: [\"2xs\", \"xs\", \"sm\", \"md\", \"lg\", \"xl\"], class: \"h-auto px-0\" },\n  ],\n  defaultVariants: {\n    variant: \"solid\",\n    size: \"md\",\n    iconOnly: false,\n    fullWidth: false,\n  },\n});\n\nexport interface ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof button> {\n  /**\n   * Render as a different element, keeping every style and behaviour.\n   *\n   * Takes the element itself (`render={<a href=\"/x\" />}`) rather than a\n   * `asChild` boolean over `children`. The difference matters: with `asChild`\n   * the rendered element is buried inside children and TypeScript cannot tell\n   * you that you passed two of them, which fails at runtime. Here the element\n   * is a prop with a type.\n   */\n  render?: useRender.RenderProp;\n  /** Show a spinner and block interaction. Width is preserved — no layout shift. */\n  loading?: boolean;\n  /** Element rendered before the label. */\n  leadingIcon?: ReactNode;\n  /** Element rendered after the label. */\n  trailingIcon?: ReactNode;\n  /**\n   * Unavailable, AND WHY — the labelled twin of `IconButton.disabledReason`\n   * (SG-833 slice 7), added here because a labelled `Button` refuses in\n   * silence exactly as an icon-only one used to: `ConfirmAction.tsx` in\n   * gpt-manager's Demand Desk was disabling its trigger with a bare\n   * `disabled` boolean and a SEPARATE hand-rolled `Tooltip` wrapper to explain\n   * why, because `Button` itself had no way to carry the reason.\n   *\n   * Setting this REPLACES `disabled`/`aria-disabled` for the purpose of this\n   * render: the button becomes soft-disabled (`aria-disabled`, not the native\n   * attribute), so it stays focusable and hoverable and the reason stays\n   * reachable — a natively `disabled` control drops out of hit-testing and\n   * the tab order, which is exactly what makes a mute refusal unrepresentable\n   * disguised as a keyboard-accessible one. The reason is announced as the\n   * control's accessible description (`aria-describedby`, wired to a visually\n   * hidden span) and shown as a tooltip on hover and on focus — see\n   * `IconButton`'s own header for why Base UI's tooltip alone is not enough\n   * for the announcement.\n   */\n  disabledReason?: string;\n  /**\n   * Whether `Button` wraps ITSELF in the `disabledReason` tooltip. Defaults to\n   * `true` — a plain, directly-used `Button` needs this, since nothing else\n   * will show the reason.\n   *\n   * `false` is for a caller that already wraps the rendered control in its\n   * own, wider-scoped tooltip — `IconButton` (SG-839) is the one case today:\n   * it needs a tooltip in MORE states than `Button` does on its own (naming\n   * itself while enabled, not only explaining itself while off), so it\n   * supplies that tooltip itself and sets this to `false` to avoid nesting two\n   * tooltips around one trigger. Every other piece of the `disabledReason`\n   * contract — the `aria-disabled`/`aria-describedby` wiring, the `sr-only`\n   * description, the click guard, the dimmed/not-allowed styling — stays\n   * here regardless of this flag; only the self-wrapping tooltip is optional.\n   */\n  disabledReasonTooltip?: boolean;\n  /**\n   * A soft animated glow with a glint sweeping across the button — \"this one\n   * is waiting for you\", the way a game menu lights the choice it wants made.\n   * Theme tokens `--attention-*`; the effect is a `box-shadow` and a\n   * pseudo-element, so it never moves the layout. Under reduced motion it is a\n   * static highlight ring instead of an animation. Also on `IconButton`.\n   *\n   * TURN IT ON ONLY WHILE AN ACTION IS WAITING FOR THIS VIEWER. Same warning\n   * as `Badge.pulse`: an effect that runs on a button nobody needs to press,\n   * or that a viewer who cannot act still sees, captures attention\n   * permanently and therefore stops meaning anything. The state it signals\n   * must also be in the button's label or tooltip — the glow is never the only\n   * signal. Ignored while the button is disabled, loading or soft-disabled.\n   */\n  attention?: boolean;\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/* DX-4031 — `Spinner` only knows the single-line `IconSize` scale: `list` has no matching size (DX-3406) and gets\n   an `md` one; `2xs` gets the smallest glyph. */\nconst SPINNER_SIZE = { \"2xs\": \"xs\", xs: \"xs\", sm: \"sm\", md: \"md\", lg: \"lg\", xl: \"xl\", list: \"md\" } as const;\n\ntype Ripple = { id: number; x: number; y: number; size: number };\n\nexport function Button({\n  className,\n  variant,\n  size,\n  iconOnly,\n  fullWidth,\n  render,\n  loading = false,\n  leadingIcon,\n  trailingIcon,\n  disabled,\n  children,\n  onPointerDown,\n  onClick,\n  disabledReason,\n  disabledReasonTooltip = true,\n  attention = false,\n  ref,\n  \"aria-disabled\": ariaDisabled,\n  ...props\n}: ButtonProps) {\n  const [ripples, setRipples] = useState<Ripple[]>([]);\n  const nextId = useRef(0);\n  const reasonId = useId();\n\n  /* `disabledReason` forces the soft-disabled form below — see the prop's own\n     doc. `off` is the same name `IconButton` uses for this same condition. */\n  const off = disabledReason !== undefined;\n  const effectiveAriaDisabled = off ? true : ariaDisabled;\n\n  /* `aria-disabled` counts as disabled FOR FEEDBACK, even though it leaves the\n     element interactive. It is the softer form of off — used when a control\n     has to stay hoverable and focusable so it can explain WHY it is off (see\n     `disabledReason` above and `IconButton`'s own). Native `disabled` cannot\n     do that: it drops the element out of the tab order and, with\n     `disabled:pointer-events-none` above, out of hit-testing entirely, so\n     nothing can be hovered and no tooltip can ever be reached.\n\n     But \"still interactive\" must not mean \"still looks like it worked\". A\n     ripple firing under the pointer says the press landed, which is the exact\n     opposite of what an unavailable control should communicate. */\n  const inert =\n    loading || disabled || off || effectiveAriaDisabled === true || effectiveAriaDisabled === \"true\";\n\n  function handleClick(event: MouseEvent<HTMLButtonElement>) {\n    /* Mirrors `IconButton.handleClick` — a soft-disabled control is still\n       clickable as far as the DOM is concerned, so the guard has to live here\n       rather than be left to every caller to remember. */\n    if (off) {\n      event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n  }\n\n  function handlePointerDown(event: React.PointerEvent<HTMLButtonElement>) {\n    onPointerDown?.(event);\n    if (variant === \"link\" || size === \"2xs\" || inert) return;\n\n    const rect = event.currentTarget.getBoundingClientRect();\n    /* Diameter is twice the distance to the FURTHEST corner, so the circle\n       always reaches every edge no matter where in the button it starts. */\n    const dx = Math.max(event.clientX - rect.left, rect.right - event.clientX);\n    const dy = Math.max(event.clientY - rect.top, rect.bottom - event.clientY);\n    const diameter = 2 * Math.hypot(dx, dy);\n\n    const ripple: Ripple = {\n      id: nextId.current++,\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n      size: diameter,\n    };\n    setRipples((current) => [...current, ripple]);\n  }\n\n  const rendered = useRender({\n    render,\n    ref,\n    // I18N-ALLOW: DOM tag name handed to the Base UI render slot\n    defaultTagName: \"button\",\n    props: {\n      className: cn(\n        button({ variant, size, iconOnly, fullWidth }),\n        attention && !inert && \"dx-attention\",\n        className,\n      ),\n      \"data-attention\": attention && !inert ? \"\" : undefined,\n      disabled: disabled ?? loading,\n      \"aria-disabled\": effectiveAriaDisabled,\n      /* The tooltip below carries the VISUAL reason; Base UI's tooltip does not\n         wire `aria-describedby` back to its trigger (measured, not assumed —\n         see `IconButton`'s own header), so a screen reader would announce the\n         button, dimmed, and never say why without this. */\n      \"aria-describedby\": off ? reasonId : undefined,\n      \"data-loading\": loading || undefined,\n      \"aria-busy\": loading || undefined,\n      onPointerDown: handlePointerDown,\n      onClick: handleClick,\n      children: (\n        <>\n          {ripples.map((ripple) => (\n            <span\n              key={ripple.id}\n              aria-hidden\n              /* Removing the node on animationend rather than on a timer keeps\n                 the two in sync when the duration is retuned or scaled down by\n                 the reduced-motion scalar. */\n              onAnimationEnd={() =>\n                setRipples((current) => current.filter((r) => r.id !== ripple.id))\n              }\n              className=\"pointer-events-none absolute rounded-full bg-current opacity-0 [animation:dx-ripple_var(--dur-slower)_var(--ease-standard)_forwards]\"\n              style={{\n                left: ripple.x - ripple.size / 2,\n                top: ripple.y - ripple.size / 2,\n                width: ripple.size,\n                height: ripple.size,\n              }}\n            />\n          ))}\n\n          {loading && (\n            <span className=\"absolute inset-0 grid place-items-center\">\n              {/* DX-3406 — `size: \"list\"` has no matching `IconSize`\n                  (`Spinner` only knows the single-line control scale); a\n                  loading list-item row gets the same spinner an `md` button\n                  would rather than a type it doesn't understand. */}\n              {/* I18N-ALLOW: button size token used as a lookup key */}\n              <Spinner size={SPINNER_SIZE[size ?? \"md\"]} />\n            </span>\n          )}\n\n          {/* opacity-0, NOT `invisible`/`hidden`: visibility:hidden removes the\n              label from the accessibility tree, leaving a loading button with no\n              accessible name at all — it announces as an unlabelled button.\n              Opacity keeps it announced while hiding it visually, and the\n              wrapper preserves the button's width so nothing shifts. */}\n          <span\n            className={cn(\n              \"inline-flex items-center gap-[inherit] transition-[var(--tx-colors),opacity] duration-(--dur-fast)\",\n              loading && \"opacity-0\",\n            )}\n          >\n            {leadingIcon}\n            {children}\n            {trailingIcon}\n          </span>\n\n          {/* Inside the button on purpose — see `IconButton`'s identical\n              placement. `aria-label`, when a caller sets one, replaces content\n              outright rather than extending it, so this cannot pollute the\n              name; a labelled `Button` has no `aria-label` in the common case,\n              so the visible children plus this sentence both read out. */}\n          {off && (\n            <span id={reasonId} className=\"sr-only\">\n              {disabledReason}\n            </span>\n          )}\n        </>\n      ),\n      ...props,\n    },\n  });\n\n  /* Only wrapped when soft-disabled, and only when the caller wants Button to\n     do the wrapping itself — see `disabledReasonTooltip`'s own doc. An enabled\n     labelled Button already has a visible name in its children — unlike\n     `IconButton`, it does not also need a tooltip naming it, only one\n     explaining why it currently can't be used. */\n  if (!off || !disabledReasonTooltip) return rendered;\n\n  return (\n    <Tooltip content={disabledReason} side=\"top\">\n      {rendered}\n    </Tooltip>\n  );\n}\n\n/* A module-internal export ONLY, not re-exported from `src/index.ts`.\n   `Toggle.tsx`'s `ToolbarButton` imports this by name (`import { buttonVariants }\n   from \"./Button\"`) to wear the identical recipe `Button` compiles, and\n   `button.test.tsx`/`icon-button.test.tsx`/`toolbar.test.tsx` exercise it\n   directly — so the recipe itself needs a name other components can import,\n   even though nothing outside this package does. */\nexport { button as buttonVariants };\n\n/* ----------------------------------------------------------------------------\n   LIST-ITEM BUTTON (DX-3406).\n\n   The `size: \"list\"` variant above is the raw shape; this is the primitive a\n   consumer actually reaches for. Three consumers outside this library\n   (`packages/danxbot-docs`'s Flow/Lifecycle step diagrams, and a fourth gap\n   this closes for future ones) hand-rolled a native `<button\n   class=\"docs-step-list__item\" data-selected>` for exactly this content\n   shape — bold leading text, wrapping secondary detail on the same line, an\n   optional muted note on its own line below — because `Button`'s `xs`–`xl`\n   sizes are fixed-height and `whitespace-nowrap`. Rather than let every\n   consumer re-derive that markup (and its own `data-selected` styling) by\n   hand again, this wraps `Button` itself (`size=\"list\"`, structured content\n   props instead of a single `children`) so every affordance `Button` already\n   carries — ripple, `disabled`/`aria-disabled`, `disabledReason`, `render` —\n   comes along for free instead of being reimplemented a second time.\n   -------------------------------------------------------------------------- */\n\nexport interface ListItemButtonProps\n  extends Omit<ButtonProps, \"size\" | \"iconOnly\" | \"fullWidth\" | \"children\"> {\n  /**\n   * The row's bold leading identifier — an actor name, a from-state, a\n   * category label. Always rendered `font-semibold`, on the same wrapping\n   * line as `detail`.\n   */\n  leading: ReactNode;\n  /**\n   * Secondary text following `leading` on the SAME wrapping line — the\n   * action, the target, whatever finishes the sentence `leading` starts.\n   * Rendered `font-normal`; wraps together with `leading` as one line of\n   * text, not as a separate flex item.\n   */\n  detail?: ReactNode;\n  /**\n   * A muted line rendered on its OWN row below `leading`/`detail` — a\n   * trigger, a guard clause, any extra context. Never inlined with the line\n   * above, unlike `detail`.\n   */\n  subline?: ReactNode;\n  /**\n   * Marks this row as the current selection. Stamps `data-selected=\"true\"`\n   * on the rendered `<button>` (omitted entirely, not `\"false\"`, when unset —\n   * the same convention the native `docs-step-list__item` buttons this\n   * replaces already used, so an existing `[data-selected]` CSS selector\n   * keeps working unchanged) and applies the library's own selected\n   * treatment rather than leaving every consumer to invent one.\n   */\n  selected?: boolean;\n}\n\n/**\n * A list-item trigger for multi-line, rich-content rows that `Button`'s\n * fixed single-line sizes cannot fit — see the file header above.\n *\n * `fullWidth` is not a prop here: a list-item row always spans its `<li>`,\n * which is the entire reason this exists, so it's forced rather than left\n * for every caller to remember.\n */\nexport function ListItemButton({\n  leading,\n  detail,\n  subline,\n  selected = false,\n  variant = \"ghost\",\n  className,\n  ...props\n}: ListItemButtonProps) {\n  return (\n    <Button\n      variant={variant}\n      size=\"list\"\n      fullWidth\n      data-selected={selected ? \"true\" : undefined}\n      className={cn(selected && \"bg-accent-subtle hover:bg-accent-subtle-hover\", className)}\n      {...props}\n    >\n      <span className=\"flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left\">\n        <span className=\"block w-full text-sm text-primary\">\n          <span className=\"font-semibold\">{leading}</span>\n          {detail != null ? <span className=\"font-normal text-secondary\"> {detail}</span> : null}\n        </span>\n        {subline != null ? (\n          <span className=\"block w-full font-normal text-xs text-tertiary\">{subline}</span>\n        ) : null}\n      </span>\n    </Button>\n  );\n}\n"],"names":["button","tv","SPINNER_SIZE","Button","className","variant","size","iconOnly","fullWidth","render","loading","leadingIcon","trailingIcon","disabled","children","onPointerDown","onClick","disabledReason","disabledReasonTooltip","attention","ref","ariaDisabled","props","ripples","setRipples","useState","nextId","useRef","reasonId","useId","off","effectiveAriaDisabled","inert","handleClick","event","handlePointerDown","rect","dx","dy","diameter","ripple","current","rendered","useRender","cn","jsxs","Fragment","jsx","r","Spinner","Tooltip","ListItemButton","leading","detail","subline","selected"],"mappings":";;;;;;;AAuCA,MAAMA,IAASC,EAAG;AAAA,EAChB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0BA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,SAAS;AAAA,MACP,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAQ,CAAC,qCAAqC,8BAA8B;AAAA,MAC5E,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO,CAAC,kBAAkB,2CAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYrE,gBAAgB;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,kBAAkB;AAAA,QAChB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMF,iBAAiB,CAAC,qCAAqC,8BAA8B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAarF,SAAS;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,MAAM;AAAA,QACJ;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMJ,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYJ,MAAM;AAAA,IAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASR,UAAU,EAAE,MAAM,+BAA+B,OAAO,GAAA;AAAA,IACxD,WAAW,EAAE,MAAM,UAAU,OAAO,GAAA;AAAA,EAAG;AAAA,EAEzC,kBAAkB;AAAA,IAChB,EAAE,SAAS,QAAQ,MAAM,CAAC,OAAO,MAAM,MAAM,MAAM,MAAM,IAAI,GAAG,OAAO,cAAA;AAAA,EAAc;AAAA,EAEvF,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAEf,CAAC,GA6EKC,IAAe,EAAE,OAAO,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,MAAM,KAAA;AAIrF,SAASC,EAAO;AAAA,EACrB,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,WAAAC,IAAY;AAAA,EACZ,KAAAC;AAAA,EACA,iBAAiBC;AAAA,EACjB,GAAGC;AACL,GAAgB;AACd,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAmB,CAAA,CAAE,GAC7CC,IAASC,EAAO,CAAC,GACjBC,IAAWC,EAAA,GAIXC,IAAMb,MAAmB,QACzBc,IAAwBD,IAAM,KAAOT,GAarCW,IACJtB,KAAWG,KAAYiB,KAAOC,MAA0B,MAAQA,MAA0B;AAE5F,WAASE,EAAYC,GAAsC;AAIzD,QAAIJ,GAAK;AACP,MAAAI,EAAM,eAAA;AACN;AAAA,IACF;AACA,IAAAlB,IAAUkB,CAAK;AAAA,EACjB;AAEA,WAASC,EAAkBD,GAA8C;AAEvE,QADAnB,IAAgBmB,CAAK,GACjB7B,MAAY,UAAUC,MAAS,SAAS0B,EAAO;AAEnD,UAAMI,IAAOF,EAAM,cAAc,sBAAA,GAG3BG,IAAK,KAAK,IAAIH,EAAM,UAAUE,EAAK,MAAMA,EAAK,QAAQF,EAAM,OAAO,GACnEI,IAAK,KAAK,IAAIJ,EAAM,UAAUE,EAAK,KAAKA,EAAK,SAASF,EAAM,OAAO,GACnEK,IAAW,IAAI,KAAK,MAAMF,GAAIC,CAAE,GAEhCE,IAAiB;AAAA,MACrB,IAAId,EAAO;AAAA,MACX,GAAGQ,EAAM,UAAUE,EAAK;AAAA,MACxB,GAAGF,EAAM,UAAUE,EAAK;AAAA,MACxB,MAAMG;AAAA,IAAA;AAER,IAAAf,EAAW,CAACiB,MAAY,CAAC,GAAGA,GAASD,CAAM,CAAC;AAAA,EAC9C;AAEA,QAAME,IAAWC,EAAU;AAAA,IACzB,QAAAlC;AAAA,IACA,KAAAW;AAAA;AAAA,IAEA,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL,WAAWwB;AAAA,QACT5C,EAAO,EAAE,SAAAK,GAAS,MAAAC,GAAM,UAAAC,GAAU,WAAAC,GAAW;AAAA,QAC7CW,KAAa,CAACa,KAAS;AAAA,QACvB5B;AAAA,MAAA;AAAA,MAEF,kBAAkBe,KAAa,CAACa,IAAQ,KAAK;AAAA,MAC7C,UAAUnB,KAAYH;AAAA,MACtB,iBAAiBqB;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjB,oBAAoBD,IAAMF,IAAW;AAAA,MACrC,gBAAgBlB,KAAW;AAAA,MAC3B,aAAaA,KAAW;AAAA,MACxB,eAAeyB;AAAA,MACf,SAASF;AAAA,MACT,UACE,gBAAAY,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAvB,EAAQ,IAAI,CAACiB,MACZ,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,eAAW;AAAA,YAIX,gBAAgB,MACdvB,EAAW,CAACiB,MAAYA,EAAQ,OAAO,CAACO,MAAMA,EAAE,OAAOR,EAAO,EAAE,CAAC;AAAA,YAEnE,WAAU;AAAA,YACV,OAAO;AAAA,cACL,MAAMA,EAAO,IAAIA,EAAO,OAAO;AAAA,cAC/B,KAAKA,EAAO,IAAIA,EAAO,OAAO;AAAA,cAC9B,OAAOA,EAAO;AAAA,cACd,QAAQA,EAAO;AAAA,YAAA;AAAA,UACjB;AAAA,UAdKA,EAAO;AAAA,QAAA,CAgBf;AAAA,QAEA9B,KACC,gBAAAqC,EAAC,QAAA,EAAK,WAAU,4CAMd,UAAA,gBAAAA,EAACE,GAAA,EAAQ,MAAM/C,EAAaI,KAAQ,IAAI,EAAA,CAAG,GAC7C;AAAA,QAQF,gBAAAuC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAlC,KAAW;AAAA,YAAA;AAAA,YAGZ,UAAA;AAAA,cAAAC;AAAA,cACAG;AAAA,cACAF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAQFkB,KACC,gBAAAiB,EAAC,QAAA,EAAK,IAAInB,GAAU,WAAU,WAC3B,UAAAX,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEF,GAAGK;AAAA,IAAA;AAAA,EACL,CACD;AAOD,SAAI,CAACQ,KAAO,CAACZ,IAA8BwB,sBAGxCQ,GAAA,EAAQ,SAASjC,GAAgB,MAAK,OACpC,UAAAyB,GACH;AAEJ;AAoEO,SAASS,GAAe;AAAA,EAC7B,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAlD,IAAU;AAAA,EACV,WAAAD;AAAA,EACA,GAAGkB;AACL,GAAwB;AACtB,SACE,gBAAAyB;AAAA,IAAC5C;AAAA,IAAA;AAAA,MACC,SAAAE;AAAA,MACA,MAAK;AAAA,MACL,WAAS;AAAA,MACT,iBAAekD,IAAW,SAAS;AAAA,MACnC,WAAWX,EAAGW,KAAY,iDAAiDnD,CAAS;AAAA,MACnF,GAAGkB;AAAA,MAEJ,UAAA,gBAAAuB,EAAC,QAAA,EAAK,WAAU,8DACd,UAAA;AAAA,QAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,UAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAK,GAAQ;AAAA,UACxCC,KAAU,OAAO,gBAAAR,EAAC,QAAA,EAAK,WAAU,8BAA6B,UAAA;AAAA,YAAA;AAAA,YAAEQ;AAAA,UAAA,EAAA,CAAO,IAAU;AAAA,QAAA,GACpF;AAAA,QACCC,KAAW,OACV,gBAAAP,EAAC,UAAK,WAAU,kDAAkD,aAAQ,IACxE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Callout.js

@@ -0,0 +1,106 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { tv as m } from "tailwind-variants";
+import { cn as f } from "../lib/cn.js";
+import { Icon as p } from "./Icon.js";
+const y = m({
+  slots: {
+    root: "flex gap-2.5 rounded-lg p-3",
+    glyph: "mt-px shrink-0",
+    content: "flex min-w-0 flex-col gap-1",
+    title: "text-sm font-semibold",
+    body: "text-xs leading-relaxed",
+    /* NO ALPHA ON THE TONED BODY, and it took building a demo page to find out
+       why. The body used to be text-<tone>-text/85 so it would sit back from the
+       title, and every toned variant FAILED the 4.5:1 contrast floor against its
+       own subtle fill — the a11y scan reported four nodes the moment this
+       component had a page to be scanned on. It had none before, so the scan had
+       never reached it: exported, shipped, and invisible to the one gate that
+       would have caught it. Hierarchy comes from the title's weight instead,
+       which costs nothing and cannot fail a ratio. */
+    actions: "mt-1 flex flex-wrap items-center gap-2"
+  },
+  variants: {
+    tone: {
+      neutral: {
+        root: "border border-border bg-surface",
+        glyph: "text-tertiary",
+        title: "text-primary",
+        body: "text-secondary"
+      },
+      info: {
+        root: "border border-info-border bg-info-subtle",
+        glyph: "text-info",
+        title: "text-info-text",
+        body: "text-info-text"
+      },
+      success: {
+        root: "border border-success-border bg-success-subtle",
+        glyph: "text-success",
+        title: "text-success-text",
+        body: "text-success-text"
+      },
+      warning: {
+        root: "border border-warning-border bg-warning-subtle",
+        glyph: "text-warning",
+        title: "text-warning-text",
+        body: "text-warning-text"
+      },
+      danger: {
+        root: "border border-danger-border bg-danger-subtle",
+        glyph: "text-danger",
+        title: "text-danger-text",
+        body: "text-danger-text"
+      }
+    },
+    /* `strong` doubles the border rather than deepening the fill. A darker
+       fill would drag the body text's contrast down with it; the border is
+       the one part of the block carrying no text. */
+    emphasis: {
+      subtle: {},
+      strong: { root: "border-2" }
+    }
+  },
+  defaultVariants: { tone: "neutral", emphasis: "subtle" }
+}), h = {
+  neutral: null,
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert"
+};
+function j({
+  tone: r = "neutral",
+  emphasis: d,
+  title: c,
+  icon: o,
+  children: n,
+  actions: s,
+  live: x,
+  className: b,
+  ref: g,
+  ...u
+}) {
+  const t = y({ tone: r, emphasis: d }), l = h[r ?? "neutral"], a = o !== void 0 ? o : l ? /* @__PURE__ */ e(p, { name: l, size: "sm" }) : null;
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: g,
+      "data-slot": "callout",
+      role: x ? "alert" : void 0,
+      className: f(t.root(), b),
+      ...u,
+      children: [
+        a && /* @__PURE__ */ e("span", { className: t.glyph(), "aria-hidden": !0, children: a }),
+        /* @__PURE__ */ i("div", { className: t.content(), children: [
+          /* @__PURE__ */ e("div", { className: t.title(), children: c }),
+          n && /* @__PURE__ */ e("div", { className: t.body(), children: n }),
+          s && /* @__PURE__ */ e("div", { className: t.actions(), children: s })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  j as Callout
+};
+//# sourceMappingURL=Callout.js.map

package/dist/components/Callout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.js","sources":["../../src/components/Callout.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode, Ref } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { Icon, type IconName } from \"./Icon\";\n\n/* ============================================================================\n   CALLOUT — a toned block that states a condition and what to do about it.\n   ----------------------------------------------------------------------------\n   Extracted rather than invented: the identical shape (rounded border +\n   `*-subtle` fill + leading icon + bold line + quieter body) had been\n   hand-rolled four separate times in one consumer screen alone, each with its\n   own padding and its own idea of which text token the body used. That is the\n   signature of a missing primitive.\n\n   THE ICON IS NOT DECORATION AND DEFAULTS PER TONE. Tone is carried by hue,\n   and hue alone fails WCAG 1.4.1 (Use of Color) for the ~8% of men with a\n   red-green deficiency, for whom `warning` and `danger` are the same swatch.\n   Each severity tone therefore ships a distinct SHAPE by default — triangle\n   for warning, filled circle for danger, tick for success — so the severity\n   survives the colour being unreadable. `neutral` gets none: it conveys no\n   severity, so there is no second channel for it to owe.\n\n   `live` IS OPT-IN AND MUST STAY THAT WAY. It renders `role=\"alert\"`, which is\n   an assertive live region: assistive tech interrupts whatever the user is\n   doing and reads it. That is correct for a condition that ARRIVES while the\n   operator is looking elsewhere, and hostile for one that was simply on the\n   page at load — a screen rendering ten callouts on mount would interrupt ten\n   times before the operator had read a word. Default is silent; a caller opts\n   in for the genuine interruption only.\n   ========================================================================= */\n\n/* THE ICON SLOT IS CALLED `glyph`, NOT `icon`, and that is not cosmetic.\n   `icon-names.test.ts` sweeps the source for `icon: \"…\"` and resolves every hit\n   against the icon registry, because an unregistered name renders NOTHING and\n   errors nowhere — a defect this repo has shipped twice. A recipe slot named\n   `icon` whose value is a class string is indistinguishable from an icon name\n   to that sweep, and every other `icon: \"…\"` in this library really is one. The\n   guard is right; the slot name was wrong. */\nconst callout = tv({\n  slots: {\n    root: \"flex gap-2.5 rounded-lg p-3\",\n    glyph: \"mt-px shrink-0\",\n    content: \"flex min-w-0 flex-col gap-1\",\n    title: \"text-sm font-semibold\",\n    body: \"text-xs leading-relaxed\",\n    /* NO ALPHA ON THE TONED BODY, and it took building a demo page to find out\n       why. The body used to be text-<tone>-text/85 so it would sit back from the\n       title, and every toned variant FAILED the 4.5:1 contrast floor against its\n       own subtle fill — the a11y scan reported four nodes the moment this\n       component had a page to be scanned on. It had none before, so the scan had\n       never reached it: exported, shipped, and invisible to the one gate that\n       would have caught it. Hierarchy comes from the title's weight instead,\n       which costs nothing and cannot fail a ratio. */\n    actions: \"mt-1 flex flex-wrap items-center gap-2\",\n  },\n  variants: {\n    tone: {\n      neutral: {\n        root: \"border border-border bg-surface\",\n        glyph: \"text-tertiary\",\n        title: \"text-primary\",\n        body: \"text-secondary\",\n      },\n      info: {\n        root: \"border border-info-border bg-info-subtle\",\n        glyph: \"text-info\",\n        title: \"text-info-text\",\n        body: \"text-info-text\",\n      },\n      success: {\n        root: \"border border-success-border bg-success-subtle\",\n        glyph: \"text-success\",\n        title: \"text-success-text\",\n        body: \"text-success-text\",\n      },\n      warning: {\n        root: \"border border-warning-border bg-warning-subtle\",\n        glyph: \"text-warning\",\n        title: \"text-warning-text\",\n        body: \"text-warning-text\",\n      },\n      danger: {\n        root: \"border border-danger-border bg-danger-subtle\",\n        glyph: \"text-danger\",\n        title: \"text-danger-text\",\n        body: \"text-danger-text\",\n      },\n    },\n    /* `strong` doubles the border rather than deepening the fill. A darker\n       fill would drag the body text's contrast down with it; the border is\n       the one part of the block carrying no text. */\n    emphasis: {\n      subtle: {},\n      strong: { root: \"border-2\" },\n    },\n  },\n  defaultVariants: { tone: \"neutral\", emphasis: \"subtle\" },\n});\n\n/** The shape each severity tone carries when the caller does not pass one. */\nconst TONE_ICON: Record<string, IconName | null> = {\n  neutral: null,\n  info: \"info\",\n  success: \"circle-check\",\n  warning: \"triangle-alert\",\n  danger: \"circle-alert\",\n};\n\nexport interface CalloutProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"title\">,\n    VariantProps<typeof callout> {\n  /** The condition, in one line. */\n  title: ReactNode;\n  /**\n   * Override the per-tone default shape. Pass `null` to render no icon at all\n   * — for a tone that is genuinely not a severity.\n   */\n  icon?: ReactNode | null;\n  /** What to do about it. The half that makes a callout useful rather than a complaint. */\n  children?: ReactNode;\n  /** Buttons or links. Rendered under the body, never beside the title. */\n  actions?: ReactNode;\n  /**\n   * Announce assertively via `role=\"alert\"`. Opt-in — see the header. Reserve\n   * for a condition that appears in response to a change, not one present at\n   * load.\n   */\n  live?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Callout({\n  tone = \"neutral\",\n  emphasis,\n  title,\n  icon,\n  children,\n  actions,\n  live,\n  className,\n  ref,\n  ...props\n}: CalloutProps) {\n  const s = callout({ tone, emphasis });\n  const defaultName = TONE_ICON[tone ?? \"neutral\"];\n  const resolvedIcon =\n    icon !== undefined ? icon : defaultName ? <Icon name={defaultName} size=\"sm\" /> : null;\n\n  return (\n    <div\n      ref={ref}\n      /* No `role` at all when not live. An unnecessary `role=\"status\"` would\n         still be a live region — polite rather than assertive, but announced\n         on every re-render all the same. */\n      data-slot=\"callout\"\n      role={live ? \"alert\" : undefined}\n      className={cn(s.root(), className)}\n      {...props}\n    >\n      {resolvedIcon && (\n        <span className={s.glyph()} aria-hidden>\n          {resolvedIcon}\n        </span>\n      )}\n      <div className={s.content()}>\n        <div className={s.title()}>{title}</div>\n        {/* `div`, never `p` — a body routinely carries a list or a nested\n            block, and `<p><ul>` is invalid HTML the browser silently\n            un-nests, breaking the layout in a way no test catches. */}\n        {children && <div className={s.body()}>{children}</div>}\n        {actions && <div className={s.actions()}>{actions}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["callout","tv","TONE_ICON","Callout","tone","emphasis","title","icon","children","actions","live","className","ref","props","s","defaultName","resolvedIcon","jsx","Icon","jsxs","cn"],"mappings":";;;;AAsCA,MAAMA,IAAUC,EAAG;AAAA,EACjB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASN,SAAS;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,MAER,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA;AAAA;AAAA;AAAA,IAKF,UAAU;AAAA,MACR,QAAQ,CAAA;AAAA,MACR,QAAQ,EAAE,MAAM,WAAA;AAAA,IAAW;AAAA,EAC7B;AAAA,EAEF,iBAAiB,EAAE,MAAM,WAAW,UAAU,SAAA;AAChD,CAAC,GAGKC,IAA6C;AAAA,EACjD,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAyBO,SAASC,EAAQ;AAAA,EACtB,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAId,EAAQ,EAAE,MAAAI,GAAM,UAAAC,GAAU,GAC9BU,IAAcb,EAAUE,KAAQ,SAAS,GACzCY,IACJT,MAAS,SAAYA,IAAOQ,IAAc,gBAAAE,EAACC,GAAA,EAAK,MAAMH,GAAa,MAAK,KAAA,CAAK,IAAK;AAEpF,SACE,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAP;AAAA,MAIA,aAAU;AAAA,MACV,MAAMF,IAAO,UAAU;AAAA,MACvB,WAAWU,EAAGN,EAAE,KAAA,GAAQH,CAAS;AAAA,MAChC,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAG,KACC,gBAAAC,EAAC,UAAK,WAAWH,EAAE,SAAS,eAAW,IACpC,UAAAE,EAAA,CACH;AAAA,QAEF,gBAAAG,EAAC,OAAA,EAAI,WAAWL,EAAE,WAChB,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWH,EAAE,SAAU,UAAAR,GAAM;AAAA,UAIjCE,KAAY,gBAAAS,EAAC,OAAA,EAAI,WAAWH,EAAE,KAAA,GAAS,UAAAN,GAAS;AAAA,UAChDC,KAAW,gBAAAQ,EAAC,OAAA,EAAI,WAAWH,EAAE,QAAA,GAAY,UAAAL,EAAA,CAAQ;AAAA,QAAA,EAAA,CACpD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}