@thewrong/ui 0.2.0 → 0.4.0

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

@@ -1,30 +1,43 @@
-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 { 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 { 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 { 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 { SortHeader as ee } from "./components/SortHeader.esm.js";
+import { ariaSort as o, nextSort as te, sortDirectionFor as s } from "./hooks/sort-state.esm.js";
+import { useColumnResize as ne } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as re } from "../../hooks/useFillEmptyRows.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 { KeyboardNavButton as f } from "./components/KeyboardNavButton.esm.js";
+import { PageJumpInput as p } from "./components/PageJumpInput.esm.js";
+import { Pagination as de } from "./components/Pagination.esm.js";
+import { Fragment as fe, forwardRef as m, useLayoutEffect as pe, useMemo as h, useRef as g, useState as me } from "react";
+import { Fragment as he, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { DndContext as ge, KeyboardSensor as _e, PointerSensor as ve, closestCenter as ye, useSensor as be, useSensors as xe } from "@dnd-kit/core";
+import { SortableContext as Se, arrayMove as Ce, horizontalListSortingStrategy as we, sortableKeyboardCoordinates as Te } from "@dnd-kit/sortable";
 //#region src/components/table/accordion-table.tsx
-var xe = [
+var Ee = [
 	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({
-		initialSort: Ee,
-		serverSide: A,
-		onSort: Te || void 0
-	}), Y = m(() => !k || A ? x : Me(x, (e, t) => {
+], y = 36, b = m((m, b) => {
+	let { data: x, columns: S, rowHeight: C, loading: De = !1, emptyMessage: Oe = "데이터가 없어요", onRowClick: w, selectedRows: T = [], onRowSelect: E, enableRowSelection: D = !1, enableSelectAll: O = !1, rowCompare: k, enableSorting: A = !1, sortCycle: j = "tri", formatSortLabel: ke, serverSideSorting: M = !1, onSortChange: Ae, initialSort: je, variant: Me = "default", size: Ne = "medium", stickyHeader: N = !0, height: P, maxHeight: F, currentPage: I, totalPages: L, onPageChange: R, pageSize: Pe, pageSizeOptions: Fe = Ee, onPageSizeChange: z, totalElements: B, storageKey: Ie, columnState: V, fillEmptyRows: Le = !0, enableKeyboardPagination: Re = !0, expandable: H, className: ze = "", "data-testid": U, ...Be } = m, W = !!H, G = H?.stickyDetail ?? !0, { sort: K, sortedData: Ve, handleSort: He } = ie({
+		initialSort: je,
+		cycle: j,
+		serverSide: M,
+		onSort: Ae || void 0
+	}), q = (e) => !!(e.sortable && (A || M)), Ue = (e) => q(e) ? o(s(K, e.key)) : void 0, We = (e) => {
+		if (!q(e)) return /* @__PURE__ */ _("span", { children: e.header });
+		let t = s(K, e.key), n = te(K, e.key, j)?.direction ?? null;
+		return /* @__PURE__ */ _(ee, {
+			current: t,
+			label: ke?.(e, t, n),
+			onSort: () => He(e.key),
+			children: e.header
+		});
+	}, J = h(() => !A || M ? x : Ve(x, (e, t) => {
 		let n = S.find((e) => e.key === t);
 		if (n?.accessor) {
 			let r = n.accessor(e);
@@ -33,182 +46,183 @@ var xe = [
 		return e[t];
 	}), [
 		x,
-		k,
 		A,
-		je,
-		Me,
+		M,
+		K,
+		Ve,
 		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) => {
+	]), Ge = g(null), Y = g(null), Ke = g(null), qe = g(null), [Je, Ye] = me(0), Xe = !!V, Ze = xe(be(ve, { activationConstraint: { distance: 5 } }), be(_e, { coordinateGetter: Te })), Qe = (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(Ce(r, i, a));
+	}, X = h(() => {
+		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: $e, handleDoubleClick: et, getColumnWidth: Z, measureRef: tt } = ne({
+		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
-		} : { storageKey: Ae }
-	}), We = re(), Ge = oe(De), Ke = ae(Oe), qe = m(() => {
+		tableRef: Ge,
+		...V ? {
+			controlledWidths: V.columnWidths,
+			onColumnWidthsChange: V.onColumnWidthsChange
+		} : { storageKey: Ie }
+	}), nt = se(), rt = ue(Me), it = le(Ne), at = h(() => {
 		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 P && (e.height = typeof P == "number" ? `${P}px` : P), F && (e.maxHeight = typeof F == "number" ? `${F}px` : F), e;
+	}, [P, F]), { emptyRowCount: ot, measuredRowHeight: st } = re({
+		enabled: Le,
+		containerRef: Y,
+		theadRef: Ke,
+		tbodyRef: qe,
 		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;
+	pe(() => {
+		if (!G || !W) return;
+		let e = Y.current;
 		if (!e) return;
 		let t = () => {
-			Le((t) => t === e.clientWidth ? t : e.clientWidth);
+			Ye((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)), [
+	}, [G, W]);
+	let ct = (e) => {
+		e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && I > 1 ? (e.preventDefault(), R(I - 1)) : e.key === "ArrowRight" && I < L && (e.preventDefault(), R(I + 1)));
+	}, Q = (e) => !D || T.length === 0 ? !1 : k ? T.some((t) => k(t, e)) : T.some((t) => t === e), lt = h(() => !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
+	]), ut = () => {
+		!D || !E || (lt ? 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", {
+	}, dt = (t, n) => {
+		let r = [l(n)];
+		return Q(t) && r.push(oe()), (w || W) && r.push(ae()), e(r);
+	}, ft = !!z || B !== void 0 || typeof L == "number" && L > 0, $ = (e) => {
+		H && H.onToggle(H.getRowId(e));
+	}, pt = (e, t) => {
+		W && (e.key === " " || e.key === "Enter") && (e.preventDefault(), $(t));
+	}, mt = (D && O ? 1 : 0) + +!!W + X.length + 1;
+	return De ? /* @__PURE__ */ _("div", {
 		ref: b,
-		className: `flex items-center justify-center p-8 flex-1 ${W}`,
-		style: qe,
-		"data-testid": G,
-		...K,
-		children: /* @__PURE__ */ g(n, {
+		className: e("flex items-center justify-center p-8 flex-1", ze),
+		style: at,
+		"data-testid": U,
+		...Be,
+		children: /* @__PURE__ */ _(r, {
 			message: "데이터를 불러오는 중이에요...",
 			className: "min-h-0"
 		})
-	}) : /* @__PURE__ */ _("div", {
+	}) : /* @__PURE__ */ v("div", {
 		ref: b,
-		className: `relative flex flex-col min-h-0 ${W}`,
-		style: qe,
-		"data-testid": G,
-		...K,
-		children: [/* @__PURE__ */ g("div", {
-			ref: Ue,
+		className: e("isolate relative flex flex-col min-h-0", ze),
+		style: at,
+		"data-testid": U,
+		...Be,
+		children: [/* @__PURE__ */ _("div", {
+			ref: tt,
 			className: "absolute invisible whitespace-nowrap",
 			style: {
 				top: "-9999px",
 				left: "-9999px"
 			}
-		}), /* @__PURE__ */ _("div", {
+		}), /* @__PURE__ */ v("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", {
+			children: [/* @__PURE__ */ _("div", {
+				ref: Y,
+				className: "overflow-auto flex-1 bg-bg-page",
+				children: J.length === 0 ? /* @__PURE__ */ _("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
+					children: /* @__PURE__ */ _("p", {
+						className: "text-fg-muted",
+						children: Oe
 					})
-				}) : /* @__PURE__ */ g(fe, {
-					sensors: ze,
-					collisionDetection: he,
-					onDragEnd: Be,
-					children: /* @__PURE__ */ _("table", {
-						ref: Ne,
-						className: `${We} ${Ge} ${Ke}`,
+				}) : /* @__PURE__ */ _(ge, {
+					sensors: Ze,
+					collisionDetection: ye,
+					onDragEnd: Qe,
+					children: /* @__PURE__ */ v("table", {
+						ref: Ge,
+						className: e(nt, rt, it),
 						style: {
 							tableLayout: "fixed",
 							minWidth: "100%",
 							width: "100%"
 						},
 						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", {
+							/* @__PURE__ */ v("colgroup", { children: [
+								D && O && /* @__PURE__ */ _("col", { style: { width: "48px" } }),
+								W && /* @__PURE__ */ _("col", { style: { width: `${y}px` } }),
+								X.map((e) => /* @__PURE__ */ _("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__ */ _("col", { style: { width: "100%" } })
 							] }),
-							/* @__PURE__ */ g("thead", {
-								ref: Pe,
-								className: ie(),
+							/* @__PURE__ */ _("thead", {
+								ref: Ke,
+								className: ce(),
 								style: {
-									position: j ? "sticky" : "relative",
-									top: j ? 0 : void 0,
-									zIndex: j ? 10 : void 0,
-									backgroundColor: j ? "white" : void 0
+									position: N ? "sticky" : "relative",
+									top: N ? 0 : void 0,
+									zIndex: N ? 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, {
+								children: /* @__PURE__ */ v("tr", { children: [
+									D && O && /* @__PURE__ */ _("th", {
+										className: e(d(), c("center"), "border-r-0 w-12"),
+										children: /* @__PURE__ */ _(t.Circle, {
 											id: "accordion-table-select-all",
 											size: 20,
-											checked: Ze,
-											onCheckedChange: Qe
+											checked: lt,
+											onCheckedChange: ut
 										})
 									}),
-									q && /* @__PURE__ */ g("th", {
+									W && /* @__PURE__ */ _("th", {
 										"aria-hidden": "true",
-										className: `${u()} border-r-0`,
+										className: e(d(), "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__ */ _(Se, {
+										items: X.map((e) => e.key),
+										strategy: we,
+										children: X.map((t) => {
+											let n = !Xe || t.excludeFromPreset === !0;
+											return /* @__PURE__ */ v(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`,
+												"aria-sort": Ue(t),
+												hasSortButton: q(t),
+												className: e(d(), 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", {
+												children: [/* @__PURE__ */ _("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: We(t)
+												}), t.excludeFromPreset !== !0 && /* @__PURE__ */ _("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(), $e(t.key, e);
 													},
-													onDoubleClick: (t) => {
-														t.preventDefault(), t.stopPropagation(), He(e.key, t);
+													onDoubleClick: (e) => {
+														e.preventDefault(), e.stopPropagation(), et(t.key, e);
 													},
 													onClick: (e) => {
 														e.preventDefault(), e.stopPropagation();
@@ -216,197 +230,197 @@ var xe = [
 													style: { touchAction: "none" },
 													title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절"
 												})]
-											}, e.key);
+											}, t.key);
 										})
 									}),
-									/* @__PURE__ */ g("th", {
+									/* @__PURE__ */ _("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),
+							/* @__PURE__ */ v("tbody", {
+								ref: qe,
+								children: [J.map((r, i) => {
+									let a = Q(r), ee = H ? H.getRowId(r) : void 0, o = H ? H.expandedIds.has(ee) : !1;
+									return /* @__PURE__ */ v(fe, { children: [/* @__PURE__ */ v("tr", {
+										className: dt(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), W && $(r);
 										},
-										onKeyDown: (e) => nt(e, n),
-										tabIndex: q ? 0 : void 0,
-										role: q ? "button" : void 0,
-										"aria-expanded": q ? o : void 0,
+										onKeyDown: (e) => pt(e, r),
+										tabIndex: W ? 0 : void 0,
+										role: W ? "button" : void 0,
+										"aria-expanded": W ? o : void 0,
 										style: C ? { height: `${C}px` } : void 0,
 										children: [
-											D && O && /* @__PURE__ */ g("td", {
-												className: `${l()} ${s("center")} border-r-0 w-12`,
+											D && O && /* @__PURE__ */ _("td", {
+												className: e(u(), c("center"), "border-r-0 w-12"),
 												onClick: (e) => e.stopPropagation(),
-												children: /* @__PURE__ */ g(e.Circle, {
+												children: /* @__PURE__ */ _(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`,
+											W && /* @__PURE__ */ _("td", {
+												className: e(u(), c("center"), "border-r-0"),
 												style: { width: `${y}px` },
-												children: /* @__PURE__ */ g(t, {
+												children: /* @__PURE__ */ _(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", o && "rotate-90")
 												})
 											}),
-											Z.map((e, t) => {
-												let r = e.accessor ? e.accessor(n) : n[e.key], i = t === Z.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" : ""}`,
+											X.map((t, n) => {
+												let i = t.accessor ? t.accessor(r) : r[t.key], a = n === X.length - 1 && !D;
+												return /* @__PURE__ */ _("td", {
+													className: e(u(), 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", {
+											/* @__PURE__ */ _("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", {
+									}), W && /* @__PURE__ */ _("tr", {
 										"data-expanded-row": !0,
-										className: "bg-[#f9fafb] dark:bg-slate-900/50",
-										children: /* @__PURE__ */ g("td", {
-											colSpan: rt,
-											className: "p-0 border-b border-[#f2f3f5] dark:border-neutral-700",
-											children: /* @__PURE__ */ g("div", {
-												className: J ? "sticky left-0" : void 0,
-												style: J && Ie > 0 ? { width: `${Ie}px` } : void 0,
-												children: /* @__PURE__ */ g("div", {
+										className: "bg-bg-surface",
+										children: /* @__PURE__ */ _("td", {
+											colSpan: mt,
+											className: "p-0 border-b border-border-table-cell text-fg-default",
+											children: /* @__PURE__ */ _("div", {
+												className: G ? "sticky left-0" : void 0,
+												style: G && Je > 0 ? { width: `${Je}px` } : void 0,
+												children: /* @__PURE__ */ _("div", {
 													className: "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
 													style: {
 														gridTemplateRows: o ? "1fr" : "0fr",
 														opacity: +!!o
 													},
 													"aria-hidden": !o,
-													children: /* @__PURE__ */ g("div", {
+													children: /* @__PURE__ */ _("div", {
 														className: "overflow-hidden",
-														children: U.renderRow(n)
+														children: H.renderRow(r)
 													})
 												})
 											})
 										})
-									})] }, r);
-								}), V && Array.from({ length: Je }).map((e, t) => {
-									let n = Y.length + t, r = C ?? Ye ?? void 0;
-									return /* @__PURE__ */ _("tr", {
+									})] }, i);
+								}), Le && Array.from({ length: ot }).map((t, n) => {
+									let r = J.length + n, i = C ?? st ?? void 0;
+									return /* @__PURE__ */ v("tr", {
 										"data-empty-row": !0,
 										"aria-hidden": "true",
-										className: c(n),
-										style: r ? { height: `${r}px` } : void 0,
+										className: l(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
+											D && O && /* @__PURE__ */ _("td", {
+												className: e(u(), "border-r-0 w-12"),
+												style: i ? { height: `${i}px` } : void 0
 											}),
-											q && /* @__PURE__ */ g("td", {
-												className: `${l()} border-r-0`,
+											W && /* @__PURE__ */ _("td", {
+												className: e(u(), "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;
-												return /* @__PURE__ */ g("td", {
-													className: `${l()} ${n ? "border-r-0" : ""} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+											X.map((t, n) => {
+												let r = n === X.length - 1 && !D;
+												return /* @__PURE__ */ _("td", {
+													className: e(u(), 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", {
+											/* @__PURE__ */ _("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", {
+			}), ft && /* @__PURE__ */ v("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",
-				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: "@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__ */ v("div", {
+					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__ */ v("span", { children: [
 							"총 ",
-							z.toLocaleString(),
+							B.toLocaleString(),
 							"건"
 						] }),
-						R && L !== void 0 && /* @__PURE__ */ _("div", {
+						z && Pe !== void 0 && /* @__PURE__ */ v("div", {
 							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ g("span", {
-								className: "text-neutral-500",
+							children: [/* @__PURE__ */ _("span", {
+								className: "text-fg-muted",
 								children: "페이지당"
-							}), /* @__PURE__ */ g("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "w-20",
-								children: /* @__PURE__ */ g(r, {
+								children: /* @__PURE__ */ _(i, {
 									variant: "box",
 									selectSize: "mini",
-									value: String(L),
-									onChange: (e) => R(Number(e)),
-									options: ke.map((e) => ({
+									value: String(Pe),
+									onChange: (e) => z(Number(e)),
+									options: Fe.map((e) => ({
 										value: String(e),
 										label: String(e)
 									})),
-									"data-testid": G ? `${G}-page-size` : void 0
+									"data-testid": U ? `${U}-page-size` : void 0
 								})
 							})]
 						}),
-						/* @__PURE__ */ g("div", {
+						/* @__PURE__ */ _("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,
-								"data-testid": G ? `${G}-page-jump` : void 0
-							}), H && /* @__PURE__ */ g(d, { onKeyDown: Xe })] })
+							children: L !== void 0 && I !== void 0 && R && L > 1 && /* @__PURE__ */ v(he, { children: [/* @__PURE__ */ _(p, {
+								currentPage: I,
+								totalPages: L,
+								onPageChange: R,
+								"data-testid": U ? `${U}-page-jump` : void 0
+							}), Re && /* @__PURE__ */ _(f, { onKeyDown: ct })] })
 						})
 					]
-				}), /* @__PURE__ */ _("div", {
+				}), /* @__PURE__ */ v("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ _("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,
-							"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,
-						"data-testid": G ? `${G}-pagination` : void 0
+						children: L !== void 0 && I !== void 0 && R && L > 1 && /* @__PURE__ */ v(he, { children: [/* @__PURE__ */ _(p, {
+							currentPage: I,
+							totalPages: L,
+							onPageChange: R,
+							"data-testid": U ? `${U}-page-jump` : void 0
+						}), Re && /* @__PURE__ */ _(f, { onKeyDown: ct })] })
+					}), L !== void 0 && I !== void 0 && R && /* @__PURE__ */ _(de, {
+						currentPage: I,
+						totalPages: L,
+						onPageChange: R,
+						hasPreviousPage: I > 1,
+						hasNextPage: I < L,
+						"data-testid": U ? `${U}-pagination` : void 0
 					})]
 				})]
 			})]