@jbpark/ui-kit 10.2.0 → 10.4.0

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 "./Input.mjs";
+import Checkbox from "./Checkbox.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":"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"}

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