@inkra/react 0.2.0 → 0.4.3

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

@@ -0,0 +1,39 @@
+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: 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,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 = {
+    type: 'Color type', solid: 'Solid', linear: 'Linear', radial: 'Radial', conic: 'Conic',
+    preview: 'Gradient preview', stops: 'Color stops', stop: 'Stop', stopColor: 'Stop color',
+    addStop: 'Add stop', removeStop: 'Remove stop', reverse: 'Reverse gradient',
+    position: 'Stop position', angle: 'Angle', centerX: 'Center X', centerY: 'Center Y',
+    shape: 'Shape', circle: 'Circle', ellipse: 'Ellipse', extent: 'Extent',
+    closestSide: 'Closest side', closestCorner: 'Closest corner',
+    farthestSide: 'Farthest side', farthestCorner: 'Farthest corner', repeating: 'Repeat gradient',
+};
+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';

package/dist/color-picker/index.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { ColorSwatch } from '../color-swatch/index.js';
 import { Input } from '../form/Input.js';
+import { Popover } from '../overlay/Popover.js';
 import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Slider } from '../slider/index.js';
+import { ToggleGroup } from '../toggle-group/index.js';
+import { GradientEditor, defaultGradientLabels } from './GradientEditor.js';
+import { colorPaintTypes, createColorGradient, formatColorPaint, normalizeColorPaint } from './gradient.js';
 import { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, normalizeColorValue, withColorAlpha, withColorRgb, } from './color.js';
 const defaultLabels = {
     palette: 'Open color palette',
@@ -13,57 +19,153 @@ const defaultLabels = {
     presets: 'Color presets',
     invalid: 'Use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA.',
 };
-function presetData(preset) {
+function presetData(preset, allowGradient) {
     const input = typeof preset === 'string' ? preset : preset.value;
-    const value = normalizeColorValue(input);
+    const value = typeof input === 'string' || allowGradient ? normalizeColorPaint(input) : null;
     if (!value)
         return null;
-    return { value, label: typeof preset === 'string' ? value : preset.label ?? value };
+    return { value, label: typeof preset === 'string' ? preset : preset.label ?? formatColorPaint(value) };
 }
-export function ColorPicker({ className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, id, label = 'Color', labels, name, onInvalidInput, onValueChange, presets = [], seed, showAlpha = true, value, ...props }) {
+export function ColorPicker(options) {
+    const { allowGradient = false, colorTypes = colorPaintTypes, maxStops = 8, gradientLabels, className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, form, id, label = 'Color', labels, name, onInvalidInput, onValueChange: _onValueChange, presets = [], presentation = 'inline', seed, showAlpha = true, value, ...props } = options;
     const generatedId = useId();
     const resolvedId = id ?? `inkra-color-picker-${generatedId}`;
     const resolvedSeed = seed ?? resolvedId;
-    const controlledValue = value === undefined ? null : normalizeColorValue(value);
-    const normalizedDefault = normalizeColorValue(defaultValue) ?? DEFAULT_COLOR_VALUE;
+    const controlled = value !== undefined;
+    const normalized = (input) => typeof input === 'string' || allowGradient ? normalizeColorPaint(input) : null;
+    const controlledValue = useMemo(() => value === undefined ? null : normalized(value), [value, allowGradient]);
+    const normalizedDefault = normalized(defaultValue) ?? DEFAULT_COLOR_VALUE;
+    const defaultValueRef = useRef(normalizedDefault);
     const [uncontrolledValue, setUncontrolledValue] = useState(normalizedDefault);
-    const currentValue = controlledValue ?? (value === undefined ? uncontrolledValue : DEFAULT_COLOR_VALUE);
-    const [draft, setDraft] = useState(currentValue);
+    const currentValue = controlledValue ?? (controlled ? DEFAULT_COLOR_VALUE : uncontrolledValue);
+    const currentValueRef = useRef(currentValue);
+    const gradient = typeof currentValue === 'string' ? null : currentValue;
+    const currentColor = typeof currentValue === 'string' ? currentValue : currentValue.stops[0].color;
+    const cssValue = formatColorPaint(currentValue);
+    const currentType = gradient?.type ?? 'solid';
+    const gradientMemory = useRef(null);
+    const availableTypes = [...new Set(colorTypes.filter(type => colorPaintTypes.includes(type)))];
+    if (!availableTypes.includes(currentType))
+        availableTypes.unshift(currentType);
+    const stopLimit = Number.isFinite(maxStops) ? Math.min(64, Math.max(2, Math.floor(maxStops))) : 8;
+    const fieldsetRef = useRef(null);
+    const hiddenInputRef = useRef(null);
+    const composingRef = useRef(false);
+    const skipNextBlurRef = useRef(false);
+    const [draft, setDraft] = useState(currentColor);
+    const [open, setOpen] = useState(false);
     const copy = { ...defaultLabels, ...labels };
-    const parsedPresets = useMemo(() => presets.map(presetData).filter((preset) => preset !== null), [presets]);
+    const gradientCopy = { ...defaultGradientLabels, ...gradientLabels };
+    const parsedPresets = useMemo(() => presets.map(preset => presetData(preset, allowGradient)).filter((preset) => preset !== null), [presets, allowGradient]);
     const inputInvalid = normalizeColorValue(draft) === null;
-    const rgbValue = colorRgbValue(currentValue) ?? '#4b96aa';
-    const alpha = colorAlphaPercent(currentValue);
-    useEffect(() => setDraft(currentValue), [currentValue]);
-    const commit = (next, source) => {
-        if (value === undefined)
+    const rgbValue = colorRgbValue(currentColor) ?? '#4b96aa';
+    const alpha = colorAlphaPercent(currentColor);
+    useEffect(() => { setOpen(false); }, [disabled, presentation]);
+    useEffect(() => {
+        currentValueRef.current = currentValue;
+        setDraft(currentColor);
+        if (gradient)
+            gradientMemory.current = gradient;
+    }, [currentValue, currentColor]);
+    useEffect(() => {
+        const ownerForm = hiddenInputRef.current?.form ?? fieldsetRef.current?.form;
+        if (!ownerForm)
+            return undefined;
+        let timer;
+        const reset = (event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const restored = controlled ? currentValueRef.current : defaultValueRef.current;
+                if (!controlled)
+                    setUncontrolledValue(restored);
+                setDraft(typeof restored === 'string' ? restored : restored.stops[0].color);
+                gradientMemory.current = typeof restored === 'string' ? null : restored;
+                if (hiddenInputRef.current)
+                    hiddenInputRef.current.value = formatColorPaint(restored);
+                composingRef.current = false;
+                skipNextBlurRef.current = false;
+            }, 0);
+        };
+        ownerForm.addEventListener('reset', reset);
+        return () => {
+            clearTimeout(timer);
+            ownerForm.removeEventListener('reset', reset);
+        };
+    }, [controlled, form, name]);
+    const commit = (input, source) => {
+        if (disabled)
+            return;
+        const next = normalized(input);
+        if (!next)
+            return;
+        if (JSON.stringify(next) === JSON.stringify(currentValue)) {
+            setDraft(currentColor);
+            return;
+        }
+        if (!controlled) {
             setUncontrolledValue(next);
+            setDraft(typeof next === 'string' ? next : next.stops[0].color);
+        }
         else
-            setDraft(currentValue);
-        onValueChange?.(next, { source });
+            setDraft(currentColor);
+        if (options.allowGradient)
+            options.onValueChange?.(next, { source });
+        else if (typeof next === 'string')
+            options.onValueChange?.(next, { source });
     };
     const submitDraft = () => {
+        if (disabled || composingRef.current)
+            return;
         const normalized = normalizeColorValue(draft);
         if (normalized)
             commit(normalized, 'input');
         else
             onInvalidInput?.(draft);
     };
-    return _jsxs("fieldset", { ...props, className: ['inkra-color-picker', className].filter(Boolean).join(' '), "data-alpha": showAlpha || undefined, "data-controlled": value !== undefined || undefined, "data-invalid-value": value !== undefined && controlledValue === null || undefined, disabled: disabled, id: resolvedId, children: [_jsx("legend", { className: "inkra-color-picker__legend", children: typeof label === 'string' ? _jsx(PencilText, { seed: `${resolvedSeed}-legend`, children: label }) : label }), _jsxs("div", { className: "inkra-color-picker__main", children: [_jsxs("label", { className: "inkra-color-picker__palette", "aria-label": copy.palette, title: copy.palette, children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__current", "aria-hidden": "true", style: { backgroundColor: currentValue } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__palette-outline", variant: "outline", seed: `${resolvedSeed}-palette` }), _jsx("input", { "aria-label": copy.palette, className: "inkra-color-picker__native", disabled: disabled, type: "color", value: rgbValue, onChange: event => {
-                                    const next = withColorRgb(currentValue, event.currentTarget.value);
+    // With no usable presets, retain the editor rather than rendering an empty control.
+    const swatchesOnly = presentation === 'swatches' && parsedPresets.length > 0;
+    const editor = _jsxs("div", { className: "inkra-color-picker__editor", "data-presentation": presentation, children: [allowGradient && !swatchesOnly && _jsx(ToggleGroup.Root, { className: "inkra-color-picker__types", "aria-label": gradientCopy.type, disabled: disabled, size: "sm", value: [currentType], onValueChange: values => {
+                    const type = values[0];
+                    if (!type || type === currentType)
+                        return;
+                    if (type === 'solid')
+                        commit(currentColor, 'type');
+                    else
+                        commit(gradient ? { ...gradient, type } : gradientMemory.current ? { ...gradientMemory.current, type } : createColorGradient(type, currentColor), 'type');
+                }, children: availableTypes.map(type => _jsx(ToggleGroup.Item, { value: type, children: gradientCopy[type] }, type)) }), !swatchesOnly && gradient && _jsx(GradientEditor, { value: gradient, disabled: disabled, maxStops: stopLimit, labels: gradientCopy, onChange: commit, renderColorEditor: (color, onChange) => _jsx(ColorPicker, { label: gradientCopy.stopColor, labels: labels, disabled: disabled, showAlpha: showAlpha, value: color, onValueChange: onChange, seed: `${resolvedSeed}-stop` }) }), !swatchesOnly && !gradient && _jsxs(_Fragment, { children: [_jsxs("div", { className: "inkra-color-picker__main", children: [_jsxs("label", { className: "inkra-color-picker__palette", "aria-label": copy.palette, title: copy.palette, children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__current", "aria-hidden": "true", style: { backgroundColor: currentColor } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__palette-outline", variant: "outline", seed: `${resolvedSeed}-palette` }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__focus", variant: "outline", seed: `${resolvedSeed}-palette-focus` }), _jsx("input", { "aria-label": copy.palette, className: "inkra-color-picker__native", disabled: disabled, type: "color", value: rgbValue, onChange: event => {
+                                            const next = withColorRgb(currentColor, event.currentTarget.value);
+                                            if (next)
+                                                commit(next, 'palette');
+                                        } })] }), _jsxs("div", { className: "inkra-color-picker__value-field", children: [_jsx("label", { className: "inkra-color-picker__label", htmlFor: `${resolvedId}-value`, children: _jsx(PencilText, { seed: `${resolvedSeed}-value-label`, children: copy.value }) }), _jsx(Input, { id: `${resolvedId}-value`, "aria-describedby": inputInvalid ? `${resolvedId}-error` : undefined, "aria-invalid": inputInvalid || undefined, autoCapitalize: "off", autoComplete: "off", className: "inkra-color-picker__input", disabled: disabled, inputMode: "text", spellCheck: false, value: draft, onBlur: () => {
+                                            if (skipNextBlurRef.current) {
+                                                skipNextBlurRef.current = false;
+                                                return;
+                                            }
+                                            submitDraft();
+                                        }, onCompositionStart: () => { composingRef.current = true; }, onCompositionEnd: () => { composingRef.current = false; }, onKeyDown: event => {
+                                            if (event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229)
+                                                return;
+                                            if (event.key === 'Enter') {
+                                                event.preventDefault();
+                                                skipNextBlurRef.current = true;
+                                                submitDraft();
+                                            }
+                                            if (event.key === 'Escape') {
+                                                event.preventDefault();
+                                                skipNextBlurRef.current = true;
+                                                setDraft(currentColor);
+                                            }
+                                        }, onValueChange: next => {
+                                            skipNextBlurRef.current = false;
+                                            setDraft(next);
+                                        } }), _jsx("span", { className: "inkra-color-picker__error", id: `${resolvedId}-error`, "aria-live": "polite", hidden: !inputInvalid, children: inputInvalid ? copy.invalid : '' })] })] }), showAlpha ? _jsxs("div", { className: "inkra-color-picker__alpha", children: [_jsxs("div", { className: "inkra-color-picker__alpha-heading", children: [_jsx("span", { id: `${resolvedId}-alpha-label`, children: _jsx(PencilText, { seed: `${resolvedSeed}-alpha-label`, children: copy.alpha }) }), _jsxs("output", { htmlFor: `${resolvedId}-alpha`, children: [alpha, "%"] })] }), _jsx(Slider, { "aria-labelledby": `${resolvedId}-alpha-label`, disabled: disabled, id: `${resolvedId}-alpha`, max: 100, min: 0, seed: `${resolvedSeed}-alpha`, value: [alpha], getValueLabel: number => `${number}%`, onValueChange: values => {
+                                    const next = withColorAlpha(currentColor, values[0]);
                                     if (next)
-                                        commit(next, 'palette');
-                                } })] }), _jsxs("div", { className: "inkra-color-picker__value-field", children: [_jsx("label", { className: "inkra-color-picker__label", htmlFor: `${resolvedId}-value`, children: _jsx(PencilText, { seed: `${resolvedSeed}-value-label`, children: copy.value }) }), _jsx(Input, { id: `${resolvedId}-value`, "aria-describedby": inputInvalid ? `${resolvedId}-error` : undefined, "aria-invalid": inputInvalid || undefined, autoCapitalize: "off", autoComplete: "off", className: "inkra-color-picker__input", disabled: disabled, inputMode: "text", spellCheck: false, value: draft, onBlur: submitDraft, onKeyDown: event => {
-                                    if (event.key === 'Enter') {
-                                        event.preventDefault();
-                                        submitDraft();
-                                    }
-                                    if (event.key === 'Escape')
-                                        setDraft(currentValue);
-                                }, onValueChange: setDraft }), _jsx("span", { className: "inkra-color-picker__error", id: `${resolvedId}-error`, "aria-live": "polite", children: inputInvalid ? copy.invalid : '' })] })] }), showAlpha ? _jsxs("div", { className: "inkra-color-picker__alpha", children: [_jsxs("div", { className: "inkra-color-picker__alpha-heading", children: [_jsx("span", { id: `${resolvedId}-alpha-label`, children: _jsx(PencilText, { seed: `${resolvedSeed}-alpha-label`, children: copy.alpha }) }), _jsxs("output", { htmlFor: `${resolvedId}-alpha`, children: [alpha, "%"] })] }), _jsx(Slider, { "aria-labelledby": `${resolvedId}-alpha-label`, disabled: disabled, id: `${resolvedId}-alpha`, max: 100, min: 0, seed: `${resolvedSeed}-alpha`, value: [alpha], getValueLabel: number => `${number}%`, onValueChange: values => {
-                            const next = withColorAlpha(currentValue, values[0]);
-                            if (next)
-                                commit(next, 'alpha');
-                        } })] }) : null, parsedPresets.length ? _jsxs(_Fragment, { children: [_jsx(PencilLine, { className: "inkra-color-picker__divider", seed: `${resolvedSeed}-divider` }), _jsx("div", { className: "inkra-color-picker__presets", role: "group", "aria-label": copy.presets, children: parsedPresets.map((preset, index) => _jsxs("button", { type: "button", "aria-label": preset.label, "aria-pressed": preset.value === currentValue, className: "inkra-color-picker__preset", disabled: disabled, title: preset.label, onClick: () => commit(preset.value, 'preset'), children: [_jsx("span", { className: "inkra-color-picker__checker", "aria-hidden": "true" }), _jsx("span", { className: "inkra-color-picker__preset-color", "aria-hidden": "true", style: { backgroundColor: preset.value } }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-color-picker__preset-outline", variant: preset.value === currentValue ? 'selection' : 'outline', seed: `${resolvedSeed}-preset-${index}` })] }, `${preset.value}-${index}`)) })] }) : null, name ? _jsx("input", { type: "hidden", name: name, value: currentValue }) : null] });
+                                        commit(next, 'alpha');
+                                } })] }) : null] }), parsedPresets.length ? _jsxs(_Fragment, { children: [!swatchesOnly && _jsx(PencilLine, { className: "inkra-color-picker__divider", seed: `${resolvedSeed}-divider` }), _jsx("div", { className: "inkra-color-picker__presets", role: "group", "aria-label": copy.presets, children: parsedPresets.map((preset, index) => _jsx(ColorSwatch, { color: typeof preset.value === 'string' ? preset.value : preset.value.stops[0].color, background: typeof preset.value === 'string' ? undefined : formatColorPaint(preset.value), label: preset.label, selected: formatColorPaint(preset.value) === cssValue, className: "inkra-color-picker__preset", disabled: disabled, seed: `${resolvedSeed}-preset-${index}`, onClick: () => commit(preset.value, 'preset') }, `${formatColorPaint(preset.value)}-${index}`)) })] }) : null] });
+    return _jsxs("fieldset", { ...props, className: ['inkra-color-picker', className].filter(Boolean).join(' '), "data-presentation": presentation, "data-alpha": showAlpha || undefined, "data-controlled": value !== undefined || undefined, "data-invalid-value": value !== undefined && controlledValue === null || undefined, disabled: disabled, form: form, id: resolvedId, ref: fieldsetRef, children: [_jsx("legend", { className: "inkra-color-picker__legend", id: `${resolvedId}-legend`, children: typeof label === 'string' ? _jsx(PencilText, { seed: `${resolvedSeed}-legend`, children: label }) : label }), presentation === 'popover' ? _jsxs(Popover.Root, { open: open && !disabled, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { variant: "outline", className: "inkra-color-picker__trigger", disabled: disabled, "aria-label": `${copy.palette}: ${typeof currentValue === 'string' ? currentValue : gradientCopy[currentValue.type]}`, children: _jsxs("span", { className: "inkra-color-picker__trigger-content", children: [_jsxs("span", { className: "inkra-color-picker__preview", "aria-hidden": "true", children: [_jsx("span", { className: "inkra-color-picker__checker" }), _jsx("span", { className: "inkra-color-picker__current", style: { background: cssValue } })] }), _jsx(PencilText, { children: typeof currentValue === 'string' ? currentValue : gradientCopy[currentValue.type] })] }) }) }), _jsx(Popover.Portal, { children: _jsx(Popover.Content, { className: "inkra-color-picker__popover", sideOffset: 8, align: "start", "aria-label": typeof label === 'string' ? label : copy.palette, "aria-describedby": undefined, children: editor }) })] }) : editor, name ? _jsx("input", { ref: hiddenInputRef, type: "hidden", form: form, name: name, value: cssValue }) : null] });
 }
 export { DEFAULT_COLOR_VALUE, colorAlphaPercent, colorRgbValue, formatColorValue, normalizeColorValue, parseColorValue, withColorAlpha, withColorRgb, } from './color.js';
+export { createColorGradient, formatColorPaint, normalizeColorPaint } from './gradient.js';

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

@@ -0,0 +1,10 @@
+import type { ButtonHTMLAttributes, CSSProperties } from 'react';
+export interface ColorSwatchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'color' | 'aria-pressed'> {
+    color: string;
+    background?: CSSProperties['background'];
+    label: string;
+    selected?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    seed?: string | number;
+}
+export declare const ColorSwatch: import("react").ForwardRefExoticComponent<ColorSwatchProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/color-swatch/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Button } from '../Button.js';
+import { PencilSurface } from '../PencilSurface.js';
+export const ColorSwatch = forwardRef(function ColorSwatch({ color, background, label, selected = false, size = 'md', seed, className, ...props }, ref) {
+    const id = useId();
+    const resolvedSeed = seed ?? `inkra-color-swatch-${id}`;
+    return _jsx(Button, { title: label, ...props, "aria-label": props['aria-label'] ?? label, "aria-pressed": selected, className: ['inkra-color-swatch', className].filter(Boolean).join(' '), "data-swatch-size": size, ref: ref, seed: resolvedSeed, size: size === 'lg' ? 'icon-lg' : 'icon', variant: selected ? 'outline' : 'ghost', children: _jsx("span", { className: "inkra-color-swatch__pigment", style: { color }, "aria-hidden": "true", children: background ? _jsx("span", { className: "inkra-color-swatch__background", style: { background }, children: _jsx(PencilSurface, { as: "span", className: "inkra-color-swatch__wash", variant: "outline", seed: `${resolvedSeed}-wash` }) }) : _jsx(PencilSurface, { as: "span", className: "inkra-color-swatch__wash", variant: "wash", seed: `${resolvedSeed}-wash`, style: { '--inkra-accent': 'currentColor' } }) }) });
+});

package/dist/command/index.d.ts

@@ -1,6 +1,9 @@
 import { Command as Primitive } from 'cmdk';
 import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
-export type CommandRootProps = Omit<ComponentPropsWithoutRef<typeof Primitive>, 'asChild'>;
+export type CommandRootProps = Omit<ComponentPropsWithoutRef<typeof Primitive>, 'asChild'> & {
+    /** Disable when a parent dialog already supplies the paper and outline. */
+    surface?: boolean;
+};
 export type CommandInputProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Input>, 'asChild'>;
 export type CommandListProps = Omit<ComponentPropsWithoutRef<typeof Primitive.List>, 'asChild'>;
 export interface CommandItemProps extends Omit<ComponentPropsWithoutRef<typeof Primitive.Item>, 'asChild'> {
@@ -12,7 +15,26 @@ export type CommandEmptyProps = Omit<ComponentPropsWithoutRef<typeof Primitive.E
 export type CommandSeparatorProps = Omit<ComponentPropsWithoutRef<typeof Primitive.Separator>, 'asChild' | 'children'>;
 export type CommandShortcutProps = HTMLAttributes<HTMLElement>;
 export declare const Command: {
-    Root: import("react").ForwardRefExoticComponent<CommandRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<Omit<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+        label?: string;
+        shouldFilter?: boolean;
+        filter?: (value: string, search: string, keywords?: string[]) => number;
+        defaultValue?: string;
+        value?: string;
+        onValueChange?: (value: string) => void;
+        loop?: boolean;
+        disablePointerSelection?: boolean;
+        vimBindings?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
+        /** Disable when a parent dialog already supplies the paper and outline. */
+        surface?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Input: import("react").ForwardRefExoticComponent<CommandInputProps & import("react").RefAttributes<HTMLInputElement>>;
     List: import("react").ForwardRefExoticComponent<CommandListProps & import("react").RefAttributes<HTMLDivElement>>;
     Group: import("react").ForwardRefExoticComponent<CommandGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/command/index.js

@@ -1,28 +1,51 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Command as Primitive } from 'cmdk';
-import { forwardRef, useRef } from 'react';
+import { __iconData as searchIcon } from 'lucide-react/dist/esm/icons/search.mjs';
+import { forwardRef, useCallback, useRef } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { PencilLine } from '../PencilLine.js';
+import { EditablePencilText } from '../form/EditablePencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+const searchPaths = searchIcon.node.map(([tag, attributes]) => {
+    if (tag === 'circle') {
+        const cx = Number(attributes.cx);
+        const cy = Number(attributes.cy);
+        const r = Number(attributes.r);
+        return { d: `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 -${r * 2} 0` };
+    }
+    return { d: attributes.d };
+});
 function classes(base, extra) { return [base, extra].filter(Boolean).join(' '); }
 function copy(value) { return typeof value === 'string' ? _jsx(PencilText, { children: value }) : value; }
-const Root = forwardRef(function Root({ className, children, loop = true, onKeyDown, onCompositionStartCapture, onCompositionEndCapture, ...props }, ref) {
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+const Root = forwardRef(function Root({ className, children, loop = true, surface = true, onKeyDown, onCompositionStartCapture, onCompositionEndCapture, ...props }, ref) {
     const composing = useRef(false);
     return _jsx(Primitive, { ...props, ref: ref, loop: loop, className: classes('inkra-command', className), onCompositionStartCapture: event => { composing.current = true; onCompositionStartCapture?.(event); }, onCompositionEndCapture: event => { composing.current = false; onCompositionEndCapture?.(event); }, onKeyDown: event => {
             // Capture composition state as well as native flags before cmdk handles Enter.
             if (event.key === 'Enter' && (composing.current || event.nativeEvent.isComposing || event.keyCode === 229))
                 event.preventDefault();
             onKeyDown?.(event);
-        }, children: _jsx(PencilSurface, { variant: "paper", radius: 8, className: "inkra-command__paper", children: children }) });
+        }, children: surface ? _jsx(PencilSurface, { variant: "paper", radius: 8, className: "inkra-command__paper", children: children }) : children });
 });
-const Input = forwardRef(function Input({ className, ...props }, ref) {
-    return _jsxs("div", { className: "inkra-command__input-wrap", children: [_jsx(Primitive.Input, { ...props, ref: ref, className: classes('inkra-command__input', className) }), _jsx(PencilLine, { className: "inkra-command__input-line" })] });
+const Input = forwardRef(function Input({ className, defaultValue, placeholder, value, ...props }, ref) {
+    const inputRef = useRef(null);
+    const captureRef = useCallback((node) => {
+        inputRef.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    return _jsxs("div", { className: "inkra-command__input-wrap inkra-field-control-hit", children: [_jsxs("div", { className: "inkra-command__input-frame", children: [_jsx("span", { "aria-hidden": "true", className: "inkra-command__input-icon", children: _jsx(PencilIcon, { paths: searchPaths, size: 22, sourceSize: 24 }) }), _jsx(Primitive.Input, { ...props, defaultValue: defaultValue, placeholder: placeholder, value: value, ref: captureRef, className: classes('inkra-command__input', className) }), _jsx(EditablePencilText, { controlRef: inputRef, defaultValue: defaultValue, placeholder: placeholder, seed: "command-input", value: value })] }), _jsx(PencilLine, { className: "inkra-command__input-line" }), _jsx(PencilLine, { className: "inkra-command__input-focus-line", seed: "command-input-focus", weight: 2.2 })] });
 });
 const List = forwardRef(function List({ className, ...props }, ref) {
     return _jsx(Primitive.List, { ...props, ref: ref, className: classes('inkra-command__list', className) });
 });
 const Item = forwardRef(function Item({ className, children, icon, shortcut, ...props }, ref) {
-    return _jsxs(Primitive.Item, { ...props, ref: ref, className: classes('inkra-command__item', className), children: [_jsx(PencilSurface, { as: "span", variant: "selection", "aria-hidden": "true", className: "inkra-command__highlight" }), icon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-command__icon", children: icon }), _jsx("span", { className: "inkra-command__label", children: copy(children) }), shortcut != null && _jsx(Shortcut, { children: shortcut })] });
+    return _jsxs(Primitive.Item, { ...props, ref: ref, className: classes('inkra-command__item', className), children: [_jsx(PencilSurface, { as: "span", variant: "selection", "aria-hidden": "true", className: "inkra-command__highlight" }), _jsx(PencilSurface, { as: "span", variant: "outline", "aria-hidden": "true", className: "inkra-command__item-focus" }), icon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-command__icon", children: icon }), _jsx("span", { className: "inkra-command__label", children: copy(children) }), shortcut != null && _jsx(Shortcut, { children: shortcut })] });
 });
 const Group = forwardRef(function Group({ className, heading, ...props }, ref) {
     return _jsx(Primitive.Group, { ...props, heading: copy(heading), ref: ref, className: classes('inkra-command__group', className) });

package/dist/content/index.d.ts

@@ -43,6 +43,11 @@ export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
     size?: ContentSize;
     appearance?: 'soft' | 'outline';
     actions?: ReactNode;
+    closable?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closeLabel?: string;
 }
 export declare const Alert: {
     Root: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;