@devalok/shilp-sutra 0.37.1 → 0.39.0

package/dist/ui/code.js

@@ -4,12 +4,12 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/ui/code.tsx
 var r = t.forwardRef(({ className: t, variant: r = "inline", children: i, ...a }, o) => r === "block" ? /* @__PURE__ */ n("pre", {
 	ref: o,
-	className: e("overflow-x-auto rounded-ds-md border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg", t),
+	className: e("overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg", t),
 	...a,
 	children: /* @__PURE__ */ n("code", { children: i })
 }) : /* @__PURE__ */ n("code", {
 	ref: o,
-	className: e("rounded-ds-sm bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg", t),
+	className: e("rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg", t),
 	...a,
 	children: i
 }));

package/dist/ui/code.js.map

@@ -1 +1 @@
-{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-ds-md border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-ds-sm bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,uJACA,EACD;CACD,GAAI;WAEJ,kBAAC,QAAD,EAAO,aAAgB,CAAA;CACnB,CAAA,GAKR,kBAAC,QAAD;CACO;CACL,WAAW,EACT,6HACA,EACD;CACD,GAAI;CAEH;CACI,CAAA,CAGZ;AACD,EAAK,cAAc"}
+{"version":3,"file":"code.js","names":[],"sources":["../../src/ui/code.tsx"],"sourcesContent":["// @server-safe\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\n/**\n * Props for Code — a typography component that renders either inline `<code>` or block `<pre><code>`\n * monospace text, styled with the design system's layer tokens.\n *\n * **`variant` options:**\n * - `\"inline\"` (default) — renders as `<code>` with a subtle layer-03 background, suitable for\n *   short snippets within prose (e.g. \"Use the `onClick` prop to...\").\n * - `\"block\"` — renders as `<pre>` with a bordered, padded, horizontally-scrollable block for\n *   multi-line code samples.\n *\n * @example\n * // Inline code reference in documentation:\n * <p>Pass <Code>loading={true}</Code> to show the spinner.</p>\n *\n * @example\n * // Block code sample (e.g. in a README or docs page):\n * <Code variant=\"block\">{`const greeting = \"Hello, world!\"\\nconsole.log(greeting)`}</Code>\n *\n * @example\n * // Inline API key display:\n * <p>Your API key: <Code>sk-dev-abc123xyz</Code></p>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface CodeProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'inline' | 'block'\n}\n\nconst Code = React.forwardRef<HTMLPreElement | HTMLElement, CodeProps>(\n  ({ className, variant = 'inline', children, ...props }, ref) => {\n    if (variant === 'block') {\n      return (\n        <pre\n          ref={ref as React.Ref<HTMLPreElement>}\n          className={cn(\n            'overflow-x-auto rounded-surface border border-surface-border-strong bg-surface-raised p-ds-05 font-mono text-ds-sm leading-ds-relaxed text-surface-fg',\n            className,\n          )}\n          {...props}\n        >\n          <code>{children}</code>\n        </pre>\n      )\n    }\n\n    return (\n      <code\n        ref={ref}\n        className={cn(\n          'rounded-control-inner bg-surface-raised-hover border border-surface-border px-ds-02 py-ds-01 font-mono text-ds-sm text-surface-fg',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </code>\n    )\n  },\n)\nCode.displayName = 'Code'\n\nexport { Code }\n"],"mappings":";;;;AAgCA,IAAM,IAAO,EAAM,YAChB,EAAE,cAAW,aAAU,UAAU,aAAU,GAAG,KAAS,MAClD,MAAY,UAEZ,kBAAC,OAAD;CACO;CACL,WAAW,EACT,yJACA,EACD;CACD,GAAI;WAEJ,kBAAC,QAAD,EAAO,aAAgB,CAAA;CACnB,CAAA,GAKR,kBAAC,QAAD;CACO;CACL,WAAW,EACT,qIACA,EACD;CACD,GAAI;CAEH;CACI,CAAA,CAGZ;AACD,EAAK,cAAc"}

package/dist/ui/color-input.js

@@ -122,7 +122,7 @@ function v({ label: e, value: t, onChange: r, onBlur: i, disabled: a, maxLength:
 				onChange: (e) => r(e.target.value),
 				onBlur: i,
 				maxLength: o,
-				className: n("h-ds-xs-plus w-full rounded-ds-sm border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
+				className: n("h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors", "focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", a && "cursor-not-allowed opacity-50")
 			})]
 		})]
 	});
@@ -182,7 +182,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 				children: E === "inline" ? /* @__PURE__ */ c(d.button, {
 					type: "button",
 					disabled: S,
-					className: n("group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", S && "cursor-not-allowed opacity-50"),
+					className: n("group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium", "focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base", S && "cursor-not-allowed opacity-50"),
 					animate: {
 						backgroundColor: F,
 						color: _(F) ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.95)"
@@ -198,7 +198,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 				}) : /* @__PURE__ */ l(d.button, {
 					type: "button",
 					disabled: S,
-					className: n("group relative flex items-center overflow-hidden rounded-ds-md border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", S && "cursor-not-allowed opacity-50"),
+					className: n("group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong", "hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9", S && "cursor-not-allowed opacity-50"),
 					whileHover: { scale: 1.02 },
 					whileTap: { scale: .98 },
 					transition: t.snappy,
@@ -227,7 +227,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 				"aria-label": "Color picker",
 				align: T,
 				sideOffset: 8,
-				className: "w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
+				className: "w-[272px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating",
 				children: /* @__PURE__ */ l("div", {
 					className: "flex flex-col",
 					children: [
@@ -249,10 +249,10 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 								children: $.map((e) => /* @__PURE__ */ l("button", {
 									type: "button",
 									onClick: () => j(e),
-									className: n("relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
+									className: n("relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors", A === e ? "text-accent-11" : "text-surface-fg-muted hover:text-surface-fg"),
 									children: [A === e && /* @__PURE__ */ c(d.span, {
 										layoutId: `color-input-format-pill-${P}`,
-										className: "absolute inset-0 rounded-ds-sm bg-accent-3",
+										className: "absolute inset-0 rounded-control-inner bg-accent-3",
 										transition: t.snappy
 									}), /* @__PURE__ */ c("span", {
 										className: "relative z-10",
@@ -405,7 +405,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 											...t.bouncy,
 											delay: r * .02
 										},
-										className: n("h-6 w-6 rounded-ds-sm border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", S && "cursor-not-allowed opacity-50"),
+										className: n("h-6 w-6 rounded-control-inner border", i ? "border-accent-7 ring-2 ring-accent-9/30" : "border-surface-border hover:border-surface-border-strong", S && "cursor-not-allowed opacity-50"),
 										style: { backgroundColor: e.hex },
 										title: e.label,
 										"aria-label": `${e.label}: ${e.hex}`
@@ -429,7 +429,7 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 							className: "flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02",
 							children: [
 								/* @__PURE__ */ c("span", {
-									className: "h-4 w-4 shrink-0 rounded-full border border-surface-border",
+									className: "h-4 w-4 shrink-0 rounded-pill border border-surface-border",
 									style: { backgroundColor: L },
 									title: `Original: ${L}`
 								}),
@@ -441,13 +441,13 @@ var y = s.forwardRef(({ value: y = "#000000", onChange: b, presets: x, disabled:
 								z.length > 0 && /* @__PURE__ */ c("button", {
 									type: "button",
 									onClick: K,
-									className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
+									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg",
 									children: "Undo"
 								}),
 								F !== L && /* @__PURE__ */ c("button", {
 									type: "button",
 									onClick: q,
-									className: "min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
+									className: "min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11",
 									children: "Reset"
 								})
 							]

package/dist/ui/color-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets (color-blind accessible) ──\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#EF4444', label: 'Red' },\n  { hex: '#F59E0B', label: 'Amber' },\n  { hex: '#10B981', label: 'Emerald' },\n  { hex: '#3B82F6', label: 'Blue' },\n  { hex: '#8B5CF6', label: 'Violet' },\n  { hex: '#EC4899', label: 'Pink' },\n  { hex: '#06B6D4', label: 'Cyan' },\n  { hex: '#F97316', label: 'Orange' },\n  { hex: '#84CC16', label: 'Lime' },\n  { hex: '#6366F1', label: 'Indigo' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-ds-sm border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    React.useEffect(() => { setInternalColor(value) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-ds-md px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-ds-md border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-ds-xl border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-ds-sm bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Revert display to current color if input is incomplete\n                          const display = internalColor.replace('#', '').toUpperCase()\n                          if (display.length !== 6) setInternalColor(internalColor)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-ds-sm border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-full border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-ds-xs text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-ds-sm px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":";;;;;;;;;AAgBA,SAAS,EAAS,GAAyD;CACzE,IAAM,IAAI,qBAAqB,KAAK,EAAI;AACxC,KAAI,CAAC,EAAG,QAAO;CACf,IAAM,IAAI,SAAS,EAAE,IAAI,GAAG;AAC5B,QAAO;EAAE,GAAI,KAAK,KAAM;EAAK,GAAI,KAAK,IAAK;EAAK,GAAG,IAAI;EAAK;;AAG9D,SAAS,EAAS,GAAW,GAAW,GAAmB;AACzD,QAAO,MAAM;EAAC;EAAG;EAAG;EAAE,CAAC,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,KAAK,GAAG;;AAGrH,SAAS,EAAS,GAAyD;CACzE,IAAM,IAAM,EAAS,EAAI;AACzB,KAAI,CAAC,EAAK,QAAO;CACjB,IAAM,IAAI,EAAI,IAAI,KAAK,IAAI,EAAI,IAAI,KAAK,IAAI,EAAI,IAAI,KAC9C,IAAM,KAAK,IAAI,GAAG,GAAG,EAAE,EAAE,IAAM,KAAK,IAAI,GAAG,GAAG,EAAE,EAChD,KAAK,IAAM,KAAO;AACxB,KAAI,MAAQ,EAAK,QAAO;EAAE,GAAG;EAAG,GAAG;EAAG,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE;CAC9D,IAAM,IAAI,IAAM,GACV,IAAI,IAAI,KAAM,KAAK,IAAI,IAAM,KAAO,KAAK,IAAM,IACjD,IAAI;AAIR,QAHA,AAEK,IAFD,MAAQ,MAAS,IAAI,KAAK,KAAK,IAAI,IAAI,IAAI,MAAM,IAC5C,MAAQ,MAAS,IAAI,KAAK,IAAI,KAAK,MACjC,IAAI,KAAK,IAAI,KAAK,GACtB;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE,GAAG,KAAK,MAAM,IAAI,IAAI;EAAE;;AAGnF,SAAS,EAAS,GAAW,GAAW,GAAmB;CACzD,IAAM,IAAK,IAAI,KAAK,IAAK,IAAI,KACvB,IAAI,IAAK,KAAK,IAAI,GAAI,IAAI,EAAG,EAC7B,KAAK,MAAc;EACvB,IAAM,KAAK,IAAI,IAAI,MAAM,IACnB,IAAI,IAAK,IAAI,KAAK,IAAI,KAAK,IAAI,IAAI,GAAG,IAAI,GAAG,EAAE,EAAE,GAAG;AAC1D,SAAO,KAAK,MAAM,MAAM,EAAE;;AAE5B,QAAO,EAAS,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;;AAKnC,IAAM,IAAkD;CACtD;EAAE,KAAK;EAAW,OAAO;EAAO;CAChC;EAAE,KAAK;EAAW,OAAO;EAAS;CAClC;EAAE,KAAK;EAAW,OAAO;EAAW;CACpC;EAAE,KAAK;EAAW,OAAO;EAAQ;CACjC;EAAE,KAAK;EAAW,OAAO;EAAU;CACnC;EAAE,KAAK;EAAW,OAAO;EAAQ;CACjC;EAAE,KAAK;EAAW,OAAO;EAAQ;CACjC;EAAE,KAAK;EAAW,OAAO;EAAU;CACnC;EAAE,KAAK;EAAW,OAAO;EAAQ;CACjC;EAAE,KAAK;EAAW,OAAO;EAAU;CACpC;AAID,SAAS,EAAa,GAAsB;CAC1C,IAAM,IAAM,EAAS,EAAI;AACzB,KAAI,CAAC,EAAK,QAAO;CAEjB,IAAM,CAAC,GAAG,GAAG,KAAK;EAAC,EAAI;EAAG,EAAI;EAAG,EAAI;EAAE,CAAC,KAAK,MAAM;EACjD,IAAM,IAAI,IAAI;AACd,SAAO,KAAK,SAAU,IAAI,UAAkB,IAAI,QAAS,UAAO;GAChE;AACF,QAAO,QAAS,IAAI,QAAS,IAAI,QAAS,IAAI;;AAkChD,SAAS,EAAY,EACnB,UACA,UACA,aACA,WACA,aACA,eAAY,GACZ,WACA,cACA,SAWC;AACD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAG,2BAA2B,EAAU;YAAxD,CACE,kBAAC,SAAD;GAAO,SAAS;GAAI,WAAU;aAC3B;GACK,CAAA,EACR,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,KACC,kBAAC,QAAD;IAAM,WAAU;cAAoC;IAAc,CAAA,EAEpE,kBAAC,SAAD;IACM;IACJ,MAAK;IACE;IACG;IACV,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACjC;IACG;IACX,WAAW,EACT,qJACA,+EACA,KAAY,gCACb;IACD,CAAA,CACE;KACF;;;AAMV,IAAM,IAAa,EAAM,YACtB,EACC,WAAQ,WACR,aACA,YACA,cAAW,IACX,gBAAa,IACb,mBAAgB,OAChB,WAAQ,SACR,aAAU,WACV,cACA,GAAG,KACF,MAAQ;CACT,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAsB,EAAc,EAChE,CAAC,GAAM,KAAW,EAAM,SAAS,GAAM,EACvC,IAAa,EAAM,OAAO,EAG1B,CAAC,GAAe,KAAoB,EAAM,SAAS,EAAM;AAC/D,GAAM,gBAAgB;AAAE,IAAiB,EAAM;IAAI,CAAC,EAAM,CAAC;CAG3D,IAAM,CAAC,GAAW,KAAgB,EAAM,SAAS,EAAM,EACjD,CAAC,GAAW,KAAgB,EAAM,SAAmB,EAAE,CAAC,EAExD,IAAa,EAAM,OAAO,GAAM,EAEhC,KAAoB,MAAoB;AACxC,QACA,MACF,EAAa,EAAc,EAC3B,EAAa,EAAE,CAAC,GAElB,EAAQ,EAAO;IAIX,KAAwB,MAAqB;AACjD,MAAI,EAAU;EAEd,IAAM,KADa,EAAS,WAAW,IAAI,GAAG,IAAW,IAAI,KACtC,aAAa;AAMpC,EALA,GAAc,MACR,EAAK,EAAK,SAAS,OAAO,IAAsB,IAC7C,CAAC,GAAG,EAAK,MAAM,IAAI,EAAE,EAAc,CAC1C,EACF,EAAiB,EAAI,EACrB,IAAW,EAAI;IAIX,KAAgB,MAAqB;AACzC,MAAI,EAAU;EAEd,IAAM,KADa,EAAS,WAAW,IAAI,GAAG,IAAW,IAAI,KACtC,aAAa;AAUpC,EATK,EAAW,YAEd,EAAW,UAAU,IACrB,GAAc,MACR,EAAK,EAAK,SAAS,OAAO,IAAsB,IAC7C,CAAC,GAAG,EAAK,MAAM,IAAI,EAAE,EAAc,CAC1C,GAEJ,EAAiB,EAAI,EACrB,IAAW,EAAI;IAIX,UAAmC;AACvC,IAAW,UAAU;IAGjB,UAAmB;AACvB,MAAI,EAAU,WAAW,EAAG;EAC5B,IAAM,IAAO,EAAU,EAAU,SAAS;AAG1C,EAFA,GAAc,MAAM,EAAE,MAAM,GAAG,GAAG,CAAC,EACnC,EAAiB,EAAK,EACtB,IAAW,EAAK;IAGZ,UAAoB;AAGxB,EAFA,EAAiB,EAAU,EAC3B,IAAW,EAAU,EACrB,EAAa,EAAE,CAAC;IAIZ,IAAkB,MAAY,KAChC,EAAE,GACF,IACE,EAAQ,KAAK,MACX,OAAO,KAAM,WAAW;EAAE,KAAK;EAAG,OAAO;EAAG,GAAG,EAChD,GACD,GAGA,IAAM,EAAS,EAAc,EAC7B,IAAM,EAAS,EAAc,EAG7B,KAAmB,GAA0B,MAAc;AAC/D,MAAI,CAAC,EAAK;EACV,IAAM,IAAM,SAAS,GAAG,GAAG;AAC3B,MAAI,MAAM,EAAI,CAAE;EAChB,IAAM,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,EAAI,CAAC;AAC/C,IAAqB,EACnB,MAAY,MAAM,IAAU,EAAI,GAChC,MAAY,MAAM,IAAU,EAAI,GAChC,MAAY,MAAM,IAAU,EAAI,EACjC,CAAC;IAIE,KAAmB,GAA0B,MAAc;AAC/D,MAAI,CAAC,EAAK;EACV,IAAM,IAAM,SAAS,GAAG,GAAG;AAC3B,MAAI,MAAM,EAAI,CAAE;EAEhB,IAAM,IAAU,KAAK,IAAI,GAAG,KAAK,IADrB,MAAY,MAAM,MAAM,KACM,EAAI,CAAC;AAC/C,IAAqB,EACnB,MAAY,MAAM,IAAU,EAAI,GAChC,MAAY,MAAM,IAAU,EAAI,GAChC,MAAY,MAAM,IAAU,EAAI,EACjC,CAAC;IAGE,IAAyB;EAAC;EAAO;EAAO;EAAM;AAEpD,QACE,kBAAC,OAAD;EAAU;EAAK,WAAW,EAAG,wBAAwB,EAAU;EAAE,GAAI;YACnE,kBAAC,GAAD;GAAe;GAAM,cAAc;aAAnC,CACE,kBAAC,GAAD;IAAgB,SAAA;cACb,MAAY,WACX,kBAAC,EAAO,QAAR;KACE,MAAK;KACK;KACV,WAAW,EACT,2GACA,4GACA,KAAY,gCACb;KACD,SAAS;MACP,iBAAiB;MACjB,OAAO,EAAa,EAAc,GAAG,oBAAoB;MAC1D;KACD,YAAY;MAAE,GAAG;MAAI,WAAW;MAA+B;KAC/D,UAAU,EAAE,OAAO,KAAM;KACzB,YAAY,EAAQ;KACpB,cAAY,iBAAiB;eAE5B,EAAc,aAAa;KACd,CAAA,GAEhB,kBAAC,EAAO,QAAR;KACE,MAAK;KACK;KACV,WAAW,EACT,sGACA,qGACA,KAAY,gCACb;KACD,YAAY,EAAE,OAAO,MAAM;KAC3B,UAAU,EAAE,OAAO,KAAM;KACzB,YAAY,EAAQ;KACpB,cAAY,iBAAiB;eAX/B;MAcE,kBAAC,EAAO,MAAR;OACE,WAAU;OACV,SAAS,EACP,YAAY,6BAA6B,EAAc,OAAO,EAAc,yBAC7E;OAED,YAAY,EAAE,UAAU,IAAK;OAC7B,CAAA;MACF,kBAAC,QAAD;OAAM,WAAU;OAAyC,OAAO;QAC9D,WAAW;QACX,iBAAiB;QAClB;OAAI,CAAA;MAEL,kBAAC,QAAD;OAAM,WAAU;iBACb,EAAc,aAAa;OACvB,CAAA;MACO;;IAEH,CAAA,EAEjB,kBAAC,GAAD;IACE,MAAK;IACL,cAAW;IACJ;IACP,YAAY;IACZ,WAAU;cAEV,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEG,KACC,kBAAC,OAAD;OAAK,WAAU;OAAmB,aAAa;OAA4B,gBAAgB;iBACzF,kBAAC,GAAD;QACE,OAAO;QACP,UAAU;QACV,WAAU;QACV,OAAO,EAAE,QAAQ,KAAK;QACtB,CAAA;OACE,CAAA;MAIR,kBAAC,OAAD;OAAK,WAAU;iBAAf,CAEE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ,KAAK,MACZ,kBAAC,UAAD;SAEE,MAAK;SACL,eAAe,EAAU,EAAE;SAC3B,WAAW,EACT,qHACA,MAAW,IACP,mBACA,8CACL;mBATH,CAWG,MAAW,KACV,kBAAC,EAAO,MAAR;UACE,UAAU,2BAA2B;UACrC,WAAU;UACV,YAAY,EAAQ;UACpB,CAAA,EAEJ,kBAAC,QAAD;UAAM,WAAU;oBAAiB;UAAS,CAAA,CACnC;WAlBF,EAkBE,CACT;QACE,CAAA,EAGN,kBAAC,GAAD;QAAiB,MAAK;kBAAtB;SACG,MAAW,SACV,kBAAC,EAAO,KAAR;UAEE,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,MAAM;WAAE,SAAS;WAAG,GAAG;WAAI;UAC3B,YAAY,EAAE,UAAU,EAAU,YAAY;UAC9C,WAAU;oBAEV,kBAAC,GAAD;WACE,IAAI,GAAG,EAAW;WAClB,OAAM;WACN,OAAO,EAAc,QAAQ,KAAK,GAAG,CAAC,aAAa;WACnD,WAAW,MAAM;YACf,IAAM,IAAQ,EAAE,QAAQ,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE;AACxD,YAAI,EAAM,WAAW,KAAG,EAAqB,IAAI,IAAQ;;WAE3D,cAAc;AAGZ,YADgB,EAAc,QAAQ,KAAK,GAAG,CAAC,aAAa,CAChD,WAAW,KAAG,EAAiB,EAAc;;WAEjD;WACV,WAAW;WACX,QAAO;WACP,WAAU;WACV,CAAA;UACS,EAzBP,MAyBO;SAGd,MAAW,SAAS,KACnB,kBAAC,EAAO,KAAR;UAEE,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,MAAM;WAAE,SAAS;WAAG,GAAG;WAAI;UAC3B,YAAY,EAAE,UAAU,EAAU,YAAY;UAC9C,WAAU;oBANZ;WAQE,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WACvJ,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WACvJ,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WAC5I;YAVP,MAUO;SAGd,MAAW,SAAS,KACnB,kBAAC,EAAO,KAAR;UAEE,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,SAAS;WAAE,SAAS;WAAG,GAAG;WAAG;UAC7B,MAAM;WAAE,SAAS;WAAG,GAAG;WAAI;UAC3B,YAAY,EAAE,UAAU,EAAU,YAAY;UAC9C,WAAU;oBANZ;WAQE,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WACvJ,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WACvJ,kBAAC,GAAD;YAAa,IAAI,GAAG,EAAW;YAAK,OAAM;YAAI,OAAO,OAAO,EAAI,EAAE;YAAE,WAAW,MAAM,EAAgB,KAAK,EAAE;YAAY;YAAU,WAAU;YAAW,CAAA;WAC5I;YAVP,MAUO;SAEC;UACd;;MAGL,EAAgB,SAAS,KACxB,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAgB,KAAK,GAAQ,MAAM;SAClC,IAAM,IAAa,EAAc,aAAa,KAAK,EAAO,IAAI,aAAa;AAC3E,gBACE,kBAAC,EAAO,QAAR;UAEE,MAAK;UACK;UACV,eAAe,EAAqB,EAAO,IAAI;UAC/C,SAAS;WAAE,SAAS;WAAG,OAAO;WAAK;UACnC,SAAS;WAAE,SAAS;WAAG,OAAO,IAAa,OAAO;WAAG;UACrD,YAAY,EAAE,OAAO,IAAa,OAAO,KAAK;UAC9C,UAAU,EAAE,OAAO,IAAK;UACxB,YAAY;WAAE,GAAG,EAAQ;WAAQ,OAAO,IAAI;WAAM;UAClD,WAAW,EACT,gCACA,IACI,4CACA,4DACJ,KAAY,gCACb;UACD,OAAO,EAAE,iBAAiB,EAAO,KAAK;UACtC,OAAO,EAAO;UACd,cAAY,GAAG,EAAO,MAAM,IAAI,EAAO;UACvC,EAnBK,EAAO,IAmBZ;UAEJ;QACE,CAAA;OACF,CAAA;OAIN,EAAU,SAAS,KAAK,MAAkB,MAC1C,kBAAC,EAAO,KAAR;OACE,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAG;OAClC,SAAS;QAAE,SAAS;QAAG,QAAQ;QAAQ;OACvC,MAAM;QAAE,SAAS;QAAG,QAAQ;QAAG;OAC/B,WAAU;iBAJZ;QAOE,kBAAC,QAAD;SACE,WAAU;SACV,OAAO,EAAE,iBAAiB,GAAW;SACrC,OAAO,aAAa;SACpB,CAAA;QACF,kBAAC,QAAD;SAAM,WAAU;mBACb,EAAU,aAAa;SACnB,CAAA;QACP,kBAAC,QAAD,EAAM,WAAU,UAAW,CAAA;QAC1B,EAAU,SAAS,KAClB,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBACX;SAEQ,CAAA;QAEV,MAAkB,KACjB,kBAAC,UAAD;SACE,MAAK;SACL,SAAS;SACT,WAAU;mBACX;SAEQ,CAAA;QAEA;;MAEX;;IACS,CAAA,CACT;;EACN,CAAA;EAGX;AACD,EAAW,cAAc"}
+{"version":3,"file":"color-input.js","names":[],"sources":["../../src/ui/color-input.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { HexColorPicker } from 'react-colorful'\n\nimport { durations,springs } from './lib/motion'\nimport { cn } from './lib/utils'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from './popover'\n\n// ── Color conversion helpers ──\n\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } | null {\n  const m = /^#?([0-9a-f]{6})$/i.exec(hex)\n  if (!m) return null\n  const n = parseInt(m[1], 16)\n  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  return '#' + [r, g, b].map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, '0')).join('')\n}\n\nfunction hexToHsl(hex: string): { h: number; s: number; l: number } | null {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return null\n  const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255\n  const max = Math.max(r, g, b), min = Math.min(r, g, b)\n  const l = (max + min) / 2\n  if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) }\n  const d = max - min\n  const s = l > 0.5 ? d / (2 - max - min) : d / (max - min)\n  let h = 0\n  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6\n  else if (max === g) h = ((b - r) / d + 2) / 6\n  else h = ((r - g) / d + 4) / 6\n  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) }\n}\n\nfunction hslToHex(h: number, s: number, l: number): string {\n  const sn = s / 100, ln = l / 100\n  const a = sn * Math.min(ln, 1 - ln)\n  const f = (n: number) => {\n    const k = (n + h / 30) % 12\n    const c = ln - a * Math.max(Math.min(k - 3, 9 - k, 1), -1)\n    return Math.round(255 * c)\n  }\n  return rgbToHex(f(0), f(8), f(4))\n}\n\n// ── Named color presets (color-blind accessible) ──\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#EF4444', label: 'Red' },\n  { hex: '#F59E0B', label: 'Amber' },\n  { hex: '#10B981', label: 'Emerald' },\n  { hex: '#3B82F6', label: 'Blue' },\n  { hex: '#8B5CF6', label: 'Violet' },\n  { hex: '#EC4899', label: 'Pink' },\n  { hex: '#06B6D4', label: 'Cyan' },\n  { hex: '#F97316', label: 'Orange' },\n  { hex: '#84CC16', label: 'Lime' },\n  { hex: '#6366F1', label: 'Indigo' },\n]\n\n// ── Contrast helper ──\n\nfunction isLightColor(hex: string): boolean {\n  const rgb = hexToRgb(hex)\n  if (!rgb) return false\n  // Relative luminance (sRGB)\n  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((c) => {\n    const s = c / 255\n    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4)\n  })\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.4\n}\n\n// ── Format mode type ──\n\ntype ColorFormat = 'hex' | 'rgb' | 'hsl'\n\n// ── Props ──\n\nexport interface ColorInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current color value (hex string, e.g. \"#d33163\") */\n  value?: string\n  /** Called when the color changes */\n  onChange?: (value: string) => void\n  /** Preset color swatches. Defaults to 10 named colors. Pass `false` to hide. */\n  presets?: { hex: string; label: string }[] | string[] | false\n  /** Whether the input is disabled */\n  disabled?: boolean\n  /** Show the interactive color picker. Default: true. */\n  showPicker?: boolean\n  /** Default format for the input fields. Default: 'hex'. */\n  defaultFormat?: ColorFormat\n  /** Popover alignment. Default: 'start'. */\n  align?: 'start' | 'center' | 'end'\n  /**\n   * Trigger style variant.\n   * - `default`: Swatch bleeds to left edge + hex text\n   * - `inline`: Entire trigger is the selected color with hex text overlaid\n   */\n  variant?: 'default' | 'inline'\n}\n\n// ── Small format input ──\n\nfunction FormatInput({\n  label,\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength = 3,\n  prefix,\n  className,\n  id,\n}: {\n  label: string\n  value: string\n  onChange: (v: string) => void\n  onBlur?: () => void\n  disabled?: boolean\n  maxLength?: number\n  prefix?: string\n  className?: string\n  id: string\n}) {\n  return (\n    <div className={cn('flex flex-col gap-ds-01', className)}>\n      <label htmlFor={id} className=\"text-ds-xs font-medium uppercase tracking-wider text-surface-fg-muted\">\n        {label}\n      </label>\n      <div className=\"flex items-center\">\n        {prefix && (\n          <span className=\"text-ds-sm text-surface-fg-muted\">{prefix}</span>\n        )}\n        <input\n          id={id}\n          type=\"text\"\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange(e.target.value)}\n          onBlur={onBlur}\n          maxLength={maxLength}\n          className={cn(\n            'h-ds-xs-plus w-full rounded-control-inner border border-surface-border bg-surface-overlay px-ds-02 font-mono text-ds-sm text-surface-fg transition-colors',\n            'focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n            disabled && 'cursor-not-allowed opacity-50',\n          )}\n        />\n      </div>\n    </div>\n  )\n}\n\n// ── Main component ──\n\nconst ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  ({\n    value = '#000000',\n    onChange,\n    presets,\n    disabled = false,\n    showPicker = true,\n    defaultFormat = 'hex',\n    align = 'start',\n    variant = 'default',\n    className,\n    ...props\n  }, ref) => {\n    const [format, setFormat] = React.useState<ColorFormat>(defaultFormat)\n    const [open, setOpen] = React.useState(false)\n    const instanceId = React.useId()\n\n    // Internal color state — syncs with prop, allows uncontrolled use\n    const [internalColor, setInternalColor] = React.useState(value)\n    React.useEffect(() => { setInternalColor(value) }, [value])\n\n    // Track color when popover opened (for reset) + undo history\n    const [openColor, setOpenColor] = React.useState(value)\n    const [undoStack, setUndoStack] = React.useState<string[]>([])\n    // Track whether current change is from continuous drag (skip undo push)\n    const isDragging = React.useRef(false)\n\n    const handleOpenChange = (isOpen: boolean) => {\n      if (disabled) return\n      if (isOpen) {\n        setOpenColor(internalColor)\n        setUndoStack([])\n      }\n      setOpen(isOpen)\n    }\n\n    // Discrete change (preset click, field commit) — pushes to undo\n    const handleDiscreteChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      setUndoStack((prev) => {\n        if (prev[prev.length - 1] === internalColor) return prev\n        return [...prev.slice(-19), internalColor]\n      })\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Continuous change (picker drag) — updates color but only pushes undo on drag start\n    const handleChange = (newValue: string) => {\n      if (disabled) return\n      const normalized = newValue.startsWith('#') ? newValue : `#${newValue}`\n      const hex = normalized.toLowerCase()\n      if (!isDragging.current) {\n        // First change in a drag sequence — push current color to undo\n        isDragging.current = true\n        setUndoStack((prev) => {\n          if (prev[prev.length - 1] === internalColor) return prev\n          return [...prev.slice(-19), internalColor]\n        })\n      }\n      setInternalColor(hex)\n      onChange?.(hex)\n    }\n\n    // Called when picker drag ends\n    const handlePickerChangeComplete = () => {\n      isDragging.current = false\n    }\n\n    const handleUndo = () => {\n      if (undoStack.length === 0) return\n      const prev = undoStack[undoStack.length - 1]\n      setUndoStack((s) => s.slice(0, -1))\n      setInternalColor(prev)\n      onChange?.(prev)\n    }\n\n    const handleReset = () => {\n      setInternalColor(openColor)\n      onChange?.(openColor)\n      setUndoStack([])\n    }\n\n    // Resolve presets\n    const resolvedPresets = presets === false\n      ? []\n      : presets\n        ? presets.map((p) =>\n            typeof p === 'string' ? { hex: p, label: p } : p\n          )\n        : NAMED_PRESETS\n\n    // Parsed color values — use internal state\n    const rgb = hexToRgb(internalColor)\n    const hsl = hexToHsl(internalColor)\n\n    // RGB field handlers (clamped 0-255)\n    const handleRgbChange = (channel: 'r' | 'g' | 'b', v: string) => {\n      if (!rgb) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const clamped = Math.max(0, Math.min(255, num))\n      handleDiscreteChange(rgbToHex(\n        channel === 'r' ? clamped : rgb.r,\n        channel === 'g' ? clamped : rgb.g,\n        channel === 'b' ? clamped : rgb.b,\n      ))\n    }\n\n    // HSL field handlers (H: 0-360, S/L: 0-100)\n    const handleHslChange = (channel: 'h' | 's' | 'l', v: string) => {\n      if (!hsl) return\n      const num = parseInt(v, 10)\n      if (isNaN(num)) return\n      const max = channel === 'h' ? 360 : 100\n      const clamped = Math.max(0, Math.min(max, num))\n      handleDiscreteChange(hslToHex(\n        channel === 'h' ? clamped : hsl.h,\n        channel === 's' ? clamped : hsl.s,\n        channel === 'l' ? clamped : hsl.l,\n      ))\n    }\n\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl']\n\n    return (\n      <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n        <Popover open={open} onOpenChange={handleOpenChange}>\n          <PopoverTrigger asChild>\n            {variant === 'inline' ? (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group flex items-center justify-center rounded-control px-ds-04 py-ds-02 font-mono text-ds-sm font-medium',\n                  'focus:outline-hidden focus:ring-2 focus:ring-accent-9 focus:ring-offset-2 focus:ring-offset-surface-base',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                animate={{\n                  backgroundColor: internalColor,\n                  color: isLightColor(internalColor) ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.95)',\n                }}\n                whileHover={{ y: -1, boxShadow: '0 4px 12px rgba(0,0,0,0.12)' }}\n                whileTap={{ scale: 0.97 }}\n                transition={springs.smooth}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {internalColor.toUpperCase()}\n              </motion.button>\n            ) : (\n              <motion.button\n                type=\"button\"\n                disabled={disabled}\n                className={cn(\n                  'group relative flex items-center overflow-hidden rounded-control border border-surface-border-strong',\n                  'hover:border-accent-7 focus:border-accent-7 focus:outline-hidden focus:ring-1 focus:ring-accent-9',\n                  disabled && 'cursor-not-allowed opacity-50',\n                )}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n                transition={springs.snappy}\n                aria-label={`Color picker: ${internalColor}`}\n              >\n                {/* Gradient background: color → surface */}\n                <motion.span\n                  className=\"absolute inset-0\"\n                  animate={{\n                    background: `linear-gradient(to right, ${internalColor} 0%, ${internalColor} 35%, transparent 70%)`,\n                  }}\n                  /* Between durations.moderate02 (0.24) and durations.slow01 (0.4) — gradient lerp feel */\n                  transition={{ duration: 0.3 }}\n                />\n                <span className=\"absolute inset-0 bg-surface-overlay/60\" style={{\n                  maskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                  WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 40%)',\n                }} />\n                {/* Hex value */}\n                <span className=\"relative z-10 py-ds-02 pl-6 pr-ds-03 font-mono text-ds-sm text-surface-fg\">\n                  {internalColor.toUpperCase()}\n                </span>\n              </motion.button>\n            )}\n          </PopoverTrigger>\n\n          <PopoverContent\n            role=\"dialog\"\n            aria-label=\"Color picker\"\n            align={align}\n            sideOffset={8}\n            className=\"w-[272px] rounded-overlay-lg border border-surface-border-strong bg-surface-overlay p-0 shadow-floating\"\n          >\n            <div className=\"flex flex-col\">\n              {/* Interactive picker */}\n              {showPicker && (\n                <div className=\"p-ds-04 pb-ds-03\" onPointerUp={handlePickerChangeComplete} onPointerLeave={handlePickerChangeComplete}>\n                  <HexColorPicker\n                    color={internalColor}\n                    onChange={handleChange}\n                    className=\"w-full!\"\n                    style={{ height: 160 }}\n                  />\n                </div>\n              )}\n\n              {/* Format inputs */}\n              <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                {/* Format switcher */}\n                <div className=\"mb-ds-03 flex items-center gap-ds-01\">\n                  {formats.map((f) => (\n                    <button\n                      key={f}\n                      type=\"button\"\n                      onClick={() => setFormat(f)}\n                      className={cn(\n                        'relative min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider transition-colors',\n                        format === f\n                          ? 'text-accent-11'\n                          : 'text-surface-fg-muted hover:text-surface-fg',\n                      )}\n                    >\n                      {format === f && (\n                        <motion.span\n                          layoutId={`color-input-format-pill-${instanceId}`}\n                          className=\"absolute inset-0 rounded-control-inner bg-accent-3\"\n                          transition={springs.snappy}\n                        />\n                      )}\n                      <span className=\"relative z-10\">{f}</span>\n                    </button>\n                  ))}\n                </div>\n\n                {/* Format fields — animated swap */}\n                <AnimatePresence mode=\"wait\">\n                  {format === 'hex' && (\n                    <motion.div\n                      key=\"hex\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput\n                        id={`${instanceId}-hex`}\n                        label=\"Hex\"\n                        value={internalColor.replace('#', '').toUpperCase()}\n                        onChange={(v) => {\n                          const clean = v.replace(/[^0-9a-fA-F]/g, '').slice(0, 6)\n                          if (clean.length === 6) handleDiscreteChange(`#${clean}`)\n                        }}\n                        onBlur={() => {\n                          // Revert display to current color if input is incomplete\n                          const display = internalColor.replace('#', '').toUpperCase()\n                          if (display.length !== 6) setInternalColor(internalColor)\n                        }}\n                        disabled={disabled}\n                        maxLength={6}\n                        prefix=\"#\"\n                        className=\"flex-1\"\n                      />\n                    </motion.div>\n                  )}\n\n                  {format === 'rgb' && rgb && (\n                    <motion.div\n                      key=\"rgb\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-r`} label=\"R\" value={String(rgb.r)} onChange={(v) => handleRgbChange('r', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-g`} label=\"G\" value={String(rgb.g)} onChange={(v) => handleRgbChange('g', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-b`} label=\"B\" value={String(rgb.b)} onChange={(v) => handleRgbChange('b', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n\n                  {format === 'hsl' && hsl && (\n                    <motion.div\n                      key=\"hsl\"\n                      initial={{ opacity: 0, y: 4 }}\n                      animate={{ opacity: 1, y: 0 }}\n                      exit={{ opacity: 0, y: -4 }}\n                      transition={{ duration: durations.moderate01 }}\n                      className=\"flex gap-ds-02\"\n                    >\n                      <FormatInput id={`${instanceId}-h`} label=\"H\" value={String(hsl.h)} onChange={(v) => handleHslChange('h', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-s`} label=\"S\" value={String(hsl.s)} onChange={(v) => handleHslChange('s', v)} disabled={disabled} className=\"flex-1\" />\n                      <FormatInput id={`${instanceId}-l`} label=\"L\" value={String(hsl.l)} onChange={(v) => handleHslChange('l', v)} disabled={disabled} className=\"flex-1\" />\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n\n              {/* Preset swatches */}\n              {resolvedPresets.length > 0 && (\n                <div className=\"border-t border-surface-border px-ds-04 py-ds-03\">\n                  <div className=\"flex flex-wrap gap-ds-02\">\n                    {resolvedPresets.map((preset, i) => {\n                      const isSelected = internalColor.toLowerCase() === preset.hex.toLowerCase()\n                      return (\n                        <motion.button\n                          key={preset.hex}\n                          type=\"button\"\n                          disabled={disabled}\n                          onClick={() => handleDiscreteChange(preset.hex)}\n                          initial={{ opacity: 0, scale: 0.8 }}\n                          animate={{ opacity: 1, scale: isSelected ? 1.15 : 1 }}\n                          whileHover={{ scale: isSelected ? 1.15 : 1.1 }}\n                          whileTap={{ scale: 0.9 }}\n                          transition={{ ...springs.bouncy, delay: i * 0.02 }}\n                          className={cn(\n                            'h-6 w-6 rounded-control-inner border',\n                            isSelected\n                              ? 'border-accent-7 ring-2 ring-accent-9/30'\n                              : 'border-surface-border hover:border-surface-border-strong',\n                            disabled && 'cursor-not-allowed opacity-50',\n                          )}\n                          style={{ backgroundColor: preset.hex }}\n                          title={preset.label}\n                          aria-label={`${preset.label}: ${preset.hex}`}\n                        />\n                      )\n                    })}\n                  </div>\n                </div>\n              )}\n\n              {/* Reset / Undo footer */}\n              {(undoStack.length > 0 || internalColor !== openColor) && (\n                <motion.div\n                  initial={{ opacity: 0, height: 0 }}\n                  animate={{ opacity: 1, height: 'auto' }}\n                  exit={{ opacity: 0, height: 0 }}\n                  className=\"flex items-center gap-ds-02 border-t border-surface-border px-ds-04 py-ds-02\"\n                >\n                  {/* Original color preview */}\n                  <span\n                    className=\"h-4 w-4 shrink-0 rounded-pill border border-surface-border\"\n                    style={{ backgroundColor: openColor }}\n                    title={`Original: ${openColor}`}\n                  />\n                  <span className=\"text-ds-xs text-surface-fg-muted\">\n                    {openColor.toUpperCase()}\n                  </span>\n                  <span className=\"flex-1\" />\n                  {undoStack.length > 0 && (\n                    <button\n                      type=\"button\"\n                      onClick={handleUndo}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-surface-fg\"\n                    >\n                      Undo\n                    </button>\n                  )}\n                  {internalColor !== openColor && (\n                    <button\n                      type=\"button\"\n                      onClick={handleReset}\n                      className=\"min-h-6 rounded-control-inner px-ds-02 py-px text-ds-xs font-medium text-surface-fg-muted transition-colors hover:text-error-11\"\n                    >\n                      Reset\n                    </button>\n                  )}\n                </motion.div>\n              )}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    )\n  },\n)\nColorInput.displayName = 'ColorInput'\n\nexport { ColorInput }\n"],"mappings":"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"}

package/dist/ui/color-swatch.js

@@ -8,9 +8,9 @@ var a = {
 	md: "h-4 w-4",
 	lg: "h-6 w-6"
 }, o = {
-	circle: "rounded-full",
+	circle: "rounded-pill",
 	square: "rounded-none",
-	rounded: "rounded-ds-sm"
+	rounded: "rounded-control-inner"
 }, s = t.forwardRef(({ color: s, size: c = "md", shape: l = "circle", ring: u = !1, copyable: d = !1, checkerboard: f = !1, className: p, style: m, ...h }, g) => {
 	let [_, v] = t.useState(!1), y = t.useRef(void 0);
 	t.useEffect(() => () => clearTimeout(y.current), []);
@@ -44,7 +44,7 @@ var a = {
 		...h,
 		children: [w, _ && /* @__PURE__ */ r("span", {
 			role: "status",
-			className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating",
+			className: "absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating",
 			children: "Copied!"
 		})]
 	}) : /* @__PURE__ */ r("span", {

package/dist/ui/color-swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.js","names":[],"sources":["../../src/ui/color-swatch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeMap = {\n  sm: 'h-3 w-3',\n  md: 'h-4 w-4',\n  lg: 'h-6 w-6',\n} as const\n\nconst shapeMap = {\n  circle: 'rounded-full',\n  square: 'rounded-none',\n  rounded: 'rounded-ds-sm',\n} as const\n\n/**\n * A tiny color swatch for displaying dynamic runtime colors (e.g. brand colors from a database).\n *\n * @example\n * <ColorSwatch color=\"#FF5733\" />\n * <ColorSwatch color={org.brandColor} size=\"lg\" ring />\n * <ColorSwatch color=\"rgba(0,0,0,0.5)\" checkerboard copyable />\n */\nexport interface ColorSwatchProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Any valid CSS color string (hex, rgb, oklch, etc.) */\n  color: string\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'circle' */\n  shape?: 'circle' | 'square' | 'rounded'\n  /** Show subtle ring border — useful for light colors that blend into the background */\n  ring?: boolean\n  /** Render as a button that copies the color string to clipboard on click */\n  copyable?: boolean\n  /** Show a checkerboard pattern behind the color — useful for transparent colors */\n  checkerboard?: boolean\n}\n\nconst ColorSwatch = React.forwardRef<HTMLSpanElement, ColorSwatchProps>(\n  ({ color, size = 'md', shape = 'circle', ring = false, copyable = false, checkerboard = false, className, style, ...props }, ref) => {\n    const [copied, setCopied] = React.useState(false)\n    const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n    const sharedClasses = cn(\n      'inline-block shrink-0 relative',\n      sizeMap[size],\n      shapeMap[shape],\n      ring && 'shadow-ring-sm',\n      copyable && 'cursor-pointer',\n      className,\n    )\n\n    const checkerboardStyle: React.CSSProperties = checkerboard\n      ? {\n          backgroundImage: `repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)`,\n          backgroundSize: '8px 8px',\n        }\n      : {}\n\n    const colorOverlayStyle: React.CSSProperties = {\n      backgroundColor: color,\n      ...style,\n    }\n\n    function handleCopy() {\n      navigator.clipboard.writeText(color).then(() => {\n        setCopied(true)\n        timerRef.current = setTimeout(() => setCopied(false), 1500)\n      })\n    }\n\n    const inner = checkerboard ? (\n      <>\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={checkerboardStyle}\n          aria-hidden=\"true\"\n        />\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={colorOverlayStyle}\n        />\n      </>\n    ) : null\n\n    if (copyable) {\n      return (\n        <button\n          type=\"button\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          className={sharedClasses}\n          style={checkerboard ? {} : colorOverlayStyle}\n          onClick={handleCopy}\n          aria-label={`Copy color ${color}`}\n          {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        >\n          {inner}\n          {copied && (\n            <span\n              role=\"status\"\n              className=\"absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-ds-sm bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating\"\n            >\n              Copied!\n            </span>\n          )}\n        </button>\n      )\n    }\n\n    return (\n      <span\n        ref={ref}\n        className={sharedClasses}\n        style={checkerboard ? {} : colorOverlayStyle}\n        role=\"presentation\"\n        {...props}\n      >\n        {inner}\n      </span>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\n"],"mappings":";;;;;AAMA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAW;CACf,QAAQ;CACR,QAAQ;CACR,SAAS;CACV,EAyBK,IAAc,EAAM,YACvB,EAAE,UAAO,UAAO,MAAM,WAAQ,UAAU,UAAO,IAAO,cAAW,IAAO,kBAAe,IAAO,cAAW,UAAO,GAAG,KAAS,MAAQ;CACnI,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,IAAW,EAAM,OAAkD,KAAA,EAAU;AACnF,GAAM,sBAAsB,aAAa,EAAS,QAAQ,EAAE,EAAE,CAAC;CAE/D,IAAM,IAAgB,EACpB,kCACA,EAAQ,IACR,EAAS,IACT,KAAQ,kBACR,KAAY,kBACZ,EACD,EAEK,IAAyC,IAC3C;EACE,iBAAiB;EACjB,gBAAgB;EACjB,GACD,EAAE,EAEA,IAAyC;EAC7C,iBAAiB;EACjB,GAAG;EACJ;CAED,SAAS,IAAa;AACpB,YAAU,UAAU,UAAU,EAAM,CAAC,WAAW;AAE9C,GADA,EAAU,GAAK,EACf,EAAS,UAAU,iBAAiB,EAAU,GAAM,EAAE,KAAK;IAC3D;;CAGJ,IAAM,IAAQ,IACZ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,eAAY;EACZ,CAAA,EACF,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,CAAA,CACD,EAAA,CAAA,GACD;AA0BJ,QAxBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACA;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,SAAS;EACT,cAAY,cAAc;EAC1B,GAAK;YAPP,CASG,GACA,KACC,kBAAC,QAAD;GACE,MAAK;GACL,WAAU;aACX;GAEM,CAAA,CAEF;MAKX,kBAAC,QAAD;EACO;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,MAAK;EACL,GAAI;YAEH;EACI,CAAA;EAGZ;AACD,EAAY,cAAc"}
+{"version":3,"file":"color-swatch.js","names":[],"sources":["../../src/ui/color-swatch.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { cn } from './lib/utils'\n\nconst sizeMap = {\n  sm: 'h-3 w-3',\n  md: 'h-4 w-4',\n  lg: 'h-6 w-6',\n} as const\n\nconst shapeMap = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control-inner',\n} as const\n\n/**\n * A tiny color swatch for displaying dynamic runtime colors (e.g. brand colors from a database).\n *\n * @example\n * <ColorSwatch color=\"#FF5733\" />\n * <ColorSwatch color={org.brandColor} size=\"lg\" ring />\n * <ColorSwatch color=\"rgba(0,0,0,0.5)\" checkerboard copyable />\n */\nexport interface ColorSwatchProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Any valid CSS color string (hex, rgb, oklch, etc.) */\n  color: string\n  /** @default 'md' */\n  size?: 'sm' | 'md' | 'lg'\n  /** @default 'circle' */\n  shape?: 'circle' | 'square' | 'rounded'\n  /** Show subtle ring border — useful for light colors that blend into the background */\n  ring?: boolean\n  /** Render as a button that copies the color string to clipboard on click */\n  copyable?: boolean\n  /** Show a checkerboard pattern behind the color — useful for transparent colors */\n  checkerboard?: boolean\n}\n\nconst ColorSwatch = React.forwardRef<HTMLSpanElement, ColorSwatchProps>(\n  ({ color, size = 'md', shape = 'circle', ring = false, copyable = false, checkerboard = false, className, style, ...props }, ref) => {\n    const [copied, setCopied] = React.useState(false)\n    const timerRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n    React.useEffect(() => () => clearTimeout(timerRef.current), [])\n\n    const sharedClasses = cn(\n      'inline-block shrink-0 relative',\n      sizeMap[size],\n      shapeMap[shape],\n      ring && 'shadow-ring-sm',\n      copyable && 'cursor-pointer',\n      className,\n    )\n\n    const checkerboardStyle: React.CSSProperties = checkerboard\n      ? {\n          backgroundImage: `repeating-conic-gradient(var(--color-neutral-5) 0% 25%, transparent 0% 50%)`,\n          backgroundSize: '8px 8px',\n        }\n      : {}\n\n    const colorOverlayStyle: React.CSSProperties = {\n      backgroundColor: color,\n      ...style,\n    }\n\n    function handleCopy() {\n      navigator.clipboard.writeText(color).then(() => {\n        setCopied(true)\n        timerRef.current = setTimeout(() => setCopied(false), 1500)\n      })\n    }\n\n    const inner = checkerboard ? (\n      <>\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={checkerboardStyle}\n          aria-hidden=\"true\"\n        />\n        <span\n          className={cn('absolute inset-0', shapeMap[shape])}\n          style={colorOverlayStyle}\n        />\n      </>\n    ) : null\n\n    if (copyable) {\n      return (\n        <button\n          type=\"button\"\n          ref={ref as React.Ref<HTMLButtonElement>}\n          className={sharedClasses}\n          style={checkerboard ? {} : colorOverlayStyle}\n          onClick={handleCopy}\n          aria-label={`Copy color ${color}`}\n          {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        >\n          {inner}\n          {copied && (\n            <span\n              role=\"status\"\n              className=\"absolute -top-7 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-control-inner bg-surface-overlay px-1.5 py-0.5 text-[10px] font-sans text-surface-fg shadow-floating\"\n            >\n              Copied!\n            </span>\n          )}\n        </button>\n      )\n    }\n\n    return (\n      <span\n        ref={ref}\n        className={sharedClasses}\n        style={checkerboard ? {} : colorOverlayStyle}\n        role=\"presentation\"\n        {...props}\n      >\n        {inner}\n      </span>\n    )\n  },\n)\nColorSwatch.displayName = 'ColorSwatch'\n\nexport { ColorSwatch }\n"],"mappings":";;;;;AAMA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAAW;CACf,QAAQ;CACR,QAAQ;CACR,SAAS;CACV,EAyBK,IAAc,EAAM,YACvB,EAAE,UAAO,UAAO,MAAM,WAAQ,UAAU,UAAO,IAAO,cAAW,IAAO,kBAAe,IAAO,cAAW,UAAO,GAAG,KAAS,MAAQ;CACnI,IAAM,CAAC,GAAQ,KAAa,EAAM,SAAS,GAAM,EAC3C,IAAW,EAAM,OAAkD,KAAA,EAAU;AACnF,GAAM,sBAAsB,aAAa,EAAS,QAAQ,EAAE,EAAE,CAAC;CAE/D,IAAM,IAAgB,EACpB,kCACA,EAAQ,IACR,EAAS,IACT,KAAQ,kBACR,KAAY,kBACZ,EACD,EAEK,IAAyC,IAC3C;EACE,iBAAiB;EACjB,gBAAgB;EACjB,GACD,EAAE,EAEA,IAAyC;EAC7C,iBAAiB;EACjB,GAAG;EACJ;CAED,SAAS,IAAa;AACpB,YAAU,UAAU,UAAU,EAAM,CAAC,WAAW;AAE9C,GADA,EAAU,GAAK,EACf,EAAS,UAAU,iBAAiB,EAAU,GAAM,EAAE,KAAK;IAC3D;;CAGJ,IAAM,IAAQ,IACZ,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,eAAY;EACZ,CAAA,EACF,kBAAC,QAAD;EACE,WAAW,EAAG,oBAAoB,EAAS,GAAO;EAClD,OAAO;EACP,CAAA,CACD,EAAA,CAAA,GACD;AA0BJ,QAxBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACA;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,SAAS;EACT,cAAY,cAAc;EAC1B,GAAK;YAPP,CASG,GACA,KACC,kBAAC,QAAD;GACE,MAAK;GACL,WAAU;aACX;GAEM,CAAA,CAEF;MAKX,kBAAC,QAAD;EACO;EACL,WAAW;EACX,OAAO,IAAe,EAAE,GAAG;EAC3B,MAAK;EACL,GAAI;YAEH;EACI,CAAA;EAGZ;AACD,EAAY,cAAc"}

package/dist/ui/combobox.js

@@ -11,7 +11,7 @@ import { IconCheck as m, IconChevronDown as h, IconSearch as ee, IconX as te } f
 import { motion as g } from "framer-motion";
 //#region src/ui/combobox.tsx
 var _ = o([
-	"flex w-full items-center justify-between whitespace-nowrap rounded-ds-md",
+	"flex w-full items-center justify-between whitespace-nowrap rounded-control",
 	"border border-surface-border-strong bg-surface-raised-hover",
 	"transition-colors duration-fast-01 ease-productive-standard",
 	"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 focus-visible:border-accent-7",
@@ -116,10 +116,10 @@ var _ = o([
 				children: [e.map((e) => {
 					let t = o.find((t) => t.value === e);
 					return t ? /* @__PURE__ */ p("span", {
-						className: s("inline-flex items-center gap-ds-01 rounded-ds-md bg-accent-2", le),
+						className: s("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", le),
 						children: [t.label, /* @__PURE__ */ f("button", {
 							type: "button",
-							className: "inline-flex items-center justify-center rounded-ds-full outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
+							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard",
 							onClick: (t) => ae(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,
@@ -199,7 +199,7 @@ var _ = o([
 						...i.snappy,
 						opacity: a.fade
 					},
-					className: s("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-overlay shadow-floating"),
+					className: s("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay border border-surface-border bg-surface-overlay shadow-floating"),
 					children: [/* @__PURE__ */ p("div", {
 						className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04",
 						children: [/* @__PURE__ */ f(c, {
@@ -238,7 +238,7 @@ var _ = o([
 								role: "option",
 								"aria-selected": n,
 								"aria-disabled": e.disabled || void 0,
-								className: s("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-ds-md px-ds-04 py-ds-03 text-ds-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", B === t && "bg-accent-2", n && "text-accent-11", e.disabled && "pointer-events-none opacity-action-disabled"),
+								className: s("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-ds-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", B === t && "bg-accent-2", n && "text-accent-11", e.disabled && "pointer-events-none opacity-action-disabled"),
 								onClick: () => {
 									e.disabled || Y(e.value);
 								},

package/dist/ui/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-ds-md',\n    'border border-surface-border-strong bg-surface-raised-hover',\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-offset-2 focus-visible:border-accent-7',\n    'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-ds-xs',\n  sm: 'px-ds-02 py-0 text-ds-xs',\n  md: 'px-ds-03 py-[1px] text-ds-sm',\n  lg: 'px-ds-03 py-[2px] text-ds-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-ds-xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      size: sizeProp = 'md',\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-ds-md bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-ds-full outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"flex-1 truncate text-left text-surface-fg-subtle\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          <button\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-label={accessibleLabel ?? placeholder}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            disabled={disabled}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              open && 'border-accent-7',\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </button>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-ds-lg border border-surface-border bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-ds-md outline-hidden placeholder:text-surface-fg-subtle\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-ds-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-ds-md px-ds-04 py-ds-03 text-ds-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                {option.icon}\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-ds-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/ui/combobox.tsx"],"sourcesContent":["'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { IconCheck, IconChevronDown, IconSearch, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useFormField } from './form'\nimport { Icon } from './icon'\nimport type { IconSize } from './icon-context'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport const comboboxTriggerVariants = cva(\n  [\n    'flex w-full items-center justify-between whitespace-nowrap rounded-control',\n    'border border-surface-border-strong bg-surface-raised-hover',\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-offset-2 focus-visible:border-accent-7',\n    'disabled:cursor-not-allowed disabled:opacity-action-disabled',\n  ],\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs-plus text-ds-sm px-ds-02',\n        sm: 'h-ds-sm text-ds-sm px-ds-03',\n        md: 'h-ds-md text-ds-md px-ds-04',\n        lg: 'h-ds-lg text-ds-md px-ds-05',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n)\n\nexport type ComboboxSize = NonNullable<VariantProps<typeof comboboxTriggerVariants>['size']>\n\n/** Maps combobox size to Icon component size for chevron / check icons */\nconst iconSizeMap: Record<NonNullable<ComboboxSize>, IconSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'sm',\n  lg: 'md',\n}\n\n/** Maps combobox size to pill text + padding classes */\nconst pillSizeMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'px-ds-02 py-0 text-ds-xs',\n  sm: 'px-ds-02 py-0 text-ds-xs',\n  md: 'px-ds-03 py-[1px] text-ds-sm',\n  lg: 'px-ds-03 py-[2px] text-ds-sm',\n}\n\n/** Maps combobox size to overflow text classes */\nconst overflowTextMap: Record<NonNullable<ComboboxSize>, string> = {\n  xs: 'text-ds-xs',\n  sm: 'text-ds-xs',\n  md: 'text-ds-sm',\n  lg: 'text-ds-sm',\n}\n\n/**\n * Option shape for a Combobox dropdown item.\n * `value` must be unique across all options — it is the key used in selection state.\n */\nexport interface ComboboxOption {\n  value: string\n  label: string\n  description?: string\n  icon?: React.ReactNode\n  disabled?: boolean\n}\n\n/**\n * Props for Combobox — a searchable single or multi-select dropdown with built-in keyboard\n * navigation, pill overflow (\"+ N more\"), and an optional custom option renderer.\n *\n * **Single vs multi:** `multiple={false}` (default) — `value` is a `string` and `onValueChange`\n * receives a `string`. When `multiple={true}`, `value` is `string[]`, `onValueChange` receives\n * `string[]`, and selected items appear as dismissible pills in the trigger.\n *\n * The props form a **discriminated union** on `multiple` — TypeScript will narrow `value` and\n * `onValueChange` automatically, so no manual casts are needed.\n *\n * **Custom rendering:** Use `renderOption` to return custom JSX per option (e.g. avatars, badges).\n *\n * @example\n * // Single-select country picker:\n * <Combobox\n *   options={[{ value: 'in', label: 'India' }, { value: 'us', label: 'United States' }]}\n *   value={country}\n *   onValueChange={(v) => setCountry(v)}\n *   placeholder=\"Select country\"\n * />\n *\n * @example\n * // Multi-select tag picker with pill display:\n * <Combobox\n *   multiple\n *   options={tagOptions}\n *   value={selectedTags}\n *   onValueChange={(v) => setSelectedTags(v)}\n *   placeholder=\"Select tags...\"\n * />\n *\n * @example\n * // Custom option renderer (user avatars in assignee picker):\n * <Combobox\n *   options={users.map(u => ({ value: u.id, label: u.name }))}\n *   value={assigneeId}\n *   onValueChange={(v) => setAssigneeId(v)}\n *   renderOption={(option, selected) => (\n *     <span className=\"flex items-center gap-ds-03\">\n *       <Avatar size=\"xs\"><AvatarFallback>{option.label[0]}</AvatarFallback></Avatar>\n *       {option.label}\n *     </span>\n *   )}\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ninterface ComboboxBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Available options shown in the dropdown. */\n  options: ComboboxOption[]\n  /** Placeholder shown in the trigger when no value is selected. */\n  placeholder?: string\n  /** Placeholder for the search input inside the dropdown. */\n  searchPlaceholder?: string\n  /** Message shown when the search yields no results. */\n  emptyMessage?: string\n  disabled?: boolean\n  triggerClassName?: string\n  /** Max visible items in the dropdown before scroll (default 6). */\n  maxVisible?: number\n  /** Custom renderer for each option row. Receives the option and whether it's currently selected. */\n  renderOption?: (option: ComboboxOption, selected: boolean) => React.ReactNode\n  /** Accessible label for the trigger button. Falls back to `placeholder` if not provided. */\n  accessibleLabel?: string\n  /** Size of the trigger. Controls height, text size, padding, and pill sizing. */\n  size?: ComboboxSize\n}\n\ninterface ComboboxSingleProps extends ComboboxBaseProps {\n  multiple?: false\n  value?: string\n  onValueChange: (value: string) => void\n}\n\ninterface ComboboxMultipleProps extends ComboboxBaseProps {\n  multiple: true\n  value?: string[]\n  onValueChange: (value: string[]) => void\n}\n\nexport type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps\n\n/** Max pills shown in the trigger before \"+N more\" overflow */\nconst MAX_VISIBLE_PILLS = 2\n\n/** Approximate height of a single option item in px */\nconst ITEM_HEIGHT_PX = 36\n\nconst Combobox = React.forwardRef<HTMLButtonElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder = 'Select...',\n      searchPlaceholder = 'Search...',\n      emptyMessage = 'No results found',\n      multiple = false,\n      disabled = false,\n      className,\n      triggerClassName,\n      maxVisible = 6,\n      renderOption,\n      accessibleLabel,\n      size: sizeProp = 'md',\n      ...rest\n    },\n    ref,\n  ) => {\n    const size = sizeProp ?? 'md'\n    const [open, setOpen] = React.useState(false)\n    const [search, setSearch] = React.useState('')\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const searchInputRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const optionIdPrefix = React.useId()\n    const listboxId = React.useId()\n\n    const selectedValues = React.useMemo<string[]>(() => {\n      if (value === undefined || value === null) return []\n      if (Array.isArray(value)) return value\n      return [value]\n    }, [value])\n\n    const filteredOptions = React.useMemo(\n      () =>\n        search\n          ? options.filter((o) =>\n              o.label.toLowerCase().includes(search.toLowerCase()),\n            )\n          : options,\n      [options, search],\n    )\n\n    const isSelected = React.useCallback(\n      (optionValue: string) => selectedValues.includes(optionValue),\n      [selectedValues],\n    )\n\n    const handleSelect = React.useCallback(\n      (optionValue: string) => {\n        if (multiple) {\n          const newValue = selectedValues.includes(optionValue)\n            ? selectedValues.filter((v) => v !== optionValue)\n            : [...selectedValues, optionValue]\n          ;(onValueChange as (value: string[]) => void)(newValue)\n        } else {\n          ;(onValueChange as (value: string) => void)(optionValue)\n          setOpen(false)\n        }\n      },\n      [multiple, selectedValues, onValueChange],\n    )\n\n    const handleRemovePill = React.useCallback(\n      (e: React.SyntheticEvent, optionValue: string) => {\n        e.stopPropagation()\n        e.preventDefault()\n        const newValue = selectedValues.filter((v) => v !== optionValue)\n        ;(onValueChange as (value: string[]) => void)(newValue)\n      },\n      [selectedValues, onValueChange],\n    )\n\n    const handleOpenChange = React.useCallback(\n      (nextOpen: boolean) => {\n        if (disabled) return\n        setOpen(nextOpen)\n        if (!nextOpen) {\n          setSearch('')\n          setHighlightedIndex(-1)\n        }\n      },\n      [disabled],\n    )\n\n    // Auto-focus search input when popover opens\n    React.useEffect(() => {\n      if (open) {\n        // Use a small timeout to allow the popover to render\n        const timer = setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 0)\n        return () => clearTimeout(timer)\n      }\n    }, [open])\n\n    const findNextEnabledIndex = React.useCallback(\n      (currentIndex: number, direction: 1 | -1): number => {\n        const len = filteredOptions.length\n        if (len === 0) return -1\n\n        let nextIndex = currentIndex + direction\n        while (nextIndex >= 0 && nextIndex < len) {\n          if (!filteredOptions[nextIndex].disabled) return nextIndex\n          nextIndex += direction\n        }\n        return currentIndex\n      },\n      [filteredOptions],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const nextIdx = findNextEnabledIndex(highlightedIndex, 1)\n            setHighlightedIndex(nextIdx)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prevIdx = findNextEnabledIndex(highlightedIndex, -1)\n            setHighlightedIndex(prevIdx)\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            const firstEnabled = filteredOptions.findIndex((o) => !o.disabled)\n            setHighlightedIndex(firstEnabled)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            let lastEnabled = -1\n            for (let i = filteredOptions.length - 1; i >= 0; i--) {\n              if (!filteredOptions[i].disabled) {\n                lastEnabled = i\n                break\n              }\n            }\n            setHighlightedIndex(lastEnabled)\n            break\n          }\n          case 'Enter': {\n            e.preventDefault()\n            if (\n              highlightedIndex >= 0 &&\n              highlightedIndex < filteredOptions.length &&\n              !filteredOptions[highlightedIndex].disabled\n            ) {\n              handleSelect(filteredOptions[highlightedIndex].value)\n            }\n            break\n          }\n          case 'Escape': {\n            e.preventDefault()\n            setOpen(false)\n            setSearch('')\n            setHighlightedIndex(-1)\n            break\n          }\n        }\n      },\n      [highlightedIndex, filteredOptions, findNextEnabledIndex, handleSelect],\n    )\n\n    // Scroll highlighted option into view\n    React.useEffect(() => {\n      if (highlightedIndex >= 0 && listRef.current) {\n        const optionEl = listRef.current.children[highlightedIndex] as HTMLElement\n        if (optionEl) {\n          optionEl.scrollIntoView?.({ block: 'nearest' })\n        }\n      }\n    }, [highlightedIndex])\n\n    const getSelectedLabel = React.useCallback(() => {\n      if (selectedValues.length === 0) return null\n      const option = options.find((o) => o.value === selectedValues[0])\n      return option?.label ?? null\n    }, [selectedValues, options])\n\n    const resolvedIconSize = iconSizeMap[size]\n    const resolvedPillClasses = pillSizeMap[size]\n    const resolvedOverflowText = overflowTextMap[size]\n\n    const renderTriggerContent = () => {\n      if (multiple && selectedValues.length > 0) {\n        const visiblePills = selectedValues.slice(0, MAX_VISIBLE_PILLS)\n        const remaining = selectedValues.length - MAX_VISIBLE_PILLS\n\n        return (\n          <span className=\"flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden\">\n            {visiblePills.map((val) => {\n              const option = options.find((o) => o.value === val)\n              if (!option) return null\n              return (\n                <span\n                  key={val}\n                  className={cn('inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2', resolvedPillClasses)}\n                >\n                  {option.label}\n                  <button\n                    type=\"button\"\n                    className=\"inline-flex items-center justify-center rounded-pill outline-hidden hover:scale-110 hover:bg-surface-raised-hover transition-transform duration-fast-01 ease-productive-standard\"\n                    onClick={(e) => handleRemovePill(e, val)}\n                    aria-label={`Remove ${option.label}`}\n                    tabIndex={-1}\n                  >\n                    <Icon icon={IconX} size={resolvedIconSize} />\n                  </button>\n                </span>\n              )\n            })}\n            {remaining > 0 && (\n              <span className={cn('text-surface-fg-muted', resolvedOverflowText)}>\n                +{remaining} more\n              </span>\n            )}\n          </span>\n        )\n      }\n\n      if (!multiple && selectedValues.length === 1) {\n        const label = getSelectedLabel()\n        if (label) {\n          return <span className=\"flex-1 truncate text-left\">{label}</span>\n        }\n      }\n\n      return (\n        <span className=\"flex-1 truncate text-left text-surface-fg-subtle\">\n          {placeholder}\n        </span>\n      )\n    }\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    return (\n      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>\n        <div className={cn('relative', className)} {...rest}>\n        <PopoverPrimitive.Trigger asChild disabled={disabled}>\n          <button\n            ref={ref}\n            type=\"button\"\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-haspopup=\"listbox\"\n            aria-label={accessibleLabel ?? placeholder}\n            aria-invalid={isError || undefined}\n            aria-describedby={ariaDescribedBy}\n            aria-required={ariaRequired || undefined}\n            disabled={disabled}\n            className={cn(\n              comboboxTriggerVariants({ size }),\n              open && 'border-accent-7',\n              triggerClassName,\n            )}\n          >\n            {renderTriggerContent()}\n            <Icon icon={IconChevronDown} size={resolvedIconSize} className={cn(\"ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard\", open && 'rotate-180')} />\n          </button>\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            asChild\n            sideOffset={4}\n            align=\"start\"\n            onOpenAutoFocus={(e) => {\n              e.preventDefault()\n              searchInputRef.current?.focus()\n            }}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay border border-surface-border bg-surface-overlay shadow-floating',\n              )}\n            >\n                  {/* Search input */}\n                  <div className=\"flex items-center gap-ds-02 border-b border-surface-border px-ds-04\">\n                    <Icon icon={IconSearch} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n                    <input\n                      ref={searchInputRef}\n                      type=\"text\"\n                      className=\"flex-1 bg-transparent py-ds-03 text-ds-md outline-hidden placeholder:text-surface-fg-subtle\"\n                      placeholder={searchPlaceholder}\n                      value={search}\n                      onChange={(e) => {\n                        setSearch(e.target.value)\n                        setHighlightedIndex(-1)\n                      }}\n                      onKeyDown={handleKeyDown}\n                      aria-autocomplete=\"list\"\n                      aria-controls={listboxId}\n                      aria-activedescendant={\n                        highlightedIndex >= 0\n                          ? `${optionIdPrefix}-option-${highlightedIndex}`\n                          : undefined\n                      }\n                      aria-label=\"Search options\"\n                    />\n                  </div>\n\n                  {/* Options list */}\n                  {filteredOptions.length === 0 ? (\n                    <div className=\"px-ds-04 py-ds-05 text-center text-ds-md text-surface-fg-subtle\">\n                      {emptyMessage}\n                    </div>\n                  ) : (\n                    <ul\n                      ref={listRef}\n                      id={listboxId}\n                      role=\"listbox\"\n                      aria-multiselectable={multiple || undefined}\n                      className=\"overflow-auto p-ds-02\"\n                      style={{ maxHeight: `${maxVisible * ITEM_HEIGHT_PX}px` }}\n                    >\n                      {filteredOptions.map((option, index) => {\n                        const selected = isSelected(option.value)\n                        return (\n                          <li\n                            key={option.value}\n                            id={`${optionIdPrefix}-option-${index}`}\n                            role=\"option\"\n                            aria-selected={selected}\n                            aria-disabled={option.disabled || undefined}\n                            className={cn(\n                              'relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-ds-md outline-hidden',\n                              'transition-colors duration-fast-01 ease-productive-standard',\n                              highlightedIndex === index &&\n                                'bg-accent-2',\n                              selected && 'text-accent-11',\n                              option.disabled &&\n                                'pointer-events-none opacity-action-disabled',\n                            )}\n                            onClick={() => {\n                              if (!option.disabled) {\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onKeyDown={(e) => {\n                              if (!option.disabled && (e.key === 'Enter' || e.key === ' ')) {\n                                e.preventDefault()\n                                handleSelect(option.value)\n                              }\n                            }}\n                            onMouseEnter={() => {\n                              if (!option.disabled) {\n                                setHighlightedIndex(index)\n                              }\n                            }}\n                          >\n                            {option.icon && (\n                              <span className=\"flex h-ico-sm w-ico-sm items-center justify-center shrink-0\">\n                                {option.icon}\n                              </span>\n                            )}\n                            <span className=\"flex flex-1 flex-col\">\n                              {renderOption ? (\n                                renderOption(option, selected)\n                              ) : (\n                                <>\n                                  <span>{option.label}</span>\n                                  {option.description && (\n                                    <span className=\"text-ds-sm text-surface-fg-muted\">\n                                      {option.description}\n                                    </span>\n                                  )}\n                                </>\n                              )}\n                            </span>\n                            {selected && (\n                              <Icon icon={IconCheck} size=\"sm\" className=\"shrink-0\" />\n                            )}\n                          </li>\n                        )\n                      })}\n                    </ul>\n                  )}\n                </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n        </div>\n      </PopoverPrimitive.Root>\n    )\n  },\n)\nCombobox.displayName = 'Combobox'\n\nexport { Combobox }\n"],"mappings":"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"}

package/dist/ui/context-menu.js

@@ -37,7 +37,7 @@ var A = f, j = o, M = i, N = ({ open: e, defaultOpen: t = !1, onOpenChange: n, .
 N.displayName = "ContextMenuSub";
 var P = a, F = y.forwardRef(({ className: e, inset: t, children: n, ...r }, i) => /* @__PURE__ */ x(u, {
 	ref: i,
-	className: _("flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
+	className: _("flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[state=open]:bg-surface-raised data-[state=open]:text-surface-fg", t && "pl-ds-07", e),
 	...r,
 	children: [n, /* @__PURE__ */ b(v, {
 		icon: C,
@@ -68,7 +68,7 @@ var I = y.forwardRef(({ className: e, children: t, ...n }, i) => /* @__PURE__ */
 			...h.snappy,
 			opacity: g.fade
 		},
-		className: _("z-popover min-w-[8rem] overflow-hidden rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+		className: _("z-popover min-w-[8rem] overflow-hidden rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
 		children: t
 	})
 }) }));
@@ -97,7 +97,7 @@ var L = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */
 				...h.snappy,
 				opacity: g.fade
 			},
-			className: _("z-popover rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
+			className: _("z-popover rounded-overlay border border-surface-border-strong bg-surface-overlay p-ds-02 text-surface-fg shadow-floating", e),
 			children: t
 		})
 	})
@@ -105,13 +105,13 @@ var L = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */
 L.displayName = p.displayName;
 var R = y.forwardRef(({ className: e, inset: t, ...n }, r) => /* @__PURE__ */ b(s, {
 	ref: r,
-	className: _("relative flex cursor-default select-none items-center rounded-ds-md px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
+	className: _("relative flex cursor-default select-none items-center rounded-control px-ds-03 py-ds-02b text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t && "pl-ds-07", e),
 	...n
 }));
 R.displayName = s.displayName;
 var z = y.forwardRef(({ className: t, children: n, checked: r, ...i }, a) => /* @__PURE__ */ x(e, {
 	ref: a,
-	className: _("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
+	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", t),
 	checked: r,
 	...i,
 	children: [/* @__PURE__ */ b("span", {
@@ -125,7 +125,7 @@ var z = y.forwardRef(({ className: t, children: n, checked: r, ...i }, a) => /*
 z.displayName = e.displayName;
 var B = y.forwardRef(({ className: e, children: t, ...n }, r) => /* @__PURE__ */ x(l, {
 	ref: r,
-	className: _("relative flex cursor-default select-none items-center rounded-ds-md py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
+	className: _("relative flex cursor-default select-none items-center rounded-control py-ds-02b pl-ds-07 pr-ds-03 text-ds-md outline-hidden focus:bg-surface-raised focus:text-surface-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-action-disabled", e),
 	...n,
 	children: [/* @__PURE__ */ b("span", {
 		className: "absolute left-ds-03 flex h-ico-sm w-ico-sm items-center justify-center",