@inkra/react 0.0.0-stage → 0.1.0

package/dist/dropdown-menu/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Primitive from '@radix-ui/react-dropdown-menu';
+import { forwardRef, useId } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
+function Root(props) { return _jsx(PortalThemeProvider, { children: _jsx(Primitive.Root, { ...props }) }); }
+const Trigger = forwardRef(function Trigger(props, ref) {
+    return _jsx(Primitive.Trigger, { ...props, ref: usePortalTriggerRef(ref) });
+});
+function Portal({ children, ...props }) { return _jsx(Primitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }); }
+const Content = forwardRef(function Content({ className, children, seed, sideOffset = 6, collisionPadding = 8, ...props }, ref) {
+    const id = useId();
+    return _jsx(Primitive.Content, { ...props, ref: ref, sideOffset: sideOffset, collisionPadding: collisionPadding, className: classes('inkra-menu', className), children: _jsx(PencilSurface, { variant: "paper", radius: 8, seed: seed ?? `menu-${id}`, className: "inkra-menu__paper", children: children }) });
+});
+function ItemBody({ children, icon }) {
+    return _jsxs(_Fragment, { children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-menu__highlight" }), _jsx("span", { className: "inkra-menu__icon", "aria-hidden": "true", children: icon }), _jsx("span", { className: "inkra-menu__label", children: copy(children) })] });
+}
+const Item = forwardRef(function Item({ className, children, destructive = false, icon, ...props }, ref) {
+    return _jsx(Primitive.Item, { ...props, ref: ref, "data-destructive": destructive || undefined, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: icon, children: children }) });
+});
+const CheckboxItem = forwardRef(function CheckboxItem({ className, children, checked, ...props }, ref) {
+    const indicator = _jsx(Primitive.ItemIndicator, { children: _jsx(PencilIcon, { size: 16, sourceSize: 24, paths: [{ d: checked === 'indeterminate' ? 'M5 12h14' : 'M5 12.5L10 17L19 7' }] }) });
+    return _jsx(Primitive.CheckboxItem, { ...props, checked: checked, ref: ref, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: indicator, children: children }) });
+});
+const RadioItem = forwardRef(function RadioItem({ className, children, ...props }, ref) {
+    const indicator = _jsx(Primitive.ItemIndicator, { children: _jsx(PencilIcon, { size: 16, sourceSize: 24, paths: [{ d: 'M5 12.5L10 17L19 7' }] }) });
+    return _jsx(Primitive.RadioItem, { ...props, ref: ref, className: classes('inkra-menu__item', className), children: _jsx(ItemBody, { icon: indicator, children: children }) });
+});
+const Label = forwardRef(function Label({ className, children, ...props }, ref) {
+    return _jsx(Primitive.Label, { ...props, ref: ref, className: classes('inkra-menu__group-label', className), children: copy(children) });
+});
+const Separator = forwardRef(function Separator({ className, ...props }, ref) {
+    return _jsx(Primitive.Separator, { ...props, ref: ref, className: classes('inkra-menu__separator', className), children: _jsx(PencilLine, {}) });
+});
+export const DropdownMenu = { Root, Trigger, Portal, Content, Item, CheckboxItem, RadioItem, Label, Separator, Group: Primitive.Group, RadioGroup: Primitive.RadioGroup };

package/dist/form/EditablePencilText.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from 'react';
+type EditableControl = HTMLInputElement | HTMLTextAreaElement;
+interface EditablePencilTextProps {
+    controlRef: RefObject<EditableControl | null>;
+    defaultValue?: string | number | readonly string[];
+    multiline?: boolean;
+    placeholder?: string;
+    seed: string | number;
+    value?: string | number | readonly string[];
+    wrap?: string;
+}
+export declare function EditablePencilText({ controlRef, defaultValue, multiline, placeholder, seed, value, }: EditablePencilTextProps): import("react").JSX.Element;
+export {};

package/dist/form/EditablePencilText.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { effectiveDpr } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { renderPencilText } from '../internal/textRenderer.js';
+import { queueTextPaint } from '../internal/textQueue.js';
+const MAX_EDITABLE_TEXT = 4096;
+const MAX_EDITABLE_LINE = 256;
+const complexScript = /[\u0590-\u08ff\u0900-\u0dff\u0e00-\u0fff\u1780-\u18af\u200c\u200d]/u;
+function numeric(style, property) {
+    const value = Number.parseFloat(style.getPropertyValue(property));
+    return Number.isFinite(value) ? value : 0;
+}
+function editableText(control) {
+    const placeholder = control.value.length === 0;
+    return { text: placeholder ? control.placeholder : control.value, placeholder };
+}
+function visibleText(text, context, scrollLeft, viewportWidth) {
+    const characters = Array.from(text);
+    const overscan = Math.max(16, viewportWidth * 0.2);
+    const startEdge = Math.max(0, scrollLeft - overscan);
+    const endEdge = scrollLeft + viewportWidth + overscan;
+    let offset = 0;
+    let start = 0;
+    let end = characters.length;
+    for (let index = 0; index < characters.length; index += 1) {
+        const width = context.measureText(characters[index]).width;
+        if (offset + width < startEdge)
+            start = index + 1;
+        if (offset <= endEdge)
+            end = index + 1;
+        offset += width;
+        if (offset > endEdge)
+            break;
+    }
+    const visible = characters.slice(start, end).join('');
+    if (Array.from(visible).length > MAX_EDITABLE_LINE)
+        return null;
+    return { text: visible, offset: context.measureText(characters.slice(0, start).join('')).width };
+}
+function copyMirrorStyle(mirror, control, style) {
+    Object.assign(mirror.style, {
+        boxSizing: 'border-box',
+        position: 'fixed',
+        left: '-100000px',
+        top: '0',
+        visibility: 'hidden',
+        pointerEvents: 'none',
+        width: `${control.clientWidth}px`,
+        minHeight: `${control.scrollHeight}px`,
+        paddingTop: style.paddingTop,
+        paddingRight: style.paddingRight,
+        paddingBottom: style.paddingBottom,
+        paddingLeft: style.paddingLeft,
+        border: '0',
+        font: style.font,
+        fontFamily: style.fontFamily,
+        fontSize: style.fontSize,
+        fontWeight: style.fontWeight,
+        fontStyle: style.fontStyle,
+        fontKerning: style.fontKerning,
+        letterSpacing: style.letterSpacing,
+        lineHeight: style.lineHeight,
+        textAlign: style.textAlign,
+        textIndent: style.textIndent,
+        textTransform: style.textTransform,
+        direction: style.direction,
+        unicodeBidi: style.unicodeBidi,
+        tabSize: style.tabSize,
+        overflowWrap: style.overflowWrap,
+        wordBreak: style.wordBreak,
+        whiteSpace: control.wrap === 'off' ? 'pre' : 'pre-wrap',
+    });
+}
+function measureTextareaLines(control, text, style) {
+    const mirror = document.createElement('div');
+    copyMirrorStyle(mirror, control, style);
+    const source = document.createTextNode(text);
+    mirror.appendChild(source);
+    document.body.appendChild(mirror);
+    const mirrorBox = mirror.getBoundingClientRect();
+    const range = document.createRange();
+    const lines = [];
+    let offset = 0;
+    try {
+        for (const character of text) {
+            range.setStart(source, offset);
+            offset += character.length;
+            range.setEnd(source, offset);
+            const rectangle = range.getBoundingClientRect();
+            let line = lines[lines.length - 1];
+            if (!line || Math.abs(line.top - rectangle.top) > 1) {
+                line = { text: '', left: rectangle.left - mirrorBox.left, top: rectangle.top - mirrorBox.top };
+                lines.push(line);
+            }
+            line.text += character;
+            if (Array.from(line.text).length > MAX_EDITABLE_LINE)
+                return null;
+        }
+        return lines;
+    }
+    finally {
+        range.detach();
+        mirror.remove();
+    }
+}
+function textStart(direction, textAlign, controlWidth, paddingStart, paddingEnd, advance) {
+    const available = Math.max(0, controlWidth - paddingStart - paddingEnd);
+    const resolved = textAlign === 'start'
+        ? (direction === 'rtl' ? 'right' : 'left')
+        : textAlign === 'end'
+            ? (direction === 'rtl' ? 'left' : 'right')
+            : textAlign;
+    if (resolved === 'center')
+        return paddingStart + (available - advance) / 2;
+    if (resolved === 'right')
+        return controlWidth - paddingEnd - advance;
+    return paddingStart;
+}
+function paintEditableText(canvas, control, seed, multiline) {
+    const width = control.clientWidth;
+    const height = control.clientHeight;
+    const context = canvas.getContext('2d');
+    if (!context || context.isContextLost?.() || width < 2 || height < 2)
+        return false;
+    Object.assign(canvas.style, {
+        left: `${control.offsetLeft}px`,
+        top: `${control.offsetTop}px`,
+        right: 'auto',
+        bottom: 'auto',
+        width: `${width}px`,
+        height: `${height}px`,
+    });
+    const content = editableText(control);
+    if (Array.from(content.text).length > MAX_EDITABLE_TEXT)
+        return false;
+    const style = getComputedStyle(control);
+    if (style.direction === 'rtl' || complexScript.test(content.text))
+        return false;
+    const fontSize = Number.parseFloat(style.fontSize);
+    if (!Number.isFinite(fontSize) || fontSize <= 0)
+        return false;
+    const dpr = effectiveDpr(2);
+    canvas.width = Math.ceil(width * dpr);
+    canvas.height = Math.ceil(height * dpr);
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.clearRect(0, 0, width, height);
+    if (!content.text)
+        return true;
+    const family = style.fontFamily;
+    const color = content.placeholder
+        ? style.getPropertyValue('--inkra-editable-placeholder-color').trim() || style.color
+        : style.getPropertyValue('--inkra-editable-text-color').trim() || style.color;
+    const paddingStart = numeric(style, 'padding-inline-start') || numeric(style, 'padding-left');
+    const paddingEnd = numeric(style, 'padding-inline-end') || numeric(style, 'padding-right');
+    const measure = document.createElement('canvas').getContext('2d');
+    if (!measure)
+        return false;
+    measure.font = `400 ${fontSize}px ${family}`;
+    measure.fontKerning = 'none';
+    if (!multiline && Array.from(content.text).length > MAX_EDITABLE_LINE)
+        return false;
+    if (!multiline && style.direction === 'rtl'
+        && measure.measureText(content.text).width > control.clientWidth - paddingStart - paddingEnd)
+        return false;
+    const measuredLines = multiline
+        ? measureTextareaLines(control, content.text, style)
+        : [{ text: content.text, left: 0, top: 0 }];
+    if (!measuredLines)
+        return false;
+    const baseSeed = seedToNumber(seed);
+    context.save();
+    context.beginPath();
+    context.rect(0, 0, width, height);
+    context.clip();
+    for (let index = 0; index < measuredLines.length; index += 1) {
+        const line = measuredLines[index];
+        const visible = multiline && control.wrap !== 'off'
+            ? { text: line.text, offset: 0 }
+            : visibleText(line.text, measure, control.scrollLeft, width - paddingStart - paddingEnd);
+        if (!visible?.text)
+            continue;
+        const sprite = renderPencilText(visible.text, {
+            size: fontSize,
+            family,
+            color,
+            seed: baseSeed + index * 131,
+            dpr,
+            cache: false,
+        });
+        const start = multiline
+            ? line.left
+            : textStart(style.direction, style.textAlign, control.clientWidth, paddingStart, paddingEnd, sprite.advance);
+        const x = start + visible.offset - control.scrollLeft - sprite.padding;
+        const y = multiline
+            ? line.top - control.scrollTop - sprite.padding
+            : (control.clientHeight - sprite.height) / 2;
+        if (y > height || y + sprite.height < 0)
+            continue;
+        context.drawImage(sprite.ink, x, y, sprite.width, sprite.height);
+    }
+    context.restore();
+    return true;
+}
+export function EditablePencilText({ controlRef, defaultValue, multiline = false, placeholder, seed, value, }) {
+    const canvasRef = useRef(null);
+    const scheduleRef = useRef(() => { });
+    const composingRef = useRef(false);
+    useBrowserLayoutEffect(() => {
+        const control = controlRef.current;
+        const canvas = canvasRef.current;
+        if (!control || !canvas)
+            return undefined;
+        const root = control.closest('.inkra-field-control-hit');
+        let frame = 0;
+        let pending = null;
+        let disposed = false;
+        const paint = () => {
+            pending = null;
+            if (disposed || composingRef.current)
+                return;
+            try {
+                const ready = paintEditableText(canvas, control, seed, multiline);
+                if (ready)
+                    root?.setAttribute('data-pencil-editable-ready', 'true');
+                else
+                    root?.removeAttribute('data-pencil-editable-ready');
+            }
+            catch {
+                root?.removeAttribute('data-pencil-editable-ready');
+            }
+        };
+        const schedule = () => {
+            if (disposed || composingRef.current || frame || pending)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                pending = queueTextPaint(paint);
+            });
+        };
+        scheduleRef.current = schedule;
+        const invalidate = () => {
+            root?.removeAttribute('data-pencil-editable-ready');
+            schedule();
+        };
+        const showNativeComposition = () => {
+            composingRef.current = true;
+            pending?.();
+            pending = null;
+            root?.setAttribute('data-composing', 'true');
+            root?.removeAttribute('data-pencil-editable-ready');
+        };
+        const finishComposition = () => {
+            composingRef.current = false;
+            root?.removeAttribute('data-composing');
+            schedule();
+        };
+        const reset = () => window.setTimeout(invalidate, 0);
+        const form = control.form;
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(invalidate);
+        resize?.observe(control);
+        const appearance = new MutationObserver(invalidate);
+        appearance.observe(document.documentElement, {
+            attributes: true,
+            subtree: true,
+            attributeFilter: ['data-theme', 'data-inkra-theme'],
+        });
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', invalidate);
+        control.addEventListener('input', invalidate);
+        control.addEventListener('scroll', invalidate, { passive: true });
+        control.addEventListener('compositionstart', showNativeComposition);
+        control.addEventListener('compositionend', finishComposition);
+        form?.addEventListener('reset', reset);
+        document.fonts?.addEventListener('loadingdone', invalidate);
+        document.fonts?.addEventListener('loadingerror', invalidate);
+        document.fonts?.ready.then(() => { if (!disposed)
+            invalidate(); });
+        const stopRecovery = observeCanvasRecovery(invalidate);
+        invalidate();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            pending?.();
+            resize?.disconnect();
+            appearance.disconnect();
+            colorScheme.removeEventListener('change', invalidate);
+            control.removeEventListener('input', invalidate);
+            control.removeEventListener('scroll', invalidate);
+            control.removeEventListener('compositionstart', showNativeComposition);
+            control.removeEventListener('compositionend', finishComposition);
+            form?.removeEventListener('reset', reset);
+            document.fonts?.removeEventListener('loadingdone', invalidate);
+            document.fonts?.removeEventListener('loadingerror', invalidate);
+            cancelAnimationFrame(frame);
+            root?.removeAttribute('data-pencil-editable-ready');
+            root?.removeAttribute('data-composing');
+            composingRef.current = false;
+            scheduleRef.current = () => { };
+        };
+    }, [controlRef, multiline, seed]);
+    useBrowserLayoutEffect(() => {
+        if (composingRef.current)
+            return;
+        controlRef.current?.closest('.inkra-field-control-hit')
+            ?.removeAttribute('data-pencil-editable-ready');
+        scheduleRef.current();
+    }, [controlRef, defaultValue, placeholder, value]);
+    return _jsx("canvas", { "aria-hidden": "true", className: "inkra-editable-text", "data-renderer": "inkra-editable-lettering", ref: canvasRef });
+}

package/dist/form/Field.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface FieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
+    id?: string;
+    label: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    required?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    children: ReactNode;
+}
+export declare function Field({ children, className, description, disabled, error, id, invalid, label, readOnly, required, ...props }: FieldProps): import("react").JSX.Element;

package/dist/form/Field.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { PencilText } from '../PencilText.js';
+import { FieldContext } from './context.js';
+function fieldCopy(value, seed) {
+    return typeof value === 'string' ? _jsx(PencilText, { seed: seed, children: value }) : value;
+}
+export function Field({ children, className, description, disabled = false, error, id, invalid = false, label, readOnly = false, required = false, ...props }) {
+    const generatedId = useId();
+    const controlId = id ?? `inkra-field-${generatedId}`;
+    const hasDescription = description !== undefined && description !== null;
+    const hasError = error !== undefined && error !== null;
+    const resolvedInvalid = invalid || hasError;
+    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] }) }));
+}

package/dist/form/Input.d.ts

@@ -0,0 +1,27 @@
+import type { InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+import type { FieldControlSize, FieldControlStateProps } from './types.js';
+export type InputVariant = 'underline' | 'outline' | 'soft' | 'ghost';
+export type InputTextAlign = 'start' | 'center' | 'end';
+export interface InputValueChangeDetails {
+    reason: 'input' | 'clear';
+}
+export type InputClassNames = Partial<Record<'root' | 'control' | 'input' | 'startIcon' | 'endIcon' | 'prefix' | 'suffix' | 'actions', string>>;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, FieldControlStateProps {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    clearable?: boolean;
+    clearButtonLabel?: string;
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onValueChange?: (value: string, details: InputValueChangeDetails) => void;
+    loading?: boolean;
+    startAction?: ReactNode;
+    endAction?: ReactNode;
+    variant?: InputVariant;
+    fullWidth?: boolean;
+    textAlign?: InputTextAlign;
+    classNames?: InputClassNames;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export type { FieldControlSize };

package/dist/form/Input.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+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 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' }];
+const loadingPaths = [{ d: 'M21 12a9 9 0 1 1-6.219-8.56' }];
+const classes = (...values) => values.filter(Boolean).join(' ');
+function affixContent(content, seed) {
+    return typeof content === 'string' || typeof content === 'number'
+        ? _jsx(PencilText, { seed: seed, children: String(content) })
+        : content;
+}
+export const Input = forwardRef(function Input({ 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, classNames = {}, clearable = false, clearButtonLabel = 'Clear input', defaultValue, dir, disabled, endAction, endIcon, fullWidth = true, id, invalid = false, loading, onChange, onClear, onCompositionEnd, onCompositionStart, onValueChange, prefix, readOnly, required, seed, size = 'md', startAction, startIcon, style, suffix, textAlign = 'start', value, variant = 'underline', ...props }, ref) {
+    const generatedId = useId();
+    const inputRef = useRef(null);
+    const [uncontrolledValue, setUncontrolledValue] = useState(() => String(defaultValue ?? ''));
+    const [composing, setComposing] = useState(false);
+    const [focusWithin, setFocusWithin] = useState(false);
+    const isControlled = value != null;
+    useImperativeHandle(ref, () => inputRef.current);
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const resolvedSeed = seed ?? `inkra-input-${state.id ?? generatedId}`;
+    const resolvedType = props.type ?? 'text';
+    const enhanceEditableText = editablePencilInputTypes.has(resolvedType);
+    const hasClearSlot = clearable && clearableInputTypes.has(resolvedType);
+    const currentValue = isControlled ? String(value) : uncontrolledValue;
+    const canClear = hasClearSlot && currentValue.length > 0 && !state.disabled && !state.readOnly && !composing;
+    const hasStart = startIcon != null || prefix != null || startAction != null;
+    const hasEnd = endIcon != null || suffix != null || loading !== undefined || hasClearSlot || endAction != null;
+    useEffect(() => {
+        const input = inputRef.current;
+        if (!input || isControlled)
+            return;
+        let disposed = false;
+        let resetTimer;
+        const synchronize = () => { if (!disposed)
+            setUncontrolledValue(input.value); };
+        const reset = (event) => {
+            // The reset event precedes the browser's default value restoration.
+            clearTimeout(resetTimer);
+            resetTimer = setTimeout(() => { if (!event.defaultPrevented)
+                synchronize(); }, 0);
+        };
+        synchronize();
+        input.addEventListener('input', synchronize);
+        input.addEventListener('change', synchronize);
+        input.addEventListener('focus', synchronize);
+        const form = input.form;
+        form?.addEventListener('reset', reset);
+        return () => {
+            disposed = true;
+            clearTimeout(resetTimer);
+            input.removeEventListener('input', synchronize);
+            input.removeEventListener('change', synchronize);
+            input.removeEventListener('focus', synchronize);
+            form?.removeEventListener('reset', reset);
+        };
+    }, [isControlled, props.form, defaultValue]);
+    const clear = (event) => {
+        const input = inputRef.current;
+        if (!canClear || !input || input.matches(':disabled'))
+            return;
+        if (!isControlled) {
+            input.value = '';
+            setUncontrolledValue('');
+        }
+        input.focus({ preventScroll: true });
+        onValueChange?.('', { reason: 'clear' });
+        onClear?.(event);
+    };
+    return (_jsx("span", { className: classes('inkra-field-control-hit', 'inkra-input-root', classNames.root), dir: dir, "data-full-width": fullWidth, "data-variant": variant, "data-focus-within": focusWithin || undefined, "data-clearable": hasClearSlot || undefined, "data-loading": loading || undefined, "data-start-content": hasStart || undefined, "data-end-content": hasEnd || undefined, "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, onFocusCapture: () => setFocusWithin(true), onBlurCapture: event => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setFocusWithin(false);
+        }, children: _jsxs(PencilSurface, { as: "span", clipContent: true, className: classes('inkra-field-control inkra-field-control--input', classNames.control), seed: resolvedSeed, variant: variant === 'underline' ? 'ghost' : state.invalid ? 'danger' : variant === 'soft' ? 'quiet' : variant === 'ghost' && focusWithin ? 'outline' : variant, children: [startAction == null ? null : (_jsx(InputAction, { position: "start", disabled: state.disabled, seed: `${resolvedSeed}-start-action`, children: startAction })), startIcon == null ? null : (_jsx("span", { "aria-hidden": "true", className: classes('inkra-field-control__icon inkra-field-control__icon--start', classNames.startIcon), children: startIcon })), prefix == null ? null : _jsx("span", { className: classes('inkra-input__affix inkra-input__affix--prefix', classNames.prefix), children: affixContent(prefix, `${resolvedSeed}-prefix`) }), _jsx("input", { ...props, "aria-busy": loading || props['aria-busy'], "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes('inkra-input', className, classNames.input), defaultValue: defaultValue, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: inputRef, required: state.required, style: { textAlign, ...style }, value: value, onChange: event => {
+                        if (!isControlled)
+                            setUncontrolledValue(event.currentTarget.value);
+                        onChange?.(event);
+                        onValueChange?.(event.currentTarget.value, { reason: 'input' });
+                    }, onCompositionStart: event => { setComposing(true); onCompositionStart?.(event); }, onCompositionEnd: event => { setComposing(false); onCompositionEnd?.(event); } }), suffix == null ? null : _jsx("span", { className: classes('inkra-input__affix inkra-input__affix--suffix', classNames.suffix), children: affixContent(suffix, `${resolvedSeed}-suffix`) }), endIcon == null ? null : (_jsx("span", { "aria-hidden": "true", className: classes('inkra-field-control__icon inkra-field-control__icon--end', classNames.endIcon), children: endIcon })), loading === undefined ? null : (_jsx("span", { "aria-hidden": "true", className: "inkra-input__loading", "data-active": loading, children: _jsx(PencilIcon, { className: "inkra-input__spinner", paths: loadingPaths, sourceSize: 24, size: 30, seed: `${resolvedSeed}-loading` }) })), hasClearSlot || endAction != null ? (_jsxs("span", { className: classes('inkra-input__actions', classNames.actions), children: [hasClearSlot ? (_jsx("button", { type: "button", className: "inkra-input__clear", "aria-label": clearButtonLabel, title: clearButtonLabel, "aria-hidden": !canClear || undefined, disabled: !canClear, tabIndex: canClear ? 0 : -1, "data-visible": canClear, onPointerDown: event => event.preventDefault(), onClick: clear, children: _jsx(PencilIcon, { paths: clearPaths, sourceSize: 24, size: 30, seed: `${resolvedSeed}-clear` }) })) : null, endAction == null ? null : (_jsx(InputAction, { disabled: state.disabled, seed: `${resolvedSeed}-action`, children: endAction }))] })) : null, variant === 'underline' ? (_jsx(PencilLine, { className: "inkra-input__underline", seed: `${resolvedSeed}-underline`, weight: (focusWithin ? 1.5 : 1) + (state.invalid ? 0.1 : 0) })) : null, enhanceEditableText ? (_jsx(EditablePencilText, { controlRef: inputRef, defaultValue: defaultValue, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: isControlled ? value : uncontrolledValue }, `${textAlign}-${dir ?? 'inherit'}`)) : null] }) }));
+});

package/dist/form/InputAction.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+export declare function InputAction({ children, disabled, seed, position }: {
+    children: ReactNode;
+    disabled: boolean;
+    seed: string;
+    position?: 'start' | 'end';
+}): import("react").JSX.Element;

package/dist/form/InputAction.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { InputActionContext } from '../internal/InputActionContext.js';
+import { useSelectionDrawing } from '../internal/useSelectionDrawing.js';
+export function InputAction({ children, disabled, seed, position = 'end' }) {
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const washRef = useRef(null);
+    const active = !disabled && (hovered || focused);
+    useSelectionDrawing(washRef, active);
+    useEffect(() => {
+        if (disabled) {
+            setHovered(false);
+            setFocused(false);
+        }
+    }, [disabled]);
+    return _jsxs("span", { className: `inkra-input__end-action${position === 'start' ? ' inkra-input__start-action' : ''}`, inert: disabled || undefined, "data-active": active || undefined, onPointerEnter: event => { if (event.pointerType !== 'touch')
+            setHovered(true); }, onPointerLeave: () => setHovered(false), onFocusCapture: () => setFocused(true), onBlurCapture: event => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setFocused(false);
+        }, children: [_jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-input__action-wash", variant: "selection", seed: `${seed}-selection`, ref: washRef }), _jsx(PencilLine, { className: "inkra-input__action-divider", orientation: "vertical", seed: `${seed}-divider`, weight: 0.9 }), _jsx(InputActionContext.Provider, { value: true, children: children })] });
+}

package/dist/form/Textarea.d.ts

@@ -0,0 +1,5 @@
+import type { TextareaHTMLAttributes } from 'react';
+import type { FieldControlStateProps } from './types.js';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldControlStateProps {
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/form/Textarea.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { useResolvedControlProps } from './controlProps.js';
+import { EditablePencilText } from './EditablePencilText.js';
+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', ...props }, ref) {
+    const generatedId = useId();
+    const textareaRef = useRef(null);
+    useImperativeHandle(ref, () => textareaRef.current);
+    const state = useResolvedControlProps({
+        id,
+        required,
+        disabled,
+        readOnly,
+        invalid,
+        'aria-describedby': ariaDescribedBy,
+        'aria-errormessage': ariaErrorMessage,
+        'aria-invalid': ariaInvalid,
+    });
+    const resolvedSeed = seed ?? `inkra-textarea-${state.id ?? generatedId}`;
+    const classes = ['inkra-textarea', className].filter(Boolean).join(' ');
+    return (_jsx("span", { 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, { as: "span", className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": state.describedBy, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value })] }) }));
+});

package/dist/form/context.d.ts

@@ -0,0 +1,12 @@
+export interface FieldContextValue {
+    controlId: string;
+    descriptionId?: string;
+    errorId?: string;
+    required: boolean;
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+}
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+export declare function useFieldContext(): FieldContextValue | null;
+export declare function mergeAriaIds(...values: Array<string | undefined>): string | undefined;

package/dist/form/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const FieldContext = createContext(null);
+export function useFieldContext() {
+    return useContext(FieldContext);
+}
+export function mergeAriaIds(...values) {
+    const ids = values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []);
+    const merged = Array.from(new Set(ids));
+    return merged.length ? merged.join(' ') : undefined;
+}