@inkra/react 0.0.0-stage → 0.2.0

package/dist/overlay/themeBridge.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const emptySnapshot = {
+    direction: 'ltr',
+    style: {},
+};
+const PortalThemeContext = createContext(null);
+const PortalLayerDepthContext = createContext(-1);
+function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (ref)
+        ref.current = value;
+}
+function closestAttribute(node, attribute) {
+    return node.closest(`[${attribute}]`)?.getAttribute(attribute) ?? undefined;
+}
+function isForcedColorsActive() {
+    return typeof window !== 'undefined'
+        && typeof window.matchMedia === 'function'
+        && window.matchMedia('(forced-colors: active)').matches;
+}
+function readThemeSnapshot(node, forcedColors = isForcedColorsActive()) {
+    if (!node || typeof window === 'undefined')
+        return emptySnapshot;
+    const computed = window.getComputedStyle(node);
+    const style = {};
+    if (!forcedColors) {
+        for (let index = 0; index < computed.length; index += 1) {
+            const property = computed.item(index);
+            if (property.startsWith('--inkra-')) {
+                style[property] = computed.getPropertyValue(property).trim();
+            }
+        }
+    }
+    style.colorScheme = computed.colorScheme;
+    style.fontFamily = computed.fontFamily;
+    return {
+        theme: closestAttribute(node, 'data-theme'),
+        inkraTheme: closestAttribute(node, 'data-inkra-theme'),
+        direction: computed.direction === 'rtl' ? 'rtl' : 'ltr',
+        language: node.closest('[lang]')?.lang || undefined,
+        style,
+    };
+}
+export function PortalThemeProvider({ children }) {
+    const parentDepth = useContext(PortalLayerDepthContext);
+    const depth = parentDepth + 1;
+    const [trigger, setTrigger] = useState(null);
+    const [snapshot, setSnapshot] = useState(emptySnapshot);
+    const captureTrigger = useCallback((node) => {
+        setTrigger(node);
+        setSnapshot(readThemeSnapshot(node));
+    }, []);
+    useEffect(() => {
+        if (!trigger || typeof MutationObserver === 'undefined')
+            return undefined;
+        const refresh = () => setSnapshot(readThemeSnapshot(trigger));
+        const observer = new MutationObserver(refresh);
+        for (let target = trigger; target; target = target.parentElement) {
+            observer.observe(target, {
+                attributes: true,
+                attributeFilter: ['class', 'data-theme', 'data-inkra-theme', 'dir', 'lang', 'style'],
+            });
+        }
+        const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+        const forcedColors = window.matchMedia('(forced-colors: active)');
+        colorScheme.addEventListener('change', refresh);
+        forcedColors.addEventListener('change', refresh);
+        refresh();
+        return () => {
+            observer.disconnect();
+            colorScheme.removeEventListener('change', refresh);
+            forcedColors.removeEventListener('change', refresh);
+        };
+    }, [trigger]);
+    const value = useMemo(() => ({ captureTrigger, depth, snapshot }), [captureTrigger, depth, snapshot]);
+    return (_jsx(PortalLayerDepthContext.Provider, { value: depth, children: _jsx(PortalThemeContext.Provider, { value: value, children: children }) }));
+}
+export function usePortalTriggerRef(forwardedRef) {
+    const captureTrigger = useContext(PortalThemeContext)?.captureTrigger;
+    return useCallback((node) => {
+        assignRef(forwardedRef, node);
+        captureTrigger?.(node);
+    }, [captureTrigger, forwardedRef]);
+}
+export const PortalThemeBridge = forwardRef(function PortalThemeBridge({ children }, ref) {
+    const context = useContext(PortalThemeContext);
+    const depth = context?.depth ?? 0;
+    const snapshot = context?.snapshot ?? emptySnapshot;
+    const style = useMemo(() => ({
+        ...snapshot.style,
+        '--inkra-floating-layer-offset': `${depth * 20}`,
+    }), [depth, snapshot.style]);
+    return (_jsx("div", { className: "inkra-portal-theme-bridge", ref: ref, "data-inkra-theme": snapshot.inkraTheme, "data-theme": snapshot.theme, dir: snapshot.direction, lang: snapshot.language, style: style, children: children }));
+});

package/dist/pagination/index.d.ts

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export interface PaginationLabels {
+    nav: string;
+    first: string;
+    previous: string;
+    next: string;
+    last: string;
+    page: (page: number) => string;
+    ellipsis: string;
+}
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
+    totalPages: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    siblingCount?: number;
+    boundaryCount?: number;
+    showFirstLast?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    labels?: Partial<PaginationLabels>;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLElement>>;

package/dist/pagination/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { clampPage, getPaginationEntries, normalizeTotal } from './model.js';
+const defaultLabels = {
+    nav: 'Pagination', first: 'First page', previous: 'Previous page', next: 'Next page', last: 'Last page',
+    page: page => `Page ${page}`, ellipsis: 'More pages',
+};
+export const Pagination = forwardRef(function Pagination({ totalPages, page, defaultPage = 1, onPageChange, siblingCount = 1, boundaryCount = 1, showFirstLast = false, disabled = false, size = 'md', labels, className, ...props }, ref) {
+    const total = normalizeTotal(totalPages);
+    const [internalPage, setInternalPage] = useState(() => clampPage(defaultPage, total));
+    const current = clampPage(page ?? internalPage, total);
+    const text = { ...defaultLabels, ...labels };
+    useEffect(() => {
+        if (page === undefined)
+            setInternalPage(value => clampPage(value, total));
+    }, [page, total]);
+    function select(next) {
+        const target = clampPage(next, total);
+        if (disabled || !total || target === current)
+            return;
+        if (page === undefined)
+            setInternalPage(target);
+        onPageChange?.(target);
+    }
+    const arrow = (kind, target, unavailable) => {
+        const backwards = kind === 'first' || kind === 'previous';
+        const paths = [{ d: backwards ? 'm15 18-6-6 6-6' : 'm9 18 6-6-6-6' }];
+        if (kind === 'first')
+            paths.push({ d: 'M5 6v12' });
+        if (kind === 'last')
+            paths.push({ d: 'M19 6v12' });
+        return _jsx("li", { children: _jsx(Button, { variant: "ghost", size: size === 'md' ? 'icon' : `icon-${size}`, "aria-label": text[kind], title: text[kind], disabled: disabled || unavailable, onClick: () => select(target), children: _jsx(PencilIcon, { className: "inkra-pagination__arrow", paths: paths, size: 20, sourceSize: 24 }) }) }, kind);
+    };
+    return _jsx("nav", { "aria-label": text.nav, ...props, ref: ref, className: ['inkra-pagination', className].filter(Boolean).join(' '), "data-empty": !total || undefined, children: _jsxs("ul", { className: "inkra-pagination__list", children: [showFirstLast && arrow('first', 1, current <= 1), arrow('previous', current - 1, current <= 1), getPaginationEntries(total, current, siblingCount, boundaryCount).map(entry => typeof entry === 'number'
+                    ? _jsx("li", { children: _jsxs(Button, { size: size, variant: "ghost", className: "inkra-pagination__page", "aria-label": text.page(entry), "aria-current": entry === current ? 'page' : undefined, disabled: disabled, onClick: () => select(entry), children: [entry === current && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", variant: "selection", className: "inkra-pagination__selection", seed: `page-${entry}` }), _jsx(PencilText, { children: String(entry) })] }) }, entry)
+                    : _jsxs("li", { className: "inkra-pagination__ellipsis", children: [_jsx("span", { className: "inkra-pagination__sr-only", children: text.ellipsis }), _jsx(PencilText, { "aria-hidden": "true", children: "..." })] }, entry)), arrow('next', current + 1, !total || current >= total), showFirstLast && arrow('last', total, !total || current >= total)] }) });
+});

package/dist/pagination/model.d.ts

@@ -0,0 +1,4 @@
+export type PaginationEntry = number | 'ellipsis-start' | 'ellipsis-end';
+export declare function normalizeTotal(total: number): number;
+export declare function clampPage(page: number, total: number): number;
+export declare function getPaginationEntries(total: number, page: number, siblings?: number, boundaries?: number): PaginationEntry[];

package/dist/pagination/model.js

@@ -0,0 +1,42 @@
+export function normalizeTotal(total) {
+    return Number.isFinite(total) ? Math.max(0, Math.min(Number.MAX_SAFE_INTEGER, Math.floor(total))) : 0;
+}
+export function clampPage(page, total) {
+    if (total === 0)
+        return 0;
+    return Math.min(total, Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1));
+}
+function windowCount(value) {
+    return Number.isFinite(value) ? Math.max(0, Math.min(3, Math.floor(value))) : 1;
+}
+export function getPaginationEntries(total, page, siblings = 1, boundaries = 1) {
+    total = normalizeTotal(total);
+    if (!total)
+        return [];
+    page = clampPage(page, total);
+    siblings = windowCount(siblings);
+    boundaries = windowCount(boundaries);
+    const visible = new Set([page]);
+    for (let offset = 1; offset <= boundaries; offset += 1) {
+        visible.add(offset);
+        visible.add(total - offset + 1);
+    }
+    for (let offset = -siblings; offset <= siblings; offset += 1)
+        visible.add(page + offset);
+    const pages = [...visible].filter(value => value >= 1 && value <= total).sort((a, b) => a - b);
+    const entries = [];
+    let previous = 0;
+    for (const value of pages) {
+        if (previous && value - previous === 2)
+            entries.push(previous + 1);
+        else if (previous && value - previous > 2)
+            entries.push(value <= page ? 'ellipsis-start' : 'ellipsis-end');
+        else if (!previous && value > 1)
+            entries.push('ellipsis-start');
+        entries.push(value);
+        previous = value;
+    }
+    if (previous < total)
+        entries.push('ellipsis-end');
+    return entries;
+}

package/dist/pan-zoom/index.d.ts

@@ -0,0 +1,71 @@
+import type { FitToViewMode, ZoomToElementOptions, ZoomToElementTarget } from 'react-zoom-pan-pinch';
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export interface PanZoomTransform {
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface PanZoomChangeDetails {
+    reason: 'gesture' | 'programmatic';
+}
+export interface PanZoomPoint {
+    x: number;
+    y: number;
+}
+export interface PanZoomAnimationOptions {
+    duration?: number;
+}
+export interface PanZoomFitOptions extends PanZoomAnimationOptions {
+    mode?: FitToViewMode;
+    minScale?: number;
+    maxScale?: number;
+}
+export interface PanZoomZoomToOptions extends PanZoomAnimationOptions {
+    anchor?: PanZoomPoint;
+}
+export type PanZoomZoomToElementOptions = ZoomToElementOptions;
+export interface PanZoomRef {
+    reset: (options?: PanZoomAnimationOptions) => Promise<void>;
+    fit: (options?: PanZoomFitOptions) => Promise<void>;
+    setTransform: (transform: PanZoomTransform, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomIn: (step?: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomOut: (step?: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    zoomTo: (scale: number, options?: PanZoomZoomToOptions) => Promise<void>;
+    zoomToElement: (target: ZoomToElementTarget | ZoomToElementTarget[], options?: PanZoomZoomToElementOptions) => Promise<void>;
+    panBy: (deltaX: number, deltaY: number, options?: PanZoomAnimationOptions) => Promise<void>;
+    clientToContent: (clientX: number, clientY: number) => PanZoomPoint;
+    contentToClient: (x: number, y: number) => PanZoomPoint;
+    getTransform: () => PanZoomTransform;
+    getViewportElement: () => HTMLDivElement | null;
+    getContentElement: () => HTMLDivElement | null;
+}
+export type PanZoomWheelMode = 'modifier' | 'always' | 'disabled';
+export interface PanZoomProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'defaultValue' | 'onChange'> {
+    children: ReactNode;
+    value?: PanZoomTransform;
+    defaultValue?: PanZoomTransform;
+    onTransformChange?: (transform: PanZoomTransform, details: PanZoomChangeDetails) => void;
+    minScale?: number;
+    maxScale?: number;
+    wheel?: PanZoomWheelMode;
+    pinch?: boolean;
+    pan?: boolean;
+    keyboard?: boolean;
+    keyboardPanStep?: number;
+    keyboardZoomStep?: number;
+    doubleClickZoom?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    limitToBounds?: boolean;
+    centerZoomedOut?: boolean;
+    centerOnInit?: boolean;
+    fitOnInit?: boolean | FitToViewMode;
+    viewportClassName?: string;
+    contentClassName?: string;
+    viewportStyle?: CSSProperties;
+    contentStyle?: CSSProperties;
+    viewportProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+    contentProps?: Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'>;
+    instructions?: string;
+}
+export declare const PanZoom: import("react").ForwardRefExoticComponent<PanZoomProps & import("react").RefAttributes<PanZoomRef>>;

package/dist/pan-zoom/index.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useRef, useState, } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+const defaultTransform = { x: 0, y: 0, scale: 1 };
+const interactionExclusions = [
+    'button',
+    'a',
+    'input',
+    'select',
+    'textarea',
+];
+function clampScale(value, minScale, maxScale) {
+    return Math.min(maxScale, Math.max(minScale, value));
+}
+function normalizedTransform(value, minScale, maxScale) {
+    return {
+        x: Number.isFinite(value.x) ? value.x : 0,
+        y: Number.isFinite(value.y) ? value.y : 0,
+        scale: clampScale(Number.isFinite(value.scale) ? value.scale : 1, minScale, maxScale),
+    };
+}
+function transformsEqual(left, right) {
+    return left.x === right.x && left.y === right.y && left.scale === right.scale;
+}
+function prefersReducedMotion(element) {
+    return element?.ownerDocument.defaultView?.matchMedia('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+function PanZoomRoot({ children, value, defaultValue = defaultTransform, onTransformChange, minScale = 0.25, maxScale = 8, wheel = 'modifier', pinch = true, pan = true, keyboard = true, keyboardPanStep = 48, keyboardZoomStep = 0.25, doubleClickZoom = false, disabled = false, readOnly = false, limitToBounds = true, centerZoomedOut = true, centerOnInit = false, fitOnInit = false, className, viewportClassName, contentClassName, style, viewportStyle, contentStyle, viewportProps, contentProps, instructions, 'aria-label': ariaLabel = 'Pan and zoom content', ...props }, forwardedRef) {
+    const resolvedMinScale = Math.max(Number.isFinite(minScale) ? minScale : 0.25, 0.0001);
+    const resolvedMaxScale = Math.max(Number.isFinite(maxScale) ? maxScale : 8, resolvedMinScale);
+    const controlled = value !== undefined;
+    const initialTransform = normalizedTransform(value ?? defaultValue, resolvedMinScale, resolvedMaxScale);
+    const [uncontrolledTransform, setUncontrolledTransform] = useState(initialTransform);
+    const visibleTransform = normalizedTransform(value ?? uncontrolledTransform, resolvedMinScale, resolvedMaxScale);
+    const engineRef = useRef(null);
+    const instructionsId = useId();
+    const committedRef = useRef(initialTransform);
+    const programmaticRef = useRef(false);
+    const pointerBlocksPanRef = useRef(false);
+    const wheelTargetBlocksZoomRef = useRef(false);
+    const animationDuration = useCallback((duration, fallback) => {
+        if (duration !== undefined)
+            return duration;
+        return prefersReducedMotion(engineRef.current?.instance.wrapperComponent ?? null) ? 0 : fallback;
+    }, []);
+    const syncExternalTransform = useCallback((next, duration = 0) => {
+        const normalized = normalizedTransform(next, resolvedMinScale, resolvedMaxScale);
+        committedRef.current = normalized;
+        programmaticRef.current = true;
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        void engine.setTransform(normalized.x, normalized.y, normalized.scale, duration)
+            .finally(() => {
+            programmaticRef.current = false;
+        });
+    }, [resolvedMaxScale, resolvedMinScale]);
+    useEffect(() => {
+        if (!controlled || transformsEqual(visibleTransform, committedRef.current))
+            return;
+        syncExternalTransform(visibleTransform);
+    }, [controlled, syncExternalTransform, visibleTransform.x, visibleTransform.y, visibleTransform.scale]);
+    useEffect(() => {
+        const clamped = normalizedTransform(committedRef.current, resolvedMinScale, resolvedMaxScale);
+        if (!transformsEqual(clamped, committedRef.current))
+            syncExternalTransform(clamped);
+    }, [resolvedMaxScale, resolvedMinScale, syncExternalTransform]);
+    const runProgrammatic = useCallback(async (action) => {
+        const engine = engineRef.current;
+        if (!engine || disabled)
+            return;
+        programmaticRef.current = true;
+        try {
+            await action(engine);
+        }
+        finally {
+            programmaticRef.current = false;
+        }
+    }, [disabled]);
+    const reconcileControlled = useCallback(() => {
+        if (controlled && !transformsEqual(visibleTransform, committedRef.current)) {
+            syncExternalTransform(visibleTransform, animationDuration(undefined, 100));
+        }
+    }, [animationDuration, controlled, syncExternalTransform, visibleTransform.x, visibleTransform.y, visibleTransform.scale]);
+    useImperativeHandle(forwardedRef, () => ({
+        reset: options => runProgrammatic(engine => engine.resetTransform(animationDuration(options?.duration, 200))),
+        fit: options => runProgrammatic(engine => engine.fitToView({
+            mode: options?.mode,
+            minScale: options?.minScale,
+            maxScale: options?.maxScale,
+            animationTime: animationDuration(options?.duration, 200),
+        })),
+        setTransform: (transform, options) => runProgrammatic(engine => {
+            const next = normalizedTransform(transform, resolvedMinScale, resolvedMaxScale);
+            return engine.setTransform(next.x, next.y, next.scale, animationDuration(options?.duration, 200));
+        }),
+        zoomIn: (step = keyboardZoomStep, options) => runProgrammatic(engine => engine.zoomIn(step, animationDuration(options?.duration, 200))),
+        zoomOut: (step = keyboardZoomStep, options) => runProgrammatic(engine => engine.zoomOut(step, animationDuration(options?.duration, 200))),
+        zoomTo: (scale, options) => runProgrammatic((engine) => {
+            const nextScale = clampScale(scale, resolvedMinScale, resolvedMaxScale);
+            if (options?.anchor) {
+                return engine.zoomToPoint(nextScale, options.anchor.x, options.anchor.y, animationDuration(options.duration, 200));
+            }
+            return engine.centerView(nextScale, animationDuration(options?.duration, 200));
+        }),
+        zoomToElement: (target, options) => runProgrammatic(engine => engine.zoomToElement(target, {
+            ...options,
+            animationTime: animationDuration(options?.animationTime, 300),
+        })),
+        panBy: (deltaX, deltaY, options) => runProgrammatic(engine => engine.panBy(deltaX, deltaY, animationDuration(options?.duration, 160))),
+        clientToContent: (clientX, clientY) => engineRef.current?.clientToContent(clientX, clientY) ?? { x: clientX, y: clientY },
+        contentToClient: (x, y) => engineRef.current?.contentToClient(x, y) ?? { x, y },
+        getTransform: () => committedRef.current,
+        getViewportElement: () => engineRef.current?.instance.wrapperComponent ?? null,
+        getContentElement: () => engineRef.current?.instance.contentComponent ?? null,
+    }), [animationDuration, keyboardZoomStep, resolvedMaxScale, resolvedMinScale, runProgrammatic]);
+    const userInteractionDisabled = disabled || readOnly;
+    const wheelActivation = wheel === 'modifier'
+        ? (keys) => !wheelTargetBlocksZoomRef.current && (keys.includes('Control') || keys.includes('Meta'))
+        : () => !wheelTargetBlocksZoomRef.current;
+    const defaultInstructions = wheel === 'modifier'
+        ? 'Use Control or Command with the mouse wheel to zoom. Use arrow keys to pan, plus or minus to zoom, and 0 to reset.'
+        : 'Use arrow keys to pan, plus or minus to zoom, and 0 to reset.';
+    const wheelHint = instructions ?? defaultInstructions;
+    const mergedViewportLabel = viewportProps?.['aria-label'] ?? ariaLabel;
+    const describedBy = [viewportProps?.['aria-describedby'], keyboard && !disabled ? instructionsId : null]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    return _jsxs("div", { ...props, className: ['inkra-pan-zoom', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-gestures": !userInteractionDisabled && (pan || pinch) || undefined, "data-read-only": readOnly || undefined, "data-wheel": wheel, style: style, children: [_jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-pan-zoom__surface", radius: 8, variant: "paper" }), _jsx("div", { className: "inkra-pan-zoom__clip", children: _jsx(TransformWrapper, { ref: engineRef, initialScale: initialTransform.scale, initialPositionX: initialTransform.x, initialPositionY: initialTransform.y, minScale: resolvedMinScale, maxScale: resolvedMaxScale, limitToBounds: limitToBounds, centerZoomedOut: centerZoomedOut, centerOnInit: centerOnInit, fitOnInit: fitOnInit, smooth: true, panning: {
+                        disabled: userInteractionDisabled || !pan,
+                        excluded: interactionExclusions,
+                        activationKeys: () => !pointerBlocksPanRef.current,
+                    }, pinch: { disabled: userInteractionDisabled || !pinch, excluded: interactionExclusions }, wheel: {
+                        disabled: userInteractionDisabled || wheel === 'disabled',
+                        activationKeys: wheelActivation,
+                        excluded: interactionExclusions,
+                    }, trackPadPanning: { disabled: true }, keyboard: {
+                        disabled: userInteractionDisabled || !keyboard,
+                        panStep: keyboardPanStep,
+                        zoomStep: keyboardZoomStep,
+                        animationTime: 100,
+                        excluded: interactionExclusions,
+                    }, doubleClick: { disabled: userInteractionDisabled || !doubleClickZoom, mode: 'zoomIn', excluded: interactionExclusions }, zoomAnimation: { disabled: false, animationTime: 200 }, velocityAnimation: { disabled: prefersReducedMotion(engineRef.current?.instance.wrapperComponent ?? null) }, onPanningStop: reconcileControlled, onPinchStop: reconcileControlled, onWheelStop: reconcileControlled, onZoomStop: reconcileControlled, onTransform: (_, state) => {
+                        const next = normalizedTransform({ x: state.positionX, y: state.positionY, scale: state.scale }, resolvedMinScale, resolvedMaxScale);
+                        committedRef.current = next;
+                        if (!controlled)
+                            setUncontrolledTransform(next);
+                        onTransformChange?.(next, { reason: programmaticRef.current ? 'programmatic' : 'gesture' });
+                    }, children: _jsx(TransformComponent, { wrapperClass: ['inkra-pan-zoom__viewport', viewportClassName].filter(Boolean).join(' '), contentClass: ['inkra-pan-zoom__content', contentClassName].filter(Boolean).join(' '), wrapperStyle: viewportStyle, contentStyle: contentStyle, wrapperProps: {
+                            ...viewportProps,
+                            role: viewportProps?.role ?? 'region',
+                            'aria-label': mergedViewportLabel,
+                            'aria-disabled': disabled || undefined,
+                            'aria-readonly': readOnly || undefined,
+                            'aria-describedby': describedBy,
+                            onPointerDownCapture: event => {
+                                pointerBlocksPanRef.current = Boolean(event.target.closest?.('[data-pan-zoom-no-drag]'));
+                                viewportProps?.onPointerDownCapture?.(event);
+                            },
+                            onPointerUpCapture: event => {
+                                pointerBlocksPanRef.current = false;
+                                viewportProps?.onPointerUpCapture?.(event);
+                            },
+                            onPointerCancelCapture: event => {
+                                pointerBlocksPanRef.current = false;
+                                viewportProps?.onPointerCancelCapture?.(event);
+                            },
+                            onWheelCapture: event => {
+                                wheelTargetBlocksZoomRef.current = Boolean(event.target.closest?.('[contenteditable], [data-pan-zoom-no-drag]'));
+                                viewportProps?.onWheelCapture?.(event);
+                            },
+                        }, contentProps: contentProps, children: children }) }) }), _jsx(PencilSurface, { "aria-hidden": "true", className: "inkra-pan-zoom__focus-ring", radius: 8, seed: "pan-zoom-focus", variant: "outline" }), keyboard && !disabled && _jsx("span", { className: "inkra-pan-zoom__instructions visually-hidden", id: instructionsId, children: wheelHint })] });
+}
+export const PanZoom = forwardRef(PanZoomRoot);

package/dist/pencil.d.ts

@@ -0,0 +1,10 @@
+export type PencilPoint = readonly [x: number, y: number];
+export interface PencilPathOptions {
+    seed: string | number;
+    width?: number;
+    height?: number;
+    points?: number;
+    roughness?: number;
+}
+export declare function createPencilPoints({ seed, width, height, points, roughness, }: PencilPathOptions): PencilPoint[];
+export declare function createPencilPath(options: PencilPathOptions): string;

package/dist/pencil.js

@@ -0,0 +1,39 @@
+function hashSeed(seed) {
+    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;
+}
+function createRandom(seed) {
+    let state = hashSeed(seed) || 0x6d2b79f5;
+    return () => {
+        state += 0x6d2b79f5;
+        let value = state;
+        value = Math.imul(value ^ (value >>> 15), value | 1);
+        value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+        return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+    };
+}
+export function createPencilPoints({ seed, width = 100, height = 8, points = 7, roughness = 1, }) {
+    const random = createRandom(seed);
+    const safeWidth = Math.max(1, width);
+    const safeHeight = Math.max(1, height);
+    const pointCount = Math.max(2, Math.floor(points));
+    const center = safeHeight / 2;
+    const amplitude = Math.min(safeHeight * 0.32, Math.max(0, roughness));
+    return Array.from({ length: pointCount }, (_, index) => {
+        const progress = index / (pointCount - 1);
+        const xJitter = index === 0 || index === pointCount - 1 ? 0 : (random() - 0.5) * 1.4;
+        const yJitter = (random() - 0.5) * 2 * amplitude;
+        return [progress * safeWidth + xJitter, center + yJitter];
+    });
+}
+export function createPencilPath(options) {
+    const points = createPencilPoints(options);
+    return points
+        .map(([x, y], index) => `${index === 0 ? 'M' : 'L'} ${x.toFixed(2)} ${y.toFixed(2)}`)
+        .join(' ');
+}

package/dist/radar/index.d.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type RadarKey = string | number;
+export interface RadarAxis {
+    id: RadarKey;
+    label: ReactNode;
+    min?: number;
+    max?: number;
+    ariaLabel?: string;
+    formatValue?: (value: number) => string;
+}
+export interface RadarPoint {
+    axisId: RadarKey;
+    value?: number | null;
+    label?: ReactNode;
+}
+export interface RadarSeries {
+    id: RadarKey;
+    label: ReactNode;
+    data: readonly RadarPoint[];
+    color?: string;
+    pattern?: 'solid' | 'dash' | 'dot';
+    hidden?: boolean;
+}
+export interface RadarValueContext {
+    axis: RadarAxis;
+    series: RadarSeries;
+    point: RadarPoint;
+    value: number | null;
+    missing: boolean;
+}
+export interface RadarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    axes: readonly RadarAxis[];
+    series: readonly RadarSeries[];
+    label: ReactNode;
+    description?: ReactNode;
+    size?: number | string;
+    maxRadius?: number;
+    levels?: number;
+    showAxes?: boolean;
+    showLabels?: boolean;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showTable?: boolean;
+    legendLabel?: ReactNode;
+    missingLabel?: string;
+    emptyMessage?: ReactNode;
+    selectedSeries?: RadarKey | null;
+    defaultSelectedSeries?: RadarKey | null;
+    onSelectedSeriesChange?: (id: RadarKey | null, series: RadarSeries | null) => void;
+    renderAxisLabel?: (axis: RadarAxis) => ReactNode;
+    renderValueLabel?: (context: RadarValueContext) => ReactNode;
+    getValueLabel?: (value: number, axis: RadarAxis) => string;
+}
+export declare const Radar: import("react").ForwardRefExoticComponent<RadarProps & import("react").RefAttributes<HTMLDivElement>>;