@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.a9a8815

package/dist/stepper-DvIOp0hh.mjs

@@ -0,0 +1,321 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-D3RrsMfQ.mjs";
+import { cva } from "class-variance-authority";
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as Stepperize from "@stepperize/react";
+//#region src/components/features/stepper/stepper.tsx
+const StepperContext = React$1.createContext(null);
+function useStepperProvider() {
+	const context = React$1.use(StepperContext);
+	if (!context) throw new Error("useStepper must be used within a StepperProvider.");
+	return context;
+}
+const classForNavigationList = cva("flex gap-2", { variants: { variant: {
+	horizontal: "flex-row items-center justify-between",
+	vertical: "flex-col",
+	circle: "flex-row items-center justify-between"
+} } });
+const classForSeparator = cva([
+	"bg-muted",
+	"data-[state=completed]:bg-primary data-[disabled]:opacity-50",
+	"transition-all duration-300 ease-in-out"
+], { variants: {
+	orientation: {
+		horizontal: "h-0.5 flex-1",
+		vertical: "h-full w-0.5"
+	},
+	labelOrientation: { vertical: "absolute left-[calc(50%+30px)] right-[calc(-50%+20px)] top-5 block shrink-0" }
+} });
+function defineStepper(...steps) {
+	const { Scoped, useStepper, steps: stepList, Stepper: StepperizePrimitives } = Stepperize.defineStepper(...steps);
+	const StepperContainer = ({ children, className, ...props }) => {
+		const methods = useStepper();
+		return /* @__PURE__ */ jsx("div", {
+			"date-component": "stepper",
+			className: cn("w-full", className),
+			...props,
+			children: typeof children === "function" ? children({ methods }) : children
+		});
+	};
+	return {
+		steps: stepList,
+		useStepper,
+		Stepper: {
+			...StepperizePrimitives,
+			Provider: ({ variant = "horizontal", labelOrientation = "horizontal", tracking = false, children, className, ...props }) => {
+				return /* @__PURE__ */ jsx(StepperContext, {
+					value: {
+						variant,
+						labelOrientation,
+						tracking
+					},
+					children: /* @__PURE__ */ jsx(Scoped, {
+						initialStep: props.initialStep,
+						initialMetadata: props.initialMetadata,
+						children: /* @__PURE__ */ jsx(StepperContainer, {
+							className,
+							...props,
+							children
+						})
+					})
+				});
+			},
+			Navigation: ({ children, "aria-label": ariaLabel = "Stepper Navigation", ...props }) => {
+				const { variant } = useStepperProvider();
+				return /* @__PURE__ */ jsx("nav", {
+					"date-component": "stepper-navigation",
+					"aria-label": ariaLabel,
+					role: "tablist",
+					...props,
+					children: /* @__PURE__ */ jsx("ol", {
+						"date-component": "stepper-navigation-list",
+						className: classForNavigationList({ variant }),
+						children
+					})
+				});
+			},
+			Step: ({ children, className, icon, ...props }) => {
+				const { variant, labelOrientation } = useStepperProvider();
+				const stepper = useStepper();
+				const steps = stepList;
+				const stepIndex = stepper.lookup.getIndex(props.of);
+				const step = steps[stepIndex];
+				const currentIndex = stepper.lookup.getIndex(stepper.state.current.data.id);
+				const isLast = stepper.lookup.getLast().id === props.of;
+				const isActive = stepper.state.current.data.id === props.of;
+				const dataState = getStepState(currentIndex, stepIndex);
+				const childMap = useStepChildren(children);
+				const title = childMap.get("title");
+				const description = childMap.get("description");
+				const panel = childMap.get("panel");
+				if (variant === "circle") return /* @__PURE__ */ jsxs("li", {
+					"date-component": "stepper-step",
+					className: cn("flex shrink-0 items-center gap-4 rounded-md transition-colors", className),
+					children: [/* @__PURE__ */ jsx(CircleStepIndicator, {
+						currentStep: stepIndex + 1,
+						totalSteps: steps.length
+					}), /* @__PURE__ */ jsxs("div", {
+						"date-component": "stepper-step-content",
+						className: "flex flex-col items-start gap-1",
+						children: [title, description]
+					})]
+				});
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsxs("li", {
+						"date-component": "stepper-step",
+						className: cn([
+							"group peer relative flex items-center gap-2",
+							"data-[variant=vertical]:flex-row",
+							"data-[label-orientation=vertical]:w-full",
+							"data-[label-orientation=vertical]:flex-col",
+							"data-[label-orientation=vertical]:justify-center"
+						]),
+						"data-variant": variant,
+						"data-label-orientation": labelOrientation,
+						"data-state": dataState,
+						"data-disabled": props.disabled,
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								id: `step-${step.id}`,
+								"date-component": "stepper-step-indicator",
+								type: "button",
+								role: "tab",
+								tabIndex: dataState !== "inactive" ? 0 : -1,
+								className: cn("rounded-full", className),
+								variant: dataState !== "inactive" ? "default" : "secondary",
+								size: "icon",
+								"aria-controls": `step-panel-${props.of}`,
+								"aria-current": isActive ? "step" : void 0,
+								"aria-posinset": stepIndex + 1,
+								"aria-setsize": steps.length,
+								"aria-selected": isActive,
+								onKeyDown: (e) => onStepKeyDown(e, stepper.lookup.getNext(props.of), stepper.lookup.getPrev(props.of)),
+								...props,
+								children: icon ?? stepIndex + 1
+							}),
+							variant === "horizontal" && labelOrientation === "vertical" && /* @__PURE__ */ jsx(StepperSeparator, {
+								orientation: "horizontal",
+								labelOrientation,
+								isLast,
+								state: dataState,
+								disabled: props.disabled
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								"date-component": "stepper-step-content",
+								className: "flex flex-col items-start",
+								children: [title, description]
+							})
+						]
+					}),
+					variant === "horizontal" && labelOrientation === "horizontal" && /* @__PURE__ */ jsx(StepperSeparator, {
+						orientation: "horizontal",
+						isLast,
+						state: dataState,
+						disabled: props.disabled
+					}),
+					variant === "vertical" && /* @__PURE__ */ jsxs("div", {
+						className: "flex gap-4",
+						children: [!isLast && /* @__PURE__ */ jsx("div", {
+							className: "flex justify-center ps-[calc(var(--spacing)_*_4.5_-_1px)]",
+							children: /* @__PURE__ */ jsx(StepperSeparator, {
+								orientation: "vertical",
+								isLast,
+								state: dataState,
+								disabled: props.disabled
+							})
+						}), /* @__PURE__ */ jsx("div", {
+							className: "my-3 flex-1 ps-4",
+							children: panel
+						})]
+					})
+				] });
+			},
+			Title,
+			Description,
+			Panel: ({ children, asChild, ...props }) => {
+				const Comp = asChild ? Slot : "div";
+				const { tracking } = useStepperProvider();
+				return /* @__PURE__ */ jsx(Comp, {
+					"date-component": "stepper-step-panel",
+					ref: (node) => scrollIntoStepperPanel(node, tracking),
+					...props,
+					children
+				});
+			},
+			Controls: ({ children, className, asChild, ...props }) => {
+				return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+					"date-component": "stepper-controls",
+					className: cn("flex justify-end gap-4", className),
+					...props,
+					children
+				});
+			}
+		}
+	};
+}
+function Title({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "h4", {
+		"date-component": "stepper-step-title",
+		className: cn("text-base font-medium", className),
+		...props,
+		children
+	});
+}
+function Description({ children, className, asChild, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "p", {
+		"date-component": "stepper-step-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props,
+		children
+	});
+}
+function StepperSeparator({ orientation, isLast, labelOrientation, state, disabled }) {
+	if (isLast) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"date-component": "stepper-separator",
+		"data-orientation": orientation,
+		"data-state": state,
+		"data-disabled": disabled,
+		role: "separator",
+		tabIndex: -1,
+		className: classForSeparator({
+			orientation,
+			labelOrientation
+		})
+	});
+}
+function CircleStepIndicator({ currentStep, totalSteps, size = 80, strokeWidth = 6 }) {
+	const radius = (size - strokeWidth) / 2;
+	const circumference = radius * 2 * Math.PI;
+	const dashOffset = circumference - circumference * (currentStep / totalSteps * 100) / 100;
+	return /* @__PURE__ */ jsxs("div", {
+		"date-component": "stepper-step-indicator",
+		role: "progressbar",
+		"aria-valuenow": currentStep,
+		"aria-valuemin": 1,
+		"aria-valuemax": totalSteps,
+		tabIndex: -1,
+		className: "relative inline-flex items-center justify-center",
+		children: [/* @__PURE__ */ jsxs("svg", {
+			width: size,
+			height: size,
+			children: [
+				/* @__PURE__ */ jsx("title", { children: "Step Indicator" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth,
+					className: "text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: size / 2,
+					cy: size / 2,
+					r: radius,
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth,
+					strokeDasharray: circumference,
+					strokeDashoffset: dashOffset,
+					className: "text-primary transition-all duration-300 ease-in-out",
+					transform: `rotate(-90 ${size / 2} ${size / 2})`
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "text-sm font-medium",
+				"aria-live": "polite",
+				children: [
+					currentStep,
+					" ",
+					"of",
+					totalSteps
+				]
+			})
+		})]
+	});
+}
+function scrollIntoStepperPanel(node, tracking) {
+	if (tracking) node?.scrollIntoView({
+		behavior: "smooth",
+		block: "center"
+	});
+}
+function useStepChildren(children) {
+	return React$1.useMemo(() => extractChildren(children), [children]);
+}
+function extractChildren(children) {
+	const childrenArray = React$1.Children.toArray(children);
+	const map = /* @__PURE__ */ new Map();
+	for (const child of childrenArray) if (React$1.isValidElement(child)) if (child.type === Title) map.set("title", child);
+	else if (child.type === Description) map.set("description", child);
+	else map.set("panel", child);
+	return map;
+}
+function onStepKeyDown(e, nextStep, prevStep) {
+	const { key } = e;
+	const directions = {
+		next: ["ArrowRight", "ArrowDown"],
+		prev: ["ArrowLeft", "ArrowUp"]
+	};
+	if (directions.next.includes(key) || directions.prev.includes(key)) {
+		const direction = directions.next.includes(key) ? "next" : "prev";
+		const step = direction === "next" ? nextStep : prevStep;
+		if (!step) return;
+		const stepElement = document.getElementById(`step-${step.id}`);
+		if (!stepElement) return;
+		if (stepElement.parentElement?.getAttribute("data-state") !== "inactive" || direction === "prev") stepElement.focus();
+	}
+}
+function getStepState(currentIndex, stepIndex) {
+	if (currentIndex === stepIndex) return "active";
+	if (currentIndex > stepIndex) return "completed";
+	return "inactive";
+}
+//#endregion
+export { defineStepper as t };

package/dist/tag-input/index.mjs

@@ -1,2 +1,2 @@
-import { t as TagsInput } from "../tag-input-BVSwNcRd.mjs";
+import { t as TagsInput } from "../tag-input-T9cUX9-G.mjs";
 export { TagsInput };

package/dist/task-queue/index.mjs

@@ -1,2 +1,2 @@
-import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-DyM5R8KF.mjs";
+import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-Wcbj-f0V.mjs";
 export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };

package/dist/time-picker/index.mjs

@@ -0,0 +1,2 @@
+import { t as TimePicker } from "../time-picker-BoF7pZZ2.mjs";
+export { TimePicker };

package/dist/time-picker-BoF7pZZ2.mjs

@@ -0,0 +1,43 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Input } from "./input-FKGqZypx.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/features/time-picker/time-picker.tsx
+/**
+* TimePicker - Simple time input component
+*
+* Provides a native HTML time input for selecting hours and minutes.
+* Value format: "HH:mm" (e.g., "14:30")
+*
+* @example
+* ```tsx
+* <TimePicker
+*   value="14:30"
+*   onChange={(time) => console.log(time)}
+*   min="09:00"
+*   max="17:00"
+* />
+* ```
+*/
+function TimePicker({ value, onChange, min, max, step, placeholder, disabled, className, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) {
+	const handleChange = React$1.useCallback((e) => {
+		onChange?.(e.target.value);
+	}, [onChange]);
+	return /* @__PURE__ */ jsx(Input, {
+		id,
+		type: "time",
+		value: value || "",
+		onChange: handleChange,
+		min,
+		max,
+		step,
+		placeholder,
+		disabled,
+		className: cn(className),
+		"aria-invalid": ariaInvalid,
+		"aria-describedby": ariaDescribedBy
+	});
+}
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker as t };

package/dist/transfer/index.mjs

@@ -0,0 +1,2 @@
+import { t as Transfer } from "../transfer-C55XfEXy.mjs";
+export { Transfer };

package/dist/transfer-C55XfEXy.mjs

@@ -0,0 +1,243 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-BllvE9Lm.mjs";
+import { Search, X } from "lucide-react";
+import * as React$1 from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/transfer/components/transfer-group.tsx
+const TransferGroup = ({ title, children }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "text-xs font-semibold text-muted-foreground px-2 py-1",
+			children: title
+		}), children]
+	});
+};
+//#endregion
+//#region src/components/features/transfer/components/transfer-item.tsx
+const TransferItem = ({ label, onClick, disabled = false, panelType }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group flex items-center gap-2 rounded p-2", "hover:bg-accent transition-colors", panelType === "source" && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed"),
+		onClick: panelType === "source" && !disabled ? onClick : void 0,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-sm font-medium",
+				children: label
+			})
+		}), panelType === "target" && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "h-6 w-6 p-0 rounded opacity-0 group-hover:opacity-100 hover:bg-muted transition-opacity inline-flex items-center justify-center",
+			onClick,
+			disabled,
+			children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+		})]
+	});
+};
+//#endregion
+//#region src/components/features/transfer/components/transfer-search.tsx
+const TransferSearch = ({ value, onChange, placeholder = "Search...", disabled = false }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ jsx("input", {
+			type: "text",
+			value,
+			onChange: (e) => onChange(e.target.value),
+			placeholder,
+			disabled,
+			"aria-label": placeholder,
+			className: cn("flex h-9 w-full rounded-md border border-input bg-transparent pl-8 pr-3 py-1", "text-sm shadow-sm transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:cursor-not-allowed disabled:opacity-50")
+		})]
+	});
+};
+//#endregion
+//#region src/components/features/transfer/components/transfer-panel.tsx
+const TransferPanel = ({ items, groups, searchable, searchValue, onSearchChange, searchPlaceholder, onItemClick, onSelectAll, enableSelectAll, disabled = false, panelType }) => {
+	const groupedItems = React$1.useMemo(() => {
+		if (groups.length === 0) return { "": items };
+		const grouped = {};
+		groups.forEach((group) => {
+			grouped[group] = items.filter((item) => item.group === group);
+		});
+		return grouped;
+	}, [items, groups]);
+	const renderItems = (groupItems) => {
+		return groupItems.map((item) => /* @__PURE__ */ jsx(TransferItem, {
+			itemKey: item.key,
+			label: item.label,
+			onClick: () => onItemClick(item.key),
+			disabled,
+			panelType
+		}, item.key));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-full bg-background",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-b p-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-h-[2.25rem] items-center justify-between mb-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: panelType === "source" ? `${items.length} items` : `${items.length} selected`
+				}), enableSelectAll && items.length > 0 && /* @__PURE__ */ jsx(Button, {
+					htmlType: "button",
+					type: "quaternary",
+					theme: "borderless",
+					size: "small",
+					onClick: onSelectAll,
+					disabled,
+					children: panelType === "source" ? "Select All" : "Clear All"
+				})]
+			}), searchable && /* @__PURE__ */ jsx(TransferSearch, {
+				value: searchValue,
+				onChange: onSearchChange,
+				placeholder: searchPlaceholder,
+				disabled
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto p-2",
+			children: items.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "text-sm text-muted-foreground text-center py-8",
+				children: panelType === "source" ? "No items" : "No items selected"
+			}) : groups.length === 0 ? /* @__PURE__ */ jsx("div", {
+				className: "space-y-1",
+				children: renderItems(items)
+			}) : Object.entries(groupedItems).map(([group, groupItems]) => groupItems.length > 0 && /* @__PURE__ */ jsx(TransferGroup, {
+				title: group,
+				children: renderItems(groupItems)
+			}, group))
+		})]
+	});
+};
+//#endregion
+//#region src/components/features/transfer/hooks/use-transfer-state.ts
+function useTransferState({ items, value, itemKey, itemLabel, itemGroup }) {
+	const [sourceSearch, setSourceSearch] = useState("");
+	const [debouncedSourceSearch, setDebouncedSourceSearch] = useState("");
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setDebouncedSourceSearch(sourceSearch);
+		}, 300);
+		return () => clearTimeout(timer);
+	}, [sourceSearch]);
+	const getKey = useCallback((item) => {
+		return typeof itemKey === "function" ? itemKey(item) : String(item[itemKey]);
+	}, [itemKey]);
+	const getLabel = useCallback((item) => {
+		return typeof itemLabel === "function" ? itemLabel(item) : String(item[itemLabel]);
+	}, [itemLabel]);
+	const getGroup = useCallback((item) => {
+		if (!itemGroup) return void 0;
+		return typeof itemGroup === "function" ? itemGroup(item) : String(item[itemGroup]);
+	}, [itemGroup]);
+	const transferItems = useMemo(() => {
+		return items.map((item) => ({
+			key: getKey(item),
+			label: getLabel(item),
+			group: getGroup(item),
+			data: item
+		}));
+	}, [
+		items,
+		getKey,
+		getLabel,
+		getGroup
+	]);
+	const { sourceItems, targetItems } = useMemo(() => {
+		const valueSet = new Set(value);
+		return {
+			sourceItems: transferItems.filter((item) => !valueSet.has(item.key)),
+			targetItems: transferItems.filter((item) => valueSet.has(item.key))
+		};
+	}, [transferItems, value]);
+	const filterItems = useCallback((items, search) => {
+		if (!search) return items;
+		const searchLower = search.toLowerCase();
+		return items.filter((item) => item.label.toLowerCase().includes(searchLower) || item.group?.toLowerCase().includes(searchLower) || item.key.toLowerCase().includes(searchLower));
+	}, []);
+	const filteredSourceItems = useMemo(() => filterItems(sourceItems, debouncedSourceSearch), [
+		sourceItems,
+		debouncedSourceSearch,
+		filterItems
+	]);
+	const getGroups = useCallback((items) => {
+		const groups = /* @__PURE__ */ new Set();
+		items.forEach((item) => {
+			if (item.group) groups.add(item.group);
+		});
+		return Array.from(groups).sort();
+	}, []);
+	return {
+		sourceItems,
+		targetItems,
+		filteredSourceItems,
+		sourceGroups: useMemo(() => getGroups(filteredSourceItems), [filteredSourceItems, getGroups]),
+		targetGroups: useMemo(() => getGroups(targetItems), [targetItems, getGroups]),
+		sourceSearch,
+		setSourceSearch
+	};
+}
+//#endregion
+//#region src/components/features/transfer/transfer.tsx
+function Transfer({ items, value, onChange, itemKey, itemLabel, itemGroup, searchable = true, searchPlaceholder = "Search...", sourceTitle = "Available", targetTitle = "Selected", enableSelectAll = true, disabled = false, className }) {
+	const state = useTransferState({
+		items,
+		value,
+		itemKey,
+		itemLabel,
+		itemGroup
+	});
+	const handleSelect = (key) => {
+		if (value.includes(key)) return;
+		onChange([...value, key]);
+	};
+	const handleDeselect = (key) => {
+		onChange(value.filter((k) => k !== key));
+	};
+	const handleSelectAll = () => {
+		const sourceKeys = state.filteredSourceItems.map((item) => item.key);
+		onChange([...value, ...sourceKeys]);
+	};
+	const handleClearAll = () => {
+		onChange([]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-[400px]", className),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex-1 border-r",
+			children: /* @__PURE__ */ jsx(TransferPanel, {
+				title: sourceTitle,
+				items: state.filteredSourceItems,
+				groups: state.sourceGroups,
+				searchable,
+				searchValue: state.sourceSearch,
+				onSearchChange: state.setSourceSearch,
+				searchPlaceholder,
+				onItemClick: handleSelect,
+				onSelectAll: handleSelectAll,
+				enableSelectAll,
+				disabled,
+				panelType: "source"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1",
+			children: /* @__PURE__ */ jsx(TransferPanel, {
+				title: targetTitle,
+				items: state.targetItems,
+				groups: state.targetGroups,
+				searchable: false,
+				searchValue: "",
+				onSearchChange: () => {},
+				onItemClick: handleDeselect,
+				onSelectAll: handleClearAll,
+				enableSelectAll,
+				disabled,
+				panelType: "target"
+			})
+		})]
+	});
+}
+Transfer.displayName = "Transfer";
+//#endregion
+export { Transfer as t };