@thewrong/ui 0.1.0 → 0.3.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

@@ -0,0 +1,86 @@
+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 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-bg-toast)",
+				color: "var(--color-fg-toast)",
+				borderRadius: "var(--radius-toast)",
+				padding: 0,
+				fontSize: p ? "12px" : "14px",
+				fontWeight: 500,
+				width: "min(680px, calc(100vw - 32px))",
+				maxWidth: "none"
+			}
+		},
+		children: (a) => /* @__PURE__ */ s(l, {
+			toast: a,
+			style: {
+				...a.style,
+				padding: 0,
+				width: "100%"
+			},
+			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__ */ c("span", {
+							className: "shrink-0 flex items-center",
+							children: [
+								a.type === "success" && /* @__PURE__ */ s(t, {
+									className: e(l, "text-toast-tone-success"),
+									strokeWidth: 2
+								}),
+								a.type === "error" && /* @__PURE__ */ s(n, {
+									className: e(l, "text-toast-tone-danger"),
+									strokeWidth: 2
+								}),
+								a.type === "loading" && /* @__PURE__ */ s(i, {
+									className: e(l, "animate-spin text-fg-toast"),
+									strokeWidth: 2
+								}),
+								a.type === "blank" && /* @__PURE__ */ s(r, {
+									className: e(l, "text-toast-tone-info"),
+									strokeWidth: 2
+								})
+							]
+						}), /* @__PURE__ */ s("span", {
+							className: e(f, "text-fg-toast whitespace-pre-line min-w-0 break-keep wrap-break-word"),
+							children: o
+						})]
+					}), a.type !== "loading" && /* @__PURE__ */ s("button", {
+						type: "button",
+						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__ */ s(n, {
+							className: l,
+							fill: "currentColor",
+							stroke: "var(--color-bg-toast)",
+							strokeWidth: 2
+						})
+					})]
+				});
+			}
+		})
+	})] });
+}
+//#endregion
+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/toast/index.esm.js

@@ -0,0 +1,3 @@
+import "./ToastProvider.esm.js";
+import e from "react-hot-toast";
+export { e as 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

@@ -0,0 +1,149 @@
+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 d = Symbol.for("thewrong.toolbar.slot");
+function f(e, t) {
+	return e[d] = t, e;
+}
+function p(e) {
+	if (!(typeof e != "function" && typeof e != "object")) return e[d];
+}
+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":
+			i = e;
+			break;
+		case "summary":
+			a = e;
+			break;
+		case "left":
+			c = e;
+			break;
+		case "right":
+			d = e;
+			break;
+	}
+	let f = c || d;
+	return /* @__PURE__ */ u("div", {
+		className: e("flex flex-col", n),
+		children: [
+			i ? /* @__PURE__ */ l("div", {
+				className: a || f ? "mb-3.5 md:mb-6" : "",
+				children: i
+			}) : null,
+			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: d
+				}) : null]
+			})
+		]
+	});
+}
+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 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: () => g((e) => !e),
+		"aria-expanded": !h,
+		"aria-label": h ? "요약 펼치기" : "요약 접기",
+		className: S,
+		children: [/* @__PURE__ */ l("span", { children: b }), /* @__PURE__ */ l(n, {
+			"aria-hidden": "true",
+			className: e("h-3.5 w-3.5 transition-transform", !h && "rotate-180")
+		})]
+	}) : /* @__PURE__ */ l("span", {
+		className: S,
+		children: b
+	}) : null;
+	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: t
+				})
+			}, r);
+		})]
+	}) : /* @__PURE__ */ u("div", {
+		className: e("flex flex-wrap items-center gap-x-2 gap-y-1.5", r),
+		children: [C, v]
+	});
+}
+function _({ children: t, className: n = "" }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("flex items-center gap-2", n),
+		children: t
+	});
+}
+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 h = /* @__PURE__ */ l(t, {
+		variant: "primary",
+		size: "mini",
+		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__ */ 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: m
+			})
+		})
+	});
+}
+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 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 x({ icon: t, children: n, onClick: r, disabled: i, className: a = "" }) {
+	return /* @__PURE__ */ u("button", {
+		type: "button",
+		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: t
+		}) : null, /* @__PURE__ */ l("span", { children: n })]
+	});
+}
+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 { 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

@@ -0,0 +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-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/{src/components → components}/tooltip/Tooltip.d.ts

@@ -14,5 +14,15 @@ export interface TooltipProps {
  * - **스크롤/resize 자동 추적**: trigger가 움직여도 따라감
  * - **Portal 렌더**: 부모 overflow:hidden에 잘리지 않음
  * - **focus/keyboard 접근성** 내장
+ *
+ * hover/focus로 뜨는 짧은 텍스트 힌트(`content`는 string)에 쓴다. 강조·줄바꿈이 필요한
+ * 도움말은 `InfoTooltip`(ReactNode), 클릭으로 여는 자유 콘텐츠는 `Popover`를 쓸 것.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="최근 30일 기준">
+ *   <InfoIcon />
+ * </Tooltip>
+ * ```
  */
 export declare function Tooltip({ children, content, position, delayMs, }: TooltipProps): import("react").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { useState as e } from "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FloatingPortal as i, autoUpdate as a, flip as o, offset as s, shift as c, useDismiss as l, useFloating as u, useFocus as d, useHover as f, useInteractions as p, useRole as m } from "@floating-ui/react";
+//#region src/components/tooltip/Tooltip.tsx
+function h({ children: h, content: g, position: _ = "top", delayMs: v = 100 }) {
+	let [y, b] = e(!1), { refs: x, floatingStyles: S, context: C } = u({
+		open: y,
+		onOpenChange: b,
+		placement: _,
+		whileElementsMounted: a,
+		middleware: [
+			s(6),
+			o({ fallbackAxisSideDirection: "start" }),
+			c({ padding: 8 })
+		]
+	}), { getReferenceProps: w, getFloatingProps: T } = p([
+		f(C, { delay: {
+			open: v,
+			close: 0
+		} }),
+		d(C),
+		l(C),
+		m(C, { role: "tooltip" })
+	]);
+	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("span", {
+		ref: x.setReference,
+		...w(),
+		className: "inline-flex",
+		children: h
+	}), y && /* @__PURE__ */ n(i, { children: /* @__PURE__ */ n("div", {
+		ref: x.setFloating,
+		style: S,
+		...T(),
+		className: "z-floating pointer-events-none rounded-tooltip bg-bg-tooltip px-2 py-1 text-xs whitespace-nowrap text-fg-tooltip",
+		children: g
+	}) })] });
+}
+//#endregion
+export { h as Tooltip };

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;