@devalok/shilp-sutra 0.49.4 → 0.50.0

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 ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\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 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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"}
+{"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 { useFormField } from './form'\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 ──\n// Brand spectrum derived from our OKLCH scales (step-9), spanning the wheel —\n// intentional and on-brand, NOT the raw framework palette. Led by red, not indigo.\n\nconst NAMED_PRESETS: { hex: string; label: string }[] = [\n  { hex: '#C53637', label: 'Red' },\n  { hex: '#BE5A0A', label: 'Orange' },\n  { hex: '#DF911A', label: 'Amber' },\n  { hex: '#308639', label: 'Green' },\n  { hex: '#118659', label: 'Emerald' },\n  { hex: '#11846E', label: 'Teal' },\n  { hex: '#028A9B', label: 'Cyan' },\n  { hex: '#1479B0', label: 'Blue' },\n  { hex: '#7D5FAD', label: 'Purple' },\n  { hex: '#C22D6D', label: 'Pink' },\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-label-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-body-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-body-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    id: externalId,\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    const fieldCtx = useFormField()\n    // Explicit id wins; otherwise adopt FormField's inputId so <Label htmlFor> resolves\n    // onto the (labelable) trigger button. The root is a <div>, which can't be a label target.\n    const triggerId = externalId ?? fieldCtx.inputId\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-body-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                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `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                id={triggerId}\n                aria-describedby={fieldCtx.helperTextId}\n                aria-invalid={fieldCtx.state === 'error' || undefined}\n                // Inside a FormField, let the visible <Label> name the trigger; else describe it.\n                aria-label={fieldCtx.inputId ? undefined : `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-body-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 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-label-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-caption 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-caption 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-caption 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/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAYjD,eAAO,MAAM,uBAAuB;;8EAmBnC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AA0B5F;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,+CAA+C;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oGAAoG;IACpG,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,8GAA8G;IAC9G,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFAoZb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../src/ui/combobox.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,KAAK,UAAU,EAAqB,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAYjD,eAAO,MAAM,uBAAuB;;8EAmBnC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,uBAAuB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AA0B5F;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,UAAU,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACxF,+CAA+C;IAC/C,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,oGAAoG;IACpG,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E,4FAA4F;IAC5F,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,iFAAiF;IACjF,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,8GAA8G;IAC9G,KAAK,CAAC,EAAE,UAAU,CAAA;CACnB;AAED,UAAU,mBAAoB,SAAQ,iBAAiB;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACvC;AAED,UAAU,qBAAsB,SAAQ,iBAAiB;IACvD,QAAQ,EAAE,IAAI,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAA;AAQvE,QAAA,MAAM,QAAQ,yFAyZb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/ui/combobox.js

@@ -1,23 +1,23 @@
 "use client";
 import { Content2$6 as e, Portal$3 as t, Root2$8 as n, Trigger$8 as r } from "../_chunks/primitives.js";
 import { IconProvider as ee } from "./icon-context.js";
-import { springs as te, tweens as ne } from "./lib/motion.js";
-import { cva as i } from "../_chunks/vendor-utils.js";
-import { cn as a } from "./lib/utils.js";
-import { Icon as o } from "./icon.js";
-import { useFormField as s } from "./form.js";
-import { normalizeIcon as c } from "../_chunks/normalize-icon.js";
+import { springs as i, tweens as a } from "./lib/motion.js";
+import { cva as o } from "../_chunks/vendor-utils.js";
+import { cn as s } from "./lib/utils.js";
+import { Icon as c } from "./icon.js";
+import { useFormField as te } from "./form.js";
+import { normalizeIcon as ne } from "../_chunks/normalize-icon.js";
 import { resolveFieldState as re } from "../_chunks/field-state.js";
 import * as l from "react";
-import { Fragment as ie, jsx as u, jsxs as d } from "react/jsx-runtime";
-import { IconCheck as f, IconChevronDown as p, IconSearch as m, IconX as h } from "@tabler/icons-react";
-import { motion as g } from "framer-motion";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { IconCheck as p, IconChevronDown as m, IconSearch as ie, IconX as ae } from "@tabler/icons-react";
+import { motion as oe } from "framer-motion";
 //#region src/ui/combobox.tsx
-var _ = {
+var se = {
 	error: "border-error-7",
 	warning: "border-warning-7",
 	success: "border-success-7"
-}, v = i([
+}, h = o([
 	"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",
@@ -25,128 +25,128 @@ var _ = {
 	"disabled:cursor-not-allowed disabled:opacity-action-disabled"
 ], {
 	variants: { size: {
-		xs: "h-ds-xs-plus text-ds-sm px-ds-02",
-		sm: "h-ds-sm text-ds-sm px-ds-03",
-		md: "h-ds-md text-ds-md px-ds-04",
-		lg: "h-ds-lg text-ds-md px-ds-05"
+		xs: "h-ds-xs-plus text-body-sm px-ds-02",
+		sm: "h-ds-sm text-body-sm px-ds-03",
+		md: "h-ds-md text-body-md px-ds-04",
+		lg: "h-ds-lg text-body-md px-ds-05"
 	} },
 	defaultVariants: { size: "md" }
-}), y = {
+}), g = {
 	xs: "xs",
 	sm: "sm",
 	md: "sm",
 	lg: "md"
-}, b = {
-	xs: "px-ds-02 py-0 text-ds-xs",
-	sm: "px-ds-02 py-0 text-ds-xs",
-	md: "px-ds-03 py-[1px] text-ds-sm",
-	lg: "px-ds-03 py-[2px] text-ds-sm"
-}, ae = {
-	xs: "text-ds-xs",
-	sm: "text-ds-xs",
-	md: "text-ds-sm",
-	lg: "text-ds-sm"
-}, x = 2, oe = 36, S = l.forwardRef(({ options: i, value: S, onValueChange: C, placeholder: w = "Select...", searchPlaceholder: se = "Search...", emptyMessage: ce = "No results found", multiple: T = !1, disabled: E = !1, className: le, triggerClassName: D, maxVisible: O = 6, renderOption: k, accessibleLabel: A, size: j = "md", state: M, ...N }, P) => {
-	let F = j ?? "md", [I, L] = l.useState(!1), [R, z] = l.useState(""), [B, V] = l.useState(-1), H = l.useRef(null), U = l.useRef(null), W = l.useId(), G = l.useId(), K = l.useMemo(() => S == null ? [] : Array.isArray(S) ? S : [S], [S]), q = l.useMemo(() => R ? i.filter((e) => e.label.toLowerCase().includes(R.toLowerCase())) : i, [i, R]), ue = l.useCallback((e) => K.includes(e), [K]), J = l.useCallback((e) => {
-		T ? C(K.includes(e) ? K.filter((t) => t !== e) : [...K, e]) : (C(e), L(!1));
+}, _ = {
+	xs: "px-ds-02 py-0 text-body-xs",
+	sm: "px-ds-02 py-0 text-body-xs",
+	md: "px-ds-03 py-[1px] text-body-sm",
+	lg: "px-ds-03 py-[2px] text-body-sm"
+}, v = {
+	xs: "text-body-xs",
+	sm: "text-body-xs",
+	md: "text-body-sm",
+	lg: "text-body-sm"
+}, y = 2, b = 36, x = l.forwardRef(({ options: o, value: x, onValueChange: S, placeholder: C = "Select...", searchPlaceholder: w = "Search...", emptyMessage: T = "No results found", multiple: E = !1, disabled: D = !1, className: ce, triggerClassName: le, maxVisible: O = 6, renderOption: k, accessibleLabel: A, id: j, size: M = "md", state: N, ...P }, F) => {
+	let I = M ?? "md", [L, R] = l.useState(!1), [z, B] = l.useState(""), [V, H] = l.useState(-1), U = l.useRef(null), W = l.useRef(null), G = l.useId(), K = l.useId(), q = l.useMemo(() => x == null ? [] : Array.isArray(x) ? x : [x], [x]), J = l.useMemo(() => z ? o.filter((e) => e.label.toLowerCase().includes(z.toLowerCase())) : o, [o, z]), ue = l.useCallback((e) => q.includes(e), [q]), Y = l.useCallback((e) => {
+		E ? S(q.includes(e) ? q.filter((t) => t !== e) : [...q, e]) : (S(e), R(!1));
 	}, [
-		T,
-		K,
-		C
+		E,
+		q,
+		S
 	]), de = l.useCallback((e, t) => {
-		e.stopPropagation(), e.preventDefault(), C(K.filter((e) => e !== t));
-	}, [K, C]), fe = l.useCallback((e) => {
-		E || (L(e), e || (z(""), V(-1)));
-	}, [E]);
+		e.stopPropagation(), e.preventDefault(), S(q.filter((e) => e !== t));
+	}, [q, S]), fe = l.useCallback((e) => {
+		D || (R(e), e || (B(""), H(-1)));
+	}, [D]);
 	l.useEffect(() => {
-		if (I) {
+		if (L) {
 			let e = setTimeout(() => {
-				H.current?.focus();
+				U.current?.focus();
 			}, 0);
 			return () => clearTimeout(e);
 		}
-	}, [I]);
-	let Y = l.useCallback((e, t) => {
-		let n = q.length;
+	}, [L]);
+	let X = l.useCallback((e, t) => {
+		let n = J.length;
 		if (n === 0) return -1;
 		let r = e + t;
 		for (; r >= 0 && r < n;) {
-			if (!q[r].disabled) return r;
+			if (!J[r].disabled) return r;
 			r += t;
 		}
 		return e;
-	}, [q]), pe = l.useCallback((e) => {
+	}, [J]), pe = l.useCallback((e) => {
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
-				let t = Y(B, 1);
-				V(t);
+				let t = X(V, 1);
+				H(t);
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
-				let t = Y(B, -1);
-				V(t);
+				let t = X(V, -1);
+				H(t);
 				break;
 			}
 			case "Home": {
 				e.preventDefault();
-				let t = q.findIndex((e) => !e.disabled);
-				V(t);
+				let t = J.findIndex((e) => !e.disabled);
+				H(t);
 				break;
 			}
 			case "End": {
 				e.preventDefault();
 				let t = -1;
-				for (let e = q.length - 1; e >= 0; e--) if (!q[e].disabled) {
+				for (let e = J.length - 1; e >= 0; e--) if (!J[e].disabled) {
 					t = e;
 					break;
 				}
-				V(t);
+				H(t);
 				break;
 			}
 			case "Enter":
-				e.preventDefault(), B >= 0 && B < q.length && !q[B].disabled && J(q[B].value);
+				e.preventDefault(), V >= 0 && V < J.length && !J[V].disabled && Y(J[V].value);
 				break;
 			case "Escape":
-				e.preventDefault(), L(!1), z(""), V(-1);
+				e.preventDefault(), R(!1), B(""), H(-1);
 				break;
 		}
 	}, [
-		B,
-		q,
-		Y,
-		J
+		V,
+		J,
+		X,
+		Y
 	]);
 	l.useEffect(() => {
-		if (B >= 0 && U.current) {
-			let e = U.current.children[B];
+		if (V >= 0 && W.current) {
+			let e = W.current.children[V];
 			e && e.scrollIntoView?.({ block: "nearest" });
 		}
-	}, [B]);
-	let me = l.useCallback(() => K.length === 0 ? null : i.find((e) => e.value === K[0])?.label ?? null, [K, i]), X = y[F], he = b[F], Z = ae[F], ge = () => {
-		if (T && K.length > 0) {
-			let e = K.slice(0, x), t = K.length - x;
-			return /* @__PURE__ */ d("span", {
+	}, [V]);
+	let me = l.useCallback(() => q.length === 0 ? null : o.find((e) => e.value === q[0])?.label ?? null, [q, o]), Z = g[I], he = _[I], ge = v[I], _e = () => {
+		if (E && q.length > 0) {
+			let e = q.slice(0, y), t = q.length - y;
+			return /* @__PURE__ */ f("span", {
 				className: "flex flex-1 flex-wrap items-center gap-ds-02 overflow-hidden",
 				children: [e.map((e) => {
-					let t = i.find((t) => t.value === e);
-					return t ? /* @__PURE__ */ d("span", {
-						className: a("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
-						children: [t.label, /* @__PURE__ */ u("button", {
+					let t = o.find((t) => t.value === e);
+					return t ? /* @__PURE__ */ f("span", {
+						className: s("inline-flex items-center gap-ds-01 rounded-control-inner bg-accent-2", he),
+						children: [t.label, /* @__PURE__ */ d("button", {
 							type: "button",
 							className: "inline-flex items-center justify-center rounded-pill outline-hidden hover:bg-surface-raised-hover transition-colors duration-fast-01 ease-productive-standard",
 							onClick: (t) => de(t, e),
 							"aria-label": `Remove ${t.label}`,
 							tabIndex: -1,
-							children: /* @__PURE__ */ u(o, {
-								icon: h,
-								size: X
+							children: /* @__PURE__ */ d(c, {
+								icon: ae,
+								size: Z
 							})
 						})]
 					}, e) : null;
-				}), t > 0 && /* @__PURE__ */ d("span", {
-					className: a("text-surface-fg-muted", Z),
+				}), t > 0 && /* @__PURE__ */ f("span", {
+					className: s("text-surface-fg-muted", ge),
 					children: [
 						"+",
 						t,
@@ -155,54 +155,55 @@ var _ = {
 				})]
 			});
 		}
-		if (!T && K.length === 1) {
+		if (!E && q.length === 1) {
 			let e = me();
-			if (e) return /* @__PURE__ */ u("span", {
+			if (e) return /* @__PURE__ */ d("span", {
 				className: "min-w-0 flex-1 truncate text-left",
 				children: e
 			});
 		}
-		return /* @__PURE__ */ u("span", {
+		return /* @__PURE__ */ d("span", {
 			className: "min-w-0 flex-1 truncate text-left text-surface-fg-subtle",
-			children: w
+			children: C
 		});
-	}, Q = s(), $ = re(M, Q.state), _e = $ === "error", ve = Q.helperTextId, ye = Q.required;
-	return /* @__PURE__ */ u(n, {
-		open: I,
+	}, Q = te(), $ = re(N, Q.state), ve = $ === "error", ye = Q.helperTextId, be = Q.required;
+	return /* @__PURE__ */ d(n, {
+		open: L,
 		onOpenChange: fe,
-		children: /* @__PURE__ */ d("div", {
-			className: a("relative", le),
-			...N,
-			children: [/* @__PURE__ */ u(r, {
+		children: /* @__PURE__ */ f("div", {
+			className: s("relative", ce),
+			...P,
+			children: [/* @__PURE__ */ d(r, {
 				asChild: !0,
-				disabled: E,
-				children: /* @__PURE__ */ d("button", {
-					ref: P,
+				disabled: D,
+				children: /* @__PURE__ */ f("button", {
+					ref: F,
 					type: "button",
 					role: "combobox",
-					"aria-expanded": I,
-					"aria-controls": G,
+					id: j ?? Q.inputId,
+					"aria-expanded": L,
+					"aria-controls": K,
 					"aria-haspopup": "listbox",
-					"aria-label": A ?? w,
-					"aria-invalid": _e || void 0,
-					"aria-describedby": ve,
-					"aria-required": ye || void 0,
-					disabled: E,
-					className: a(v({ size: F }), I && "border-accent-7", $ && _[$], D),
-					children: [ge(), /* @__PURE__ */ u(o, {
-						icon: p,
-						size: X,
-						className: a("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", I && "rotate-180")
+					"aria-label": A ?? (Q.inputId ? void 0 : C),
+					"aria-invalid": ve || void 0,
+					"aria-describedby": ye,
+					"aria-required": be || void 0,
+					disabled: D,
+					className: s(h({ size: I }), L && "border-accent-7", $ && se[$], le),
+					children: [_e(), /* @__PURE__ */ d(c, {
+						icon: m,
+						size: Z,
+						className: s("ml-ds-02 shrink-0 opacity-50 transition-transform duration-fast-01 ease-productive-standard", L && "rotate-180")
 					})]
 				})
-			}), /* @__PURE__ */ u(t, { children: /* @__PURE__ */ u(e, {
+			}), /* @__PURE__ */ d(t, { children: /* @__PURE__ */ d(e, {
 				asChild: !0,
 				sideOffset: 4,
 				align: "start",
 				onOpenAutoFocus: (e) => {
-					e.preventDefault(), H.current?.focus();
+					e.preventDefault(), U.current?.focus();
 				},
-				children: /* @__PURE__ */ d(g.div, {
+				children: /* @__PURE__ */ f(oe.div, {
 					initial: {
 						opacity: 0,
 						scale: .95
@@ -212,75 +213,75 @@ var _ = {
 						scale: 1
 					},
 					transition: {
-						...te.snappy,
-						opacity: ne.fade
+						...i.snappy,
+						opacity: a.fade
 					},
-					className: a("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating"),
-					children: [/* @__PURE__ */ d("div", {
+					className: s("z-popover w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-overlay bg-surface-overlay shadow-floating"),
+					children: [/* @__PURE__ */ f("div", {
 						className: "flex items-center gap-ds-02 border-b border-surface-border px-ds-04",
-						children: [/* @__PURE__ */ u(o, {
-							icon: m,
+						children: [/* @__PURE__ */ d(c, {
+							icon: ie,
 							size: "sm",
 							className: "shrink-0 text-surface-fg-subtle"
-						}), /* @__PURE__ */ u("input", {
-							ref: H,
+						}), /* @__PURE__ */ d("input", {
+							ref: U,
 							type: "text",
-							className: "flex-1 bg-transparent py-ds-03 text-ds-md outline-hidden placeholder:text-surface-fg-subtle",
-							placeholder: se,
-							value: R,
+							className: "flex-1 bg-transparent py-ds-03 text-body-md outline-hidden placeholder:text-surface-fg-subtle",
+							placeholder: w,
+							value: z,
 							onChange: (e) => {
-								z(e.target.value), V(-1);
+								B(e.target.value), H(-1);
 							},
 							onKeyDown: pe,
 							"aria-autocomplete": "list",
-							"aria-controls": G,
-							"aria-activedescendant": B >= 0 ? `${W}-option-${B}` : void 0,
+							"aria-controls": K,
+							"aria-activedescendant": V >= 0 ? `${G}-option-${V}` : void 0,
 							"aria-label": "Search options"
 						})]
-					}), q.length === 0 ? /* @__PURE__ */ u("div", {
-						className: "px-ds-04 py-ds-05 text-center text-ds-md text-surface-fg-subtle",
-						children: ce
-					}) : /* @__PURE__ */ u("ul", {
-						ref: U,
-						id: G,
+					}), J.length === 0 ? /* @__PURE__ */ d("div", {
+						className: "px-ds-04 py-ds-05 text-center text-body-md text-surface-fg-subtle",
+						children: T
+					}) : /* @__PURE__ */ d("ul", {
+						ref: W,
+						id: K,
 						role: "listbox",
-						"aria-multiselectable": T || void 0,
+						"aria-multiselectable": E || void 0,
 						className: "overflow-auto p-ds-02",
-						style: { maxHeight: `${O * oe}px` },
-						children: q.map((e, t) => {
+						style: { maxHeight: `${O * b}px` },
+						children: J.map((e, t) => {
 							let n = ue(e.value);
-							return /* @__PURE__ */ d("li", {
-								id: `${W}-option-${t}`,
+							return /* @__PURE__ */ f("li", {
+								id: `${G}-option-${t}`,
 								role: "option",
 								"aria-selected": n,
 								"aria-disabled": e.disabled || void 0,
-								className: a("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"),
+								className: s("relative flex cursor-pointer select-none items-center gap-ds-03 rounded-control px-ds-04 py-ds-03 text-body-md outline-hidden", "transition-colors duration-fast-01 ease-productive-standard", V === t && "bg-accent-2", n && "text-accent-11", e.disabled && "pointer-events-none opacity-action-disabled"),
 								onClick: () => {
-									e.disabled || J(e.value);
+									e.disabled || Y(e.value);
 								},
 								onKeyDown: (t) => {
-									!e.disabled && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), J(e.value));
+									!e.disabled && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), Y(e.value));
 								},
 								onMouseEnter: () => {
-									e.disabled || V(t);
+									e.disabled || H(t);
 								},
 								children: [
-									e.icon && /* @__PURE__ */ u("span", {
+									e.icon && /* @__PURE__ */ d("span", {
 										className: "flex h-ico-sm w-ico-sm items-center justify-center shrink-0",
-										children: /* @__PURE__ */ u(ee, {
-											size: X,
-											children: c(e.icon)
+										children: /* @__PURE__ */ d(ee, {
+											size: Z,
+											children: ne(e.icon)
 										})
 									}),
-									/* @__PURE__ */ u("span", {
+									/* @__PURE__ */ d("span", {
 										className: "flex flex-1 flex-col",
-										children: k ? k(e, n) : /* @__PURE__ */ d(ie, { children: [/* @__PURE__ */ u("span", { children: e.label }), e.description && /* @__PURE__ */ u("span", {
-											className: "text-ds-sm text-surface-fg-muted",
+										children: k ? k(e, n) : /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("span", { children: e.label }), e.description && /* @__PURE__ */ d("span", {
+											className: "text-body-sm text-surface-fg-muted",
 											children: e.description
 										})] })
 									}),
-									n && /* @__PURE__ */ u(o, {
-										icon: f,
+									n && /* @__PURE__ */ d(c, {
+										icon: p,
 										size: "sm",
 										className: "shrink-0"
 									})
@@ -293,6 +294,6 @@ var _ = {
 		})
 	});
 });
-S.displayName = "Combobox";
+x.displayName = "Combobox";
 //#endregion
-export { S as Combobox, v as comboboxTriggerVariants };
+export { x as Combobox, h as comboboxTriggerVariants };