@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/select/Select.esm.js

@@ -0,0 +1,320 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { CircleX as n } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { CHEVRON_SIZE_CLASS as r, CONTROL_TEXT_CLASS as i, SLOT_BADGE_TEXT_CLASS as ee, SLOT_CHILD_ICON_CLASS as te, SLOT_GAP_CLASS as ne, SLOT_ICON_SIZE_CLASS as re } from "../_shared/form-size-tokens.esm.js";
+import { getInputContainerClasses as ie, getInputHelpClasses as ae, getInputLabelClasses as oe, getInputTrailingIconColor as se, getInputVariantClasses as ce } from "../input/utils.esm.js";
+import { c as le } from "../../node_modules/use-debounce/dist/index.module.esm.js";
+import { LoadingDots as ue } from "./loading-dots.esm.js";
+import { computeSelectPanelMaxWidth as de } from "./panel-width.esm.js";
+import { forwardRef as a, useEffect as fe, useId as pe, useMemo as me, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { FloatingFocusManager as he, FloatingPortal as ge, autoUpdate as _e, flip as ve, offset as ye, shift as be, size as xe, useClick as Se, useDismiss as Ce, useFloating as we, useInteractions as Te, useListNavigation as Ee, useRole as De, useTypeahead as Oe } from "@floating-ui/react";
+//#region src/components/select/Select.tsx
+var u = a(function({ options: a, value: u, onChange: d, variant: f, selectSize: p = "medium", label: ke, labelOption: Ae = "appear", help: je, placeholder: Me = "선택해주세요", hasError: m = !1, disabled: h = !1, suffix: g, trailingIcon: _, clearable: v = !1, badge: y, searchable: b = !1, searchPlaceholder: Ne = "검색...", onSearchChange: x, isSearchLoading: S = !1, containerProps: Pe, containerRef: Fe, className: C = "", panelClassName: Ie = "", id: Le, name: Re, onLoadMore: w, hasMore: T = !1, searchDebounceMs: E = 300, openOnFocus: ze = !1, validateSearchQuery: D, open: Be, onOpenChange: Ve, "data-testid": He }, O) {
+	let [Ue, We] = s(!1), k = Be ?? Ue, A = (e) => {
+		Be === void 0 && We(e), Ve?.(e);
+	}, [j, M] = s(null), [N, P] = s(""), Ge = o([]), F = o(null), [I, Ke] = s(null), [L, qe] = s(null), R = pe(), Je = pe(), z = Le ?? Je, Ye = (e) => `${R}-opt-${e}`, Xe = j === null ? void 0 : Ye(j), B = typeof x == "function", V = o(x);
+	V.current = x;
+	let Ze = E === !1 || E <= 0 ? 0 : E, Qe = le((e) => {
+		V.current?.(e);
+	}, Ze), H = (e, t) => {
+		B && (t || Ze === 0 ? (Qe.cancel(), V.current?.(e)) : Qe(e));
+	}, U = a.find((e) => String(e.value) === u), $e = o(U?.label ?? "");
+	$e.current = U?.label ?? "";
+	let et = o(H);
+	et.current = H;
+	let tt = b && (U !== void 0 && N === U.label || U === void 0 && u !== "" && N !== ""), W = me(() => {
+		if (!b || B || N.length === 0 || tt) return a;
+		let e = N.toLowerCase();
+		return a.filter((t) => t.label.toLowerCase().includes(e));
+	}, [
+		a,
+		b,
+		B,
+		N,
+		tt
+	]), { refs: G, floatingStyles: nt, context: K } = we({
+		open: k,
+		onOpenChange: A,
+		placement: "bottom-start",
+		whileElementsMounted: _e,
+		middleware: [
+			ye(4),
+			ve({ padding: 8 }),
+			be({ padding: 8 }),
+			xe({
+				apply({ rects: e, elements: t, availableHeight: n, availableWidth: r }) {
+					Object.assign(t.floating.style, {
+						minWidth: `${e.reference.width}px`,
+						maxWidth: `${de(e.reference.width, r)}px`,
+						maxHeight: `${Math.min(n, 320)}px`
+					});
+				},
+				padding: 8
+			})
+		]
+	}), { getReferenceProps: rt, getFloatingProps: it, getItemProps: at } = Te([
+		Se(K, { enabled: !h && !b }),
+		Ce(K),
+		De(K, { role: "listbox" }),
+		Ee(K, {
+			listRef: Ge,
+			activeIndex: j,
+			onNavigate: M,
+			virtual: b,
+			loop: !0
+		}),
+		Oe(K, {
+			listRef: { current: W.map((e) => e.label) },
+			activeIndex: j,
+			onMatch: M,
+			enabled: !b
+		})
+	]), ot = o(!1);
+	fe(() => {
+		if (k) {
+			if (ot.current = !0, b) {
+				let e = $e.current;
+				P(e), e !== "" && requestAnimationFrame(() => {
+					F.current?.select();
+				});
+			}
+		} else P(""), M(null), ot.current && et.current("", !0);
+	}, [
+		k,
+		b,
+		B
+	]), fe(() => {
+		if (!k || !w || !T || !I || !L) return;
+		let e = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting && !S && w();
+		}, {
+			root: L,
+			rootMargin: "0px 0px 80px 0px"
+		});
+		return e.observe(I), () => e.disconnect();
+	}, [
+		k,
+		w,
+		T,
+		S,
+		I,
+		L
+	]);
+	let q = (e) => {
+		d(e), A(!1);
+	}, st = (e) => {
+		e.stopPropagation(), d(""), P("");
+	}, ct = (e) => {
+		b || !v || h || !J || k || (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), d(""));
+	}, lt = (e) => {
+		let t = e.target.value;
+		D && !D(t) || (t !== N && (L && (L.scrollTop = 0), M(null)), P(t), H(t, !1), k || A(!0));
+	}, ut = (e) => {
+		if (!e.nativeEvent.isComposing) {
+			if (e.key === "Enter" && j !== null) {
+				e.preventDefault();
+				let t = W[j];
+				t && !t.disabled && q(String(t.value));
+				return;
+			}
+			(e.key === "Backspace" || e.key === "Delete") && U && (!k || N === "") && (e.preventDefault(), d(""));
+		}
+	}, dt = Ae === "sustain" || Ae === "appear" && !!U, J = !!U, ft = U ? U.label : Me, pt = k ? N : U?.label ?? "", mt = ne[p], Y = te[p], ht = ee[p], X = re[p], gt = r[p], _t = ce(f, m, h, p), Z = se(m, h, J || k), Q = i[p], $ = h ? "text-fg-disabled" : m ? "text-fg-danger" : J ? "text-fg-default" : "text-fg-subtle";
+	return /* @__PURE__ */ l("div", {
+		ref: Fe,
+		className: e(ie(), "min-w-0"),
+		...Pe,
+		children: [
+			dt && ke && /* @__PURE__ */ c("label", {
+				className: oe(f, m),
+				htmlFor: z,
+				children: ke
+			}),
+			b ? /* @__PURE__ */ l("div", {
+				ref: (e) => {
+					G.setReference(e);
+				},
+				...rt({ onClick: () => {
+					h || (F.current?.focus(), k || A(!0));
+				} }),
+				className: e(_t, "flex w-full min-w-0 items-center", mt, f !== "box" && "focus-within:border-primary", f !== "box" && f !== "line" && "focus-within:ring-control focus-within:ring-primary", h ? "cursor-not-allowed" : "cursor-text", C),
+				children: [
+					/* @__PURE__ */ c("input", {
+						ref: (e) => {
+							F.current = e, typeof O == "function" ? O(e) : O && (O.current = e);
+						},
+						id: z,
+						type: "text",
+						role: "combobox",
+						readOnly: !k,
+						disabled: h,
+						"aria-haspopup": "listbox",
+						"aria-expanded": k,
+						"aria-controls": k ? R : void 0,
+						"aria-activedescendant": Xe,
+						"aria-autocomplete": "list",
+						"data-testid": He,
+						value: pt,
+						placeholder: U ? Ne : Me,
+						onChange: lt,
+						onKeyDown: ut,
+						onFocus: () => {
+							ze && !h && !k && A(!0);
+						},
+						className: e("min-w-0 flex-1 truncate bg-transparent text-left outline-hidden placeholder:text-fg-subtle", Q, $, h && "cursor-not-allowed")
+					}),
+					g && /* @__PURE__ */ c("span", {
+						className: e("shrink-0 whitespace-nowrap", Q, Z),
+						children: g
+					}),
+					_ && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Z, Y),
+						children: _
+					}),
+					S && /* @__PURE__ */ c(ue, { className: e("shrink-0 text-fg-subtle", X) }),
+					v && !h && J && /* @__PURE__ */ c("button", {
+						type: "button",
+						tabIndex: -1,
+						onClick: st,
+						"aria-label": "선택 지우기",
+						className: e("flex shrink-0 cursor-pointer items-center rounded", Z, "hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring"),
+						children: /* @__PURE__ */ c(n, {
+							className: X,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					y && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Y, ht),
+						children: y
+					}),
+					/* @__PURE__ */ c(t, {
+						className: e("shrink-0 transition-transform", gt, Z, k && "rotate-180"),
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}) : /* @__PURE__ */ l("button", {
+				ref: (e) => {
+					G.setReference(e), typeof O == "function" ? O(e) : O && (O.current = e);
+				},
+				id: z,
+				type: "button",
+				disabled: h,
+				"aria-haspopup": "listbox",
+				"aria-expanded": k,
+				"aria-controls": k ? R : void 0,
+				"aria-activedescendant": Xe,
+				"data-testid": He,
+				...rt({ onKeyDown: ct }),
+				className: e(_t, "flex w-full min-w-0 items-center", mt, h ? "cursor-not-allowed" : "cursor-pointer", C),
+				children: [
+					/* @__PURE__ */ c("span", {
+						className: e("min-w-0 flex-1 truncate text-left", Q, $),
+						children: ft
+					}),
+					g && /* @__PURE__ */ c("span", {
+						className: e("shrink-0 whitespace-nowrap", Q, Z),
+						children: g
+					}),
+					_ && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Z, Y),
+						children: _
+					}),
+					v && !h && J && /* @__PURE__ */ c("span", {
+						role: "button",
+						tabIndex: -1,
+						onClick: st,
+						"aria-label": "선택 지우기",
+						className: e("flex shrink-0 cursor-pointer items-center", Z, "hover:text-fg-default"),
+						children: /* @__PURE__ */ c(n, {
+							className: X,
+							strokeWidth: 1.5,
+							"aria-hidden": !0
+						})
+					}),
+					y && /* @__PURE__ */ c("span", {
+						className: e("flex shrink-0 items-center", Y, ht),
+						children: y
+					}),
+					/* @__PURE__ */ c(t, {
+						className: e("shrink-0 transition-transform", gt, Z, k && "rotate-180"),
+						strokeWidth: 1.5,
+						"aria-hidden": !0
+					})
+				]
+			}),
+			Re && /* @__PURE__ */ c("input", {
+				type: "hidden",
+				name: Re,
+				value: u
+			}),
+			k && /* @__PURE__ */ c(ge, { children: /* @__PURE__ */ c(he, {
+				context: K,
+				modal: !1,
+				initialFocus: b ? -1 : 0,
+				children: /* @__PURE__ */ c("div", {
+					ref: G.setFloating,
+					id: R,
+					style: nt,
+					...it(),
+					className: e("z-floating overflow-hidden rounded-surface border border-border-subtle bg-bg-surface shadow-overlay", Ie),
+					children: /* @__PURE__ */ l("div", {
+						ref: qe,
+						className: "max-h-72 overflow-y-auto py-1",
+						children: [W.length === 0 ? /* @__PURE__ */ c("div", {
+							className: "px-3 py-4 text-center text-sm text-fg-subtle",
+							children: S ? "검색 중..." : "옵션이 없어요"
+						}) : W.map((t, n) => {
+							let r = String(t.value) === u, i = j === n;
+							return /* @__PURE__ */ l("div", {
+								id: Ye(n),
+								ref: (e) => {
+									Ge.current[n] = e;
+								},
+								role: "option",
+								"aria-selected": r,
+								"aria-disabled": t.disabled || void 0,
+								tabIndex: i ? 0 : -1,
+								...at({
+									onClick: () => {
+										t.disabled || q(String(t.value));
+									},
+									onKeyDown: (e) => {
+										t.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q(String(t.value)));
+									}
+								}),
+								className: e("flex cursor-pointer items-start gap-3 px-3 py-2 text-sm transition-colors", t.disabled ? "cursor-not-allowed text-fg-disabled" : r ? e("font-medium text-primary-fg", i ? "bg-primary-subtle" : "bg-primary-subtle/60 hover:bg-primary-subtle/80") : i ? "bg-bg-subtle text-fg-default" : "text-fg-default hover:bg-bg-subtle"),
+								children: [/* @__PURE__ */ l("div", {
+									className: "min-w-0 flex-1",
+									children: [/* @__PURE__ */ c("div", {
+										className: "truncate",
+										children: t.label
+									}), t.description && /* @__PURE__ */ c("div", {
+										className: "mt-0.5 truncate text-xs text-fg-subtle",
+										children: t.description
+									})]
+								}), t.trailing && /* @__PURE__ */ c("span", {
+									className: "shrink-0 text-xs text-fg-subtle",
+									children: t.trailing
+								})]
+							}, String(t.value));
+						}), w && T && /* @__PURE__ */ c("div", {
+							ref: Ke,
+							"aria-hidden": !0,
+							className: "flex items-center justify-center px-3 py-3 text-fg-subtle",
+							children: S && /* @__PURE__ */ c(ue, {})
+						})]
+					})
+				})
+			}) }),
+			je && /* @__PURE__ */ c("div", {
+				className: ae(m),
+				children: je
+			})
+		]
+	});
+});
+//#endregion
+export { u as Select };

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

@@ -0,0 +1,4 @@
+export { Select } from './Select.js';
+export type { SelectTriggerRef } from './Select.js';
+export { MultiSelect } from './MultiSelect.js';
+export type { SelectProps, SelectOption, SelectVariant, SelectSize, SelectLabelOption, } from './types.js';

package/dist/components/select/loading-dots.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n=({className:n=``})=>(0,t.jsxs)(`span`,{className:e.cn(`inline-flex items-end gap-0.5`,n),"aria-label":`로딩 중`,role:`status`,children:[(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`0ms`}}),(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`200ms`}}),(0,t.jsx)(`span`,{className:`block h-1 w-1 animate-pulse rounded-full bg-current`,style:{animationDelay:`400ms`}})]});exports.LoadingDots=n;

package/dist/components/select/loading-dots.d.ts

@@ -0,0 +1,3 @@
+export declare const LoadingDots: ({ className }: {
+    className?: string;
+}) => import("react").JSX.Element;

package/dist/components/select/loading-dots.esm.js

@@ -0,0 +1,24 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/select/loading-dots.tsx
+var r = ({ className: r = "" }) => /* @__PURE__ */ n("span", {
+	className: e("inline-flex items-end gap-0.5", r),
+	"aria-label": "로딩 중",
+	role: "status",
+	children: [
+		/* @__PURE__ */ t("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "0ms" }
+		}),
+		/* @__PURE__ */ t("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "200ms" }
+		}),
+		/* @__PURE__ */ t("span", {
+			className: "block h-1 w-1 animate-pulse rounded-full bg-current",
+			style: { animationDelay: "400ms" }
+		})
+	]
+});
+//#endregion
+export { r as LoadingDots };

package/dist/components/select/panel-width.cjs

@@ -0,0 +1 @@
+var e=420;function t(t,n){return Math.max(t,Math.min(n,e))}exports.computeSelectPanelMaxWidth=t;

package/dist/components/select/panel-width.d.ts

@@ -0,0 +1,2 @@
+/** 트리거 폭을 하한으로 유지하면서 화면과 최대 패널 폭에 맞춘다. */
+export declare function computeSelectPanelMaxWidth(referenceWidth: number, availableWidth: number): number;

package/dist/components/select/panel-width.esm.js

@@ -0,0 +1,7 @@
+//#region src/components/select/panel-width.ts
+var e = 420;
+function t(t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+//#endregion
+export { t as computeSelectPanelMaxWidth };

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

@@ -1,4 +1,4 @@
-import { SelectSize, SelectVariant } from './types';
+import { SelectSize, SelectVariant } from './types.js';
 /**
  * Select Variant에 따른 컨테이너 클래스. 2026 리디자인 box variant는 Button/Input과 동일 토큰.
  * line/big/hero는 레거시 — Input과 동일하게 추후 정리.

package/dist/components/skeleton/Skeleton.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({className:n,...r}){return(0,t.jsx)(`div`,{...r,"aria-hidden":`true`,className:e.cn(`animate-pulse rounded-control-small bg-bg-muted motion-reduce:animate-none`,n)})}exports.Skeleton=n;

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

@@ -0,0 +1,6 @@
+import { SkeletonProps } from './types.js';
+/**
+ * 장식용 로딩 블록. 크기와 레이아웃은 소비자가 className으로 지정한다.
+ * 보조기기에는 숨겨지므로 로딩 상태 설명이 필요하면 별도 상태 문구를 제공한다.
+ */
+export declare function Skeleton({ className, ...props }: SkeletonProps): import("react").JSX.Element;

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/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;