@thewrong/ui 0.2.0 → 0.3.0

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

@@ -1,30 +1,31 @@
-import { Checkbox as e } from "../checkbox/Checkbox.esm.js";
-import { ChevronRight as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
-import { LoadingSpinner as n } from "../loading-spinner/LoadingSpinner.esm.js";
-import { Select as r } from "../select/Select.esm.js";
-import { SortableHeaderCell as i } from "./components/SortableHeaderCell.esm.js";
-import { useColumnResize as a } from "./hooks/useColumnResize.esm.js";
-import { useFillEmptyRows as o } from "./hooks/useFillEmptyRows.esm.js";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Checkbox as t } from "../checkbox/Checkbox.esm.js";
+import { ChevronRight as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { LoadingSpinner as r } from "../loading-spinner/LoadingSpinner.esm.js";
+import { Select as i } from "../select/Select.esm.js";
+import { SortableHeaderCell as a } from "./components/SortableHeaderCell.esm.js";
+import { useColumnResize as o } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as s } from "../../hooks/useFillEmptyRows.esm.js";
 import { useTableSort as ee } from "./hooks/useTableSort.esm.js";
-import { getColumnAlignClasses as s, getHoverableRowClasses as te, getSelectedRowClasses as ne, getStripedRowClasses as c, getTableBaseClasses as re, getTableCellClasses as l, getTableHeaderCellClasses as u, getTableHeaderClasses as ie, getTableSizeClasses as ae, getTableVariantClasses as oe } from "./utils.esm.js";
+import { getColumnAlignClasses as c, getHoverableRowClasses as te, getSelectedRowClasses as ne, getStripedRowClasses as re, getTableBaseClasses as ie, getTableCellClasses as l, getTableHeaderCellClasses as u, getTableHeaderClasses as ae, getTableSizeClasses as oe, getTableVariantClasses as se } from "./utils.esm.js";
 import { KeyboardNavButton as d } from "./components/KeyboardNavButton.esm.js";
 import { PageJumpInput as f } from "./components/PageJumpInput.esm.js";
-import { Pagination as se } from "./components/Pagination.esm.js";
-import { Fragment as ce, forwardRef as p, useLayoutEffect as le, useMemo as m, useRef as h, useState as ue } from "react";
-import { Fragment as de, jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { DndContext as fe, KeyboardSensor as pe, PointerSensor as me, closestCenter as he, useSensor as v, useSensors as ge } from "@dnd-kit/core";
-import { SortableContext as _e, arrayMove as ve, horizontalListSortingStrategy as ye, sortableKeyboardCoordinates as be } from "@dnd-kit/sortable";
+import { Pagination as ce } from "./components/Pagination.esm.js";
+import { Fragment as le, forwardRef as p, useLayoutEffect as ue, useMemo as m, useRef as h, useState as de } from "react";
+import { Fragment as fe, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { DndContext as pe, KeyboardSensor as me, PointerSensor as he, closestCenter as ge, useSensor as v, useSensors as _e } from "@dnd-kit/core";
+import { SortableContext as ve, arrayMove as ye, horizontalListSortingStrategy as be, sortableKeyboardCoordinates as xe } from "@dnd-kit/sortable";
 //#region src/components/table/accordion-table.tsx
-var xe = [
+var Se = [
 	30,
 	50,
 	100
 ], y = 36, b = p((p, b) => {
-	let { data: x, columns: S, rowHeight: C, loading: Se = !1, emptyMessage: Ce = "데이터가 없어요", onRowClick: w, selectedRows: T = [], onRowSelect: E, enableRowSelection: D = !1, enableSelectAll: O = !1, rowCompare: we, enableSorting: k = !1, serverSideSorting: A = !1, onSortChange: Te, initialSort: Ee, variant: De = "default", size: Oe = "medium", stickyHeader: j = !0, height: M, maxHeight: N, currentPage: P, totalPages: F, onPageChange: I, pageSize: L, pageSizeOptions: ke = xe, onPageSizeChange: R, totalElements: z, storageKey: Ae, columnState: B, fillEmptyRows: V = !0, enableKeyboardPagination: H = !0, expandable: U, className: W = "", "data-testid": G, ...K } = p, q = !!U, J = U?.stickyDetail ?? !0, { sort: je, sortedData: Me } = ee({
+	let { data: x, columns: S, rowHeight: C, loading: Ce = !1, emptyMessage: we = "데이터가 없어요", onRowClick: w, selectedRows: T = [], onRowSelect: E, enableRowSelection: D = !1, enableSelectAll: O = !1, rowCompare: k, enableSorting: A = !1, serverSideSorting: j = !1, onSortChange: Te, initialSort: Ee, variant: De = "default", size: Oe = "medium", stickyHeader: M = !0, height: N, maxHeight: P, currentPage: F, totalPages: I, onPageChange: L, pageSize: R, pageSizeOptions: ke = Se, onPageSizeChange: z, totalElements: B, storageKey: Ae, columnState: V, fillEmptyRows: H = !0, enableKeyboardPagination: U = !0, expandable: W, className: je = "", "data-testid": G, ...Me } = p, K = !!W, q = W?.stickyDetail ?? !0, { sort: Ne, sortedData: Pe } = ee({
 		initialSort: Ee,
-		serverSide: A,
+		serverSide: j,
 		onSort: Te || void 0
-	}), Y = m(() => !k || A ? x : Me(x, (e, t) => {
+	}), J = m(() => !A || j ? x : Pe(x, (e, t) => {
 		let n = S.find((e) => e.key === t);
 		if (n?.accessor) {
 			let r = n.accessor(e);
@@ -33,95 +34,95 @@ var xe = [
 		return e[t];
 	}), [
 		x,
-		k,
 		A,
-		je,
-		Me,
+		j,
+		Ne,
+		Pe,
 		S
-	]), Ne = h(null), X = h(null), Pe = h(null), Fe = h(null), [Ie, Le] = ue(0), Re = !!B, ze = ge(v(me, { activationConstraint: { distance: 5 } }), v(pe, { coordinateGetter: be })), Be = (e) => {
+	]), Fe = h(null), Y = h(null), Ie = h(null), Le = h(null), [Re, ze] = de(0), Be = !!V, Ve = _e(v(he, { activationConstraint: { distance: 5 } }), v(me, { coordinateGetter: xe })), He = (e) => {
 		let { active: t, over: n } = e;
-		if (!B || !n || t.id === n.id || S.find((e) => e.key === n.id)?.excludeFromPreset) return;
-		let r = B.columnOrder, i = r.indexOf(String(t.id)), a = r.indexOf(String(n.id));
-		i === -1 || a === -1 || B.onColumnOrderChange(ve(r, i, a));
-	}, Z = m(() => {
-		if (!B) return S.filter((e) => !e.hidden);
-		let e = new Map(S.map((e) => [e.key, e])), t = new Set(B.hiddenColumns);
-		return B.columnOrder.map((t) => e.get(t)).filter((e) => !!e).filter((e) => !e.hidden && !t.has(e.key));
-	}, [S, B]), { handleMouseDown: Ve, handleDoubleClick: He, getColumnWidth: Q, measureRef: Ue } = a({
-		columns: Z,
-		data: Y,
+		if (!V || !n || t.id === n.id || S.find((e) => e.key === n.id)?.excludeFromPreset) return;
+		let r = V.columnOrder, i = r.indexOf(String(t.id)), a = r.indexOf(String(n.id));
+		i === -1 || a === -1 || V.onColumnOrderChange(ye(r, i, a));
+	}, X = m(() => {
+		if (!V) return S.filter((e) => !e.hidden);
+		let e = new Map(S.map((e) => [e.key, e])), t = new Set(V.hiddenColumns);
+		return V.columnOrder.map((t) => e.get(t)).filter((e) => !!e).filter((e) => !e.hidden && !t.has(e.key));
+	}, [S, V]), { handleMouseDown: Ue, handleDoubleClick: We, getColumnWidth: Z, measureRef: Ge } = o({
+		columns: X,
+		data: J,
 		getCellContent: (e, t) => {
-			let n = Z.find((e) => e.key === t);
+			let n = X.find((e) => e.key === t);
 			return n?.accessor ? n.accessor(e) : e[t];
 		},
-		tableRef: Ne,
-		...B ? {
-			controlledWidths: B.columnWidths,
-			onColumnWidthsChange: B.onColumnWidthsChange
+		tableRef: Fe,
+		...V ? {
+			controlledWidths: V.columnWidths,
+			onColumnWidthsChange: V.onColumnWidthsChange
 		} : { storageKey: Ae }
-	}), We = re(), Ge = oe(De), Ke = ae(Oe), qe = m(() => {
+	}), Ke = ie(), qe = se(De), Je = oe(Oe), Ye = m(() => {
 		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: Je, measuredRowHeight: Ye } = o({
-		enabled: V,
-		containerRef: X,
-		theadRef: Pe,
-		tbodyRef: Fe,
+		return N && (e.height = typeof N == "number" ? `${N}px` : N), P && (e.maxHeight = typeof P == "number" ? `${P}px` : P), e;
+	}, [N, P]), { emptyRowCount: Xe, measuredRowHeight: Ze } = s({
+		enabled: H,
+		containerRef: Y,
+		theadRef: Ie,
+		tbodyRef: Le,
 		excludeRowsSelector: "tr:not([data-empty-row]):not([data-expanded-row])",
 		remainingMode: "tbody-height",
 		observeTbody: !0,
-		deps: [Y, Z]
+		deps: [J, X]
 	});
-	le(() => {
-		if (!J || !q) return;
-		let e = X.current;
+	ue(() => {
+		if (!q || !K) return;
+		let e = Y.current;
 		if (!e) return;
 		let t = () => {
-			Le((t) => t === e.clientWidth ? t : e.clientWidth);
+			ze((t) => t === e.clientWidth ? t : e.clientWidth);
 		};
 		t();
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => n.disconnect();
-	}, [J, q]);
-	let Xe = (e) => {
-		e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && P > 1 ? (e.preventDefault(), I(P - 1)) : e.key === "ArrowRight" && P < F && (e.preventDefault(), I(P + 1)));
-	}, $ = (e) => !D || T.length === 0 ? !1 : we ? T.some((t) => we(t, e)) : T.some((t) => t === e), Ze = m(() => !D || !O || Y.length === 0 ? !1 : Y.every((e) => $(e)), [
+	}, [q, K]);
+	let Qe = (e) => {
+		e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && F > 1 ? (e.preventDefault(), L(F - 1)) : e.key === "ArrowRight" && F < I && (e.preventDefault(), L(F + 1)));
+	}, Q = (e) => !D || T.length === 0 ? !1 : k ? T.some((t) => k(t, e)) : T.some((t) => t === e), $e = m(() => !D || !O || J.length === 0 ? !1 : J.every((e) => Q(e)), [
 		D,
 		O,
-		Y,
-		$
-	]), Qe = () => {
-		!D || !E || (Ze ? Y.forEach((e) => {
-			$(e) && E(e, !1);
-		}) : Y.forEach((e) => {
-			$(e) || E(e, !0);
+		J,
+		Q
+	]), et = () => {
+		!D || !E || ($e ? J.forEach((e) => {
+			Q(e) && E(e, !1);
+		}) : J.forEach((e) => {
+			Q(e) || E(e, !0);
 		}));
-	}, $e = (e, t) => {
-		let n = [c(t)];
-		return $(e) && n.push(ne()), (w || q) && n.push(te()), n.join(" ");
-	}, et = !!R || z !== void 0 || typeof F == "number" && F > 0, tt = (e) => {
-		U && U.onToggle(U.getRowId(e));
-	}, nt = (e, t) => {
-		q && (e.key === " " || e.key === "Enter") && (e.preventDefault(), tt(t));
-	}, rt = (D && O ? 1 : 0) + +!!q + Z.length + 1;
-	return Se ? /* @__PURE__ */ g("div", {
+	}, tt = (t, n) => {
+		let r = [re(n)];
+		return Q(t) && r.push(ne()), (w || K) && r.push(te()), e(r);
+	}, nt = !!z || B !== void 0 || typeof I == "number" && I > 0, $ = (e) => {
+		W && W.onToggle(W.getRowId(e));
+	}, rt = (e, t) => {
+		K && (e.key === " " || e.key === "Enter") && (e.preventDefault(), $(t));
+	}, it = (D && O ? 1 : 0) + +!!K + X.length + 1;
+	return Ce ? /* @__PURE__ */ g("div", {
 		ref: b,
-		className: `flex items-center justify-center p-8 flex-1 ${W}`,
-		style: qe,
+		className: e("flex items-center justify-center p-8 flex-1", je),
+		style: Ye,
 		"data-testid": G,
-		...K,
-		children: /* @__PURE__ */ g(n, {
+		...Me,
+		children: /* @__PURE__ */ g(r, {
 			message: "데이터를 불러오는 중이에요...",
 			className: "min-h-0"
 		})
 	}) : /* @__PURE__ */ _("div", {
 		ref: b,
-		className: `relative flex flex-col min-h-0 ${W}`,
-		style: qe,
+		className: e("isolate relative flex flex-col min-h-0", je),
+		style: Ye,
 		"data-testid": G,
-		...K,
+		...Me,
 		children: [/* @__PURE__ */ g("div", {
-			ref: Ue,
+			ref: Ge,
 			className: "absolute invisible whitespace-nowrap",
 			style: {
 				top: "-9999px",
@@ -130,21 +131,21 @@ var xe = [
 		}), /* @__PURE__ */ _("div", {
 			className: "flex flex-1 flex-col min-h-0",
 			children: [/* @__PURE__ */ g("div", {
-				ref: X,
-				className: "overflow-auto flex-1 bg-[#f9fafb] dark:bg-slate-900/50",
-				children: Y.length === 0 ? /* @__PURE__ */ g("div", {
+				ref: Y,
+				className: "overflow-auto flex-1 bg-bg-page",
+				children: J.length === 0 ? /* @__PURE__ */ g("div", {
 					className: "flex items-center justify-center p-8 h-full",
 					children: /* @__PURE__ */ g("p", {
-						className: "text-neutral-600 dark:text-neutral-400",
-						children: Ce
+						className: "text-fg-muted",
+						children: we
 					})
-				}) : /* @__PURE__ */ g(fe, {
-					sensors: ze,
-					collisionDetection: he,
-					onDragEnd: Be,
+				}) : /* @__PURE__ */ g(pe, {
+					sensors: Ve,
+					collisionDetection: ge,
+					onDragEnd: He,
 					children: /* @__PURE__ */ _("table", {
-						ref: Ne,
-						className: `${We} ${Ge} ${Ke}`,
+						ref: Fe,
+						className: e(Ke, qe, Je),
 						style: {
 							tableLayout: "fixed",
 							minWidth: "100%",
@@ -153,62 +154,61 @@ var xe = [
 						children: [
 							/* @__PURE__ */ _("colgroup", { children: [
 								D && O && /* @__PURE__ */ g("col", { style: { width: "48px" } }),
-								q && /* @__PURE__ */ g("col", { style: { width: `${y}px` } }),
-								Z.map((e) => /* @__PURE__ */ g("col", {
+								K && /* @__PURE__ */ g("col", { style: { width: `${y}px` } }),
+								X.map((e) => /* @__PURE__ */ g("col", {
 									"data-col-key": e.key,
-									style: { width: Q(e.key, e.width) }
+									style: { width: Z(e.key, e.width) }
 								}, e.key)),
 								/* @__PURE__ */ g("col", { style: { width: "100%" } })
 							] }),
 							/* @__PURE__ */ g("thead", {
-								ref: Pe,
-								className: ie(),
+								ref: Ie,
+								className: ae(),
 								style: {
-									position: j ? "sticky" : "relative",
-									top: j ? 0 : void 0,
-									zIndex: j ? 10 : void 0,
-									backgroundColor: j ? "white" : void 0
+									position: M ? "sticky" : "relative",
+									top: M ? 0 : void 0,
+									zIndex: M ? 20 : void 0
 								},
 								children: /* @__PURE__ */ _("tr", { children: [
 									D && O && /* @__PURE__ */ g("th", {
-										className: `${u()} ${s("center")} border-r-0 w-12`,
-										children: /* @__PURE__ */ g(e.Circle, {
+										className: e(u(), c("center"), "border-r-0 w-12"),
+										children: /* @__PURE__ */ g(t.Circle, {
 											id: "accordion-table-select-all",
 											size: 20,
-											checked: Ze,
-											onCheckedChange: Qe
+											checked: $e,
+											onCheckedChange: et
 										})
 									}),
-									q && /* @__PURE__ */ g("th", {
+									K && /* @__PURE__ */ g("th", {
 										"aria-hidden": "true",
-										className: `${u()} border-r-0`,
+										className: e(u(), "border-r-0"),
 										style: { width: `${y}px` }
 									}),
-									/* @__PURE__ */ g(_e, {
-										items: Z.map((e) => e.key),
-										strategy: ye,
-										children: Z.map((e) => {
-											let t = !Re || e.excludeFromPreset === !0;
-											return /* @__PURE__ */ _(i, {
-												id: e.key,
-												disabled: t,
+									/* @__PURE__ */ g(ve, {
+										items: X.map((e) => e.key),
+										strategy: be,
+										children: X.map((t) => {
+											let n = !Be || t.excludeFromPreset === !0;
+											return /* @__PURE__ */ _(a, {
+												id: t.key,
+												disabled: n,
 												as: "th",
-												className: `${u()} ${s("center")} bg-white ${e.sticky ? "sticky left-0 z-20 bg-white dark:bg-neutral-800" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
+												className: e(u(), c("center"), "relative", t.sticky && "sticky left-0 z-20 bg-bg-table-header", t.hideOnMobile && "hidden md:table-cell"),
 												style: {
-													width: Q(e.key, e.width),
-													minWidth: e.minWidth || 50
+													width: Z(t.key, t.width),
+													minWidth: t.minWidth || 50
 												},
 												children: [/* @__PURE__ */ g("div", {
 													className: "flex items-center justify-center w-full pr-1 select-none",
-													children: /* @__PURE__ */ g("span", { children: e.header })
-												}), e.excludeFromPreset !== !0 && /* @__PURE__ */ g("div", {
-													className: "absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary-500/30 active:bg-primary-500/50 z-50",
+													children: /* @__PURE__ */ g("span", { children: t.header })
+												}), t.excludeFromPreset !== !0 && /* @__PURE__ */ g("div", {
+													className: "absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 z-50",
 													onPointerDown: (e) => e.stopPropagation(),
-													onMouseDown: (t) => {
-														t.preventDefault(), t.stopPropagation(), Ve(e.key, t);
+													onMouseDown: (e) => {
+														e.preventDefault(), e.stopPropagation(), Ue(t.key, e);
 													},
-													onDoubleClick: (t) => {
-														t.preventDefault(), t.stopPropagation(), He(e.key, t);
+													onDoubleClick: (e) => {
+														e.preventDefault(), e.stopPropagation(), We(t.key, e);
 													},
 													onClick: (e) => {
 														e.preventDefault(), e.stopPropagation();
@@ -216,162 +216,162 @@ var xe = [
 													style: { touchAction: "none" },
 													title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절"
 												})]
-											}, e.key);
+											}, t.key);
 										})
 									}),
 									/* @__PURE__ */ g("th", {
 										"aria-hidden": "true",
-										className: "bg-white border-b border-l border-[#f2f3f5] dark:border-neutral-700 dark:bg-neutral-800"
+										className: "bg-bg-table-header border-b border-l border-border-table-header"
 									})
 								] })
 							}),
 							/* @__PURE__ */ _("tbody", {
-								ref: Fe,
-								children: [Y.map((n, r) => {
-									let i = $(n), a = U ? U.getRowId(n) : void 0, o = U ? U.expandedIds.has(a) : !1;
-									return /* @__PURE__ */ _(ce, { children: [/* @__PURE__ */ _("tr", {
-										className: $e(n, r),
+								ref: Le,
+								children: [J.map((r, i) => {
+									let a = Q(r), o = W ? W.getRowId(r) : void 0, s = W ? W.expandedIds.has(o) : !1;
+									return /* @__PURE__ */ _(le, { children: [/* @__PURE__ */ _("tr", {
+										className: tt(r, i),
 										onClick: (e) => {
 											let t = e.target;
 											if (t !== e.currentTarget) {
 												let n = t.closest("button, a, input, select, textarea, label");
 												if (n && e.currentTarget.contains(n)) return;
 											}
-											w?.(n, r), q && tt(n);
+											w?.(r, i), K && $(r);
 										},
-										onKeyDown: (e) => nt(e, n),
-										tabIndex: q ? 0 : void 0,
-										role: q ? "button" : void 0,
-										"aria-expanded": q ? o : void 0,
+										onKeyDown: (e) => rt(e, r),
+										tabIndex: K ? 0 : void 0,
+										role: K ? "button" : void 0,
+										"aria-expanded": K ? s : void 0,
 										style: C ? { height: `${C}px` } : void 0,
 										children: [
 											D && O && /* @__PURE__ */ g("td", {
-												className: `${l()} ${s("center")} border-r-0 w-12`,
+												className: e(l(), c("center"), "border-r-0 w-12"),
 												onClick: (e) => e.stopPropagation(),
-												children: /* @__PURE__ */ g(e.Circle, {
+												children: /* @__PURE__ */ g(t.Circle, {
 													size: 20,
-													checked: i,
-													onCheckedChange: (e) => E?.(n, e)
+													checked: a,
+													onCheckedChange: (e) => E?.(r, e)
 												})
 											}),
-											q && /* @__PURE__ */ g("td", {
-												className: `${l()} ${s("center")} border-r-0`,
+											K && /* @__PURE__ */ g("td", {
+												className: e(l(), c("center"), "border-r-0"),
 												style: { width: `${y}px` },
-												children: /* @__PURE__ */ g(t, {
+												children: /* @__PURE__ */ g(n, {
 													"aria-hidden": "true",
-													className: `mx-auto h-4 w-4 text-neutral-500 transition-transform duration-200 ${o ? "rotate-90" : ""}`
+													className: e("mx-auto h-4 w-4 text-fg-muted hover:text-fg-default transition-transform duration-200", s && "rotate-90")
 												})
 											}),
-											Z.map((e, t) => {
-												let r = e.accessor ? e.accessor(n) : n[e.key], i = t === Z.length - 1 && !D;
+											X.map((t, n) => {
+												let i = t.accessor ? t.accessor(r) : r[t.key], a = n === X.length - 1 && !D;
 												return /* @__PURE__ */ g("td", {
-													className: `${l()} ${s(e.align)} ${i ? "border-r-0" : ""} ${e.sticky ? "sticky left-0 z-10 bg-inherit" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													className: e(l(), c(t.align), a && "border-r-0", t.sticky && "sticky left-0 z-10 bg-inherit", t.hideOnMobile && "hidden md:table-cell"),
 													style: {
-														width: Q(e.key, e.width),
-														minWidth: e.minWidth || 50,
+														width: Z(t.key, t.width),
+														minWidth: t.minWidth || 50,
 														...C ? {
 															height: `${C}px`,
 															maxHeight: `${C}px`,
 															overflow: "hidden"
 														} : {}
 													},
-													children: r
-												}, e.key);
+													children: i
+												}, t.key);
 											}),
 											/* @__PURE__ */ g("td", {
 												"aria-hidden": "true",
-												className: "border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent"
+												className: "border-b border-l border-border-table-cell bg-transparent"
 											})
 										]
-									}), q && /* @__PURE__ */ g("tr", {
+									}), K && /* @__PURE__ */ g("tr", {
 										"data-expanded-row": !0,
-										className: "bg-[#f9fafb] dark:bg-slate-900/50",
+										className: "bg-bg-surface",
 										children: /* @__PURE__ */ g("td", {
-											colSpan: rt,
-											className: "p-0 border-b border-[#f2f3f5] dark:border-neutral-700",
+											colSpan: it,
+											className: "p-0 border-b border-border-table-cell text-fg-default",
 											children: /* @__PURE__ */ g("div", {
-												className: J ? "sticky left-0" : void 0,
-												style: J && Ie > 0 ? { width: `${Ie}px` } : void 0,
+												className: q ? "sticky left-0" : void 0,
+												style: q && Re > 0 ? { width: `${Re}px` } : void 0,
 												children: /* @__PURE__ */ g("div", {
 													className: "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
 													style: {
-														gridTemplateRows: o ? "1fr" : "0fr",
-														opacity: +!!o
+														gridTemplateRows: s ? "1fr" : "0fr",
+														opacity: +!!s
 													},
-													"aria-hidden": !o,
+													"aria-hidden": !s,
 													children: /* @__PURE__ */ g("div", {
 														className: "overflow-hidden",
-														children: U.renderRow(n)
+														children: W.renderRow(r)
 													})
 												})
 											})
 										})
-									})] }, r);
-								}), V && Array.from({ length: Je }).map((e, t) => {
-									let n = Y.length + t, r = C ?? Ye ?? void 0;
+									})] }, i);
+								}), H && Array.from({ length: Xe }).map((t, n) => {
+									let r = J.length + n, i = C ?? Ze ?? void 0;
 									return /* @__PURE__ */ _("tr", {
 										"data-empty-row": !0,
 										"aria-hidden": "true",
-										className: c(n),
-										style: r ? { height: `${r}px` } : void 0,
+										className: re(r),
+										style: i ? { height: `${i}px` } : void 0,
 										children: [
 											D && O && /* @__PURE__ */ g("td", {
-												className: `${l()} border-r-0 w-12`,
-												style: r ? { height: `${r}px` } : void 0
+												className: e(l(), "border-r-0 w-12"),
+												style: i ? { height: `${i}px` } : void 0
 											}),
-											q && /* @__PURE__ */ g("td", {
-												className: `${l()} border-r-0`,
+											K && /* @__PURE__ */ g("td", {
+												className: e(l(), "border-r-0"),
 												style: {
 													width: `${y}px`,
-													...r ? { height: `${r}px` } : {}
+													...i ? { height: `${i}px` } : {}
 												}
 											}),
-											Z.map((e, t) => {
-												let n = t === Z.length - 1 && !D;
+											X.map((t, n) => {
+												let r = n === X.length - 1 && !D;
 												return /* @__PURE__ */ g("td", {
-													className: `${l()} ${n ? "border-r-0" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													className: e(l(), r && "border-r-0", t.hideOnMobile && "hidden md:table-cell"),
 													style: {
-														width: Q(e.key, e.width),
-														minWidth: e.minWidth || 50,
-														...r ? { height: `${r}px` } : {}
+														width: Z(t.key, t.width),
+														minWidth: t.minWidth || 50,
+														...i ? { height: `${i}px` } : {}
 													}
-												}, e.key);
+												}, t.key);
 											}),
 											/* @__PURE__ */ g("td", {
 												"aria-hidden": "true",
-												className: "border-b border-l border-[#f2f3f5] dark:border-neutral-700 bg-transparent",
-												style: r ? { height: `${r}px` } : void 0
+												className: "border-b border-l border-border-table-cell bg-transparent",
+												style: i ? { height: `${i}px` } : void 0
 											})
 										]
-									}, `empty-${t}`);
+									}, `empty-${n}`);
 								})]
 							})
 						]
 					})
 				})
-			}), et && /* @__PURE__ */ _("nav", {
+			}), nt && /* @__PURE__ */ _("nav", {
 				"aria-label": "페이지 네비게이션",
-				className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-neutral-200 px-4 py-2 shrink-0 dark:border-neutral-700",
+				className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-border-subtle px-4 py-2 shrink-0",
 				children: [/* @__PURE__ */ _("div", {
-					className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300",
+					className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted",
 					children: [
-						z !== void 0 && /* @__PURE__ */ _("span", { children: [
+						B !== void 0 && /* @__PURE__ */ _("span", { children: [
 							"총 ",
-							z.toLocaleString(),
+							B.toLocaleString(),
 							"건"
 						] }),
-						R && L !== void 0 && /* @__PURE__ */ _("div", {
+						z && R !== void 0 && /* @__PURE__ */ _("div", {
 							className: "flex items-center gap-1",
 							children: [/* @__PURE__ */ g("span", {
-								className: "text-neutral-500",
+								className: "text-fg-muted",
 								children: "페이지당"
 							}), /* @__PURE__ */ g("div", {
 								className: "w-20",
-								children: /* @__PURE__ */ g(r, {
+								children: /* @__PURE__ */ g(i, {
 									variant: "box",
 									selectSize: "mini",
-									value: String(L),
-									onChange: (e) => R(Number(e)),
+									value: String(R),
+									onChange: (e) => z(Number(e)),
 									options: ke.map((e) => ({
 										value: String(e),
 										label: String(e)
@@ -382,30 +382,30 @@ var xe = [
 						}),
 						/* @__PURE__ */ g("div", {
 							className: "contents @min-[640px]/pagebar:hidden",
-							children: F !== void 0 && P !== void 0 && I && F > 1 && /* @__PURE__ */ _(de, { children: [/* @__PURE__ */ g(f, {
-								currentPage: P,
-								totalPages: F,
-								onPageChange: I,
+							children: I !== void 0 && F !== void 0 && L && I > 1 && /* @__PURE__ */ _(fe, { children: [/* @__PURE__ */ g(f, {
+								currentPage: F,
+								totalPages: I,
+								onPageChange: L,
 								"data-testid": G ? `${G}-page-jump` : void 0
-							}), H && /* @__PURE__ */ g(d, { onKeyDown: Xe })] })
+							}), U && /* @__PURE__ */ g(d, { onKeyDown: Qe })] })
 						})
 					]
 				}), /* @__PURE__ */ _("div", {
 					className: "flex items-center gap-3",
 					children: [/* @__PURE__ */ g("div", {
 						className: "hidden @min-[640px]/pagebar:contents",
-						children: F !== void 0 && P !== void 0 && I && F > 1 && /* @__PURE__ */ _(de, { children: [/* @__PURE__ */ g(f, {
-							currentPage: P,
-							totalPages: F,
-							onPageChange: I,
+						children: I !== void 0 && F !== void 0 && L && I > 1 && /* @__PURE__ */ _(fe, { children: [/* @__PURE__ */ g(f, {
+							currentPage: F,
+							totalPages: I,
+							onPageChange: L,
 							"data-testid": G ? `${G}-page-jump` : void 0
-						}), H && /* @__PURE__ */ g(d, { onKeyDown: Xe })] })
-					}), F !== void 0 && P !== void 0 && I && /* @__PURE__ */ g(se, {
-						currentPage: P,
-						totalPages: F,
-						onPageChange: I,
-						hasPreviousPage: P > 1,
-						hasNextPage: P < F,
+						}), U && /* @__PURE__ */ g(d, { onKeyDown: Qe })] })
+					}), I !== void 0 && F !== void 0 && L && /* @__PURE__ */ g(ce, {
+						currentPage: F,
+						totalPages: I,
+						onPageChange: L,
+						hasPreviousPage: F > 1,
+						hasNextPage: F < I,
 						"data-testid": G ? `${G}-pagination` : void 0
 					})]
 				})]

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

@@ -1,4 +1,4 @@
-import { TableColumn, TableColumnGroupMeta } from './types';
+import { TableColumn, TableColumnGroupMeta } from './types.js';
 /**
  * 슬롯(그룹 또는 단일 컬럼) 단위 표현.
  *