@thewrong/ui 0.2.0 → 0.3.0

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

@@ -1,42 +1,43 @@
-import { Settings as e } from "../../../node_modules/lucide-react/dist/esm/icons/settings.esm.js";
-import { useIsMobile as t } from "../../../hooks/useMediaQuery.esm.js";
-import { Modal as n } from "../../modal/Modal.esm.js";
-import { ColumnSettingsTable as r } from "./ColumnSettingsTable.esm.js";
-import { useId as ee, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { motion as te } from "motion/react";
-import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, size as f, useClick as p, useDismiss as ne, useFloating as re, useInteractions as m, useRole as h } from "@floating-ui/react";
-import g from "react-hot-toast";
+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 _ = 500, v = 12, y = 5, b = [
+var v = 500, y = 12, b = 5, x = [
 	1,
 	2,
 	3
 ];
-function x({ columns: x, columnGroups: S, 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 = x.filter((e) => !e.excludeFromPreset), L = new Set(x.filter((e) => e.excludeFromPreset).map((e) => e.key)), [R, z] = i(!1), B = t(), V = ee(), { refs: H, floatingStyles: U, context: W } = re({
+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: c,
+		whileElementsMounted: te,
 		middleware: [
-			u(y),
-			l(),
-			d({ padding: v }),
-			f({ apply({ availableWidth: e, elements: t }) {
-				let n = Math.min(_, e);
+			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: `${_}px`
+					maxWidth: `${v}px`
 				});
 			} })
 		]
-	}), { getReferenceProps: G, getFloatingProps: K } = m([
-		p(W),
-		ne(W),
-		h(W, { role: "dialog" })
+	}), { getReferenceProps: G, getFloatingProps: K } = ne([
+		m(W),
+		h(W),
+		re(W, { role: "dialog" })
 	]), q = (e) => {
-		C !== e && (k(e), z(!1), g.success(`프리셋 ${e}을(를) 적용했어요.`));
+		C !== e && (k(e), z(!1), _.success(`프리셋 ${e}을(를) 적용했어요.`));
 	}, J = (e) => {
 		let t = w.map((e, t) => ({
 			key: e,
@@ -50,87 +51,87 @@ function x({ columns: x, columnGroups: S, activePreset: C, columnOrder: w, hidde
 		if (t) N(T.filter((t) => t !== e));
 		else {
 			if (w.length - L.size - T.filter((e) => !L.has(e)).length <= 1) {
-				g.error("최소 1개 이상의 컬럼은 표시되어야 해요.");
+				_.error("최소 1개 이상의 컬럼은 표시되어야 해요.");
 				return;
 			}
 			N([...T, e]);
 		}
 	}, X = () => {
 		if (!A()) {
-			g.error("저장할 수 없는 상태예요.");
+			_.error("저장할 수 없는 상태예요.");
 			return;
 		}
-		z(!1), g.success(`프리셋 ${C}에 저장했어요.`);
+		z(!1), _.success(`프리셋 ${C}에 저장했어요.`);
 	}, Z = () => {
-		j(), z(!1), g.success(`프리셋 ${C}을(를) 초기화했어요.`);
+		j(), z(!1), _.success(`프리셋 ${C}을(를) 초기화했어요.`);
 	}, Q = w.filter((e) => !L.has(e)), $ = T.filter((e) => !L.has(e));
-	return /* @__PURE__ */ o("div", {
-		className: `inline-flex ${F}`,
+	return /* @__PURE__ */ c("div", {
+		className: e("inline-flex", F),
 		children: [
-			/* @__PURE__ */ o("div", {
-				className: "inline-flex h-7.5 items-center gap-0 rounded-full bg-bg-base-secondary p-0.75 sm:h-8.5",
+			/* @__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__ */ o("button", {
+					/* @__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-text-secondary transition-colors hover:text-text-primary sm:h-7 sm:w-7"
+							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-text-secondary transition-colors hover:text-text-primary sm:h-7 sm:w-7"
+							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__ */ a(e, { className: "h-3 w-3 sm:h-3.5 sm:w-3.5" }), D && /* @__PURE__ */ a("span", {
+						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-brand-blue-secondary"
+							className: "absolute top-0.5 right-0.5 h-1.5 w-1.5 rounded-full bg-error"
 						})]
 					}),
-					/* @__PURE__ */ a("span", {
+					/* @__PURE__ */ s("span", {
 						"aria-hidden": "true",
-						className: "ml-0.5 mr-1.5 h-4 w-px bg-bg-base-tertiary sm:h-4.5"
+						className: "ml-0.5 mr-1.5 h-4 w-px bg-border-subtle sm:h-4.5"
 					}),
-					b.map((e) => {
-						let t = C === e;
-						return /* @__PURE__ */ o("button", {
+					x.map((t) => {
+						let n = C === t;
+						return /* @__PURE__ */ c("button", {
 							type: "button",
-							onClick: () => q(e),
-							"aria-pressed": t,
-							title: t ? "현재 활성화된 프리셋이에요" : O(e) ? `프리셋 ${e} 적용` : `프리셋 ${e} 기본값으로 초기화`,
-							className: `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 ${t ? "text-text-primary" : "text-text-secondary"}`,
-							children: [t && /* @__PURE__ */ a(te.span, {
+							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-white shadow-sm dark:bg-bg-base-tertiary",
+								className: "absolute inset-0 rounded-full bg-bg-surface shadow-control",
 								transition: {
 									type: "spring",
 									stiffness: 500,
 									damping: 38
 								}
-							}), /* @__PURE__ */ o("span", {
+							}), /* @__PURE__ */ c("span", {
 								className: "relative",
-								children: [/* @__PURE__ */ a("span", {
+								children: [/* @__PURE__ */ s("span", {
 									className: "hidden sm:inline",
 									children: "프리셋"
-								}), e]
+								}), t]
 							})]
-						}, e);
+						}, t);
 					})
 				]
 			}),
-			!B && R && /* @__PURE__ */ a(s, { children: /* @__PURE__ */ a("div", {
+			!B && R && /* @__PURE__ */ s(ee, { children: /* @__PURE__ */ s("div", {
 				ref: H.setFloating,
 				style: U,
 				...K(),
-				className: "z-50 overflow-hidden rounded-lg border-2 border-neutral-200 shadow-lg dark:border-neutral-700",
-				children: /* @__PURE__ */ a(r, {
+				className: "z-floating overflow-hidden rounded-surface border-2 border-border-subtle shadow-overlay",
+				children: /* @__PURE__ */ s(i, {
 					num: String(C),
 					columns: I,
-					columnGroups: S,
+					columnGroups: ie,
 					columnOrder: Q,
 					hiddenColumns: $,
 					columnWidths: E,
@@ -141,11 +142,11 @@ function x({ columns: x, columnGroups: S, activePreset: C, columnOrder: w, hidde
 					onReset: Z
 				})
 			}) }),
-			B && /* @__PURE__ */ a(n, {
+			B && /* @__PURE__ */ s(r, {
 				isOpen: R,
 				onClose: () => z(!1),
 				title: `프리셋 ${C} 설정`,
-				children: /* @__PURE__ */ a(r, {
+				children: /* @__PURE__ */ s(i, {
 					num: String(C),
 					columns: I,
 					columnOrder: Q,
@@ -162,4 +163,4 @@ function x({ columns: x, columnGroups: S, activePreset: C, columnOrder: w, hidde
 	});
 }
 //#endregion
-export { x as ColumnPresetSelector };
+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

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

@@ -7,7 +7,7 @@ function r({ onKeyDown: r }) {
 		onKeyDown: r,
 		title: "키보드로 페이지 이동 (포커스 후 ← / → 키)",
 		"aria-label": "키보드로 페이지 이동 활성화",
-		className: "group/kbd inline-flex items-center gap-0 rounded border border-neutral-300 bg-white px-1.5 py-1 text-neutral-500 transition-[color,background-color,border-color,gap] duration-200 hover:border-primary-300 hover:text-primary-600 focus:gap-1.5 focus:border-primary-500 focus:bg-primary-50 focus:text-primary-700 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-200 dark:border-neutral-600 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:border-primary-400 dark:focus:bg-primary-950/40 dark:focus:text-primary-300 pointer-coarse:hidden",
+		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"

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;