"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 { useColorPicker } from './color-picker-root.js';
import styles from './color-picker.module.css.js';
import { Root, Track, Range, Thumb } from '../../node_modules/.pnpm/@radix-ui_react-slider@1.3.5_@types_react-dom@19.1.7_@types_react@19.1.9__@types_react@19.1.9_p32zwhugtqgn4tfikzqx3cas2u/node_modules/@radix-ui/react-slider/dist/index.js';

const ColorPickerAlpha = ({ className, ...props }) => {
    const { alpha = 1, setColor } = useColorPicker();
    return (jsxs(Root, { className: cx(styles.sliderRoot, className), max: 100, onValueChange: ([alpha]) => setColor({ alpha: alpha / 100 }), step: 1, value: [alpha * 100], ...props, children: [jsxs(Track, { className: cx(styles.sliderTrack, styles.alphaTrack), children: [jsx("div", { className: styles.alphaTrackGradient }), jsx(Range, { className: styles.sliderRange })] }), jsx(Thumb, { className: styles.sliderThumb })] }));
};

export { ColorPickerAlpha };
//# sourceMappingURL=color-picker-alpha.js.map
