@jbpark/ui-kit 10.2.0 → 10.3.0

package/dist/Tour.d.mts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/organisms/tour.d.ts
+export interface Step {
+  key: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Resolved after hydration. Missing/hidden targets use a centered popup. */
+  target?: () => HTMLElement | null;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> {
+  steps: readonly Step[];
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (current: number) => void;
+  onClose?: () => void;
+  onFinish?: () => void;
+  scrollIntoView?: boolean;
+  previousLabel?: string;
+  nextLabel?: string;
+  finishLabel?: string;
+  closeLabel?: string;
+  formatProgress?: (current: number, total: number) => string;
+  classNames?: {
+    popup?: string;
+    mask?: string;
+    highlight?: string;
+    actions?: string;
+  };
+}
+declare const Tour: ({ steps, open: openProp, defaultOpen, onOpenChange, current: currentProp, defaultCurrent, onChange, onClose, onFinish, scrollIntoView, previousLabel, nextLabel, finishLabel, closeLabel, formatProgress, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Tour as default };
+//# sourceMappingURL=Tour.d.mts.map

package/dist/Tour.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.d.mts","names":[],"sources":["../src/components/organisms/tour.tsx"],"mappings":";;iBAmBiB;EACf;EACA,OAAO;EACP,cAAc;;EAEd,eAAe;EACf;;iBAGe,cAAc,KAC7B;EAGA,gBAAgB;EAChB;EACA;EACA,gBAAgB;EAChB;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAAkB,iBAAiB;EACnC;IACE;IACA;IACA;IACA;;;cAOE,SAAQ,OAAA,MAAA,UAAA,aAAA,cAAA,SAAA,aAAA,gBAAA,UAAA,SAAA,UAAA,gBAAA,eAAA,WAAA,aAAA,YAAA,gBAAA,WAAA,eAAA,SAmBX,0BAAK,IAAA"}

package/dist/Tour.mjs

@@ -0,0 +1,192 @@
+"use client";
+import { cn } from "./utils.mjs";
+import { useConfig } from "./providers/config/context.mjs";
+import { OVERLAY_LAYER } from "./lib/z-layers.mjs";
+import Button from "./Button.mjs";
+import { Popover, PopoverArrow, PopoverBackdrop, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle } from "./core/popover.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { useControllableState } from "@jbpark/use-hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/organisms/tour.tsx
+const defaultFormatProgress = (current, total) => `Step ${current} of ${total}`;
+const Tour = ({ steps, open: openProp, defaultOpen = false, onOpenChange, current: currentProp, defaultCurrent = 0, onChange, onClose, onFinish, scrollIntoView = true, previousLabel = "Previous", nextLabel = "Next", finishLabel = "Finish", closeLabel = "Close tour", formatProgress = defaultFormatProgress, className, classNames, ...props }) => {
+	const { getContainer, direction } = useConfig();
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange
+	});
+	const [current, setCurrent] = useControllableState({
+		value: currentProp,
+		defaultValue: defaultCurrent,
+		onChange
+	});
+	const index = Number.isFinite(current) ? Math.max(0, Math.min(steps.length - 1, Math.floor(current))) : 0;
+	const step = steps[index];
+	const [measurement, setMeasurement] = useState(null);
+	const target = open && measurement && measurement.step === step ? measurement.target : null;
+	const rect = open && measurement && measurement.step === step ? measurement.rect : null;
+	const fallback = useMemo(() => ({ getBoundingClientRect: () => new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0) }), []);
+	useEffect(() => {
+		if (!open || !step) return;
+		let previous = null;
+		const update = () => {
+			const element = step.target?.() ?? null;
+			const resolved = !!element?.isConnected && element.getClientRects().length > 0 && getComputedStyle(element).visibility !== "hidden" ? element : null;
+			if (resolved !== previous) {
+				if (previous) resizeObserver.unobserve(previous);
+				if (resolved) {
+					resizeObserver.observe(resolved);
+					if (scrollIntoView) resolved.scrollIntoView({
+						block: "center",
+						inline: "nearest",
+						behavior: "instant"
+					});
+				}
+			}
+			previous = resolved;
+			const bounds = resolved?.getBoundingClientRect();
+			const next = bounds ? {
+				top: bounds.top,
+				left: bounds.left,
+				width: bounds.width,
+				height: bounds.height
+			} : null;
+			setMeasurement((existing) => existing?.step === step && existing.target === resolved && existing.rect?.top === next?.top && existing.rect?.left === next?.left && existing.rect?.width === next?.width && existing.rect?.height === next?.height ? existing : {
+				step,
+				target: resolved,
+				rect: next
+			});
+		};
+		const frame = requestAnimationFrame(update);
+		const observer = new MutationObserver(update);
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [
+				"hidden",
+				"style",
+				"class"
+			]
+		});
+		const resizeObserver = new ResizeObserver(update);
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+			resizeObserver.disconnect();
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+		};
+	}, [
+		open,
+		step,
+		scrollIntoView
+	]);
+	const close = () => {
+		onClose?.();
+		setOpen(false);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-slot": "tour",
+		className: cn("contents", className),
+		children: /* @__PURE__ */ jsxs(Popover, {
+			open: open && !!step,
+			modal: true,
+			onOpenChange: (next, details) => {
+				if (details.reason === "outside-press") {
+					details.cancel();
+					return;
+				}
+				if (!next) close();
+			},
+			children: [/* @__PURE__ */ jsxs(PopoverPortal, {
+				container: getContainer(),
+				children: [/* @__PURE__ */ jsx(PopoverBackdrop, {
+					"data-slot": "tour-mask",
+					className: cn("fixed inset-0 bg-black/40", OVERLAY_LAYER, classNames?.mask)
+				}), open && rect && /* @__PURE__ */ jsx("div", {
+					"data-slot": "tour-highlight",
+					"aria-hidden": "true",
+					style: {
+						position: "fixed",
+						top: rect.top - 4,
+						left: rect.left - 4,
+						width: rect.width + 8,
+						height: rect.height + 8
+					},
+					className: cn("border-primary pointer-events-none rounded-md border-2", "z-1000", classNames?.highlight)
+				})]
+			}), /* @__PURE__ */ jsxs(PopoverContent, {
+				"data-slot": "tour-popup",
+				dir: props.dir ?? direction,
+				anchor: target ?? fallback,
+				side: step?.placement ?? "bottom",
+				sideOffset: 12,
+				positionerStyle: target ? void 0 : {
+					position: "fixed",
+					left: "50%",
+					top: "50%",
+					transform: "translate(-50%, -50%)"
+				},
+				className: cn(`max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]
+            overflow-y-auto`, classNames?.popup),
+				children: [
+					/* @__PURE__ */ jsx(PopoverTitle, { children: step?.title }),
+					step?.description != null && /* @__PURE__ */ jsx(PopoverDescription, {
+						className: "mt-2 text-sm",
+						children: step.description
+					}),
+					/* @__PURE__ */ jsx("p", {
+						"data-slot": "tour-progress",
+						role: "status",
+						"aria-live": "polite",
+						"aria-atomic": "true",
+						className: "text-muted-foreground mt-3 text-xs",
+						children: formatProgress(index + 1, steps.length)
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("mt-4 flex flex-wrap gap-2", classNames?.actions),
+						children: [
+							/* @__PURE__ */ jsx(PopoverClose, {
+								render: /* @__PURE__ */ jsx(Button, {
+									variant: "text",
+									size: "small"
+								}),
+								children: closeLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "outlined",
+								size: "small",
+								disabled: index === 0,
+								focusableWhenDisabled: true,
+								className: "aria-disabled:pointer-events-none\n                aria-disabled:opacity-50",
+								onClick: () => setCurrent(index - 1),
+								children: previousLabel
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "small",
+								onClick: () => {
+									if (index < steps.length - 1) setCurrent(index + 1);
+									else {
+										onFinish?.();
+										setOpen(false);
+									}
+								},
+								children: index === steps.length - 1 ? finishLabel : nextLabel
+							})
+						]
+					}),
+					target && /* @__PURE__ */ jsx(PopoverArrow, {})
+				]
+			})]
+		})
+	});
+};
+//#endregion
+export { Tour as default };
+
+//# sourceMappingURL=Tour.mjs.map

package/dist/Tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.mjs","names":["popover.Popover","popover.PopoverPortal","popover.PopoverBackdrop","popover.PopoverContent","popover.PopoverTitle","popover.PopoverDescription","popover.PopoverClose","popover.PopoverArrow"],"sources":["../src/components/organisms/tour.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { useControllableState } from '@jbpark/use-hooks';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { popover } from '../../core';\nimport { OVERLAY_LAYER } from '../../lib/z-layers';\nimport Button from '../atoms/button';\n\nexport interface Step {\n  key: string;\n  title: ReactNode;\n  description?: ReactNode;\n  /** Resolved after hydration. Missing/hidden targets use a centered popup. */\n  target?: () => HTMLElement | null;\n  placement?: 'top' | 'bottom' | 'left' | 'right';\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onChange'\n> {\n  steps: readonly Step[];\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  current?: number;\n  defaultCurrent?: number;\n  onChange?: (current: number) => void;\n  onClose?: () => void;\n  onFinish?: () => void;\n  scrollIntoView?: boolean;\n  previousLabel?: string;\n  nextLabel?: string;\n  finishLabel?: string;\n  closeLabel?: string;\n  formatProgress?: (current: number, total: number) => string;\n  classNames?: {\n    popup?: string;\n    mask?: string;\n    highlight?: string;\n    actions?: string;\n  };\n}\n\nconst defaultFormatProgress = (current: number, total: number) =>\n  `Step ${current} of ${total}`;\n\nconst Tour = ({\n  steps,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  current: currentProp,\n  defaultCurrent = 0,\n  onChange,\n  onClose,\n  onFinish,\n  scrollIntoView = true,\n  previousLabel = 'Previous',\n  nextLabel = 'Next',\n  finishLabel = 'Finish',\n  closeLabel = 'Close tour',\n  formatProgress = defaultFormatProgress,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const { getContainer, direction } = useConfig();\n  const [open, setOpen] = useControllableState({\n    value: openProp,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n  const [current, setCurrent] = useControllableState({\n    value: currentProp,\n    defaultValue: defaultCurrent,\n    onChange,\n  });\n  const index = Number.isFinite(current)\n    ? Math.max(0, Math.min(steps.length - 1, Math.floor(current)))\n    : 0;\n  const step = steps[index];\n  const [measurement, setMeasurement] = useState<{\n    step: Step;\n    target: HTMLElement | null;\n    rect: { top: number; left: number; width: number; height: number } | null;\n  } | null>(null);\n  const target =\n    open && measurement && measurement.step === step\n      ? measurement.target\n      : null;\n  const rect =\n    open && measurement && measurement.step === step ? measurement.rect : null;\n  const fallback = useMemo(\n    () => ({\n      getBoundingClientRect: () =>\n        new DOMRect(window.innerWidth / 2, window.innerHeight / 2, 0, 0),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    if (!open || !step) return;\n\n    let previous: HTMLElement | null = null;\n    const update = () => {\n      const element = step.target?.() ?? null;\n      const isVisible =\n        !!element?.isConnected &&\n        element.getClientRects().length > 0 &&\n        getComputedStyle(element).visibility !== 'hidden';\n      const resolved = isVisible ? element : null;\n\n      if (resolved !== previous) {\n        if (previous) resizeObserver.unobserve(previous);\n\n        if (resolved) {\n          resizeObserver.observe(resolved);\n\n          if (scrollIntoView) {\n            resolved.scrollIntoView({\n              block: 'center',\n              inline: 'nearest',\n              behavior: 'instant',\n            });\n          }\n        }\n      }\n\n      previous = resolved;\n      const bounds = resolved?.getBoundingClientRect();\n      const next = bounds\n        ? {\n            top: bounds.top,\n            left: bounds.left,\n            width: bounds.width,\n            height: bounds.height,\n          }\n        : null;\n\n      setMeasurement(existing =>\n        existing?.step === step &&\n        existing.target === resolved &&\n        existing.rect?.top === next?.top &&\n        existing.rect?.left === next?.left &&\n        existing.rect?.width === next?.width &&\n        existing.rect?.height === next?.height\n          ? existing\n          : { step, target: resolved, rect: next },\n      );\n    };\n\n    const frame = requestAnimationFrame(update);\n    const observer = new MutationObserver(update);\n    observer.observe(document.body, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['hidden', 'style', 'class'],\n    });\n    const resizeObserver = new ResizeObserver(update);\n\n    window.addEventListener('resize', update);\n    window.addEventListener('scroll', update, true);\n\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n      resizeObserver.disconnect();\n      window.removeEventListener('resize', update);\n      window.removeEventListener('scroll', update, true);\n    };\n  }, [open, step, scrollIntoView]);\n\n  const close = () => {\n    onClose?.();\n    setOpen(false);\n  };\n\n  return (\n    <div\n      {...props}\n      data-slot=\"tour\"\n      className={cn(\n        'contents',\n        className, //\n      )}\n    >\n      <popover.Popover\n        open={open && !!step}\n        modal\n        onOpenChange={(next, details) => {\n          if (details.reason === 'outside-press') {\n            details.cancel();\n\n            return;\n          }\n\n          if (!next) close();\n        }}\n      >\n        <popover.PopoverPortal container={getContainer()}>\n          <popover.PopoverBackdrop\n            data-slot=\"tour-mask\"\n            className={cn(\n              'fixed inset-0 bg-black/40',\n              OVERLAY_LAYER,\n              classNames?.mask, //\n            )}\n          />\n          {open && rect && (\n            <div\n              data-slot=\"tour-highlight\"\n              aria-hidden=\"true\"\n              style={{\n                position: 'fixed',\n                top: rect.top - 4,\n                left: rect.left - 4,\n                width: rect.width + 8,\n                height: rect.height + 8,\n              }}\n              className={cn(\n                'border-primary pointer-events-none rounded-md border-2',\n                OVERLAY_LAYER,\n                classNames?.highlight, //\n              )}\n            />\n          )}\n        </popover.PopoverPortal>\n        <popover.PopoverContent\n          data-slot=\"tour-popup\"\n          dir={props.dir ?? direction}\n          anchor={target ?? fallback}\n          side={step?.placement ?? 'bottom'}\n          sideOffset={12}\n          positionerStyle={\n            target\n              ? undefined\n              : {\n                  position: 'fixed',\n                  left: '50%',\n                  top: '50%',\n                  transform: 'translate(-50%, -50%)',\n                }\n          }\n          className={cn(\n            `max-h-[calc(100dvh-2rem)] w-80 max-w-[calc(100vw-2rem)]\n            overflow-y-auto`,\n            classNames?.popup, //\n          )}\n        >\n          <popover.PopoverTitle>{step?.title}</popover.PopoverTitle>\n          {step?.description != null && (\n            <popover.PopoverDescription className=\"mt-2 text-sm\">\n              {step.description}\n            </popover.PopoverDescription>\n          )}\n          <p\n            data-slot=\"tour-progress\"\n            role=\"status\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            className=\"text-muted-foreground mt-3 text-xs\"\n          >\n            {formatProgress(index + 1, steps.length)}\n          </p>\n          <div\n            className={cn(\n              'mt-4 flex flex-wrap gap-2',\n              classNames?.actions, //\n            )}\n          >\n            <popover.PopoverClose\n              render={<Button variant=\"text\" size=\"small\" />}\n            >\n              {closeLabel}\n            </popover.PopoverClose>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={index === 0}\n              focusableWhenDisabled\n              className=\"aria-disabled:pointer-events-none\n                aria-disabled:opacity-50\"\n              onClick={() => setCurrent(index - 1)}\n            >\n              {previousLabel}\n            </Button>\n            <Button\n              size=\"small\"\n              onClick={() => {\n                if (index < steps.length - 1) {\n                  setCurrent(index + 1);\n                } else {\n                  onFinish?.();\n                  setOpen(false);\n                }\n              }}\n            >\n              {index === steps.length - 1 ? finishLabel : nextLabel}\n            </Button>\n          </div>\n          {target && <popover.PopoverArrow />}\n        </popover.PopoverContent>\n      </popover.Popover>\n    </div>\n  );\n};\n\nexport default Tour;\n"],"mappings":"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"}

package/dist/Transfer.d.mts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/molecules/transfer.d.ts
+export interface Item {
+  key: string;
+  label: string;
+  description?: ReactNode;
+  disabled?: boolean;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange'> {
+  /** Stable, unique keys; both panels follow this array's order. */
+  items: readonly Item[];
+  targetKeys: readonly string[];
+  onChange?: (targetKeys: string[]) => void;
+  disabled?: boolean;
+  searchable?: boolean;
+  titles?: readonly [string, string];
+  moveLabels?: readonly [string, string];
+  selectAllLabel?: string;
+  searchLabel?: string;
+  emptyText?: ReactNode;
+  /** Visible / total / visible selected counts, also used by the live region. */
+  formatCount?: (visible: number, total: number, selected: number) => string;
+  classNames?: {
+    panel?: string;
+    header?: string;
+    search?: string;
+    list?: string;
+    item?: string;
+    actions?: string;
+    empty?: string;
+  };
+}
+declare const Transfer: ({ items, targetKeys, onChange, disabled, searchable, titles, moveLabels, selectAllLabel, searchLabel, emptyText, formatCount, className, classNames, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Transfer as default };
+//# sourceMappingURL=Transfer.d.mts.map

package/dist/Transfer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transfer.d.mts","names":[],"sources":["../src/components/molecules/transfer.tsx"],"mappings":";;iBAeiB;EACf;EACA;EACA,cAAc;EACd;;iBAGe,cAAc,KAC7B;;EAIA,gBAAgB;EAChB;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA;EACA;EACA,YAAY;;EAEZ,eAAe,iBAAiB,eAAe;EAC/C;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;cAOE,aAAY,OAAA,YAAA,UAAA,UAAA,YAAA,QAAA,YAAA,gBAAA,aAAA,WAAA,aAAA,WAAA,eAAA,SAef,0BAAK,IAAA"}

package/dist/Transfer.mjs

@@ -0,0 +1,147 @@
+"use client";
+import { cn } from "./utils.mjs";
+import Button from "./Button.mjs";
+import Input from "./components/atoms/input/index.mjs";
+import Checkbox from "./components/atoms/checkbox/index.mjs";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/molecules/transfer.tsx
+const defaultFormatCount = (visible, total, selected) => `${visible} of ${total} items, ${selected} selected`;
+const Transfer = ({ items, targetKeys, onChange, disabled = false, searchable = false, titles = ["Available", "Chosen"], moveLabels = ["Move to chosen", "Move to available"], selectAllLabel = "Select all visible items", searchLabel = "Search", emptyText = "No items", formatCount = defaultFormatCount, className, classNames, ...props }) => {
+	const id = useId();
+	const [queries, setQueries] = useState(["", ""]);
+	const [selections, setSelections] = useState([/* @__PURE__ */ new Set(), /* @__PURE__ */ new Set()]);
+	const targets = new Set(targetKeys);
+	const panels = [false, true].map((isTarget, index) => {
+		const all = items.filter((item) => targets.has(item.key) === isTarget);
+		const query = searchable ? (queries[index] ?? "").trim().toLocaleLowerCase() : "";
+		const visible = all.filter((item) => item.label.toLocaleLowerCase().includes(query));
+		const enabled = visible.filter((item) => !item.disabled);
+		return {
+			all,
+			visible,
+			enabled,
+			selected: enabled.filter((item) => selections[index]?.has(item.key))
+		};
+	});
+	const select = (index, keys, checked) => {
+		setSelections((current) => current.map((selection, panel) => {
+			if (panel !== index) return selection;
+			const next = new Set(selection);
+			for (const key of keys) if (checked) next.add(key);
+			else next.delete(key);
+			return next;
+		}));
+	};
+	const move = (index) => {
+		const selected = panels[index]?.selected ?? [];
+		if (disabled || !selected.length) return;
+		const moved = new Set(selected.map((item) => item.key));
+		const next = new Set(targetKeys);
+		for (const key of moved) if (index === 0) next.add(key);
+		else next.delete(key);
+		onChange?.([...next]);
+		setSelections((current) => current.map((selection) => new Set([...selection].filter((key) => !moved.has(key)))));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "transfer",
+		className: cn(`text-foreground grid min-w-0 grid-cols-1 items-center gap-3
+        sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]`, className),
+		children: [
+			panels.map((panel, index) => /* @__PURE__ */ jsxs("section", {
+				"data-slot": "transfer-panel",
+				"aria-labelledby": `${id}-title-${index}`,
+				className: cn("border-border bg-background min-w-0 rounded-md border", index === 1 && "sm:col-start-3 sm:row-start-1", classNames?.panel),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cn("border-border border-b p-3", classNames?.header),
+						children: [
+							/* @__PURE__ */ jsx("h3", {
+								id: `${id}-title-${index}`,
+								className: "m-0 text-sm font-medium",
+								children: titles[index]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								id: `${id}-count-${index}`,
+								className: "text-muted-foreground m-0 mt-1 text-xs",
+								children: formatCount(panel.visible.length, panel.all.length, panel.selected.length)
+							}),
+							/* @__PURE__ */ jsx(Checkbox, {
+								className: "mt-3 text-sm",
+								checked: panel.enabled.length > 0 && panel.selected.length === panel.enabled.length,
+								disabled: disabled || !panel.enabled.length,
+								onChange: (checked) => select(index, panel.enabled.map((item) => item.key), checked),
+								children: selectAllLabel
+							})
+						]
+					}),
+					searchable && /* @__PURE__ */ jsx("div", {
+						className: "p-3 pb-0",
+						children: /* @__PURE__ */ jsx(Input, {
+							type: "search",
+							"aria-label": `${searchLabel} ${titles[index]}`,
+							"aria-controls": `${id}-list-${index}`,
+							value: queries[index] ?? "",
+							disabled,
+							onChange: (event) => {
+								const value = event.target.value;
+								setQueries((current) => current.map((query, panelIndex) => panelIndex === index ? value : query));
+							},
+							className: classNames?.search
+						})
+					}),
+					/* @__PURE__ */ jsxs("ul", {
+						id: `${id}-list-${index}`,
+						"data-slot": "transfer-list",
+						"aria-labelledby": `${id}-title-${index}`,
+						"aria-describedby": `${id}-count-${index}`,
+						role: "list",
+						className: cn("m-0 h-64 list-none overflow-y-auto p-3", classNames?.list),
+						children: [panel.visible.map((item) => /* @__PURE__ */ jsxs("li", {
+							"data-slot": "transfer-item",
+							"data-key": item.key,
+							className: cn("min-w-0 py-2 text-sm [overflow-wrap:anywhere]", classNames?.item),
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								checked: !item.disabled && (selections[index]?.has(item.key) ?? false),
+								disabled: disabled || item.disabled,
+								onChange: (checked) => select(index, [item.key], checked),
+								children: item.label
+							}), item.description != null && /* @__PURE__ */ jsx("div", {
+								className: "text-muted-foreground ms-6 mt-1 text-xs",
+								children: item.description
+							})]
+						}, item.key)), !panel.visible.length && /* @__PURE__ */ jsx("li", {
+							className: cn("text-muted-foreground py-6 text-center text-sm", classNames?.empty),
+							children: emptyText
+						})]
+					})
+				]
+			}, index)),
+			/* @__PURE__ */ jsx("div", {
+				"data-slot": "transfer-actions",
+				className: cn(`row-start-2 flex flex-wrap justify-center gap-2 sm:col-start-2
+          sm:row-start-1 sm:flex-col`, classNames?.actions),
+				children: panels.map((panel, index) => /* @__PURE__ */ jsx(Button, {
+					variant: "outlined",
+					size: "small",
+					disabled: disabled || !panel.selected.length,
+					onClick: () => move(index),
+					children: moveLabels[index]
+				}, index))
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "transfer-status",
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: panels.map((panel, index) => `${titles[index]}: ${formatCount(panel.visible.length, panel.all.length, panel.selected.length)}`).join(". ")
+			})
+		]
+	});
+};
+//#endregion
+export { Transfer as default };
+
+//# sourceMappingURL=Transfer.mjs.map

package/dist/Transfer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transfer.mjs","names":[],"sources":["../src/components/molecules/transfer.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type ComponentPropsWithRef,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\nimport Checkbox from '../atoms/checkbox';\nimport Input from '../atoms/input';\n\nexport interface Item {\n  key: string;\n  label: string;\n  description?: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface Props extends Omit<\n  ComponentPropsWithRef<'div'>,\n  'children' | 'onChange'\n> {\n  /** Stable, unique keys; both panels follow this array's order. */\n  items: readonly Item[];\n  targetKeys: readonly string[];\n  onChange?: (targetKeys: string[]) => void;\n  disabled?: boolean;\n  searchable?: boolean;\n  titles?: readonly [string, string];\n  moveLabels?: readonly [string, string];\n  selectAllLabel?: string;\n  searchLabel?: string;\n  emptyText?: ReactNode;\n  /** Visible / total / visible selected counts, also used by the live region. */\n  formatCount?: (visible: number, total: number, selected: number) => string;\n  classNames?: {\n    panel?: string;\n    header?: string;\n    search?: string;\n    list?: string;\n    item?: string;\n    actions?: string;\n    empty?: string;\n  };\n}\n\nconst defaultFormatCount = (visible: number, total: number, selected: number) =>\n  `${visible} of ${total} items, ${selected} selected`;\n\nconst Transfer = ({\n  items,\n  targetKeys,\n  onChange,\n  disabled = false,\n  searchable = false,\n  titles = ['Available', 'Chosen'],\n  moveLabels = ['Move to chosen', 'Move to available'],\n  selectAllLabel = 'Select all visible items',\n  searchLabel = 'Search',\n  emptyText = 'No items',\n  formatCount = defaultFormatCount,\n  className,\n  classNames,\n  ...props\n}: Props) => {\n  const id = useId();\n  const [queries, setQueries] = useState(['', '']);\n  const [selections, setSelections] = useState<Set<string>[]>([\n    new Set(),\n    new Set(),\n  ]);\n  const targets = new Set(targetKeys);\n  const panels = [false, true].map((isTarget, index) => {\n    const all = items.filter(item => targets.has(item.key) === isTarget);\n    const query = searchable\n      ? (queries[index] ?? '').trim().toLocaleLowerCase()\n      : '';\n    const visible = all.filter(item =>\n      item.label.toLocaleLowerCase().includes(query),\n    );\n    const enabled = visible.filter(item => !item.disabled);\n    const selected = enabled.filter(item => selections[index]?.has(item.key));\n\n    return { all, visible, enabled, selected };\n  });\n\n  const select = (index: number, keys: string[], checked: boolean) => {\n    setSelections(current =>\n      current.map((selection, panel) => {\n        if (panel !== index) return selection;\n\n        const next = new Set(selection);\n\n        for (const key of keys) {\n          if (checked) next.add(key);\n          else next.delete(key);\n        }\n\n        return next;\n      }),\n    );\n  };\n\n  const move = (index: number) => {\n    const selected = panels[index]?.selected ?? [];\n\n    if (disabled || !selected.length) return;\n\n    const moved = new Set(selected.map(item => item.key));\n    const next = new Set(targetKeys);\n\n    for (const key of moved) {\n      if (index === 0) next.add(key);\n      else next.delete(key);\n    }\n\n    onChange?.([...next]);\n    setSelections(current =>\n      current.map(\n        selection => new Set([...selection].filter(key => !moved.has(key))),\n      ),\n    );\n  };\n\n  return (\n    <div\n      {...props}\n      data-slot=\"transfer\"\n      className={cn(\n        `text-foreground grid min-w-0 grid-cols-1 items-center gap-3\n        sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]`,\n        className, //\n      )}\n    >\n      {panels.map((panel, index) => (\n        <section\n          key={index}\n          data-slot=\"transfer-panel\"\n          aria-labelledby={`${id}-title-${index}`}\n          className={cn(\n            'border-border bg-background min-w-0 rounded-md border',\n            index === 1 && 'sm:col-start-3 sm:row-start-1',\n            classNames?.panel, //\n          )}\n        >\n          <div\n            className={cn(\n              'border-border border-b p-3',\n              classNames?.header, //\n            )}\n          >\n            <h3 id={`${id}-title-${index}`} className=\"m-0 text-sm font-medium\">\n              {titles[index]}\n            </h3>\n            <p\n              id={`${id}-count-${index}`}\n              className=\"text-muted-foreground m-0 mt-1 text-xs\"\n            >\n              {formatCount(\n                panel.visible.length,\n                panel.all.length,\n                panel.selected.length,\n              )}\n            </p>\n            <Checkbox\n              className=\"mt-3 text-sm\"\n              checked={\n                panel.enabled.length > 0 &&\n                panel.selected.length === panel.enabled.length\n              }\n              disabled={disabled || !panel.enabled.length}\n              onChange={checked =>\n                select(\n                  index,\n                  panel.enabled.map(item => item.key),\n                  checked,\n                )\n              }\n            >\n              {selectAllLabel}\n            </Checkbox>\n          </div>\n          {searchable && (\n            <div className=\"p-3 pb-0\">\n              <Input\n                type=\"search\"\n                aria-label={`${searchLabel} ${titles[index]}`}\n                aria-controls={`${id}-list-${index}`}\n                value={queries[index] ?? ''}\n                disabled={disabled}\n                onChange={event => {\n                  const value = event.target.value;\n\n                  setQueries(current =>\n                    current.map((query, panelIndex) =>\n                      panelIndex === index ? value : query,\n                    ),\n                  );\n                }}\n                className={classNames?.search}\n              />\n            </div>\n          )}\n          <ul\n            id={`${id}-list-${index}`}\n            data-slot=\"transfer-list\"\n            aria-labelledby={`${id}-title-${index}`}\n            aria-describedby={`${id}-count-${index}`}\n            role=\"list\"\n            className={cn(\n              'm-0 h-64 list-none overflow-y-auto p-3',\n              classNames?.list, //\n            )}\n          >\n            {panel.visible.map(item => (\n              <li\n                key={item.key}\n                data-slot=\"transfer-item\"\n                data-key={item.key}\n                className={cn(\n                  'min-w-0 py-2 text-sm [overflow-wrap:anywhere]',\n                  classNames?.item, //\n                )}\n              >\n                <Checkbox\n                  checked={\n                    !item.disabled &&\n                    (selections[index]?.has(item.key) ?? false)\n                  }\n                  disabled={disabled || item.disabled}\n                  onChange={checked => select(index, [item.key], checked)}\n                >\n                  {item.label}\n                </Checkbox>\n                {item.description != null && (\n                  <div className=\"text-muted-foreground ms-6 mt-1 text-xs\">\n                    {item.description}\n                  </div>\n                )}\n              </li>\n            ))}\n            {!panel.visible.length && (\n              <li\n                className={cn(\n                  'text-muted-foreground py-6 text-center text-sm',\n                  classNames?.empty, //\n                )}\n              >\n                {emptyText}\n              </li>\n            )}\n          </ul>\n        </section>\n      ))}\n      <div\n        data-slot=\"transfer-actions\"\n        className={cn(\n          `row-start-2 flex flex-wrap justify-center gap-2 sm:col-start-2\n          sm:row-start-1 sm:flex-col`,\n          classNames?.actions, //\n        )}\n      >\n        {panels.map((panel, index) => (\n          <Button\n            key={index}\n            variant=\"outlined\"\n            size=\"small\"\n            disabled={disabled || !panel.selected.length}\n            onClick={() => move(index)}\n          >\n            {moveLabels[index]}\n          </Button>\n        ))}\n      </div>\n      <span\n        data-slot=\"transfer-status\"\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className=\"sr-only\"\n      >\n        {panels\n          .map(\n            (panel, index) =>\n              `${titles[index]}: ${formatCount(panel.visible.length, panel.all.length, panel.selected.length)}`,\n          )\n          .join('. ')}\n      </span>\n    </div>\n  );\n};\n\nexport default Transfer;\n"],"mappings":";;;;;;;;AAkDA,MAAM,sBAAsB,SAAiB,OAAe,aAC1D,GAAG,QAAQ,MAAM,MAAM,UAAU,SAAS;AAE5C,MAAM,YAAY,EAChB,OACA,YACA,UACA,WAAW,OACX,aAAa,OACb,SAAS,CAAC,aAAa,QAAQ,GAC/B,aAAa,CAAC,kBAAkB,mBAAmB,GACnD,iBAAiB,4BACjB,cAAc,UACd,YAAY,YACZ,cAAc,oBACd,WACA,YACA,GAAG,YACQ;CACX,MAAM,KAAK,MAAM;CACjB,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,IAAI,EAAE,CAAC;CAC/C,MAAM,CAAC,YAAY,iBAAiB,SAAwB,iBAC1D,IAAI,IAAI,mBACR,IAAI,IAAI,CACV,CAAC;CACD,MAAM,UAAU,IAAI,IAAI,UAAU;CAClC,MAAM,SAAS,CAAC,OAAO,IAAI,CAAC,CAAC,KAAK,UAAU,UAAU;EACpD,MAAM,MAAM,MAAM,QAAO,SAAQ,QAAQ,IAAI,KAAK,GAAG,MAAM,QAAQ;EACnE,MAAM,QAAQ,cACT,QAAQ,UAAU,GAAA,CAAI,KAAK,CAAC,CAAC,kBAAkB,IAChD;EACJ,MAAM,UAAU,IAAI,QAAO,SACzB,KAAK,MAAM,kBAAkB,CAAC,CAAC,SAAS,KAAK,CAC/C;EACA,MAAM,UAAU,QAAQ,QAAO,SAAQ,CAAC,KAAK,QAAQ;EAGrD,OAAO;GAAE;GAAK;GAAS;GAAS,UAFf,QAAQ,QAAO,SAAQ,WAAW,MAAM,EAAE,IAAI,KAAK,GAAG,CAEhC;EAAE;CAC3C,CAAC;CAED,MAAM,UAAU,OAAe,MAAgB,YAAqB;EAClE,eAAc,YACZ,QAAQ,KAAK,WAAW,UAAU;GAChC,IAAI,UAAU,OAAO,OAAO;GAE5B,MAAM,OAAO,IAAI,IAAI,SAAS;GAE9B,KAAK,MAAM,OAAO,MAChB,IAAI,SAAS,KAAK,IAAI,GAAG;QACpB,KAAK,OAAO,GAAG;GAGtB,OAAO;EACT,CAAC,CACH;CACF;CAEA,MAAM,QAAQ,UAAkB;EAC9B,MAAM,WAAW,OAAO,MAAM,EAAE,YAAY,CAAC;EAE7C,IAAI,YAAY,CAAC,SAAS,QAAQ;EAElC,MAAM,QAAQ,IAAI,IAAI,SAAS,KAAI,SAAQ,KAAK,GAAG,CAAC;EACpD,MAAM,OAAO,IAAI,IAAI,UAAU;EAE/B,KAAK,MAAM,OAAO,OAChB,IAAI,UAAU,GAAG,KAAK,IAAI,GAAG;OACxB,KAAK,OAAO,GAAG;EAGtB,WAAW,CAAC,GAAG,IAAI,CAAC;EACpB,eAAc,YACZ,QAAQ,KACN,cAAa,IAAI,IAAI,CAAC,GAAG,SAAS,CAAC,CAAC,QAAO,QAAO,CAAC,MAAM,IAAI,GAAG,CAAC,CAAC,CACpE,CACF;CACF;CAEA,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GACT;0DAEA,SACF;EAPF,UAAA;GASG,OAAO,KAAK,OAAO,UAClB,qBAAC,WAAD;IAEE,aAAU;IACV,mBAAiB,GAAG,GAAG,SAAS;IAChC,WAAW,GACT,yDACA,UAAU,KAAK,iCACf,YAAY,KACd;IARF,UAAA;KAUE,qBAAC,OAAD;MACE,WAAW,GACT,8BACA,YAAY,MACd;MAJF,UAAA;OAME,oBAAC,MAAD;QAAI,IAAI,GAAG,GAAG,SAAS;QAAS,WAAU;QACvC,UAAA,OAAO;OACN,CAAA;OACJ,oBAAC,KAAD;QACE,IAAI,GAAG,GAAG,SAAS;QACnB,WAAU;QAET,UAAA,YACC,MAAM,QAAQ,QACd,MAAM,IAAI,QACV,MAAM,SAAS,MACjB;OACC,CAAA;OACH,oBAAC,UAAD;QACE,WAAU;QACV,SACE,MAAM,QAAQ,SAAS,KACvB,MAAM,SAAS,WAAW,MAAM,QAAQ;QAE1C,UAAU,YAAY,CAAC,MAAM,QAAQ;QACrC,WAAU,YACR,OACE,OACA,MAAM,QAAQ,KAAI,SAAQ,KAAK,GAAG,GAClC,OACF;QAGD,UAAA;OACO,CAAA;MACP;;KACJ,cACC,oBAAC,OAAD;MAAK,WAAU;MACb,UAAA,oBAAC,OAAD;OACE,MAAK;OACL,cAAY,GAAG,YAAY,GAAG,OAAO;OACrC,iBAAe,GAAG,GAAG,QAAQ;OAC7B,OAAO,QAAQ,UAAU;OACf;OACV,WAAU,UAAS;QACjB,MAAM,QAAQ,MAAM,OAAO;QAE3B,YAAW,YACT,QAAQ,KAAK,OAAO,eAClB,eAAe,QAAQ,QAAQ,KACjC,CACF;OACF;OACA,WAAW,YAAY;MACxB,CAAA;KACE,CAAA;KAEP,qBAAC,MAAD;MACE,IAAI,GAAG,GAAG,QAAQ;MAClB,aAAU;MACV,mBAAiB,GAAG,GAAG,SAAS;MAChC,oBAAkB,GAAG,GAAG,SAAS;MACjC,MAAK;MACL,WAAW,GACT,0CACA,YAAY,IACd;MATF,UAAA,CAWG,MAAM,QAAQ,KAAI,SACjB,qBAAC,MAAD;OAEE,aAAU;OACV,YAAU,KAAK;OACf,WAAW,GACT,iDACA,YAAY,IACd;OAPF,UAAA,CASE,oBAAC,UAAD;QACE,SACE,CAAC,KAAK,aACL,WAAW,MAAM,EAAE,IAAI,KAAK,GAAG,KAAK;QAEvC,UAAU,YAAY,KAAK;QAC3B,WAAU,YAAW,OAAO,OAAO,CAAC,KAAK,GAAG,GAAG,OAAO;QAErD,UAAA,KAAK;OACE,CAAA,GACT,KAAK,eAAe,QACnB,oBAAC,OAAD;QAAK,WAAU;QACZ,UAAA,KAAK;OACH,CAAA,CAEL;MAvBG,GAAA,KAAK,GAuBR,CACL,GACA,CAAC,MAAM,QAAQ,UACd,oBAAC,MAAD;OACE,WAAW,GACT,kDACA,YAAY,KACd;OAEC,UAAA;MACC,CAAA,CAEJ;;IACG;GApHF,GAAA,KAoHE,CACV;GACD,oBAAC,OAAD;IACE,aAAU;IACV,WAAW,GACT;uCAEA,YAAY,OACd;IAEC,UAAA,OAAO,KAAK,OAAO,UAClB,oBAAC,QAAD;KAEE,SAAQ;KACR,MAAK;KACL,UAAU,YAAY,CAAC,MAAM,SAAS;KACtC,eAAe,KAAK,KAAK;KAExB,UAAA,WAAW;IACN,GAPD,KAOC,CACT;GACE,CAAA;GACL,oBAAC,QAAD;IACE,aAAU;IACV,MAAK;IACL,aAAU;IACV,eAAY;IACZ,WAAU;IAET,UAAA,OACE,KACE,OAAO,UACN,GAAG,OAAO,OAAO,IAAI,YAAY,MAAM,QAAQ,QAAQ,MAAM,IAAI,QAAQ,MAAM,SAAS,MAAM,GAClG,CAAC,CACA,KAAK,IAAI;GACR,CAAA;EACH;;AAET"}

package/dist/Tree.d.mts

@@ -0,0 +1,62 @@
+import { CSSProperties, ComponentPropsWithRef, ReactNode, Ref } from "react";
+//#region src/components/organisms/tree.d.ts
+export interface Node {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  children?: readonly Node[];
+  disabled?: boolean;
+  leaf?: boolean;
+}
+export interface ExpandInfo {
+  node: Node;
+  expanded: boolean;
+}
+export interface LoadOptions {
+  signal: AbortSignal;
+}
+export interface ScrollOptions {
+  align?: 'auto' | 'start' | 'center' | 'end';
+}
+export interface Actions {
+  scrollTo: (key: string, options?: ScrollOptions) => boolean;
+}
+export interface Props extends Omit<ComponentPropsWithRef<'ul'>, 'children' | 'onSelect'> {
+  nodes: readonly Node[];
+  expandedKeys?: readonly string[];
+  defaultExpandedKeys?: readonly string[];
+  onExpand?: (keys: string[], info: ExpandInfo) => void;
+  selectedKeys?: readonly string[];
+  defaultSelectedKeys?: readonly string[];
+  onSelect?: (keys: string[]) => void;
+  multiple?: boolean;
+  checkable?: boolean;
+  checkedKeys?: readonly string[];
+  defaultCheckedKeys?: readonly string[];
+  onCheck?: (keys: string[]) => void;
+  disabled?: boolean;
+  emptyText?: ReactNode;
+  loadData?: (node: Node, options: LoadOptions) => Promise<void>;
+  expandOnClick?: boolean;
+  virtual?: boolean;
+  height?: CSSProperties['height'];
+  itemHeight?: number;
+  overscan?: number;
+  actionRef?: Ref<Actions>;
+  classNames?: {
+    item?: string;
+    row?: string;
+    group?: string;
+    label?: string;
+    icon?: string;
+    toggle?: string;
+    checkbox?: string;
+    status?: string;
+    retry?: string;
+    empty?: string;
+  };
+}
+declare const Tree: ({ nodes, expandedKeys, defaultExpandedKeys, onExpand, selectedKeys, defaultSelectedKeys, onSelect, multiple, checkable, checkedKeys, defaultCheckedKeys, onCheck, disabled, emptyText, loadData, expandOnClick, virtual, height, itemHeight, overscan, actionRef, className, classNames, style, dir, ref, "aria-label": ariaLabel, ...props }: Props) => import("react").JSX.Element;
+//#endregion
+export { Tree as default };
+//# sourceMappingURL=Tree.d.mts.map

package/dist/Tree.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.d.mts","names":[],"sources":["../src/components/organisms/tree.tsx"],"mappings":";;iBAoCiB;EACf;EACA;EACA,OAAO;EACP,oBAAoB;EACpB;EAGA;;iBAGe;EACf,MAAM;EACN;;iBAGe;EACf,QAAQ;;iBAGO;EACf;;iBAGe;EAGf,WAAW,aAAa,UAAU;;iBAGnB,cAAc,KAC7B;EAGA,gBAAgB;EAChB;EACA;EACA,YAAY,gBAAgB,MAAM;EAClC;EACA;EACA,YAAY;EACZ;EACA;EACA;EACA;EACA,WAAW;EACX;EACA,YAAY;EACZ,YAAY,MAAM,MAAM,SAAS,gBAAgB;EACjD;EACA;EACA,SAAS;EACT;EACA;EACA,YAAY,IAAI;EAChB;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;cAwEE,SAAQ,OAAA,cAAA,qBAAA,UAAA,cAAA,qBAAA,UAAA,UAAA,WAAA,aAAA,oBAAA,SAAA,UAAA,WAAA,UAAA,eAAA,SAAA,QAAA,YAAA,UAAA,WAAA,WAAA,YAAA,OAAA,KAAA,mBAAA,cAAA,SA6BX,0BAAK,IAAA"}