"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var index = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
var select = require('../select/select.cjs');
var colorPickerRoot = require('./color-picker-root.cjs');
var colorPicker_module = require('./color-picker.module.css.cjs');
var utils = require('./utils.cjs');

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

exports.ColorPickerMode = ColorPickerMode;
//# sourceMappingURL=color-picker-mode.cjs.map
