@thewrong/ui 0.2.0 → 0.3.0

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

@@ -1,19 +1,20 @@
-import { GripVertical as e } from "../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
-import { LoadingSpinner as t } from "../loading-spinner/LoadingSpinner.esm.js";
-import { TableCheckbox as n } from "../table-checkbox/TableCheckbox.esm.js";
-import { applyColumnState as r, buildColumnSlots as i, flattenLeafColumns as a, hasGroupSlot as o } from "./column-group-utils.esm.js";
+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 ee } from "./hooks/useColumnResize.esm.js";
-import { useFillEmptyRows as te } from "./hooks/useFillEmptyRows.esm.js";
-import { useTableDragSelection as ne } from "./hooks/useTableDragSelection.esm.js";
-import { useTableSort as re } from "./hooks/useTableSort.esm.js";
-import { getColumnAlignClasses as c, getHoverableRowClasses as ie, getSelectedRowClasses as ae, getStripedRowClasses as l, getTableBaseClasses as oe, getTableCellClasses as u, getTableHeaderCellClasses as d, getTableHeaderClasses as se, getTableSizeClasses as ce, getTableVariantClasses as le } from "./utils.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 ue, KeyboardSensor as de, PointerSensor as fe, closestCenter as pe, useSensor as me, useSensors as he } from "@dnd-kit/core";
-import { SortableContext as ge, arrayMove as _e, horizontalListSortingStrategy as ve, sortableKeyboardCoordinates as ye } from "@dnd-kit/sortable";
+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 be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
+var xe = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 	let r = {
 		...e,
 		y: 0
@@ -22,11 +23,11 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 	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: b, rowHeight: x, loading: xe = !1, isFetching: S = !1, emptyMessage: Se = "데이터가 없어요", onRowClick: C, selectedRows: w = [], onRowSelect: T, enableRowSelection: E = !1, enableSelectAll: D = !1, rowCompare: O, getRowId: k, enableSorting: A = !1, serverSideSorting: j = !1, onSortChange: Ce, initialSort: we, variant: Te = "default", size: Ee = "medium", stickyHeader: M = !0, height: N, maxHeight: P, storageKey: De, columnState: F, fillEmptyRows: I = !0, totalElements: L, footerSlot: Oe, className: R = "", "data-testid": z, ...B } = f, { sort: ke, sortedData: V } = re({
-		initialSort: we,
-		serverSide: j,
-		onSort: Ce || void 0
-	}), H = p(() => !A || j ? v : V(v, (e, t) => {
+	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);
@@ -35,92 +36,92 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 		return e[t];
 	}), [
 		v,
+		k,
 		A,
-		j,
-		ke,
-		V,
+		je,
+		B,
 		y
-	]), U = m(null), W = m(null), G = m(null), Ae = m(null), K = !!F, je = he(me(fe, { activationConstraint: { distance: 5 } }), me(de, { coordinateGetter: ye })), q = p(() => i(y, b), [y, b]), J = p(() => {
-		if (!F) return q.filter((e) => !(e.kind === "column" && e.leafColumns[0].hidden));
-		let e = new Set(F.hiddenColumns);
-		return r(q, F.columnOrder, e);
-	}, [q, F]), Y = p(() => a(J), [J]), X = p(() => o(J), [J]), Me = p(() => new Map(q.map((e) => [e.key, e])), [q]), Ne = (e) => {
+	]), 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 (!F || !n || t.id === n.id) return;
-		let r = Me.get(String(n.id));
+		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 = F.columnOrder, a = i.indexOf(String(t.id)), o = i.indexOf(String(n.id));
-		a === -1 || o === -1 || F.onColumnOrderChange(_e(i, a, o));
-	}, { handleMouseDown: Pe, handleDoubleClick: Fe, getColumnWidth: Z, measureRef: Ie } = ee({
-		columns: Y,
-		data: H,
+		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 = Y.find((e) => e.key === t);
+			let n = q.find((e) => e.key === t);
 			return n?.accessor ? n.accessor(e) : e[t];
 		},
-		tableRef: U,
-		...F ? {
-			controlledWidths: F.columnWidths,
-			onColumnWidthsChange: F.onColumnWidthsChange
-		} : { storageKey: De }
-	}), Le = oe(), Re = le(Te), ze = ce(Ee), Be = E && D ? 48 : 0, Ve = p(() => Y.reduce((e, t) => {
-		let n = Z(t.key, t.width), r = parseFloat(n);
+		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) + Be, [
+	}, 0) + Ue, [
+		q,
 		Y,
-		Z,
-		Be
-	]), He = p(() => {
+		Ue
+	]), X = p(() => {
 		let e = {};
-		return N && (e.height = typeof N == "number" ? `${N}px` : N), P && (e.maxHeight = typeof P == "number" ? `${P}px` : P), e;
-	}, [N, P]), { emptyRowCount: Ue, measuredRowHeight: We } = te({
-		enabled: I,
-		containerRef: W,
-		theadRef: G,
-		tbodyRef: Ae,
+		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: [H, Y]
-	}), Q = (e) => !E || w.length === 0 ? !1 : O ? w.some((t) => O(t, e)) : w.some((t) => t === e), Ge = p(() => !E || !D || H.length === 0 ? !1 : H.every((e) => Q(e)), [
+		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,
-		D,
-		H,
-		Q
-	]), Ke = () => {
-		!E || !T || (Ge ? H.forEach((e) => {
-			Q(e) && T(e, !1);
-		}) : H.forEach((e) => {
-			Q(e) || T(e, !0);
+		V,
+		Z
+	]), Je = () => {
+		!T || !w || (qe ? V.forEach((e) => {
+			Z(e) && w(e, !1);
+		}) : V.forEach((e) => {
+			Z(e) || w(e, !0);
 		}));
-	}, $ = E && !!T && !!k, qe = ne({
-		rows: H,
-		getRowId: k ?? (() => -1),
-		isSelected: (e) => Q(e),
-		setSelected: (e, t) => T?.(e, t),
-		enabled: $,
-		scrollContainerRef: W
-	}), Je = (e, t) => {
-		let n = [l(t)];
-		return Q(e) && n.push(ae()), C && n.push(ie()), n.join(" ");
+	}, 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 xe ? /* @__PURE__ */ h("div", {
+	return Ce ? /* @__PURE__ */ h("div", {
 		ref: _,
-		className: `flex items-center justify-center p-8 flex-1 ${R}`,
-		style: He,
-		"data-testid": z,
-		...B,
-		children: /* @__PURE__ */ h(t, {
+		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: `relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6 ${R}`,
-		style: He,
-		"data-testid": z,
-		...B,
+		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: Ie,
+			ref: ze,
 			className: "absolute invisible whitespace-nowrap",
 			style: {
 				top: "-9999px",
@@ -131,109 +132,109 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 			children: [/* @__PURE__ */ g("div", {
 				className: "relative flex flex-1 flex-col min-h-0",
 				children: [/* @__PURE__ */ h("div", {
-					className: `pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-white/50 backdrop-blur-[2px] transition-opacity duration-150 dark:bg-neutral-900/50 ${S ? "opacity-100" : "opacity-0"}`,
-					...S ? {
+					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(t, {
+					children: /* @__PURE__ */ h(n, {
 						message: "",
 						className: "min-h-0"
 					})
 				}), /* @__PURE__ */ h("div", {
-					ref: W,
-					className: "scrollbar-table overflow-auto flex-1 bg-[#f9fafb] dark:bg-slate-900/50",
-					children: H.length === 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-neutral-600 dark:text-neutral-400",
-							children: Se
+							className: "text-fg-muted",
+							children: we
 						})
-					}) : /* @__PURE__ */ h(ue, {
-						sensors: je,
-						collisionDetection: pe,
-						onDragEnd: Ne,
-						modifiers: [be],
+					}) : /* @__PURE__ */ h(de, {
+						sensors: Pe,
+						collisionDetection: me,
+						onDragEnd: Ie,
+						modifiers: [xe],
 						children: /* @__PURE__ */ g("table", {
-							ref: U,
-							className: `${Le} ${Re} ${ze}`,
+							ref: H,
+							className: e(Be, Ve, He),
 							style: {
 								tableLayout: "fixed",
 								minWidth: "100%",
-								width: `${Ve}px`
+								width: `${We}px`
 							},
 							children: [
-								/* @__PURE__ */ g("colgroup", { children: [E && D && /* @__PURE__ */ h("col", { style: { width: "48px" } }), Y.map((e) => /* @__PURE__ */ h("col", {
+								/* @__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: Z(e.key, e.width) }
+									style: { width: Y(e.key, e.width) }
 								}, e.key))] }),
 								/* @__PURE__ */ g("thead", {
-									ref: G,
-									className: se(),
+									ref: Me,
+									className: ce(),
 									style: {
-										position: M ? "sticky" : "relative",
-										top: M ? 0 : void 0,
-										zIndex: M ? 10 : void 0
+										position: j ? "sticky" : "relative",
+										top: j ? 0 : void 0,
+										zIndex: j ? 20 : void 0
 									},
-									children: [/* @__PURE__ */ g("tr", { children: [E && D && /* @__PURE__ */ h("th", {
-										rowSpan: X ? 2 : 1,
-										className: `${d()} ${c("center")} w-12 px-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(n, {
-												checked: Ge,
-												onChange: () => Ke(),
+											children: /* @__PURE__ */ h(r, {
+												checked: qe,
+												onChange: () => Je(),
 												ariaLabel: "전체 선택"
 											})
 										})
-									}), /* @__PURE__ */ h(ge, {
-										items: J.map((e) => e.key),
-										strategy: ve,
-										children: J.map((t) => {
-											if (t.kind === "group") return /* @__PURE__ */ g(s, {
-												id: t.key,
-												disabled: !K,
+									}), /* @__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: t.leafColumns.length,
-												className: `${d()} ${c("center")} group/header-cell ${t.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
-												children: [K && /* @__PURE__ */ h("span", {
-													className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-text-tertiary opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+												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(e, { className: "h-3.5 w-3.5" })
+													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: t.header })
+													children: /* @__PURE__ */ h("span", { children: n.header })
 												})]
-											}, t.key);
-											let n = t.leafColumns[0], r = !K || n.excludeFromPreset === !0;
+											}, n.key);
+											let r = n.leafColumns[0], i = !W || r.excludeFromPreset === !0;
 											return /* @__PURE__ */ g(s, {
-												id: n.key,
-												disabled: r,
+												id: r.key,
+												disabled: i,
 												as: "th",
-												rowSpan: X ? 2 : 1,
-												className: `${d()} ${c("center")} group/header-cell ${n.sticky ? "sticky left-0 z-20 bg-bg-base-secondary" : ""} ${n.hideOnMobile ? "hidden md:table-cell" : ""} relative`,
+												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: Z(n.key, n.width),
-													minWidth: n.minWidth || 50
+													width: Y(r.key, r.width),
+													minWidth: r.minWidth || 50
 												},
 												children: [
-													!r && /* @__PURE__ */ h("span", {
-														className: "absolute left-0.5 top-1/2 -translate-y-1/2 text-text-tertiary opacity-0 transition-opacity group-hover/header-cell:opacity-100",
+													!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(e, { className: "h-3.5 w-3.5" })
+														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 })
+														children: /* @__PURE__ */ h("span", { children: r.header })
 													}),
-													n.excludeFromPreset !== !0 && /* @__PURE__ */ h("div", {
+													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(), Pe(n.key, e);
+															e.preventDefault(), e.stopPropagation(), Le(r.key, e);
 														},
 														onDoubleClick: (e) => {
-															e.preventDefault(), e.stopPropagation(), Fe(n.key, e);
+															e.preventDefault(), e.stopPropagation(), Re(r.key, e);
 														},
 														onClick: (e) => {
 															e.preventDefault(), e.stopPropagation();
@@ -242,95 +243,95 @@ var be = ({ transform: e, draggingNodeRect: t, containerNodeRect: n }) => {
 														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-text-tertiary group-hover/resize:!bg-primary-500 group-active/resize:!bg-primary-600"
+															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"
 														})
 													})
 												]
-											}, n.key);
+											}, r.key);
 										})
-									})] }), X && /* @__PURE__ */ h("tr", { children: J.filter((e) => e.kind === "group").flatMap((e) => e.leafColumns).map((e) => /* @__PURE__ */ h("th", {
-										className: `${d()} ${c(e.align ?? "center")} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+									})] }), 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: Z(e.key, e.width),
-											minWidth: e.minWidth || 50
+											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: e.header })
+											children: /* @__PURE__ */ h("span", { children: t.header })
 										})
-									}, e.key)) })]
+									}, t.key)) })]
 								}),
 								/* @__PURE__ */ g("tbody", {
-									ref: Ae,
-									children: [H.map((e, t) => {
-										let r = Q(e);
+									ref: Ne,
+									children: [V.map((t, n) => {
+										let i = Z(t);
 										return /* @__PURE__ */ g("tr", {
-											className: Je(e, t),
-											onClick: () => C?.(e, t),
-											style: x ? { height: `${x}px` } : void 0,
-											children: [E && D && /* @__PURE__ */ h("td", {
-												className: `${u()} ${c("center")} w-12 select-none`,
+											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: $ ? (e) => {
-													e.preventDefault(), qe.onRowMouseDown(t);
+												onMouseDown: Q ? (e) => {
+													e.preventDefault(), $.onRowMouseDown(n);
 												} : void 0,
-												onMouseEnter: $ ? () => qe.onRowMouseEnter(t) : void 0,
+												onMouseEnter: Q ? () => $.onRowMouseEnter(n) : void 0,
 												children: /* @__PURE__ */ h("div", {
 													className: "flex items-center justify-center",
-													children: /* @__PURE__ */ h(n, {
-														checked: r,
-														onChange: (t) => T?.(e, t),
-														pointerEventsNone: $,
+													children: /* @__PURE__ */ h(r, {
+														checked: i,
+														onChange: (e) => w?.(t, e),
+														pointerEventsNone: Q,
 														ariaLabel: "행 선택"
 													})
 												})
-											}), Y.map((t) => {
-												let n = t.accessor ? t.accessor(e) : e[t.key];
+											}), q.map((n) => {
+												let r = n.accessor ? n.accessor(t) : t[n.key];
 												return /* @__PURE__ */ h("td", {
-													className: `${u()} ${c(t.align)} ${t.sticky ? "sticky left-0 z-10 bg-inherit" : ""} ${t.hideOnMobile ? "hidden md:table-cell" : ""}`,
+													className: e(u(), c(n.align), n.sticky && "sticky left-0 z-10 bg-inherit", n.hideOnMobile && "hidden md:table-cell"),
 													style: {
-														width: Z(t.key, t.width),
-														minWidth: t.minWidth || 50,
-														...x ? {
-															height: `${x}px`,
-															maxHeight: `${x}px`,
+														width: Y(n.key, n.width),
+														minWidth: n.minWidth || 50,
+														...b ? {
+															height: `${b}px`,
+															maxHeight: `${b}px`,
 															overflow: "hidden"
 														} : {}
 													},
-													children: n
-												}, t.key);
+													children: r
+												}, n.key);
 											})]
-										}, t);
-									}), I && Array.from({ length: Ue }).map((e, t) => {
-										let n = H.length + t, r = x ?? We ?? void 0;
+										}, 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(n),
-											style: r ? { height: `${r}px` } : void 0,
-											children: [E && D && /* @__PURE__ */ h("td", {
-												className: `${u()} w-12`,
-												style: r ? { height: `${r}px` } : void 0
-											}), Y.map((e) => /* @__PURE__ */ h("td", {
-												className: `${u()} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
+											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: Z(e.key, e.width),
-													minWidth: e.minWidth || 50,
-													...r ? { height: `${r}px` } : {}
+													width: Y(t.key, t.width),
+													minWidth: t.minWidth || 50,
+													...i ? { height: `${i}px` } : {}
 												}
-											}, e.key))]
-										}, `empty-${t}`);
+											}, t.key))]
+										}, `empty-${n}`);
 									})]
 								})
 							]
 						})
 					})
 				})]
-			}), Oe ?? (L === void 0 ? null : /* @__PURE__ */ h("div", {
-				className: "flex justify-end shrink-0 text-sm text-neutral-600 dark:text-neutral-300",
+			}), Ae ?? (I === void 0 ? null : /* @__PURE__ */ h("div", {
+				className: "flex justify-end shrink-0 text-sm text-fg-muted",
 				children: /* @__PURE__ */ g("span", { children: [
 					"총 ",
-					L.toLocaleString(),
+					I.toLocaleString(),
 					"건"
 				] })
 			}))]

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

@@ -1,7 +1,7 @@
 //#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-neutral-200 dark:border-neutral-700",
+	bordered: "border border-border-default",
 	striped: ""
 })[e], n = (e = "medium") => ({
 	small: "text-sm",
@@ -11,6 +11,6 @@ var e = () => "w-full\n    border-collapse\n    text-left\n    table-fixed".repl
 	left: "text-left justify-start",
 	center: "text-center justify-center",
 	right: "text-right justify-end"
-})[e], i = () => "font-medium\n    text-text-secondary\n    text-sm\n    uppercase\n    tracking-wider\n    bg-bg-base-secondary\n    leading-tight".replace(/\s+/g, " "), a = () => "px-6\n    py-1.5\n    text-text-secondary\n    text-sm\n    font-medium\n    leading-tight\n    border-b border-r border-border-secondary dark:border-border-tertiary\n    whitespace-nowrap\n    bg-bg-base-secondary".replace(/\s+/g, " "), o = () => "px-3\n    py-0.5\n    text-neutral-900 dark:text-white\n    text-xs\n    leading-tight\n    border-b border-r border-[#f2f3f5] dark:border-neutral-700\n    whitespace-nowrap\n    overflow-hidden\n    text-ellipsis".replace(/\s+/g, " "), s = () => "px-3\n    py-0.5\n    text-neutral-900 dark:text-white\n    text-xs\n    leading-tight\n    border-b border-r border-[#f2f3f5] dark:border-neutral-700\n    whitespace-nowrap".replace(/\s+/g, " "), c = (e) => e % 2 == 0 ? "bg-[#f9fafb] dark:bg-slate-900/50 hover:bg-[#f3f4f6] dark:hover:bg-slate-800" : "bg-white dark:bg-slate-950 hover:bg-slate-50 dark:hover:bg-slate-900", l = () => "bg-blue-50 dark:bg-blue-950/50\n    hover:bg-blue-100 dark:hover:bg-blue-950/70\n    shadow-[inset_4px_0_0_0_var(--color-primary-500)]\n    dark:shadow-[inset_4px_0_0_0_var(--color-primary-400)]".replace(/\s+/g, " "), u = () => "hover:bg-[#f9fafb]\n    transition-colors duration-200\n    cursor-pointer".replace(/\s+/g, " ");
+})[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;