{"version":3,"file":"color-picker-alpha.cjs","sources":["../../../components/color-picker/color-picker-alpha.tsx"],"sourcesContent":["'use client';\n\nimport { Slider } from '@base-ui/react/slider';\nimport { cx } from 'class-variance-authority';\nimport { CSSProperties, useMemo } from 'react';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\n\nexport type ColorPickerAlphaProps = Slider.Root.Props;\n\nexport const ColorPickerAlpha = ({\n  className,\n  ...props\n}: ColorPickerAlphaProps) => {\n  const { alpha = 1, lightness, chroma, hue, setColor } = useColorPicker();\n  // Drive the track gradient from the current color so the user can preview\n  // what the picked tone looks like at any alpha. The CSS reads\n  // --rs-color-picker-alpha-end from this style.\n  const trackStyle = useMemo(\n    () =>\n      ({\n        ['--rs-color-picker-alpha-end' as string]: `oklch(${lightness} ${chroma} ${hue})`\n      }) as CSSProperties,\n    [lightness, chroma, hue]\n  );\n  return (\n    <Slider.Root\n      className={cx(styles.sliderRoot, className)}\n      max={100}\n      onValueChange={value => setColor({ alpha: (value as number) / 100 })}\n      step={1}\n      value={alpha * 100}\n      thumbAlignment='edge'\n      data-slot='color-picker-alpha'\n      {...props}\n    >\n      <Slider.Control\n        className={styles.sliderControl}\n        data-slot='color-picker-slider-control'\n      >\n        <Slider.Track\n          className={cx(styles.sliderTrack, styles.alphaTrack)}\n          data-slot='color-picker-slider-track'\n        >\n          <div\n            className={styles.alphaTrackGradient}\n            style={trackStyle}\n            data-slot='color-picker-alpha-gradient'\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='Alpha'\n            data-slot='color-picker-slider-thumb'\n          />\n        </Slider.Track>\n      </Slider.Control>\n    </Slider.Root>\n  );\n};\n\nColorPickerAlpha.displayName = 'ColorPicker.Alpha';\n"],"names":[],"mappings":";;;;;;;;;;AAUO;AAIL;;;;AAIA;;;AAOA;AAqCF;AAEA;;"}