@devalok/shilp-sutra 0.57.0 → 0.59.0

package/dist/ui/slider.js

@@ -21,45 +21,87 @@ var u = l("relative w-full grow overflow-hidden rounded-pill bg-surface-panel-ho
 			lg: "h-8 w-8 border-[3px]"
 		},
 		color: {
-			accent: "border-accent-7 focus-visible:ring-accent-9",
-			success: "border-success-7 focus-visible:ring-success-9",
-			warning: "border-warning-7 focus-visible:ring-warning-9",
-			error: "border-error-7 focus-visible:ring-error-9"
+			accent: "border-palette-border-strong focus-visible:ring-palette-solid",
+			success: "border-palette-border-strong focus-visible:ring-palette-solid",
+			warning: "border-palette-border-strong focus-visible:ring-palette-solid",
+			error: "border-palette-border-strong focus-visible:ring-palette-solid"
 		}
 	},
 	defaultVariants: {
 		size: "md",
 		color: "accent"
 	}
-}), f = {
-	accent: "bg-accent-9",
-	success: "bg-success-9",
-	warning: "bg-warning-9",
-	error: "bg-error-9"
-}, p = o.forwardRef(({ className: o, "aria-label": l, value: p, defaultValue: m, size: h = "md", color: g = "accent", ..._ }, v) => {
-	let y = h ?? "md", b = g ?? "accent", x = t(), S = x.state === "error", C = _["aria-describedby"] ?? x.helperTextId, w = _["aria-required"] ?? x.required, T = (p ?? m ?? [0]).length;
+}), f = "bg-palette-solid";
+function p(e) {
+	return null;
+}
+p.displayName = "Slider.Mark";
+function m(e, t) {
+	let n = [];
+	for (let t of e ?? []) n.push(typeof t == "number" ? { value: t } : t);
+	return o.Children.forEach(t, (e) => {
+		if (!o.isValidElement(e) || e.type !== p) return;
+		let t = e.props;
+		n.push({
+			value: t.value,
+			label: t.children ?? t.label
+		});
+	}), n.sort((e, t) => e.value - t.value);
+}
+var h = o.forwardRef(({ className: l, "aria-label": p, value: h, defaultValue: g, size: _ = "md", color: v = "accent", marks: y, showValue: b = !1, formatValue: x, children: S, ...C }, w) => {
+	let T = _ ?? "md", E = v ?? "accent", D = t(), O = D.state === "error", k = C["aria-describedby"] ?? D.helperTextId, A = C["aria-required"] ?? D.required, j = h ?? g ?? [0], M = j.length, N = C.min ?? 0, P = (C.max ?? 100) - N || 1, F = m(y, S), I = F.length > 0, L = b === !0 ? "always" : b || void 0, [R, z] = o.useState(j), B = h ?? R, V = o.useCallback((e) => {
+		z(e), C.onValueChange?.(e);
+	}, [C]), [H, U] = o.useState(!1), W = L === "always" || L === "interact" && H;
 	return /* @__PURE__ */ c(r, {
-		ref: v,
-		value: p,
-		defaultValue: m,
-		"aria-invalid": S || void 0,
-		"aria-describedby": C,
-		"aria-required": w || void 0,
-		className: e("relative flex w-full touch-none select-none items-center", o),
-		..._,
-		children: [/* @__PURE__ */ s(a, {
-			className: u({ size: y }),
-			children: /* @__PURE__ */ s(n, { className: e("absolute h-full", f[b]) })
-		}), Array.from({ length: T }, (e, t) => /* @__PURE__ */ s(i, {
-			"aria-label": T === 1 ? l : void 0,
-			"aria-labelledby": T === 1 && !l ? x.labelId : void 0,
-			className: d({
-				size: y,
-				color: b
-			})
-		}, t))]
+		ref: w,
+		"data-palette": E,
+		value: h,
+		defaultValue: g,
+		"aria-invalid": O || void 0,
+		"aria-describedby": k,
+		"aria-required": A || void 0,
+		className: e("relative flex w-full touch-none select-none items-center", I && "mb-ds-05", l),
+		...C,
+		onValueChange: V,
+		children: [
+			/* @__PURE__ */ s(a, {
+				className: u({ size: T }),
+				children: /* @__PURE__ */ s(n, { className: e("absolute h-full", f) })
+			}),
+			I && /* @__PURE__ */ s("div", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-x-0 top-full",
+				children: F.map((e) => /* @__PURE__ */ c("div", {
+					className: "absolute flex -translate-x-1/2 flex-col items-center gap-ds-01",
+					style: { insetInlineStart: `${(e.value - N) / P * 100}%` },
+					children: [/* @__PURE__ */ s("span", { className: "h-ds-02 w-px bg-surface-border-strong" }), e.label !== null && /* @__PURE__ */ s("span", {
+						className: "text-label-xs text-surface-fg-subtle tabular-nums",
+						children: e.label ?? e.value
+					})]
+				}, e.value))
+			}),
+			Array.from({ length: M }, (t, n) => /* @__PURE__ */ s(i, {
+				onPointerDown: () => U(!0),
+				onPointerUp: () => U(!1),
+				onFocus: () => U(!0),
+				onBlur: () => U(!1),
+				"aria-label": M === 1 ? p : void 0,
+				"aria-labelledby": M === 1 && !p ? D.labelId : void 0,
+				className: d({
+					size: T,
+					color: E
+				}),
+				children: L && /* @__PURE__ */ s("span", {
+					"aria-hidden": "true",
+					"data-visible": W || void 0,
+					className: e("pointer-events-none absolute bottom-full left-1/2 mb-ds-02 -translate-x-1/2", "rounded-control-inner bg-palette-solid px-ds-02 py-ds-01", "text-label-xs tabular-nums text-palette-fg", "transition-opacity duration-fast-02 ease-productive-standard", "opacity-0 data-[visible]:opacity-100"),
+					children: x ? x(B[n]) : B[n]
+				})
+			}, n))
+		]
 	});
 });
-p.displayName = r.displayName;
+h.displayName = r.displayName;
+var g = Object.assign(h, { Mark: p });
 //#endregion
-export { p as Slider, d as sliderThumbVariants, u as sliderTrackVariants };
+export { g as Slider, d as sliderThumbVariants, u as sliderTrackVariants };

package/dist/ui/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-panel-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      color: {\n        accent: 'border-accent-7 focus-visible:ring-accent-9',\n        success: 'border-success-7 focus-visible:ring-success-9',\n        warning: 'border-warning-7 focus-visible:ring-warning-9',\n        error: 'border-error-7 focus-visible:ring-error-9',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\nconst sliderRangeColorMap: Record<string, string> = {\n  accent: 'bg-accent-9',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n}\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst Slider = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const thumbCount = (value ?? defaultValue ?? [0]).length\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        className,\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', sliderRangeColorMap[color])} />\n      </SliderPrimitive.Track>\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          // `role=\"slider\"` lives on the THUMB, and Radix renders Root as a\n          // <span> — not a labellable element — so `<Label htmlFor>` cannot name\n          // this control the way it names Input/Select. Without an explicit\n          // aria-label the thumb had NO accessible name even inside\n          // FormField + Label. Point it at the field's label instead.\n          //\n          // Single-thumb only: with a range, one label cannot disambiguate the\n          // two thumbs, so the consumer must name each (`aria-label` per thumb).\n          aria-labelledby={\n            thumbCount === 1 && !ariaLabel ? fieldCtx.labelId : undefined\n          }\n          className={sliderThumbVariants({ size, color })}\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSlider.displayName = SliderPrimitive.Root.displayName\n\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":";;;;;;;;AASA,IAAM,IAAsB,EAC1B,4EACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF,GAEM,IAAsB,EAC1B,gVACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,OAAO;GACL,QAAQ;GACR,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,OAAO;CAAS;AACjD,CACF,GAEM,IAA8C;CAClD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,OAAO;AACT,GA0BM,IAAS,EAAM,YAGlB,EAAE,cAAW,cAAc,GAAW,UAAO,iBAAc,MAAM,IAAW,MAAM,OAAO,IAAY,UAAU,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAO,KAAY,MACnB,IAAQ,KAAa,UACrB,IAAW,EAAa,GACxB,IAAU,EAAS,UAAU,SAC7B,IAAkB,EAAM,uBAAuB,EAAS,cACxD,IAAe,EAAM,oBAAoB,EAAS,UAGlD,KAAc,KAAS,KAAgB,CAAC,CAAC,EAAA,CAAG;CAElD,OACE,kBAAC,GAAD;EACO;EACE;EACO;EACd,gBAAc,KAAW,KAAA;EACzB,oBAAkB;EAClB,iBAAe,KAAgB,KAAA;EAC/B,WAAW,EACT,4DACA,CACF;EACA,GAAI;YAXN,CAaE,kBAAC,GAAD;GAAuB,WAAW,EAAoB,EAAE,QAAK,CAAC;aAC5D,kBAAC,GAAD,EAAuB,WAAW,EAAG,mBAAmB,EAAoB,EAAM,EAAI,CAAA;EACjE,CAAA,GACtB,MAAM,KAAK,EAAE,QAAQ,EAAW,IAAI,GAAG,MACtC,kBAAC,GAAD;GAEE,cAAY,MAAe,IAAK,IAAmC,KAAA;GASnE,mBACE,MAAe,KAAK,CAAC,IAAY,EAAS,UAAU,KAAA;GAEtD,WAAW,EAAoB;IAAE;IAAM;GAAM,CAAC;EAC/C,GAdM,CAcN,CACF,CACmB;;AAE1B,CAAC;AACD,EAAO,cAAA,EAAmC"}
+{"version":3,"file":"slider.js","names":[],"sources":["../../src/ui/slider.tsx"],"sourcesContent":["'use client'\n\nimport * as SliderPrimitive from '@primitives/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { cn } from './lib/utils'\n\nconst sliderTrackVariants = cva(\n  'relative w-full grow overflow-hidden rounded-pill bg-surface-panel-hover',\n  {\n    variants: {\n      size: {\n        sm: 'h-ds-02',\n        md: 'h-ds-02b',\n        lg: 'h-[10px]',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nconst sliderThumbVariants = cva(\n  'touch-target block rounded-pill bg-surface-overlay shadow-raised transition-[color,transform,box-shadow] duration-fast-02 ease-productive-standard hover:shadow-raised-hover active:scale-[1.15] focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4 border',\n        md: 'h-6 w-6 border-2',\n        lg: 'h-8 w-8 border-[3px]',\n      },\n      // The thumb keeps the OLD step-7 edge while every container in the system\n      // moved to step 4. PALETTE-EDGE-WHISPER was reasoned about card edges —\n      // an object you are meant to notice but not look at. A slider handle is\n      // the opposite: it is the thing you aim at, and it is the only part of the\n      // control that moves. Step 4 measured 1.37–1.49:1 against white; step 7 is\n      // 2.31–2.86:1. Recorded as SLIDER-THUMB-EDGE-STEP-7 in the register.\n      color: {\n        accent: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        success: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        warning: 'border-palette-border-strong focus-visible:ring-palette-solid',\n        error: 'border-palette-border-strong focus-visible:ring-palette-solid',\n      },\n    },\n    defaultVariants: { size: 'md', color: 'accent' },\n  },\n)\n\n/** The filled portion of the track — one role for every colour. */\nconst SLIDER_RANGE_FILL = 'bg-palette-solid'\n\nexport type SliderSize = NonNullable<VariantProps<typeof sliderTrackVariants>['size']>\nexport type SliderColor = NonNullable<VariantProps<typeof sliderThumbVariants>['color']>\n\n/** One tick on the scale. A bare number is shorthand for `{ value: n, label: n }`. */\nexport interface SliderMark {\n  /** Position on the scale, in the slider's own units (between `min` and `max`). */\n  value: number\n  /**\n   * What to print under the tick. Defaults to the value itself. Pass `null`\n   * for a tick with no caption.\n   */\n  label?: React.ReactNode\n}\n\nexport interface SliderMarkProps extends SliderMark {\n  /** Caption for this tick. Overrides `label`. */\n  children?: React.ReactNode\n}\n\n/**\n * A single tick, as a child of `Slider`.\n *\n * ```tsx\n * <Slider>\n *   <Slider.Mark value={30}>Launch</Slider.Mark>\n * </Slider>\n * ```\n *\n * Never rendered directly — `Slider` reads the props off it and draws the tick\n * itself, because a tick has to be positioned against the track. Returning\n * `null` keeps it out of the DOM if someone renders one outside a Slider.\n */\nfunction SliderMarkComponent(_props: SliderMarkProps): React.ReactElement | null {\n  return null\n}\nSliderMarkComponent.displayName = 'Slider.Mark'\n\nexport interface SliderProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'color'> {\n  /** Size of the slider. Controls track height and thumb diameter. */\n  size?: SliderSize\n  /** Color of the range fill and thumb border. */\n  color?: SliderColor\n  /**\n   * Tick marks along the scale. Numbers are shorthand, so\n   * `marks={[0, 50, 100]}` is the common case in one line. For custom captions\n   * use objects, or the `Slider.Mark` children form.\n   */\n  marks?: Array<number | SliderMark>\n  /**\n   * Show the current value in a bubble above the thumb.\n   *\n   * - `false` (default) — no bubble.\n   * - `'always'` — always visible.\n   * - `'interact'` — only while the thumb is focused or being dragged, which\n   *   keeps a dense form quiet until someone is actually using the control.\n   *\n   * `true` is accepted as an alias for `'always'`.\n   */\n  showValue?: boolean | 'always' | 'interact'\n  /** Format the bubble's text. Defaults to the raw number. */\n  formatValue?: (value: number) => React.ReactNode\n}\n\n/** Normalise the two authoring forms into one list, sorted by position. */\nfunction collectMarks(\n  marks: SliderProps['marks'],\n  children: React.ReactNode,\n): SliderMark[] {\n  const out: SliderMark[] = []\n  for (const m of marks ?? []) {\n    out.push(typeof m === 'number' ? { value: m } : m)\n  }\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child) || child.type !== SliderMarkComponent) return\n    const p = child.props as SliderMarkProps\n    out.push({ value: p.value, label: p.children ?? p.label })\n  })\n  return out.sort((a, b) => a.value - b.value)\n}\n\n/**\n * A Radix-powered slider supporting single or multiple thumbs.\n *\n * Pass `defaultValue={[50]}` for a single thumb, or `defaultValue={[25, 75]}`\n * for a range slider with two thumbs. One `<Thumb>` is rendered per value entry.\n *\n * When using multiple thumbs, provide per-thumb labels via the `aria-label` array\n * on the `value`/`defaultValue` entries, or wrap each in a labelled form field.\n *\n * **Sizes:** `sm` | `md` (default) | `lg`\n *\n * **Colors:** `accent` (default) | `success` | `warning` | `error`\n */\nconst SliderRoot = React.forwardRef<\n  React.ElementRef<typeof SliderPrimitive.Root>,\n  SliderProps\n>(({ className, 'aria-label': ariaLabel, value, defaultValue, size: sizeProp = 'md', color: colorProp = 'accent', marks, showValue = false, formatValue, children, ...props }, ref) => {\n  const size = sizeProp ?? 'md'\n  const color = colorProp ?? 'accent'\n  const fieldCtx = useFormField()\n  const isError = fieldCtx.state === 'error'\n  const ariaDescribedBy = props['aria-describedby'] ?? fieldCtx.helperTextId\n  const ariaRequired = props['aria-required'] ?? fieldCtx.required\n\n  // Determine how many thumbs to render from controlled or default value\n  const resolvedValue = value ?? defaultValue ?? [0]\n  const thumbCount = resolvedValue.length\n\n  const min = props.min ?? 0\n  const max = props.max ?? 100\n  const span = max - min || 1\n\n  const allMarks = collectMarks(marks, children)\n  const hasMarks = allMarks.length > 0\n  const bubble = showValue === true ? 'always' : showValue || undefined\n\n  // Uncontrolled sliders move without re-rendering us, so the bubble has to\n  // track the primitive's own state rather than the `value` prop.\n  const [liveValues, setLiveValues] = React.useState<number[]>(resolvedValue)\n  const shownValues = value ?? liveValues\n  const handleValueChange = React.useCallback(\n    (next: number[]) => {\n      setLiveValues(next)\n      props.onValueChange?.(next)\n    },\n    [props],\n  )\n  const [interacting, setInteracting] = React.useState(false)\n  const bubbleVisible = bubble === 'always' || (bubble === 'interact' && interacting)\n\n  return (\n    <SliderPrimitive.Root\n      ref={ref}\n      // One palette for the whole control, so the track fill and the thumb\n      // edge can never disagree.\n      data-palette={color}\n      value={value}\n      defaultValue={defaultValue}\n      aria-invalid={isError || undefined}\n      aria-describedby={ariaDescribedBy}\n      aria-required={ariaRequired || undefined}\n      className={cn(\n        'relative flex w-full touch-none select-none items-center',\n        // Ticks sit under the track, so the control needs room for them or the\n        // captions collide with whatever follows in the form.\n        hasMarks && 'mb-ds-05',\n        className,\n      )}\n      {...props}\n      onValueChange={handleValueChange}\n    >\n      <SliderPrimitive.Track className={sliderTrackVariants({ size })}>\n        <SliderPrimitive.Range className={cn('absolute h-full', SLIDER_RANGE_FILL)} />\n      </SliderPrimitive.Track>\n\n      {/* Ticks. Decorative — the value is already announced by the thumb's\n          role=\"slider\", so a screen reader reading these too would just be\n          noise. */}\n      {hasMarks && (\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-x-0 top-full\">\n          {allMarks.map((m) => (\n            <div\n              key={m.value}\n              className=\"absolute flex -translate-x-1/2 flex-col items-center gap-ds-01\"\n              style={{ insetInlineStart: `${((m.value - min) / span) * 100}%` }}\n            >\n              <span className=\"h-ds-02 w-px bg-surface-border-strong\" />\n              {m.label !== null && (\n                <span className=\"text-label-xs text-surface-fg-subtle tabular-nums\">\n                  {m.label ?? m.value}\n                </span>\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {Array.from({ length: thumbCount }, (_, i) => (\n        <SliderPrimitive.Thumb\n          key={i}\n          onPointerDown={() => setInteracting(true)}\n          onPointerUp={() => setInteracting(false)}\n          onFocus={() => setInteracting(true)}\n          onBlur={() => setInteracting(false)}\n          aria-label={thumbCount === 1 ? (ariaLabel as string | undefined) : undefined}\n          // `role=\"slider\"` lives on the THUMB, and Radix renders Root as a\n          // <span> — not a labellable element — so `<Label htmlFor>` cannot name\n          // this control the way it names Input/Select. Without an explicit\n          // aria-label the thumb had NO accessible name even inside\n          // FormField + Label. Point it at the field's label instead.\n          //\n          // Single-thumb only: with a range, one label cannot disambiguate the\n          // two thumbs, so the consumer must name each (`aria-label` per thumb).\n          aria-labelledby={\n            thumbCount === 1 && !ariaLabel ? fieldCtx.labelId : undefined\n          }\n          className={sliderThumbVariants({ size, color })}\n        >\n          {/* Rendered INSIDE the thumb so it tracks the handle for free —\n              positioning a sibling would mean duplicating Radix's own maths and\n              re-deriving it on every drag. */}\n          {bubble && (\n            <span\n              aria-hidden=\"true\"\n              data-visible={bubbleVisible || undefined}\n              className={cn(\n                'pointer-events-none absolute bottom-full left-1/2 mb-ds-02 -translate-x-1/2',\n                'rounded-control-inner bg-palette-solid px-ds-02 py-ds-01',\n                'text-label-xs tabular-nums text-palette-fg',\n                'transition-opacity duration-fast-02 ease-productive-standard',\n                'opacity-0 data-[visible]:opacity-100',\n              )}\n            >\n              {formatValue ? formatValue(shownValues[i]) : shownValues[i]}\n            </span>\n          )}\n        </SliderPrimitive.Thumb>\n      ))}\n    </SliderPrimitive.Root>\n  )\n})\nSliderRoot.displayName = SliderPrimitive.Root.displayName\n\n/**\n * Slider with an optional scale.\n *\n * Two ways to declare ticks, because the common case should be one line and the\n * custom case should still be possible:\n *\n * ```tsx\n * <Slider marks={[0, 25, 50, 75, 100]} />\n *\n * <Slider showValue=\"interact\">\n *   <Slider.Mark value={0}>Off</Slider.Mark>\n *   <Slider.Mark value={80}>Recommended</Slider.Mark>\n * </Slider>\n * ```\n */\nconst Slider = Object.assign(SliderRoot, { Mark: SliderMarkComponent })\n\n// The Mark component is reached as `Slider.Mark`, not exported standalone — a\n// second export named SliderMark would collide with the SliderMark interface,\n// which is the more useful public name (it types the `marks` prop).\nexport { Slider, sliderThumbVariants,sliderTrackVariants }\n"],"mappings":"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"}

package/dist/ui/split-button.d.ts

@@ -29,8 +29,14 @@ export interface SplitButtonProps {
     onOpenChange?: (open: boolean) => void;
     /** @default 'solid' */
     variant?: SplitButtonVariant;
-    /** @default 'accent' */
-    color?: SplitButtonColor;
+    /**
+     * Palette name. The six built-ins are unchanged; any palette registered in
+     * CSS (`[data-palette='…']`) now works too. Widened from a closed union, so
+     * every existing value still type-checks.
+     *
+     * @default 'accent'
+     */
+    color?: SplitButtonColor | (string & {});
     /** @default 'md' */
     size?: SplitButtonSize;
     /** Disable both halves. */

package/dist/ui/split-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAC5B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GACnC,WAAW,GAAG,SAAS,GACvB,aAAa,GAAG,WAAW,GAC3B,cAAc,GAAG,YAAY,GAC7B,YAAY,GAAG,UAAU,CAAA;AAE7B,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,wBAAwB;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA8FD,QAAA,MAAM,WAAW,yFAuIhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAMzC;;;;;;;;;;GAUG;AACH,MAAM,MAAM,oBAAoB,GAC5B,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GACnC,WAAW,GAAG,SAAS,GACvB,aAAa,GAAG,WAAW,GAC3B,cAAc,GAAG,YAAY,GAC7B,YAAY,GAAG,UAAU,CAAA;AAE7B,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,gBAAgB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAA;IACxC,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,oBAAoB,CAAA;IAChC,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiFD,QAAA,MAAM,WAAW,yFA2IhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAC,kBAAkB,EAAE,CAAA"}

package/dist/ui/split-button.js

@@ -5,107 +5,60 @@ import * as i from "react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/ui/split-button.tsx
 var c = {
-	solid: {
-		accent: "bg-accent-11/20",
-		error: "bg-error-11/20",
-		success: "bg-success-11/20",
-		warning: "bg-warning-11/20",
-		info: "bg-info-11/20",
-		neutral: "bg-neutral-8/30"
-	},
-	soft: {
-		accent: "bg-accent-6",
-		error: "bg-error-6",
-		success: "bg-success-6",
-		warning: "bg-warning-6",
-		info: "bg-info-6",
-		neutral: "bg-surface-border"
-	},
-	outline: {
-		accent: "bg-accent-7",
-		error: "bg-error-7",
-		success: "bg-success-7",
-		warning: "bg-warning-7",
-		info: "bg-info-7",
-		neutral: "bg-surface-border-strong"
-	}
+	solid: "bg-palette-solid-active/20",
+	soft: "bg-palette-border-subtle",
+	outline: "bg-palette-border"
 }, l = {
+	solid: "bg-neutral-8/30",
+	soft: "bg-surface-border"
+}, u = {
 	xs: "h-ds-xs-plus",
 	sm: "h-ds-sm",
 	md: "h-ds-md",
 	"icon-xs": "h-ds-xs-plus",
 	"icon-sm": "h-ds-sm",
 	"icon-md": "h-ds-md"
-}, u = {
+}, d = {
 	xs: "text-body-sm",
 	sm: "text-body-sm",
 	md: "text-body-md",
 	"icon-xs": "text-body-sm",
 	"icon-sm": "text-body-sm",
 	"icon-md": "text-body-md"
-}, d = {
+}, f = {
 	xs: "px-ds-03 gap-1",
 	sm: "px-ds-04 gap-1.5",
 	md: "px-ds-05 gap-2",
 	"icon-xs": "px-ds-02",
 	"icon-sm": "px-ds-03",
 	"icon-md": "px-ds-04"
-}, f = {
+}, p = {
 	xs: "px-ds-02",
 	sm: "px-ds-02",
 	md: "px-ds-03",
 	"icon-xs": "px-ds-01",
 	"icon-sm": "px-ds-02",
 	"icon-md": "px-ds-02"
-}, p = {
+}, m = {
 	xs: "rounded-control",
 	sm: "rounded-control",
 	md: "rounded-control",
 	"icon-xs": "rounded-control",
 	"icon-sm": "rounded-control",
 	"icon-md": "rounded-control"
+}, h = {
+	solid: "bg-palette-solid text-palette-fg hover:bg-palette-solid-hover active:bg-palette-solid-active",
+	soft: "bg-palette-soft text-palette-text hover:bg-palette-soft-hover active:bg-palette-soft-active",
+	outline: "bg-transparent text-palette-text hover:bg-palette-soft active:bg-palette-soft-hover"
 };
-function m(e, t) {
-	let n = {
-		solid: {
-			accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
-			error: "bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11",
-			success: "bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11",
-			warning: "bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11",
-			info: "bg-info-9 text-info-fg hover:bg-info-10 active:bg-info-11",
-			neutral: "bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8"
-		},
-		soft: {
-			accent: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5",
-			error: "bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5",
-			success: "bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5",
-			warning: "bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5",
-			info: "bg-info-3 text-info-11 hover:bg-info-4 active:bg-info-5",
-			neutral: "bg-surface-panel-hover text-surface-fg-muted hover:bg-surface-panel-active active:bg-neutral-5"
-		},
-		outline: {
-			accent: "bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4",
-			error: "bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4",
-			success: "bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4",
-			warning: "bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4",
-			info: "bg-transparent text-info-11 hover:bg-info-3 active:bg-info-4",
-			neutral: "bg-transparent text-surface-fg hover:bg-surface-panel-hover active:bg-surface-panel-active"
-		}
-	};
-	return n[e][t] ?? n[e].accent;
+function g(e, t) {
+	let n = e === "outline" && t === "neutral" ? " text-surface-fg" : "";
+	return h[e] + n;
 }
-function h(e) {
-	let t = {
-		accent: "border-accent-7",
-		error: "border-error-7",
-		success: "border-success-7",
-		warning: "border-warning-7",
-		info: "border-info-7",
-		neutral: "border-surface-border-interactive"
-	};
-	return t[e] ?? t.accent;
+function _(e) {
+	return e === "neutral" ? "border-surface-border-interactive" : "border-palette-border";
 }
-function g({ className: e }) {
+function v({ className: e }) {
 	return /* @__PURE__ */ o("svg", {
 		width: "12",
 		height: "12",
@@ -122,53 +75,54 @@ function g({ className: e }) {
 		})
 	});
 }
-var _ = i.forwardRef(function({ children: _, onClick: v, dropdownContent: y, open: b, onOpenChange: x, variant: S = "solid", color: C = "accent", size: w = "md", disabled: T = !1, "aria-label": E, dropdownLabel: D = "More options", dropdownIcon: O, triggerSide: k = "right", placement: A = "top-end", triggerWidth: j, className: M }, N) {
-	let [P, F] = i.useMemo(() => {
-		let [e, t] = A.split("-");
+var y = i.forwardRef(function({ children: h, onClick: y, dropdownContent: b, open: x, onOpenChange: S, variant: C = "solid", color: w = "accent", size: T = "md", disabled: E = !1, "aria-label": D, dropdownLabel: O = "More options", dropdownIcon: k, triggerSide: A = "right", placement: j = "top-end", triggerWidth: M, className: N }, P) {
+	let [F, I] = i.useMemo(() => {
+		let [e, t] = j.split("-");
 		return [e, t === "start" ? "start" : t === "end" ? "end" : "center"];
-	}, [A]), I = m(S, C), L = c[S][C] ?? c[S].accent, R = j == null ? void 0 : { width: typeof j == "number" ? `${j}px` : j }, z = /* @__PURE__ */ o(r, {
+	}, [j]), L = g(C, w), R = (w === "neutral" ? l[C] : void 0) ?? c[C], z = M == null ? void 0 : { width: typeof M == "number" ? `${M}px` : M }, B = /* @__PURE__ */ o(r, {
 		asChild: !0,
 		children: /* @__PURE__ */ o("button", {
 			type: "button",
-			disabled: T,
-			"aria-label": D,
-			className: e("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", I, l[w], f[w]),
-			style: R,
-			children: O ?? /* @__PURE__ */ o(g, {})
+			disabled: E,
+			"aria-label": O,
+			className: e("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", L, u[T], p[T]),
+			style: z,
+			children: k ?? /* @__PURE__ */ o(v, {})
 		})
 	});
 	return /* @__PURE__ */ s(t, {
-		open: b,
-		onOpenChange: x,
+		open: x,
+		onOpenChange: S,
 		children: [/* @__PURE__ */ o("div", {
-			ref: N,
+			ref: P,
 			role: "group",
-			"aria-label": E ?? void 0,
-			className: e("relative inline-flex", M),
+			"aria-label": D ?? void 0,
+			"data-palette": w,
+			className: e("relative inline-flex", N),
 			children: /* @__PURE__ */ s("div", {
-				className: e("inline-flex items-stretch overflow-hidden", p[w], S === "solid" && "shadow-raised", S === "outline" && `border ${h(C)}`),
+				className: e("inline-flex items-stretch overflow-hidden", m[T], C === "solid" && "shadow-raised", C === "outline" && `border ${_(w)}`),
 				children: [
-					k === "left" && /* @__PURE__ */ s(a, { children: [z, /* @__PURE__ */ o("div", { className: e("w-px self-stretch", L) })] }),
+					A === "left" && /* @__PURE__ */ s(a, { children: [B, /* @__PURE__ */ o("div", { className: e("w-px self-stretch", R) })] }),
 					/* @__PURE__ */ o("button", {
 						type: "button",
-						onClick: v,
-						disabled: T,
-						"aria-label": E,
-						className: e("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "transition-[colors,transform] duration-fast-01 ease-productive-standard", "active:scale-[0.97]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", I, l[w], u[w], d[w]),
-						children: _
+						onClick: y,
+						disabled: E,
+						"aria-label": D,
+						className: e("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "transition-[colors,transform] duration-fast-01 ease-productive-standard", "active:scale-[0.97]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", L, u[T], d[T], f[T]),
+						children: h
 					}),
-					k === "right" && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", { className: e("w-px self-stretch", L) }), z] })
+					A === "right" && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", { className: e("w-px self-stretch", R) }), B] })
 				]
 			})
-		}), y && /* @__PURE__ */ o(n, {
-			side: P,
-			align: F,
+		}), b && /* @__PURE__ */ o(n, {
+			side: F,
+			align: I,
 			sideOffset: 8,
 			className: "w-auto min-w-[10rem] p-ds-01",
-			children: y
+			children: b
 		})]
 	});
 });
-_.displayName = "SplitButton";
+y.displayName = "SplitButton";
 //#endregion
-export { _ as SplitButton };
+export { y as SplitButton };

package/dist/ui/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\n/**\n * Placement of the dropdown panel, in floating-ui's vocabulary.\n *\n * Declared here rather than imported from `@floating-ui/dom`: that package is\n * bundled into dist at runtime but is NOT a consumer dependency, so a type\n * import leaks an unresolvable specifier into the published .d.ts —\n * `error TS2307: Cannot find module '@floating-ui/dom'` for anyone type-checking\n * declarations. The union is stable and two lines; borrowing it is not worth an\n * install. (This component no longer calls floating-ui at all — see the Radix\n * Popover mapping below.)\n */\nexport type SplitButtonPlacement =\n  | 'top' | 'right' | 'bottom' | 'left'\n  | 'top-start' | 'top-end'\n  | 'right-start' | 'right-end'\n  | 'bottom-start' | 'bottom-end'\n  | 'left-start' | 'left-end'\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: SplitButtonPlacement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', info: 'bg-info-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', info: 'bg-info-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', info: 'bg-info-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-body-sm', sm: 'text-body-sm', md: 'text-body-md',\n  'icon-xs': 'text-body-sm', 'icon-sm': 'text-body-sm', 'icon-md': 'text-body-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      info: 'bg-info-9 text-info-fg hover:bg-info-10 active:bg-info-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      info: 'bg-info-3 text-info-11 hover:bg-info-4 active:bg-info-5',\n      neutral: 'bg-surface-panel-hover text-surface-fg-muted hover:bg-surface-panel-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      info: 'bg-transparent text-info-11 hover:bg-info-3 active:bg-info-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-panel-hover active:bg-surface-panel-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', info: 'border-info-7', neutral: 'border-surface-border-interactive',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClasses,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\n/**\n * Placement of the dropdown panel, in floating-ui's vocabulary.\n *\n * Declared here rather than imported from `@floating-ui/dom`: that package is\n * bundled into dist at runtime but is NOT a consumer dependency, so a type\n * import leaks an unresolvable specifier into the published .d.ts —\n * `error TS2307: Cannot find module '@floating-ui/dom'` for anyone type-checking\n * declarations. The union is stable and two lines; borrowing it is not worth an\n * install. (This component no longer calls floating-ui at all — see the Radix\n * Popover mapping below.)\n */\nexport type SplitButtonPlacement =\n  | 'top' | 'right' | 'bottom' | 'left'\n  | 'top-start' | 'top-end'\n  | 'right-start' | 'right-end'\n  | 'bottom-start' | 'bottom-end'\n  | 'left-start' | 'left-end'\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /**\n   * Palette name. The six built-ins are unchanged; any palette registered in\n   * CSS (`[data-palette='…']`) now works too. Widened from a closed union, so\n   * every existing value still type-checks.\n   *\n   * @default 'accent'\n   */\n  color?: SplitButtonColor | (string & {})\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: SplitButtonPlacement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\n// The hairline between the two halves. One line per variant instead of one\n// per variant × colour — the hue arrives via `data-palette` on the group.\nconst dividerColor: Record<SplitButtonVariant, string> = {\n  solid: 'bg-palette-solid-active/20',\n  soft: 'bg-palette-border-subtle',\n  outline: 'bg-palette-border',\n}\n\n// `neutral` diverges from the roles here, and both cases predate this work:\n// its solid divider is 30% rather than 20% (a flat grey needs more presence\n// than a saturated one to read at 1px), and its soft divider sits on\n// `surface-border` rather than the subtle tier the role resolves to.\nconst neutralDivider: Partial<Record<SplitButtonVariant, string>> = {\n  solid: 'bg-neutral-8/30',\n  soft: 'bg-surface-border',\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-body-sm', sm: 'text-body-sm', md: 'text-body-md',\n  'icon-xs': 'text-body-sm', 'icon-sm': 'text-body-sm', 'icon-md': 'text-body-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\n// Three lines, not eighteen. Colour comes from `data-palette`.\nconst halfClasses: Record<SplitButtonVariant, string> = {\n  solid:\n    'bg-palette-solid text-palette-fg hover:bg-palette-solid-hover active:bg-palette-solid-active',\n  soft: 'bg-palette-soft text-palette-text hover:bg-palette-soft-hover active:bg-palette-soft-active',\n  outline:\n    'bg-transparent text-palette-text hover:bg-palette-soft active:bg-palette-soft-hover',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  // Same exception Button carries: on neutral, an outlined control's label\n  // wants full contrast rather than the muted text role.\n  const neutralOutline = variant === 'outline' && color === 'neutral' ? ' text-surface-fg' : ''\n  return halfClasses[variant] + neutralOutline\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  // An outlined control's edge owes WCAG 1.4.11, so neutral takes the\n  // interactive border tier rather than the decorative one the role resolves\n  // to. The chromatic palettes already satisfy it from their own ramp.\n  return color === 'neutral' ? 'border-surface-border-interactive' : 'border-palette-border'\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClassNames = getHalfClasses(variant, color)\n    const divider =\n      (color === 'neutral' ? neutralDivider[variant] : undefined) ?? dividerColor[variant]\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClassNames,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          // One palette for the whole group: both halves and the hairline\n          // between them inherit it, so they can never disagree.\n          data-palette={color}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClassNames,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":"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"}

package/dist/ui/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAiC,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAOjD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAY,MAAM,cAAc,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,kJAAkJ;IAClJ,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0KAA0K;IAC1K,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAA;IACrD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACtC,6HAA6H;IAC7H,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC/B,iFAAiF;IACjF,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAgGD,QAAA,MAAM,QAAQ,sFAoQb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../src/ui/stat-card.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAiC,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAGrE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAOjD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,KAAK,UAAU,EAAY,MAAM,cAAc,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE;QACN,KAAK,EAAE,MAAM,CAAA;QACb,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;KACrC,CAAA;IACD,kJAAkJ;IAClJ,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sEAAsE;IACtE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0KAA0K;IAC1K,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,CAAA;IACrD;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,yJAAyJ;IACzJ,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACtC,6HAA6H;IAC7H,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,uGAAuG;IACvG,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B;;;;OAIG;IACH,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAA;IAC/B,iFAAiF;IACjF,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;IACpB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAgGD,QAAA,MAAM,QAAQ,sFA0Qb,CAAA;AAID,OAAO,EAAE,QAAQ,EAAE,CAAA"}