@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/esm/colorpicker/colorpicker.js

@@ -0,0 +1,403 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TinyColor } from "@ctrl/tinycolor";
+import { Check, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { useFormField } from "../form/form.js";
+import { classes } from "../shared/classes.js";
+import { FormValue, useFieldValue } from "../shared/field.js";
+import { FloatingPanel, useFloatingDismiss, usePopupState } from "../shared/floating.js";
+import { GradientColorPicker } from "./gradient.js";
+const clamp = (value)=>Math.min(1, Math.max(0, value));
+function SolidColorPicker({ value, defaultValue = '#20834a', onChange, onChangeComplete, format: formatProp, defaultFormat = 'hex', onFormatChange, disableAlpha = false, showText = false, allowClear = false, presets, size = 'md', status: statusProp, required: requiredProp, popupWidth = 280, onOpenChange, gradient = false, mode: _mode, open: controlledOpen, defaultOpen, popupClassName, popupStyle, popupRender, popupPlacement, getPopupContainer, readOnly, disabled: disabledProp, name, form, className, style, 'aria-label': label, ...props }) {
+    const { messages } = useLeafConfig();
+    const field = useFormField();
+    const disabled = disabledProp || field?.disabled;
+    const required = requiredProp ?? field?.required;
+    const status = statusProp ?? (field?.error ? 'error' : void 0);
+    const trigger = useRef(null);
+    const root = useRef(null);
+    const panel = useRef(null);
+    const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);
+    const [internalFormat, setFormat] = useState(defaultFormat);
+    const format = formatProp ?? internalFormat;
+    const [open, setOpen] = usePopupState(disabled || readOnly, onOpenChange, controlledOpen, defaultOpen);
+    const id = `${useId()}-color`;
+    const color = new TinyColor(current || '#20834a');
+    const hsv = color.isValid ? color.toHsv() : new TinyColor('#20834a').toHsv();
+    const [rememberedHue, setRememberedHue] = useState(hsv.h);
+    const [coordinates, setCoordinates] = useState();
+    const activeHsv = {
+        ...coordinates && new TinyColor(coordinates.value).toHex8String() === color.toHex8String() ? coordinates.hsv : {
+            ...hsv,
+            h: 0 === hsv.s || 0 === hsv.v ? rememberedHue : hsv.h
+        },
+        a: disableAlpha ? 1 : hsv.a
+    };
+    const serialize = (next)=>{
+        const normalized = disableAlpha ? next.setAlpha(1) : next;
+        return 'rgb' === format ? normalized.toRgbString() : 'hsl' === format ? normalized.toHslString() : normalized.getAlpha() < 1 ? normalized.toHex8String() : normalized.toHexString();
+    };
+    const display = current ? serialize(new TinyColor(activeHsv)) : '';
+    const [input, setInput] = useState(display);
+    const [invalid, setInvalid] = useState(false);
+    const latest = useRef(display);
+    useEffect(()=>{
+        setInput(display);
+        setInvalid(false);
+    }, [
+        display
+    ]);
+    const close = ()=>{
+        setOpen(false);
+        setInput(display);
+        setInvalid(false);
+    };
+    useFloatingDismiss(open, close, trigger, panel, root);
+    const change = (next, complete = false)=>{
+        if (disabled || readOnly) return;
+        setRememberedHue(next.h);
+        const result = serialize(new TinyColor(next));
+        setCoordinates({
+            value: result,
+            hsv: {
+                ...next,
+                a: disableAlpha ? 1 : next.a
+            }
+        });
+        latest.current = result;
+        setCurrent(result);
+        setInput(result);
+        setInvalid(false);
+        if (result !== current) onChange?.(result);
+        if (complete) onChangeComplete?.(result);
+    };
+    const chooseText = ()=>{
+        if (input === display) return;
+        const next = new TinyColor(input);
+        if (!next.isValid) return void setInvalid(true);
+        change(next.toHsv(), true);
+    };
+    const areaChange = (event)=>{
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (!rect.width || !rect.height) return;
+        change({
+            ...activeHsv,
+            s: clamp((event.clientX - rect.left) / rect.width),
+            v: clamp(1 - (event.clientY - rect.top) / rect.height)
+        });
+    };
+    const areaKey = (event)=>{
+        const step = event.shiftKey ? 0.1 : 0.01;
+        const next = {
+            ...activeHsv
+        };
+        if ('ArrowLeft' === event.key) next.s = clamp(next.s - step);
+        else if ('ArrowRight' === event.key) next.s = clamp(next.s + step);
+        else if ('ArrowUp' === event.key) next.v = clamp(next.v + step);
+        else if ('ArrowDown' === event.key) next.v = clamp(next.v - step);
+        else if ('Home' === event.key) next.s = 0;
+        else {
+            if ('End' !== event.key) return;
+            next.s = 1;
+        }
+        event.preventDefault();
+        change(next, true);
+    };
+    const previewColor = current ? new TinyColor(activeHsv).toRgbString() : 'transparent';
+    const hueColor = new TinyColor({
+        h: activeHsv.h,
+        s: 1,
+        v: 1
+    }).toHexString();
+    const opaqueColor = new TinyColor({
+        ...activeHsv,
+        a: 1
+    }).toRgbString();
+    const clearable = allowClear && Boolean(current) && !disabled && !readOnly;
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("span", {
+                ref: root,
+                className: classes('leaf-color-picker', `leaf-color-picker--${size}`, className),
+                style: style,
+                "data-status": status,
+                "data-disabled": disabled || void 0,
+                "data-readonly": readOnly || void 0,
+                "data-open": open || void 0,
+                onMouseDown: (event)=>{
+                    if (!disabled && event.target === event.currentTarget) event.preventDefault();
+                },
+                onClick: (event)=>{
+                    if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    trigger.current?.focus();
+                    trigger.current?.click();
+                },
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        ...props,
+                        ref: trigger,
+                        type: props.type ?? 'button',
+                        form: form,
+                        id: props.id ?? field?.id,
+                        className: "leaf-color-picker__trigger",
+                        disabled: disabled,
+                        "aria-label": label ?? (field?.labelId ? void 0 : messages.colorPicker.label),
+                        "aria-labelledby": props['aria-labelledby'] ?? field?.labelId,
+                        "aria-describedby": [
+                            props['aria-describedby'],
+                            field?.descriptionId
+                        ].filter(Boolean).join(' ') || void 0,
+                        "aria-invalid": 'error' === status || props['aria-invalid'],
+                        "aria-haspopup": "dialog",
+                        "aria-expanded": open,
+                        "aria-controls": open ? id : void 0,
+                        onClick: (event)=>{
+                            props.onClick?.(event);
+                            if (!event.defaultPrevented) setOpen(!open);
+                        },
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "leaf-color-picker__swatch",
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ jsx("i", {
+                                    style: {
+                                        background: previewColor
+                                    }
+                                })
+                            }),
+                            showText && /*#__PURE__*/ jsx("span", {
+                                className: "leaf-color-picker__text",
+                                children: 'function' == typeof showText ? showText(display) : display || messages.colorPicker.label
+                            })
+                        ]
+                    }),
+                    clearable && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        className: "leaf-color-picker__clear",
+                        "aria-label": messages.colorPicker.clear,
+                        onClick: ()=>{
+                            setCurrent('');
+                            onChange?.('');
+                            onChangeComplete?.('');
+                            trigger.current?.focus();
+                        },
+                        children: /*#__PURE__*/ jsx(X, {
+                            size: 14,
+                            "aria-hidden": "true"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(FormValue, {
+                        value: current,
+                        name: name,
+                        form: form,
+                        disabled: disabled,
+                        required: required,
+                        triggerRef: trigger
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(FloatingPanel, {
+                open: open,
+                triggerRef: trigger,
+                panelRef: panel,
+                className: classes('leaf-floating', 'leaf-color-picker__panel', popupClassName),
+                id: id,
+                role: "dialog",
+                "aria-label": messages.colorPicker.label,
+                width: popupWidth,
+                style: popupStyle,
+                render: popupRender,
+                placement: popupPlacement,
+                container: getPopupContainer,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        role: "slider",
+                        tabIndex: 0,
+                        "aria-label": `${messages.colorPicker.saturation} / ${messages.colorPicker.brightness}`,
+                        "aria-valuemin": 0,
+                        "aria-valuemax": 100,
+                        "aria-valuenow": Math.round(100 * activeHsv.s),
+                        "aria-valuetext": `${messages.colorPicker.saturation} ${Math.round(100 * activeHsv.s)}%, ${messages.colorPicker.brightness} ${Math.round(100 * activeHsv.v)}%`,
+                        className: "leaf-color-picker__area",
+                        style: {
+                            backgroundImage: gradient ? `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})` : void 0,
+                            backgroundColor: hueColor
+                        },
+                        onKeyDown: areaKey,
+                        onPointerDown: (event)=>{
+                            if (0 !== event.button) return;
+                            event.preventDefault();
+                            event.currentTarget.focus();
+                            event.currentTarget.setPointerCapture(event.pointerId);
+                            areaChange(event);
+                        },
+                        onPointerMove: (event)=>{
+                            if (event.currentTarget.hasPointerCapture(event.pointerId)) areaChange(event);
+                        },
+                        onPointerUp: (event)=>{
+                            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                                event.currentTarget.releasePointerCapture(event.pointerId);
+                                onChangeComplete?.(latest.current);
+                            }
+                        },
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "leaf-color-picker__handle",
+                            style: {
+                                left: `${100 * activeHsv.s}%`,
+                                top: `${(1 - activeHsv.v) * 100}%`,
+                                background: opaqueColor
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-color-picker__sliders",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "leaf-color-picker__swatch leaf-color-picker__swatch--large",
+                                "aria-hidden": "true",
+                                children: /*#__PURE__*/ jsx("i", {
+                                    style: {
+                                        background: previewColor
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                children: [
+                                    /*#__PURE__*/ jsx("input", {
+                                        type: "range",
+                                        className: "leaf-color-picker__hue",
+                                        min: 0,
+                                        max: 359,
+                                        value: Math.round(activeHsv.h),
+                                        "aria-label": messages.colorPicker.hue,
+                                        onChange: (event)=>change({
+                                                ...activeHsv,
+                                                h: Number(event.target.value)
+                                            }),
+                                        onPointerUp: ()=>onChangeComplete?.(latest.current),
+                                        onKeyUp: ()=>onChangeComplete?.(latest.current)
+                                    }),
+                                    !disableAlpha && /*#__PURE__*/ jsx("input", {
+                                        type: "range",
+                                        className: "leaf-color-picker__alpha",
+                                        min: 0,
+                                        max: 100,
+                                        value: Math.round(100 * activeHsv.a),
+                                        "aria-label": messages.colorPicker.alpha,
+                                        style: {
+                                            '--leaf-alpha-color': opaqueColor
+                                        },
+                                        onChange: (event)=>change({
+                                                ...activeHsv,
+                                                a: Number(event.target.value) / 100
+                                            }),
+                                        onPointerUp: ()=>onChangeComplete?.(latest.current),
+                                        onKeyUp: ()=>onChangeComplete?.(latest.current)
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("fieldset", {
+                        className: "leaf-color-picker__formats",
+                        "aria-label": messages.colorPicker.value,
+                        children: [
+                            'hex',
+                            'rgb',
+                            'hsl'
+                        ].map((next)=>/*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                "aria-pressed": format === next,
+                                onClick: ()=>{
+                                    if (void 0 === formatProp) setFormat(next);
+                                    onFormatChange?.(next);
+                                },
+                                children: next.toUpperCase()
+                            }, next))
+                    }),
+                    /*#__PURE__*/ jsx("input", {
+                        className: "leaf-color-picker__input",
+                        "aria-label": messages.colorPicker.value,
+                        "aria-invalid": invalid || void 0,
+                        "aria-describedby": invalid ? `${id}-error` : void 0,
+                        value: input,
+                        onChange: (event)=>{
+                            setInput(event.target.value);
+                            setInvalid(false);
+                        },
+                        onBlur: chooseText,
+                        onKeyDown: (event)=>{
+                            if ('Enter' === event.key) {
+                                event.preventDefault();
+                                chooseText();
+                            }
+                        }
+                    }),
+                    invalid && /*#__PURE__*/ jsx("span", {
+                        className: "leaf-color-picker__error",
+                        id: `${id}-error`,
+                        children: messages.colorPicker.invalid
+                    }),
+                    (presets ?? [
+                        {
+                            label: messages.colorPicker.presets,
+                            colors: [
+                                '#20834a',
+                                '#13a8a8',
+                                '#1677ff',
+                                '#7654c6',
+                                '#ffc53d',
+                                '#f49b23',
+                                '#ef5350',
+                                '#203329'
+                            ]
+                        }
+                    ]).map((group, index)=>/*#__PURE__*/ jsxs("div", {
+                            className: "leaf-color-picker__presets",
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "leaf-color-picker__preset-label",
+                                    children: group.label
+                                }),
+                                /*#__PURE__*/ jsx("div", {
+                                    children: [
+                                        ...new Set(group.colors)
+                                    ].map((preset)=>/*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            className: "leaf-color-picker__preset",
+                                            "aria-label": preset,
+                                            "aria-pressed": new TinyColor(preset).toHex8String() === new TinyColor(activeHsv).toHex8String(),
+                                            style: {
+                                                background: preset,
+                                                color: new TinyColor(preset).isLight() ? '#203329' : '#fff'
+                                            },
+                                            onClick: ()=>change(new TinyColor(preset).toHsv(), true),
+                                            children: new TinyColor(preset).toHex8String() === new TinyColor(activeHsv).toHex8String() && /*#__PURE__*/ jsx(Check, {
+                                                size: 12,
+                                                "aria-hidden": "true"
+                                            })
+                                        }, preset))
+                                })
+                            ]
+                        }, index))
+                ]
+            })
+        ]
+    });
+}
+function ColorPicker(rawProps) {
+    const props = useComponentProps('ColorPicker', rawProps);
+    return 'gradient' === props.mode || props.gradient ? /*#__PURE__*/ jsx(GradientColorPicker, {
+        ...props
+    }) : /*#__PURE__*/ jsx(SolidColorPicker, {
+        ...props
+    });
+}
+export { ColorPicker, SolidColorPicker };
+
+//# sourceMappingURL=colorpicker.js.map

package/dist/esm/colorpicker/colorpicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorpicker/colorpicker.js","sources":["../../../src/colorpicker/colorpicker.tsx"],"sourcesContent":["import { TinyColor } from '@ctrl/tinycolor';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { useComponentProps } from '../config-provider/component-defaults';\nimport { useLeafConfig } from '../config-provider/context';\nimport { useFormField } from '../form/form';\nimport { classes } from '../shared/classes';\nimport { FormValue, useFieldValue } from '../shared/field';\nimport {\n  FloatingPanel,\n  type PopupOptions,\n  useFloatingDismiss,\n  usePopupState,\n} from '../shared/floating';\nimport type { ControlSize, ControlStatus } from '../shared/types';\nimport { GradientColorPicker } from './gradient';\n\nexport interface ColorPreset {\n  label: ReactNode;\n  colors: readonly string[];\n}\nexport interface ColorPickerProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'>,\n    PopupOptions {\n  value?: string;\n  defaultValue?: string;\n  onChange?: (color: string) => void;\n  onChangeComplete?: (color: string) => void;\n  format?: 'hex' | 'rgb' | 'hsl';\n  defaultFormat?: 'hex' | 'rgb' | 'hsl';\n  onFormatChange?: (format: 'hex' | 'rgb' | 'hsl') => void;\n  disableAlpha?: boolean;\n  showText?: boolean | ((color: string) => ReactNode);\n  allowClear?: boolean;\n  presets?: readonly ColorPreset[];\n  size?: ControlSize;\n  status?: ControlStatus;\n  required?: boolean;\n  readOnly?: boolean;\n  popupWidth?: number | string;\n  onOpenChange?: (open: boolean) => void;\n  gradient?: boolean;\n  mode?: 'solid' | 'gradient';\n  open?: boolean;\n  defaultOpen?: boolean;\n  popupClassName?: string;\n  popupStyle?: CSSProperties;\n  popupRender?: (content: ReactNode) => ReactNode;\n  getPopupContainer?: () => Element | DocumentFragment;\n}\ntype HSV = { h: number; s: number; v: number; a: number };\nconst clamp = (value: number) => Math.min(1, Math.max(0, value));\nexport function SolidColorPicker({\n  value,\n  defaultValue = '#20834a',\n  onChange,\n  onChangeComplete,\n  format: formatProp,\n  defaultFormat = 'hex',\n  onFormatChange,\n  disableAlpha = false,\n  showText = false,\n  allowClear = false,\n  presets,\n  size = 'md',\n  status: statusProp,\n  required: requiredProp,\n  popupWidth = 280,\n  onOpenChange,\n  gradient = false,\n  mode: _mode,\n  open: controlledOpen,\n  defaultOpen,\n  popupClassName,\n  popupStyle,\n  popupRender,\n  popupPlacement,\n  getPopupContainer,\n  readOnly,\n  disabled: disabledProp,\n  name,\n  form,\n  className,\n  style,\n  'aria-label': label,\n  ...props\n}: ColorPickerProps) {\n  const { messages } = useLeafConfig();\n  const field = useFormField();\n  const disabled = disabledProp || field?.disabled;\n  const required = requiredProp ?? field?.required;\n  const status = statusProp ?? (field?.error ? 'error' : undefined);\n  const trigger = useRef<HTMLButtonElement>(null);\n  const root = useRef<HTMLSpanElement>(null);\n  const panel = useRef<HTMLDivElement>(null);\n  const [current, setCurrent] = useFieldValue(value, defaultValue, trigger, form);\n  const [internalFormat, setFormat] = useState(defaultFormat);\n  const format = formatProp ?? internalFormat;\n  const [open, setOpen] = usePopupState(\n    disabled || readOnly,\n    onOpenChange,\n    controlledOpen,\n    defaultOpen,\n  );\n  const id = `${useId()}-color`;\n  const color = new TinyColor(current || '#20834a');\n  const hsv = color.isValid ? color.toHsv() : new TinyColor('#20834a').toHsv();\n  const [rememberedHue, setRememberedHue] = useState(hsv.h);\n  const [coordinates, setCoordinates] = useState<{ value: string; hsv: HSV }>();\n  const activeHsv = {\n    ...(coordinates && new TinyColor(coordinates.value).toHex8String() === color.toHex8String()\n      ? coordinates.hsv\n      : { ...hsv, h: hsv.s === 0 || hsv.v === 0 ? rememberedHue : hsv.h }),\n    a: disableAlpha ? 1 : hsv.a,\n  };\n  const serialize = (next: TinyColor) => {\n    const normalized = disableAlpha ? next.setAlpha(1) : next;\n    return format === 'rgb'\n      ? normalized.toRgbString()\n      : format === 'hsl'\n        ? normalized.toHslString()\n        : normalized.getAlpha() < 1\n          ? normalized.toHex8String()\n          : normalized.toHexString();\n  };\n  const display = current ? serialize(new TinyColor(activeHsv)) : '';\n  const [input, setInput] = useState(display);\n  const [invalid, setInvalid] = useState(false);\n  const latest = useRef(display);\n  useEffect(() => {\n    setInput(display);\n    setInvalid(false);\n  }, [display]);\n  const close = () => {\n    setOpen(false);\n    setInput(display);\n    setInvalid(false);\n  };\n  useFloatingDismiss(open, close, trigger, panel, root);\n  const change = (next: HSV, complete = false) => {\n    if (disabled || readOnly) return;\n    setRememberedHue(next.h);\n    const result = serialize(new TinyColor(next));\n    setCoordinates({ value: result, hsv: { ...next, a: disableAlpha ? 1 : next.a } });\n    latest.current = result;\n    setCurrent(result);\n    setInput(result);\n    setInvalid(false);\n    if (result !== current) onChange?.(result);\n    if (complete) onChangeComplete?.(result);\n  };\n  const chooseText = () => {\n    if (input === display) return;\n    const next = new TinyColor(input);\n    if (!next.isValid) {\n      setInvalid(true);\n      return;\n    }\n    change(next.toHsv(), true);\n  };\n  const areaChange = (event: PointerEvent<HTMLDivElement>) => {\n    const rect = event.currentTarget.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n    change({\n      ...activeHsv,\n      s: clamp((event.clientX - rect.left) / rect.width),\n      v: clamp(1 - (event.clientY - rect.top) / rect.height),\n    });\n  };\n  const areaKey = (event: KeyboardEvent<HTMLDivElement>) => {\n    const step = event.shiftKey ? 0.1 : 0.01;\n    const next = { ...activeHsv };\n    if (event.key === 'ArrowLeft') next.s = clamp(next.s - step);\n    else if (event.key === 'ArrowRight') next.s = clamp(next.s + step);\n    else if (event.key === 'ArrowUp') next.v = clamp(next.v + step);\n    else if (event.key === 'ArrowDown') next.v = clamp(next.v - step);\n    else if (event.key === 'Home') next.s = 0;\n    else if (event.key === 'End') next.s = 1;\n    else return;\n    event.preventDefault();\n    change(next, true);\n  };\n  const previewColor = current ? new TinyColor(activeHsv).toRgbString() : 'transparent';\n  const hueColor = new TinyColor({ h: activeHsv.h, s: 1, v: 1 }).toHexString();\n  const opaqueColor = new TinyColor({ ...activeHsv, a: 1 }).toRgbString();\n  const clearable = allowClear && Boolean(current) && !disabled && !readOnly;\n  return (\n    <>\n      {/* biome-ignore lint/a11y/noStaticElementInteractions: Pointer events on the outer row forward to the keyboard-accessible trigger button. */}\n      {/* biome-ignore lint/a11y/useKeyWithClickEvents: The enclosed native button owns keyboard interaction; this wrapper only extends its hit area. */}\n      <span\n        ref={root}\n        className={classes('leaf-color-picker', `leaf-color-picker--${size}`, className)}\n        style={style}\n        data-status={status}\n        data-disabled={disabled || undefined}\n        data-readonly={readOnly || undefined}\n        data-open={open || undefined}\n        onMouseDown={(event) => {\n          if (!disabled && event.target === event.currentTarget) event.preventDefault();\n        }}\n        onClick={(event) => {\n          if (disabled || event.defaultPrevented || event.target !== event.currentTarget) return;\n          event.preventDefault();\n          event.stopPropagation();\n          trigger.current?.focus();\n          trigger.current?.click();\n        }}\n      >\n        <button\n          {...props}\n          ref={trigger}\n          type={props.type ?? 'button'}\n          form={form}\n          id={props.id ?? field?.id}\n          className=\"leaf-color-picker__trigger\"\n          disabled={disabled}\n          aria-label={label ?? (field?.labelId ? undefined : messages.colorPicker.label)}\n          aria-labelledby={props['aria-labelledby'] ?? field?.labelId}\n          aria-describedby={\n            [props['aria-describedby'], field?.descriptionId].filter(Boolean).join(' ') || undefined\n          }\n          aria-invalid={status === 'error' || props['aria-invalid']}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-controls={open ? id : undefined}\n          onClick={(event) => {\n            props.onClick?.(event);\n            if (!event.defaultPrevented) setOpen(!open);\n          }}\n        >\n          <span className=\"leaf-color-picker__swatch\" aria-hidden=\"true\">\n            <i style={{ background: previewColor }} />\n          </span>\n          {showText && (\n            <span className=\"leaf-color-picker__text\">\n              {typeof showText === 'function'\n                ? showText(display)\n                : display || messages.colorPicker.label}\n            </span>\n          )}\n        </button>\n        {clearable && (\n          <button\n            type=\"button\"\n            className=\"leaf-color-picker__clear\"\n            aria-label={messages.colorPicker.clear}\n            onClick={() => {\n              setCurrent('');\n              onChange?.('');\n              onChangeComplete?.('');\n              trigger.current?.focus();\n            }}\n          >\n            <X size={14} aria-hidden=\"true\" />\n          </button>\n        )}\n        <FormValue\n          value={current}\n          name={name}\n          form={form}\n          disabled={disabled}\n          required={required}\n          triggerRef={trigger}\n        />\n      </span>\n      <FloatingPanel\n        open={open}\n        triggerRef={trigger}\n        panelRef={panel}\n        className={classes('leaf-floating', 'leaf-color-picker__panel', popupClassName)}\n        id={id}\n        role=\"dialog\"\n        aria-label={messages.colorPicker.label}\n        width={popupWidth}\n        style={popupStyle}\n        render={popupRender}\n        placement={popupPlacement}\n        container={getPopupContainer}\n      >\n        <div\n          role=\"slider\"\n          tabIndex={0}\n          aria-label={`${messages.colorPicker.saturation} / ${messages.colorPicker.brightness}`}\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={Math.round(activeHsv.s * 100)}\n          aria-valuetext={`${messages.colorPicker.saturation} ${Math.round(activeHsv.s * 100)}%, ${messages.colorPicker.brightness} ${Math.round(activeHsv.v * 100)}%`}\n          className=\"leaf-color-picker__area\"\n          style={{\n            backgroundImage: gradient\n              ? `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${hueColor})`\n              : undefined,\n            backgroundColor: hueColor,\n          }}\n          onKeyDown={areaKey}\n          onPointerDown={(event) => {\n            if (event.button !== 0) return;\n            event.preventDefault();\n            event.currentTarget.focus();\n            event.currentTarget.setPointerCapture(event.pointerId);\n            areaChange(event);\n          }}\n          onPointerMove={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) areaChange(event);\n          }}\n          onPointerUp={(event) => {\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId);\n              onChangeComplete?.(latest.current);\n            }\n          }}\n        >\n          <span\n            className=\"leaf-color-picker__handle\"\n            style={{\n              left: `${activeHsv.s * 100}%`,\n              top: `${(1 - activeHsv.v) * 100}%`,\n              background: opaqueColor,\n            }}\n          />\n        </div>\n        <div className=\"leaf-color-picker__sliders\">\n          <span\n            className=\"leaf-color-picker__swatch leaf-color-picker__swatch--large\"\n            aria-hidden=\"true\"\n          >\n            <i style={{ background: previewColor }} />\n          </span>\n          <div>\n            <input\n              type=\"range\"\n              className=\"leaf-color-picker__hue\"\n              min={0}\n              max={359}\n              value={Math.round(activeHsv.h)}\n              aria-label={messages.colorPicker.hue}\n              onChange={(event) => change({ ...activeHsv, h: Number(event.target.value) })}\n              onPointerUp={() => onChangeComplete?.(latest.current)}\n              onKeyUp={() => onChangeComplete?.(latest.current)}\n            />\n            {!disableAlpha && (\n              <input\n                type=\"range\"\n                className=\"leaf-color-picker__alpha\"\n                min={0}\n                max={100}\n                value={Math.round(activeHsv.a * 100)}\n                aria-label={messages.colorPicker.alpha}\n                style={{ '--leaf-alpha-color': opaqueColor } as CSSProperties}\n                onChange={(event) => change({ ...activeHsv, a: Number(event.target.value) / 100 })}\n                onPointerUp={() => onChangeComplete?.(latest.current)}\n                onKeyUp={() => onChangeComplete?.(latest.current)}\n              />\n            )}\n          </div>\n        </div>\n        <fieldset className=\"leaf-color-picker__formats\" aria-label={messages.colorPicker.value}>\n          {(['hex', 'rgb', 'hsl'] as const).map((next) => (\n            <button\n              type=\"button\"\n              key={next}\n              aria-pressed={format === next}\n              onClick={() => {\n                if (formatProp === undefined) setFormat(next);\n                onFormatChange?.(next);\n              }}\n            >\n              {next.toUpperCase()}\n            </button>\n          ))}\n        </fieldset>\n        <input\n          className=\"leaf-color-picker__input\"\n          aria-label={messages.colorPicker.value}\n          aria-invalid={invalid || undefined}\n          aria-describedby={invalid ? `${id}-error` : undefined}\n          value={input}\n          onChange={(event) => {\n            setInput(event.target.value);\n            setInvalid(false);\n          }}\n          onBlur={chooseText}\n          onKeyDown={(event) => {\n            if (event.key === 'Enter') {\n              event.preventDefault();\n              chooseText();\n            }\n          }}\n        />\n        {invalid && (\n          <span className=\"leaf-color-picker__error\" id={`${id}-error`}>\n            {messages.colorPicker.invalid}\n          </span>\n        )}\n        {(\n          presets ?? [\n            {\n              label: messages.colorPicker.presets,\n              colors: [\n                '#20834a',\n                '#13a8a8',\n                '#1677ff',\n                '#7654c6',\n                '#ffc53d',\n                '#f49b23',\n                '#ef5350',\n                '#203329',\n              ],\n            },\n          ]\n        ).map((group, index) => (\n          // biome-ignore lint/suspicious/noArrayIndexKey: Preset groups are static descriptions supplied by the consumer.\n          <div className=\"leaf-color-picker__presets\" key={index}>\n            <div className=\"leaf-color-picker__preset-label\">{group.label}</div>\n            <div>\n              {[...new Set(group.colors)].map((preset) => (\n                <button\n                  type=\"button\"\n                  key={preset}\n                  className=\"leaf-color-picker__preset\"\n                  aria-label={preset}\n                  aria-pressed={\n                    new TinyColor(preset).toHex8String() === new TinyColor(activeHsv).toHex8String()\n                  }\n                  style={{\n                    background: preset,\n                    color: new TinyColor(preset).isLight() ? '#203329' : '#fff',\n                  }}\n                  onClick={() => change(new TinyColor(preset).toHsv(), true)}\n                >\n                  {new TinyColor(preset).toHex8String() ===\n                    new TinyColor(activeHsv).toHex8String() && (\n                    <Check size={12} aria-hidden=\"true\" />\n                  )}\n                </button>\n              ))}\n            </div>\n          </div>\n        ))}\n      </FloatingPanel>\n    </>\n  );\n}\n\nexport function ColorPicker(rawProps: ColorPickerProps) {\n  const props = useComponentProps('ColorPicker', rawProps);\n  return props.mode === 'gradient' || props.gradient ? (\n    <GradientColorPicker {...props} />\n  ) : (\n    <SolidColorPicker {...props} />\n  );\n}\n"],"names":["clamp","value","Math","SolidColorPicker","defaultValue","onChange","onChangeComplete","formatProp","defaultFormat","onFormatChange","disableAlpha","showText","allowClear","presets","size","statusProp","requiredProp","popupWidth","onOpenChange","gradient","_mode","controlledOpen","defaultOpen","popupClassName","popupStyle","popupRender","popupPlacement","getPopupContainer","readOnly","disabledProp","name","form","className","style","label","props","messages","useLeafConfig","field","useFormField","disabled","required","status","undefined","trigger","useRef","root","panel","current","setCurrent","useFieldValue","internalFormat","setFormat","useState","format","open","setOpen","usePopupState","id","useId","color","TinyColor","hsv","rememberedHue","setRememberedHue","coordinates","setCoordinates","activeHsv","serialize","next","normalized","display","input","setInput","invalid","setInvalid","latest","useEffect","close","useFloatingDismiss","change","complete","result","chooseText","areaChange","event","rect","areaKey","step","previewColor","hueColor","opaqueColor","clearable","Boolean","classes","X","FormValue","FloatingPanel","Number","group","index","Set","preset","Check","ColorPicker","rawProps","useComponentProps","GradientColorPicker"],"mappings":"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"}

package/dist/esm/colorpicker/gradient.d.ts

@@ -0,0 +1,14 @@
+import { type ColorPickerProps } from './colorpicker.js';
+export interface ColorGradientStop {
+    key?: string;
+    color: string;
+    offset: number;
+}
+export interface ColorGradient {
+    angle: number;
+    stops: readonly ColorGradientStop[];
+}
+export declare function gradientString({ angle, stops }: ColorGradient): string;
+export declare function parseGradient(value: string): ColorGradient | null;
+export declare function GradientColorPicker({ value, defaultValue, onChange, onChangeComplete, size, disabled: disabledProp, readOnly, allowClear, status: statusProp, format, defaultFormat, onFormatChange, disableAlpha, presets, gradient: _gradient, mode: _mode, name, form, required, open: controlledOpen, defaultOpen, onOpenChange, popupWidth, popupClassName, popupStyle, popupRender, popupPlacement, getPopupContainer, showText, className, style, id, ...props }: ColorPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=gradient.d.ts.map

package/dist/esm/colorpicker/gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradient.d.ts","sourceRoot":"","sources":["../../../src/colorpicker/gradient.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,gBAAgB,EAAoB,MAAM,eAAe,CAAC;AACxE,MAAM,WAAW,iBAAiB;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,iBAAiB,EAAE,CAAC;CACrC;AACD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,aAAa,UAK7D;AACD,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,GAAG,IAAI,CAYjE;AASD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,YAAsB,EACtB,QAAQ,EACR,gBAAgB,EAChB,IAAW,EACX,QAAQ,EAAE,YAAY,EACtB,QAAQ,EACR,UAAkB,EAClB,MAAM,EAAE,UAAU,EAClB,MAAM,EACN,aAAa,EACb,cAAc,EACd,YAAY,EACZ,OAAO,EACP,QAAQ,EAAE,SAAS,EACnB,IAAI,EAAE,KAAK,EACX,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,EACX,YAAY,EACZ,UAAgB,EAChB,cAAc,EACd,UAAU,EACV,WAAW,EACX,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,EAAE,EACF,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkPlB"}