@inkra/react 0.2.0 → 0.4.3

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/EditablePencilText.js

@@ -213,6 +213,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         let glyphs = new BoundedCache(128, 4 * 1024 * 1024);
         let disposed = false;
         let lastAppearance = '';
+        const numericControl = control instanceof HTMLInputElement && control.type === 'number';
+        let nativeNumberEditing = false;
         const appearanceKey = () => {
             const style = getComputedStyle(control);
             return JSON.stringify([
@@ -230,6 +232,12 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         const paint = () => {
             if (disposed)
                 return;
+            // Number inputs expose a sanitized value, not incomplete drafts such as "-" or "1.".
+            if (numericControl && (nativeNumberEditing || control.validity.badInput || composingRef.current)) {
+                root?.removeAttribute('data-pencil-editable-ready');
+                lastAppearance = '';
+                return;
+            }
             const key = appearanceKey();
             if (key === lastAppearance && root?.hasAttribute('data-pencil-editable-ready'))
                 return;
@@ -249,7 +257,25 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             }
         };
         scheduleRef.current = paint;
+        const beforeInput = (event) => {
+            if (!numericControl || event.defaultPrevented)
+                return;
+            nativeNumberEditing = true;
+            root?.setAttribute('data-pencil-number-editing', 'true');
+            paint();
+        };
+        const finishNumberEditing = () => {
+            if (!numericControl)
+                return;
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
+            paint();
+        };
         const startComposition = () => {
+            if (numericControl) {
+                nativeNumberEditing = true;
+                root?.setAttribute('data-pencil-number-editing', 'true');
+            }
             composingRef.current = {
                 value: control.value,
                 start: control.selectionStart ?? control.value.length,
@@ -273,6 +299,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
                 return;
             composingRef.current = null;
             root?.removeAttribute('data-composing');
+            nativeNumberEditing = false;
+            root?.removeAttribute('data-pencil-number-editing');
             refreshFonts();
         });
         const form = control.form;
@@ -284,6 +312,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
         }
         const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
         colorScheme.addEventListener('change', paint);
+        control.addEventListener('beforeinput', beforeInput);
+        control.addEventListener('blur', finishNumberEditing);
         control.addEventListener('input', paint);
         control.addEventListener('scroll', paint, { passive: true });
         control.addEventListener('compositionstart', startComposition);
@@ -301,6 +331,8 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             resize?.disconnect();
             appearance.disconnect();
             colorScheme.removeEventListener('change', paint);
+            control.removeEventListener('beforeinput', beforeInput);
+            control.removeEventListener('blur', finishNumberEditing);
             control.removeEventListener('input', paint);
             control.removeEventListener('scroll', paint);
             control.removeEventListener('compositionstart', startComposition);
@@ -310,9 +342,11 @@ export function EditablePencilText({ controlRef, defaultValue, multiline = false
             document.fonts?.removeEventListener('loadingerror', refreshFonts);
             root?.removeAttribute('data-pencil-editable-ready');
             root?.removeAttribute('data-composing');
+            root?.removeAttribute('data-pencil-number-editing');
             composingRef.current = null;
             glyphs = new BoundedCache(0, 0);
             buffer.width = buffer.height = 0;
+            canvas.width = canvas.height = 0;
             scheduleRef.current = () => { };
         };
     }, [controlRef, multiline, seed]);

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/Input.js

@@ -7,7 +7,7 @@ import { PencilText } from '../PencilText.js';
 import { InputAction } from './InputAction.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
-const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel']);
+const editablePencilInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'number']);
 const clearableInputTypes = new Set(['text', 'search', 'email', 'url', 'tel', 'password', 'number']);
 // Lucide X / LoaderCircle ISC geometry, rendered by the shared pencil engine.
 const clearPaths = [{ d: 'M18 6 6 18' }, { d: 'm6 6 12 12' }];

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. */

package/dist/form/Textarea.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
+import { PencilLine } from '../PencilLine.js';
 import { PencilText } from '../PencilText.js';
 import { PencilIcon } from '../PencilIcon.js';
 import { Button } from '../Button.js';
 import { Progress } from '../display/index.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
+import { InputAction } from './InputAction.js';
 const resizePaths = [{ d: 'M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4' }];
 const defaultCountLabel = ({ remaining }) => remaining < 0 ? `${-remaining} over limit` : `${remaining} remaining`;
-export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = defaultCountLabel, resize = 'none', resizeLabel = 'Resize text area', ...props }, ref) {
+export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', variant = 'outline', endAction, countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = defaultCountLabel, resize = 'none', resizeLabel = 'Resize text area', ...props }, ref) {
     const generatedId = useId();
     const textareaRef = useRef(null);
     const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? '').length);
@@ -69,11 +71,11 @@ export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaD
     });
     const resolvedSeed = seed ?? `inkra-textarea-${state.id ?? generatedId}`;
     const classes = ['inkra-textarea', className].filter(Boolean).join(' ');
-    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
+    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, "data-variant": variant, "data-end-action": endAction != null || undefined, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: variant === 'underline' ? 'ghost' : state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
                         if (!controlled)
                             setUncontrolledCount(event.currentTarget.value.length);
                         props.onInput?.(event);
-                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
+                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), endAction != null && _jsx("div", { className: "inkra-textarea__end-action", children: _jsx(InputAction, { disabled: Boolean(state.disabled), seed: `${resolvedSeed}-action`, children: endAction }) }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
                                 if (event.button !== 0)
                                     return;
                                 drag.current = { y: event.clientY, height: textareaRef.current?.getBoundingClientRect().height ?? minimumHeight };
@@ -98,5 +100,5 @@ export const Textarea = forwardRef(function Textarea({ 'aria-describedby': ariaD
                                 else
                                     return;
                                 event.preventDefault();
-                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] })] }) }));
+                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] }), variant === 'underline' && _jsx(PencilLine, { className: "inkra-textarea__underline", seed: `${resolvedSeed}-underline` })] }) }));
 });

package/dist/hotkey/index.d.ts

@@ -25,6 +25,7 @@ export interface HotkeyInputProps extends Omit<InputHTMLAttributes<HTMLInputElem
     conflictMessage?: string;
     platform?: HotkeyPlatform;
     placeholder?: string;
+    recordingLabel?: string;
     clearable?: boolean;
     clearButtonLabel?: string;
     blurOnCapture?: boolean;

package/dist/hotkey/index.js

@@ -34,7 +34,7 @@ export const Hotkey = forwardRef(function Hotkey({ 'aria-label': ariaLabel, clas
     const label = formatHotkey(normalized, resolvedPlatform);
     return (_jsx("kbd", { ...props, "aria-label": ariaLabel ?? label, className: classes('inkra-hotkey', className), "data-platform": resolvedPlatform, "data-size": size, ref: ref, children: tokens.map((token, index) => (_jsxs("span", { className: "inkra-hotkey__part", children: [index > 0 && resolvedPlatform !== 'mac' ? (_jsx("span", { "aria-hidden": "true", className: "inkra-hotkey__separator", children: separator ?? '+' })) : null, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-hotkey__key", radius: 4, seed: `${hotkeySignature(normalized)}-${resolvedPlatform}-${index}`, variant: "quiet", children: _jsx(PencilText, { seed: `${hotkeySignature(normalized)}-${resolvedPlatform}-${index}-label`, children: token }) })] }, `${token}-${index}`))) }));
 });
-export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, blurOnCapture = true, className, classNames = {}, clearable = true, clearButtonLabel = 'Clear shortcut', conflict, conflictMessage = 'Shortcut already assigned', defaultValue = null, disabled, id, invalid = false, onBlur, onCancel, onCompositionEnd, onCompositionStart, onConflict, onFocus, onKeyDown, onValueChange, placeholder = 'Press shortcut', platform = 'auto', readOnly, required, seed, size = 'md', validateHotkey, value, ...props }, forwardedRef) {
+export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, blurOnCapture = true, className, classNames = {}, clearable = true, clearButtonLabel = 'Clear shortcut', conflict, conflictMessage = 'Shortcut already assigned', defaultValue = null, disabled, id, invalid = false, onBlur, onCancel, onCompositionEnd, onCompositionStart, onConflict, onFocus, onKeyDown, onValueChange, placeholder = 'Press shortcut', platform = 'auto', readOnly, recordingLabel = 'Press a shortcut...', required, seed, size = 'md', validateHotkey, value, ...props }, forwardedRef) {
     const generatedId = useId();
     const inputRef = useRef(null);
     const composingRef = useRef(false);
@@ -48,18 +48,20 @@ export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby':
     const currentSignature = hotkeySignature(currentValue);
     const validationMessage = externalConflict ?? (localConflict?.signature === currentSignature ? localConflict.message : undefined);
     const messageId = validationMessage ? `${id ?? generatedId}-hotkey-conflict` : undefined;
+    const statusId = `${id ?? generatedId}-hotkey-status`;
     const state = useResolvedControlProps({
         id,
         required,
         disabled,
         readOnly,
         invalid: invalid || Boolean(validationMessage),
-        'aria-describedby': [ariaDescribedBy, messageId].filter(Boolean).join(' ') || undefined,
+        'aria-describedby': [ariaDescribedBy, statusId, messageId].filter(Boolean).join(' ') || undefined,
         'aria-errormessage': validationMessage ? messageId : ariaErrorMessage,
         'aria-invalid': ariaInvalid,
     });
     const resolvedSeed = seed ?? `inkra-hotkey-input-${state.id ?? generatedId}`;
     const displayValue = currentValue ? formatHotkey(currentValue, resolvedPlatform) : '';
+    const recording = focused && !state.disabled && !state.readOnly;
     useImperativeHandle(forwardedRef, () => inputRef.current);
     const updateValue = (nextValue, details) => {
         if (!isControlled)
@@ -119,12 +121,12 @@ export const HotkeyInput = forwardRef(function HotkeyInput({ 'aria-describedby':
         setFocused(false);
         onBlur?.(event);
     };
-    return (_jsxs("span", { className: classes('inkra-hotkey-input', classNames.root), "data-disabled": state.disabled || undefined, "data-focus-within": focused || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: [_jsxs(PencilSurface, { as: "span", className: classes('inkra-hotkey-input__control', classNames.control), clipContent: true, seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("input", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-label": ariaLabel, autoComplete: "off", className: classes('inkra-hotkey-input__native', className, classNames.input), disabled: state.disabled, id: state.id, inputMode: "none", onBlur: handleBlur, onChange: () => { }, onCompositionEnd: event => {
+    return (_jsxs("span", { className: classes('inkra-hotkey-input', classNames.root), "data-disabled": state.disabled || undefined, "data-focus-within": focused || undefined, "data-invalid": state.invalid || undefined, "data-recording": recording || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, children: [_jsxs(PencilSurface, { as: "span", className: classes('inkra-hotkey-input__control', classNames.control), clipContent: true, seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("input", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, "aria-label": ariaLabel, autoComplete: "off", className: classes('inkra-hotkey-input__native', className, classNames.input), disabled: state.disabled, id: state.id, inputMode: "none", onBlur: handleBlur, onChange: () => { }, onCompositionEnd: event => {
                             composingRef.current = false;
                             onCompositionEnd?.(event);
                         }, onCompositionStart: event => {
                             composingRef.current = true;
                             onCompositionStart?.(event);
-                        }, onFocus: handleFocus, onKeyDown: handleKeyDown, readOnly: state.readOnly, ref: inputRef, required: state.required, spellCheck: false, value: displayValue }), _jsx("span", { "aria-hidden": "true", className: classes('inkra-hotkey-input__value', classNames.value), children: currentValue ? _jsx(Hotkey, { value: currentValue, platform: resolvedPlatform, size: size }) : _jsx(PencilText, { className: "inkra-hotkey-input__placeholder", seed: `${resolvedSeed}-placeholder`, children: placeholder }) }), clearable && currentValue ? (_jsx("button", { "aria-label": clearButtonLabel, className: "inkra-hotkey-input__clear", disabled: state.disabled || state.readOnly, onClick: clear, onPointerDown: event => event.preventDefault(), title: clearButtonLabel, type: "button", children: _jsx(PencilIcon, { paths: clearPaths, seed: `${resolvedSeed}-clear`, size: size === 'sm' ? 18 : size === 'lg' ? 26 : 22, sourceSize: 24 }) })) : null] }), validationMessage ? (_jsx(PencilText, { as: "span", className: classes('inkra-hotkey-input__message', classNames.message), id: messageId, role: "alert", seed: `${resolvedSeed}-message`, children: validationMessage })) : null] }));
+                        }, onFocus: handleFocus, onKeyDown: handleKeyDown, readOnly: state.readOnly, ref: inputRef, required: state.required, spellCheck: false, value: displayValue }), _jsx("span", { "aria-hidden": "true", className: classes('inkra-hotkey-input__value', classNames.value), children: recording ? (_jsx(PencilText, { className: "inkra-hotkey-input__recording", seed: `${resolvedSeed}-recording`, children: recordingLabel })) : currentValue ? (_jsx(Hotkey, { value: currentValue, platform: resolvedPlatform, size: size })) : (_jsx(PencilText, { className: "inkra-hotkey-input__placeholder", seed: `${resolvedSeed}-placeholder`, children: placeholder })) }), clearable && currentValue ? (_jsx("button", { "aria-label": clearButtonLabel, className: "inkra-hotkey-input__clear", disabled: state.disabled || state.readOnly, onClick: clear, onPointerDown: event => event.preventDefault(), title: clearButtonLabel, type: "button", children: _jsx(PencilIcon, { paths: clearPaths, seed: `${resolvedSeed}-clear`, size: size === 'sm' ? 18 : size === 'lg' ? 26 : 22, sourceSize: 24 }) })) : null, _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-hotkey-input__focus-ring", seed: `${resolvedSeed}-focus`, variant: "outline" })] }), _jsx("span", { "aria-live": "polite", className: "inkra-hotkey-input__status", id: statusId, children: recording ? recordingLabel : '' }), validationMessage ? (_jsx(PencilText, { as: "span", className: classes('inkra-hotkey-input__message', classNames.message), id: messageId, role: "alert", seed: `${resolvedSeed}-message`, children: validationMessage })) : null] }));
 });
 export { detectHotkeyPlatform, formatHotkey, getHotkeyTokens, hotkeyFromKeyboardEvent, hotkeySignature, normalizeHotkey, };

package/dist/hover-card/index.js

@@ -131,7 +131,7 @@ export const HoverCardContent = forwardRef(function HoverCardContent({ avoidColl
 export const HoverCardTitle = PopoverTitle;
 export const HoverCardDescription = PopoverDescription;
 export const HoverCardClose = PopoverClose;
-export const HoverCard = Object.freeze({
+export const HoverCard = /* @__PURE__ */ Object.freeze({
     Root: HoverCardRoot,
     Trigger: HoverCardTrigger,
     Content: HoverCardContent,

package/dist/image-cropper/index.js

@@ -124,8 +124,10 @@ export const ImageCropper = forwardRef(function ImageCropper({ alt, aspect = 1,
             return undefined;
         const update = () => {
             const rect = stage.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0)
-                setStageSize({ width: rect.width, height: rect.height });
+            if (rect.width > 0 && rect.height > 0) {
+                setStageSize(current => current.width === rect.width && current.height === rect.height
+                    ? current : { width: rect.width, height: rect.height });
+            }
         };
         update();
         const observer = new ResizeObserver(update);

package/dist/image-viewer/VideoResource.d.ts

@@ -0,0 +1,21 @@
+export interface VideoResourceLabels {
+    controls: string;
+    play: string;
+    pause: string;
+    seek: string;
+    mute: string;
+    unmute: string;
+    volume: string;
+    rate: string;
+    playbackError: string;
+    time: (current: number, duration: number) => string;
+}
+export interface VideoResourceProps {
+    src: string;
+    poster?: string;
+    alt: string;
+    labels?: Partial<VideoResourceLabels>;
+    onError?: () => void;
+    onLoad?: () => void;
+}
+export declare function VideoResource({ alt, labels: overrides, onError, onLoad, poster, src }: VideoResourceProps): import("react").JSX.Element;