@oneplatformdev/ui 0.1.99-beta.302 → 0.1.99-beta.305

package/ColorInput/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sources":["../../src/ColorInput/ColorPicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport {\r\n  clamp,\r\n  COLOR_FORMAT_LABELS,\r\n  COLOR_FORMATS,\r\n  ColorFormat,\r\n  formatColor,\r\n  FORMAT_HAS_ALPHA,\r\n  HSVA,\r\n  hsvaToRgba,\r\n  parseColor,\r\n  parseColorInFormat,\r\n  rgbaToHsva,\r\n} from './color.utils';\r\n\r\n/** Compact, styled dropdown for the color format (Hex / RGB / RGBA / …). */\r\nconst FormatSelect = ({\r\n  value,\r\n  options,\r\n  onChange,\r\n}: {\r\n  value: ColorFormat;\r\n  options: ColorFormat[];\r\n  onChange: (next: ColorFormat) => void;\r\n}) => {\r\n  const [open, setOpen] = useState(false);\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    const onDown = (e: MouseEvent) => {\r\n      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);\r\n    };\r\n    window.addEventListener('mousedown', onDown);\r\n    return () => window.removeEventListener('mousedown', onDown);\r\n  }, [open]);\r\n\r\n  return (\r\n    <div ref={ref} className=\"relative w-[74px] shrink-0\">\r\n      <button\r\n        type=\"button\"\r\n        onClick={() => setOpen((o) => !o)}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={open}\r\n        className={cn(\r\n          'flex h-7 w-full cursor-pointer items-center justify-between rounded border bg-white pl-2 pr-1.5 text-sm text-[#374151] shadow-[0px_1px_2px_rgba(31,41,55,0.08)] transition-colors',\r\n          open ? 'border-[#9368FF]' : 'border-[#E5E7EB] hover:border-[#D1D5DB]',\r\n        )}\r\n      >\r\n        <span>{COLOR_FORMAT_LABELS[value]}</span>\r\n        <svg className=\"size-3 text-[#9CA3AF]\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n          <path d=\"M3.5 5 6 2.5 8.5 5\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n          <path d=\"M3.5 7 6 9.5 8.5 7\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n        </svg>\r\n      </button>\r\n\r\n      {open && (\r\n        <ul\r\n          role=\"listbox\"\r\n          className=\"absolute left-0 top-[calc(100%+4px)] z-20 w-full overflow-hidden rounded border border-[#E5E7EB] bg-white py-1 shadow-[0px_10px_15px_rgba(31,41,55,0.1),0px_4px_6px_rgba(31,41,55,0.05)]\"\r\n        >\r\n          {options.map((f) => (\r\n            <li key={f}>\r\n              <button\r\n                type=\"button\"\r\n                role=\"option\"\r\n                aria-selected={f === value}\r\n                onClick={() => {\r\n                  onChange(f);\r\n                  setOpen(false);\r\n                }}\r\n                className={cn(\r\n                  'flex w-full cursor-pointer items-center px-2 py-1 text-left text-sm hover:bg-[#F3F4F6]',\r\n                  f === value ? 'font-medium text-[#9368FF]' : 'text-[#374151]',\r\n                )}\r\n              >\r\n                {COLOR_FORMAT_LABELS[f]}\r\n              </button>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport interface ColorPickerProps {\r\n  value: string;\r\n  onChange: (hex: string) => void;\r\n  withAlpha?: boolean;\r\n  /** Saved-colors palette. Empty by default. */\r\n  savedColors?: string[];\r\n  /** Renders the \"+ Add\" action; called with the current color. */\r\n  onAddSavedColor?: (hex: string) => void;\r\n  /** When provided, each saved swatch gets a hover \"×\" to remove it. */\r\n  onRemoveSavedColor?: (hex: string) => void;\r\n  /** Label before the palette (i18n). Default \"Saved colors:\". */\r\n  savedColorsLabel?: string;\r\n  /** Label of the add action (i18n). Default \"+ Add\". */\r\n  addLabel?: string;\r\n  /** Accessible label for a swatch's remove button (i18n). Default \"Remove color\". */\r\n  removeColorLabel?: string;\r\n  /**\r\n   * Color formats offered in the format dropdown. Defaults to all of them\r\n   * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Pass a subset to restrict input,\r\n   * e.g. `formats={['hex']}` to only allow hex. With a single format the\r\n   * dropdown is hidden.\r\n   */\r\n  formats?: ColorFormat[];\r\n  className?: string;\r\n}\r\n\r\n/** Returns a 0..1 ratio of pointer position inside an element along an axis. */\r\nconst ratioFromPointer = (\r\n  el: HTMLElement,\r\n  clientX: number,\r\n  clientY: number,\r\n  axis: 'x' | 'y' | 'both',\r\n): { x: number; y: number } => {\r\n  const rect = el.getBoundingClientRect();\r\n  const x = clamp((clientX - rect.left) / rect.width, 0, 1);\r\n  const y = clamp((clientY - rect.top) / rect.height, 0, 1);\r\n  return {\r\n    x: axis === 'y' ? 0 : x,\r\n    y: axis === 'x' ? 0 : y,\r\n  };\r\n};\r\n\r\nconst useDrag = (\r\n  onMove: (clientX: number, clientY: number, el: HTMLElement) => void,\r\n) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n\r\n  const start = useCallback(\r\n    (e: React.PointerEvent) => {\r\n      const el = ref.current;\r\n      if (!el) return;\r\n      e.preventDefault();\r\n      onMove(e.clientX, e.clientY, el);\r\n\r\n      const handleMove = (ev: PointerEvent) =>\r\n        onMove(ev.clientX, ev.clientY, el);\r\n      const handleUp = () => {\r\n        window.removeEventListener('pointermove', handleMove);\r\n        window.removeEventListener('pointerup', handleUp);\r\n      };\r\n      window.addEventListener('pointermove', handleMove);\r\n      window.addEventListener('pointerup', handleUp);\r\n    },\r\n    [onMove],\r\n  );\r\n\r\n  return { ref, start };\r\n};\r\n\r\nexport const ColorPicker = ({\r\n  value,\r\n  onChange,\r\n  withAlpha = false,\r\n  savedColors = [],\r\n  onAddSavedColor,\r\n  onRemoveSavedColor,\r\n  savedColorsLabel = 'Saved colors:',\r\n  addLabel = '+ Add',\r\n  removeColorLabel = 'Remove color',\r\n  formats = COLOR_FORMATS,\r\n  className,\r\n}: ColorPickerProps) => {\r\n  const availableFormats = formats.length ? formats : COLOR_FORMATS;\r\n  const [format, setFormat] = useState<ColorFormat>(availableFormats[0]);\r\n\r\n  // Keep the active format within the allowed set if `formats` changes.\r\n  useEffect(() => {\r\n    if (!availableFormats.includes(format)) setFormat(availableFormats[0]);\r\n  }, [availableFormats, format]);\r\n\r\n  const [hsva, setHsva] = useState<HSVA>(() => {\r\n    const rgba = parseColor(value);\r\n    return rgba ? rgbaToHsva(rgba) : { h: 0, s: 0, v: 0, a: 1 };\r\n  });\r\n\r\n  // Local text buffer so partially-typed values (e.g. \"255, 20\") don't get\r\n  // snapped back by the controlled value while the user is mid-edit.\r\n  const [fieldText, setFieldText] = useState<string | null>(null);\r\n\r\n  // Alpha only makes sense for formats that can encode it: hex (#RRGGBBAA) and\r\n  // rgba. rgb/hsl/hsb have no alpha channel, so the transparency slider is\r\n  // hidden there. `withAlpha` can still force it on explicitly.\r\n  const formatSupportsAlpha = format === 'hex' || format === 'rgba';\r\n  const alphaEnabled = withAlpha || formatSupportsAlpha;\r\n\r\n  // Sync from external value, but keep internal hue when only it differs\r\n  // (prevents the hue jumping when saturation/value reach extremes).\r\n  useEffect(() => {\r\n    const rgba = parseColor(value);\r\n    if (!rgba) return;\r\n    const next = rgbaToHsva(rgba);\r\n    setHsva((prev) =>\r\n      formatColor(hsvaToRgba(prev), 'hex', alphaEnabled).toLowerCase() ===\r\n      value.trim().toLowerCase()\r\n        ? prev\r\n        : next,\r\n    );\r\n  }, [value, alphaEnabled]);\r\n\r\n  const emit = useCallback(\r\n    (next: HSVA) => {\r\n      setHsva(next);\r\n      onChange(formatColor(hsvaToRgba(next), 'hex', alphaEnabled));\r\n    },\r\n    [onChange, alphaEnabled],\r\n  );\r\n\r\n  const saturation = useDrag((x, y, el) => {\r\n    const { x: rx, y: ry } = ratioFromPointer(el, x, y, 'both');\r\n    emit({ ...hsva, s: rx, v: 1 - ry });\r\n  });\r\n  const hue = useDrag((x, _y, el) => {\r\n    const { x: rx } = ratioFromPointer(el, x, 0, 'x');\r\n    emit({ ...hsva, h: rx * 360 });\r\n  });\r\n  const alpha = useDrag((x, _y, el) => {\r\n    const { x: rx } = ratioFromPointer(el, x, 0, 'x');\r\n    emit({ ...hsva, a: rx });\r\n  });\r\n\r\n  const hueColor = formatColor(hsvaToRgba({ h: hsva.h, s: 1, v: 1, a: 1 }), 'hex');\r\n  const solidColor = formatColor(hsvaToRgba({ ...hsva, a: 1 }), 'hex');\r\n  // The actual color with its alpha applied — used for the palette opacity and\r\n  // for what \"+ Add\" saves (so a semi-transparent color is stored as #rrggbbaa).\r\n  const currentColor = formatColor(hsvaToRgba(hsva), 'hex', alphaEnabled);\r\n  const paletteOpacity = alphaEnabled ? hsva.a : 1;\r\n  // The saved swatch matching the current color — the trash button targets it.\r\n  const selectedSavedColor = savedColors.find(\r\n    (c) => c.toLowerCase() === currentColor.toLowerCase(),\r\n  );\r\n  // The value field shows alpha inline only for formats that encode it (RGBA).\r\n  // For hex/rgb/hsl/hsb the alpha lives in the separate `%` field instead.\r\n  const fieldValue =\r\n    fieldText ??\r\n    formatColor(hsvaToRgba(hsva), format, FORMAT_HAS_ALPHA[format]).replace(\r\n      format === 'hex' ? /^#/ : /^$/,\r\n      '',\r\n    );\r\n\r\n  const showFormatSelect = availableFormats.length > 1;\r\n\r\n  return (\r\n    <div className={cn('flex w-[232px] flex-col gap-4', className)}>\r\n      {/* Saturation / Value area — checker shows through as alpha drops. */}\r\n      <div\r\n        ref={saturation.ref}\r\n        onPointerDown={saturation.start}\r\n        className=\"relative h-[152px] w-full cursor-crosshair touch-none overflow-hidden rounded\"\r\n        style={{\r\n          backgroundImage:\r\n            'repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)',\r\n          backgroundSize: '16px 16px',\r\n        }}\r\n      >\r\n        <div\r\n          className=\"pointer-events-none absolute inset-0\"\r\n          style={{\r\n            opacity: paletteOpacity,\r\n            backgroundColor: hueColor,\r\n            backgroundImage:\r\n              'linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%)',\r\n          }}\r\n        />\r\n        <span\r\n          className=\"pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n          style={{\r\n            left: `calc(8px + ${hsva.s} * (100% - 16px))`,\r\n            top: `calc(8px + ${1 - hsva.v} * (100% - 16px))`,\r\n            // actual color incl. alpha, so the dot matches the square\r\n            backgroundColor: currentColor,\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Hue slider */}\r\n      <div\r\n        ref={hue.ref}\r\n        onPointerDown={hue.start}\r\n        className=\"relative h-2 w-full cursor-pointer touch-none rounded-full\"\r\n        style={{\r\n          backgroundImage:\r\n            'linear-gradient(90deg, #FF0000 0%, #FF8A00 12%, #FFE600 25%, #14FF00 39%, #00A3FF 50%, #0500FF 62%, #AD00FF 73%, #FF00C7 85%, #FF0000 100%)',\r\n        }}\r\n      >\r\n        <span\r\n          className=\"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n          style={{\r\n            left: `calc(${hsva.h / 360} * (100% - 16px))`,\r\n            backgroundColor: hueColor,\r\n          }}\r\n        />\r\n      </div>\r\n\r\n      {/* Alpha (transparency) slider */}\r\n      {alphaEnabled && (\r\n        <div\r\n          ref={alpha.ref}\r\n          onPointerDown={alpha.start}\r\n          className=\"relative h-2 w-full cursor-pointer touch-none rounded-full\"\r\n          style={{\r\n            backgroundImage: `linear-gradient(90deg, transparent 0%, ${solidColor} 100%), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,\r\n            backgroundSize: '100% 100%, 6px 6px',\r\n          }}\r\n        >\r\n          <span\r\n            className=\"pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]\"\r\n            style={{\r\n              left: `calc(${hsva.a} * (100% - 16px))`,\r\n              backgroundColor: solidColor,\r\n            }}\r\n          />\r\n        </div>\r\n      )}\r\n\r\n      {/* Fields: format select + value + optional alpha % */}\r\n      <div className=\"flex items-start gap-2\">\r\n        {showFormatSelect && (\r\n          <FormatSelect\r\n            value={format}\r\n            options={availableFormats}\r\n            onChange={(next) => {\r\n              setFieldText(null);\r\n              setFormat(next);\r\n            }}\r\n          />\r\n        )}\r\n\r\n        <div className=\"flex h-7 flex-1 items-center gap-1 rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]\">\r\n          {format === 'hex' && <span className=\"text-sm text-[#9CA3AF]\">#</span>}\r\n          <input\r\n            value={fieldValue}\r\n            onChange={(e) => {\r\n              setFieldText(e.target.value);\r\n              const rgba = parseColorInFormat(e.target.value, format);\r\n              if (rgba) emit(rgbaToHsva(rgba));\r\n            }}\r\n            onBlur={() => setFieldText(null)}\r\n            className=\"w-full min-w-0 bg-transparent text-sm text-[#374151] outline-none\"\r\n            aria-label={`${COLOR_FORMAT_LABELS[format]} value`}\r\n          />\r\n        </div>\r\n\r\n        {/*\r\n          The separate % field is only for hex (its value is short, so 3 boxes\r\n          fit). RGBA carries alpha in its value field; rgb/hsl/hsb control alpha\r\n          via the slider — keeping their (long) value field from being squeezed.\r\n        */}\r\n        {alphaEnabled && format === 'hex' && (\r\n          <div className=\"flex h-7 w-[56px] shrink-0 items-center rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]\">\r\n            <input\r\n              value={`${Math.round(hsva.a * 100)}%`}\r\n              onChange={(e) => {\r\n                const num = parseInt(e.target.value.replace(/[^0-9]/g, ''), 10);\r\n                if (!Number.isNaN(num)) emit({ ...hsva, a: clamp(num, 0, 100) / 100 });\r\n              }}\r\n              className=\"w-full bg-transparent text-sm text-[#374151] outline-none\"\r\n              aria-label=\"Alpha percent\"\r\n            />\r\n          </div>\r\n        )}\r\n      </div>\r\n\r\n      {/* Saved colors */}\r\n      {(Boolean(onAddSavedColor) || savedColors.length > 0) && (\r\n        <>\r\n          <div className=\"flex items-center justify-between\">\r\n            <span className=\"text-xs font-medium text-[#374151]\">\r\n              {savedColorsLabel}\r\n            </span>\r\n            <div className=\"flex items-center gap-2\">\r\n              {/* Remove the currently selected swatch (avoids per-dot crosses). */}\r\n              {Boolean(onRemoveSavedColor) && selectedSavedColor && (\r\n                <button\r\n                  type=\"button\"\r\n                  aria-label={removeColorLabel}\r\n                  title={removeColorLabel}\r\n                  className=\"flex cursor-pointer items-center text-[#6B7280] hover:text-[#EF4444]\"\r\n                  onClick={() => onRemoveSavedColor?.(selectedSavedColor)}\r\n                >\r\n                  <svg viewBox=\"0 0 16 16\" className=\"size-3.5\" fill=\"none\">\r\n                    <path\r\n                      d=\"M2.5 4h11M6.5 4V2.8c0-.4.3-.8.8-.8h1.4c.5 0 .8.4.8.8V4M4 4l.6 8.3c0 .6.5 1 1 1h4.8c.5 0 1-.4 1-1L12 4M6.5 6.8v4M9.5 6.8v4\"\r\n                      stroke=\"currentColor\"\r\n                      strokeWidth=\"1.1\"\r\n                      strokeLinecap=\"round\"\r\n                      strokeLinejoin=\"round\"\r\n                    />\r\n                  </svg>\r\n                </button>\r\n              )}\r\n              {Boolean(onAddSavedColor) && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"text-xs font-medium text-[#6B7280] hover:text-[#374151]\"\r\n                  onClick={() => onAddSavedColor?.(currentColor)}\r\n                >\r\n                  {addLabel}\r\n                </button>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {savedColors.length > 0 && (\r\n            <div className=\"grid grid-cols-7 gap-2\">\r\n              {savedColors.map((color) => (\r\n                <div key={color} className=\"relative size-6\">\r\n                  {/* checker so semi-transparent swatches read correctly */}\r\n                  <span\r\n                    className=\"absolute inset-0 rounded-full\"\r\n                    style={{\r\n                      backgroundImage:\r\n                        'repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)',\r\n                      backgroundSize: '8px 8px',\r\n                    }}\r\n                  />\r\n                  <button\r\n                    type=\"button\"\r\n                    title={color}\r\n                    onClick={() => {\r\n                      const rgba = parseColor(color);\r\n                      if (rgba) emit(rgbaToHsva(rgba));\r\n                    }}\r\n                    className={cn(\r\n                      'absolute inset-0 cursor-pointer rounded-full',\r\n                      currentColor.toLowerCase() === color.toLowerCase() &&\r\n                        'border-2 border-white shadow-[0px_0px_0px_2px_rgba(0,0,0,0.25)]',\r\n                    )}\r\n                    style={{ backgroundColor: color }}\r\n                  />\r\n                </div>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["FormatSelect","value","options","onChange","open","setOpen","useState","ref","useRef","useEffect","onDown","e","jsxs","o","cn","jsx","COLOR_FORMAT_LABELS","f","ratioFromPointer","el","clientX","clientY","axis","rect","x","clamp","y","useDrag","onMove","start","useCallback","handleMove","ev","handleUp","ColorPicker","withAlpha","savedColors","onAddSavedColor","onRemoveSavedColor","savedColorsLabel","addLabel","removeColorLabel","formats","COLOR_FORMATS","className","availableFormats","format","setFormat","hsva","setHsva","rgba","parseColor","rgbaToHsva","fieldText","setFieldText","alphaEnabled","next","prev","formatColor","hsvaToRgba","emit","saturation","rx","ry","hue","_y","alpha","hueColor","solidColor","currentColor","paletteOpacity","selectedSavedColor","c","fieldValue","FORMAT_HAS_ALPHA","showFormatSelect","parseColorInFormat","num","Fragment","color"],"mappings":"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"}

package/ColorInput/color.utils.d.ts

@@ -0,0 +1,42 @@
+export interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export interface HSVA {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare const clamp: (value: number, min: number, max: number) => number;
+/** Parses #rgb / #rrggbb / #rrggbbaa (with or without leading #) into RGBA. */
+export declare const parseColor: (input: string) => RGBA | null;
+export declare const isValidColor: (input: string) => boolean;
+/** Formats RGBA to a hex string. Includes the alpha byte only when withAlpha and a<1. */
+export declare const rgbaToHex: (rgba: RGBA, withAlpha?: boolean) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RGBA) => HSVA;
+export declare const hsvaToRgba: ({ h, s, v, a }: HSVA) => RGBA;
+/** Color string formats the picker can read/emit. */
+export type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsb';
+/** All formats, in the order they appear in the format dropdown. */
+export declare const COLOR_FORMATS: ColorFormat[];
+export declare const COLOR_FORMAT_LABELS: Record<ColorFormat, string>;
+/** Formats that carry an alpha channel — these enable the transparency slider. */
+export declare const FORMAT_HAS_ALPHA: Record<ColorFormat, boolean>;
+export interface HSLA {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+export declare const rgbaToHsla: ({ r, g, b, a }: RGBA) => HSLA;
+export declare const hslaToRgba: ({ h, s, l, a }: HSLA) => RGBA;
+/** Renders an RGBA value as a string in the requested format. */
+export declare const formatColor: (rgba: RGBA, format: ColorFormat, withAlpha?: boolean) => string;
+/** Parses a string written in the given format back into RGBA. */
+export declare const parseColorInFormat: (input: string, format: ColorFormat) => RGBA | null;
+/** Default saved-colors palette mirroring the Figma design. */
+export declare const DEFAULT_SAVED_COLORS: string[];
+//# sourceMappingURL=color.utils.d.ts.map

package/ColorInput/color.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.utils.d.ts","sourceRoot":"","sources":["../../src/ColorInput/color.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAC3B,CAAC;AAKtC,+EAA+E;AAC/E,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,KAAG,IAAI,GAAG,IA8BjD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OAAqC,CAAC;AAEnF,yFAAyF;AACzF,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,mBAAiB,KAAG,MAIzD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAmBjD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAqBjD,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;AAEjE,oEAAoE;AACpE,eAAO,MAAM,aAAa,EAAE,WAAW,EAAyC,CAAC;AAEjF,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAM3D,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,CAMzD,CAAC;AAEF,MAAM,WAAW,IAAI;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAoBjD,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,gBAAgB,IAAI,KAAG,IAqBjD,CAAC;AAKF,iEAAiE;AACjE,eAAO,MAAM,WAAW,GACtB,MAAM,IAAI,EACV,QAAQ,WAAW,EACnB,mBAAiB,KAChB,MAoBF,CAAC;AAKF,kEAAkE;AAClE,eAAO,MAAM,kBAAkB,GAC7B,OAAO,MAAM,EACb,QAAQ,WAAW,KAClB,IAAI,GAAG,IA8BT,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAexC,CAAC"}

package/ColorInput/color.utils.js

@@ -0,0 +1,129 @@
+const u = (t, n, e) => Math.min(e, Math.max(n, t)), b = (t) => u(Math.round(t), 0, 255).toString(16).padStart(2, "0"), m = (t) => {
+  if (!t) return null;
+  let n = t.trim().replace(/^#/, "");
+  return /^[0-9a-f]{3}$/i.test(n) && (n = n.split("").map((e) => e + e).join("")), /^[0-9a-f]{6}$/i.test(n) ? {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16),
+    a: 1
+  } : /^[0-9a-f]{8}$/i.test(n) ? {
+    r: parseInt(n.slice(0, 2), 16),
+    g: parseInt(n.slice(2, 4), 16),
+    b: parseInt(n.slice(4, 6), 16),
+    a: parseInt(n.slice(6, 8), 16) / 255
+  } : null;
+}, E = (t) => m(t) !== null, x = (t, n = !1) => {
+  const e = `#${b(t.r)}${b(t.g)}${b(t.b)}`;
+  return n && t.a < 1 ? `${e}${b(t.a * 255)}` : e;
+}, g = ({ r: t, g: n, b: e, a: h }) => {
+  const s = t / 255, r = n / 255, c = e / 255, l = Math.max(s, r, c), a = Math.min(s, r, c), o = l - a;
+  let i = 0;
+  o !== 0 && (l === s ? i = (r - c) / o % 6 : l === r ? i = (c - s) / o + 2 : i = (s - r) / o + 4, i *= 60, i < 0 && (i += 360));
+  const $ = l === 0 ? 0 : o / l;
+  return { h: i, s: $, v: l, a: h };
+}, F = ({ h: t, s: n, v: e, a: h }) => {
+  const s = e * n, r = s * (1 - Math.abs(t / 60 % 2 - 1)), c = e - s;
+  let l = 0, a = 0, o = 0;
+  return t < 60 ? [l, a, o] = [s, r, 0] : t < 120 ? [l, a, o] = [r, s, 0] : t < 180 ? [l, a, o] = [0, s, r] : t < 240 ? [l, a, o] = [0, r, s] : t < 300 ? [l, a, o] = [r, 0, s] : [l, a, o] = [s, 0, r], {
+    r: Math.round((l + c) * 255),
+    g: Math.round((a + c) * 255),
+    b: Math.round((o + c) * 255),
+    a: h
+  };
+}, R = ["hex", "rgb", "rgba", "hsl", "hsb"], H = {
+  hex: "Hex",
+  rgb: "RGB",
+  rgba: "RGBA",
+  hsl: "HSL",
+  hsb: "HSB"
+}, O = {
+  hex: !1,
+  rgb: !1,
+  rgba: !0,
+  hsl: !1,
+  hsb: !1
+}, p = ({ r: t, g: n, b: e, a: h }) => {
+  const s = t / 255, r = n / 255, c = e / 255, l = Math.max(s, r, c), a = Math.min(s, r, c), o = l - a;
+  let i = 0;
+  o !== 0 && (l === s ? i = (r - c) / o % 6 : l === r ? i = (c - s) / o + 2 : i = (s - r) / o + 4, i *= 60, i < 0 && (i += 360));
+  const $ = (l + a) / 2, d = o === 0 ? 0 : o / (1 - Math.abs(2 * $ - 1));
+  return { h: i, s: d, l: $, a: h };
+}, C = ({ h: t, s: n, l: e, a: h }) => {
+  const s = (1 - Math.abs(2 * e - 1)) * n, r = s * (1 - Math.abs(t / 60 % 2 - 1)), c = e - s / 2;
+  let l = 0, a = 0, o = 0;
+  return t < 60 ? [l, a, o] = [s, r, 0] : t < 120 ? [l, a, o] = [r, s, 0] : t < 180 ? [l, a, o] = [0, s, r] : t < 240 ? [l, a, o] = [0, r, s] : t < 300 ? [l, a, o] = [r, 0, s] : [l, a, o] = [s, 0, r], {
+    r: Math.round((l + c) * 255),
+    g: Math.round((a + c) * 255),
+    b: Math.round((o + c) * 255),
+    a: h
+  };
+}, f = (t) => Math.round(t), M = (t) => `${Math.round(t * 100)}%`, S = (t, n, e = !1) => {
+  switch (n) {
+    case "rgba":
+      return `${f(t.r)}, ${f(t.g)}, ${f(t.b)}, ${Number(t.a.toFixed(2))}`;
+    case "rgb":
+      return e && t.a < 1 ? `${f(t.r)}, ${f(t.g)}, ${f(t.b)}, ${Number(t.a.toFixed(2))}` : `${f(t.r)}, ${f(t.g)}, ${f(t.b)}`;
+    case "hsl": {
+      const { h, s, l: r } = p(t);
+      return `${f(h)}, ${M(s)}, ${M(r)}`;
+    }
+    case "hsb": {
+      const { h, s, v: r } = g(t);
+      return `${f(h)}, ${M(s)}, ${M(r)}`;
+    }
+    case "hex":
+    default:
+      return x(t, e).toUpperCase();
+  }
+}, A = (t) => (t.match(/-?\d*\.?\d+/g) || []).map(Number), T = (t, n) => {
+  if (n === "hex") return m(t);
+  const e = A(t);
+  return n === "rgb" || n === "rgba" ? e.length < 3 ? null : {
+    r: u(e[0], 0, 255),
+    g: u(e[1], 0, 255),
+    b: u(e[2], 0, 255),
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  } : n === "hsl" ? e.length < 3 ? null : C({
+    h: u(e[0], 0, 360),
+    s: u(e[1], 0, 100) / 100,
+    l: u(e[2], 0, 100) / 100,
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  }) : e.length < 3 ? null : F({
+    h: u(e[0], 0, 360),
+    s: u(e[1], 0, 100) / 100,
+    v: u(e[2], 0, 100) / 100,
+    a: e.length > 3 ? u(e[3], 0, 1) : 1
+  });
+}, B = [
+  "#EF4444",
+  "#F97316",
+  "#FACC15",
+  "#4ADE80",
+  "#2DD4BF",
+  "#3B82F6",
+  "#6366F1",
+  "#EC4899",
+  "#F43F5E",
+  "#D946EF",
+  "#8B5CF6",
+  "#0EA5E9",
+  "#10B981",
+  "#84CC16"
+];
+export {
+  R as COLOR_FORMATS,
+  H as COLOR_FORMAT_LABELS,
+  B as DEFAULT_SAVED_COLORS,
+  O as FORMAT_HAS_ALPHA,
+  u as clamp,
+  S as formatColor,
+  C as hslaToRgba,
+  F as hsvaToRgba,
+  E as isValidColor,
+  m as parseColor,
+  T as parseColorInFormat,
+  x as rgbaToHex,
+  p as rgbaToHsla,
+  g as rgbaToHsva
+};
+//# sourceMappingURL=color.utils.js.map

package/ColorInput/color.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.utils.js","sources":["../../src/ColorInput/color.utils.ts"],"sourcesContent":["export interface RGBA {\r\n  r: number; // 0..255\r\n  g: number; // 0..255\r\n  b: number; // 0..255\r\n  a: number; // 0..1\r\n}\r\n\r\nexport interface HSVA {\r\n  h: number; // 0..360\r\n  s: number; // 0..1\r\n  v: number; // 0..1\r\n  a: number; // 0..1\r\n}\r\n\r\nexport const clamp = (value: number, min: number, max: number): number =>\r\n  Math.min(max, Math.max(min, value));\r\n\r\nconst toHex2 = (value: number): string =>\r\n  clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0');\r\n\r\n/** Parses #rgb / #rrggbb / #rrggbbaa (with or without leading #) into RGBA. */\r\nexport const parseColor = (input: string): RGBA | null => {\r\n  if (!input) return null;\r\n  let hex = input.trim().replace(/^#/, '');\r\n\r\n  if (/^[0-9a-f]{3}$/i.test(hex)) {\r\n    hex = hex\r\n      .split('')\r\n      .map((c) => c + c)\r\n      .join('');\r\n  }\r\n\r\n  if (/^[0-9a-f]{6}$/i.test(hex)) {\r\n    return {\r\n      r: parseInt(hex.slice(0, 2), 16),\r\n      g: parseInt(hex.slice(2, 4), 16),\r\n      b: parseInt(hex.slice(4, 6), 16),\r\n      a: 1,\r\n    };\r\n  }\r\n\r\n  if (/^[0-9a-f]{8}$/i.test(hex)) {\r\n    return {\r\n      r: parseInt(hex.slice(0, 2), 16),\r\n      g: parseInt(hex.slice(2, 4), 16),\r\n      b: parseInt(hex.slice(4, 6), 16),\r\n      a: parseInt(hex.slice(6, 8), 16) / 255,\r\n    };\r\n  }\r\n\r\n  return null;\r\n};\r\n\r\nexport const isValidColor = (input: string): boolean => parseColor(input) !== null;\r\n\r\n/** Formats RGBA to a hex string. Includes the alpha byte only when withAlpha and a<1. */\r\nexport const rgbaToHex = (rgba: RGBA, withAlpha = false): string => {\r\n  const base = `#${toHex2(rgba.r)}${toHex2(rgba.g)}${toHex2(rgba.b)}`;\r\n  if (withAlpha && rgba.a < 1) return `${base}${toHex2(rgba.a * 255)}`;\r\n  return base;\r\n};\r\n\r\nexport const rgbaToHsva = ({ r, g, b, a }: RGBA): HSVA => {\r\n  const rn = r / 255;\r\n  const gn = g / 255;\r\n  const bn = b / 255;\r\n  const max = Math.max(rn, gn, bn);\r\n  const min = Math.min(rn, gn, bn);\r\n  const d = max - min;\r\n\r\n  let h = 0;\r\n  if (d !== 0) {\r\n    if (max === rn) h = ((gn - bn) / d) % 6;\r\n    else if (max === gn) h = (bn - rn) / d + 2;\r\n    else h = (rn - gn) / d + 4;\r\n    h *= 60;\r\n    if (h < 0) h += 360;\r\n  }\r\n\r\n  const s = max === 0 ? 0 : d / max;\r\n  return { h, s, v: max, a };\r\n};\r\n\r\nexport const hsvaToRgba = ({ h, s, v, a }: HSVA): RGBA => {\r\n  const c = v * s;\r\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\r\n  const m = v - c;\r\n\r\n  let rn = 0;\r\n  let gn = 0;\r\n  let bn = 0;\r\n  if (h < 60) [rn, gn, bn] = [c, x, 0];\r\n  else if (h < 120) [rn, gn, bn] = [x, c, 0];\r\n  else if (h < 180) [rn, gn, bn] = [0, c, x];\r\n  else if (h < 240) [rn, gn, bn] = [0, x, c];\r\n  else if (h < 300) [rn, gn, bn] = [x, 0, c];\r\n  else [rn, gn, bn] = [c, 0, x];\r\n\r\n  return {\r\n    r: Math.round((rn + m) * 255),\r\n    g: Math.round((gn + m) * 255),\r\n    b: Math.round((bn + m) * 255),\r\n    a,\r\n  };\r\n};\r\n\r\n/** Color string formats the picker can read/emit. */\r\nexport type ColorFormat = 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsb';\r\n\r\n/** All formats, in the order they appear in the format dropdown. */\r\nexport const COLOR_FORMATS: ColorFormat[] = ['hex', 'rgb', 'rgba', 'hsl', 'hsb'];\r\n\r\nexport const COLOR_FORMAT_LABELS: Record<ColorFormat, string> = {\r\n  hex: 'Hex',\r\n  rgb: 'RGB',\r\n  rgba: 'RGBA',\r\n  hsl: 'HSL',\r\n  hsb: 'HSB',\r\n};\r\n\r\n/** Formats that carry an alpha channel — these enable the transparency slider. */\r\nexport const FORMAT_HAS_ALPHA: Record<ColorFormat, boolean> = {\r\n  hex: false,\r\n  rgb: false,\r\n  rgba: true,\r\n  hsl: false,\r\n  hsb: false,\r\n};\r\n\r\nexport interface HSLA {\r\n  h: number; // 0..360\r\n  s: number; // 0..1\r\n  l: number; // 0..1\r\n  a: number; // 0..1\r\n}\r\n\r\nexport const rgbaToHsla = ({ r, g, b, a }: RGBA): HSLA => {\r\n  const rn = r / 255;\r\n  const gn = g / 255;\r\n  const bn = b / 255;\r\n  const max = Math.max(rn, gn, bn);\r\n  const min = Math.min(rn, gn, bn);\r\n  const d = max - min;\r\n\r\n  let h = 0;\r\n  if (d !== 0) {\r\n    if (max === rn) h = ((gn - bn) / d) % 6;\r\n    else if (max === gn) h = (bn - rn) / d + 2;\r\n    else h = (rn - gn) / d + 4;\r\n    h *= 60;\r\n    if (h < 0) h += 360;\r\n  }\r\n\r\n  const l = (max + min) / 2;\r\n  const s = d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1));\r\n  return { h, s, l, a };\r\n};\r\n\r\nexport const hslaToRgba = ({ h, s, l, a }: HSLA): RGBA => {\r\n  const c = (1 - Math.abs(2 * l - 1)) * s;\r\n  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\r\n  const m = l - c / 2;\r\n\r\n  let rn = 0;\r\n  let gn = 0;\r\n  let bn = 0;\r\n  if (h < 60) [rn, gn, bn] = [c, x, 0];\r\n  else if (h < 120) [rn, gn, bn] = [x, c, 0];\r\n  else if (h < 180) [rn, gn, bn] = [0, c, x];\r\n  else if (h < 240) [rn, gn, bn] = [0, x, c];\r\n  else if (h < 300) [rn, gn, bn] = [x, 0, c];\r\n  else [rn, gn, bn] = [c, 0, x];\r\n\r\n  return {\r\n    r: Math.round((rn + m) * 255),\r\n    g: Math.round((gn + m) * 255),\r\n    b: Math.round((bn + m) * 255),\r\n    a,\r\n  };\r\n};\r\n\r\nconst round = (n: number) => Math.round(n);\r\nconst pct = (n: number) => `${Math.round(n * 100)}%`;\r\n\r\n/** Renders an RGBA value as a string in the requested format. */\r\nexport const formatColor = (\r\n  rgba: RGBA,\r\n  format: ColorFormat,\r\n  withAlpha = false,\r\n): string => {\r\n  switch (format) {\r\n    case 'rgba':\r\n      return `${round(rgba.r)}, ${round(rgba.g)}, ${round(rgba.b)}, ${Number(rgba.a.toFixed(2))}`;\r\n    case 'rgb':\r\n      return withAlpha && rgba.a < 1\r\n        ? `${round(rgba.r)}, ${round(rgba.g)}, ${round(rgba.b)}, ${Number(rgba.a.toFixed(2))}`\r\n        : `${round(rgba.r)}, ${round(rgba.g)}, ${round(rgba.b)}`;\r\n    case 'hsl': {\r\n      const { h, s, l } = rgbaToHsla(rgba);\r\n      return `${round(h)}, ${pct(s)}, ${pct(l)}`;\r\n    }\r\n    case 'hsb': {\r\n      const { h, s, v } = rgbaToHsva(rgba);\r\n      return `${round(h)}, ${pct(s)}, ${pct(v)}`;\r\n    }\r\n    case 'hex':\r\n    default:\r\n      return rgbaToHex(rgba, withAlpha).toUpperCase();\r\n  }\r\n};\r\n\r\nconst numbers = (input: string): number[] =>\r\n  (input.match(/-?\\d*\\.?\\d+/g) || []).map(Number);\r\n\r\n/** Parses a string written in the given format back into RGBA. */\r\nexport const parseColorInFormat = (\r\n  input: string,\r\n  format: ColorFormat,\r\n): RGBA | null => {\r\n  if (format === 'hex') return parseColor(input);\r\n\r\n  const n = numbers(input);\r\n  if (format === 'rgb' || format === 'rgba') {\r\n    if (n.length < 3) return null;\r\n    return {\r\n      r: clamp(n[0], 0, 255),\r\n      g: clamp(n[1], 0, 255),\r\n      b: clamp(n[2], 0, 255),\r\n      a: n.length > 3 ? clamp(n[3], 0, 1) : 1,\r\n    };\r\n  }\r\n  if (format === 'hsl') {\r\n    if (n.length < 3) return null;\r\n    return hslaToRgba({\r\n      h: clamp(n[0], 0, 360),\r\n      s: clamp(n[1], 0, 100) / 100,\r\n      l: clamp(n[2], 0, 100) / 100,\r\n      a: n.length > 3 ? clamp(n[3], 0, 1) : 1,\r\n    });\r\n  }\r\n  // hsb\r\n  if (n.length < 3) return null;\r\n  return hsvaToRgba({\r\n    h: clamp(n[0], 0, 360),\r\n    s: clamp(n[1], 0, 100) / 100,\r\n    v: clamp(n[2], 0, 100) / 100,\r\n    a: n.length > 3 ? clamp(n[3], 0, 1) : 1,\r\n  });\r\n};\r\n\r\n/** Default saved-colors palette mirroring the Figma design. */\r\nexport const DEFAULT_SAVED_COLORS: string[] = [\r\n  '#EF4444',\r\n  '#F97316',\r\n  '#FACC15',\r\n  '#4ADE80',\r\n  '#2DD4BF',\r\n  '#3B82F6',\r\n  '#6366F1',\r\n  '#EC4899',\r\n  '#F43F5E',\r\n  '#D946EF',\r\n  '#8B5CF6',\r\n  '#0EA5E9',\r\n  '#10B981',\r\n  '#84CC16',\r\n];\r\n"],"names":["clamp","value","min","max","toHex2","parseColor","input","hex","c","isValidColor","rgbaToHex","rgba","withAlpha","base","rgbaToHsva","r","g","b","a","rn","gn","bn","d","h","s","hsvaToRgba","v","x","m","COLOR_FORMATS","COLOR_FORMAT_LABELS","FORMAT_HAS_ALPHA","rgbaToHsla","l","hslaToRgba","round","n","pct","formatColor","format","numbers","parseColorInFormat","DEFAULT_SAVED_COLORS"],"mappings":"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"}

package/ColorInput/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ColorInput';
+export * from './ColorPicker';
+export * from './color.utils';
+export * from './useSavedColors';
+export type * from './ColorInput.types';
+//# sourceMappingURL=index.d.ts.map

package/ColorInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,mBAAmB,oBAAoB,CAAC"}

package/ColorInput/index.js

@@ -0,0 +1,25 @@
+import { ColorInput as a } from "./ColorInput.js";
+import { ColorPicker as O } from "./ColorPicker.js";
+import { COLOR_FORMATS as C, COLOR_FORMAT_LABELS as T, DEFAULT_SAVED_COLORS as _, FORMAT_HAS_ALPHA as e, clamp as R, formatColor as s, hslaToRgba as L, hsvaToRgba as S, isValidColor as p, parseColor as m, parseColorInFormat as t, rgbaToHex as E, rgbaToHsla as F, rgbaToHsva as b } from "./color.utils.js";
+import { DEFAULT_SAVED_COLORS_STORAGE_KEY as g, useSavedColors as x } from "./useSavedColors.js";
+export {
+  C as COLOR_FORMATS,
+  T as COLOR_FORMAT_LABELS,
+  a as ColorInput,
+  O as ColorPicker,
+  _ as DEFAULT_SAVED_COLORS,
+  g as DEFAULT_SAVED_COLORS_STORAGE_KEY,
+  e as FORMAT_HAS_ALPHA,
+  R as clamp,
+  s as formatColor,
+  L as hslaToRgba,
+  S as hsvaToRgba,
+  p as isValidColor,
+  m as parseColor,
+  t as parseColorInFormat,
+  E as rgbaToHex,
+  F as rgbaToHsla,
+  b as rgbaToHsva,
+  x as useSavedColors
+};
+//# sourceMappingURL=index.js.map

package/ColorInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/ColorInput/useSavedColors.d.ts

@@ -0,0 +1,13 @@
+export declare const DEFAULT_SAVED_COLORS_STORAGE_KEY = "op-color-input-saved-colors";
+/**
+ * Saved-colors palette persisted to localStorage (empty by default). Used by
+ * `ColorInput` when the consumer doesn't pass a controlled
+ * `savedColors`/`onAddSavedColor` pair.
+ */
+export declare const useSavedColors: (storageKey?: string) => {
+    savedColors: string[];
+    addColor: (hex: string) => void;
+    removeColor: (hex: string) => void;
+    setSavedColors: (next: string[]) => void;
+};
+//# sourceMappingURL=useSavedColors.d.ts.map

package/ColorInput/useSavedColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSavedColors.d.ts","sourceRoot":"","sources":["../../src/ColorInput/useSavedColors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gCAAgC,gCAAgC,CAAC;AAuB9E;;;;GAIG;AACH,eAAO,MAAM,cAAc,GACzB,aAAY,MAAyC;;oBAiB7C,MAAM;uBAaN,MAAM;2BArBL,MAAM,EAAE;CAiClB,CAAC"}

package/ColorInput/useSavedColors.js

@@ -0,0 +1,53 @@
+import { useState as C, useEffect as S, useCallback as i } from "react";
+const m = "op-color-input-saved-colors", d = (o) => {
+  if (typeof window > "u") return [];
+  try {
+    const e = window.localStorage.getItem(o);
+    if (!e) return [];
+    const t = JSON.parse(e);
+    return Array.isArray(t) ? t : [];
+  } catch {
+    return [];
+  }
+}, a = (o, e) => {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(o, JSON.stringify(e));
+    } catch {
+    }
+}, L = (o = m) => {
+  const [e, t] = C(() => d(o));
+  S(() => {
+    t(d(o));
+  }, [o]);
+  const u = i(
+    (r) => {
+      t(r), a(o, r);
+    },
+    [o]
+  ), w = i(
+    (r) => {
+      t((n) => {
+        const c = r.toLowerCase();
+        if (n.some((l) => l.toLowerCase() === c)) return n;
+        const s = [...n, r];
+        return a(o, s), s;
+      });
+    },
+    [o]
+  ), f = i(
+    (r) => {
+      t((n) => {
+        const c = r.toLowerCase(), s = n.filter((l) => l.toLowerCase() !== c);
+        return a(o, s), s;
+      });
+    },
+    [o]
+  );
+  return { savedColors: e, addColor: w, removeColor: f, setSavedColors: u };
+};
+export {
+  m as DEFAULT_SAVED_COLORS_STORAGE_KEY,
+  L as useSavedColors
+};
+//# sourceMappingURL=useSavedColors.js.map

package/ColorInput/useSavedColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSavedColors.js","sources":["../../src/ColorInput/useSavedColors.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nexport const DEFAULT_SAVED_COLORS_STORAGE_KEY = 'op-color-input-saved-colors';\n\nconst read = (key: string): string[] => {\n  if (typeof window === 'undefined') return [];\n  try {\n    const raw = window.localStorage.getItem(key);\n    if (!raw) return [];\n    const parsed = JSON.parse(raw);\n    return Array.isArray(parsed) ? parsed : [];\n  } catch {\n    return [];\n  }\n};\n\nconst write = (key: string, next: string[]) => {\n  if (typeof window === 'undefined') return;\n  try {\n    window.localStorage.setItem(key, JSON.stringify(next));\n  } catch {\n    /* ignore quota / privacy-mode failures */\n  }\n};\n\n/**\n * Saved-colors palette persisted to localStorage (empty by default). Used by\n * `ColorInput` when the consumer doesn't pass a controlled\n * `savedColors`/`onAddSavedColor` pair.\n */\nexport const useSavedColors = (\n  storageKey: string = DEFAULT_SAVED_COLORS_STORAGE_KEY,\n) => {\n  const [colors, setColors] = useState<string[]>(() => read(storageKey));\n\n  useEffect(() => {\n    setColors(read(storageKey));\n  }, [storageKey]);\n\n  const setSavedColors = useCallback(\n    (next: string[]) => {\n      setColors(next);\n      write(storageKey, next);\n    },\n    [storageKey],\n  );\n\n  const addColor = useCallback(\n    (hex: string) => {\n      setColors((prev) => {\n        const lower = hex.toLowerCase();\n        if (prev.some((c) => c.toLowerCase() === lower)) return prev;\n        const next = [...prev, hex];\n        write(storageKey, next);\n        return next;\n      });\n    },\n    [storageKey],\n  );\n\n  const removeColor = useCallback(\n    (hex: string) => {\n      setColors((prev) => {\n        const lower = hex.toLowerCase();\n        const next = prev.filter((c) => c.toLowerCase() !== lower);\n        write(storageKey, next);\n        return next;\n      });\n    },\n    [storageKey],\n  );\n\n  return { savedColors: colors, addColor, removeColor, setSavedColors };\n};\n"],"names":["DEFAULT_SAVED_COLORS_STORAGE_KEY","read","key","raw","parsed","write","next","useSavedColors","storageKey","colors","setColors","useState","useEffect","setSavedColors","useCallback","addColor","hex","prev","lower","c","removeColor"],"mappings":";AAEO,MAAMA,IAAmC,+BAE1CC,IAAO,CAACC,MAA0B;AACtC,MAAI,OAAO,SAAW,IAAa,QAAO,CAAA;AAC1C,MAAI;AACF,UAAMC,IAAM,OAAO,aAAa,QAAQD,CAAG;AAC3C,QAAI,CAACC,EAAK,QAAO,CAAA;AACjB,UAAMC,IAAS,KAAK,MAAMD,CAAG;AAC7B,WAAO,MAAM,QAAQC,CAAM,IAAIA,IAAS,CAAA;AAAA,EAC1C,QAAQ;AACN,WAAO,CAAA;AAAA,EACT;AACF,GAEMC,IAAQ,CAACH,GAAaI,MAAmB;AAC7C,MAAI,SAAO,SAAW;AACtB,QAAI;AACF,aAAO,aAAa,QAAQJ,GAAK,KAAK,UAAUI,CAAI,CAAC;AAAA,IACvD,QAAQ;AAAA,IAER;AACF,GAOaC,IAAiB,CAC5BC,IAAqBR,MAClB;AACH,QAAM,CAACS,GAAQC,CAAS,IAAIC,EAAmB,MAAMV,EAAKO,CAAU,CAAC;AAErE,EAAAI,EAAU,MAAM;AACd,IAAAF,EAAUT,EAAKO,CAAU,CAAC;AAAA,EAC5B,GAAG,CAACA,CAAU,CAAC;AAEf,QAAMK,IAAiBC;AAAA,IACrB,CAACR,MAAmB;AAClB,MAAAI,EAAUJ,CAAI,GACdD,EAAMG,GAAYF,CAAI;AAAA,IACxB;AAAA,IACA,CAACE,CAAU;AAAA,EAAA,GAGPO,IAAWD;AAAA,IACf,CAACE,MAAgB;AACf,MAAAN,EAAU,CAACO,MAAS;AAClB,cAAMC,IAAQF,EAAI,YAAA;AAClB,YAAIC,EAAK,KAAK,CAACE,MAAMA,EAAE,YAAA,MAAkBD,CAAK,EAAG,QAAOD;AACxD,cAAMX,IAAO,CAAC,GAAGW,GAAMD,CAAG;AAC1B,eAAAX,EAAMG,GAAYF,CAAI,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAACE,CAAU;AAAA,EAAA,GAGPY,IAAcN;AAAA,IAClB,CAACE,MAAgB;AACf,MAAAN,EAAU,CAACO,MAAS;AAClB,cAAMC,IAAQF,EAAI,YAAA,GACZV,IAAOW,EAAK,OAAO,CAACE,MAAMA,EAAE,YAAA,MAAkBD,CAAK;AACzD,eAAAb,EAAMG,GAAYF,CAAI,GACfA;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAACE,CAAU;AAAA,EAAA;AAGb,SAAO,EAAE,aAAaC,GAAQ,UAAAM,GAAU,aAAAK,GAAa,gBAAAP,EAAA;AACvD;"}

package/Combobox/ComboboxRenderContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CAyJxC,CAAA"}
+{"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CA4JxC,CAAA"}

package/Combobox/ComboboxRenderContent.js

@@ -1,45 +1,45 @@
-import { jsx as e, jsxs as i, Fragment as w } from "react/jsx-runtime";
+import { jsx as e, jsxs as i, Fragment as v } from "react/jsx-runtime";
 import { cn as s } from "@oneplatformdev/utils";
 import { ComboboxRenderOptions as G } from "./ComboboxRenderOptions.js";
 import { useRef as H, useEffect as J } from "react";
 import { useInView as T } from "react-intersection-observer";
-import { PopoverContent as _ } from "../Popover/Popover.js";
-import { Command as q, CommandInput as z, CommandList as B, CommandGroup as K, CommandEmpty as y, CommandItem as Q } from "../Command/Command.js";
-import { LoadingMask as U } from "../LoadingMask/LoadingMask.js";
+import { Command as _, CommandInput as q, CommandList as z, CommandGroup as B, CommandEmpty as w, CommandItem as K } from "../Command/Command.js";
+import { LoadingMask as Q } from "../LoadingMask/LoadingMask.js";
+import { PopoverContent as U } from "../Popover/Popover.js";
 import { Skeleton as W } from "../Skeleton/Skeleton.js";
-const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, d) => /* @__PURE__ */ e(
+const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, m) => /* @__PURE__ */ e(
   "div",
   {
     className: "flex items-center min-h-10 w-full px-4",
     children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(W, { className: "h-4 w-full" }) })
   },
-  d
+  m
 )) }), ae = (t) => {
   const {
     open: c,
-    type: d,
+    type: m,
     search: u,
-    onSearch: C,
-    hasNext: v,
-    loading: r,
+    onSearch: y,
+    hasNext: C,
+    loading: n,
     loadingMore: A,
-    isEmptyList: m,
+    isEmptyList: d,
     onSelect: L,
     options: x = [],
     callbackStateParams: o,
     value: S,
     searchLabel: F = "Type to search...",
     emptyLabel: N = "No options",
-    emptyAction: n,
+    emptyAction: l,
     commandInputAction: p,
-    listHeadAction: l,
+    listHeadAction: r,
     listFooterAction: a,
     slotProps: f = {},
     defaultNodeDisabled: I,
     defaultNodeMatched: M,
     defaultNodeMuted: R,
-    defaultNodeInteractive: k,
-    forcePointerSelect: P,
+    defaultNodeInteractive: P,
+    forcePointerSelect: k,
     popoverContainer: E,
     renderList: h,
     onLoadMore: V
@@ -51,43 +51,46 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
   return J(() => {
     c && g && V?.();
   }, [g, c]), /* @__PURE__ */ e(
-    _,
+    U,
     {
       className: s(
-        "w-(--radix-popper-anchor-width) max-w-none p-2"
+        "w-(--radix-popper-anchor-width) max-w-none p-2",
+        "flex flex-col",
+        "max-h-(--radix-popover-content-available-height)"
       ),
       align: "start",
+      collisionPadding: 8,
       container: E,
-      children: /* @__PURE__ */ i(q, { shouldFilter: !1, children: [
+      children: /* @__PURE__ */ i(_, { shouldFilter: !1, className: "flex min-h-0 flex-1 flex-col", children: [
         /* @__PURE__ */ e(
-          z,
+          q,
           {
             placeholder: F,
             value: u,
-            onValueChange: C
+            onValueChange: y
           }
         ),
         typeof p == "function" ? p(o) : p,
-        /* @__PURE__ */ e(B, { ref: b, children: /* @__PURE__ */ i(
-          K,
+        /* @__PURE__ */ e(z, { ref: b, className: "min-h-0 flex-1", children: /* @__PURE__ */ i(
+          B,
           {
             className: s(
               !x.length && "p-0 shadow-none",
               "px-0 py-2"
             ),
             children: [
-              r && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(U, {}) }),
-              !r && m && /* @__PURE__ */ e(w, { children: n ? /* @__PURE__ */ i(y, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
+              n && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(Q, {}) }),
+              !n && d && /* @__PURE__ */ e(v, { children: l ? /* @__PURE__ */ i(w, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
                 /* @__PURE__ */ e("span", { children: N }),
-                typeof n == "function" ? n(o) : n
-              ] }) : /* @__PURE__ */ e(y, { children: N }) }),
-              !r && !m && /* @__PURE__ */ i(w, { children: [
-                l && /* @__PURE__ */ e(
-                  Q,
+                typeof l == "function" ? l(o) : l
+              ] }) : /* @__PURE__ */ e(w, { children: N }) }),
+              !n && !d && /* @__PURE__ */ i(v, { children: [
+                r && /* @__PURE__ */ e(
+                  K,
                   {
                     asChild: !0,
                     className: "w-full",
-                    children: typeof l == "function" ? l(o) : l
+                    children: typeof r == "function" ? r(o) : r
                   },
                   "combobox-list-head-action"
                 ),
@@ -95,7 +98,7 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
                 !h && /* @__PURE__ */ e(
                   G,
                   {
-                    type: d,
+                    type: m,
                     search: u,
                     value: S,
                     options: x,
@@ -103,17 +106,17 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
                     defaultNodeDisabled: I,
                     defaultNodeMatched: M,
                     defaultNodeMuted: R,
-                    defaultNodeInteractive: k,
-                    forcePointerSelect: P
+                    defaultNodeInteractive: P,
+                    forcePointerSelect: k
                   }
                 ),
-                v && /* @__PURE__ */ e("div", { ref: j, className: "h-px w-full" }),
+                C && /* @__PURE__ */ e("div", { ref: j, className: "h-px w-full" }),
                 A && /* @__PURE__ */ e(X, {})
               ] })
             ]
           }
         ) }),
-        !r && a && !m && /* @__PURE__ */ e(
+        !n && a && !d && /* @__PURE__ */ e(
           "div",
           {
             "data-slot": "command-footer-wrapper",