@inkra/react 0.0.0-stage → 0.2.0

package/dist/tokens.css

@@ -0,0 +1,356 @@
+:root,
+[data-theme="light"],
+[data-inkra-theme="light"],
+[data-theme="auto"],
+[data-inkra-theme="auto"] {
+  color-scheme: light;
+
+  --inkra-ocean-50: #c4e7f0;
+  --inkra-ocean-100: #b4dfe9;
+  --inkra-ocean-200: #a2d3df;
+  --inkra-ocean-300: #93c7d0;
+  --inkra-ocean-400: #78a9b3;
+  --inkra-ocean-500: #5ca0b0;
+  --inkra-ocean-600: #4b96aa;
+  --inkra-ocean-700: #3e7b8c;
+  --inkra-ocean-800: #305e6b;
+  --inkra-ocean-900: #294c56;
+  --inkra-ocean-950: #172f36;
+  --inkra-graphite-50: #f5f6f5;
+  --inkra-graphite-100: #e6e9e7;
+  --inkra-graphite-200: #ced4d0;
+  --inkra-graphite-300: #acb7b0;
+  --inkra-graphite-400: #85958c;
+  --inkra-graphite-500: #64766b;
+  --inkra-graphite-600: #4d5e54;
+  --inkra-graphite-700: #3b4b41;
+  --inkra-graphite-800: #293d33;
+  --inkra-graphite-900: #202d25;
+  --inkra-graphite-950: #141c17;
+  --inkra-cinnabar-50: #fcf3f0;
+  --inkra-cinnabar-100: #f6e2da;
+  --inkra-cinnabar-200: #ecc2b4;
+  --inkra-cinnabar-300: #dfa492;
+  --inkra-cinnabar-400: #cf806b;
+  --inkra-cinnabar-500: #b96350;
+  --inkra-cinnabar-600: #994f3f;
+  --inkra-cinnabar-700: #803c30;
+  --inkra-cinnabar-800: #672e26;
+  --inkra-cinnabar-900: #51251f;
+  --inkra-cinnabar-950: #311510;
+  --inkra-pine-50: #f1f7f0;
+  --inkra-pine-100: #e0eedc;
+  --inkra-pine-200: #c5ddbd;
+  --inkra-pine-300: #a4c69b;
+  --inkra-pine-400: #82ad7b;
+  --inkra-pine-500: #629568;
+  --inkra-pine-600: #4c7952;
+  --inkra-pine-700: #395e40;
+  --inkra-pine-800: #294a32;
+  --inkra-pine-900: #203b29;
+  --inkra-pine-950: #112218;
+  --inkra-warm-50: #fdfcf8;
+  --inkra-warm-100: #f8f5ec;
+  --inkra-warm-200: #f4f0e3;
+  --inkra-warm-300: #f2ead7;
+  --inkra-warm-400: #ddd6c4;
+  --inkra-warm-500: #b6b39d;
+  --inkra-warm-600: #8d8b78;
+  --inkra-warm-700: #5f6052;
+  --inkra-warm-800: #3f4037;
+  --inkra-warm-900: #292920;
+  --inkra-warm-950: #1b1b17;
+
+  --inkra-paper: #f4f0e3;
+  --inkra-surface: #fdfcf8;
+  --inkra-surface-muted: #f2ead7;
+  --inkra-ink: #172b21;
+  --inkra-ink-muted: #45594c;
+  --inkra-ink-subtle: #616d63;
+  --inkra-accent: #4b96aa;
+  --inkra-accent-strong: #305e6b;
+  --inkra-accent-soft: #78a9b3;
+  --inkra-on-accent: #173b45;
+  --inkra-coral: #994f3f;
+  --inkra-coral-soft: #d49b8b;
+  --inkra-blue: #4d91a0;
+  --inkra-blue-soft: #87bbc0;
+  --inkra-border: #99aa9b;
+  --inkra-border-strong: #536d59;
+  --inkra-focus: #305e6b;
+  --inkra-danger: #873e36;
+  --inkra-danger-soft: #d49b8b;
+  --inkra-success-pigment: #629568;
+  --inkra-success-foreground: #21472f;
+  --inkra-success-surface: var(--inkra-paper);
+  --inkra-warning-surface: var(--inkra-paper);
+  --inkra-danger-surface: var(--inkra-paper);
+  --inkra-info-surface: var(--inkra-paper);
+  --inkra-warning-pigment: #e6c17b;
+  --inkra-warning-foreground: #6b4d1f;
+  --inkra-danger-pigment: #d49b8b;
+  --inkra-danger-foreground: #873e36;
+  --inkra-info-pigment: #4b96aa;
+  --inkra-info-foreground: #173b45;
+  --inkra-selection: #d6b781;
+  --inkra-selection-pigment: #769566;
+  --inkra-selection-foreground: #173b2b;
+  --inkra-overlay: rgb(24 35 28 / 20%);
+  --inkra-shadow-overlay: 0 3px 12px rgb(24 35 28 / 20%);
+
+  --inkra-font-hand: "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti",
+    "Trip Map Hand", cursive;
+  --inkra-font-body: var(--inkra-font-hand);
+  --inkra-font-display: var(--inkra-font-hand);
+  --inkra-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --inkra-text-xs: 12px;
+  --inkra-text-sm: 13px;
+  --inkra-text-md: 15px;
+  --inkra-text-lg: 17px;
+  --inkra-text-xl: 20px;
+  --inkra-text-2xl: 24px;
+  --inkra-text-3xl: 28px;
+  --inkra-weight-regular: 400;
+  --inkra-weight-medium: 400;
+  --inkra-weight-semibold: 400;
+  --inkra-line-tight: 1.2;
+  --inkra-line-ui: 1.45;
+  --inkra-line-body: 1.6;
+  --inkra-letter-spacing: 0;
+
+  --inkra-space-0: 0;
+  --inkra-space-1: 4px;
+  --inkra-space-2: 8px;
+  --inkra-space-3: 12px;
+  --inkra-space-4: 16px;
+  --inkra-space-5: 20px;
+  --inkra-space-6: 24px;
+  --inkra-space-7: 28px;
+  --inkra-space-8: 32px;
+  --inkra-space-9: 36px;
+  --inkra-space-10: 40px;
+  --inkra-space-11: 44px;
+  --inkra-space-12: 48px;
+  --inkra-space-13: 52px;
+  --inkra-space-14: 56px;
+  --inkra-space-15: 60px;
+  --inkra-space-16: 64px;
+  --inkra-radius-none: 0;
+  --inkra-radius-sm: 3px;
+  --inkra-radius-md: 6px;
+  --inkra-radius-lg: 8px;
+  --inkra-control-xs: 32px;
+  --inkra-control-sm: 36px;
+  --inkra-control-md: 44px;
+  --inkra-control-lg: 48px;
+  --inkra-touch-target: 44px;
+  --inkra-icon-xs: 14px;
+  --inkra-icon-sm: 16px;
+  --inkra-icon-md: 20px;
+  --inkra-icon-lg: 24px;
+  --inkra-content-width: 72rem;
+  --inkra-reading-width: 44rem;
+  --inkra-sidebar-width: 15rem;
+  --inkra-header-height: 64px;
+  --inkra-focus-width: 2px;
+  --inkra-focus-offset: 3px;
+
+  --inkra-motion-fast: 120ms;
+  --inkra-motion-normal: 180ms;
+  --inkra-motion-slow: 420ms;
+  --inkra-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+  --inkra-z-base: 0;
+  --inkra-z-sticky: 10;
+  --inkra-z-popover: 20;
+  --inkra-z-modal: 30;
+  --inkra-z-tooltip: 40;
+
+  --inkra-stroke-width: 2px;
+  --inkra-stroke-variation: 0.82;
+  --inkra-stroke-grain: 0.7;
+  --inkra-stroke-breaks: 0.2;
+  --inkra-stroke-amplitude: 1.5px;
+  --inkra-stroke-step: 0.8px;
+  --inkra-stroke-passes: 3;
+  --inkra-stroke-gain: 2.1;
+  --inkra-action-stroke-width: 1.35px;
+  --inkra-action-stroke-gain: 2.5;
+  --inkra-quiet-stroke-width: 0.75px;
+  --inkra-quiet-stroke-passes: 2;
+  --inkra-badge-stroke-width: 0.9px;
+  --inkra-badge-stroke-passes: 2;
+
+  --inkra-wash-opacity: 0.48;
+  --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.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;
+}
+
+[data-theme="dark"],
+[data-inkra-theme="dark"] {
+  color-scheme: dark;
+
+  --inkra-paper: #191d1e;
+  --inkra-surface: #272d2e;
+  --inkra-surface-muted: #23292a;
+  --inkra-ink: #f5f6ed;
+  --inkra-ink-muted: #becbbb;
+  --inkra-ink-subtle: #96a591;
+  --inkra-accent: #82bdcb;
+  --inkra-accent-strong: #d3e9ee;
+  --inkra-accent-soft: #8cb2ba;
+  --inkra-on-accent: #edf8fa;
+  --inkra-coral: #ffd1c6;
+  --inkra-coral-soft: #292920;
+  --inkra-blue: #78b8c8;
+  --inkra-blue-soft: #78a9b3;
+  --inkra-border: #a7b5a6;
+  --inkra-border-strong: #a7b5a6;
+  --inkra-focus: #a1c9d3;
+  --inkra-danger: #ffd1c6;
+  --inkra-danger-soft: #d49b8b;
+  --inkra-success-pigment: #76a37b;
+  --inkra-success-foreground: #d5efd7;
+  --inkra-success-surface: #20372b;
+  --inkra-warning-surface: #3a3020;
+  --inkra-danger-surface: #3b2727;
+  --inkra-info-surface: #20343c;
+  --inkra-warning-pigment: #d6b67c;
+  --inkra-warning-foreground: #ffe5b3;
+  --inkra-danger-pigment: #c98f82;
+  --inkra-danger-foreground: #ffd1c6;
+  --inkra-info-pigment: #82bdcb;
+  --inkra-info-foreground: #d8f1f5;
+  --inkra-selection: #d6b781;
+  --inkra-selection-pigment: #9bbd85;
+  --inkra-selection-foreground: #e9f3e3;
+  --inkra-overlay: rgb(4 4 3 / 64%);
+  --inkra-shadow-overlay: 0 8px 28px rgb(0 0 0 / 28%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]):not([data-inkra-theme]),
+  [data-theme="auto"],
+  [data-inkra-theme="auto"] {
+    color-scheme: dark;
+
+    --inkra-paper: #191d1e;
+    --inkra-surface: #272d2e;
+    --inkra-surface-muted: #23292a;
+    --inkra-ink: #f5f6ed;
+    --inkra-ink-muted: #becbbb;
+    --inkra-ink-subtle: #96a591;
+    --inkra-accent: #82bdcb;
+    --inkra-accent-strong: #d3e9ee;
+    --inkra-accent-soft: #8cb2ba;
+    --inkra-on-accent: #edf8fa;
+    --inkra-coral: #ffd1c6;
+    --inkra-coral-soft: #292920;
+    --inkra-blue: #78b8c8;
+    --inkra-blue-soft: #78a9b3;
+    --inkra-border: #a7b5a6;
+    --inkra-border-strong: #a7b5a6;
+    --inkra-focus: #a1c9d3;
+    --inkra-danger: #ffd1c6;
+    --inkra-danger-soft: #d49b8b;
+    --inkra-success-pigment: #76a37b;
+    --inkra-success-foreground: #d5efd7;
+    --inkra-success-surface: #20372b;
+    --inkra-warning-surface: #3a3020;
+    --inkra-danger-surface: #3b2727;
+    --inkra-info-surface: #20343c;
+    --inkra-warning-pigment: #d6b67c;
+    --inkra-warning-foreground: #ffe5b3;
+    --inkra-danger-pigment: #c98f82;
+    --inkra-danger-foreground: #ffd1c6;
+    --inkra-info-pigment: #82bdcb;
+    --inkra-info-foreground: #d8f1f5;
+    --inkra-selection: #d6b781;
+    --inkra-selection-pigment: #9bbd85;
+    --inkra-selection-foreground: #e9f3e3;
+    --inkra-overlay: rgb(4 4 3 / 64%);
+    --inkra-shadow-overlay: 0 8px 28px rgb(0 0 0 / 28%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-motion-fast: 0ms;
+    --inkra-motion-normal: 0ms;
+    --inkra-motion-slow: 0ms;
+  }
+}
+
+@media (prefers-contrast: more) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-ink-muted: var(--inkra-ink);
+    --inkra-border: var(--inkra-border-strong);
+    --inkra-focus-width: 3px;
+    --inkra-wash-opacity: 0.18;
+    --inkra-wash-strength: 0.18;
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-theme],
+  [data-inkra-theme] {
+    --inkra-paper: Canvas;
+    --inkra-surface: Canvas;
+    --inkra-surface-muted: Canvas;
+    --inkra-ink: CanvasText;
+    --inkra-ink-muted: CanvasText;
+    --inkra-ink-subtle: CanvasText;
+    --inkra-accent: Highlight;
+    --inkra-accent-strong: Highlight;
+    --inkra-accent-soft: Canvas;
+    --inkra-on-accent: HighlightText;
+    --inkra-coral: CanvasText;
+    --inkra-coral-soft: Canvas;
+    --inkra-blue: LinkText;
+    --inkra-blue-soft: Canvas;
+    --inkra-border: CanvasText;
+    --inkra-border-strong: CanvasText;
+    --inkra-focus: Highlight;
+    --inkra-danger: Mark;
+    --inkra-danger-soft: Canvas;
+    --inkra-success-pigment: Highlight;
+    --inkra-success-foreground: CanvasText;
+    --inkra-warning-pigment: Highlight;
+    --inkra-warning-foreground: CanvasText;
+    --inkra-danger-pigment: Mark;
+    --inkra-danger-foreground: MarkText;
+    --inkra-info-pigment: Highlight;
+    --inkra-info-foreground: LinkText;
+    --inkra-selection: Highlight;
+    --inkra-selection-pigment: Highlight;
+    --inkra-selection-foreground: HighlightText;
+    --inkra-overlay: rgb(0 0 0 / 50%);
+    --inkra-shadow-overlay: none;
+    --inkra-stroke-grain: 0;
+    --inkra-stroke-breaks: 0;
+    --inkra-wash-opacity: 0;
+    --inkra-wash-strength: 0;
+    --inkra-quiet-wash-strength: 0;
+    --inkra-badge-wash-strength: 0;
+    --inkra-letter-breaks: 0;
+    --inkra-letter-grain: 0;
+  }
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,24 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { PencilSurfaceVariant } from '../PencilSurface.js';
+export type TooltipProviderProps = TooltipPrimitive.TooltipProviderProps;
+export declare const TooltipProvider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+export type TooltipRootProps = TooltipPrimitive.TooltipProps;
+export declare function TooltipRoot(props: TooltipRootProps): import("react").JSX.Element;
+export type TooltipTriggerProps = TooltipPrimitive.TooltipTriggerProps;
+export declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type TooltipPortalProps = TooltipPrimitive.TooltipPortalProps;
+export declare function TooltipPortal({ children, ...props }: TooltipPortalProps): import("react").JSX.Element;
+export interface TooltipContentProps extends TooltipPrimitive.TooltipContentProps {
+    seed?: string | number;
+    surfaceClassName?: string;
+    surfaceRadius?: number;
+    surfaceVariant?: PencilSurfaceVariant;
+}
+export declare const TooltipContent: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Tooltip: Readonly<{
+    Provider: import("react").FC<TooltipPrimitive.TooltipProviderProps>;
+    Root: typeof TooltipRoot;
+    Trigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Portal: typeof TooltipPortal;
+    Content: import("react").ForwardRefExoticComponent<TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>;
+}>;

package/dist/tooltip/Tooltip.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { forwardRef, useId } from 'react';
+import { PortalThemeBridge, PortalThemeProvider, usePortalTriggerRef } from '../overlay/themeBridge.js';
+import { PencilSurface } from '../PencilSurface.js';
+import { PencilText } from '../PencilText.js';
+function classes(...values) {
+    return values.filter(Boolean).join(' ');
+}
+export const TooltipProvider = TooltipPrimitive.Provider;
+export function TooltipRoot(props) {
+    return (_jsx(PortalThemeProvider, { children: _jsx(TooltipPrimitive.Root, { ...props }) }));
+}
+export const TooltipTrigger = forwardRef(function TooltipTrigger(props, forwardedRef) {
+    const ref = usePortalTriggerRef(forwardedRef);
+    return _jsx(TooltipPrimitive.Trigger, { ...props, ref: ref });
+});
+export function TooltipPortal({ children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { ...props, children: _jsx(PortalThemeBridge, { children: children }) }));
+}
+export const TooltipContent = forwardRef(function TooltipContent({ children, className, seed, sideOffset = 6, surfaceClassName, surfaceRadius = 6, surfaceVariant = 'paper', ...props }, ref) {
+    const generatedId = useId();
+    const resolvedSeed = seed ?? `inkra-tooltip-${generatedId}`;
+    return (_jsx(TooltipPrimitive.Content, { ...props, className: classes('inkra-tooltip__content', className), ref: ref, sideOffset: sideOffset, children: _jsx(PencilSurface, { className: classes('inkra-tooltip__surface', surfaceClassName), radius: surfaceRadius, seed: resolvedSeed, variant: surfaceVariant, children: _jsx("div", { className: "inkra-tooltip__content-body", children: typeof children === 'string' ? (_jsx(PencilText, { seed: `${resolvedSeed}-text`, children: children })) : children }) }) }));
+});
+export const Tooltip = Object.freeze({
+    Provider: TooltipProvider,
+    Root: TooltipRoot,
+    Trigger: TooltipTrigger,
+    Portal: TooltipPortal,
+    Content: TooltipContent,
+});

package/dist/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, } from './Tooltip.js';
+export type { TooltipContentProps, TooltipPortalProps, TooltipProviderProps, TooltipRootProps, TooltipTriggerProps, } from './Tooltip.js';

package/dist/tooltip/index.js

@@ -0,0 +1 @@
+export { Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, } from './Tooltip.js';

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[];