@devalok/shilp-sutra 0.34.1 → 0.36.1

package/dist/ui/split-button.js

@@ -1,11 +1,12 @@
 "use client";
-import { $t as e, Qt as t, en as n, in as r, rn as i } from "../_chunks/primitives.js";
+import { cn as e, ln as t, mn as n, pn as r, un as i } from "../_chunks/primitives.js";
 import { a, c as o } from "../_chunks/framer.js";
-import { cn as s } from "./lib/utils.js";
-import * as c from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { durations as s } from "./lib/motion.js";
+import { cn as c } from "./lib/utils.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/ui/split-button.tsx
-var f = {
+var p = {
 	solid: {
 		accent: "bg-accent-11/20",
 		error: "bg-error-11/20",
@@ -27,35 +28,35 @@ var f = {
 		warning: "bg-warning-7",
 		neutral: "bg-surface-border-strong"
 	}
-}, p = {
+}, m = {
 	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"
-}, m = {
+}, h = {
 	xs: "text-ds-sm",
 	sm: "text-ds-sm",
 	md: "text-ds-md",
 	"icon-xs": "text-ds-sm",
 	"icon-sm": "text-ds-sm",
 	"icon-md": "text-ds-md"
-}, h = {
+}, g = {
 	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"
-}, g = {
+}, _ = {
 	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"
-}, _ = {
+}, v = {
 	xs: "rounded-ds-md",
 	sm: "rounded-ds-md",
 	md: "rounded-ds-lg",
@@ -63,7 +64,7 @@ var f = {
 	"icon-sm": "rounded-ds-md",
 	"icon-md": "rounded-ds-md"
 };
-function v(e, t) {
+function y(e, t) {
 	let n = {
 		solid: {
 			accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
@@ -89,7 +90,7 @@ function v(e, t) {
 	};
 	return n[e][t] ?? n[e].accent;
 }
-function y(e) {
+function b(e) {
 	let t = {
 		accent: "border-accent-7",
 		error: "border-error-7",
@@ -99,15 +100,15 @@ function y(e) {
 	};
 	return t[e] ?? t.accent;
 }
-function b({ className: e }) {
-	return /* @__PURE__ */ u("svg", {
+function x({ className: e }) {
+	return /* @__PURE__ */ d("svg", {
 		width: "12",
 		height: "12",
 		viewBox: "0 0 12 12",
 		fill: "none",
 		className: e,
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ u("path", {
+		children: /* @__PURE__ */ d("path", {
 			d: "M3 4.5L6 7.5L9 4.5",
 			stroke: "currentColor",
 			strokeWidth: "1.5",
@@ -116,24 +117,24 @@ function b({ className: e }) {
 		})
 	});
 }
-var x = c.forwardRef(function({ children: x, onClick: S, dropdownContent: C, open: w, onOpenChange: T, variant: E = "solid", color: D = "accent", size: O = "md", disabled: k = !1, "aria-label": A, dropdownLabel: j = "More options", dropdownIcon: M, triggerSide: N = "right", placement: P = "top-end", triggerWidth: F, className: I }, L) {
-	let [R, z] = c.useState(!1), B = w !== void 0, V = B ? w : R, H = c.useRef(null), U = c.useRef(null), W = c.useId(), G = c.useCallback((e) => {
-		T && T(e), B || z(e);
-	}, [T, B]);
-	c.useEffect(() => {
-		if (!V || !H.current || !U.current) return;
-		let a = H.current, o = U.current;
-		return t(a, o, () => {
-			e(a, o, {
-				placement: P,
+var S = l.forwardRef(function({ children: S, onClick: C, dropdownContent: w, open: T, onOpenChange: E, variant: D = "solid", color: O = "accent", size: k = "md", disabled: A = !1, "aria-label": j, dropdownLabel: M = "More options", dropdownIcon: N, triggerSide: P = "right", placement: F = "top-end", triggerWidth: I, className: L }, R) {
+	let [z, B] = l.useState(!1), V = T !== void 0, H = V ? T : z, U = l.useRef(null), W = l.useRef(null), G = l.useId(), K = l.useCallback((e) => {
+		E && E(e), V || B(e);
+	}, [E, V]);
+	l.useEffect(() => {
+		if (!H || !U.current || !W.current) return;
+		let a = U.current, o = W.current;
+		return e(a, o, () => {
+			t(a, o, {
+				placement: F,
 				middleware: [
-					i(8),
-					n({ fallbackPlacements: [
+					r(8),
+					i({ fallbackPlacements: [
 						"bottom-end",
 						"top-start",
 						"bottom-start"
 					] }),
-					r({ padding: 8 })
+					n({ padding: 8 })
 				]
 			}).then(({ x: e, y: t }) => {
 				Object.assign(o.style, {
@@ -142,74 +143,74 @@ var x = c.forwardRef(function({ children: x, onClick: S, dropdownContent: C, ope
 				});
 			});
 		});
-	}, [V, P]), c.useEffect(() => {
-		if (!V) return;
+	}, [H, F]), l.useEffect(() => {
+		if (!H) return;
 		let e = (e) => {
 			let t = e.target;
-			H.current?.contains(t) || U.current?.contains(t) || G(!1);
+			U.current?.contains(t) || W.current?.contains(t) || K(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [V, G]), c.useEffect(() => {
-		if (!V) return;
+	}, [H, K]), l.useEffect(() => {
+		if (!H) return;
 		let e = (e) => {
-			e.key === "Escape" && G(!1);
+			e.key === "Escape" && K(!1);
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [V, G]);
-	let K = v(E, D), q = f[E][D] ?? f[E].accent, J = F == null ? void 0 : { width: typeof F == "number" ? `${F}px` : F };
-	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", {
-		ref: L,
+	}, [H, K]);
+	let q = y(D, O), J = p[D][O] ?? p[D].accent, Y = I == null ? void 0 : { width: typeof I == "number" ? `${I}px` : I };
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+		ref: R,
 		role: "group",
-		"aria-label": A ?? void 0,
-		className: s("relative inline-flex", I),
-		children: /* @__PURE__ */ d("div", {
-			ref: H,
-			className: s("inline-flex items-stretch overflow-hidden", _[O], E === "solid" && "shadow-raised", E === "outline" && `border ${y(D)}`),
+		"aria-label": j ?? void 0,
+		className: c("relative inline-flex", L),
+		children: /* @__PURE__ */ f("div", {
+			ref: U,
+			className: c("inline-flex items-stretch overflow-hidden", v[k], D === "solid" && "shadow-raised", D === "outline" && `border ${b(O)}`),
 			children: [
-				N === "left" && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("button", {
+				P === "left" && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => G(!V),
-					disabled: k,
-					"aria-label": j,
+					onClick: () => K(!H),
+					disabled: A,
+					"aria-label": M,
 					"aria-haspopup": "menu",
-					"aria-expanded": V,
-					"aria-controls": V ? W : void 0,
-					className: s("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", K, p[O], g[O]),
-					style: J,
-					children: M ?? /* @__PURE__ */ u(b, {})
-				}), /* @__PURE__ */ u("div", { className: s("w-px self-stretch", q) })] }),
-				/* @__PURE__ */ u("button", {
+					"aria-expanded": H,
+					"aria-controls": H ? G : void 0,
+					className: c("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", q, m[k], _[k]),
+					style: Y,
+					children: N ?? /* @__PURE__ */ d(x, {})
+				}), /* @__PURE__ */ d("div", { className: c("w-px self-stretch", J) })] }),
+				/* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: S,
-					disabled: k,
-					"aria-label": A,
-					className: s("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "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", K, p[O], m[O], h[O]),
-					children: x
+					onClick: C,
+					disabled: A,
+					"aria-label": j,
+					className: c("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", q, m[k], h[k], g[k]),
+					children: S
 				}),
-				N === "right" && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u("div", { className: s("w-px self-stretch", q) }), /* @__PURE__ */ u("button", {
+				P === "right" && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", { className: c("w-px self-stretch", J) }), /* @__PURE__ */ d("button", {
 					type: "button",
-					onClick: () => G(!V),
-					disabled: k,
-					"aria-label": j,
+					onClick: () => K(!H),
+					disabled: A,
+					"aria-label": M,
 					"aria-haspopup": "menu",
-					"aria-expanded": V,
-					"aria-controls": V ? W : void 0,
-					className: s("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", K, p[O], g[O]),
-					style: J,
-					children: M ?? /* @__PURE__ */ u(b, {})
+					"aria-expanded": H,
+					"aria-controls": H ? G : void 0,
+					className: c("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", q, m[k], _[k]),
+					style: Y,
+					children: N ?? /* @__PURE__ */ d(x, {})
 				})] })
 			]
 		})
-	}), /* @__PURE__ */ u(o, { children: V && C && /* @__PURE__ */ u("div", {
-		ref: U,
-		id: W,
+	}), /* @__PURE__ */ d(o, { children: H && w && /* @__PURE__ */ d("div", {
+		ref: W,
+		id: G,
 		role: "menu",
 		className: "fixed z-popover",
 		style: {
 			top: 0,
 			left: 0
 		},
-		children: /* @__PURE__ */ u(a.div, {
+		children: /* @__PURE__ */ d(a.div, {
 			initial: {
 				opacity: 0,
 				scale: .95
@@ -222,12 +223,12 @@ var x = c.forwardRef(function({ children: x, onClick: S, dropdownContent: C, ope
 				opacity: 0,
 				scale: .95
 			},
-			transition: { duration: .15 },
+			transition: { duration: s.moderate01 },
 			className: "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
-			children: C
+			children: w
 		})
 	}) })] });
 });
-x.displayName = "SplitButton";
+S.displayName = "SplitButton";
 //#endregion
-export { x as SplitButton };
+export { S as SplitButton };

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

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { computePosition, flip, offset, shift, autoUpdate, type Placement } from '@floating-ui/dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { type VariantProps } from 'class-variance-authority'\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { durations } from './lib/motion'\n\n// ── Types ───────────────────────────────────────────────────────\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?: Placement\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', 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', 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', 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-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-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-ds-md', sm: 'rounded-ds-md', md: 'rounded-ds-lg',\n  'icon-xs': 'rounded-ds-sm', 'icon-sm': 'rounded-ds-md', 'icon-md': 'rounded-ds-md',\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      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      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-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      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-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', neutral: 'border-surface-border-strong',\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    const [internalOpen, setInternalOpen] = React.useState(false)\n    const isControlled = openProp !== undefined\n    const isOpen = isControlled ? openProp : internalOpen\n\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLDivElement>(null)\n    const menuId = React.useId()\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (onOpenChange) onOpenChange(value)\n        if (!isControlled) setInternalOpen(value)\n      },\n      [onOpenChange, isControlled],\n    )\n\n    // ── Floating UI positioning ──\n    React.useEffect(() => {\n      if (!isOpen || !anchorRef.current || !floatingRef.current) return\n\n      const anchor = anchorRef.current\n      const floating = floatingRef.current\n\n      const update = () => {\n        computePosition(anchor, floating, {\n          placement: placementProp,\n          middleware: [\n            offset(8),\n            flip({ fallbackPlacements: ['bottom-end', 'top-start', 'bottom-start'] }),\n            shift({ padding: 8 }),\n          ],\n        }).then(({ x, y }) => {\n          Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })\n        })\n      }\n\n      const cleanup = autoUpdate(anchor, floating, update)\n      return cleanup\n    }, [isOpen, placementProp])\n\n    // ── Close on outside click ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleClick = (e: MouseEvent) => {\n        const target = e.target as Node\n        if (\n          anchorRef.current?.contains(target) ||\n          floatingRef.current?.contains(target)\n        ) return\n        setOpen(false)\n      }\n      document.addEventListener('mousedown', handleClick)\n      return () => document.removeEventListener('mousedown', handleClick)\n    }, [isOpen, setOpen])\n\n    // ── Close on Escape ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleKey = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') setOpen(false)\n      }\n      document.addEventListener('keydown', handleKey)\n      return () => document.removeEventListener('keydown', handleKey)\n    }, [isOpen, setOpen])\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    return (\n      <>\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            ref={anchorRef}\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                {/* Dropdown trigger (left) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\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                <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                {/* Dropdown trigger (right) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\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              </>\n            )}\n          </div>\n        </div>\n\n        {/* Floating dropdown panel */}\n        <AnimatePresence>\n          {isOpen && dropdownContent && (\n            <div\n              ref={floatingRef}\n              id={menuId}\n              role=\"menu\"\n              className=\"fixed z-popover\"\n              style={{ top: 0, left: 0 }}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={{ duration: durations.moderate01 }}\n                className=\"rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating\"\n              >\n                {dropdownContent}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonVariant, SplitButtonColor, SplitButtonSize }\n"],"mappings":"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"}

package/dist/ui/stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack.js","names":[],"sources":["../../src/ui/stack.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\nimport { cn } from './lib/utils'\n\ntype SpacingToken =\n  | 'ds-01'\n  | 'ds-02'\n  | 'ds-02b'\n  | 'ds-03'\n  | 'ds-04'\n  | 'ds-05'\n  | 'ds-05b'\n  | 'ds-06'\n  | 'ds-07'\n  | 'ds-08'\n  | 'ds-09'\n  | 'ds-10'\n  | 'ds-11'\n  | 'ds-12'\n  | 'ds-13'\n\ntype StackProps<T extends React.ElementType = 'div'> = {\n  as?: T\n  direction?: 'vertical' | 'horizontal' | 'row' | 'column'\n  gap?: SpacingToken | number\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'\n  wrap?: boolean\n  className?: string\n  children?: React.ReactNode\n} & Omit<React.ComponentPropsWithRef<T>, 'as' | 'className' | 'children'>\n\nconst alignMap = {\n  start: 'items-start',\n  center: 'items-center',\n  end: 'items-end',\n  stretch: 'items-stretch',\n  baseline: 'items-baseline',\n} as const\n\nconst justifyMap = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n  around: 'justify-around',\n  evenly: 'justify-evenly',\n} as const\n\nconst gapMap: Record<string, string> = {\n  '0': 'gap-0',\n  '1': 'gap-ds-01',\n  '2': 'gap-ds-02',\n  '3': 'gap-ds-03',\n  '4': 'gap-ds-04',\n  '5': 'gap-ds-05',\n  '6': 'gap-ds-06',\n  '7': 'gap-ds-07',\n  '8': 'gap-ds-08',\n  '9': 'gap-ds-09',\n  '10': 'gap-ds-10',\n  '11': 'gap-ds-11',\n  '12': 'gap-ds-12',\n  '13': 'gap-ds-13',\n  'ds-01': 'gap-ds-01',\n  'ds-02': 'gap-ds-02',\n  'ds-02b': 'gap-ds-02b',\n  'ds-03': 'gap-ds-03',\n  'ds-04': 'gap-ds-04',\n  'ds-05': 'gap-ds-05',\n  'ds-05b': 'gap-ds-05b',\n  'ds-06': 'gap-ds-06',\n  'ds-07': 'gap-ds-07',\n  'ds-08': 'gap-ds-08',\n  'ds-09': 'gap-ds-09',\n  'ds-10': 'gap-ds-10',\n  'ds-11': 'gap-ds-11',\n  'ds-12': 'gap-ds-12',\n  'ds-13': 'gap-ds-13',\n} as const\n\nconst Stack = React.forwardRef<HTMLElement, StackProps>(\n  ({ as, direction = 'vertical', gap, align, justify, wrap, className, children, ...props }, ref) => {\n    const Component = as || 'div'\n    return React.createElement(\n      Component,\n      {\n        ref,\n        className: cn(\n          'flex',\n          (direction === 'vertical' || direction === 'column') ? 'flex-col' : 'flex-row',\n          gap != null && gapMap[String(gap)],\n          align && alignMap[align],\n          justify && justifyMap[justify],\n          wrap && 'flex-wrap',\n          className,\n        ),\n        ...props,\n      },\n      children,\n    )\n  },\n)\nStack.displayName = 'Stack'\n\nexport { Stack, type SpacingToken, type StackProps }\n"],"mappings":";;;AAgCA,IAAM,IAAW;CACf,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,UAAU;CACX,EAEK,IAAa;CACjB,OAAO;CACP,QAAQ;CACR,KAAK;CACL,SAAS;CACT,QAAQ;CACR,QAAQ;CACT,EAEK,IAAiC;CACrC,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,GAAK;CACL,IAAM;CACN,IAAM;CACN,IAAM;CACN,IAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACT,SAAS;CACV,EAEK,IAAQ,EAAM,YACjB,EAAE,OAAI,eAAY,YAAY,QAAK,UAAO,YAAS,SAAM,cAAW,aAAU,GAAG,KAAS,MAAQ;CACjG,IAAM,IAAY,KAAM;AACxB,QAAO,EAAM,cACX,GACA;EACE;EACA,WAAW,EACT,QACC,MAAc,cAAc,MAAc,WAAY,aAAa,YACpE,KAAO,QAAQ,EAAO,OAAO,EAAI,GACjC,KAAS,EAAS,IAClB,KAAW,EAAW,IACtB,KAAQ,aACR,EACD;EACD,GAAG;EACJ,EACD,EACD;EAEJ;AACD,EAAM,cAAc"}

package/dist/ui/stat-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.js","names":[],"sources":["../../src/ui/stat-card.tsx"],"sourcesContent":["'use client'\n\nimport { IconMinus, IconTrendingDown, IconTrendingUp } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { useLink } from './lib/link-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Icon } from './icon'\n\n/**\n * Props for StatCard — a dashboard metric tile displaying a label, a large numeric value,\n * an optional trend delta (with directional arrow icon), and an optional header icon.\n *\n * **Delta direction:** `'up'` renders a green trending-up arrow, `'down'` renders a red\n * trending-down arrow, `'neutral'` renders a grey dash. The `delta.value` is a formatted\n * string (e.g. `\"+8%\"` or `\"−120\"`).\n *\n * **Loading state:** Pass `loading={true}` to render a pulse-skeleton placeholder instead of data.\n *\n * @example\n * // Revenue metric with a positive trend:\n * <StatCard\n *   label=\"Monthly Revenue\"\n *   value=\"$48,200\"\n *   delta={{ value: \"+12%\", direction: \"up\" }}\n *   icon={<IconCurrencyDollar />}\n * />\n *\n * @example\n * // Open ticket count with a downward trend (good for support queues):\n * <StatCard\n *   label=\"Open Tickets\"\n *   value={142}\n *   delta={{ value: \"−18\", direction: \"down\" }}\n * />\n *\n * @example\n * // Loading skeleton while data is fetching:\n * <StatCard label=\"Users\" value={0} loading={isFetching} />\n *\n * @example\n * // Simple metric with no trend (stable, neutral):\n * <StatCard\n *   label=\"Storage Used\"\n *   value=\"4.2 GB\"\n *   delta={{ value: \"No change\", direction: \"neutral\" }}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Heading text for the metric. `title` is an alias for `label`. */\n  label?: string\n  /** Alias for `label` — use whichever feels natural. */\n  title?: string\n  value: string | number\n  /** Prefix before value, e.g. \"$\" */\n  prefix?: string\n  /** Suffix after value, e.g. \"users\" */\n  suffix?: string\n  delta?: {\n    value: string\n    direction: 'up' | 'down' | 'neutral'\n  }\n  icon?: React.ReactNode | React.ComponentType<{ className?: string }>\n  loading?: boolean\n  /** Comparison period label shown after delta, e.g. \"vs last month\" */\n  comparisonLabel?: string\n  /** Secondary metric below main value, e.g. \"of $50,000 target\" */\n  secondaryLabel?: string\n  /** Progress toward a target (0-100). Renders a thin progress bar below the value. */\n  progress?: number\n  /** Color accent for the left border decoration */\n  accent?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  /** Sparkline data points. Renders a mini SVG line chart in the card. */\n  sparkline?: number[]\n  /** Make the card clickable with hover state */\n  onClick?: () => void\n  /** Href — makes the card a link (uses the LinkContext Link component) */\n  href?: string\n  /** Footer content rendered below the card body, e.g. \"View details →\" */\n  footer?: React.ReactNode\n}\n\nconst accentBorderMap: Record<NonNullable<StatCardProps['accent']>, string> = {\n  default: 'border-l-accent-9',\n  success: 'border-l-success-9',\n  warning: 'border-l-warning-9',\n  error: 'border-l-error-9',\n  info: 'border-l-info-9',\n}\n\nfunction buildSparklinePath(raw: number[], width: number, height: number): string {\n  const data = raw.filter((v) => Number.isFinite(v))\n  if (data.length < 2) return ''\n  const min = Math.min(...data)\n  const max = Math.max(...data)\n  const range = max - min || 1\n  const stepX = width / (data.length - 1)\n  return data\n    .map((v, i) => {\n      const x = i * stepX\n      const y = height - ((v - min) / range) * height\n      return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nfunction Sparkline({\n  data,\n  colorClass,\n}: {\n  data: number[]\n  colorClass: string\n}) {\n  const id = React.useId()\n  const pathRef = React.useRef<SVGPathElement>(null)\n  const [pathLength, setPathLength] = React.useState(0)\n  const svgWidth = 80\n  const svgHeight = 32\n  const path = buildSparklinePath(data, svgWidth, svgHeight)\n\n  React.useEffect(() => {\n    if (pathRef.current) {\n      setPathLength(pathRef.current.getTotalLength())\n    }\n  }, [path])\n\n  if (!path) return null\n\n  // Build area fill path (close to bottom-right then bottom-left)\n  const areaPath = `${path} L${svgWidth.toFixed(1)},${svgHeight.toFixed(1)} L0,${svgHeight.toFixed(1)} Z`\n\n  return (\n    <div className={cn('w-20 h-8', colorClass)} aria-hidden=\"true\">\n      <svg\n        viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n        className=\"w-full h-full overflow-visible\"\n        preserveAspectRatio=\"none\"\n      >\n        <defs>\n          <linearGradient id={`sparkline-fill-${id}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n            <stop offset=\"0%\" stopColor=\"currentColor\" stopOpacity=\"0.1\" />\n            <stop offset=\"100%\" stopColor=\"currentColor\" stopOpacity=\"0\" />\n          </linearGradient>\n        </defs>\n        <path d={areaPath} fill={`url(#sparkline-fill-${id})`} />\n        <path\n          ref={pathRef}\n          d={path}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          style={{\n            opacity: pathLength === 0 ? 0 : 1,\n            strokeDasharray: pathLength,\n            strokeDashoffset: pathLength,\n            animation: pathLength > 0 ? `sparkline-draw-${id.replace(/:/g, '')} 1s ease-out forwards` : 'none',\n          }}\n        />\n      </svg>\n      {pathLength > 0 && (\n        <style>{`@keyframes sparkline-draw-${id.replace(/:/g, '')} { to { stroke-dashoffset: 0; } }`}</style>\n      )}\n    </div>\n  )\n}\n\nfunction ProgressBar({ progress, label }: { progress: number; label: string }) {\n  const clamped = Math.max(0, Math.min(100, progress))\n  const barColor =\n    clamped >= 90 ? 'bg-success-9' : clamped >= 70 ? 'bg-warning-9' : 'bg-accent-9'\n\n  return (\n    <div className=\"h-1 w-full rounded-ds-full bg-surface-raised mt-ds-04\" role=\"progressbar\" aria-label={`${label} progress`} aria-valuenow={clamped} aria-valuemin={0} aria-valuemax={100}>\n      <div\n        className={cn('h-full rounded-ds-full transition-[width] duration-moderate-02 ease-productive-standard', barColor)}\n        style={{ width: `${clamped}%` }}\n      />\n    </div>\n  )\n}\n\nconst StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(\n  (\n    {\n      className,\n      label,\n      title,\n      value,\n      prefix,\n      suffix,\n      delta,\n      icon,\n      loading,\n      comparisonLabel,\n      secondaryLabel,\n      progress,\n      accent,\n      sparkline,\n      onClick,\n      href,\n      footer,\n      ...props\n    },\n    ref,\n  ) => {\n    const Link = useLink()\n    const resolvedLabel = title ?? label ?? ''\n    const isClickable = !!(onClick || href)\n    const computedAriaLabel =\n      isClickable && !props['aria-label'] ? `View ${resolvedLabel}` : props['aria-label']\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b',\n            accent && `border-l-[3px] ${accentBorderMap[accent]}`,\n            className,\n          )}\n          {...props}\n        >\n          <div className=\"h-ds-04 w-24 rounded-ds-sm bg-skeleton-base animate-pulse mb-ds-05\" />\n          <div className=\"h-ds-sm w-32 rounded-ds-md bg-skeleton-base animate-pulse mb-ds-03\" />\n          <div className=\"h-3 w-16 rounded-ds-sm bg-skeleton-base animate-pulse\" />\n        </div>\n      )\n    }\n\n    const DeltaIcon =\n      delta?.direction === 'up'\n        ? IconTrendingUp\n        : delta?.direction === 'down'\n          ? IconTrendingDown\n          : IconMinus\n\n    const deltaColour =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-surface-fg-muted'\n\n    const sparklineColor =\n      delta?.direction === 'up'\n        ? 'text-success-11'\n        : delta?.direction === 'down'\n          ? 'text-error-11'\n          : 'text-accent-11'\n\n    const cardContent = (\n      <>\n        <div className=\"flex items-center justify-between mb-ds-04\">\n          <motion.p\n            className=\"text-ds-md font-medium text-surface-fg-muted\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={tweens.fade}\n          >\n            {resolvedLabel}\n          </motion.p>\n          <div className=\"flex items-center gap-ds-03\">\n            {sparkline && sparkline.length >= 2 && (\n              <Sparkline data={sparkline} colorClass={sparklineColor} />\n            )}\n            {icon && (\n              <motion.span\n                className=\"text-surface-fg-muted\"\n                initial={{ opacity: 0, scale: 0.96 }}\n                animate={{ opacity: 1, scale: 1 }}\n                transition={springs.snappy}\n                aria-hidden=\"true\"\n              >\n                {typeof icon === 'function'\n                  ? <Icon icon={icon as React.ForwardRefExoticComponent<any>} size=\"lg\" />\n                  : icon}\n              </motion.span>\n            )}\n          </div>\n        </div>\n        <div className=\"overflow-hidden\">\n          <motion.p\n            className=\"inline-block text-ds-3xl font-semibold text-surface-fg\"\n            initial={{ opacity: 0, y: '100%' }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={springs.smooth}\n          >\n            {prefix && (\n              <span className=\"text-surface-fg-muted text-ds-lg\">{prefix}</span>\n            )}\n            <span className=\"tabular-nums\">{value}</span>\n            {suffix && (\n              <span className=\"text-surface-fg-muted text-ds-lg\">{suffix}</span>\n            )}\n          </motion.p>\n        </div>\n        {secondaryLabel && (\n          <motion.p\n            className=\"text-ds-sm text-surface-fg-subtle mt-ds-01\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.1 }}\n          >\n            {secondaryLabel}\n          </motion.p>\n        )}\n        {progress != null && (\n          <motion.div\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.15 }}\n          >\n            <ProgressBar progress={progress} label={resolvedLabel} />\n          </motion.div>\n        )}\n        {delta && (\n          <motion.div\n            className={cn(\n              'mt-ds-03 flex items-center gap-ds-02 text-ds-sm font-medium',\n              deltaColour,\n            )}\n            initial={{ opacity: 0, y: 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ ...springs.smooth, delay: 0.2 }}\n          >\n            <motion.span\n              className=\"inline-flex\"\n              initial={{ opacity: 0.5, scale: 1.4 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={springs.bouncy}\n            >\n              <Icon icon={DeltaIcon} size=\"sm\" />\n            </motion.span>\n            <span>{delta.value}</span>\n            {comparisonLabel && (\n              <span className=\"text-surface-fg-subtle font-normal\">{comparisonLabel}</span>\n            )}\n          </motion.div>\n        )}\n        {footer && (\n          <motion.div\n            className=\"mt-ds-04 pt-ds-04 border-t border-surface-border text-ds-sm\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ ...tweens.fade, delay: 0.25 }}\n          >\n            {footer}\n          </motion.div>\n        )}\n      </>\n    )\n\n    const cardClasses = cn(\n      'rounded-ds-lg border border-surface-border bg-surface-raised shadow-raised p-ds-05b',\n      accent && `border-l-[3px] ${accentBorderMap[accent]}`,\n      isClickable &&\n        'cursor-pointer hover:shadow-raised-hover hover:border-surface-border-strong transition-[box-shadow,border-color] duration-fast-02 ease-productive-standard group',\n      className,\n    )\n\n    if (href) {\n      return (\n        <Link\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          onClick={onClick}\n          className={cn(cardClasses, 'block no-underline')}\n          aria-label={computedAriaLabel}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {cardContent}\n        </Link>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cardClasses}\n        onClick={onClick}\n        role={onClick ? 'button' : undefined}\n        tabIndex={onClick ? 0 : undefined}\n        aria-label={computedAriaLabel}\n        onKeyDown={\n          onClick\n            ? (e: React.KeyboardEvent) => {\n                if (e.key === 'Enter' || e.key === ' ') {\n                  e.preventDefault()\n                  onClick()\n                }\n              }\n            : undefined\n        }\n        {...props}\n      >\n        {cardContent}\n      </div>\n    )\n  },\n)\n\nStatCard.displayName = 'StatCard'\n\nexport { StatCard }\n"],"mappings":"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"}

package/dist/ui/status-dot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-dot.js","names":[],"sources":["../../src/ui/status-dot.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from './lib/utils'\n\ntype Status = 'healthy' | 'warning' | 'critical' | 'neutral' | 'inactive'\n\nconst dotColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9',\n  warning: 'bg-warning-9',\n  critical: 'bg-error-9',\n  neutral: 'bg-neutral-8',\n  inactive: 'bg-neutral-6',\n}\n\nconst textColorMap: Record<Status, string> = {\n  healthy: 'text-success-11',\n  warning: 'text-warning-11',\n  critical: 'text-error-11',\n  neutral: 'text-surface-fg-muted',\n  inactive: 'text-surface-fg-subtle',\n}\n\nconst ringBorderColorMap: Record<Status, string> = {\n  healthy: 'border-success-9',\n  warning: 'border-warning-9',\n  critical: 'border-error-9',\n  neutral: 'border-neutral-8',\n  inactive: 'border-neutral-6',\n}\n\nconst pulseColorMap: Record<Status, string> = {\n  healthy: 'bg-success-9/40',\n  warning: 'bg-warning-9/40',\n  critical: 'bg-error-9/40',\n  neutral: 'bg-neutral-8/40',\n  inactive: 'bg-neutral-6/40',\n}\n\nconst sizeMap = {\n  sm: { dot: 'h-1.5 w-1.5', pulse: 'h-1.5 w-1.5', text: 'text-ds-xs' },\n  md: { dot: 'h-2 w-2', pulse: 'h-2 w-2', text: 'text-ds-sm' },\n  lg: { dot: 'h-2.5 w-2.5', pulse: 'h-2.5 w-2.5', text: 'text-ds-sm' },\n} as const\n\n/**\n * A semantic health/presence indicator dot with optional pulse animation and inline label.\n *\n * @example\n * <StatusDot status=\"healthy\" />\n * <StatusDot status=\"critical\" label=\"Service down\" pulse />\n * <StatusDot status=\"warning\" size=\"lg\" label=\"Elevated load\" />\n */\nexport interface StatusDotProps extends React.HTMLAttributes<HTMLSpanElement> {\n  status: Status\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'filled' */\n  variant?: 'filled' | 'ring'\n  /** Pulse animation. Defaults to true for 'healthy', false for others. */\n  pulse?: boolean\n  /** Inline label text rendered after the dot */\n  label?: string\n  labelClassName?: string\n}\n\nconst StatusDot = React.forwardRef<HTMLSpanElement, StatusDotProps>(\n  ({ status, size = 'md', variant = 'filled', pulse, label, labelClassName, className, 'aria-label': ariaLabelProp, ...props }, ref) => {\n    const shouldPulse = pulse ?? status === 'healthy'\n    const s = sizeMap[size]\n    const autoAriaLabel = label ? `${label} \\u2014 ${status}` : `Status: ${status}`\n\n    const dotClasses = variant === 'ring'\n      ? cn('relative inline-flex rounded-full border-[1.5px]', s.dot, ringBorderColorMap[status], 'bg-transparent')\n      : cn('relative inline-flex rounded-full', s.dot, dotColorMap[status])\n\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        aria-label={ariaLabelProp ?? autoAriaLabel}\n        className={cn('inline-flex items-center gap-ds-02', className)}\n        {...props}\n      >\n        <span className=\"relative inline-flex shrink-0\">\n          {shouldPulse && (\n            <span\n              data-pulse=\"\"\n              className={cn('absolute inline-flex rounded-full animate-ping motion-reduce:animate-none', s.pulse, pulseColorMap[status])}\n            />\n          )}\n          <span className={dotClasses} />\n        </span>\n        {label && (\n          <span className={cn(s.text, textColorMap[status], 'font-sans', labelClassName)}>\n            {label}\n          </span>\n        )}\n      </span>\n    )\n  },\n)\nStatusDot.displayName = 'StatusDot'\n\nexport { StatusDot }\nexport type { Status as StatusDotStatus }\n"],"mappings":";;;;;AAOA,IAAM,IAAsC;CAC1C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAuC;CAC3C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAA6C;CACjD,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAwC;CAC5C,SAAS;CACT,SAAS;CACT,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEK,IAAU;CACd,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACpE,IAAI;EAAE,KAAK;EAAW,OAAO;EAAW,MAAM;EAAc;CAC5D,IAAI;EAAE,KAAK;EAAe,OAAO;EAAe,MAAM;EAAc;CACrE,EAuBK,IAAY,EAAM,YACrB,EAAE,WAAQ,UAAO,MAAM,aAAU,UAAU,UAAO,UAAO,mBAAgB,cAAW,cAAc,GAAe,GAAG,KAAS,MAAQ;CACpI,IAAM,IAAc,KAAS,MAAW,WAClC,IAAI,EAAQ,IACZ,IAAgB,IAAQ,GAAG,EAAM,UAAU,MAAW,WAAW,KAEjE,IAAa,MAAY,SAC3B,EAAG,oDAAoD,EAAE,KAAK,EAAmB,IAAS,iBAAiB,GAC3G,EAAG,qCAAqC,EAAE,KAAK,EAAY,GAAQ;AAEvE,QACE,kBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAY,KAAiB;EAC7B,WAAW,EAAG,sCAAsC,EAAU;EAC9D,GAAI;YALN,CAOE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CACG,KACC,kBAAC,QAAD;IACE,cAAW;IACX,WAAW,EAAG,6EAA6E,EAAE,OAAO,EAAc,GAAQ;IAC1H,CAAA,EAEJ,kBAAC,QAAD,EAAM,WAAW,GAAc,CAAA,CAC1B;MACN,KACC,kBAAC,QAAD;GAAM,WAAW,EAAG,EAAE,MAAM,EAAa,IAAS,aAAa,EAAe;aAC3E;GACI,CAAA,CAEJ;;EAGZ;AACD,EAAU,cAAc"}

package/dist/ui/stepper.d.ts

@@ -26,11 +26,21 @@ import * as React from 'react';
  *   <Step label="Invite teammates" />
  *   <Step label="Set up billing" />
  * </Stepper>
+ *
+ * @example
+ * // Clickable completed steps — user can navigate back:
+ * <Stepper activeStep={step} onStepClick={(i) => setStep(i)}>
+ *   <Step label="Account" />
+ *   <Step label="Profile" />
+ *   <Step label="Review" />
+ * </Stepper>
  * // These are just a few ways — feel free to combine props creatively!
  */
 interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
     activeStep: number;
     orientation?: 'horizontal' | 'vertical';
+    /** Called when a completed step is clicked. Receives the 0-based step index. */
+    onStepClick?: (stepIndex: number) => void;
     children: React.ReactNode;
 }
 declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAyDZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAID,QAAA,MAAM,IAAI,kFA8ET,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAyB/E;kBAzBQ,cAAc;;;AA+BvB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,mBAAmB,EAAE,CAAA"}
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../src/ui/stepper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACjE,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,gFAAgF;IAChF,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,OAAO,qFAsDZ,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB;AAID,QAAA,MAAM,IAAI,kFA0GT,CAAA;AAED;;;;;;;;;;;GAWG;AACH,UAAU,mBAAmB;IAC3B,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,iBAAS,cAAc,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAyB/E;kBAzBQ,cAAc;;;AA+BvB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,mBAAmB,EAAE,CAAA"}