@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/table/table.esm.js

@@ -0,0 +1,343 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { GripVertical as t } from "../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
+import { LoadingSpinner as n } from "../loading-spinner/LoadingSpinner.esm.js";
+import { TableCheckbox as r } from "../table-checkbox/TableCheckbox.esm.js";
+import { applyColumnState as i, buildColumnSlots as a, flattenLeafColumns as o, hasGroupSlot as ee } from "./column-group-utils.esm.js";
+import { SortableHeaderCell as s } from "./components/SortableHeaderCell.esm.js";
+import { useColumnResize as te } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as ne } from "../../hooks/useFillEmptyRows.esm.js";
+import { useTableDragSelection as re } from "../../hooks/useTableDragSelection.esm.js";
+import { useTableSort as ie } from "./hooks/useTableSort.esm.js";
+import { getColumnAlignClasses as c, getHoverableRowClasses as ae, getSelectedRowClasses as oe, getStripedRowClasses as l, getTableBaseClasses as se, getTableCellClasses as u, getTableHeaderCellClasses as d, getTableHeaderClasses as ce, getTableSizeClasses as le, getTableVariantClasses as ue } from "./utils.esm.js";
+import { forwardRef as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { DndContext as de, KeyboardSensor as fe, PointerSensor as pe, closestCenter as me, useSensor as he, useSensors as ge } from "@dnd-kit/core";
+import { SortableContext as _e, arrayMove as ve, horizontalListSortingStrategy as ye, sortableKeyboardCoordinates as be } from "@dnd-kit/sortable";
+//#region src/components/table/table.tsx
+var xe = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
+	let r = {
+		...e,
+		y: 0
+	};
+	if (!t || !n) return r;
+	let i = n.left - t.left, a = n.right - t.right;
+	return r.x = Math.min(Math.max(r.x, i), a), r;
+}, _ = f((f, _) => {
+	let { data: v, columns: y, columnGroups: Se, rowHeight: b, loading: Ce = !1, isFetching: x = !1, emptyMessage: we = "데이터가 없어요", onRowClick: S, selectedRows: C = [], onRowSelect: w, enableRowSelection: T = !1, enableSelectAll: E = !1, rowCompare: D, getRowId: O, enableSorting: k = !1, serverSideSorting: A = !1, onSortChange: Te, initialSort: Ee, variant: De = "default", size: Oe = "medium", stickyHeader: j = !0, height: M, maxHeight: N, storageKey: ke, columnState: P, fillEmptyRows: F = !0, totalElements: I, footerSlot: Ae, className: L = "", "data-testid": R, ...z } = f, { sort: je, sortedData: B } = ie({
+		initialSort: Ee,
+		serverSide: A,
+		onSort: Te || void 0
+	}), V = p(() => !k || A ? v : B(v, (e, t) => {
+		let n = y.find((e) => e.key === t);
+		if (n?.accessor) {
+			let r = n.accessor(e);
+			return typeof r == "string" || typeof r == "number" ? r : e[t];
+		}
+		return e[t];
+	}), [
+		v,
+		k,
+		A,
+		je,
+		B,
+		y
+	]), H = m(null), U = m(null), Me = m(null), Ne = m(null), W = !!P, Pe = ge(he(pe, { activationConstraint: { distance: 5 } }), he(fe, { coordinateGetter: be })), G = p(() => a(y, Se), [y, Se]), K = p(() => {
+		if (!P) return G.filter((e) => !(e.kind === "column" && e.leafColumns[0].hidden));
+		let e = new Set(P.hiddenColumns);
+		return i(G, P.columnOrder, e);
+	}, [G, P]), q = p(() => o(K), [K]), J = p(() => ee(K), [K]), Fe = p(() => new Map(G.map((e) => [e.key, e])), [G]), Ie = (e) => {
+		let { active: t, over: n } = e;
+		if (!P || !n || t.id === n.id) return;
+		let r = Fe.get(String(n.id));
+		if (r?.kind === "column" && r.leafColumns[0].excludeFromPreset) return;
+		let i = P.columnOrder, a = i.indexOf(String(t.id)), o = i.indexOf(String(n.id));
+		a === -1 || o === -1 || P.onColumnOrderChange(ve(i, a, o));
+	}, { handleMouseDown: Le, handleDoubleClick: Re, getColumnWidth: Y, measureRef: ze } = te({
+		columns: q,
+		data: V,
+		getCellContent: (e, t) => {
+			let n = q.find((e) => e.key === t);
+			return n?.accessor ? n.accessor(e) : e[t];
+		},
+		tableRef: H,
+		...P ? {
+			controlledWidths: P.columnWidths,
+			onColumnWidthsChange: P.onColumnWidthsChange
+		} : { storageKey: ke }
+	}), Be = se(), Ve = ue(De), He = le(Oe), Ue = T && E ? 48 : 0, We = p(() => q.reduce((e, t) => {
+		let n = Y(t.key, t.width), r = parseFloat(n);
+		return e + (Number.isFinite(r) ? r : 0);
+	}, 0) + Ue, [
+		q,
+		Y,
+		Ue
+	]), X = p(() => {
+		let e = {};
+		return M && (e.height = typeof M == "number" ? `${M}px` : M), N && (e.maxHeight = typeof N == "number" ? `${N}px` : N), e;
+	}, [M, N]), { emptyRowCount: Ge, measuredRowHeight: Ke } = ne({
+		enabled: F,
+		containerRef: U,
+		theadRef: Me,
+		tbodyRef: Ne,
+		excludeRowsSelector: "tr:not([data-empty-row])",
+		remainingMode: "sum-real-rows",
+		deps: [V, q]
+	}), Z = (e) => !T || C.length === 0 ? !1 : D ? C.some((t) => D(t, e)) : C.some((t) => t === e), qe = p(() => !T || !E || V.length === 0 ? !1 : V.every((e) => Z(e)), [
+		T,
+		E,
+		V,
+		Z
+	]), Je = () => {
+		!T || !w || (qe ? V.forEach((e) => {
+			Z(e) && w(e, !1);
+		}) : V.forEach((e) => {
+			Z(e) || w(e, !0);
+		}));
+	}, Q = T && !!w && !!O, $ = re({
+		rows: V,
+		getRowId: O ?? (() => -1),
+		isSelected: (e) => Z(e),
+		setSelected: (e, t) => w?.(e, t),
+		enabled: Q,
+		scrollContainerRef: U
+	}), Ye = (t, n) => {
+		let r = [l(n)];
+		return Z(t) && r.push(oe()), S && r.push(ae()), e(r);
+	};
+	return Ce ? /* @__PURE__ */ h("div", {
+		ref: _,
+		className: e("flex items-center justify-center p-8 flex-1", L),
+		style: X,
+		"data-testid": R,
+		...z,
+		children: /* @__PURE__ */ h(n, {
+			message: "데이터를 불러오는 중이에요...",
+			className: "min-h-0"
+		})
+	}) : /* @__PURE__ */ g("div", {
+		ref: _,
+		className: e("isolate relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6", L),
+		style: X,
+		"data-testid": R,
+		...z,
+		children: [/* @__PURE__ */ h("div", {
+			ref: ze,
+			className: "absolute invisible whitespace-nowrap",
+			style: {
+				top: "-9999px",
+				left: "-9999px"
+			}
+		}), /* @__PURE__ */ g("div", {
+			className: "flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6",
+			children: [/* @__PURE__ */ g("div", {
+				className: "relative flex flex-1 flex-col min-h-0",
+				children: [/* @__PURE__ */ h("div", {
+					className: e("pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150", x ? "opacity-100" : "opacity-0"),
+					...x ? {
+						role: "status",
+						"aria-live": "polite"
+					} : { "aria-hidden": !0 },
+					children: /* @__PURE__ */ h(n, {
+						message: "",
+						className: "min-h-0"
+					})
+				}), /* @__PURE__ */ h("div", {
+					ref: U,
+					className: "scrollbar-table overflow-auto flex-1 bg-bg-page",
+					children: V.length === 0 ? /* @__PURE__ */ h("div", {
+						className: "flex items-center justify-center p-8 h-full",
+						children: /* @__PURE__ */ h("p", {
+							className: "text-fg-muted",
+							children: we
+						})
+					}) : /* @__PURE__ */ h(de, {
+						sensors: Pe,
+						collisionDetection: me,
+						onDragEnd: Ie,
+						modifiers: [xe],
+						children: /* @__PURE__ */ g("table", {
+							ref: H,
+							className: e(Be, Ve, He),
+							style: {
+								tableLayout: "fixed",
+								minWidth: "100%",
+								width: `${We}px`
+							},
+							children: [
+								/* @__PURE__ */ g("colgroup", { children: [T && E && /* @__PURE__ */ h("col", { style: { width: "48px" } }), q.map((e) => /* @__PURE__ */ h("col", {
+									"data-col-key": e.key,
+									style: { width: Y(e.key, e.width) }
+								}, e.key))] }),
+								/* @__PURE__ */ g("thead", {
+									ref: Me,
+									className: ce(),
+									style: {
+										position: j ? "sticky" : "relative",
+										top: j ? 0 : void 0,
+										zIndex: j ? 20 : void 0
+									},
+									children: [/* @__PURE__ */ g("tr", { children: [T && E && /* @__PURE__ */ h("th", {
+										rowSpan: J ? 2 : 1,
+										className: e(d(), c("center"), "w-12 px-0"),
+										children: /* @__PURE__ */ h("div", {
+											className: "flex items-center justify-center",
+											children: /* @__PURE__ */ h(r, {
+												checked: qe,
+												onChange: () => Je(),
+												ariaLabel: "전체 선택"
+											})
+										})
+									}), /* @__PURE__ */ h(_e, {
+										items: K.map((e) => e.key),
+										strategy: ye,
+										children: K.map((n) => {
+											if (n.kind === "group") return /* @__PURE__ */ g(s, {
+												id: n.key,
+												disabled: !W,
+												as: "th",
+												colSpan: n.leafColumns.length,
+												className: e(d(), c("center"), "group/header-cell relative", n.hideOnMobile && "hidden md:table-cell"),
+												children: [W && /* @__PURE__ */ h("span", {
+													className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+													"aria-hidden": "true",
+													children: /* @__PURE__ */ h(t, { className: "h-3.5 w-3.5" })
+												}), /* @__PURE__ */ h("div", {
+													className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
+													children: /* @__PURE__ */ h("span", { children: n.header })
+												})]
+											}, n.key);
+											let r = n.leafColumns[0], i = !W || r.excludeFromPreset === !0;
+											return /* @__PURE__ */ g(s, {
+												id: r.key,
+												disabled: i,
+												as: "th",
+												rowSpan: J ? 2 : 1,
+												className: e(d(), c("center"), "group/header-cell relative", r.sticky && "sticky left-0 z-20 bg-bg-table-header", r.hideOnMobile && "hidden md:table-cell"),
+												style: {
+													width: Y(r.key, r.width),
+													minWidth: r.minWidth || 50
+												},
+												children: [
+													!i && /* @__PURE__ */ h("span", {
+														className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-fg-subtle opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+														"aria-hidden": "true",
+														children: /* @__PURE__ */ h(t, { className: "h-3.5 w-3.5" })
+													}),
+													/* @__PURE__ */ h("div", {
+														className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
+														children: /* @__PURE__ */ h("span", { children: r.header })
+													}),
+													r.excludeFromPreset !== !0 && /* @__PURE__ */ h("div", {
+														className: "group/resize absolute right-0 top-0 h-full w-3 cursor-col-resize z-50 flex items-center justify-center",
+														onPointerDown: (e) => e.stopPropagation(),
+														onMouseDown: (e) => {
+															e.preventDefault(), e.stopPropagation(), Le(r.key, e);
+														},
+														onDoubleClick: (e) => {
+															e.preventDefault(), e.stopPropagation(), Re(r.key, e);
+														},
+														onClick: (e) => {
+															e.preventDefault(), e.stopPropagation();
+														},
+														style: { touchAction: "none" },
+														title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절",
+														children: /* @__PURE__ */ h("span", {
+															"aria-hidden": "true",
+															className: "h-1/2 w-0.5 rounded-full bg-transparent transition-colors group-hover/header-cell:bg-border-default group-hover/resize:!bg-primary group-active/resize:!bg-primary-hover"
+														})
+													})
+												]
+											}, r.key);
+										})
+									})] }), J && /* @__PURE__ */ h("tr", { children: K.filter((e) => e.kind === "group").flatMap((e) => e.leafColumns).map((t) => /* @__PURE__ */ h("th", {
+										className: e(d(), c(t.align ?? "center"), t.hideOnMobile && "hidden md:table-cell"),
+										style: {
+											width: Y(t.key, t.width),
+											minWidth: t.minWidth || 50
+										},
+										children: /* @__PURE__ */ h("div", {
+											className: "flex items-center justify-center w-full pr-1 pl-3 select-none",
+											children: /* @__PURE__ */ h("span", { children: t.header })
+										})
+									}, t.key)) })]
+								}),
+								/* @__PURE__ */ g("tbody", {
+									ref: Ne,
+									children: [V.map((t, n) => {
+										let i = Z(t);
+										return /* @__PURE__ */ g("tr", {
+											className: Ye(t, n),
+											onClick: () => S?.(t, n),
+											style: b ? { height: `${b}px` } : void 0,
+											children: [T && E && /* @__PURE__ */ h("td", {
+												className: e(u(), c("center"), "w-12 select-none"),
+												onClick: (e) => e.stopPropagation(),
+												onMouseDown: Q ? (e) => {
+													e.preventDefault(), $.onRowMouseDown(n);
+												} : void 0,
+												onMouseEnter: Q ? () => $.onRowMouseEnter(n) : void 0,
+												children: /* @__PURE__ */ h("div", {
+													className: "flex items-center justify-center",
+													children: /* @__PURE__ */ h(r, {
+														checked: i,
+														onChange: (e) => w?.(t, e),
+														pointerEventsNone: Q,
+														ariaLabel: "행 선택"
+													})
+												})
+											}), q.map((n) => {
+												let r = n.accessor ? n.accessor(t) : t[n.key];
+												return /* @__PURE__ */ h("td", {
+													className: e(u(), c(n.align), n.sticky && "sticky left-0 z-10 bg-inherit", n.hideOnMobile && "hidden md:table-cell"),
+													style: {
+														width: Y(n.key, n.width),
+														minWidth: n.minWidth || 50,
+														...b ? {
+															height: `${b}px`,
+															maxHeight: `${b}px`,
+															overflow: "hidden"
+														} : {}
+													},
+													children: r
+												}, n.key);
+											})]
+										}, n);
+									}), F && Array.from({ length: Ge }).map((t, n) => {
+										let r = V.length + n, i = b ?? Ke ?? void 0;
+										return /* @__PURE__ */ g("tr", {
+											"data-empty-row": !0,
+											"aria-hidden": "true",
+											className: l(r),
+											style: i ? { height: `${i}px` } : void 0,
+											children: [T && E && /* @__PURE__ */ h("td", {
+												className: e(u(), "w-12"),
+												style: i ? { height: `${i}px` } : void 0
+											}), q.map((t) => /* @__PURE__ */ h("td", {
+												className: e(u(), t.hideOnMobile && "hidden md:table-cell"),
+												style: {
+													width: Y(t.key, t.width),
+													minWidth: t.minWidth || 50,
+													...i ? { height: `${i}px` } : {}
+												}
+											}, t.key))]
+										}, `empty-${n}`);
+									})]
+								})
+							]
+						})
+					})
+				})]
+			}), Ae ?? (I === void 0 ? null : /* @__PURE__ */ h("div", {
+				className: "flex justify-end shrink-0 text-sm text-fg-muted",
+				children: /* @__PURE__ */ g("span", { children: [
+					"총 ",
+					I.toLocaleString(),
+					"건"
+				] })
+			}))]
+		})]
+	});
+});
+_.displayName = "Table";
+//#endregion
+export { _ as Table };

package/dist/components/table/utils.cjs

@@ -0,0 +1,35 @@
+var e=()=>`w-full
+    border-collapse
+    text-left
+    table-fixed`.replace(/\s+/g,` `),t=(e=`default`)=>({default:``,bordered:`border border-border-default`,striped:``})[e],n=(e=`medium`)=>({small:`text-sm`,medium:`text-base`,large:`text-lg`})[e],r=(e=`left`)=>({left:`text-left justify-start`,center:`text-center justify-center`,right:`text-right justify-end`})[e],i=()=>`font-medium
+    text-fg-muted
+    text-sm
+    uppercase
+    tracking-wider
+    bg-bg-table-header
+    leading-tight`.replace(/\s+/g,` `),a=()=>`px-6
+    py-1.5
+    text-fg-muted
+    text-sm
+    font-medium
+    leading-tight
+    border-b border-r border-border-table-header
+    whitespace-nowrap
+    bg-bg-table-header`.replace(/\s+/g,` `),o=()=>`px-3
+    py-0.5
+    text-fg-default
+    text-xs
+    leading-tight
+    border-b border-r border-border-table-cell
+    whitespace-nowrap
+    overflow-hidden
+    text-ellipsis`.replace(/\s+/g,` `),s=()=>`px-3
+    py-0.5
+    text-fg-default
+    text-xs
+    leading-tight
+    border-b border-r border-border-table-cell
+    whitespace-nowrap`.replace(/\s+/g,` `),c=e=>e%2==0?`bg-bg-table-row-even hover:bg-bg-table-row-hover`:`bg-bg-table-row-odd hover:bg-bg-table-row-hover`,l=()=>`bg-bg-table-row-selected
+    hover:bg-bg-table-row-selected-hover
+    shadow-[inset_4px_0_0_0_var(--color-primary)]`.replace(/\s+/g,` `),u=()=>`transition-colors duration-200
+    cursor-pointer`.replace(/\s+/g,` `);exports.getColumnAlignClasses=r,exports.getHoverableRowClasses=u,exports.getSelectedRowClasses=l,exports.getStripedRowClasses=c,exports.getTableBaseClasses=e,exports.getTableCellClasses=o,exports.getTableCellClassesNoTruncate=s,exports.getTableHeaderCellClasses=a,exports.getTableHeaderClasses=i,exports.getTableSizeClasses=n,exports.getTableVariantClasses=t;

package/dist/{src/components → components}/table/utils.d.ts

@@ -1,4 +1,4 @@
-import { TableVariant, TableSize } from './types';
+import { TableVariant, TableSize } from './types.js';
 /**
  * Table의 기본 클래스 (공통 스타일)
  */
@@ -34,7 +34,7 @@ export declare const getTableCellClasses: () => string;
 export declare const getTableCellClassesNoTruncate: () => string;
 /**
  * 스트라이프 행 스타일
- * 첫 번째(index 0): 회색, 두 번째(index 1): 흰색
+ * 첫 번째(index 0): row-even(라이트 흰색), 두 번째(index 1): row-odd — avocado와 같은 위상
  */
 export declare const getStripedRowClasses: (index: number) => string;
 /**

package/dist/components/table/utils.esm.js

@@ -0,0 +1,16 @@
+//#region src/components/table/utils.ts
+var e = () => "w-full\n    border-collapse\n    text-left\n    table-fixed".replace(/\s+/g, " "), t = (e = "default") => ({
+	default: "",
+	bordered: "border border-border-default",
+	striped: ""
+})[e], n = (e = "medium") => ({
+	small: "text-sm",
+	medium: "text-base",
+	large: "text-lg"
+})[e], r = (e = "left") => ({
+	left: "text-left justify-start",
+	center: "text-center justify-center",
+	right: "text-right justify-end"
+})[e], i = () => "font-medium\n    text-fg-muted\n    text-sm\n    uppercase\n    tracking-wider\n    bg-bg-table-header\n    leading-tight".replace(/\s+/g, " "), a = () => "px-6\n    py-1.5\n    text-fg-muted\n    text-sm\n    font-medium\n    leading-tight\n    border-b border-r border-border-table-header\n    whitespace-nowrap\n    bg-bg-table-header".replace(/\s+/g, " "), o = () => "px-3\n    py-0.5\n    text-fg-default\n    text-xs\n    leading-tight\n    border-b border-r border-border-table-cell\n    whitespace-nowrap\n    overflow-hidden\n    text-ellipsis".replace(/\s+/g, " "), s = () => "px-3\n    py-0.5\n    text-fg-default\n    text-xs\n    leading-tight\n    border-b border-r border-border-table-cell\n    whitespace-nowrap".replace(/\s+/g, " "), c = (e) => e % 2 == 0 ? "bg-bg-table-row-even hover:bg-bg-table-row-hover" : "bg-bg-table-row-odd hover:bg-bg-table-row-hover", l = () => "bg-bg-table-row-selected\n    hover:bg-bg-table-row-selected-hover\n    shadow-[inset_4px_0_0_0_var(--color-primary)]".replace(/\s+/g, " "), u = () => "transition-colors duration-200\n    cursor-pointer".replace(/\s+/g, " ");
+//#endregion
+export { r as getColumnAlignClasses, u as getHoverableRowClasses, l as getSelectedRowClasses, c as getStripedRowClasses, e as getTableBaseClasses, o as getTableCellClasses, s as getTableCellClassesNoTruncate, a as getTableHeaderCellClasses, i as getTableHeaderClasses, n as getTableSizeClasses, t as getTableVariantClasses };

package/dist/components/table-checkbox/TableCheckbox.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/minus.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(function({checked:a,indeterminate:o=!1,disabled:s=!1,onChange:c,pointerEventsNone:l=!1,ariaLabel:u},d){let f=(0,r.useRef)(null);(0,r.useEffect)(()=>{let e=f.current;e&&(e.indeterminate=o&&!a)},[o,a]);let p=o&&!a,m=a||p;return(0,i.jsxs)(`label`,{className:e.cn(`relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center`,s?`cursor-not-allowed`:`cursor-pointer`,l&&`pointer-events-none`),style:{flex:`0 0 18px`},"aria-label":u,children:[(0,i.jsx)(`input`,{ref:e=>{f.current=e,typeof d==`function`?d(e):d&&(d.current=e)},type:`checkbox`,className:`peer sr-only`,checked:a,disabled:s,onChange:e=>c?.(e.target.checked)}),(0,i.jsx)(`span`,{className:e.cn(`flex h-full w-full items-center justify-center rounded-checkbox border-[1.5px] transition-colors`,m?`border-primary bg-primary`:`border-border-default bg-bg-surface`,s&&`opacity-40`),children:p?(0,i.jsx)(n.Minus,{className:`h-3 w-3 text-fg-inverse`,strokeWidth:3}):a?(0,i.jsx)(t.Check,{className:`h-3 w-3 text-fg-inverse`,strokeWidth:3}):null})]})});exports.TableCheckbox=a;

package/dist/components/table-checkbox/TableCheckbox.esm.js

@@ -0,0 +1,40 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Check as t } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Minus as n } from "../../node_modules/lucide-react/dist/esm/icons/minus.esm.js";
+import { forwardRef as r, useEffect as i, useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/table-checkbox/TableCheckbox.tsx
+var c = r(function({ checked: r, indeterminate: c = !1, disabled: l = !1, onChange: u, pointerEventsNone: d = !1, ariaLabel: f }, p) {
+	let m = a(null);
+	i(() => {
+		let e = m.current;
+		e && (e.indeterminate = c && !r);
+	}, [c, r]);
+	let h = c && !r, g = r || h;
+	return /* @__PURE__ */ s("label", {
+		className: e("relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center", l ? "cursor-not-allowed" : "cursor-pointer", d && "pointer-events-none"),
+		style: { flex: "0 0 18px" },
+		"aria-label": f,
+		children: [/* @__PURE__ */ o("input", {
+			ref: (e) => {
+				m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+			},
+			type: "checkbox",
+			className: "peer sr-only",
+			checked: r,
+			disabled: l,
+			onChange: (e) => u?.(e.target.checked)
+		}), /* @__PURE__ */ o("span", {
+			className: e("flex h-full w-full items-center justify-center rounded-checkbox border-[1.5px] transition-colors", g ? "border-primary bg-primary" : "border-border-default bg-bg-surface", l && "opacity-40"),
+			children: h ? /* @__PURE__ */ o(n, {
+				className: "h-3 w-3 text-fg-inverse",
+				strokeWidth: 3
+			}) : r ? /* @__PURE__ */ o(t, {
+				className: "h-3 w-3 text-fg-inverse",
+				strokeWidth: 3
+			}) : null
+		})]
+	});
+});
+//#endregion
+export { c as TableCheckbox };

package/dist/components/table-checkbox/index.d.ts

@@ -0,0 +1 @@
+export { TableCheckbox } from './TableCheckbox.js';

package/dist/components/table-page-layout/TablePageLayout.cjs

@@ -0,0 +1 @@
+const e=require("../../hooks/useMediaQuery.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(){return e.useIsMobile()?`mini`:`small`}function i({children:e}){let r=t.Children.toArray(e),i=r[0],o=(0,t.isValidElement)(i)&&i.type===a;return(0,n.jsxs)(`div`,{className:`flex h-[calc(100dvh-64px)] flex-col`,children:[o?i:null,(0,n.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3 sm:gap-3 sm:px-4 sm:pt-3 sm:pb-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:o?r.slice(1):r})]})}function a({title:e,children:t}){return(0,n.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-b border-border-subtle px-4 py-2 sm:px-6 sm:py-3`,children:[(0,n.jsx)(`h1`,{className:`min-w-0 truncate text-base font-semibold text-fg-default sm:text-lg`,children:e}),t?(0,n.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:t}):null]})}function o({children:e}){return(0,n.jsx)(`div`,{className:`flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-bg-surface p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:e})}exports.PageHeader=a,exports.TableCard=o,exports.TablePageLayout=i,exports.useHeaderButtonSize=r;

package/dist/components/table-page-layout/TablePageLayout.esm.js

@@ -0,0 +1,37 @@
+import { useIsMobile as e } from "../../hooks/useMediaQuery.esm.js";
+import { Children as t, isValidElement as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/table-page-layout/TablePageLayout.tsx
+function a() {
+	return e() ? "mini" : "small";
+}
+function o({ children: e }) {
+	let a = t.toArray(e), o = a[0], c = n(o) && o.type === s;
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-[calc(100dvh-64px)] flex-col",
+		children: [c ? o : null, /* @__PURE__ */ r("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3 sm:gap-3 sm:px-4 sm:pt-3 sm:pb-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
+			children: c ? a.slice(1) : a
+		})]
+	});
+}
+function s({ title: e, children: t }) {
+	return /* @__PURE__ */ i("div", {
+		className: "flex items-center justify-between gap-2 border-b border-border-subtle px-4 py-2 sm:px-6 sm:py-3",
+		children: [/* @__PURE__ */ r("h1", {
+			className: "min-w-0 truncate text-base font-semibold text-fg-default sm:text-lg",
+			children: e
+		}), t ? /* @__PURE__ */ r("div", {
+			className: "flex shrink-0 items-center gap-2",
+			children: t
+		}) : null]
+	});
+}
+function c({ children: e }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-bg-surface p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
+		children: e
+	});
+}
+//#endregion
+export { s as PageHeader, c as TableCard, o as TablePageLayout, a as useHeaderButtonSize };

package/dist/{src/components → components}/table-page-layout/index.d.ts

@@ -1 +1 @@
-export { TablePageLayout, PageHeader, TableCard, useHeaderButtonSize, } from './TablePageLayout';
+export { TablePageLayout, PageHeader, TableCard, useHeaderButtonSize, } from './TablePageLayout.js';

package/dist/components/textarea/Textarea.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../_shared/form-size-tokens.cjs");let n=require("react"),r=require("react/jsx-runtime");var i={large:`rounded-control-large border px-control-pad-large py-3.5 transition-colors focus-within:outline-hidden`,medium:`rounded-control-medium border px-control-pad-medium py-3 transition-colors focus-within:outline-hidden`,small:`rounded-control-small border px-control-pad-small py-2 transition-colors focus-within:outline-hidden`,mini:`rounded-control-mini border px-control-pad-mini py-1.5 transition-colors focus-within:outline-hidden`},a=(e,t,n)=>{let r=i[n];return t?[r,`bg-bg-disabled border-border-subtle`].join(` `):e?[r,`bg-bg-surface border-border-danger`].join(` `):[r,`bg-bg-surface border-border-subtle focus-within:border-border-primary`].join(` `)},o=(e,n,r,i,a)=>{let o=`w-full bg-transparent ${t.CONTROL_TEXT_CLASS[a]} focus:outline-hidden disabled:cursor-not-allowed ${i?`resize-y`:`resize-none`}`;return n?[o,`text-fg-disabled placeholder:text-fg-disabled`].join(` `):e?[o,`text-fg-danger placeholder:text-fg-danger-placeholder`].join(` `):r?[o,`text-fg-default placeholder:text-fg-subtle`].join(` `):[o,`text-fg-subtle placeholder:text-fg-subtle`].join(` `)},s=e=>[`block text-xs font-medium mb-2`,e?`text-fg-danger`:`text-fg-muted`].join(` `),c=e=>[`mt-2 text-sm`,e?`text-fg-danger`:`text-fg-muted`].join(` `),l=(0,n.forwardRef)(({textareaSize:t=`medium`,label:i,help:l,hasError:u=!1,disabled:d=!1,showCount:f=!1,resize:p=!1,maxLength:m,rows:h=4,className:g=``,containerClassName:_=``,value:v,defaultValue:y,onChange:b,placeholder:x,id:S,...C},w)=>{let[T,E]=(0,n.useState)(y?.toString()??``),D=v!==void 0,O=D?v?.toString()??``:T,k=O.length>0,A=e=>{D||E(e.target.value),b?.(e)},j=a(u,d,t),M=o(u,d,k,p,t),N=f&&m!=null&&(0,r.jsxs)(`span`,{className:e.cn(`text-xs`,u?`text-fg-danger`:`text-fg-subtle`),children:[O.length,` / `,m]});return(0,r.jsxs)(`div`,{className:e.cn(`w-full`,_),children:[i&&(0,r.jsx)(`label`,{className:s(u),htmlFor:S,children:i}),(0,r.jsxs)(`div`,{className:j,children:[(0,r.jsx)(`textarea`,{...C,ref:w,id:S,rows:h,value:D?O:void 0,defaultValue:D?void 0:y,onChange:A,placeholder:x,disabled:d,maxLength:m,className:e.cn(M,g)}),N&&(0,r.jsx)(`div`,{className:`mt-1 flex justify-end`,children:N})]}),l&&(0,r.jsx)(`div`,{className:c(u),children:l})]})});l.displayName=`Textarea`,exports.Textarea=l;

package/dist/{src/components → components}/textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import { TextareaProps } from './types';
+import { TextareaProps } from './types.js';
 /**
  * Textarea 컴포넌트.
  *

package/dist/components/textarea/Textarea.esm.js

@@ -0,0 +1,64 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { CONTROL_TEXT_CLASS as t } from "../_shared/form-size-tokens.esm.js";
+import { forwardRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/textarea/Textarea.tsx
+var o = {
+	large: "rounded-control-large border px-control-pad-large py-3.5 transition-colors focus-within:outline-hidden",
+	medium: "rounded-control-medium border px-control-pad-medium py-3 transition-colors focus-within:outline-hidden",
+	small: "rounded-control-small border px-control-pad-small py-2 transition-colors focus-within:outline-hidden",
+	mini: "rounded-control-mini border px-control-pad-mini py-1.5 transition-colors focus-within:outline-hidden"
+}, s = (e, t, n) => {
+	let r = o[n];
+	return t ? [r, "bg-bg-disabled border-border-subtle"].join(" ") : e ? [r, "bg-bg-surface border-border-danger"].join(" ") : [r, "bg-bg-surface border-border-subtle focus-within:border-border-primary"].join(" ");
+}, c = (e, n, r, i, a) => {
+	let o = `w-full bg-transparent ${t[a]} focus:outline-hidden disabled:cursor-not-allowed ${i ? "resize-y" : "resize-none"}`;
+	return n ? [o, "text-fg-disabled placeholder:text-fg-disabled"].join(" ") : e ? [o, "text-fg-danger placeholder:text-fg-danger-placeholder"].join(" ") : r ? [o, "text-fg-default placeholder:text-fg-subtle"].join(" ") : [o, "text-fg-subtle placeholder:text-fg-subtle"].join(" ");
+}, l = (e) => ["block text-xs font-medium mb-2", e ? "text-fg-danger" : "text-fg-muted"].join(" "), u = (e) => ["mt-2 text-sm", e ? "text-fg-danger" : "text-fg-muted"].join(" "), d = n(({ textareaSize: t = "medium", label: n, help: o, hasError: d = !1, disabled: f = !1, showCount: p = !1, resize: m = !1, maxLength: h, rows: g = 4, className: _ = "", containerClassName: v = "", value: y, defaultValue: b, onChange: x, placeholder: S, id: C, ...w }, T) => {
+	let [E, D] = r(b?.toString() ?? ""), O = y !== void 0, k = O ? y?.toString() ?? "" : E, A = k.length > 0, j = (e) => {
+		O || D(e.target.value), x?.(e);
+	}, M = s(d, f, t), N = c(d, f, A, m, t), P = p && h != null && /* @__PURE__ */ a("span", {
+		className: e("text-xs", d ? "text-fg-danger" : "text-fg-subtle"),
+		children: [
+			k.length,
+			" / ",
+			h
+		]
+	});
+	return /* @__PURE__ */ a("div", {
+		className: e("w-full", v),
+		children: [
+			n && /* @__PURE__ */ i("label", {
+				className: l(d),
+				htmlFor: C,
+				children: n
+			}),
+			/* @__PURE__ */ a("div", {
+				className: M,
+				children: [/* @__PURE__ */ i("textarea", {
+					...w,
+					ref: T,
+					id: C,
+					rows: g,
+					value: O ? k : void 0,
+					defaultValue: O ? void 0 : b,
+					onChange: j,
+					placeholder: S,
+					disabled: f,
+					maxLength: h,
+					className: e(N, _)
+				}), P && /* @__PURE__ */ i("div", {
+					className: "mt-1 flex justify-end",
+					children: P
+				})]
+			}),
+			o && /* @__PURE__ */ i("div", {
+				className: u(d),
+				children: o
+			})
+		]
+	});
+});
+d.displayName = "Textarea";
+//#endregion
+export { d as Textarea };

package/dist/components/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea.js';
+export type { TextareaProps, TextareaSize } from './types.js';

package/dist/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeInput, TimePicker } from './time-picker.js';
+export type { TimeInputProps, TimePickerProps, TimePrecision, } from './time-picker.js';

package/dist/components/time-picker/time-picker.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/clock.cjs"),i=require("../select/Select.cjs"),a=require("../date-picker/PickerSheet.cjs"),o=require("./time-utils.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("@floating-ui/react");function u({children:t,value:n,onApply:r,precision:i,disabled:u=!1,disableMobileSheet:f,referenceClassName:p}){let[m,h]=(0,s.useState)(!1),[g,_]=(0,s.useState)(()=>o.parseTime(n)),v=u||!!t.props.disabled,{useSheet:y}=a.usePickerMobile(f),{refs:b,floatingStyles:x,context:S}=(0,l.useFloating)({open:m,onOpenChange:e=>{v||(e&&_(o.parseTime(n)),h(e))},placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(8),(0,l.flip)({fallbackAxisSideDirection:`start`}),(0,l.shift)({padding:8})]}),{getReferenceProps:C,getFloatingProps:w}=(0,l.useInteractions)([(0,l.useClick)(S,{enabled:!v}),(0,l.useDismiss)(S),(0,l.useRole)(S,{role:`dialog`})]),T=()=>{let e=o.normalizeTime(g,i);e&&(r(o.formatTime(e,i)),h(!1))},E=C(),D=typeof t.type!=`string`||[`button`,`input`,`select`,`textarea`].includes(t.type),O=(0,s.cloneElement)(t,{"aria-haspopup":`dialog`,"aria-expanded":m,"aria-controls":typeof E[`aria-controls`]==`string`?E[`aria-controls`]:void 0,"aria-disabled":v||void 0,...v&&D?{disabled:!0}:{}});return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{ref:b.setReference,...E,className:e.cn(`inline-flex`,p??`w-full`),children:O}),(0,c.jsx)(a.PickerSheet,{isOpen:m,onClose:()=>h(!1),useSheet:y,context:S,setFloating:b.setFloating,floatingStyles:x,getFloatingProps:e=>w({...e,"aria-label":`시간 선택`}),desktopClassName:`z-floating w-80 max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-4 shadow-tooltip`,children:(0,c.jsx)(d,{pending:g,precision:i,onChange:_,onClose:()=>h(!1),onApply:T})})]})}function d({pending:r,precision:i,onChange:a,onClose:l,onApply:u}){let[d,p]=(0,s.useState)(null),m=(0,s.useRef)(null),h=(0,s.useRef)(null),g=(0,s.useRef)(null),_=e=>{if(e.key!==`Tab`||e.shiftKey||!(e.target instanceof HTMLInputElement))return;let t=e.target===m.current?h:e.target===h.current&&i===`second`?g:null;t&&(e.preventDefault(),t.current?.focus())},v=(e,t,n,i)=>(0,c.jsx)(f,{label:t,value:r[e],max:n,open:d===e,onOpenChange:t=>p(n=>t?e:n===e?null:n),onChange:t=>a({...r,[e]:t}),inputRef:i});return(0,c.jsxs)(`div`,{className:`grid gap-4`,onKeyDown:_,children:[(0,c.jsxs)(`div`,{className:e.cn(`grid items-end gap-2`,i===`second`?`grid-cols-3`:`grid-cols-2`),children:[v(`hour`,`시간`,23,m),v(`minute`,`분`,59,h),i===`second`&&v(`second`,`초`,59,g)]}),(0,c.jsxs)(`div`,{className:`flex justify-end gap-2`,children:[(0,c.jsx)(t.Button,{type:`button`,size:`small`,variant:`tertiary`,appearance:`transparent`,onClick:l,children:`닫기`}),(0,c.jsx)(t.Button,{type:`button`,size:`small`,disabled:!o.normalizeTime(r,i),leadingIcon:(0,c.jsx)(n.Check,{"aria-hidden":!0,className:`h-4 w-4`}),onClick:u,children:`적용`})]})]})}function f({label:e,value:t,max:n,open:r,onOpenChange:a,onChange:s,inputRef:l}){let u=Array.from({length:n+1},(e,t)=>({value:o.padTimeUnit(t),label:o.padTimeUnit(t)}));t&&!u.some(e=>e.value===t)&&u.push({value:t,label:t});let d=e===`시간`?`HH`:e===`분`?`MM`:`SS`;return(0,c.jsx)(i.Select,{variant:`box`,selectSize:`small`,ref:l,label:e,labelOption:`sustain`,options:u,value:t,placeholder:d,onChange:s,open:r,onOpenChange:a,searchable:!0,openOnFocus:!0,validateSearchQuery:e=>e===``||/^\d{1,2}$/.test(e)&&Number(e)<=n,onSearchChange:e=>{(r||e!==``)&&s(e)},searchDebounceMs:!1,searchPlaceholder:d})}function p({value:t,onChange:n,precision:i,ariaLabel:a=`시간`,placeholder:s,disabled:l,readOnly:d=!1,className:f,disableMobileSheet:p,size:m=`medium`,"aria-invalid":h,"data-rhf-invalid":g}){return(0,c.jsxs)(`div`,{className:e.cn(`flex min-w-0 w-full items-center border border-border-subtle bg-bg-surface transition-colors focus-within:border-border-primary`,m===`small`?`h-control-small rounded-control-small px-control-pad-small text-control-small`:`h-control-medium rounded-control-medium px-control-pad-medium font-control-field`,l&&`bg-bg-disabled text-fg-disabled`,!l&&d&&`bg-bg-subtle`,f),children:[(0,c.jsx)(`input`,{"aria-label":a,"aria-invalid":h||void 0,"data-rhf-invalid":g?`true`:void 0,value:t,placeholder:s??(i===`second`?`00:00:00`:`00:00`),disabled:l,readOnly:d,inputMode:`numeric`,maxLength:i===`second`?8:5,onChange:e=>{if(d)return;let t=o.formatDigitStream(e.target.value,i);t!==null&&o.isValidTimeDraft(t,i)&&n(t)},className:`w-0 min-w-0 flex-1 self-stretch bg-transparent text-fg-default outline-hidden placeholder:text-fg-subtle disabled:text-fg-disabled`}),(0,c.jsx)(u,{value:t,precision:i,disabled:l||d,disableMobileSheet:p,onApply:n,referenceClassName:`shrink-0`,children:(0,c.jsx)(`button`,{type:`button`,"aria-label":`${a} 선택`,disabled:l||d,"data-field-affordance":`true`,className:`relative flex h-6 w-6 shrink-0 items-center justify-center rounded text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-default`,children:(0,c.jsx)(r.Clock,{"aria-hidden":!0,className:`h-3.5 w-3.5`})})})]})}exports.TimeInput=p,exports.TimePicker=u;

package/dist/components/time-picker/time-picker.d.ts

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import { TimePrecision } from './time-utils.js';
+export type { TimePrecision } from './time-utils.js';
+export interface TimePickerProps {
+    children: ReactElement;
+    value: string;
+    onApply: (value: string) => void;
+    precision: TimePrecision;
+    disabled?: boolean;
+    /** 이미 바텀시트 안이면 모바일에서도 popover를 사용한다. 생략하면 Modal 안에서 자동 적용되며, false를 명시하면 시트를 유지한다. */
+    disableMobileSheet?: boolean;
+    referenceClassName?: string;
+}
+export interface TimeInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    precision: TimePrecision;
+    ariaLabel?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** 값의 대비를 유지하면서 입력과 선택을 막는다. */
+    readOnly?: boolean;
+    className?: string;
+    disableMobileSheet?: boolean;
+    size?: "small" | "medium";
+    "aria-invalid"?: boolean;
+    "data-rhf-invalid"?: boolean;
+}
+/**
+ * 시·분 또는 시·분·초를 선택하고 적용할 때 값을 전달한다.
+ * 모바일 시트는 포커스를 가두지 않는다. 포커스 순환이 필요하면 Modal 안에서 사용한다.
+ */
+export declare function TimePicker({ children, value, onApply, precision, disabled, disableMobileSheet, referenceClassName, }: TimePickerProps): import("react").JSX.Element;
+/** 직접 시간 입력과 피커 버튼을 함께 제공하는 제어 입력. */
+export declare function TimeInput({ value, onChange, precision, ariaLabel, placeholder, disabled, readOnly, className, disableMobileSheet, size, "aria-invalid": ariaInvalid, "data-rhf-invalid": dataRHFInvalid, }: TimeInputProps): import("react").JSX.Element;