@inkra/react 0.3.0 → 0.5.0

package/dist/color-picker/index.js

@@ -1,69 +1,173 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useState } from 'react';
+import { useInkraLocale } from '../i18n/index.js';
+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',
-    value: 'Color value',
-    alpha: 'Opacity',
-    presets: 'Color presets',
-    invalid: 'Use #RGB, #RGBA, #RRGGBB, or #RRGGBBAA.',
-};
-function presetData(preset) {
+const defaultLabels = (t) => ({
+    palette: t('color.palette'),
+    value: t('color.value'),
+    alpha: t('color.alpha'),
+    presets: t('color.presets'),
+    invalid: t('color.invalid'),
+});
+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 { t } = useInkraLocale();
+    const { allowGradient = false, colorTypes = colorPaintTypes, maxStops = 8, gradientLabels, className, defaultValue = DEFAULT_COLOR_VALUE, disabled = false, form, id, label = t('color.label'), 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 copy = { ...defaultLabels, ...labels };
-    const parsedPresets = useMemo(() => presets.map(presetData).filter((preset) => preset !== null), [presets]);
+    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(t), ...labels };
+    const gradientCopy = { ...defaultGradientLabels(t), ...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.js

@@ -1,11 +1,29 @@
 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; }
+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 => {
@@ -15,14 +33,19 @@ const Root = forwardRef(function Root({ className, children, loop = true, surfac
             onKeyDown?.(event);
         }, 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>>;

package/dist/content/index.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import { createContext, useContext, forwardRef, useId } from 'react';
+import { createContext, useContext, forwardRef, useId, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { PencilLine } from '../PencilLine.js';
@@ -29,8 +32,13 @@ const CardFooter = forwardRef(function CardFooter({ className, children, divided
     return _jsxs("div", { ...props, ref: ref, "data-justify": justify, "data-padding": padding, "data-orientation": orientation, className: classes('inkra-card__footer', className), children: [(divided ?? inherited) && _jsx(PencilLine, { className: "inkra-card__divider" }), children] });
 });
 export const Card = { Root: CardRoot, Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, Footer: CardFooter };
-const AlertRoot = forwardRef(function AlertRoot({ className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, ...props }, ref) {
+const AlertRoot = forwardRef(function AlertRoot(inkraProps, ref) {
+    const { t } = useInkraLocale();
+    const { className, variant = 'info', icon, seed, style, children, role = 'status', size = 'md', appearance = 'soft', actions, closable = false, open, defaultOpen = true, onOpenChange, closeLabel = t('alert.dismiss'), ...props } = inkraProps;
     const id = useId();
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    if (!(open ?? internalOpen))
+        return null;
     const tokens = {
         color: `var(--inkra-${variant}-foreground)`,
         '--inkra-paper': `var(--inkra-${variant}-surface)`,
@@ -40,7 +48,11 @@ const AlertRoot = forwardRef(function AlertRoot({ className, variant = 'info', i
         '--inkra-border': `var(--inkra-${variant}-foreground)`,
         ...style,
     };
-    return _jsxs(PencilSurface, { ...props, ref: ref, role: role, className: classes('inkra-alert', className), "data-variant": variant, "data-size": size, "data-appearance": appearance, variant: appearance === 'outline' ? 'outline' : 'action', radius: 8, style: tokens, seed: seed ?? `alert-${id}`, children: [icon && _jsx("span", { className: "inkra-alert__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "inkra-alert__body", children: [children, actions != null && _jsx("div", { className: "inkra-alert__actions", children: actions })] })] });
+    return _jsxs(PencilSurface, { ...props, ref: ref, role: role, className: classes('inkra-alert', className), "data-variant": variant, "data-size": size, "data-appearance": appearance, variant: appearance === 'outline' ? 'outline' : 'action', radius: 8, style: tokens, seed: seed ?? `alert-${id}`, children: [icon && _jsx("span", { className: "inkra-alert__icon", "aria-hidden": "true", children: icon }), _jsxs("div", { className: "inkra-alert__body", children: [children, actions != null && _jsx("div", { className: "inkra-alert__actions", children: actions })] }), closable && _jsx(Button, { className: "inkra-alert__close", variant: "ghost", size: "icon", "aria-label": closeLabel, title: closeLabel, onClick: () => {
+                    if (open === undefined)
+                        setInternalOpen(false);
+                    onOpenChange?.(false);
+                }, children: _jsx(PencilIcon, { paths: [{ d: 'M18 6 6 18M6 6l12 12' }], sourceSize: 24, size: 20 }) })] });
 });
 const AlertTitle = forwardRef(function AlertTitle({ className, children, ...props }, ref) {
     return _jsx("p", { ...props, ref: ref, className: classes('inkra-alert__title', className), children: copy(children) });

package/dist/context-menu/index.js

@@ -223,7 +223,7 @@ export const ContextMenuSubContent = forwardRef(function ContextMenuSubContent({
     props = usePortalThemeProps(props);
     return (_jsx(Primitive.Portal, { children: _jsx(Primitive.SubContent, { ...props, className: classes('inkra-menu', 'inkra-context-menu__sub-content', className), collisionPadding: collisionPadding, ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: "inkra-menu__paper", radius: 8, seed: seed ?? `context-submenu-${id}`, variant: "paper", children: children }) }) }));
 });
-export const ContextMenu = Object.freeze({
+export const ContextMenu = /* @__PURE__ */ Object.freeze({
     Root: ContextMenuRoot,
     Trigger: ContextMenuTrigger,
     Portal: ContextMenuPortal,

package/dist/data-table/index.d.ts

@@ -25,6 +25,12 @@ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElemen
     defaultSorting?: SortingState;
     onSortingChange?: OnChangeFn<SortingState>;
     pagination?: boolean;
+    /** Supply only the current server page in data. rowCount is the known total. */
+    manualPagination?: boolean;
+    rowCount?: number;
+    /** Server owns sorting/filtering; callbacks still report the requested state. */
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
     paginationState?: PaginationState;
     defaultPagination?: PaginationState;
     onPaginationChange?: OnChangeFn<PaginationState>;
@@ -44,4 +50,4 @@ export interface DataTableProps<TData> extends Omit<HTMLAttributes<HTMLDivElemen
     pageLabel?: (page: number, pageCount: number) => ReactNode;
     sortStatusLabel?: (columnId: string, direction: false | 'asc' | 'desc') => string;
 }
-export declare function DataTable<TData>({ data, columns, getRowId, caption, density, layout, striped, hoverable, stickyHeader, captionSide, filterable, filterLabel, filterPlaceholder, globalFilter, defaultGlobalFilter, onGlobalFilterChange, sorting, defaultSorting, onSortingChange, pagination, paginationState, defaultPagination, onPaginationChange, selectable, rowSelection, defaultRowSelection, onRowSelectionChange, getRowCanSelect, loading, loadingMessage, emptyMessage, selectAllLabel, selectRowLabel, previousPageLabel, nextPageLabel, paginationLabel, pageLabel, sortStatusLabel, className, ...props }: DataTableProps<TData>): import("react").JSX.Element;
+export declare function DataTable<TData>(inkraProps: DataTableProps<TData>): import("react").JSX.Element;

package/dist/data-table/index.js

@@ -1,12 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useInkraLocale } from '../i18n/index.js';
 import { flexRender, functionalUpdate, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Button } from '../Button.js';
 import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
 import { Input } from '../form/Input.js';
 import { Table } from '../content/index.js';
 import { Checkbox } from '../selection/Checkbox.js';
+import { normalizeDataTablePagination } from './model.js';
 const sortIcon = [{ d: 'M 8 10 L 12 6 L 16 10 M 8 14 L 12 18 L 16 14' }];
+const sortAscendingIcon = [{ d: 'M 7 15 L 12 10 L 17 15' }];
+const sortDescendingIcon = [{ d: 'M 7 9 L 12 14 L 17 9' }];
 const previousIcon = [{ d: 'M 14 7 L 9 12 L 14 17' }];
 const nextIcon = [{ d: 'M 10 7 L 15 12 L 10 17' }];
 function classes(...values) {
@@ -15,27 +21,43 @@ function classes(...values) {
 function resolve(updater, current) {
     return functionalUpdate(updater, current);
 }
+function pencilCopy(value, seed) {
+    return typeof value === 'string' || typeof value === 'number'
+        ? _jsx(PencilText, { seed: seed, children: String(value) })
+        : value;
+}
 function SelectionCheckbox(props) {
     return _jsx(Checkbox, { className: "inkra-data-table__selection", checked: props.checked, indeterminate: props.indeterminate, disabled: props.disabled, label: _jsx("span", { className: "inkra-visually-hidden", children: props.label }), onCheckedChange: props.onChange });
 }
-export function DataTable({ data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = 'Filter rows', filterPlaceholder = 'Filter rows', globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = 'Loading rows', emptyMessage = 'No rows', selectAllLabel = 'Select all rows on this page', selectRowLabel = row => `Select row ${row.id}`, previousPageLabel = 'Previous page', nextPageLabel = 'Next page', paginationLabel = 'Table pagination', pageLabel = (page, pageCount) => `Page ${page} of ${pageCount}`, sortStatusLabel = (columnId, direction) => direction === 'asc' ? `${columnId}: sorted ascending` : direction === 'desc' ? `${columnId}: sorted descending` : `${columnId}: not sorted`, className, ...props }) {
+export function DataTable(inkraProps) {
+    const { t } = useInkraLocale();
+    const { data, columns, getRowId, caption, density = 'comfortable', layout = 'auto', striped = false, hoverable = true, stickyHeader = false, captionSide = 'top', filterable = false, filterLabel = t('table.filter'), filterPlaceholder = t('table.filter'), globalFilter, defaultGlobalFilter = '', onGlobalFilterChange, sorting, defaultSorting = [], onSortingChange, pagination = false, manualPagination = false, rowCount, manualSorting = false, manualFiltering = false, paginationState, defaultPagination = { pageIndex: 0, pageSize: 10 }, onPaginationChange, selectable = false, rowSelection, defaultRowSelection = {}, onRowSelectionChange, getRowCanSelect, loading = false, loadingMessage = t('table.loading'), emptyMessage = t('table.empty'), selectAllLabel = t('table.selectAll'), selectRowLabel = row => t('table.selectRow', { row: row.id }), previousPageLabel = t('common.previousPage'), nextPageLabel = t('common.nextPage'), paginationLabel = t('table.pagination'), pageLabel = (page, pageCount) => t('pagination.status', { page, total: pageCount }), sortStatusLabel = (columnId, direction) => t(direction === 'asc' ? 'table.ascending' : direction === 'desc' ? 'table.descending' : 'table.unsorted', { column: columnId }), className, ...props } = inkraProps;
     const [internalFilter, setInternalFilter] = useState(defaultGlobalFilter);
     const [internalSorting, setInternalSorting] = useState(defaultSorting);
     const [internalPagination, setInternalPagination] = useState(defaultPagination);
     const [internalSelection, setInternalSelection] = useState(defaultRowSelection);
+    const paginationCorrection = useRef('');
     const resolvedFilter = globalFilter ?? internalFilter;
     const resolvedSorting = sorting ?? internalSorting;
     const resolvedPagination = paginationState ?? internalPagination;
     const resolvedSelection = rowSelection ?? internalSelection;
+    const paginationRowCount = manualPagination && pagination && rowCount !== undefined
+        ? (Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : data.length)
+        : data.length;
+    const initialPagination = useMemo(() => normalizeDataTablePagination(resolvedPagination, paginationRowCount), [resolvedPagination.pageIndex, resolvedPagination.pageSize, paginationRowCount]);
     const handleSorting = updater => {
         if (sorting === undefined)
             setInternalSorting(current => resolve(updater, current));
         onSortingChange?.(updater);
     };
     const handlePagination = updater => {
+        const normalizedUpdater = current => {
+            const rowCount = manualPagination ? paginationRowCount : table.getPrePaginationRowModel().rows.length;
+            return normalizeDataTablePagination(resolve(updater, normalizeDataTablePagination(current, rowCount)), rowCount);
+        };
         if (paginationState === undefined)
-            setInternalPagination(current => resolve(updater, current));
-        onPaginationChange?.(updater);
+            setInternalPagination(normalizedUpdater);
+        onPaginationChange?.(normalizedUpdater);
     };
     const handleSelection = updater => {
         if (rowSelection === undefined)
@@ -53,39 +75,68 @@ export function DataTable({ data, columns, getRowId, caption, density = 'comfort
         data,
         columns,
         getRowId,
+        manualPagination: pagination && manualPagination,
+        rowCount: pagination && manualPagination ? paginationRowCount : undefined,
+        manualSorting,
+        manualFiltering,
         state: {
             globalFilter: resolvedFilter,
             sorting: resolvedSorting,
-            pagination: resolvedPagination,
+            pagination: initialPagination,
             rowSelection: resolvedSelection,
         },
         onGlobalFilterChange: updater => handleFilter(resolve(updater, resolvedFilter)),
         onSortingChange: handleSorting,
         onPaginationChange: handlePagination,
         onRowSelectionChange: handleSelection,
+        defaultColumn: {
+            header: context => pencilCopy(context.column.id, `data-table-header-${context.header.id}`),
+            cell: context => pencilCopy(context.renderValue()?.toString?.() ?? null, `data-table-cell-${context.cell.id}`),
+        },
         enableRowSelection: selectable ? getRowCanSelect ?? true : false,
         getCoreRowModel: getCoreRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
     });
+    const filteredRowCount = pagination && manualPagination ? paginationRowCount : table.getPrePaginationRowModel().rows.length;
+    const effectivePagination = useMemo(() => normalizeDataTablePagination(initialPagination, filteredRowCount), [initialPagination, filteredRowCount]);
+    if (table.getState().pagination.pageIndex !== effectivePagination.pageIndex
+        || table.getState().pagination.pageSize !== effectivePagination.pageSize) {
+        table.setOptions(previous => ({
+            ...previous,
+            state: { ...previous.state, pagination: effectivePagination },
+        }));
+    }
     const rows = table.getRowModel().rows;
-    const filteredRowCount = table.getPrePaginationRowModel().rows.length;
-    const pageCount = Math.max(1, table.getPageCount());
+    const pageCount = filteredRowCount === 0 ? 0 : Math.ceil(filteredRowCount / effectivePagination.pageSize);
     const visibleColumnCount = Math.max(1, table.getVisibleLeafColumns().length + (selectable ? 1 : 0));
     const hasSelectableRows = rows.some(row => row.getCanSelect());
     useEffect(() => {
         if (!pagination)
             return;
-        const lastPageIndex = Math.max(0, Math.ceil(filteredRowCount / resolvedPagination.pageSize) - 1);
-        if (resolvedPagination.pageIndex <= lastPageIndex)
+        const matches = resolvedPagination.pageIndex === effectivePagination.pageIndex
+            && resolvedPagination.pageSize === effectivePagination.pageSize;
+        if (matches) {
+            paginationCorrection.current = '';
+            return;
+        }
+        const signature = `${filteredRowCount}:${resolvedPagination.pageIndex}:${resolvedPagination.pageSize}->${effectivePagination.pageIndex}:${effectivePagination.pageSize}`;
+        if (paginationCorrection.current === signature)
             return;
-        const next = { ...resolvedPagination, pageIndex: lastPageIndex };
+        paginationCorrection.current = signature;
         if (paginationState === undefined)
-            setInternalPagination(next);
-        onPaginationChange?.(next);
-    }, [filteredRowCount, onPaginationChange, pagination, paginationState, resolvedPagination]);
-    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: filterLabel }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : header.column.getCanSort() ? _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": header.column.getIsSorted() || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(PencilIcon, { "aria-hidden": "true", paths: sortIcon, size: 18, sourceSize: 24, active: Boolean(header.column.getIsSorted()) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, header.column.getIsSorted()) })] }) : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: loadingMessage }) }) })
-                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: emptyMessage }) }) })
-                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(PencilIcon, { paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", children: pageLabel(table.getState().pagination.pageIndex + 1, pageCount) }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(PencilIcon, { paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
+            setInternalPagination(effectivePagination);
+        onPaginationChange?.(effectivePagination);
+    }, [effectivePagination.pageIndex, effectivePagination.pageSize, filteredRowCount, onPaginationChange, pagination,
+        paginationState, resolvedPagination.pageIndex, resolvedPagination.pageSize]);
+    return _jsxs("div", { ...props, className: classes('inkra-data-table', className), "data-loading": loading || undefined, children: [filterable && _jsx("div", { className: "inkra-data-table__toolbar", children: _jsxs("label", { className: "inkra-data-table__filter", children: [_jsx("span", { children: pencilCopy(filterLabel, 'data-table-filter-label') }), _jsx(Input, { type: "search", value: resolvedFilter, placeholder: filterPlaceholder, onChange: event => handleFilter(event.currentTarget.value) })] }) }), _jsx(Table.Container, { className: "inkra-data-table__container", children: _jsxs(Table.Root, { density: density, layout: layout, striped: striped, hoverable: hoverable, stickyHeader: stickyHeader, captionSide: captionSide, children: [caption != null && _jsx(Table.Caption, { children: caption }), _jsx(Table.Header, { children: table.getHeaderGroups().map(headerGroup => _jsxs(Table.Row, { children: [selectable && _jsx(Table.Head, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: pagination ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(), indeterminate: pagination ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(), label: selectAllLabel, disabled: loading || !hasSelectableRows, onChange: checked => pagination ? table.toggleAllPageRowsSelected(checked) : table.toggleAllRowsSelected(checked) }) }), headerGroup.headers.map(header => _jsx(Table.Head, { colSpan: header.colSpan, "aria-sort": header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : header.column.getCanSort() ? 'none' : undefined, children: header.isPlaceholder ? null : (() => {
+                                            const rendered = flexRender(header.column.columnDef.header, header.getContext());
+                                            const direction = header.column.getIsSorted();
+                                            if (!header.column.getCanSort())
+                                                return pencilCopy(rendered, `data-table-header-${header.id}`);
+                                            return _jsxs("button", { type: "button", className: "inkra-data-table__sort", "data-sorted": direction || undefined, onClick: header.column.getToggleSortingHandler(), children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-data-table__sort-focus", variant: "outline", radius: 6, seed: `data-table-sort-${header.id}-focus` }), _jsx("span", { className: "inkra-data-table__sort-label", children: pencilCopy(rendered, `data-table-sort-${header.id}`) }), _jsx(PencilIcon, { "aria-hidden": "true", className: "inkra-data-table__sort-icon", "data-direction": direction || 'none', paths: direction === 'asc' ? sortAscendingIcon : direction === 'desc' ? sortDescendingIcon : sortIcon, size: 18, sourceSize: 24, active: Boolean(direction) }), _jsx("span", { className: "inkra-visually-hidden", children: sortStatusLabel(header.column.id, direction) })] });
+                                        })() }, header.id))] }, headerGroup.id)) }), _jsx(Table.Body, { children: loading ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", role: "status", children: pencilCopy(loadingMessage, 'data-table-loading') }) }) })
+                                : rows.length === 0 ? _jsx(Table.Row, { children: _jsx(Table.Cell, { colSpan: visibleColumnCount, children: _jsx("div", { className: "inkra-data-table__state", children: pencilCopy(emptyMessage, 'data-table-empty') }) }) })
+                                    : rows.map(row => _jsxs(Table.Row, { selected: row.getIsSelected(), children: [selectable && _jsx(Table.Cell, { className: "inkra-data-table__select-cell", children: _jsx(SelectionCheckbox, { checked: row.getIsSelected(), label: selectRowLabel(row), disabled: !row.getCanSelect(), onChange: checked => row.toggleSelected(checked) }) }), row.getVisibleCells().map(cell => _jsx(Table.Cell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id)) })] }) }), pagination && _jsxs("nav", { className: "inkra-data-table__pagination", "aria-label": paginationLabel, children: [_jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": previousPageLabel, disabled: loading || pageCount === 0 || effectivePagination.pageIndex <= 0, onClick: () => table.previousPage(), children: _jsx(PencilIcon, { className: "inkra-data-table__page-arrow", paths: previousIcon, size: 18, sourceSize: 24 }) }), _jsx("span", { "aria-live": "polite", "aria-atomic": "true", children: pencilCopy(pageLabel(pageCount === 0 ? 0 : effectivePagination.pageIndex + 1, pageCount), 'data-table-page-label') }), _jsx(Button, { size: "icon-xs", variant: "ghost", "aria-label": nextPageLabel, disabled: loading || pageCount === 0 || effectivePagination.pageIndex >= pageCount - 1, onClick: () => table.nextPage(), children: _jsx(PencilIcon, { className: "inkra-data-table__page-arrow", paths: nextIcon, size: 18, sourceSize: 24 }) })] })] });
 }

package/dist/data-table/model.d.ts

@@ -0,0 +1,2 @@
+import type { PaginationState } from '@tanstack/react-table';
+export declare function normalizeDataTablePagination(state: PaginationState, rowCount: number): PaginationState;

package/dist/data-table/model.js

@@ -0,0 +1,7 @@
+export function normalizeDataTablePagination(state, rowCount) {
+    const pageSize = Number.isFinite(state.pageSize) ? Math.max(1, Math.floor(state.pageSize)) : 10;
+    const count = Number.isFinite(rowCount) ? Math.max(0, Math.floor(rowCount)) : 0;
+    const pageCount = count === 0 ? 0 : Math.ceil(count / pageSize);
+    const requestedIndex = Number.isFinite(state.pageIndex) ? Math.max(0, Math.floor(state.pageIndex)) : 0;
+    return { pageIndex: pageCount === 0 ? 0 : Math.min(requestedIndex, pageCount - 1), pageSize };
+}

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

@@ -1,6 +1,7 @@
 import type { AriaAttributes, CSSProperties, FocusEventHandler } from 'react';
 import type { DateRange } from 'react-day-picker';
 import type { CalendarProps } from '../calendar/index.js';
+import type { FieldControlSize } from '../form/types.js';
 export type DatePickerMode = 'single' | 'range';
 export type DatePickerRange = DateRange;
 export type DatePickerValue = Date | DatePickerRange | undefined;
@@ -23,6 +24,7 @@ export interface DatePickerProps {
     onBlur?: FocusEventHandler<HTMLButtonElement>;
     onFocus?: FocusEventHandler<HTMLButtonElement>;
     required?: boolean;
+    size?: FieldControlSize;
     style?: CSSProperties;
     mode?: DatePickerMode;
     value?: DatePickerValue;