@humain/ui 2.2.7 → 2.2.9

package/dist/wc/selection-group.js

@@ -5,20 +5,20 @@ import { t as y } from "./minus.js";
 import { t as b } from "./dist.js";
 var u = /* @__PURE__ */ p(v(), 1), i = h();
 function E(a = {}) {
-  const { value: r, defaultValue: o, onValueChange: e } = a, [d, t] = u.useState(o), c = r !== void 0;
-  return [c ? r : d, u.useCallback((n) => {
-    c || t(n), e?.(n);
-  }, [c, e])];
+  const { value: e, defaultValue: o, onValueChange: r } = a, [d, t] = u.useState(o), c = e !== void 0;
+  return [c ? e : d, u.useCallback((n) => {
+    c || t(n), r?.(n);
+  }, [c, r])];
 }
 function F(a = {}) {
-  const { value: r, defaultValue: o = [], onValueChange: e } = a, [d, t] = u.useState(o), c = r !== void 0, n = c ? r : d;
+  const { value: e, defaultValue: o = [], onValueChange: r } = a, [d, t] = u.useState(o), c = e !== void 0, n = c ? e : d;
   return [n, u.useCallback((l, f) => {
-    const g = f ? [...n, l] : n.filter((x) => x !== l);
-    c || t(g), e?.(g);
+    const m = f ? [...n, l] : n.filter((x) => x !== l);
+    c || t(m), r?.(m);
   }, [
     c,
     n,
-    e
+    r
   ])];
 }
 var k = {
@@ -102,7 +102,7 @@ var k = {
   sm: "text-sm",
   md: "text-sm",
   lg: "text-base"
-}, m = {
+}, g = {
   sm: "size-3",
   md: "size-3.5",
   lg: "size-4"
@@ -119,27 +119,27 @@ function j({ className: a }) {
     children: /* @__PURE__ */ (0, i.jsx)("path", { d: S })
   });
 }
-var V = u.forwardRef(({ type: a, checked: r = !1, disabled: o = !1, size: e = "sm", color: d = "primary", className: t, indeterminate: c = !1 }, n) => {
+var V = u.forwardRef(({ type: a, checked: e = !1, disabled: o = !1, size: r = "sm", color: d = "primary", className: t, indeterminate: c = !1 }, n) => {
   const l = k[d];
   return a === "checkbox" ? /* @__PURE__ */ (0, i.jsx)("span", {
     ref: n,
     "data-slot": "selection-indicator",
     "data-type": "checkbox",
-    "data-checked": r,
-    className: s(C({ size: e }), r ? s(l.indicatorChecked, l.border, l.text, "border", "delight-check-bounce") : "border-border bg-background", o && "opacity-50", t),
+    "data-checked": e,
+    className: s(C({ size: r }), e ? s(l.indicatorChecked, l.border, l.text, "border", "delight-check-bounce") : "border-border bg-background", o && "opacity-50", t),
     "aria-hidden": "true",
-    children: r && (c ? /* @__PURE__ */ (0, i.jsx)(y, {
-      className: s(m[e], "animate-[scale-in_150ms_ease-out] motion-reduce:animate-none"),
+    children: e && (c ? /* @__PURE__ */ (0, i.jsx)(y, {
+      className: s(g[r], "animate-[scale-in_150ms_ease-out] motion-reduce:animate-none"),
       strokeWidth: 3
-    }) : /* @__PURE__ */ (0, i.jsx)(j, { className: m[e] }))
+    }) : /* @__PURE__ */ (0, i.jsx)(j, { className: g[r] }))
   }) : /* @__PURE__ */ (0, i.jsx)("span", {
     ref: n,
     "data-slot": "selection-indicator",
     "data-type": "radio",
-    "data-checked": r,
-    className: s(z({ size: e }), "transition-[background-color,border-color] duration-150 motion-reduce:transition-none", r ? s(l.indicatorChecked, "border-transparent") : "border-border bg-background", o && "opacity-50", t),
+    "data-checked": e,
+    className: s(z({ size: r }), "transition-[background-color,border-color] duration-150 motion-reduce:transition-none", e ? s(l.indicatorChecked, "border-transparent") : "border-border bg-background", o && "opacity-50", t),
     "aria-hidden": "true",
-    children: /* @__PURE__ */ (0, i.jsx)("span", { className: s("bg-background rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none", w[e], r ? "scale-100" : "scale-0") })
+    children: /* @__PURE__ */ (0, i.jsx)("span", { className: s("bg-background rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none", w[r], e ? "scale-100" : "scale-0") })
   });
 });
 V.displayName = "SelectionIndicator";
@@ -151,15 +151,15 @@ var I = {
   sm: "size-4",
   md: "size-5",
   lg: "size-6"
-}, _ = u.forwardRef(({ children: a, size: r = "sm", className: o }, e) => {
-  const d = I[r], t = N[r];
+}, _ = u.forwardRef(({ children: a, size: e = "sm", className: o }, r) => {
+  const d = I[e], t = N[e];
   return /* @__PURE__ */ (0, i.jsx)("div", {
-    ref: e,
+    ref: r,
     "data-slot": "featured-icon",
-    className: s("shrink-0 rounded-md border border-border bg-card/60", "flex items-center justify-center", "dark:bg-foreground/60 dark:border-border", d, o),
+    className: s("shrink-0 rounded-md border border-border bg-card/60", "flex items-center justify-center", "dark:border-border", d, o),
     style: { boxShadow: "var(--shadow-inset-ring)" },
     children: /* @__PURE__ */ (0, i.jsx)("div", {
-      className: s("text-secondary-foreground dark:text-text-quaternary", t),
+      className: s("text-secondary-foreground", t),
       children: a
     })
   });
@@ -178,13 +178,13 @@ var M = {
   sm: "size-[10px]",
   md: "size-3",
   lg: "size-3.5"
-}, D = u.forwardRef(({ color: a, size: r = "sm", className: o }, e) => {
+}, D = u.forwardRef(({ color: a, size: e = "sm", className: o }, r) => {
   if (!a) return null;
   const d = M[a], t = a.startsWith("#");
   return /* @__PURE__ */ (0, i.jsx)("span", {
-    ref: e,
+    ref: r,
     "data-slot": "color-dot",
-    className: s("shrink-0 rounded-full", R[r], !t && d, o),
+    className: s("shrink-0 rounded-full", R[e], !t && d, o),
     style: t ? { backgroundColor: a } : void 0,
     "aria-hidden": "true"
   });

package/dist/wc/selection-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"selection-group.js","names":[],"sources":["../../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border-2 transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-1.5',\n  md: 'size-2',\n  lg: 'size-2.5',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-base',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-border bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {checked &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          checked\n            ? cn(colors.indicatorChecked, 'border-transparent')\n            : 'border-border bg-background',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'bg-background rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:bg-foreground/60 dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div\n          className={cn(\n            'text-secondary-foreground dark:text-text-quaternary',\n            innerSize,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}
+{"version":3,"file":"selection-group.js","names":[],"sources":["../../src/components/ui/selection-group.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { Minus } from 'lucide-react';\nimport * as React from 'react';\nimport { cn } from '@/lib/utils';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport type SelectionColor =\n  | 'primary'\n  | 'secondary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'destructive';\n\nexport type SelectionSize = 'sm' | 'md' | 'lg';\n\nexport type SelectionVariant =\n  | 'default'\n  | 'card'\n  | 'pill'\n  | 'stacked'\n  | 'icon-simple'\n  | 'icon-card'\n  | 'avatar'\n  | 'payment'\n  | 'simple'\n  | 'chip';\n\nexport interface SelectionItem {\n  /** Unique value for the option */\n  value: string;\n  /** Display label */\n  label: string;\n  /** Whether this option is disabled */\n  disabled?: boolean;\n  /** Secondary text (e.g., \"$10/month\") */\n  subtext?: string;\n  /** Supporting description text */\n  description?: string;\n  /** Leading icon component */\n  icon?: React.ReactNode;\n  /** Avatar element */\n  avatar?: React.ReactNode;\n  /** Image URL */\n  image?: string;\n  /** Alt text for the image (defaults to \"\" if omitted) */\n  imageAlt?: string;\n  /** Position of the image */\n  imagePosition?: 'top' | 'left' | 'trailing';\n  /** Badge element */\n  badge?: React.ReactNode;\n  /** Dot color for chip variant (named color or hex) */\n  dotColor?: string;\n  /** Price display (e.g., \"$10\") */\n  price?: string;\n  /** Price period (e.g., \"per month\") */\n  pricePeriod?: string;\n  /** Payment icon element */\n  paymentIcon?: React.ReactNode;\n  /** Action buttons */\n  actions?: React.ReactNode;\n}\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\ninterface UseSelectionStateOptions {\n  /** Controlled value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string) => void;\n}\n\n/**\n * Hook for managing single selection state (radio behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useSelectionState(\n  options: UseSelectionStateOptions = {},\n): [string | undefined, (value: string) => void] {\n  const { value: controlledValue, defaultValue, onValueChange } = options;\n\n  const [internalValue, setInternalValue] = React.useState<string | undefined>(\n    defaultValue,\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValue = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  return [selectedValue, setValue];\n}\n\ninterface UseMultiSelectionStateOptions {\n  /** Controlled value */\n  value?: string[];\n  /** Default value for uncontrolled mode */\n  defaultValue?: string[];\n  /** Callback when value changes */\n  onValueChange?: (value: string[]) => void;\n}\n\n/**\n * Hook for managing multi selection state (checkbox behavior).\n * Supports both controlled and uncontrolled modes.\n */\nexport function useMultiSelectionState(\n  options: UseMultiSelectionStateOptions = {},\n): [string[], (value: string, checked: boolean) => void] {\n  const { value: controlledValue, defaultValue = [], onValueChange } = options;\n\n  const [internalValue, setInternalValue] =\n    React.useState<string[]>(defaultValue);\n\n  const isControlled = controlledValue !== undefined;\n  const selectedValues = isControlled ? controlledValue : internalValue;\n\n  const setValue = React.useCallback(\n    (itemValue: string, checked: boolean) => {\n      const newValue = checked\n        ? [...selectedValues, itemValue]\n        : selectedValues.filter((v) => v !== itemValue);\n\n      if (!isControlled) {\n        setInternalValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, selectedValues, onValueChange],\n  );\n\n  return [selectedValues, setValue];\n}\n\n// =============================================================================\n// Color Mappings\n// =============================================================================\n\nexport const selectionColorClasses: Record<\n  SelectionColor,\n  {\n    indicator: string;\n    indicatorChecked: string;\n    border: string;\n    bg: string;\n    text: string;\n  }\n> = {\n  primary: {\n    indicator: 'border-primary',\n    indicatorChecked: 'bg-primary',\n    border: 'border-primary',\n    bg: 'bg-primary',\n    text: 'text-primary-foreground',\n  },\n  secondary: {\n    indicator: 'border-secondary',\n    indicatorChecked: 'bg-secondary',\n    border: 'border-secondary',\n    bg: 'bg-secondary',\n    text: 'text-secondary-foreground',\n  },\n  success: {\n    indicator: 'border-success',\n    indicatorChecked: 'bg-success',\n    border: 'border-success',\n    bg: 'bg-success',\n    text: 'text-primary-foreground',\n  },\n  warning: {\n    indicator: 'border-warning',\n    indicatorChecked: 'bg-warning',\n    border: 'border-warning',\n    bg: 'bg-warning',\n    text: 'text-primary-foreground',\n  },\n  info: {\n    indicator: 'border-info',\n    indicatorChecked: 'bg-info',\n    border: 'border-info',\n    bg: 'bg-info',\n    text: 'text-primary-foreground',\n  },\n  destructive: {\n    indicator: 'border-destructive',\n    indicatorChecked: 'bg-destructive',\n    border: 'border-destructive',\n    bg: 'bg-destructive',\n    text: 'text-primary-foreground',\n  },\n};\n\n// =============================================================================\n// CVA Variants\n// =============================================================================\n\n/**\n * Selection group container variants.\n * Used for the outer wrapper of a group of selection items.\n */\nexport const selectionGroupVariants = cva('flex', {\n  variants: {\n    orientation: {\n      horizontal: 'flex-row flex-wrap',\n      vertical: 'flex-col',\n    },\n    gap: {\n      sm: 'gap-2',\n      md: 'gap-3',\n      lg: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    gap: 'md',\n  },\n});\n\n/**\n * Selection indicator variants (for both radio and checkbox).\n * Renders as a rounded indicator with border.\n */\nexport const selectionIndicatorVariants = cva(\n  'shrink-0 rounded-full border-2 transition-all flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4',\n        md: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Checkbox indicator variants (square with rounded corners).\n */\nexport const checkboxIndicatorVariants = cva(\n  'shrink-0 border transition-[border-color,background-color,color,box-shadow] duration-200 ease-out motion-reduce:transition-none flex items-center justify-center',\n  {\n    variants: {\n      size: {\n        sm: 'size-4 rounded-[4px]',\n        md: 'size-5 rounded-[5px]',\n        lg: 'size-6 rounded-[6px]',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/**\n * Inner dot sizes for radio indicators when checked.\n */\nexport const innerDotSizes: Record<SelectionSize, string> = {\n  sm: 'size-1.5',\n  md: 'size-2',\n  lg: 'size-2.5',\n};\n\n/**\n * Text size classes for selection labels.\n */\nexport const textSizeClasses: Record<SelectionSize, string> = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-base',\n};\n\n/**\n * Icon size classes for checkbox indicators.\n */\nexport const iconSizeClasses: Record<SelectionSize, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n};\n\n// =============================================================================\n// Draw-on checkmark SVG (shared delight animation)\n// =============================================================================\n\nexport const CHECKMARK_PATH = 'M4 12l5 5L20 6';\n\nexport function DrawCheck({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={3}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={cn(className, 'delight-check-draw')}\n    >\n      <path d={CHECKMARK_PATH} />\n    </svg>\n  );\n}\n\n// =============================================================================\n// SelectionIndicator Component\n// =============================================================================\n\nexport interface SelectionIndicatorProps {\n  /** Type of indicator to render */\n  type: 'checkbox' | 'radio';\n  /** Whether the indicator is checked */\n  checked?: boolean;\n  /** Whether the indicator is disabled */\n  disabled?: boolean;\n  /** Size of the indicator */\n  size?: SelectionSize;\n  /** Color of the indicator */\n  color?: SelectionColor;\n  /** Additional CSS classes */\n  className?: string;\n  /** Whether the checkbox is in indeterminate state (checkbox only) */\n  indeterminate?: boolean;\n}\n\n/**\n * SelectionIndicator renders either a checkbox or radio indicator based on type.\n * For checkbox: renders a check icon when checked.\n * For radio: renders an inner dot when checked.\n */\nconst SelectionIndicator = React.forwardRef<\n  HTMLSpanElement,\n  SelectionIndicatorProps\n>(\n  (\n    {\n      type,\n      checked = false,\n      disabled = false,\n      size = 'sm',\n      color = 'primary',\n      className,\n      indeterminate = false,\n    },\n    ref,\n  ) => {\n    const colors = selectionColorClasses[color];\n\n    if (type === 'checkbox') {\n      return (\n        <span\n          ref={ref}\n          data-slot=\"selection-indicator\"\n          data-type=\"checkbox\"\n          data-checked={checked}\n          className={cn(\n            checkboxIndicatorVariants({ size }),\n            checked\n              ? cn(\n                  colors.indicatorChecked,\n                  colors.border,\n                  colors.text,\n                  'border',\n                  'delight-check-bounce',\n                )\n              : 'border-border bg-background',\n            disabled && 'opacity-50',\n            className,\n          )}\n          aria-hidden=\"true\"\n        >\n          {checked &&\n            (indeterminate ? (\n              <Minus\n                className={cn(\n                  iconSizeClasses[size],\n                  'animate-[scale-in_150ms_ease-out] motion-reduce:animate-none',\n                )}\n                strokeWidth={3}\n              />\n            ) : (\n              <DrawCheck className={iconSizeClasses[size]} />\n            ))}\n        </span>\n      );\n    }\n\n    // Radio type\n    return (\n      <span\n        ref={ref}\n        data-slot=\"selection-indicator\"\n        data-type=\"radio\"\n        data-checked={checked}\n        className={cn(\n          selectionIndicatorVariants({ size }),\n          'transition-[background-color,border-color] duration-150 motion-reduce:transition-none',\n          checked\n            ? cn(colors.indicatorChecked, 'border-transparent')\n            : 'border-border bg-background',\n          disabled && 'opacity-50',\n          className,\n        )}\n        aria-hidden=\"true\"\n      >\n        <span\n          className={cn(\n            'bg-background rounded-full transition-transform duration-150 ease-out motion-reduce:transition-none',\n            innerDotSizes[size],\n            checked ? 'scale-100' : 'scale-0',\n          )}\n        />\n      </span>\n    );\n  },\n);\n\nSelectionIndicator.displayName = 'SelectionIndicator';\n\n// =============================================================================\n// FeaturedIcon Component\n// =============================================================================\n\nexport interface FeaturedIconProps {\n  /** The icon content to display */\n  children: React.ReactNode;\n  /** Size of the featured icon container */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n// Hoisted outside component to avoid recreation on every render\nconst featuredIconContainerSizes: Record<SelectionSize, string> = {\n  sm: 'size-8',\n  md: 'size-10',\n  lg: 'size-12',\n};\n\nconst featuredIconInnerSizes: Record<SelectionSize, string> = {\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n};\n\n/**\n * FeaturedIcon is a container for icons with border and shadow.\n * Used in icon-simple and icon-card variants.\n */\nconst FeaturedIcon = React.forwardRef<HTMLDivElement, FeaturedIconProps>(\n  ({ children, size = 'sm', className }, ref) => {\n    const containerSize = featuredIconContainerSizes[size];\n    const innerSize = featuredIconInnerSizes[size];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"featured-icon\"\n        className={cn(\n          'shrink-0 rounded-md border border-border bg-card/60',\n          'flex items-center justify-center',\n          'dark:border-border',\n          containerSize,\n          className,\n        )}\n        style={{\n          boxShadow: 'var(--shadow-inset-ring)',\n        }}\n      >\n        <div className={cn('text-secondary-foreground', innerSize)}>\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nFeaturedIcon.displayName = 'FeaturedIcon';\n\n// =============================================================================\n// ColorDot Component\n// =============================================================================\n\nexport type ColorDotColor =\n  | 'gray'\n  | 'orange'\n  | 'red'\n  | 'darkRed'\n  | 'brand'\n  | 'success'\n  | 'warning'\n  | 'error'\n  | string; // Allow custom hex colors\n\nconst dotColorMap: Record<string, string> = {\n  gray: 'bg-muted',\n  orange: 'bg-warning',\n  red: 'bg-destructive',\n  darkRed: 'bg-destructive-hover',\n  brand: 'bg-primary/10',\n  success: 'bg-success/10',\n  warning: 'bg-warning/10',\n  error: 'bg-destructive/10',\n};\n\nconst dotSizeMap: Record<SelectionSize, string> = {\n  sm: 'size-[10px]',\n  md: 'size-3',\n  lg: 'size-3.5',\n};\n\nexport interface ColorDotProps {\n  /** Color of the dot (named color or hex) */\n  color?: ColorDotColor;\n  /** Size of the dot */\n  size?: SelectionSize;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * ColorDot renders a colored dot for chip variant.\n * Supports named colors (gray, orange, red, etc.) and hex colors.\n */\nconst ColorDot = React.forwardRef<HTMLSpanElement, ColorDotProps>(\n  ({ color, size = 'sm', className }, ref) => {\n    if (!color) return null;\n\n    const colorClass = dotColorMap[color];\n    const isHexColor = color.startsWith('#');\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"color-dot\"\n        className={cn(\n          'shrink-0 rounded-full',\n          dotSizeMap[size],\n          !isHexColor && colorClass,\n          className,\n        )}\n        style={isHexColor ? { backgroundColor: color } : undefined}\n        aria-hidden=\"true\"\n      />\n    );\n  },\n);\n\nColorDot.displayName = 'ColorDot';\n\n// =============================================================================\n// Exports\n// =============================================================================\n\nexport { ColorDot, FeaturedIcon, SelectionIndicator };\n"],"mappings":"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"}

package/dist/wc/syntax-highlight.js

@@ -1,14 +1,14 @@
 var r = {
   "--sh-class": "var(--blue-700)",
   "--sh-identifier": "var(--foreground)",
-  "--sh-sign": "var(--muted-foreground)",
+  "--sh-sign": "var(--secondary-foreground)",
   "--sh-property": "var(--pink-600)",
   "--sh-entity": "var(--purple-700)",
   "--sh-jsxliterals": "var(--cyan-700)",
   "--sh-string": "var(--green-700)",
   "--sh-keyword": "var(--indigo-700)",
-  "--sh-comment": "var(--text-quaternary)"
-}, a = {
+  "--sh-comment": "var(--secondary-foreground)"
+}, s = {
   "--sh-class": "var(--blue-200)",
   "--sh-identifier": "var(--primary-foreground)",
   "--sh-sign": "var(--primary-foreground)",
@@ -21,7 +21,7 @@ var r = {
 };
 export {
   r as n,
-  a as t
+  s as t
 };
 
 //# sourceMappingURL=syntax-highlight.js.map

package/dist/wc/syntax-highlight.js.map

@@ -1 +1 @@
-{"version":3,"file":"syntax-highlight.js","names":[],"sources":["../../src/lib/syntax-highlight.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport const SUGAR_HIGH_STYLE = {\n  '--sh-class': 'var(--blue-700)',\n  '--sh-identifier': 'var(--foreground)',\n  '--sh-sign': 'var(--muted-foreground)',\n  '--sh-property': 'var(--pink-600)',\n  '--sh-entity': 'var(--purple-700)',\n  '--sh-jsxliterals': 'var(--cyan-700)',\n  '--sh-string': 'var(--green-700)',\n  '--sh-keyword': 'var(--indigo-700)',\n  '--sh-comment': 'var(--text-quaternary)',\n} as React.CSSProperties;\n\nexport const INVERTED_SUGAR_HIGH_STYLE = {\n  '--sh-class': 'var(--blue-200)',\n  '--sh-identifier': 'var(--primary-foreground)',\n  '--sh-sign': 'var(--primary-foreground)',\n  '--sh-property': 'var(--pink-300)',\n  '--sh-entity': 'var(--purple-300)',\n  '--sh-jsxliterals': 'var(--cyan-300)',\n  '--sh-string': 'var(--green-300)',\n  '--sh-keyword': 'var(--indigo-300)',\n  '--sh-comment': 'var(--primary-foreground)',\n} as React.CSSProperties;\n"],"mappings":"AAEA,IAAa,IAAmB;AAAA,EAC9B,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAClB,GAEa,IAA4B;AAAA,EACvC,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAClB"}
+{"version":3,"file":"syntax-highlight.js","names":[],"sources":["../../src/lib/syntax-highlight.ts"],"sourcesContent":["import type * as React from 'react';\n\nexport const SUGAR_HIGH_STYLE = {\n  '--sh-class': 'var(--blue-700)',\n  '--sh-identifier': 'var(--foreground)',\n  '--sh-sign': 'var(--secondary-foreground)',\n  '--sh-property': 'var(--pink-600)',\n  '--sh-entity': 'var(--purple-700)',\n  '--sh-jsxliterals': 'var(--cyan-700)',\n  '--sh-string': 'var(--green-700)',\n  '--sh-keyword': 'var(--indigo-700)',\n  '--sh-comment': 'var(--secondary-foreground)',\n} as React.CSSProperties;\n\nexport const INVERTED_SUGAR_HIGH_STYLE = {\n  '--sh-class': 'var(--blue-200)',\n  '--sh-identifier': 'var(--primary-foreground)',\n  '--sh-sign': 'var(--primary-foreground)',\n  '--sh-property': 'var(--pink-300)',\n  '--sh-entity': 'var(--purple-300)',\n  '--sh-jsxliterals': 'var(--cyan-300)',\n  '--sh-string': 'var(--green-300)',\n  '--sh-keyword': 'var(--indigo-300)',\n  '--sh-comment': 'var(--primary-foreground)',\n} as React.CSSProperties;\n"],"mappings":"AAEA,IAAa,IAAmB;AAAA,EAC9B,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAClB,GAEa,IAA4B;AAAA,EACvC,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,gBAAgB;AAClB"}

package/dist/wc/workflow-step-renderer.js

@@ -1,8 +1,8 @@
 import { a as $ } from "./rolldown-runtime.js";
-import { i as q, t as L } from "./vendor/react.js";
+import { i as L, t as A } from "./vendor/react.js";
 import { n as f, t as R } from "./utils.js";
 import { t as M } from "./createLucideIcon.js";
-import { t as A } from "./check.js";
+import { t as q } from "./check.js";
 import { t as V } from "./chevron-down.js";
 import { t as P } from "./chevron-right.js";
 import { t as W } from "./circle-alert.js";
@@ -57,15 +57,15 @@ var O = [
   height: "18",
   rx: "1",
   key: "1wsw3u"
-}]], G = M("pause", U), c = /* @__PURE__ */ $(q(), 1);
+}]], G = M("pause", U), c = /* @__PURE__ */ $(L(), 1);
 function H(e) {
   const r = Math.max(0, Math.round(e));
   if (r < 1e3) return `${r}ms`;
-  const a = Math.round(r / 1e3), n = Math.floor(a / 3600), s = Math.floor(a % 3600 / 60), d = a % 60;
-  return n > 0 ? [n ? `${n}h` : "", s ? `${s}m` : ""].filter(Boolean).join(" ") : s > 0 ? `${s}m${d ? ` ${d}s` : ""}` : `${a}s`;
+  const o = Math.round(r / 1e3), n = Math.floor(o / 3600), s = Math.floor(o % 3600 / 60), d = o % 60;
+  return n > 0 ? [n ? `${n}h` : "", s ? `${s}m` : ""].filter(Boolean).join(" ") : s > 0 ? `${s}m${d ? ` ${d}s` : ""}` : `${o}s`;
 }
-var t = L(), J = {
-  pending: "text-muted-foreground",
+var t = A(), J = {
+  pending: "text-secondary-foreground",
   running: "text-primary",
   suspended: "text-warning",
   completed: "text-success",
@@ -100,11 +100,11 @@ var t = L(), J = {
   }
 };
 function j(e, r) {
-  const a = new Set(e);
-  return r.flatMap((n) => a.has(n.id) ? [n.id] : []);
+  const o = new Set(e);
+  return r.flatMap((n) => o.has(n.id) ? [n.id] : []);
 }
 function Z(e, r) {
-  return e.length === r.length && e.every((a, n) => a === r[n]);
+  return e.length === r.length && e.every((o, n) => o === r[n]);
 }
 function ee(e) {
   return typeof e == "object" && e !== null && Symbol.iterator in e && typeof e[Symbol.iterator] == "function";
@@ -114,14 +114,14 @@ function te(e) {
 }
 var z = /* @__PURE__ */ new WeakMap();
 function re(e, r) {
-  const a = [];
+  const o = [];
   let n = !1, s = !Array.isArray(e);
   for (let d = r.next(); !d.done; d = r.next()) {
     const u = S(d.value);
-    a.push(u.content), n ||= u.hasRenderableContent, s ||= u.changed;
+    o.push(u.content), n ||= u.hasRenderableContent, s ||= u.changed;
   }
   return {
-    content: s ? a : e,
+    content: s ? o : e,
     hasRenderableContent: n,
     changed: s
   };
@@ -151,13 +151,13 @@ function S(e) {
     };
   }
   if (ee(e)) {
-    const r = e[Symbol.iterator](), a = te(r) ? r : null;
-    if (a !== null) {
-      const s = z.get(a);
+    const r = e[Symbol.iterator](), o = te(r) ? r : null;
+    if (o !== null) {
+      const s = z.get(o);
       if (s !== void 0) return s;
     }
     const n = re(e, r);
-    return a !== null && z.set(a, n), n;
+    return o !== null && z.set(o, n), n;
   }
   return {
     content: e,
@@ -168,7 +168,7 @@ function S(e) {
 function ne(e) {
   return e?.trim() ? e : void 0;
 }
-function ae(e) {
+function oe(e) {
   switch (e) {
     case "pending":
       return "Pending";
@@ -184,8 +184,8 @@ function ae(e) {
       return R(e);
   }
 }
-function _({ status: e, index: r, className: a }) {
-  const n = f(X({ status: e }), a);
+function _({ status: e, index: r, className: o }) {
+  const n = f(X({ status: e }), o);
   switch (e) {
     case "pending":
       return /* @__PURE__ */ (0, t.jsx)("div", {
@@ -212,7 +212,7 @@ function _({ status: e, index: r, className: a }) {
       return /* @__PURE__ */ (0, t.jsx)("div", {
         "data-slot": "workflow-step-icon",
         className: f(n, "delight-check-bounce motion-reduce:!animate-none"),
-        children: /* @__PURE__ */ (0, t.jsx)(A, { className: "size-3" })
+        children: /* @__PURE__ */ (0, t.jsx)(q, { className: "size-3" })
       });
     case "error":
       return /* @__PURE__ */ (0, t.jsx)("div", {
@@ -225,8 +225,8 @@ function _({ status: e, index: r, className: a }) {
   }
 }
 _.displayName = "WorkflowStepStatusIcon";
-function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot: s = "workflow-step-item", expandable: d = !0, expanded: u, active: b = !1, onExpandedChange: C }) {
-  const k = c.useId(), l = c.useId(), p = S(e.content), y = p.hasRenderableContent, h = ne(e.error), m = h !== void 0, x = y || m, v = x && d, N = K(), g = Y[n], i = { duration: N ? 0 : 0.2 }, o = /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [
+function D({ step: e, index: r, isLast: o, appearance: n = "contained", itemSlot: s = "workflow-step-item", expandable: d = !0, expanded: u, active: b = !1, onExpandedChange: C }) {
+  const y = c.useId(), l = c.useId(), p = S(e.content), k = p.hasRenderableContent, h = ne(e.error), m = h !== void 0, x = k || m, g = x && d, N = K(), v = Y[n], i = { duration: N ? 0 : 0.2 }, a = /* @__PURE__ */ (0, t.jsxs)(t.Fragment, { children: [
     /* @__PURE__ */ (0, t.jsx)(_, {
       status: e.status,
       index: r
@@ -242,24 +242,24 @@ function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot
             children: e.contextLabel
           }),
           /* @__PURE__ */ (0, t.jsx)("span", {
-            className: f("text-sm font-medium", e.status === "pending" ? "text-text-quaternary" : "text-foreground"),
+            className: f("text-sm font-medium", e.status === "pending" ? "text-secondary-foreground" : "text-foreground"),
             children: e.title
           }),
           /* @__PURE__ */ (0, t.jsx)("span", {
             className: "text-xs text-secondary-foreground",
-            children: ae(e.status)
+            children: oe(e.status)
           }),
           e.durationMs !== void 0 && /* @__PURE__ */ (0, t.jsx)("span", {
-            className: "text-xs text-muted-foreground",
+            className: "text-xs text-secondary-foreground",
             children: H(e.durationMs)
           })
         ]
       }), e.description && /* @__PURE__ */ (0, t.jsx)("p", {
-        className: "mt-0.5 text-xs text-text-quaternary",
+        className: "mt-0.5 text-xs text-secondary-foreground",
         children: e.description
       })]
     }),
-    v && /* @__PURE__ */ (0, t.jsx)("div", {
+    g && /* @__PURE__ */ (0, t.jsx)("div", {
       className: "shrink-0",
       children: u ? /* @__PURE__ */ (0, t.jsx)(V, { className: "size-4 text-muted-foreground" }) : /* @__PURE__ */ (0, t.jsx)(P, { className: "size-4 text-muted-foreground rtl:rotate-180" })
     })
@@ -268,27 +268,27 @@ function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot
     "data-slot": s,
     "data-step-status": e.status,
     "data-appearance": n,
-    className: f(g.rootClassName, g.hasDivider && !a && "border-b border-border"),
+    className: f(v.rootClassName, v.hasDivider && !o && "border-b border-border"),
     children: [
-      v ? /* @__PURE__ */ (0, t.jsx)("button", {
+      g ? /* @__PURE__ */ (0, t.jsx)("button", {
         type: "button",
         onClick: C,
         "aria-current": b ? "step" : void 0,
         "aria-expanded": u,
-        "aria-controls": k,
+        "aria-controls": y,
         "aria-describedby": m ? l : void 0,
         className: f(I({ status: e.status }), "w-full cursor-pointer hover:bg-muted focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring"),
-        children: o
+        children: a
       }) : /* @__PURE__ */ (0, t.jsx)("div", {
         "aria-current": b ? "step" : void 0,
         "aria-describedby": m ? l : void 0,
         className: f(I({ status: e.status }), "w-full"),
-        children: o
+        children: a
       }),
       /* @__PURE__ */ (0, t.jsx)(F, {
         initial: !1,
         children: u && x && /* @__PURE__ */ (0, t.jsx)(B.div, {
-          id: k,
+          id: y,
           "data-slot": "workflow-step-panel",
           initial: {
             height: 0,
@@ -315,7 +315,7 @@ function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot
                   children: h
                 })]
               })
-            }), y && /* @__PURE__ */ (0, t.jsx)("div", {
+            }), k && /* @__PURE__ */ (0, t.jsx)("div", {
               className: m ? "mt-3" : void 0,
               children: p.content
             })]
@@ -327,7 +327,7 @@ function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot
         className: "sr-only",
         children: h
       }),
-      g.hasConnector && !a && /* @__PURE__ */ (0, t.jsx)("div", {
+      v.hasConnector && !o && /* @__PURE__ */ (0, t.jsx)("div", {
         "data-slot": "workflow-step-connector",
         "aria-hidden": "true",
         className: "absolute top-8 -bottom-3 start-6 w-px bg-border"
@@ -336,37 +336,37 @@ function D({ step: e, index: r, isLast: a, appearance: n = "contained", itemSlot
   });
 }
 D.displayName = "WorkflowStepItem";
-function se({ steps: e, appearance: r = "contained", itemSlot: a = "workflow-step-item", expandable: n = !0, activeStepId: s, expandedStepIds: d, defaultExpandedStepIds: u = [], onExpandedStepIdsChange: b, className: C, renderItems: k = !0 }) {
-  const l = d !== void 0, p = l ? [...d] : void 0, [y, h] = c.useState(() => j(u, e)), m = c.useRef(p ?? []), x = c.useRef(l), v = j(l ? d : y, e), N = new Set(v);
+function se({ steps: e, appearance: r = "contained", itemSlot: o = "workflow-step-item", expandable: n = !0, activeStepId: s, expandedStepIds: d, defaultExpandedStepIds: u = [], onExpandedStepIdsChange: b, className: C, renderItems: y = !0 }) {
+  const l = d !== void 0, p = l ? [...d] : void 0, [k, h] = c.useState(() => j(u, e)), m = c.useRef(p ?? []), x = c.useRef(l), g = j(l ? d : k, e), N = new Set(g);
   c.useLayoutEffect(() => {
     p !== void 0 && (m.current = p);
   }, [p]), c.useLayoutEffect(() => {
     const i = x.current;
-    x.current = l, !l && h((o) => {
-      const w = j(i ? m.current : o, e);
-      return Z(w, o) ? o : w;
+    x.current = l, !l && h((a) => {
+      const w = j(i ? m.current : a, e);
+      return Z(w, a) ? a : w;
     });
   }, [l, e]);
-  const g = (i) => {
-    const o = new Set(v);
-    o.has(i) ? o.delete(i) : o.add(i);
-    const w = j([...o], e);
+  const v = (i) => {
+    const a = new Set(g);
+    a.has(i) ? a.delete(i) : a.add(i);
+    const w = j([...a], e);
     l || h([...w]), b?.([...w]);
   };
-  return k ? /* @__PURE__ */ (0, t.jsx)("ol", {
+  return y ? /* @__PURE__ */ (0, t.jsx)("ol", {
     "data-slot": "workflow-step-list",
     "data-appearance": r,
     className: f("m-0 list-none p-0", C),
-    children: e.map((i, o) => /* @__PURE__ */ (0, t.jsx)("li", { children: /* @__PURE__ */ (0, t.jsx)(D, {
+    children: e.map((i, a) => /* @__PURE__ */ (0, t.jsx)("li", { children: /* @__PURE__ */ (0, t.jsx)(D, {
       step: i,
-      index: o,
-      isLast: o === e.length - 1,
+      index: a,
+      isLast: a === e.length - 1,
       appearance: r,
-      itemSlot: a,
+      itemSlot: o,
       expandable: n,
       expanded: N.has(i.id),
       active: s === i.id,
-      onExpandedChange: () => g(i.id)
+      onExpandedChange: () => v(i.id)
     }) }, i.id))
   }) : null;
 }