@inkra/react 0.3.0 → 0.5.0

package/dist/choice-grid/index.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useId, useImperativeHandle, useRef, } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
+import { Children, createContext, forwardRef, memo, isValidElement, useContext, useCallback, useMemo, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Checkbox } from '../selection/Checkbox.js';
 import { RadioGroup, RadioGroupItem } from '../selection/RadioGroup.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
+const noPagedOptions = [];
 function mergeIds(...values) {
     const merged = Array.from(new Set(values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? [])));
     return merged.length ? merged.join(' ') : undefined;
@@ -24,8 +27,9 @@ function gridStyle(style, columns, minItemWidth) {
         '--inkra-choice-grid-min-item': minItemWidth,
     };
 }
-export const ChoiceGrid = forwardRef(function ChoiceGrid(props, forwardedRef) {
-    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, columns, description, disabled = false, error, form, label, minItemWidth = '13rem', name, style, type = 'single', ...rest } = props;
+export const ChoiceGrid = memo(forwardRef(function ChoiceGrid(props, forwardedRef) {
+    const { t } = useInkraLocale();
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, children, className, columns, description, disabled = false, error, form, label, minItemWidth = '13rem', name, pageSize, previousPageLabel = t('common.previousPage'), nextPageLabel = t('common.nextPage'), pageLabel = (page, pages) => `${page} / ${pages}`, style, type = 'single', ...rest } = props;
     const generatedId = useId();
     const descriptionId = description == null ? undefined : `inkra-choice-grid-${generatedId}-description`;
     const errorId = error == null ? undefined : `inkra-choice-grid-${generatedId}-error`;
@@ -34,31 +38,50 @@ export const ChoiceGrid = forwardRef(function ChoiceGrid(props, forwardedRef) {
     const invalid = Boolean(error) || rest['aria-invalid'] === true || rest['aria-invalid'] === 'true';
     const rootRef = useRef(null);
     useImperativeHandle(forwardedRef, () => rootRef.current);
+    const multipleValues = props.type === 'multiple' ? props.values : undefined;
+    const multipleDefaults = props.type === 'multiple' ? props.defaultValues : undefined;
+    const onValuesChange = props.type === 'multiple' ? props.onValuesChange : undefined;
+    const values = useMemo(() => multipleValues === undefined ? undefined : new Set(multipleValues), [multipleValues]);
+    const defaultValues = useMemo(() => multipleDefaults === undefined ? undefined : new Set(multipleDefaults), [multipleDefaults]);
+    const [page, setPage] = useState(0);
+    const directOptions = useMemo(() => pageSize === undefined ? noPagedOptions : Children.toArray(children), [children, pageSize]);
+    const controlled = props.type === 'multiple' ? props.values !== undefined : props.value !== undefined;
+    const paged = controlled && pageSize !== undefined && Number.isFinite(pageSize) && directOptions.length > 0
+        && directOptions.every(child => isValidElement(child) && child.type === ChoiceGridOption && !child.props.required);
+    const pageLength = paged ? Math.max(1, Math.floor(pageSize)) : 1;
+    const pageCount = paged ? Math.ceil(directOptions.length / pageLength) : 0;
+    const currentPage = Math.min(page, Math.max(0, pageCount - 1));
+    const pageChildren = paged ? directOptions.map((child, index) => {
+        const option = child;
+        if (index >= currentPage * pageLength && index < (currentPage + 1) * pageLength)
+            return child;
+        const selected = props.type === 'multiple' ? values?.has(option.props.value) : props.value === option.props.value;
+        return selected ? _jsx("input", { type: "hidden", name: name, value: option.props.value, disabled: disabled || option.props.disabled, form: option.props.form ?? form }, option.key) : null;
+    }) : children;
+    const pageControls = paged ? _jsxs("nav", { "aria-label": typeof label === 'string' ? label : undefined, children: [_jsx(Button, { size: "sm", variant: "ghost", "aria-label": previousPageLabel, disabled: disabled || currentPage === 0, onClick: () => setPage(currentPage - 1), children: previousPageLabel }), _jsx("span", { "aria-live": "polite", children: pageLabel(currentPage + 1, pageCount) }), _jsx(Button, { size: "sm", variant: "ghost", "aria-label": nextPageLabel, disabled: disabled || currentPage >= pageCount - 1, onClick: () => setPage(currentPage + 1), children: nextPageLabel })] }) : null;
+    const pagingValues = paged ? values : undefined;
+    const onMultipleChange = useCallback((optionValue, checked) => {
+        if (!onValuesChange)
+            return;
+        if (paged) {
+            onValuesChange(directOptions.filter(option => option.props.value === optionValue ? checked : pagingValues?.has(option.props.value)).map(option => option.props.value));
+            return;
+        }
+        const selected = Array.from(rootRef.current?.querySelectorAll('input[type="checkbox"][data-choice-grid-value]') ?? []).filter(input => input.value === optionValue ? checked : input.checked)
+            .map(input => input.value);
+        onValuesChange(selected);
+    }, [onValuesChange, paged, directOptions, pagingValues]);
+    const context = useMemo(() => ({
+        defaultValues, disabled, form, mode: type, name, onMultipleChange, values,
+    }), [defaultValues, disabled, form, type, name, onMultipleChange, values]);
     if (type === 'single') {
         const single = props;
         const { defaultValue: _defaultValue, onValueChange: _onValueChange, value: _value, ...singleFieldsetProps } = rest;
-        return (_jsxs("div", { className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "single", style: gridStyle(style, columns, minItemWidth), children: [_jsx(ChoiceGridContext.Provider, { value: { disabled, form, mode: 'single', name }, children: _jsx(RadioGroup, { ...singleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue: single.defaultValue, disabled: disabled, form: form, label: label, name: name, onValueChange: single.onValueChange, ref: rootRef, value: single.value, children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+        return (_jsxs("div", { className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "single", style: gridStyle(style, columns, minItemWidth), children: [_jsxs(ChoiceGridContext.Provider, { value: context, children: [_jsx(RadioGroup, { ...singleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, defaultValue: single.defaultValue, disabled: disabled, form: form, label: label, name: name, onValueChange: single.onValueChange, ref: rootRef, value: single.value, children: pageChildren }), pageControls] }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
     }
-    const multiple = props;
     const { defaultValues: _defaultValues, onValuesChange: _onValuesChange, values: _values, ...multipleFieldsetProps } = rest;
-    const onMultipleChange = (optionValue, checked) => {
-        if (!multiple.onValuesChange)
-            return;
-        const selected = Array.from(rootRef.current?.querySelectorAll('input[type="checkbox"][data-choice-grid-value]') ?? []).filter(input => input.value === optionValue ? checked : input.checked)
-            .map(input => input.value);
-        multiple.onValuesChange(selected);
-    };
-    const context = {
-        defaultValues: multiple.defaultValues,
-        disabled,
-        form,
-        mode: 'multiple',
-        name,
-        onMultipleChange,
-        values: multiple.values,
-    };
-    return (_jsxs("fieldset", { ...multipleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "multiple", disabled: disabled, form: form, ref: rootRef, style: gridStyle(style, columns, minItemWidth), children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-choice-grid__legend", seed: `inkra-choice-grid-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-choice-grid__legend", children: label }), _jsx(ChoiceGridContext.Provider, { value: context, children: _jsx("div", { className: "inkra-choice-grid__items", children: children }) }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
-});
+    return (_jsxs("fieldset", { ...multipleFieldsetProps, "aria-describedby": describedBy, "aria-errormessage": errorMessage, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: classes('inkra-choice-grid', className), "data-columns": columns, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-type": "multiple", disabled: disabled, form: form, ref: rootRef, style: gridStyle(style, columns, minItemWidth), children: [label == null ? null : typeof label === 'string' ? (_jsx(PencilText, { as: "legend", className: "inkra-choice-grid__legend", seed: `inkra-choice-grid-${generatedId}-label`, children: label })) : _jsx("legend", { className: "inkra-choice-grid__legend", children: label }), _jsxs(ChoiceGridContext.Provider, { value: context, children: [_jsx("div", { className: "inkra-choice-grid__items", children: pageChildren }), pageControls] }), _jsx(GroupMessages, { description: description, descriptionId: descriptionId, error: error, errorId: errorId })] }));
+}));
 function OptionMedia({ icon, image }) {
     if (image) {
         return (_jsx("span", { "aria-hidden": "true", className: "inkra-choice-grid__media", "data-kind": "image", children: _jsx("img", { ...image, alt: "" }) }));
@@ -68,18 +91,25 @@ function OptionMedia({ icon, image }) {
     }
     return null;
 }
-export const ChoiceGridOption = forwardRef(function ChoiceGridOption({ className, description, disabled = false, form, icon, id, image, label, onChange, required = false, seed, value, ...props }, ref) {
-    const context = useContext(ChoiceGridContext);
-    if (!context)
-        throw new Error('ChoiceGridOption must be rendered inside ChoiceGrid');
+// Resolve context in a small adapter. A membership change must not rebuild the
+// paper, text and controls of every option whose own checked state is unchanged.
+const ChoiceGridOptionView = memo(function ChoiceGridOptionView({ className, description, disabled = false, form, icon, id, image, label, mode, inputRef, groupName, multipleChecked, multipleDefaultChecked, onMultipleChange, onChange, required = false, seed, value, ...props }) {
     const generatedId = useId();
     const inputId = id ?? `inkra-choice-grid-option-${generatedId}`;
     const resolvedSeed = seed ?? inputId;
-    const itemDisabled = context.disabled || disabled;
-    const content = (_jsxs(_Fragment, { children: [_jsx(OptionMedia, { icon: icon, image: image }), _jsx("span", { className: "inkra-choice-grid__option-label", children: label })] }));
-    const control = context.mode === 'single' ? (_jsx(RadioGroupItem, { ...props, className: "inkra-choice-grid__control", description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, onChange: onChange, ref: ref, required: required, seed: resolvedSeed, value: value })) : (_jsx(Checkbox, { ...props, checked: context.values === undefined ? undefined : context.values.includes(value), className: "inkra-choice-grid__control", "data-choice-grid-value": "", defaultChecked: context.values === undefined ? context.defaultValues?.includes(value) : undefined, description: description, disabled: itemDisabled, form: form ?? context.form, id: inputId, label: content, name: context.name, onChange: (event) => {
+    const itemDisabled = disabled;
+    const content = (_jsxs(_Fragment, { children: [_jsx(OptionMedia, { icon: icon, image: image }), _jsx("span", { className: "inkra-choice-grid__option-label", children: typeof label === 'string'
+                    ? _jsx(PencilText, { seed: `${resolvedSeed}-label`, children: label })
+                    : label })] }));
+    const control = mode === 'single' ? (_jsx(RadioGroupItem, { ...props, className: "inkra-choice-grid__control", description: description, disabled: itemDisabled, form: form, id: inputId, label: content, onChange: onChange, ref: inputRef, required: required, seed: resolvedSeed, value: value })) : (_jsx(Checkbox, { ...props, checked: multipleChecked, className: "inkra-choice-grid__control", "data-choice-grid-value": "", defaultChecked: multipleDefaultChecked, description: description, disabled: itemDisabled, form: form, id: inputId, label: content, name: groupName, onChange: (event) => {
             onChange?.(event);
-            context.onMultipleChange?.(value, event.currentTarget.checked);
-        }, ref: ref, required: required, seed: resolvedSeed, value: value }));
-    return (_jsxs(PencilSurface, { as: "div", className: classes('inkra-choice-grid__option', className), "data-disabled": itemDisabled || undefined, radius: 8, seed: `${resolvedSeed}-paper`, variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__selection", radius: 8, seed: `${resolvedSeed}-selection`, variant: "selection" }), control, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" })] }));
+            onMultipleChange?.(value, event.currentTarget.checked);
+        }, ref: inputRef, required: required, seed: resolvedSeed, value: value }));
+    return (_jsxs(PencilSurface, { as: "div", className: classes('inkra-choice-grid__option', className), "data-disabled": itemDisabled || undefined, radius: 8, seed: `${resolvedSeed}-paper`, variant: "paper", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__selection", radius: 8, seed: `${resolvedSeed}-selection`, variant: "selection" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__focus", radius: 8, seed: `${resolvedSeed}-focus`, variant: "outline" }), control, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-choice-grid__outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" })] }));
+});
+export const ChoiceGridOption = forwardRef(function ChoiceGridOption(props, ref) {
+    const context = useContext(ChoiceGridContext);
+    if (!context)
+        throw new Error('ChoiceGridOption must be rendered inside ChoiceGrid');
+    return _jsx(ChoiceGridOptionView, { ...props, disabled: context.disabled || props.disabled, form: props.form ?? context.form, groupName: context.name, mode: context.mode, multipleChecked: context.values === undefined ? undefined : context.values.has(props.value), multipleDefaultChecked: context.values === undefined ? context.defaultValues?.has(props.value) : undefined, onMultipleChange: context.onMultipleChange, inputRef: ref });
 });

package/dist/color-picker/GradientEditor.d.ts

@@ -0,0 +1,40 @@
+import { type InkraTranslate } from '../i18n/index.js';
+import type { ReactNode } from 'react';
+import type { ColorGradient } from './gradient.js';
+import type { ColorValue } from './color.js';
+export interface ColorGradientLabels {
+    type?: string;
+    solid?: string;
+    linear?: string;
+    radial?: string;
+    conic?: string;
+    preview?: string;
+    stops?: string;
+    stop?: string;
+    stopColor?: string;
+    addStop?: string;
+    removeStop?: string;
+    reverse?: string;
+    position?: string;
+    angle?: string;
+    centerX?: string;
+    centerY?: string;
+    shape?: string;
+    circle?: string;
+    ellipse?: string;
+    extent?: string;
+    closestSide?: string;
+    closestCorner?: string;
+    farthestSide?: string;
+    farthestCorner?: string;
+    repeating?: string;
+}
+export declare const defaultGradientLabels: (t: InkraTranslate) => Required<ColorGradientLabels>;
+export declare function GradientEditor({ value, disabled, maxStops, labels, onChange, renderColorEditor }: {
+    value: ColorGradient;
+    disabled: boolean;
+    maxStops: number;
+    labels: Required<ColorGradientLabels>;
+    onChange: (value: ColorGradient, source: 'stop' | 'geometry') => void;
+    renderColorEditor: (value: ColorValue, onChange: (value: ColorValue) => void) => ReactNode;
+}): import("react").JSX.Element;

package/dist/color-picker/GradientEditor.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import {} from '../i18n/index.js';
+import { useId, useRef, useState } from 'react';
+import { __iconData as addIcon } from 'lucide-react/dist/esm/icons/plus.mjs';
+import { __iconData as removeIcon } from 'lucide-react/dist/esm/icons/minus.mjs';
+import { __iconData as reverseIcon } from 'lucide-react/dist/esm/icons/arrow-left-right.mjs';
+import { Button } from '../Button.js';
+import { ColorSwatch } from '../color-swatch/index.js';
+import { Field } from '../form/Field.js';
+import { InputNumber } from '../input-number/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Select } from '../select/index.js';
+import { Slider } from '../slider/index.js';
+import { Switch } from '../selection/Switch.js';
+import { ToggleGroup } from '../toggle-group/index.js';
+import { formatColorPaint } from './gradient.js';
+export const defaultGradientLabels = (t) => ({
+    type: t('gradient.type'), solid: t('gradient.solid'), linear: t('gradient.linear'), radial: t('gradient.radial'), conic: t('gradient.conic'),
+    preview: t('gradient.preview'), stops: t('gradient.stops'), stop: t('gradient.stop'), stopColor: t('gradient.stopColor'),
+    addStop: t('gradient.add'), removeStop: t('gradient.remove'), reverse: t('gradient.reverse'),
+    position: t('gradient.position'), angle: t('gradient.angle'), centerX: t('gradient.centerX'), centerY: t('gradient.centerY'),
+    shape: t('gradient.shape'), circle: t('gradient.circle'), ellipse: t('gradient.ellipse'), extent: t('gradient.extent'),
+    closestSide: t('gradient.closestSide'), closestCorner: t('gradient.closestCorner'),
+    farthestSide: t('gradient.farthestSide'), farthestCorner: t('gradient.farthestCorner'), repeating: t('gradient.repeat'),
+});
+const iconPaths = (data) => data.node.filter(([tag]) => tag === 'path').map(([, attrs]) => ({ d: attrs.d }));
+const actions = { add: iconPaths(addIcon), remove: iconPaths(removeIcon), reverse: iconPaths(reverseIcon) };
+export function GradientEditor({ value, disabled, maxStops, labels, onChange, renderColorEditor }) {
+    const id = useId();
+    const counter = useRef(0);
+    const [selected, setSelected] = useState();
+    const stop = value.stops.find(stop => stop.id === selected) ?? value.stops[0];
+    const updateStop = (patch) => onChange({
+        ...value, stops: value.stops.map(item => item.id === stop.id ? { ...item, ...patch } : item),
+    }, 'stop');
+    const numberField = (label, current, max, update) => _jsx(Field, { label: label, disabled: disabled, children: _jsx(InputNumber, { controls: false, min: 0, max: max, value: current, onValueChange: next => { if (next !== null)
+                update(Math.min(max, Math.max(0, next))); } }) });
+    function addStop() {
+        // Insert in the widest interval, preserving existing stops and their identities.
+        let left = value.stops[0];
+        let right = value.stops[1];
+        for (let index = 1; index < value.stops.length - 1; index++) {
+            if (value.stops[index + 1].position - value.stops[index].position > right.position - left.position) {
+                left = value.stops[index];
+                right = value.stops[index + 1];
+            }
+        }
+        let nextId;
+        do {
+            nextId = `${id}-${counter.current++}`;
+        } while (value.stops.some(item => item.id === nextId));
+        onChange({ ...value, stops: [...value.stops, { id: nextId, color: stop.color, position: (left.position + right.position) / 2 }] }, 'stop');
+        setSelected(nextId);
+    }
+    return _jsxs("div", { className: "inkra-color-picker__gradient", children: [_jsxs("div", { className: "inkra-color-picker__gradient-preview", role: "img", "aria-label": `${labels.preview}: ${formatColorPaint(value)}`, children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__current", "aria-hidden": "true", style: { background: formatColorPaint(value) } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "outline", className: "inkra-color-picker__palette-outline" })] }), _jsxs("div", { className: "inkra-color-picker__stop-toolbar", children: [_jsx("div", { className: "inkra-color-picker__stops", role: "group", "aria-label": labels.stops, children: value.stops.map((item, index) => _jsxs("span", { className: "inkra-color-picker__stop", children: [_jsx(ColorSwatch, { color: item.color, selected: item.id === stop.id, disabled: disabled, label: `${labels.stop} ${index + 1}: ${item.color} (${item.position}%)`, onClick: () => setSelected(item.id) }), _jsx(PencilText, { "aria-hidden": "true", children: `${item.position}%` })] }, item.id)) }), _jsxs("div", { className: "inkra-color-picker__stop-actions", children: [_jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.addStop, title: labels.addStop, disabled: disabled || value.stops.length >= maxStops, onClick: addStop, children: _jsx(PencilIcon, { paths: actions.add, size: 20 }) }), _jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.removeStop, title: labels.removeStop, disabled: disabled || value.stops.length <= 2, onClick: () => {
+                                    const index = value.stops.indexOf(stop);
+                                    const stops = value.stops.filter(item => item.id !== stop.id);
+                                    onChange({ ...value, stops }, 'stop');
+                                    setSelected(stops[Math.min(index, stops.length - 1)].id);
+                                }, children: _jsx(PencilIcon, { paths: actions.remove, size: 20 }) }), _jsx(Button, { size: "icon", variant: "ghost", "aria-label": labels.reverse, title: labels.reverse, disabled: disabled, onClick: () => onChange({ ...value, stops: [...value.stops].reverse().map(item => ({ ...item, position: 100 - item.position })) }, 'stop'), children: _jsx(PencilIcon, { paths: actions.reverse, size: 20 }) })] })] }), _jsxs("div", { className: "inkra-color-picker__stop-position", children: [numberField(labels.position, stop.position, 100, position => updateStop({ position })), _jsx(Slider, { "aria-label": labels.position, disabled: disabled, value: [stop.position], min: 0, max: 100, step: 1, getValueLabel: value => `${value}%`, onValueChange: ([position]) => updateStop({ position }) })] }), renderColorEditor(stop.color, color => updateStop({ color })), _jsxs("div", { className: "inkra-color-picker__geometry", children: [value.type !== 'radial' && numberField(labels.angle, value.angle ?? 0, 359, angle => onChange({ ...value, angle }, 'geometry')), value.type !== 'linear' && _jsxs(_Fragment, { children: [numberField(labels.centerX, value.center?.x ?? 50, 100, x => onChange({ ...value, center: { x, y: value.center?.y ?? 50 } }, 'geometry')), numberField(labels.centerY, value.center?.y ?? 50, 100, y => onChange({ ...value, center: { x: value.center?.x ?? 50, y } }, 'geometry'))] })] }), value.type === 'radial' && _jsxs("div", { className: "inkra-color-picker__radial-options", children: [_jsxs(ToggleGroup.Root, { "aria-label": labels.shape, disabled: disabled, value: [value.shape ?? 'ellipse'], size: "sm", onValueChange: values => { if (values[0])
+                            onChange({ ...value, shape: values[0] }, 'geometry'); }, children: [_jsx(ToggleGroup.Item, { value: "circle", children: labels.circle }), _jsx(ToggleGroup.Item, { value: "ellipse", children: labels.ellipse })] }), _jsxs(Select.Root, { disabled: disabled, value: value.extent ?? 'farthest-corner', onValueChange: extent => onChange({ ...value, extent: extent }, 'geometry'), children: [_jsx(Select.Trigger, { "aria-label": labels.extent, children: _jsx(Select.Value, {}) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", children: _jsx(Select.Viewport, { children: [['closest-side', labels.closestSide], ['closest-corner', labels.closestCorner], ['farthest-side', labels.farthestSide], ['farthest-corner', labels.farthestCorner]].map(([key, label]) => _jsxs(Select.Item, { value: key, children: [_jsx(Select.ItemText, { children: label }), _jsx(Select.ItemIndicator, {})] }, key)) }) }) })] })] }), _jsx(Switch, { label: labels.repeating, disabled: disabled, checked: value.repeating ?? false, onCheckedChange: repeating => onChange({ ...value, repeating }, 'geometry') })] });
+}

package/dist/color-picker/gradient.d.ts

@@ -0,0 +1,25 @@
+import type { ColorValue } from './color.js';
+export type ColorPaintType = 'solid' | 'linear' | 'radial' | 'conic';
+export interface ColorGradientStop {
+    id?: string;
+    color: string;
+    position: number;
+}
+export interface ColorGradient {
+    type: Exclude<ColorPaintType, 'solid'>;
+    stops: readonly ColorGradientStop[];
+    angle?: number;
+    center?: {
+        x: number;
+        y: number;
+    };
+    shape?: 'circle' | 'ellipse';
+    extent?: 'closest-side' | 'closest-corner' | 'farthest-side' | 'farthest-corner';
+    repeating?: boolean;
+}
+export type ColorPaint = ColorValue | ColorGradient;
+export declare const colorPaintTypes: readonly ColorPaintType[];
+export declare function normalizeColorPaint(input: string | ColorGradient): ColorPaint | null;
+/** Serialize structured paint only; arbitrary CSS expressions are not parsed. */
+export declare function formatColorPaint(input: string | ColorGradient): string;
+export declare function createColorGradient(type: ColorGradient['type'], color?: string): ColorGradient;

package/dist/color-picker/gradient.js

@@ -0,0 +1,60 @@
+import { DEFAULT_COLOR_VALUE, normalizeColorValue } from './color.js';
+export const colorPaintTypes = ['solid', 'linear', 'radial', 'conic'];
+const extents = ['closest-side', 'closest-corner', 'farthest-side', 'farthest-corner'];
+const finite = (value) => typeof value === 'number' && Number.isFinite(value);
+const percent = (value) => Math.round(Math.min(100, Math.max(0, value)) * 100) / 100;
+export function normalizeColorPaint(input) {
+    if (typeof input === 'string')
+        return normalizeColorValue(input);
+    if (!input || !['linear', 'radial', 'conic'].includes(input.type)
+        || !Array.isArray(input.stops) || input.stops.length < 2 || input.stops.length > 64
+        || (input.angle !== undefined && !finite(input.angle))
+        || (input.center !== undefined && (!input.center || !finite(input.center.x) || !finite(input.center.y)))
+        || (input.shape !== undefined && !['circle', 'ellipse'].includes(input.shape))
+        || (input.extent !== undefined && !extents.includes(input.extent)))
+        return null;
+    const ids = new Set();
+    const stops = [];
+    for (const [index, stop] of input.stops.entries()) {
+        if (!stop || typeof stop.color !== 'string' || !finite(stop.position))
+            return null;
+        const color = normalizeColorValue(stop.color);
+        if (!color)
+            return null;
+        let id = typeof stop.id === 'string' && stop.id ? stop.id : `stop-${index}`;
+        while (ids.has(id))
+            id += '-duplicate';
+        ids.add(id);
+        stops.push({ id, color, position: percent(stop.position) });
+    }
+    stops.sort((a, b) => a.position - b.position);
+    const angle = input.angle ?? (input.type === 'linear' ? 90 : 0);
+    return {
+        type: input.type, stops,
+        angle: (Math.round(((angle % 360 + 360) % 360) * 100) / 100) % 360,
+        center: { x: percent(input.center?.x ?? 50), y: percent(input.center?.y ?? 50) },
+        shape: input.shape ?? 'ellipse', extent: input.extent ?? 'farthest-corner',
+        repeating: input.repeating === true,
+    };
+}
+/** Serialize structured paint only; arbitrary CSS expressions are not parsed. */
+export function formatColorPaint(input) {
+    const value = normalizeColorPaint(input);
+    if (!value)
+        return DEFAULT_COLOR_VALUE;
+    if (typeof value === 'string')
+        return value;
+    const stops = value.stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');
+    const at = `at ${value.center.x}% ${value.center.y}%`;
+    const geometry = value.type === 'linear' ? `${value.angle}deg`
+        : value.type === 'radial' ? `${value.shape} ${value.extent} ${at}`
+            : `from ${value.angle}deg ${at}`;
+    return `${value.repeating ? 'repeating-' : ''}${value.type}-gradient(${geometry}, ${stops})`;
+}
+export function createColorGradient(type, color = DEFAULT_COLOR_VALUE) {
+    const start = normalizeColorValue(color) ?? DEFAULT_COLOR_VALUE;
+    return normalizeColorPaint({ type, stops: [
+            { id: 'start', color: start, position: 0 },
+            { id: 'end', color: start === '#e6c17bff' ? DEFAULT_COLOR_VALUE : '#e6c17bff', position: 100 },
+        ] });
+}

package/dist/color-picker/index.d.ts

@@ -1,7 +1,9 @@
 import type { FieldsetHTMLAttributes, ReactNode } from 'react';
+import type { ColorGradientLabels } from './GradientEditor.js';
+import type { ColorGradient, ColorPaint, ColorPaintType } from './gradient.js';
 import type { ColorValue } from './color.js';
 export interface ColorPreset {
-    value: string;
+    value: string | ColorGradient;
     label?: string;
 }
 export interface ColorPickerLabels {
@@ -12,20 +14,38 @@ export interface ColorPickerLabels {
     invalid?: string;
 }
 export interface ColorPickerChangeDetails {
-    source: 'palette' | 'alpha' | 'input' | 'preset';
+    source: 'palette' | 'alpha' | 'input' | 'preset' | 'type' | 'stop' | 'geometry';
 }
-export interface ColorPickerProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange' | 'value'> {
-    value?: string;
-    defaultValue?: string;
-    onValueChange?: (value: ColorValue, details: ColorPickerChangeDetails) => void;
+export type ColorPickerPresentation = 'inline' | 'compact' | 'popover' | 'swatches';
+export interface ColorPickerBaseProps extends Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, 'defaultValue' | 'onChange' | 'value'> {
     onInvalidInput?: (input: string) => void;
     presets?: readonly (string | ColorPreset)[];
     label?: ReactNode;
     labels?: ColorPickerLabels;
+    gradientLabels?: ColorGradientLabels;
     name?: string;
     showAlpha?: boolean;
+    presentation?: ColorPickerPresentation;
     seed?: string | number;
 }
-export declare function ColorPicker({ className, defaultValue, disabled, id, label, labels, name, onInvalidInput, onValueChange, presets, seed, showAlpha, value, ...props }: ColorPickerProps): import("react").JSX.Element;
+export type ColorPickerProps = ColorPickerBaseProps & ({
+    allowGradient?: false;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: ColorValue, details: ColorPickerChangeDetails) => void;
+    colorTypes?: never;
+    maxStops?: never;
+} | {
+    allowGradient: true;
+    value?: string | ColorGradient;
+    defaultValue?: string | ColorGradient;
+    onValueChange?: (value: ColorPaint, details: ColorPickerChangeDetails) => void;
+    colorTypes?: readonly ColorPaintType[];
+    maxStops?: number;
+});
+export declare function ColorPicker(options: ColorPickerProps): import("react").JSX.Element;
 export { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, formatColorValue, normalizeColorValue, parseColorValue, withColorAlpha, withColorRgb, } from './color.js';
 export type { ColorChannels, ColorValue } from './color.js';
+export { createColorGradient, formatColorPaint, normalizeColorPaint } from './gradient.js';
+export type { ColorGradient, ColorGradientStop, ColorPaint, ColorPaintType } from './gradient.js';
+export type { ColorGradientLabels } from './GradientEditor.js';