@thewrong/ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,163 @@
+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 d = [
+	9,
+	7,
+	5,
+	3,
+	1
+], 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": t ? "page" : void 0,
+		className: e(m, t ? g : h, _, v, n),
+		...i,
+		children: r
+	});
+}
+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 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) + f * 2 + 24;
+}
+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 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__ */ 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__ */ l("span", {
+			className: p,
+			children: "…"
+		})] }),
+		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__ */ u(c, { children: [n[n.length - 1] < t - 1 && /* @__PURE__ */ l("span", {
+			className: p,
+			children: "…"
+		}), /* @__PURE__ */ l(y, {
+			active: e === t,
+			onClick: () => r(t),
+			"data-testid": i ? `${i}-page-${t}` : void 0,
+			children: t
+		})] })
+	] });
+}
+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 = 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();
+	}, [
+		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": _ ? `${_}-page-1` : void 0,
+			children: "1"
+		})
+	});
+	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__ */ l(y, {
+				disabled: c === 1,
+				onClick: () => f(1),
+				"data-testid": _ ? `${_}-first` : void 0,
+				"aria-label": "첫 페이지",
+				children: /* @__PURE__ */ l(r, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ l(y, {
+				disabled: p === !1 || c === 1,
+				onClick: () => f(c - 1),
+				"data-testid": _ ? `${_}-prev` : void 0,
+				"aria-label": "이전 페이지",
+				children: /* @__PURE__ */ l(t, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ l(C, {
+				currentPage: c,
+				totalPages: d,
+				pages: E,
+				onPageChange: f,
+				testId: _
+			}),
+			/* @__PURE__ */ l(y, {
+				disabled: m === !1 || c === d,
+				onClick: () => f(c + 1),
+				"data-testid": _ ? `${_}-next` : void 0,
+				"aria-label": "다음 페이지",
+				children: /* @__PURE__ */ l(n, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			}),
+			/* @__PURE__ */ l(y, {
+				disabled: c === d,
+				onClick: () => f(d),
+				"data-testid": _ ? `${_}-last` : void 0,
+				"aria-label": "마지막 페이지",
+				children: /* @__PURE__ */ l(i, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+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

@@ -0,0 +1,80 @@
+import { Select as e } from "../../select/Select.esm.js";
+import { KeyboardNavButton as t } from "./KeyboardNavButton.esm.js";
+import { PageJumpInput as n } from "./PageJumpInput.esm.js";
+import { Pagination as r } from "./Pagination.esm.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/table/components/PaginationFooter.tsx
+var s = [
+	30,
+	50,
+	100
+];
+function c({ currentPage: c, totalPages: l, onPageChange: u, pageSize: d, pageSizeOptions: f = s, onPageSizeChange: p, hasPreviousPage: m, hasNextPage: h, totalElements: g, showTotalCount: _ = !0, enablePageJump: v = !0, enableKeyboardPagination: y = !0, "data-testid": b }) {
+	let x = m ?? c > 1, S = h ?? c < l, C = (e) => {
+		y && (e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && x ? (e.preventDefault(), u(c - 1)) : e.key === "ArrowRight" && S && (e.preventDefault(), u(c + 1))));
+	};
+	return /* @__PURE__ */ o("nav", {
+		"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-fg-muted",
+			children: [
+				_ && g !== void 0 && /* @__PURE__ */ o("span", { children: [
+					"총 ",
+					g.toLocaleString(),
+					"건"
+				] }),
+				p && d !== void 0 && /* @__PURE__ */ o("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ a("span", {
+						className: "text-fg-muted",
+						children: "페이지당"
+					}), /* @__PURE__ */ a("div", {
+						className: "w-20",
+						children: /* @__PURE__ */ a(e, {
+							variant: "box",
+							selectSize: "mini",
+							value: String(d),
+							onChange: (e) => p(Number(e)),
+							options: f.map((e) => ({
+								value: String(e),
+								label: String(e)
+							})),
+							placeholder: "선택",
+							"data-testid": b ? `${b}-page-size` : void 0
+						})
+					})]
+				}),
+				/* @__PURE__ */ a("div", {
+					className: "contents @min-[640px]/pagebar:hidden",
+					children: v && l > 1 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+						currentPage: c,
+						totalPages: l,
+						onPageChange: u,
+						"data-testid": b ? `${b}-page-jump` : void 0
+					}), y && /* @__PURE__ */ a(t, { onKeyDown: C })] })
+				})
+			]
+		}), /* @__PURE__ */ o("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: [/* @__PURE__ */ a("div", {
+				className: "hidden @min-[640px]/pagebar:contents",
+				children: v && l > 1 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
+					currentPage: c,
+					totalPages: l,
+					onPageChange: u,
+					"data-testid": b ? `${b}-page-jump` : void 0
+				}), y && /* @__PURE__ */ a(t, { onKeyDown: C })] })
+			}), /* @__PURE__ */ a(r, {
+				currentPage: c,
+				totalPages: l,
+				onPageChange: u,
+				hasPreviousPage: x,
+				hasNextPage: S,
+				"data-testid": b ? `${b}-pagination` : void 0
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as PaginationFooter };

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

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime"),t=require("@dnd-kit/sortable"),n=require("@dnd-kit/utilities");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}=(0,t.useSortable)({id:r,disabled:i});return(0,e.jsx)(a,{ref:d,className:c,style:{...l,transform:n.CSS.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})}exports.SortableHeaderCell=r;

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

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useSortable as t } from "@dnd-kit/sortable";
+import { CSS as n } 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
+	});
+}
+//#endregion
+export { r as SortableHeaderCell };

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/useColumnPresets.esm.js

@@ -0,0 +1,165 @@
+import { buildColumnSlots as e, getDefaultSlotOrder as t } from "../column-group-utils.esm.js";
+import { ColumnPresetStorage as n } from "../../../lib/column-preset-storage.esm.js";
+import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+//#region src/components/table/hooks/useColumnPresets.ts
+function c(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 l(e, t) {
+	return !e || e.columnOrder.length === 0 ? {
+		columnOrder: t,
+		hiddenColumns: [],
+		columnWidths: e?.columnWidths ?? {}
+	} : {
+		columnOrder: c(e.columnOrder, t),
+		hiddenColumns: e.hiddenColumns ?? [],
+		columnWidths: e.columnWidths ?? {}
+	};
+}
+function u(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 d({ pageKey: d, columns: f, columnGroups: p, legacyStorageKey: m }) {
+	let h = a(() => t(e(f, p)), [f, p]), [g, _] = s(1), [v, y] = s(h), [b, x] = s([]), [S, C] = s({}), [w, T] = s({
+		columnOrder: h,
+		hiddenColumns: [],
+		columnWidths: {}
+	}), E = r((e) => {
+		T(e), y(e.columnOrder), x(e.hiddenColumns), C(e.columnWidths);
+	}, []), D = o(void 0), O = o(m);
+	return O.current = m, i(() => {
+		if (!d) {
+			D.current = d, _(1), E({
+				columnOrder: h,
+				hiddenColumns: [],
+				columnWidths: {}
+			});
+			return;
+		}
+		let e = D.current !== d;
+		if (D.current = d, e) {
+			let e = O.current;
+			e && n.migrateFromLegacyStorage(d, e);
+			let t = n.getActivePreset(d), r = l(n.getPresetColumns(d, t), h);
+			_(t), E(r);
+			return;
+		}
+		y((e) => c(e, h)), T((e) => {
+			let t = c(e.columnOrder, h);
+			return t === e.columnOrder ? e : {
+				...e,
+				columnOrder: t
+			};
+		});
+	}, [
+		E,
+		h,
+		d
+	]), {
+		activePreset: g,
+		columnOrder: v,
+		hiddenColumns: b,
+		columnWidths: S,
+		isDirty: a(() => !u({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}, w), [
+			v,
+			b,
+			S,
+			w
+		]),
+		hasPreset: r((e) => d ? n.hasPreset(d, e) : !1, [d]),
+		applyPreset: r((e) => {
+			if (_(e), !d) {
+				E({
+					columnOrder: h,
+					hiddenColumns: [],
+					columnWidths: {}
+				});
+				return;
+			}
+			n.setActivePreset(d, e), E(l(n.getPresetColumns(d, e), h));
+		}, [
+			E,
+			h,
+			d
+		]),
+		saveActivePreset: r(() => !d || v.length === 0 ? !1 : (n.savePreset(d, g, {
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), T({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), !0), [
+			g,
+			v,
+			S,
+			b,
+			d
+		]),
+		saveAsPreset: r((e) => d ? v.length === 0 ? !1 : (n.savePreset(d, e, {
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), n.setActivePreset(d, e), _(e), T({
+			columnOrder: v,
+			hiddenColumns: b,
+			columnWidths: S
+		}), !0) : (_(e), !1), [
+			v,
+			S,
+			b,
+			d
+		]),
+		resetActivePreset: r(() => {
+			d && n.clearPreset(d, g), E({
+				columnOrder: h,
+				hiddenColumns: [],
+				columnWidths: {}
+			});
+		}, [
+			g,
+			E,
+			h,
+			d
+		]),
+		setColumnOrder: r((e) => {
+			y(e);
+		}, []),
+		setHiddenColumns: r((e) => {
+			x(e);
+		}, []),
+		setColumnWidths: r((e) => {
+			C(e);
+		}, []),
+		setColumnWidth: r((e, t) => {
+			C((n) => {
+				let r = { ...n };
+				return t > 0 ? r[e] = t : delete r[e], r;
+			});
+		}, [])
+	};
+}
+//#endregion
+export { d as useColumnPresets };

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

@@ -0,0 +1,118 @@
+import { useCallback as e, useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/table/hooks/useColumnResize.ts
+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(u);
+			if (e) {
+				let t = JSON.parse(e), n = {};
+				return Object.entries(t).forEach(([e, t]) => {
+					typeof t == "number" && t >= s && (n[e] = t);
+				}), n;
+			}
+		} catch (e) {
+			console.warn("[ColumnResize] Failed to load saved widths:", e);
+		}
+		return {};
+	}, [
+		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;
+		}
+		g(e);
+	}, [
+		_,
+		p,
+		f
+	]);
+	t(() => {
+		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);
+		}
+	}, [
+		h,
+		p,
+		u
+	]);
+	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) => x(e)).join("");
+		if (typeof e == "object" && "props" in e) {
+			let t = e.props;
+			if (t?.children) return x(t.children);
+		}
+		return "";
+	}, []), 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);
+	}, [
+		a,
+		x,
+		o,
+		s
+	]);
+	return {
+		columnWidths: _,
+		handleMouseDown: e((e, t) => {
+			t.preventDefault(), t.stopPropagation();
+			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: r
+			};
+			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`);
+				}));
+			}, 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]: p
+				}));
+			};
+			document.addEventListener("mousemove", h), document.addEventListener("mouseup", g);
+		}, [
+			_,
+			o,
+			s,
+			c,
+			l,
+			v
+		]),
+		handleDoubleClick: e(() => {}, []),
+		getColumnWidth: e((e, t) => _[e] ? `${_[e]}px` : t ? typeof t == "number" ? `${t}px` : t : `${S(e)}px`, [_, S]),
+		measureRef: b
+	};
+}
+//#endregion
+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;