@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/stepper/use-stepper.d.ts

@@ -0,0 +1,43 @@
+export interface UseStepperOptions {
+    stepCount: number;
+    initialStep?: number;
+    allowNonLinear?: boolean;
+}
+export interface StepperState {
+    currentStep: number;
+    direction: 1 | -1;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    next: () => void;
+    previous: () => void;
+    goTo: (step: number) => void;
+    reset: () => void;
+}
+interface InternalState {
+    currentStep: number;
+    direction: 1 | -1;
+}
+type Action = {
+    type: "next";
+    stepCount: number;
+} | {
+    type: "previous";
+    stepCount: number;
+} | {
+    type: "clamp";
+    stepCount: number;
+} | {
+    type: "reset";
+    target: number;
+    stepCount: number;
+} | {
+    type: "move";
+    target: number;
+    stepCount: number;
+    allowNonLinear: boolean;
+};
+export declare function stepperReducer(state: InternalState, action: Action): InternalState;
+/** 0부터 시작하는 단계 상태를 관리한다. 검증과 제출은 호출부에서 처리한다.
+ * 기본 이동은 한 단계로 제한되며 임의 이동이 필요하면 allowNonLinear를 켠다. */
+export declare function useStepper({ stepCount, initialStep, allowNonLinear, }: UseStepperOptions): StepperState;
+export {};

package/dist/components/stepper/use-stepper.esm.js

@@ -0,0 +1,57 @@
+import { useEffect as e, useReducer as t } from "react";
+//#region src/components/stepper/use-stepper.ts
+function n(e, t) {
+	return Math.min(Math.max(0, e), Math.max(0, t - 1));
+}
+function r(e, t) {
+	let r = e.currentStep;
+	if (t.type === "next" && (r += 1), t.type === "previous" && --r, t.type === "move") {
+		let i = n(t.target, t.stepCount);
+		if (!t.allowNonLinear && Math.abs(i - e.currentStep) > 1) return e;
+		r = i;
+	}
+	t.type === "reset" && (r = t.target);
+	let i = n(r, t.stepCount);
+	return i === e.currentStep ? e : {
+		currentStep: i,
+		direction: i > e.currentStep ? 1 : -1
+	};
+}
+function i({ stepCount: i, initialStep: a = 0, allowNonLinear: o = !1 }) {
+	let s = n(a, i), [c, l] = t(r, {
+		currentStep: s,
+		direction: 1
+	}), u = n(c.currentStep, i), d = u === c.currentStep ? c.direction : u > c.currentStep ? 1 : -1;
+	return e(() => {
+		l({
+			type: "clamp",
+			stepCount: i
+		});
+	}, [i]), {
+		currentStep: u,
+		direction: d,
+		canGoNext: u < i - 1,
+		canGoPrevious: u > 0,
+		next: () => l({
+			type: "next",
+			stepCount: i
+		}),
+		previous: () => l({
+			type: "previous",
+			stepCount: i
+		}),
+		goTo: (e) => l({
+			type: "move",
+			target: e,
+			stepCount: i,
+			allowNonLinear: o
+		}),
+		reset: () => l({
+			type: "reset",
+			target: s,
+			stepCount: i
+		})
+	};
+}
+//#endregion
+export { i as useStepper };

package/dist/components/switch/Switch.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(({size:n=`medium`,label:i,className:a=``,disabled:o=!1,onCheckedChange:s,onChange:c,...l},u)=>(0,r.jsxs)(`label`,{className:e.cn(`inline-flex items-center gap-2`,o?`cursor-not-allowed`:`cursor-pointer`,a),children:[(0,r.jsxs)(`span`,{className:`relative inline-flex items-center`,children:[(0,r.jsx)(`input`,{ref:u,type:`checkbox`,className:`peer sr-only`,disabled:o,onChange:e=>{c?.(e),s?.(e.target.checked)},...l}),(0,r.jsx)(`span`,{"aria-hidden":!0,className:t.getSwitchTrackClasses(n,o)}),(0,r.jsx)(`span`,{"aria-hidden":!0,className:t.getSwitchThumbClasses(n,o)})]}),i&&(0,r.jsx)(`span`,{className:o?`text-sm text-fg-disabled`:`text-sm text-fg-default`,children:i})]}));i.displayName=`Switch`,exports.Switch=i;

package/dist/{src/components → components}/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { SwitchProps } from './types';
+import { SwitchProps } from './types.js';
 /**
  * On/Off 토글 스위치.
  *

package/dist/components/switch/Switch.esm.js

@@ -0,0 +1,37 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { getSwitchThumbClasses as t, getSwitchTrackClasses as n } from "./utils.esm.js";
+import { forwardRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/switch/Switch.tsx
+var o = r(({ size: r = "medium", label: o, className: s = "", disabled: c = !1, onCheckedChange: l, onChange: u, ...d }, f) => /* @__PURE__ */ a("label", {
+	className: e("inline-flex items-center gap-2", c ? "cursor-not-allowed" : "cursor-pointer", s),
+	children: [/* @__PURE__ */ a("span", {
+		className: "relative inline-flex items-center",
+		children: [
+			/* @__PURE__ */ i("input", {
+				ref: f,
+				type: "checkbox",
+				className: "peer sr-only",
+				disabled: c,
+				onChange: (e) => {
+					u?.(e), l?.(e.target.checked);
+				},
+				...d
+			}),
+			/* @__PURE__ */ i("span", {
+				"aria-hidden": !0,
+				className: n(r, c)
+			}),
+			/* @__PURE__ */ i("span", {
+				"aria-hidden": !0,
+				className: t(r, c)
+			})
+		]
+	}), o && /* @__PURE__ */ i("span", {
+		className: c ? "text-sm text-fg-disabled" : "text-sm text-fg-default",
+		children: o
+	})]
+}));
+o.displayName = "Switch";
+//#endregion
+export { o as Switch };

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

@@ -0,0 +1,2 @@
+export { Switch } from './Switch.js';
+export type { SwitchProps, SwitchSize } from './types.js';

package/dist/components/switch/utils.cjs

@@ -0,0 +1 @@
+var e={small:{track:`h-5 w-9`,thumb:`h-3.5 w-3.5`,translate:`peer-checked:translate-x-4`},medium:{track:`h-6 w-11`,thumb:`h-4.5 w-4.5`,translate:`peer-checked:translate-x-5`}};function t(t,n){let{track:r}=e[t];return n?[`relative inline-flex shrink-0 items-center rounded-full`,r,`bg-bg-disabled ring-1 ring-inset ring-border-default cursor-not-allowed`].join(` `):[`relative inline-flex shrink-0 items-center rounded-full cursor-pointer`,r,`bg-bg-muted`,`peer-checked:bg-primary`,`peer-focus-visible:ring-control peer-focus-visible:ring-focus-primary peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-surface`,`transition-colors duration-200 ease-out`].join(` `)}function n(t,n=!1){let{thumb:r,translate:i}=e[t];return[`pointer-events-none absolute left-[3px] top-[3px] inline-block rounded-full`,n?`bg-fg-disabled shadow-none`:`bg-fg-inverse shadow-control`,r,i,`transition-transform duration-200 ease-out`].join(` `)}exports.getSwitchThumbClasses=n,exports.getSwitchTrackClasses=t;

package/dist/{src/components → components}/switch/utils.d.ts

@@ -1,4 +1,4 @@
-import { SwitchSize } from './types';
+import { SwitchSize } from './types.js';
 /**
  * 트랙(외곽) 사이즈 매핑.
  * 노브는 트랙 안에서 padding 2px만큼 들어가 있고, ON 시 (트랙 width − 노브 width − padding × 2)만큼 우측 이동.
@@ -11,4 +11,4 @@ export declare const SWITCH_SIZE_MAP: Record<SwitchSize, {
 /** 트랙(외곽 박스) 클래스. peer-checked로 ON/OFF 색 전환. */
 export declare function getSwitchTrackClasses(size: SwitchSize, disabled: boolean): string;
 /** 노브(원형) 클래스. translateX로 좌→우 이동. wrapper 기준 absolute로 트랙 위에 뜬다. */
-export declare function getSwitchThumbClasses(size: SwitchSize): string;
+export declare function getSwitchThumbClasses(size: SwitchSize, disabled?: boolean): string;

package/dist/components/switch/utils.esm.js

@@ -0,0 +1,40 @@
+//#region src/components/switch/utils.ts
+var e = {
+	small: {
+		track: "h-5 w-9",
+		thumb: "h-3.5 w-3.5",
+		translate: "peer-checked:translate-x-4"
+	},
+	medium: {
+		track: "h-6 w-11",
+		thumb: "h-4.5 w-4.5",
+		translate: "peer-checked:translate-x-5"
+	}
+};
+function t(t, n) {
+	let { track: r } = e[t];
+	return n ? [
+		"relative inline-flex shrink-0 items-center rounded-full",
+		r,
+		"bg-bg-disabled ring-1 ring-inset ring-border-default cursor-not-allowed"
+	].join(" ") : [
+		"relative inline-flex shrink-0 items-center rounded-full cursor-pointer",
+		r,
+		"bg-bg-muted",
+		"peer-checked:bg-primary",
+		"peer-focus-visible:ring-control peer-focus-visible:ring-focus-primary peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-surface",
+		"transition-colors duration-200 ease-out"
+	].join(" ");
+}
+function n(t, n = !1) {
+	let { thumb: r, translate: i } = e[t];
+	return [
+		"pointer-events-none absolute left-[3px] top-[3px] inline-block rounded-full",
+		n ? "bg-fg-disabled shadow-none" : "bg-fg-inverse shadow-control",
+		r,
+		i,
+		"transition-transform duration-200 ease-out"
+	].join(" ");
+}
+//#endregion
+export { n as getSwitchThumbClasses, t as getSwitchTrackClasses };

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../checkbox/Checkbox.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-right.cjs"),r=require("../loading-spinner/LoadingSpinner.cjs"),i=require("../select/Select.cjs"),a=require("./components/SortableHeaderCell.cjs"),o=require("./hooks/useColumnResize.cjs"),s=require("../../hooks/useFillEmptyRows.cjs"),ee=require("./hooks/useTableSort.cjs"),c=require("./utils.cjs"),te=require("./components/KeyboardNavButton.cjs"),ne=require("./components/PageJumpInput.cjs"),re=require("./components/Pagination.cjs");let l=require("react"),u=require("react/jsx-runtime"),d=require("@dnd-kit/core"),f=require("@dnd-kit/sortable");var ie=[30,50,100],p=36,m=(0,l.forwardRef)((m,h)=>{let{data:g,columns:_,rowHeight:v,loading:ae=!1,emptyMessage:oe=`데이터가 없어요`,onRowClick:y,selectedRows:b=[],onRowSelect:x,enableRowSelection:S=!1,enableSelectAll:C=!1,rowCompare:w,enableSorting:T=!1,serverSideSorting:E=!1,onSortChange:se,initialSort:ce,variant:le=`default`,size:ue=`medium`,stickyHeader:D=!0,height:O,maxHeight:k,currentPage:A,totalPages:j,onPageChange:M,pageSize:N,pageSizeOptions:de=ie,onPageSizeChange:P,totalElements:F,storageKey:fe,columnState:I,fillEmptyRows:L=!0,enableKeyboardPagination:R=!0,expandable:z,className:B=``,"data-testid":V,...H}=m,U=!!z,W=z?.stickyDetail??!0,{sort:pe,sortedData:G}=ee.useTableSort({initialSort:ce,serverSide:E,onSort:se||void 0}),K=(0,l.useMemo)(()=>!T||E?g:G(g,(e,t)=>{let n=_.find(e=>e.key===t);if(n?.accessor){let r=n.accessor(e);return typeof r==`string`||typeof r==`number`?r:e[t]}return e[t]}),[g,T,E,pe,G,_]),q=(0,l.useRef)(null),J=(0,l.useRef)(null),Y=(0,l.useRef)(null),X=(0,l.useRef)(null),[me,he]=(0,l.useState)(0),ge=!!I,_e=(0,d.useSensors)((0,d.useSensor)(d.PointerSensor,{activationConstraint:{distance:5}}),(0,d.useSensor)(d.KeyboardSensor,{coordinateGetter:f.sortableKeyboardCoordinates})),ve=e=>{let{active:t,over:n}=e;if(!I||!n||t.id===n.id||_.find(e=>e.key===n.id)?.excludeFromPreset)return;let r=I.columnOrder,i=r.indexOf(String(t.id)),a=r.indexOf(String(n.id));i===-1||a===-1||I.onColumnOrderChange((0,f.arrayMove)(r,i,a))},Z=(0,l.useMemo)(()=>{if(!I)return _.filter(e=>!e.hidden);let e=new Map(_.map(e=>[e.key,e])),t=new Set(I.hiddenColumns);return I.columnOrder.map(t=>e.get(t)).filter(e=>!!e).filter(e=>!e.hidden&&!t.has(e.key))},[_,I]),{handleMouseDown:ye,handleDoubleClick:be,getColumnWidth:Q,measureRef:xe}=o.useColumnResize({columns:Z,data:K,getCellContent:(e,t)=>{let n=Z.find(e=>e.key===t);return n?.accessor?n.accessor(e):e[t]},tableRef:q,...I?{controlledWidths:I.columnWidths,onColumnWidthsChange:I.onColumnWidthsChange}:{storageKey:fe}}),Se=c.getTableBaseClasses(),Ce=c.getTableVariantClasses(le),we=c.getTableSizeClasses(ue),Te=(0,l.useMemo)(()=>{let e={};return O&&(e.height=typeof O==`number`?`${O}px`:O),k&&(e.maxHeight=typeof k==`number`?`${k}px`:k),e},[O,k]),{emptyRowCount:Ee,measuredRowHeight:De}=s.useFillEmptyRows({enabled:L,containerRef:J,theadRef:Y,tbodyRef:X,excludeRowsSelector:`tr:not([data-empty-row]):not([data-expanded-row])`,remainingMode:`tbody-height`,observeTbody:!0,deps:[K,Z]});(0,l.useLayoutEffect)(()=>{if(!W||!U)return;let e=J.current;if(!e)return;let t=()=>{he(t=>t===e.clientWidth?t:e.clientWidth)};t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[W,U]);let Oe=e=>{e.altKey||e.metaKey||e.ctrlKey||e.shiftKey||(e.key===`ArrowLeft`&&A>1?(e.preventDefault(),M(A-1)):e.key===`ArrowRight`&&A<j&&(e.preventDefault(),M(A+1)))},$=e=>!S||b.length===0?!1:w?b.some(t=>w(t,e)):b.some(t=>t===e),ke=(0,l.useMemo)(()=>!S||!C||K.length===0?!1:K.every(e=>$(e)),[S,C,K,$]),Ae=()=>{!S||!x||(ke?K.forEach(e=>{$(e)&&x(e,!1)}):K.forEach(e=>{$(e)||x(e,!0)}))},je=(t,n)=>{let r=[c.getStripedRowClasses(n)];return $(t)&&r.push(c.getSelectedRowClasses()),(y||U)&&r.push(c.getHoverableRowClasses()),e.cn(r)},Me=!!P||F!==void 0||typeof j==`number`&&j>0,Ne=e=>{z&&z.onToggle(z.getRowId(e))},Pe=(e,t)=>{U&&(e.key===` `||e.key===`Enter`)&&(e.preventDefault(),Ne(t))},Fe=(S&&C?1:0)+ +!!U+Z.length+1;return ae?(0,u.jsx)(`div`,{ref:h,className:e.cn(`flex items-center justify-center p-8 flex-1`,B),style:Te,"data-testid":V,...H,children:(0,u.jsx)(r.LoadingSpinner,{message:`데이터를 불러오는 중이에요...`,className:`min-h-0`})}):(0,u.jsxs)(`div`,{ref:h,className:e.cn(`isolate relative flex flex-col min-h-0`,B),style:Te,"data-testid":V,...H,children:[(0,u.jsx)(`div`,{ref:xe,className:`absolute invisible whitespace-nowrap`,style:{top:`-9999px`,left:`-9999px`}}),(0,u.jsxs)(`div`,{className:`flex flex-1 flex-col min-h-0`,children:[(0,u.jsx)(`div`,{ref:J,className:`overflow-auto flex-1 bg-bg-page`,children:K.length===0?(0,u.jsx)(`div`,{className:`flex items-center justify-center p-8 h-full`,children:(0,u.jsx)(`p`,{className:`text-fg-muted`,children:oe})}):(0,u.jsx)(d.DndContext,{sensors:_e,collisionDetection:d.closestCenter,onDragEnd:ve,children:(0,u.jsxs)(`table`,{ref:q,className:e.cn(Se,Ce,we),style:{tableLayout:`fixed`,minWidth:`100%`,width:`100%`},children:[(0,u.jsxs)(`colgroup`,{children:[S&&C&&(0,u.jsx)(`col`,{style:{width:`48px`}}),U&&(0,u.jsx)(`col`,{style:{width:`${p}px`}}),Z.map(e=>(0,u.jsx)(`col`,{"data-col-key":e.key,style:{width:Q(e.key,e.width)}},e.key)),(0,u.jsx)(`col`,{style:{width:`100%`}})]}),(0,u.jsx)(`thead`,{ref:Y,className:c.getTableHeaderClasses(),style:{position:D?`sticky`:`relative`,top:D?0:void 0,zIndex:D?20:void 0},children:(0,u.jsxs)(`tr`,{children:[S&&C&&(0,u.jsx)(`th`,{className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(`center`),`border-r-0 w-12`),children:(0,u.jsx)(t.Checkbox.Circle,{id:`accordion-table-select-all`,size:20,checked:ke,onCheckedChange:Ae})}),U&&(0,u.jsx)(`th`,{"aria-hidden":`true`,className:e.cn(c.getTableHeaderCellClasses(),`border-r-0`),style:{width:`${p}px`}}),(0,u.jsx)(f.SortableContext,{items:Z.map(e=>e.key),strategy:f.horizontalListSortingStrategy,children:Z.map(t=>{let n=!ge||t.excludeFromPreset===!0;return(0,u.jsxs)(a.SortableHeaderCell,{id:t.key,disabled:n,as:`th`,className:e.cn(c.getTableHeaderCellClasses(),c.getColumnAlignClasses(`center`),`relative`,t.sticky&&`sticky left-0 z-20 bg-bg-table-header`,t.hideOnMobile&&`hidden md:table-cell`),style:{width:Q(t.key,t.width),minWidth:t.minWidth||50},children:[(0,u.jsx)(`div`,{className:`flex items-center justify-center w-full pr-1 select-none`,children:(0,u.jsx)(`span`,{children:t.header})}),t.excludeFromPreset!==!0&&(0,u.jsx)(`div`,{className:`absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 z-50`,onPointerDown:e=>e.stopPropagation(),onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),ye(t.key,e)},onDoubleClick:e=>{e.preventDefault(),e.stopPropagation(),be(t.key,e)},onClick:e=>{e.preventDefault(),e.stopPropagation()},style:{touchAction:`none`},title:`드래그하여 너비 조절, 더블 클릭하여 자동 조절`})]},t.key)})}),(0,u.jsx)(`th`,{"aria-hidden":`true`,className:`bg-bg-table-header border-b border-l border-border-table-header`})]})}),(0,u.jsxs)(`tbody`,{ref:X,children:[K.map((r,i)=>{let a=$(r),o=z?z.getRowId(r):void 0,s=z?z.expandedIds.has(o):!1;return(0,u.jsxs)(l.Fragment,{children:[(0,u.jsxs)(`tr`,{className:je(r,i),onClick:e=>{let t=e.target;if(t!==e.currentTarget){let n=t.closest(`button, a, input, select, textarea, label`);if(n&&e.currentTarget.contains(n))return}y?.(r,i),U&&Ne(r)},onKeyDown:e=>Pe(e,r),tabIndex:U?0:void 0,role:U?`button`:void 0,"aria-expanded":U?s:void 0,style:v?{height:`${v}px`}:void 0,children:[S&&C&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),c.getColumnAlignClasses(`center`),`border-r-0 w-12`),onClick:e=>e.stopPropagation(),children:(0,u.jsx)(t.Checkbox.Circle,{size:20,checked:a,onCheckedChange:e=>x?.(r,e)})}),U&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),c.getColumnAlignClasses(`center`),`border-r-0`),style:{width:`${p}px`},children:(0,u.jsx)(n.ChevronRight,{"aria-hidden":`true`,className:e.cn(`mx-auto h-4 w-4 text-fg-muted hover:text-fg-default transition-transform duration-200`,s&&`rotate-90`)})}),Z.map((t,n)=>{let i=t.accessor?t.accessor(r):r[t.key],a=n===Z.length-1&&!S;return(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),c.getColumnAlignClasses(t.align),a&&`border-r-0`,t.sticky&&`sticky left-0 z-10 bg-inherit`,t.hideOnMobile&&`hidden md:table-cell`),style:{width:Q(t.key,t.width),minWidth:t.minWidth||50,...v?{height:`${v}px`,maxHeight:`${v}px`,overflow:`hidden`}:{}},children:i},t.key)}),(0,u.jsx)(`td`,{"aria-hidden":`true`,className:`border-b border-l border-border-table-cell bg-transparent`})]}),U&&(0,u.jsx)(`tr`,{"data-expanded-row":!0,className:`bg-bg-surface`,children:(0,u.jsx)(`td`,{colSpan:Fe,className:`p-0 border-b border-border-table-cell text-fg-default`,children:(0,u.jsx)(`div`,{className:W?`sticky left-0`:void 0,style:W&&me>0?{width:`${me}px`}:void 0,children:(0,u.jsx)(`div`,{className:`grid transition-[grid-template-rows,opacity] duration-200 ease-out`,style:{gridTemplateRows:s?`1fr`:`0fr`,opacity:+!!s},"aria-hidden":!s,children:(0,u.jsx)(`div`,{className:`overflow-hidden`,children:z.renderRow(r)})})})})})]},i)}),L&&Array.from({length:Ee}).map((t,n)=>{let r=K.length+n,i=v??De??void 0;return(0,u.jsxs)(`tr`,{"data-empty-row":!0,"aria-hidden":`true`,className:c.getStripedRowClasses(r),style:i?{height:`${i}px`}:void 0,children:[S&&C&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),`border-r-0 w-12`),style:i?{height:`${i}px`}:void 0}),U&&(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),`border-r-0`),style:{width:`${p}px`,...i?{height:`${i}px`}:{}}}),Z.map((t,n)=>{let r=n===Z.length-1&&!S;return(0,u.jsx)(`td`,{className:e.cn(c.getTableCellClasses(),r&&`border-r-0`,t.hideOnMobile&&`hidden md:table-cell`),style:{width:Q(t.key,t.width),minWidth:t.minWidth||50,...i?{height:`${i}px`}:{}}},t.key)}),(0,u.jsx)(`td`,{"aria-hidden":`true`,className:`border-b border-l border-border-table-cell bg-transparent`,style:i?{height:`${i}px`}:void 0})]},`empty-${n}`)})]})]})})}),Me&&(0,u.jsxs)(`nav`,{"aria-label":`페이지 네비게이션`,className:`@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-border-subtle px-4 py-2 shrink-0`,children:[(0,u.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted`,children:[F!==void 0&&(0,u.jsxs)(`span`,{children:[`총 `,F.toLocaleString(),`건`]}),P&&N!==void 0&&(0,u.jsxs)(`div`,{className:`flex items-center gap-1`,children:[(0,u.jsx)(`span`,{className:`text-fg-muted`,children:`페이지당`}),(0,u.jsx)(`div`,{className:`w-20`,children:(0,u.jsx)(i.Select,{variant:`box`,selectSize:`mini`,value:String(N),onChange:e=>P(Number(e)),options:de.map(e=>({value:String(e),label:String(e)})),"data-testid":V?`${V}-page-size`:void 0})})]}),(0,u.jsx)(`div`,{className:`contents @min-[640px]/pagebar:hidden`,children:j!==void 0&&A!==void 0&&M&&j>1&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ne.PageJumpInput,{currentPage:A,totalPages:j,onPageChange:M,"data-testid":V?`${V}-page-jump`:void 0}),R&&(0,u.jsx)(te.KeyboardNavButton,{onKeyDown:Oe})]})})]}),(0,u.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,u.jsx)(`div`,{className:`hidden @min-[640px]/pagebar:contents`,children:j!==void 0&&A!==void 0&&M&&j>1&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ne.PageJumpInput,{currentPage:A,totalPages:j,onPageChange:M,"data-testid":V?`${V}-page-jump`:void 0}),R&&(0,u.jsx)(te.KeyboardNavButton,{onKeyDown:Oe})]})}),j!==void 0&&A!==void 0&&M&&(0,u.jsx)(re.Pagination,{currentPage:A,totalPages:j,onPageChange:M,hasPreviousPage:A>1,hasNextPage:A<j,"data-testid":V?`${V}-pagination`:void 0})]})]})]})]})});m.displayName=`AccordionTable`,exports.AccordionTable=m;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { PaginatedTableProps } from './types';
+import { PaginatedTableProps } from './types.js';
 export type ExpandedRowId = string | number;
 export interface AccordionExpandable<T> {
     /** 펼친 행 안에 그릴 콘텐츠 */

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

@@ -0,0 +1,418 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Checkbox as t } from "../checkbox/Checkbox.esm.js";
+import { ChevronRight as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { LoadingSpinner as r } from "../loading-spinner/LoadingSpinner.esm.js";
+import { Select as i } from "../select/Select.esm.js";
+import { SortableHeaderCell as a } from "./components/SortableHeaderCell.esm.js";
+import { useColumnResize as o } from "./hooks/useColumnResize.esm.js";
+import { useFillEmptyRows as s } from "../../hooks/useFillEmptyRows.esm.js";
+import { useTableSort as ee } from "./hooks/useTableSort.esm.js";
+import { getColumnAlignClasses as c, getHoverableRowClasses as te, getSelectedRowClasses as ne, getStripedRowClasses as re, getTableBaseClasses as ie, getTableCellClasses as l, getTableHeaderCellClasses as u, getTableHeaderClasses as ae, getTableSizeClasses as oe, getTableVariantClasses as se } from "./utils.esm.js";
+import { KeyboardNavButton as d } from "./components/KeyboardNavButton.esm.js";
+import { PageJumpInput as f } from "./components/PageJumpInput.esm.js";
+import { Pagination as ce } from "./components/Pagination.esm.js";
+import { Fragment as le, forwardRef as p, useLayoutEffect as ue, useMemo as m, useRef as h, useState as de } from "react";
+import { Fragment as fe, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { DndContext as pe, KeyboardSensor as me, PointerSensor as he, closestCenter as ge, useSensor as v, useSensors as _e } from "@dnd-kit/core";
+import { SortableContext as ve, arrayMove as ye, horizontalListSortingStrategy as be, sortableKeyboardCoordinates as xe } from "@dnd-kit/sortable";
+//#region src/components/table/accordion-table.tsx
+var Se = [
+	30,
+	50,
+	100
+], y = 36, b = p((p, b) => {
+	let { data: x, columns: S, rowHeight: C, loading: Ce = !1, emptyMessage: we = "데이터가 없어요", onRowClick: w, selectedRows: T = [], onRowSelect: E, enableRowSelection: D = !1, enableSelectAll: O = !1, rowCompare: k, enableSorting: A = !1, serverSideSorting: j = !1, onSortChange: Te, initialSort: Ee, variant: De = "default", size: Oe = "medium", stickyHeader: M = !0, height: N, maxHeight: P, currentPage: F, totalPages: I, onPageChange: L, pageSize: R, pageSizeOptions: ke = Se, onPageSizeChange: z, totalElements: B, storageKey: Ae, columnState: V, fillEmptyRows: H = !0, enableKeyboardPagination: U = !0, expandable: W, className: je = "", "data-testid": G, ...Me } = p, K = !!W, q = W?.stickyDetail ?? !0, { sort: Ne, sortedData: Pe } = ee({
+		initialSort: Ee,
+		serverSide: j,
+		onSort: Te || void 0
+	}), J = m(() => !A || j ? x : Pe(x, (e, t) => {
+		let n = S.find((e) => e.key === t);
+		if (n?.accessor) {
+			let r = n.accessor(e);
+			return typeof r == "string" || typeof r == "number" ? r : e[t];
+		}
+		return e[t];
+	}), [
+		x,
+		A,
+		j,
+		Ne,
+		Pe,
+		S
+	]), Fe = h(null), Y = h(null), Ie = h(null), Le = h(null), [Re, ze] = de(0), Be = !!V, Ve = _e(v(he, { activationConstraint: { distance: 5 } }), v(me, { coordinateGetter: xe })), He = (e) => {
+		let { active: t, over: n } = e;
+		if (!V || !n || t.id === n.id || S.find((e) => e.key === n.id)?.excludeFromPreset) return;
+		let r = V.columnOrder, i = r.indexOf(String(t.id)), a = r.indexOf(String(n.id));
+		i === -1 || a === -1 || V.onColumnOrderChange(ye(r, i, a));
+	}, X = m(() => {
+		if (!V) return S.filter((e) => !e.hidden);
+		let e = new Map(S.map((e) => [e.key, e])), t = new Set(V.hiddenColumns);
+		return V.columnOrder.map((t) => e.get(t)).filter((e) => !!e).filter((e) => !e.hidden && !t.has(e.key));
+	}, [S, V]), { handleMouseDown: Ue, handleDoubleClick: We, getColumnWidth: Z, measureRef: Ge } = o({
+		columns: X,
+		data: J,
+		getCellContent: (e, t) => {
+			let n = X.find((e) => e.key === t);
+			return n?.accessor ? n.accessor(e) : e[t];
+		},
+		tableRef: Fe,
+		...V ? {
+			controlledWidths: V.columnWidths,
+			onColumnWidthsChange: V.onColumnWidthsChange
+		} : { storageKey: Ae }
+	}), Ke = ie(), qe = se(De), Je = oe(Oe), Ye = m(() => {
+		let e = {};
+		return N && (e.height = typeof N == "number" ? `${N}px` : N), P && (e.maxHeight = typeof P == "number" ? `${P}px` : P), e;
+	}, [N, P]), { emptyRowCount: Xe, measuredRowHeight: Ze } = s({
+		enabled: H,
+		containerRef: Y,
+		theadRef: Ie,
+		tbodyRef: Le,
+		excludeRowsSelector: "tr:not([data-empty-row]):not([data-expanded-row])",
+		remainingMode: "tbody-height",
+		observeTbody: !0,
+		deps: [J, X]
+	});
+	ue(() => {
+		if (!q || !K) return;
+		let e = Y.current;
+		if (!e) return;
+		let t = () => {
+			ze((t) => t === e.clientWidth ? t : e.clientWidth);
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, [q, K]);
+	let Qe = (e) => {
+		e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || (e.key === "ArrowLeft" && F > 1 ? (e.preventDefault(), L(F - 1)) : e.key === "ArrowRight" && F < I && (e.preventDefault(), L(F + 1)));
+	}, Q = (e) => !D || T.length === 0 ? !1 : k ? T.some((t) => k(t, e)) : T.some((t) => t === e), $e = m(() => !D || !O || J.length === 0 ? !1 : J.every((e) => Q(e)), [
+		D,
+		O,
+		J,
+		Q
+	]), et = () => {
+		!D || !E || ($e ? J.forEach((e) => {
+			Q(e) && E(e, !1);
+		}) : J.forEach((e) => {
+			Q(e) || E(e, !0);
+		}));
+	}, tt = (t, n) => {
+		let r = [re(n)];
+		return Q(t) && r.push(ne()), (w || K) && r.push(te()), e(r);
+	}, nt = !!z || B !== void 0 || typeof I == "number" && I > 0, $ = (e) => {
+		W && W.onToggle(W.getRowId(e));
+	}, rt = (e, t) => {
+		K && (e.key === " " || e.key === "Enter") && (e.preventDefault(), $(t));
+	}, it = (D && O ? 1 : 0) + +!!K + X.length + 1;
+	return Ce ? /* @__PURE__ */ g("div", {
+		ref: b,
+		className: e("flex items-center justify-center p-8 flex-1", je),
+		style: Ye,
+		"data-testid": G,
+		...Me,
+		children: /* @__PURE__ */ g(r, {
+			message: "데이터를 불러오는 중이에요...",
+			className: "min-h-0"
+		})
+	}) : /* @__PURE__ */ _("div", {
+		ref: b,
+		className: e("isolate relative flex flex-col min-h-0", je),
+		style: Ye,
+		"data-testid": G,
+		...Me,
+		children: [/* @__PURE__ */ g("div", {
+			ref: Ge,
+			className: "absolute invisible whitespace-nowrap",
+			style: {
+				top: "-9999px",
+				left: "-9999px"
+			}
+		}), /* @__PURE__ */ _("div", {
+			className: "flex flex-1 flex-col min-h-0",
+			children: [/* @__PURE__ */ g("div", {
+				ref: Y,
+				className: "overflow-auto flex-1 bg-bg-page",
+				children: J.length === 0 ? /* @__PURE__ */ g("div", {
+					className: "flex items-center justify-center p-8 h-full",
+					children: /* @__PURE__ */ g("p", {
+						className: "text-fg-muted",
+						children: we
+					})
+				}) : /* @__PURE__ */ g(pe, {
+					sensors: Ve,
+					collisionDetection: ge,
+					onDragEnd: He,
+					children: /* @__PURE__ */ _("table", {
+						ref: Fe,
+						className: e(Ke, qe, Je),
+						style: {
+							tableLayout: "fixed",
+							minWidth: "100%",
+							width: "100%"
+						},
+						children: [
+							/* @__PURE__ */ _("colgroup", { children: [
+								D && O && /* @__PURE__ */ g("col", { style: { width: "48px" } }),
+								K && /* @__PURE__ */ g("col", { style: { width: `${y}px` } }),
+								X.map((e) => /* @__PURE__ */ g("col", {
+									"data-col-key": e.key,
+									style: { width: Z(e.key, e.width) }
+								}, e.key)),
+								/* @__PURE__ */ g("col", { style: { width: "100%" } })
+							] }),
+							/* @__PURE__ */ g("thead", {
+								ref: Ie,
+								className: ae(),
+								style: {
+									position: M ? "sticky" : "relative",
+									top: M ? 0 : void 0,
+									zIndex: M ? 20 : void 0
+								},
+								children: /* @__PURE__ */ _("tr", { children: [
+									D && O && /* @__PURE__ */ g("th", {
+										className: e(u(), c("center"), "border-r-0 w-12"),
+										children: /* @__PURE__ */ g(t.Circle, {
+											id: "accordion-table-select-all",
+											size: 20,
+											checked: $e,
+											onCheckedChange: et
+										})
+									}),
+									K && /* @__PURE__ */ g("th", {
+										"aria-hidden": "true",
+										className: e(u(), "border-r-0"),
+										style: { width: `${y}px` }
+									}),
+									/* @__PURE__ */ g(ve, {
+										items: X.map((e) => e.key),
+										strategy: be,
+										children: X.map((t) => {
+											let n = !Be || t.excludeFromPreset === !0;
+											return /* @__PURE__ */ _(a, {
+												id: t.key,
+												disabled: n,
+												as: "th",
+												className: e(u(), c("center"), "relative", t.sticky && "sticky left-0 z-20 bg-bg-table-header", t.hideOnMobile && "hidden md:table-cell"),
+												style: {
+													width: Z(t.key, t.width),
+													minWidth: t.minWidth || 50
+												},
+												children: [/* @__PURE__ */ g("div", {
+													className: "flex items-center justify-center w-full pr-1 select-none",
+													children: /* @__PURE__ */ g("span", { children: t.header })
+												}), t.excludeFromPreset !== !0 && /* @__PURE__ */ g("div", {
+													className: "absolute right-0 top-0 h-full w-4 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 z-50",
+													onPointerDown: (e) => e.stopPropagation(),
+													onMouseDown: (e) => {
+														e.preventDefault(), e.stopPropagation(), Ue(t.key, e);
+													},
+													onDoubleClick: (e) => {
+														e.preventDefault(), e.stopPropagation(), We(t.key, e);
+													},
+													onClick: (e) => {
+														e.preventDefault(), e.stopPropagation();
+													},
+													style: { touchAction: "none" },
+													title: "드래그하여 너비 조절, 더블 클릭하여 자동 조절"
+												})]
+											}, t.key);
+										})
+									}),
+									/* @__PURE__ */ g("th", {
+										"aria-hidden": "true",
+										className: "bg-bg-table-header border-b border-l border-border-table-header"
+									})
+								] })
+							}),
+							/* @__PURE__ */ _("tbody", {
+								ref: Le,
+								children: [J.map((r, i) => {
+									let a = Q(r), o = W ? W.getRowId(r) : void 0, s = W ? W.expandedIds.has(o) : !1;
+									return /* @__PURE__ */ _(le, { children: [/* @__PURE__ */ _("tr", {
+										className: tt(r, i),
+										onClick: (e) => {
+											let t = e.target;
+											if (t !== e.currentTarget) {
+												let n = t.closest("button, a, input, select, textarea, label");
+												if (n && e.currentTarget.contains(n)) return;
+											}
+											w?.(r, i), K && $(r);
+										},
+										onKeyDown: (e) => rt(e, r),
+										tabIndex: K ? 0 : void 0,
+										role: K ? "button" : void 0,
+										"aria-expanded": K ? s : void 0,
+										style: C ? { height: `${C}px` } : void 0,
+										children: [
+											D && O && /* @__PURE__ */ g("td", {
+												className: e(l(), c("center"), "border-r-0 w-12"),
+												onClick: (e) => e.stopPropagation(),
+												children: /* @__PURE__ */ g(t.Circle, {
+													size: 20,
+													checked: a,
+													onCheckedChange: (e) => E?.(r, e)
+												})
+											}),
+											K && /* @__PURE__ */ g("td", {
+												className: e(l(), c("center"), "border-r-0"),
+												style: { width: `${y}px` },
+												children: /* @__PURE__ */ g(n, {
+													"aria-hidden": "true",
+													className: e("mx-auto h-4 w-4 text-fg-muted hover:text-fg-default transition-transform duration-200", s && "rotate-90")
+												})
+											}),
+											X.map((t, n) => {
+												let i = t.accessor ? t.accessor(r) : r[t.key], a = n === X.length - 1 && !D;
+												return /* @__PURE__ */ g("td", {
+													className: e(l(), c(t.align), a && "border-r-0", t.sticky && "sticky left-0 z-10 bg-inherit", t.hideOnMobile && "hidden md:table-cell"),
+													style: {
+														width: Z(t.key, t.width),
+														minWidth: t.minWidth || 50,
+														...C ? {
+															height: `${C}px`,
+															maxHeight: `${C}px`,
+															overflow: "hidden"
+														} : {}
+													},
+													children: i
+												}, t.key);
+											}),
+											/* @__PURE__ */ g("td", {
+												"aria-hidden": "true",
+												className: "border-b border-l border-border-table-cell bg-transparent"
+											})
+										]
+									}), K && /* @__PURE__ */ g("tr", {
+										"data-expanded-row": !0,
+										className: "bg-bg-surface",
+										children: /* @__PURE__ */ g("td", {
+											colSpan: it,
+											className: "p-0 border-b border-border-table-cell text-fg-default",
+											children: /* @__PURE__ */ g("div", {
+												className: q ? "sticky left-0" : void 0,
+												style: q && Re > 0 ? { width: `${Re}px` } : void 0,
+												children: /* @__PURE__ */ g("div", {
+													className: "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
+													style: {
+														gridTemplateRows: s ? "1fr" : "0fr",
+														opacity: +!!s
+													},
+													"aria-hidden": !s,
+													children: /* @__PURE__ */ g("div", {
+														className: "overflow-hidden",
+														children: W.renderRow(r)
+													})
+												})
+											})
+										})
+									})] }, i);
+								}), H && Array.from({ length: Xe }).map((t, n) => {
+									let r = J.length + n, i = C ?? Ze ?? void 0;
+									return /* @__PURE__ */ _("tr", {
+										"data-empty-row": !0,
+										"aria-hidden": "true",
+										className: re(r),
+										style: i ? { height: `${i}px` } : void 0,
+										children: [
+											D && O && /* @__PURE__ */ g("td", {
+												className: e(l(), "border-r-0 w-12"),
+												style: i ? { height: `${i}px` } : void 0
+											}),
+											K && /* @__PURE__ */ g("td", {
+												className: e(l(), "border-r-0"),
+												style: {
+													width: `${y}px`,
+													...i ? { height: `${i}px` } : {}
+												}
+											}),
+											X.map((t, n) => {
+												let r = n === X.length - 1 && !D;
+												return /* @__PURE__ */ g("td", {
+													className: e(l(), r && "border-r-0", t.hideOnMobile && "hidden md:table-cell"),
+													style: {
+														width: Z(t.key, t.width),
+														minWidth: t.minWidth || 50,
+														...i ? { height: `${i}px` } : {}
+													}
+												}, t.key);
+											}),
+											/* @__PURE__ */ g("td", {
+												"aria-hidden": "true",
+												className: "border-b border-l border-border-table-cell bg-transparent",
+												style: i ? { height: `${i}px` } : void 0
+											})
+										]
+									}, `empty-${n}`);
+								})]
+							})
+						]
+					})
+				})
+			}), nt && /* @__PURE__ */ _("nav", {
+				"aria-label": "페이지 네비게이션",
+				className: "@container/pagebar group/footer flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-t border-border-subtle px-4 py-2 shrink-0",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-fg-muted",
+					children: [
+						B !== void 0 && /* @__PURE__ */ _("span", { children: [
+							"총 ",
+							B.toLocaleString(),
+							"건"
+						] }),
+						z && R !== void 0 && /* @__PURE__ */ _("div", {
+							className: "flex items-center gap-1",
+							children: [/* @__PURE__ */ g("span", {
+								className: "text-fg-muted",
+								children: "페이지당"
+							}), /* @__PURE__ */ g("div", {
+								className: "w-20",
+								children: /* @__PURE__ */ g(i, {
+									variant: "box",
+									selectSize: "mini",
+									value: String(R),
+									onChange: (e) => z(Number(e)),
+									options: ke.map((e) => ({
+										value: String(e),
+										label: String(e)
+									})),
+									"data-testid": G ? `${G}-page-size` : void 0
+								})
+							})]
+						}),
+						/* @__PURE__ */ g("div", {
+							className: "contents @min-[640px]/pagebar:hidden",
+							children: I !== void 0 && F !== void 0 && L && I > 1 && /* @__PURE__ */ _(fe, { children: [/* @__PURE__ */ g(f, {
+								currentPage: F,
+								totalPages: I,
+								onPageChange: L,
+								"data-testid": G ? `${G}-page-jump` : void 0
+							}), U && /* @__PURE__ */ g(d, { onKeyDown: Qe })] })
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ g("div", {
+						className: "hidden @min-[640px]/pagebar:contents",
+						children: I !== void 0 && F !== void 0 && L && I > 1 && /* @__PURE__ */ _(fe, { children: [/* @__PURE__ */ g(f, {
+							currentPage: F,
+							totalPages: I,
+							onPageChange: L,
+							"data-testid": G ? `${G}-page-jump` : void 0
+						}), U && /* @__PURE__ */ g(d, { onKeyDown: Qe })] })
+					}), I !== void 0 && F !== void 0 && L && /* @__PURE__ */ g(ce, {
+						currentPage: F,
+						totalPages: I,
+						onPageChange: L,
+						hasPreviousPage: F > 1,
+						hasNextPage: F < I,
+						"data-testid": G ? `${G}-pagination` : void 0
+					})]
+				})]
+			})]
+		})]
+	});
+});
+b.displayName = "AccordionTable";
+//#endregion
+export { b as AccordionTable };

package/dist/components/table/column-group-utils.cjs

@@ -0,0 +1 @@
+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=new Map;for(let e of t)for(let t of e.columnKeys)r.set(t,e.key);let i=[],a=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`)}exports.applyColumnState=n,exports.buildColumnSlots=e,exports.flattenLeafColumns=r,exports.getDefaultSlotOrder=t,exports.hasGroupSlot=i;