@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/skeleton/Skeleton.esm.js

@@ -0,0 +1,12 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/skeleton/Skeleton.tsx
+function n({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		...r,
+		"aria-hidden": "true",
+		className: e("animate-pulse rounded-control-small bg-bg-muted motion-reduce:animate-none", n)
+	});
+}
+//#endregion
+export { n as Skeleton };

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton.js';
+export type { SkeletonProps } from './types.js';

package/dist/components/skeleton/types.d.ts

@@ -0,0 +1,2 @@
+import { HTMLAttributes } from 'react';
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, "aria-hidden">;

package/dist/components/slider/Slider.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)(function({min:i=0,max:a=100,step:o=1,value:s,defaultValue:c,onValueChange:l,formatValue:u,className:d,style:f,"aria-valuetext":p,...m},h){let g=(0,n.useRef)(null),_=c??i+(a-i)/2,[v,y]=(0,n.useState)(_),b=t.normalizeSliderValue(s??v,i,a,o);return(0,n.useEffect)(()=>{let e=g.current?.form;if(!e||s!==void 0)return;let t=()=>y(_);return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[s,_]),(0,r.jsx)(`input`,{...m,ref:e=>{g.current=e,typeof h==`function`?h(e):h&&(h.current=e)},type:`range`,min:i,max:a,step:o,value:b,"aria-valuetext":u?u(b):p,onChange:e=>{let n=t.normalizeSliderValue(e.currentTarget.valueAsNumber,i,a,o);s===void 0&&y(n),l?.(n)},className:e.cn(`ui-slider`,d),style:{...f,"--slider-fill":`${t.sliderPercent(b,i,a)}%`}})});exports.Slider=i;

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,6 @@
+import { SliderProps } from './types.js';
+/**
+ * 단일 thumb 네이티브 범위 입력. aria-label 또는 연결된 label을 제공한다.
+ * 범위 밖 controlled 값은 화면에서만 범위 내로 보정하며 그 자체로 onValueChange를 호출하지 않는다.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/slider/Slider.esm.js

@@ -0,0 +1,36 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { normalizeSliderValue as t, sliderPercent as n } from "./utils.esm.js";
+import { forwardRef as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/slider/Slider.tsx
+var c = r(function({ min: r = 0, max: c = 100, step: l = 1, value: u, defaultValue: d, onValueChange: f, formatValue: p, className: m, style: h, "aria-valuetext": g, ..._ }, v) {
+	let y = a(null), b = d ?? r + (c - r) / 2, [x, S] = o(b), C = t(u ?? x, r, c, l);
+	return i(() => {
+		let e = y.current?.form;
+		if (!e || u !== void 0) return;
+		let t = () => S(b);
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [u, b]), /* @__PURE__ */ s("input", {
+		..._,
+		ref: (e) => {
+			y.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
+		},
+		type: "range",
+		min: r,
+		max: c,
+		step: l,
+		value: C,
+		"aria-valuetext": p ? p(C) : g,
+		onChange: (e) => {
+			let n = t(e.currentTarget.valueAsNumber, r, c, l);
+			u === void 0 && S(n), f?.(n);
+		},
+		className: e("ui-slider", m),
+		style: {
+			...h,
+			"--slider-fill": `${n(C, r, c)}%`
+		}
+	});
+});
+//#endregion
+export { c as Slider };

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

@@ -0,0 +1,2 @@
+export { Slider } from './Slider.js';
+export type { SliderProps } from './types.js';

package/dist/components/slider/types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithoutRef } from 'react';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "min" | "max" | "step"> {
+    /** 범위의 시작. 기본 0. */
+    min?: number;
+    /** 범위의 끝. min 이상이어야 한다. 기본 100. */
+    max?: number;
+    /** 양수 간격. 기본 1. */
+    step?: number;
+    /** 범위 밖 값은 화면에서만 보정하며 그 자체로 콜백을 호출하지 않는다. */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    /** 현재 값을 스크린리더에 읽힐 단위 포함 텍스트로 변환한다. */
+    formatValue?: (value: number) => string;
+}

package/dist/components/slider/utils.cjs

@@ -0,0 +1 @@
+function e(e){let[t,n=`0`]=String(e).toLowerCase().split(`e`);return Math.max(0,(t.split(`.`)[1]?.length??0)-Number(n))}function t(t,n,r,i){if(r<=n)return n;let a=Number.isFinite(i)&&i>0?i:1,o=(t-n)/a,s=Math.floor((r-n)/a+1e-10),c=Math.min(s,Math.max(0,Math.round(o+1e-10))),l=Math.min(12,Math.max(e(n),e(a)));return Number((n+c*a).toFixed(l))}function n(e,t,n){return n<=t?0:Math.min(100,Math.max(0,(e-t)/(n-t)*100))}exports.normalizeSliderValue=t,exports.sliderPercent=n;

package/dist/components/slider/utils.d.ts

@@ -0,0 +1,3 @@
+/** 범위의 시작을 기준으로 step에 맞추고, 부동소수 오차를 제거한다. */
+export declare function normalizeSliderValue(value: number, min: number, max: number, step: number): number;
+export declare function sliderPercent(value: number, min: number, max: number): number;

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

@@ -0,0 +1,15 @@
+//#region src/components/slider/utils.ts
+function e(e) {
+	let [t, n = "0"] = String(e).toLowerCase().split("e");
+	return Math.max(0, (t.split(".")[1]?.length ?? 0) - Number(n));
+}
+function t(t, n, r, i) {
+	if (r <= n) return n;
+	let a = Number.isFinite(i) && i > 0 ? i : 1, o = (t - n) / a, s = Math.floor((r - n) / a + 1e-10), c = Math.min(s, Math.max(0, Math.round(o + 1e-10))), l = Math.min(12, Math.max(e(n), e(a)));
+	return Number((n + c * a).toFixed(l));
+}
+function n(e, t, n) {
+	return n <= t ? 0 : Math.min(100, Math.max(0, (e - t) / (n - t) * 100));
+}
+//#endregion
+export { t as normalizeSliderValue, n as sliderPercent };

package/dist/components/stepper/Stepper.cjs

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

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

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