@inkra/react 0.1.0 → 0.2.0

package/dist/timeline/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const markerPaths = [
+    { d: 'M16 7a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z' },
+    { d: 'M16 11v6l4 3' },
+];
+const copy = (value) => typeof value === 'string' ? _jsx(PencilText, { children: value }) : value;
+export const Timeline = forwardRef(function Timeline({ 'aria-label': ariaLabel = 'Timeline', className, items, orientation = 'vertical', ...props }, ref) {
+    return _jsx("ol", { ...props, ref: ref, "aria-label": ariaLabel, className: ['inkra-timeline', className].filter(Boolean).join(' '), "data-orientation": orientation, children: items.map((item, index) => _jsxs("li", { className: "inkra-timeline__item", children: [_jsxs("span", { className: "inkra-timeline__rail", "aria-hidden": "true", children: [_jsx(PencilSurface, { as: "span", className: "inkra-timeline__marker", variant: "quiet", radius: 8, seed: `timeline-${item.id}`, children: _jsx(PencilIcon, { paths: markerPaths, size: 24, sourceSize: 32 }) }), index < items.length - 1 && _jsx(PencilLine, { className: "inkra-timeline__connector", orientation: orientation === 'vertical' ? 'vertical' : 'horizontal', seed: `timeline-line-${item.id}` })] }), _jsxs("div", { className: "inkra-timeline__body", children: [item.dateTime
+                            ? _jsx("time", { className: "inkra-timeline__date", dateTime: item.dateTime, children: copy(item.date) })
+                            : _jsx("span", { className: "inkra-timeline__date", children: copy(item.date) }), _jsx("div", { className: "inkra-timeline__title", children: copy(item.title) }), item.description != null && _jsx("div", { className: "inkra-timeline__description", children: copy(item.description) }), item.content != null && _jsx("div", { className: "inkra-timeline__content", children: item.content })] })] }, item.id)) });
+});

package/dist/toast/index.d.ts

@@ -0,0 +1,27 @@
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import type { ToastManager as BaseToastManager } from '@base-ui/react/toast';
+import type { ReactNode } from 'react';
+export type ToastPlacement = 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type ToastSwipeDirection = 'up' | 'down' | 'left' | 'right';
+export type ToastManager<Data extends object = any> = BaseToastManager<Data>;
+export interface ToastProviderProps {
+    children?: ReactNode;
+    timeout?: number;
+    limit?: number;
+    toastManager?: ToastManager;
+    placement?: ToastPlacement;
+    swipeDirection?: ToastSwipeDirection | ToastSwipeDirection[];
+    closeLabel?: string;
+    viewportLabel?: string;
+    viewportClassName?: string;
+}
+declare function Provider({ children, closeLabel, limit, placement, swipeDirection, timeout, toastManager, viewportClassName, viewportLabel, }: ToastProviderProps): import("react").JSX.Element;
+export declare const useToastManager: typeof BaseToast.useToastManager;
+export declare const createToastManager: typeof BaseToast.createToastManager;
+export declare const Toast: {
+    Provider: typeof Provider;
+    useToastManager: typeof BaseToast.useToastManager;
+    createToastManager: typeof BaseToast.createToastManager;
+};
+export {};

package/dist/toast/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { Button } from '../Button.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef, } from '../overlay/themeBridge.js';
+const closePaths = [
+    { d: 'M6 6 18 18' },
+    { d: 'M18 6 6 18' },
+];
+function text(content) {
+    return typeof content === 'string' ? _jsx(PencilText, { children: content }) : content;
+}
+function toneOf(type) {
+    return type === 'success' || type === 'warning' || type === 'danger' || type === 'info'
+        ? type
+        : 'neutral';
+}
+function ToastThemeAnchor() {
+    const ref = usePortalTriggerRef(null);
+    return _jsx("span", { "aria-hidden": "true", className: "inkra-toast__theme-anchor", ref: ref });
+}
+function ToastQueue({ closeLabel, placement, swipeDirection, viewportClassName, viewportLabel, }) {
+    const { toasts } = BaseToast.useToastManager();
+    return (_jsx(BaseToast.Portal, { children: _jsx(PortalThemeBridge, { children: _jsx(BaseToast.Viewport, { "aria-label": viewportLabel, className: ['inkra-toast__viewport', viewportClassName].filter(Boolean).join(' '), "data-placement": placement, children: toasts.map((toastItem) => {
+                    const tone = toneOf(toastItem.type);
+                    return (_jsxs(BaseToast.Root, { className: "inkra-toast__root", "data-tone": tone, swipeDirection: swipeDirection, toast: toastItem, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toast__surface", seed: `toast-${toastItem.id}-${toastItem.updateKey ?? 0}`, variant: tone === 'neutral' ? 'paper' : 'quiet' }), _jsxs(BaseToast.Content, { className: "inkra-toast__content", children: [_jsxs("div", { className: "inkra-toast__copy", children: [toastItem.title != null && (_jsx(BaseToast.Title, { className: "inkra-toast__title", children: text(toastItem.title) })), toastItem.description != null && (_jsx(BaseToast.Description, { className: "inkra-toast__description", children: text(toastItem.description) }))] }), _jsxs("div", { className: "inkra-toast__actions", children: [toastItem.actionProps?.children != null && (_jsx(BaseToast.Action, { className: "inkra-toast__action", render: _jsx(Button, { size: "sm", variant: "outline" }) })), _jsx(BaseToast.Close, { "aria-label": closeLabel, className: "inkra-toast__close", render: _jsx(Button, { size: "icon-sm", variant: "ghost" }), children: _jsx(PencilIcon, { paths: closePaths, size: 20, sourceSize: 24, decorative: true }) })] })] })] }, toastItem.id));
+                }) }) }) }));
+}
+function Provider({ children, closeLabel = 'Close notification', limit, placement = 'bottom-end', swipeDirection = ['down', 'right'], timeout, toastManager, viewportClassName, viewportLabel = 'Notifications', }) {
+    return (_jsx(PortalThemeProvider, { children: _jsxs(BaseToast.Provider, { limit: limit, timeout: timeout, toastManager: toastManager, children: [_jsx(ToastThemeAnchor, {}), children, _jsx(ToastQueue, { closeLabel: closeLabel, placement: placement, swipeDirection: swipeDirection, viewportClassName: viewportClassName, viewportLabel: viewportLabel })] }) }));
+}
+export const useToastManager = BaseToast.useToastManager;
+export const createToastManager = BaseToast.createToastManager;
+export const Toast = { Provider, useToastManager, createToastManager };

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,17 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import type { ReactElement, ReactNode, RefAttributes } from 'react';
+export interface ToggleGroupRootProps<Value extends string = string> extends BaseToggleGroup.Props<Value> {
+    size?: 'sm' | 'md' | 'lg';
+}
+type RootComponent = <Value extends string = string>(props: ToggleGroupRootProps<Value> & RefAttributes<HTMLDivElement>) => ReactElement;
+export interface ToggleGroupItemProps<Value extends string = string> extends BaseToggle.Props<Value> {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+type ItemComponent = <Value extends string = string>(props: ToggleGroupItemProps<Value> & RefAttributes<HTMLButtonElement>) => ReactElement;
+export declare const ToggleGroup: {
+    Root: RootComponent;
+    Item: ItemComponent;
+};
+export {};

package/dist/toggle-group/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DirectionProvider } from '@base-ui/react/direction-provider';
+import { Toggle as BaseToggle } from '@base-ui/react/toggle';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { createContext, forwardRef, useContext } from 'react';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+function classes(base, className) {
+    if (typeof className === 'function') {
+        return (state) => [base, className(state)].filter(Boolean).join(' ');
+    }
+    return [base, className].filter(Boolean).join(' ');
+}
+const OrientationContext = createContext('horizontal');
+const RootImplementation = forwardRef(function ToggleGroupRoot({ children, className, dir, orientation = 'horizontal', size = 'md', ...props }, ref) {
+    const direction = dir === 'rtl' ? 'rtl' : 'ltr';
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsx(OrientationContext.Provider, { value: orientation, children: _jsxs(BaseToggleGroup, { ...props, className: classes('inkra-toggle-group', className), "data-size": size, dir: dir, orientation: orientation, ref: ref, children: [_jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__outline", seed: "toggle-group-outline", variant: "outline" }), children] }) }) }));
+});
+const ItemImplementation = forwardRef(function ToggleGroupItem({ children, className, endIcon, startIcon, value, ...props }, ref) {
+    const orientation = useContext(OrientationContext);
+    return (_jsxs(BaseToggle, { ...props, className: classes('inkra-toggle-group__item', className), ref: ref, value: value, children: [_jsx(PencilLine, { className: "inkra-toggle-group__divider", orientation: orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `toggle-${value ?? 'item'}-divider` }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__selection", seed: `toggle-${value ?? 'item'}`, variant: "selection" }), _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-toggle-group__focus", seed: `toggle-${value ?? 'item'}-focus`, variant: "outline" }), startIcon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-toggle-group__icon", children: startIcon }), _jsx("span", { className: "inkra-toggle-group__label", children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children }), endIcon != null && _jsx("span", { "aria-hidden": "true", className: "inkra-toggle-group__icon", children: endIcon })] }));
+});
+const Root = RootImplementation;
+const Item = ItemImplementation;
+export const ToggleGroup = { Root, Item };

package/dist/tokens.css

@@ -165,11 +165,11 @@
   --inkra-z-modal: 30;
   --inkra-z-tooltip: 40;
 
-  --inkra-stroke-width: 1.2px;
+  --inkra-stroke-width: 2px;
   --inkra-stroke-variation: 0.82;
   --inkra-stroke-grain: 0.7;
   --inkra-stroke-breaks: 0.2;
-  --inkra-stroke-amplitude: 0.6px;
+  --inkra-stroke-amplitude: 1.5px;
   --inkra-stroke-step: 0.8px;
   --inkra-stroke-passes: 3;
   --inkra-stroke-gain: 2.1;
@@ -181,19 +181,20 @@
   --inkra-badge-stroke-passes: 2;
 
   --inkra-wash-opacity: 0.48;
-  --inkra-wash-strength: 0.48;
-  --inkra-wash-spacing: 1.8px;
+  --inkra-wash-strength: 0.8;
+  --inkra-wash-spacing: 2px;
   --inkra-wash-roughness: 3;
+  --inkra-wash-angle: -45deg;
   --inkra-wash-inset: 2px;
   --inkra-wash-edge-reach: 0px;
   --inkra-quiet-wash-strength: 0.18;
   --inkra-badge-wash-strength: 0.25;
 
-  --inkra-letter-variation: 0.52;
-  --inkra-letter-breaks: 0.18;
-  --inkra-letter-outline: 0.96;
-  --inkra-letter-fill: 0.34;
-  --inkra-letter-grain: 0.45;
+  --inkra-letter-variation: 0.2;
+  --inkra-letter-breaks: 0.5;
+  --inkra-letter-outline: 0.9;
+  --inkra-letter-fill: 0.9;
+  --inkra-letter-grain: 0.6;
   --inkra-paper-tile-size: 384px;
   --inkra-render-dpr-cap: 2;
 }

package/dist/transfer/index.d.ts

@@ -0,0 +1,64 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TransferDirection, TransferSide } from './model.js';
+export interface TransferItem {
+    id: string;
+    label: ReactNode;
+    description?: ReactNode;
+    keywords?: readonly string[];
+    searchText?: string;
+    disabled?: boolean;
+}
+export interface TransferLabels {
+    sourceTitle?: ReactNode;
+    targetTitle?: ReactNode;
+    sourceSearchLabel?: string;
+    targetSearchLabel?: string;
+    sourceClearSearch?: string;
+    targetClearSearch?: string;
+    sourceSearchPlaceholder?: string;
+    targetSearchPlaceholder?: string;
+    selectAllSource?: string;
+    selectAllTarget?: string;
+    sourceEmpty?: ReactNode;
+    targetEmpty?: ReactNode;
+    sourceNoResults?: ReactNode;
+    targetNoResults?: ReactNode;
+    moveToTarget?: string;
+    moveToSource?: string;
+    moveSelectedToTarget?: string;
+    moveSelectedToSource?: string;
+    batchActions?: string;
+}
+export interface TransferCountDetails {
+    side: TransferSide;
+    visible: number;
+    total: number;
+    selected: number;
+}
+export interface TransferItemRenderState {
+    side: TransferSide;
+    selected: boolean;
+    disabled: boolean;
+    query: string;
+}
+export interface TransferChangeDetails {
+    direction: TransferDirection;
+    action: 'single' | 'batch';
+    movedKeys: string[];
+    movedItems: TransferItem[];
+}
+export interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: readonly TransferItem[];
+    targetKeys?: readonly string[];
+    defaultTargetKeys?: readonly string[];
+    onTargetKeysChange?: (targetKeys: string[], details: TransferChangeDetails) => void;
+    disabled?: boolean;
+    searchable?: boolean;
+    labels?: TransferLabels;
+    filterItem?: (item: TransferItem, query: string, side: TransferSide) => boolean;
+    renderItem?: (item: TransferItem, state: TransferItemRenderState) => ReactNode;
+    formatCount?: (details: TransferCountDetails) => ReactNode;
+}
+export declare const Transfer: import("react").ForwardRefExoticComponent<TransferProps & import("react").RefAttributes<HTMLDivElement>>;
+export { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems } from './model.js';
+export type { TransferDirection, TransferSide, TransferIdentity } from './model.js';

package/dist/transfer/index.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button.js';
+import { Input } from '../form/Input.js';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilLine } from '../PencilLine.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+import { Checkbox } from '../selection/Checkbox.js';
+import { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems, } from './model.js';
+const searchPaths = [
+    { d: 'M 11 4 A 7 7 0 1 0 11 18 A 7 7 0 1 0 11 4 M 16 16 L 21 21' },
+];
+const rightPaths = [{ d: 'M 5 12 L 19 12 M 13 6 L 19 12 L 13 18' }];
+const leftPaths = [{ d: 'M 19 12 L 5 12 M 11 6 L 5 12 L 11 18' }];
+const defaultLabels = {
+    sourceTitle: 'Available',
+    targetTitle: 'Selected',
+    sourceSearchLabel: 'Search available items',
+    targetSearchLabel: 'Search selected items',
+    sourceClearSearch: 'Clear available item search',
+    targetClearSearch: 'Clear selected item search',
+    sourceSearchPlaceholder: 'Search available',
+    targetSearchPlaceholder: 'Search selected',
+    selectAllSource: 'Select all visible available items',
+    selectAllTarget: 'Select all visible selected items',
+    sourceEmpty: 'No available items',
+    targetEmpty: 'No selected items',
+    sourceNoResults: 'No available items match this search',
+    targetNoResults: 'No selected items match this search',
+    moveToTarget: 'Move to selected',
+    moveToSource: 'Move to available',
+    moveSelectedToTarget: 'Move selected visible items to selected',
+    moveSelectedToSource: 'Move selected visible items to available',
+    batchActions: 'Transfer selected visible items',
+};
+function searchableText(item) {
+    const parts = [
+        item.searchText,
+        typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : undefined,
+        typeof item.description === 'string' || typeof item.description === 'number' ? String(item.description) : undefined,
+        ...(item.keywords ?? []),
+    ];
+    return parts.filter(Boolean).join(' ').toLocaleLowerCase();
+}
+function defaultFilter(item, query) {
+    return searchableText(item).includes(query.trim().toLocaleLowerCase());
+}
+function defaultCount({ visible, total, selected }) {
+    return selected > 0 ? `${selected} selected · ${visible}/${total}` : `${visible}/${total}`;
+}
+function itemCopy(item) {
+    return _jsxs("span", { className: "inkra-transfer__item-copy", children: [_jsx("span", { className: "inkra-transfer__item-label", children: typeof item.label === 'string' || typeof item.label === 'number'
+                    ? _jsx(PencilText, { children: String(item.label) })
+                    : item.label }), item.description == null ? null : _jsx("span", { className: "inkra-transfer__item-description", children: item.description })] });
+}
+export const Transfer = forwardRef(function Transfer({ className, defaultTargetKeys = [], disabled = false, filterItem, formatCount = defaultCount, items, labels: labelOverrides, onTargetKeysChange, renderItem, searchable = true, targetKeys, ...props }, ref) {
+    const generatedId = useId();
+    const controlled = targetKeys !== undefined;
+    const uniqueItems = useMemo(() => uniqueTransferItems(items), [items]);
+    const [uncontrolledTargetKeys, setUncontrolledTargetKeys] = useState(() => normalizeTargetKeys(items, defaultTargetKeys));
+    const currentTargetKeys = normalizeTargetKeys(uniqueItems, controlled ? targetKeys : uncontrolledTargetKeys);
+    const panels = splitTransferItems(uniqueItems, currentTargetKeys);
+    const labels = { ...defaultLabels, ...labelOverrides };
+    const [queries, setQueries] = useState({ source: '', target: '' });
+    const [selected, setSelected] = useState(() => ({ source: new Set(), target: new Set() }));
+    const [pendingFocus, setPendingFocus] = useState(null);
+    const itemRefs = useRef(new Map());
+    const panelRefs = useRef({ source: null, target: null });
+    const visible = (side) => panels[side].filter(item => {
+        const query = queries[side];
+        return query.length === 0 || (filterItem ? filterItem(item, query, side) : defaultFilter(item, query));
+    });
+    const visibleItems = { source: visible('source'), target: visible('target') };
+    useEffect(() => {
+        const valid = new Set(uniqueItems.map(item => item.id));
+        setSelected(current => {
+            const source = new Set([...current.source].filter(key => valid.has(key) && !currentTargetKeys.includes(key)));
+            const target = new Set([...current.target].filter(key => valid.has(key) && currentTargetKeys.includes(key)));
+            if (source.size === current.source.size && target.size === current.target.size)
+                return current;
+            return { source, target };
+        });
+    }, [items, currentTargetKeys.join('\u0000')]);
+    useEffect(() => {
+        if (!pendingFocus)
+            return;
+        const targetContainsItem = pendingFocus.side === 'target'
+            ? currentTargetKeys.includes(pendingFocus.id)
+            : !currentTargetKeys.includes(pendingFocus.id);
+        const control = targetContainsItem ? itemRefs.current.get(`${pendingFocus.side}:${pendingFocus.id}`) : null;
+        (control ?? panelRefs.current[pendingFocus.side])?.focus({ preventScroll: true });
+        setPendingFocus(null);
+    }, [pendingFocus, currentTargetKeys.join('\u0000')]);
+    const setItemSelected = (side, id, checked) => {
+        setSelected(current => {
+            const next = new Set(current[side]);
+            if (checked)
+                next.add(id);
+            else
+                next.delete(id);
+            return { ...current, [side]: next };
+        });
+    };
+    const selectableVisible = (side) => visibleItems[side].filter(item => !item.disabled && !disabled);
+    const toggleAll = (side, checked) => {
+        const ids = selectableVisible(side).map(item => item.id);
+        setSelected(current => {
+            const next = new Set(current[side]);
+            ids.forEach(id => checked ? next.add(id) : next.delete(id));
+            return { ...current, [side]: next };
+        });
+    };
+    const move = (keys, direction, action) => {
+        const sourceSide = direction === 'to-target' ? 'source' : 'target';
+        const destinationSide = direction === 'to-target' ? 'target' : 'source';
+        const allowed = new Set(panels[sourceSide].filter(item => !item.disabled && !disabled).map(item => item.id));
+        const movedKeys = keys.filter((key, index) => allowed.has(key) && keys.indexOf(key) === index);
+        if (movedKeys.length === 0)
+            return;
+        const next = moveTransferKeys(uniqueItems, currentTargetKeys, movedKeys, direction);
+        if (!controlled)
+            setUncontrolledTargetKeys(next);
+        setSelected(current => {
+            const source = new Set(current[sourceSide]);
+            movedKeys.forEach(key => source.delete(key));
+            return { ...current, [sourceSide]: source };
+        });
+        setPendingFocus({ id: movedKeys[0], side: destinationSide });
+        onTargetKeysChange?.(next, {
+            action,
+            direction,
+            movedKeys,
+            movedItems: movedKeys.map(key => uniqueItems.find(item => item.id === key)).filter((item) => item !== undefined),
+        });
+    };
+    const renderPanel = (side) => {
+        const source = side === 'source';
+        const panelItems = panels[side];
+        const shown = visibleItems[side];
+        const selectable = selectableVisible(side);
+        const selectedVisible = selectable.filter(item => selected[side].has(item.id));
+        const allVisibleSelected = selectable.length > 0 && selectedVisible.length === selectable.length;
+        const someVisibleSelected = selectedVisible.length > 0 && !allVisibleSelected;
+        const titleId = `${generatedId}-${side}-title`;
+        const panelTitle = source ? labels.sourceTitle : labels.targetTitle;
+        const count = formatCount({ side, visible: shown.length, total: panelItems.length, selected: selectedVisible.length });
+        const empty = panelItems.length === 0
+            ? source ? labels.sourceEmpty : labels.targetEmpty
+            : source ? labels.sourceNoResults : labels.targetNoResults;
+        const searchLabel = source ? labels.sourceSearchLabel : labels.targetSearchLabel;
+        const clearSearchLabel = source ? labels.sourceClearSearch : labels.targetClearSearch;
+        const searchPlaceholder = source ? labels.sourceSearchPlaceholder : labels.targetSearchPlaceholder;
+        const selectAllLabel = source ? labels.selectAllSource : labels.selectAllTarget;
+        const direction = source ? 'to-target' : 'to-source';
+        const moveLabel = source ? labels.moveToTarget : labels.moveToSource;
+        return _jsxs(PencilSurface, { "aria-labelledby": titleId, as: "section", className: "inkra-transfer__panel", "data-searchable": searchable || undefined, "data-side": side, ref: element => { panelRefs.current[side] = element; }, seed: `inkra-transfer-${generatedId}-${side}`, tabIndex: -1, variant: "paper", children: [_jsxs("header", { className: "inkra-transfer__header", children: [_jsx("span", { className: "inkra-transfer__title", id: titleId, children: typeof panelTitle === 'string' ? _jsx(PencilText, { children: panelTitle }) : panelTitle }), _jsx("span", { "aria-live": "polite", className: "inkra-transfer__count", children: count })] }), _jsx(PencilLine, { "aria-hidden": "true", className: "inkra-transfer__divider", seed: `inkra-transfer-${generatedId}-${side}-header` }), searchable && _jsx(Input, { "aria-label": searchLabel, clearable: true, clearButtonLabel: clearSearchLabel, disabled: disabled, onValueChange: value => setQueries(current => ({ ...current, [side]: value })), placeholder: searchPlaceholder, startIcon: _jsx(PencilIcon, { decorative: true, paths: searchPaths, size: 18, sourceSize: 24 }), type: "search", value: queries[side], variant: "outline" }), _jsx("div", { className: "inkra-transfer__selection-bar", children: _jsx(Checkbox, { checked: allVisibleSelected, disabled: disabled || selectable.length === 0, indeterminate: someVisibleSelected, label: selectAllLabel, onCheckedChange: checked => toggleAll(side, checked), seed: `inkra-transfer-${generatedId}-${side}-all` }) }), _jsx("ul", { className: "inkra-transfer__list", "aria-labelledby": titleId, children: shown.length === 0 ? _jsx("li", { className: "inkra-transfer__empty", children: empty }) : shown.map(item => {
+                        const itemDisabled = disabled || item.disabled === true;
+                        const itemSelected = selected[side].has(item.id);
+                        const copy = renderItem?.(item, { side, selected: itemSelected, disabled: itemDisabled, query: queries[side] }) ?? itemCopy(item);
+                        return _jsxs("li", { className: "inkra-transfer__item", "data-disabled": itemDisabled || undefined, "data-transfer-item-id": item.id, children: [_jsx(Checkbox, { checked: itemSelected, disabled: itemDisabled, label: copy, onCheckedChange: checked => setItemSelected(side, item.id, checked), ref: element => {
+                                        const key = `${side}:${item.id}`;
+                                        if (element)
+                                            itemRefs.current.set(key, element);
+                                        else
+                                            itemRefs.current.delete(key);
+                                    }, seed: `inkra-transfer-${generatedId}-${side}-${item.id}` }), _jsx(Button, { "aria-label": `${moveLabel}: ${typeof item.label === 'string' || typeof item.label === 'number' ? String(item.label) : item.searchText ?? item.id}`, disabled: itemDisabled, onClick: () => move([item.id], direction, 'single'), seed: `inkra-transfer-${generatedId}-${side}-${item.id}-move`, size: "icon-sm", title: moveLabel, variant: "ghost", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: source ? rightPaths : leftPaths, size: 18, sourceSize: 24 }) })] }, item.id);
+                    }) })] });
+    };
+    const sourceBatchKeys = selectableVisible('source').filter(item => selected.source.has(item.id)).map(item => item.id);
+    const targetBatchKeys = selectableVisible('target').filter(item => selected.target.has(item.id)).map(item => item.id);
+    return _jsxs("div", { ...props, "aria-disabled": disabled || undefined, className: ['inkra-transfer', className].filter(Boolean).join(' '), "data-disabled": disabled || undefined, ref: ref, children: [renderPanel('source'), _jsxs("div", { className: "inkra-transfer__actions", role: "group", "aria-label": labels.batchActions, children: [_jsx(Button, { "aria-label": labels.moveSelectedToTarget, disabled: disabled || sourceBatchKeys.length === 0, onClick: () => move(sourceBatchKeys, 'to-target', 'batch'), seed: `inkra-transfer-${generatedId}-batch-target`, size: "icon", title: labels.moveSelectedToTarget, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: rightPaths, size: 20, sourceSize: 24 }) }), _jsx(Button, { "aria-label": labels.moveSelectedToSource, disabled: disabled || targetBatchKeys.length === 0, onClick: () => move(targetBatchKeys, 'to-source', 'batch'), seed: `inkra-transfer-${generatedId}-batch-source`, size: "icon", title: labels.moveSelectedToSource, variant: "outline", children: _jsx(PencilIcon, { className: "inkra-transfer__direction-icon", decorative: true, paths: leftPaths, size: 20, sourceSize: 24 }) })] }), renderPanel('target')] });
+});
+export { moveTransferKeys, normalizeTargetKeys, splitTransferItems, uniqueTransferItems } from './model.js';

package/dist/transfer/model.d.ts

@@ -0,0 +1,12 @@
+export type TransferDirection = 'to-target' | 'to-source';
+export type TransferSide = 'source' | 'target';
+export interface TransferIdentity {
+    id: string;
+}
+export declare function uniqueTransferItems<Item extends TransferIdentity>(items: readonly Item[]): Item[];
+export declare function normalizeTargetKeys<Item extends TransferIdentity>(items: readonly Item[], targetKeys: readonly string[]): string[];
+export declare function splitTransferItems<Item extends TransferIdentity>(items: readonly Item[], targetKeys: readonly string[]): {
+    source: Item[];
+    target: Item[];
+};
+export declare function moveTransferKeys<Item extends TransferIdentity>(items: readonly Item[], targetKeys: readonly string[], movedKeys: readonly string[], direction: TransferDirection): string[];

package/dist/transfer/model.js

@@ -0,0 +1,33 @@
+export function uniqueTransferItems(items) {
+    const seen = new Set();
+    return items.filter(item => {
+        if (seen.has(item.id))
+            return false;
+        seen.add(item.id);
+        return true;
+    });
+}
+export function normalizeTargetKeys(items, targetKeys) {
+    const uniqueItems = uniqueTransferItems(items);
+    const requested = new Set(targetKeys);
+    const knownIds = new Set(uniqueItems.map(item => item.id));
+    const orderedKnown = uniqueItems.filter(item => requested.has(item.id)).map(item => item.id);
+    const unknown = targetKeys.filter((key, index) => !knownIds.has(key) && targetKeys.indexOf(key) === index);
+    return [...orderedKnown, ...unknown];
+}
+export function splitTransferItems(items, targetKeys) {
+    const target = new Set(targetKeys);
+    const uniqueItems = uniqueTransferItems(items);
+    return {
+        source: uniqueItems.filter(item => !target.has(item.id)),
+        target: uniqueItems.filter(item => target.has(item.id)),
+    };
+}
+export function moveTransferKeys(items, targetKeys, movedKeys, direction) {
+    const next = new Set(targetKeys);
+    if (direction === 'to-target')
+        movedKeys.forEach(key => next.add(key));
+    else
+        movedKeys.forEach(key => next.delete(key));
+    return normalizeTargetKeys(items, [...next]);
+}

package/dist/tree/index.d.ts

@@ -0,0 +1,39 @@
+import type { Key, Selection, TreeItemProps as AriaTreeItemProps, TreeProps as AriaTreeProps } from 'react-aria-components/Tree';
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';
+export type TreeKey = Key;
+export type TreeSelection = Selection;
+export type TreeRootProps<T extends object = object> = Omit<AriaTreeProps<T>, 'className' | 'style' | 'renderEmptyState'> & {
+    className?: string;
+    style?: CSSProperties;
+    emptyState?: ReactNode;
+};
+export type TreeItemProps<T = object> = Omit<AriaTreeItemProps<T>, 'className'> & {
+    className?: string;
+};
+export interface TreeItemContentState {
+    isExpanded: boolean;
+    hasChildItems: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}
+export interface TreeItemContentProps {
+    children: ReactNode;
+    className?: string;
+    icon?: ReactNode | ((state: TreeItemContentState) => ReactNode);
+    disclosureIcon?: ReactNode | ((state: TreeItemContentState) => ReactNode);
+    expandLabel?: string;
+    collapseLabel?: string;
+}
+export interface TreeItemTitleProps extends HTMLAttributes<HTMLSpanElement> {
+}
+export interface TreeItemDescriptionProps extends HTMLAttributes<HTMLSpanElement> {
+}
+export declare const Tree: {
+    Root: <T extends object = object>(props: TreeRootProps<T> & RefAttributes<HTMLDivElement>) => ReactElement | null;
+    Item: import("react").ForwardRefExoticComponent<Omit<AriaTreeItemProps<object>, "className"> & {
+        className?: string;
+    } & RefAttributes<HTMLDivElement>>;
+    ItemContent: import("react").ForwardRefExoticComponent<TreeItemContentProps & RefAttributes<Element>>;
+    ItemTitle: import("react").ForwardRefExoticComponent<TreeItemTitleProps & RefAttributes<HTMLSpanElement>>;
+    ItemDescription: import("react").ForwardRefExoticComponent<TreeItemDescriptionProps & RefAttributes<HTMLSpanElement>>;
+};

package/dist/tree/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tree as AriaTree, TreeItem as AriaTreeItem, TreeItemContent as AriaTreeItemContent, } from 'react-aria-components/Tree';
+import { Button as AriaButton } from 'react-aria-components/Button';
+import { forwardRef } from 'react';
+import { PencilIcon } from '../PencilIcon.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+const chevronIcon = [{ d: 'M 7 10 L 12 15 L 17 10' }];
+function TreeRootInner({ className, emptyState = 'No items', selectionMode = 'single', selectionBehavior = 'toggle', ...props }, ref) {
+    return _jsx(AriaTree, { ...props, ref: ref, className: ['inkra-tree', className].filter(Boolean).join(' '), selectionMode: selectionMode, selectionBehavior: selectionBehavior, renderEmptyState: () => _jsx("div", { className: "inkra-tree__empty", children: emptyState }) });
+}
+const TreeRoot = forwardRef(TreeRootInner);
+const TreeItem = forwardRef(function TreeItem({ className, ...props }, ref) {
+    return _jsx(AriaTreeItem, { ...props, ref: ref, className: ['inkra-tree__item', className].filter(Boolean).join(' ') });
+});
+const TreeItemContent = forwardRef(function TreeItemContent({ children, className, icon, disclosureIcon, expandLabel = 'Expand item', collapseLabel = 'Collapse item', }, ref) {
+    return _jsx(AriaTreeItemContent, { ref: ref, children: ({ hasChildItems, isExpanded, isSelected, isFocusVisible, isDisabled, level, id, }) => {
+            const state = { isExpanded, hasChildItems, isSelected, isDisabled };
+            const resolvedIcon = typeof icon === 'function' ? icon(state) : icon;
+            const resolvedDisclosure = typeof disclosureIcon === 'function' ? disclosureIcon(state) : disclosureIcon;
+            return _jsxs("div", { className: ['inkra-tree__item-content', className].filter(Boolean).join(' '), "data-expanded": isExpanded || undefined, "data-selected": isSelected || undefined, "data-disabled": isDisabled || undefined, "data-has-icon": resolvedIcon != null || undefined, style: { '--inkra-tree-level': level }, children: [isSelected && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__selection", variant: "selection", seed: `tree-${String(id)}-selection` }), isFocusVisible && _jsx(PencilSurface, { "aria-hidden": "true", as: "span", className: "inkra-tree__focus", variant: "outline", seed: `tree-${String(id)}-focus` }), hasChildItems ? _jsx(AriaButton, { slot: "chevron", className: "inkra-tree__disclosure", "aria-label": isExpanded ? collapseLabel : expandLabel, children: ({ isFocusVisible: disclosureFocused }) => _jsxs(_Fragment, { children: [disclosureFocused && _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-tree__disclosure-focus", variant: "outline" }), _jsx("span", { className: "inkra-tree__disclosure-icon", "aria-hidden": "true", children: disclosureIcon === undefined ? _jsx(PencilIcon, { className: "inkra-tree__chevron", paths: chevronIcon, size: 18, sourceSize: 24 }) : resolvedDisclosure })] }) }) : _jsx("span", { className: "inkra-tree__disclosure-spacer", "aria-hidden": "true" }), resolvedIcon != null && _jsx("span", { className: "inkra-tree__icon", "aria-hidden": "true", children: resolvedIcon }), _jsx("span", { className: "inkra-tree__copy", children: children })] });
+        } });
+});
+const TreeItemTitle = forwardRef(function TreeItemTitle({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__title', className].filter(Boolean).join(' '), children: typeof children === 'string' ? _jsx(PencilText, { children: children }) : children });
+});
+const TreeItemDescription = forwardRef(function TreeItemDescription({ className, children, ...props }, ref) {
+    return _jsx("span", { ...props, ref: ref, className: ['inkra-tree__description', className].filter(Boolean).join(' '), children: children });
+});
+export const Tree = {
+    Root: TreeRoot,
+    Item: TreeItem,
+    ItemContent: TreeItemContent,
+    ItemTitle: TreeItemTitle,
+    ItemDescription: TreeItemDescription,
+};

package/dist/tree-select/index.d.ts

@@ -0,0 +1,59 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { TreeSelectBranchSelection, TreeSelectNode, TreeSelectSelectionPropagation } from './model.js';
+export type { TreeSelectBranchSelection, TreeSelectNode, TreeSelectSelectionPropagation, } from './model.js';
+export interface TreeSelectRenderLabelState {
+    branch: boolean;
+    disabled: boolean;
+    selected: boolean;
+    query: string;
+}
+export interface TreeSelectChangeDetails {
+    id?: string;
+    node?: TreeSelectNode;
+    reason: 'select' | 'clear';
+    selected?: boolean;
+}
+interface TreeSelectCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    items: readonly TreeSelectNode[];
+    branchSelection?: TreeSelectBranchSelection;
+    selectionPropagation?: TreeSelectSelectionPropagation;
+    renderLabel?: (node: TreeSelectNode, state: TreeSelectRenderLabelState) => ReactNode;
+    renderValue?: (nodes: readonly TreeSelectNode[], ids: readonly string[]) => ReactNode;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyContent?: ReactNode;
+    clearable?: boolean;
+    clearLabel?: string;
+    treeLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    form?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onExpandedIdsChange?: (ids: string[]) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    collisionPadding?: number;
+}
+export type TreeSelectProps = TreeSelectCommonProps & ({
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null, details: TreeSelectChangeDetails) => void;
+} | {
+    multiple: true;
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[], details: TreeSelectChangeDetails) => void;
+});
+export declare const TreeSelect: import("react").ForwardRefExoticComponent<TreeSelectProps & import("react").RefAttributes<HTMLDivElement>>;