@thewrong/ui 0.2.0 → 0.4.0

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

@@ -1,53 +1,54 @@
-import { useState as e } from "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.esm.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/table/components/PageJumpInput.tsx
-function r({ currentPage: r, totalPages: i, onPageChange: a, className: o = "", "data-testid": s }) {
-	let [c, l] = e(""), u = (e) => {
+function i({ currentPage: i, totalPages: a, onPageChange: o, className: s = "", "data-testid": c }) {
+	let [l, u] = t(""), d = (e) => {
 		let t = e.replace(/[^0-9]/g, "");
 		if (t === "") {
-			l("");
+			u("");
 			return;
 		}
 		let n = Number(t);
 		if (n <= 0) {
-			l("");
+			u("");
 			return;
 		}
-		l(String(Math.min(i, n)));
-	}, d = () => {
-		if (c === "") return;
-		let e = Number(c), t = Math.max(1, Math.min(i, Math.floor(e)));
-		t !== r && a(t), l("");
-	}, f = (e) => {
-		e.key === "Enter" ? (e.preventDefault(), d()) : e.key === "Escape" && (l(""), e.target.blur());
-	}, p = String(i).length, m = p <= 2 ? "w-12" : p === 3 ? "w-14" : "w-16";
-	return /* @__PURE__ */ n("label", {
-		className: `flex items-center gap-1 text-sm text-neutral-600 dark:text-neutral-300 ${o}`,
+		u(String(Math.min(a, n)));
+	}, f = () => {
+		if (l === "") return;
+		let e = Number(l), t = Math.max(1, Math.min(a, Math.floor(e)));
+		t !== i && o(t), u("");
+	}, p = (e) => {
+		e.key === "Enter" ? (e.preventDefault(), f()) : e.key === "Escape" && (u(""), e.target.blur());
+	}, m = String(a).length, h = m <= 2 ? "w-12" : m === 3 ? "w-14" : "w-16";
+	return /* @__PURE__ */ r("label", {
+		className: e("flex items-center gap-1 text-sm text-fg-muted", s),
 		children: [
-			/* @__PURE__ */ t("span", {
-				className: "text-neutral-500",
+			/* @__PURE__ */ n("span", {
+				className: "text-fg-muted",
 				children: "이동"
 			}),
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ n("input", {
 				type: "text",
 				inputMode: "numeric",
 				pattern: "[0-9]*",
-				maxLength: p,
-				value: c,
-				placeholder: String(r),
-				onChange: (e) => u(e.target.value),
-				onKeyDown: f,
-				onBlur: d,
-				"aria-label": `페이지 번호 입력 (1-${i})`,
-				"data-testid": s,
-				className: `${m} rounded border border-neutral-300 bg-white px-2 py-0.5 text-center tabular-nums text-neutral-700 transition-colors hover:border-primary-300 focus:border-primary-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-primary-400`
+				maxLength: m,
+				value: l,
+				placeholder: String(i),
+				onChange: (e) => d(e.target.value),
+				onKeyDown: p,
+				onBlur: f,
+				"aria-label": `페이지 번호 입력 (1-${a})`,
+				"data-testid": c,
+				className: e(h, "rounded-control-mini border border-border-subtle bg-bg-surface px-2 py-0.5 text-center tabular-nums text-fg-default transition-colors hover:border-primary-border focus:border-primary focus:outline-hidden focus-visible:ring-control focus-visible:ring-focus-primary")
 			}),
-			/* @__PURE__ */ n("span", {
-				className: "text-neutral-500 tabular-nums",
-				children: ["/ ", i.toLocaleString()]
+			/* @__PURE__ */ r("span", {
+				className: "text-fg-muted tabular-nums",
+				children: ["/ ", a.toLocaleString()]
 			})
 		]
 	});
 }
 //#endregion
-export { r as PageJumpInput };
+export { i as PageJumpInput };

package/dist/components/table/components/Pagination.cjs

@@ -0,0 +1 @@
+const e=require("../../../lib/utils.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-left.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.cjs"),i=require("../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=[9,7,5,3,1],c=16,l=`px-0.5 text-xs text-fg-subtle font-mono @min-[640px]/pagebar:px-1 @min-[640px]/pagebar:text-sm`,u=`inline-flex h-7 min-w-6 items-center justify-center rounded-control-mini px-1.5 font-mono text-xs tabular-nums transition-colors @min-[640px]/pagebar:h-8 @min-[640px]/pagebar:min-w-7 @min-[640px]/pagebar:px-2 @min-[640px]/pagebar:text-sm`,d=`text-fg-disabled hover:bg-bg-subtle hover:text-fg-default`,f=`font-bold text-fg-default`,p=`outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary`,m=`disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-fg-subtle`;function h({active:t=!1,className:n=``,children:r,...i}){return(0,o.jsx)(`button`,{type:`button`,"aria-current":t?`page`:void 0,className:e.cn(u,t?f:d,p,m,n),...i,children:r})}function g(e,t,n){let r=Math.floor(n/2),i=Math.max(1,e-r),a=Math.min(t,i+n-1);a-i<n-1&&(i=Math.max(1,a-n+1));let o=[];for(let e=i;e<=a;e++)o.push(e);return o}function _(e,t){let n=t<=28?4:8,r=t<=28,i=r?24:28,a=r?7:8;return e.reduce((e,t)=>{let n=String(t).length;return e+Math.max(i,i+(n-1)*a)},0)+n*Math.max(0,e.length-1)+c*2+24}function v(e,t,n,r,i,a){let o=e-r,c=s.filter(e=>e<=a);for(let e of c)if(_(g(t,n,e),i)<=o)return e;return 1}function y({currentPage:e,totalPages:t,pages:n,onPageChange:r,testId:i}){if(n.length===0)return null;let a=n[0]>1,s=n[n.length-1]<t;return(0,o.jsxs)(o.Fragment,{children:[a&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(h,{active:e===1,onClick:()=>r(1),"data-testid":i?`${i}-page-1`:void 0,children:`1`}),n[0]>2&&(0,o.jsx)(`span`,{className:l,children:`…`})]}),n.map(t=>(0,o.jsx)(h,{active:e===t,onClick:()=>r(t),"data-testid":i?`${i}-page-${t}`:void 0,children:t},t)),s&&(0,o.jsxs)(o.Fragment,{children:[n[n.length-1]<t-1&&(0,o.jsx)(`span`,{className:l,children:`…`}),(0,o.jsx)(h,{active:e===t,onClick:()=>r(t),"data-testid":i?`${i}-page-${t}`:void 0,children:t})]})]})}function b({currentPage:s,totalPages:c,onPageChange:l,hasPreviousPage:u,hasNextPage:d,maxPageButtons:f=9,className:p=``,"data-testid":m,..._}){let b=(0,a.useRef)(null),[x,S]=(0,a.useState)(f);if((0,a.useLayoutEffect)(()=>{let e=b.current;if(!e)return;let t=e.parentElement;if(!t)return;let n=()=>{let e=t.offsetWidth,n=e<640,r=n?28:32,i=n?4:8,a=v(e,s,c,r*4+i*5,r,f);S(e=>e===a?e:a)};n();let r=new ResizeObserver(n);return r.observe(t),()=>r.disconnect()},[s,c,f]),c<1)return null;if(c===1)return(0,o.jsx)(`div`,{ref:b,className:e.cn(`flex items-center justify-center gap-1 sm:gap-2`,p),"data-testid":m,..._,children:(0,o.jsx)(h,{active:!0,disabled:!0,"data-testid":m?`${m}-page-1`:void 0,children:`1`})});let C=g(s,c,x);return(0,o.jsxs)(`div`,{ref:b,className:e.cn(`flex items-center justify-center gap-1 sm:gap-2`,p),"data-testid":m,..._,children:[(0,o.jsx)(h,{disabled:s===1,onClick:()=>l(1),"data-testid":m?`${m}-first`:void 0,"aria-label":`첫 페이지`,children:(0,o.jsx)(r.ChevronsLeft,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,o.jsx)(h,{disabled:u===!1||s===1,onClick:()=>l(s-1),"data-testid":m?`${m}-prev`:void 0,"aria-label":`이전 페이지`,children:(0,o.jsx)(t.ChevronLeft,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,o.jsx)(y,{currentPage:s,totalPages:c,pages:C,onPageChange:l,testId:m}),(0,o.jsx)(h,{disabled:d===!1||s===c,onClick:()=>l(s+1),"data-testid":m?`${m}-next`:void 0,"aria-label":`다음 페이지`,children:(0,o.jsx)(n.ChevronRight,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})}),(0,o.jsx)(h,{disabled:s===c,onClick:()=>l(c),"data-testid":m?`${m}-last`:void 0,"aria-label":`마지막 페이지`,children:(0,o.jsx)(i.ChevronsRight,{className:`h-3.5 w-3.5`,"aria-hidden":`true`})})]})}exports.Pagination=b;

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

@@ -1,68 +1,69 @@
-import { ChevronLeft as e } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
-import { ChevronRight as t } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
-import { ChevronsLeft as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.esm.js";
-import { ChevronsRight as r } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.esm.js";
-import { useLayoutEffect as i, useRef as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { cn as e } from "../../../lib/utils.esm.js";
+import { ChevronLeft as t } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as n } from "../../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { ChevronsLeft as r } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-left.esm.js";
+import { ChevronsRight as i } from "../../../node_modules/lucide-react/dist/esm/icons/chevrons-right.esm.js";
+import { useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/table/components/Pagination.tsx
-var u = [
+var d = [
 	9,
 	7,
 	5,
 	3,
 	1
-], d = 16, f = "px-0.5 text-xs text-text-tertiary font-mono @min-[640px]/pagebar:px-1 @min-[640px]/pagebar:text-sm", p = "inline-flex h-7 min-w-6 items-center justify-center rounded-md px-1.5 font-mono text-xs tabular-nums transition-colors @min-[640px]/pagebar:h-8 @min-[640px]/pagebar:min-w-7 @min-[640px]/pagebar:px-2 @min-[640px]/pagebar:text-sm", m = "text-text-disabled hover:bg-bg-base-secondary hover:text-text-secondary", h = "font-bold text-text-secondary", g = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500", _ = "disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-text-tertiary";
-function v({ active: e = !1, className: t = "", children: n, ...r }) {
-	return /* @__PURE__ */ c("button", {
+], f = 16, p = "px-0.5 text-xs text-fg-subtle font-mono @min-[640px]/pagebar:px-1 @min-[640px]/pagebar:text-sm", m = "inline-flex h-7 min-w-6 items-center justify-center rounded-control-mini px-1.5 font-mono text-xs tabular-nums transition-colors @min-[640px]/pagebar:h-8 @min-[640px]/pagebar:min-w-7 @min-[640px]/pagebar:px-2 @min-[640px]/pagebar:text-sm", h = "text-fg-disabled hover:bg-bg-subtle hover:text-fg-default", g = "font-bold text-fg-default", _ = "outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary", v = "disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:text-fg-subtle";
+function y({ active: t = !1, className: n = "", children: r, ...i }) {
+	return /* @__PURE__ */ l("button", {
 		type: "button",
-		"aria-current": e ? "page" : void 0,
-		className: `${p} ${e ? h : m} ${g} ${_} ${t}`,
-		...r,
-		children: n
+		"aria-current": t ? "page" : void 0,
+		className: e(m, t ? g : h, _, v, n),
+		...i,
+		children: r
 	});
 }
-function y(e, t, n) {
+function b(e, t, n) {
 	let r = Math.floor(n / 2), i = Math.max(1, e - r), a = Math.min(t, i + n - 1);
 	a - i < n - 1 && (i = Math.max(1, a - n + 1));
 	let o = [];
 	for (let e = i; e <= a; e++) o.push(e);
 	return o;
 }
-function b(e, t) {
+function x(e, t) {
 	let n = t <= 28 ? 4 : 8, r = t <= 28, i = r ? 24 : 28, a = r ? 7 : 8;
 	return e.reduce((e, t) => {
 		let n = String(t).length;
 		return e + Math.max(i, i + (n - 1) * a);
-	}, 0) + n * Math.max(0, e.length - 1) + d * 2 + 24;
+	}, 0) + n * Math.max(0, e.length - 1) + f * 2 + 24;
 }
-function x(e, t, n, r, i, a) {
-	let o = e - r, s = u.filter((e) => e <= a);
-	for (let e of s) if (b(y(t, n, e), i) <= o) return e;
+function S(e, t, n, r, i, a) {
+	let o = e - r, s = d.filter((e) => e <= a);
+	for (let e of s) if (x(b(t, n, e), i) <= o) return e;
 	return 1;
 }
-function S({ currentPage: e, totalPages: t, pages: n, onPageChange: r, testId: i }) {
+function C({ currentPage: e, totalPages: t, pages: n, onPageChange: r, testId: i }) {
 	if (n.length === 0) return null;
 	let a = n[0] > 1, o = n[n.length - 1] < t;
-	return /* @__PURE__ */ l(s, { children: [
-		a && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(v, {
+	return /* @__PURE__ */ u(c, { children: [
+		a && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(y, {
 			active: e === 1,
 			onClick: () => r(1),
 			"data-testid": i ? `${i}-page-1` : void 0,
 			children: "1"
-		}), n[0] > 2 && /* @__PURE__ */ c("span", {
-			className: f,
+		}), n[0] > 2 && /* @__PURE__ */ l("span", {
+			className: p,
 			children: "…"
 		})] }),
-		n.map((t) => /* @__PURE__ */ c(v, {
+		n.map((t) => /* @__PURE__ */ l(y, {
 			active: e === t,
 			onClick: () => r(t),
 			"data-testid": i ? `${i}-page-${t}` : void 0,
 			children: t
 		}, t)),
-		o && /* @__PURE__ */ l(s, { children: [n[n.length - 1] < t - 1 && /* @__PURE__ */ c("span", {
-			className: f,
+		o && /* @__PURE__ */ u(c, { children: [n[n.length - 1] < t - 1 && /* @__PURE__ */ l("span", {
+			className: p,
 			children: "…"
-		}), /* @__PURE__ */ c(v, {
+		}), /* @__PURE__ */ l(y, {
 			active: e === t,
 			onClick: () => r(t),
 			"data-testid": i ? `${i}-page-${t}` : void 0,
@@ -70,87 +71,87 @@ function S({ currentPage: e, totalPages: t, pages: n, onPageChange: r, testId: i
 		})] })
 	] });
 }
-function C({ currentPage: s, totalPages: u, onPageChange: d, hasPreviousPage: f, hasNextPage: p, maxPageButtons: m = 9, className: h = "", "data-testid": g, ..._ }) {
-	let b = a(null), [C, w] = o(m);
-	if (i(() => {
-		let e = b.current;
+function w({ currentPage: c, totalPages: d, onPageChange: f, hasPreviousPage: p, hasNextPage: m, maxPageButtons: h = 9, className: g = "", "data-testid": _, ...v }) {
+	let x = o(null), [w, T] = s(h);
+	if (a(() => {
+		let e = x.current;
 		if (!e) return;
 		let t = e.parentElement;
 		if (!t) return;
 		let n = () => {
-			let e = t.offsetWidth, n = e < 640, r = n ? 28 : 32, i = n ? 4 : 8, a = x(e, s, u, r * 4 + i * 5, r, m);
-			w((e) => e === a ? e : a);
+			let e = t.offsetWidth, n = e < 640, r = n ? 28 : 32, i = n ? 4 : 8, a = S(e, c, d, r * 4 + i * 5, r, h);
+			T((e) => e === a ? e : a);
 		};
 		n();
 		let r = new ResizeObserver(n);
 		return r.observe(t), () => r.disconnect();
 	}, [
-		s,
-		u,
-		m
-	]), u < 1) return null;
-	if (u === 1) return /* @__PURE__ */ c("div", {
-		ref: b,
-		className: `flex items-center justify-center gap-1 sm:gap-2 ${h}`,
-		"data-testid": g,
-		..._,
-		children: /* @__PURE__ */ c(v, {
+		c,
+		d,
+		h
+	]), d < 1) return null;
+	if (d === 1) return /* @__PURE__ */ l("div", {
+		ref: x,
+		className: e("flex items-center justify-center gap-1 sm:gap-2", g),
+		"data-testid": _,
+		...v,
+		children: /* @__PURE__ */ l(y, {
 			active: !0,
 			disabled: !0,
-			"data-testid": g ? `${g}-page-1` : void 0,
+			"data-testid": _ ? `${_}-page-1` : void 0,
 			children: "1"
 		})
 	});
-	let T = y(s, u, C);
-	return /* @__PURE__ */ l("div", {
-		ref: b,
-		className: `flex items-center justify-center gap-1 sm:gap-2 ${h}`,
-		"data-testid": g,
-		..._,
+	let E = b(c, d, w);
+	return /* @__PURE__ */ u("div", {
+		ref: x,
+		className: e("flex items-center justify-center gap-1 sm:gap-2", g),
+		"data-testid": _,
+		...v,
 		children: [
-			/* @__PURE__ */ c(v, {
-				disabled: s === 1,
-				onClick: () => d(1),
-				"data-testid": g ? `${g}-first` : void 0,
+			/* @__PURE__ */ l(y, {
+				disabled: c === 1,
+				onClick: () => f(1),
+				"data-testid": _ ? `${_}-first` : void 0,
 				"aria-label": "첫 페이지",
-				children: /* @__PURE__ */ c(n, {
+				children: /* @__PURE__ */ l(r, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ c(v, {
-				disabled: f === !1 || s === 1,
-				onClick: () => d(s - 1),
-				"data-testid": g ? `${g}-prev` : void 0,
+			/* @__PURE__ */ l(y, {
+				disabled: p === !1 || c === 1,
+				onClick: () => f(c - 1),
+				"data-testid": _ ? `${_}-prev` : void 0,
 				"aria-label": "이전 페이지",
-				children: /* @__PURE__ */ c(e, {
+				children: /* @__PURE__ */ l(t, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ c(S, {
-				currentPage: s,
-				totalPages: u,
-				pages: T,
-				onPageChange: d,
-				testId: g
+			/* @__PURE__ */ l(C, {
+				currentPage: c,
+				totalPages: d,
+				pages: E,
+				onPageChange: f,
+				testId: _
 			}),
-			/* @__PURE__ */ c(v, {
-				disabled: p === !1 || s === u,
-				onClick: () => d(s + 1),
-				"data-testid": g ? `${g}-next` : void 0,
+			/* @__PURE__ */ l(y, {
+				disabled: m === !1 || c === d,
+				onClick: () => f(c + 1),
+				"data-testid": _ ? `${_}-next` : void 0,
 				"aria-label": "다음 페이지",
-				children: /* @__PURE__ */ c(t, {
+				children: /* @__PURE__ */ l(n, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ c(v, {
-				disabled: s === u,
-				onClick: () => d(u),
-				"data-testid": g ? `${g}-last` : void 0,
+			/* @__PURE__ */ l(y, {
+				disabled: c === d,
+				onClick: () => f(d),
+				"data-testid": _ ? `${_}-last` : void 0,
 				"aria-label": "마지막 페이지",
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ l(i, {
 					className: "h-3.5 w-3.5",
 					"aria-hidden": "true"
 				})
@@ -159,4 +160,4 @@ function C({ currentPage: s, totalPages: u, onPageChange: d, hasPreviousPage: f,
 	});
 }
 //#endregion
-export { C as Pagination };
+export { w as Pagination };

package/dist/components/table/components/PaginationFooter.cjs

@@ -0,0 +1 @@
+const e=require("../../select/Select.cjs"),t=require("./KeyboardNavButton.cjs"),n=require("./PageJumpInput.cjs"),r=require("./Pagination.cjs");let i=require("react/jsx-runtime");var a=[30,50,100];function o({currentPage:o,totalPages:s,onPageChange:c,pageSize:l,pageSizeOptions:u=a,onPageSizeChange:d,hasPreviousPage:f,hasNextPage:p,totalElements:m,showTotalCount:h=!0,enablePageJump:g=!0,enableKeyboardPagination:_=!0,"data-testid":v}){let y=f??o>1,b=p??o<s,x=e=>{_&&(e.altKey||e.metaKey||e.ctrlKey||e.shiftKey||(e.key===`ArrowLeft`&&y?(e.preventDefault(),c(o-1)):e.key===`ArrowRight`&&b&&(e.preventDefault(),c(o+1))))};return(0,i.jsxs)(`nav`,{"aria-label":`페이지 네비게이션`,className:`@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 shrink-0`,children:[(0,i.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted`,children:[h&&m!==void 0&&(0,i.jsxs)(`span`,{children:[`총 `,m.toLocaleString(),`건`]}),d&&l!==void 0&&(0,i.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,i.jsx)(`span`,{className:`text-fg-muted`,children:`페이지당`}),(0,i.jsx)(`div`,{className:`w-20`,children:(0,i.jsx)(e.Select,{variant:`box`,selectSize:`mini`,value:String(l),onChange:e=>d(Number(e)),options:u.map(e=>({value:String(e),label:String(e)})),placeholder:`선택`,"data-testid":v?`${v}-page-size`:void 0})})]}),(0,i.jsx)(`div`,{className:`contents @min-[640px]/pagebar:hidden`,children:g&&s>1&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.PageJumpInput,{currentPage:o,totalPages:s,onPageChange:c,"data-testid":v?`${v}-page-jump`:void 0}),_&&(0,i.jsx)(t.KeyboardNavButton,{onKeyDown:x})]})})]}),(0,i.jsxs)(`div`,{className:`flex items-center gap-3 @min-[640px]/pagebar:flex-1 @min-[640px]/pagebar:justify-end @max-[639px]/pagebar:w-full @max-[639px]/pagebar:justify-center`,children:[(0,i.jsx)(`div`,{className:`hidden @min-[640px]/pagebar:contents`,children:g&&s>1&&(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.PageJumpInput,{currentPage:o,totalPages:s,onPageChange:c,"data-testid":v?`${v}-page-jump`:void 0}),_&&(0,i.jsx)(t.KeyboardNavButton,{onKeyDown:x})]})}),(0,i.jsx)(r.Pagination,{currentPage:o,totalPages:s,onPageChange:c,hasPreviousPage:y,hasNextPage:b,"data-testid":v?`${v}-pagination`:void 0})]})]})}exports.PaginationFooter=o;

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

@@ -17,7 +17,7 @@ function c({ currentPage: c, totalPages: l, onPageChange: u, pageSize: d, pageSi
 		"aria-label": "페이지 네비게이션",
 		className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 shrink-0",
 		children: [/* @__PURE__ */ o("div", {
-			className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-600 dark:text-neutral-300",
+			className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted",
 			children: [
 				_ && g !== void 0 && /* @__PURE__ */ o("span", { children: [
 					"총 ",
@@ -27,7 +27,7 @@ function c({ currentPage: c, totalPages: l, onPageChange: u, pageSize: d, pageSi
 				p && d !== void 0 && /* @__PURE__ */ o("div", {
 					className: "flex items-center gap-1",
 					children: [/* @__PURE__ */ a("span", {
-						className: "text-neutral-500",
+						className: "text-fg-muted",
 						children: "페이지당"
 					}), /* @__PURE__ */ a("div", {
 						className: "w-20",

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 };

package/dist/components/table/components/SortableHeaderCell.cjs

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime"),n=require("@dnd-kit/sortable"),r=require("@dnd-kit/utilities");var i=(0,e.createContext)(null),a=()=>(0,e.useContext)(i);function o({id:a,disabled:o=!1,as:s=`div`,colSpan:c,rowSpan:l,"aria-sort":u,hasSortButton:d=!1,className:f,style:p,children:m}){let{setNodeRef:h,setActivatorNodeRef:g,attributes:_,listeners:v,transform:y,transition:b,isDragging:x}=(0,n.useSortable)({id:a,disabled:o}),S=(0,e.useId)(),C=!o&&d?{setActivatorNodeRef:g,descriptionId:S,onKeyDown:e=>{x||!e.shiftKey&&(e.code===`Space`||e.code===`Enter`)&&e.stopPropagation()}}:null,w={...p,transform:r.CSS.Translate.toString(y),transition:b,opacity:x?.5:1,cursor:o?void 0:`grab`},T=s,E=s===`th`?{...c===void 0?{}:{colSpan:c},...l===void 0?{}:{rowSpan:l}}:{};return(0,t.jsx)(i.Provider,{value:C,children:(0,t.jsxs)(T,{ref:h,className:f,style:w,...E,...o?{}:d?{..._,tabIndex:void 0,"aria-roledescription":void 0,"aria-describedby":void 0,"aria-disabled":void 0,"aria-pressed":void 0}:_,...o?{}:v,onKeyDown:o?void 0:e=>{(!d||e.code===`Space`)&&v?.onKeyDown?.(e)},role:s===`th`?`columnheader`:o?void 0:_.role,"aria-sort":u,children:[m,C&&(0,t.jsx)(`span`,{id:S,"aria-hidden":`true`,className:`sr-only`,children:`Shift+Space로 컬럼 이동을 시작하고 화살표로 이동한 뒤 Space 또는 Enter로 놓습니다.`})]})})}exports.SortableHeaderCell=o,exports.useSortableHeaderKeyboardDrag=a;

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

@@ -1,4 +1,10 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, KeyboardEvent, ReactNode } from 'react';
+interface SortableHeaderKeyboardDrag {
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    descriptionId: string;
+    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
+}
+export declare const useSortableHeaderKeyboardDrag: () => SortableHeaderKeyboardDrag | null;
 interface SortableHeaderCellProps {
     id: string;
     /**
@@ -14,6 +20,8 @@ interface SortableHeaderCellProps {
     colSpan?: number;
     /** `as="th"`일 때만 의미. 그룹과 평면 컬럼이 섞일 때 평면 컬럼은 rowSpan=2. */
     rowSpan?: number;
+    "aria-sort"?: "ascending" | "descending";
+    hasSortButton?: boolean;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
@@ -23,5 +31,5 @@ interface SortableHeaderCellProps {
  * 5px 임계는 부모 DndContext의 PointerSensor에서 처리해서, 헤더 클릭(정렬)이나
  * 리사이즈 핸들 mousedown은 방해하지 않아요.
  */
-export declare function SortableHeaderCell({ id, disabled, as, colSpan, rowSpan, className, style, children, }: SortableHeaderCellProps): import("react").JSX.Element;
+export declare function SortableHeaderCell({ id, disabled, as, colSpan, rowSpan, "aria-sort": ariaSort, hasSortButton, className, style, children, }: SortableHeaderCellProps): import("react").JSX.Element;
 export {};

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

@@ -1,30 +1,58 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useSortable as t } from "@dnd-kit/sortable";
-import { CSS as n } from "@dnd-kit/utilities";
+import { createContext as e, useContext as t, useId as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useSortable as a } from "@dnd-kit/sortable";
+import { CSS as o } from "@dnd-kit/utilities";
 //#region src/components/table/components/SortableHeaderCell.tsx
-function r({ id: r, disabled: i = !1, as: a = "div", colSpan: o, rowSpan: s, className: c, style: l, children: u }) {
-	let { setNodeRef: d, attributes: f, listeners: p, transform: m, transition: h, isDragging: g } = t({
-		id: r,
-		disabled: i
-	});
-	return /* @__PURE__ */ e(a, {
-		ref: d,
-		className: c,
-		style: {
-			...l,
-			transform: n.Translate.toString(m),
-			transition: h,
-			opacity: g ? .5 : 1,
-			cursor: i ? void 0 : "grab"
-		},
-		...a === "th" ? {
-			...o === void 0 ? {} : { colSpan: o },
-			...s === void 0 ? {} : { rowSpan: s }
-		} : {},
-		...i ? {} : f,
-		...i ? {} : p,
-		children: u
+var s = e(null), c = () => t(s);
+function l({ id: e, disabled: t = !1, as: c = "div", colSpan: l, rowSpan: u, "aria-sort": d, hasSortButton: f = !1, className: p, style: m, children: h }) {
+	let { setNodeRef: g, setActivatorNodeRef: _, attributes: v, listeners: y, transform: b, transition: x, isDragging: S } = a({
+		id: e,
+		disabled: t
+	}), C = n(), w = !t && f ? {
+		setActivatorNodeRef: _,
+		descriptionId: C,
+		onKeyDown: (e) => {
+			S || !e.shiftKey && (e.code === "Space" || e.code === "Enter") && e.stopPropagation();
+		}
+	} : null, T = {
+		...m,
+		transform: o.Translate.toString(b),
+		transition: x,
+		opacity: S ? .5 : 1,
+		cursor: t ? void 0 : "grab"
+	}, E = c, D = c === "th" ? {
+		...l === void 0 ? {} : { colSpan: l },
+		...u === void 0 ? {} : { rowSpan: u }
+	} : {};
+	return /* @__PURE__ */ r(s.Provider, {
+		value: w,
+		children: /* @__PURE__ */ i(E, {
+			ref: g,
+			className: p,
+			style: T,
+			...D,
+			...t ? {} : f ? {
+				...v,
+				tabIndex: void 0,
+				"aria-roledescription": void 0,
+				"aria-describedby": void 0,
+				"aria-disabled": void 0,
+				"aria-pressed": void 0
+			} : v,
+			...t ? {} : y,
+			onKeyDown: t ? void 0 : (e) => {
+				(!f || e.code === "Space") && y?.onKeyDown?.(e);
+			},
+			role: c === "th" ? "columnheader" : t ? void 0 : v.role,
+			"aria-sort": d,
+			children: [h, w && /* @__PURE__ */ r("span", {
+				id: C,
+				"aria-hidden": "true",
+				className: "sr-only",
+				children: "Shift+Space로 컬럼 이동을 시작하고 화살표로 이동한 뒤 Space 또는 Enter로 놓습니다."
+			})]
+		})
 	});
 }
 //#endregion
-export { r as SortableHeaderCell };
+export { l as SortableHeaderCell, c as useSortableHeaderKeyboardDrag };

package/dist/components/table/hooks/sort-state.cjs

@@ -0,0 +1 @@
+function e(e,t,n=`tri`){return e?.key!==t||e.direction===null?{key:t,direction:`asc`}:e.direction===`asc`?{key:t,direction:`desc`}:n===`toggle`?{key:t,direction:`asc`}:null}function t(e,t){return e?.key===t?e.direction:null}function n(e){return e===`asc`?`ascending`:e===`desc`?`descending`:void 0}exports.ariaSort=n,exports.nextSort=e,exports.sortDirectionFor=t;

package/dist/components/table/hooks/sort-state.d.ts

@@ -0,0 +1,5 @@
+import { ColumnSort, SortDirection } from '../types.js';
+export type SortCycle = "tri" | "toggle";
+export declare function nextSort(current: ColumnSort | null, key: string, cycle?: SortCycle): ColumnSort | null;
+export declare function sortDirectionFor(sort: ColumnSort | null, key: string): SortDirection;
+export declare function ariaSort(direction: SortDirection): "ascending" | "descending" | undefined;

package/dist/components/table/hooks/sort-state.esm.js

@@ -0,0 +1,21 @@
+//#region src/components/table/hooks/sort-state.ts
+function e(e, t, n = "tri") {
+	return e?.key !== t || e.direction === null ? {
+		key: t,
+		direction: "asc"
+	} : e.direction === "asc" ? {
+		key: t,
+		direction: "desc"
+	} : n === "toggle" ? {
+		key: t,
+		direction: "asc"
+	} : null;
+}
+function t(e, t) {
+	return e?.key === t ? e.direction : null;
+}
+function n(e) {
+	return e === "asc" ? "ascending" : e === "desc" ? "descending" : void 0;
+}
+//#endregion
+export { n as ariaSort, e as nextSort, t as sortDirectionFor };

package/dist/components/table/hooks/useColumnPresets.cjs

@@ -0,0 +1 @@
+const e=require("../column-group-utils.cjs"),t=require("../../../lib/column-preset-storage.cjs");let n=require("react");function r(e,t){let n=new Set(t),r=new Set(e),i=e.filter(e=>n.has(e)),a=t.filter(e=>!r.has(e)),o=[...i,...a];if(o.length===e.length){let t=!0;for(let n=0;n<o.length;n++)if(o[n]!==e[n]){t=!1;break}if(t)return e}return o}function i(e,t){return!e||e.columnOrder.length===0?{columnOrder:t,hiddenColumns:[],columnWidths:e?.columnWidths??{}}:{columnOrder:r(e.columnOrder,t),hiddenColumns:e.hiddenColumns??[],columnWidths:e.columnWidths??{}}}function a(e,t){if(e.columnOrder.length!==t.columnOrder.length)return!1;for(let n=0;n<e.columnOrder.length;n++)if(e.columnOrder[n]!==t.columnOrder[n])return!1;if(e.hiddenColumns.length!==t.hiddenColumns.length)return!1;let n=new Set(t.hiddenColumns);for(let t of e.hiddenColumns)if(!n.has(t))return!1;let r=Object.keys(e.columnWidths),i=Object.keys(t.columnWidths);if(r.length!==i.length)return!1;for(let n of r)if(e.columnWidths[n]!==t.columnWidths[n])return!1;return!0}function o({pageKey:o,columns:s,columnGroups:c,legacyStorageKey:l}){let u=(0,n.useMemo)(()=>e.getDefaultSlotOrder(e.buildColumnSlots(s,c)),[s,c]),[d,f]=(0,n.useState)(1),[p,m]=(0,n.useState)(u),[h,g]=(0,n.useState)([]),[_,v]=(0,n.useState)({}),[y,b]=(0,n.useState)({columnOrder:u,hiddenColumns:[],columnWidths:{}}),x=(0,n.useCallback)(e=>{b(e),m(e.columnOrder),g(e.hiddenColumns),v(e.columnWidths)},[]),S=(0,n.useRef)(void 0),C=(0,n.useRef)(l);return C.current=l,(0,n.useEffect)(()=>{if(!o){S.current=o,f(1),x({columnOrder:u,hiddenColumns:[],columnWidths:{}});return}let e=S.current!==o;if(S.current=o,e){let e=C.current;e&&t.ColumnPresetStorage.migrateFromLegacyStorage(o,e);let n=t.ColumnPresetStorage.getActivePreset(o),r=i(t.ColumnPresetStorage.getPresetColumns(o,n),u);f(n),x(r);return}m(e=>r(e,u)),b(e=>{let t=r(e.columnOrder,u);return t===e.columnOrder?e:{...e,columnOrder:t}})},[x,u,o]),{activePreset:d,columnOrder:p,hiddenColumns:h,columnWidths:_,isDirty:(0,n.useMemo)(()=>!a({columnOrder:p,hiddenColumns:h,columnWidths:_},y),[p,h,_,y]),hasPreset:(0,n.useCallback)(e=>o?t.ColumnPresetStorage.hasPreset(o,e):!1,[o]),applyPreset:(0,n.useCallback)(e=>{if(f(e),!o){x({columnOrder:u,hiddenColumns:[],columnWidths:{}});return}t.ColumnPresetStorage.setActivePreset(o,e),x(i(t.ColumnPresetStorage.getPresetColumns(o,e),u))},[x,u,o]),saveActivePreset:(0,n.useCallback)(()=>!o||p.length===0?!1:(t.ColumnPresetStorage.savePreset(o,d,{columnOrder:p,hiddenColumns:h,columnWidths:_}),b({columnOrder:p,hiddenColumns:h,columnWidths:_}),!0),[d,p,_,h,o]),saveAsPreset:(0,n.useCallback)(e=>o?p.length===0?!1:(t.ColumnPresetStorage.savePreset(o,e,{columnOrder:p,hiddenColumns:h,columnWidths:_}),t.ColumnPresetStorage.setActivePreset(o,e),f(e),b({columnOrder:p,hiddenColumns:h,columnWidths:_}),!0):(f(e),!1),[p,_,h,o]),resetActivePreset:(0,n.useCallback)(()=>{o&&t.ColumnPresetStorage.clearPreset(o,d),x({columnOrder:u,hiddenColumns:[],columnWidths:{}})},[d,x,u,o]),setColumnOrder:(0,n.useCallback)(e=>{m(e)},[]),setHiddenColumns:(0,n.useCallback)(e=>{g(e)},[]),setColumnWidths:(0,n.useCallback)(e=>{v(e)},[]),setColumnWidth:(0,n.useCallback)((e,t)=>{v(n=>{let r={...n};return t>0?r[e]=t:delete r[e],r})},[])}}exports.useColumnPresets=o;

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

@@ -1,5 +1,5 @@
-import { PresetNumber } from '../../../../lib/column-preset-storage';
-import { TableColumn, TableColumnGroupMeta } from '../types';
+import { PresetNumber } from '../../../lib/column-preset-storage.js';
+import { TableColumn, TableColumnGroupMeta } from '../types.js';
 export interface UseColumnPresetsOptions<T> {
     /** localStorage 페이지 키. 미지정 시 메모리만 사용. */
     pageKey?: string;

package/dist/components/table/hooks/useColumnResize.cjs

@@ -0,0 +1 @@
+let e=require("react");function t(e,t,n,r){if(e)return e;let i=t?.style.width.trim();if(i&&/^(?:\d+\.?\d*|\.\d+)px$/i.test(i)){let e=parseFloat(i);if(Number.isFinite(e))return e}let a=t?.getBoundingClientRect().width;if(a&&Number.isFinite(a)&&a>0)return a;let o=n?.getBoundingClientRect().width;return o&&Number.isFinite(o)&&o>0?o:r}function n({columns:n,defaultWidth:r=150,minWidth:i=50,maxWidth:a,tableRef:o,storageKey:s,controlledWidths:c,onColumnWidthsChange:l}){let u=c!==void 0,d=(0,e.useCallback)(()=>{if(u||!s)return{};try{let e=localStorage.getItem(s);if(e){let t=JSON.parse(e),n={};return Object.entries(t).forEach(([e,t])=>{typeof t==`number`&&t>=i&&(n[e]=t)}),n}}catch(e){console.warn(`[ColumnResize] Failed to load saved widths:`,e)}return{}},[u,s,i]),[f,p]=(0,e.useState)(()=>d()),m=u?c:f,h=(0,e.useCallback)(e=>{if(u){let t=typeof e==`function`?e(m):e;l?.(t);return}p(e)},[m,u,l]);(0,e.useEffect)(()=>{if(!u&&!(!s||Object.keys(f).length===0))try{localStorage.setItem(s,JSON.stringify(f))}catch(e){console.warn(`[ColumnResize] Failed to save widths:`,e)}},[f,u,s]);let g=(0,e.useRef)(null),_=(0,e.useRef)(null),v=(0,e.useCallback)(e=>{if(typeof e==`string`)return e;if(typeof e==`number`)return String(e);if(e==null)return``;if(Array.isArray(e))return e.map(e=>v(e)).join(``);if(typeof e==`object`&&`props`in e){let t=e.props;if(t?.children)return v(t.children)}return``},[]),y=(0,e.useCallback)(e=>{if(!_.current)return r;let t=n.find(t=>t.key===e)?.header,a=typeof t==`string`?t:v(t);_.current.textContent=a||e,_.current.style.fontSize=`14px`,_.current.style.fontWeight=`600`,_.current.style.padding=`0 24px`;let o=_.current.offsetWidth;return Math.max(i,o+20)},[n,v,r,i]);return{columnWidths:m,handleMouseDown:(0,e.useCallback)((e,n)=>{n.preventDefault(),n.stopPropagation();let s=o?.current?.querySelector(`colgroup col[data-col-key="${CSS.escape(e)}"]`)??null,c=t(m[e],s,n.currentTarget.closest(`th`),r);g.current={key:e,startX:n.clientX,startWidth:c};let l=o?.current??null,u=(l?parseFloat(l.style.width)||l.offsetWidth:0)-c,d=l?.parentElement?.clientWidth||1/0,f=Math.min(a??1/0,d),p=c,_=null,v=e=>{if(!g.current)return;let t=e.clientX-g.current.startX,n=Math.max(i,g.current.startWidth+t);p=Math.max(i,Math.min(n,f)),_===null&&(_=requestAnimationFrame(()=>{_=null,s&&(s.style.width=`${p}px`),l&&(l.style.width=`${u+p}px`)}))},y=()=>{_!==null&&cancelAnimationFrame(_);let e=g.current?.key;g.current=null,document.removeEventListener(`mousemove`,v),document.removeEventListener(`mouseup`,y),e&&h(t=>({...t,[e]:p}))};document.addEventListener(`mousemove`,v),document.addEventListener(`mouseup`,y)},[m,r,i,a,o,h]),handleDoubleClick:(0,e.useCallback)(()=>{},[]),getColumnWidth:(0,e.useCallback)((e,t)=>m[e]?`${m[e]}px`:t?typeof t==`number`?`${t}px`:t:`${y(e)}px`,[m,y]),measureRef:_}}exports.useColumnResize=n;

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

@@ -81,6 +81,18 @@ export interface UseColumnResizeReturn {
      */
     measureRef: React.RefObject<HTMLDivElement | null>;
 }
+export declare function getResizeStartWidth(savedWidth: number | undefined, colEl: {
+    style: {
+        width: string;
+    };
+    getBoundingClientRect: () => {
+        width: number;
+    };
+} | null, headerEl: {
+    getBoundingClientRect: () => {
+        width: number;
+    };
+} | null, defaultWidth: number): number;
 /**
  * 컬럼 리사이즈 훅
  *