@inkra/react 0.0.0-stage → 0.2.0

package/dist/editable/index.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { Input } from '../form/Input.js';
+import { Textarea } from '../form/Textarea.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const interactiveSelector = 'button, a, input, textarea, select, option, [contenteditable="true"], [data-editable-ignore]';
+function resultMessage(result, fallback) {
+    if (typeof result === 'string')
+        return result || fallback;
+    if (result === false)
+        return fallback;
+    return undefined;
+}
+function isComposing(event) {
+    return event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;
+}
+export const Editable = forwardRef(function Editable({ 'aria-label': ariaLabel, blurBehavior = 'ignore', className, defaultEditing = false, defaultValue = '', disabled = false, display, editor, editing, id, inputProps, invalid = false, multiline = false, onCancel, onEditingChange, onSave, onValueChange, placeholder = 'Edit value', readOnly = false, saveLabel = 'Save', cancelLabel = 'Cancel', startEditingLabel = 'Edit value', seed, submitOnEnter = !multiline, textareaProps, validate, value, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    const editorRef = useRef(null);
+    const displayRef = useRef(null);
+    const controlledValue = value !== undefined;
+    const controlledEditing = editing !== undefined;
+    const [localValue, setLocalValue] = useState(String(value ?? defaultValue));
+    const [localEditing, setLocalEditing] = useState(defaultEditing);
+    const [error, setError] = useState();
+    const [saving, setSaving] = useState(false);
+    const previousValueRef = useRef(String(value ?? defaultValue));
+    const currentValue = controlledValue ? String(value ?? '') : localValue;
+    const isEditing = controlledEditing ? Boolean(editing) : localEditing;
+    const resolvedSeed = seed ?? `inkra-editable-${id ?? generatedId}`;
+    const resolvedId = id ?? `inkra-editable-${generatedId}`;
+    useEffect(() => {
+        if (controlledValue) {
+            const next = String(value ?? '');
+            if (!isEditing) {
+                previousValueRef.current = next;
+                setLocalValue(next);
+            }
+        }
+    }, [controlledValue, isEditing, value]);
+    useEffect(() => {
+        if (!isEditing || disabled || readOnly)
+            return;
+        const frame = requestAnimationFrame(() => editorRef.current?.focus({ preventScroll: true }));
+        return () => cancelAnimationFrame(frame);
+    }, [disabled, isEditing, readOnly]);
+    const setEditing = useCallback((next) => {
+        if (!controlledEditing)
+            setLocalEditing(next);
+        onEditingChange?.(next);
+    }, [controlledEditing, onEditingChange]);
+    const updateValue = useCallback((next) => {
+        if (!controlledValue)
+            setLocalValue(next);
+        onValueChange?.(next);
+    }, [controlledValue, onValueChange]);
+    const startEditing = useCallback(() => {
+        if (disabled || readOnly || saving || isEditing)
+            return;
+        setError(undefined);
+        previousValueRef.current = currentValue;
+        setEditing(true);
+    }, [currentValue, disabled, isEditing, readOnly, saving, setEditing]);
+    const finish = useCallback((restoreFocus = true) => {
+        setEditing(false);
+        if (restoreFocus)
+            requestAnimationFrame(() => displayRef.current?.focus({ preventScroll: true }));
+    }, [setEditing]);
+    const cancel = useCallback(() => {
+        if (saving)
+            return;
+        const previous = previousValueRef.current;
+        updateValue(previous);
+        setError(undefined);
+        onCancel?.(previous);
+        finish();
+    }, [finish, onCancel, saving, updateValue]);
+    const save = useCallback(async () => {
+        if (saving || disabled || readOnly)
+            return;
+        const next = currentValue;
+        const previous = previousValueRef.current;
+        setSaving(true);
+        setError(undefined);
+        try {
+            const validation = validate ? await validate(next, previous) : undefined;
+            const validationMessage = resultMessage(validation, 'Value is invalid');
+            if (validationMessage) {
+                setError(validationMessage);
+                return;
+            }
+            const saved = onSave ? await onSave(next, previous) : undefined;
+            const saveMessage = resultMessage(saved, 'Could not save value');
+            if (saveMessage) {
+                setError(saveMessage);
+                return;
+            }
+            previousValueRef.current = next;
+            updateValue(next);
+            finish();
+        }
+        catch (caught) {
+            setError(caught instanceof Error ? caught.message : 'Could not save value');
+        }
+        finally {
+            setSaving(false);
+        }
+    }, [currentValue, disabled, finish, onSave, readOnly, saving, updateValue, validate]);
+    useImperativeHandle(forwardedRef, () => ({ focus: () => displayRef.current?.focus(), startEditing, save, cancel }), [cancel, save, startEditing]);
+    const handleDisplayClick = (event) => {
+        if (event.target.closest(interactiveSelector))
+            return;
+        startEditing();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            startEditing();
+        }
+    };
+    const handleEditorKeyDown = (event) => {
+        if (isComposing(event))
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+            return;
+        }
+        if (event.key === 'Enter' && submitOnEnter && (!multiline || event.ctrlKey || event.metaKey)) {
+            event.preventDefault();
+            void save();
+        }
+    };
+    const handleEditorBlur = () => {
+        if (saving || blurBehavior === 'ignore')
+            return;
+        if (blurBehavior === 'cancel')
+            cancel();
+        else
+            void save();
+    };
+    const displayContent = typeof display === 'function'
+        ? display(currentValue)
+        : (display ?? currentValue) || placeholder;
+    const editorProps = {
+        value: currentValue,
+        onValueChange: updateValue,
+        onKeyDown: handleEditorKeyDown,
+        onBlur: handleEditorBlur,
+        disabled: disabled || saving,
+        invalid: invalid || Boolean(error),
+        error,
+        autoFocus: true,
+        'aria-label': ariaLabel,
+    };
+    const defaultEditor = multiline
+        ? _jsx(Textarea, { ...textareaProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onChange: event => updateValue(event.currentTarget.value), onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-textarea` })
+        : _jsx(Input, { ...inputProps, "aria-label": ariaLabel, autoFocus: true, ref: editorRef, value: currentValue, onValueChange: updateValue, onKeyDown: handleEditorKeyDown, onBlur: handleEditorBlur, disabled: disabled || saving, invalid: invalid || Boolean(error), placeholder: placeholder, seed: `${resolvedSeed}-input` });
+    return _jsx("div", { ...props, className: classes('inkra-editable', className), "data-editing": isEditing || undefined, "data-saving": saving || undefined, "data-invalid": Boolean(error) || invalid || undefined, "data-multiline": multiline || undefined, ref: rootRef, children: isEditing ? _jsxs("div", { className: "inkra-editable__editor", "data-editable-editor": "true", children: [editor == null ? defaultEditor : typeof editor === 'function' ? editor(editorProps) : editor, _jsxs("div", { className: "inkra-editable__actions", children: [_jsx(Button, { type: "button", size: "sm", variant: "primary", loading: saving, onClick: () => void save(), "aria-label": saveLabel, children: saveLabel }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: saving, onClick: cancel, "aria-label": cancelLabel, children: cancelLabel })] }), error ? _jsx("div", { className: "inkra-editable__error", role: "alert", id: `${resolvedId}-error`, children: error }) : null] }) : _jsx("div", { "aria-label": ariaLabel ?? startEditingLabel, className: "inkra-editable__display", "data-editable-display": "true", onClick: handleDisplayClick, onKeyDown: handleKeyDown, ref: displayRef, role: "button", tabIndex: disabled || readOnly ? -1 : 0, "aria-disabled": disabled || readOnly || undefined, children: displayContent }) });
+});

package/dist/empty/index.d.ts

@@ -0,0 +1,21 @@
+import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ReactNode } from 'react';
+export interface EmptyRootProps extends HTMLAttributes<HTMLDivElement> {
+    size?: 'sm' | 'md' | 'lg';
+    align?: 'start' | 'center';
+}
+export interface EmptyIconProps extends HTMLAttributes<HTMLDivElement> {
+    decorative?: boolean;
+}
+type EmptyTitleProps<Element extends ElementType = 'h3'> = {
+    as?: Element;
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<Element>, 'as' | 'children'>;
+declare function Title<Element extends ElementType = 'h3'>({ as, children, className, ...props }: EmptyTitleProps<Element>): import("react").JSX.Element;
+export declare const Empty: {
+    Root: import("react").ForwardRefExoticComponent<EmptyRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Icon: import("react").ForwardRefExoticComponent<EmptyIconProps & import("react").RefAttributes<HTMLDivElement>>;
+    Title: typeof Title;
+    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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PencilText } from '../PencilText.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 Title({ as, children, className, ...props }) {
+    const Element = as ?? 'h3';
+    return (_jsx(Element, { ...props, className: classes('inkra-empty__title', className), children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }));
+}
+const Description = forwardRef(function EmptyDescription({ children, className, ...props }, ref) {
+    return (_jsx("p", { ...props, className: classes('inkra-empty__description', className), ref: ref, children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }));
+});
+const Actions = forwardRef(function EmptyActions({ className, ...props }, ref) {
+    return _jsx("div", { ...props, className: classes('inkra-empty__actions', className), ref: ref });
+});
+export const Empty = { Root, Icon, Title, Description, Actions };

package/dist/flip/index.d.ts

@@ -0,0 +1,49 @@
+import type { HTMLAttributes, PointerEvent as ReactPointerEvent, ReactNode } from 'react';
+import type { ButtonProps } from '../Button.js';
+export type TiltAxis = 'both' | 'x' | 'y';
+export interface TiltRotation {
+    rotateX: number;
+    rotateY: number;
+}
+export declare function calculateTiltRotation(clientX: number, clientY: number, bounds: Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>, maxAngle: number, axis?: TiltAxis): TiltRotation;
+export interface TiltProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onPointerMove'> {
+    /** Rotation axes that respond to the mouse position. */
+    axis?: TiltAxis;
+    /** Disables pointer tracking and returns the content to its resting position. */
+    disabled?: boolean;
+    /** Maximum rotation in degrees at each edge. */
+    maxAngle?: number;
+    /** Transform response time while following the mouse, in milliseconds. */
+    response?: number;
+    /** Transform duration used when the mouse leaves, in milliseconds. */
+    resetDuration?: number;
+    onPointerMove?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+}
+export declare const Tilt: import("react").ForwardRefExoticComponent<TiltProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FlipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** Content shown in the initial orientation. */
+    front: ReactNode;
+    /** Content shown after flipping. */
+    back: ReactNode;
+    /** Controlled flipped state. */
+    flipped?: boolean;
+    /** Initial state when Flip is uncontrolled. */
+    defaultFlipped?: boolean;
+    /** Enables state changes without disabling content inside either face. */
+    flipEnabled?: boolean;
+    onFlippedChange?: (flipped: boolean) => void;
+    /** Enables mouse tilt independently from flipping. */
+    tilt?: boolean;
+    tiltAxis?: TiltAxis;
+    tiltMaxAngle?: number;
+    tiltResponse?: number;
+    tiltResetDuration?: number;
+    /** Flip transition duration in milliseconds. */
+    duration?: number;
+}
+export declare const Flip: import("react").ForwardRefExoticComponent<FlipProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FlipToggleProps extends ButtonProps {
+    /** Explicit next state; omit to toggle the current state. */
+    flipped?: boolean;
+}
+export declare const FlipToggle: import("react").ForwardRefExoticComponent<FlipToggleProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/flip/index.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useImperativeHandle, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+const clamp = (value, minimum, maximum) => Math.min(maximum, Math.max(minimum, value));
+export function calculateTiltRotation(clientX, clientY, bounds, maxAngle, axis = 'both') {
+    if (bounds.width <= 0 || bounds.height <= 0)
+        return { rotateX: 0, rotateY: 0 };
+    const horizontal = clamp(((clientX - bounds.left) / bounds.width) * 2 - 1, -1, 1);
+    const vertical = clamp(((clientY - bounds.top) / bounds.height) * 2 - 1, -1, 1);
+    const angle = Math.max(0, Math.abs(maxAngle));
+    const rotateX = axis === 'y' ? 0 : vertical * angle;
+    const rotateY = axis === 'x' ? 0 : -horizontal * angle;
+    return {
+        rotateX: rotateX === 0 ? 0 : rotateX,
+        rotateY: rotateY === 0 ? 0 : rotateY,
+    };
+}
+function useReducedMotion(onReduce) {
+    const reducedRef = useRef(false);
+    useBrowserLayoutEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => {
+            reducedRef.current = query.matches;
+            if (query.matches)
+                onReduce();
+        };
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, [onReduce]);
+    return reducedRef;
+}
+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 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');
+    };
+    const reducedMotion = useReducedMotion(reset);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    useBrowserLayoutEffect(() => {
+        if (disabled)
+            reset();
+    }, [disabled]);
+    const canTrack = (event) => (!disabled && !reducedMotion.current && event.pointerType === 'mouse' && event.isPrimary);
+    const handlePointerEnter = (event) => {
+        onPointerEnter?.(event);
+        if (event.defaultPrevented || !canTrack(event))
+            return;
+        event.currentTarget.setAttribute('data-tilting', 'true');
+    };
+    const handlePointerMove = (event) => {
+        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');
+    };
+    const handlePointerLeave = (event) => {
+        onPointerLeave?.(event);
+        reset();
+    };
+    const handlePointerCancel = (event) => {
+        onPointerCancel?.(event);
+        reset();
+    };
+    const tiltStyle = {
+        '--inkra-tilt-max-angle': `${Math.max(0, Math.abs(maxAngle))}deg`,
+        '--inkra-tilt-response': `${Math.max(0, response)}ms`,
+        '--inkra-tilt-reset-duration': `${Math.max(0, resetDuration)}ms`,
+        '--inkra-tilt-rotate-x': '0deg',
+        '--inkra-tilt-rotate-y': '0deg',
+        ...style,
+    };
+    return _jsx("div", { ...props, className: classes('inkra-tilt', className), "data-axis": axis, "data-disabled": disabled || undefined, onPointerCancel: handlePointerCancel, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, onPointerMove: handlePointerMove, ref: rootRef, style: tiltStyle, children: children });
+});
+const FlipContext = createContext(null);
+const focusableSelector = [
+    'a[href]',
+    'button:not(:disabled)',
+    'input:not(:disabled)',
+    'select:not(:disabled)',
+    'textarea:not(:disabled)',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+export const Flip = forwardRef(function Flip({ back, className, defaultFlipped = false, duration = 420, flipEnabled = true, flipped: controlledFlipped, front, onFlippedChange, style, tabIndex, tilt = false, tiltAxis = 'both', tiltMaxAngle = 8, tiltResetDuration = 180, tiltResponse = 120, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const frontRef = useRef(null);
+    const backRef = useRef(null);
+    const previousFlipped = useRef(controlledFlipped ?? defaultFlipped);
+    const [uncontrolledFlipped, setUncontrolledFlipped] = useState(defaultFlipped);
+    const flipped = controlledFlipped ?? uncontrolledFlipped;
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    const setFlipped = (next) => {
+        if (!flipEnabled || next === flipped)
+            return;
+        if (controlledFlipped === undefined)
+            setUncontrolledFlipped(next);
+        onFlippedChange?.(next);
+    };
+    useBrowserLayoutEffect(() => {
+        if (previousFlipped.current === flipped)
+            return;
+        previousFlipped.current = flipped;
+        const outgoing = flipped ? frontRef.current : backRef.current;
+        if (!outgoing?.contains(document.activeElement))
+            return;
+        const incoming = flipped ? backRef.current : frontRef.current;
+        const nextFocus = incoming?.querySelector(focusableSelector);
+        (nextFocus ?? rootRef.current)?.focus({ preventScroll: true });
+    }, [flipped]);
+    const context = { enabled: flipEnabled, flipped, setFlipped };
+    const flipStyle = {
+        '--inkra-flip-duration': `${Math.max(0, duration)}ms`,
+        ...style,
+    };
+    return _jsx(FlipContext.Provider, { value: context, children: _jsx(Tilt, { ...props, axis: tiltAxis, className: classes('inkra-flip', className), "data-flipped": flipped || undefined, disabled: !tilt, maxAngle: tiltMaxAngle, ref: rootRef, resetDuration: tiltResetDuration, response: tiltResponse, style: flipStyle, tabIndex: tabIndex ?? -1, children: _jsxs("div", { className: "inkra-flip__scene", children: [_jsx("div", { "aria-hidden": flipped || undefined, className: "inkra-flip__face inkra-flip__face--front", "data-active": !flipped || undefined, inert: flipped || undefined, ref: frontRef, children: front }), _jsx("div", { "aria-hidden": !flipped || undefined, className: "inkra-flip__face inkra-flip__face--back", "data-active": flipped || undefined, inert: !flipped || undefined, ref: backRef, children: back })] }) }) });
+});
+export const FlipToggle = forwardRef(function FlipToggle({ children, className, disabled, flipped: nextFlipped, onClick, type = 'button', ...props }, ref) {
+    const context = useContext(FlipContext);
+    if (!context)
+        throw new Error('FlipToggle must be rendered inside Flip.');
+    return _jsx(Button, { ...props, "aria-pressed": context.flipped, className: classes('inkra-flip-toggle', className), disabled: disabled || !context.enabled, onClick: event => {
+            onClick?.(event);
+            if (!event.defaultPrevented)
+                context.setFlipped(nextFlipped ?? !context.flipped);
+        }, ref: ref, type: type, children: children });
+});

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 {};