@inkra/react 0.0.0-stage → 0.2.0

package/dist/typewriter/model.js

@@ -0,0 +1,45 @@
+const markPattern = /^\p{Mark}$/u;
+const punctuationPattern = /^\p{Punctuation}+$/u;
+const regionalIndicatorPattern = /^\p{Regional_Indicator}$/u;
+const emojiModifierPattern = /^\p{Emoji_Modifier}$/u;
+const tagPattern = /^[\u{E0020}-\u{E007F}]$/u;
+const variationSelectorPattern = /^[\uFE00-\uFE0F\u{E0100}-\u{E01EF}]$/u;
+const zeroWidthJoiner = '\u200D';
+function fallbackGraphemes(value) {
+    const clusters = [];
+    let regionalIndicators = 0;
+    for (const character of Array.from(value)) {
+        const previous = clusters[clusters.length - 1];
+        const joinsPrevious = previous !== undefined && (character === zeroWidthJoiner
+            || previous.endsWith(zeroWidthJoiner)
+            || markPattern.test(character)
+            || emojiModifierPattern.test(character)
+            || variationSelectorPattern.test(character)
+            || tagPattern.test(character)
+            || (regionalIndicatorPattern.test(character) && regionalIndicators % 2 === 1));
+        if (joinsPrevious)
+            clusters[clusters.length - 1] += character;
+        else
+            clusters.push(character);
+        if (regionalIndicatorPattern.test(character))
+            regionalIndicators += 1;
+        else
+            regionalIndicators = 0;
+    }
+    return clusters;
+}
+export function splitTypewriterGraphemes(value, locale) {
+    const Segmenter = Intl.Segmenter;
+    if (!Segmenter)
+        return fallbackGraphemes(value);
+    return Array.from(new Segmenter(locale, { granularity: 'grapheme' }).segment(value), item => item.segment);
+}
+export function isTypewriterPunctuation(grapheme) {
+    return punctuationPattern.test(grapheme);
+}
+function duration(value) {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+export function typewriterDelayAfter(grapheme, { speed, punctuationDelay }) {
+    return duration(speed) + (isTypewriterPunctuation(grapheme) ? duration(punctuationDelay) : 0);
+}

package/dist/upload/index.d.ts

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type InputHTMLAttributes } from 'react';
+export type UploadStatus = 'selected' | 'uploading' | 'success' | 'error' | 'cancelled';
+export interface UploadItem {
+    id: string;
+    file: File;
+    status: UploadStatus;
+    progress?: number;
+    error?: string;
+}
+export type UploadRejectionCode = 'accept' | 'max-size' | 'max-files' | 'custom';
+export interface UploadRejection {
+    file: File;
+    code: UploadRejectionCode;
+    message: string;
+}
+export type UploadChangeReason = 'add' | 'remove' | 'upload-start' | 'upload-progress' | 'upload-success' | 'upload-error' | 'cancel' | 'retry';
+export interface UploadChangeDetails {
+    reason: UploadChangeReason;
+    item?: UploadItem;
+}
+export interface UploadRequestContext {
+    signal: AbortSignal;
+    reportProgress: (progress: number) => void;
+}
+export interface UploadLabels {
+    browse: string;
+    drop: string;
+    selected: string;
+    upload: string;
+    uploading: string;
+    success: string;
+    error: string;
+    cancelled: string;
+    retry: string;
+    cancel: string;
+    remove: string;
+    rejected: string;
+    acceptError: string;
+    sizeError: (maxSize: number) => string;
+    countError: (maxFiles: number) => string;
+}
+export interface UploadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    accept?: string;
+    autoUpload?: boolean;
+    capture?: InputHTMLAttributes<HTMLInputElement>['capture'];
+    defaultFiles?: readonly UploadItem[];
+    disabled?: boolean;
+    files?: readonly UploadItem[];
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'accept' | 'capture' | 'disabled' | 'multiple' | 'name' | 'onChange' | 'type'>;
+    labels?: Partial<UploadLabels>;
+    maxFiles?: number;
+    maxSize?: number;
+    multiple?: boolean;
+    onFilesChange?: (files: readonly UploadItem[], details: UploadChangeDetails) => void;
+    onReject?: (rejections: readonly UploadRejection[]) => void;
+    onUpload?: (file: File, context: UploadRequestContext) => Promise<void> | void;
+    validate?: (file: File, acceptedFiles: readonly UploadItem[]) => string | undefined;
+}
+export declare const Upload: import("react").ForwardRefExoticComponent<UploadProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/upload/index.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { Progress } from '../display/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const uploadPaths = [
+    { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' },
+    { d: 'm17 8-5-5-5 5' },
+    { d: 'M12 3v12' },
+];
+const defaultLabels = {
+    browse: 'Choose files',
+    drop: 'or drop files here',
+    selected: 'Selected',
+    upload: 'Upload',
+    uploading: 'Uploading',
+    success: 'Uploaded',
+    error: 'Upload failed',
+    cancelled: 'Cancelled',
+    retry: 'Retry',
+    cancel: 'Cancel',
+    remove: 'Remove',
+    rejected: 'Files not added',
+    acceptError: 'This file type is not accepted.',
+    sizeError: maxSize => `File exceeds the ${formatBytes(maxSize)} limit.`,
+    countError: maxFiles => `Only ${maxFiles} file${maxFiles === 1 ? '' : 's'} may be selected.`,
+};
+function formatBytes(value) {
+    if (value < 1024)
+        return `${value} B`;
+    if (value < 1024 * 1024)
+        return `${Math.round(value / 1024)} KB`;
+    return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}
+function matchesAccept(file, accept) {
+    if (!accept?.trim())
+        return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.split(',').some(value => {
+        const rule = value.trim().toLowerCase();
+        if (!rule)
+            return false;
+        if (rule.startsWith('.'))
+            return name.endsWith(rule);
+        if (rule.endsWith('/*'))
+            return type.startsWith(rule.slice(0, -1));
+        return type === rule;
+    });
+}
+function asErrorMessage(error, fallback) {
+    return error instanceof Error && error.message ? error.message : fallback;
+}
+function statusLabel(status, labels) {
+    return labels[status];
+}
+export const Upload = forwardRef(function Upload({ accept, autoUpload = true, capture, className, defaultFiles = [], disabled = false, files, inputProps, labels: labelOverrides, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, multiple = true, onFilesChange, onReject, onUpload, validate, ...props }, ref) {
+    const instanceId = useId();
+    const inputRef = useRef(null);
+    const itemCounter = useRef(0);
+    const controllers = useRef(new Map());
+    const mounted = useRef(true);
+    const disabledRef = useRef(disabled);
+    const [internalFiles, setInternalFiles] = useState(defaultFiles);
+    const [rejections, setRejections] = useState([]);
+    const [dragActive, setDragActive] = useState(false);
+    const controlled = files !== undefined;
+    const items = files ?? internalFiles;
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    disabledRef.current = disabled;
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const commitRef = useRef(() => { });
+    const commit = (next, details) => {
+        if (!controlled) {
+            itemsRef.current = next;
+            setInternalFiles(next);
+        }
+        onFilesChange?.(next, details);
+    };
+    commitRef.current = commit;
+    const updateItem = (id, update, details) => {
+        const current = itemsRef.current;
+        const index = current.findIndex(item => item.id === id);
+        if (index < 0)
+            return;
+        const next = [...current];
+        next[index] = update(current[index]);
+        commitRef.current(next, { ...details, item: next[index] });
+    };
+    const startUpload = (id, reason = 'upload-start') => {
+        const item = itemsRef.current.find(candidate => candidate.id === id);
+        if (!item || !onUpload || disabledRef.current)
+            return;
+        controllers.current.get(id)?.controller.abort();
+        const controller = new AbortController();
+        const token = Symbol(id);
+        controllers.current.set(id, { controller, token });
+        updateItem(id, current => ({ ...current, status: 'uploading', progress: 0, error: undefined }), { reason });
+        const reportProgress = (progress) => {
+            const active = controllers.current.get(id);
+            if (!active || active.token !== token || controller.signal.aborted)
+                return;
+            const normalized = Math.min(100, Math.max(0, Number.isFinite(progress) ? progress : 0));
+            updateItem(id, current => ({ ...current, status: 'uploading', progress: normalized }), { reason: 'upload-progress' });
+        };
+        Promise.resolve().then(() => {
+            if (!mounted.current || controller.signal.aborted)
+                return undefined;
+            return onUpload(item.file, { signal: controller.signal, reportProgress });
+        }).then(() => {
+            const active = controllers.current.get(id);
+            if (!active || active.token !== token || controller.signal.aborted)
+                return;
+            controllers.current.delete(id);
+            updateItem(id, current => ({ ...current, status: 'success', progress: 100, error: undefined }), { reason: 'upload-success' });
+        }).catch(error => {
+            const active = controllers.current.get(id);
+            if (!active || active.token !== token || controller.signal.aborted)
+                return;
+            controllers.current.delete(id);
+            updateItem(id, current => ({ ...current, status: 'error', progress: undefined, error: asErrorMessage(error, labels.error) }), { reason: 'upload-error' });
+        });
+    };
+    const addFiles = (incoming) => {
+        if (disabled || incoming.length === 0)
+            return;
+        const accepted = [];
+        const rejected = [];
+        const limit = multiple ? Math.max(0, maxFiles) : Math.min(1, Math.max(0, maxFiles));
+        let available = Math.max(0, limit - itemsRef.current.length);
+        for (const file of incoming) {
+            if (!matchesAccept(file, accept)) {
+                rejected.push({ file, code: 'accept', message: labels.acceptError });
+                continue;
+            }
+            if (file.size > maxSize) {
+                rejected.push({ file, code: 'max-size', message: labels.sizeError(maxSize) });
+                continue;
+            }
+            if (available <= 0) {
+                rejected.push({ file, code: 'max-files', message: labels.countError(limit) });
+                continue;
+            }
+            const provisional = {
+                id: `${instanceId.replace(/:/g, '')}-${itemCounter.current++}`,
+                file,
+                status: 'selected',
+            };
+            const customError = validate?.(file, [...itemsRef.current, ...accepted]);
+            if (customError) {
+                rejected.push({ file, code: 'custom', message: customError });
+                continue;
+            }
+            accepted.push(provisional);
+            available -= 1;
+        }
+        setRejections(rejected);
+        if (rejected.length)
+            onReject?.(rejected);
+        if (!accepted.length)
+            return;
+        commitRef.current([...itemsRef.current, ...accepted], { reason: 'add', item: accepted[accepted.length - 1] });
+        if (onUpload && autoUpload)
+            accepted.forEach(item => {
+                queueMicrotask(() => {
+                    if (!mounted.current || disabledRef.current)
+                        return;
+                    if (itemsRef.current.some(candidate => candidate.id === item.id))
+                        startUpload(item.id);
+                });
+            });
+    };
+    const remove = (id) => {
+        if (disabled)
+            return;
+        controllers.current.get(id)?.controller.abort();
+        controllers.current.delete(id);
+        const item = itemsRef.current.find(candidate => candidate.id === id);
+        commitRef.current(itemsRef.current.filter(candidate => candidate.id !== id), { reason: 'remove', item });
+    };
+    const cancel = (id) => {
+        if (disabled)
+            return;
+        controllers.current.get(id)?.controller.abort();
+        controllers.current.delete(id);
+        updateItem(id, item => ({ ...item, status: 'cancelled', progress: undefined, error: undefined }), { reason: 'cancel' });
+    };
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            controllers.current.forEach(active => active.controller.abort());
+            controllers.current.clear();
+        };
+    }, []);
+    useEffect(() => {
+        const activeIds = new Set(items.map(item => item.id));
+        controllers.current.forEach((active, id) => {
+            if (!activeIds.has(id)) {
+                active.controller.abort();
+                controllers.current.delete(id);
+            }
+        });
+    }, [items]);
+    const openPicker = () => {
+        if (!disabled)
+            inputRef.current?.click();
+    };
+    const handleKeyDown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        event.preventDefault();
+        openPicker();
+    };
+    const handleDrop = (event) => {
+        event.preventDefault();
+        setDragActive(false);
+        addFiles(Array.from(event.dataTransfer.files));
+    };
+    return _jsxs("div", { ...props, ref: ref, className: ['inkra-upload', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, children: [_jsx("input", { ...inputProps, ref: inputRef, className: ['inkra-upload__input', inputProps?.className].filter(Boolean).join(' '), type: "file", accept: accept, capture: capture, multiple: multiple, disabled: disabled, onChange: event => {
+                    addFiles(Array.from(event.currentTarget.files ?? []));
+                    event.currentTarget.value = '';
+                } }), _jsxs(PencilSurface, { as: "div", className: "inkra-upload__dropzone", "data-drag-active": dragActive || undefined, variant: dragActive ? 'selection' : 'outline', role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, onClick: openPicker, onKeyDown: handleKeyDown, onDragEnter: event => { event.preventDefault(); if (!disabled)
+                    setDragActive(true); }, onDragOver: event => { event.preventDefault(); if (!disabled)
+                    event.dataTransfer.dropEffect = 'copy'; }, onDragLeave: event => { if (!event.currentTarget.contains(event.relatedTarget))
+                    setDragActive(false); }, onDrop: handleDrop, children: [_jsx(PencilIcon, { className: "inkra-upload__icon", paths: uploadPaths, size: 32, sourceSize: 24 }), _jsxs("span", { className: "inkra-upload__prompt", children: [_jsx(PencilText, { children: labels.browse }), _jsx("span", { children: labels.drop })] }), accept && _jsx("span", { className: "inkra-upload__hint", children: accept })] }), rejections.length > 0 && _jsxs("div", { className: "inkra-upload__rejections", role: "alert", children: [_jsx("strong", { children: labels.rejected }), _jsx("ul", { children: rejections.map((rejection, index) => _jsxs("li", { children: [rejection.file.name, ": ", rejection.message] }, `${rejection.file.name}-${index}`)) })] }), items.length > 0 && _jsx("ul", { className: "inkra-upload__list", "aria-live": "polite", children: items.map(item => _jsx("li", { className: "inkra-upload__item", "data-status": item.status, children: _jsxs(PencilSurface, { className: "inkra-upload__item-surface", variant: "paper", radius: 8, children: [_jsxs("div", { className: "inkra-upload__file", children: [_jsx("span", { className: "inkra-upload__name", children: item.file.name }), _jsxs("span", { className: "inkra-upload__meta", children: [formatBytes(item.file.size), " \u00B7 ", statusLabel(item.status, labels)] }), item.status === 'uploading' && _jsx(Progress, { size: "sm", value: item.progress ?? 0, "aria-label": `${item.file.name}: ${Math.round(item.progress ?? 0)}%` }), item.error && _jsx("span", { className: "inkra-upload__error", children: item.error })] }), _jsxs("div", { className: "inkra-upload__actions", children: [item.status === 'uploading' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => cancel(item.id), children: labels.cancel }), onUpload && item.status === 'selected' && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id), children: labels.upload }), onUpload && (item.status === 'error' || item.status === 'cancelled') && _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => startUpload(item.id, 'retry'), children: labels.retry }), _jsx(Button, { disabled: disabled, size: "sm", variant: "ghost", onClick: () => remove(item.id), children: labels.remove })] })] }) }, item.id)) })] });
+});

package/dist/virtual-list/index.d.ts

@@ -0,0 +1,44 @@
+import { type CSSProperties, type HTMLAttributes, type ReactElement, type ReactNode, type RefAttributes } from 'react';
+import { type VirtualListKey } from './model.js';
+export type VirtualListScrollAlignment = 'start' | 'center' | 'end' | 'auto';
+export type VirtualListScrollBehavior = 'auto' | 'smooth' | 'instant';
+export interface VirtualListScrollOptions {
+    align?: VirtualListScrollAlignment;
+    behavior?: VirtualListScrollBehavior;
+}
+export interface VirtualListItemState<Item> {
+    item: Item;
+    index: number;
+    key: VirtualListKey;
+    isScrolling: boolean;
+}
+export type VirtualListItemProps = Omit<HTMLAttributes<HTMLLIElement>, 'children' | 'style'>;
+export interface VirtualListHandle {
+    scrollToIndex: (index: number, options?: VirtualListScrollOptions) => void;
+    scrollToOffset: (offset: number, options?: VirtualListScrollOptions) => void;
+    measure: () => void;
+    getScrollElement: () => HTMLElement | null;
+}
+export interface VirtualListProps<Item> extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    items: readonly Item[];
+    itemKey: (item: Item, index: number) => VirtualListKey;
+    estimateSize: number | ((item: Item, index: number) => number);
+    renderItem: (state: VirtualListItemState<Item>) => ReactNode;
+    getItemProps?: (state: VirtualListItemState<Item>) => VirtualListItemProps;
+    measureItems?: boolean;
+    overscan?: number;
+    gap?: number;
+    paddingStart?: number;
+    paddingEnd?: number;
+    scrollMargin?: number;
+    initialOffset?: number;
+    height?: CSSProperties['blockSize'];
+    getScrollElement?: () => HTMLElement | null;
+    ssrItemCount?: number;
+    empty?: ReactNode;
+    emptyLabel?: string;
+    listLabel?: string;
+    listRole?: HTMLAttributes<HTMLUListElement>['role'];
+}
+export declare const VirtualList: <Item>(props: VirtualListProps<Item> & RefAttributes<VirtualListHandle>) => ReactElement | null;
+export type { VirtualListKey } from './model.js';

package/dist/virtual-list/index.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilLine } from '../PencilLine.js';
+import { clampVirtualListIndex, getVirtualListSsrIndexes, normalizeVirtualListOverscan, normalizeVirtualListSize, normalizeVirtualListSpacing, virtualListKeyAttribute, } from './model.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+function toEngineScrollOptions(options) {
+    return options;
+}
+function VirtualListInner({ 'aria-label': ariaLabel, className, empty, emptyLabel = 'No items', estimateSize, gap, getItemProps, getScrollElement, height, initialOffset = 0, itemKey, items, listLabel, listRole = 'list', measureItems = false, onKeyDown, overscan, paddingEnd, paddingStart, renderItem, role: roleProp, scrollMargin, ssrItemCount, style, tabIndex, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    const [hydrated, setHydrated] = useState(false);
+    const pendingIndexScrollRef = useRef(null);
+    const externalScroll = getScrollElement !== undefined;
+    const role = roleProp ?? (ariaLabel ? 'region' : undefined);
+    const safeScrollMargin = normalizeVirtualListSpacing(scrollMargin);
+    const safeGap = normalizeVirtualListSpacing(gap);
+    const safePaddingStart = normalizeVirtualListSpacing(paddingStart);
+    const safePaddingEnd = normalizeVirtualListSpacing(paddingEnd);
+    useEffect(() => setHydrated(true), []);
+    const resolveScrollElement = useCallback(() => getScrollElement?.() ?? rootRef.current, [getScrollElement]);
+    const resolveItemKey = useCallback((index) => itemKey(itemsRef.current[index], index), [itemKey]);
+    const resolveEstimateSize = useCallback((index) => {
+        const item = itemsRef.current[index];
+        const value = typeof estimateSize === 'function' ? estimateSize(item, index) : estimateSize;
+        return normalizeVirtualListSize(value);
+    }, [estimateSize]);
+    const virtualizer = useVirtualizer({
+        count: items.length,
+        enabled: hydrated && items.length > 0,
+        estimateSize: resolveEstimateSize,
+        gap: safeGap,
+        getItemKey: resolveItemKey,
+        getScrollElement: resolveScrollElement,
+        initialOffset,
+        overscan: normalizeVirtualListOverscan(overscan),
+        paddingEnd: safePaddingEnd,
+        paddingStart: safePaddingStart,
+        scrollMargin: safeScrollMargin,
+    });
+    const virtualRows = virtualizer.getVirtualItems();
+    const virtualized = hydrated && virtualRows.length > 0;
+    useEffect(() => {
+        if (hydrated)
+            virtualizer.measure();
+    }, [hydrated, measureItems, virtualizer]);
+    useEffect(() => {
+        const pending = pendingIndexScrollRef.current;
+        if (!virtualized || !pending)
+            return;
+        pendingIndexScrollRef.current = null;
+        virtualizer.scrollToIndex(pending.index, toEngineScrollOptions(pending.options));
+    }, [virtualized, virtualizer]);
+    useImperativeHandle(forwardedRef, () => ({
+        getScrollElement: resolveScrollElement,
+        measure: () => virtualizer.measure(),
+        scrollToIndex: (requestedIndex, options) => {
+            const index = clampVirtualListIndex(requestedIndex, itemsRef.current.length);
+            if (index === null)
+                return;
+            if (!virtualized) {
+                pendingIndexScrollRef.current = { index, options };
+                return;
+            }
+            virtualizer.scrollToIndex(index, toEngineScrollOptions(options));
+        },
+        scrollToOffset: (offset, options) => {
+            if (!Number.isFinite(offset))
+                return;
+            virtualizer.scrollToOffset(Math.max(0, offset), toEngineScrollOptions(options));
+        },
+    }), [resolveScrollElement, virtualized, virtualizer]);
+    function handleKeyDown(event) {
+        onKeyDown?.(event);
+        if (event.defaultPrevented || externalScroll || event.target !== event.currentTarget || items.length === 0)
+            return;
+        if (event.key === 'Home') {
+            event.preventDefault();
+            virtualizer.scrollToIndex(0, { align: 'start' });
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            virtualizer.scrollToIndex(items.length - 1, { align: 'end' });
+        }
+    }
+    const fallbackIndexes = getVirtualListSsrIndexes(items.length, ssrItemCount);
+    const renderedRows = virtualized
+        ? virtualRows.map(row => ({ index: row.index, key: row.key, start: row.start }))
+        : fallbackIndexes.map(index => ({ index, key: itemKey(items[index], index), start: null }));
+    const rootStyle = externalScroll ? style : { blockSize: height, ...style };
+    const content = _jsxs(_Fragment, { children: [_jsx("ul", { "aria-label": listLabel, className: "inkra-virtual-list__items", role: listRole, style: virtualized ? { blockSize: `${virtualizer.getTotalSize()}px` } : undefined, children: renderedRows.map(row => {
+                    const item = items[row.index];
+                    const state = {
+                        item,
+                        index: row.index,
+                        key: row.key,
+                        isScrolling: virtualized && virtualizer.isScrolling,
+                    };
+                    const itemProps = getItemProps?.(state) ?? {};
+                    const { className: itemClassName, role: itemRole, ...nativeItemProps } = itemProps;
+                    return _createElement("li", { ...nativeItemProps, "aria-posinset": row.index + 1, "aria-setsize": items.length, className: classes('inkra-virtual-list__item', itemClassName), "data-index": row.index, "data-item-key": virtualListKeyAttribute(row.key), key: row.key, ref: virtualized && measureItems ? virtualizer.measureElement : undefined, role: itemRole ?? 'listitem', style: row.start === null ? undefined : {
+                            transform: `translateY(${row.start - safeScrollMargin}px)`,
+                        } },
+                        row.index > 0 && _jsx(PencilLine, { className: "inkra-virtual-list__separator", seed: `virtual-list-separator-${virtualListKeyAttribute(row.key)}`, weight: 0.75 }),
+                        renderItem(state));
+                }) }), items.length === 0 && _jsx("div", { className: "inkra-virtual-list__empty", role: "status", children: empty ?? emptyLabel })] });
+    const rootProps = {
+        ...props,
+        'aria-label': ariaLabel,
+        className: classes('inkra-virtual-list', className),
+        'data-external-scroll': externalScroll || undefined,
+        'data-virtualized': virtualized || undefined,
+        onKeyDown: handleKeyDown,
+        role,
+        style: rootStyle,
+        tabIndex: externalScroll ? tabIndex : (tabIndex ?? 0),
+    };
+    return externalScroll
+        ? _jsx("div", { ...rootProps, ref: rootRef, children: content })
+        : _jsx(PencilSurface, { ...rootProps, as: "div", radius: 8, ref: rootRef, seed: "virtual-list", variant: "paper", children: content });
+}
+export const VirtualList = forwardRef(VirtualListInner);

package/dist/virtual-list/model.d.ts

@@ -0,0 +1,7 @@
+export type VirtualListKey = string | number | bigint;
+export declare function normalizeVirtualListSize(value: number, fallback?: number): number;
+export declare function normalizeVirtualListOverscan(value: number | undefined, fallback?: number): number;
+export declare function normalizeVirtualListSpacing(value: number | undefined): number;
+export declare function getVirtualListSsrIndexes(length: number, requested: number | undefined): number[];
+export declare function clampVirtualListIndex(index: number, count: number): number | null;
+export declare function virtualListKeyAttribute(key: VirtualListKey): string;

package/dist/virtual-list/model.js

@@ -0,0 +1,27 @@
+export function normalizeVirtualListSize(value, fallback = 44) {
+    return Number.isFinite(value) && value > 0 ? value : fallback;
+}
+export function normalizeVirtualListOverscan(value, fallback = 4) {
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.max(0, Math.floor(value));
+}
+export function normalizeVirtualListSpacing(value) {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+export function getVirtualListSsrIndexes(length, requested) {
+    const safeLength = Math.max(0, Math.floor(length));
+    const defaultCount = Math.min(safeLength, 12);
+    const count = Number.isFinite(requested)
+        ? Math.min(safeLength, Math.max(0, Math.floor(requested)))
+        : defaultCount;
+    return Array.from({ length: count }, (_, index) => index);
+}
+export function clampVirtualListIndex(index, count) {
+    if (count <= 0 || !Number.isFinite(index))
+        return null;
+    return Math.min(count - 1, Math.max(0, Math.floor(index)));
+}
+export function virtualListKeyAttribute(key) {
+    return String(key);
+}