{"version":3,"file":"color-picker-root.cjs","sources":["../../../components/color-picker/color-picker-root.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ComponentProps,\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { Flex } from '../flex';\nimport {\n  ColorObject,\n  clampToSrgb,\n  getColorString,\n  ModeType,\n  parseColor\n} from './utils';\n\ntype ColorPickerContextValue = {\n  lightness: number;\n  chroma: number;\n  hue: number;\n  alpha: number;\n  mode: ModeType;\n  setColor: (color: Partial<ColorObject>) => void;\n  setMode: (mode: ModeType) => void;\n};\n\nconst ColorPickerContext = createContext<ColorPickerContextValue | undefined>(\n  undefined\n);\n\nexport const useColorPicker = () => {\n  const context = useContext(ColorPickerContext);\n  if (!context) {\n    throw new Error('useColorPicker must be used within a ColorPickerProvider');\n  }\n  return context;\n};\n\nexport interface ColorPickerProps\n  extends Omit<ComponentProps<typeof Flex>, 'defaultValue'> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string, mode: string) => void;\n  defaultMode?: ModeType;\n  mode?: ModeType;\n  onModeChange?: (mode: ModeType) => void;\n}\n\nexport const ColorPickerRoot = ({\n  value,\n  defaultValue = '#ffffff',\n  onValueChange,\n  defaultMode = 'hex',\n  mode: providedMode,\n  onModeChange,\n  ...props\n}: ColorPickerProps) => {\n  const providedColor = useMemo(\n    () => (value ? parseColor(value) : undefined),\n    [value]\n  );\n\n  const [internalColor, setInternalColor] = useState(() =>\n    parseColor(defaultValue)\n  );\n  const [internalMode, setInternalMode] = useState(defaultMode);\n\n  const mode = providedMode ?? internalMode;\n\n  // In non-oklch modes, derive a display value clamped to the sRGB gamut so\n  // the pad / thumb / input only reflect colors the active output mode can\n  // actually represent. Internal state stays raw so switching back to oklch\n  // restores any wide-gamut pick the user hadn't yet overwritten.\n  const rawColor = useMemo<ColorObject>(\n    () => ({\n      l: providedColor ? providedColor.l : internalColor.l,\n      c: providedColor ? providedColor.c : internalColor.c,\n      h: providedColor ? providedColor.h : internalColor.h,\n      alpha: (providedColor ? providedColor.alpha : internalColor.alpha) ?? 1\n    }),\n    [providedColor, internalColor]\n  );\n  // clampToSrgb wraps culori's clampChroma, which is iterative — memoize so\n  // it doesn't re-run on unrelated re-renders during a drag.\n  const display = useMemo(\n    () => (mode === 'oklch' ? rawColor : clampToSrgb(rawColor)),\n    [mode, rawColor]\n  );\n\n  const lightness = display.l;\n  const chroma = display.c;\n  const hue = display.h;\n  const alpha = display.alpha ?? 1;\n\n  // Mirror the current effective color in a ref so setColor can compute the\n  // next value synchronously, without putting onValueChange inside the\n  // setInternalColor updater (where StrictMode would fire it twice).\n  const rawColorRef = useRef(rawColor);\n  rawColorRef.current = rawColor;\n\n  const setColor = useCallback<ColorPickerContextValue['setColor']>(\n    value => {\n      const next = { ...rawColorRef.current, ...value };\n      rawColorRef.current = next;\n      setInternalColor(next);\n      onValueChange?.(getColorString(next, mode), mode);\n    },\n    [mode, onValueChange]\n  );\n\n  const setMode = useCallback<ColorPickerContextValue['setMode']>(\n    value => {\n      setInternalMode(value);\n      onModeChange?.(value);\n    },\n    [onModeChange]\n  );\n\n  // Memoize the context value so consumers (Area, Hue, Alpha, Input, Mode) only\n  // re-render when a slice they read actually changes — without this, every\n  // pointermove during a drag would broadcast a fresh object identity to all\n  // subcomponents.\n  const contextValue = useMemo<ColorPickerContextValue>(\n    () => ({ lightness, chroma, hue, alpha, mode, setColor, setMode }),\n    [lightness, chroma, hue, alpha, mode, setColor, setMode]\n  );\n\n  return (\n    <ColorPickerContext value={contextValue}>\n      <Flex direction='column' gap={4} data-slot='color-picker' {...props} />\n    </ColorPickerContext>\n  );\n};\n\nColorPickerRoot.displayName = 'ColorPicker';\n"],"names":[],"mappings":";;;;;;;;AA8BA;AAIO;AACL;;AAEE;;AAEF;AACF;AAYO;;AAcL;;AAKA;;;;;AAMA;AAEI;AACA;AACA;AACA;AACD;;;AAKH;AAKA;AACA;AACA;AACA;;;;AAKA;AACA;AAEA;;AAGI;;;AAGF;AAIF;;AAGI;AACF;;;;;AAQF;;AAUF;AAEA;;;"}