"use client";
import { jsx } from 'react/jsx-runtime';
import Color from '../../node_modules/.pnpm/color@5.0.0/node_modules/color/index.js';
import { createContext, useState, useCallback, useContext } from 'react';
import { Flex } from '../flex/flex.js';
import { getColorString } from './utils.js';

const ColorPickerContext = createContext(undefined);
const useColorPicker = () => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error('useColorPicker must be used within a ColorPickerProvider');
    }
    return context;
};
const ColorPickerRoot = ({ value, defaultValue = '#ffffff', onValueChange, defaultMode = 'hex', mode: providedMode, onModeChange, ...props }) => {
    const providedColor = value && Color(value).hsl().object();
    const [internalColor, setInternalColor] = useState(Color(defaultValue).hsl().object());
    const [internalMode, setInternalMode] = useState(defaultMode);
    const hue = providedColor ? providedColor.h : internalColor.h;
    const saturation = providedColor ? providedColor.s : internalColor.s;
    const lightness = providedColor ? providedColor.l : internalColor.l;
    const alpha = (providedColor ? providedColor?.alpha : internalColor?.alpha) ?? 1;
    const mode = providedMode ?? internalMode;
    const setColor = useCallback(value => {
        setInternalColor(_color => {
            const updatedColor = { ..._color, ...value };
            if (!onValueChange)
                return updatedColor;
            const color = Color.hsl(updatedColor.h, updatedColor.s, updatedColor.l, updatedColor?.alpha ?? 1);
            onValueChange(getColorString(color, mode), mode);
            return updatedColor;
        });
    }, [mode, onValueChange]);
    const setMode = useCallback(value => {
        setInternalMode(value);
        onModeChange?.(value);
    }, [onModeChange]);
    return (jsx(ColorPickerContext.Provider, { value: {
            hue,
            saturation,
            lightness,
            alpha,
            mode,
            setColor,
            setMode
        }, children: jsx(Flex, { direction: 'column', gap: 4, ...props }) }));
};

export { ColorPickerRoot, useColorPicker };
//# sourceMappingURL=color-picker-root.js.map
