@inkra/react 0.1.0 → 0.3.0

package/dist/overlay/Overlay.js

@@ -8,7 +8,7 @@ import { PencilLine } from '../PencilLine.js';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
 import { Tooltip } from '../tooltip/Tooltip.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -20,13 +20,15 @@ export const OverlayTrigger = forwardRef(function OverlayTrigger(props, forwarde
     return _jsx(DialogPrimitive.Trigger, { ...props, ref: ref });
 });
 export function OverlayPortal({ children, ...props }) {
-    return (_jsx(DialogPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(DialogPrimitive.Portal, { ...props, children: child }));
 }
 export const OverlayBackdrop = forwardRef(function OverlayBackdrop({ className, ...props }, ref) {
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Overlay, { ...props, className: classes('inkra-overlay__backdrop', className), ref: ref }));
 });
 export const OverlayContent = forwardRef(function OverlayContent({ children, className, layout = 'plain', seed, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsx(DialogPrimitive.Content, { ...props, className: classes('inkra-overlay__content', className), "data-layout": layout, ref: ref, children: _jsx(PencilSurface, { className: classes('inkra-overlay__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-overlay-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-overlay__content-body", children: children }) }) }));
 });
 export const OverlayTitle = forwardRef(function OverlayTitle({ children, className, seed, ...props }, ref) {

package/dist/overlay/Popover.d.ts

@@ -8,7 +8,7 @@ export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Po
 export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
 export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 export type PopoverPortalProps = PopoverPrimitive.PopoverPortalProps;
-export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").JSX.Element;
+export declare function PopoverPortal({ children, ...props }: PopoverPortalProps): import("react").ReactNode;
 export interface PopoverContentProps extends PopoverPrimitive.PopoverContentProps {
     arrowProps?: PopoverArrowProps;
     seed?: string | number;

package/dist/overlay/Popover.js

@@ -3,7 +3,7 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { forwardRef, useId } from 'react';
 import { PencilSurface } from '../PencilSurface.js';
 import { PencilText } from '../PencilText.js';
-import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from './themeBridge.js';
+import { mapPortalChildren, PortalThemeProvider, usePortalThemeProps, usePortalTriggerRef, } from './themeBridge.js';
 function classes(...values) {
     return values.filter(Boolean).join(' ');
 }
@@ -16,10 +16,11 @@ export const PopoverTrigger = forwardRef(function PopoverTrigger(props, forwarde
     return _jsx(PopoverPrimitive.Trigger, { ...props, ref: ref });
 });
 export function PopoverPortal({ children, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+    return mapPortalChildren(children, child => _jsx(PopoverPrimitive.Portal, { ...props, children: child }));
 }
 export const PopoverContent = forwardRef(function PopoverContent({ arrowProps, children, className, seed, showArrow = false, surfaceClassName, surfaceRadius = 8, surfaceVariant = 'paper', ...props }, ref) {
     const id = useId();
+    props = usePortalThemeProps(props);
     return (_jsxs(PopoverPrimitive.Content, { ...props, className: classes('inkra-popover__content', className), ref: ref, children: [_jsx(PencilSurface, { className: classes('inkra-popover__surface', surfaceClassName), radius: surfaceRadius, seed: seed ?? `inkra-popover-${id}`, variant: surfaceVariant, children: _jsx("div", { className: "inkra-popover__content-body", children: children }) }), showArrow ? (_jsx(PopoverPrimitive.Arrow, { ...arrowProps, className: classes('inkra-popover__arrow', arrowProps?.className) })) : null] }));
 });
 export const PopoverTitle = forwardRef(function PopoverTitle({ children, className, seed, ...props }, ref) {

package/dist/overlay/themeBridge.d.ts

@@ -1,8 +1,19 @@
-import type { ForwardedRef, ReactNode } from 'react';
+import type { CSSProperties, ForwardedRef, HTMLAttributes, ReactNode } from 'react';
+type InkraStyle = CSSProperties & Record<`--inkra-${string}`, string>;
 export declare function PortalThemeProvider({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function usePortalTriggerRef<Element extends HTMLElement>(forwardedRef: ForwardedRef<Element>): (node: Element | null) => void;
+export declare function mapPortalChildren(children: ReactNode, render: (child: ReactNode) => ReactNode): ReactNode;
+export declare function usePortalThemeProps<Props extends HTMLAttributes<HTMLElement>>(props: Props): {
+    'data-inkra-theme': string | undefined;
+    'data-theme': string | undefined;
+    dir: "ltr" | "rtl";
+    lang: string | undefined;
+} & Props & {
+    style: InkraStyle;
+};
 export declare const PortalThemeBridge: import("react").ForwardRefExoticComponent<{
     children: ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/overlay/themeBridge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { Children, Fragment, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
 const emptySnapshot = {
     direction: 'ltr',
     style: {},
@@ -86,6 +86,32 @@ export function usePortalTriggerRef(forwardedRef) {
         captureTrigger?.(node);
     }, [captureTrigger, forwardedRef]);
 }
+// Presence must receive each animated DOM node, not a display:contents wrapper.
+export function mapPortalChildren(children, render) {
+    return Children.map(children, child => {
+        if (isValidElement(child) && child.type === Fragment) {
+            return mapPortalChildren(child.props.children, render);
+        }
+        return child == null ? null : render(child);
+    });
+}
+export function usePortalThemeProps(props) {
+    const context = useContext(PortalThemeContext);
+    const depth = context?.depth ?? 0;
+    const snapshot = context?.snapshot ?? emptySnapshot;
+    return {
+        'data-inkra-theme': snapshot.inkraTheme,
+        'data-theme': snapshot.theme,
+        dir: snapshot.direction,
+        lang: snapshot.language,
+        ...props,
+        style: {
+            ...snapshot.style,
+            '--inkra-floating-layer-offset': `${depth * 20}`,
+            ...props.style,
+        },
+    };
+}
 export const PortalThemeBridge = forwardRef(function PortalThemeBridge({ children }, ref) {
     const context = useContext(PortalThemeContext);
     const depth = context?.depth ?? 0;

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/radar/index.d.ts

@@ -0,0 +1,56 @@
+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;
+    tableCaption?: ReactNode;
+    seriesLabel?: 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>>;