@thewrong/ui 0.1.0 → 0.2.0

package/dist/components/table-checkbox/TableCheckbox.esm.js

@@ -0,0 +1,39 @@
+import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { Minus as t } from "../../node_modules/lucide-react/dist/esm/icons/minus.esm.js";
+import { forwardRef as n, useEffect as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/table-checkbox/TableCheckbox.tsx
+var s = n(function({ checked: n, indeterminate: s = !1, disabled: c = !1, onChange: l, pointerEventsNone: u = !1, ariaLabel: d }, f) {
+	let p = i(null);
+	r(() => {
+		let e = p.current;
+		e && (e.indeterminate = s && !n);
+	}, [s, n]);
+	let m = s && !n;
+	return /* @__PURE__ */ o("label", {
+		className: `relative inline-flex h-[18px] w-[18px] shrink-0 items-center justify-center ${c ? "cursor-not-allowed" : "cursor-pointer"} ${u ? "pointer-events-none" : ""}`,
+		style: { flex: "0 0 18px" },
+		"aria-label": d,
+		children: [/* @__PURE__ */ a("input", {
+			ref: (e) => {
+				p.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+			},
+			type: "checkbox",
+			className: "peer sr-only",
+			checked: n,
+			disabled: c,
+			onChange: (e) => l?.(e.target.checked)
+		}), /* @__PURE__ */ a("span", {
+			className: `flex h-full w-full items-center justify-center rounded-md border-[1.5px] transition-colors ${n || m ? "border-primary-500 bg-primary-500" : "border-neutral-300 bg-white dark:border-neutral-600 dark:bg-neutral-800"} ${c ? "opacity-40" : ""}`,
+			children: m ? /* @__PURE__ */ a(t, {
+				className: "h-3 w-3 text-white",
+				strokeWidth: 3
+			}) : n ? /* @__PURE__ */ a(e, {
+				className: "h-3 w-3 text-white",
+				strokeWidth: 3
+			}) : null
+		})]
+	});
+});
+//#endregion
+export { s as TableCheckbox };

package/dist/components/table-page-layout/TablePageLayout.cjs.js

@@ -0,0 +1 @@
+const e=require("../../hooks/useMediaQuery.cjs.js");let t=require("react"),n=require("react/jsx-runtime");function r(){return e.useIsMobile()?`mini`:`small`}function i({children:e}){let r=t.Children.toArray(e),i=r[0],o=(0,t.isValidElement)(i)&&i.type===a;return(0,n.jsxs)(`div`,{className:`flex h-[calc(100dvh-64px)] flex-col`,children:[o?i:null,(0,n.jsx)(`div`,{className:`flex min-h-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3 sm:gap-3 sm:px-4 sm:pt-3 sm:pb-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:o?r.slice(1):r})]})}function a({title:e,children:t}){return(0,n.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-b border-neutral-200 px-4 py-2 dark:border-neutral-700 sm:px-6 sm:py-3`,children:[(0,n.jsx)(`h1`,{className:`min-w-0 truncate text-base font-semibold text-neutral-900 dark:text-white sm:text-lg`,children:e}),t?(0,n.jsx)(`div`,{className:`flex shrink-0 items-center gap-2`,children:t}):null]})}function o({children:e}){return(0,n.jsx)(`div`,{className:`flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 dark:bg-neutral-800 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1`,children:e})}exports.PageHeader=a,exports.TableCard=o,exports.TablePageLayout=i,exports.useHeaderButtonSize=r;

package/dist/components/table-page-layout/TablePageLayout.esm.js

@@ -0,0 +1,37 @@
+import { useIsMobile as e } from "../../hooks/useMediaQuery.esm.js";
+import { Children as t, isValidElement as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/table-page-layout/TablePageLayout.tsx
+function a() {
+	return e() ? "mini" : "small";
+}
+function o({ children: e }) {
+	let a = t.toArray(e), o = a[0], c = n(o) && o.type === s;
+	return /* @__PURE__ */ i("div", {
+		className: "flex h-[calc(100dvh-64px)] flex-col",
+		children: [c ? o : null, /* @__PURE__ */ r("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-2 px-3 pt-2 pb-3 sm:gap-3 sm:px-4 sm:pt-3 sm:pb-4 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
+			children: c ? a.slice(1) : a
+		})]
+	});
+}
+function s({ title: e, children: t }) {
+	return /* @__PURE__ */ i("div", {
+		className: "flex items-center justify-between gap-2 border-b border-neutral-200 px-4 py-2 dark:border-neutral-700 sm:px-6 sm:py-3",
+		children: [/* @__PURE__ */ r("h1", {
+			className: "min-w-0 truncate text-base font-semibold text-neutral-900 dark:text-white sm:text-lg",
+			children: e
+		}), t ? /* @__PURE__ */ r("div", {
+			className: "flex shrink-0 items-center gap-2",
+			children: t
+		}) : null]
+	});
+}
+function c({ children: e }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex h-full min-h-0 flex-col overflow-hidden rounded-lg bg-white p-4 gap-2 md:p-5 md:gap-4 xl:p-6 xl:gap-4 dark:bg-neutral-800 [&>*:last-child]:min-h-0 [&>*:last-child]:flex-1",
+		children: e
+	});
+}
+//#endregion
+export { s as PageHeader, c as TableCard, o as TablePageLayout, a as useHeaderButtonSize };

package/dist/components/textarea/Textarea.cjs.js

@@ -0,0 +1 @@
+let e=require("react"),t=require("react/jsx-runtime");var n={large:`rounded-xl border px-5 py-3.5 transition-colors focus-within:outline-hidden`,medium:`rounded-xl border px-3.5 py-3 transition-colors focus-within:outline-hidden`,small:`rounded-lg border px-3 py-2 transition-colors focus-within:outline-hidden`,mini:`rounded-md border px-2 py-1.5 transition-colors focus-within:outline-hidden`},r=(e,t,r)=>{let i=n[r];return t?[i,`bg-bg-disabled border-border-tertiary dark:border-border-secondary`].join(` `):e?[i,`bg-bg-white border-border-danger`].join(` `):[i,`bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary`].join(` `)},i=(e,t,n,r,i)=>{let a=`w-full bg-transparent ${i===`mini`?`text-xs`:i===`large`?`text-base`:`text-sm`} focus:outline-hidden disabled:cursor-not-allowed ${r?`resize-y`:`resize-none`}`;return t?[a,`text-text-disabled placeholder:text-text-disabled`].join(` `):e?[a,`text-text-danger placeholder:text-text-danger`].join(` `):n?[a,`text-text-primary placeholder:text-text-tertiary`].join(` `):[a,`text-text-tertiary placeholder:text-text-tertiary`].join(` `)},a=e=>[`block text-xs font-medium mb-2`,e?`text-text-danger`:`text-text-secondary`].join(` `),o=e=>[`mt-2 text-sm`,e?`text-text-danger`:`text-text-secondary`].join(` `),s=(0,e.forwardRef)(({textareaSize:n=`medium`,label:s,help:c,hasError:l=!1,disabled:u=!1,showCount:d=!1,resize:f=!1,maxLength:p,rows:m=4,className:h=``,containerClassName:g=``,value:_,defaultValue:v,onChange:y,placeholder:b,id:x,...S},C)=>{let[w,T]=(0,e.useState)(v?.toString()??``),E=_!==void 0,D=E?_?.toString()??``:w,O=D.length>0,k=e=>{E||T(e.target.value),y?.(e)},A=r(l,u,n),j=i(l,u,O,f,n),M=d&&p!=null&&(0,t.jsxs)(`span`,{className:[`text-xs`,l?`text-text-danger`:`text-text-tertiary`].join(` `),children:[D.length,` / `,p]});return(0,t.jsxs)(`div`,{className:`w-full ${g}`.trim(),children:[s&&(0,t.jsx)(`label`,{className:a(l),htmlFor:x,children:s}),(0,t.jsxs)(`div`,{className:A,children:[(0,t.jsx)(`textarea`,{...S,ref:C,id:x,rows:m,value:E?D:void 0,defaultValue:E?void 0:v,onChange:k,placeholder:b,disabled:u,maxLength:p,className:`${j} ${h}`.trim()}),M&&(0,t.jsx)(`div`,{className:`mt-1 flex justify-end`,children:M})]}),c&&(0,t.jsx)(`div`,{className:o(l),children:c})]})});s.displayName=`Textarea`,exports.Textarea=s;

package/dist/components/textarea/Textarea.esm.js

@@ -0,0 +1,62 @@
+import { forwardRef as e, useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/textarea/Textarea.tsx
+var i = {
+	large: "rounded-xl border px-5 py-3.5 transition-colors focus-within:outline-hidden",
+	medium: "rounded-xl border px-3.5 py-3 transition-colors focus-within:outline-hidden",
+	small: "rounded-lg border px-3 py-2 transition-colors focus-within:outline-hidden",
+	mini: "rounded-md border px-2 py-1.5 transition-colors focus-within:outline-hidden"
+}, a = (e, t, n) => {
+	let r = i[n];
+	return t ? [r, "bg-bg-disabled border-border-tertiary dark:border-border-secondary"].join(" ") : e ? [r, "bg-bg-white border-border-danger"].join(" ") : [r, "bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary"].join(" ");
+}, o = (e, t, n, r, i) => {
+	let a = `w-full bg-transparent ${i === "mini" ? "text-xs" : i === "large" ? "text-base" : "text-sm"} focus:outline-hidden disabled:cursor-not-allowed ${r ? "resize-y" : "resize-none"}`;
+	return t ? [a, "text-text-disabled placeholder:text-text-disabled"].join(" ") : e ? [a, "text-text-danger placeholder:text-text-danger"].join(" ") : n ? [a, "text-text-primary placeholder:text-text-tertiary"].join(" ") : [a, "text-text-tertiary placeholder:text-text-tertiary"].join(" ");
+}, s = (e) => ["block text-xs font-medium mb-2", e ? "text-text-danger" : "text-text-secondary"].join(" "), c = (e) => ["mt-2 text-sm", e ? "text-text-danger" : "text-text-secondary"].join(" "), l = e(({ textareaSize: e = "medium", label: i, help: l, hasError: u = !1, disabled: d = !1, showCount: f = !1, resize: p = !1, maxLength: m, rows: h = 4, className: g = "", containerClassName: _ = "", value: v, defaultValue: y, onChange: b, placeholder: x, id: S, ...C }, w) => {
+	let [T, E] = t(y?.toString() ?? ""), D = v !== void 0, O = D ? v?.toString() ?? "" : T, k = O.length > 0, A = (e) => {
+		D || E(e.target.value), b?.(e);
+	}, j = a(u, d, e), M = o(u, d, k, p, e), N = f && m != null && /* @__PURE__ */ r("span", {
+		className: ["text-xs", u ? "text-text-danger" : "text-text-tertiary"].join(" "),
+		children: [
+			O.length,
+			" / ",
+			m
+		]
+	});
+	return /* @__PURE__ */ r("div", {
+		className: `w-full ${_}`.trim(),
+		children: [
+			i && /* @__PURE__ */ n("label", {
+				className: s(u),
+				htmlFor: S,
+				children: i
+			}),
+			/* @__PURE__ */ r("div", {
+				className: j,
+				children: [/* @__PURE__ */ n("textarea", {
+					...C,
+					ref: w,
+					id: S,
+					rows: h,
+					value: D ? O : void 0,
+					defaultValue: D ? void 0 : y,
+					onChange: A,
+					placeholder: x,
+					disabled: d,
+					maxLength: m,
+					className: `${M} ${g}`.trim()
+				}), N && /* @__PURE__ */ n("div", {
+					className: "mt-1 flex justify-end",
+					children: N
+				})]
+			}),
+			l && /* @__PURE__ */ n("div", {
+				className: c(u),
+				children: l
+			})
+		]
+	});
+});
+l.displayName = "Textarea";
+//#endregion
+export { l as Textarea };

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

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

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

@@ -0,0 +1,82 @@
+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";
+//#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,
+		toastOptions: {
+			duration: 3e3,
+			style: {
+				background: "var(--color-secondary-700)",
+				color: "#FFFFFF",
+				borderRadius: "16px",
+				padding: 0,
+				fontSize: f ? "12px" : "14px",
+				fontWeight: 500,
+				width: "min(680px, calc(100vw - 32px))",
+				maxWidth: "none"
+			}
+		},
+		children: (i) => /* @__PURE__ */ o(c, {
+			toast: i,
+			style: {
+				...i.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", {
+						className: "flex items-center justify-center gap-2 flex-1 min-w-0",
+						children: [/* @__PURE__ */ s("span", {
+							className: "shrink-0 flex items-center",
+							children: [
+								i.type === "success" && /* @__PURE__ */ o(e, {
+									className: `${c} text-green-400`,
+									strokeWidth: 2
+								}),
+								i.type === "error" && /* @__PURE__ */ o(t, {
+									className: `${c} text-rose-400`,
+									strokeWidth: 2
+								}),
+								i.type === "loading" && /* @__PURE__ */ o(r, {
+									className: `${c} animate-spin text-white`,
+									strokeWidth: 2
+								}),
+								i.type === "blank" && /* @__PURE__ */ o(n, {
+									className: `${c} text-blue-400`,
+									strokeWidth: 2
+								})
+							]
+						}), /* @__PURE__ */ o("span", {
+							className: `${d} text-white whitespace-pre-line min-w-0 break-keep wrap-break-word`,
+							children: a
+						})]
+					}), i.type !== "loading" && /* @__PURE__ */ o("button", {
+						type: "button",
+						onClick: () => u.dismiss(i.id),
+						className: "ml-2 shrink-0 text-white/70 hover:text-white transition-colors cursor-pointer",
+						"aria-label": "닫기",
+						children: /* @__PURE__ */ o(t, {
+							className: c,
+							fill: "currentColor",
+							stroke: "var(--color-secondary-700)",
+							strokeWidth: 2
+						})
+					})]
+				});
+			}
+		})
+	})] });
+}
+//#endregion
+export { d as ToastProvider };

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.js

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

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

@@ -0,0 +1,148 @@
+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";
+//#region src/components/toolbar/Toolbar.tsx
+var u = Symbol.for("thewrong.toolbar.slot");
+function d(e, t) {
+	return e[u] = t, e;
+}
+function f(e) {
+	if (!(typeof e != "function" && typeof e != "object")) return e[u];
+}
+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)) {
+		case "title":
+			r = e;
+			break;
+		case "summary":
+			i = e;
+			break;
+		case "left":
+			s = e;
+			break;
+		case "right":
+			u = e;
+			break;
+	}
+	let d = s || u;
+	return /* @__PURE__ */ l("div", {
+		className: `flex flex-col ${t}`,
+		children: [
+			r ? /* @__PURE__ */ c("div", {
+				className: i || d ? "mb-3.5 md:mb-6" : "",
+				children: r
+			}) : 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", {
+					className: "ml-auto",
+					children: u
+				}) : 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: 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", {
+		type: "button",
+		onClick: () => h((e) => !e),
+		"aria-expanded": !m,
+		"aria-label": m ? "요약 펼치기" : "요약 접기",
+		className: x,
+		children: [/* @__PURE__ */ c("span", { children: y }), /* @__PURE__ */ c(t, {
+			"aria-hidden": "true",
+			className: `h-3.5 w-3.5 transition-transform ${m ? "" : "rotate-180"}`
+		})]
+	}) : /* @__PURE__ */ c("span", {
+		className: x,
+		children: y
+	}) : 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", {
+					className: "overflow-hidden min-h-0",
+					children: e
+				})
+			}, n);
+		})]
+	}) : /* @__PURE__ */ l("div", {
+		className: `flex flex-wrap items-center gap-x-2 gap-y-1.5 ${n}`,
+		children: [S, _]
+	});
+}
+function g({ children: e, className: t = "" }) {
+	return /* @__PURE__ */ c("div", {
+		className: `flex items-center gap-2 ${t}`,
+		children: e
+	});
+}
+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
+	});
+	let m = /* @__PURE__ */ c(e, {
+		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
+	});
+	return /* @__PURE__ */ c("div", {
+		className: `flex items-center ${s}`,
+		children: /* @__PURE__ */ c(r, {
+			trigger: m,
+			content: /* @__PURE__ */ c("div", {
+				className: "flex flex-col gap-2 [&>*]:w-full",
+				children: p
+			})
+		})
+	});
+}
+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"
+};
+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({ icon: e, children: t, onClick: n, disabled: r, className: i = "" }) {
+	return /* @__PURE__ */ l("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", {
+			className: "shrink-0 [&>svg]:h-4 [&>svg]:w-4",
+			children: e
+		}) : null, /* @__PURE__ */ c("span", { children: t })]
+	});
+}
+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;
+//#endregion
+export { p as Toolbar };

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

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

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-9999 pointer-events-none rounded bg-neutral-800 px-2 py-1 text-xs whitespace-nowrap text-white dark:bg-neutral-700",
+		children: g
+	}) })] });
+}
+//#endregion
+export { h as Tooltip };

package/dist/hooks/useBottomSheetDrag.cjs.js

@@ -0,0 +1 @@
+let e=require("motion/react");var t=100,n=500;function r({onDismiss:r}){let i=(0,e.useDragControls)();return{dragControls:i,handleDragEnd:(e,i)=>{(i.offset.y>t||i.velocity.y>n)&&r()},startDrag:e=>{i.start(e)}}}exports.useBottomSheetDrag=r;

package/dist/hooks/useBottomSheetDrag.esm.js

@@ -0,0 +1,17 @@
+import { useDragControls as e } from "motion/react";
+//#region src/hooks/useBottomSheetDrag.ts
+var t = 100, n = 500;
+function r({ onDismiss: r }) {
+	let i = e();
+	return {
+		dragControls: i,
+		handleDragEnd: (e, i) => {
+			(i.offset.y > t || i.velocity.y > n) && r();
+		},
+		startDrag: (e) => {
+			i.start(e);
+		}
+	};
+}
+//#endregion
+export { r as useBottomSheetDrag };

package/dist/hooks/useClickOutside.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t,n,r=!0){(0,e.useEffect)(()=>{if(!r)return;let e=e=>{let r=e.target;!t.current||t.current.contains(r)||n(e)};return document.addEventListener(`mousedown`,e),document.addEventListener(`touchstart`,e),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`touchstart`,e)}},[t,n,r])}exports.useClickOutside=t;

package/dist/hooks/useClickOutside.esm.js

@@ -0,0 +1,20 @@
+import { useEffect as e } from "react";
+//#region src/hooks/useClickOutside.ts
+function t(t, n, r = !0) {
+	e(() => {
+		if (!r) return;
+		let e = (e) => {
+			let r = e.target;
+			!t.current || t.current.contains(r) || n(e);
+		};
+		return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e), () => {
+			document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
+		};
+	}, [
+		t,
+		n,
+		r
+	]);
+}
+//#endregion
+export { t as useClickOutside };

package/dist/hooks/useMediaQuery.cjs.js

@@ -0,0 +1 @@
+let e=require("react");function t(t){let[n,r]=(0,e.useState)(()=>typeof window>`u`?!1:window.matchMedia(t).matches);return(0,e.useEffect)(()=>{let e=window.matchMedia(t),n=e=>r(e.matches);return r(e.matches),e.addEventListener(`change`,n),()=>e.removeEventListener(`change`,n)},[t]),n}var n=`(max-width: 639px)`;function r(){return t(n)}exports.MOBILE_MEDIA_QUERY=n,exports.useIsMobile=r,exports.useMediaQuery=t;

package/dist/hooks/useMediaQuery.esm.js

@@ -0,0 +1,15 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/useMediaQuery.ts
+function n(n) {
+	let [r, i] = t(() => typeof window > "u" ? !1 : window.matchMedia(n).matches);
+	return e(() => {
+		let e = window.matchMedia(n), t = (e) => i(e.matches);
+		return i(e.matches), e.addEventListener("change", t), () => e.removeEventListener("change", t);
+	}, [n]), r;
+}
+var r = "(max-width: 639px)";
+function i() {
+	return n(r);
+}
+//#endregion
+export { r as MOBILE_MEDIA_QUERY, i as useIsMobile, n as useMediaQuery };

package/dist/hooks/useScrollLock.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=0,n=``;function r(){t===0&&(n=document.body.style.overflow,document.body.style.overflow=`hidden`),t+=1}function i(){t!==0&&(--t,t===0&&(document.body.style.overflow=n,n=``))}function a(t){(0,e.useEffect)(()=>{if(t)return r(),i},[t])}exports.useScrollLock=a;

package/dist/hooks/useScrollLock.esm.js

@@ -0,0 +1,16 @@
+import { useEffect as e } from "react";
+//#region src/hooks/useScrollLock.ts
+var t = 0, n = "";
+function r() {
+	t === 0 && (n = document.body.style.overflow, document.body.style.overflow = "hidden"), t += 1;
+}
+function i() {
+	t !== 0 && (--t, t === 0 && (document.body.style.overflow = n, n = ""));
+}
+function a(t) {
+	e(() => {
+		if (t) return r(), i;
+	}, [t]);
+}
+//#endregion
+export { a as useScrollLock };

package/dist/hooks.cjs.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./hooks/useClickOutside.cjs.js"),t=require("./hooks/useMediaQuery.cjs.js"),n=require("./hooks/useBottomSheetDrag.cjs.js"),r=require("./hooks/useScrollLock.cjs.js");exports.MOBILE_MEDIA_QUERY=t.MOBILE_MEDIA_QUERY,exports.useBottomSheetDrag=n.useBottomSheetDrag,exports.useClickOutside=e.useClickOutside,exports.useIsMobile=t.useIsMobile,exports.useMediaQuery=t.useMediaQuery,exports.useScrollLock=r.useScrollLock;

package/dist/hooks.esm.js

@@ -0,0 +1,5 @@
+import { useClickOutside as e } from "./hooks/useClickOutside.esm.js";
+import { MOBILE_MEDIA_QUERY as t, useIsMobile as n, useMediaQuery as r } from "./hooks/useMediaQuery.esm.js";
+import { useBottomSheetDrag as i } from "./hooks/useBottomSheetDrag.esm.js";
+import { useScrollLock as a } from "./hooks/useScrollLock.esm.js";
+export { t as MOBILE_MEDIA_QUERY, i as useBottomSheetDrag, e as useClickOutside, n as useIsMobile, r as useMediaQuery, a as useScrollLock };