@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/stepper/Stepper.d.ts

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+export interface StepperStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+export type StepperOrientation = "horizontal" | "vertical";
+export type StepperStepStatus = "completed" | "current" | "pending";
+export type StepperStepContentTransition = "height" | "none";
+export type StepperTransition = "none" | "fade" | "scale" | "slide";
+export type StepperSlideDirection = "left" | "right" | "up" | "down";
+export interface StepperStepContentContext {
+    step: StepperStep;
+    index: number;
+    status: StepperStepStatus;
+}
+export interface StepperProps {
+    steps: readonly StepperStep[];
+    currentStep: number;
+    orientation?: StepperOrientation;
+    allowNonLinear?: boolean;
+    onStepChange?: (step: number) => void;
+    /** 세로형에서 각 단계 헤더와 다음 marker 사이에 콘텐츠를 렌더링합니다. */
+    renderStepContent?: (context: StepperStepContentContext) => ReactNode;
+    /** 세로형 단계 콘텐츠의 펼침·접힘 전환. 기본 height. */
+    stepContentTransition?: StepperStepContentTransition;
+    className?: string;
+}
+export interface StepperContentProps {
+    stepKey: string;
+    direction?: 1 | -1;
+    transition?: StepperTransition;
+    slideDirection?: StepperSlideDirection;
+    children: ReactNode;
+    className?: string;
+}
+interface MotionCustom {
+    direction: 1 | -1;
+    transition: StepperTransition;
+    slideDirection: StepperSlideDirection;
+    reducedMotion: boolean;
+}
+type MotionPhase = "enter" | "center" | "exit";
+export declare function resolveStepperMotion(phase: MotionPhase, custom: MotionCustom): Record<string, number>;
+/** 단계 표시는 상태와 검증을 소유하지 않는다. 유효한 단계와 이동 검증은 호출부에서 관리하고,
+ * 여러 단계를 건너뛰려면 훅과 표시 양쪽에 allowNonLinear를 지정한다. */
+export declare function Stepper({ steps, currentStep, orientation, allowNonLinear, onStepChange, renderStepContent, stepContentTransition, className, }: StepperProps): import("react").JSX.Element;
+/** 단계 콘텐츠를 전환한다. stepKey는 단계마다 고유해야 종료와 진입을 구분한다.
+ * 움직임을 원치 않으면 transition="none"을 쓰며 시스템의 동작 줄이기도 따른다. */
+export declare function StepperContent({ stepKey, direction, transition, slideDirection, children, className, }: StepperContentProps): import("react").JSX.Element;
+export {};

package/dist/components/stepper/Stepper.esm.js

@@ -0,0 +1,142 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { AnimatedHeight as t } from "../animated-height/AnimatedHeight.esm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { AnimatePresence as i, motion as a, useReducedMotion as o } from "motion/react";
+//#region src/components/stepper/Stepper.tsx
+function s(e, t) {
+	if (t.reducedMotion || t.transition === "none" || e === "center") return {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	if (t.transition === "fade") return {
+		opacity: 0,
+		x: 0,
+		y: 0,
+		scale: 1
+	};
+	if (t.transition === "scale") return {
+		opacity: 0,
+		x: 0,
+		y: 0,
+		scale: e === "enter" ? .98 : 1.02
+	};
+	let n = d(t.slideDirection), r = e === "enter" ? t.direction : -t.direction;
+	return {
+		opacity: 0,
+		x: (n.x ?? 0) * r,
+		y: (n.y ?? 0) * r,
+		scale: 1
+	};
+}
+var c = {
+	enter: (e) => s("enter", e),
+	center: (e) => s("center", e),
+	exit: (e) => s("exit", e)
+};
+function l({ steps: i, currentStep: a, orientation: o = "horizontal", allowNonLinear: s = !1, onStepChange: c, renderStepContent: l, stepContentTransition: d = "height", className: f }) {
+	return /* @__PURE__ */ n("ol", {
+		className: e("flex", o === "horizontal" ? "w-full items-start" : "flex-col gap-5", f),
+		"aria-label": "진행 단계",
+		children: i.map((f, p) => {
+			let m = p < a ? "completed" : p === a ? "current" : "pending", h = s && !!c, g = o === "vertical" ? l?.({
+				step: f,
+				index: p,
+				status: m
+			}) : null, _ = /* @__PURE__ */ n("span", {
+				className: e("flex h-7 w-7 shrink-0 items-center justify-center rounded-chip border text-xs font-semibold transition-colors", m === "current" && "border-primary bg-primary text-fg-inverse", m === "completed" && "border-primary bg-primary-subtle text-primary-fg", m === "pending" && "border-border-subtle bg-bg-surface text-fg-subtle"),
+				"aria-hidden": "true",
+				children: p + 1
+			});
+			return /* @__PURE__ */ r("li", {
+				className: e("relative flex min-w-0", o === "horizontal" ? "flex-1 items-start" : "grid grid-cols-[1.75rem_minmax(0,1fr)] gap-x-3"),
+				"aria-current": m === "current" ? "step" : void 0,
+				"data-status": m,
+				children: [
+					h ? /* @__PURE__ */ r("button", {
+						type: "button",
+						className: e("flex min-w-0 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary", o === "horizontal" ? "w-full flex-col items-center gap-1.5" : "col-span-2 grid grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-x-3"),
+						onClick: () => c?.(p),
+						"aria-label": `${p + 1}단계: ${f.label}`,
+						children: [_, /* @__PURE__ */ n(u, {
+							step: f,
+							orientation: o,
+							status: m
+						})]
+					}) : /* @__PURE__ */ r("div", {
+						className: e("flex min-w-0", o === "horizontal" ? "w-full flex-col items-center gap-1.5 text-center" : "col-span-2 grid grid-cols-[1.75rem_minmax(0,1fr)] items-center gap-x-3"),
+						children: [_, /* @__PURE__ */ n(u, {
+							step: f,
+							orientation: o,
+							status: m
+						})]
+					}),
+					o === "vertical" && l && /* @__PURE__ */ n("div", {
+						className: "col-start-2 min-w-0",
+						"data-step-content": f.id,
+						children: /* @__PURE__ */ n(t, {
+							durationMs: d === "height" ? 220 : 0,
+							children: /* @__PURE__ */ n("div", {
+								hidden: m === "pending",
+								className: "px-3 pt-3",
+								children: g
+							})
+						})
+					}),
+					p < i.length - 1 && /* @__PURE__ */ n("span", {
+						className: e("absolute bg-border-subtle", o === "horizontal" ? "left-[calc(50%+18px)] right-[calc(-50%+18px)] top-3.5 h-px" : "left-3.5 top-9 h-[calc(100%+4px)] w-px"),
+						"aria-hidden": "true"
+					})
+				]
+			}, f.id);
+		})
+	});
+}
+function u({ step: t, orientation: i, status: a }) {
+	return /* @__PURE__ */ r("span", {
+		className: e("min-w-0", i === "horizontal" && "px-1"),
+		children: [/* @__PURE__ */ n("span", {
+			className: e("block truncate font-medium", i === "horizontal" ? "text-xs" : "text-sm", a === "current" && "text-fg-default", a === "completed" && "text-fg-muted", a === "pending" && "text-fg-subtle"),
+			children: t.label
+		}), t.description && /* @__PURE__ */ n("span", {
+			className: "mt-0.5 hidden text-xs text-fg-muted sm:block",
+			children: t.description
+		})]
+	});
+}
+function d(e) {
+	return e === "left" ? { x: 20 } : e === "right" ? { x: -20 } : e === "up" ? { y: 20 } : { y: -20 };
+}
+function f({ stepKey: e, direction: t = 1, transition: r = "fade", slideDirection: a = "left", children: s, className: c }) {
+	let l = {
+		direction: t,
+		transition: r,
+		slideDirection: a,
+		reducedMotion: !!o()
+	};
+	return /* @__PURE__ */ n(i, {
+		mode: "wait",
+		initial: !1,
+		custom: l,
+		children: /* @__PURE__ */ n(p, {
+			className: c,
+			custom: l,
+			children: s
+		}, e)
+	});
+}
+function p({ custom: e, className: t, children: r }) {
+	return /* @__PURE__ */ n(a.div, {
+		className: t,
+		custom: e,
+		variants: c,
+		initial: "enter",
+		animate: "center",
+		exit: "exit",
+		transition: { duration: e.reducedMotion || e.transition === "none" ? 0 : .18 },
+		children: r
+	});
+}
+//#endregion
+export { l as Stepper, f as StepperContent };

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

@@ -0,0 +1,4 @@
+export { Stepper, StepperContent } from './Stepper.js';
+export type { StepperProps, StepperContentProps, StepperStep, StepperOrientation, StepperStepStatus, StepperStepContentTransition, StepperTransition, StepperSlideDirection, StepperStepContentContext, } from './Stepper.js';
+export { useStepper } from './use-stepper.js';
+export type { UseStepperOptions, StepperState } from './use-stepper.js';

package/dist/components/stepper/use-stepper.cjs

@@ -0,0 +1 @@
+let e=require("react");function t(e,t){return Math.min(Math.max(0,e),Math.max(0,t-1))}function n(e,n){let r=e.currentStep;if(n.type===`next`&&(r+=1),n.type===`previous`&&--r,n.type===`move`){let i=t(n.target,n.stepCount);if(!n.allowNonLinear&&Math.abs(i-e.currentStep)>1)return e;r=i}n.type===`reset`&&(r=n.target);let i=t(r,n.stepCount);return i===e.currentStep?e:{currentStep:i,direction:i>e.currentStep?1:-1}}function r({stepCount:r,initialStep:i=0,allowNonLinear:a=!1}){let o=t(i,r),[s,c]=(0,e.useReducer)(n,{currentStep:o,direction:1}),l=t(s.currentStep,r),u=l===s.currentStep?s.direction:l>s.currentStep?1:-1;return(0,e.useEffect)(()=>{c({type:`clamp`,stepCount:r})},[r]),{currentStep:l,direction:u,canGoNext:l<r-1,canGoPrevious:l>0,next:()=>c({type:`next`,stepCount:r}),previous:()=>c({type:`previous`,stepCount:r}),goTo:e=>c({type:`move`,target:e,stepCount:r,allowNonLinear:a}),reset:()=>c({type:`reset`,target:o,stepCount:r})}}exports.useStepper=r;

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

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

@@ -16,22 +16,23 @@ function t(t, n) {
 	return n ? [
 		"relative inline-flex shrink-0 items-center rounded-full",
 		r,
-		"bg-bg-disabled cursor-not-allowed"
+		"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-neutral-200 dark:bg-neutral-700",
-		"peer-checked:bg-primary-500",
-		"peer-focus-visible:ring-2 peer-focus-visible:ring-primary-300 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-bg-card",
+		"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) {
-	let { thumb: n, translate: r } = e[t];
+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 bg-white shadow-sm",
-		n,
+		"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(" ");
 }

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> {
     /** 펼친 행 안에 그릴 콘텐츠 */