@thewrong/ui 0.2.0 → 0.4.0

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/components/table/hooks/useTableSort.cjs

@@ -0,0 +1 @@
+const e=require("./sort-state.cjs");let t=require("react");function n({initialSort:n,serverSide:r=!1,onSort:i,cycle:a=`tri`}={}){let[o,s]=(0,t.useState)(n||null);return{sort:o,handleSort:(0,t.useCallback)(t=>{let n=e.nextSort(o,t,a);s(n),r&&i&&i(n)},[o,r,i,a]),sortedData:(0,t.useCallback)((e,t)=>!o||!o.direction||r?e:[...e].sort((e,n)=>{let r=t(e,o.key),i=t(n,o.key);if(r==null&&i==null)return 0;if(r==null)return 1;if(i==null)return-1;if(typeof r==`number`&&typeof i==`number`)return o.direction===`asc`?r-i:i-r;let a=String(r),s=String(i),c=a.localeCompare(s,`ko`,{numeric:!0});return o.direction===`asc`?c:-c}),[o,r])}}exports.useTableSort=n;

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

@@ -1,4 +1,5 @@
-import { ColumnSort } from '../types';
+import { ColumnSort } from '../types.js';
+import { SortCycle } from './sort-state.js';
 /**
  * 테이블 정렬 훅 옵션
  */
@@ -15,7 +16,9 @@ export interface UseTableSortOptions {
     /**
      * 서버 사이드 정렬 콜백
      */
-    onSort?: (sort: ColumnSort) => void;
+    onSort?: (sort: ColumnSort | null) => void;
+    /** 정렬 순서. tri는 오름차순 → 내림차순 → 해제, toggle은 두 방향만 순환한다. */
+    cycle?: SortCycle;
 }
 /**
  * 테이블 정렬 훅 반환값
@@ -32,7 +35,7 @@ export interface UseTableSortReturn {
     /**
      * 정렬된 데이터 (클라이언트 사이드 정렬 시)
      */
-    sortedData: <T>(data: T[], getValue: (row: T, key: string) => any) => T[];
+    sortedData: <T>(data: T[], getValue: (row: T, key: string) => unknown) => T[];
 }
 /**
  * 테이블 정렬 훅
@@ -44,4 +47,4 @@ export interface UseTableSortReturn {
  * });
  * ```
  */
-export declare function useTableSort({ initialSort, serverSide, onSort, }?: UseTableSortOptions): UseTableSortReturn;
+export declare function useTableSort({ initialSort, serverSide, onSort, cycle, }?: UseTableSortOptions): UseTableSortReturn;

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

@@ -1,30 +1,29 @@
-import { useCallback as e, useState as t } from "react";
+import { nextSort as e } from "./sort-state.esm.js";
+import { useCallback as t, useState as n } from "react";
 //#region src/components/table/hooks/useTableSort.ts
-function n({ initialSort: n, serverSide: r = !1, onSort: i } = {}) {
-	let [a, o] = t(n || null);
+function r({ initialSort: r, serverSide: i = !1, onSort: a, cycle: o = "tri" } = {}) {
+	let [s, c] = n(r || null);
 	return {
-		sort: a,
-		handleSort: e((e) => {
-			let t = {
-				key: e,
-				direction: a?.key === e ? a.direction === "asc" ? "desc" : a.direction === "desc" ? null : "asc" : "asc"
-			}, n = t.direction === null ? null : t;
-			o(n), r && i && n && i(n);
+		sort: s,
+		handleSort: t((t) => {
+			let n = e(s, t, o);
+			c(n), i && a && a(n);
 		}, [
+			s,
+			i,
 			a,
-			r,
-			i
+			o
 		]),
-		sortedData: e((e, t) => !a || !a.direction || r ? e : [...e].sort((e, n) => {
-			let r = t(e, a.key), i = t(n, a.key);
+		sortedData: t((e, t) => !s || !s.direction || i ? e : [...e].sort((e, n) => {
+			let r = t(e, s.key), i = t(n, s.key);
 			if (r == null && i == null) return 0;
 			if (r == null) return 1;
 			if (i == null) return -1;
-			if (typeof r == "number" && typeof i == "number") return a.direction === "asc" ? r - i : i - r;
-			let o = String(r), s = String(i), c = o.localeCompare(s, "ko", { numeric: !0 });
-			return a.direction === "asc" ? c : -c;
-		}), [a, r])
+			if (typeof r == "number" && typeof i == "number") return s.direction === "asc" ? r - i : i - r;
+			let a = String(r), o = String(i), c = a.localeCompare(o, "ko", { numeric: !0 });
+			return s.direction === "asc" ? c : -c;
+		}), [s, i])
 	};
 }
 //#endregion
-export { n as useTableSort };
+export { r as useTableSort };

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;

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

@@ -1,15 +1,15 @@
-import { useMemo as e, useRef as t } from "react";
-import { useVirtualizer as n } from "@tanstack/react-virtual";
+import { useVirtualRows as e } from "../../../hooks/useVirtualRows.esm.js";
+import { useMemo as t, useRef as n } from "react";
 //#region src/components/table/hooks/useVirtualTable.ts
 function r({ count: r, estimateSize: i = 50, overscan: a = 5, scrollElement: o }) {
-	let s = t(null), c = n({
+	let s = n(null), { virtualizer: c } = e({
 		count: r,
-		getScrollElement: () => o || s.current,
-		estimateSize: () => i,
-		overscan: a,
-		enabled: r > 0
+		scrollElementRef: s,
+		scrollElement: o,
+		estimateSize: i,
+		overscan: a
 	});
-	return e(() => ({
+	return t(() => ({
 		virtualizer: c,
 		parentRef: s
 	}), [c]);

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

@@ -0,0 +1,27 @@
+/**
+ * Table 컴포넌트 모듈 export
+ */
+export { Table } from './table.js';
+export { PaginatedTable } from './paginated-table.js';
+export { MiniTable } from './mini-table.js';
+export type { MiniTableProps } from './mini-table.js';
+export { PaginatedMiniTable } from './paginated-mini-table.js';
+export type { PaginatedMiniTableProps } from './paginated-mini-table.js';
+export { AccordionTable } from './accordion-table.js';
+export type { AccordionTableProps, AccordionExpandable, ExpandedRowId, } from './accordion-table.js';
+export type { TableProps, PaginatedTableProps, TableColumn, TableColumnGroupMeta, TableColumnState, TableVariant, TableSize, SortDirection, ColumnSort, } from './types.js';
+export { useVirtualTable } from './hooks/useVirtualTable.js';
+export type { UseVirtualTableOptions, UseVirtualTableReturn, } from './hooks/useVirtualTable.js';
+export { useTableSort } from './hooks/useTableSort.js';
+export type { UseTableSortOptions, UseTableSortReturn, } from './hooks/useTableSort.js';
+export { useInfiniteScroll } from './hooks/useInfiniteScroll.js';
+export type { UseInfiniteScrollOptions } from './hooks/useInfiniteScroll.js';
+export { Pagination } from './components/Pagination.js';
+export type { PaginationProps } from './components/Pagination.js';
+export { ColumnPresetSelector } from './components/ColumnPresetSelector.js';
+export { ColumnSettingsTable } from './components/ColumnSettingsTable.js';
+export { useColumnPresets } from './hooks/useColumnPresets.js';
+export type { UseColumnPresetsOptions, UseColumnPresetsReturn, } from './hooks/useColumnPresets.js';
+export { useTableColumnState } from './hooks/useTableColumnState.js';
+export { ColumnPresetStorage } from '../../lib/column-preset-storage.js';
+export type { PresetNumber, ColumnPresetData, PagePresets, AllPresets, } from '../../lib/column-preset-storage.js';

package/dist/components/table/mini-table.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../loading-spinner/LoadingSpinner.cjs"),n=require("../../hooks/useFillEmptyRows.cjs"),r=require("./utils.cjs");let i=require("react"),a=require("react/jsx-runtime");var o=(0,i.forwardRef)((o,s)=>{let{data:c,columns:l,loading:u=!1,isFetching:d=!1,emptyMessage:f=`데이터가 없어요`,rowHeight:p,height:m,variant:h=`default`,size:g=`medium`,fillEmptyRows:_=!0,onRowClick:v,footerSlot:y,getRowKey:b,className:x=``,"data-testid":S,...C}=o,w=(0,i.useRef)(null),T=(0,i.useRef)(null),E=(0,i.useRef)(null),D=(0,i.useRef)(null),O=(0,i.useMemo)(()=>l.filter(e=>!e.hidden),[l]),k=r.getTableBaseClasses(),A=r.getTableVariantClasses(h),j=r.getTableSizeClasses(g),M=(0,i.useMemo)(()=>{let e={};return m&&(e.height=typeof m==`number`?`${m}px`:m),e},[m]),{emptyRowCount:N,measuredRowHeight:P}=n.useFillEmptyRows({enabled:_,containerRef:T,theadRef:E,tbodyRef:D,excludeRowsSelector:`tr:not([data-empty-row])`,remainingMode:`sum-real-rows`,deps:[c,O]}),F=(t,n)=>{let i=[r.getStripedRowClasses(n)];return v&&i.push(r.getHoverableRowClasses()),e.cn(i)};return u?(0,a.jsx)(`div`,{ref:s,className:e.cn(`flex items-center justify-center p-8 flex-1`,x),style:M,"data-testid":S,...C,children:(0,a.jsx)(t.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,a.jsx)(`div`,{ref:s,className:e.cn(`relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,x),style:M,"data-testid":S,...C,children:(0,a.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6`,children:[(0,a.jsxs)(`div`,{className:`relative flex flex-1 flex-col min-h-0`,children:[(0,a.jsx)(`div`,{className:e.cn(`pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150`,d?`opacity-100`:`opacity-0`),...d?{role:`status`,"aria-live":`polite`}:{"aria-hidden":!0},children:(0,a.jsx)(t.LoadingSpinner,{message:``,className:`min-h-0`})}),(0,a.jsx)(`div`,{ref:T,className:`scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-page`,children:c.length===0?(0,a.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,a.jsx)(`p`,{className:`text-fg-muted`,children:f})}):(0,a.jsxs)(`table`,{ref:w,className:e.cn(k,A,j,`!table-auto`),style:{minWidth:`100%`},children:[(0,a.jsx)(`colgroup`,{children:O.map((e,t)=>{let n=t===O.length-1;return(0,a.jsx)(`col`,{"data-col-key":e.key,style:n?void 0:e.width?{width:typeof e.width==`number`?`${e.width}px`:e.width}:void 0},e.key)})}),(0,a.jsx)(`thead`,{ref:E,className:r.getTableHeaderClasses(),children:(0,a.jsx)(`tr`,{children:O.map(t=>(0,a.jsx)(`th`,{className:e.cn(r.getTableHeaderCellClasses(),r.getColumnAlignClasses(t.align??`center`),t.hideOnMobile&&`hidden md:table-cell`),style:{...t.minWidth?{minWidth:`${t.minWidth}px`}:{minWidth:50}},children:(0,a.jsx)(`div`,{className:`flex items-center justify-center w-full px-1 select-none`,children:(0,a.jsx)(`span`,{children:t.header})})},t.key))})}),(0,a.jsxs)(`tbody`,{ref:D,children:[c.map((t,n)=>(0,a.jsx)(`tr`,{className:F(t,n),onClick:()=>v?.(t,n),style:p?{height:`${p}px`}:void 0,children:O.map(n=>{let i=n.accessor?n.accessor(t):t[n.key];return(0,a.jsx)(`td`,{className:e.cn(r.getTableCellClassesNoTruncate(),r.getColumnAlignClasses(n.align??`left`),n.hideOnMobile&&`hidden md:table-cell`),style:p?{height:`${p}px`,maxHeight:`${p}px`}:void 0,children:i},n.key)})},b?b(t,n):n)),_&&Array.from({length:N}).map((t,n)=>{let i=c.length+n,o=p??P??void 0;return(0,a.jsx)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:r.getStripedRowClasses(i),style:o?{height:`${o}px`}:void 0,children:O.map(t=>(0,a.jsx)(`td`,{className:e.cn(r.getTableCellClassesNoTruncate(),t.hideOnMobile&&`hidden md:table-cell`),style:o?{height:`${o}px`}:void 0},t.key))},`empty-${n}`)})]})]})})]}),y]})})});o.displayName=`MiniTable`,exports.MiniTable=o;

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

@@ -1,4 +1,4 @@
-import { TableColumn, TableSize, TableVariant } from './types';
+import { TableColumn, TableSize, TableVariant } from './types.js';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export interface MiniTableProps<T> extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     data: T[];

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

@@ -1,126 +1,127 @@
-import { LoadingSpinner as e } from "../loading-spinner/LoadingSpinner.esm.js";
-import { useFillEmptyRows as t } from "./hooks/useFillEmptyRows.esm.js";
-import { getColumnAlignClasses as n, getHoverableRowClasses as r, getStripedRowClasses as i, getTableBaseClasses as a, getTableCellClassesNoTruncate as o, getTableHeaderCellClasses as s, getTableHeaderClasses as c, getTableSizeClasses as l, getTableVariantClasses as u } from "./utils.esm.js";
-import { forwardRef as d, useMemo as f, useRef as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { LoadingSpinner as t } from "../loading-spinner/LoadingSpinner.esm.js";
+import { useFillEmptyRows as n } from "../../hooks/useFillEmptyRows.esm.js";
+import { getColumnAlignClasses as r, getHoverableRowClasses as i, getStripedRowClasses as a, getTableBaseClasses as o, getTableCellClassesNoTruncate as s, getTableHeaderCellClasses as c, getTableHeaderClasses as l, getTableSizeClasses as u, getTableVariantClasses as d } from "./utils.esm.js";
+import { forwardRef as f, useMemo as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/table/mini-table.tsx
-var g = d((d, g) => {
-	let { data: _, columns: v, loading: y = !1, isFetching: b = !1, emptyMessage: x = "데이터가 없어요", rowHeight: S, height: C, variant: w = "default", size: T = "medium", fillEmptyRows: E = !0, onRowClick: D, footerSlot: O, getRowKey: k, className: A = "", "data-testid": j, ...M } = d, N = p(null), P = p(null), F = p(null), I = p(null), L = f(() => v.filter((e) => !e.hidden), [v]), R = a(), z = u(w), B = l(T), V = f(() => {
+var _ = f((f, _) => {
+	let { data: v, columns: y, loading: b = !1, isFetching: x = !1, emptyMessage: S = "데이터가 없어요", rowHeight: C, height: w, variant: T = "default", size: E = "medium", fillEmptyRows: D = !0, onRowClick: O, footerSlot: k, getRowKey: A, className: j = "", "data-testid": M, ...N } = f, P = m(null), F = m(null), I = m(null), L = m(null), R = p(() => y.filter((e) => !e.hidden), [y]), z = o(), B = d(T), V = u(E), H = p(() => {
 		let e = {};
-		return C && (e.height = typeof C == "number" ? `${C}px` : C), e;
-	}, [C]), { emptyRowCount: H, measuredRowHeight: U } = t({
-		enabled: E,
-		containerRef: P,
-		theadRef: F,
-		tbodyRef: I,
+		return w && (e.height = typeof w == "number" ? `${w}px` : w), e;
+	}, [w]), { emptyRowCount: U, measuredRowHeight: W } = n({
+		enabled: D,
+		containerRef: F,
+		theadRef: I,
+		tbodyRef: L,
 		excludeRowsSelector: "tr:not([data-empty-row])",
 		remainingMode: "sum-real-rows",
-		deps: [_, L]
-	}), W = (e, t) => {
-		let n = [i(t)];
-		return D && n.push(r()), n.join(" ");
+		deps: [v, R]
+	}), G = (t, n) => {
+		let r = [a(n)];
+		return O && r.push(i()), e(r);
 	};
-	return y ? /* @__PURE__ */ m("div", {
-		ref: g,
-		className: `flex items-center justify-center p-8 flex-1 ${A}`,
-		style: V,
-		"data-testid": j,
-		...M,
-		children: /* @__PURE__ */ m(e, {
+	return b ? /* @__PURE__ */ h("div", {
+		ref: _,
+		className: e("flex items-center justify-center p-8 flex-1", j),
+		style: H,
+		"data-testid": M,
+		...N,
+		children: /* @__PURE__ */ h(t, {
 			message: "데이터를 불러오는 중이에요...",
 			className: "min-h-0"
 		})
-	}) : /* @__PURE__ */ m("div", {
-		ref: g,
-		className: `relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6 ${A}`,
-		style: V,
-		"data-testid": j,
-		...M,
-		children: /* @__PURE__ */ h("div", {
+	}) : /* @__PURE__ */ h("div", {
+		ref: _,
+		className: e("relative flex flex-col min-h-0 gap-4 md:gap-5 xl:gap-6", j),
+		style: H,
+		"data-testid": M,
+		...N,
+		children: /* @__PURE__ */ g("div", {
 			className: "flex flex-1 flex-col min-h-0 gap-4 md:gap-5 xl:gap-6",
-			children: [/* @__PURE__ */ h("div", {
+			children: [/* @__PURE__ */ g("div", {
 				className: "relative flex flex-1 flex-col min-h-0",
-				children: [/* @__PURE__ */ m("div", {
-					className: `pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-white/50 backdrop-blur-[2px] transition-opacity duration-150 dark:bg-neutral-900/50 ${b ? "opacity-100" : "opacity-0"}`,
-					...b ? {
+				children: [/* @__PURE__ */ h("div", {
+					className: e("pointer-events-none absolute inset-0 z-30 flex items-center justify-center bg-bg-surface/60 backdrop-blur-[2px] transition-opacity duration-150", x ? "opacity-100" : "opacity-0"),
+					...x ? {
 						role: "status",
 						"aria-live": "polite"
 					} : { "aria-hidden": !0 },
-					children: /* @__PURE__ */ m(e, {
+					children: /* @__PURE__ */ h(t, {
 						message: "",
 						className: "min-h-0"
 					})
-				}), /* @__PURE__ */ m("div", {
-					ref: P,
-					className: "scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-base-secondary",
-					children: _.length === 0 ? /* @__PURE__ */ m("div", {
+				}), /* @__PURE__ */ h("div", {
+					ref: F,
+					className: "scrollbar-table overflow-x-auto overflow-y-hidden flex-1 bg-bg-page",
+					children: v.length === 0 ? /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-center p-8 h-full",
-						children: /* @__PURE__ */ m("p", {
-							className: "text-neutral-600 dark:text-neutral-400",
-							children: x
+						children: /* @__PURE__ */ h("p", {
+							className: "text-fg-muted",
+							children: S
 						})
-					}) : /* @__PURE__ */ h("table", {
-						ref: N,
-						className: `${R} ${z} ${B} !table-auto`,
+					}) : /* @__PURE__ */ g("table", {
+						ref: P,
+						className: e(z, B, V, "!table-auto"),
 						style: { minWidth: "100%" },
 						children: [
-							/* @__PURE__ */ m("colgroup", { children: L.map((e, t) => {
-								let n = t === L.length - 1;
-								return /* @__PURE__ */ m("col", {
+							/* @__PURE__ */ h("colgroup", { children: R.map((e, t) => {
+								let n = t === R.length - 1;
+								return /* @__PURE__ */ h("col", {
 									"data-col-key": e.key,
 									style: n ? void 0 : e.width ? { width: typeof e.width == "number" ? `${e.width}px` : e.width } : void 0
 								}, e.key);
 							}) }),
-							/* @__PURE__ */ m("thead", {
-								ref: F,
-								className: c(),
-								children: /* @__PURE__ */ m("tr", { children: L.map((e) => /* @__PURE__ */ m("th", {
-									className: `${s()} ${n(e.align ?? "center")} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
-									style: { ...e.minWidth ? { minWidth: `${e.minWidth}px` } : { minWidth: 50 } },
-									children: /* @__PURE__ */ m("div", {
+							/* @__PURE__ */ h("thead", {
+								ref: I,
+								className: l(),
+								children: /* @__PURE__ */ h("tr", { children: R.map((t) => /* @__PURE__ */ h("th", {
+									className: e(c(), r(t.align ?? "center"), t.hideOnMobile && "hidden md:table-cell"),
+									style: { ...t.minWidth ? { minWidth: `${t.minWidth}px` } : { minWidth: 50 } },
+									children: /* @__PURE__ */ h("div", {
 										className: "flex items-center justify-center w-full px-1 select-none",
-										children: /* @__PURE__ */ m("span", { children: e.header })
+										children: /* @__PURE__ */ h("span", { children: t.header })
 									})
-								}, e.key)) })
+								}, t.key)) })
 							}),
-							/* @__PURE__ */ h("tbody", {
-								ref: I,
-								children: [_.map((e, t) => /* @__PURE__ */ m("tr", {
-									className: W(e, t),
-									onClick: () => D?.(e, t),
-									style: S ? { height: `${S}px` } : void 0,
-									children: L.map((t) => {
-										let r = t.accessor ? t.accessor(e) : e[t.key];
-										return /* @__PURE__ */ m("td", {
-											className: `${o()} ${n(t.align ?? "left")} ${t.hideOnMobile ? "hidden md:table-cell" : ""}`,
-											style: S ? {
-												height: `${S}px`,
-												maxHeight: `${S}px`
+							/* @__PURE__ */ g("tbody", {
+								ref: L,
+								children: [v.map((t, n) => /* @__PURE__ */ h("tr", {
+									className: G(t, n),
+									onClick: () => O?.(t, n),
+									style: C ? { height: `${C}px` } : void 0,
+									children: R.map((n) => {
+										let i = n.accessor ? n.accessor(t) : t[n.key];
+										return /* @__PURE__ */ h("td", {
+											className: e(s(), r(n.align ?? "left"), n.hideOnMobile && "hidden md:table-cell"),
+											style: C ? {
+												height: `${C}px`,
+												maxHeight: `${C}px`
 											} : void 0,
-											children: r
-										}, t.key);
+											children: i
+										}, n.key);
 									})
-								}, k ? k(e, t) : t)), E && Array.from({ length: H }).map((e, t) => {
-									let n = _.length + t, r = S ?? U ?? void 0;
-									return /* @__PURE__ */ m("tr", {
+								}, A ? A(t, n) : n)), D && Array.from({ length: U }).map((t, n) => {
+									let r = v.length + n, i = C ?? W ?? void 0;
+									return /* @__PURE__ */ h("tr", {
 										"data-empty-row": !0,
 										"aria-hidden": "true",
-										className: i(n),
-										style: r ? { height: `${r}px` } : void 0,
-										children: L.map((e) => /* @__PURE__ */ m("td", {
-											className: `${o()} ${e.hideOnMobile ? "hidden md:table-cell" : ""}`,
-											style: r ? { height: `${r}px` } : void 0
-										}, e.key))
-									}, `empty-${t}`);
+										className: a(r),
+										style: i ? { height: `${i}px` } : void 0,
+										children: R.map((t) => /* @__PURE__ */ h("td", {
+											className: e(s(), t.hideOnMobile && "hidden md:table-cell"),
+											style: i ? { height: `${i}px` } : void 0
+										}, t.key))
+									}, `empty-${n}`);
 								})]
 							})
 						]
 					})
 				})]
-			}), O]
+			}), k]
 		})
 	});
 });
-g.displayName = "MiniTable";
+_.displayName = "MiniTable";
 //#endregion
-export { g as MiniTable };
+export { _ as MiniTable };

package/dist/components/table/paginated-mini-table.cjs

@@ -0,0 +1 @@
+const e=require("./components/PaginationFooter.cjs"),t=require("./mini-table.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,totalElements:d,hasPreviousPage:f,hasNextPage:p,showTotalCount:m=!1,enablePageJump:h=!1,enableKeyboardPagination:g=!1,"data-testid":_,...v}=n;return(0,r.jsx)(t.MiniTable,{ref:i,"data-testid":_,footerSlot:(0,r.jsx)(e.PaginationFooter,{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,hasPreviousPage:f,hasNextPage:p,totalElements:d,showTotalCount:m,enablePageJump:h,enableKeyboardPagination:g,"data-testid":_}),...v})});i.displayName=`PaginatedMiniTable`,exports.PaginatedMiniTable=i;

package/dist/{src/components → components}/table/paginated-mini-table.d.ts

@@ -1,4 +1,4 @@
-import { MiniTableProps } from './mini-table';
+import { MiniTableProps } from './mini-table.js';
 export interface PaginatedMiniTableProps<T> extends MiniTableProps<T> {
     /** 1-base. */
     currentPage: number;

package/dist/components/table/paginated-table.cjs

@@ -0,0 +1 @@
+const e=require("./table.cjs"),t=require("./components/PaginationFooter.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,totalElements:d,hasPreviousPage:f,hasNextPage:p,enableKeyboardPagination:m=!0,showTotalCount:h=!0,enablePageJump:g=!0,"data-testid":_,...v}=n;return(0,r.jsx)(e.Table,{ref:i,"data-testid":_,footerSlot:(0,r.jsx)(t.PaginationFooter,{currentPage:a,totalPages:o,onPageChange:s,pageSize:c,pageSizeOptions:l,onPageSizeChange:u,hasPreviousPage:f,hasNextPage:p,totalElements:d,showTotalCount:h,enablePageJump:g,enableKeyboardPagination:m,"data-testid":_}),...v})});i.displayName=`PaginatedTable`,exports.PaginatedTable=i;

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

@@ -1,7 +1,9 @@
-import { PaginatedTableProps } from './types';
+import { PaginatedTableProps } from './types.js';
 /**
  * PaginatedTable — Table 코어를 래핑해 페이지네이션 footer를 추가한 변형.
  * Table 본체 로직(헤더 정렬·리사이즈·grip, 본문 스트라이프·선택·sticky, 컬럼 프리셋)은 Table에 그대로 위임한다.
+ * 클라이언트 정렬은 전달된 현재 페이지 데이터만 정렬한다. 서버 페이지네이션이면 serverSideSorting을 사용하고,
+ * 정렬 변경 시 페이지 초기화는 호출부에서 처리한다.
  */
 export declare const PaginatedTable: <T>(props: PaginatedTableProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>;