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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "0.6.0-alpha.a49f238",
+  "version": "0.6.0-alpha.a9a8815",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -204,6 +204,11 @@
       "types": "./dist/components/features/autocomplete/index.d.ts",
       "default": "./dist/autocomplete/index.mjs"
     },
+    "./combobox": {
+      "source": "./src/components/features/combobox/index.ts",
+      "types": "./dist/components/features/combobox/index.d.ts",
+      "default": "./dist/combobox/index.mjs"
+    },
     "./avatar-stack": {
       "source": "./src/components/features/avatar-stack/index.ts",
       "types": "./dist/components/features/avatar-stack/index.d.ts",
@@ -323,6 +328,21 @@
       "source": "./src/components/features/data-table/index.ts",
       "types": "./dist/components/features/data-table/index.d.ts",
       "default": "./dist/data-table/index.mjs"
+    },
+    "./date-time-picker": {
+      "source": "./src/components/features/date-time-picker/index.ts",
+      "types": "./dist/components/features/date-time-picker/index.d.ts",
+      "default": "./dist/date-time-picker/index.mjs"
+    },
+    "./time-picker": {
+      "source": "./src/components/features/time-picker/index.ts",
+      "types": "./dist/components/features/time-picker/index.d.ts",
+      "default": "./dist/time-picker/index.mjs"
+    },
+    "./transfer": {
+      "source": "./src/components/features/transfer/index.ts",
+      "types": "./dist/components/features/transfer/index.d.ts",
+      "default": "./dist/transfer/index.mjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -336,6 +356,8 @@
   "peerDependencies": {
     "@conform-to/react": ">=1",
     "@conform-to/zod": ">=1",
+    "@dnd-kit/core": ">=6",
+    "@dnd-kit/sortable": ">=8",
     "@hookform/resolvers": ">=5",
     "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": ">=4",
@@ -372,6 +394,12 @@
     "@conform-to/zod": {
       "optional": true
     },
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
     "@hookform/resolvers": {
       "optional": true
     },
@@ -450,6 +478,7 @@
     }
   },
   "dependencies": {
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-avatar": "^1",
     "@radix-ui/react-checkbox": "^1",
     "@radix-ui/react-collapsible": "^1",
@@ -475,6 +504,8 @@
   "devDependencies": {
     "@conform-to/react": "^1.17.1",
     "@conform-to/zod": "^1.17.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@hookform/resolvers": "^5.2.2",
     "@monaco-editor/react": "^4.7.0",
     "@stepperize/react": "^6.1.0",