@inkra/react 0.0.0-stage → 0.2.0

package/dist/image-cropper/model.js

@@ -0,0 +1,94 @@
+export class ImageCropperExportError extends Error {
+    constructor(code, message, options) {
+        super(message);
+        this.name = 'ImageCropperExportError';
+        this.code = code;
+        this.cause = options?.cause;
+    }
+}
+export const IMAGE_CROPPER_MAX_OUTPUT_EDGE = 8192;
+export const IMAGE_CROPPER_MAX_OUTPUT_PIXELS = 33554432;
+export const IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS = 16777216;
+const EXPORT_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp']);
+function finitePositive(value, fallback, maximum) {
+    if (value === undefined)
+        return fallback;
+    if (!Number.isFinite(value) || value <= 0)
+        return fallback;
+    return Math.min(maximum, value);
+}
+export function clampImageCropperArea(area, naturalSize) {
+    const naturalWidth = Math.max(0, Math.floor(naturalSize.width));
+    const naturalHeight = Math.max(0, Math.floor(naturalSize.height));
+    const x = Math.min(naturalWidth, Math.max(0, Math.round(area.x)));
+    const y = Math.min(naturalHeight, Math.max(0, Math.round(area.y)));
+    const width = Math.min(naturalWidth - x, Math.max(0, Math.round(area.width)));
+    const height = Math.min(naturalHeight - y, Math.max(0, Math.round(area.height)));
+    return { x, y, width, height };
+}
+export function resolveImageCropperOutputSize(area, options = {}) {
+    const sourceWidth = Math.floor(area.width);
+    const sourceHeight = Math.floor(area.height);
+    if (sourceWidth < 1 || sourceHeight < 1) {
+        throw new ImageCropperExportError('invalid-selection', 'The crop selection has no exportable pixels.');
+    }
+    const maxWidth = finitePositive(options.maxWidth, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_EDGE);
+    const maxHeight = finitePositive(options.maxHeight, IMAGE_CROPPER_MAX_OUTPUT_EDGE, IMAGE_CROPPER_MAX_OUTPUT_EDGE);
+    const maxPixels = finitePositive(options.maxPixels, IMAGE_CROPPER_DEFAULT_OUTPUT_PIXELS, IMAGE_CROPPER_MAX_OUTPUT_PIXELS);
+    const upscaleLimit = options.allowUpscale ? Number.POSITIVE_INFINITY : 1;
+    const scale = Math.min(upscaleLimit, maxWidth / sourceWidth, maxHeight / sourceHeight, Math.sqrt(maxPixels / (sourceWidth * sourceHeight)));
+    return {
+        width: Math.max(1, Math.floor(sourceWidth * scale)),
+        height: Math.max(1, Math.floor(sourceHeight * scale)),
+    };
+}
+function exportError(error) {
+    if (error instanceof ImageCropperExportError)
+        return error;
+    if (error instanceof DOMException && error.name === 'SecurityError') {
+        return new ImageCropperExportError('cors', 'The image can be displayed, but its server did not permit canvas export. Configure CORS or use a same-origin Blob.', { cause: error });
+    }
+    return new ImageCropperExportError('canvas', 'The browser could not render the crop to a canvas.', { cause: error });
+}
+export async function exportImageCrop(image, area, options = {}) {
+    if (!image.complete || image.naturalWidth < 1 || image.naturalHeight < 1) {
+        throw new ImageCropperExportError('image-not-ready', 'The image has not finished loading.');
+    }
+    const type = options.type ?? 'image/png';
+    if (!EXPORT_TYPES.has(type)) {
+        throw new ImageCropperExportError('unsupported-format', `Unsupported crop export format: ${String(type)}`);
+    }
+    const selection = clampImageCropperArea(area, {
+        width: image.naturalWidth,
+        height: image.naturalHeight,
+    });
+    const output = resolveImageCropperOutputSize(selection, options);
+    const canvas = document.createElement('canvas');
+    canvas.width = output.width;
+    canvas.height = output.height;
+    const context = canvas.getContext('2d');
+    if (!context)
+        throw new ImageCropperExportError('canvas', 'The browser did not provide a 2D canvas context.');
+    try {
+        context.drawImage(image, selection.x, selection.y, selection.width, selection.height, 0, 0, output.width, output.height);
+        const quality = options.quality === undefined
+            ? undefined
+            : Math.min(1, Math.max(0, options.quality));
+        const blob = await new Promise((resolve, reject) => {
+            try {
+                canvas.toBlob(value => value ? resolve(value) : reject(new ImageCropperExportError('canvas', 'Canvas export returned no image data.')), type, quality);
+            }
+            catch (error) {
+                reject(error);
+            }
+        });
+        return { blob, width: output.width, height: output.height, type };
+    }
+    catch (error) {
+        throw exportError(error);
+    }
+    finally {
+        canvas.width = 0;
+        canvas.height = 0;
+    }
+}

package/dist/image-viewer/index.d.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+import type { PanZoomWheelMode } from '../pan-zoom/index.js';
+import type { OverlayContentProps, OverlayRootProps, OverlayTriggerProps } from '../overlay/index.js';
+export interface ImageViewerItem {
+    id: string;
+    src: string;
+    alt: string;
+    thumbnailSrc?: string;
+    thumbnailAlt?: string;
+    width?: number;
+    height?: number;
+}
+export type ImageViewerChangeReason = 'previous' | 'next' | 'thumbnail' | 'home' | 'end' | 'items-change';
+export interface ImageViewerChangeDetails {
+    item: ImageViewerItem | null;
+    reason: ImageViewerChangeReason;
+}
+export interface ImageViewerRootProps extends Omit<OverlayRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
+    items: readonly ImageViewerItem[];
+    activeId?: string | null;
+    defaultActiveId?: string | null;
+    onActiveIdChange?: (activeId: string | null, details: ImageViewerChangeDetails) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    loop?: boolean;
+}
+export declare function ImageViewerRoot({ activeId, defaultActiveId, defaultOpen, items, loop, onActiveIdChange, onOpenChange, open, ...props }: ImageViewerRootProps): import("react").JSX.Element;
+export type ImageViewerTriggerProps = OverlayTriggerProps;
+export declare const ImageViewerTrigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ImageViewerLabels {
+    title: string;
+    description: string;
+    close: string;
+    previous: string;
+    next: string;
+    thumbnails: string;
+    imagePosition: (current: number, total: number) => string;
+    thumbnail: (item: ImageViewerItem, current: number, total: number) => string;
+    failedTitle: string;
+    failedDescription: (item: ImageViewerItem) => string;
+    retry: string;
+    zoomIn: string;
+    zoomOut: string;
+    resetZoom: string;
+    rotate: string;
+    panZoom: (item: ImageViewerItem) => string;
+    emptyTitle: string;
+    emptyDescription: string;
+}
+export interface ImageViewerImageRenderProps {
+    alt: string;
+    className: string;
+    height?: number;
+    key: string;
+    onError: () => void;
+    onLoad: () => void;
+    src: string;
+    width?: number;
+}
+export interface ImageViewerContentProps extends Omit<OverlayContentProps, 'children' | 'layout'> {
+    labels?: Partial<ImageViewerLabels>;
+    showThumbnails?: boolean;
+    renderImage?: (item: ImageViewerItem, props: ImageViewerImageRenderProps) => ReactNode;
+    emptyState?: ReactNode;
+    zoomable?: boolean;
+    rotatable?: boolean;
+    minScale?: number;
+    maxScale?: number;
+    wheel?: PanZoomWheelMode;
+}
+export declare const ImageViewerContent: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageViewer: Readonly<{
+    Root: typeof ImageViewerRoot;
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Content: import("react").ForwardRefExoticComponent<ImageViewerContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;
+export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
+export type { ImageViewerIdentifiable, ImageViewerSelection } from './model.js';

package/dist/image-viewer/index.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { __iconData as chevronLeftIcon } from 'lucide-react/dist/esm/icons/chevron-left.mjs';
+import { __iconData as chevronRightIcon } from 'lucide-react/dist/esm/icons/chevron-right.mjs';
+import { __iconData as imageOffIcon } from 'lucide-react/dist/esm/icons/image-off.mjs';
+import { __iconData as rotateIcon } from 'lucide-react/dist/esm/icons/rotate-cw.mjs';
+import { __iconData as zoomInIcon } from 'lucide-react/dist/esm/icons/zoom-in.mjs';
+import { __iconData as zoomOutIcon } from 'lucide-react/dist/esm/icons/zoom-out.mjs';
+import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PanZoom } from '../pan-zoom/index.js';
+import { OverlayBackdrop, OverlayContent, OverlayDescription, OverlayHeader, OverlayPortal, OverlayRoot, OverlayTitle, OverlayTrigger, } from '../overlay/index.js';
+import { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';
+const chevronLeftPaths = chevronLeftIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const chevronRightPaths = chevronRightIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const imageOffPaths = imageOffIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const rotatePaths = rotateIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const zoomInPaths = zoomInIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const zoomOutPaths = zoomOutIcon.node.map(([, attributes]) => ({ d: attributes.d }));
+const ImageViewerContext = createContext(null);
+function useImageViewerContext() {
+    const context = useContext(ImageViewerContext);
+    if (!context)
+        throw new Error('ImageViewer components must be used inside ImageViewer.Root.');
+    return context;
+}
+export function ImageViewerRoot({ activeId, defaultActiveId, defaultOpen = false, items, loop = true, onActiveIdChange, onOpenChange, open, ...props }) {
+    const activeControlled = activeId !== undefined;
+    const openControlled = open !== undefined;
+    const [internalActiveId, setInternalActiveId] = useState(defaultActiveId ?? items[0]?.id ?? null);
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const previousIndexRef = useRef(0);
+    const repairRef = useRef('');
+    const requestedId = activeControlled ? activeId : internalActiveId;
+    const selection = resolveImageViewerSelection(items, requestedId, previousIndexRef.current);
+    if (selection.index >= 0)
+        previousIndexRef.current = selection.index;
+    const commitActiveId = useCallback((nextId, reason) => {
+        if (!activeControlled)
+            setInternalActiveId(nextId);
+        onActiveIdChange?.(nextId, {
+            item: items.find(item => item.id === nextId) ?? null,
+            reason,
+        });
+    }, [activeControlled, items, onActiveIdChange]);
+    useEffect(() => {
+        if (requestedId === selection.activeId) {
+            repairRef.current = '';
+            return;
+        }
+        const repairKey = `${String(requestedId)}:${String(selection.activeId)}:${items.map(item => item.id).join('|')}`;
+        if (repairRef.current === repairKey)
+            return;
+        repairRef.current = repairKey;
+        commitActiveId(selection.activeId, 'items-change');
+    }, [commitActiveId, items, requestedId, selection.activeId]);
+    const selectIndex = useCallback((index, reason) => {
+        if (items.length === 0)
+            return;
+        const nextIndex = Math.min(Math.max(0, index), items.length - 1);
+        if (items[nextIndex].id !== selection.activeId)
+            commitActiveId(items[nextIndex].id, reason);
+    }, [commitActiveId, items, selection.activeId]);
+    const step = useCallback((direction) => {
+        const nextIndex = nextImageViewerIndex(items.length, selection.index, direction, loop);
+        if (nextIndex !== selection.index)
+            selectIndex(nextIndex, direction < 0 ? 'previous' : 'next');
+    }, [items.length, loop, selectIndex, selection.index]);
+    const context = useMemo(() => ({
+        items,
+        activeItem: selection.index < 0 ? null : items[selection.index],
+        activeIndex: selection.index,
+        loop,
+        selectIndex,
+        step,
+    }), [items, loop, selectIndex, selection.index, step]);
+    return (_jsx(ImageViewerContext.Provider, { value: context, children: _jsx(OverlayRoot, { ...props, open: openControlled ? open : internalOpen, onOpenChange: (nextOpen) => {
+                if (!openControlled)
+                    setInternalOpen(nextOpen);
+                onOpenChange?.(nextOpen);
+            } }) }));
+}
+export const ImageViewerTrigger = forwardRef(function ImageViewerTrigger(props, ref) {
+    return _jsx(OverlayTrigger, { ...props, ref: ref });
+});
+const defaultLabels = {
+    title: 'Image viewer',
+    description: 'Use the previous and next controls or arrow keys to browse images.',
+    close: 'Close image viewer',
+    previous: 'Previous image',
+    next: 'Next image',
+    thumbnails: 'Image thumbnails',
+    imagePosition: (current, total) => `${current} of ${total}`,
+    thumbnail: (item, current, total) => `Show ${item.alt}, ${current} of ${total}`,
+    failedTitle: 'Image unavailable',
+    failedDescription: item => `${item.alt} could not be loaded.`,
+    retry: 'Retry',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    resetZoom: 'Reset zoom',
+    rotate: 'Rotate clockwise',
+    panZoom: item => `Pan and zoom ${item.alt}`,
+    emptyTitle: 'No images',
+    emptyDescription: 'There are no images to show.',
+};
+function directionFor(node) {
+    return getComputedStyle(node).direction === 'rtl' ? 'rtl' : 'ltr';
+}
+export const ImageViewerContent = forwardRef(function ImageViewerContent({ className, emptyState, labels: labelOverrides, onOpenAutoFocus, renderImage, rotatable = false, showThumbnails = true, zoomable = true, minScale = 0.5, maxScale = 6, wheel = 'modifier', ...props }, forwardedRef) {
+    const { activeIndex, activeItem, items, loop, selectIndex, step } = useImageViewerContext();
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const stageRef = useRef(null);
+    const thumbnailRefs = useRef(new Map());
+    const panZoomRef = useRef(null);
+    const [failedIds, setFailedIds] = useState(() => new Set());
+    const [attempts, setAttempts] = useState({});
+    const [rotation, setRotation] = useState(0);
+    const total = items.length;
+    const atStart = activeIndex <= 0;
+    const atEnd = activeIndex >= total - 1;
+    useEffect(() => {
+        if (activeItem)
+            thumbnailRefs.current.get(activeItem.id)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        setRotation(0);
+    }, [activeItem]);
+    const handleStageKeyDown = (event) => {
+        if (event.target !== event.currentTarget)
+            return;
+        const rtl = directionFor(event.currentTarget) === 'rtl';
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            step(rtl ? 1 : -1);
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            step(rtl ? -1 : 1);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            selectIndex(0, 'home');
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            selectIndex(total - 1, 'end');
+        }
+    };
+    const selectThumbnail = (index, reason = 'thumbnail') => {
+        selectIndex(index, reason);
+        const item = items[index];
+        if (item)
+            requestAnimationFrame(() => thumbnailRefs.current.get(item.id)?.focus());
+    };
+    const renderDefaultImage = (item, { key, ...imageProps }) => (_jsx("img", { ...imageProps, draggable: false }, key));
+    const failed = activeItem ? failedIds.has(activeItem.id) : false;
+    const imageProps = activeItem ? {
+        alt: activeItem.alt,
+        className: 'inkra-image-viewer__image',
+        height: activeItem.height,
+        key: `${activeItem.id}:${attempts[activeItem.id] ?? 0}`,
+        onError: () => setFailedIds(current => new Set(current).add(activeItem.id)),
+        onLoad: () => setFailedIds(current => {
+            if (!current.has(activeItem.id))
+                return current;
+            const next = new Set(current);
+            next.delete(activeItem.id);
+            return next;
+        }),
+        src: activeItem.src,
+        width: activeItem.width,
+    } : null;
+    return (_jsxs(OverlayPortal, { children: [_jsx(OverlayBackdrop, {}), _jsxs(OverlayContent, { ...props, className: ['inkra-image-viewer', className].filter(Boolean).join(' '), layout: "sections", onOpenAutoFocus: (event) => {
+                    onOpenAutoFocus?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    event.preventDefault();
+                    stageRef.current?.focus();
+                }, ref: forwardedRef, surfaceRadius: 8, children: [_jsxs(OverlayHeader, { closeLabel: labels.close, children: [_jsx(OverlayTitle, { children: labels.title }), _jsx(OverlayDescription, { className: "inkra-image-viewer__description", children: labels.description }), total > 0 ? _jsx(PencilText, { as: "span", className: "inkra-image-viewer__counter", children: labels.imagePosition(activeIndex + 1, total) }) : null] }), _jsx("div", { className: "inkra-image-viewer__body", children: activeItem && imageProps ? _jsx(_Fragment, { children: _jsxs("div", { "aria-label": activeItem.alt, className: "inkra-image-viewer__stage", onKeyDown: handleStageKeyDown, ref: stageRef, tabIndex: 0, children: [failed ? _jsxs("div", { className: "inkra-image-viewer__state", role: "alert", children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.failedTitle }), _jsx(PencilText, { as: "p", children: labels.failedDescription(activeItem) }), _jsx(Button, { variant: "outline", onClick: () => {
+                                                    const failedId = activeItem.id;
+                                                    setFailedIds(current => {
+                                                        const next = new Set(current);
+                                                        next.delete(failedId);
+                                                        return next;
+                                                    });
+                                                    setAttempts(current => ({ ...current, [failedId]: (current[failedId] ?? 0) + 1 }));
+                                                }, children: labels.retry })] }) : _jsx(PanZoom, { "aria-label": labels.panZoom(activeItem), centerOnInit: true, className: "inkra-image-viewer__pan-zoom", fitOnInit: "contain", keyboard: zoomable, maxScale: maxScale, minScale: minScale, pan: zoomable, pinch: zoomable, readOnly: !zoomable, ref: panZoomRef, wheel: zoomable ? wheel : 'disabled', children: _jsx("div", { className: "inkra-image-viewer__image-transform", style: { transform: `rotate(${rotation}deg)` }, children: (renderImage ?? renderDefaultImage)(activeItem, imageProps) }) }, activeItem.id), !failed && (zoomable || rotatable) ? _jsxs("div", { className: "inkra-image-viewer__tools", role: "group", "aria-label": labels.panZoom(activeItem), "data-pan-zoom-no-drag": true, children: [zoomable ? _jsxs(_Fragment, { children: [_jsx(Button, { "aria-label": labels.zoomOut, onClick: () => void panZoomRef.current?.zoomOut(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomOutPaths, size: 24, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.resetZoom, onClick: () => void panZoomRef.current?.reset(), size: "sm", variant: "outline", children: "100%" }), _jsx(Button, { "aria-label": labels.zoomIn, onClick: () => void panZoomRef.current?.zoomIn(), size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: zoomInPaths, size: 24, sourceSize: 24 }) })] }) : null, rotatable ? _jsx(Button, { "aria-label": labels.rotate, onClick: () => {
+                                                    setRotation(current => (current + 90) % 360);
+                                                    requestAnimationFrame(() => void panZoomRef.current?.fit({ mode: 'contain' }));
+                                                }, size: "icon-sm", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: rotatePaths, size: 24, sourceSize: 24 }) }) : null] }) : null, total > 1 ? _jsxs("div", { className: "inkra-image-viewer__navigation", children: [_jsx(Button, { "aria-label": labels.previous, className: "inkra-image-viewer__previous", disabled: !loop && atStart, onClick: () => step(-1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronLeftPaths, size: 30, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.next, className: "inkra-image-viewer__next", disabled: !loop && atEnd, onClick: () => step(1), size: "icon", variant: "outline", children: _jsx(PencilIcon, { decorative: true, paths: chevronRightPaths, size: 30, sourceSize: 24 }) })] }) : null] }) }) : _jsx("div", { className: "inkra-image-viewer__state", ref: stageRef, tabIndex: 0, children: emptyState ?? _jsxs(_Fragment, { children: [_jsx(PencilIcon, { decorative: true, paths: imageOffPaths, size: 48, sourceSize: 24 }), _jsx(PencilText, { as: "h3", children: labels.emptyTitle }), _jsx(PencilText, { as: "p", children: labels.emptyDescription })] }) }) }), showThumbnails && total > 1 ? _jsx("div", { "aria-label": labels.thumbnails, className: "inkra-image-viewer__thumbnails", role: "listbox", children: items.map((item, index) => {
+                            const selected = index === activeIndex;
+                            return _jsxs("button", { "aria-label": labels.thumbnail(item, index + 1, total), "aria-selected": selected, className: "inkra-image-viewer__thumbnail", onClick: () => selectIndex(index, 'thumbnail'), onKeyDown: (event) => {
+                                    const rtl = directionFor(event.currentTarget) === 'rtl';
+                                    let nextIndex = index;
+                                    if (event.key === 'ArrowLeft')
+                                        nextIndex = nextImageViewerIndex(total, index, rtl ? 1 : -1, loop);
+                                    else if (event.key === 'ArrowRight')
+                                        nextIndex = nextImageViewerIndex(total, index, rtl ? -1 : 1, loop);
+                                    else if (event.key === 'Home')
+                                        nextIndex = 0;
+                                    else if (event.key === 'End')
+                                        nextIndex = total - 1;
+                                    else
+                                        return;
+                                    event.preventDefault();
+                                    selectThumbnail(nextIndex, event.key === 'Home' ? 'home' : event.key === 'End' ? 'end' : 'thumbnail');
+                                }, ref: (node) => {
+                                    if (node)
+                                        thumbnailRefs.current.set(item.id, node);
+                                    else
+                                        thumbnailRefs.current.delete(item.id);
+                                }, role: "option", tabIndex: selected ? 0 : -1, type: "button", children: [_jsx(PencilSurface, { as: "span", className: "inkra-image-viewer__thumbnail-surface", radius: 6, variant: selected ? 'selection' : 'outline', children: _jsx("img", { alt: "", className: "inkra-image-viewer__thumbnail-image", draggable: false, src: item.thumbnailSrc ?? item.src }) }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-image-viewer__thumbnail-focus", radius: 6, variant: "outline" })] }, item.id);
+                        }) }) : null] })] }));
+});
+export const ImageViewer = Object.freeze({
+    Root: ImageViewerRoot,
+    Trigger: ImageViewerTrigger,
+    Content: ImageViewerContent,
+});
+export { nextImageViewerIndex, resolveImageViewerSelection } from './model.js';

package/dist/image-viewer/model.d.ts

@@ -0,0 +1,9 @@
+export interface ImageViewerIdentifiable {
+    id: string;
+}
+export interface ImageViewerSelection {
+    activeId: string | null;
+    index: number;
+}
+export declare function resolveImageViewerSelection(items: readonly ImageViewerIdentifiable[], requestedId: string | null | undefined, previousIndex?: number): ImageViewerSelection;
+export declare function nextImageViewerIndex(length: number, index: number, direction: -1 | 1, loop: boolean): number;

package/dist/image-viewer/model.js

@@ -0,0 +1,18 @@
+export function resolveImageViewerSelection(items, requestedId, previousIndex = 0) {
+    if (items.length === 0)
+        return { activeId: null, index: -1 };
+    const requestedIndex = requestedId == null ? -1 : items.findIndex(item => item.id === requestedId);
+    const index = requestedIndex >= 0
+        ? requestedIndex
+        : Math.min(Math.max(0, previousIndex), items.length - 1);
+    return { activeId: items[index].id, index };
+}
+export function nextImageViewerIndex(length, index, direction, loop) {
+    if (length <= 0)
+        return -1;
+    const current = Math.min(Math.max(0, index), length - 1);
+    const next = current + direction;
+    if (loop)
+        return (next + length) % length;
+    return Math.min(Math.max(0, next), length - 1);
+}

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+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 * from './toast/index.js';
+export * from './empty/index.js';
+export * from './toggle-group/index.js';
+export * from './alert-dialog/index.js';
+export * from './drawer/index.js';
+export * from './date-picker/index.js';
+export * from './time-picker/index.js';
+export * from './pagination/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+export * from './tree/index.js';
+export * from './upload/index.js';
+export * from './steps/index.js';
+export * from './timeline/index.js';
+export * from './layout/index.js';
+export * from './slot/index.js';
+export * from './log/index.js';
+export * from './hotkey/index.js';
+export * from './number-ticker/index.js';
+export * from './audio-player/index.js';
+export * from './carousel/index.js';
+export * from './choice-grid/index.js';
+export * from './color-picker/index.js';
+export * from './context-menu/index.js';
+export * from './dockable-panel/index.js';
+export * from './editable/index.js';
+export * from './flip/index.js';
+export * from './heatmap/index.js';
+export * from './hover-card/index.js';
+export * from './image-cropper/index.js';
+export * from './image-viewer/index.js';
+export * from './keypad/index.js';
+export * from './node-graph/index.js';
+export * from './overflow-list/index.js';
+export * from './pan-zoom/index.js';
+export * from './radar/index.js';
+export * from './range-slider/index.js';
+export * from './rating/index.js';
+export * from './resizable/index.js';
+export * from './scroll-area/index.js';
+export * from './sortable/index.js';
+export * from './sparkline/index.js';
+export * from './tag-input/index.js';
+export * from './transfer/index.js';
+export * from './tree-select/index.js';
+export * from './typewriter/index.js';
+export * from './virtual-list/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,69 @@
+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 * from './toast/index.js';
+export * from './empty/index.js';
+export * from './toggle-group/index.js';
+export * from './alert-dialog/index.js';
+export * from './drawer/index.js';
+export * from './date-picker/index.js';
+export * from './time-picker/index.js';
+export * from './pagination/index.js';
+export * from './command/index.js';
+export * from './data-table/index.js';
+export * from './tree/index.js';
+export * from './upload/index.js';
+export * from './steps/index.js';
+export * from './timeline/index.js';
+export * from './layout/index.js';
+export * from './slot/index.js';
+export * from './log/index.js';
+export * from './hotkey/index.js';
+export * from './number-ticker/index.js';
+export * from './audio-player/index.js';
+export * from './carousel/index.js';
+export * from './choice-grid/index.js';
+export * from './color-picker/index.js';
+export * from './context-menu/index.js';
+export * from './dockable-panel/index.js';
+export * from './editable/index.js';
+export * from './flip/index.js';
+export * from './heatmap/index.js';
+export * from './hover-card/index.js';
+export * from './image-cropper/index.js';
+export * from './image-viewer/index.js';
+export * from './keypad/index.js';
+export * from './node-graph/index.js';
+export * from './overflow-list/index.js';
+export * from './pan-zoom/index.js';
+export * from './radar/index.js';
+export * from './range-slider/index.js';
+export * from './rating/index.js';
+export * from './resizable/index.js';
+export * from './scroll-area/index.js';
+export * from './sortable/index.js';
+export * from './sparkline/index.js';
+export * from './tag-input/index.js';
+export * from './transfer/index.js';
+export * from './tree-select/index.js';
+export * from './typewriter/index.js';
+export * from './virtual-list/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>>;