@thewrong/ui 0.3.0 → 0.4.0

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

@@ -4,28 +4,40 @@ import { ChevronRight as n } from "../../node_modules/lucide-react/dist/esm/icon
 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 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 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";
+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 Se = [
+var Ee = [
 	30,
 	50,
 	100
-], y = 36, b = p((p, b) => {
-	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: j,
-		onSort: Te || void 0
-	}), J = m(() => !A || j ? x : Pe(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);
@@ -35,180 +47,182 @@ var Se = [
 	}), [
 		x,
 		A,
-		j,
-		Ne,
-		Pe,
+		M,
+		K,
+		Ve,
 		S
-	]), 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) => {
+	]), 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 (!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(() => {
+		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: Ue, handleDoubleClick: We, getColumnWidth: Z, measureRef: Ge } = o({
+	}, [S, V]), { handleMouseDown: $e, handleDoubleClick: et, getColumnWidth: Z, measureRef: tt } = ne({
 		columns: X,
 		data: J,
 		getCellContent: (e, t) => {
 			let n = X.find((e) => e.key === t);
 			return n?.accessor ? n.accessor(e) : e[t];
 		},
-		tableRef: Fe,
+		tableRef: Ge,
 		...V ? {
 			controlledWidths: V.columnWidths,
 			onColumnWidthsChange: V.onColumnWidthsChange
-		} : { storageKey: Ae }
-	}), Ke = ie(), qe = se(De), Je = oe(Oe), Ye = m(() => {
+		} : { storageKey: Ie }
+	}), nt = se(), rt = ue(Me), it = le(Ne), at = h(() => {
 		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: Xe, measuredRowHeight: Ze } = s({
-		enabled: H,
+		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: Ie,
-		tbodyRef: Le,
+		theadRef: Ke,
+		tbodyRef: qe,
 		excludeRowsSelector: "tr:not([data-empty-row]):not([data-expanded-row])",
 		remainingMode: "tbody-height",
 		observeTbody: !0,
 		deps: [J, X]
 	});
-	ue(() => {
-		if (!q || !K) return;
+	pe(() => {
+		if (!G || !W) return;
 		let e = Y.current;
 		if (!e) return;
 		let t = () => {
-			ze((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();
-	}, [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)), [
+	}, [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,
 		J,
 		Q
-	]), et = () => {
-		!D || !E || ($e ? J.forEach((e) => {
+	]), ut = () => {
+		!D || !E || (lt ? J.forEach((e) => {
 			Q(e) && E(e, !1);
 		}) : J.forEach((e) => {
 			Q(e) || E(e, !0);
 		}));
-	}, 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", {
+	}, 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: e("flex items-center justify-center p-8 flex-1", je),
-		style: Ye,
-		"data-testid": G,
-		...Me,
-		children: /* @__PURE__ */ g(r, {
+		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: e("isolate relative flex flex-col min-h-0", je),
-		style: Ye,
-		"data-testid": G,
-		...Me,
-		children: [/* @__PURE__ */ g("div", {
-			ref: Ge,
+		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", {
+			children: [/* @__PURE__ */ _("div", {
 				ref: Y,
 				className: "overflow-auto flex-1 bg-bg-page",
-				children: J.length === 0 ? /* @__PURE__ */ g("div", {
+				children: J.length === 0 ? /* @__PURE__ */ _("div", {
 					className: "flex items-center justify-center p-8 h-full",
-					children: /* @__PURE__ */ g("p", {
+					children: /* @__PURE__ */ _("p", {
 						className: "text-fg-muted",
-						children: we
+						children: Oe
 					})
-				}) : /* @__PURE__ */ g(pe, {
-					sensors: Ve,
-					collisionDetection: ge,
-					onDragEnd: He,
-					children: /* @__PURE__ */ _("table", {
-						ref: Fe,
-						className: e(Ke, qe, Je),
+				}) : /* @__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" } }),
-								K && /* @__PURE__ */ g("col", { style: { width: `${y}px` } }),
-								X.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: Z(e.key, e.width) }
 								}, e.key)),
-								/* @__PURE__ */ g("col", { style: { width: "100%" } })
+								/* @__PURE__ */ _("col", { style: { width: "100%" } })
 							] }),
-							/* @__PURE__ */ g("thead", {
-								ref: Ie,
-								className: ae(),
+							/* @__PURE__ */ _("thead", {
+								ref: Ke,
+								className: ce(),
 								style: {
-									position: M ? "sticky" : "relative",
-									top: M ? 0 : void 0,
-									zIndex: M ? 20 : 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: e(u(), c("center"), "border-r-0 w-12"),
-										children: /* @__PURE__ */ g(t.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: $e,
-											onCheckedChange: et
+											checked: lt,
+											onCheckedChange: ut
 										})
 									}),
-									K && /* @__PURE__ */ g("th", {
+									W && /* @__PURE__ */ _("th", {
 										"aria-hidden": "true",
-										className: e(u(), "border-r-0"),
+										className: e(d(), "border-r-0"),
 										style: { width: `${y}px` }
 									}),
-									/* @__PURE__ */ g(ve, {
+									/* @__PURE__ */ _(Se, {
 										items: X.map((e) => e.key),
-										strategy: be,
+										strategy: we,
 										children: X.map((t) => {
-											let n = !Be || t.excludeFromPreset === !0;
-											return /* @__PURE__ */ _(a, {
+											let n = !Xe || t.excludeFromPreset === !0;
+											return /* @__PURE__ */ v(a, {
 												id: t.key,
 												disabled: n,
 												as: "th",
-												className: e(u(), c("center"), "relative", t.sticky && "sticky left-0 z-20 bg-bg-table-header", t.hideOnMobile && "hidden md:table-cell"),
+												"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: 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: t.header })
-												}), t.excludeFromPreset !== !0 && /* @__PURE__ */ g("div", {
+													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: (e) => {
-														e.preventDefault(), e.stopPropagation(), Ue(t.key, e);
+														e.preventDefault(), e.stopPropagation(), $e(t.key, e);
 													},
 													onDoubleClick: (e) => {
-														e.preventDefault(), e.stopPropagation(), We(t.key, e);
+														e.preventDefault(), e.stopPropagation(), et(t.key, e);
 													},
 													onClick: (e) => {
 														e.preventDefault(), e.stopPropagation();
@@ -219,53 +233,53 @@ var Se = [
 											}, t.key);
 										})
 									}),
-									/* @__PURE__ */ g("th", {
+									/* @__PURE__ */ _("th", {
 										"aria-hidden": "true",
 										className: "bg-bg-table-header border-b border-l border-border-table-header"
 									})
 								] })
 							}),
-							/* @__PURE__ */ _("tbody", {
-								ref: Le,
+							/* @__PURE__ */ v("tbody", {
+								ref: qe,
 								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),
+									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?.(r, i), K && $(r);
+											w?.(r, i), W && $(r);
 										},
-										onKeyDown: (e) => rt(e, r),
-										tabIndex: K ? 0 : void 0,
-										role: K ? "button" : void 0,
-										"aria-expanded": K ? s : 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: e(l(), c("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(t.Circle, {
+												children: /* @__PURE__ */ _(t.Circle, {
 													size: 20,
 													checked: a,
 													onCheckedChange: (e) => E?.(r, e)
 												})
 											}),
-											K && /* @__PURE__ */ g("td", {
-												className: e(l(), c("center"), "border-r-0"),
+											W && /* @__PURE__ */ _("td", {
+												className: e(u(), c("center"), "border-r-0"),
 												style: { width: `${y}px` },
-												children: /* @__PURE__ */ g(n, {
+												children: /* @__PURE__ */ _(n, {
 													"aria-hidden": "true",
-													className: e("mx-auto h-4 w-4 text-fg-muted hover:text-fg-default transition-transform duration-200", s && "rotate-90")
+													className: e("mx-auto h-4 w-4 text-fg-muted hover:text-fg-default transition-transform duration-200", o && "rotate-90")
 												})
 											}),
 											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: e(l(), c(t.align), a && "border-r-0", t.sticky && "sticky left-0 z-10 bg-inherit", t.hideOnMobile && "hidden md:table-cell"),
+												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: Z(t.key, t.width),
 														minWidth: t.minWidth || 50,
@@ -278,49 +292,49 @@ var Se = [
 													children: i
 												}, t.key);
 											}),
-											/* @__PURE__ */ g("td", {
+											/* @__PURE__ */ _("td", {
 												"aria-hidden": "true",
 												className: "border-b border-l border-border-table-cell bg-transparent"
 											})
 										]
-									}), K && /* @__PURE__ */ g("tr", {
+									}), W && /* @__PURE__ */ _("tr", {
 										"data-expanded-row": !0,
 										className: "bg-bg-surface",
-										children: /* @__PURE__ */ g("td", {
-											colSpan: it,
+										children: /* @__PURE__ */ _("td", {
+											colSpan: mt,
 											className: "p-0 border-b border-border-table-cell text-fg-default",
-											children: /* @__PURE__ */ g("div", {
-												className: q ? "sticky left-0" : void 0,
-												style: q && Re > 0 ? { width: `${Re}px` } : void 0,
-												children: /* @__PURE__ */ g("div", {
+											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: s ? "1fr" : "0fr",
-														opacity: +!!s
+														gridTemplateRows: o ? "1fr" : "0fr",
+														opacity: +!!o
 													},
-													"aria-hidden": !s,
-													children: /* @__PURE__ */ g("div", {
+													"aria-hidden": !o,
+													children: /* @__PURE__ */ _("div", {
 														className: "overflow-hidden",
-														children: W.renderRow(r)
+														children: H.renderRow(r)
 													})
 												})
 											})
 										})
 									})] }, i);
-								}), H && Array.from({ length: Xe }).map((t, n) => {
-									let r = J.length + n, i = C ?? Ze ?? void 0;
-									return /* @__PURE__ */ _("tr", {
+								}), 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: re(r),
+										className: l(r),
 										style: i ? { height: `${i}px` } : void 0,
 										children: [
-											D && O && /* @__PURE__ */ g("td", {
-												className: e(l(), "border-r-0 w-12"),
+											D && O && /* @__PURE__ */ _("td", {
+												className: e(u(), "border-r-0 w-12"),
 												style: i ? { height: `${i}px` } : void 0
 											}),
-											K && /* @__PURE__ */ g("td", {
-												className: e(l(), "border-r-0"),
+											W && /* @__PURE__ */ _("td", {
+												className: e(u(), "border-r-0"),
 												style: {
 													width: `${y}px`,
 													...i ? { height: `${i}px` } : {}
@@ -328,8 +342,8 @@ var Se = [
 											}),
 											X.map((t, n) => {
 												let r = n === X.length - 1 && !D;
-												return /* @__PURE__ */ g("td", {
-													className: e(l(), r && "border-r-0", t.hideOnMobile && "hidden md:table-cell"),
+												return /* @__PURE__ */ _("td", {
+													className: e(u(), r && "border-r-0", t.hideOnMobile && "hidden md:table-cell"),
 													style: {
 														width: Z(t.key, t.width),
 														minWidth: t.minWidth || 50,
@@ -337,7 +351,7 @@ var Se = [
 													}
 												}, t.key);
 											}),
-											/* @__PURE__ */ g("td", {
+											/* @__PURE__ */ _("td", {
 												"aria-hidden": "true",
 												className: "border-b border-l border-border-table-cell bg-transparent",
 												style: i ? { height: `${i}px` } : void 0
@@ -349,64 +363,64 @@ var Se = [
 						]
 					})
 				})
-			}), nt && /* @__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-border-subtle px-4 py-2 shrink-0",
-				children: [/* @__PURE__ */ _("div", {
+				children: [/* @__PURE__ */ v("div", {
 					className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted",
 					children: [
-						B !== void 0 && /* @__PURE__ */ _("span", { children: [
+						B !== void 0 && /* @__PURE__ */ v("span", { children: [
 							"총 ",
 							B.toLocaleString(),
 							"건"
 						] }),
-						z && R !== void 0 && /* @__PURE__ */ _("div", {
+						z && Pe !== void 0 && /* @__PURE__ */ v("div", {
 							className: "flex items-center gap-1",
-							children: [/* @__PURE__ */ g("span", {
+							children: [/* @__PURE__ */ _("span", {
 								className: "text-fg-muted",
 								children: "페이지당"
-							}), /* @__PURE__ */ g("div", {
+							}), /* @__PURE__ */ _("div", {
 								className: "w-20",
-								children: /* @__PURE__ */ g(i, {
+								children: /* @__PURE__ */ _(i, {
 									variant: "box",
 									selectSize: "mini",
-									value: String(R),
+									value: String(Pe),
 									onChange: (e) => z(Number(e)),
-									options: ke.map((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: 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
-							}), U && /* @__PURE__ */ g(d, { onKeyDown: Qe })] })
+							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: 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
-						}), 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
+						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
 					})]
 				})]
 			})]

package/dist/components/table/components/SortHeader.cjs

@@ -0,0 +1 @@
+const e=require("../../../node_modules/lucide-react/dist/esm/icons/arrow-down.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/arrow-up-down.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/arrow-up.cjs"),r=require("./SortableHeaderCell.cjs");let i=require("react/jsx-runtime");function a({children:a,current:o,label:s,onSort:c}){let l=r.useSortableHeaderKeyboardDrag(),u=o===`asc`?n.ArrowUp:o===`desc`?e.ArrowDown:t.ArrowUpDown;return(0,i.jsxs)(`button`,{ref:l?.setActivatorNodeRef,type:`button`,"aria-label":s,"aria-describedby":l?.descriptionId,"aria-keyshortcuts":l?`Shift+Space`:void 0,onKeyDown:l?.onKeyDown,onClick:e=>{e.stopPropagation(),c()},className:`inline-flex items-center gap-1 cursor-pointer rounded-control-mini focus-visible:outline-none focus-visible:ring-control focus-visible:ring-focus-primary`,children:[a,(0,i.jsx)(u,{"aria-hidden":`true`,className:`size-3.5 shrink-0`})]})}exports.SortHeader=a;

package/dist/components/table/components/SortHeader.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { SortDirection } from '../types.js';
+interface SortHeaderProps {
+    children: ReactNode;
+    current: SortDirection;
+    label?: string;
+    onSort: () => void;
+}
+export declare function SortHeader({ children, current, label, onSort }: SortHeaderProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+import { ArrowDown as e } from "../../../node_modules/lucide-react/dist/esm/icons/arrow-down.esm.js";
+import { ArrowUpDown as t } from "../../../node_modules/lucide-react/dist/esm/icons/arrow-up-down.esm.js";
+import { ArrowUp as n } from "../../../node_modules/lucide-react/dist/esm/icons/arrow-up.esm.js";
+import { useSortableHeaderKeyboardDrag as r } from "./SortableHeaderCell.esm.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/table/components/SortHeader.tsx
+function o({ children: o, current: s, label: c, onSort: l }) {
+	let u = r(), d = s === "asc" ? n : s === "desc" ? e : t;
+	return /* @__PURE__ */ a("button", {
+		ref: u?.setActivatorNodeRef,
+		type: "button",
+		"aria-label": c,
+		"aria-describedby": u?.descriptionId,
+		"aria-keyshortcuts": u ? "Shift+Space" : void 0,
+		onKeyDown: u?.onKeyDown,
+		onClick: (e) => {
+			e.stopPropagation(), l();
+		},
+		className: "inline-flex items-center gap-1 cursor-pointer rounded-control-mini focus-visible:outline-none focus-visible:ring-control focus-visible:ring-focus-primary",
+		children: [o, /* @__PURE__ */ i(d, {
+			"aria-hidden": "true",
+			className: "size-3.5 shrink-0"
+		})]
+	});
+}
+//#endregion
+export { o as SortHeader };