@thewrong/ui 0.2.0 → 0.3.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/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;
 /**
  * 컬럼 리사이즈 훅
  *

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

@@ -1,14 +1,26 @@
 import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
 //#region src/components/table/hooks/useColumnResize.ts
-function i({ columns: i, defaultWidth: a = 150, minWidth: o = 50, maxWidth: s, tableRef: c, storageKey: l, controlledWidths: u, onColumnWidthsChange: d }) {
-	let f = u !== void 0, p = e(() => {
-		if (f || !l) return {};
+function i(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 a({ columns: a, defaultWidth: o = 150, minWidth: s = 50, maxWidth: c, tableRef: l, storageKey: u, controlledWidths: d, onColumnWidthsChange: f }) {
+	let p = d !== void 0, m = e(() => {
+		if (p || !u) return {};
 		try {
-			let e = localStorage.getItem(l);
+			let e = localStorage.getItem(u);
 			if (e) {
 				let t = JSON.parse(e), n = {};
 				return Object.entries(t).forEach(([e, t]) => {
-					typeof t == "number" && t >= o && (n[e] = t);
+					typeof t == "number" && t >= s && (n[e] = t);
 				}), n;
 			}
 		} catch (e) {
@@ -16,91 +28,91 @@ function i({ columns: i, defaultWidth: a = 150, minWidth: o = 50, maxWidth: s, t
 		}
 		return {};
 	}, [
-		f,
-		l,
-		o
-	]), [m, h] = r(() => p()), g = f ? u : m, _ = e((e) => {
-		if (f) {
-			let t = typeof e == "function" ? e(g) : e;
-			d?.(t);
+		p,
+		u,
+		s
+	]), [h, g] = r(() => m()), _ = p ? d : h, v = e((e) => {
+		if (p) {
+			let t = typeof e == "function" ? e(_) : e;
+			f?.(t);
 			return;
 		}
-		h(e);
+		g(e);
 	}, [
-		g,
-		f,
-		d
+		_,
+		p,
+		f
 	]);
 	t(() => {
-		if (!f && !(!l || Object.keys(m).length === 0)) try {
-			localStorage.setItem(l, JSON.stringify(m));
+		if (!p && !(!u || Object.keys(h).length === 0)) try {
+			localStorage.setItem(u, JSON.stringify(h));
 		} catch (e) {
 			console.warn("[ColumnResize] Failed to save widths:", e);
 		}
 	}, [
-		m,
-		f,
-		l
+		h,
+		p,
+		u
 	]);
-	let v = n(null), y = n(null), b = e((e) => {
+	let y = n(null), b = n(null), x = e((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) => b(e)).join("");
+		if (Array.isArray(e)) return e.map((e) => x(e)).join("");
 		if (typeof e == "object" && "props" in e) {
 			let t = e.props;
-			if (t?.children) return b(t.children);
+			if (t?.children) return x(t.children);
 		}
 		return "";
-	}, []), x = e((e) => {
-		if (!y.current) return a;
-		let t = i.find((t) => t.key === e)?.header, n = typeof t == "string" ? t : b(t);
-		y.current.textContent = n || e, y.current.style.fontSize = "14px", y.current.style.fontWeight = "600", y.current.style.padding = "0 24px";
-		let r = y.current.offsetWidth;
-		return Math.max(o, r + 20);
+	}, []), S = e((e) => {
+		if (!b.current) return o;
+		let t = a.find((t) => t.key === e)?.header, n = typeof t == "string" ? t : x(t);
+		b.current.textContent = n || e, b.current.style.fontSize = "14px", b.current.style.fontWeight = "600", b.current.style.padding = "0 24px";
+		let r = b.current.offsetWidth;
+		return Math.max(s, r + 20);
 	}, [
-		i,
-		b,
 		a,
-		o
+		x,
+		o,
+		s
 	]);
 	return {
-		columnWidths: g,
+		columnWidths: _,
 		handleMouseDown: e((e, t) => {
 			t.preventDefault(), t.stopPropagation();
-			let n = g[e] || a;
-			v.current = {
+			let n = l?.current?.querySelector(`colgroup col[data-col-key="${CSS.escape(e)}"]`) ?? null, r = i(_[e], n, t.currentTarget.closest("th"), o);
+			y.current = {
 				key: e,
 				startX: t.clientX,
-				startWidth: n
+				startWidth: r
 			};
-			let r = c?.current?.querySelector(`colgroup col[data-col-key="${CSS.escape(e)}"]`) ?? null, i = c?.current ?? null, l = (i ? parseFloat(i.style.width) || i.offsetWidth : 0) - n, u = i?.parentElement?.clientWidth || Infinity, d = Math.min(s ?? Infinity, u), f = n, p = null, m = (e) => {
-				if (!v.current) return;
-				let t = e.clientX - v.current.startX, n = Math.max(o, v.current.startWidth + t);
-				f = Math.max(o, Math.min(n, d)), p === null && (p = requestAnimationFrame(() => {
-					p = null, r && (r.style.width = `${f}px`), i && (i.style.width = `${l + f}px`);
+			let a = l?.current ?? null, u = (a ? parseFloat(a.style.width) || a.offsetWidth : 0) - r, d = a?.parentElement?.clientWidth || Infinity, f = Math.min(c ?? Infinity, d), p = r, m = null, h = (e) => {
+				if (!y.current) return;
+				let t = e.clientX - y.current.startX, r = Math.max(s, y.current.startWidth + t);
+				p = Math.max(s, Math.min(r, f)), m === null && (m = requestAnimationFrame(() => {
+					m = null, n && (n.style.width = `${p}px`), a && (a.style.width = `${u + p}px`);
 				}));
-			}, h = () => {
-				p !== null && cancelAnimationFrame(p);
-				let e = v.current?.key;
-				v.current = null, document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", h), e && _((t) => ({
+			}, g = () => {
+				m !== null && cancelAnimationFrame(m);
+				let e = y.current?.key;
+				y.current = null, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", g), e && v((t) => ({
 					...t,
-					[e]: f
+					[e]: p
 				}));
 			};
-			document.addEventListener("mousemove", m), document.addEventListener("mouseup", h);
+			document.addEventListener("mousemove", h), document.addEventListener("mouseup", g);
 		}, [
-			g,
-			a,
+			_,
 			o,
 			s,
 			c,
-			_
+			l,
+			v
 		]),
 		handleDoubleClick: e(() => {}, []),
-		getColumnWidth: e((e, t) => g[e] ? `${g[e]}px` : t ? typeof t == "number" ? `${t}px` : t : `${x(e)}px`, [g, x]),
-		measureRef: y
+		getColumnWidth: e((e, t) => _[e] ? `${_[e]}px` : t ? typeof t == "number" ? `${t}px` : t : `${S(e)}px`, [_, S]),
+		measureRef: b
 	};
 }
 //#endregion
-export { i as useColumnResize };
+export { a as useColumnResize };

package/dist/components/table/hooks/useFillEmptyRows.d.ts

@@ -0,0 +1,2 @@
+export { useFillEmptyRows } from '../../../hooks/useFillEmptyRows.js';
+export type { FillEmptyRowsRemainingMode, UseFillEmptyRowsOptions, UseFillEmptyRowsReturn, } from '../../../hooks/useFillEmptyRows.js';

package/dist/components/table/hooks/useInfiniteScroll.d.ts

@@ -0,0 +1,2 @@
+export { useInfiniteScroll } from '../../../hooks/useInfiniteScroll.js';
+export type { UseInfiniteScrollOptions, UseInfiniteScrollReturn, } from '../../../hooks/useInfiniteScroll.js';

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

@@ -0,0 +1 @@
+const e=require("../components/ColumnPresetSelector.cjs"),t=require("./useColumnPresets.cjs");let n=require("react"),r=require("react/jsx-runtime");function i({pageKey:i,columns:a,columnGroups:o,showSelector:s=!0,selectorClassName:c}){let l=t.useColumnPresets({pageKey:i,columns:a,columnGroups:o});return{columnState:(0,n.useMemo)(()=>({columnOrder:l.columnOrder,hiddenColumns:l.hiddenColumns,columnWidths:l.columnWidths,onColumnOrderChange:l.setColumnOrder,onColumnWidthsChange:l.setColumnWidths}),[l.columnOrder,l.hiddenColumns,l.columnWidths,l.setColumnOrder,l.setColumnWidths]),selector:s&&i?(0,r.jsx)(e.ColumnPresetSelector,{columns:a,columnGroups:o,activePreset:l.activePreset,columnOrder:l.columnOrder,hiddenColumns:l.hiddenColumns,columnWidths:l.columnWidths,isDirty:l.isDirty,hasPreset:l.hasPreset,onApplyPreset:l.applyPreset,onSaveActivePreset:l.saveActivePreset,onResetActivePreset:l.resetActivePreset,onColumnOrderChange:l.setColumnOrder,onHiddenColumnsChange:l.setHiddenColumns,onSetColumnWidth:l.setColumnWidth,className:c}):null}}exports.useTableColumnState=i;

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { TableColumn, TableColumnGroupMeta, TableColumnState } from '../types';
+import { TableColumn, TableColumnGroupMeta, TableColumnState } from '../types.js';
 interface Options<T> {
     /** localStorage 페이지 키. 없으면 프리셋 비활성(컬럼 상태는 메모리만). */
     pageKey?: string;

package/dist/components/table/hooks/useTableDragSelection.d.ts

@@ -0,0 +1,2 @@
+export { useTableDragSelection } from '../../../hooks/useTableDragSelection.js';
+export type { UseTableDragSelectionOptions } from '../../../hooks/useTableDragSelection.js';

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

@@ -1,4 +1,4 @@
-import { ColumnSort } from '../types';
+import { ColumnSort } from '../types.js';
 /**
  * 테이블 정렬 훅 옵션
  */

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useVirtualRows.cjs");let t=require("react");function n({count:n,estimateSize:r=50,overscan:i=5,scrollElement:a}){let o=(0,t.useRef)(null),{virtualizer:s}=e.useVirtualRows({count:n,scrollElementRef:o,scrollElement:a,estimateSize:r,overscan:i});return(0,t.useMemo)(()=>({virtualizer:s,parentRef:o}),[s])}exports.useVirtualTable=n;