@thewrong/ui 0.2.0 → 0.3.0

package/dist/components/toast/ToastProvider.esm.js

@@ -1,75 +1,79 @@
-import { CircleCheck as e } from "../../node_modules/lucide-react/dist/esm/icons/circle-check.esm.js";
-import { CircleX as t } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
-import { Info as n } from "../../node_modules/lucide-react/dist/esm/icons/info.esm.js";
-import { LoaderCircle as r } from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.esm.js";
-import { useIsMobile as i } from "../../hooks/useMediaQuery.esm.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { ToastBar as c, Toaster as l, toast as u } from "react-hot-toast";
+import { cn as e } from "../../lib/utils.esm.js";
+import { CircleCheck as t } from "../../node_modules/lucide-react/dist/esm/icons/circle-check.esm.js";
+import { CircleX as n } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { Info as r } from "../../node_modules/lucide-react/dist/esm/icons/info.esm.js";
+import { LoaderCircle as i } from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.esm.js";
+import { useIsMobile as a } from "../../hooks/useMediaQuery.esm.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { ToastBar as l, Toaster as u, toast as d } from "react-hot-toast";
 //#region src/components/toast/ToastProvider.tsx
-function d({ children: d }) {
-	let f = i();
-	return /* @__PURE__ */ s(a, { children: [d, /* @__PURE__ */ o(l, {
-		position: f ? "top-center" : "bottom-center",
-		containerStyle: f ? { top: "calc(16px + env(safe-area-inset-top))" } : void 0,
+function f({ children: f }) {
+	let p = a();
+	return /* @__PURE__ */ c(o, { children: [f, /* @__PURE__ */ s(u, {
+		position: p ? "top-center" : "bottom-center",
+		containerStyle: {
+			zIndex: "var(--z-toast)",
+			...p ? { top: "calc(16px + env(safe-area-inset-top))" } : {}
+		},
 		toastOptions: {
 			duration: 3e3,
 			style: {
-				background: "var(--color-secondary-700)",
-				color: "#FFFFFF",
-				borderRadius: "16px",
+				background: "var(--color-bg-toast)",
+				color: "var(--color-fg-toast)",
+				borderRadius: "var(--radius-toast)",
 				padding: 0,
-				fontSize: f ? "12px" : "14px",
+				fontSize: p ? "12px" : "14px",
 				fontWeight: 500,
 				width: "min(680px, calc(100vw - 32px))",
 				maxWidth: "none"
 			}
 		},
-		children: (i) => /* @__PURE__ */ o(c, {
-			toast: i,
+		children: (a) => /* @__PURE__ */ s(l, {
+			toast: a,
 			style: {
-				...i.style,
+				...a.style,
 				padding: 0,
 				width: "100%"
 			},
-			children: ({ message: a }) => {
-				let c = f ? "w-4 h-4" : "w-4.5 h-4.5", l = f ? "px-3 py-3" : "px-3 py-3.5", d = f ? "text-xs" : "text-sm";
-				return /* @__PURE__ */ s("div", {
-					className: `flex items-center ${l} w-full`,
-					children: [/* @__PURE__ */ s("div", {
+			children: ({ message: o }) => {
+				let l = p ? "w-4 h-4" : "w-4.5 h-4.5", u = p ? "px-3 py-3" : "px-3 py-3.5", f = p ? "text-xs" : "text-sm";
+				return /* @__PURE__ */ c("div", {
+					className: e("flex items-center w-full", u),
+					children: [/* @__PURE__ */ c("div", {
 						className: "flex items-center justify-center gap-2 flex-1 min-w-0",
-						children: [/* @__PURE__ */ s("span", {
+						children: [/* @__PURE__ */ c("span", {
 							className: "shrink-0 flex items-center",
 							children: [
-								i.type === "success" && /* @__PURE__ */ o(e, {
-									className: `${c} text-green-400`,
+								a.type === "success" && /* @__PURE__ */ s(t, {
+									className: e(l, "text-toast-tone-success"),
 									strokeWidth: 2
 								}),
-								i.type === "error" && /* @__PURE__ */ o(t, {
-									className: `${c} text-rose-400`,
+								a.type === "error" && /* @__PURE__ */ s(n, {
+									className: e(l, "text-toast-tone-danger"),
 									strokeWidth: 2
 								}),
-								i.type === "loading" && /* @__PURE__ */ o(r, {
-									className: `${c} animate-spin text-white`,
+								a.type === "loading" && /* @__PURE__ */ s(i, {
+									className: e(l, "animate-spin text-fg-toast"),
 									strokeWidth: 2
 								}),
-								i.type === "blank" && /* @__PURE__ */ o(n, {
-									className: `${c} text-blue-400`,
+								a.type === "blank" && /* @__PURE__ */ s(r, {
+									className: e(l, "text-toast-tone-info"),
 									strokeWidth: 2
 								})
 							]
-						}), /* @__PURE__ */ o("span", {
-							className: `${d} text-white whitespace-pre-line min-w-0 break-keep wrap-break-word`,
-							children: a
+						}), /* @__PURE__ */ s("span", {
+							className: e(f, "text-fg-toast whitespace-pre-line min-w-0 break-keep wrap-break-word"),
+							children: o
 						})]
-					}), i.type !== "loading" && /* @__PURE__ */ o("button", {
+					}), a.type !== "loading" && /* @__PURE__ */ s("button", {
 						type: "button",
-						onClick: () => u.dismiss(i.id),
-						className: "ml-2 shrink-0 text-white/70 hover:text-white transition-colors cursor-pointer",
+						onClick: () => d.dismiss(a.id),
+						className: "ml-2 shrink-0 text-fg-toast-muted hover:text-fg-toast-hover transition-colors cursor-pointer",
 						"aria-label": "닫기",
-						children: /* @__PURE__ */ o(t, {
-							className: c,
+						children: /* @__PURE__ */ s(n, {
+							className: l,
 							fill: "currentColor",
-							stroke: "var(--color-secondary-700)",
+							stroke: "var(--color-bg-toast)",
 							strokeWidth: 2
 						})
 					})]
@@ -79,4 +83,4 @@ function d({ children: d }) {
 	})] });
 }
 //#endregion
-export { d as ToastProvider };
+export { f as ToastProvider };

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

@@ -0,0 +1,3 @@
+export { ToastProvider } from './ToastProvider.js';
+export type { ToastProviderProps } from './ToastProvider.js';
+export { default as toast } from 'react-hot-toast';

package/dist/components/toolbar/Toolbar.cjs

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

package/dist/{src/components → components}/toolbar/Toolbar.d.ts

@@ -3,7 +3,7 @@ import { ComponentType, ReactNode } from 'react';
  * 테이블 위에 놓이는 표준 툴바 — 컴파운드 컴포넌트.
  *
  * 자식 슬롯:
- * - `<Toolbar.Title>`: 영역 타이틀(옵션). 패딩 없는 16px text-text-tertiary 텍스트.
+ * - `<Toolbar.Title>`: 영역 타이틀(옵션). 패딩 없는 16px text-fg-muted 텍스트.
  * - `<Toolbar.Summary>`: 데이터 요약 칩 영역 (옵션, mini summary). collapsible로 펼치기/접기.
  * - `<Toolbar.Left>`: 좌측 컨트롤 (ColumnPresetSelector 등).
  * - `<Toolbar.Right>`: 우측 액션 (엑셀 다운로드, 등록 버튼 등).

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