@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/search-box/ExactMatchToggle.esm.js

@@ -1,27 +1,28 @@
-import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Check as t } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/search-box/ExactMatchToggle.tsx
-function r({ value: r, onChange: i, size: a }) {
-	let o = a === "mini";
-	return /* @__PURE__ */ n("label", {
+function i({ value: i, onChange: a, size: o }) {
+	let s = o === "mini", c = s ? "text-xs" : "text-sm";
+	return /* @__PURE__ */ r("label", {
 		className: "inline-flex cursor-pointer items-center gap-1 select-none",
 		children: [
-			/* @__PURE__ */ t("input", {
+			/* @__PURE__ */ n("input", {
 				type: "checkbox",
-				checked: r,
-				onChange: (e) => i(e.target.checked),
+				checked: i,
+				onChange: (e) => a(e.target.checked),
 				className: "peer sr-only"
 			}),
-			/* @__PURE__ */ t(e, {
-				className: `${o ? "h-3.5 w-3.5" : "h-4 w-4"} stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-primary-500 peer-focus-visible:outline-offset-1 ${r ? "text-primary-500" : "text-icon-tertiary"}`,
+			/* @__PURE__ */ n(t, {
+				className: e(s ? "h-3.5 w-3.5" : "h-4 w-4", "stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-focus-primary peer-focus-visible:outline-offset-1", i ? "text-primary-fg" : "text-icon-tertiary"),
 				"aria-hidden": "true"
 			}),
-			/* @__PURE__ */ t("span", {
-				className: `${o ? "text-xs" : "text-sm"} font-medium transition-colors ${r ? "text-primary-500" : "text-text-tertiary"}`,
+			/* @__PURE__ */ n("span", {
+				className: e(c, "font-medium transition-colors", i ? "text-primary-fg" : "text-fg-subtle"),
 				children: "완전일치"
 			})
 		]
 	});
 }
 //#endregion
-export { r as ExactMatchToggle };
+export { i as ExactMatchToggle };

package/dist/components/search-box/SearchBox.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/list-filter.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.cjs"),i=require("../../node_modules/lucide-react/dist/esm/icons/search.cjs"),a=require("../../hooks/useMediaQuery.cjs"),o=require("../modal/StandardModal.cjs"),s=require("./ExactMatchToggle.cjs"),c=require("./SearchBoxChips.cjs"),l=require("./SearchBoxSheetContext.cjs"),u=require("./SearchBoxField.cjs"),d=require("./useSearchBoxState.cjs");let f=require("react"),p=require("react/jsx-runtime");function m({fields:m,values:g,onSearch:_,onClear:v,isSubmitting:y=!1,exactMatch:b,className:x=``}){let S=a.useIsMobile(),C=S?`mini`:`small`,[w,T]=(0,f.useState)(!1),{draft:E,setFieldValue:D,submit:O,clear:k,chips:A,removeChip:j}=d.useSearchBoxState({fields:m,values:g,onSearch:_,onClear:v}),M=()=>y?!1:O(),N=()=>{M()&&T(!1)};return S?(0,p.jsxs)(`div`,{className:e.cn(`w-full`,x),children:[(0,p.jsxs)(`div`,{className:`flex w-full items-center justify-end gap-1`,children:[(0,p.jsx)(h,{label:`초기화`,onClick:k,variant:`ghost`,icon:(0,p.jsx)(r.RotateCcw,{className:`h-4 w-4`})}),(0,p.jsx)(h,{label:`검색`,onClick:M,disabled:y,variant:`primary`,icon:(0,p.jsx)(i.Search,{className:`h-4 w-4`})}),(0,p.jsx)(h,{label:`필터`,onClick:()=>T(!0),variant:`ghost`,icon:(0,p.jsx)(n.ListFilter,{className:`h-4 w-4`}),activeDot:A.length>0})]}),A.length>0&&(0,p.jsx)(`div`,{className:`mt-2`,children:(0,p.jsx)(c.SearchBoxChips,{chips:A,onRemove:j})}),(0,p.jsx)(o.StandardModal,{isOpen:w,onClose:()=>T(!1),title:`필터`,primaryAction:{label:`적용`,onClick:N,loading:y},secondaryAction:{label:`닫기`,onClick:()=>T(!1)},children:(0,p.jsx)(l.SearchBoxSheetContext.Provider,{value:!0,children:(0,p.jsxs)(`div`,{className:`flex flex-col gap-4`,children:[m.filter(e=>!e.hidden).map(e=>(0,p.jsx)(u.SearchBoxField,{field:e,value:E[e.key]??``,onChange:t=>D(e.key,t),onEnter:N,size:`small`},e.key)),b&&(0,p.jsx)(`div`,{className:`flex justify-end`,children:(0,p.jsx)(s.ExactMatchToggle,{value:b.value,onChange:b.onChange,size:`small`})})]})})})]}):(0,p.jsxs)(`div`,{className:e.cn(`w-full`,x),children:[(0,p.jsxs)(`div`,{className:`flex w-full flex-wrap items-start gap-x-3 gap-y-2`,children:[m.filter(e=>!e.hidden).map(e=>(0,p.jsx)(`div`,{className:e.className??`w-44`,children:(0,p.jsx)(u.SearchBoxField,{field:e,value:E[e.key]??``,onChange:t=>D(e.key,t),onEnter:M,size:C})},e.key)),(0,p.jsxs)(`div`,{className:`ml-auto flex items-center gap-3`,children:[b&&(0,p.jsx)(s.ExactMatchToggle,{value:b.value,onChange:b.onChange,size:C}),(0,p.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,p.jsx)(t.Button,{variant:`tertiary`,appearance:`outlined`,size:C,onClick:k,leadingIcon:(0,p.jsx)(r.RotateCcw,{className:`h-3.5 w-3.5`}),className:`h-10`,children:`초기화`}),(0,p.jsx)(t.Button,{variant:`primary`,size:C,onClick:M,loading:y,leadingIcon:(0,p.jsx)(i.Search,{className:`h-3.5 w-3.5`}),className:`h-10`,children:`검색`})]})]})]}),A.length>0&&(0,p.jsx)(`div`,{className:`mt-2`,children:(0,p.jsx)(c.SearchBoxChips,{chips:A,onRemove:j})})]})}function h({label:t,onClick:n,icon:r,variant:i,disabled:a,activeDot:o}){return(0,p.jsxs)(`button`,{type:`button`,"aria-label":t,onClick:n,disabled:a,className:e.cn(`relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50`,i===`primary`?`bg-primary text-fg-inverse hover:bg-primary-hover`:`text-icon-secondary hover:bg-bg-muted`),children:[r,o&&(0,p.jsx)(`span`,{className:`absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary`})]})}exports.SearchBox=m;

package/dist/{src/components → components}/search-box/SearchBox.d.ts

@@ -1,4 +1,4 @@
-import { SearchField, SearchValues } from './types';
+import { SearchField, SearchValues } from './types.js';
 interface Props {
     /** 호출부가 `as const satisfies readonly SearchField[]` 패턴을 쓰면 parseSearchValues가
      * 타입을 정확히 추론하므로 readonly 시그니처로 받는다. */

package/dist/components/search-box/SearchBox.esm.js

@@ -1,89 +1,90 @@
-import { Button as e } from "../button/Button.esm.js";
-import { ListFilter as t } from "../../node_modules/lucide-react/dist/esm/icons/list-filter.esm.js";
-import { RotateCcw as n } from "../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
-import { Search as r } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
-import { useIsMobile as i } from "../../hooks/useMediaQuery.esm.js";
-import { StandardModal as a } from "../modal/StandardModal.esm.js";
-import { ExactMatchToggle as o } from "./ExactMatchToggle.esm.js";
-import { SearchBoxChips as s } from "./SearchBoxChips.esm.js";
-import { SearchBoxSheetContext as c } from "./SearchBoxSheetContext.esm.js";
-import { SearchBoxField as l } from "./SearchBoxField.esm.js";
-import { useSearchBoxState as u } from "./useSearchBoxState.esm.js";
-import { useState as d } from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { ListFilter as n } from "../../node_modules/lucide-react/dist/esm/icons/list-filter.esm.js";
+import { RotateCcw as r } from "../../node_modules/lucide-react/dist/esm/icons/rotate-ccw.esm.js";
+import { Search as i } from "../../node_modules/lucide-react/dist/esm/icons/search.esm.js";
+import { useIsMobile as a } from "../../hooks/useMediaQuery.esm.js";
+import { StandardModal as o } from "../modal/StandardModal.esm.js";
+import { ExactMatchToggle as s } from "./ExactMatchToggle.esm.js";
+import { SearchBoxChips as c } from "./SearchBoxChips.esm.js";
+import { SearchBoxSheetContext as l } from "./SearchBoxSheetContext.esm.js";
+import { SearchBoxField as u } from "./SearchBoxField.esm.js";
+import { useSearchBoxState as d } from "./useSearchBoxState.esm.js";
+import { useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/search-box/SearchBox.tsx
-function m({ fields: m, values: g, onSearch: _, onClear: v, isSubmitting: y = !1, exactMatch: b, className: x = "" }) {
-	let S = i(), C = S ? "mini" : "small", [w, T] = d(!1), { draft: E, setFieldValue: D, submit: O, clear: k, chips: A, removeChip: j } = u({
-		fields: m,
-		values: g,
-		onSearch: _,
-		onClear: v
-	}), M = () => y ? !1 : O(), N = () => {
-		M() && T(!1);
+function h({ fields: h, values: _, onSearch: v, onClear: y, isSubmitting: b = !1, exactMatch: x, className: S = "" }) {
+	let C = a(), w = C ? "mini" : "small", [T, E] = f(!1), { draft: D, setFieldValue: O, submit: k, clear: A, chips: j, removeChip: M } = d({
+		fields: h,
+		values: _,
+		onSearch: v,
+		onClear: y
+	}), N = () => b ? !1 : k(), P = () => {
+		N() && E(!1);
 	};
-	return S ? /* @__PURE__ */ p("div", {
-		className: `w-full ${x}`,
+	return C ? /* @__PURE__ */ m("div", {
+		className: e("w-full", S),
 		children: [
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex w-full items-center justify-end gap-1",
 				children: [
-					/* @__PURE__ */ f(h, {
+					/* @__PURE__ */ p(g, {
 						label: "초기화",
-						onClick: k,
+						onClick: A,
 						variant: "ghost",
-						icon: /* @__PURE__ */ f(n, { className: "h-4 w-4" })
+						icon: /* @__PURE__ */ p(r, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ f(h, {
+					/* @__PURE__ */ p(g, {
 						label: "검색",
-						onClick: M,
-						disabled: y,
+						onClick: N,
+						disabled: b,
 						variant: "primary",
-						icon: /* @__PURE__ */ f(r, { className: "h-4 w-4" })
+						icon: /* @__PURE__ */ p(i, { className: "h-4 w-4" })
 					}),
-					/* @__PURE__ */ f(h, {
+					/* @__PURE__ */ p(g, {
 						label: "필터",
-						onClick: () => T(!0),
+						onClick: () => E(!0),
 						variant: "ghost",
-						icon: /* @__PURE__ */ f(t, { className: "h-4 w-4" }),
-						activeDot: A.length > 0
+						icon: /* @__PURE__ */ p(n, { className: "h-4 w-4" }),
+						activeDot: j.length > 0
 					})
 				]
 			}),
-			A.length > 0 && /* @__PURE__ */ f("div", {
+			j.length > 0 && /* @__PURE__ */ p("div", {
 				className: "mt-2",
-				children: /* @__PURE__ */ f(s, {
-					chips: A,
-					onRemove: j
+				children: /* @__PURE__ */ p(c, {
+					chips: j,
+					onRemove: M
 				})
 			}),
-			/* @__PURE__ */ f(a, {
-				isOpen: w,
-				onClose: () => T(!1),
+			/* @__PURE__ */ p(o, {
+				isOpen: T,
+				onClose: () => E(!1),
 				title: "필터",
 				primaryAction: {
 					label: "적용",
-					onClick: N,
-					loading: y
+					onClick: P,
+					loading: b
 				},
 				secondaryAction: {
 					label: "닫기",
-					onClick: () => T(!1)
+					onClick: () => E(!1)
 				},
-				children: /* @__PURE__ */ f(c.Provider, {
+				children: /* @__PURE__ */ p(l.Provider, {
 					value: !0,
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ m("div", {
 						className: "flex flex-col gap-4",
-						children: [m.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ f(l, {
+						children: [h.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ p(u, {
 							field: e,
-							value: E[e.key] ?? "",
-							onChange: (t) => D(e.key, t),
-							onEnter: N,
+							value: D[e.key] ?? "",
+							onChange: (t) => O(e.key, t),
+							onEnter: P,
 							size: "small"
-						}, e.key)), b && /* @__PURE__ */ f("div", {
+						}, e.key)), x && /* @__PURE__ */ p("div", {
 							className: "flex justify-end",
-							children: /* @__PURE__ */ f(o, {
-								value: b.value,
-								onChange: b.onChange,
+							children: /* @__PURE__ */ p(s, {
+								value: x.value,
+								onChange: x.onChange,
 								size: "small"
 							})
 						})]
@@ -91,64 +92,64 @@ function m({ fields: m, values: g, onSearch: _, onClear: v, isSubmitting: y = !1
 				})
 			})
 		]
-	}) : /* @__PURE__ */ p("div", {
-		className: `w-full ${x}`,
-		children: [/* @__PURE__ */ p("div", {
-			className: "flex w-full flex-wrap items-center gap-x-3 gap-y-2",
-			children: [m.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ f("div", {
+	}) : /* @__PURE__ */ m("div", {
+		className: e("w-full", S),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex w-full flex-wrap items-start gap-x-3 gap-y-2",
+			children: [h.filter((e) => !e.hidden).map((e) => /* @__PURE__ */ p("div", {
 				className: e.className ?? "w-44",
-				children: /* @__PURE__ */ f(l, {
+				children: /* @__PURE__ */ p(u, {
 					field: e,
-					value: E[e.key] ?? "",
-					onChange: (t) => D(e.key, t),
-					onEnter: M,
-					size: C
+					value: D[e.key] ?? "",
+					onChange: (t) => O(e.key, t),
+					onEnter: N,
+					size: w
 				})
-			}, e.key)), /* @__PURE__ */ p("div", {
+			}, e.key)), /* @__PURE__ */ m("div", {
 				className: "ml-auto flex items-center gap-3",
-				children: [b && /* @__PURE__ */ f(o, {
-					value: b.value,
-					onChange: b.onChange,
-					size: C
-				}), /* @__PURE__ */ p("div", {
+				children: [x && /* @__PURE__ */ p(s, {
+					value: x.value,
+					onChange: x.onChange,
+					size: w
+				}), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ f(e, {
+					children: [/* @__PURE__ */ p(t, {
 						variant: "tertiary",
 						appearance: "outlined",
-						size: C,
-						onClick: k,
-						leadingIcon: /* @__PURE__ */ f(n, { className: "h-3.5 w-3.5" }),
-						className: "h-10 border-border-tertiary! dark:border-border-secondary!",
+						size: w,
+						onClick: A,
+						leadingIcon: /* @__PURE__ */ p(r, { className: "h-3.5 w-3.5" }),
+						className: "h-10",
 						children: "초기화"
-					}), /* @__PURE__ */ f(e, {
+					}), /* @__PURE__ */ p(t, {
 						variant: "primary",
-						size: C,
-						onClick: M,
-						loading: y,
-						leadingIcon: /* @__PURE__ */ f(r, { className: "h-3.5 w-3.5" }),
+						size: w,
+						onClick: N,
+						loading: b,
+						leadingIcon: /* @__PURE__ */ p(i, { className: "h-3.5 w-3.5" }),
 						className: "h-10",
 						children: "검색"
 					})]
 				})]
 			})]
-		}), A.length > 0 && /* @__PURE__ */ f("div", {
+		}), j.length > 0 && /* @__PURE__ */ p("div", {
 			className: "mt-2",
-			children: /* @__PURE__ */ f(s, {
-				chips: A,
-				onRemove: j
+			children: /* @__PURE__ */ p(c, {
+				chips: j,
+				onRemove: M
 			})
 		})]
 	});
 }
-function h({ label: e, onClick: t, icon: n, variant: r, disabled: i, activeDot: a }) {
-	return /* @__PURE__ */ p("button", {
+function g({ label: t, onClick: n, icon: r, variant: i, disabled: a, activeDot: o }) {
+	return /* @__PURE__ */ m("button", {
 		type: "button",
-		"aria-label": e,
-		onClick: t,
-		disabled: i,
-		className: `relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50 ${r === "primary" ? "bg-primary-500 text-white hover:bg-primary-600" : "text-icon-secondary hover:bg-bg-base-secondary"}`,
-		children: [n, a && /* @__PURE__ */ f("span", { className: "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary-500" })]
+		"aria-label": t,
+		onClick: n,
+		disabled: a,
+		className: e("relative inline-flex h-9 w-9 items-center justify-center rounded-lg transition-colors disabled:opacity-50", i === "primary" ? "bg-primary text-fg-inverse hover:bg-primary-hover" : "text-icon-secondary hover:bg-bg-muted"),
+		children: [r, o && /* @__PURE__ */ p("span", { className: "absolute top-1.5 right-1.5 h-1.5 w-1.5 rounded-full bg-primary" })]
 	});
 }
 //#endregion
-export { m as SearchBox };
+export { h as SearchBox };

package/dist/components/search-box/SearchBoxChips.cjs

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/x.cjs"),t=require("../tooltip/Tooltip.cjs");let n=require("react/jsx-runtime");function r({chips:r,onRemove:i}){return r.length===0?null:(0,n.jsx)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:r.map(r=>(0,n.jsx)(t.Tooltip,{content:`${r.label} | ${r.valueLabel}`,position:`top`,children:(0,n.jsxs)(`button`,{type:`button`,onClick:()=>i(r.key),className:`inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-border bg-primary-subtle px-2 py-0.5 text-xs text-primary-fg transition-colors hover:bg-button-secondary-hover`,"aria-label":`${r.label} 필터 제거`,children:[(0,n.jsx)(`span`,{className:`shrink-0 text-fg-subtle`,children:r.label}),(0,n.jsx)(`span`,{className:`text-primary-border`,children:`|`}),(0,n.jsx)(`span`,{className:`truncate font-medium`,children:r.valueLabel}),(0,n.jsx)(e.X,{className:`h-3 w-3 shrink-0`})]})},r.key))})}exports.SearchBoxChips=r;

package/dist/components/search-box/SearchBoxChips.esm.js

@@ -11,15 +11,15 @@ function i({ chips: i, onRemove: a }) {
 			children: /* @__PURE__ */ r("button", {
 				type: "button",
 				onClick: () => a(i.key),
-				className: "inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs text-primary-700 transition-colors hover:bg-primary-100 dark:border-primary-800 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50",
+				className: "inline-flex max-w-65 items-center gap-1.5 rounded-full border border-primary-border bg-primary-subtle px-2 py-0.5 text-xs text-primary-fg transition-colors hover:bg-button-secondary-hover",
 				"aria-label": `${i.label} 필터 제거`,
 				children: [
 					/* @__PURE__ */ n("span", {
-						className: "shrink-0 text-text-tertiary",
+						className: "shrink-0 text-fg-subtle",
 						children: i.label
 					}),
 					/* @__PURE__ */ n("span", {
-						className: "text-primary-300 dark:text-primary-700",
+						className: "text-primary-border",
 						children: "|"
 					}),
 					/* @__PURE__ */ n("span", {

package/dist/components/search-box/SearchBoxDateRange.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../date-input/DateInput.cjs"),r=require("./parseDateRange.cjs"),i=require("./SearchBoxSheetContext.cjs");let a=require("react"),o=require("react/jsx-runtime");function s({value:s,onChange:c,presets:l,size:u}){let{from:d,to:f}=r.parseDateRangeValue(s),p=(0,a.useContext)(i.SearchBoxSheetContext),m=(0,a.useMemo)(()=>l?.map(e=>({preset:e,range:e.range()}))??[],[l]),h=e=>{let t=e.range();c(r.serializeDateRangeValue(t.from,t.to))};return(0,o.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,o.jsxs)(`div`,{className:`flex items-center gap-1.5`,children:[(0,o.jsx)(n.DateInput,{value:d,onChange:e=>c(r.serializeDateRangeValue(e,f)),size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:`시작일`,disableMobileSheet:p}),(0,o.jsx)(`span`,{className:`text-fg-subtle`,children:`~`}),(0,o.jsx)(n.DateInput,{value:f,onChange:e=>c(r.serializeDateRangeValue(d,e)),size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:`종료일`,disableMobileSheet:p})]}),m.length>0&&(0,o.jsx)(`div`,{className:`flex items-center gap-1`,children:m.map(({preset:n,range:r})=>{let i=d===r.from&&f===r.to;return(0,o.jsx)(t.Button,{variant:i?`primary`:`tertiary`,appearance:i?`filled`:`outlined`,size:u,onClick:()=>h(n),className:e.cn(`whitespace-nowrap`,u===`mini`?`h-8`:`h-10`),children:n.label},n.label)})})]})}exports.SearchBoxDateRange=s;

package/dist/{src/components → components}/search-box/SearchBoxDateRange.d.ts

@@ -1,4 +1,4 @@
-import { DateRangePreset } from './types';
+import { DateRangePreset } from './types.js';
 interface Props {
     /** "from~to" CSV. 빈 문자열이면 양쪽 모두 비어있음. */
     value: string;

package/dist/components/search-box/SearchBoxDateRange.esm.js

@@ -1,57 +1,60 @@
-import { Button as e } from "../button/Button.esm.js";
-import { DateInput as t } from "../date-input/DateInput.esm.js";
-import { parseDateRangeValue as n, serializeDateRangeValue as r } from "./parseDateRange.esm.js";
-import { SearchBoxSheetContext as i } from "./SearchBoxSheetContext.esm.js";
-import { useContext as a, useMemo as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { DateInput as n } from "../date-input/DateInput.esm.js";
+import { parseDateRangeValue as r, serializeDateRangeValue as i } from "./parseDateRange.esm.js";
+import { SearchBoxSheetContext as a } from "./SearchBoxSheetContext.esm.js";
+import { useContext as o, useMemo as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/search-box/SearchBoxDateRange.tsx
-function l({ value: l, onChange: u, presets: d, size: f }) {
-	let { from: p, to: m } = n(l), h = a(i), g = o(() => d?.map((e) => ({
+function u({ value: u, onChange: d, presets: f, size: p }) {
+	let { from: m, to: h } = r(u), g = o(a), _ = s(() => f?.map((e) => ({
 		preset: e,
 		range: e.range()
-	})) ?? [], [d]), _ = (e) => {
+	})) ?? [], [f]), v = (e) => {
 		let t = e.range();
-		u(r(t.from, t.to));
+		d(i(t.from, t.to));
 	};
-	return /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ l("div", {
 		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
-		children: [/* @__PURE__ */ c("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "flex items-center gap-1.5",
 			children: [
-				/* @__PURE__ */ s(t, {
-					value: p,
-					onChange: (e) => u(r(e, m)),
-					size: f,
+				/* @__PURE__ */ c(n, {
+					value: m,
+					onChange: (e) => d(i(e, h)),
+					size: p,
+					className: p === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
 					ariaLabel: "시작일",
-					disableMobileSheet: h
+					disableMobileSheet: g
 				}),
-				/* @__PURE__ */ s("span", {
-					className: "text-neutral-400",
+				/* @__PURE__ */ c("span", {
+					className: "text-fg-subtle",
 					children: "~"
 				}),
-				/* @__PURE__ */ s(t, {
-					value: m,
-					onChange: (e) => u(r(p, e)),
-					size: f,
+				/* @__PURE__ */ c(n, {
+					value: h,
+					onChange: (e) => d(i(m, e)),
+					size: p,
+					className: p === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
 					ariaLabel: "종료일",
-					disableMobileSheet: h
+					disableMobileSheet: g
 				})
 			]
-		}), g.length > 0 && /* @__PURE__ */ s("div", {
+		}), _.length > 0 && /* @__PURE__ */ c("div", {
 			className: "flex items-center gap-1",
-			children: g.map(({ preset: t, range: n }) => {
-				let r = p === n.from && m === n.to;
-				return /* @__PURE__ */ s(e, {
-					variant: r ? "primary" : "tertiary",
-					appearance: r ? "filled" : "outlined",
-					size: f,
-					onClick: () => _(t),
-					className: `whitespace-nowrap ${f === "small" ? "h-10" : ""} ${r ? "" : "border-border-tertiary! dark:border-border-secondary!"}`,
-					children: t.label
-				}, t.label);
+			children: _.map(({ preset: n, range: r }) => {
+				let i = m === r.from && h === r.to;
+				return /* @__PURE__ */ c(t, {
+					variant: i ? "primary" : "tertiary",
+					appearance: i ? "filled" : "outlined",
+					size: p,
+					onClick: () => v(n),
+					className: e("whitespace-nowrap", p === "mini" ? "h-8" : "h-10"),
+					children: n.label
+				}, n.label);
 			})
 		})]
 	});
 }
 //#endregion
-export { l as SearchBoxDateRange };
+export { u as SearchBoxDateRange };

package/dist/components/search-box/SearchBoxDateSingle.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../date-input/DateInput.cjs"),r=require("./SearchBoxSheetContext.cjs");let i=require("react"),a=require("react/jsx-runtime");function o({value:o,onChange:s,ariaLabel:c,presets:l,size:u}){let d=(0,i.useContext)(r.SearchBoxSheetContext),f=(0,i.useMemo)(()=>l?.map(e=>({preset:e,date:e.date()}))??[],[l]);return(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-x-3 gap-y-1.5`,children:[(0,a.jsx)(n.DateInput,{value:o,onChange:s,size:u,className:u===`mini`?`h-8 rounded-control-mini`:`h-10 rounded-control-small`,ariaLabel:c,disableMobileSheet:d}),f.length>0&&(0,a.jsx)(`div`,{className:`flex items-center gap-1`,children:f.map(({preset:n,date:r})=>{let i=o===r;return(0,a.jsx)(t.Button,{variant:i?`primary`:`tertiary`,appearance:i?`filled`:`outlined`,size:u,onClick:()=>s(r),className:e.cn(`whitespace-nowrap`,u===`mini`?`h-8`:`h-10`),children:n.label},n.label)})})]})}exports.SearchBoxDateSingle=o;

package/dist/{src/components → components}/search-box/SearchBoxDateSingle.d.ts

@@ -1,4 +1,4 @@
-import { DateSinglePreset } from './types';
+import { DateSinglePreset } from './types.js';
 interface Props {
     /** yyyy-MM-dd 또는 빈 문자열. */
     value: string;

package/dist/components/search-box/SearchBoxDateSingle.esm.js

@@ -1,37 +1,39 @@
-import { Button as e } from "../button/Button.esm.js";
-import { DateInput as t } from "../date-input/DateInput.esm.js";
-import { SearchBoxSheetContext as n } from "./SearchBoxSheetContext.esm.js";
-import { useContext as r, useMemo as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { DateInput as n } from "../date-input/DateInput.esm.js";
+import { SearchBoxSheetContext as r } from "./SearchBoxSheetContext.esm.js";
+import { useContext as i, useMemo as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/search-box/SearchBoxDateSingle.tsx
-function s({ value: s, onChange: c, ariaLabel: l, presets: u, size: d }) {
-	let f = r(n), p = i(() => u?.map((e) => ({
+function c({ value: c, onChange: l, ariaLabel: u, presets: d, size: f }) {
+	let p = i(r), m = a(() => d?.map((e) => ({
 		preset: e,
 		date: e.date()
-	})) ?? [], [u]);
-	return /* @__PURE__ */ o("div", {
+	})) ?? [], [d]);
+	return /* @__PURE__ */ s("div", {
 		className: "flex flex-wrap items-center gap-x-3 gap-y-1.5",
-		children: [/* @__PURE__ */ a(t, {
-			value: s,
-			onChange: c,
-			size: d,
-			ariaLabel: l,
-			disableMobileSheet: f
-		}), p.length > 0 && /* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ o(n, {
+			value: c,
+			onChange: l,
+			size: f,
+			className: f === "mini" ? "h-8 rounded-control-mini" : "h-10 rounded-control-small",
+			ariaLabel: u,
+			disableMobileSheet: p
+		}), m.length > 0 && /* @__PURE__ */ o("div", {
 			className: "flex items-center gap-1",
-			children: p.map(({ preset: t, date: n }) => {
-				let r = s === n;
-				return /* @__PURE__ */ a(e, {
-					variant: r ? "primary" : "tertiary",
-					appearance: r ? "filled" : "outlined",
-					size: d,
-					onClick: () => c(n),
-					className: `whitespace-nowrap ${d === "small" ? "h-10" : ""} ${r ? "" : "border-border-tertiary! dark:border-border-secondary!"}`,
-					children: t.label
-				}, t.label);
+			children: m.map(({ preset: n, date: r }) => {
+				let i = c === r;
+				return /* @__PURE__ */ o(t, {
+					variant: i ? "primary" : "tertiary",
+					appearance: i ? "filled" : "outlined",
+					size: f,
+					onClick: () => l(r),
+					className: e("whitespace-nowrap", f === "mini" ? "h-8" : "h-10"),
+					children: n.label
+				}, n.label);
 			})
 		})]
 	});
 }
 //#endregion
-export { s as SearchBoxDateSingle };
+export { c as SearchBoxDateSingle };

package/dist/components/search-box/SearchBoxField.cjs

@@ -0,0 +1 @@
+const e=require("./SearchBoxDateRange.cjs"),t=require("./SearchBoxDateSingle.cjs"),n=require("./SearchBoxFloatingInput.cjs"),r=require("./SearchBoxFloatingSelect.cjs"),i=require("./SearchBoxMonth.cjs"),a=require("./SearchBoxMultiSelect.cjs");let o=require("react/jsx-runtime");function s({field:s,value:c,onChange:l,onEnter:u,size:d}){return s.type===`text`?(0,o.jsx)(n.SearchBoxFloatingInput,{label:s.label,value:c,onChange:l,onEnter:u,size:d,inputMode:s.inputMode}):s.type===`multiSelect`?(0,o.jsx)(a.SearchBoxMultiSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d}):s.type===`dateRange`?(0,o.jsx)(e.SearchBoxDateRange,{value:c,onChange:l,presets:s.presets,size:d}):s.type===`dateSingle`?(0,o.jsx)(t.SearchBoxDateSingle,{value:c,onChange:l,ariaLabel:s.label,presets:s.presets,size:d}):s.type===`month`?(0,o.jsx)(i.SearchBoxMonth,{value:c,onChange:l,ariaLabel:s.label,size:d}):(0,o.jsx)(r.SearchBoxFloatingSelect,{label:s.label,options:s.options,value:c,onChange:l,size:d})}exports.SearchBoxField=s;

package/dist/{src/components → components}/search-box/SearchBoxField.d.ts

@@ -1,4 +1,4 @@
-import { SearchField } from './types';
+import { SearchField } from './types.js';
 interface Props {
     field: SearchField;
     value: string;

package/dist/components/search-box/SearchBoxFloatingInput.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({label:r,value:i,onChange:a,onEnter:o,size:s,inputMode:c,trailing:l}){let[u,d]=(0,t.useState)(!1),f=(0,t.useRef)(null),p=i.length>0,m=u||p,h=s===`mini`?`h-8`:`h-10`,g=s===`mini`?`rounded-control-mini`:`rounded-control-small`,_=s===`mini`?`text-xs`:`text-sm`,v=s===`mini`?`px-2.5`:`px-3`;return(0,n.jsxs)(`div`,{className:e.cn(`relative w-full cursor-text border bg-bg-surface transition-colors`,h,g,u?`border-primary`:`border-border-subtle`),onClick:()=>f.current?.focus(),children:[(0,n.jsx)(`input`,{ref:f,type:`text`,value:i,onChange:e=>a(e.target.value),onFocus:()=>d(!0),onBlur:()=>d(!1),onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),o?.())},inputMode:c,"aria-label":r,className:e.cn(`peer h-full w-full bg-transparent text-fg-default placeholder-transparent focus:outline-hidden`,v,_),placeholder:r}),(0,n.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,m?[`-top-2`,s===`mini`?`text-[10px]`:`text-xs`,u?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,_]),children:r}),l&&(0,n.jsx)(`div`,{className:`absolute inset-y-0 right-2 flex items-center`,children:l})]})}exports.SearchBoxFloatingInput=r;

package/dist/components/search-box/SearchBoxFloatingInput.esm.js

@@ -1,38 +1,43 @@
-import { useRef as e, useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/search-box/SearchBoxFloatingInput.tsx
-function i({ label: i, value: a, onChange: o, onEnter: s, size: c, inputMode: l, trailing: u }) {
-	let [d, f] = t(!1), p = e(null), m = a.length > 0, h = d || m, g = c === "mini" ? "h-8" : "h-10", _ = c === "mini" ? "text-xs" : "text-sm", v = c === "mini" ? "px-2.5" : "px-3";
-	return /* @__PURE__ */ r("div", {
-		className: `relative ${g} w-full cursor-text rounded-lg border bg-bg-white transition-colors ${d ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
-		onClick: () => p.current?.focus(),
+function a({ label: a, value: o, onChange: s, onEnter: c, size: l, inputMode: u, trailing: d }) {
+	let [f, p] = n(!1), m = t(null), h = o.length > 0, g = f || h, _ = l === "mini" ? "h-8" : "h-10", v = l === "mini" ? "rounded-control-mini" : "rounded-control-small", y = l === "mini" ? "text-xs" : "text-sm", b = l === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ i("div", {
+		className: e("relative w-full cursor-text border bg-bg-surface transition-colors", _, v, f ? "border-primary" : "border-border-subtle"),
+		onClick: () => m.current?.focus(),
 		children: [
-			/* @__PURE__ */ n("input", {
-				ref: p,
+			/* @__PURE__ */ r("input", {
+				ref: m,
 				type: "text",
-				value: a,
-				onChange: (e) => o(e.target.value),
-				onFocus: () => f(!0),
-				onBlur: () => f(!1),
+				value: o,
+				onChange: (e) => s(e.target.value),
+				onFocus: () => p(!0),
+				onBlur: () => p(!1),
 				onKeyDown: (e) => {
-					e.key === "Enter" && (e.preventDefault(), s?.());
+					e.key === "Enter" && (e.preventDefault(), c?.());
 				},
-				inputMode: l,
-				"aria-label": i,
-				className: `peer h-full w-full bg-transparent ${v} ${_} text-text-primary placeholder-transparent focus:outline-hidden`,
-				placeholder: i
+				inputMode: u,
+				"aria-label": a,
+				className: e("peer h-full w-full bg-transparent text-fg-default placeholder-transparent focus:outline-hidden", b, y),
+				placeholder: a
 			}),
-			/* @__PURE__ */ n("span", {
+			/* @__PURE__ */ r("span", {
 				"aria-hidden": "true",
-				className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${h ? `-top-2 ${c === "mini" ? "text-[10px]" : "text-xs"} ${d ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${_} text-text-tertiary`}`,
-				children: i
+				className: e("pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface", g ? [
+					"-top-2",
+					l === "mini" ? "text-[10px]" : "text-xs",
+					f ? "text-primary-fg" : "text-fg-muted"
+				] : ["top-1/2 -translate-y-1/2 text-fg-subtle", y]),
+				children: a
 			}),
-			u && /* @__PURE__ */ n("div", {
+			d && /* @__PURE__ */ r("div", {
 				className: "absolute inset-y-0 right-2 flex items-center",
-				children: u
+				children: d
 			})
 		]
 	});
 }
 //#endregion
-export { i as SearchBoxFloatingInput };
+export { a as SearchBoxFloatingInput };