@inkra/react 0.3.0 → 0.4.3

package/dist/drawer/index.js

@@ -40,7 +40,7 @@ export const DrawerContent = forwardRef(function DrawerContent({ children, class
     const themedProps = usePortalThemeProps({ ...props, style });
     const mergedStyle = { ...themedProps.style, '--inkra-drawer-size': drawerSize(size) };
     const edgeOrientation = direction === 'left' || direction === 'right' ? 'vertical' : 'horizontal';
-    return (_jsx(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] }) }));
+    return (_jsxs(DialogPrimitive.Content, { ...themedProps, className: classes('inkra-drawer__content', className), "data-direction": direction, ref: ref, style: mergedStyle, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-drawer__focus-ring", radius: 0, seed: `drawer-focus-${id}`, variant: "outline" }), _jsxs(PencilSurface, { className: "inkra-drawer__surface", radius: 0, seed: seed ?? `inkra-drawer-${id}`, variant: "full", children: [_jsx(PencilLine, { className: "inkra-drawer__edge", orientation: edgeOrientation, seed: `drawer-edge-${id}` }), _jsx("div", { className: "inkra-drawer__layout", children: children })] })] }));
 });
 export const DrawerTitle = forwardRef(function DrawerTitle({ children, className, seed, ...props }, ref) {
     const id = useId();
@@ -63,7 +63,8 @@ export const DrawerCloseButton = forwardRef(function DrawerCloseButton({ classNa
 });
 export const DrawerHeader = forwardRef(function DrawerHeader({ action, children, className, closeLabel = 'Close', divided = true, showClose = true, ...props }, ref) {
     const id = useId();
-    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), (action || showClose) ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });
+    const hasActions = Boolean(action || showClose);
+    return _jsxs("div", { ...props, className: classes('inkra-drawer__header', className), "data-actions": hasActions || undefined, "data-custom-action": action ? true : undefined, "data-divided": divided || undefined, ref: ref, children: [_jsx("div", { className: "inkra-drawer__heading", children: children }), hasActions ? _jsxs("div", { className: "inkra-drawer__header-actions", children: [action, showClose ? _jsx(DrawerCloseButton, { label: closeLabel }) : null] }) : null, divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-header-${id}` }) : null] });
 });
 export const DrawerBody = forwardRef(function DrawerBody({ className, ...props }, ref) {
     return _jsx("div", { ...props, className: classes('inkra-drawer__body', className), ref: ref });
@@ -72,7 +73,7 @@ export const DrawerFooter = forwardRef(function DrawerFooter({ align = 'end', ch
     const id = useId();
     return _jsxs("div", { ...props, className: classes('inkra-drawer__footer', className), "data-align": align, "data-divided": divided || undefined, ref: ref, children: [divided ? _jsx(PencilLine, { className: "inkra-drawer__divider", seed: `drawer-footer-${id}` }) : null, children] });
 });
-export const Drawer = Object.freeze({
+export const Drawer = /* @__PURE__ */ Object.freeze({
     Root: DrawerRoot,
     Trigger: DrawerTrigger,
     Portal: DrawerPortal,

package/dist/editable/index.d.ts

@@ -1,7 +1,23 @@
-import type { HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { FocusEvent, HTMLAttributes, KeyboardEvent, ReactNode } from 'react';
+import type { SearchableSelectOption } from '../select/index.js';
 import type { InputProps } from '../form/Input.js';
 import type { TextareaProps } from '../form/Textarea.js';
 export type EditableBlurBehavior = 'ignore' | 'save' | 'cancel';
+export type EditableEditorType = 'input' | 'textarea' | 'select';
+export interface EditableSelectProps {
+    items: readonly SearchableSelectOption[];
+    mode?: 'dropdown' | 'searchable' | 'stepper';
+    size?: 'sm' | 'md' | 'lg';
+    dir?: 'ltr' | 'rtl';
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    openLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+    loop?: boolean;
+}
 export type EditableSaveResult = boolean | string | void | null | undefined;
 export type EditableSaveHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
 export type EditableValidateHandler = (value: string, previousValue: string) => EditableSaveResult | Promise<EditableSaveResult>;
@@ -9,12 +25,16 @@ export interface EditableEditorProps {
     value: string;
     onValueChange: (value: string) => void;
     onKeyDown: (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    onBlur: () => void;
+    onBlur: (event: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     disabled?: boolean;
+    readOnly?: boolean;
     invalid?: boolean;
     error?: string;
     autoFocus?: boolean;
     'aria-label'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
 }
 export type EditableEditor = ReactNode | ((props: EditableEditorProps) => ReactNode);
 export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
@@ -29,6 +49,8 @@ export interface EditableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chi
     onCancel?: (value: string) => void;
     display?: ReactNode | ((value: string) => ReactNode);
     editor?: EditableEditor;
+    editorType?: EditableEditorType;
+    selectProps?: EditableSelectProps;
     multiline?: boolean;
     inputProps?: Omit<InputProps, 'value' | 'defaultValue' | 'onValueChange' | 'onChange'>;
     textareaProps?: Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange'>;

package/dist/editable/index.js

@@ -1,10 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, 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 { Textarea } from '../form/Textarea.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import { Select } from '../select/index.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
 const interactiveSelector = 'button, a, input, textarea, select, option, [contenteditable="true"], [data-editable-ignore]';
+const checkIcon = [{ d: 'm20 6-11 11-5-5' }];
+const cancelIcon = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];
+function mergeIds(...ids) {
+    return ids.filter(Boolean).join(' ') || undefined;
+}
 function resultMessage(result, fallback) {
     if (typeof result === 'string')
         return result || fallback;
@@ -15,11 +25,15 @@ function resultMessage(result, fallback) {
 function isComposing(event) {
     return event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
 }
-export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel, blurBehavior = 'ignore', className, defaultEditing = false, defaultValue = '', disabled = false, display, editor, editing, id, inputProps, invalid = false, multiline = false, onCancel, onEditingChange, onSave, onValueChange, placeholder = 'Edit value', readOnly = false, saveLabel = 'Save', cancelLabel = 'Cancel', startEditingLabel = 'Edit value', seed, submitOnEnter = !multiline, textareaProps, validate, value, ...props }, forwardedRef) {
+export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel, blurBehavior = 'ignore', className, defaultEditing = false, defaultValue = '', disabled = false, display, editor, editorType, editing, id, inputProps, invalid = false, multiline = false, onBlur: onRootBlur, onCancel, onEditingChange, onSave, onValueChange, placeholder = 'Edit value', readOnly = false, saveLabel = 'Save', cancelLabel = 'Cancel', startEditingLabel = 'Edit value', seed, selectProps, submitOnEnter = true, textareaProps, validate, value, ...props }, forwardedRef) {
     const generatedId = useId();
     const rootRef = useRef(null);
     const editorRef = useRef(null);
-    const displayRef = useRef(null);
+    const editButtonRef = useRef(null);
+    const blurFrameRef = useRef(undefined);
+    const savingRef = useRef(false);
+    const popupOpenRef = useRef(false);
+    const popupFrameRef = useRef(undefined);
     const controlledValue = value !== undefined;
     const controlledEditing = editing !== undefined;
     const [localValue, setLocalValue] = useState(String(value ?? defaultValue));
@@ -31,6 +45,11 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
     const isEditing = controlledEditing ? Boolean(editing) : localEditing;
     const resolvedSeed = seed ?? `inkra-editable-${id ?? generatedId}`;
     const resolvedId = id ?? `inkra-editable-${generatedId}`;
+    const resolvedEditorType = editorType ?? (multiline ? 'textarea' : 'input');
+    const isMultiline = resolvedEditorType === 'textarea';
+    const resolvedSize = resolvedEditorType === 'select' ? (selectProps?.size ?? 'md') : isMultiline ? (textareaProps?.size ?? 'md') : (inputProps?.size ?? 'md');
+    const actionSize = resolvedSize === 'sm' ? 'icon-sm' : resolvedSize === 'lg' ? 'icon-lg' : 'icon';
+    const actionIconSize = resolvedSize === 'sm' ? 18 : resolvedSize === 'lg' ? 24 : 20;
     useEffect(() => {
         if (controlledValue) {
             const next = String(value ?? '');
@@ -43,9 +62,18 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
     useEffect(() => {
         if (!isEditing || disabled || readOnly)
             return;
-        const frame = requestAnimationFrame(() => editorRef.current?.focus({ preventScroll: true }));
+        const frame = requestAnimationFrame(() => {
+            const control = editorRef.current ?? rootRef.current?.querySelector('[data-editable-editor] input:not([type="hidden"]), [data-editable-editor] textarea, [data-editable-editor] [role="combobox"], [data-editable-editor] [role="spinbutton"]');
+            control?.focus({ preventScroll: true });
+        });
         return () => cancelAnimationFrame(frame);
     }, [disabled, isEditing, readOnly]);
+    useEffect(() => () => {
+        if (blurFrameRef.current !== undefined)
+            cancelAnimationFrame(blurFrameRef.current);
+        if (popupFrameRef.current !== undefined)
+            cancelAnimationFrame(popupFrameRef.current);
+    }, []);
     const setEditing = useCallback((next) => {
         if (!controlledEditing)
             setLocalEditing(next);
@@ -57,31 +85,41 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
         onValueChange?.(next);
     }, [controlledValue, onValueChange]);
     const startEditing = useCallback(() => {
-        if (disabled || readOnly || saving || isEditing)
+        if (disabled || readOnly || savingRef.current || isEditing)
             return;
         setError(undefined);
         previousValueRef.current = currentValue;
         setEditing(true);
-    }, [currentValue, disabled, isEditing, readOnly, saving, setEditing]);
+    }, [currentValue, disabled, isEditing, readOnly, setEditing]);
     const finish = useCallback((restoreFocus = true) => {
+        popupOpenRef.current = false;
         setEditing(false);
         if (restoreFocus)
-            requestAnimationFrame(() => displayRef.current?.focus({ preventScroll: true }));
+            requestAnimationFrame(() => editButtonRef.current?.focus({ preventScroll: true }));
     }, [setEditing]);
-    const cancel = useCallback(() => {
-        if (saving)
+    const cancel = useCallback((restoreFocus = true) => {
+        if (savingRef.current)
             return;
+        if (blurFrameRef.current !== undefined) {
+            cancelAnimationFrame(blurFrameRef.current);
+            blurFrameRef.current = undefined;
+        }
         const previous = previousValueRef.current;
         updateValue(previous);
         setError(undefined);
         onCancel?.(previous);
-        finish();
-    }, [finish, onCancel, saving, updateValue]);
-    const save = useCallback(async () => {
-        if (saving || disabled || readOnly)
+        finish(restoreFocus);
+    }, [finish, onCancel, updateValue]);
+    const save = useCallback(async (restoreFocus = true) => {
+        if (savingRef.current || disabled || readOnly)
             return;
+        if (blurFrameRef.current !== undefined) {
+            cancelAnimationFrame(blurFrameRef.current);
+            blurFrameRef.current = undefined;
+        }
         const next = currentValue;
         const previous = previousValueRef.current;
+        savingRef.current = true;
         setSaving(true);
         setError(undefined);
         try {
@@ -99,64 +137,131 @@ export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel,
             }
             previousValueRef.current = next;
             updateValue(next);
-            finish();
+            finish(restoreFocus);
         }
         catch (caught) {
             setError(caught instanceof Error ? caught.message : 'Could not save value');
         }
         finally {
+            savingRef.current = false;
             setSaving(false);
         }
-    }, [currentValue, disabled, finish, onSave, readOnly, saving, updateValue, validate]);
-    useImperativeHandle(forwardedRef, () => ({ focus: () => displayRef.current?.focus(), startEditing, save, cancel }), [cancel, save, startEditing]);
+    }, [currentValue, disabled, finish, onSave, readOnly, updateValue, validate]);
+    useImperativeHandle(forwardedRef, () => ({ focus: () => editButtonRef.current?.focus(), startEditing, save, cancel }), [cancel, save, startEditing]);
     const handleDisplayClick = (event) => {
         if (event.target.closest(interactiveSelector))
             return;
         startEditing();
     };
-    const handleKeyDown = (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-            event.preventDefault();
-            startEditing();
-        }
-    };
     const handleEditorKeyDown = (event) => {
-        if (isComposing(event))
+        if (event.defaultPrevented || isComposing(event))
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
             cancel();
             return;
         }
-        if (event.key === 'Enter' && submitOnEnter && (!multiline || event.ctrlKey || event.metaKey)) {
+        if (event.key === 'Enter' && submitOnEnter && (!isMultiline || event.ctrlKey || event.metaKey)) {
             event.preventDefault();
             void save();
         }
     };
-    const handleEditorBlur = () => {
-        if (saving || blurBehavior === 'ignore')
+    const handleEditorBlur = (event) => {
+        if (event.defaultPrevented || popupOpenRef.current || rootRef.current?.contains(event.relatedTarget))
             return;
-        if (blurBehavior === 'cancel')
-            cancel();
-        else
-            void save();
+        if (blurFrameRef.current !== undefined)
+            cancelAnimationFrame(blurFrameRef.current);
+        blurFrameRef.current = requestAnimationFrame(() => {
+            blurFrameRef.current = undefined;
+            if (popupOpenRef.current || rootRef.current?.contains(document.activeElement) || savingRef.current || blurBehavior === 'ignore')
+                return;
+            if (blurBehavior === 'cancel')
+                cancel(false);
+            else
+                void save(false);
+        });
     };
-    const displayContent = typeof display === 'function'
-        ? display(currentValue)
-        : (display ?? currentValue) || placeholder;
+    const displayValue = resolvedEditorType === 'select' ? (selectProps?.items.find(item => item.value === currentValue)?.label ?? currentValue) : currentValue;
+    const displayContent = display == null
+        ? _jsx(PencilText, { seed: `${resolvedSeed}-display-text`, children: displayValue || placeholder })
+        : typeof display === 'function' ? display(currentValue) : display;
     const editorProps = {
         value: currentValue,
         onValueChange: updateValue,
         onKeyDown: handleEditorKeyDown,
         onBlur: handleEditorBlur,
         disabled: disabled || saving,
+        readOnly,
         invalid: invalid || Boolean(error),
         error,
         autoFocus: true,
         'aria-label': ariaLabel,
+        'aria-describedby': error ? `${resolvedId}-error` : undefined,
+        'aria-errormessage': error ? `${resolvedId}-error` : undefined,
+        'aria-invalid': invalid || Boolean(error) || undefined,
+    };
+    const inputDescription = mergeIds(inputProps?.['aria-describedby'], error ? `${resolvedId}-error` : undefined);
+    const textareaDescription = mergeIds(textareaProps?.['aria-describedby'], error ? `${resolvedId}-error` : undefined);
+    const actions = _jsx(Tooltip.Provider, { children: _jsxs("span", { "aria-label": `${saveLabel}, ${cancelLabel}`, className: "inkra-editable__actions", role: "group", children: [_jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { "aria-label": saveLabel, className: "inkra-editable__action", disabled: disabled || readOnly, loading: saving, onClick: () => void save(), size: actionSize, title: saveLabel, type: "button", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: checkIcon, seed: `${resolvedSeed}-save-icon`, size: actionIconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: saveLabel }) })] }), _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { "aria-label": cancelLabel, className: "inkra-editable__action", disabled: disabled || saving, onClick: () => cancel(), size: actionSize, title: cancelLabel, type: "button", variant: "ghost", children: _jsx(PencilIcon, { decorative: true, paths: cancelIcon, seed: `${resolvedSeed}-cancel-icon`, size: actionIconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: cancelLabel }) })] })] }) });
+    const changePopupOpen = (open) => {
+        if (popupFrameRef.current !== undefined)
+            cancelAnimationFrame(popupFrameRef.current);
+        if (open)
+            popupOpenRef.current = true;
+        else
+            popupFrameRef.current = requestAnimationFrame(() => {
+                popupOpenRef.current = false;
+                if (!rootRef.current || rootRef.current.contains(document.activeElement) || document.activeElement === document.body || savingRef.current)
+                    return;
+                if (blurBehavior === 'cancel')
+                    cancel(false);
+                else if (blurBehavior === 'save')
+                    void save(false);
+            });
     };
-    const defaultEditor = multiline
-        ? _jsx(Textarea, { ...textareaProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onChange: event => updateValue(event.currentTarget.value), onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-textarea` })
-        : _jsx(Input, { ...inputProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onValueChange: updateValue, onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-input` });
-    return _jsx("div", { ...props, className: classes('inkra-editable', className), "data-editing": isEditing || undefined, "data-saving": saving || undefined, "data-invalid": Boolean(error) || invalid || undefined, "data-multiline": multiline || undefined, ref: rootRef, children: isEditing ? _jsxs("div", { className: "inkra-editable__editor", "data-editable-editor": "true", children: [editor == null ? defaultEditor : typeof editor === 'function' ? editor(editorProps) : editor, _jsxs("div", { className: "inkra-editable__actions", children: [_jsx(Button, { type: "button", size: "sm", variant: "primary", loading: saving, onClick: () => void save(), "aria-label": saveLabel, children: saveLabel }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: saving, onClick: cancel, "aria-label": cancelLabel, children: cancelLabel })] }), error ? _jsx("div", { className: "inkra-editable__error", role: "alert", id: `${resolvedId}-error`, children: error }) : null] }) : _jsx("div", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__display", "data-editable-display": "true", onClick: handleDisplayClick, onKeyDown: handleKeyDown, ref: displayRef, role: "button", tabIndex: disabled || readOnly ? -1 : 0, "aria-disabled": disabled || readOnly || undefined, children: displayContent }) });
+    const items = selectProps?.items ?? [];
+    const selectState = {
+        value: currentValue,
+        onValueChange: (next) => updateValue(next ?? ''),
+        disabled: disabled || saving,
+        readOnly,
+        size: resolvedSize,
+        dir: selectProps?.dir,
+        placeholder,
+        'aria-label': ariaLabel ?? startEditingLabel,
+        'aria-describedby': error ? `${resolvedId}-error` : undefined,
+        'aria-errormessage': error ? `${resolvedId}-error` : undefined,
+        invalid: invalid || Boolean(error),
+    };
+    const selectEditor = _jsxs("div", { className: "inkra-editable__select-row", onKeyDown: event => {
+            if (event.defaultPrevented || popupOpenRef.current || event.target !== event.currentTarget.ownerDocument.activeElement)
+                return;
+            if (event.key === 'Escape' && !event.nativeEvent.isComposing) {
+                event.preventDefault();
+                cancel();
+            }
+        }, children: [selectProps?.mode === 'searchable' ? _jsx(Select.Searchable, { ...selectState, items: items, searchPlaceholder: selectProps.searchPlaceholder, emptyContent: selectProps.emptyContent, clearable: selectProps.clearable ?? false, clearLabel: selectProps.clearLabel, openLabel: selectProps.openLabel, onOpenChange: changePopupOpen })
+                : selectProps?.mode === 'stepper' ? _jsx(Select.Stepper, { ...selectState, items: items, loop: selectProps.loop, previousLabel: selectProps.previousLabel, nextLabel: selectProps.nextLabel })
+                    : _jsxs(Select.Root, { value: currentValue, onValueChange: updateValue, disabled: disabled || saving, readOnly: readOnly, dir: selectProps?.dir, onOpenChange: changePopupOpen, children: [_jsx(Select.Trigger, { "aria-label": ariaLabel ?? startEditingLabel, "aria-describedby": selectState['aria-describedby'], "aria-errormessage": selectState['aria-errormessage'], invalid: selectState.invalid, size: resolvedSize, children: _jsx(Select.Value, { placeholder: placeholder }) }), _jsx(Select.Portal, { children: _jsx(Select.Content, { children: _jsx(Select.Viewport, { children: items.filter(item => item.value !== '').map(item => _jsxs(Select.Item, { value: item.value, disabled: item.disabled, children: [_jsx(Select.ItemText, { children: item.label }), _jsx(Select.ItemIndicator, {})] }, item.value)) }) }) })] }), actions] });
+    const defaultEditor = resolvedEditorType === 'select' ? selectEditor : isMultiline
+        ? _jsx(Textarea, { variant: "underline", ...textareaProps, endAction: _jsxs(_Fragment, { children: [textareaProps?.endAction, actions] }), "aria-describedby": textareaDescription, "aria-errormessage": error ? `${resolvedId}-error` : textareaProps?.['aria-errormessage'], "aria-invalid": invalid || Boolean(error) || textareaProps?.['aria-invalid'], "aria-label": ariaLabel, autoFocus: true, disabled: disabled || saving, invalid: invalid || Boolean(error), onBlur: event => {
+                textareaProps?.onBlur?.(event);
+                handleEditorBlur(event);
+            }, onChange: event => updateValue(event.currentTarget.value), onKeyDown: event => {
+                textareaProps?.onKeyDown?.(event);
+                handleEditorKeyDown(event);
+            }, placeholder: placeholder, readOnly: readOnly, ref: editorRef, seed: `${resolvedSeed}-textarea`, value: currentValue })
+        : _jsx(Input, { variant: "underline", ...inputProps, endAction: _jsxs(_Fragment, { children: [inputProps?.endAction, actions] }), "aria-describedby": inputDescription, "aria-errormessage": error ? `${resolvedId}-error` : inputProps?.['aria-errormessage'], "aria-invalid": invalid || Boolean(error) || inputProps?.['aria-invalid'], "aria-label": ariaLabel, autoFocus: true, disabled: disabled || saving, invalid: invalid || Boolean(error), onBlur: event => {
+                inputProps?.onBlur?.(event);
+                handleEditorBlur(event);
+            }, onKeyDown: event => {
+                inputProps?.onKeyDown?.(event);
+                handleEditorKeyDown(event);
+            }, onValueChange: updateValue, placeholder: placeholder, readOnly: readOnly, ref: editorRef, seed: `${resolvedSeed}-input`, value: currentValue });
+    return _jsx("div", { ...props, className: classes('inkra-editable', className), "data-disabled": disabled || undefined, "data-editing": isEditing || undefined, "data-saving": saving || undefined, "data-invalid": Boolean(error) || invalid || undefined, "data-multiline": isMultiline || undefined, "data-editor-type": resolvedEditorType, "data-readonly": readOnly || undefined, "data-size": resolvedSize, onBlur: event => {
+            onRootBlur?.(event);
+            handleEditorBlur(event);
+        }, ref: rootRef, children: _jsx("div", { className: "inkra-editable__frame", children: isEditing ? _jsxs("div", { className: "inkra-editable__editor", "data-editable-editor": "true", children: [editor == null ? defaultEditor : _jsxs("div", { className: "inkra-editable__custom-row", children: [typeof editor === 'function' ? editor(editorProps) : editor, actions] }), error ? _jsx(PencilText, { as: "div", className: "inkra-editable__error", role: "alert", id: `${resolvedId}-error`, seed: `${resolvedSeed}-error`, children: error }) : null] }) : _jsxs("div", { className: "inkra-editable__display-shell", children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-editable__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" }), display == null
+                        ? _jsx("button", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__display", "data-editable-display": "true", disabled: disabled || readOnly, onClick: startEditing, ref: editButtonRef, type: "button", children: displayContent })
+                        : _jsxs(_Fragment, { children: [_jsx("div", { className: "inkra-editable__display", "data-editable-display": "true", onClick: handleDisplayClick, children: displayContent }), _jsx("button", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__custom-trigger", disabled: disabled || readOnly, onClick: startEditing, ref: editButtonRef, type: "button", children: startEditingLabel })] })] }) }) });
 });

package/dist/empty/illustrations.d.ts

@@ -0,0 +1,8 @@
+import type { PencilIconPath } from '../PencilIcon.js';
+export type EmptyIllustration = 'inbox' | 'search' | 'folder' | 'documents' | 'messages' | 'image' | 'offline' | 'favorites';
+type Illustration = {
+    ink: readonly PencilIconPath[];
+    accent: readonly PencilIconPath[];
+};
+export declare const emptyIllustrations: Record<EmptyIllustration, Illustration>;
+export {};

package/dist/empty/illustrations.js

@@ -0,0 +1,78 @@
+const line = (d) => ({ d, mode: 'scuff' });
+const wash = (d) => ({ d, mode: 'wash' });
+// Geometry lives in a 40-unit square. Fine strokes keep large illustrations airy.
+export const emptyIllustrations = {
+    inbox: {
+        ink: [
+            line('M7 21 12 15H28L33 21V31H7Z'),
+            line('M7 21H15L17 25H23L25 21H33'),
+            line('M14 19V9H24L28 13V19'),
+            line('M24 9V13H28'), line('M17 13H21 M17 16H24'),
+            line('M10 28H14 M26 28H30'), line('M5 34Q19 35 35 33'),
+            line('M8 12 6 10 M32 14 35 12 M19 5V3'),
+        ],
+        accent: [wash('M8 23H14L17 27H23L26 23H32V30H8Z'), line('M17 19H24'), line('M30 7H34 M32 5V9')],
+    },
+    search: {
+        ink: [
+            line('M23 29H8V8H24L28 12V17'), line('M24 8V12H28'),
+            line('M12 13H20 M12 17H17 M12 21H15 M12 25H18'),
+            line('M31 23A7 7 0 1 1 17 23A7 7 0 1 1 31 23'),
+            line('M29 28 35 34 33 36 27 30'), line('M20 23Q20 20 23 19'),
+            line('M5 33H20 M4 17V20'),
+        ],
+        accent: [wash('M11 9H22V16H11Z'), line('M22 24H26'), line('M32 10H36 M34 8V12')],
+    },
+    folder: {
+        ink: [
+            line('M6 29V12H16L19 15H31V19'),
+            line('M7 31 11 20H35L30 31Z'), line('M14 18V9L26 7 28 17'),
+            line('M17 12 23 11 M17 15 24 14'), line('M14 24H22'),
+            line('M5 34Q20 35 34 33'), line('M4 20 2 19 M32 10 34 8'),
+        ],
+        accent: [wash('M12 22H33L29 30H9Z'), line('M7 12H15'), line('M8 5V8 M6.5 6.5H9.5')],
+    },
+    documents: {
+        ink: [
+            line('M10 28 7 10 21 7'), line('M13 31 11 8 28 6 29 12'),
+            line('M16 12H27L33 18V33H16Z'), line('M27 12V18H33'),
+            line('M20 21H28 M20 25H28 M20 29H25'),
+            line('M7 35H30 M5 25V28'),
+        ],
+        accent: [wash('M12 9 25 7 26 10 14 10 14 29 13 29Z'), line('M20 17H23'), line('M33 6V10 M31 8H35')],
+    },
+    messages: {
+        ink: [
+            line('M7 9H27Q29 9 29 11V22Q29 24 27 24H16L10 29V24H7Q5 24 5 22V11Q5 9 7 9Z'),
+            line('M32 16H33Q35 16 35 18V29Q35 31 33 31H30V35L25 31H19Q17 31 17 29V27'),
+            line('M10 14H23 M10 18H19'), line('M5 33H10'),
+        ],
+        accent: [wash('M20 26H27Q31 26 31 22V18H33V29H29V31L26 29H20Z'), line('M22 19H24'), line('M31 4V8 M29 6H33')],
+    },
+    image: {
+        ink: [
+            line('M7 27 5 10 29 7 30 11'), line('M10 13H34V31H10Z'),
+            line('M11 27 18 20 24 26 28 22 33 27'),
+            line('M29 18A2 2 0 1 1 25 18A2 2 0 1 1 29 18'),
+            line('M7 35Q21 36 34 34'), line('M4 23V26'),
+        ],
+        accent: [wash('M12 28 18 22 24 28 28 24 33 29H12Z'), line('M10 8 23 6'), line('M34 5V9 M32 7H36')],
+    },
+    offline: {
+        ink: [
+            line('M14 24H10A5 5 0 0 1 9 14A8 8 0 0 1 24 12A6 6 0 0 1 32 24H26'),
+            line('M18 21 15 25H20L17 30 M23 22 20 27H25L22 32'),
+            line('M7 32H12 M28 31H33'), line('M13 12Q15 9 18 10'),
+            line('M3 10 5 11 M30 7 32 5'),
+        ],
+        accent: [wash('M8 19Q16 22 32 19V23H25L23 20H17L15 23H10Q7 23 8 19Z'), line('M16 35H22'), line('M24 5V3')],
+    },
+    favorites: {
+        ink: [
+            line('M11 8H28V33L20 28 11 33Z'), line('M8 26V5H25'),
+            line('M20 12 22 16 27 17 23.5 20.5 24.5 25 20 22.5 15.5 25 16.5 20.5 13 17 18 16Z'),
+            line('M7 36H31 M32 26V29'),
+        ],
+        accent: [wash('M20 14 21.5 17.5 25 18 22 20 23 23 20 21 17 23 18 20 15 18 18.5 17.5Z'), line('M32 10V14 M30 12H34')],
+    },
+};

package/dist/empty/index.d.ts

@@ -1,10 +1,16 @@
 import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+import type { EmptyIllustration } from './illustrations.js';
+export type { EmptyIllustration } from './illustrations.js';
 export interface EmptyRootProps extends HTMLAttributes<HTMLDivElement> {
     size?: 'sm' | 'md' | 'lg';
     align?: 'start' | 'center';
 }
 export interface EmptyIconProps extends HTMLAttributes<HTMLDivElement> {
     decorative?: boolean;
+    /** Built-in illustration used when children are omitted. */
+    illustration?: EmptyIllustration;
+    /** Illustration size in CSS pixels; constrained by available width. */
+    size?: number;
 }
 type EmptyTitleProps<Element extends ElementType = 'h3'> = {
     as?: Element;
@@ -18,4 +24,3 @@ export declare const Empty: {
     Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
     Actions: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 };
-export {};

package/dist/empty/index.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PencilText } from '../PencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { emptyIllustrations } from './illustrations.js';
 function classes(base, className) {
     return [base, className].filter(Boolean).join(' ');
 }
 const Root = forwardRef(function EmptyRoot({ align = 'center', className, size = 'md', ...props }, ref) {
     return (_jsx("div", { ...props, className: classes('inkra-empty', className), "data-align": align, "data-size": size, ref: ref }));
 });
-const Icon = forwardRef(function EmptyIcon({ className, decorative = true, ...props }, ref) {
-    return (_jsx("div", { ...props, "aria-hidden": decorative || undefined, className: classes('inkra-empty__icon', className), ref: ref }));
+function IllustrationLayer({ paths, accent }) {
+    return _jsxs("span", { className: classes('inkra-empty__illustration-layer', accent ? 'inkra-empty__illustration-layer--accent' : undefined), children: [_jsx(PencilIcon, { paths: paths, size: 192, sourceSize: 40, decorative: true }), _jsx("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 40 40", className: "inkra-empty__illustration-fallback", children: paths.map((path, index) => _jsx("path", { d: path.d, fill: path.mode === 'wash' ? 'currentColor' : 'none', fillOpacity: 0.12, stroke: path.mode === 'wash' ? 'none' : 'currentColor', strokeWidth: 0.5, strokeLinecap: "round", strokeLinejoin: "round" }, index)) })] });
+}
+const Icon = forwardRef(function EmptyIcon({ children, className, decorative = true, illustration = 'inbox', size, style, ...props }, ref) {
+    const builtIn = children === undefined;
+    const drawing = emptyIllustrations[illustration] ?? emptyIllustrations.inbox;
+    const resolvedSize = typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : undefined;
+    return (_jsx("div", { ...props, "aria-hidden": decorative || undefined, role: props.role ?? (!decorative && builtIn ? 'img' : undefined), className: classes('inkra-empty__icon', className), "data-illustration": builtIn ? illustration : undefined, ref: ref, style: { '--inkra-empty-icon-size': resolvedSize === undefined ? undefined : `${resolvedSize}px`, ...style }, children: builtIn ? _jsxs("span", { className: "inkra-empty__illustration", "aria-hidden": "true", children: [_jsx(IllustrationLayer, { paths: drawing.accent, accent: true }), _jsx(IllustrationLayer, { paths: drawing.ink })] }) : children }));
 });
 function Title({ as, children, className, ...props }) {
     const Element = as ?? 'h3';

package/dist/flip/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, forwardRef, useContext, useImperativeHandle, useRef, useState, } from 'react';
+import { createContext, forwardRef, useCallback, useContext, useImperativeHandle, useRef, useState, } from 'react';
 import { Button } from '../Button.js';
 import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
 const classes = (...values) => values.filter(Boolean).join(' ');
@@ -36,20 +36,30 @@ function useReducedMotion(onReduce) {
 }
 export const Tilt = forwardRef(function Tilt({ axis = 'both', children, className, disabled = false, maxAngle = 8, onPointerCancel, onPointerEnter, onPointerLeave, onPointerMove, resetDuration = 180, response = 120, style, ...props }, forwardedRef) {
     const rootRef = useRef(null);
-    const reset = () => {
+    const frameRef = useRef(null);
+    const pointerRef = useRef(null);
+    const cancelFrame = useCallback(() => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+        pointerRef.current = null;
+    }, []);
+    const reset = useCallback(() => {
+        cancelFrame();
         const root = rootRef.current;
         if (!root)
             return;
         root.style.setProperty('--inkra-tilt-rotate-x', '0deg');
         root.style.setProperty('--inkra-tilt-rotate-y', '0deg');
         root.removeAttribute('data-tilting');
-    };
+    }, [cancelFrame]);
     const reducedMotion = useReducedMotion(reset);
     useImperativeHandle(forwardedRef, () => rootRef.current);
     useBrowserLayoutEffect(() => {
         if (disabled)
             reset();
-    }, [disabled]);
+    }, [disabled, reset]);
+    useBrowserLayoutEffect(() => cancelFrame, [cancelFrame]);
     const canTrack = (event) => (!disabled && !reducedMotion.current && event.pointerType === 'mouse' && event.isPrimary);
     const handlePointerEnter = (event) => {
         onPointerEnter?.(event);
@@ -61,10 +71,20 @@ export const Tilt = forwardRef(function Tilt({ axis = 'both', children, classNam
         onPointerMove?.(event);
         if (event.defaultPrevented || !canTrack(event))
             return;
-        const { rotateX, rotateY } = calculateTiltRotation(event.clientX, event.clientY, event.currentTarget.getBoundingClientRect(), maxAngle, axis);
-        event.currentTarget.style.setProperty('--inkra-tilt-rotate-x', `${rotateX}deg`);
-        event.currentTarget.style.setProperty('--inkra-tilt-rotate-y', `${rotateY}deg`);
-        event.currentTarget.setAttribute('data-tilting', 'true');
+        pointerRef.current = { root: event.currentTarget, clientX: event.clientX, clientY: event.clientY, maxAngle, axis };
+        if (frameRef.current !== null)
+            return;
+        frameRef.current = requestAnimationFrame(() => {
+            frameRef.current = null;
+            const pointer = pointerRef.current;
+            pointerRef.current = null;
+            if (!pointer)
+                return;
+            const { rotateX, rotateY } = calculateTiltRotation(pointer.clientX, pointer.clientY, pointer.root.getBoundingClientRect(), pointer.maxAngle, pointer.axis);
+            pointer.root.style.setProperty('--inkra-tilt-rotate-x', `${rotateX}deg`);
+            pointer.root.style.setProperty('--inkra-tilt-rotate-y', `${rotateY}deg`);
+            pointer.root.setAttribute('data-tilting', 'true');
+        });
     };
     const handlePointerLeave = (event) => {
         onPointerLeave?.(event);

package/dist/form/Field.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from 'react';
+import { useId, useMemo } from 'react';
 import { PencilText } from '../PencilText.js';
 import { FieldContext } from './context.js';
 function fieldCopy(value, seed) {
@@ -14,13 +14,14 @@ export function Field({ children, className, description, disabled = false, erro
     const descriptionId = hasDescription ? `${controlId}-description` : undefined;
     const errorId = hasError ? `${controlId}-error` : undefined;
     const classes = ['inkra-field', className].filter(Boolean).join(' ');
-    return (_jsx(FieldContext.Provider, { value: {
-            controlId,
-            descriptionId,
-            errorId,
-            required,
-            invalid: resolvedInvalid,
-            disabled,
-            readOnly,
-        }, children: _jsxs("div", { ...props, className: classes, "data-disabled": disabled || undefined, "data-invalid": resolvedInvalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, children: [_jsxs("label", { className: "inkra-field__label", htmlFor: controlId, children: [_jsx("span", { children: fieldCopy(label, `${controlId}-label`) }), required ? _jsx("span", { "aria-hidden": "true", className: "inkra-field__required", children: "*" }) : null] }), _jsx("div", { className: "inkra-field__control", children: children }), hasDescription ? (_jsx("div", { className: "inkra-field__description", id: descriptionId, children: fieldCopy(description, `${controlId}-description`) })) : null, hasError ? (_jsx("div", { className: "inkra-field__error", id: errorId, children: fieldCopy(error, `${controlId}-error`) })) : null] }) }));
+    const context = useMemo(() => ({
+        controlId,
+        descriptionId,
+        errorId,
+        required,
+        invalid: resolvedInvalid,
+        disabled,
+        readOnly,
+    }), [controlId, descriptionId, errorId, required, resolvedInvalid, disabled, readOnly]);
+    return (_jsx(FieldContext.Provider, { value: context, children: _jsxs("div", { ...props, className: classes, "data-disabled": disabled || undefined, "data-invalid": resolvedInvalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, children: [_jsxs("label", { className: "inkra-field__label", htmlFor: controlId, children: [_jsx("span", { children: fieldCopy(label, `${controlId}-label`) }), required ? _jsx("span", { "aria-hidden": "true", className: "inkra-field__required", children: "*" }) : null] }), _jsx("div", { className: "inkra-field__control", children: children }), hasDescription ? (_jsx("div", { className: "inkra-field__description", id: descriptionId, children: fieldCopy(description, `${controlId}-description`) })) : null, hasError ? (_jsx("div", { className: "inkra-field__error", id: errorId, children: fieldCopy(error, `${controlId}-error`) })) : null] }) }));
 }

package/dist/form/Textarea.d.ts

@@ -1,4 +1,4 @@
-import type { TextareaHTMLAttributes } from 'react';
+import type { ReactNode, TextareaHTMLAttributes } from 'react';
 import type { FieldControlStateProps } from './types.js';
 export interface TextareaCountDetails {
     count: number;
@@ -6,6 +6,8 @@ export interface TextareaCountDetails {
     remaining: number;
 }
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldControlStateProps {
+    variant?: 'outline' | 'underline';
+    endAction?: ReactNode;
     countMode?: 'remaining' | 'fraction' | 'progress' | 'none';
     countDisplay?: 'auto' | 'always';
     /** Ratio of maxLength at which the automatic counter appears. */