@inkra/react 0.1.0 → 0.3.0

package/dist/segmented-progress/SegmentedProgress.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PencilSurface } from '../PencilSurface.js';
+function segmentFill(index, count, percent, policy) {
+    if (percent === null)
+        return 1;
+    const raw = percent / 100 * count - index;
+    if (policy === 'complete')
+        return raw >= 1 ? 1 : 0;
+    if (policy === 'next')
+        return raw > 0 ? 1 : 0;
+    return Math.max(0, Math.min(1, raw));
+}
+function thresholdColor(index, count, max, thresholds) {
+    if (!thresholds?.length)
+        return undefined;
+    const segmentValue = index / count * max;
+    let color;
+    for (const threshold of thresholds) {
+        if (!Number.isFinite(threshold.value) || !threshold.color || threshold.value > segmentValue)
+            continue;
+        color = threshold.color;
+    }
+    return color;
+}
+export function SegmentedProgress({ count, gap, max, partialSegment, percent, seed, segmentColors, thresholds, }) {
+    const normalizedThresholds = thresholds
+        ?.filter(threshold => Number.isFinite(threshold.value) && threshold.color)
+        .map(threshold => ({ ...threshold, value: Math.max(0, Math.min(max, threshold.value)) }))
+        .sort((left, right) => left.value - right.value);
+    return (_jsx("span", { "aria-hidden": "true", className: "inkra-progress__segments", style: {
+            '--inkra-progress-segment-count': count,
+            '--inkra-progress-segment-gap': `${gap}px`,
+        }, children: Array.from({ length: count }, (_, index) => {
+            const fill = segmentFill(index, count, percent, partialSegment);
+            const color = segmentColors?.[index] || thresholdColor(index, count, max, normalizedThresholds);
+            const style = {
+                '--inkra-progress-segment-fill': `${fill * 100}%`,
+                ...(color ? { '--inkra-selection-pigment': color } : {}),
+            };
+            return (_jsxs("span", { className: "inkra-progress__segment", "data-fill": fill === 0 ? 'empty' : fill === 1 ? 'full' : 'partial', children: [_jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-outline", radius: 3, seed: `${seed}-segment-${index}-outline`, variant: "outline" }), _jsx("span", { className: "inkra-progress__segment-fill-clip", style: style, children: _jsx(PencilSurface, { as: "span", className: "inkra-progress__segment-fill", radius: 3, seed: `${seed}-segment-${index}-fill`, variant: "selection" }) })] }, index));
+        }) }));
+}

package/dist/slider/index.js

@@ -40,6 +40,6 @@ export const Slider = forwardRef(function Slider({ 'aria-label': ariaLabel, 'ari
                 const thumbLabel = thumbLabels?.[index];
                 const labelledBy = thumbLabel ? undefined : ariaLabelledBy;
                 const label = thumbLabel ?? (ariaLabel ? `${ariaLabel}${values.length > 1 ? ` ${index + 1}` : ''}` : labelledBy ? undefined : `Value${values.length > 1 ? ` ${index + 1}` : ''}`);
-                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
+                return _jsx(SliderPrimitive.Thumb, { "aria-describedby": ariaDescribedBy, "aria-label": label, "aria-labelledby": labelledBy, "aria-valuenow": current, "aria-valuetext": getValueLabel?.(current, index) ?? ariaValueText, className: "inkra-slider__thumb", children: _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slider__thumb-surface", variant: "paper", radius: 8, seed: `${resolvedSeed}-thumb-${index}`, children: _jsx(PencilSurface, { as: "span", className: "inkra-slider__focus-ring", variant: "outline", radius: 8, seed: `${resolvedSeed}-focus-${index}` }) }) }, index);
             })] });
 });

package/dist/slot/index.d.ts

@@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SlotSize = 'sm' | 'md' | 'lg';
+interface SlotSharedProps {
+    children?: ReactNode;
+    /** Shows emptyContent instead of children while preserving the slot geometry. */
+    empty?: boolean;
+    emptyContent?: ReactNode;
+    selected?: boolean;
+    size?: SlotSize;
+    count?: number;
+    /** Replaces the default Badge while keeping the count anchored to the slot. */
+    renderCount?: (count: number) => ReactNode;
+    seed?: string | number;
+}
+export interface StaticSlotProps extends SlotSharedProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    interactive?: false;
+    disabled?: boolean;
+}
+export interface InteractiveSlotProps extends SlotSharedProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    interactive: true;
+}
+export type SlotProps = StaticSlotProps | InteractiveSlotProps;
+export declare const Slot: import("react").ForwardRefExoticComponent<SlotProps & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+export {};

package/dist/slot/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from 'react';
+import { Badge } from '../display/index.js';
+import { PencilSurface } from '../PencilSurface.js';
+const classes = (...values) => values.filter(Boolean).join(' ');
+export const Slot = forwardRef(function Slot({ children, className, count, disabled = false, empty = false, emptyContent, interactive = false, renderCount, seed, selected = false, size = 'md', ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-slot-${generatedId}`;
+    const content = empty
+        ? (emptyContent ?? _jsx("span", { className: "inkra-slot__empty-mark", "aria-hidden": "true", children: "+" }))
+        : children;
+    const countContent = count == null
+        ? null
+        : renderCount?.(count) ?? _jsx(Badge, { size: "sm", "aria-label": `${count}`, children: count });
+    const commonProps = {
+        ...props,
+        className: classes('inkra-slot', className),
+        'data-disabled': disabled || undefined,
+        'data-empty': empty || undefined,
+        'data-interactive': interactive || undefined,
+        'data-selected': selected || undefined,
+        'data-size': size,
+    };
+    const body = _jsxs(_Fragment, { children: [selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-wash", seed: `${resolvedSeed}-wash`, variant: "selection" }), _jsx("span", { className: "inkra-slot__content", children: content }), selected && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-slot__selected-outline", radius: 8, seed: `${resolvedSeed}-outline`, variant: "outline" }), countContent != null && _jsx("span", { className: "inkra-slot__count", children: countContent })] });
+    if (interactive) {
+        return _jsx(PencilSurface, { ...commonProps, as: "button", "aria-pressed": selected, disabled: disabled, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+    }
+    return _jsx(PencilSurface, { ...commonProps, as: "div", "aria-disabled": disabled || undefined, radius: 8, ref: ref, seed: resolvedSeed, variant: "paper", children: body });
+});

package/dist/sortable/index.d.ts

@@ -0,0 +1,50 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { SortableChangeDetails, SortableContainerData, SortableIdentifier } from './model.js';
+export type { SortableChangeDetails, SortableContainerData, SortableIdentifier, SortableLayout, SortableLocation, } from './model.js';
+export interface SortableLabels {
+    handle?: string;
+    screenReaderInstructions?: string;
+    pickedUp?: (item: string, container: string, position: number, count: number) => string;
+    movedOver?: (item: string, container: string, position: number, count: number) => string;
+    dropped?: (item: string, container: string, position: number, count: number) => string;
+    cancelled?: (item: string) => string;
+}
+export interface SortableItemRenderState<Item> {
+    item: Item;
+    id: SortableIdentifier;
+    containerId: SortableIdentifier;
+    index: number;
+    disabled: boolean;
+    isDragging: boolean;
+    isOverlay: boolean;
+}
+export interface SortableHandleRenderState<Item> extends SortableItemRenderState<Item> {
+    props: ButtonHTMLAttributes<HTMLButtonElement> & {
+        ref: (element: HTMLButtonElement | null) => void;
+    };
+}
+export interface SortableContainerRenderState<Item> {
+    container: SortableContainerData<Item>;
+    isOver: boolean;
+    itemCount: number;
+}
+export interface SortableProps<Item> {
+    containers: readonly SortableContainerData<Item>[];
+    getItemId: (item: Item) => SortableIdentifier;
+    renderItem: (state: SortableItemRenderState<Item>) => ReactNode;
+    onChange: (containers: SortableContainerData<Item>[], details: SortableChangeDetails<Item>) => void;
+    onReorder?: (details: SortableChangeDetails<Item>) => void;
+    onMove?: (details: SortableChangeDetails<Item>) => void;
+    renderContainerHeader?: (state: SortableContainerRenderState<Item>) => ReactNode;
+    renderOverlay?: (state: SortableItemRenderState<Item>) => ReactNode;
+    handle?: boolean | ((state: SortableHandleRenderState<Item>) => ReactNode);
+    isItemDisabled?: (item: Item, container: SortableContainerData<Item>) => boolean;
+    getItemLabel?: (item: Item) => string;
+    getContainerLabel?: (container: SortableContainerData<Item>) => string;
+    labels?: SortableLabels;
+    className?: string;
+    containerClassName?: string;
+    itemClassName?: string;
+    autoScroll?: boolean;
+}
+export declare function Sortable<Item>({ autoScroll, className, containerClassName, containers, getContainerLabel, getItemId, getItemLabel, handle, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }: SortableProps<Item>): import("react").JSX.Element;

package/dist/sortable/index.js

@@ -0,0 +1,283 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { __iconData as gripIconData } from 'lucide-react/dist/esm/icons/grip-vertical.mjs';
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, pointerWithin, rectIntersection, useDroppable, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { useMemo, useRef, useState } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { cloneSortableContainers, findSortableLocation, projectSortableMove, sortableContainersEqual, } from './model.js';
+const gripIcon = gripIconData.node.map(([, attributes]) => {
+    const { cx, cy, r } = attributes;
+    const x = Number(cx);
+    const y = Number(cy);
+    const radius = Number(r);
+    return { d: `M ${x - radius} ${y} A ${radius} ${radius} 0 1 0 ${x + radius} ${y} A ${radius} ${radius} 0 1 0 ${x - radius} ${y}` };
+});
+function engineItemId(id) {
+    return `inkra-sortable-item:${typeof id}:${String(id)}`;
+}
+function engineContainerId(id) {
+    return `inkra-sortable-container:${typeof id}:${String(id)}`;
+}
+function isInteractiveTarget(target) {
+    return target instanceof Element && Boolean(target.closest('button, a, input, select, textarea, [contenteditable="true"], [data-sortable-no-drag]'));
+}
+function filterItemActivatorProps(props) {
+    return {
+        ...props,
+        onKeyDown: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onKeyDown?.(event);
+        },
+        onMouseDown: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onMouseDown?.(event);
+        },
+        onTouchStart: (event) => {
+            if (!isInteractiveTarget(event.target))
+                props.onTouchStart?.(event);
+        },
+    };
+}
+const defaultLabels = {
+    handle: 'Drag item',
+    screenReaderInstructions: 'Press Space or Enter to pick up an item. Use the arrow keys to move it, Space or Enter to drop it, and Escape to cancel.',
+    pickedUp: (item, container, position, count) => `Picked up ${item}, item ${position} of ${count} in ${container}.`,
+    movedOver: (item, container, position, count) => `${item} is over position ${position} of ${count} in ${container}.`,
+    dropped: (item, container, position, count) => `Dropped ${item} at position ${position} of ${count} in ${container}.`,
+    cancelled: (item) => `Sorting cancelled. ${item} returned to its original position.`,
+};
+function getEngineData(value) {
+    const data = value?.data.current;
+    return data?.type === 'inkra-sortable-item' || data?.type === 'inkra-sortable-container' ? data : null;
+}
+function getCollisionEngineData(collision) {
+    return collision.data?.droppableContainer
+        ? getEngineData(collision.data.droppableContainer)
+        : null;
+}
+function getDropProjection(containers, event, getItemId) {
+    const activeData = getEngineData(event.active);
+    const overData = getEngineData(event.over);
+    if (activeData?.itemId === undefined || !overData || overData.disabled)
+        return cloneSortableContainers(containers);
+    const targetContainer = containers.find((container) => container.id === overData.containerId);
+    const translated = event.active.rect.current.translated;
+    const source = findSortableLocation(containers, activeData.itemId, getItemId);
+    const target = overData.itemId === undefined ? null : findSortableLocation(containers, overData.itemId, getItemId);
+    const keyboardDrag = typeof KeyboardEvent !== 'undefined' && event.activatorEvent instanceof KeyboardEvent;
+    const insertAfter = keyboardDrag
+        ? source !== null && target !== null && source.containerId === target.containerId && source.index < target.index
+        : overData.itemId !== undefined && translated !== null && targetContainer?.layout === 'grid'
+            ? translated.left + translated.width / 2 > event.over.rect.left + event.over.rect.width / 2
+            : overData.itemId !== undefined && translated !== null
+                && translated.top + translated.height / 2 > event.over.rect.top + event.over.rect.height / 2;
+    return projectSortableMove(containers, activeData.itemId, getItemId, {
+        overContainerId: overData.containerId,
+        overItemId: overData.itemId,
+        insertAfter,
+    });
+}
+const collisionDetection = (args) => {
+    const pointer = pointerWithin(args);
+    const pointerItems = pointer.filter((collision) => getCollisionEngineData(collision)?.type === 'inkra-sortable-item');
+    if (pointerItems.length > 0)
+        return pointerItems;
+    if (pointer.length > 0)
+        return pointer;
+    const intersections = rectIntersection(args);
+    const intersectingItems = intersections.filter((collision) => getCollisionEngineData(collision)?.type === 'inkra-sortable-item');
+    if (intersectingItems.length > 0)
+        return intersectingItems;
+    return intersections.length > 0 ? intersections : closestCenter(args);
+};
+function SortableContainer({ container, getItemId, renderItem, renderContainerHeader, handle, isItemDisabled, itemClassName, containerClassName, activeId, handleLabel, getItemLabel, }) {
+    const disabled = container.disabled === true;
+    const { isOver, setNodeRef } = useDroppable({
+        id: engineContainerId(container.id),
+        data: { type: 'inkra-sortable-container', containerId: container.id, disabled },
+    });
+    const ids = container.items.map((item) => engineItemId(getItemId(item)));
+    const layout = container.layout ?? 'list';
+    const acceptingOver = isOver && !disabled;
+    return _jsxs(PencilSurface, { as: "section", className: ['inkra-sortable__container', containerClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-layout": layout, "data-over": acceptingOver || undefined, "aria-disabled": disabled || undefined, "aria-label": container.label ?? String(container.id), ref: setNodeRef, seed: `sortable-container-${String(container.id)}`, variant: "paper", children: [acceptingOver && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__container-target", seed: `sortable-container-${String(container.id)}-target`, variant: "selection" }), (renderContainerHeader || container.label) && _jsxs("div", { className: "inkra-sortable__container-header", children: [_jsx("div", { className: "inkra-sortable__container-title", children: renderContainerHeader
+                            ? renderContainerHeader({ container, isOver: acceptingOver, itemCount: container.items.length })
+                            : container.label ? _jsx(PencilText, { children: container.label }) : null }), _jsx(PencilLine, { "aria-hidden": "true", className: "inkra-sortable__container-divider", seed: `sortable-container-${String(container.id)}-divider` })] }), _jsx(SortableContext, { items: ids, strategy: layout === 'grid' ? rectSortingStrategy : verticalListSortingStrategy, children: _jsxs("div", { className: "inkra-sortable__items", children: [container.items.map((item, index) => {
+                            const id = getItemId(item);
+                            return _jsx(SortableItem, { activeId: activeId, container: container, disabled: disabled || isItemDisabled?.(item, container) === true, handle: handle, handleLabel: `${handleLabel}: ${getItemLabel(item)}`, id: id, index: index, item: item, itemClassName: itemClassName, renderItem: renderItem }, engineItemId(id));
+                        }), container.items.length === 0 && _jsx("div", { className: "inkra-sortable__empty", "aria-hidden": "true" })] }) })] });
+}
+function SortableItem({ activeId, container, disabled, handle, handleLabel, id, index, item, itemClassName, renderItem, }) {
+    const hasHandle = handle === true || typeof handle === 'function';
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({
+        id: engineItemId(id),
+        disabled: disabled ? { draggable: true, droppable: false } : false,
+        data: { type: 'inkra-sortable-item', containerId: container.id, itemId: id, disabled },
+    });
+    const state = {
+        item,
+        id,
+        containerId: container.id,
+        index,
+        disabled,
+        isDragging,
+        isOverlay: false,
+    };
+    const activatorProps = { ...attributes, ...listeners };
+    const itemActivatorProps = filterItemActivatorProps({ ...attributes, ...listeners });
+    const setItemRef = (element) => {
+        setNodeRef(element);
+        if (!hasHandle)
+            setActivatorNodeRef(element);
+    };
+    return _jsxs("div", { ...(!hasHandle ? itemActivatorProps : {}), "aria-disabled": disabled || undefined, "aria-label": !hasHandle ? handleLabel : undefined, className: ['inkra-sortable__item', itemClassName].filter(Boolean).join(' '), "data-disabled": disabled || undefined, "data-dragging": isDragging || undefined, "data-handle": hasHandle || undefined, "data-sortable-id": String(id), ref: setItemRef, style: { transform: CSS.Transform.toString(transform), transition }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__item-surface", seed: `sortable-item-${String(id)}`, variant: "paper" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__focus", seed: `sortable-focus-${String(id)}`, variant: "outline" }), activeId === id && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__placeholder", seed: `sortable-placeholder-${String(id)}`, variant: "selection" }), _jsx("div", { className: "inkra-sortable__item-content", children: renderItem(state) }), hasHandle && _jsx("div", { className: "inkra-sortable__handle-slot", children: typeof handle === 'function'
+                    ? handle({ ...state, props: { ...activatorProps, 'aria-label': handleLabel, disabled, ref: setActivatorNodeRef } })
+                    : _jsx("button", { ...activatorProps, "aria-label": handleLabel, className: "inkra-sortable__handle", "data-sortable-handle": "", disabled: disabled, ref: setActivatorNodeRef, type: "button", children: _jsx(PencilIcon, { "aria-hidden": "true", paths: gripIcon, size: 24, sourceSize: 24 }) }) })] });
+}
+export function Sortable({ autoScroll = true, className, containerClassName, containers, getContainerLabel = (container) => container.label ?? String(container.id), getItemId, getItemLabel = (item) => String(getItemId(item)), handle = false, isItemDisabled, itemClassName, labels: labelsProp, onChange, onMove, onReorder, renderContainerHeader, renderItem, renderOverlay, }) {
+    const labels = { ...defaultLabels, ...labelsProp };
+    const [activeId, setActiveId] = useState(null);
+    const [activeWidth, setActiveWidth] = useState(null);
+    const [projected, setProjected] = useState(null);
+    const initialRef = useRef([]);
+    const projectedRef = useRef([]);
+    const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: { delay: 180, tolerance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const visibleContainers = projected ?? cloneSortableContainers(containers);
+    const activeLocation = activeId === null ? null : findSortableLocation(visibleContainers, activeId, getItemId);
+    const activeContainer = activeLocation === null
+        ? null
+        : visibleContainers.find((container) => container.id === activeLocation.containerId) ?? null;
+    const activeItem = activeContainer && activeLocation
+        ? activeContainer.items[activeLocation.index]
+        : undefined;
+    const announcements = useMemo(() => ({
+        onDragStart({ active }) {
+            const data = getEngineData(active);
+            if (data?.itemId === undefined)
+                return undefined;
+            const location = findSortableLocation(containers, data.itemId, getItemId);
+            const container = location && containers.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.pickedUp(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragOver({ active, over }) {
+            const data = getEngineData(active);
+            const overData = getEngineData(over);
+            if (data?.itemId === undefined || !overData || overData.disabled)
+                return undefined;
+            const current = projectedRef.current.length > 0 ? projectedRef.current : containers;
+            const location = findSortableLocation(current, data.itemId, getItemId);
+            const container = location && current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.movedOver(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragEnd({ active, over }) {
+            const data = getEngineData(active);
+            const overData = getEngineData(over);
+            if (data?.itemId === undefined || !over)
+                return undefined;
+            if (overData?.disabled) {
+                const location = findSortableLocation(initialRef.current, data.itemId, getItemId);
+                const container = location && initialRef.current.find((entry) => entry.id === location.containerId);
+                const item = container && location ? container.items[location.index] : undefined;
+                return item === undefined ? undefined : labels.cancelled(getItemLabel(item));
+            }
+            const current = projectedRef.current;
+            const location = findSortableLocation(current, data.itemId, getItemId);
+            const container = location && current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return container && location && item !== undefined
+                ? labels.dropped(getItemLabel(item), getContainerLabel(container), location.index + 1, container.items.length)
+                : undefined;
+        },
+        onDragCancel({ active }) {
+            const data = getEngineData(active);
+            if (data?.itemId === undefined)
+                return undefined;
+            const location = findSortableLocation(initialRef.current, data.itemId, getItemId);
+            const container = location && initialRef.current.find((entry) => entry.id === location.containerId);
+            const item = container && location ? container.items[location.index] : undefined;
+            return item === undefined ? undefined : labels.cancelled(getItemLabel(item));
+        },
+    }), [containers, getContainerLabel, getItemId, getItemLabel, labels]);
+    function resetDrag() {
+        setActiveId(null);
+        setActiveWidth(null);
+        setProjected(null);
+        projectedRef.current = [];
+    }
+    function handleDragStart(event) {
+        const data = getEngineData(event.active);
+        if (data?.itemId === undefined)
+            return;
+        const snapshot = cloneSortableContainers(containers);
+        initialRef.current = snapshot;
+        projectedRef.current = snapshot;
+        setProjected(snapshot);
+        setActiveId(data.itemId);
+        setActiveWidth(event.active.rect.current.initial?.width ?? null);
+    }
+    function handleDragOver(event) {
+        const overData = getEngineData(event.over);
+        if (!event.over || overData?.disabled) {
+            const restored = cloneSortableContainers(initialRef.current);
+            projectedRef.current = restored;
+            setProjected(restored);
+            return;
+        }
+        const next = getDropProjection(projectedRef.current, event, getItemId);
+        projectedRef.current = next;
+        setProjected(next);
+    }
+    function handleDragEnd(event) {
+        const data = getEngineData(event.active);
+        const overData = getEngineData(event.over);
+        if (data?.itemId === undefined || !event.over || overData?.disabled) {
+            resetDrag();
+            return;
+        }
+        const next = projectedRef.current;
+        const from = findSortableLocation(initialRef.current, data.itemId, getItemId);
+        const to = findSortableLocation(next, data.itemId, getItemId);
+        const sourceContainer = from && initialRef.current.find((container) => container.id === from.containerId);
+        const item = sourceContainer && from ? sourceContainer.items[from.index] : undefined;
+        if (from && to && item !== undefined && !sortableContainersEqual(initialRef.current, next, getItemId)) {
+            const details = {
+                activeId: data.itemId,
+                overId: overData?.itemId ?? null,
+                from,
+                to,
+                item,
+                type: from.containerId === to.containerId ? 'reorder' : 'move',
+            };
+            onChange(next, details);
+            if (details.type === 'reorder')
+                onReorder?.(details);
+            else
+                onMove?.(details);
+        }
+        resetDrag();
+    }
+    function handleDragCancel(_event) {
+        resetDrag();
+    }
+    return _jsxs(DndContext, { accessibility: {
+            announcements,
+            screenReaderInstructions: { draggable: labels.screenReaderInstructions },
+        }, autoScroll: autoScroll, collisionDetection: collisionDetection, onDragCancel: handleDragCancel, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragStart: handleDragStart, sensors: sensors, children: [_jsx("div", { className: ['inkra-sortable', className].filter(Boolean).join(' '), "data-dragging": activeId !== null || undefined, children: visibleContainers.map((container) => _jsx(SortableContainer, { activeId: activeId, container: container, containerClassName: containerClassName, getItemId: getItemId, getItemLabel: getItemLabel, handle: handle, handleLabel: labels.handle, isItemDisabled: isItemDisabled, itemClassName: itemClassName, renderContainerHeader: renderContainerHeader, renderItem: renderItem }, container.id)) }), _jsx(DragOverlay, { dropAnimation: null, children: activeItem !== undefined && activeContainer && activeLocation ? _jsxs("div", { className: "inkra-sortable__overlay", style: activeWidth === null ? undefined : { '--inkra-sortable-overlay-width': `${activeWidth}px` }, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-sortable__overlay-surface", seed: `sortable-overlay-${String(activeId)}`, variant: "paper" }), _jsx("div", { className: "inkra-sortable__item-content", children: (renderOverlay ?? renderItem)({
+                                item: activeItem,
+                                id: activeId,
+                                containerId: activeContainer.id,
+                                index: activeLocation.index,
+                                disabled: false,
+                                isDragging: true,
+                                isOverlay: true,
+                            }) })] }) : null })] });
+}

package/dist/sortable/model.d.ts

@@ -0,0 +1,30 @@
+export type SortableIdentifier = string | number;
+export type SortableLayout = 'list' | 'grid';
+export interface SortableContainerData<Item> {
+    id: SortableIdentifier;
+    items: readonly Item[];
+    label?: string;
+    disabled?: boolean;
+    layout?: SortableLayout;
+}
+export interface SortableLocation {
+    containerId: SortableIdentifier;
+    index: number;
+}
+export interface SortableChangeDetails<Item> {
+    activeId: SortableIdentifier;
+    overId: SortableIdentifier | null;
+    from: SortableLocation;
+    to: SortableLocation;
+    item: Item;
+    type: 'reorder' | 'move';
+}
+export interface SortableProjectionOptions {
+    overContainerId: SortableIdentifier;
+    overItemId?: SortableIdentifier;
+    insertAfter?: boolean;
+}
+export declare function cloneSortableContainers<Item>(containers: readonly SortableContainerData<Item>[]): SortableContainerData<Item>[];
+export declare function findSortableLocation<Item>(containers: readonly SortableContainerData<Item>[], itemId: SortableIdentifier, getItemId: (item: Item) => SortableIdentifier): SortableLocation | null;
+export declare function projectSortableMove<Item>(containers: readonly SortableContainerData<Item>[], activeId: SortableIdentifier, getItemId: (item: Item) => SortableIdentifier, options: SortableProjectionOptions): SortableContainerData<Item>[];
+export declare function sortableContainersEqual<Item>(left: readonly SortableContainerData<Item>[], right: readonly SortableContainerData<Item>[], getItemId: (item: Item) => SortableIdentifier): boolean;

package/dist/sortable/model.js

@@ -0,0 +1,64 @@
+export function cloneSortableContainers(containers) {
+    return containers.map((container) => ({ ...container, items: [...container.items] }));
+}
+export function findSortableLocation(containers, itemId, getItemId) {
+    for (const container of containers) {
+        const index = container.items.findIndex((item) => getItemId(item) === itemId);
+        if (index >= 0)
+            return { containerId: container.id, index };
+    }
+    return null;
+}
+export function projectSortableMove(containers, activeId, getItemId, options) {
+    const source = findSortableLocation(containers, activeId, getItemId);
+    const targetContainerIndex = containers.findIndex((container) => container.id === options.overContainerId);
+    if (!source || targetContainerIndex < 0 || containers[targetContainerIndex]?.disabled) {
+        return cloneSortableContainers(containers);
+    }
+    if (options.overItemId === activeId)
+        return cloneSortableContainers(containers);
+    const sourceContainerIndex = containers.findIndex((container) => container.id === source.containerId);
+    const result = cloneSortableContainers(containers);
+    const sourceItems = [...result[sourceContainerIndex].items];
+    const [activeItem] = sourceItems.splice(source.index, 1);
+    if (activeItem === undefined)
+        return result;
+    if (sourceContainerIndex === targetContainerIndex) {
+        const originalTargetIndex = options.overItemId === undefined
+            ? sourceItems.length
+            : containers[targetContainerIndex].items.findIndex((item) => getItemId(item) === options.overItemId);
+        if (originalTargetIndex < 0)
+            return result;
+        let targetIndex = originalTargetIndex;
+        if (source.index < originalTargetIndex)
+            targetIndex -= 1;
+        if (options.insertAfter)
+            targetIndex += 1;
+        targetIndex = Math.max(0, Math.min(targetIndex, sourceItems.length));
+        sourceItems.splice(targetIndex, 0, activeItem);
+        result[sourceContainerIndex] = { ...result[sourceContainerIndex], items: sourceItems };
+        return result;
+    }
+    const targetItems = [...result[targetContainerIndex].items];
+    let targetIndex = options.overItemId === undefined
+        ? targetItems.length
+        : targetItems.findIndex((item) => getItemId(item) === options.overItemId);
+    if (targetIndex < 0)
+        targetIndex = targetItems.length;
+    if (options.insertAfter)
+        targetIndex += 1;
+    targetIndex = Math.max(0, Math.min(targetIndex, targetItems.length));
+    targetItems.splice(targetIndex, 0, activeItem);
+    result[sourceContainerIndex] = { ...result[sourceContainerIndex], items: sourceItems };
+    result[targetContainerIndex] = { ...result[targetContainerIndex], items: targetItems };
+    return result;
+}
+export function sortableContainersEqual(left, right, getItemId) {
+    return left.length === right.length && left.every((container, containerIndex) => {
+        const other = right[containerIndex];
+        return other !== undefined
+            && container.id === other.id
+            && container.items.length === other.items.length
+            && container.items.every((item, itemIndex) => getItemId(item) === getItemId(other.items[itemIndex]));
+    });
+}

package/dist/sparkline/index.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+import type { SparklineDatum } from './model.js';
+export type SparklineType = 'line' | 'bar';
+export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    data: readonly SparklineDatum[];
+    type?: SparklineType;
+    width?: number;
+    height?: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    showPoints?: boolean;
+    showArea?: boolean;
+    showSummary?: boolean;
+    getLabel?: (value: number | null, index: number) => string;
+}
+export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
+export { createSparklineGeometry, normalizeSparklineData, sparklineDomain } from './model.js';
+export type { SparklineDatum, SparklinePoint } from './model.js';