@inkra/react 0.0.0-stage → 0.2.0

package/dist/form/EditablePencilText.js

@@ -0,0 +1,323 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { BoundedCache, canvasByteCost, canvasIsUsable, effectiveDpr } from '../internal/cache.js';
+import { observeCanvasRecovery } from '../internal/recovery.js';
+import { seedToNumber } from '../internal/random.js';
+import { pencilLettering, renderPencilText } from '../internal/textRenderer.js';
+import { readRenderToken } from '../internal/renderTokens.js';
+const MAX_EDITABLE_TEXT = 4096;
+const MAX_EDITABLE_LINE = 256;
+const complexScript = /[\u0300-\u036f\u0590-\u08ff\u0900-\u0dff\u0e00-\u0fff\u1780-\u18af\u200c\u200d\ufe00-\ufe0f]/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 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, start: offset - character.length };
+                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, buffer, glyphs, control, seed, multiline, composition) {
+    const width = control.clientWidth;
+    const height = control.clientHeight;
+    const target = canvas.getContext('2d');
+    const context = buffer.getContext('2d');
+    const dpr = effectiveDpr(2);
+    if (!target || target.isContextLost?.() || !context || context.isContextLost?.()
+        || width < 2 || height < 2 || width * height * dpr ** 2 > 2 * 1024 * 1024)
+        return false;
+    const content = editableText(control);
+    if (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 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 settings = {
+        variation: readRenderToken(style, '--inkra-letter-variation', pencilLettering.variation, 0, 1),
+        breaks: readRenderToken(style, '--inkra-letter-breaks', pencilLettering.breaks, 0, 1),
+        outline: readRenderToken(style, '--inkra-letter-outline', pencilLettering.outline, 0, 1),
+        fill: readRenderToken(style, '--inkra-letter-fill', pencilLettering.fill, 0, 1),
+        grain: readRenderToken(style, '--inkra-letter-grain', pencilLettering.grain, 0, 1),
+    };
+    buffer.width = Math.ceil(width * dpr);
+    buffer.height = Math.ceil(height * dpr);
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.font = `400 ${fontSize}px ${family}`;
+    context.fontKerning = 'none';
+    context.fillStyle = color;
+    const metrics = context.measureText('Mg');
+    const ascent = metrics.fontBoundingBoxAscent ?? fontSize;
+    const descent = metrics.fontBoundingBoxDescent ?? fontSize * 0.25;
+    const paddingStart = numeric(style, 'padding-inline-start') || numeric(style, 'padding-left');
+    const paddingEnd = numeric(style, 'padding-inline-end') || numeric(style, 'padding-right');
+    if (!multiline && content.text.length > MAX_EDITABLE_LINE)
+        return false;
+    const lines = multiline
+        ? measureTextareaLines(control, content.text, style)
+        : [{ text: content.text, left: 0, top: 0, start: 0 }];
+    if (!lines)
+        return false;
+    const baseSeed = seedToNumber(seed);
+    const glyphAppearance = JSON.stringify([fontSize, family, color, baseSeed, dpr, settings]);
+    const composingStart = composition?.start ?? -1;
+    const composingEnd = composition
+        ? Math.max(composition.start, control.value.length - (composition.value.length - composition.end))
+        : -1;
+    for (const line of lines) {
+        const baseline = multiline
+            ? line.top - control.scrollTop + ascent
+            : (height - ascent - descent) / 2 + ascent;
+        if (baseline - ascent > height || baseline + descent < 0)
+            continue;
+        let left = (multiline ? line.left : textStart(style.direction, style.textAlign, width, paddingStart, paddingEnd, context.measureText(line.text).width)) - control.scrollLeft;
+        let offset = line.start;
+        for (const character of line.text) {
+            const advance = character === '\n' || character === '\r' ? 0
+                : character === '\t' ? numeric(style, 'tab-size') * context.measureText(' ').width
+                    : context.measureText(character).width;
+            if (advance && left + advance >= 0 && left <= width) {
+                if (composition && !content.placeholder && offset >= composingStart && offset < composingEnd) {
+                    // Keep preedit visibly underlined without changing the native IME session.
+                    context.fillText(character, left, baseline);
+                    context.fillRect(left, baseline + 2, advance, 1 / dpr);
+                }
+                else if (character.trim()) {
+                    const key = glyphAppearance + character;
+                    let glyph = glyphs.get(key);
+                    if (!glyph || !canvasIsUsable(glyph.ink)) {
+                        glyph = renderPencilText(character, {
+                            size: fontSize, family, color, seed: baseSeed ^ seedToNumber(character),
+                            dpr, settings, cache: false,
+                        });
+                        glyphs.set(key, glyph, canvasByteCost(glyph.ink));
+                    }
+                    context.drawImage(glyph.ink, left - glyph.padding, baseline - glyph.ascent - glyph.padding, glyph.width, glyph.height);
+                }
+            }
+            left += advance;
+            offset += character.length;
+        }
+    }
+    // Commit only a complete frame. The visible canvas never waits empty for idle work.
+    if (canvas.width !== buffer.width)
+        canvas.width = buffer.width;
+    if (canvas.height !== buffer.height)
+        canvas.height = buffer.height;
+    target.setTransform(1, 0, 0, 1, 0, 0);
+    target.clearRect(0, 0, canvas.width, canvas.height);
+    target.drawImage(buffer, 0, 0);
+    Object.assign(canvas.style, {
+        left: `${control.offsetLeft}px`, top: `${control.offsetTop}px`,
+        right: 'auto', bottom: 'auto', width: `${width}px`, height: `${height}px`,
+    });
+    return true;
+}
+export function EditablePencilText({ controlRef, defaultValue, multiline = false, placeholder, seed, value, }) {
+    const canvasRef = useRef(null);
+    const scheduleRef = useRef(() => { });
+    const composingRef = useRef(null);
+    useBrowserLayoutEffect(() => {
+        const control = controlRef.current;
+        const canvas = canvasRef.current;
+        if (!control || !canvas)
+            return undefined;
+        const root = control.closest('.inkra-field-control-hit');
+        const buffer = document.createElement('canvas');
+        // Private, bounded, per-editor glyphs. Never enter the shared text cache.
+        let glyphs = new BoundedCache(128, 4 * 1024 * 1024);
+        let disposed = false;
+        let lastAppearance = '';
+        const appearanceKey = () => {
+            const style = getComputedStyle(control);
+            return JSON.stringify([
+                control.clientWidth, control.clientHeight, control.offsetLeft, control.offsetTop,
+                control.scrollLeft, control.scrollTop, control.value, control.placeholder, effectiveDpr(2),
+                composingRef.current?.start, composingRef.current?.end, composingRef.current?.value.length,
+                ...['font-family', 'font-size', 'line-height', 'text-align', 'text-indent',
+                    'letter-spacing', 'white-space', 'word-break', 'overflow-wrap', 'direction', 'tab-size',
+                    'padding-top', 'padding-left', 'padding-right', 'padding-bottom',
+                    '--inkra-letter-variation', '--inkra-letter-breaks', '--inkra-letter-outline',
+                    '--inkra-letter-fill', '--inkra-letter-grain',
+                    '--inkra-editable-text-color', '--inkra-editable-placeholder-color'].map(name => style.getPropertyValue(name)),
+            ]);
+        };
+        const paint = () => {
+            if (disposed)
+                return;
+            const key = appearanceKey();
+            if (key === lastAppearance && root?.hasAttribute('data-pencil-editable-ready'))
+                return;
+            try {
+                if (paintEditableText(canvas, buffer, glyphs, control, seed, multiline, composingRef.current)) {
+                    root?.setAttribute('data-pencil-editable-ready', 'true');
+                    lastAppearance = key;
+                }
+                else {
+                    root?.removeAttribute('data-pencil-editable-ready');
+                    lastAppearance = '';
+                }
+            }
+            catch {
+                root?.removeAttribute('data-pencil-editable-ready');
+                lastAppearance = '';
+            }
+        };
+        scheduleRef.current = paint;
+        const startComposition = () => {
+            composingRef.current = {
+                value: control.value,
+                start: control.selectionStart ?? control.value.length,
+                end: control.selectionEnd ?? control.value.length,
+            };
+            root?.setAttribute('data-composing', 'true');
+            paint();
+        };
+        const finishComposition = () => {
+            composingRef.current = null;
+            root?.removeAttribute('data-composing');
+            paint();
+        };
+        const refreshFonts = () => {
+            glyphs = new BoundedCache(128, 4 * 1024 * 1024);
+            lastAppearance = '';
+            paint();
+        };
+        const reset = () => queueMicrotask(() => {
+            if (disposed)
+                return;
+            composingRef.current = null;
+            root?.removeAttribute('data-composing');
+            refreshFonts();
+        });
+        const form = control.form;
+        const resize = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(paint);
+        resize?.observe(control);
+        const appearance = new MutationObserver(paint);
+        for (let element = control; element; element = element.parentElement) {
+            appearance.observe(element, { attributes: true, attributeFilter: ['style', 'class', 'dir', 'data-theme', 'data-inkra-theme'] });
+        }
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        colorScheme.addEventListener('change', paint);
+        control.addEventListener('input', paint);
+        control.addEventListener('scroll', paint, { passive: true });
+        control.addEventListener('compositionstart', startComposition);
+        control.addEventListener('compositionend', finishComposition);
+        form?.addEventListener('reset', reset);
+        document.fonts?.addEventListener('loadingdone', refreshFonts);
+        document.fonts?.addEventListener('loadingerror', refreshFonts);
+        document.fonts?.ready.then(() => { if (!disposed)
+            refreshFonts(); });
+        const stopRecovery = observeCanvasRecovery(refreshFonts);
+        paint();
+        return () => {
+            disposed = true;
+            stopRecovery();
+            resize?.disconnect();
+            appearance.disconnect();
+            colorScheme.removeEventListener('change', paint);
+            control.removeEventListener('input', paint);
+            control.removeEventListener('scroll', paint);
+            control.removeEventListener('compositionstart', startComposition);
+            control.removeEventListener('compositionend', finishComposition);
+            form?.removeEventListener('reset', reset);
+            document.fonts?.removeEventListener('loadingdone', refreshFonts);
+            document.fonts?.removeEventListener('loadingerror', refreshFonts);
+            root?.removeAttribute('data-pencil-editable-ready');
+            root?.removeAttribute('data-composing');
+            composingRef.current = null;
+            glyphs = new BoundedCache(0, 0);
+            buffer.width = buffer.height = 0;
+            scheduleRef.current = () => { };
+        };
+    }, [controlRef, multiline, seed]);
+    useBrowserLayoutEffect(() => {
+        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,17 @@
+import type { TextareaHTMLAttributes } from 'react';
+import type { FieldControlStateProps } from './types.js';
+export interface TextareaCountDetails {
+    count: number;
+    maxLength: number;
+    remaining: number;
+}
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, FieldControlStateProps {
+    countMode?: 'remaining' | 'fraction' | 'progress' | 'none';
+    countDisplay?: 'auto' | 'always';
+    /** Ratio of maxLength at which the automatic counter appears. */
+    countThreshold?: number;
+    getCountLabel?: (details: TextareaCountDetails) => string;
+    resize?: 'none' | 'vertical';
+    resizeLabel?: string;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/form/Textarea.js

@@ -0,0 +1,102 @@
+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 { 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';
+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) {
+    const generatedId = useId();
+    const textareaRef = useRef(null);
+    const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? '').length);
+    const [height, setHeight] = useState();
+    const [measuredHeight, setMeasuredHeight] = useState();
+    const drag = useRef(null);
+    const controlled = props.value != null;
+    const count = controlled ? String(props.value).length : uncontrolledCount;
+    const maximum = props.maxLength;
+    const hasCount = countMode !== 'none' && typeof maximum === 'number' && Number.isFinite(maximum) && maximum >= 0;
+    const threshold = Number.isFinite(countThreshold) ? Math.max(0, Math.min(1, countThreshold)) : 0.8;
+    const showCount = hasCount && (countDisplay === 'always' || count >= maximum * threshold);
+    const countId = `inkra-textarea-${generatedId}-count`;
+    const controlId = id ?? `inkra-textarea-${generatedId}`;
+    const remaining = hasCount ? maximum - count : 0;
+    const countLabel = hasCount ? getCountLabel({ count, maxLength: maximum, remaining }) : '';
+    const minimumHeight = size === 'sm' ? 80 : size === 'lg' ? 112 : 96;
+    const resizeTo = (next) => setHeight(Math.max(minimumHeight, Math.min(1200, next)));
+    useEffect(() => {
+        const control = textareaRef.current;
+        if (resize !== 'vertical' || !control)
+            return;
+        const measure = () => setMeasuredHeight(control.getBoundingClientRect().height);
+        measure();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(measure);
+        observer.observe(control);
+        return () => observer.disconnect();
+    }, [resize]);
+    useEffect(() => {
+        const control = textareaRef.current;
+        const form = control?.form;
+        let frame = 0;
+        const reset = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => setUncontrolledCount(control?.value.length ?? 0));
+        };
+        form?.addEventListener('reset', reset);
+        if (!controlled)
+            setUncontrolledCount(control?.value.length ?? 0);
+        return () => {
+            cancelAnimationFrame(frame);
+            form?.removeEventListener('reset', reset);
+        };
+    }, [controlled, props.defaultValue, props.form]);
+    useImperativeHandle(ref, () => textareaRef.current);
+    const state = useResolvedControlProps({
+        id: controlId,
+        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("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 => {
+                        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 => {
+                                if (event.button !== 0)
+                                    return;
+                                drag.current = { y: event.clientY, height: textareaRef.current?.getBoundingClientRect().height ?? minimumHeight };
+                                event.currentTarget.setPointerCapture(event.pointerId);
+                            }, onPointerMove: event => {
+                                if (drag.current)
+                                    resizeTo(drag.current.height + event.clientY - drag.current.y);
+                            }, onPointerUp: event => {
+                                drag.current = null;
+                                if (event.currentTarget.hasPointerCapture(event.pointerId))
+                                    event.currentTarget.releasePointerCapture(event.pointerId);
+                            }, onPointerCancel: () => { drag.current = null; }, onLostPointerCapture: () => { drag.current = null; }, onKeyDown: event => {
+                                const current = textareaRef.current?.getBoundingClientRect().height ?? minimumHeight;
+                                if (event.key === 'ArrowUp')
+                                    resizeTo(current - 20);
+                                else if (event.key === 'ArrowDown')
+                                    resizeTo(current + 20);
+                                else if (event.key === 'Home')
+                                    resizeTo(minimumHeight);
+                                else if (event.key === 'End')
+                                    resizeTo(1200);
+                                else
+                                    return;
+                                event.preventDefault();
+                            }, children: _jsx(PencilIcon, { paths: resizePaths, size: 22 }) })] })] }) }));
+});