@inkra/react 0.1.0 → 0.2.0

package/dist/number-ticker/index.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { PencilText } from '../PencilText.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { canAnimateTickerValue, createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, tickerValueChanged, } from './model.js';
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useBrowserLayoutEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return undefined;
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return reduced;
+}
+function lettering(content, seed) {
+    return typeof content === 'string' ? _jsx(PencilText, { seed: seed, children: content }) : content;
+}
+function accessibleAffix(content) {
+    return typeof content === 'string' || typeof content === 'number' ? String(content) : '';
+}
+export const NumberTicker = forwardRef(function NumberTicker({ animate = true, className, deltaDuration = 1600, deltaFormatOptions, duration = 420, easing = easeOutCubic, formatOptions, getValueLabel, locale, prefix, renderDelta, renderValue, showDelta = false, suffix, value, ...props }, forwardedRef) {
+    const rootRef = useRef(null);
+    const frameRef = useRef(null);
+    const deltaTimerRef = useRef(null);
+    const displayedRef = useRef(value);
+    const targetRef = useRef(value);
+    const [displayedValue, setDisplayedValue] = useState(value);
+    const [announcedValue, setAnnouncedValue] = useState(value);
+    const [animating, setAnimating] = useState(false);
+    const [delta, setDelta] = useState(null);
+    const reducedMotion = usePrefersReducedMotion();
+    const localeKey = Array.isArray(locale) ? locale.join('\u0000') : locale;
+    const formatOptionsKey = JSON.stringify(formatOptions ?? {});
+    const deltaFormatOptionsKey = JSON.stringify(deltaFormatOptions ?? formatOptions ?? {});
+    const formatter = useMemo(() => createNumberFormatter(locale, formatOptions), [localeKey, formatOptionsKey]);
+    const deltaFormatter = useMemo(() => createNumberFormatter(locale, deltaFormatOptions ?? formatOptions), [localeKey, deltaFormatOptionsKey]);
+    useImperativeHandle(forwardedRef, () => rootRef.current);
+    useBrowserLayoutEffect(() => {
+        const previousTarget = targetRef.current;
+        targetRef.current = value;
+        if (showDelta && tickerValueChanged(previousTarget, value) && Number.isFinite(previousTarget) && Number.isFinite(value)) {
+            const nextDelta = value - previousTarget;
+            setDelta(nextDelta);
+            if (deltaTimerRef.current !== null)
+                clearTimeout(deltaTimerRef.current);
+            if (deltaDuration > 0 && Number.isFinite(deltaDuration)) {
+                deltaTimerRef.current = setTimeout(() => {
+                    deltaTimerRef.current = null;
+                    setDelta(null);
+                }, deltaDuration);
+            }
+        }
+        else if (!showDelta) {
+            setDelta(null);
+        }
+        if (frameRef.current !== null) {
+            cancelAnimationFrame(frameRef.current);
+            frameRef.current = null;
+        }
+        const reduceImmediately = reducedMotion
+            || (typeof window !== 'undefined'
+                && typeof window.matchMedia === 'function'
+                && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+        const from = displayedRef.current;
+        if (!animate || reduceImmediately || !canAnimateTickerValue(from, value, duration)) {
+            displayedRef.current = value;
+            setDisplayedValue(value);
+            setAnnouncedValue(value);
+            setAnimating(false);
+            return undefined;
+        }
+        let startTime = null;
+        setAnimating(true);
+        const tick = (time) => {
+            if (startTime === null)
+                startTime = time;
+            const progress = Math.min(1, Math.max(0, (time - startTime) / duration));
+            const next = interpolateTickerValue(from, value, easing(progress));
+            displayedRef.current = next;
+            setDisplayedValue(next);
+            if (progress < 1) {
+                frameRef.current = requestAnimationFrame(tick);
+            }
+            else {
+                frameRef.current = null;
+                displayedRef.current = value;
+                setDisplayedValue(value);
+                setAnnouncedValue(value);
+                setAnimating(false);
+            }
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current !== null) {
+                cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [animate, deltaDuration, duration, easing, reducedMotion, showDelta, value]);
+    useEffect(() => () => {
+        if (frameRef.current !== null)
+            cancelAnimationFrame(frameRef.current);
+        if (deltaTimerRef.current !== null)
+            clearTimeout(deltaTimerRef.current);
+    }, []);
+    const formattedValue = formatTickerValue(formatter, displayedValue);
+    const finalFormattedValue = formatTickerValue(formatter, value);
+    const announcedFormattedValue = formatTickerValue(formatter, announcedValue);
+    const defaultAccessibleLabel = [accessibleAffix(prefix), announcedFormattedValue, accessibleAffix(suffix)]
+        .filter(Boolean).join(' ');
+    const accessibleLabel = getValueLabel?.(announcedValue, announcedFormattedValue) ?? defaultAccessibleLabel;
+    const valueContent = renderValue?.(displayedValue, { animating, formattedValue })
+        ?? (animating
+            ? _jsx("span", { className: "inkra-number-ticker__native-value", children: formattedValue })
+            : _jsx(PencilText, { seed: `number-ticker-${finalFormattedValue}`, children: finalFormattedValue }));
+    const deltaContent = delta === null ? null : (() => {
+        const formattedDelta = formatTickerDelta(deltaFormatter, delta);
+        const details = {
+            direction: delta < 0 ? 'decrease' : 'increase',
+            formattedDelta,
+        };
+        return renderDelta?.(delta, details) ?? _jsx(PencilText, { seed: `number-ticker-delta-${formattedDelta}`, children: formattedDelta });
+    })();
+    const classes = ['inkra-number-ticker', animating && 'inkra-number-ticker--animating', className]
+        .filter(Boolean).join(' ');
+    return _jsxs("span", { ...props, className: classes, ref: rootRef, "data-animating": animating || undefined, children: [_jsxs("span", { "aria-hidden": "true", className: "inkra-number-ticker__visual", children: [prefix !== undefined && _jsx("span", { className: "inkra-number-ticker__prefix", children: lettering(prefix, 'number-ticker-prefix') }), _jsx("span", { className: "inkra-number-ticker__value", children: valueContent }), suffix !== undefined && _jsx("span", { className: "inkra-number-ticker__suffix", children: lettering(suffix, 'number-ticker-suffix') }), deltaContent !== null && _jsx("span", { className: "inkra-number-ticker__delta", "data-direction": delta < 0 ? 'decrease' : 'increase', children: deltaContent })] }), _jsx("span", { className: "inkra-number-ticker__announcement", "aria-atomic": "true", "aria-live": "polite", children: accessibleLabel })] });
+});
+export { createNumberFormatter, easeOutCubic, formatTickerDelta, formatTickerValue, interpolateTickerValue, } from './model.js';

package/dist/number-ticker/model.d.ts

@@ -0,0 +1,8 @@
+export type NumberTickerLocale = string | readonly string[];
+export declare function createNumberFormatter(locale?: NumberTickerLocale, options?: Intl.NumberFormatOptions): Intl.NumberFormat;
+export declare function formatTickerValue(formatter: Intl.NumberFormat, value: number): string;
+export declare function formatTickerDelta(formatter: Intl.NumberFormat, delta: number): string;
+export declare function interpolateTickerValue(from: number, to: number, progress: number): number;
+export declare function tickerValueChanged(previous: number, next: number): boolean;
+export declare function canAnimateTickerValue(from: number, to: number, duration: number): boolean;
+export declare function easeOutCubic(progress: number): number;

package/dist/number-ticker/model.js

@@ -0,0 +1,34 @@
+export function createNumberFormatter(locale = 'en-US', options) {
+    return new Intl.NumberFormat(locale, options);
+}
+export function formatTickerValue(formatter, value) {
+    return formatter.format(value);
+}
+export function formatTickerDelta(formatter, delta) {
+    const sign = delta > 0 ? '+' : delta < 0 ? '\u2212' : '';
+    const magnitude = formatter.formatToParts(Math.abs(delta))
+        .filter(part => part.type !== 'plusSign' && part.type !== 'minusSign')
+        .map(part => part.value)
+        .join('');
+    return `${sign}${magnitude}`;
+}
+export function interpolateTickerValue(from, to, progress) {
+    if (!Number.isFinite(from) || !Number.isFinite(to))
+        return to;
+    const boundedProgress = Math.min(1, Math.max(0, progress));
+    return from + (to - from) * boundedProgress;
+}
+export function tickerValueChanged(previous, next) {
+    return !Object.is(previous, next);
+}
+export function canAnimateTickerValue(from, to, duration) {
+    return Number.isFinite(from)
+        && Number.isFinite(to)
+        && Number.isFinite(duration)
+        && duration > 0
+        && tickerValueChanged(from, to);
+}
+export function easeOutCubic(progress) {
+    const boundedProgress = Math.min(1, Math.max(0, progress));
+    return 1 - (1 - boundedProgress) ** 3;
+}

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

@@ -0,0 +1,39 @@
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+import type { ButtonProps } from '../Button.js';
+import type { OverflowListStrategy } from './layout.js';
+export type { OverflowListStrategy } from './layout.js';
+export interface OverflowListItem {
+    id: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+    priority?: number;
+    measureKey?: string | number;
+}
+export interface OverflowListRenderContext {
+    id: string | number;
+    index: number;
+}
+export interface OverflowListOverflowContext<Item extends OverflowListItem> {
+    count: number;
+    items: readonly Item[];
+}
+export interface OverflowListChange<Item extends OverflowListItem> {
+    visibleItems: readonly Item[];
+    overflowItems: readonly Item[];
+}
+type OverflowButtonProps = Omit<ButtonProps, 'aria-label' | 'children' | 'ref'>;
+export interface OverflowListProps<Item extends OverflowListItem = OverflowListItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    items: readonly Item[];
+    strategy?: OverflowListStrategy;
+    measurementKey?: string | number;
+    gap?: CSSProperties['gap'];
+    renderItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflowItem?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    renderOverflow?: (context: OverflowListOverflowContext<Item>) => ReactNode;
+    getOverflowItemIcon?: (item: Item, context: OverflowListRenderContext) => ReactNode;
+    overflowLabel?: string | ((count: number) => string);
+    overflowButtonProps?: OverflowButtonProps;
+    onOverflowItemSelect?: (item: Item, event: Event) => void;
+    onOverflowChange?: (change: OverflowListChange<Item>) => void;
+}
+export declare const OverflowList: <Item extends OverflowListItem = OverflowListItem>(props: OverflowListProps<Item> & RefAttributes<HTMLDivElement>) => ReactElement;

package/dist/overflow-list/index.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { Button } from '../Button.js';
+import { DropdownMenu } from '../dropdown-menu/index.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+import { calculateOverflowListLayout } from './layout.js';
+const ellipsisPaths = [{ d: 'M5 12h.01M12 12h.01M19 12h.01' }];
+function itemKey(id) {
+    return `${typeof id}:${String(id)}`;
+}
+function finitePriority(value) {
+    if (value === Number.POSITIVE_INFINITY)
+        return Number.MAX_SAFE_INTEGER;
+    if (value === Number.NEGATIVE_INFINITY)
+        return Number.MIN_SAFE_INTEGER;
+    return Number.isFinite(value) ? value : 0;
+}
+function sameKeys(current, next) {
+    if (current.size !== next.length)
+        return false;
+    return next.every(key => current.has(key));
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function')
+        ref(value);
+    else if (ref)
+        ref.current = value;
+}
+function defaultOverflowLabel(count) {
+    return `More items (${count})`;
+}
+function OverflowListInner({ 'aria-label': ariaLabel, className, gap, getOverflowItemIcon, items, measurementKey = '', onOverflowChange, onOverflowItemSelect, overflowButtonProps, overflowLabel = defaultOverflowLabel, renderItem, renderOverflow, renderOverflowItem, role, strategy = 'end', style, ...props }, forwardedRef) {
+    const generatedId = useId();
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const widthCache = useRef(new Map());
+    const frameRef = useRef(null);
+    const focusOverflowRef = useRef(false);
+    const lastChangeRef = useRef('');
+    const onOverflowChangeRef = useRef(onOverflowChange);
+    onOverflowChangeRef.current = onOverflowChange;
+    const entries = useMemo(() => {
+        const nextEntries = items.map((item, index) => ({
+            item,
+            index,
+            key: itemKey(item.id),
+            priority: finitePriority(item.priority),
+        }));
+        const duplicateCheck = new Set();
+        for (const entry of nextEntries) {
+            if (duplicateCheck.has(entry.key)) {
+                throw new Error(`OverflowList item ids must be unique. Received duplicate id: ${String(entry.item.id)}`);
+            }
+            duplicateCheck.add(entry.key);
+        }
+        return nextEntries;
+    }, [items]);
+    const signature = useMemo(() => JSON.stringify([
+        measurementKey,
+        strategy,
+        entries.map(entry => [entry.key, entry.item.measureKey ?? entry.key, entry.priority]),
+    ]), [entries, measurementKey, strategy]);
+    const allKeys = useMemo(() => entries.map(entry => entry.key), [entries]);
+    const [layout, setLayout] = useState(() => ({
+        signature,
+        visibleKeys: new Set(allKeys),
+        needsOverflow: false,
+        measuring: true,
+    }));
+    const effectiveLayout = layout.signature === signature
+        ? layout
+        : { signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true };
+    const visibleEntries = useMemo(() => effectiveLayout.measuring
+        ? entries
+        : entries.filter(entry => effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    const overflowEntries = useMemo(() => effectiveLayout.measuring
+        ? []
+        : entries.filter(entry => !effectiveLayout.visibleKeys.has(entry.key)), [effectiveLayout.measuring, effectiveLayout.visibleKeys, entries]);
+    const setRootRef = useCallback((node) => {
+        rootRef.current = node;
+        assignRef(forwardedRef, node);
+    }, [forwardedRef]);
+    const setItemRef = useCallback((key, node) => {
+        if (node)
+            itemRefs.current.set(key, node);
+        else
+            itemRefs.current.delete(key);
+    }, []);
+    const updateLayout = useCallback(() => {
+        const root = rootRef.current;
+        if (!root)
+            return;
+        const containerWidth = root.getBoundingClientRect().width;
+        if (containerWidth <= 0)
+            return;
+        const computedGap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+        for (const entry of entries) {
+            const node = itemRefs.current.get(entry.key);
+            if (!node)
+                continue;
+            const width = node.getBoundingClientRect().width;
+            if (width > 0)
+                widthCache.current.set(entry.key, width);
+        }
+        if (entries.some(entry => !widthCache.current.has(entry.key)))
+            return;
+        const triggerWidth = triggerRef.current?.getBoundingClientRect().width;
+        const result = calculateOverflowListLayout({
+            containerWidth,
+            gap: computedGap,
+            items: entries.map(entry => ({
+                key: entry.key,
+                priority: entry.priority,
+                width: widthCache.current.get(entry.key) ?? 0,
+            })),
+            strategy,
+            triggerWidth,
+        });
+        if (result.needsTriggerMeasurement) {
+            setLayout(current => current.signature === signature
+                && current.needsOverflow
+                && current.measuring
+                && sameKeys(current.visibleKeys, allKeys)
+                ? current
+                : { signature, visibleKeys: new Set(allKeys), needsOverflow: true, measuring: true });
+            return;
+        }
+        const activeElement = typeof document === 'undefined' ? null : document.activeElement;
+        if (activeElement && result.overflowKeys.some(key => itemRefs.current.get(key)?.contains(activeElement))) {
+            focusOverflowRef.current = true;
+        }
+        setLayout(current => current.signature === signature
+            && !current.measuring
+            && current.needsOverflow === (result.overflowKeys.length > 0)
+            && sameKeys(current.visibleKeys, result.visibleKeys)
+            ? current
+            : {
+                signature,
+                visibleKeys: new Set(result.visibleKeys),
+                needsOverflow: result.overflowKeys.length > 0,
+                measuring: false,
+            });
+    }, [allKeys, entries, signature, strategy]);
+    const scheduleLayout = useCallback(() => {
+        if (frameRef.current !== null || typeof window === 'undefined')
+            return;
+        frameRef.current = window.requestAnimationFrame(() => {
+            frameRef.current = null;
+            updateLayout();
+        });
+    }, [updateLayout]);
+    useBrowserLayoutEffect(() => {
+        if (layout.signature === signature)
+            return;
+        widthCache.current.clear();
+        setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: false, measuring: true });
+    }, [allKeys, layout.signature, signature]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (!root)
+            return undefined;
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleLayout);
+        observer?.observe(root);
+        itemRefs.current.forEach(node => observer?.observe(node));
+        if (triggerRef.current)
+            observer?.observe(triggerRef.current);
+        if (!observer)
+            window.addEventListener('resize', scheduleLayout);
+        scheduleLayout();
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener('resize', scheduleLayout);
+            if (frameRef.current !== null) {
+                window.cancelAnimationFrame(frameRef.current);
+                frameRef.current = null;
+            }
+        };
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, scheduleLayout, signature]);
+    useEffect(() => {
+        const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+        if (!fonts?.addEventListener)
+            return undefined;
+        const remeasure = () => {
+            widthCache.current.clear();
+            setLayout({ signature, visibleKeys: new Set(allKeys), needsOverflow: effectiveLayout.needsOverflow, measuring: true });
+        };
+        fonts.addEventListener('loadingdone', remeasure);
+        return () => fonts.removeEventListener('loadingdone', remeasure);
+    }, [allKeys, effectiveLayout.needsOverflow, signature]);
+    useBrowserLayoutEffect(() => {
+        if (!focusOverflowRef.current || !effectiveLayout.needsOverflow || effectiveLayout.measuring)
+            return;
+        focusOverflowRef.current = false;
+        triggerRef.current?.focus();
+    }, [effectiveLayout.measuring, effectiveLayout.needsOverflow, effectiveLayout.visibleKeys]);
+    useEffect(() => {
+        if (effectiveLayout.measuring)
+            return;
+        const changeKey = `${signature}:${visibleEntries.map(entry => entry.key).join('|')}`;
+        if (lastChangeRef.current === changeKey)
+            return;
+        lastChangeRef.current = changeKey;
+        onOverflowChangeRef.current?.({
+            visibleItems: visibleEntries.map(entry => entry.item),
+            overflowItems: overflowEntries.map(entry => entry.item),
+        });
+    }, [effectiveLayout.measuring, overflowEntries, signature, visibleEntries]);
+    const resolvedLabel = typeof overflowLabel === 'function'
+        ? overflowLabel(overflowEntries.length)
+        : overflowLabel;
+    const overflowContext = useMemo(() => ({
+        count: overflowEntries.length,
+        items: overflowEntries.map(entry => entry.item),
+    }), [overflowEntries]);
+    const { className: overflowButtonClassName, size: overflowButtonSize, title: overflowButtonTitle, variant: overflowButtonVariant, ...overflowButtonRest } = overflowButtonProps ?? {};
+    const resolvedStyle = {
+        ...style,
+        ...(gap !== undefined ? { '--inkra-overflow-list-gap': typeof gap === 'number' ? `${gap}px` : String(gap) } : {}),
+    };
+    return _jsxs("div", { ...props, "aria-label": ariaLabel, className: ['inkra-overflow-list', className].filter(Boolean).join(' '), "data-measuring": effectiveLayout.measuring || undefined, ref: setRootRef, role: role, style: resolvedStyle, children: [visibleEntries.map(({ item, index, key }) => _jsx("div", { className: "inkra-overflow-list__item", "data-overflow-list-item": String(item.id), ref: node => setItemRef(key, node), children: renderItem
+                    ? renderItem(item, { id: item.id, index })
+                    : _jsx("span", { className: "inkra-overflow-list__default-item", children: item.label }) }, key)), effectiveLayout.needsOverflow ? _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { ...overflowButtonRest, "aria-label": resolvedLabel, className: ['inkra-overflow-list__trigger', overflowButtonClassName].filter(Boolean).join(' '), ref: triggerRef, size: overflowButtonSize ?? (renderOverflow ? 'sm' : 'icon-sm'), title: overflowButtonTitle ?? resolvedLabel, variant: overflowButtonVariant ?? 'outline', children: renderOverflow
+                                ? renderOverflow(overflowContext)
+                                : _jsx(PencilIcon, { paths: ellipsisPaths, seed: `${generatedId}-overflow`, size: 16, sourceSize: 24 }) }) }), _jsx(DropdownMenu.Portal, { children: _jsx(DropdownMenu.Content, { align: "end", "aria-label": resolvedLabel, children: overflowEntries.map(({ item, index, key }) => _jsx(DropdownMenu.Item, { disabled: item.disabled, icon: getOverflowItemIcon?.(item, { id: item.id, index }), onSelect: event => onOverflowItemSelect?.(item, event), children: renderOverflowItem
+                                    ? renderOverflowItem(item, { id: item.id, index })
+                                    : item.label }, key)) }) })] }) : null] });
+}
+export const OverflowList = forwardRef(OverflowListInner);

package/dist/overflow-list/layout.d.ts

@@ -0,0 +1,19 @@
+export type OverflowListStrategy = 'end' | 'start' | 'priority';
+export interface OverflowListLayoutItem {
+    key: string;
+    priority: number;
+    width: number;
+}
+export interface OverflowListLayoutInput {
+    items: readonly OverflowListLayoutItem[];
+    containerWidth: number;
+    gap: number;
+    strategy: OverflowListStrategy;
+    triggerWidth?: number;
+}
+export interface OverflowListLayoutResult {
+    visibleKeys: string[];
+    overflowKeys: string[];
+    needsTriggerMeasurement: boolean;
+}
+export declare function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }: OverflowListLayoutInput): OverflowListLayoutResult;

package/dist/overflow-list/layout.js

@@ -0,0 +1,44 @@
+const finiteSize = (value) => Number.isFinite(value) ? Math.max(0, value) : 0;
+function itemsWidth(items, gap) {
+    if (items.length === 0)
+        return 0;
+    return items.reduce((total, item) => total + finiteSize(item.width), 0)
+        + finiteSize(gap) * (items.length - 1);
+}
+function candidateOrder(items, strategy) {
+    const indexed = items.map((item, index) => ({ item, index }));
+    if (strategy === 'start')
+        return indexed.reverse();
+    if (strategy === 'priority') {
+        return indexed.sort((left, right) => right.item.priority - left.item.priority || left.index - right.index);
+    }
+    return indexed;
+}
+export function calculateOverflowListLayout({ containerWidth, gap, items, strategy, triggerWidth, }) {
+    const availableWidth = finiteSize(containerWidth);
+    const resolvedGap = finiteSize(gap);
+    const allKeys = items.map(item => item.key);
+    if (itemsWidth(items, resolvedGap) <= availableWidth + 0.5) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: false };
+    }
+    if (triggerWidth === undefined || !Number.isFinite(triggerWidth) || triggerWidth <= 0) {
+        return { visibleKeys: allKeys, overflowKeys: [], needsTriggerMeasurement: true };
+    }
+    const visible = new Set();
+    let occupied = finiteSize(triggerWidth);
+    for (const { item } of candidateOrder(items, strategy)) {
+        const nextWidth = occupied + resolvedGap + finiteSize(item.width);
+        if (nextWidth > availableWidth + 0.5) {
+            if (strategy === 'priority')
+                continue;
+            break;
+        }
+        visible.add(item.key);
+        occupied = nextWidth;
+    }
+    return {
+        visibleKeys: allKeys.filter(key => visible.has(key)),
+        overflowKeys: allKeys.filter(key => !visible.has(key)),
+        needsTriggerMeasurement: false,
+    };
+}

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;
+}