{"version":3,"file":"color-picker-mode.cjs","sources":["../../../components/color-picker/color-picker-mode.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'class-variance-authority';\nimport { type ComponentProps } from 'react';\nimport { Select } from '../select';\nimport styles from './color-picker.module.css';\nimport { useColorPicker } from './color-picker-root';\nimport { ModeType, SUPPORTED_MODES } from './utils';\n\nexport interface ColorPickerModeProps\n  extends ComponentProps<typeof Select.Trigger> {\n  options?: readonly ModeType[];\n}\n\nexport const ColorPickerMode = ({\n  className,\n  options = SUPPORTED_MODES,\n  ...props\n}: ColorPickerModeProps) => {\n  const { mode, setMode } = useColorPicker();\n  return (\n    <Select onValueChange={value => setMode(value as ModeType)} value={mode}>\n      <Select.Trigger\n        className={cx(styles.selectTrigger, className)}\n        data-slot='color-picker-mode'\n        {...props}\n      >\n        <Select.Value placeholder='Mode' />\n      </Select.Trigger>\n      <Select.Content data-slot='color-picker-mode-content'>\n        {options.map(option => (\n          <Select.Item key={option} value={option}>\n            {option.toUpperCase()}\n          </Select.Item>\n        ))}\n      </Select.Content>\n    </Select>\n  );\n};\n\nColorPickerMode.displayName = 'ColorPicker.Mode';\n"],"names":[],"mappings":";;;;;;;;;;AAca;;AAMX;AAkBF;AAEA;;"}