@thewrong/ui 0.1.0 → 0.3.0

package/dist/{src/components → components}/table/column-group-utils.d.ts

@@ -1,4 +1,4 @@
-import { TableColumn, TableColumnGroupMeta } from './types';
+import { TableColumn, TableColumnGroupMeta } from './types.js';
 /**
  * 슬롯(그룹 또는 단일 컬럼) 단위 표현.
  *

package/dist/components/table/column-group-utils.esm.js

@@ -0,0 +1,53 @@
+//#region src/components/table/column-group-utils.ts
+function e(e, t = []) {
+	if (t.length === 0) return e.map((e) => ({
+		kind: "column",
+		key: e.key,
+		header: e.header,
+		leafColumns: [e],
+		hideOnMobile: e.hideOnMobile
+	}));
+	let n = new Map(e.map((e) => [e.key, e])), r = /* @__PURE__ */ new Map();
+	for (let e of t) for (let t of e.columnKeys) r.set(t, e.key);
+	let i = [], a = /* @__PURE__ */ new Set();
+	for (let o of e) {
+		let e = r.get(o.key);
+		if (e) {
+			if (a.has(e)) continue;
+			a.add(e);
+			let r = t.find((t) => t.key === e);
+			if (!r) continue;
+			let o = r.columnKeys.map((e) => n.get(e)).filter((e) => !!e);
+			i.push({
+				kind: "group",
+				key: r.key,
+				header: r.header,
+				leafColumns: o,
+				hideOnMobile: r.hideOnMobile,
+				group: r
+			});
+		} else i.push({
+			kind: "column",
+			key: o.key,
+			header: o.header,
+			leafColumns: [o],
+			hideOnMobile: o.hideOnMobile
+		});
+	}
+	return i;
+}
+function t(e) {
+	return e.map((e) => e.key);
+}
+function n(e, t, n) {
+	let r = new Map(e.map((e) => [e.key, e])), i = new Set(t), a = t.map((e) => r.get(e)).filter((e) => !!e), o = e.filter((e) => !i.has(e.key));
+	return [...a, ...o].filter((e) => !(n.has(e.key) || e.kind === "column" && e.leafColumns[0].hidden));
+}
+function r(e) {
+	return e.flatMap((e) => e.leafColumns);
+}
+function i(e) {
+	return e.some((e) => e.kind === "group");
+}
+//#endregion
+export { n as applyColumnState, e as buildColumnSlots, r as flattenLeafColumns, t as getDefaultSlotOrder, i as hasGroupSlot };

package/dist/components/table/components/ColumnPresetSelector.cjs

@@ -0,0 +1 @@
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../lib/utils.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/settings.cjs"),r=require("../../../hooks/useMediaQuery.cjs"),i=require("../../modal/Modal.cjs"),a=require("./ColumnSettingsTable.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("motion/react"),l=require("@floating-ui/react"),u=require("react-hot-toast");u=e.__toESM(u,1);var d=500,f=12,p=5,m=[1,2,3];function h({columns:e,columnGroups:h,activePreset:g,columnOrder:_,hiddenColumns:v,columnWidths:y,isDirty:b,hasPreset:x,onApplyPreset:S,onSaveActivePreset:C,onResetActivePreset:w,onColumnOrderChange:T,onHiddenColumnsChange:E,onSetColumnWidth:D,className:O=``}){let k=e.filter(e=>!e.excludeFromPreset),A=new Set(e.filter(e=>e.excludeFromPreset).map(e=>e.key)),[j,M]=(0,o.useState)(!1),N=r.useIsMobile(),P=(0,o.useId)(),{refs:F,floatingStyles:I,context:L}=(0,l.useFloating)({open:!N&&j,onOpenChange:M,placement:`bottom-start`,whileElementsMounted:l.autoUpdate,middleware:[(0,l.offset)(p),(0,l.flip)(),(0,l.shift)({padding:f}),(0,l.size)({apply({availableWidth:e,elements:t}){let n=Math.min(d,e);Object.assign(t.floating.style,{width:`${n}px`,maxWidth:`${d}px`})}})]}),{getReferenceProps:R,getFloatingProps:z}=(0,l.useInteractions)([(0,l.useClick)(L),(0,l.useDismiss)(L),(0,l.useRole)(L,{role:`dialog`})]),B=e=>{g!==e&&(S(e),M(!1),u.default.success(`프리셋 ${e}을(를) 적용했어요.`))},V=e=>{let t=_.map((e,t)=>({key:e,index:t})).filter(({key:e})=>A.has(e)),n=[...e];t.sort((e,t)=>e.index-t.index).forEach(({key:e,index:t})=>{let r=Math.min(t,n.length);n.splice(r,0,e)}),T(n)},H=(e,t)=>{if(t)E(v.filter(t=>t!==e));else{if(_.length-A.size-v.filter(e=>!A.has(e)).length<=1){u.default.error(`최소 1개 이상의 컬럼은 표시되어야 해요.`);return}E([...v,e])}},U=()=>{if(!C()){u.default.error(`저장할 수 없는 상태예요.`);return}M(!1),u.default.success(`프리셋 ${g}에 저장했어요.`)},W=()=>{w(),M(!1),u.default.success(`프리셋 ${g}을(를) 초기화했어요.`)},G=_.filter(e=>!A.has(e)),K=v.filter(e=>!A.has(e));return(0,s.jsxs)(`div`,{className:t.cn(`inline-flex`,O),children:[(0,s.jsxs)(`div`,{className:`inline-flex h-7.5 items-center gap-0 rounded-full bg-bg-subtle p-0.75 sm:h-8.5`,role:`group`,"aria-label":`컬럼 프리셋 선택`,children:[(0,s.jsxs)(`button`,{ref:F.setReference,...N?{type:`button`,onClick:()=>M(e=>!e),"aria-label":`테이블 프리셋 설정`,title:b?`저장하지 않은 변경이 있어요`:`테이블 프리셋 설정`,className:`relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-icon-secondary transition-colors hover:text-icon-primary sm:h-7 sm:w-7`}:R({type:`button`,"aria-label":`테이블 프리셋 설정`,title:b?`저장하지 않은 변경이 있어요`:`테이블 프리셋 설정`,className:`relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-icon-secondary transition-colors hover:text-icon-primary sm:h-7 sm:w-7`}),children:[(0,s.jsx)(n.Settings,{className:`h-3 w-3 sm:h-3.5 sm:w-3.5`}),b&&(0,s.jsx)(`span`,{"aria-hidden":`true`,className:`absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-error`})]}),(0,s.jsx)(`span`,{"aria-hidden":`true`,className:`ml-0.5 mr-1.5 h-4 w-px bg-border-subtle sm:h-4.5`}),m.map(e=>{let n=g===e;return(0,s.jsxs)(`button`,{type:`button`,onClick:()=>B(e),"aria-pressed":n,title:n?`현재 활성화된 프리셋이에요`:x(e)?`프리셋 ${e} 적용`:`프리셋 ${e} 기본값으로 초기화`,className:t.cn(`relative inline-flex h-6 w-8 items-center justify-center rounded-full px-2.5 py-1 text-sm font-medium transition-colors sm:h-7 sm:w-20`,n?`text-fg-default`:`text-fg-muted`),children:[n&&(0,s.jsx)(c.motion.span,{layoutId:`preset-active-${P}`,className:`absolute inset-0 rounded-full bg-bg-surface shadow-control`,transition:{type:`spring`,stiffness:500,damping:38}}),(0,s.jsxs)(`span`,{className:`relative`,children:[(0,s.jsx)(`span`,{className:`hidden sm:inline`,children:`프리셋`}),e]})]},e)})]}),!N&&j&&(0,s.jsx)(l.FloatingPortal,{children:(0,s.jsx)(`div`,{ref:F.setFloating,style:I,...z(),className:`z-floating overflow-hidden rounded-surface border-2 border-border-subtle shadow-overlay`,children:(0,s.jsx)(a.ColumnSettingsTable,{num:String(g),columns:k,columnGroups:h,columnOrder:G,hiddenColumns:K,columnWidths:y,onOrderChange:V,onHiddenChange:H,onSetColumnWidth:D,onSave:U,onReset:W})})}),N&&(0,s.jsx)(i.Modal,{isOpen:j,onClose:()=>M(!1),title:`프리셋 ${g} 설정`,children:(0,s.jsx)(a.ColumnSettingsTable,{num:String(g),columns:k,columnOrder:G,hiddenColumns:K,columnWidths:y,onOrderChange:V,onHiddenChange:H,onSetColumnWidth:D,onSave:U,onReset:W})})]})}exports.ColumnPresetSelector=h;

package/dist/{src/components → components}/table/components/ColumnPresetSelector.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';
 interface ColumnPresetSelectorProps<T> {
     columns: TableColumn<T>[];
     columnGroups?: TableColumnGroupMeta[];

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

@@ -0,0 +1,166 @@
+import { cn as e } from "../../../lib/utils.esm.js";
+import { Settings as t } from "../../../node_modules/lucide-react/dist/esm/icons/settings.esm.js";
+import { useIsMobile as n } from "../../../hooks/useMediaQuery.esm.js";
+import { Modal as r } from "../../modal/Modal.esm.js";
+import { ColumnSettingsTable as i } from "./ColumnSettingsTable.esm.js";
+import { useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { motion as l } from "motion/react";
+import { FloatingPortal as ee, autoUpdate as te, flip as u, offset as d, shift as f, size as p, useClick as m, useDismiss as h, useFloating as g, useInteractions as ne, useRole as re } from "@floating-ui/react";
+import _ from "react-hot-toast";
+//#region src/components/table/components/ColumnPresetSelector.tsx
+var v = 500, y = 12, b = 5, x = [
+	1,
+	2,
+	3
+];
+function S({ columns: S, columnGroups: ie, activePreset: C, columnOrder: w, hiddenColumns: T, columnWidths: E, isDirty: D, hasPreset: O, onApplyPreset: k, onSaveActivePreset: A, onResetActivePreset: j, onColumnOrderChange: M, onHiddenColumnsChange: N, onSetColumnWidth: P, className: F = "" }) {
+	let I = S.filter((e) => !e.excludeFromPreset), L = new Set(S.filter((e) => e.excludeFromPreset).map((e) => e.key)), [R, z] = o(!1), B = n(), V = a(), { refs: H, floatingStyles: U, context: W } = g({
+		open: !B && R,
+		onOpenChange: z,
+		placement: "bottom-start",
+		whileElementsMounted: te,
+		middleware: [
+			d(b),
+			u(),
+			f({ padding: y }),
+			p({ apply({ availableWidth: e, elements: t }) {
+				let n = Math.min(v, e);
+				Object.assign(t.floating.style, {
+					width: `${n}px`,
+					maxWidth: `${v}px`
+				});
+			} })
+		]
+	}), { getReferenceProps: G, getFloatingProps: K } = ne([
+		m(W),
+		h(W),
+		re(W, { role: "dialog" })
+	]), q = (e) => {
+		C !== e && (k(e), z(!1), _.success(`프리셋 ${e}을(를) 적용했어요.`));
+	}, J = (e) => {
+		let t = w.map((e, t) => ({
+			key: e,
+			index: t
+		})).filter(({ key: e }) => L.has(e)), n = [...e];
+		t.sort((e, t) => e.index - t.index).forEach(({ key: e, index: t }) => {
+			let r = Math.min(t, n.length);
+			n.splice(r, 0, e);
+		}), M(n);
+	}, Y = (e, t) => {
+		if (t) N(T.filter((t) => t !== e));
+		else {
+			if (w.length - L.size - T.filter((e) => !L.has(e)).length <= 1) {
+				_.error("최소 1개 이상의 컬럼은 표시되어야 해요.");
+				return;
+			}
+			N([...T, e]);
+		}
+	}, X = () => {
+		if (!A()) {
+			_.error("저장할 수 없는 상태예요.");
+			return;
+		}
+		z(!1), _.success(`프리셋 ${C}에 저장했어요.`);
+	}, Z = () => {
+		j(), z(!1), _.success(`프리셋 ${C}을(를) 초기화했어요.`);
+	}, Q = w.filter((e) => !L.has(e)), $ = T.filter((e) => !L.has(e));
+	return /* @__PURE__ */ c("div", {
+		className: e("inline-flex", F),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "inline-flex h-7.5 items-center gap-0 rounded-full bg-bg-subtle p-0.75 sm:h-8.5",
+				role: "group",
+				"aria-label": "컬럼 프리셋 선택",
+				children: [
+					/* @__PURE__ */ c("button", {
+						ref: H.setReference,
+						...B ? {
+							type: "button",
+							onClick: () => z((e) => !e),
+							"aria-label": "테이블 프리셋 설정",
+							title: D ? "저장하지 않은 변경이 있어요" : "테이블 프리셋 설정",
+							className: "relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-icon-secondary transition-colors hover:text-icon-primary sm:h-7 sm:w-7"
+						} : G({
+							type: "button",
+							"aria-label": "테이블 프리셋 설정",
+							title: D ? "저장하지 않은 변경이 있어요" : "테이블 프리셋 설정",
+							className: "relative ml-1 flex h-6 w-6 items-center justify-center rounded-full text-icon-secondary transition-colors hover:text-icon-primary sm:h-7 sm:w-7"
+						}),
+						children: [/* @__PURE__ */ s(t, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }), D && /* @__PURE__ */ s("span", {
+							"aria-hidden": "true",
+							className: "absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-error"
+						})]
+					}),
+					/* @__PURE__ */ s("span", {
+						"aria-hidden": "true",
+						className: "ml-0.5 mr-1.5 h-4 w-px bg-border-subtle sm:h-4.5"
+					}),
+					x.map((t) => {
+						let n = C === t;
+						return /* @__PURE__ */ c("button", {
+							type: "button",
+							onClick: () => q(t),
+							"aria-pressed": n,
+							title: n ? "현재 활성화된 프리셋이에요" : O(t) ? `프리셋 ${t} 적용` : `프리셋 ${t} 기본값으로 초기화`,
+							className: e("relative inline-flex h-6 w-8 items-center justify-center rounded-full px-2.5 py-1 text-sm font-medium transition-colors sm:h-7 sm:w-20", n ? "text-fg-default" : "text-fg-muted"),
+							children: [n && /* @__PURE__ */ s(l.span, {
+								layoutId: `preset-active-${V}`,
+								className: "absolute inset-0 rounded-full bg-bg-surface shadow-control",
+								transition: {
+									type: "spring",
+									stiffness: 500,
+									damping: 38
+								}
+							}), /* @__PURE__ */ c("span", {
+								className: "relative",
+								children: [/* @__PURE__ */ s("span", {
+									className: "hidden sm:inline",
+									children: "프리셋"
+								}), t]
+							})]
+						}, t);
+					})
+				]
+			}),
+			!B && R && /* @__PURE__ */ s(ee, { children: /* @__PURE__ */ s("div", {
+				ref: H.setFloating,
+				style: U,
+				...K(),
+				className: "z-floating overflow-hidden rounded-surface border-2 border-border-subtle shadow-overlay",
+				children: /* @__PURE__ */ s(i, {
+					num: String(C),
+					columns: I,
+					columnGroups: ie,
+					columnOrder: Q,
+					hiddenColumns: $,
+					columnWidths: E,
+					onOrderChange: J,
+					onHiddenChange: Y,
+					onSetColumnWidth: P,
+					onSave: X,
+					onReset: Z
+				})
+			}) }),
+			B && /* @__PURE__ */ s(r, {
+				isOpen: R,
+				onClose: () => z(!1),
+				title: `프리셋 ${C} 설정`,
+				children: /* @__PURE__ */ s(i, {
+					num: String(C),
+					columns: I,
+					columnOrder: Q,
+					hiddenColumns: $,
+					columnWidths: E,
+					onOrderChange: J,
+					onHiddenChange: Y,
+					onSetColumnWidth: P,
+					onSave: X,
+					onReset: Z
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { S as ColumnPresetSelector };

package/dist/components/table/components/ColumnSettingsTable.cjs

@@ -0,0 +1 @@
+const e=require("../../../lib/utils.cjs"),t=require("../../../node_modules/lucide-react/dist/esm/icons/grip-vertical.cjs"),n=require("../../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.cjs"),r=require("../../../node_modules/lucide-react/dist/esm/icons/save.cjs"),i=require("../../table-checkbox/TableCheckbox.cjs"),a=require("../column-group-utils.cjs");let o=require("react"),s=require("react/jsx-runtime"),c=require("@dnd-kit/core"),l=require("@dnd-kit/sortable"),u=require("@dnd-kit/utilities");function d({slot:n,index:r,isHidden:a,width:o,onHiddenChange:c,onSetColumnWidth:d}){let{attributes:p,listeners:m,setNodeRef:h,transform:g,transition:_,isDragging:v}=(0,l.useSortable)({id:n.key}),y={transform:u.CSS.Transform.toString(g),transition:_,opacity:v?.5:1},b=typeof n.header==`string`?n.header:n.key,x=n.kind===`group`;return(0,s.jsxs)(`tr`,{ref:h,style:y,className:e.cn(`border-b border-border-subtle transition-colors`,a?`bg-bg-subtle text-fg-subtle`:`bg-bg-surface text-fg-default hover:bg-bg-subtle`),children:[(0,s.jsx)(`td`,{className:`w-10 px-2 py-2 text-center cursor-grab active:cursor-grabbing`,...p,...m,children:(0,s.jsx)(t.GripVertical,{size:16,className:`text-icon-tertiary mx-auto`})}),(0,s.jsxs)(`td`,{className:`px-2 py-2 text-sm whitespace-nowrap`,children:[b,x&&(0,s.jsxs)(`span`,{className:`ml-1.5 text-xs text-fg-subtle`,children:[`(그룹 · `,n.leafColumns.length,`개)`]})]}),(0,s.jsx)(`td`,{className:`w-14 px-2 py-2 text-center text-sm`,children:r+1}),(0,s.jsx)(`td`,{className:`w-20 px-2 py-2 text-center text-sm tabular-nums`,children:x?(0,s.jsx)(`span`,{className:`text-fg-subtle`,children:`—`}):d?(0,s.jsx)(f,{columnKey:n.key,width:o,onSetColumnWidth:d}):(0,s.jsx)(`span`,{className:`text-fg-subtle`,children:o?`${o}px`:`—`})}),(0,s.jsx)(`td`,{className:`w-14 px-2 py-2 text-center`,children:(0,s.jsx)(`div`,{className:`flex justify-center`,children:(0,s.jsx)(i.TableCheckbox,{checked:a,onChange:e=>c(n.key,!e),ariaLabel:`${b} 숨김`})})})]})}function f({columnKey:e,width:t,onSetColumnWidth:n}){let[r,i]=(0,o.useState)(t?String(t):``);return(0,o.useEffect)(()=>{i(t?String(t):``)},[t]),(0,s.jsx)(`input`,{type:`text`,inputMode:`numeric`,pattern:`[0-9]*`,value:r,placeholder:`auto`,onChange:e=>i(e.target.value.replace(/[^0-9]/g,``)),onBlur:()=>{if(r===``){n(e,0);return}let t=Number(r);if(!Number.isFinite(t)||t<=0){n(e,0),i(``);return}n(e,Math.max(20,Math.floor(t)))},onKeyDown:e=>{e.key===`Enter`?(e.preventDefault(),e.target.blur()):e.key===`Escape`&&(i(t?String(t):``),e.target.blur())},"aria-label":`${e} 컬럼 너비 (px)`,className:`w-16 rounded-control-mini border border-border-subtle bg-bg-surface px-1.5 py-0.5 text-center text-xs 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`})}function p({columns:e,columnGroups:t,columnOrder:i,hiddenColumns:o,columnWidths:u,num:f,onOrderChange:p,onHiddenChange:m,onSetColumnWidth:h,onSave:g,onReset:_}){let v=(0,c.useSensors)((0,c.useSensor)(c.PointerSensor,{activationConstraint:{distance:5}}),(0,c.useSensor)(c.KeyboardSensor,{coordinateGetter:l.sortableKeyboardCoordinates})),y=a.buildColumnSlots(e,t),b=new Map(y.map(e=>[e.key,e])),x=i.map(e=>b.get(e)).filter(e=>!!e);return(0,s.jsxs)(`div`,{className:`w-full overflow-y-auto bg-bg-surface text-fg-default`,style:{maxHeight:500},children:[(0,s.jsxs)(`div`,{className:`sticky top-0 bg-bg-subtle px-4 py-3 font-semibold z-10 border-b border-border-subtle`,children:[(0,s.jsx)(`span`,{className:`text-base`,children:`컬럼 설정`}),(0,s.jsxs)(`span`,{className:`ml-2 text-sm text-fg-subtle`,children:[`프리셋 `,f]})]}),(0,s.jsx)(c.DndContext,{sensors:v,collisionDetection:c.closestCenter,onDragEnd:e=>{let{active:t,over:n}=e;if(!n||t.id===n.id)return;let r=i.indexOf(String(t.id)),a=i.indexOf(String(n.id));r===-1||a===-1||p((0,l.arrayMove)(i,r,a))},children:(0,s.jsxs)(`table`,{className:`w-full`,children:[(0,s.jsx)(`thead`,{className:`bg-bg-subtle sticky top-12 z-10`,children:(0,s.jsxs)(`tr`,{className:`border-y border-border-subtle font-bold`,children:[(0,s.jsx)(`th`,{className:`w-10 px-2 py-2`}),(0,s.jsx)(`th`,{className:`px-2 py-2 text-center text-sm font-medium text-fg-muted whitespace-nowrap`,children:`컬럼명`}),(0,s.jsx)(`th`,{className:`w-14 px-2 py-2 text-center text-sm font-medium text-fg-muted`,children:`순서`}),(0,s.jsx)(`th`,{className:`w-20 px-2 py-2 text-center text-sm font-medium text-fg-muted`,children:`너비`}),(0,s.jsx)(`th`,{className:`w-14 px-2 py-2 text-center text-sm font-medium text-fg-muted`,children:`숨김`})]})}),(0,s.jsx)(`tbody`,{children:(0,s.jsx)(l.SortableContext,{items:i,strategy:l.verticalListSortingStrategy,children:x.map((e,t)=>(0,s.jsx)(d,{slot:e,index:t,isHidden:o.includes(e.key),width:u[e.key],onHiddenChange:m,onSetColumnWidth:h},e.key))})})]})}),(0,s.jsxs)(`div`,{className:`sticky bottom-0 bg-bg-surface border-t border-border-subtle px-4 py-3 flex justify-end gap-2 z-10`,children:[(0,s.jsxs)(`button`,{type:`button`,onClick:_,className:`px-3 py-1 border border-border-default text-fg-default rounded-control-small text-sm hover:bg-bg-subtle transition-colors flex items-center gap-1`,children:[(0,s.jsx)(n.RotateCcw,{size:12}),(0,s.jsx)(`span`,{className:`text-xs`,children:`초기화`})]}),(0,s.jsxs)(`button`,{type:`button`,onClick:g,className:`px-3 py-1 bg-primary text-fg-inverse rounded-control-small transition-colors flex items-center gap-1 hover:bg-primary-hover`,children:[(0,s.jsx)(r.Save,{size:12}),(0,s.jsx)(`span`,{className:`text-xs`,children:`저장`})]})]})]})}exports.ColumnSettingsTable=p;

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

@@ -1,4 +1,4 @@
-import { TableColumn, TableColumnGroupMeta } from '../types';
+import { TableColumn, TableColumnGroupMeta } from '../types.js';
 /** ColumnSettingsTable의 max-height. ColumnPresetSelector의 dropdown 위치 계산에 공유돼요. */
 export declare const COLUMN_SETTINGS_DROPDOWN_MAX_HEIGHT = 500;
 interface ColumnSettingsTableProps<T> {

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

@@ -0,0 +1,194 @@
+import { cn as e } from "../../../lib/utils.esm.js";
+import { GripVertical as t } from "../../../node_modules/lucide-react/dist/esm/icons/grip-vertical.esm.js";
+import { RotateCcw as n } from "../../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
+import { Save as r } from "../../../node_modules/lucide-react/dist/esm/icons/save.esm.js";
+import { TableCheckbox as i } from "../../table-checkbox/TableCheckbox.esm.js";
+import { buildColumnSlots as a } from "../column-group-utils.esm.js";
+import { useEffect as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { DndContext as u, KeyboardSensor as d, PointerSensor as f, closestCenter as p, useSensor as m, useSensors as h } from "@dnd-kit/core";
+import { SortableContext as g, arrayMove as _, sortableKeyboardCoordinates as v, useSortable as y, verticalListSortingStrategy as b } from "@dnd-kit/sortable";
+import { CSS as x } from "@dnd-kit/utilities";
+function S({ slot: n, index: r, isHidden: a, width: o, onHiddenChange: s, onSetColumnWidth: u }) {
+	let { attributes: d, listeners: f, setNodeRef: p, transform: m, transition: h, isDragging: g } = y({ id: n.key }), _ = {
+		transform: x.Transform.toString(m),
+		transition: h,
+		opacity: g ? .5 : 1
+	}, v = typeof n.header == "string" ? n.header : n.key, b = n.kind === "group";
+	return /* @__PURE__ */ l("tr", {
+		ref: p,
+		style: _,
+		className: e("border-b border-border-subtle transition-colors", a ? "bg-bg-subtle text-fg-subtle" : "bg-bg-surface text-fg-default hover:bg-bg-subtle"),
+		children: [
+			/* @__PURE__ */ c("td", {
+				className: "w-10 px-2 py-2 text-center cursor-grab active:cursor-grabbing",
+				...d,
+				...f,
+				children: /* @__PURE__ */ c(t, {
+					size: 16,
+					className: "text-icon-tertiary mx-auto"
+				})
+			}),
+			/* @__PURE__ */ l("td", {
+				className: "px-2 py-2 text-sm whitespace-nowrap",
+				children: [v, b && /* @__PURE__ */ l("span", {
+					className: "ml-1.5 text-xs text-fg-subtle",
+					children: [
+						"(그룹 · ",
+						n.leafColumns.length,
+						"개)"
+					]
+				})]
+			}),
+			/* @__PURE__ */ c("td", {
+				className: "w-14 px-2 py-2 text-center text-sm",
+				children: r + 1
+			}),
+			/* @__PURE__ */ c("td", {
+				className: "w-20 px-2 py-2 text-center text-sm tabular-nums",
+				children: b ? /* @__PURE__ */ c("span", {
+					className: "text-fg-subtle",
+					children: "—"
+				}) : u ? /* @__PURE__ */ c(C, {
+					columnKey: n.key,
+					width: o,
+					onSetColumnWidth: u
+				}) : /* @__PURE__ */ c("span", {
+					className: "text-fg-subtle",
+					children: o ? `${o}px` : "—"
+				})
+			}),
+			/* @__PURE__ */ c("td", {
+				className: "w-14 px-2 py-2 text-center",
+				children: /* @__PURE__ */ c("div", {
+					className: "flex justify-center",
+					children: /* @__PURE__ */ c(i, {
+						checked: a,
+						onChange: (e) => s(n.key, !e),
+						ariaLabel: `${v} 숨김`
+					})
+				})
+			})
+		]
+	});
+}
+function C({ columnKey: e, width: t, onSetColumnWidth: n }) {
+	let [r, i] = s(t ? String(t) : "");
+	return o(() => {
+		i(t ? String(t) : "");
+	}, [t]), /* @__PURE__ */ c("input", {
+		type: "text",
+		inputMode: "numeric",
+		pattern: "[0-9]*",
+		value: r,
+		placeholder: "auto",
+		onChange: (e) => i(e.target.value.replace(/[^0-9]/g, "")),
+		onBlur: () => {
+			if (r === "") {
+				n(e, 0);
+				return;
+			}
+			let t = Number(r);
+			if (!Number.isFinite(t) || t <= 0) {
+				n(e, 0), i("");
+				return;
+			}
+			n(e, Math.max(20, Math.floor(t)));
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" ? (e.preventDefault(), e.target.blur()) : e.key === "Escape" && (i(t ? String(t) : ""), e.target.blur());
+		},
+		"aria-label": `${e} 컬럼 너비 (px)`,
+		className: "w-16 rounded-control-mini border border-border-subtle bg-bg-surface px-1.5 py-0.5 text-center text-xs 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"
+	});
+}
+function w({ columns: e, columnGroups: t, columnOrder: i, hiddenColumns: o, columnWidths: s, num: y, onOrderChange: x, onHiddenChange: C, onSetColumnWidth: w, onSave: T, onReset: E }) {
+	let D = h(m(f, { activationConstraint: { distance: 5 } }), m(d, { coordinateGetter: v })), O = a(e, t), k = new Map(O.map((e) => [e.key, e])), A = i.map((e) => k.get(e)).filter((e) => !!e);
+	return /* @__PURE__ */ l("div", {
+		className: "w-full overflow-y-auto bg-bg-surface text-fg-default",
+		style: { maxHeight: 500 },
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "sticky top-0 bg-bg-subtle px-4 py-3 font-semibold z-10 border-b border-border-subtle",
+				children: [/* @__PURE__ */ c("span", {
+					className: "text-base",
+					children: "컬럼 설정"
+				}), /* @__PURE__ */ l("span", {
+					className: "ml-2 text-sm text-fg-subtle",
+					children: ["프리셋 ", y]
+				})]
+			}),
+			/* @__PURE__ */ c(u, {
+				sensors: D,
+				collisionDetection: p,
+				onDragEnd: (e) => {
+					let { active: t, over: n } = e;
+					if (!n || t.id === n.id) return;
+					let r = i.indexOf(String(t.id)), a = i.indexOf(String(n.id));
+					r === -1 || a === -1 || x(_(i, r, a));
+				},
+				children: /* @__PURE__ */ l("table", {
+					className: "w-full",
+					children: [/* @__PURE__ */ c("thead", {
+						className: "bg-bg-subtle sticky top-12 z-10",
+						children: /* @__PURE__ */ l("tr", {
+							className: "border-y border-border-subtle font-bold",
+							children: [
+								/* @__PURE__ */ c("th", { className: "w-10 px-2 py-2" }),
+								/* @__PURE__ */ c("th", {
+									className: "px-2 py-2 text-center text-sm font-medium text-fg-muted whitespace-nowrap",
+									children: "컬럼명"
+								}),
+								/* @__PURE__ */ c("th", {
+									className: "w-14 px-2 py-2 text-center text-sm font-medium text-fg-muted",
+									children: "순서"
+								}),
+								/* @__PURE__ */ c("th", {
+									className: "w-20 px-2 py-2 text-center text-sm font-medium text-fg-muted",
+									children: "너비"
+								}),
+								/* @__PURE__ */ c("th", {
+									className: "w-14 px-2 py-2 text-center text-sm font-medium text-fg-muted",
+									children: "숨김"
+								})
+							]
+						})
+					}), /* @__PURE__ */ c("tbody", { children: /* @__PURE__ */ c(g, {
+						items: i,
+						strategy: b,
+						children: A.map((e, t) => /* @__PURE__ */ c(S, {
+							slot: e,
+							index: t,
+							isHidden: o.includes(e.key),
+							width: s[e.key],
+							onHiddenChange: C,
+							onSetColumnWidth: w
+						}, e.key))
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "sticky bottom-0 bg-bg-surface border-t border-border-subtle px-4 py-3 flex justify-end gap-2 z-10",
+				children: [/* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: E,
+					className: "px-3 py-1 border border-border-default text-fg-default rounded-control-small text-sm hover:bg-bg-subtle transition-colors flex items-center gap-1",
+					children: [/* @__PURE__ */ c(n, { size: 12 }), /* @__PURE__ */ c("span", {
+						className: "text-xs",
+						children: "초기화"
+					})]
+				}), /* @__PURE__ */ l("button", {
+					type: "button",
+					onClick: T,
+					className: "px-3 py-1 bg-primary text-fg-inverse rounded-control-small transition-colors flex items-center gap-1 hover:bg-primary-hover",
+					children: [/* @__PURE__ */ c(r, { size: 12 }), /* @__PURE__ */ c("span", {
+						className: "text-xs",
+						children: "저장"
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { w as ColumnSettingsTable };

package/dist/components/table/components/KeyboardNavButton.cjs

@@ -0,0 +1 @@
+const e=require("../../../node_modules/lucide-react/dist/esm/icons/keyboard.cjs");let t=require("react/jsx-runtime");function n({onKeyDown:n}){return(0,t.jsxs)(`button`,{type:`button`,onKeyDown:n,title:`키보드로 페이지 이동 (포커스 후 ← / → 키)`,"aria-label":`키보드로 페이지 이동 활성화`,className:`group/kbd inline-flex items-center gap-0 rounded-control-mini border border-border-subtle bg-bg-surface px-1.5 py-1 text-fg-muted transition-[color,background-color,border-color,gap] duration-200 hover:border-primary-border hover:text-primary-fg focus:gap-1.5 focus:border-primary focus:bg-primary-subtle focus:text-primary-fg focus:outline-hidden focus-visible:ring-control focus-visible:ring-focus-primary pointer-coarse:hidden`,children:[(0,t.jsx)(e.Keyboard,{className:`h-3.5 w-3.5 shrink-0`,"aria-hidden":`true`}),(0,t.jsx)(`span`,{className:`grid grid-cols-[0fr] overflow-hidden text-xs tabular-nums opacity-0 transition-[grid-template-columns,opacity] duration-200 group-focus/kbd:grid-cols-[1fr] group-focus/kbd:opacity-100`,children:(0,t.jsx)(`span`,{className:`min-w-0 whitespace-nowrap`,children:`← / → 키로 이동 중`})})]})}exports.KeyboardNavButton=n;

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

@@ -0,0 +1,24 @@
+import { Keyboard as e } from "../../../node_modules/lucide-react/dist/esm/icons/keyboard.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/table/components/KeyboardNavButton.tsx
+function r({ onKeyDown: r }) {
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		onKeyDown: r,
+		title: "키보드로 페이지 이동 (포커스 후 ← / → 키)",
+		"aria-label": "키보드로 페이지 이동 활성화",
+		className: "group/kbd inline-flex items-center gap-0 rounded-control-mini border border-border-subtle bg-bg-surface px-1.5 py-1 text-fg-muted transition-[color,background-color,border-color,gap] duration-200 hover:border-primary-border hover:text-primary-fg focus:gap-1.5 focus:border-primary focus:bg-primary-subtle focus:text-primary-fg focus:outline-hidden focus-visible:ring-control focus-visible:ring-focus-primary pointer-coarse:hidden",
+		children: [/* @__PURE__ */ t(e, {
+			className: "h-3.5 w-3.5 shrink-0",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ t("span", {
+			className: "grid grid-cols-[0fr] overflow-hidden text-xs tabular-nums opacity-0 transition-[grid-template-columns,opacity] duration-200 group-focus/kbd:grid-cols-[1fr] group-focus/kbd:opacity-100",
+			children: /* @__PURE__ */ t("span", {
+				className: "min-w-0 whitespace-nowrap",
+				children: "← / → 키로 이동 중"
+			})
+		})]
+	});
+}
+//#endregion
+export { r as KeyboardNavButton };

package/dist/components/table/components/PageJumpInput.cjs

@@ -0,0 +1 @@
+const e=require("../../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({currentPage:r,totalPages:i,onPageChange:a,className:o=``,"data-testid":s}){let[c,l]=(0,t.useState)(``),u=e=>{let t=e.replace(/[^0-9]/g,``);if(t===``){l(``);return}let n=Number(t);if(n<=0){l(``);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(0,n.jsxs)(`label`,{className:e.cn(`flex items-center gap-1 text-sm text-fg-muted`,o),children:[(0,n.jsx)(`span`,{className:`text-fg-muted`,children:`이동`}),(0,n.jsx)(`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:e.cn(m,`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`)}),(0,n.jsxs)(`span`,{className:`text-fg-muted tabular-nums`,children:[`/ `,i.toLocaleString()]})]})}exports.PageJumpInput=r;

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

@@ -0,0 +1,54 @@
+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 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 === "") {
+			u("");
+			return;
+		}
+		let n = Number(t);
+		if (n <= 0) {
+			u("");
+			return;
+		}
+		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__ */ n("span", {
+				className: "text-fg-muted",
+				children: "이동"
+			}),
+			/* @__PURE__ */ n("input", {
+				type: "text",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				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__ */ r("span", {
+				className: "text-fg-muted tabular-nums",
+				children: ["/ ", a.toLocaleString()]
+			})
+		]
+	});
+}
+//#endregion
+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;