"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
import { Select } from '../select/select.js';
import { useColorPicker } from './color-picker-root.js';
import styles from './color-picker.module.css.js';
import { SUPPORTED_MODES } from './utils.js';

const ColorPickerMode = ({ className, options = SUPPORTED_MODES, ...props }) => {
    const { mode, setMode } = useColorPicker();
    return (jsxs(Select, { onValueChange: value => setMode(value), value: mode, children: [jsx(Select.Trigger, { className: cx(styles.selectTrigger, className), ...props, children: jsx(Select.Value, { placeholder: 'Mode' }) }), jsx(Select.Content, { children: options.map(option => (jsx(Select.Item, { value: option, children: option.toUpperCase() }, option))) })] }));
};

export { ColorPickerMode };
//# sourceMappingURL=color-picker-mode.js.map
