@inkra/react 0.0.0-stage → 0.1.0

package/dist/form/controlProps.d.ts

@@ -0,0 +1,23 @@
+import type { AriaAttributes } from 'react';
+interface NativeControlState {
+    id?: string;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+}
+export declare function useResolvedControlProps(props: NativeControlState & {
+    invalid?: boolean;
+}): {
+    id: string | undefined;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    describedBy: string | undefined;
+    errorMessage: string | undefined;
+    ariaInvalid: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+};
+export {};

package/dist/form/controlProps.js

@@ -0,0 +1,20 @@
+import { mergeAriaIds, useFieldContext } from './context.js';
+export function useResolvedControlProps(props) {
+    const field = useFieldContext();
+    const resolvedInvalid = Boolean(props.invalid
+        || field?.invalid
+        || props['aria-invalid'] === true
+        || props['aria-invalid'] === 'true');
+    const describedBy = mergeAriaIds(props['aria-describedby'], field?.descriptionId, field?.errorId);
+    const errorMessage = mergeAriaIds(props['aria-errormessage'], resolvedInvalid ? field?.errorId : undefined);
+    return {
+        id: field?.controlId ?? props.id,
+        required: Boolean(props.required || field?.required),
+        disabled: Boolean(props.disabled || field?.disabled),
+        readOnly: Boolean(props.readOnly || field?.readOnly),
+        invalid: resolvedInvalid,
+        describedBy,
+        errorMessage,
+        ariaInvalid: resolvedInvalid ? true : props['aria-invalid'],
+    };
+}

package/dist/form/index.d.ts

@@ -0,0 +1,7 @@
+export { Field } from './Field.js';
+export type { FieldProps } from './Field.js';
+export { Input } from './Input.js';
+export type { InputProps, InputVariant, InputTextAlign, InputValueChangeDetails, InputClassNames } from './Input.js';
+export { Textarea } from './Textarea.js';
+export type { TextareaProps } from './Textarea.js';
+export type { FieldControlSize, FieldControlStateProps } from './types.js';

package/dist/form/index.js

@@ -0,0 +1,3 @@
+export { Field } from './Field.js';
+export { Input } from './Input.js';
+export { Textarea } from './Textarea.js';

package/dist/form/types.d.ts

@@ -0,0 +1,6 @@
+export type FieldControlSize = 'sm' | 'md' | 'lg';
+export interface FieldControlStateProps {
+    invalid?: boolean;
+    size?: FieldControlSize;
+    seed?: string | number;
+}

package/dist/form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+export { Button, ButtonGroup, ButtonLink } from './Button.js';
+export * from './overlay/index.js';
+export * from './form/index.js';
+export * from './input-number/index.js';
+export * from './slider/index.js';
+export * from './selection/index.js';
+export * from './select/index.js';
+export * from './tabs/index.js';
+export * from './breadcrumb/index.js';
+export * from './tooltip/index.js';
+export * from './accordion/index.js';
+export * from './display/index.js';
+export * from './content/index.js';
+export * from './dropdown-menu/index.js';
+export * from './calendar/index.js';
+export * from './day-agenda/index.js';
+export * from './journey-map/index.js';
+export type { ButtonGroupOrientation, ButtonAlign, ButtonLoadingPosition, ButtonGroupProps, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, } from './Button.js';
+export { PencilLine } from './PencilLine.js';
+export type { PencilLineOrientation, PencilLineProps } from './PencilLine.js';
+export { PencilSurface } from './PencilSurface.js';
+export type { PencilSurfaceProps, PencilSurfaceVariant } from './PencilSurface.js';
+export { PencilText } from './PencilText.js';
+export type { PencilTextProps } from './PencilText.js';
+export { PencilIcon } from './PencilIcon.js';
+export type { PencilIconBadge, PencilIconPath, PencilIconProps } from './PencilIcon.js';
+export { createPencilPath, createPencilPoints } from './pencil.js';
+export type { PencilPathOptions, PencilPoint } from './pencil.js';

package/dist/index.js

@@ -0,0 +1,22 @@
+export { Button, ButtonGroup, ButtonLink } from './Button.js';
+export * from './overlay/index.js';
+export * from './form/index.js';
+export * from './input-number/index.js';
+export * from './slider/index.js';
+export * from './selection/index.js';
+export * from './select/index.js';
+export * from './tabs/index.js';
+export * from './breadcrumb/index.js';
+export * from './tooltip/index.js';
+export * from './accordion/index.js';
+export * from './display/index.js';
+export * from './content/index.js';
+export * from './dropdown-menu/index.js';
+export * from './calendar/index.js';
+export * from './day-agenda/index.js';
+export * from './journey-map/index.js';
+export { PencilLine } from './PencilLine.js';
+export { PencilSurface } from './PencilSurface.js';
+export { PencilText } from './PencilText.js';
+export { PencilIcon } from './PencilIcon.js';
+export { createPencilPath, createPencilPoints } from './pencil.js';

package/dist/input-number/index.d.ts

@@ -0,0 +1,16 @@
+import type { InputProps } from '../form/Input.js';
+export interface InputNumberValueChangeDetails {
+    reason: 'input' | 'increment' | 'decrement';
+}
+export interface InputNumberProps extends Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onValueChange' | 'min' | 'max' | 'step' | 'startAction' | 'endAction' | 'clearable' | 'clearButtonLabel' | 'onClear'> {
+    value?: number | null;
+    defaultValue?: number | null;
+    onValueChange?: (value: number | null, details: InputNumberValueChangeDetails) => void;
+    min?: number;
+    max?: number;
+    step?: number | 'any';
+    controls?: boolean;
+    incrementButtonLabel?: string;
+    decrementButtonLabel?: string;
+}
+export declare const InputNumber: import("react").ForwardRefExoticComponent<InputNumberProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/input-number/index.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { Input } from '../form/Input.js';
+import { useResolvedControlProps } from '../form/controlProps.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+// Lucide Plus / Minus ISC geometry uses the shared pencil renderer.
+const plusPaths = [{ d: 'M5 12h14' }, { d: 'M12 5v14' }];
+const minusPaths = [{ d: 'M5 12h14' }];
+const finiteValue = (value) => typeof value === 'number' && Number.isFinite(value) ? value : null;
+const format = (value) => String(finiteValue(value) ?? '');
+const numberFromDraft = (draft) => draft === '' ? null : finiteValue(Number(draft));
+export const InputNumber = forwardRef(function InputNumber({ classNames, controls = true, decrementButtonLabel = 'Decrease value', defaultValue, disabled, incrementButtonLabel = 'Increase value', inputMode = 'decimal', max, min, onChange, onValueChange, readOnly, size = 'md', step = 1, textAlign = 'center', value, ...props }, forwardedRef) {
+    const inputRef = useRef(null);
+    const isControlled = value !== undefined;
+    const [draft, setDraft] = useState(() => format(isControlled ? value : defaultValue));
+    const currentValue = numberFromDraft(draft);
+    const state = useResolvedControlProps({ disabled, readOnly });
+    const latest = useRef({ isControlled, value, defaultValue });
+    latest.current = { isControlled, value, defaultValue };
+    useImperativeHandle(forwardedRef, () => inputRef.current);
+    useBrowserLayoutEffect(() => {
+        if (isControlled && currentValue !== finiteValue(value))
+            setDraft(format(value));
+    }, [currentValue, draft, isControlled, value]);
+    useEffect(() => {
+        const input = inputRef.current;
+        const form = input?.form;
+        if (!input || !form)
+            return;
+        let resetTimer;
+        const reset = (event) => {
+            clearTimeout(resetTimer);
+            // Native reset runs after the event; restore the public default, not the latest draft.
+            resetTimer = setTimeout(() => {
+                if (event.defaultPrevented)
+                    return;
+                const state = latest.current;
+                const restored = format(state.isControlled ? state.value : state.defaultValue);
+                input.value = restored;
+                setDraft(restored);
+            }, 0);
+        };
+        form.addEventListener('reset', reset);
+        return () => { clearTimeout(resetTimer); form.removeEventListener('reset', reset); };
+    }, [props.form]);
+    const cannotStep = state.disabled || state.readOnly || step === 'any' || (min !== undefined && max !== undefined && min > max);
+    const decreaseDisabled = cannotStep || (currentValue !== null && min !== undefined && currentValue <= min);
+    const increaseDisabled = cannotStep || (currentValue !== null && max !== undefined && currentValue >= max);
+    function changeStep(direction) {
+        const input = inputRef.current;
+        if (!input || input.matches(':disabled') || input.readOnly || cannotStep)
+            return;
+        const before = input.value;
+        // Native stepping applies the step base and decimal rounding without a custom parser.
+        if (direction === 'increment')
+            input.stepUp();
+        else
+            input.stepDown();
+        input.focus({ preventScroll: true });
+        if (input.value === before)
+            return;
+        setDraft(input.value);
+        onValueChange?.(Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : null, { reason: direction });
+    }
+    const iconSize = size === 'sm' ? 18 : size === 'lg' ? 26 : 22;
+    const buttonSize = size === 'sm' ? 'icon-sm' : size === 'lg' ? 'icon-lg' : 'icon';
+    return _jsx(Input, { ...props, ref: inputRef, type: "number", inputMode: inputMode, textAlign: textAlign, clearable: false, size: size, min: min, max: max, step: step, disabled: state.disabled, readOnly: state.readOnly, value: draft, classNames: { ...classNames, root: ['inkra-input-number', classNames?.root].filter(Boolean).join(' ') }, onChange: event => {
+            const input = event.currentTarget;
+            const nextValue = Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : null;
+            setDraft(input.value);
+            onChange?.(event);
+            onValueChange?.(nextValue, { reason: 'input' });
+        }, startAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: decreaseDisabled, "aria-label": decrementButtonLabel, onPointerDown: event => event.preventDefault(), onClick: () => changeStep('decrement'), children: _jsx(PencilIcon, { paths: minusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: decrementButtonLabel }) })] }) }) }) : undefined, endAction: controls ? _jsx(Tooltip.Provider, { children: _jsx("span", { className: "inkra-input-number__controls", children: _jsxs(Tooltip.Root, { children: [_jsx(Tooltip.Trigger, { asChild: true, children: _jsx(Button, { type: "button", size: buttonSize, variant: "ghost", disabled: increaseDisabled, "aria-label": incrementButtonLabel, onPointerDown: event => event.preventDefault(), onClick: () => changeStep('increment'), children: _jsx(PencilIcon, { paths: plusPaths, size: iconSize, sourceSize: 24 }) }) }), _jsx(Tooltip.Portal, { children: _jsx(Tooltip.Content, { children: incrementButtonLabel }) })] }) }) }) : undefined });
+});

package/dist/internal/InputActionContext.d.ts

@@ -0,0 +1 @@
+export declare const InputActionContext: import("react").Context<boolean>;

package/dist/internal/InputActionContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+// Input owns the shared outline and selection wash; the button supplies foreground.
+export const InputActionContext = createContext(false);

package/dist/internal/cache.d.ts

@@ -0,0 +1,14 @@
+export declare const PENCIL_RENDERER_VERSION = "inkra-pencil-v4";
+export declare class BoundedCache<Value> {
+    private readonly maxEntries;
+    private readonly maxCost;
+    private readonly entries;
+    private totalCost;
+    constructor(maxEntries: number, maxCost: number);
+    get(key: string): Value | undefined;
+    set(key: string, value: Value, cost: number): Value;
+    delete(key: string): void;
+}
+export declare function canvasByteCost(canvas: HTMLCanvasElement): number;
+export declare function canvasIsUsable(canvas: HTMLCanvasElement): boolean;
+export declare function effectiveDpr(limit?: number): number;

package/dist/internal/cache.js

@@ -0,0 +1,54 @@
+export const PENCIL_RENDERER_VERSION = 'inkra-pencil-v4';
+export class BoundedCache {
+    constructor(maxEntries, maxCost) {
+        this.maxEntries = maxEntries;
+        this.maxCost = maxCost;
+        this.entries = new Map();
+        this.totalCost = 0;
+    }
+    get(key) {
+        const entry = this.entries.get(key);
+        if (!entry)
+            return undefined;
+        this.entries.delete(key);
+        this.entries.set(key, entry);
+        return entry.value;
+    }
+    set(key, value, cost) {
+        const previous = this.entries.get(key);
+        if (previous) {
+            this.totalCost -= previous.cost;
+            this.entries.delete(key);
+        }
+        this.entries.set(key, { value, cost });
+        this.totalCost += cost;
+        while (this.entries.size > this.maxEntries || this.totalCost > this.maxCost) {
+            const oldestKey = this.entries.keys().next().value;
+            if (!oldestKey)
+                break;
+            const oldest = this.entries.get(oldestKey);
+            this.entries.delete(oldestKey);
+            this.totalCost -= oldest?.cost ?? 0;
+        }
+        return value;
+    }
+    delete(key) {
+        const entry = this.entries.get(key);
+        if (!entry)
+            return;
+        this.entries.delete(key);
+        this.totalCost -= entry.cost;
+    }
+}
+export function canvasByteCost(canvas) {
+    return canvas.width * canvas.height * 4;
+}
+export function canvasIsUsable(canvas) {
+    const context = canvas.getContext('2d');
+    return Boolean(context && !context.isContextLost?.());
+}
+export function effectiveDpr(limit = 2) {
+    if (typeof window === 'undefined')
+        return 1;
+    return Math.max(1, Math.min(window.devicePixelRatio || 1, limit));
+}

package/dist/internal/line.d.ts

@@ -0,0 +1,4 @@
+import type { PencilPoint } from './stroke.js';
+export type PencilLineOrientation = 'horizontal' | 'vertical';
+export declare function createPencilLinePoints(width: number, height: number, orientation: PencilLineOrientation, roughness: number): readonly PencilPoint[];
+export declare function pencilLineHasDrawableSize(width: number, height: number, orientation: PencilLineOrientation): boolean;

package/dist/internal/line.js

@@ -0,0 +1,21 @@
+export function createPencilLinePoints(width, height, orientation, roughness) {
+    if (orientation === 'vertical') {
+        const middle = width / 2;
+        return [
+            [middle, 2],
+            [middle - roughness * 0.45, height * 0.34],
+            [middle + roughness * 0.3, height * 0.68],
+            [middle, height - 2],
+        ];
+    }
+    const middle = height / 2;
+    return [
+        [2, middle],
+        [width * 0.34, middle - roughness * 0.45],
+        [width * 0.68, middle + roughness * 0.3],
+        [width - 2, middle],
+    ];
+}
+export function pencilLineHasDrawableSize(width, height, orientation) {
+    return orientation === 'vertical' ? height >= 4 && width >= 2 : width >= 4 && height >= 2;
+}

package/dist/internal/paper.d.ts

@@ -0,0 +1 @@
+export declare function pencilPaper(color?: string, dark?: boolean, dpr?: number): HTMLCanvasElement;

package/dist/internal/paper.js

@@ -0,0 +1,65 @@
+import { BoundedCache, PENCIL_RENDERER_VERSION, canvasByteCost, canvasIsUsable } from './cache.js';
+import { grain, seededRandom } from './random.js';
+const PAPER_SIZE = 384;
+const paperCache = new BoundedCache(8, 24 * 1024 * 1024);
+export function pencilPaper(color = '#fcfcfa', dark = false, dpr = 1) {
+    const ratio = Math.max(1, Math.min(dpr, 2));
+    const key = JSON.stringify([PENCIL_RENDERER_VERSION, PAPER_SIZE, color, dark, ratio]);
+    const cached = paperCache.get(key);
+    if (cached && canvasIsUsable(cached))
+        return cached;
+    if (cached)
+        paperCache.delete(key);
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.round(PAPER_SIZE * ratio);
+    canvas.height = Math.round(PAPER_SIZE * ratio);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return canvas;
+    context.scale(ratio, ratio);
+    context.fillStyle = color;
+    context.fillRect(0, 0, PAPER_SIZE, PAPER_SIZE);
+    if (dark) {
+        grain(context, PAPER_SIZE, PAPER_SIZE, '#3b392f', 4331, 0.42);
+        grain(context, PAPER_SIZE, PAPER_SIZE, '#0a0a08', 7013, 0.3);
+    }
+    else {
+        grain(context, PAPER_SIZE, PAPER_SIZE, '#808278', 4331, 0.85);
+        grain(context, PAPER_SIZE, PAPER_SIZE, '#ffffff', 7013, 1.7);
+    }
+    const random = seededRandom(8119);
+    context.lineCap = 'round';
+    const fibreCount = dark ? 700 : 1100;
+    for (let index = 0; index < fibreCount; index += 1) {
+        const x = random() * PAPER_SIZE;
+        const y = random() * PAPER_SIZE;
+        const length = 2 + random() * 12;
+        const angle = random() * Math.PI;
+        const deltaX = Math.cos(angle) * length;
+        const deltaY = Math.sin(angle) * length * 0.45;
+        const bend = (random() - 0.5) * 2;
+        const alpha = dark ? 0.025 + random() * 0.025 : 0.025 + random() * 0.055;
+        context.lineWidth = 0.35 + random() * 0.45;
+        for (const offsetX of [-PAPER_SIZE, 0, PAPER_SIZE]) {
+            for (const offsetY of [-PAPER_SIZE, 0, PAPER_SIZE]) {
+                if (x + offsetX + length < 0 || x + offsetX - length > PAPER_SIZE
+                    || y + offsetY + length < 0 || y + offsetY - length > PAPER_SIZE)
+                    continue;
+                context.strokeStyle = dark ? '#0d0d0b' : '#82877b';
+                context.globalAlpha = alpha;
+                context.beginPath();
+                context.moveTo(x + offsetX, y + offsetY);
+                context.quadraticCurveTo(x + offsetX + deltaX / 2, y + offsetY + deltaY / 2 + bend, x + offsetX + deltaX, y + offsetY + deltaY);
+                context.stroke();
+                context.strokeStyle = dark ? '#494737' : '#ffffff';
+                context.globalAlpha = dark ? alpha * 1.2 : alpha * 2.5;
+                context.beginPath();
+                context.moveTo(x + offsetX, y + offsetY + 0.7);
+                context.quadraticCurveTo(x + offsetX + deltaX / 2, y + offsetY + deltaY / 2 + bend + 0.7, x + offsetX + deltaX, y + offsetY + deltaY + 0.7);
+                context.stroke();
+            }
+        }
+    }
+    context.globalAlpha = 1;
+    return paperCache.set(key, canvas, canvasByteCost(canvas));
+}

package/dist/internal/random.d.ts

@@ -0,0 +1,3 @@
+export declare function seedToNumber(seed: string | number): number;
+export declare function seededRandom(seed: string | number): () => number;
+export declare function grain(context: CanvasRenderingContext2D, width: number, height: number, color: string, seed: string | number, amount: number): void;

package/dist/internal/random.js

@@ -0,0 +1,30 @@
+export function seedToNumber(seed) {
+    if (typeof seed === 'number' && Number.isFinite(seed))
+        return seed >>> 0;
+    const value = String(seed);
+    let hash = 2166136261;
+    for (let index = 0; index < value.length; index += 1) {
+        hash ^= value.charCodeAt(index);
+        hash = Math.imul(hash, 16777619);
+    }
+    return hash >>> 0;
+}
+export function seededRandom(seed) {
+    let state = seedToNumber(seed) || 1;
+    return () => {
+        state += 0x6d2b79f5;
+        let value = Math.imul(state ^ (state >>> 15), state | 1);
+        value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+        return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+    };
+}
+export function grain(context, width, height, color, seed, amount) {
+    const random = seededRandom(seed);
+    context.save();
+    context.fillStyle = color;
+    for (let index = 0; index < width * height * 0.2; index += 1) {
+        context.globalAlpha = (0.02 + random() * 0.13) * amount;
+        context.fillRect(random() * width, random() * height, 0.5 + random() * 0.6, 0.4 + random() * 0.7);
+    }
+    context.restore();
+}

package/dist/internal/recovery.d.ts

@@ -0,0 +1 @@
+export declare function observeCanvasRecovery(callback: () => void): () => void;

package/dist/internal/recovery.js

@@ -0,0 +1,52 @@
+const subscribers = new Set();
+let frame = 0;
+function recover() {
+    frame = 0;
+    if (document.visibilityState === 'hidden')
+        return;
+    for (const callback of subscribers) {
+        try {
+            callback();
+        }
+        catch {
+            // One failed canvas must not block independent painters.
+        }
+    }
+}
+function scheduleRecovery() {
+    if (!frame && document.visibilityState !== 'hidden')
+        frame = requestAnimationFrame(recover);
+}
+function onVisibility() {
+    if (document.visibilityState === 'hidden') {
+        cancelAnimationFrame(frame);
+        frame = 0;
+    }
+    else {
+        scheduleRecovery();
+    }
+}
+function onPageShow(event) {
+    if (event.persisted)
+        scheduleRecovery();
+}
+export function observeCanvasRecovery(callback) {
+    if (!subscribers.size) {
+        document.addEventListener('visibilitychange', onVisibility);
+        document.addEventListener('resume', scheduleRecovery);
+        document.addEventListener('contextrestored', scheduleRecovery, true);
+        window.addEventListener('pageshow', onPageShow);
+    }
+    subscribers.add(callback);
+    return () => {
+        subscribers.delete(callback);
+        if (subscribers.size)
+            return;
+        document.removeEventListener('visibilitychange', onVisibility);
+        document.removeEventListener('resume', scheduleRecovery);
+        document.removeEventListener('contextrestored', scheduleRecovery, true);
+        window.removeEventListener('pageshow', onPageShow);
+        cancelAnimationFrame(frame);
+        frame = 0;
+    };
+}

package/dist/internal/stroke.d.ts

@@ -0,0 +1,24 @@
+export type PencilPoint = readonly [x: number, y: number];
+export interface StrokeSettings {
+    variation?: number;
+    breaks?: number;
+    grain?: number;
+    taperLength?: number;
+    scale?: number;
+    distanceOffset?: number;
+    totalDistance?: number;
+    step?: number;
+    detail?: 'fill';
+    viewport?: readonly [width: number, height: number];
+    viewportTop?: number;
+    filaments?: number;
+    gain?: number;
+    edgeGrain?: boolean;
+}
+export declare function strokeProfile(at: number, total: number, seed: number, settings?: StrokeSettings): {
+    pressure: number;
+    contact: number;
+    deposit: number;
+    taper: number;
+};
+export declare function pencilStroke(context: CanvasRenderingContext2D, points: readonly PencilPoint[], color: string, width: number, seed: number, amplitude: number, passes?: number, closed?: boolean, settings?: StrokeSettings): void;