eidos-ui 3.6.3 → 3.8.0

package/dist/{chunk-KBQD4JLK.cjs.map → chunk-LUDK44NZ.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-KBQD4JLK.cjs","../src/components/ColorPicker/ColorPicker.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-KBQD4JLK.cjs","sourcesContent":[null,"import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type {\n  ColorPickerProps,\n  HSVColor,\n  RGBColor,\n  HSLColor,\n  ColorFormat,\n} from './ColorPicker.types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_SWATCHES: string[] = [\n  '#ef4444',\n  '#f97316',\n  '#f59e0b',\n  '#10b981',\n  '#06b6d4',\n  '#6366f1',\n  '#8b5cf6',\n  '#ec4899',\n  '#64748b',\n  '#1e293b',\n];\n\n// ============================================================================\n// Pure colour-utility functions\n// ============================================================================\n\nfunction hsvToRgb(h: number, s: number, v: number): RGBColor {\n  // h: 0–360, s: 0–100, v: 0–100  →  r,g,b: 0–255\n  const sn = s / 100;\n  const vn = v / 100;\n  const c = vn * sn;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = vn - c;\n\n  let r: number, g: number, b: number;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\nfunction rgbToHsv(r: number, g: number, b: number): HSVColor {\n  // r,g,b: 0–255  →  h: 0–360, s: 0–100, v: 0–100\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n\n  const v = max * 100;\n  const s = max === 0 ? 0 : (delta / max) * 100;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = h * 60;\n    if (h < 0) h += 360;\n  }\n\n  // Deliberately NOT rounded. HSV is this component's internal state, and\n  // rounding s/v to whole percent makes the hex -> HSV -> hex round trip lossy:\n  // `#5c5de8` came back as `#5d5de8`, so a controlled `value` displayed a\n  // different colour than the one passed in, and any interaction committed the\n  // drifted value. `hsvToRgb` already rounds to whole channels at the end, so\n  // precision is only needed in between. Every consumer of these floats (the\n  // hue gradient, the thumb offsets, the hue slider) accepts them.\n  return { h, s, v };\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const ch = (n: number) =>\n    Math.round(Math.max(0, Math.min(255, n)))\n      .toString(16)\n      .padStart(2, '0');\n  return `#${ch(r)}${ch(g)}${ch(b)}`;\n}\n\nfunction hexToRgb(hex: string): RGBColor | null {\n  const c = hex.trim().replace(/^#/, '');\n  let r: number, g: number, b: number;\n\n  if (c.length === 3) {\n    r = parseInt(c[0] + c[0], 16);\n    g = parseInt(c[1] + c[1], 16);\n    b = parseInt(c[2] + c[2], 16);\n  } else if (c.length === 6) {\n    r = parseInt(c.slice(0, 2), 16);\n    g = parseInt(c.slice(2, 4), 16);\n    b = parseInt(c.slice(4, 6), 16);\n  } else {\n    return null;\n  }\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;\n  return { r, g, b };\n}\n\nfunction rgbToHsl(r: number, g: number, b: number): HSLColor {\n  // r,g,b: 0–255  →  h: 0–360, s: 0–100, l: 0–100\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const l = (max + min) / 2;\n\n  let h = 0;\n  let s = 0;\n\n  if (delta !== 0) {\n    s = delta / (1 - Math.abs(2 * l - 1));\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = h * 60;\n    if (h < 0) h += 360;\n  }\n\n  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\nfunction hslToRgb(h: number, s: number, l: number): RGBColor {\n  // h: 0–360, s: 0–100, l: 0–100  →  r,g,b: 0–255\n  const sn = s / 100;\n  const ln = l / 100;\n  const c = (1 - Math.abs(2 * ln - 1)) * sn;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = ln - c / 2;\n\n  let r: number, g: number, b: number;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\n// ============================================================================\n// Format helpers\n// ============================================================================\n\nfunction colorToText(hsv: HSVColor, alpha: number, fmt: ColorFormat): string {\n  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n\n  switch (fmt) {\n    case 'hex':\n      return rgbToHex(rgb.r, rgb.g, rgb.b);\n    case 'rgb':\n      return alpha < 1\n        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`\n        : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n    case 'hsl': {\n      const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n      return alpha < 1\n        ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`\n        : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n    }\n  }\n}\n\nfunction parseColorText(text: string): RGBColor | null {\n  const t = text.trim();\n\n  // Try hex (with or without leading #)\n  const hexCandidate = t.startsWith('#') ? t : /^[0-9a-f]{3,6}$/i.test(t) ? `#${t}` : null;\n  if (hexCandidate) return hexToRgb(hexCandidate);\n\n  // Try rgb() / rgba()\n  const rgbMatch = t.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/i);\n  if (rgbMatch) {\n    return {\n      r: parseInt(rgbMatch[1], 10),\n      g: parseInt(rgbMatch[2], 10),\n      b: parseInt(rgbMatch[3], 10),\n    };\n  }\n\n  // Try hsl() / hsla()\n  const hslMatch = t.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?/i);\n  if (hslMatch) {\n    return hslToRgb(\n      parseInt(hslMatch[1], 10),\n      parseInt(hslMatch[2], 10),\n      parseInt(hslMatch[3], 10),\n    );\n  }\n\n  return null;\n}\n\n/** Parse a hex string to HSVColor, falling back to red on failure. */\nfunction hexToHsv(hex: string): HSVColor {\n  const rgb = hexToRgb(hex);\n  return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : { h: 0, s: 100, v: 100 };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  format = 'hex',\n  showAlpha = false,\n  showSwatches = true,\n  swatches = DEFAULT_SWATCHES,\n  disabled = false,\n  size = 'md',\n  inline = false,\n  label,\n  ariaLabel,\n  className = '',\n}) => {\n  // ── Initial hex (only used on first render by useState) ──────────────────\n  const initialHex = value ?? defaultValue ?? '#6366f1';\n\n  // ── State ─────────────────────────────────────────────────────────────────\n  const [hsv, setHsv] = useState<HSVColor>(() => hexToHsv(initialHex));\n  const [alpha, setAlpha] = useState<number>(1);\n  const [activeFormat, setActiveFormat] = useState<ColorFormat>(format);\n  const [inputText, setInputText] = useState<string>(() =>\n    colorToText(hexToHsv(initialHex), 1, format),\n  );\n  const [copied, setCopied] = useState(false);\n\n  // ── Refs - give event handlers always-fresh values without stale closures ──\n  const hsvRef = useRef<HSVColor>(hsv);\n  hsvRef.current = hsv;\n\n  const alphaRef = useRef<number>(alpha);\n  alphaRef.current = alpha;\n\n  const activeFormatRef = useRef<ColorFormat>(activeFormat);\n  activeFormatRef.current = activeFormat;\n\n  // onChange is stored in a ref so applyColor never becomes stale\n  const onChangeRef = useRef<ColorPickerProps['onChange']>(onChange);\n  onChangeRef.current = onChange;\n\n  const inputFocusedRef = useRef(false);\n  const canvasRef = useRef<HTMLDivElement>(null);\n\n  // Refs for in-flight drag listeners - cleaned up on mouseup and on unmount\n  const dragHandlersRef = useRef<{\n    move: (e: MouseEvent) => void;\n    up: () => void;\n  } | null>(null);\n\n  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // ── Derived ───────────────────────────────────────────────────────────────\n  const currentRgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n  const currentHex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);\n\n  // ── Sync from controlled `value` prop ─────────────────────────────────────\n  // Runs only when `value` changes. We normalize both sides to the same\n  // hex format before comparing so that round-trip conversions don't trigger\n  // spurious updates (which would overwrite the preserved hue when s/v = 0).\n  useEffect(() => {\n    if (value === undefined) return;\n    const rgb = hexToRgb(value);\n    if (!rgb) return;\n    const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n    const newNormalised = rgbToHex(\n      ...(Object.values(hsvToRgb(newHsv.h, newHsv.s, newHsv.v)) as [number, number, number]),\n    );\n    // currentHex is captured from this render - guards against echo loops\n    // when the parent echoes back our own onChange emission\n    if (newNormalised === currentHex) return;\n    setHsv(newHsv);\n    if (!inputFocusedRef.current) {\n      setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n    }\n  }, [value, currentHex]);\n\n  // ── Cleanup drag listeners and timers on unmount ──────────────────────────\n  useEffect(() => {\n    return () => {\n      if (dragHandlersRef.current) {\n        document.removeEventListener('mousemove', dragHandlersRef.current.move);\n        document.removeEventListener('mouseup', dragHandlersRef.current.up);\n      }\n      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n    };\n  }, []);\n\n  // ── Core: apply a new HSV + alpha, emit onChange ───────────────────────────\n  // Stable (empty dep array) - reads live values exclusively via refs.\n  const applyColor = useCallback((newHsv: HSVColor, newAlpha: number) => {\n    setHsv(newHsv);\n    setAlpha(newAlpha);\n\n    if (!inputFocusedRef.current) {\n      setInputText(colorToText(newHsv, newAlpha, activeFormatRef.current));\n    }\n\n    const rgb = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);\n    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n    onChangeRef.current?.(hex);\n  }, []);\n\n  // ── 2-D saturation / brightness canvas ────────────────────────────────────\n  const handleCanvasMouseDown = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n\n      const pick = (clientX: number, clientY: number) => {\n        const canvas = canvasRef.current;\n        if (!canvas) return;\n        const rect = canvas.getBoundingClientRect();\n        const s = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));\n        const v = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100));\n        applyColor({ h: hsvRef.current.h, s, v }, alphaRef.current);\n      };\n\n      pick(e.clientX, e.clientY);\n\n      const handleMouseMove = (me: MouseEvent) => pick(me.clientX, me.clientY);\n      const handleMouseUp = () => {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n        dragHandlersRef.current = null;\n      };\n\n      dragHandlersRef.current = { move: handleMouseMove, up: handleMouseUp };\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, applyColor],\n  );\n\n  // ── Hue slider ────────────────────────────────────────────────────────────\n  const handleHueChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      applyColor({ ...hsvRef.current, h: Number(e.target.value) }, alphaRef.current);\n    },\n    [applyColor],\n  );\n\n  // ── Alpha slider ──────────────────────────────────────────────────────────\n  const handleAlphaChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      applyColor(hsvRef.current, Number(e.target.value) / 100);\n    },\n    [applyColor],\n  );\n\n  // ── Format toggle ─────────────────────────────────────────────────────────\n  const handleFormatChange = useCallback((fmt: ColorFormat) => {\n    setActiveFormat(fmt);\n    setInputText(colorToText(hsvRef.current, alphaRef.current, fmt));\n  }, []);\n\n  // ── Text-input commit (Enter / blur) ──────────────────────────────────────\n  const handleInputCommit = useCallback(() => {\n    const rgb = parseColorText(inputText);\n    if (!rgb) {\n      // Invalid - reset to the current valid colour\n      setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n      return;\n    }\n    const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n    applyColor(newHsv, alphaRef.current);\n    // Always normalise the text after a commit (even if the input still has focus)\n    setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n  }, [inputText, applyColor]);\n\n  // ── Swatch click ──────────────────────────────────────────────────────────\n  const handleSwatchClick = useCallback(\n    (hex: string) => {\n      const rgb = hexToRgb(hex);\n      if (!rgb) return;\n      applyColor(rgbToHsv(rgb.r, rgb.g, rgb.b), alphaRef.current);\n    },\n    [applyColor],\n  );\n\n  // ── Copy to clipboard ─────────────────────────────────────────────────────\n  const handleCopy = useCallback(() => {\n    const text = colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current);\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        setCopied(true);\n        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n        copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);\n      })\n      .catch(() => {\n        // Clipboard access denied - silently ignore\n      });\n  }, []);\n\n  // ── Alpha-slider background gradient ─────────────────────────────────────\n  // We use a transparent-to-current-colour gradient layered over a checkerboard\n  // so the alpha slider always shows the correct colour transition.\n  const transparentColor = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, 0)`;\n\n  const alphaTrackBg = {\n    backgroundImage: [\n      `linear-gradient(to right, ${transparentColor}, ${currentHex})`,\n      'linear-gradient(45deg, #e2e8f0 25%, transparent 25%)',\n      'linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)',\n      'linear-gradient(45deg, transparent 75%, #e2e8f0 75%)',\n      'linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)',\n    ].join(', '),\n    backgroundSize: '100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px',\n    backgroundPosition: '0 0, 0 0, 0 4px, 4px -4px, -4px 0',\n  };\n\n  // ── Picker panel (shared between inline and popover modes) ────────────────\n  //\n  // The size modifier has to live on the panel itself, not only on the root:\n  // in popover mode the panel is portaled to document.body by Dropdown, so\n  // anything inside it that sized itself off a `.eidos-color-picker--{size}`\n  // ancestor matched nothing and collapsed. That is what removed the\n  // saturation/brightness canvas entirely from every non-inline picker.\n  const panel = (\n    <div\n      className={`eidos-color-picker-panel eidos-color-picker-panel--${size}${\n        inline ? ' eidos-color-picker-panel--inline' : ''\n      }`}\n    >\n      {/* 2-D sat / brightness canvas */}\n      <div\n        ref={canvasRef}\n        className=\"eidos-color-picker-canvas\"\n        style={{\n          background: [\n            'linear-gradient(to top, #000, transparent)',\n            `linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,\n          ].join(', '),\n        }}\n        onMouseDown={handleCanvasMouseDown}\n        role=\"presentation\"\n      >\n        <div\n          className=\"eidos-color-picker-thumb\"\n          style={{\n            // Rounded for display only - hsv.s/v are unrounded floats so the\n            // hex round trip stays lossless (see rgbToHsv).\n            left: `${hsv.s.toFixed(2)}%`,\n            top: `${(100 - hsv.v).toFixed(2)}%`,\n            background: currentHex,\n          }}\n        />\n      </div>\n\n      {/* Sliders */}\n      <div className=\"eidos-color-picker-sliders\">\n        {/* Hue */}\n        <input\n          type=\"range\"\n          className=\"eidos-color-picker-hue\"\n          min={0}\n          max={360}\n          step={1}\n          value={hsv.h}\n          disabled={disabled}\n          onChange={handleHueChange}\n          aria-label=\"Hue\"\n        />\n\n        {/* Alpha */}\n        {showAlpha && (\n          <div className=\"eidos-color-picker-alpha-wrapper\">\n            <div className=\"eidos-color-picker-alpha-bg\" style={alphaTrackBg} />\n            <input\n              type=\"range\"\n              className=\"eidos-color-picker-alpha\"\n              min={0}\n              max={100}\n              step={1}\n              value={Math.round(alpha * 100)}\n              disabled={disabled}\n              onChange={handleAlphaChange}\n              aria-label=\"Opacity\"\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Text input + format toggles + copy */}\n      <div className=\"eidos-color-picker-inputs\">\n        <div className=\"eidos-color-picker-format-btns\" role=\"group\" aria-label=\"Colour format\">\n          {(['hex', 'rgb', 'hsl'] as ColorFormat[]).map((fmt) => (\n            <button\n              key={fmt}\n              type=\"button\"\n              className={[\n                'eidos-color-picker-format-btn',\n                activeFormat === fmt && 'eidos-color-picker-format-btn--active',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => handleFormatChange(fmt)}\n              disabled={disabled}\n              aria-pressed={activeFormat === fmt}\n            >\n              {fmt.toUpperCase()}\n            </button>\n          ))}\n        </div>\n\n        <input\n          type=\"text\"\n          className=\"eidos-color-picker-input\"\n          value={inputText}\n          disabled={disabled}\n          spellCheck={false}\n          aria-label=\"Colour value\"\n          onChange={(e) => setInputText(e.target.value)}\n          onFocus={() => {\n            inputFocusedRef.current = true;\n          }}\n          onBlur={() => {\n            inputFocusedRef.current = false;\n            handleInputCommit();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') handleInputCommit();\n            if (e.key === 'Escape') {\n              setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n            }\n          }}\n        />\n\n        <button\n          type=\"button\"\n          className={['eidos-color-picker-copy', copied && 'eidos-color-picker-copy--copied']\n            .filter(Boolean)\n            .join(' ')}\n          onClick={handleCopy}\n          disabled={disabled}\n          aria-label=\"Copy colour value\"\n          title=\"Copy colour value\"\n        >\n          {copied ? <Check size={14} /> : <Copy size={14} />}\n        </button>\n      </div>\n\n      {/* Swatches */}\n      {showSwatches && (\n        <div className=\"eidos-color-picker-swatches\" role=\"group\" aria-label=\"Colour presets\">\n          {swatches.map((swatchHex) => (\n            <button\n              key={swatchHex}\n              type=\"button\"\n              className={[\n                'eidos-color-picker-swatch',\n                currentHex === swatchHex && 'eidos-color-picker-swatch--active',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{ background: swatchHex }}\n              onClick={() => handleSwatchClick(swatchHex)}\n              disabled={disabled}\n              aria-label={`Select ${swatchHex}`}\n              title={swatchHex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  // ── Root element classes ───────────────────────────────────────────────────\n  const rootClasses = [\n    'eidos-color-picker',\n    `eidos-color-picker--${size}`,\n    disabled && 'eidos-color-picker--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // ── Inline mode ───────────────────────────────────────────────────────────\n  if (inline) {\n    return (\n      <div className={rootClasses}>\n        {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n        {panel}\n      </div>\n    );\n  }\n\n  // ── Popover (trigger + Dropdown) ──────────────────────────────────────────\n  return (\n    <div className={rootClasses}>\n      {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n      <Dropdown\n        trigger={\n          <button\n            type=\"button\"\n            className=\"eidos-color-picker-trigger\"\n            disabled={disabled}\n            aria-label={label ?? ariaLabel ?? 'Open colour picker'}\n          >\n            <span\n              className=\"eidos-color-picker-trigger-swatch\"\n              style={{ background: currentHex }}\n            />\n            <span className=\"eidos-color-picker-trigger-value\">{currentHex}</span>\n          </button>\n        }\n        content={panel}\n        placement=\"bottom\"\n        autoWidth={false}\n        minWidth={260}\n        disabled={disabled}\n      />\n    </div>\n  );\n};\n\nColorPicker.displayName = 'ColorPicker';\n"]}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-LUDK44NZ.cjs","../src/components/ColorPicker/ColorPicker.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-LUDK44NZ.cjs","sourcesContent":[null,"import React, { useState, useRef, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type {\n  ColorPickerProps,\n  HSVColor,\n  RGBColor,\n  HSLColor,\n  ColorFormat,\n} from './ColorPicker.types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst DEFAULT_SWATCHES: string[] = [\n  '#ef4444',\n  '#f97316',\n  '#f59e0b',\n  '#10b981',\n  '#06b6d4',\n  '#6366f1',\n  '#8b5cf6',\n  '#ec4899',\n  '#64748b',\n  '#1e293b',\n];\n\n// ============================================================================\n// Pure colour-utility functions\n// ============================================================================\n\nfunction hsvToRgb(h: number, s: number, v: number): RGBColor {\n  // h: 0–360, s: 0–100, v: 0–100  →  r,g,b: 0–255\n  const sn = s / 100;\n  const vn = v / 100;\n  const c = vn * sn;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = vn - c;\n\n  let r: number, g: number, b: number;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\nfunction rgbToHsv(r: number, g: number, b: number): HSVColor {\n  // r,g,b: 0–255  →  h: 0–360, s: 0–100, v: 0–100\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n\n  const v = max * 100;\n  const s = max === 0 ? 0 : (delta / max) * 100;\n\n  let h = 0;\n  if (delta !== 0) {\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = h * 60;\n    if (h < 0) h += 360;\n  }\n\n  // Deliberately NOT rounded. HSV is this component's internal state, and\n  // rounding s/v to whole percent makes the hex -> HSV -> hex round trip lossy:\n  // `#5c5de8` came back as `#5d5de8`, so a controlled `value` displayed a\n  // different colour than the one passed in, and any interaction committed the\n  // drifted value. `hsvToRgb` already rounds to whole channels at the end, so\n  // precision is only needed in between. Every consumer of these floats (the\n  // hue gradient, the thumb offsets, the hue slider) accepts them.\n  return { h, s, v };\n}\n\nfunction rgbToHex(r: number, g: number, b: number): string {\n  const ch = (n: number) =>\n    Math.round(Math.max(0, Math.min(255, n)))\n      .toString(16)\n      .padStart(2, '0');\n  return `#${ch(r)}${ch(g)}${ch(b)}`;\n}\n\nfunction hexToRgb(hex: string): RGBColor | null {\n  const c = hex.trim().replace(/^#/, '');\n  let r: number, g: number, b: number;\n\n  if (c.length === 3) {\n    r = parseInt(c[0] + c[0], 16);\n    g = parseInt(c[1] + c[1], 16);\n    b = parseInt(c[2] + c[2], 16);\n  } else if (c.length === 6) {\n    r = parseInt(c.slice(0, 2), 16);\n    g = parseInt(c.slice(2, 4), 16);\n    b = parseInt(c.slice(4, 6), 16);\n  } else {\n    return null;\n  }\n\n  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;\n  return { r, g, b };\n}\n\nfunction rgbToHsl(r: number, g: number, b: number): HSLColor {\n  // r,g,b: 0–255  →  h: 0–360, s: 0–100, l: 0–100\n  const rn = r / 255;\n  const gn = g / 255;\n  const bn = b / 255;\n\n  const max = Math.max(rn, gn, bn);\n  const min = Math.min(rn, gn, bn);\n  const delta = max - min;\n  const l = (max + min) / 2;\n\n  let h = 0;\n  let s = 0;\n\n  if (delta !== 0) {\n    s = delta / (1 - Math.abs(2 * l - 1));\n    if (max === rn) h = ((gn - bn) / delta) % 6;\n    else if (max === gn) h = (bn - rn) / delta + 2;\n    else h = (rn - gn) / delta + 4;\n    h = h * 60;\n    if (h < 0) h += 360;\n  }\n\n  return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) };\n}\n\nfunction hslToRgb(h: number, s: number, l: number): RGBColor {\n  // h: 0–360, s: 0–100, l: 0–100  →  r,g,b: 0–255\n  const sn = s / 100;\n  const ln = l / 100;\n  const c = (1 - Math.abs(2 * ln - 1)) * sn;\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n  const m = ln - c / 2;\n\n  let r: number, g: number, b: number;\n  if (h < 60) {\n    r = c;\n    g = x;\n    b = 0;\n  } else if (h < 120) {\n    r = x;\n    g = c;\n    b = 0;\n  } else if (h < 180) {\n    r = 0;\n    g = c;\n    b = x;\n  } else if (h < 240) {\n    r = 0;\n    g = x;\n    b = c;\n  } else if (h < 300) {\n    r = x;\n    g = 0;\n    b = c;\n  } else {\n    r = c;\n    g = 0;\n    b = x;\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  };\n}\n\n// ============================================================================\n// Format helpers\n// ============================================================================\n\nfunction colorToText(hsv: HSVColor, alpha: number, fmt: ColorFormat): string {\n  const rgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n\n  switch (fmt) {\n    case 'hex':\n      return rgbToHex(rgb.r, rgb.g, rgb.b);\n    case 'rgb':\n      return alpha < 1\n        ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`\n        : `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n    case 'hsl': {\n      const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);\n      return alpha < 1\n        ? `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`\n        : `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;\n    }\n  }\n}\n\nfunction parseColorText(text: string): RGBColor | null {\n  const t = text.trim();\n\n  // Try hex (with or without leading #)\n  const hexCandidate = t.startsWith('#') ? t : /^[0-9a-f]{3,6}$/i.test(t) ? `#${t}` : null;\n  if (hexCandidate) return hexToRgb(hexCandidate);\n\n  // Try rgb() / rgba()\n  const rgbMatch = t.match(/rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)/i);\n  if (rgbMatch) {\n    return {\n      r: parseInt(rgbMatch[1], 10),\n      g: parseInt(rgbMatch[2], 10),\n      b: parseInt(rgbMatch[3], 10),\n    };\n  }\n\n  // Try hsl() / hsla()\n  const hslMatch = t.match(/hsla?\\(\\s*(\\d+)\\s*,\\s*(\\d+)%?\\s*,\\s*(\\d+)%?/i);\n  if (hslMatch) {\n    return hslToRgb(\n      parseInt(hslMatch[1], 10),\n      parseInt(hslMatch[2], 10),\n      parseInt(hslMatch[3], 10),\n    );\n  }\n\n  return null;\n}\n\n/** Parse a hex string to HSVColor, falling back to red on failure. */\nfunction hexToHsv(hex: string): HSVColor {\n  const rgb = hexToRgb(hex);\n  return rgb ? rgbToHsv(rgb.r, rgb.g, rgb.b) : { h: 0, s: 100, v: 100 };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const ColorPicker: React.FC<ColorPickerProps> = ({\n  value,\n  defaultValue,\n  onChange,\n  format = 'hex',\n  showAlpha = false,\n  showSwatches = true,\n  swatches = DEFAULT_SWATCHES,\n  disabled = false,\n  size = 'md',\n  inline = false,\n  label,\n  ariaLabel,\n  className = '',\n}) => {\n  // ── Initial hex (only used on first render by useState) ──────────────────\n  const initialHex = value ?? defaultValue ?? '#6366f1';\n\n  // ── State ─────────────────────────────────────────────────────────────────\n  const [hsv, setHsv] = useState<HSVColor>(() => hexToHsv(initialHex));\n  const [alpha, setAlpha] = useState<number>(1);\n  const [activeFormat, setActiveFormat] = useState<ColorFormat>(format);\n  const [inputText, setInputText] = useState<string>(() =>\n    colorToText(hexToHsv(initialHex), 1, format),\n  );\n  const [copied, setCopied] = useState(false);\n\n  // ── Refs - give event handlers always-fresh values without stale closures ──\n  const hsvRef = useRef<HSVColor>(hsv);\n  hsvRef.current = hsv;\n\n  const alphaRef = useRef<number>(alpha);\n  alphaRef.current = alpha;\n\n  const activeFormatRef = useRef<ColorFormat>(activeFormat);\n  activeFormatRef.current = activeFormat;\n\n  // onChange is stored in a ref so applyColor never becomes stale\n  const onChangeRef = useRef<ColorPickerProps['onChange']>(onChange);\n  onChangeRef.current = onChange;\n\n  const inputFocusedRef = useRef(false);\n  const canvasRef = useRef<HTMLDivElement>(null);\n\n  // Refs for in-flight drag listeners - cleaned up on mouseup and on unmount\n  const dragHandlersRef = useRef<{\n    move: (e: MouseEvent) => void;\n    up: () => void;\n  } | null>(null);\n\n  const copiedTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // ── Derived ───────────────────────────────────────────────────────────────\n  const currentRgb = hsvToRgb(hsv.h, hsv.s, hsv.v);\n  const currentHex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);\n\n  // ── Sync from controlled `value` prop ─────────────────────────────────────\n  // Runs only when `value` changes. We normalize both sides to the same\n  // hex format before comparing so that round-trip conversions don't trigger\n  // spurious updates (which would overwrite the preserved hue when s/v = 0).\n  useEffect(() => {\n    if (value === undefined) return;\n    const rgb = hexToRgb(value);\n    if (!rgb) return;\n    const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n    const newNormalised = rgbToHex(\n      ...(Object.values(hsvToRgb(newHsv.h, newHsv.s, newHsv.v)) as [number, number, number]),\n    );\n    // currentHex is captured from this render - guards against echo loops\n    // when the parent echoes back our own onChange emission\n    if (newNormalised === currentHex) return;\n    setHsv(newHsv);\n    if (!inputFocusedRef.current) {\n      setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n    }\n  }, [value, currentHex]);\n\n  // ── Cleanup drag listeners and timers on unmount ──────────────────────────\n  useEffect(() => {\n    return () => {\n      if (dragHandlersRef.current) {\n        document.removeEventListener('mousemove', dragHandlersRef.current.move);\n        document.removeEventListener('mouseup', dragHandlersRef.current.up);\n      }\n      if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n    };\n  }, []);\n\n  // ── Core: apply a new HSV + alpha, emit onChange ───────────────────────────\n  // Stable (empty dep array) - reads live values exclusively via refs.\n  const applyColor = useCallback((newHsv: HSVColor, newAlpha: number) => {\n    setHsv(newHsv);\n    setAlpha(newAlpha);\n\n    if (!inputFocusedRef.current) {\n      setInputText(colorToText(newHsv, newAlpha, activeFormatRef.current));\n    }\n\n    const rgb = hsvToRgb(newHsv.h, newHsv.s, newHsv.v);\n    const hex = rgbToHex(rgb.r, rgb.g, rgb.b);\n    onChangeRef.current?.(hex);\n  }, []);\n\n  // ── 2-D saturation / brightness canvas ────────────────────────────────────\n  const handleCanvasMouseDown = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n\n      const pick = (clientX: number, clientY: number) => {\n        const canvas = canvasRef.current;\n        if (!canvas) return;\n        const rect = canvas.getBoundingClientRect();\n        const s = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));\n        const v = Math.max(0, Math.min(100, 100 - ((clientY - rect.top) / rect.height) * 100));\n        applyColor({ h: hsvRef.current.h, s, v }, alphaRef.current);\n      };\n\n      pick(e.clientX, e.clientY);\n\n      const handleMouseMove = (me: MouseEvent) => pick(me.clientX, me.clientY);\n      const handleMouseUp = () => {\n        document.removeEventListener('mousemove', handleMouseMove);\n        document.removeEventListener('mouseup', handleMouseUp);\n        dragHandlersRef.current = null;\n      };\n\n      dragHandlersRef.current = { move: handleMouseMove, up: handleMouseUp };\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    },\n    [disabled, applyColor],\n  );\n\n  // ── Hue slider ────────────────────────────────────────────────────────────\n  const handleHueChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      applyColor({ ...hsvRef.current, h: Number(e.target.value) }, alphaRef.current);\n    },\n    [applyColor],\n  );\n\n  // ── Alpha slider ──────────────────────────────────────────────────────────\n  const handleAlphaChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      applyColor(hsvRef.current, Number(e.target.value) / 100);\n    },\n    [applyColor],\n  );\n\n  // ── Format toggle ─────────────────────────────────────────────────────────\n  const handleFormatChange = useCallback((fmt: ColorFormat) => {\n    setActiveFormat(fmt);\n    setInputText(colorToText(hsvRef.current, alphaRef.current, fmt));\n  }, []);\n\n  // ── Text-input commit (Enter / blur) ──────────────────────────────────────\n  const handleInputCommit = useCallback(() => {\n    const rgb = parseColorText(inputText);\n    if (!rgb) {\n      // Invalid - reset to the current valid colour\n      setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n      return;\n    }\n    const newHsv = rgbToHsv(rgb.r, rgb.g, rgb.b);\n    applyColor(newHsv, alphaRef.current);\n    // Always normalise the text after a commit (even if the input still has focus)\n    setInputText(colorToText(newHsv, alphaRef.current, activeFormatRef.current));\n  }, [inputText, applyColor]);\n\n  // ── Swatch click ──────────────────────────────────────────────────────────\n  const handleSwatchClick = useCallback(\n    (hex: string) => {\n      const rgb = hexToRgb(hex);\n      if (!rgb) return;\n      applyColor(rgbToHsv(rgb.r, rgb.g, rgb.b), alphaRef.current);\n    },\n    [applyColor],\n  );\n\n  // ── Copy to clipboard ─────────────────────────────────────────────────────\n  const handleCopy = useCallback(() => {\n    const text = colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current);\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        setCopied(true);\n        if (copiedTimerRef.current) clearTimeout(copiedTimerRef.current);\n        copiedTimerRef.current = setTimeout(() => setCopied(false), 2000);\n      })\n      .catch(() => {\n        // Clipboard access denied - silently ignore\n      });\n  }, []);\n\n  // ── Alpha-slider background gradient ─────────────────────────────────────\n  // We use a transparent-to-current-colour gradient layered over a checkerboard\n  // so the alpha slider always shows the correct colour transition.\n  const transparentColor = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, 0)`;\n\n  const alphaTrackBg = {\n    backgroundImage: [\n      `linear-gradient(to right, ${transparentColor}, ${currentHex})`,\n      'linear-gradient(45deg, #e2e8f0 25%, transparent 25%)',\n      'linear-gradient(-45deg, #e2e8f0 25%, transparent 25%)',\n      'linear-gradient(45deg, transparent 75%, #e2e8f0 75%)',\n      'linear-gradient(-45deg, transparent 75%, #e2e8f0 75%)',\n    ].join(', '),\n    backgroundSize: '100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px',\n    backgroundPosition: '0 0, 0 0, 0 4px, 4px -4px, -4px 0',\n  };\n\n  // ── Picker panel (shared between inline and popover modes) ────────────────\n  //\n  // The size modifier has to live on the panel itself, not only on the root:\n  // in popover mode the panel is portaled to document.body by Dropdown, so\n  // anything inside it that sized itself off a `.eidos-color-picker--{size}`\n  // ancestor matched nothing and collapsed. That is what removed the\n  // saturation/brightness canvas entirely from every non-inline picker.\n  const panel = (\n    <div\n      className={`eidos-color-picker-panel eidos-color-picker-panel--${size}${\n        inline ? ' eidos-color-picker-panel--inline' : ''\n      }`}\n    >\n      {/* 2-D sat / brightness canvas */}\n      <div\n        ref={canvasRef}\n        className=\"eidos-color-picker-canvas\"\n        style={{\n          background: [\n            'linear-gradient(to top, #000, transparent)',\n            `linear-gradient(to right, #fff, hsl(${hsv.h}, 100%, 50%))`,\n          ].join(', '),\n        }}\n        onMouseDown={handleCanvasMouseDown}\n        role=\"presentation\"\n      >\n        <div\n          className=\"eidos-color-picker-thumb\"\n          style={{\n            // Rounded for display only - hsv.s/v are unrounded floats so the\n            // hex round trip stays lossless (see rgbToHsv).\n            left: `${hsv.s.toFixed(2)}%`,\n            top: `${(100 - hsv.v).toFixed(2)}%`,\n            background: currentHex,\n          }}\n        />\n      </div>\n\n      {/* Sliders */}\n      <div className=\"eidos-color-picker-sliders\">\n        {/* Hue */}\n        <input\n          type=\"range\"\n          className=\"eidos-color-picker-hue\"\n          min={0}\n          max={360}\n          step={1}\n          value={hsv.h}\n          disabled={disabled}\n          onChange={handleHueChange}\n          aria-label=\"Hue\"\n        />\n\n        {/* Alpha */}\n        {showAlpha && (\n          <div className=\"eidos-color-picker-alpha-wrapper\">\n            <div className=\"eidos-color-picker-alpha-bg\" style={alphaTrackBg} />\n            <input\n              type=\"range\"\n              className=\"eidos-color-picker-alpha\"\n              min={0}\n              max={100}\n              step={1}\n              value={Math.round(alpha * 100)}\n              disabled={disabled}\n              onChange={handleAlphaChange}\n              aria-label=\"Opacity\"\n            />\n          </div>\n        )}\n      </div>\n\n      {/* Text input + format toggles + copy */}\n      <div className=\"eidos-color-picker-inputs\">\n        <div className=\"eidos-color-picker-format-btns\" role=\"group\" aria-label=\"Colour format\">\n          {(['hex', 'rgb', 'hsl'] as ColorFormat[]).map((fmt) => (\n            <button\n              key={fmt}\n              type=\"button\"\n              className={[\n                'eidos-color-picker-format-btn',\n                activeFormat === fmt && 'eidos-color-picker-format-btn--active',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={() => handleFormatChange(fmt)}\n              disabled={disabled}\n              aria-pressed={activeFormat === fmt}\n            >\n              {fmt.toUpperCase()}\n            </button>\n          ))}\n        </div>\n\n        <input\n          type=\"text\"\n          className=\"eidos-color-picker-input\"\n          value={inputText}\n          disabled={disabled}\n          spellCheck={false}\n          aria-label=\"Colour value\"\n          onChange={(e) => setInputText(e.target.value)}\n          onFocus={() => {\n            inputFocusedRef.current = true;\n          }}\n          onBlur={() => {\n            inputFocusedRef.current = false;\n            handleInputCommit();\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') handleInputCommit();\n            if (e.key === 'Escape') {\n              setInputText(colorToText(hsvRef.current, alphaRef.current, activeFormatRef.current));\n            }\n          }}\n        />\n\n        <button\n          type=\"button\"\n          className={['eidos-color-picker-copy', copied && 'eidos-color-picker-copy--copied']\n            .filter(Boolean)\n            .join(' ')}\n          onClick={handleCopy}\n          disabled={disabled}\n          aria-label=\"Copy colour value\"\n          title=\"Copy colour value\"\n        >\n          {copied ? <Check size={14} /> : <Copy size={14} />}\n        </button>\n      </div>\n\n      {/* Swatches */}\n      {showSwatches && (\n        <div className=\"eidos-color-picker-swatches\" role=\"group\" aria-label=\"Colour presets\">\n          {swatches.map((swatchHex) => (\n            <button\n              key={swatchHex}\n              type=\"button\"\n              className={[\n                'eidos-color-picker-swatch',\n                currentHex === swatchHex && 'eidos-color-picker-swatch--active',\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{ background: swatchHex }}\n              onClick={() => handleSwatchClick(swatchHex)}\n              disabled={disabled}\n              aria-label={`Select ${swatchHex}`}\n              title={swatchHex}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  );\n\n  // ── Root element classes ───────────────────────────────────────────────────\n  const rootClasses = [\n    'eidos-color-picker',\n    `eidos-color-picker--${size}`,\n    disabled && 'eidos-color-picker--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // ── Inline mode ───────────────────────────────────────────────────────────\n  if (inline) {\n    return (\n      <div className={rootClasses}>\n        {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n        {panel}\n      </div>\n    );\n  }\n\n  // ── Popover (trigger + Dropdown) ──────────────────────────────────────────\n  return (\n    <div className={rootClasses}>\n      {label && <span className=\"eidos-color-picker-label\">{label}</span>}\n      <Dropdown\n        trigger={\n          <button\n            type=\"button\"\n            className=\"eidos-color-picker-trigger\"\n            disabled={disabled}\n            aria-label={label ?? ariaLabel ?? 'Open colour picker'}\n          >\n            <span\n              className=\"eidos-color-picker-trigger-swatch\"\n              style={{ background: currentHex }}\n            />\n            <span className=\"eidos-color-picker-trigger-value\">{currentHex}</span>\n          </button>\n        }\n        content={panel}\n        placement=\"bottom\"\n        autoWidth={false}\n        minWidth={260}\n        disabled={disabled}\n      />\n    </div>\n  );\n};\n\nColorPicker.displayName = 'ColorPicker';\n"]}

package/dist/chunk-LWCFT5SP.cjs

@@ -0,0 +1,82 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunkWR77IZUUcjs = require('./chunk-WR77IZUU.cjs');
+
+// src/components/SplitChip/SplitChip.utils.ts
+var hasVisibleBorder = (segment) => segment.variant === "outlined" || segment.disabled;
+var resolveSegmentEdges = (segments, showDividers) => {
+  const edges = segments.map(() => ({ joinedStart: false, joinedEnd: false, divided: false }));
+  for (let i = 0; i < segments.length - 1; i++) {
+    const a = hasVisibleBorder(segments[i]);
+    const b = hasVisibleBorder(segments[i + 1]);
+    const sameOutline = segments[i].disabled === segments[i + 1].disabled;
+    if (a && b) {
+      edges[i].joinedEnd = !showDividers && sameOutline;
+      edges[i + 1].joinedStart = true;
+    } else if (a) {
+      edges[i + 1].joinedStart = true;
+    } else if (b) {
+      edges[i].joinedEnd = true;
+    } else {
+      edges[i].joinedEnd = true;
+      edges[i + 1].joinedStart = !showDividers;
+      edges[i + 1].divided = showDividers;
+    }
+  }
+  return edges;
+};
+
+// src/components/SplitChip/SplitChip.component.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var SplitChip = ({
+  segments,
+  variant = "filled",
+  color = "primary",
+  size = "md",
+  disabled = false,
+  showDividers = false,
+  className = "",
+  ...rest
+}) => {
+  const classes = [
+    "eidos-split-chip",
+    `eidos-split-chip--${size}`,
+    showDividers && "eidos-split-chip--dividers",
+    disabled && "eidos-split-chip--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  const lastIndex = segments.length - 1;
+  const resolved = segments.map((segment) => ({
+    variant: _nullishCoalesce(segment.variant, () => ( variant)),
+    disabled: disabled || !!segment.disabled
+  }));
+  const edges = resolveSegmentEdges(resolved, showDividers);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: classes, ...rest, children: segments.map((segment, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkWR77IZUUcjs.Chip,
+    {
+      variant: resolved[index].variant,
+      color: _nullishCoalesce(segment.color, () => ( color)),
+      size,
+      disabled: resolved[index].disabled,
+      onClick: segment.onClick,
+      tooltip: segment.tooltip,
+      preIcon: segment.preIcon,
+      posIcon: segment.posIcon,
+      className: [
+        "eidos-split-chip__segment",
+        index === 0 && "eidos-split-chip__segment--first",
+        index === lastIndex && "eidos-split-chip__segment--last",
+        edges[index].joinedStart && "eidos-split-chip__segment--joined-start",
+        edges[index].joinedEnd && "eidos-split-chip__segment--joined-end",
+        edges[index].divided && "eidos-split-chip__segment--divided"
+      ].filter(Boolean).join(" "),
+      children: segment.label
+    },
+    segment.id
+  )) });
+};
+
+
+
+exports.SplitChip = SplitChip;
+//# sourceMappingURL=chunk-LWCFT5SP.cjs.map

package/dist/chunk-LWCFT5SP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-LWCFT5SP.cjs","../src/components/SplitChip/SplitChip.utils.ts","../src/components/SplitChip/SplitChip.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACiBA,IAAM,iBAAA,EAAmB,CAAC,OAAA,EAAA,GACxB,OAAA,CAAQ,QAAA,IAAY,WAAA,GAAc,OAAA,CAAQ,QAAA;AAsBrC,IAAM,oBAAA,EAAsB,CACjC,QAAA,EACA,YAAA,EAAA,GACmB;AACnB,EAAA,MAAM,MAAA,EAAQ,QAAA,CAAS,GAAA,CAAI,CAAA,EAAA,GAAA,CAAO,EAAE,WAAA,EAAa,KAAA,EAAO,SAAA,EAAW,KAAA,EAAO,OAAA,EAAS,MAAM,CAAA,CAAE,CAAA;AAE3F,EAAA,IAAA,CAAA,IAAS,EAAA,EAAI,CAAA,EAAG,EAAA,EAAI,QAAA,CAAS,OAAA,EAAS,CAAA,EAAG,CAAA,EAAA,EAAK;AAC5C,IAAA,MAAM,EAAA,EAAI,gBAAA,CAAiB,QAAA,CAAS,CAAC,CAAC,CAAA;AACtC,IAAA,MAAM,EAAA,EAAI,gBAAA,CAAiB,QAAA,CAAS,EAAA,EAAI,CAAC,CAAC,CAAA;AAI1C,IAAA,MAAM,YAAA,EAAc,QAAA,CAAS,CAAC,CAAA,CAAE,SAAA,IAAa,QAAA,CAAS,EAAA,EAAI,CAAC,CAAA,CAAE,QAAA;AAE7D,IAAA,GAAA,CAAI,EAAA,GAAK,CAAA,EAAG;AACV,MAAA,KAAA,CAAM,CAAC,CAAA,CAAE,UAAA,EAAY,CAAC,aAAA,GAAgB,WAAA;AACtC,MAAA,KAAA,CAAM,EAAA,EAAI,CAAC,CAAA,CAAE,YAAA,EAAc,IAAA;AAAA,IAC7B,EAAA,KAAA,GAAA,CAAW,CAAA,EAAG;AACZ,MAAA,KAAA,CAAM,EAAA,EAAI,CAAC,CAAA,CAAE,YAAA,EAAc,IAAA;AAAA,IAC7B,EAAA,KAAA,GAAA,CAAW,CAAA,EAAG;AACZ,MAAA,KAAA,CAAM,CAAC,CAAA,CAAE,UAAA,EAAY,IAAA;AAAA,IACvB,EAAA,KAAO;AACL,MAAA,KAAA,CAAM,CAAC,CAAA,CAAE,UAAA,EAAY,IAAA;AACrB,MAAA,KAAA,CAAM,EAAA,EAAI,CAAC,CAAA,CAAE,YAAA,EAAc,CAAC,YAAA;AAC5B,MAAA,KAAA,CAAM,EAAA,EAAI,CAAC,CAAA,CAAE,QAAA,EAAU,YAAA;AAAA,IACzB;AAAA,EACF;AAEA,EAAA,OAAO,KAAA;AACT,CAAA;AD9CA;AACA;AE2BQ,+CAAA;AA9BD,IAAM,UAAA,EAAsC,CAAC;AAAA,EAClD,QAAA;AAAA,EACA,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,aAAA,EAAe,KAAA;AAAA,EACf,UAAA,EAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,QAAA,EAAU;AAAA,IACd,kBAAA;AAAA,IACA,CAAA,kBAAA,EAAqB,IAAI,CAAA,CAAA;AACT,IAAA;AACJ,IAAA;AACZ,IAAA;AAGS,EAAA;AAEgB,EAAA;AACD,EAAA;AACP,IAAA;AACO,IAAA;AACxB,EAAA;AACY,EAAA;AAGX,EAAA;AAEI,IAAA;AAAA,IAAA;AAEwB,MAAA;AACC,MAAA;AACxB,MAAA;AACwB,MAAA;AACP,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAKN,MAAA;AACT,QAAA;AACe,QAAA;AACL,QAAA;AACG,QAAA;AACA,QAAA;AACA,QAAA;AAGP,MAAA;AAEC,MAAA;AAAA,IAAA;AAxBI,IAAA;AA2BnB,EAAA;AAEJ;AFR8B;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-LWCFT5SP.cjs","sourcesContent":[null,"import type { ChipVariantProps } from '../Chip/Chip.types';\n\nexport interface SeamSegment {\n  variant: ChipVariantProps;\n  disabled: boolean;\n}\n\nexport interface SegmentEdges {\n  /** Drop the leading (left) border. */\n  joinedStart: boolean;\n  /** Drop the trailing (right) border. */\n  joinedEnd: boolean;\n  /** Draw a divider as the leading border, in the segment's own colour. */\n  divided: boolean;\n}\n\n/**\n * A segment \"owns\" a visible border when it is `outlined`, or when it is\n * disabled - the disabled Chip style paints a grey border on every variant.\n * `filled` and `text` borders are transparent.\n */\nconst hasVisibleBorder = (segment: SeamSegment) =>\n  segment.variant === 'outlined' || segment.disabled;\n\n/**\n * Decides, per seam, which of the two neighbouring edges survives.\n *\n * Each seam is resolved from **both** sides at once. The first version decided\n * each edge from one side only (\"drop it if the neighbour is not `text`\"),\n * which broke two ways: an `outlined` segment beside a disabled one dropped\n * its edge while the disabled segment dropped its own too, leaving the seam\n * open; and with dividers, an `outlined` segment gave up its own border to a\n * divider drawn in the *neighbour's* colour.\n *\n * The rules, for a seam between A (left) and B (right):\n *\n * - Both have visible borders: if they are the same kind (both enabled\n *   `outlined`, or both disabled), seamless by default - both edges drop, so\n *   the run reads as one outline. With dividers, or when the kinds differ,\n *   A's own edge is the seam and B's drops.\n * - Only one has a visible border: that edge is the seam; the other drops, so\n *   there is never a double line and never an open side.\n * - Neither has one: both drop; with dividers, B draws one in its own colour.\n */\nexport const resolveSegmentEdges = (\n  segments: SeamSegment[],\n  showDividers: boolean,\n): SegmentEdges[] => {\n  const edges = segments.map(() => ({ joinedStart: false, joinedEnd: false, divided: false }));\n\n  for (let i = 0; i < segments.length - 1; i++) {\n    const a = hasVisibleBorder(segments[i]);\n    const b = hasVisibleBorder(segments[i + 1]);\n    // Two borders only merge into one outline when they are the same kind:\n    // both enabled `outlined`, or both disabled. An outlined segment beside a\n    // disabled one would otherwise lose the seam against a near-white surface.\n    const sameOutline = segments[i].disabled === segments[i + 1].disabled;\n\n    if (a && b) {\n      edges[i].joinedEnd = !showDividers && sameOutline;\n      edges[i + 1].joinedStart = true;\n    } else if (a) {\n      edges[i + 1].joinedStart = true;\n    } else if (b) {\n      edges[i].joinedEnd = true;\n    } else {\n      edges[i].joinedEnd = true;\n      edges[i + 1].joinedStart = !showDividers;\n      edges[i + 1].divided = showDividers;\n    }\n  }\n\n  return edges;\n};\n","import React from 'react';\nimport { Chip } from '../Chip/Chip.component';\nimport type { SplitChipProps } from './SplitChip.types';\nimport { resolveSegmentEdges } from './SplitChip.utils';\n\n/**\n * SplitChip - one chip split into independent segments, each with its own\n * label, variant, colour and optional click handler.\n *\n * Every segment is a real `Chip`, the same way `SplitButton` is built from\n * `Button`, so variants, sizes, icons, tooltips, disabled styling and the\n * \"hover only when clickable\" rule cannot drift between the two. This\n * component only adds the join: collapsed inner borders, radii on the outer\n * ends, and optional dividers.\n *\n * @example\n * ```tsx\n * <SplitChip\n *   segments={[\n *     { id: 'label', label: 'Status', variant: 'outlined' },\n *     { id: 'value', label: 'Open', color: 'success', onClick: openFilter },\n *   ]}\n * />\n * ```\n */\nexport const SplitChip: React.FC<SplitChipProps> = ({\n  segments,\n  variant = 'filled',\n  color = 'primary',\n  size = 'md',\n  disabled = false,\n  showDividers = false,\n  className = '',\n  ...rest\n}) => {\n  const classes = [\n    'eidos-split-chip',\n    `eidos-split-chip--${size}`,\n    showDividers && 'eidos-split-chip--dividers',\n    disabled && 'eidos-split-chip--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const lastIndex = segments.length - 1;\n  const resolved = segments.map((segment) => ({\n    variant: segment.variant ?? variant,\n    disabled: disabled || !!segment.disabled,\n  }));\n  const edges = resolveSegmentEdges(resolved, showDividers);\n\n  return (\n    <div className={classes} {...rest}>\n      {segments.map((segment, index) => (\n        <Chip\n          key={segment.id}\n          variant={resolved[index].variant}\n          color={segment.color ?? color}\n          size={size}\n          disabled={resolved[index].disabled}\n          onClick={segment.onClick}\n          tooltip={segment.tooltip}\n          preIcon={segment.preIcon}\n          posIcon={segment.posIcon}\n          // Position comes from the index, not `:first-child`/`:last-child`:\n          // a segment with a `tooltip` is wrapped in the Tooltip's trigger\n          // `div`, so the chip is no longer a direct child of this container\n          // and structural pseudo-classes would round the wrong corners.\n          className={[\n            'eidos-split-chip__segment',\n            index === 0 && 'eidos-split-chip__segment--first',\n            index === lastIndex && 'eidos-split-chip__segment--last',\n            edges[index].joinedStart && 'eidos-split-chip__segment--joined-start',\n            edges[index].joinedEnd && 'eidos-split-chip__segment--joined-end',\n            edges[index].divided && 'eidos-split-chip__segment--divided',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {segment.label}\n        </Chip>\n      ))}\n    </div>\n  );\n};\n"]}

package/dist/{chunk-JNY7TUDS.js → chunk-MCPGI6EI.js}

@@ -1,6 +1,6 @@
 import {
   FOCUSABLE_SELECTOR
-} from "./chunk-RHHZRTWM.js";
+} from "./chunk-U34INRFO.js";
 
 // src/components/Tooltip/Tooltip.component.tsx
 import { useState, useRef, useCallback, useEffect } from "react";
@@ -327,4 +327,4 @@ Tooltip.displayName = "Tooltip";
 export {
   Tooltip
 };
-//# sourceMappingURL=chunk-JNY7TUDS.js.map
+//# sourceMappingURL=chunk-MCPGI6EI.js.map

package/dist/{chunk-DU5JKTHK.cjs → chunk-MKC6V3SY.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
-var _chunkDA375AI6cjs = require('./chunk-DA375AI6.cjs');
+var _chunkXPG56DLQcjs = require('./chunk-XPG56DLQ.cjs');
 
 
 
-var _chunk35LGEPLPcjs = require('./chunk-35LGEPLP.cjs');
+var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
 
 // src/components/Drawer/Drawer.component.tsx
 var _react = require('react');
@@ -26,7 +26,7 @@ var Drawer = ({
   const titleId = _react.useId.call(void 0, );
   const bodyId = _react.useId.call(void 0, );
   const panelRef = _react.useRef.call(void 0, null);
-  const isClient = _chunk35LGEPLPcjs.useIsClient.call(void 0, );
+  const isClient = _chunkENMDOQQOcjs.useIsClient.call(void 0, );
   const TRANSITION_MS = 300;
   const [isMounted, setIsMounted] = _react.useState.call(void 0, isOpen);
   const [isVisible, setIsVisible] = _react.useState.call(void 0, isOpen);
@@ -75,7 +75,7 @@ var Drawer = ({
     },
     [closeOnBackdropClick, onClose]
   );
-  _chunk35LGEPLPcjs.useDialogFocus.call(void 0, isClient && isOpen && isVisible, panelRef);
+  _chunkENMDOQQOcjs.useDialogFocus.call(void 0, isClient && isOpen && isVisible, panelRef);
   if (!isClient || !isMounted) return null;
   return _reactdom.createPortal.call(void 0, 
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -118,7 +118,7 @@ var Drawer = ({
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: bodyId, className: "eidos-drawer-body", children }),
                 actions && actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-drawer-footer", children: actions.map((action) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkDA375AI6cjs.Button,
+                  _chunkXPG56DLQcjs.Button,
                   {
                     variant: _nullishCoalesce(action.variant, () => ( "outlined")),
                     color: action.color,
@@ -143,4 +143,4 @@ Drawer.displayName = "Drawer";
 
 
 exports.Drawer = Drawer;
-//# sourceMappingURL=chunk-DU5JKTHK.cjs.map
+//# sourceMappingURL=chunk-MKC6V3SY.cjs.map

package/dist/{chunk-DU5JKTHK.cjs.map → chunk-MKC6V3SY.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-DU5JKTHK.cjs","../src/components/Drawer/Drawer.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-DU5JKTHK.cjs","sourcesContent":[null,"import React, { useEffect, useCallback, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\nimport { Button } from '../Button';\nimport type { DrawerProps } from './Drawer.types';\nimport { useDialogFocus, useIsClient } from '../../utils';\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose,\n  placement = 'right',\n  title,\n  children,\n  actions,\n  size = 'md',\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  className = '',\n}) => {\n  const titleId = useId();\n  const bodyId = useId();\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isClient = useIsClient();\n\n  // ── Animation state ────────────────────────────────────────────────────────\n  // isMounted: whether the portal DOM node exists at all.\n  // isVisible: whether the '--open' CSS class is applied (drives the transition).\n  //\n  // On open:  mount first → one rAF → apply --open (browser sees initial\n  //           closed position before transitioning, so the animation fires).\n  // On close: remove --open (CSS transition plays) → after 300 ms unmount.\n  //           300 ms matches the CSS `transition: 0.3s` in Drawer.scss.\n  const TRANSITION_MS = 300;\n  const [isMounted, setIsMounted] = useState(isOpen);\n  const [isVisible, setIsVisible] = useState(isOpen);\n\n  useEffect(() => {\n    let raf1 = 0;\n    let raf2 = 0;\n    let timerId: ReturnType<typeof setTimeout>;\n\n    if (isOpen) {\n      setIsMounted(true);\n      // Double rAF: React 18 automatic batching means setIsMounted(true) may\n      // not produce a committed browser paint before the first rAF fires.\n      // The second frame guarantees the panel is rendered in its off-screen\n      // (closed) position before the CSS transition begins.\n      raf1 = requestAnimationFrame(() => {\n        raf2 = requestAnimationFrame(() => setIsVisible(true));\n      });\n    } else {\n      setIsVisible(false);\n      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);\n    }\n\n    return () => {\n      cancelAnimationFrame(raf1);\n      cancelAnimationFrame(raf2);\n      clearTimeout(timerId);\n    };\n  }, [isOpen]);\n\n  // ── Escape key + scroll lock (tied to isOpen, not isMounted) ───────────────\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (closeOnEscape && event.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    },\n    [closeOnEscape, isOpen, onClose],\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscapeKey);\n      document.body.style.overflow = 'hidden';\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey);\n      document.body.style.overflow = '';\n    };\n  }, [isOpen, handleEscapeKey]);\n\n  // ── Backdrop click ─────────────────────────────────────────────────────────\n  const handleBackdropClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (closeOnBackdropClick && event.target === event.currentTarget) {\n        onClose();\n      }\n    },\n    [closeOnBackdropClick, onClose],\n  );\n\n  // Keyed to `isVisible` rather than `isOpen` or `isMounted` - see the note\n  // on `Modal`. The panel is translated off-screen until `--open` lands two\n  // frames after mounting, and focusing something that is off-screen scrolls\n  // the page to chase it.\n  // `isClient` for the same reason as `Modal`: a drawer that starts open would\n  // otherwise run this against a ref whose portal has not rendered yet.\n  useDialogFocus(isClient && isOpen && isVisible, panelRef);\n\n  // Same reason as `Modal`: `isMounted` starts as `isOpen`, so a drawer that\n  // starts open would portal on its first render and throw under SSR.\n  if (!isClient || !isMounted) return null;\n\n  return createPortal(\n    <div\n      className={[\n        'eidos-drawer',\n        `eidos-drawer--${placement}`,\n        isVisible && 'eidos-drawer--open',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Backdrop */}\n      <div className=\"eidos-drawer-backdrop\" onClick={handleBackdropClick} aria-hidden=\"true\" />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={bodyId}\n        className={[\n          'eidos-drawer-panel',\n          `eidos-drawer-panel--${size}`,\n          `eidos-drawer-panel--${placement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {/* Header */}\n        <div className=\"eidos-drawer-header\">\n          {title && (\n            <h3 id={titleId} className=\"eidos-drawer-title\">\n              {title}\n            </h3>\n          )}\n          <button\n            type=\"button\"\n            className=\"eidos-drawer-close\"\n            onClick={onClose}\n            aria-label=\"Close drawer\"\n          >\n            <X aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        {/* Body */}\n        <div id={bodyId} className=\"eidos-drawer-body\">\n          {children}\n        </div>\n\n        {/* Footer - only rendered when actions are provided */}\n        {actions && actions.length > 0 && (\n          <div className=\"eidos-drawer-footer\">\n            {actions.map((action) => (\n              <Button\n                key={action.id}\n                variant={action.variant ?? 'outlined'}\n                color={action.color}\n                disabled={action.disabled}\n                loading={action.loading}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nDrawer.displayName = 'Drawer';\n"]}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-MKC6V3SY.cjs","../src/components/Drawer/Drawer.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACA;ACRA,8BAAuE;AACvE,qCAA6B;AAC7B,2CAAkB;AAmHZ,+CAAA;AA9GC,IAAM,OAAA,EAAgC,CAAC;AAAA,EAC5C,MAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,EAAY,OAAA;AAAA,EACZ,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA,EAAO,IAAA;AAAA,EACP,qBAAA,EAAuB,IAAA;AAAA,EACvB,cAAA,EAAgB,IAAA;AAAA,EAChB,UAAA,EAAY;AACd,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,QAAA,EAAU,0BAAA,CAAM;AACtB,EAAA,MAAM,OAAA,EAAS,0BAAA,CAAM;AACrB,EAAA,MAAM,SAAA,EAAW,2BAAA,IAA2B,CAAA;AAC5C,EAAA,MAAM,SAAA,EAAW,2CAAA,CAAY;AAU7B,EAAA,MAAM,cAAA,EAAgB,GAAA;AACtB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,EAAA,EAAI,6BAAA,MAAe,CAAA;AACjD,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,EAAA,EAAI,6BAAA,MAAe,CAAA;AAEjD,EAAA,8BAAA,CAAU,EAAA,GAAM;AACd,IAAA,IAAI,KAAA,EAAO,CAAA;AACX,IAAA,IAAI,KAAA,EAAO,CAAA;AACX,IAAA,IAAI,OAAA;AAEJ,IAAA,GAAA,CAAI,MAAA,EAAQ;AACV,MAAA,YAAA,CAAa,IAAI,CAAA;AAKjB,MAAA,KAAA,EAAO,qBAAA,CAAsB,CAAA,EAAA,GAAM;AACjC,QAAA,KAAA,EAAO,qBAAA,CAAsB,CAAA,EAAA,GAAM,YAAA,CAAa,IAAI,CAAC,CAAA;AAAA,MACvD,CAAC,CAAA;AAAA,IACH,EAAA,KAAO;AACL,MAAA,YAAA,CAAa,KAAK,CAAA;AAClB,MAAA,QAAA,EAAU,UAAA,CAAW,CAAA,EAAA,GAAM,YAAA,CAAa,KAAK,CAAA,EAAG,aAAa,CAAA;AAAA,IAC/D;AAEA,IAAA,OAAO,CAAA,EAAA,GAAM;AACX,MAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,MAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAGX,EAAA,MAAM,gBAAA,EAAkB,gCAAA;AAAA,IACtB,CAAC,KAAA,EAAA,GAAyB;AACxB,MAAA,GAAA,CAAI,cAAA,GAAiB,KAAA,CAAM,IAAA,IAAQ,SAAA,GAAY,MAAA,EAAQ;AACrD,QAAA,OAAA,CAAQ,CAAA;AAAA,MACV;AAAA,IACF,CAAA;AAAA,IACA,CAAC,aAAA,EAAe,MAAA,EAAQ,OAAO;AAAA,EACjC,CAAA;AAEA,EAAA,8BAAA,CAAU,EAAA,GAAM;AACd,IAAA,GAAA,CAAI,MAAA,EAAQ;AACV,MAAA,QAAA,CAAS,gBAAA,CAAiB,SAAA,EAAW,eAAe,CAAA;AACpD,MAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,SAAA,EAAW,QAAA;AAAA,IACjC;AACA,IAAA,OAAO,CAAA,EAAA,GAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,eAAe,CAAA;AACvD,MAAA,QAAA,CAAS,IAAA,CAAK,KAAA,CAAM,SAAA,EAAW,EAAA;AAAA,IACjC,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,eAAe,CAAC,CAAA;AAG5B,EAAA,MAAM,oBAAA,EAAsB,gCAAA;AAAA,IAC1B,CAAC,KAAA,EAAA,GAA4B;AAC3B,MAAA,GAAA,CAAI,qBAAA,GAAwB,KAAA,CAAM,OAAA,IAAW,KAAA,CAAM,aAAA,EAAe;AAChE,QAAA,OAAA,CAAQ,CAAA;AAAA,MACV;AAAA,IACF,CAAA;AAAA,IACA,CAAC,oBAAA,EAAsB,OAAO;AAAA,EAChC,CAAA;AAQA,EAAA,8CAAA,SAAe,GAAY,OAAA,GAAU,SAAA,EAAW,QAAQ,CAAA;AAIxD,EAAA,GAAA,CAAI,CAAC,SAAA,GAAY,CAAC,SAAA,EAAW,OAAO,IAAA;AAEpC,EAAA,OAAO,oCAAA;AAAA,oBACL,8BAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW;AAAA,UACT,cAAA;AAAA,UACA,CAAA,cAAA,EAAiB,SAAS,CAAA,CAAA;AACb,UAAA;AACb,UAAA;AAGS,QAAA;AAGX,QAAA;AAAC,0BAAA;AAGD,0BAAA;AAAC,YAAA;AAAA,YAAA;AACM,cAAA;AACA,cAAA;AACM,cAAA;AACM,cAAA;AACC,cAAA;AACP,cAAA;AACT,gBAAA;AACA,gBAAA;AACA,gBAAA;AAGM,cAAA;AAGR,cAAA;AAAC,gCAAA;AAEG,kBAAA;AAIF,kCAAA;AAAC,oBAAA;AAAA,oBAAA;AACM,sBAAA;AACK,sBAAA;AACD,sBAAA;AACE,sBAAA;AAEX,sBAAA;AAAsB,oBAAA;AACxB,kBAAA;AACF,gBAAA;AAGC,gCAAA;AAKmB,gBAAA;AAGb,kBAAA;AAAA,kBAAA;AAEiB,oBAAA;AACF,oBAAA;AACG,oBAAA;AACD,oBAAA;AACA,oBAAA;AAER,oBAAA;AAAA,kBAAA;AAPI,kBAAA;AAUlB,gBAAA;AAAA,cAAA;AAAA,YAAA;AAEJ,UAAA;AAAA,QAAA;AAAA,MAAA;AACF,IAAA;AACS,IAAA;AACX,EAAA;AACF;AAEqB;ADtCgB;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-MKC6V3SY.cjs","sourcesContent":[null,"import React, { useEffect, useCallback, useId, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { X } from 'lucide-react';\nimport { Button } from '../Button';\nimport type { DrawerProps } from './Drawer.types';\nimport { useDialogFocus, useIsClient } from '../../utils';\n\nexport const Drawer: React.FC<DrawerProps> = ({\n  isOpen,\n  onClose,\n  placement = 'right',\n  title,\n  children,\n  actions,\n  size = 'md',\n  closeOnBackdropClick = true,\n  closeOnEscape = true,\n  className = '',\n}) => {\n  const titleId = useId();\n  const bodyId = useId();\n  const panelRef = useRef<HTMLDivElement>(null);\n  const isClient = useIsClient();\n\n  // ── Animation state ────────────────────────────────────────────────────────\n  // isMounted: whether the portal DOM node exists at all.\n  // isVisible: whether the '--open' CSS class is applied (drives the transition).\n  //\n  // On open:  mount first → one rAF → apply --open (browser sees initial\n  //           closed position before transitioning, so the animation fires).\n  // On close: remove --open (CSS transition plays) → after 300 ms unmount.\n  //           300 ms matches the CSS `transition: 0.3s` in Drawer.scss.\n  const TRANSITION_MS = 300;\n  const [isMounted, setIsMounted] = useState(isOpen);\n  const [isVisible, setIsVisible] = useState(isOpen);\n\n  useEffect(() => {\n    let raf1 = 0;\n    let raf2 = 0;\n    let timerId: ReturnType<typeof setTimeout>;\n\n    if (isOpen) {\n      setIsMounted(true);\n      // Double rAF: React 18 automatic batching means setIsMounted(true) may\n      // not produce a committed browser paint before the first rAF fires.\n      // The second frame guarantees the panel is rendered in its off-screen\n      // (closed) position before the CSS transition begins.\n      raf1 = requestAnimationFrame(() => {\n        raf2 = requestAnimationFrame(() => setIsVisible(true));\n      });\n    } else {\n      setIsVisible(false);\n      timerId = setTimeout(() => setIsMounted(false), TRANSITION_MS);\n    }\n\n    return () => {\n      cancelAnimationFrame(raf1);\n      cancelAnimationFrame(raf2);\n      clearTimeout(timerId);\n    };\n  }, [isOpen]);\n\n  // ── Escape key + scroll lock (tied to isOpen, not isMounted) ───────────────\n  const handleEscapeKey = useCallback(\n    (event: KeyboardEvent) => {\n      if (closeOnEscape && event.key === 'Escape' && isOpen) {\n        onClose();\n      }\n    },\n    [closeOnEscape, isOpen, onClose],\n  );\n\n  useEffect(() => {\n    if (isOpen) {\n      document.addEventListener('keydown', handleEscapeKey);\n      document.body.style.overflow = 'hidden';\n    }\n    return () => {\n      document.removeEventListener('keydown', handleEscapeKey);\n      document.body.style.overflow = '';\n    };\n  }, [isOpen, handleEscapeKey]);\n\n  // ── Backdrop click ─────────────────────────────────────────────────────────\n  const handleBackdropClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (closeOnBackdropClick && event.target === event.currentTarget) {\n        onClose();\n      }\n    },\n    [closeOnBackdropClick, onClose],\n  );\n\n  // Keyed to `isVisible` rather than `isOpen` or `isMounted` - see the note\n  // on `Modal`. The panel is translated off-screen until `--open` lands two\n  // frames after mounting, and focusing something that is off-screen scrolls\n  // the page to chase it.\n  // `isClient` for the same reason as `Modal`: a drawer that starts open would\n  // otherwise run this against a ref whose portal has not rendered yet.\n  useDialogFocus(isClient && isOpen && isVisible, panelRef);\n\n  // Same reason as `Modal`: `isMounted` starts as `isOpen`, so a drawer that\n  // starts open would portal on its first render and throw under SSR.\n  if (!isClient || !isMounted) return null;\n\n  return createPortal(\n    <div\n      className={[\n        'eidos-drawer',\n        `eidos-drawer--${placement}`,\n        isVisible && 'eidos-drawer--open',\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {/* Backdrop */}\n      <div className=\"eidos-drawer-backdrop\" onClick={handleBackdropClick} aria-hidden=\"true\" />\n\n      {/* Panel */}\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={bodyId}\n        className={[\n          'eidos-drawer-panel',\n          `eidos-drawer-panel--${size}`,\n          `eidos-drawer-panel--${placement}`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        {/* Header */}\n        <div className=\"eidos-drawer-header\">\n          {title && (\n            <h3 id={titleId} className=\"eidos-drawer-title\">\n              {title}\n            </h3>\n          )}\n          <button\n            type=\"button\"\n            className=\"eidos-drawer-close\"\n            onClick={onClose}\n            aria-label=\"Close drawer\"\n          >\n            <X aria-hidden=\"true\" />\n          </button>\n        </div>\n\n        {/* Body */}\n        <div id={bodyId} className=\"eidos-drawer-body\">\n          {children}\n        </div>\n\n        {/* Footer - only rendered when actions are provided */}\n        {actions && actions.length > 0 && (\n          <div className=\"eidos-drawer-footer\">\n            {actions.map((action) => (\n              <Button\n                key={action.id}\n                variant={action.variant ?? 'outlined'}\n                color={action.color}\n                disabled={action.disabled}\n                loading={action.loading}\n                onClick={action.onClick}\n              >\n                {action.label}\n              </Button>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n};\n\nDrawer.displayName = 'Drawer';\n"]}

package/dist/{chunk-J76JHN7J.cjs → chunk-N5NXKVFJ.cjs}

@@ -1,16 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkKIZVY57Hcjs = require('./chunk-KIZVY57H.cjs');
+var _chunkVXC7Z7XBcjs = require('./chunk-VXC7Z7XB.cjs');
 
 
 var _chunkKVIL4EP4cjs = require('./chunk-KVIL4EP4.cjs');
 
 
-var _chunkBEOECPVJcjs = require('./chunk-BEOECPVJ.cjs');
+var _chunkUTYY35QXcjs = require('./chunk-UTYY35QX.cjs');
 
 
 
-var _chunk35LGEPLPcjs = require('./chunk-35LGEPLP.cjs');
+var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
 
 // src/components/Menu/Menu.component.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -28,7 +28,7 @@ var MenuPanel = ({
     if (element) itemRefs.current.set(id, element);
     else itemRefs.current.delete(id);
   }, []);
-  _chunk35LGEPLPcjs.useDialogFocus.call(void 0, true, listRef, { trapTab: false });
+  _chunkENMDOQQOcjs.useDialogFocus.call(void 0, true, listRef, { trapTab: false });
   const handleItemClick = _react.useCallback.call(void 0, 
     (item) => {
       if (item.disabled) return;
@@ -111,7 +111,7 @@ var MenuPanel = ({
               }
             },
             children: [
-              item.icon && _chunk35LGEPLPcjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
+              item.icon && _chunkENMDOQQOcjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-menu-label`, children: item.label }),
               item.shortcut && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkKVIL4EP4cjs.Kbd, { size: "sm", className: "eidos-menu-shortcut", children: item.shortcut })
             ]
@@ -144,14 +144,14 @@ var MenuPanel = ({
               }
             },
             children: [
-              item.icon && _chunk35LGEPLPcjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
+              item.icon && _chunkENMDOQQOcjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-menu-label`, children: item.label }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: `eidos-menu-nested-arrow` })
             ]
           }
         );
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { role: "none", className: `eidos-menu-nested-item`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKIZVY57Hcjs.Dropdown,
+          _chunkVXC7Z7XBcjs.Dropdown,
           {
             open: openSubmenuId === item.id,
             onOpenChange: (next) => setOpenSubmenuId(next ? item.id : null),
@@ -201,7 +201,7 @@ var Menu = ({
     { "aria-haspopup": "menu", "aria-expanded": isOpen }
   ) : trigger;
   const dropdown = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkKIZVY57Hcjs.Dropdown,
+    _chunkVXC7Z7XBcjs.Dropdown,
     {
       open: isOpen,
       onOpenChange: setIsOpen,
@@ -215,11 +215,11 @@ var Menu = ({
       triggerRef
     }
   );
-  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBEOECPVJcjs.Tooltip, { message: tooltip, children: dropdown }) : dropdown;
+  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUTYY35QXcjs.Tooltip, { message: tooltip, children: dropdown }) : dropdown;
 };
 
 
 
 
 exports.MenuPanel = MenuPanel; exports.Menu = Menu;
-//# sourceMappingURL=chunk-J76JHN7J.cjs.map
+//# sourceMappingURL=chunk-N5NXKVFJ.cjs.map

package/dist/{chunk-J76JHN7J.cjs.map → chunk-N5NXKVFJ.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-J76JHN7J.cjs","../src/components/Menu/Menu.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-J76JHN7J.cjs","sourcesContent":[null,"import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport type { MenuProps, MenuItemType, MenuItem, MenuWrapperProps } from './Menu.types';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport { Tooltip } from '../Tooltip/Tooltip.component';\nimport { Kbd } from '../Kbd/Kbd.component';\nimport { renderIcon, useDialogFocus } from '../../utils';\n\n/**\n * MenuPanel - the bare menu list, without any trigger or dropdown wrapper.\n * Exported for use in SplitButton, ContextMenu, and other consumers that need\n * to render the menu content inside their own Dropdown / portal.\n *\n * ## This element owns the menu semantics, not the overlay around it\n *\n * `role=\"menu\"` belongs on the element that directly contains the items, which\n * is this `<ul>`. It used to sit on `Dropdown`'s content `<div>` instead, one\n * level further out, so the menu's only child was a list and the items were\n * `listitem`s - `aria-required-children`, and a structure no screen reader\n * could present as a menu.\n *\n * ## The keyboard model is not optional\n *\n * The items were plain `<li onClick>`: no role, no `tabIndex`, no key handler.\n * Every menu in the library - `Menu`, `ContextMenu`, `SplitButton`, `Table` and\n * `DataGrid` row actions - was therefore **operable by mouse only**, which is\n * WCAG 2.1.1 (Level A). Axe reported none of it, because every menu story\n * renders closed and axe only sees what is on screen.\n *\n * A `menuitem` role is a promise that arrow keys work, so the two land\n * together: roving `tabIndex` (one tab stop for the whole menu), Up/Down to\n * move, Home/End to jump, Enter/Space to activate, ArrowRight to open a\n * submenu. Focus enters on open and returns to the trigger on close.\n */\nexport const MenuPanel: React.FC<MenuProps> = ({\n  items,\n  className = '',\n  onItemClick,\n  onRequestClose,\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLElement>());\n\n  const registerItem = useCallback((id: string, element: HTMLElement | null) => {\n    if (element) itemRefs.current.set(id, element);\n    else itemRefs.current.delete(id);\n  }, []);\n\n  // Moves focus into the menu when it opens and back to the trigger when it\n  // closes. `trapTab: false` - a menu is not a dialog, and confining Tab to it\n  // would strand the user; the hook's frame-retry loop is what matters here,\n  // because `Dropdown`'s content is `visibility: hidden` until it has been\n  // positioned and `.focus()` on a hidden element is a silent no-op.\n  //\n  // `active` is unconditionally true: this panel is only ever mounted by an\n  // open overlay (`Dropdown` and `ContextMenu` both render content\n  // conditionally), so mounting *is* opening.\n  useDialogFocus(true, listRef, { trapTab: false });\n\n  // Handle menu item click\n  const handleItemClick = useCallback(\n    (item: MenuItem) => {\n      if (item.disabled) return;\n\n      // Execute the item's onClick handler first\n      if (item.onClick) {\n        item.onClick();\n      }\n\n      // Then call the onItemClick callback (which will close the dropdown)\n      if (onItemClick) {\n        onItemClick(item);\n      }\n    },\n    [onItemClick],\n  );\n\n  // The items arrow keys move between, in visual order. Separators are not\n  // stops, `component` items own their own focusable content, and a disabled\n  // item is skipped rather than being a dead stop.\n  const navigableIds = useMemo(\n    () =>\n      items\n        .filter((item) => (item.type === 'item' || item.type === 'nested') && !item.disabled)\n        .map((item) => item.id),\n    [items],\n  );\n\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  // Which submenu is open, owned here rather than inside each nested overlay:\n  // the trigger has to advertise `aria-expanded`, and `ArrowLeft` in the child\n  // has to be able to close it. Both were impossible while the overlay kept\n  // that state to itself.\n  const [openSubmenuId, setOpenSubmenuId] = useState<string | null>(null);\n  // Validated rather than trusted: `items` can change while the menu is open\n  // (a filtered list, an action that disables its neighbour), which would\n  // otherwise leave the roving tabIndex on an id that no longer renders - and\n  // therefore no tab stop in the menu at all.\n  const activeId =\n    focusedId && navigableIds.includes(focusedId) ? focusedId : (navigableIds[0] ?? null);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      // A `component` item may hold a real control - a text field, a switch -\n      // whose own arrow keys must not be hijacked for menu navigation. Only\n      // keys pressed on a menuitem drive the menu.\n      if (!(event.target as HTMLElement).closest('[role=\"menuitem\"]')) return;\n      if (navigableIds.length === 0) return;\n\n      const focusAt = (index: number) => {\n        const id = navigableIds[(index + navigableIds.length) % navigableIds.length];\n        setFocusedId(id);\n        itemRefs.current.get(id)?.focus();\n      };\n      const current = Math.max(0, navigableIds.indexOf(activeId ?? ''));\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          focusAt(current + 1);\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          focusAt(current - 1);\n          break;\n        case 'Home':\n          event.preventDefault();\n          focusAt(0);\n          break;\n        case 'End':\n          event.preventDefault();\n          focusAt(navigableIds.length - 1);\n          break;\n        case 'ArrowLeft':\n          // Only meaningful in a submenu. `stopPropagation` keeps the parent\n          // panel - which is a React ancestor, portal notwithstanding - from\n          // treating the same keypress as its own.\n          if (onRequestClose) {\n            event.preventDefault();\n            event.stopPropagation();\n            onRequestClose();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [navigableIds, activeId, onRequestClose],\n  );\n\n  // Render individual menu item\n  const renderMenuItem = (item: MenuItemType): React.ReactNode => {\n    switch (item.type) {\n      case 'item':\n        return (\n          <li\n            key={item.id}\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            // Roving tabIndex: the menu is one tab stop and arrows move within\n            // it. Making every item a tab stop would bury whatever follows a\n            // ten-item menu ten presses deep.\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            // `aria-disabled`, not the `disabled` attribute, which an `li` does\n            // not have. The click handler already returns early.\n            aria-disabled={item.disabled || undefined}\n            className={[\n              'eidos-menu-item',\n              item.disabled ? 'eidos-menu-item--disabled' : '',\n              item.color ? `eidos-menu-item--${item.color}` : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => handleItemClick(item)}\n            onKeyDown={(event) => {\n              // An `li` is not a button, so Enter and Space produce no click of\n              // their own - activation has to be wired by hand. Space is\n              // prevented to stop the page scrolling underneath.\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleItemClick(item);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            {item.shortcut && (\n              <Kbd size=\"sm\" className=\"eidos-menu-shortcut\">\n                {item.shortcut}\n              </Kbd>\n            )}\n          </li>\n        );\n\n      case 'component':\n        // `role=\"none\"` because the `li` is a wrapper: whatever the consumer\n        // renders owns its own semantics, and calling it a `menuitem` would nest\n        // that control inside an interactive role.\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-component-item`}>\n            {item.component}\n          </li>\n        );\n\n      case 'separator':\n        return <li key={item.id} role=\"separator\" className={`eidos-menu-separator`} />;\n\n      case 'nested': {\n        const triggerElement = (\n          <div\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            aria-haspopup=\"menu\"\n            aria-expanded={openSubmenuId === item.id}\n            aria-disabled={item.disabled || undefined}\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            className={[\n              'eidos-menu-nested-trigger',\n              item.disabled ? 'eidos-menu-nested-trigger--disabled' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={(event) => {\n              if (item.disabled) return;\n              // ArrowRight is the menu idiom for \"open this submenu\"; Enter and\n              // Space do the same. This used to synthesise a click on itself so\n              // the event would reach the overlay's trigger wrapper; the state\n              // is now right here.\n              if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                setOpenSubmenuId(item.id);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            <ChevronRight className={`eidos-menu-nested-arrow`} />\n          </div>\n        );\n\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-nested-item`}>\n            <Dropdown\n              open={openSubmenuId === item.id}\n              onOpenChange={(next) => setOpenSubmenuId(next ? item.id : null)}\n              trigger={triggerElement}\n              content={\n                <MenuPanel\n                  items={item.items}\n                  onItemClick={onItemClick}\n                  // Lets `ArrowLeft` in the child close this level. Focus\n                  // returns to the trigger on its own - `useDialogFocus`\n                  // restores it when the panel unmounts.\n                  onRequestClose={() => setOpenSubmenuId(null)}\n                />\n              }\n              placement=\"right\"\n              isNested={true}\n              fullWidth\n              // `disabled` was accepted on a nested item and then ignored, so a\n              // disabled submenu opened like any other.\n              disabled={item.disabled}\n            />\n          </li>\n        );\n      }\n\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <ul ref={listRef} role=\"menu\" className={`eidos-menu ${className}`} onKeyDown={handleKeyDown}>\n      {items.map(renderMenuItem)}\n    </ul>\n  );\n};\n\nexport const Menu: React.FC<MenuWrapperProps> = ({\n  trigger,\n  items,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  autoWidth = true,\n  triggerRef,\n  closeOnItemClick = true,\n  tooltip,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleItemClick = useCallback(\n    (_item: MenuItem) => {\n      // `item.onClick` has already run, in `MenuPanel`. All that is left is\n      // closing.\n      //\n      // This used to dispatch a synthetic `mousedown` at `document` on a 10ms\n      // timer - a counterfeit \"click outside\" - because the overlay owned its\n      // open state privately and that was the only lever available. It worked by\n      // being indistinguishable from the click a mouse user had just made, and\n      // it broke the moment nobody had clicked: activating an item with the\n      // keyboard closed every other dropdown on the page that dismisses on\n      // outside clicks.\n      if (closeOnItemClick) setIsOpen(false);\n    },\n    [closeOnItemClick],\n  );\n\n  // The trigger opens a menu, and nothing said so: `Dropdown` adds no ARIA to\n  // its trigger (deliberately - it does not know what its content is), so a\n  // screen reader announced a plain button. `Menu` does know, and now that it\n  // owns the open state it can describe that too (SC 4.1.2), which was the\n  // missing half while the state was private.\n  const describedTrigger = React.isValidElement(trigger)\n    ? React.cloneElement(\n        trigger as React.ReactElement<{ 'aria-haspopup'?: string; 'aria-expanded'?: boolean }>,\n        { 'aria-haspopup': 'menu', 'aria-expanded': isOpen },\n      )\n    : trigger;\n\n  const dropdown = (\n    <Dropdown\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      trigger={describedTrigger}\n      content={<MenuPanel items={items} onItemClick={handleItemClick} />}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      autoWidth={autoWidth}\n      triggerRef={triggerRef}\n    />\n  );\n\n  return tooltip ? <Tooltip message={tooltip}>{dropdown}</Tooltip> : dropdown;\n};\n"]}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-N5NXKVFJ.cjs","../src/components/Menu/Menu.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-N5NXKVFJ.cjs","sourcesContent":[null,"import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { ChevronRight } from 'lucide-react';\nimport type { MenuProps, MenuItemType, MenuItem, MenuWrapperProps } from './Menu.types';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport { Tooltip } from '../Tooltip/Tooltip.component';\nimport { Kbd } from '../Kbd/Kbd.component';\nimport { renderIcon, useDialogFocus } from '../../utils';\n\n/**\n * MenuPanel - the bare menu list, without any trigger or dropdown wrapper.\n * Exported for use in SplitButton, ContextMenu, and other consumers that need\n * to render the menu content inside their own Dropdown / portal.\n *\n * ## This element owns the menu semantics, not the overlay around it\n *\n * `role=\"menu\"` belongs on the element that directly contains the items, which\n * is this `<ul>`. It used to sit on `Dropdown`'s content `<div>` instead, one\n * level further out, so the menu's only child was a list and the items were\n * `listitem`s - `aria-required-children`, and a structure no screen reader\n * could present as a menu.\n *\n * ## The keyboard model is not optional\n *\n * The items were plain `<li onClick>`: no role, no `tabIndex`, no key handler.\n * Every menu in the library - `Menu`, `ContextMenu`, `SplitButton`, `Table` and\n * `DataGrid` row actions - was therefore **operable by mouse only**, which is\n * WCAG 2.1.1 (Level A). Axe reported none of it, because every menu story\n * renders closed and axe only sees what is on screen.\n *\n * A `menuitem` role is a promise that arrow keys work, so the two land\n * together: roving `tabIndex` (one tab stop for the whole menu), Up/Down to\n * move, Home/End to jump, Enter/Space to activate, ArrowRight to open a\n * submenu. Focus enters on open and returns to the trigger on close.\n */\nexport const MenuPanel: React.FC<MenuProps> = ({\n  items,\n  className = '',\n  onItemClick,\n  onRequestClose,\n}) => {\n  const listRef = useRef<HTMLUListElement>(null);\n  const itemRefs = useRef(new Map<string, HTMLElement>());\n\n  const registerItem = useCallback((id: string, element: HTMLElement | null) => {\n    if (element) itemRefs.current.set(id, element);\n    else itemRefs.current.delete(id);\n  }, []);\n\n  // Moves focus into the menu when it opens and back to the trigger when it\n  // closes. `trapTab: false` - a menu is not a dialog, and confining Tab to it\n  // would strand the user; the hook's frame-retry loop is what matters here,\n  // because `Dropdown`'s content is `visibility: hidden` until it has been\n  // positioned and `.focus()` on a hidden element is a silent no-op.\n  //\n  // `active` is unconditionally true: this panel is only ever mounted by an\n  // open overlay (`Dropdown` and `ContextMenu` both render content\n  // conditionally), so mounting *is* opening.\n  useDialogFocus(true, listRef, { trapTab: false });\n\n  // Handle menu item click\n  const handleItemClick = useCallback(\n    (item: MenuItem) => {\n      if (item.disabled) return;\n\n      // Execute the item's onClick handler first\n      if (item.onClick) {\n        item.onClick();\n      }\n\n      // Then call the onItemClick callback (which will close the dropdown)\n      if (onItemClick) {\n        onItemClick(item);\n      }\n    },\n    [onItemClick],\n  );\n\n  // The items arrow keys move between, in visual order. Separators are not\n  // stops, `component` items own their own focusable content, and a disabled\n  // item is skipped rather than being a dead stop.\n  const navigableIds = useMemo(\n    () =>\n      items\n        .filter((item) => (item.type === 'item' || item.type === 'nested') && !item.disabled)\n        .map((item) => item.id),\n    [items],\n  );\n\n  const [focusedId, setFocusedId] = useState<string | null>(null);\n  // Which submenu is open, owned here rather than inside each nested overlay:\n  // the trigger has to advertise `aria-expanded`, and `ArrowLeft` in the child\n  // has to be able to close it. Both were impossible while the overlay kept\n  // that state to itself.\n  const [openSubmenuId, setOpenSubmenuId] = useState<string | null>(null);\n  // Validated rather than trusted: `items` can change while the menu is open\n  // (a filtered list, an action that disables its neighbour), which would\n  // otherwise leave the roving tabIndex on an id that no longer renders - and\n  // therefore no tab stop in the menu at all.\n  const activeId =\n    focusedId && navigableIds.includes(focusedId) ? focusedId : (navigableIds[0] ?? null);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      // A `component` item may hold a real control - a text field, a switch -\n      // whose own arrow keys must not be hijacked for menu navigation. Only\n      // keys pressed on a menuitem drive the menu.\n      if (!(event.target as HTMLElement).closest('[role=\"menuitem\"]')) return;\n      if (navigableIds.length === 0) return;\n\n      const focusAt = (index: number) => {\n        const id = navigableIds[(index + navigableIds.length) % navigableIds.length];\n        setFocusedId(id);\n        itemRefs.current.get(id)?.focus();\n      };\n      const current = Math.max(0, navigableIds.indexOf(activeId ?? ''));\n\n      switch (event.key) {\n        case 'ArrowDown':\n          event.preventDefault();\n          focusAt(current + 1);\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          focusAt(current - 1);\n          break;\n        case 'Home':\n          event.preventDefault();\n          focusAt(0);\n          break;\n        case 'End':\n          event.preventDefault();\n          focusAt(navigableIds.length - 1);\n          break;\n        case 'ArrowLeft':\n          // Only meaningful in a submenu. `stopPropagation` keeps the parent\n          // panel - which is a React ancestor, portal notwithstanding - from\n          // treating the same keypress as its own.\n          if (onRequestClose) {\n            event.preventDefault();\n            event.stopPropagation();\n            onRequestClose();\n          }\n          break;\n        default:\n          break;\n      }\n    },\n    [navigableIds, activeId, onRequestClose],\n  );\n\n  // Render individual menu item\n  const renderMenuItem = (item: MenuItemType): React.ReactNode => {\n    switch (item.type) {\n      case 'item':\n        return (\n          <li\n            key={item.id}\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            // Roving tabIndex: the menu is one tab stop and arrows move within\n            // it. Making every item a tab stop would bury whatever follows a\n            // ten-item menu ten presses deep.\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            // `aria-disabled`, not the `disabled` attribute, which an `li` does\n            // not have. The click handler already returns early.\n            aria-disabled={item.disabled || undefined}\n            className={[\n              'eidos-menu-item',\n              item.disabled ? 'eidos-menu-item--disabled' : '',\n              item.color ? `eidos-menu-item--${item.color}` : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={() => handleItemClick(item)}\n            onKeyDown={(event) => {\n              // An `li` is not a button, so Enter and Space produce no click of\n              // their own - activation has to be wired by hand. Space is\n              // prevented to stop the page scrolling underneath.\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                handleItemClick(item);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            {item.shortcut && (\n              <Kbd size=\"sm\" className=\"eidos-menu-shortcut\">\n                {item.shortcut}\n              </Kbd>\n            )}\n          </li>\n        );\n\n      case 'component':\n        // `role=\"none\"` because the `li` is a wrapper: whatever the consumer\n        // renders owns its own semantics, and calling it a `menuitem` would nest\n        // that control inside an interactive role.\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-component-item`}>\n            {item.component}\n          </li>\n        );\n\n      case 'separator':\n        return <li key={item.id} role=\"separator\" className={`eidos-menu-separator`} />;\n\n      case 'nested': {\n        const triggerElement = (\n          <div\n            ref={(element) => registerItem(item.id, element)}\n            role=\"menuitem\"\n            aria-haspopup=\"menu\"\n            aria-expanded={openSubmenuId === item.id}\n            aria-disabled={item.disabled || undefined}\n            tabIndex={!item.disabled && item.id === activeId ? 0 : -1}\n            className={[\n              'eidos-menu-nested-trigger',\n              item.disabled ? 'eidos-menu-nested-trigger--disabled' : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onKeyDown={(event) => {\n              if (item.disabled) return;\n              // ArrowRight is the menu idiom for \"open this submenu\"; Enter and\n              // Space do the same. This used to synthesise a click on itself so\n              // the event would reach the overlay's trigger wrapper; the state\n              // is now right here.\n              if (event.key === 'ArrowRight' || event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                setOpenSubmenuId(item.id);\n              }\n            }}\n          >\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\n            <span className={`eidos-menu-label`}>{item.label}</span>\n            <ChevronRight className={`eidos-menu-nested-arrow`} />\n          </div>\n        );\n\n        return (\n          <li key={item.id} role=\"none\" className={`eidos-menu-nested-item`}>\n            <Dropdown\n              open={openSubmenuId === item.id}\n              onOpenChange={(next) => setOpenSubmenuId(next ? item.id : null)}\n              trigger={triggerElement}\n              content={\n                <MenuPanel\n                  items={item.items}\n                  onItemClick={onItemClick}\n                  // Lets `ArrowLeft` in the child close this level. Focus\n                  // returns to the trigger on its own - `useDialogFocus`\n                  // restores it when the panel unmounts.\n                  onRequestClose={() => setOpenSubmenuId(null)}\n                />\n              }\n              placement=\"right\"\n              isNested={true}\n              fullWidth\n              // `disabled` was accepted on a nested item and then ignored, so a\n              // disabled submenu opened like any other.\n              disabled={item.disabled}\n            />\n          </li>\n        );\n      }\n\n      default:\n        return null;\n    }\n  };\n\n  return (\n    <ul ref={listRef} role=\"menu\" className={`eidos-menu ${className}`} onKeyDown={handleKeyDown}>\n      {items.map(renderMenuItem)}\n    </ul>\n  );\n};\n\nexport const Menu: React.FC<MenuWrapperProps> = ({\n  trigger,\n  items,\n  minWidth,\n  maxWidth,\n  minHeight,\n  maxHeight,\n  autoWidth = true,\n  triggerRef,\n  closeOnItemClick = true,\n  tooltip,\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleItemClick = useCallback(\n    (_item: MenuItem) => {\n      // `item.onClick` has already run, in `MenuPanel`. All that is left is\n      // closing.\n      //\n      // This used to dispatch a synthetic `mousedown` at `document` on a 10ms\n      // timer - a counterfeit \"click outside\" - because the overlay owned its\n      // open state privately and that was the only lever available. It worked by\n      // being indistinguishable from the click a mouse user had just made, and\n      // it broke the moment nobody had clicked: activating an item with the\n      // keyboard closed every other dropdown on the page that dismisses on\n      // outside clicks.\n      if (closeOnItemClick) setIsOpen(false);\n    },\n    [closeOnItemClick],\n  );\n\n  // The trigger opens a menu, and nothing said so: `Dropdown` adds no ARIA to\n  // its trigger (deliberately - it does not know what its content is), so a\n  // screen reader announced a plain button. `Menu` does know, and now that it\n  // owns the open state it can describe that too (SC 4.1.2), which was the\n  // missing half while the state was private.\n  const describedTrigger = React.isValidElement(trigger)\n    ? React.cloneElement(\n        trigger as React.ReactElement<{ 'aria-haspopup'?: string; 'aria-expanded'?: boolean }>,\n        { 'aria-haspopup': 'menu', 'aria-expanded': isOpen },\n      )\n    : trigger;\n\n  const dropdown = (\n    <Dropdown\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      trigger={describedTrigger}\n      content={<MenuPanel items={items} onItemClick={handleItemClick} />}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      autoWidth={autoWidth}\n      triggerRef={triggerRef}\n    />\n  );\n\n  return tooltip ? <Tooltip message={tooltip}>{dropdown}</Tooltip> : dropdown;\n};\n"]}

package/dist/{chunk-XERBOFYZ.cjs → chunk-NERASTO2.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkDA375AI6cjs = require('./chunk-DA375AI6.cjs');
+var _chunkXPG56DLQcjs = require('./chunk-XPG56DLQ.cjs');
 
 // src/components/Snackbar/Snackbar.context.tsx
 var _react = require('react');
@@ -163,7 +163,7 @@ var SnackbarComponent = ({ snackbar, onClose }) => {
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-snackbar-content", children: renderContent() }),
         action && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-snackbar-actions", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkDA375AI6cjs.Button,
+          _chunkXPG56DLQcjs.Button,
           {
             variant: action.variant === "primary" ? "filled" : "text",
             size: "sm",
@@ -293,4 +293,4 @@ var useSnackbar = () => {
 
 
 exports.useSnackbarContext = useSnackbarContext; exports.SnackbarProvider = SnackbarProvider; exports.SnackbarContainer = SnackbarContainer; exports.useSnackbar = useSnackbar;
-//# sourceMappingURL=chunk-XERBOFYZ.cjs.map
+//# sourceMappingURL=chunk-NERASTO2.cjs.map