@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/time-picker/time-picker.esm.js

@@ -0,0 +1,193 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { Check as n } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Clock as r } from "../../node_modules/lucide-react/dist/esm/icons/clock.esm.js";
+import { Select as i } from "../select/Select.esm.js";
+import { PickerSheet as a, usePickerMobile as o } from "../date-picker/PickerSheet.esm.js";
+import { formatDigitStream as s, formatTime as c, isValidTimeDraft as l, normalizeTime as u, padTimeUnit as d, parseTime as f } from "./time-utils.esm.js";
+import { cloneElement as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { autoUpdate as y, flip as b, offset as x, shift as S, useClick as C, useDismiss as w, useFloating as T, useInteractions as E, useRole as D } from "@floating-ui/react";
+//#region src/components/time-picker/time-picker.tsx
+function O({ children: t, value: n, onApply: r, precision: i, disabled: s = !1, disableMobileSheet: l, referenceClassName: d }) {
+	let [m, O] = h(!1), [A, j] = h(() => f(n)), M = s || !!t.props.disabled, { useSheet: N } = o(l), { refs: P, floatingStyles: F, context: I } = T({
+		open: m,
+		onOpenChange: (e) => {
+			M || (e && j(f(n)), O(e));
+		},
+		placement: "bottom-start",
+		whileElementsMounted: y,
+		middleware: [
+			x(8),
+			b({ fallbackAxisSideDirection: "start" }),
+			S({ padding: 8 })
+		]
+	}), { getReferenceProps: L, getFloatingProps: R } = E([
+		C(I, { enabled: !M }),
+		w(I),
+		D(I, { role: "dialog" })
+	]), z = () => {
+		let e = u(A, i);
+		e && (r(c(e, i)), O(!1));
+	}, B = L(), V = typeof t.type != "string" || [
+		"button",
+		"input",
+		"select",
+		"textarea"
+	].includes(t.type), H = p(t, {
+		"aria-haspopup": "dialog",
+		"aria-expanded": m,
+		"aria-controls": typeof B["aria-controls"] == "string" ? B["aria-controls"] : void 0,
+		"aria-disabled": M || void 0,
+		...M && V ? { disabled: !0 } : {}
+	});
+	return /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("span", {
+		ref: P.setReference,
+		...B,
+		className: e("inline-flex", d ?? "w-full"),
+		children: H
+	}), /* @__PURE__ */ _(a, {
+		isOpen: m,
+		onClose: () => O(!1),
+		useSheet: N,
+		context: I,
+		setFloating: P.setFloating,
+		floatingStyles: F,
+		getFloatingProps: (e) => R({
+			...e,
+			"aria-label": "시간 선택"
+		}),
+		desktopClassName: "z-floating w-80 max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-4 shadow-tooltip",
+		children: /* @__PURE__ */ _(k, {
+			pending: A,
+			precision: i,
+			onChange: j,
+			onClose: () => O(!1),
+			onApply: z
+		})
+	})] });
+}
+function k({ pending: r, precision: i, onChange: a, onClose: o, onApply: s }) {
+	let [c, l] = h(null), d = m(null), f = m(null), p = m(null), g = (e) => {
+		if (e.key !== "Tab" || e.shiftKey || !(e.target instanceof HTMLInputElement)) return;
+		let t = e.target === d.current ? f : e.target === f.current && i === "second" ? p : null;
+		t && (e.preventDefault(), t.current?.focus());
+	}, y = (e, t, n, i) => /* @__PURE__ */ _(A, {
+		label: t,
+		value: r[e],
+		max: n,
+		open: c === e,
+		onOpenChange: (t) => l((n) => t ? e : n === e ? null : n),
+		onChange: (t) => a({
+			...r,
+			[e]: t
+		}),
+		inputRef: i
+	});
+	return /* @__PURE__ */ v("div", {
+		className: "grid gap-4",
+		onKeyDown: g,
+		children: [/* @__PURE__ */ v("div", {
+			className: e("grid items-end gap-2", i === "second" ? "grid-cols-3" : "grid-cols-2"),
+			children: [
+				y("hour", "시간", 23, d),
+				y("minute", "분", 59, f),
+				i === "second" && y("second", "초", 59, p)
+			]
+		}), /* @__PURE__ */ v("div", {
+			className: "flex justify-end gap-2",
+			children: [/* @__PURE__ */ _(t, {
+				type: "button",
+				size: "small",
+				variant: "tertiary",
+				appearance: "transparent",
+				onClick: o,
+				children: "닫기"
+			}), /* @__PURE__ */ _(t, {
+				type: "button",
+				size: "small",
+				disabled: !u(r, i),
+				leadingIcon: /* @__PURE__ */ _(n, {
+					"aria-hidden": !0,
+					className: "h-4 w-4"
+				}),
+				onClick: s,
+				children: "적용"
+			})]
+		})]
+	});
+}
+function A({ label: e, value: t, max: n, open: r, onOpenChange: a, onChange: o, inputRef: s }) {
+	let c = Array.from({ length: n + 1 }, (e, t) => ({
+		value: d(t),
+		label: d(t)
+	}));
+	t && !c.some((e) => e.value === t) && c.push({
+		value: t,
+		label: t
+	});
+	let l = e === "시간" ? "HH" : e === "분" ? "MM" : "SS";
+	return /* @__PURE__ */ _(i, {
+		variant: "box",
+		selectSize: "small",
+		ref: s,
+		label: e,
+		labelOption: "sustain",
+		options: c,
+		value: t,
+		placeholder: l,
+		onChange: o,
+		open: r,
+		onOpenChange: a,
+		searchable: !0,
+		openOnFocus: !0,
+		validateSearchQuery: (e) => e === "" || /^\d{1,2}$/.test(e) && Number(e) <= n,
+		onSearchChange: (e) => {
+			(r || e !== "") && o(e);
+		},
+		searchDebounceMs: !1,
+		searchPlaceholder: l
+	});
+}
+function j({ value: t, onChange: n, precision: i, ariaLabel: a = "시간", placeholder: o, disabled: c, readOnly: u = !1, className: d, disableMobileSheet: f, size: p = "medium", "aria-invalid": m, "data-rhf-invalid": h }) {
+	return /* @__PURE__ */ v("div", {
+		className: e("flex min-w-0 w-full items-center border border-border-subtle bg-bg-surface transition-colors focus-within:border-border-primary", p === "small" ? "h-control-small rounded-control-small px-control-pad-small text-control-small" : "h-control-medium rounded-control-medium px-control-pad-medium font-control-field", c && "bg-bg-disabled text-fg-disabled", !c && u && "bg-bg-subtle", d),
+		children: [/* @__PURE__ */ _("input", {
+			"aria-label": a,
+			"aria-invalid": m || void 0,
+			"data-rhf-invalid": h ? "true" : void 0,
+			value: t,
+			placeholder: o ?? (i === "second" ? "00:00:00" : "00:00"),
+			disabled: c,
+			readOnly: u,
+			inputMode: "numeric",
+			maxLength: i === "second" ? 8 : 5,
+			onChange: (e) => {
+				if (u) return;
+				let t = s(e.target.value, i);
+				t !== null && l(t, i) && n(t);
+			},
+			className: "w-0 min-w-0 flex-1 self-stretch bg-transparent text-fg-default outline-hidden placeholder:text-fg-subtle disabled:text-fg-disabled"
+		}), /* @__PURE__ */ _(O, {
+			value: t,
+			precision: i,
+			disabled: c || u,
+			disableMobileSheet: f,
+			onApply: n,
+			referenceClassName: "shrink-0",
+			children: /* @__PURE__ */ _("button", {
+				type: "button",
+				"aria-label": `${a} 선택`,
+				disabled: c || u,
+				"data-field-affordance": "true",
+				className: "relative flex h-6 w-6 shrink-0 items-center justify-center rounded text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-default",
+				children: /* @__PURE__ */ _(r, {
+					"aria-hidden": !0,
+					className: "h-3.5 w-3.5"
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { j as TimeInput, O as TimePicker };

package/dist/components/time-picker/time-utils.cjs

@@ -0,0 +1 @@
+function e(e){return String(e).padStart(2,`0`)}function t(e){let t=/^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(e);return t?{hour:t[1],minute:t[2],second:t[3]??`00`}:{hour:`00`,minute:`00`,second:`00`}}function n(t,n){let r=n===`second`?[t.hour,t.minute,t.second]:[t.hour,t.minute],i=[23,59,59];return r.some((e,t)=>!/^\d{1,2}$/.test(e)||Number(e)>i[t])?null:{hour:e(Number(t.hour)),minute:e(Number(t.minute)),second:e(Number(t.second))}}function r(e,t){return t===`second`?`${e.hour}:${e.minute}:${e.second}`:`${e.hour}:${e.minute}`}function i(e,t){if(e===``)return!0;if(!/^\d{0,2}(?::\d{0,2}){0,2}$/.test(e))return!1;let n=e.split(`:`);return n.length>(t===`second`?3:2)?!1:n.every((e,t)=>{if(t<n.length-1&&e.length!==2)return!1;if(e.length===0)return t===n.length-1;let r=Number(e);return t===0?r<=(e.length===1?2:23):r<=(e.length===1?5:59)})}function a(e,t){if(e===``)return``;if(!/^\d+$/.test(e))return e.includes(`:`)?e:null;if(e.length>(t===`second`?6:4))return null;if(e.length<=2)return e;let n=e.slice(0,2),r=e.slice(2,4);return t===`minute`||e.length<=4?`${n}:${r}`:`${n}:${r}:${e.slice(4,6)}`}exports.formatDigitStream=a,exports.formatTime=r,exports.isValidTimeDraft=i,exports.normalizeTime=n,exports.padTimeUnit=e,exports.parseTime=t;

package/dist/components/time-picker/time-utils.d.ts

@@ -0,0 +1,12 @@
+export type TimePrecision = "minute" | "second";
+export interface PendingTime {
+    hour: string;
+    minute: string;
+    second: string;
+}
+export declare function padTimeUnit(value: number): string;
+export declare function parseTime(value: string): PendingTime;
+export declare function normalizeTime(time: PendingTime, precision: TimePrecision): PendingTime | null;
+export declare function formatTime(time: PendingTime, precision: TimePrecision): string;
+export declare function isValidTimeDraft(value: string, precision: TimePrecision): boolean;
+export declare function formatDigitStream(value: string, precision: TimePrecision): string | null;

package/dist/components/time-picker/time-utils.esm.js

@@ -0,0 +1,56 @@
+//#region src/components/time-picker/time-utils.ts
+function e(e) {
+	return String(e).padStart(2, "0");
+}
+function t(e) {
+	let t = /^(\d{2}):(\d{2})(?::(\d{2}))?$/.exec(e);
+	return t ? {
+		hour: t[1],
+		minute: t[2],
+		second: t[3] ?? "00"
+	} : {
+		hour: "00",
+		minute: "00",
+		second: "00"
+	};
+}
+function n(t, n) {
+	let r = n === "second" ? [
+		t.hour,
+		t.minute,
+		t.second
+	] : [t.hour, t.minute], i = [
+		23,
+		59,
+		59
+	];
+	return r.some((e, t) => !/^\d{1,2}$/.test(e) || Number(e) > i[t]) ? null : {
+		hour: e(Number(t.hour)),
+		minute: e(Number(t.minute)),
+		second: e(Number(t.second))
+	};
+}
+function r(e, t) {
+	return t === "second" ? `${e.hour}:${e.minute}:${e.second}` : `${e.hour}:${e.minute}`;
+}
+function i(e, t) {
+	if (e === "") return !0;
+	if (!/^\d{0,2}(?::\d{0,2}){0,2}$/.test(e)) return !1;
+	let n = e.split(":");
+	return n.length > (t === "second" ? 3 : 2) ? !1 : n.every((e, t) => {
+		if (t < n.length - 1 && e.length !== 2) return !1;
+		if (e.length === 0) return t === n.length - 1;
+		let r = Number(e);
+		return t === 0 ? r <= (e.length === 1 ? 2 : 23) : r <= (e.length === 1 ? 5 : 59);
+	});
+}
+function a(e, t) {
+	if (e === "") return "";
+	if (!/^\d+$/.test(e)) return e.includes(":") ? e : null;
+	if (e.length > (t === "second" ? 6 : 4)) return null;
+	if (e.length <= 2) return e;
+	let n = e.slice(0, 2), r = e.slice(2, 4);
+	return t === "minute" || e.length <= 4 ? `${n}:${r}` : `${n}:${r}:${e.slice(4, 6)}`;
+}
+//#endregion
+export { a as formatDigitStream, r as formatTime, i as isValidTimeDraft, n as normalizeTime, e as padTimeUnit, t as parseTime };

package/dist/components/toast/ToastProvider.cjs

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

package/dist/{src/components → components}/toast/ToastProvider.d.ts

@@ -10,6 +10,9 @@ export interface ToastProviderProps {
  *
  * - 데스크탑: bottom-center / 모바일: top-center (safe-area-inset-top 반영)
  * - 다크 그레이 배경 + lucide 아이콘 + 닫기 버튼
+ * - 쌓임: 컨테이너가 `z-toast`(150)라 모달(50)·부유 패널(100) 위에 뜬다. 그래서 토스트 내용에
+ *   Select·Popover·Tooltip 같은 부유 패널을 넣으면 패널이 토스트 아래로 깔린다 — 넣지 않는다.
+ *   react-hot-toast의 `<Toaster />`를 직접 마운트하면 이 계층이 적용되지 않는다(기본 9999).
  *
  * @example
  * ```tsx

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>`: 우측 액션 (엑셀 다운로드, 등록 버튼 등).