{"version":3,"file":"color-picker-hue.cjs","sources":["../../../components/color-picker/color-picker-hue.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport { useMemo } from 'react';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\nimport { hslToOklch, oklchToHsl } from './utils';\n\nexport type ColorPickerHueProps = Slider.Root.Props;\nexport const ColorPickerHue = ({\n  className,\n  ...props\n}: ColorPickerHueProps) => {\n  const { lightness, chroma, hue, mode, setColor } = useColorPicker();\n  const isOklch = mode === 'oklch';\n\n  // Non-oklch modes drive the slider in HSL hue space so the picker behaves\n  // like it did pre-OKLCH (red at 0°, green at 120°, etc.). State is still\n  // stored as OKLCH; we round-trip through HSL on read and write.\n  const hsl = useMemo(\n    () => (isOklch ? null : oklchToHsl({ l: lightness, c: chroma, h: hue })),\n    [isOklch, lightness, chroma, hue]\n  );\n  const value = isOklch ? hue : (hsl?.h ?? 0);\n\n  const handleValueChange = (next: number) => {\n    if (isOklch) {\n      setColor({ h: next });\n      return;\n    }\n    if (!hsl) return;\n    const oklch = hslToOklch(next, hsl.s, hsl.l);\n    setColor({ l: oklch.l, c: oklch.c, h: oklch.h });\n  };\n\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={360}\n      onValueChange={value => handleValueChange(value as number)}\n      // OKLCH hue is perceptually uniform — sub-degree precision is meaningful\n      // when fine-tuning a tone. HSL hue keeps the classic 1° granularity.\n      step={isOklch ? 0.1 : 1}\n      value={value}\n      thumbAlignment='edge'\n      data-slot='color-picker-hue'\n      {...props}\n    >\n      <Slider.Control\n        className={styles.sliderControl}\n        data-slot='color-picker-slider-control'\n      >\n        <Slider.Track\n          className={cx(\n            styles.sliderTrack,\n            isOklch ? styles.hueTrack : styles.hueTrackHsl\n          )}\n          data-slot='color-picker-slider-track'\n        >\n          <Slider.Indicator\n            className={styles.sliderRange}\n            data-slot='color-picker-slider-range'\n          />\n          <Slider.Thumb\n            className={styles.sliderThumb}\n            aria-label={isOklch ? 'OKLCH hue' : 'HSL hue'}\n            data-slot='color-picker-slider-thumb'\n          />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerHue.displayName = 'ColorPicker.Hue';\n"],"names":[],"mappings":";;;;;;;;;;;AAUO;AAIL;AACA;;;;;AASA;AAEA;;AAEI;;;AAGF;;AACA;;AAEF;AAEA;;;;AAqCF;AAEA;;"}