@50arms/ui 0.0.0-stage → 35.1.0

package/dist/components/Slider.js

@@ -0,0 +1,353 @@
+import { jsxs as i, jsx as t, Fragment as Q } from "react/jsx-runtime";
+import { useState as W, useMemo as X } from "react";
+import { Slider as d } from "@base-ui/react/slider";
+import { tv as F } from "tailwind-variants";
+import { cn as M } from "../lib/cn.js";
+import { listFormat as Z, numberFormat as ee } from "../lib/intl-cache.js";
+import { useReducedMotion as ae } from "../lib/motion.js";
+import { useReleaseSnapDrag as re } from "../lib/use-release-snap-drag.js";
+import { useUiLocale as te, useUiStrings as oe } from "../lib/i18n/provider.js";
+const ne = F({
+  slots: {
+    root: "flex w-full min-w-0 flex-col gap-2",
+    header: "flex items-baseline justify-between gap-4",
+    label: "text-xs font-medium text-secondary",
+    readout: "font-mono text-xs tabular-nums text-primary",
+    /* The control is the HIT AREA and is deliberately taller than the track it
+       draws. A 4px track is a 4px target, which is unusable on touch and
+       unpleasant with a mouse. */
+    control: "relative flex w-full touch-none items-center select-none py-2.5",
+    track: "relative w-full overflow-visible rounded-full bg-surface-inset",
+    indicator: [
+      "absolute rounded-full bg-control",
+      /* DXUI-17: after a `snap="release"` drag the fill glides from the pointer to the step. */
+      "data-settling:transition-[var(--tx-colors),width] data-settling:duration-(--dur-base) data-settling:ease-hover"
+    ],
+    thumb: [
+      "rounded-full border-2 border-control bg-control-knob shadow-knob",
+      "transition-[var(--tx-colors),scale,box-shadow] duration-(--dur-fast) ease-hover",
+      "hover:scale-110",
+      "focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--control-focus-halo)]",
+      "active:scale-95",
+      "data-dragging:scale-110",
+      /* DXUI-17: after a `snap="release"` drag the thumb glides from the pointer to the step. */
+      "data-settling:transition-[var(--tx-colors),scale,box-shadow,inset-inline-start] data-settling:duration-(--dur-base)"
+    ],
+    /* DX-3785 — `select-none`: dragging the thumb is a mousedown-then-drag
+       gesture, and the tick labels sit directly below the track it drags
+       across. Without this, a drag whose pointer drifts down half a line
+       starts an ordinary text selection over whichever labels it crosses —
+       which paints as a stray highlight block behind part of a word, because
+       the drag ends (mouseup) mid-label rather than at a word boundary. The
+       CONTROL already carries `select-none` (it is a drag surface); the marks
+       row is a sibling of it, not a descendant, so it needed its own. */
+    marks: "relative mt-1 w-full select-none",
+    markLabel: "absolute -translate-x-1/2 text-2xs whitespace-nowrap text-tertiary"
+  },
+  variants: {
+    size: {
+      sm: { track: "h-1", thumb: "size-3.5" },
+      md: { track: "h-1.5", thumb: "size-4.5" },
+      lg: { track: "h-2", thumb: "size-5.5" }
+    },
+    tone: {
+      control: { indicator: "bg-control", thumb: "border-control" },
+      accent: { indicator: "bg-accent", thumb: "border-accent" },
+      brand: { indicator: "bg-brand", thumb: "border-brand" },
+      success: { indicator: "bg-success", thumb: "border-success" },
+      warning: { indicator: "bg-warning", thumb: "border-warning" },
+      danger: { indicator: "bg-danger", thumb: "border-danger" }
+    },
+    /* Dimming is applied to the CONTROL, never to the label or the value.
+       A disabled slider still has to be readable — you need to know what it
+       says even when you cannot change it, and that is usually exactly when
+       you are trying to work out why it is disabled. Dimming the text as well
+       is the reflex, and it is what drops the label under the contrast floor:
+       the high-contrast run caught this the first time it ran. */
+    disabled: {
+      true: {
+        root: "pointer-events-none",
+        control: "opacity-40",
+        label: "text-tertiary"
+      },
+      false: {}
+    }
+  },
+  defaultVariants: { size: "md", tone: "control", disabled: !1 }
+}), se = F({
+  slots: {
+    /* The thumb's box is only the bar's width. Everything else a hand needs is a child,
+       so grabbing it grabs this thumb. Kept this narrow on purpose: Base UI lifts the
+       active thumb above its neighbour, and a wider box would cover the neighbour's
+       grab pad at equal values. */
+    thumb: [
+      "group relative w-0.5 rounded-full outline-none [--flag-pad:24px]",
+      "data-dragging:brightness-110",
+      "data-settling:transition-[var(--tx-colors),inset-inline-start] data-settling:duration-(--dur-base) data-settling:ease-hover"
+    ],
+    bar: [
+      "absolute inset-0 rounded-full",
+      "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+      "group-has-[:focus-visible]:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+    ],
+    flag: [
+      "absolute top-0 box-border border",
+      "h-[calc(var(--flag-square)*2)] w-[calc(var(--flag-square)*3)]",
+      "transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover",
+      "group-has-[:focus-visible]:shadow-[0_0_0_3px_var(--control-focus-halo)]"
+    ],
+    /* Transparent grab target on the flag's side of the pole, centred on the flag. The
+       two pads of a pair meet at the pole and never overlap. */
+    pad: "absolute size-(--flag-pad) top-[calc(var(--flag-square)-var(--flag-pad)/2)]"
+  },
+  variants: {
+    size: {
+      sm: { thumb: "h-6 [--flag-square:0.25rem]" },
+      md: { thumb: "h-7 [--flag-square:0.3125rem]" },
+      lg: { thumb: "h-8 [--flag-square:0.375rem]" }
+    },
+    tone: {
+      neutral: { bar: "bg-primary", flag: "border-primary" },
+      accent: { bar: "bg-accent", flag: "border-accent" },
+      brand: { bar: "bg-brand", flag: "border-brand" },
+      success: { bar: "bg-success", flag: "border-success" },
+      warning: { bar: "bg-warning", flag: "border-warning" },
+      danger: { bar: "bg-danger", flag: "border-danger" }
+    },
+    /* A solid flag is filled with its tone's colour; a checkered one paints its own
+       squares (inline) and keeps only the tone's border. */
+    fill: {
+      solid: {},
+      checkered: {}
+    },
+    side: {
+      left: { flag: "right-1/2", pad: "right-1/2" },
+      right: { flag: "left-1/2", pad: "left-1/2" }
+    }
+  },
+  defaultVariants: { size: "md" },
+  compoundVariants: [
+    { fill: "solid", tone: "neutral", class: { flag: "bg-primary" } },
+    { fill: "solid", tone: "accent", class: { flag: "bg-accent" } },
+    { fill: "solid", tone: "brand", class: { flag: "bg-brand" } },
+    { fill: "solid", tone: "success", class: { flag: "bg-success" } },
+    { fill: "solid", tone: "warning", class: { flag: "bg-warning" } },
+    { fill: "solid", tone: "danger", class: { flag: "bg-danger" } }
+  ]
+}), le = {
+  backgroundImage: "repeating-conic-gradient(var(--color-primary) 0% 25%, var(--color-surface) 0% 50%)",
+  backgroundSize: "calc(var(--flag-square) * 2) calc(var(--flag-square) * 2)",
+  backgroundOrigin: "border-box"
+}, ie = (c, h) => h === 2 && c === 0 ? "left" : "right";
+function ve({
+  value: c,
+  defaultValue: h,
+  onValueChange: I,
+  onValueCommitted: L,
+  min: n = 0,
+  max: s = 100,
+  step: m = 1,
+  snap: P = "live",
+  minStepsBetweenValues: R,
+  thumbCollision: j = "push",
+  meetingThumbs: k = "overlap",
+  thumbLabels: u,
+  thumbMarkers: g,
+  label: y,
+  format: T,
+  showValue: E = !0,
+  marks: p = !1,
+  // I18N-ALLOW: tooltip display mode token, not text
+  tooltip: $ = "drag",
+  size: q,
+  tone: z,
+  disabled: S = !1,
+  className: V,
+  ref: K
+}) {
+  const o = ne({ size: q, tone: z, disabled: S }), A = te(), U = oe().slider, v = T ?? ((e) => ee(A, {}).format(e)), [Y, B] = W(
+    c ?? h ?? n
+  ), N = c ?? Y, a = Array.isArray(N) ? N : [N], w = P === "release", G = ae(), { dragPercent: f, settling: C, endSettling: H, onPointerDown: O } = re({
+    enabled: w && !S,
+    reducedMotion: G
+  }), _ = X(() => {
+    if (Array.isArray(p)) return p;
+    if (!p) return [];
+    const e = Math.floor((s - n) / m);
+    return e > 20 ? [] : Array.from({ length: e + 1 }, (r, b) => ({ value: n + b * m }));
+  }, [p, n, s, m]), x = k === "offset" && a.length === 2 && a[0] === a[1];
+  if (u && u.length !== a.length)
+    throw new Error(
+      `Slider: thumbLabels has ${u.length} entries but the slider has ${a.length} thumb(s).`
+    );
+  if (w && a.length !== 1)
+    throw new Error('Slider: snap="release" follows one thumb; a range cannot use it.');
+  if (g) {
+    if (g.length !== a.length)
+      throw new Error(
+        `Slider: thumbMarkers has ${g.length} entries but the slider has ${a.length} thumb(s).`
+      );
+    if (a.length > 2)
+      throw new Error("Slider: thumbMarkers supports one or two thumbs; flag sides cannot separate three.");
+    if (k === "offset")
+      throw new Error("Slider: thumbMarkers already separates equal thumbs; do not also set meetingThumbs.");
+    if (z !== void 0)
+      throw new Error("Slider: thumbMarkers colours each thumb itself; set `tone` on a marker, not on the slider.");
+  }
+  const J = g?.map(
+    (e, r) => se({ size: q, tone: e.tone ?? "neutral", fill: e.flag, side: ie(r, a.length) })
+  ), D = (e) => (e - n) / (s - n) * 100;
+  return /* @__PURE__ */ i("div", { className: M(o.root(), V), children: [
+    /* @__PURE__ */ i(
+      d.Root,
+      {
+        ref: K,
+        value: c,
+        defaultValue: h,
+        min: n,
+        max: s,
+        step: m,
+        disabled: S,
+        minStepsBetweenValues: R,
+        thumbCollisionBehavior: j === "stop" ? "none" : "push",
+        onValueChange: (e) => {
+          B(e), I?.(e);
+        },
+        onValueCommitted: (e) => L?.(e),
+        className: "flex w-full flex-col gap-2",
+        children: [
+          (y || E) && /* @__PURE__ */ i("div", { className: o.header(), children: [
+            y && /* @__PURE__ */ t(d.Label, { className: o.label(), children: y }),
+            E && /* @__PURE__ */ t("span", { className: o.readout(), children: a.length === 2 ? U.range(v(a[0]), v(a[1])) : Z(A, { type: "unit", style: "narrow" }).format(a.map((e) => v(e))) })
+          ] }),
+          /* @__PURE__ */ t(
+            d.Control,
+            {
+              className: o.control(),
+              onPointerDown: w ? O : void 0,
+              children: /* @__PURE__ */ i(d.Track, { className: o.track(), children: [
+                _.map((e) => /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": !0,
+                    className: "absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border-strong",
+                    style: {
+                      left: `${D(e.value)}%`,
+                      /* The end dots were centred on the track's outer edges, so
+                                           half of each fell outside the rounded rail and the right
+                                           one crossed its container's padding edge. Sitting them
+                                           flush INSIDE instead — left edge to left edge, right to
+                                           right — keeps every dot on the rail it belongs to.
+                      
+                                           `translate` is written out in full rather than nulled,
+                                           because Tailwind v4 compiles both `-translate-x-1/2` and
+                                           `-translate-y-1/2` into the SAME `translate` property.
+                                           Clearing it would take the vertical centring with it, and
+                                           the dot would jump to the top of the track. */
+                      ...e.value === n ? { translate: "0 -50%", left: 0 } : {},
+                      ...e.value === s ? { translate: "0 -50%", left: "auto", right: 0 } : {}
+                    }
+                  },
+                  e.value
+                )),
+                /* @__PURE__ */ t(
+                  d.Indicator,
+                  {
+                    className: o.indicator(),
+                    "data-settling": C || void 0,
+                    style: f === null ? void 0 : { width: `${f}%` }
+                  }
+                ),
+                a.map((e, r) => {
+                  const b = g?.[r], l = J?.[r];
+                  return /* @__PURE__ */ i(
+                    d.Thumb,
+                    {
+                      index: r,
+                      className: l ? l.thumb() : o.thumb(),
+                      getAriaLabel: u ? () => u[r] : void 0,
+                      "data-meeting": x ? r === 0 ? "above" : "below" : void 0,
+                      "data-settling": C || void 0,
+                      onKeyDown: w ? H : void 0,
+                      style: x || f !== null ? {
+                        ...x ? { transform: `translateY(${r === 0 ? "-50%" : "50%"})` } : {},
+                        ...f === null ? {} : { insetInlineStart: `${f}%` }
+                      } : void 0,
+                      children: [
+                        b && l && /* @__PURE__ */ i(Q, { children: [
+                          /* @__PURE__ */ t("span", { "aria-hidden": !0, className: l.bar() }),
+                          /* @__PURE__ */ t("span", { "aria-hidden": !0, "data-flag-pad": !0, className: l.pad() }),
+                          /* @__PURE__ */ t(
+                            "span",
+                            {
+                              "aria-hidden": !0,
+                              "data-flag": b.flag,
+                              className: l.flag(),
+                              style: b.flag === "checkered" ? le : void 0
+                            }
+                          )
+                        ] }),
+                        $ !== "never" && /* @__PURE__ */ t(
+                          "span",
+                          {
+                            "aria-hidden": !0,
+                            className: M(
+                              "pointer-events-none absolute left-1/2 -translate-x-1/2",
+                              /* DX-4597: a lowered thumb's bubble goes BELOW it, or it would
+                                 cover the raised thumb its range neighbour sits on. */
+                              x && r === 1 ? "top-[calc(100%+0.5rem)]" : "bottom-[calc(100%+0.5rem)]",
+                              "rounded-md border border-border bg-surface-inset px-2 py-1",
+                              "font-mono text-2xs tabular-nums whitespace-nowrap text-primary shadow-md",
+                              "transition-[var(--tx-colors),opacity,translate] duration-(--dur-fast) ease-out-strong",
+                              /* On `drag` the bubble is hidden until the thumb is
+                                 grabbed OR focused — the keyboard user needs it just as
+                                 much as the pointer user, and focus is their equivalent
+                                 of holding the handle. */
+                              $ === "drag" && "opacity-0 translate-y-1 in-data-dragging:opacity-100 in-data-dragging:translate-y-0 group-focus-visible:opacity-100"
+                            ),
+                            children: v(e)
+                          }
+                        )
+                      ]
+                    },
+                    r
+                  );
+                })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    _.some((e) => e.label !== void 0) && /* @__PURE__ */ t("div", { className: o.marks(), style: { height: "1.25rem" }, children: _.filter((e) => e.label !== void 0).map((e) => /* @__PURE__ */ t(
+      "span",
+      {
+        className: o.markLabel(),
+        style: {
+          left: `${D(e.value)}%`,
+          /* The first and last labels would otherwise hang off the
+                               ends of the track. Nudging only the extremes keeps every
+                               other label honestly centred on its tick.
+          
+                               `translate`, NOT `transform`. The centring comes from the
+                               `-translate-x-1/2` utility, and Tailwind v4 compiles that
+                               to the standalone `translate` property rather than to
+                               `transform`. Clearing `transform` therefore cancelled
+                               nothing: both extremes stayed shifted by -50%, so the
+                               first label hung half off the left end and the last sat
+                               half its own width short of flush. The declaration was
+                               present, valid, and inert — which is why it survived
+                               review. */
+          ...e.value === n ? { translate: "none", left: 0 } : {},
+          ...e.value === s ? { translate: "none", left: "auto", right: 0 } : {}
+        },
+        children: e.label
+      },
+      e.value
+    )) })
+  ] });
+}
+export {
+  ve as Slider
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../src/components/Slider.tsx"],"sourcesContent":["import type { ReactNode, Ref } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { Slider as BaseSlider } from \"@base-ui/react/slider\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiLocale, useUiStrings } from \"../lib/i18n\";\nimport { listFormat, numberFormat } from \"../lib/intl-cache\";\nimport { useReducedMotion } from \"../lib/motion\";\nimport { useReleaseSnapDrag } from \"../lib/use-release-snap-drag\";\n\n/* ============================================================================\n   SLIDER\n\n   Single value or a range, from one component. Passing an array of two numbers\n   IS the range — there is no `range` boolean, because a boolean that must\n   agree with the shape of `value` is a boolean that can disagree with it.\n\n   WHAT MAKES A SLIDER GOOD, in rough order of how often it is skipped:\n\n     1. The number is READABLE WHILE DRAGGING. A slider whose value only\n        appears in a field elsewhere makes you look in two places at once.\n     2. The HANDLE IS BIGGER THAN IT LOOKS. The visible thumb can be 18px; the\n        thing your finger has to hit cannot. The hit area here is padded well\n        past the drawn circle.\n     3. MARKS MEAN SOMETHING. Ticks at arbitrary intervals are decoration.\n        Ticks at the values that matter — thresholds, defaults, limits — turn\n        the track into a scale you can read.\n     4. IT SURVIVES THE KEYBOARD. Arrows step, Page moves a larger step, Home\n        and End jump to the ends. Base UI supplies this; the styling must not\n        hide the focus state that makes it usable.\n\n   TOOLTIP MODES exist because the right answer depends on the task: `drag`\n   for a value you set and forget, `always` for one being compared against\n   something else on screen, `never` when a separate readout already shows it.\n   ========================================================================= */\n\nconst slider = tv({\n  slots: {\n    root: \"flex w-full min-w-0 flex-col gap-2\",\n    header: \"flex items-baseline justify-between gap-4\",\n    label: \"text-xs font-medium text-secondary\",\n    readout: \"font-mono text-xs tabular-nums text-primary\",\n    /* The control is the HIT AREA and is deliberately taller than the track it\n       draws. A 4px track is a 4px target, which is unusable on touch and\n       unpleasant with a mouse. */\n    control: \"relative flex w-full touch-none items-center select-none py-2.5\",\n    track: \"relative w-full overflow-visible rounded-full bg-surface-inset\",\n    indicator: [\n      \"absolute rounded-full bg-control\",\n      /* DXUI-17: after a `snap=\"release\"` drag the fill glides from the pointer to the step. */\n      \"data-settling:transition-[var(--tx-colors),width] data-settling:duration-(--dur-base) data-settling:ease-hover\",\n    ],\n    thumb: [\n      \"rounded-full border-2 border-control bg-control-knob shadow-knob\",\n      \"transition-[var(--tx-colors),scale,box-shadow] duration-(--dur-fast) ease-hover\",\n      \"hover:scale-110\",\n      \"focus-visible:outline-none focus-visible:shadow-[0_0_0_4px_var(--control-focus-halo)]\",\n      \"active:scale-95\",\n      \"data-dragging:scale-110\",\n      /* DXUI-17: after a `snap=\"release\"` drag the thumb glides from the pointer to the step. */\n      \"data-settling:transition-[var(--tx-colors),scale,box-shadow,inset-inline-start] data-settling:duration-(--dur-base)\",\n    ],\n    /* DX-3785 — `select-none`: dragging the thumb is a mousedown-then-drag\n       gesture, and the tick labels sit directly below the track it drags\n       across. Without this, a drag whose pointer drifts down half a line\n       starts an ordinary text selection over whichever labels it crosses —\n       which paints as a stray highlight block behind part of a word, because\n       the drag ends (mouseup) mid-label rather than at a word boundary. The\n       CONTROL already carries `select-none` (it is a drag surface); the marks\n       row is a sibling of it, not a descendant, so it needed its own. */\n    marks: \"relative mt-1 w-full select-none\",\n    markLabel: \"absolute -translate-x-1/2 text-2xs whitespace-nowrap text-tertiary\",\n  },\n  variants: {\n    size: {\n      sm: { track: \"h-1\", thumb: \"size-3.5\" },\n      md: { track: \"h-1.5\", thumb: \"size-4.5\" },\n      lg: { track: \"h-2\", thumb: \"size-5.5\" },\n    },\n    tone: {\n      control: { indicator: \"bg-control\", thumb: \"border-control\" },\n      accent: { indicator: \"bg-accent\", thumb: \"border-accent\" },\n      brand: { indicator: \"bg-brand\", thumb: \"border-brand\" },\n      success: { indicator: \"bg-success\", thumb: \"border-success\" },\n      warning: { indicator: \"bg-warning\", thumb: \"border-warning\" },\n      danger: { indicator: \"bg-danger\", thumb: \"border-danger\" },\n    },\n    /* Dimming is applied to the CONTROL, never to the label or the value.\n       A disabled slider still has to be readable — you need to know what it\n       says even when you cannot change it, and that is usually exactly when\n       you are trying to work out why it is disabled. Dimming the text as well\n       is the reflex, and it is what drops the label under the contrast floor:\n       the high-contrast run caught this the first time it ran. */\n    disabled: {\n      true: {\n        root: \"pointer-events-none\",\n        control: \"opacity-40\",\n        label: \"text-tertiary\",\n      },\n      false: {},\n    },\n  },\n  defaultVariants: { size: \"md\", tone: \"control\", disabled: false },\n});\n\n/* DX-4652: a flagged-bar thumb. Two values that sit close (a target and a critical\n   limit at 95 and 99) read as one blob when both thumbs are identical dots; a thin\n   bar marks the exact value and a pennant flag at its top says what kind of value\n   it is.\n\n   NAMED TOKENS, set on the thumb and read by everything inside it:\n     --flag-square   one square of the flag, set per `size`. The flag is 3 x 2 squares,\n                     so a checkered flag always ends on a whole square at the pole.\n     --flag-pad      the minimum grab target around a flag, 24 x 24 CSS px (WCAG 2.5.8). */\n\n\nconst marker = tv({\n  slots: {\n    /* The thumb's box is only the bar's width. Everything else a hand needs is a child,\n       so grabbing it grabs this thumb. Kept this narrow on purpose: Base UI lifts the\n       active thumb above its neighbour, and a wider box would cover the neighbour's\n       grab pad at equal values. */\n    thumb: [\n      \"group relative w-0.5 rounded-full outline-none [--flag-pad:24px]\",\n      \"data-dragging:brightness-110\",\n      \"data-settling:transition-[var(--tx-colors),inset-inline-start] data-settling:duration-(--dur-base) data-settling:ease-hover\",\n    ],\n    bar: [\n      \"absolute inset-0 rounded-full\",\n      \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n      \"group-has-[:focus-visible]:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n    ],\n    flag: [\n      \"absolute top-0 box-border border\",\n      \"h-[calc(var(--flag-square)*2)] w-[calc(var(--flag-square)*3)]\",\n      \"transition-[var(--tx-colors),box-shadow] duration-(--dur-fast) ease-hover\",\n      \"group-has-[:focus-visible]:shadow-[0_0_0_3px_var(--control-focus-halo)]\",\n    ],\n    /* Transparent grab target on the flag's side of the pole, centred on the flag. The\n       two pads of a pair meet at the pole and never overlap. */\n    pad: \"absolute size-(--flag-pad) top-[calc(var(--flag-square)-var(--flag-pad)/2)]\",\n  },\n  variants: {\n    size: {\n      sm: { thumb: \"h-6 [--flag-square:0.25rem]\" },\n      md: { thumb: \"h-7 [--flag-square:0.3125rem]\" },\n      lg: { thumb: \"h-8 [--flag-square:0.375rem]\" },\n    },\n    tone: {\n      neutral: { bar: \"bg-primary\", flag: \"border-primary\" },\n      accent: { bar: \"bg-accent\", flag: \"border-accent\" },\n      brand: { bar: \"bg-brand\", flag: \"border-brand\" },\n      success: { bar: \"bg-success\", flag: \"border-success\" },\n      warning: { bar: \"bg-warning\", flag: \"border-warning\" },\n      danger: { bar: \"bg-danger\", flag: \"border-danger\" },\n    },\n    /* A solid flag is filled with its tone's colour; a checkered one paints its own\n       squares (inline) and keeps only the tone's border. */\n    fill: {\n      solid: {},\n      checkered: {},\n    },\n    side: {\n      left: { flag: \"right-1/2\", pad: \"right-1/2\" },\n      right: { flag: \"left-1/2\", pad: \"left-1/2\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n  compoundVariants: [\n    { fill: \"solid\", tone: \"neutral\", class: { flag: \"bg-primary\" } },\n    { fill: \"solid\", tone: \"accent\", class: { flag: \"bg-accent\" } },\n    { fill: \"solid\", tone: \"brand\", class: { flag: \"bg-brand\" } },\n    { fill: \"solid\", tone: \"success\", class: { flag: \"bg-success\" } },\n    { fill: \"solid\", tone: \"warning\", class: { flag: \"bg-warning\" } },\n    { fill: \"solid\", tone: \"danger\", class: { flag: \"bg-danger\" } },\n  ],\n});\n\n/* The conic gradient is a 2 x 2 checkerboard per tile, so its tile is two squares. The\n   origin is the flag's outer edge, which puts square edges on the pole side whichever\n   way the flag points. The two colours are the library's text and surface tokens:\n   black-on-white in light, white-on-black in dark. */\nconst CHECKERED_FLAG_STYLE = {\n  backgroundImage:\n    \"repeating-conic-gradient(var(--color-primary) 0% 25%, var(--color-surface) 0% 50%)\",\n  backgroundSize: \"calc(var(--flag-square) * 2) calc(var(--flag-square) * 2)\",\n  backgroundOrigin: \"border-box\",\n} as const;\n\n/** The first thumb of a pair points left and the second right, so equal values never overlap; a lone thumb points right. */\nconst flagSide = (index: number, count: number): \"left\" | \"right\" =>\n  count === 2 && index === 0 ? \"left\" : \"right\";\n\nexport type SliderThumbMarker = {\n  /** `checkered` is a finish-line flag (aim here); `solid` is filled with the tone. */\n  flag: \"checkered\" | \"solid\";\n  /** Colours the bar, and the flag when solid. Default `neutral`. */\n  tone?: \"neutral\" | \"accent\" | \"brand\" | \"success\" | \"warning\" | \"danger\";\n};\n\nexport type SliderMark = {\n  value: number;\n  /** Shown under the tick. Omit for a bare tick. */\n  label?: ReactNode;\n};\n\nexport interface SliderProps\n  extends Omit<VariantProps<typeof slider>, \"disabled\"> {\n  /** A number for a single thumb; two numbers for a range. */\n  value?: number | number[];\n  defaultValue?: number | number[];\n  onValueChange?: (value: number | number[]) => void;\n  /** Fired once when dragging ends — for expensive commits. */\n  onValueCommitted?: (value: number | number[]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /**\n   * How a dragged thumb meets `step`. `live` (the default) jumps from step to step as the pointer\n   * crosses each halfway point. `release` makes the thumb and the filled indicator follow the\n   * pointer continuously along the track while it is held, and settle on the nearest step with a\n   * short glide when it is let go (no glide under reduced motion). The value never leaves the\n   * steps: `onValueChange` reports the nearest step and fires only when that step changes,\n   * `onValueCommitted` fires once on release with the step the thumb lands on, a track click goes\n   * straight to the nearest step, and the keyboard, readout, tooltip and `aria-valuenow` are the\n   * same as `live`. A single thumb only (a range with `snap=\"release\"` throws) and left-to-right only.\n   * `thumbMarkers` works.\n   */\n  snap?: \"live\" | \"release\";\n  /** Smallest allowed gap between range thumbs. */\n  minStepsBetweenValues?: number;\n  /**\n   * What a dragged range thumb does on reaching its neighbour. `push` (the\n   * default) shoves the neighbour along; `stop` halts the dragged thumb at it,\n   * so two values that may be equal need no clamping in the consumer.\n   */\n  thumbCollision?: \"push\" | \"stop\";\n  /**\n   * Where range thumbs sit when their values are equal. `overlap` (the\n   * default) stacks them exactly, so only the top one can be grabbed.\n   * `offset` lifts the first above the track and drops the second below it,\n   * so both stay grabbable by mouse and finger.\n   */\n  meetingThumbs?: \"overlap\" | \"offset\";\n  /**\n   * Draw each thumb as a vertical bar with a flag at its top instead of a round\n   * handle, one entry per thumb in value order. The first thumb's flag points left\n   * and the second's right, so two flags at equal values never cover each other and\n   * `meetingThumbs` is not needed (setting both throws). One or two thumbs only.\n   */\n  thumbMarkers?: SliderThumbMarker[];\n  /** An accessible name per thumb, in value order — e.g. `[\"Target\", \"Critical\"]`. */\n  thumbLabels?: string[];\n  label?: ReactNode;\n  /** Turn the raw number into what a person should read. */\n  format?: (value: number) => string;\n  /** Show the formatted value beside the label. */\n  showValue?: boolean;\n  /** Ticks. `true` derives them from `step`; an array places them exactly. */\n  marks?: boolean | SliderMark[];\n  /** When to float the value over the thumb. */\n  tooltip?: \"never\" | \"drag\" | \"always\";\n  disabled?: boolean;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Slider({\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommitted,\n  min = 0,\n  max = 100,\n  step = 1,\n  snap = \"live\",\n  minStepsBetweenValues,\n  thumbCollision = \"push\",\n  meetingThumbs = \"overlap\",\n  thumbLabels,\n  thumbMarkers,\n  label,\n  format: formatProp,\n  showValue = true,\n  marks = false,\n  // I18N-ALLOW: tooltip display mode token, not text\n  tooltip = \"drag\",\n  size,\n  tone,\n  disabled = false,\n  className,\n  ref,\n}: SliderProps) {\n  const s = slider({ size, tone, disabled });\n  const locale = useUiLocale();\n  const strings = useUiStrings().slider;\n  /* The default readout follows the locale (\"0,5\" in es-AR); a caller's `format` wins. */\n  const format = formatProp ?? ((v: number) => numberFormat(locale, {}).format(v));\n\n  /* Uncontrolled sliders still need their value for the readout and the\n     tooltips, so the current value is mirrored here regardless of who owns it. */\n  const [internal, setInternal] = useState<number | number[]>(\n    value ?? defaultValue ?? min,\n  );\n  const current = value ?? internal;\n  const values = Array.isArray(current) ? current : [current];\n\n  /* DXUI-17: `snap=\"release\"` draws the thumb and indicator at the pointer while it is held. */\n  const releaseSnap = snap === \"release\";\n  const reduced = useReducedMotion();\n  const { dragPercent, settling, endSettling, onPointerDown } = useReleaseSnapDrag({\n    enabled: releaseSnap && !disabled,\n    reducedMotion: reduced,\n  });\n\n  const resolvedMarks = useMemo<SliderMark[]>(() => {\n    if (Array.isArray(marks)) return marks;\n    if (!marks) return [];\n    /* Derived from `step`, but capped: a 0-1000 slider stepping by 1 would\n       otherwise try to draw a thousand ticks and turn the track into a solid\n       bar. Past the cap the ticks stop meaning anything anyway. */\n    const count = Math.floor((max - min) / step);\n    if (count > 20) return [];\n    return Array.from({ length: count + 1 }, (_, i) => ({ value: min + i * step }));\n  }, [marks, min, max, step]);\n\n  /* DX-4597: equal range values land both thumbs on one pixel. Offsetting them\n     along the cross axis keeps both grabbable. A percentage translate is relative to\n     the thumb's own box, so +-50% is half a thumb whatever the size token. `transform`\n     is the free property here: Base UI positions a thumb with `translate`, and the\n     hover/press scale uses `scale`. */\n  const meeting =\n    meetingThumbs === \"offset\" && values.length === 2 && values[0] === values[1];\n  if (thumbLabels && thumbLabels.length !== values.length) {\n    throw new Error(\n      `Slider: thumbLabels has ${thumbLabels.length} entries but the slider has ${values.length} thumb(s).`,\n    );\n  }\n\n  if (releaseSnap && values.length !== 1) {\n    throw new Error('Slider: snap=\"release\" follows one thumb; a range cannot use it.');\n  }\n\n  if (thumbMarkers) {\n    if (thumbMarkers.length !== values.length) {\n      throw new Error(\n        `Slider: thumbMarkers has ${thumbMarkers.length} entries but the slider has ${values.length} thumb(s).`,\n      );\n    }\n    if (values.length > 2) {\n      throw new Error(\"Slider: thumbMarkers supports one or two thumbs; flag sides cannot separate three.\");\n    }\n    if (meetingThumbs === \"offset\") {\n      throw new Error(\"Slider: thumbMarkers already separates equal thumbs; do not also set meetingThumbs.\");\n    }\n    if (tone !== undefined) {\n      throw new Error(\"Slider: thumbMarkers colours each thumb itself; set `tone` on a marker, not on the slider.\");\n    }\n  }\n  const markerParts = thumbMarkers?.map((m, i) =>\n    marker({ size, tone: m.tone ?? \"neutral\", fill: m.flag, side: flagSide(i, values.length) }),\n  );\n\n  const percent = (v: number) => ((v - min) / (max - min)) * 100;\n\n  return (\n    <div className={cn(s.root(), className)}>\n      <BaseSlider.Root\n        ref={ref}\n        value={value as number}\n        defaultValue={defaultValue as number}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        minStepsBetweenValues={minStepsBetweenValues}\n        thumbCollisionBehavior={thumbCollision === \"stop\" ? \"none\" : \"push\"}\n        onValueChange={(next) => {\n          setInternal(next as number | number[]);\n          onValueChange?.(next as number | number[]);\n        }}\n        onValueCommitted={(next) => onValueCommitted?.(next as number | number[])}\n        className=\"flex w-full flex-col gap-2\"\n      >\n        {(label || showValue) && (\n          <div className={s.header()}>\n            {label && <BaseSlider.Label className={s.label()}>{label}</BaseSlider.Label>}\n            {showValue && (\n              <span className={s.readout()}>\n                {values.length === 2\n                  ? strings.range(format(values[0]), format(values[1]))\n                  : listFormat(locale, { type: \"unit\", style: \"narrow\" }).format(values.map((v) => format(v)))}\n              </span>\n            )}\n          </div>\n        )}\n\n        <BaseSlider.Control\n          className={s.control()}\n          onPointerDown={releaseSnap ? onPointerDown : undefined}\n        >\n          <BaseSlider.Track className={s.track()}>\n            {/* Ticks sit INSIDE the track so they are covered by the indicator\n                as it passes — the filled part of the scale reads as consumed\n                rather than as a row of dots on top of a coloured bar. */}\n            {resolvedMarks.map((mark) => (\n              <span\n                key={mark.value}\n                aria-hidden\n                className=\"absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-border-strong\"\n                style={{\n                  left: `${percent(mark.value)}%`,\n                  /* The end dots were centred on the track's outer edges, so\n                     half of each fell outside the rounded rail and the right\n                     one crossed its container's padding edge. Sitting them\n                     flush INSIDE instead — left edge to left edge, right to\n                     right — keeps every dot on the rail it belongs to.\n\n                     `translate` is written out in full rather than nulled,\n                     because Tailwind v4 compiles both `-translate-x-1/2` and\n                     `-translate-y-1/2` into the SAME `translate` property.\n                     Clearing it would take the vertical centring with it, and\n                     the dot would jump to the top of the track. */\n                  ...(mark.value === min ? { translate: \"0 -50%\", left: 0 } : {}),\n                  ...(mark.value === max\n                    ? { translate: \"0 -50%\", left: \"auto\", right: 0 }\n                    : {}),\n                }}\n              />\n            ))}\n\n            <BaseSlider.Indicator\n              className={s.indicator()}\n              data-settling={settling || undefined}\n              style={dragPercent === null ? undefined : { width: `${dragPercent}%` }}\n            />\n\n            {values.map((v, i) => {\n              const m = thumbMarkers?.[i];\n              const mk = markerParts?.[i];\n              return (\n                <BaseSlider.Thumb\n                  key={i}\n                  index={i}\n                  className={mk ? mk.thumb() : s.thumb()}\n                  getAriaLabel={thumbLabels ? () => thumbLabels[i] : undefined}\n                  data-meeting={meeting ? (i === 0 ? \"above\" : \"below\") : undefined}\n                  data-settling={settling || undefined}\n                  /* A key press mid-glide: the arrow's own step must not glide. Base UI stops the\n                     arrow keys' propagation at the thumb's input, so the listener lives here. */\n                  onKeyDown={releaseSnap ? endSettling : undefined}\n                  style={\n                    meeting || dragPercent !== null\n                      ? {\n                          ...(meeting ? { transform: `translateY(${i === 0 ? \"-50%\" : \"50%\"})` } : {}),\n                          ...(dragPercent === null ? {} : { insetInlineStart: `${dragPercent}%` }),\n                        }\n                      : undefined\n                  }\n                >\n                  {m && mk && (\n                    <>\n                      <span aria-hidden className={mk.bar()} />\n                      <span aria-hidden data-flag-pad className={mk.pad()} />\n                      <span\n                        aria-hidden\n                        data-flag={m.flag}\n                        className={mk.flag()}\n                        style={m.flag === \"checkered\" ? CHECKERED_FLAG_STYLE : undefined}\n                      />\n                    </>\n                  )}\n                  {tooltip !== \"never\" && (\n                    <span\n                      aria-hidden\n                      className={cn(\n                        \"pointer-events-none absolute left-1/2 -translate-x-1/2\",\n                        /* DX-4597: a lowered thumb's bubble goes BELOW it, or it would\n                           cover the raised thumb its range neighbour sits on. */\n                        meeting && i === 1 ? \"top-[calc(100%+0.5rem)]\" : \"bottom-[calc(100%+0.5rem)]\",\n                        \"rounded-md border border-border bg-surface-inset px-2 py-1\",\n                        \"font-mono text-2xs tabular-nums whitespace-nowrap text-primary shadow-md\",\n                        \"transition-[var(--tx-colors),opacity,translate] duration-(--dur-fast) ease-out-strong\",\n                        /* On `drag` the bubble is hidden until the thumb is\n                           grabbed OR focused — the keyboard user needs it just as\n                           much as the pointer user, and focus is their equivalent\n                           of holding the handle. */\n                        tooltip === \"drag\" &&\n                          \"opacity-0 translate-y-1 in-data-dragging:opacity-100 in-data-dragging:translate-y-0 group-focus-visible:opacity-100\",\n                      )}\n                    >\n                      {format(v)}\n                    </span>\n                  )}\n                </BaseSlider.Thumb>\n              );\n            })}\n          </BaseSlider.Track>\n        </BaseSlider.Control>\n      </BaseSlider.Root>\n\n      {resolvedMarks.some((m) => m.label !== undefined) && (\n        <div className={s.marks()} style={{ height: \"1.25rem\" }}>\n          {resolvedMarks\n            .filter((m) => m.label !== undefined)\n            .map((mark) => (\n              <span\n                key={mark.value}\n                className={s.markLabel()}\n                style={{\n                  left: `${percent(mark.value)}%`,\n                  /* The first and last labels would otherwise hang off the\n                     ends of the track. Nudging only the extremes keeps every\n                     other label honestly centred on its tick.\n\n                     `translate`, NOT `transform`. The centring comes from the\n                     `-translate-x-1/2` utility, and Tailwind v4 compiles that\n                     to the standalone `translate` property rather than to\n                     `transform`. Clearing `transform` therefore cancelled\n                     nothing: both extremes stayed shifted by -50%, so the\n                     first label hung half off the left end and the last sat\n                     half its own width short of flush. The declaration was\n                     present, valid, and inert — which is why it survived\n                     review. */\n                  ...(mark.value === min ? { translate: \"none\", left: 0 } : {}),\n                  ...(mark.value === max ? { translate: \"none\", left: \"auto\", right: 0 } : {}),\n                }}\n              >\n                {mark.label}\n              </span>\n            ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["slider","tv","marker","CHECKERED_FLAG_STYLE","flagSide","index","count","Slider","value","defaultValue","onValueChange","onValueCommitted","min","max","step","snap","minStepsBetweenValues","thumbCollision","meetingThumbs","thumbLabels","thumbMarkers","label","formatProp","showValue","marks","tooltip","size","tone","disabled","className","ref","s","locale","useUiLocale","strings","useUiStrings","format","v","numberFormat","internal","setInternal","useState","current","values","releaseSnap","reduced","useReducedMotion","dragPercent","settling","endSettling","onPointerDown","useReleaseSnapDrag","resolvedMarks","useMemo","_","i","meeting","markerParts","m","percent","jsxs","cn","BaseSlider","next","jsx","listFormat","mark","mk","Fragment"],"mappings":"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"}

package/dist/components/SolutionChoice.js

@@ -0,0 +1,89 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useId as k } from "react";
+import { cn as y } from "../lib/cn.js";
+import { Badge as z } from "./Badge.js";
+import { Button as b } from "./Button.js";
+import { CARD_FACE_ICONS as t } from "./card-face/vocabulary.js";
+import { Icon as r } from "./Icon.js";
+import { Markdown as C } from "./Markdown.js";
+import { ReadMore as I } from "./ReadMore.js";
+import { Collapsible as L } from "./Surface.js";
+import { RefText as p } from "../lib/syntax/markdown/refs.js";
+function q({
+  title: c,
+  recommended: n,
+  recommendedLabel: o,
+  body: a,
+  bodyLabel: s,
+  proCon: l,
+  progress: d,
+  children: g,
+  actions: f,
+  composer: N,
+  chooseWrapper: v,
+  className: w
+}) {
+  const h = k(), u = a?.trim() ?? "", m = l?.pro?.trim() ?? "", x = l?.con?.trim() ?? "";
+  return /* @__PURE__ */ i(
+    "article",
+    {
+      "aria-labelledby": h,
+      className: y("flex w-full min-w-0 flex-col gap-3 rounded-lg border bg-surface-raised p-4", n ? "border-accent-border" : "border-border-subtle", w),
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
+            n ? /* @__PURE__ */ e(z, { tone: "accent", icon: /* @__PURE__ */ e(r, { name: t["solution.recommended"], size: "xs" }), className: "w-fit", children: o }) : null,
+            /* @__PURE__ */ e("h3", { id: h, className: "min-w-0 break-words text-sm font-semibold text-primary", children: c })
+          ] }),
+          d === void 0 ? null : /* @__PURE__ */ e("div", { className: "shrink-0", children: d })
+        ] }),
+        u === "" ? null : /* @__PURE__ */ i("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ e("span", { className: "text-xs font-semibold text-secondary", children: s }),
+          /* @__PURE__ */ e("div", { className: "text-sm text-secondary", children: /* @__PURE__ */ e(I, { lines: 3, children: /* @__PURE__ */ e(C, { children: u }) }) })
+        ] }),
+        g,
+        l !== void 0 && (m !== "" || x !== "") ? /* @__PURE__ */ e(L, { defaultOpen: !1, triggerClassName: "w-fit", trigger: /* @__PURE__ */ e("span", { className: "text-xs font-semibold text-secondary", children: l.triggerLabel }), children: /* @__PURE__ */ i("dl", { className: "flex flex-col gap-2 pt-2 text-sm", children: [
+          m === "" ? null : /* @__PURE__ */ i("div", { className: "flex items-start gap-2 rounded-md border border-success-border bg-success-subtle px-3 py-2", children: [
+            /* @__PURE__ */ e(r, { name: t["outcome.passed"], size: "sm", className: "mt-0.5 shrink-0 text-success-text" }),
+            /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("dt", { className: "text-xs font-semibold text-success-text", children: l.proLabel }),
+              /* @__PURE__ */ e("dd", { className: "text-primary", children: /* @__PURE__ */ e(p, { children: m }) })
+            ] })
+          ] }),
+          x === "" ? null : /* @__PURE__ */ i("div", { className: "flex items-start gap-2 rounded-md border border-danger-border bg-danger-subtle px-3 py-2", children: [
+            /* @__PURE__ */ e(r, { name: t["outcome.failed"], size: "sm", className: "mt-0.5 shrink-0 text-danger-text" }),
+            /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("dt", { className: "text-xs font-semibold text-danger-text", children: l.conLabel }),
+              /* @__PURE__ */ e("dd", { className: "text-primary", children: /* @__PURE__ */ e(p, { children: x }) })
+            ] })
+          ] })
+        ] }) }) : null,
+        N ?? (f == null ? null : /* @__PURE__ */ e(j, { actions: f, recommended: n, chooseWrapper: v }))
+      ]
+    }
+  );
+}
+function j({ actions: c, recommended: n, chooseWrapper: o }) {
+  const { choose: a, note: s, reject: l } = c, d = /* @__PURE__ */ e(
+    b,
+    {
+      variant: n ? "solid" : "outline",
+      size: "sm",
+      leadingIcon: /* @__PURE__ */ e(r, { name: t["action.confirm"], size: "sm" }),
+      "aria-label": a.ariaLabel,
+      disabled: a.disabled,
+      loading: a.loading,
+      onClick: a.onClick,
+      children: a.label
+    }
+  );
+  return /* @__PURE__ */ i("div", { className: "mt-auto flex flex-wrap gap-2 pt-1", children: [
+    o === void 0 ? d : o(d),
+    /* @__PURE__ */ e(b, { variant: "ghost", size: "sm", leadingIcon: /* @__PURE__ */ e(r, { name: t["action.edit"], size: "sm" }), "aria-label": s.ariaLabel, disabled: s.disabled, onClick: s.onClick, children: s.label }),
+    l === void 0 ? null : /* @__PURE__ */ e(b, { variant: "ghost-danger", size: "sm", leadingIcon: /* @__PURE__ */ e(r, { name: t["action.dismiss"], size: "sm" }), "aria-label": l.ariaLabel, disabled: l.disabled, onClick: l.onClick, children: l.label })
+  ] });
+}
+export {
+  q as SolutionChoice
+};
+//# sourceMappingURL=SolutionChoice.js.map

package/dist/components/SolutionChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolutionChoice.js","sources":["../../src/components/SolutionChoice.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Badge } from \"./Badge\";\nimport { Button } from \"./Button\";\nimport { CARD_FACE_ICONS } from \"./card-face/vocabulary\";\nimport { Icon } from \"./Icon\";\nimport { Markdown } from \"./Markdown\";\nimport { ReadMore } from \"./ReadMore\";\nimport { Collapsible } from \"./Surface\";\nimport { RefText } from \"../lib/syntax/markdown\";\n\n/* ============================================================================\n   ONE CANDIDATE SOLUTION of a problem (DX-5428, from danxbot's card detail) —\n   its recommendation badge, body, for and against, and the ways to choose it.\n\n   This is the view only. Every word is a prop; what the host owns (a step tree,\n   the progress it rolls up to, a note composer, permissions, the write itself)\n   enters through `children`, `progress`, `composer` and the action callbacks.\n   The body and the for/against block sit behind a `ReadMore` and a `Collapsible`,\n   so a card with several solutions does not dump every paragraph at once; the\n   title, the recommendation and the actions stay in view, so choosing never\n   needs anything opened first.\n   ========================================================================= */\n\nexport interface SolutionChoiceProCon {\n  /** The collapsible's trigger (\"For and against\"). */\n  triggerLabel: string;\n  proLabel: string;\n  /** What speaks for it; blank or omitted draws no pro box. */\n  pro?: string;\n  conLabel: string;\n  /** What speaks against it; blank or omitted draws no con box. */\n  con?: string;\n}\n\nexport interface SolutionChoiceAction {\n  label: string;\n  /** Names the option the button acts on, so several identical buttons stay apart. */\n  ariaLabel: string;\n  onClick: () => void;\n  disabled?: boolean;\n}\n\nexport interface SolutionChoiceActions {\n  choose: SolutionChoiceAction & { loading?: boolean };\n  note: SolutionChoiceAction;\n  /** Omitted when the problem's kind cannot reject an option. */\n  reject?: SolutionChoiceAction;\n}\n\nexport interface SolutionChoiceProps {\n  title: string;\n  recommended: boolean;\n  /** The recommendation badge's word; drawn only when `recommended`. */\n  recommendedLabel: string;\n  /** Markdown; blank or omitted draws no body. */\n  body?: string;\n  /** The small heading over the body. */\n  bodyLabel: string;\n  proCon?: SolutionChoiceProCon;\n  /** Top right, level with the badge (or the title when there is none): a step-progress donut. */\n  progress?: ReactNode;\n  /** Between the body and the for/against block: a step tree. */\n  children?: ReactNode;\n  /** The choice row; `null` shows the option with no controls. */\n  actions?: SolutionChoiceActions | null;\n  /** An open note editor. While present it REPLACES the choice row, so two near-identical rows are never on screen together. */\n  composer?: ReactNode;\n  /** Wraps the choose button, so a host can mark it for attention. */\n  chooseWrapper?: (button: ReactNode) => ReactNode;\n  className?: string;\n}\n\nexport function SolutionChoice({\n  title,\n  recommended,\n  recommendedLabel,\n  body,\n  bodyLabel,\n  proCon,\n  progress,\n  children,\n  actions,\n  composer,\n  chooseWrapper,\n  className,\n}: SolutionChoiceProps) {\n  const titleId = useId();\n  const bodyText = body?.trim() ?? \"\";\n  const pro = proCon?.pro?.trim() ?? \"\";\n  const con = proCon?.con?.trim() ?? \"\";\n  return (\n    <article\n      aria-labelledby={titleId}\n      className={cn(\"flex w-full min-w-0 flex-col gap-3 rounded-lg border bg-surface-raised p-4\", recommended ? \"border-accent-border\" : \"border-border-subtle\", className)}\n    >\n      {/* Two columns: badge + title on the left, the progress slot top right. A long title wraps in the left column only. */}\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n          {recommended ? (\n            <Badge tone=\"accent\" icon={<Icon name={CARD_FACE_ICONS[\"solution.recommended\"]} size=\"xs\" />} className=\"w-fit\">\n              {recommendedLabel}\n            </Badge>\n          ) : null}\n          <h3 id={titleId} className=\"min-w-0 break-words text-sm font-semibold text-primary\">\n            {title}\n          </h3>\n        </div>\n        {progress === undefined ? null : <div className=\"shrink-0\">{progress}</div>}\n      </div>\n\n      {bodyText === \"\" ? null : (\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"text-xs font-semibold text-secondary\">{bodyLabel}</span>\n          <div className=\"text-sm text-secondary\">\n            <ReadMore lines={3}>\n              <Markdown>{bodyText}</Markdown>\n            </ReadMore>\n          </div>\n        </div>\n      )}\n\n      {children}\n\n      {proCon !== undefined && (pro !== \"\" || con !== \"\") ? (\n        <Collapsible defaultOpen={false} triggerClassName=\"w-fit\" trigger={<span className=\"text-xs font-semibold text-secondary\">{proCon.triggerLabel}</span>}>\n          <dl className=\"flex flex-col gap-2 pt-2 text-sm\">\n            {pro === \"\" ? null : (\n              <div className=\"flex items-start gap-2 rounded-md border border-success-border bg-success-subtle px-3 py-2\">\n                <Icon name={CARD_FACE_ICONS[\"outcome.passed\"]} size=\"sm\" className=\"mt-0.5 shrink-0 text-success-text\" />\n                <div className=\"min-w-0\">\n                  <dt className=\"text-xs font-semibold text-success-text\">{proCon.proLabel}</dt>\n                  <dd className=\"text-primary\">\n                    <RefText>{pro}</RefText>\n                  </dd>\n                </div>\n              </div>\n            )}\n            {con === \"\" ? null : (\n              <div className=\"flex items-start gap-2 rounded-md border border-danger-border bg-danger-subtle px-3 py-2\">\n                <Icon name={CARD_FACE_ICONS[\"outcome.failed\"]} size=\"sm\" className=\"mt-0.5 shrink-0 text-danger-text\" />\n                <div className=\"min-w-0\">\n                  <dt className=\"text-xs font-semibold text-danger-text\">{proCon.conLabel}</dt>\n                  <dd className=\"text-primary\">\n                    <RefText>{con}</RefText>\n                  </dd>\n                </div>\n              </div>\n            )}\n          </dl>\n        </Collapsible>\n      ) : null}\n\n      {composer ?? (actions == null ? null : <ChoiceRow actions={actions} recommended={recommended} chooseWrapper={chooseWrapper} />)}\n    </article>\n  );\n}\n\nfunction ChoiceRow({ actions, recommended, chooseWrapper }: { actions: SolutionChoiceActions; recommended: boolean; chooseWrapper?: (button: ReactNode) => ReactNode }) {\n  const { choose, note, reject } = actions;\n  const chooseButton = (\n    <Button\n      variant={recommended ? \"solid\" : \"outline\"}\n      size=\"sm\"\n      leadingIcon={<Icon name={CARD_FACE_ICONS[\"action.confirm\"]} size=\"sm\" />}\n      aria-label={choose.ariaLabel}\n      disabled={choose.disabled}\n      loading={choose.loading}\n      onClick={choose.onClick}\n    >\n      {choose.label}\n    </Button>\n  );\n  return (\n    <div className=\"mt-auto flex flex-wrap gap-2 pt-1\">\n      {chooseWrapper === undefined ? chooseButton : chooseWrapper(chooseButton)}\n      <Button variant=\"ghost\" size=\"sm\" leadingIcon={<Icon name={CARD_FACE_ICONS[\"action.edit\"]} size=\"sm\" />} aria-label={note.ariaLabel} disabled={note.disabled} onClick={note.onClick}>\n        {note.label}\n      </Button>\n      {reject === undefined ? null : (\n        <Button variant=\"ghost-danger\" size=\"sm\" leadingIcon={<Icon name={CARD_FACE_ICONS[\"action.dismiss\"]} size=\"sm\" />} aria-label={reject.ariaLabel} disabled={reject.disabled} onClick={reject.onClick}>\n          {reject.label}\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"names":["SolutionChoice","title","recommended","recommendedLabel","body","bodyLabel","proCon","progress","children","actions","composer","chooseWrapper","className","titleId","useId","bodyText","pro","con","jsxs","cn","Badge","Icon","CARD_FACE_ICONS","jsx","ReadMore","Markdown","Collapsible","RefText","ChoiceRow","choose","note","reject","chooseButton","Button"],"mappings":"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"}

package/dist/components/SortMenu.js

@@ -0,0 +1,75 @@
+import { jsx as r, jsxs as o, Fragment as N } from "react/jsx-runtime";
+import { useId as z } from "react";
+import { cn as u } from "../lib/cn.js";
+import { Icon as c } from "./Icon.js";
+import { IconButton as p } from "./IconButton.js";
+import { Popover as I, PopoverClose as S } from "./Popover.js";
+import { useUiStrings as j } from "../lib/i18n/provider.js";
+function x(s, i, l) {
+  return (s.directions ?? l)[i];
+}
+function E({
+  options: s,
+  value: i,
+  onValueChange: l,
+  "aria-label": d,
+  size: h = "sm",
+  triggerVariant: w = "outline",
+  align: g = "end",
+  className: b
+}) {
+  const a = j().sortMenu, m = z(), n = s.find((e) => e.value === i.field);
+  if (n === void 0)
+    throw new Error(
+      `SortMenu: no option carries the sorted field ${JSON.stringify(i.field)}. The control would name an order that is not on offer; pass an option for the field the list is actually sorted by.`
+    );
+  const v = x(n, i.direction, a.directions);
+  return /* @__PURE__ */ r(
+    I,
+    {
+      align: g,
+      "aria-labelledby": m,
+      width: "calc(16rem*var(--ui-scale))",
+      trigger: /* @__PURE__ */ r(
+        p,
+        {
+          icon: /* @__PURE__ */ o(N, { children: [
+            n.icon !== void 0 && /* @__PURE__ */ r(c, { name: n.icon, size: "sm" }),
+            /* @__PURE__ */ r(c, { name: i.direction === "asc" ? "arrow-up" : "arrow-down", size: "sm" })
+          ] }),
+          label: a.currentOrder(d, n.label, v),
+          variant: w,
+          size: h,
+          className: u(n.icon !== void 0 && "aspect-auto w-auto gap-0.5 px-1.5", b)
+        }
+      ),
+      children: /* @__PURE__ */ o("div", { className: "flex w-full min-w-0 flex-col gap-0.5", children: [
+        /* @__PURE__ */ r("span", { id: m, className: "px-1.5 pb-1 text-2xs font-medium uppercase tracking-wide text-tertiary", children: d }),
+        s.map((e) => /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-2 rounded-md px-1.5 py-0.5", children: [
+          /* @__PURE__ */ o("span", { className: u("flex min-w-0 items-center gap-1.5 text-sm", e.value === i.field ? "font-medium text-primary" : "text-secondary"), children: [
+            e.icon !== void 0 && /* @__PURE__ */ r(c, { name: e.icon, size: "sm" }),
+            /* @__PURE__ */ r("span", { className: "min-w-0 truncate", children: e.label })
+          ] }),
+          /* @__PURE__ */ r("span", { className: "flex shrink-0 items-center gap-0.5", children: ["asc", "desc"].map((t) => {
+            const f = e.value === i.field && t === i.direction, y = x(e, t, a.directions);
+            return /* @__PURE__ */ r(S, { children: /* @__PURE__ */ r(
+              p,
+              {
+                icon: /* @__PURE__ */ r(c, { name: t === "asc" ? "arrow-up" : "arrow-down", size: "xs" }),
+                label: a.optionDirection(e.label, y),
+                variant: f ? "subtle" : "ghost",
+                size: "xs",
+                "aria-pressed": f,
+                onClick: () => l({ field: e.value, direction: t })
+              }
+            ) }, t);
+          }) })
+        ] }, e.value))
+      ] })
+    }
+  );
+}
+export {
+  E as SortMenu
+};
+//# sourceMappingURL=SortMenu.js.map