@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/toolbar/Toolbar.esm.js

@@ -1,148 +1,149 @@
-import { Button as e } from "../button/Button.esm.js";
-import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
-import { Wrench as n } from "../../node_modules/lucide-react/dist/esm/icons/wrench.esm.js";
-import { Popover as r } from "../popover/Popover.esm.js";
-import { useIsMobile as i } from "../../hooks/useMediaQuery.esm.js";
-import { Children as a, isValidElement as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { ChevronDown as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { Wrench as r } from "../../node_modules/lucide-react/dist/esm/icons/wrench.esm.js";
+import { Popover as i } from "../popover/Popover.esm.js";
+import { useIsMobile as a } from "../../hooks/useMediaQuery.esm.js";
+import { Children as o, isValidElement as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/toolbar/Toolbar.tsx
-var u = Symbol.for("thewrong.toolbar.slot");
-function d(e, t) {
-	return e[u] = t, e;
+var d = Symbol.for("thewrong.toolbar.slot");
+function f(e, t) {
+	return e[d] = t, e;
 }
-function f(e) {
-	if (!(typeof e != "function" && typeof e != "object")) return e[u];
+function p(e) {
+	if (!(typeof e != "function" && typeof e != "object")) return e[d];
 }
-function p({ children: e, className: t = "" }) {
-	let n = a.toArray(e), r = null, i = null, s = null, u = null;
-	for (let e of n) if (o(e)) switch (f(e.type)) {
+function m({ children: t, className: n = "" }) {
+	let r = o.toArray(t), i = null, a = null, c = null, d = null;
+	for (let e of r) if (s(e)) switch (p(e.type)) {
 		case "title":
-			r = e;
+			i = e;
 			break;
 		case "summary":
-			i = e;
+			a = e;
 			break;
 		case "left":
-			s = e;
+			c = e;
 			break;
 		case "right":
-			u = e;
+			d = e;
 			break;
 	}
-	let d = s || u;
-	return /* @__PURE__ */ l("div", {
-		className: `flex flex-col ${t}`,
+	let f = c || d;
+	return /* @__PURE__ */ u("div", {
+		className: e("flex flex-col", n),
 		children: [
-			r ? /* @__PURE__ */ c("div", {
-				className: i || d ? "mb-3.5 md:mb-6" : "",
-				children: r
+			i ? /* @__PURE__ */ l("div", {
+				className: a || f ? "mb-3.5 md:mb-6" : "",
+				children: i
 			}) : null,
-			i,
-			d && /* @__PURE__ */ l("div", {
-				className: `flex flex-wrap items-center gap-2 ${i ? "mt-2.5 md:mt-4.5" : ""}`,
-				children: [s, u ? /* @__PURE__ */ c("div", {
+			a,
+			f && /* @__PURE__ */ u("div", {
+				className: e("flex flex-wrap items-center gap-2", a && "mt-2.5 md:mt-4.5"),
+				children: [c, d ? /* @__PURE__ */ l("div", {
 					className: "ml-auto",
-					children: u
+					children: d
 				}) : null]
 			})
 		]
 	});
 }
-function m({ children: e, className: t = "" }) {
-	return /* @__PURE__ */ c("h2", {
-		className: `text-sm font-medium text-text-tertiary md:text-base ${t}`,
-		children: e
+function h({ children: t, className: n = "" }) {
+	return /* @__PURE__ */ l("h2", {
+		className: e("text-sm font-medium text-fg-muted md:text-base", n),
+		children: t
 	});
 }
-function h({ children: e, className: n = "", totalElements: r, totalUnit: u = "건", totalPrefix: d = "", collapsible: f = !1, defaultCollapsed: p = !0 }) {
-	let [m, h] = s(p), g = i(), _ = a.toArray(e), v = r != null;
-	if (!v && _.length === 0) return null;
-	let y = `총 ${d ? `${d} ` : ""}${r?.toLocaleString() ?? 0}${u}`, b = f && _.length > 0 && g, x = "inline-flex items-center gap-1 rounded-full border border-border-secondary px-2.5 py-1 text-sm font-medium text-text-secondary", S = v ? b ? /* @__PURE__ */ l("button", {
+function g({ children: t, className: r = "", totalElements: i, totalUnit: d = "건", totalPrefix: f = "", collapsible: p = !1, defaultCollapsed: m = !0 }) {
+	let [h, g] = c(m), _ = a(), v = o.toArray(t), y = i != null;
+	if (!y && v.length === 0) return null;
+	let b = `총 ${f ? `${f} ` : ""}${i?.toLocaleString() ?? 0}${d}`, x = p && v.length > 0 && _, S = "inline-flex items-center gap-1 rounded-full border border-border-subtle px-2.5 py-1 text-sm font-medium text-fg-muted", C = y ? x ? /* @__PURE__ */ u("button", {
 		type: "button",
-		onClick: () => h((e) => !e),
-		"aria-expanded": !m,
-		"aria-label": m ? "요약 펼치기" : "요약 접기",
-		className: x,
-		children: [/* @__PURE__ */ c("span", { children: y }), /* @__PURE__ */ c(t, {
+		onClick: () => g((e) => !e),
+		"aria-expanded": !h,
+		"aria-label": h ? "요약 펼치기" : "요약 접기",
+		className: S,
+		children: [/* @__PURE__ */ l("span", { children: b }), /* @__PURE__ */ l(n, {
 			"aria-hidden": "true",
-			className: `h-3.5 w-3.5 transition-transform ${m ? "" : "rotate-180"}`
+			className: e("h-3.5 w-3.5 transition-transform", !h && "rotate-180")
 		})]
-	}) : /* @__PURE__ */ c("span", {
-		className: x,
-		children: y
+	}) : /* @__PURE__ */ l("span", {
+		className: S,
+		children: b
 	}) : null;
-	return f ? /* @__PURE__ */ l("div", {
-		className: `flex flex-wrap items-center gap-x-2 gap-y-1.5 ${n}`,
-		children: [S, _.map((e, t) => {
-			let n = o(e) ? e.key ?? t : t;
-			return /* @__PURE__ */ c("div", {
-				className: `grid transition-[grid-template-rows,opacity,margin] duration-200 ease-out sm:grid-rows-[1fr]! sm:opacity-100! ${m ? "grid-rows-[0fr] opacity-0 -my-1" : "grid-rows-[1fr] opacity-100"}`,
-				children: /* @__PURE__ */ c("div", {
+	return p ? /* @__PURE__ */ u("div", {
+		className: e("flex flex-wrap items-center gap-x-2 gap-y-1.5", r),
+		children: [C, v.map((t, n) => {
+			let r = s(t) ? t.key ?? n : n;
+			return /* @__PURE__ */ l("div", {
+				className: e("grid transition-[grid-template-rows,opacity,margin] duration-200 ease-out sm:grid-rows-[1fr]! sm:opacity-100!", h ? "grid-rows-[0fr] opacity-0 -my-1" : "grid-rows-[1fr] opacity-100"),
+				children: /* @__PURE__ */ l("div", {
 					className: "overflow-hidden min-h-0",
-					children: e
+					children: t
 				})
-			}, n);
+			}, r);
 		})]
-	}) : /* @__PURE__ */ l("div", {
-		className: `flex flex-wrap items-center gap-x-2 gap-y-1.5 ${n}`,
-		children: [S, _]
+	}) : /* @__PURE__ */ u("div", {
+		className: e("flex flex-wrap items-center gap-x-2 gap-y-1.5", r),
+		children: [C, v]
 	});
 }
-function g({ children: e, className: t = "" }) {
-	return /* @__PURE__ */ c("div", {
-		className: `flex items-center gap-2 ${t}`,
-		children: e
+function _({ children: t, className: n = "" }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center gap-2", n),
+		children: t
 	});
 }
-function _({ children: o, className: s = "", collapseOnMobile: l = !1, collapseTriggerLabel: u = "작업", collapseTriggerIcon: d }) {
-	let f = i(), p = a.toArray(o);
-	if (!(l && f && p.length >= 2)) return /* @__PURE__ */ c("div", {
-		className: `flex items-center gap-2 ${s}`,
-		children: o
+function v({ children: s, className: c = "", collapseOnMobile: u = !1, collapseTriggerLabel: d = "작업", collapseTriggerIcon: f }) {
+	let p = a(), m = o.toArray(s);
+	if (!(u && p && m.length >= 2)) return /* @__PURE__ */ l("div", {
+		className: e("flex items-center gap-2", c),
+		children: s
 	});
-	let m = /* @__PURE__ */ c(e, {
+	let h = /* @__PURE__ */ l(t, {
 		variant: "primary",
 		size: "mini",
-		leadingIcon: d ?? /* @__PURE__ */ c(n, { className: "h-3.5 w-3.5" }),
-		trailingIcon: /* @__PURE__ */ c(t, { className: "h-3.5 w-3.5" }),
-		children: u
+		leadingIcon: f ?? /* @__PURE__ */ l(r, { className: "h-3.5 w-3.5" }),
+		trailingIcon: /* @__PURE__ */ l(n, { className: "h-3.5 w-3.5" }),
+		children: d
 	});
-	return /* @__PURE__ */ c("div", {
-		className: `flex items-center ${s}`,
-		children: /* @__PURE__ */ c(r, {
-			trigger: m,
-			content: /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center", c),
+		children: /* @__PURE__ */ l(i, {
+			trigger: h,
+			content: /* @__PURE__ */ l("div", {
 				className: "flex flex-col gap-2 [&>*]:w-full",
-				children: p
+				children: m
 			})
 		})
 	});
 }
-var v = {
-	neutral: "border border-border-secondary text-text-secondary dark:border-border-secondary",
-	info: "bg-info-50 text-info-600 dark:bg-info-900/40 dark:text-info-200",
-	success: "bg-success-50 text-success-600 dark:bg-success-900/40 dark:text-success-200",
-	warning: "bg-warning-50 text-warning-600 dark:bg-warning-900/40 dark:text-warning-200",
-	error: "bg-error-50 text-error-600 dark:bg-error-900/40 dark:text-error-200"
+var y = {
+	neutral: "border border-border-subtle text-fg-muted",
+	info: "bg-info-subtle text-info-fg",
+	success: "bg-success-subtle text-success-fg",
+	warning: "bg-warning-subtle text-warning-fg",
+	error: "bg-error-subtle text-error-fg"
 };
-function y({ variant: e = "neutral", children: t, className: n = "" }) {
-	return /* @__PURE__ */ c("span", {
-		className: `inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-sm font-medium ${v[e === "danger" ? "error" : e]} ${n}`,
-		children: t
+function b({ variant: t = "neutral", children: n, className: r = "" }) {
+	return /* @__PURE__ */ l("span", {
+		className: e("inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-sm font-medium", y[t === "danger" ? "error" : t], r),
+		children: n
 	});
 }
-function b({ icon: e, children: t, onClick: n, disabled: r, className: i = "" }) {
-	return /* @__PURE__ */ l("button", {
+function x({ icon: t, children: n, onClick: r, disabled: i, className: a = "" }) {
+	return /* @__PURE__ */ u("button", {
 		type: "button",
-		onClick: n,
-		disabled: r,
-		className: `flex items-center gap-2 rounded px-3 py-2 text-sm text-neutral-700 transition-colors hover:bg-neutral-100 disabled:opacity-50 dark:text-neutral-200 dark:hover:bg-neutral-700 ${i}`,
-		children: [e ? /* @__PURE__ */ c("span", {
+		onClick: r,
+		disabled: i,
+		className: e("flex items-center gap-2 rounded px-3 py-2 text-sm text-fg-default transition-colors hover:bg-bg-subtle disabled:opacity-50", a),
+		children: [t ? /* @__PURE__ */ l("span", {
 			className: "shrink-0 [&>svg]:h-4 [&>svg]:w-4",
-			children: e
-		}) : null, /* @__PURE__ */ c("span", { children: t })]
+			children: t
+		}) : null, /* @__PURE__ */ l("span", { children: n })]
 	});
 }
-p.Title = d(m, "title"), p.Summary = Object.assign(d(h, "summary"), { Item: y }), p.Left = d(g, "left"), p.Right = d(_, "right"), p.MenuItem = b;
+m.Title = f(h, "title"), m.Summary = Object.assign(f(g, "summary"), { Item: b }), m.Left = f(_, "left"), m.Right = f(v, "right"), m.MenuItem = x;
 //#endregion
-export { p as Toolbar };
+export { m as Toolbar };

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

@@ -0,0 +1,2 @@
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarSummaryItemVariant } from './Toolbar.js';

package/dist/components/tooltip/{Tooltip.cjs.js → Tooltip.cjs}

@@ -1 +1 @@
-let e=require("react"),t=require("react/jsx-runtime"),n=require("@floating-ui/react");function r({children:r,content:i,position:a=`top`,delayMs:o=100}){let[s,c]=(0,e.useState)(!1),{refs:l,floatingStyles:u,context:d}=(0,n.useFloating)({open:s,onOpenChange:c,placement:a,whileElementsMounted:n.autoUpdate,middleware:[(0,n.offset)(6),(0,n.flip)({fallbackAxisSideDirection:`start`}),(0,n.shift)({padding:8})]}),{getReferenceProps:f,getFloatingProps:p}=(0,n.useInteractions)([(0,n.useHover)(d,{delay:{open:o,close:0}}),(0,n.useFocus)(d),(0,n.useDismiss)(d),(0,n.useRole)(d,{role:`tooltip`})]);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`span`,{ref:l.setReference,...f(),className:`inline-flex`,children:r}),s&&(0,t.jsx)(n.FloatingPortal,{children:(0,t.jsx)(`div`,{ref:l.setFloating,style:u,...p(),className:`z-9999 pointer-events-none rounded bg-neutral-800 px-2 py-1 text-xs whitespace-nowrap text-white dark:bg-neutral-700`,children:i})})]})}exports.Tooltip=r;
+let e=require("react"),t=require("react/jsx-runtime"),n=require("@floating-ui/react");function r({children:r,content:i,position:a=`top`,delayMs:o=100}){let[s,c]=(0,e.useState)(!1),{refs:l,floatingStyles:u,context:d}=(0,n.useFloating)({open:s,onOpenChange:c,placement:a,whileElementsMounted:n.autoUpdate,middleware:[(0,n.offset)(6),(0,n.flip)({fallbackAxisSideDirection:`start`}),(0,n.shift)({padding:8})]}),{getReferenceProps:f,getFloatingProps:p}=(0,n.useInteractions)([(0,n.useHover)(d,{delay:{open:o,close:0}}),(0,n.useFocus)(d),(0,n.useDismiss)(d),(0,n.useRole)(d,{role:`tooltip`})]);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`span`,{ref:l.setReference,...f(),className:`inline-flex`,children:r}),s&&(0,t.jsx)(n.FloatingPortal,{children:(0,t.jsx)(`div`,{ref:l.setFloating,style:u,...p(),className:`z-floating pointer-events-none rounded-tooltip bg-bg-tooltip px-2 py-1 text-xs whitespace-nowrap text-fg-tooltip`,children:i})})]})}exports.Tooltip=r;

package/dist/components/tooltip/Tooltip.esm.js

@@ -31,7 +31,7 @@ function h({ children: h, content: g, position: _ = "top", delayMs: v = 100 }) {
 		ref: x.setFloating,
 		style: S,
 		...T(),
-		className: "z-9999 pointer-events-none rounded bg-neutral-800 px-2 py-1 text-xs whitespace-nowrap text-white dark:bg-neutral-700",
+		className: "z-floating pointer-events-none rounded-tooltip bg-bg-tooltip px-2 py-1 text-xs whitespace-nowrap text-fg-tooltip",
 		children: g
 	}) })] });
 }

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

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip.js';
+export type { TooltipProps } from './Tooltip.js';

package/dist/components/typewriter-text/TypewriterText.cjs

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime"),n=require("motion/react");var r=32,i=90;function a(e){let t=[],n=/\S+\s*/g,r=n.exec(e);for(;r!==null;)t.push(r.index+r[0].length),r=n.exec(e);return t.length===0&&e.length>0&&t.push(e.length),t}function o({text:o,delay:s=0,animate:c=!0,onComplete:l,unit:u=`character`}){let d=(0,n.useReducedMotion)()??!1,f=c&&!d,[p,m]=(0,e.useState)(()=>f?0:o.length),h=(0,e.useRef)(l),g=(0,e.useRef)(null);h.current=l,(0,e.useEffect)(()=>{if(!f||o.length===0){m(o.length),g.current!==o&&(g.current=o,h.current?.());return}g.current=null,m(0);let e,t=u===`word`?a(o):Array.from({length:o.length},(e,t)=>t+1),n=u===`word`?i:r,c=0,l=window.setTimeout(()=>{e=window.setInterval(()=>{let n=t[c]??o.length;c+=1,m(n),c>=t.length&&(e!==void 0&&window.clearInterval(e),h.current?.())},n)},s);return()=>{window.clearTimeout(l),e!==void 0&&window.clearInterval(e)}},[s,f,o,u]);let _=f&&p<o.length;return(0,t.jsxs)(`span`,{"aria-label":o,children:[(0,t.jsx)(`span`,{"aria-hidden":`true`,children:o.slice(0,p)}),_?(0,t.jsx)(n.motion.span,{"aria-hidden":`true`,animate:{opacity:[0,1,1,0]},transition:{duration:.8,ease:`linear`,repeat:1/0},children:`|`}):null]})}exports.TypewriterText=o;

package/dist/components/typewriter-text/TypewriterText.d.ts

@@ -0,0 +1,7 @@
+import { TypewriterTextProps } from './types.js';
+/**
+ * 값이 로드된 직후에만 짧게 사용하는 텍스트 표시 효과입니다.
+ * 보조기기에는 전체 문자열을 즉시 제공하고, 모션 감소 환경 또는 `animate={false}`에서는
+ * 애니메이션 없이 표시합니다.
+ */
+export declare function TypewriterText({ text, delay, animate, onComplete, unit, }: TypewriterTextProps): import("react").JSX.Element;

package/dist/components/typewriter-text/TypewriterText.esm.js

@@ -0,0 +1,58 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { motion as a, useReducedMotion as o } from "motion/react";
+//#region src/components/typewriter-text/TypewriterText.tsx
+var s = 32, c = 90;
+function l(e) {
+	let t = [], n = /\S+\s*/g, r = n.exec(e);
+	for (; r !== null;) t.push(r.index + r[0].length), r = n.exec(e);
+	return t.length === 0 && e.length > 0 && t.push(e.length), t;
+}
+function u({ text: u, delay: d = 0, animate: f = !0, onComplete: p, unit: m = "character" }) {
+	let h = o() ?? !1, g = f && !h, [_, v] = n(() => g ? 0 : u.length), y = t(p), b = t(null);
+	y.current = p, e(() => {
+		if (!g || u.length === 0) {
+			v(u.length), b.current !== u && (b.current = u, y.current?.());
+			return;
+		}
+		b.current = null, v(0);
+		let e, t = m === "word" ? l(u) : Array.from({ length: u.length }, (e, t) => t + 1), n = m === "word" ? c : s, r = 0, i = window.setTimeout(() => {
+			e = window.setInterval(() => {
+				let n = t[r] ?? u.length;
+				r += 1, v(n), r >= t.length && (e !== void 0 && window.clearInterval(e), y.current?.());
+			}, n);
+		}, d);
+		return () => {
+			window.clearTimeout(i), e !== void 0 && window.clearInterval(e);
+		};
+	}, [
+		d,
+		g,
+		u,
+		m
+	]);
+	let x = g && _ < u.length;
+	return /* @__PURE__ */ i("span", {
+		"aria-label": u,
+		children: [/* @__PURE__ */ r("span", {
+			"aria-hidden": "true",
+			children: u.slice(0, _)
+		}), x ? /* @__PURE__ */ r(a.span, {
+			"aria-hidden": "true",
+			animate: { opacity: [
+				0,
+				1,
+				1,
+				0
+			] },
+			transition: {
+				duration: .8,
+				ease: "linear",
+				repeat: Infinity
+			},
+			children: "|"
+		}) : null]
+	});
+}
+//#endregion
+export { u as TypewriterText };

package/dist/components/typewriter-text/index.d.ts

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

package/dist/components/typewriter-text/types.d.ts

@@ -0,0 +1,12 @@
+export interface TypewriterTextProps {
+    /** 표시할 전체 문자열. */
+    text: string;
+    /** 시작 전 대기 시간(ms). 기본 0. */
+    delay?: number;
+    /** false면 즉시 표시한다. 재방문 시 효과를 생략하려면 상위에서 이 값을 관리한다. */
+    animate?: boolean;
+    /** 타이핑 또는 즉시 표시가 끝나면 호출된다. */
+    onComplete?: () => void;
+    /** 글자 또는 공백을 포함한 단어 단위로 표시한다. 기본 character. */
+    unit?: "character" | "word";
+}

package/dist/components/typing-dots/TypingDots.cjs

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime"),t=require("motion/react");var n=3,r=1.2,i=r/n;function a({label:a}){let o=(0,t.useReducedMotion)()??!1;return(0,e.jsx)(`span`,{role:`status`,"aria-label":a,className:`inline-flex items-center gap-[0.2em] align-baseline`,children:Array.from({length:n},(n,a)=>(0,e.jsx)(t.motion.span,{"aria-hidden":`true`,className:`inline-block size-[0.35em] rounded-full bg-current`,style:{opacity:o?.4:void 0},animate:o?void 0:{opacity:[.3,1,.3],y:[`0em`,`-0.22em`,`0em`]},transition:o?void 0:{duration:r,ease:`easeInOut`,repeat:1/0,delay:a*i}},a))})}exports.TypingDots=a;

package/dist/components/typing-dots/TypingDots.d.ts

@@ -0,0 +1,10 @@
+import { TypingDotsProps } from './types.js';
+/**
+ * 값이 아직 없는 자리에 놓는 점 3개 인디케이터입니다. 채팅의 "입력 중"과
+ * 값 로딩("잔고를 불러오는 중")에 모두 씁니다.
+ *
+ * **색과 크기를 스스로 정하지 않습니다.** 점은 `currentColor`를 쓰고 지름은
+ * `em`이라 놓인 자리의 글자색·글자크기를 그대로 따릅니다.
+ * 색을 바꾸려면 부모의 text 색을 바꿉니다.
+ */
+export declare function TypingDots({ label }: TypingDotsProps): import("react").JSX.Element;

package/dist/components/typing-dots/TypingDots.esm.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import { motion as t, useReducedMotion as n } from "motion/react";
+//#region src/components/typing-dots/TypingDots.tsx
+var r = 3, i = 1.2, a = i / r;
+function o({ label: o }) {
+	let s = n() ?? !1;
+	return /* @__PURE__ */ e("span", {
+		role: "status",
+		"aria-label": o,
+		className: "inline-flex items-center gap-[0.2em] align-baseline",
+		children: Array.from({ length: r }, (n, r) => /* @__PURE__ */ e(t.span, {
+			"aria-hidden": "true",
+			className: "inline-block size-[0.35em] rounded-full bg-current",
+			style: { opacity: s ? .4 : void 0 },
+			animate: s ? void 0 : {
+				opacity: [
+					.3,
+					1,
+					.3
+				],
+				y: [
+					"0em",
+					"-0.22em",
+					"0em"
+				]
+			},
+			transition: s ? void 0 : {
+				duration: i,
+				ease: "easeInOut",
+				repeat: Infinity,
+				delay: r * a
+			}
+		}, r))
+	});
+}
+//#endregion
+export { o as TypingDots };

package/dist/components/typing-dots/index.d.ts

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

package/dist/components/typing-dots/types.d.ts

@@ -0,0 +1,4 @@
+export interface TypingDotsProps {
+    /** 스크린리더에 읽히는 상태 문구. 점 자체는 aria-hidden이다. */
+    label: string;
+}

package/dist/hooks/awaitableOverlayController.cjs

@@ -0,0 +1 @@
+function e(){let e=null,t=t=>{if(!e)return!1;let n=e;return e=null,n(t),!0};return{open(){return t({type:`cancel`}),new Promise(t=>{e=t})},settle:t}}exports.createAwaitableOverlayController=e;

package/dist/hooks/awaitableOverlayController.d.ts

@@ -0,0 +1,6 @@
+import { AwaitableOverlayResult } from './useAwaitableOverlay.js';
+/** 한 번에 하나의 응답만 기다리고 이전 요청은 취소로 끝낸다. */
+export declare function createAwaitableOverlayController<TResult>(): {
+    open(): Promise<AwaitableOverlayResult<TResult>>;
+    settle: (result: AwaitableOverlayResult<TResult>) => boolean;
+};

package/dist/hooks/awaitableOverlayController.esm.js

@@ -0,0 +1,18 @@
+//#region src/hooks/awaitableOverlayController.ts
+function e() {
+	let e = null, t = (t) => {
+		if (!e) return !1;
+		let n = e;
+		return e = null, n(t), !0;
+	};
+	return {
+		open() {
+			return t({ type: "cancel" }), new Promise((t) => {
+				e = t;
+			});
+		},
+		settle: t
+	};
+}
+//#endregion
+export { e as createAwaitableOverlayController };

package/dist/hooks/index.d.ts

@@ -0,0 +1,17 @@
+export { useClickOutside } from './useClickOutside.js';
+export { useMediaQuery, useIsMobile, MOBILE_MEDIA_QUERY, } from './useMediaQuery.js';
+export { useBottomSheetDrag } from './useBottomSheetDrag.js';
+export { useScrollLock } from './useScrollLock.js';
+export { useFocusTrap, type UseFocusTrapOptions } from './useFocusTrap.js';
+export { useInfiniteScroll } from './useInfiniteScroll.js';
+export type { UseInfiniteScrollOptions, UseInfiniteScrollReturn, InfiniteScrollOptions, LegacyInfiniteScrollOptions, } from './useInfiniteScroll.js';
+export { useFillEmptyRows } from './useFillEmptyRows.js';
+export type { FillEmptyRowsRemainingMode, UseFillEmptyRowsOptions, UseFillEmptyRowsReturn, } from './useFillEmptyRows.js';
+export { useTableDragSelection } from './useTableDragSelection.js';
+export type { UseTableDragSelectionOptions } from './useTableDragSelection.js';
+export { useVirtualRows } from './useVirtualRows.js';
+export type { UseVirtualRowsOptions, UseVirtualRowsReturn, } from './useVirtualRows.js';
+export { useAwaitableOverlay } from './useAwaitableOverlay.js';
+export type { AwaitableOverlayResult } from './useAwaitableOverlay.js';
+export { useStepper } from '../components/stepper/use-stepper.js';
+export type { UseStepperOptions, StepperState, } from '../components/stepper/use-stepper.js';

package/dist/hooks/useAwaitableOverlay.cjs

@@ -0,0 +1 @@
+const e=require("./awaitableOverlayController.cjs");let t=require("react");function n(){let[n,r]=(0,t.useState)(!1),i=(0,t.useRef)(null);i.current||=e.createAwaitableOverlayController();let a=i.current;return(0,t.useEffect)(()=>()=>{a.settle({type:`cancel`})},[a]),{isOpen:n,open:(0,t.useCallback)(()=>{let e=a.open();return r(!0),e},[a]),settle:(0,t.useCallback)(e=>{a.settle(e)&&r(!1)},[a])}}exports.useAwaitableOverlay=n;

package/dist/hooks/useAwaitableOverlay.d.ts

@@ -0,0 +1,16 @@
+export type AwaitableOverlayResult<TResult = void> = {
+    type: "confirm";
+    value: TResult;
+} | {
+    type: "cancel";
+};
+/**
+ * 오버레이 응답을 Promise로 기다린다. 내용과 표시 방식은 호출부가 관리한다.
+ * 중복 open과 언마운트는 이전 요청을 cancel로 완료한다. ESC·백드롭 등 모든 닫기 경로에서
+ * settle({ type: "cancel" })을 호출해야 열린 Promise가 남지 않는다.
+ */
+export declare function useAwaitableOverlay<TResult = void>(): {
+    isOpen: boolean;
+    open: () => Promise<AwaitableOverlayResult<TResult>>;
+    settle: (result: AwaitableOverlayResult<TResult>) => void;
+};

package/dist/hooks/useAwaitableOverlay.esm.js

@@ -0,0 +1,22 @@
+import { createAwaitableOverlayController as e } from "./awaitableOverlayController.esm.js";
+import { useCallback as t, useEffect as n, useRef as r, useState as i } from "react";
+//#region src/hooks/useAwaitableOverlay.ts
+function a() {
+	let [a, o] = i(!1), s = r(null);
+	s.current ||= e();
+	let c = s.current;
+	return n(() => () => {
+		c.settle({ type: "cancel" });
+	}, [c]), {
+		isOpen: a,
+		open: t(() => {
+			let e = c.open();
+			return o(!0), e;
+		}, [c]),
+		settle: t((e) => {
+			c.settle(e) && o(!1);
+		}, [c])
+	};
+}
+//#endregion
+export { a as useAwaitableOverlay };

package/dist/hooks/useFillEmptyRows.cjs

@@ -0,0 +1 @@
+let e=require("react");function t({containerHeight:e,headerHeight:t,rowHeights:n,remainingMode:r,tbodyHeight:i,emptyRowsHeight:a}){if(n.length===0)return{emptyRowCount:0,measuredRowHeight:null};let o=n.reduce((e,t)=>e+t,0),s=o/n.length;if(s<=0)return null;let c=r===`tbody-height`?Math.max(0,i-a):o,l=e-t-c;return{emptyRowCount:l>0?Math.floor(l/s):0,measuredRowHeight:s}}function n({enabled:n,containerRef:r,theadRef:i,tbodyRef:a,excludeRowsSelector:o,remainingMode:s,observeTbody:c=!1,deps:l=[]}){let[u,d]=(0,e.useState)(0),[f,p]=(0,e.useState)(null),[m,h]=(0,e.useState)(()=>[...l]);return(m.length!==l.length||l.some((e,t)=>!Object.is(e,m[t])))&&h([...l]),(0,e.useLayoutEffect)(()=>{if(!n){d(e=>e===0?e:0);return}let e=r.current,l=i.current,u=a.current;if(!e||!l||!u)return;let f=()=>{let n=Array.from(u.querySelectorAll(o)).map(e=>e.offsetHeight),r=s===`tbody-height`?Array.from(u.querySelectorAll(`tr[data-empty-row]`)).reduce((e,t)=>e+t.offsetHeight,0):0,i=t({containerHeight:e.clientHeight,headerHeight:l.offsetHeight,rowHeights:n,remainingMode:s,tbodyHeight:u.offsetHeight,emptyRowsHeight:r});i&&(p(e=>e===i.measuredRowHeight?e:i.measuredRowHeight),d(e=>e===i.emptyRowCount?e:i.emptyRowCount))};f();let m=null,h=new ResizeObserver(()=>{m===null&&(m=requestAnimationFrame(()=>{m=null,f()}))});return h.observe(e),c&&h.observe(u),()=>{h.disconnect(),m!==null&&cancelAnimationFrame(m)}},[n,r,i,a,o,s,c,m]),{emptyRowCount:u,measuredRowHeight:f}}exports.useFillEmptyRows=n;

package/dist/{src/components/table/hooks → hooks}/useFillEmptyRows.d.ts

@@ -17,7 +17,7 @@ export interface UseFillEmptyRowsOptions {
     /**
      * 잔여 공간 계산 방식.
      * - `sum-real-rows`: 측정 대상 행들의 높이 합을 뺀다 (펼침 없는 단순 테이블).
-     * - `tbody-height`: tbody 전체 높이를 뺀다 (펼침 행이 있어 tbody가 동적으로 커지는 경우).
+     * - `tbody-height`: 빈 행을 뺀 tbody 높이를 뺀다 (펼침 행이 있는 경우).
      */
     remainingMode: FillEmptyRowsRemainingMode;
     /**
@@ -42,6 +42,15 @@ export interface UseFillEmptyRowsReturn {
     /** 측정된 평균 행 높이(px). 빈 행의 height에 그대로 적용 가능. */
     measuredRowHeight: number | null;
 }
+/** 빈 행을 제외한 높이로 남은 행 수를 계산한다. */
+export declare function calculateFillEmptyRows({ containerHeight, headerHeight, rowHeights, remainingMode, tbodyHeight, emptyRowsHeight, }: {
+    containerHeight: number;
+    headerHeight: number;
+    rowHeights: number[];
+    remainingMode: FillEmptyRowsRemainingMode;
+    tbodyHeight: number;
+    emptyRowsHeight: number;
+}): UseFillEmptyRowsReturn | null;
 /**
  * 컨테이너 잔여 공간만큼 빈 행을 채우기 위한 개수/높이를 계산한다.
  *

package/dist/hooks/useFillEmptyRows.esm.js

@@ -0,0 +1,60 @@
+import { useLayoutEffect as e, useState as t } from "react";
+//#region src/hooks/useFillEmptyRows.ts
+function n({ containerHeight: e, headerHeight: t, rowHeights: n, remainingMode: r, tbodyHeight: i, emptyRowsHeight: a }) {
+	if (n.length === 0) return {
+		emptyRowCount: 0,
+		measuredRowHeight: null
+	};
+	let o = n.reduce((e, t) => e + t, 0), s = o / n.length;
+	if (s <= 0) return null;
+	let c = r === "tbody-height" ? Math.max(0, i - a) : o, l = e - t - c;
+	return {
+		emptyRowCount: l > 0 ? Math.floor(l / s) : 0,
+		measuredRowHeight: s
+	};
+}
+function r({ enabled: r, containerRef: i, theadRef: a, tbodyRef: o, excludeRowsSelector: s, remainingMode: c, observeTbody: l = !1, deps: u = [] }) {
+	let [d, f] = t(0), [p, m] = t(null), [h, g] = t(() => [...u]);
+	return (h.length !== u.length || u.some((e, t) => !Object.is(e, h[t]))) && g([...u]), e(() => {
+		if (!r) {
+			f((e) => e === 0 ? e : 0);
+			return;
+		}
+		let e = i.current, t = a.current, u = o.current;
+		if (!e || !t || !u) return;
+		let d = () => {
+			let r = Array.from(u.querySelectorAll(s)).map((e) => e.offsetHeight), i = c === "tbody-height" ? Array.from(u.querySelectorAll("tr[data-empty-row]")).reduce((e, t) => e + t.offsetHeight, 0) : 0, a = n({
+				containerHeight: e.clientHeight,
+				headerHeight: t.offsetHeight,
+				rowHeights: r,
+				remainingMode: c,
+				tbodyHeight: u.offsetHeight,
+				emptyRowsHeight: i
+			});
+			a && (m((e) => e === a.measuredRowHeight ? e : a.measuredRowHeight), f((e) => e === a.emptyRowCount ? e : a.emptyRowCount));
+		};
+		d();
+		let p = null, h = new ResizeObserver(() => {
+			p === null && (p = requestAnimationFrame(() => {
+				p = null, d();
+			}));
+		});
+		return h.observe(e), l && h.observe(u), () => {
+			h.disconnect(), p !== null && cancelAnimationFrame(p);
+		};
+	}, [
+		r,
+		i,
+		a,
+		o,
+		s,
+		c,
+		l,
+		h
+	]), {
+		emptyRowCount: d,
+		measuredRowHeight: p
+	};
+}
+//#endregion
+export { r as useFillEmptyRows };