@allxsmith/bestax-bulma 5.54.1 → 5.55.0

package/dist/esm/form/ColorPicker.js

@@ -0,0 +1,540 @@
+/* @allxsmith/bestax-bulma — AI agents: see AGENTS.md in the package root, or https://bestax.io/llms.txt */
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { usePrefixedClassNames, classNames, prefixedClassNames } from '../helpers/classNames.js';
+import { useClassPrefix } from '../helpers/Config.js';
+import { useBulmaClasses } from '../helpers/useBulmaClasses.js';
+import { useIsHydrated } from '../helpers/useIsHydrated.js';
+import { useClientLayoutEffect } from '../helpers/useClientLayoutEffect.js';
+import { withSubComponents } from '../helpers/withSubComponents.js';
+import { ColorSwatch } from '../elements/ColorSwatch.js';
+import { parseColor, formatColor, sameColor, prefersDarkInk, hsvaToRgba } from './_colorInternals/colorMath.js';
+import { usePicker, standalone, useColorPicker, ColorPickerContext, keepingChannels, noop } from './_colorInternals/pickerState.js';
+import { Field } from './Field.js';
+import { Control } from './Control.js';
+import { useFieldsetDisabled, useInsideField, useInsideControl, rendersOwnField, rendersOwnControl } from './FormContext.js';
+import { useAutoLabelledBy } from './useAutoLabelId.js';
+
+// The theme colors `swatches="bulma"` shows, read off the page.
+const BULMA_SWATCHES = [
+    { color: 'var(--bulma-primary)', label: 'Primary' },
+    { color: 'var(--bulma-link)', label: 'Link' },
+    { color: 'var(--bulma-info)', label: 'Info' },
+    { color: 'var(--bulma-success)', label: 'Success' },
+    { color: 'var(--bulma-warning)', label: 'Warning' },
+    { color: 'var(--bulma-danger)', label: 'Danger' },
+];
+const clamp$2 = (value, low, high) => Math.min(Math.max(value, low), high);
+/** Whether the element is laid out right to left. */
+const isRtl = (element) => !!element && getComputedStyle(element).direction === 'rtl';
+/** Where a pointer is across an element, from 0 to 1 each way. */
+const pointIn = (element, event) => {
+    const rect = element.getBoundingClientRect();
+    const across = rect.width > 0 ? clamp$2((event.clientX - rect.left) / rect.width, 0, 1) : 0;
+    const down = rect.height > 0 ? clamp$2((event.clientY - rect.top) / rect.height, 0, 1) : 0;
+    return { x: isRtl(element) ? 1 - across : across, y: down };
+};
+/** The color's red, green and blue, rounded, as a CSS `rgb()` takes them. */
+const rgbChannels = (color) => {
+    const { r, g, b } = hsvaToRgba(color);
+    return `${Math.round(r)} ${Math.round(g)} ${Math.round(b)}`;
+};
+/** Whether a press should start a drag: any touch or pen, a mouse's main button. */
+const startsDrag = (event) => event.pointerType !== 'mouse' || event.button === 0;
+/** Hands a node to a forwarded ref and to one of the part's own. */
+function setRefs(node, own, forwarded) {
+    own.current = node;
+    if (typeof forwarded === 'function')
+        forwarded(node);
+    else if (forwarded)
+        forwarded.current = node;
+}
+/**
+ * The saturation and brightness square, operated by pointer or by keyboard as one 2D slider.
+ *
+ * @function
+ * @param {ColorPickerAreaProps} props - Props for ColorPicker.Area.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the square's `<div>`.
+ * @returns {JSX.Element | null} The square, or nothing outside a ColorPicker.
+ */
+const ColorPickerArea = forwardRef(({ className, style, ...props }, ref) => {
+    const picker = usePicker('Area');
+    const live = picker ?? standalone;
+    const { color, change, end, disabled, labels, touch, percent } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = useRef(null);
+    const xRef = useRef(null);
+    const yRef = useRef(null);
+    // The axis whose input holds the tab stop: the one focused or moved last.
+    const [axis, setAxis] = useState('x');
+    // Once a key has moved the square, both inputs are exposed until focus
+    // leaves it, so the one that moved can be read.
+    const [keyed, setKeyed] = useState(false);
+    const draggingRef = useRef(false);
+    const areaClass = usePrefixedClassNames('color-area', {
+        'is-disabled': disabled,
+    });
+    const thumbClass = usePrefixedClassNames('color-area-thumb');
+    const inputClass = usePrefixedClassNames('color-area-input');
+    const s = Math.round(color.s);
+    const v = Math.round(color.v);
+    const saturationText = `${labels.saturation} ${percent(s)}`;
+    const brightnessText = `${labels.brightness} ${percent(v)}`;
+    const focusAxis = (which) => (which === 'x' ? xRef : yRef).current?.focus({ preventScroll: true });
+    // The axis a key moved to, focused once the render that shows its input
+    // is on the page, so it's no longer aria-hidden as it takes focus.
+    const focusNextRef = useRef(null);
+    useClientLayoutEffect(() => {
+        if (!focusNextRef.current)
+            return;
+        focusAxis(focusNextRef.current);
+        focusNextRef.current = null;
+    });
+    const moveTo = (event) => {
+        const { x, y } = pointIn(event.currentTarget, event);
+        change({ ...color, s: x * 100, v: (1 - y) * 100 });
+    };
+    const onPointerDown = (event) => {
+        if (disabled || !startsDrag(event))
+            return;
+        // No text selection, and focus goes where the square puts it.
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        draggingRef.current = true;
+        moveTo(event);
+        focusAxis(axis);
+    };
+    const onPointerMove = (event) => {
+        if (draggingRef.current)
+            moveTo(event);
+    };
+    const endDrag = (event) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        end();
+    };
+    const onKeyDown = (event) => {
+        const by = event.shiftKey ? 10 : 1;
+        // The horizontal arrows follow the screen: right to left, saturation
+        // grows to the left.
+        const right = isRtl(rootRef.current) ? -by : by;
+        const moves = {
+            ArrowRight: [right, 0],
+            ArrowLeft: [-right, 0],
+            ArrowUp: [0, by],
+            ArrowDown: [0, -by],
+            PageUp: [0, 10],
+            PageDown: [0, -10],
+            Home: [-10, 0],
+            End: [10, 0],
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        const [dx, dy] = move;
+        change({
+            ...color,
+            s: clamp$2(s + dx, 0, 100),
+            v: clamp$2(v + dy, 0, 100),
+        }, true);
+        const moved = dx !== 0 ? 'x' : 'y';
+        setAxis(moved);
+        setKeyed(true);
+        if (moved !== axis)
+            focusNextRef.current = moved;
+    };
+    // A touch screen reader, or a browser's own stepping, sets an input's
+    // value without a key the square handled.
+    const onInput = (which) => (event) => {
+        const value = Number(event.target.value);
+        change(which === 'x' ? { ...color, s: value } : { ...color, v: value }, true);
+    };
+    const onBlur = (event) => {
+        const next = event.relatedTarget;
+        if (next !== xRef.current && next !== yRef.current)
+            setKeyed(false);
+    };
+    // What both inputs share; each adds its axis, and the handlers.
+    const shared = {
+        type: 'range',
+        className: inputClass,
+        min: 0,
+        max: 100,
+        step: 1,
+        disabled,
+        'aria-label': labels.area,
+        'aria-roledescription': labels.areaRoleDescription,
+    };
+    // The one not holding the tab stop is hidden until a key moves the
+    // square, so a screen reader lists one control; both show on touch.
+    const tabIndexOf = (which) => (touch || axis === which ? 0 : -1);
+    const hiddenOf = (which) => touch || keyed || axis === which ? undefined : true;
+    if (!picker)
+        return null;
+    return (jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(areaClass, bulmaHelperClasses, className), style: {
+            ...style,
+            '--color-picker-hue': Math.round(color.h),
+            '--color-picker-rgb': rgbChannels(color),
+            '--color-area-x': `${color.s}%`,
+            '--color-area-y': `${100 - color.v}%`,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, ...rest, children: jsxs("div", { className: thumbClass, role: "presentation", children: [jsx("input", { ref: xRef, ...shared, value: s, "aria-valuetext": `${saturationText}, ${brightnessText}`, "aria-orientation": "horizontal", tabIndex: tabIndexOf('x'), "aria-hidden": hiddenOf('x'), onChange: onInput('x'), onKeyDown: onKeyDown, onFocus: () => setAxis('x'), onBlur: onBlur }), jsx("input", { ref: yRef, ...shared, value: v, "aria-valuetext": `${brightnessText}, ${saturationText}`, "aria-orientation": "vertical", tabIndex: tabIndexOf('y'), "aria-hidden": hiddenOf('y'), onChange: onInput('y'), onKeyDown: onKeyDown, onFocus: () => setAxis('y'), onBlur: onBlur })] }) }));
+});
+ColorPickerArea.displayName = 'ColorPicker.Area';
+/** The hue or the alpha slider: a hidden native range under a drawn track. */
+const ChannelSlider = forwardRef(({ channel, className, style, ...props }, ref) => {
+    const picker = usePicker(channel === 'hue' ? 'HueSlider' : 'AlphaSlider');
+    const live = picker ?? standalone;
+    const { color, change, end, disabled, labels, percent, degrees } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rootRef = useRef(null);
+    const draggingRef = useRef(false);
+    const isHue = channel === 'hue';
+    const max = isHue ? 360 : 100;
+    const value = Math.round(isHue ? color.h : color.a * 100);
+    const withValue = (next) => isHue ? { ...color, h: next } : { ...color, a: next / 100 };
+    const sliderClass = usePrefixedClassNames('color-slider', {
+        'is-hue': isHue,
+        'is-alpha': !isHue,
+        'is-disabled': disabled,
+    });
+    const trackClass = usePrefixedClassNames('color-slider-track');
+    const thumbClass = usePrefixedClassNames('color-slider-thumb');
+    const inputClass = usePrefixedClassNames('color-slider-input');
+    const moveTo = (event) => {
+        const { x } = pointIn(event.currentTarget, event);
+        change(withValue(x * max));
+    };
+    const onPointerDown = (event) => {
+        if (disabled || !startsDrag(event))
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        draggingRef.current = true;
+        moveTo(event);
+        rootRef.current?.querySelector('input')?.focus({ preventScroll: true });
+    };
+    const onPointerMove = (event) => {
+        if (draggingRef.current)
+            moveTo(event);
+    };
+    const endDrag = (event) => {
+        if (!draggingRef.current)
+            return;
+        draggingRef.current = false;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        end();
+    };
+    const onKeyDown = (event) => {
+        const by = event.shiftKey ? 10 : 1;
+        const right = isRtl(rootRef.current) ? -by : by;
+        const steps = {
+            ArrowRight: right,
+            ArrowLeft: -right,
+            ArrowUp: by,
+            ArrowDown: -by,
+            PageUp: 10,
+            PageDown: -10,
+            Home: -max,
+            End: max,
+        };
+        const step = steps[event.key];
+        if (step === undefined)
+            return;
+        event.preventDefault();
+        change(withValue(clamp$2(value + step, 0, max)), true);
+    };
+    if (!picker)
+        return null;
+    return (jsxs("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(sliderClass, bulmaHelperClasses, className), style: {
+            ...style,
+            '--color-picker-hue': Math.round(color.h),
+            '--color-picker-rgb': rgbChannels(color),
+            '--color-slider-position': `${(value / max) * 100}%`,
+        }, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, ...rest, children: [jsx("div", { className: trackClass }), jsx("div", { className: thumbClass, role: "presentation", children: jsx("input", { type: "range", className: inputClass, min: 0, max: max, step: 1, value: value, disabled: disabled, 
+                    // Spelled out, as the square's is, so Safari's Tab reaches it
+                    // with its default settings, which skip a range input without
+                    // one.
+                    tabIndex: 0, "aria-label": isHue ? labels.hue : labels.alpha, "aria-valuetext": isHue ? degrees(value) : percent(value), onChange: event => change(withValue(Number(event.target.value)), true), onKeyDown: onKeyDown }) })] }));
+});
+ChannelSlider.displayName = 'ChannelSlider';
+/**
+ * The hue slider, from red round the spectrum and back to red.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.HueSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+const ColorPickerHueSlider = forwardRef((props, ref) => jsx(ChannelSlider, { ref: ref, ...props, channel: "hue" }));
+ColorPickerHueSlider.displayName = 'ColorPicker.HueSlider';
+/**
+ * The alpha slider, from see-through to solid.
+ *
+ * @function
+ * @param {ColorPickerSliderProps} props - Props for ColorPicker.AlphaSlider.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the slider's `<div>`.
+ * @returns {JSX.Element | null} The slider, or nothing outside a ColorPicker.
+ */
+const ColorPickerAlphaSlider = forwardRef((props, ref) => jsx(ChannelSlider, { ref: ref, ...props, channel: "alpha" }));
+ColorPickerAlphaSlider.displayName = 'ColorPicker.AlphaSlider';
+/** Arrow keys and how far they move along the swatches. */
+const SWATCH_STEPS = {
+    ArrowRight: 1,
+    ArrowDown: 1,
+    ArrowLeft: -1,
+    ArrowUp: -1,
+};
+/**
+ * The swatches, a radio group of preset colors that sets the picker's color.
+ *
+ * @function
+ * @param {ColorPickerSwatchesProps} props - Props for ColorPicker.Swatches.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the group's `<div>`.
+ * @returns {JSX.Element | null} The swatches, or nothing outside a ColorPicker or with none to show.
+ */
+const ColorPickerSwatches = forwardRef(({ className, swatches: ownSwatches, ...props }, ref) => {
+    const picker = usePicker('Swatches');
+    const live = picker ?? standalone;
+    const { color, change, disabled, labels, format, alpha } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const classPrefix = useClassPrefix();
+    const groupClass = usePrefixedClassNames('color-picker-swatches');
+    const rootRef = useRef(null);
+    const given = ownSwatches ?? live.swatches;
+    const list = useMemo(() => (given === 'bulma' ? BULMA_SWATCHES : (given ?? [])).map(entry => typeof entry === 'string' ? { color: entry } : entry), [given]);
+    // A color the picker can't read as written, such as a var(), is read off
+    // the page, as the text the swatch's own custom property resolves to.
+    const chipsRef = useRef([]);
+    const textOf = useCallback((i) => {
+        const chip = chipsRef.current[i];
+        if (parseColor(list[i].color) || !chip)
+            return list[i].color;
+        return getComputedStyle(chip)
+            .getPropertyValue('--color-swatch-color')
+            .trim();
+    }, [list]);
+    // Those texts, read after every render rather than once: a Theme can
+    // change the variables behind them while the picker is open, and the
+    // chosen swatch has to follow. A read that changes nothing renders
+    // nothing more.
+    const [resolved, setResolved] = useState([]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- after every render on purpose; the updater keeps the state when nothing changed, so it settles
+    useEffect(() => {
+        const next = list.map((_, i) => textOf(i));
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- a var() color can only be read off the page once its swatch is on it
+        setResolved(previous => previous.length === next.length &&
+            previous.every((text, i) => text === next[i])
+            ? previous
+            : next);
+    });
+    const colorOf = (i) => parseColor(list[i].color) ?? parseColor(resolved[i]);
+    // The same color, as far as the picker's value can tell: the same 8-bit
+    // color, or the same text, since an HSL value is rounded.
+    const shownText = formatColor(color, format, alpha);
+    const checked = list.findIndex((_, i) => {
+        const swatch = colorOf(i);
+        if (!swatch)
+            return false;
+        const solid = alpha ? swatch : { ...swatch, a: 1 };
+        return (sameColor(solid, color) || formatColor(solid, format, alpha) === shownText);
+    });
+    const [focused, setFocused] = useState(null);
+    const tabStop = focused ?? (checked >= 0 ? checked : 0);
+    // Read afresh, so a theme that changed since the last render counts.
+    const pick = (i) => {
+        const text = textOf(i);
+        const swatch = parseColor(text);
+        if (swatch)
+            change(keepingChannels(swatch, color, text), true);
+    };
+    const onKeyDown = (i) => (event) => {
+        const buttons = Array.from(rootRef.current.querySelectorAll('[role="radio"]'));
+        let next;
+        if (event.key === 'Home')
+            next = 0;
+        else if (event.key === 'End')
+            next = buttons.length - 1;
+        else if (SWATCH_STEPS[event.key]) {
+            // Left and Right follow the screen, so right to left they swap.
+            const sideways = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+            const flip = sideways && isRtl(rootRef.current) ? -1 : 1;
+            next =
+                (i + SWATCH_STEPS[event.key] * flip + buttons.length) % buttons.length;
+        }
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        buttons[next]?.focus();
+        pick(next);
+    };
+    if (!picker || list.length === 0)
+        return null;
+    return (jsx("div", { ref: node => setRefs(node, rootRef, ref), className: classNames(groupClass, bulmaHelperClasses, className), role: "radiogroup", "aria-label": labels.swatches, "aria-disabled": disabled || undefined, ...rest, children: list.map((entry, i) => {
+            const swatch = colorOf(i);
+            const isChecked = i === checked;
+            // The check is drawn in black or white with a ring of the other, so
+            // it shows on any color. On a see-through swatch the page shows
+            // through, so it takes the scheme's text color and background,
+            // which follow dark mode, in place of the swatch's own.
+            const seeThrough = !!swatch && swatch.a < 1;
+            return (jsx("button", { type: "button", role: "radio", "aria-checked": isChecked, "aria-label": entry.label || entry.color, title: entry.label, tabIndex: i === tabStop ? 0 : -1, disabled: disabled, className: prefixedClassNames(classPrefix, 'color-picker-swatch', {
+                    'is-checked': isChecked,
+                    'is-see-through': seeThrough,
+                    'is-dark-ink': !!swatch && !seeThrough && prefersDarkInk(swatch),
+                }), onClick: () => pick(i), onKeyDown: onKeyDown(i), onFocus: () => setFocused(i), onBlur: () => setFocused(null), children: jsx(ColorSwatch, { ref: node => {
+                        chipsRef.current[i] = node;
+                    }, color: entry.color, "aria-hidden": "true", children: isChecked && (jsx(CheckIcon, { haloClass: prefixedClassNames(classPrefix, 'color-picker-check-halo') })) }) }, `${entry.color}-${i}`));
+        }) }));
+});
+ColorPickerSwatches.displayName = 'ColorPicker.Swatches';
+/**
+ * The check on the chosen swatch: a ring in `haloClass`, and the check over
+ * it in the current color.
+ */
+const CheckIcon = ({ haloClass }) => (jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: ['halo', 'ink'].map(part => (jsx("path", { className: part === 'halo' ? haloClass : undefined, d: "M3.5 8.5l3 3 6-7", fill: "none", stroke: "currentColor", strokeWidth: part === 'halo' ? 4.5 : 2, strokeLinecap: "round", strokeLinejoin: "round" }, part))) }));
+/**
+ * The value as text you can type in, beside a preview swatch, with the eye dropper when the picker has `eyeDropper`.
+ *
+ * @function
+ * @param {ColorPickerInputProps} props - Props for ColorPicker.Input.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the row's `<div>`.
+ * @returns {JSX.Element | null} The row, or nothing outside a ColorPicker.
+ */
+const ColorPickerInput = forwardRef(({ className, ...props }, ref) => {
+    const picker = usePicker('Input');
+    const live = picker ?? standalone;
+    const { color, text, change, disabled, labels, eyeDropper } = live;
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const rowClass = usePrefixedClassNames('color-picker-value');
+    const previewClass = usePrefixedClassNames('color-picker-preview');
+    // What's been typed and not yet committed, or null while the field
+    // shows the value.
+    const [draft, setDraft] = useState(null);
+    const invalid = draft !== null && !parseColor(draft);
+    const inputClass = usePrefixedClassNames('input', {
+        'is-small': true,
+        'is-danger': invalid,
+    });
+    const buttonClass = usePrefixedClassNames('button', { 'is-small': true });
+    const hydrated = useIsHydrated();
+    const EyeDropper = hydrated
+        ? window.EyeDropper
+        : undefined;
+    const commit = () => {
+        if (draft === null)
+            return;
+        const parsed = parseColor(draft);
+        setDraft(null);
+        if (parsed)
+            change(keepingChannels(parsed, color, draft), true);
+    };
+    const onKeyDown = (event) => {
+        if (draft === null)
+            return;
+        if (event.key === 'Enter') {
+            // Commits rather than submitting a form; an unreadable value stays
+            // to be fixed.
+            event.preventDefault();
+            if (!invalid)
+                commit();
+        }
+        else if (event.key === 'Escape') {
+            // Puts the value back, and keeps the key from closing a popover too.
+            event.preventDefault();
+            event.stopPropagation();
+            setDraft(null);
+        }
+    };
+    // Escape, or a click away, cancels it, which rejects.
+    const pickFromScreen = (Dropper) => new Dropper().open().then(({ sRGBHex }) => {
+        const parsed = parseColor(sRGBHex);
+        // The screen gives a solid color as hex; the alpha stays as it was,
+        // and a gray keeps the hue the picker had.
+        if (parsed) {
+            change(keepingChannels({ ...parsed, a: color.a }, color, sRGBHex), true);
+        }
+    }, noop);
+    if (!picker)
+        return null;
+    return (jsxs("div", { ref: ref, className: classNames(rowClass, bulmaHelperClasses, className), ...rest, children: [jsx(ColorSwatch, { color: text, className: previewClass, "aria-hidden": "true" }), jsx("input", { type: "text", className: inputClass, value: draft ?? text, disabled: disabled, "aria-label": labels.value, "aria-invalid": invalid || undefined, spellCheck: false, autoComplete: "off", autoCapitalize: "off", onChange: event => setDraft(event.target.value), onKeyDown: onKeyDown, onBlur: commit }), eyeDropper && EyeDropper && (jsx("button", { type: "button", className: buttonClass, "aria-label": labels.eyeDropper, title: labels.eyeDropper, disabled: disabled, onClick: () => pickFromScreen(EyeDropper), children: jsx(EyeDropperIcon, {}) }))] }));
+});
+ColorPickerInput.displayName = 'ColorPicker.Input';
+/** A pipette. */
+const EyeDropperIcon = () => (jsx("svg", { viewBox: "0 0 16 16", width: "1em", height: "1em", "aria-hidden": "true", children: jsx("path", { d: "M10.5 2.5l3 3M9 4l3 3-6.5 6.5H3v-3z", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }));
+/**
+ * The `ColorPicker` component is a panel for choosing a color: a saturation and brightness square, a hue slider, and the value as text, with alpha and swatches when asked for.
+ *
+ * Every part is operable by keyboard, and the square is two native range
+ * inputs, one per axis, with one tab stop. The value is a CSS color string
+ * in `format`, HSL by default.
+ *
+ * @function
+ * @param {ColorPickerProps} props - Props for the ColorPicker component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the picker's `<div>`.
+ * @returns {JSX.Element} The rendered picker.
+ *
+ * @example
+ * <ColorPicker label="Brand color" defaultValue="#1e6b99" swatches="bulma" />
+ */
+const ColorPickerRoot = forwardRef(({ className, label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value, defaultValue, onChange, onChangeEnd, format = 'hsl', alpha = false, swatches, eyeDropper = false, disabled: disabledProp, name, form, labels, children, ...props }, ref) => {
+    const disabled = useFieldsetDisabled(disabledProp);
+    const insideField = useInsideField();
+    const insideControl = useInsideControl();
+    const ownField = rendersOwnField('ColorPicker', {
+        insideField,
+        insideControl,
+        label,
+        message,
+        horizontal,
+        fieldClassName,
+    });
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: ownField,
+        callerProps: props,
+    });
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+    const pickerClass = usePrefixedClassNames('color-picker', {
+        'is-disabled': disabled,
+    });
+    const helpClass = usePrefixedClassNames('help', {
+        [`is-${messageColor}`]: !!messageColor,
+    });
+    const context = useColorPicker({
+        value,
+        defaultValue,
+        onChange,
+        onChangeEnd,
+        format,
+        alpha,
+        disabled,
+        swatches,
+        eyeDropper,
+        labels,
+    });
+    const picker = (jsxs("div", { ref: ref, className: classNames(pickerClass, bulmaHelperClasses, className), role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: [jsx(ColorPickerContext.Provider, { value: context, children: children ?? (jsxs(Fragment, { children: [jsx(ColorPickerArea, {}), jsx(ColorPickerHueSlider, {}), alpha && jsx(ColorPickerAlphaSlider, {}), jsx(ColorPickerInput, {}), swatches && jsx(ColorPickerSwatches, {})] })) }), name && (jsx("input", { type: "hidden", name: name, form: form, value: context.text, disabled: disabled }))] }));
+    let content = picker;
+    if (rendersOwnControl('ColorPicker', { insideControl })) {
+        content = jsx(Control, { children: content });
+    }
+    const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
+    if (ownField) {
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+    }
+    return (jsxs(Fragment, { children: [content, messageEl] }));
+});
+ColorPickerRoot.displayName = 'ColorPicker';
+const ColorPicker = withSubComponents(ColorPickerRoot, {
+    Area: ColorPickerArea,
+    HueSlider: ColorPickerHueSlider,
+    AlphaSlider: ColorPickerAlphaSlider,
+    Swatches: ColorPickerSwatches,
+    Input: ColorPickerInput,
+});
+
+export { ColorPicker, ColorPickerAlphaSlider, ColorPickerArea, ColorPickerHueSlider, ColorPickerInput, ColorPickerSwatches };
+//# sourceMappingURL=ColorPicker.js.map