@thewrong/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@floating-ui/react");function o({label:o,options:s,value:c,onChange:l,size:u}){let[d,f]=(0,r.useState)(!1),{refs:p,floatingStyles:m,context:h}=(0,a.useFloating)({open:d,onOpenChange:f,placement:`bottom-start`,whileElementsMounted:a.autoUpdate,middleware:[(0,a.offset)(4),(0,a.flip)({fallbackAxisSideDirection:`start`}),(0,a.shift)({padding:8}),(0,a.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:g,getFloatingProps:_}=(0,a.useInteractions)([(0,a.useClick)(h),(0,a.useDismiss)(h),(0,a.useRole)(h,{role:`listbox`})]),v=s.find(e=>String(e.value)===c),y=!!v,b=d||y,x=u===`mini`?`h-8`:`h-10`,S=u===`mini`?`rounded-control-mini`:`rounded-control-small`,C=u===`mini`?`text-xs`:`text-sm`,w=u===`mini`?`px-2.5`:`px-3`;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{ref:p.setReference,type:`button`,...g(),"aria-expanded":d,"aria-haspopup":`listbox`,className:e.cn(`relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden`,x,S,w,d?`border-primary`:`border-border-subtle`),children:[(0,i.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:e.cn(`truncate`,C,y?`text-fg-default`:`text-fg-subtle`),children:y?v.label:``}),(0,i.jsx)(n.ChevronDown,{className:e.cn(`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform`,d&&`rotate-180`)})]}),(0,i.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,b?[`-top-2`,u===`mini`?`text-[10px]`:`text-xs`,d?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,C]),children:o})]}),d&&(0,i.jsx)(a.FloatingPortal,{children:(0,i.jsxs)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay`,children:[s.map(n=>{let r=String(n.value),a=r===c;return(0,i.jsxs)(`button`,{type:`button`,onClick:()=>{l(r),f(!1)},className:e.cn(`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle`,C,a?`text-fg-default`:`text-fg-muted`),role:`option`,"aria-selected":a,children:[(0,i.jsx)(`span`,{className:`flex-1 truncate`,children:n.label}),a&&(0,i.jsx)(t.Check,{className:`h-3 w-3 text-primary-fg`,strokeWidth:3})]},r)}),s.length===0&&(0,i.jsx)(`div`,{className:`px-3 py-2 text-xs text-fg-subtle`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxFloatingSelect=o;

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

@@ -1,4 +1,4 @@
-import { SelectOption } from '../../../components/select';
+import { SelectOption } from '../select/index.js';
 interface Props {
     /** 라벨 — 미선택일 땐 인풋 안의 placeholder처럼, 선택/포커스 시 상단 보더로 부유. */
     label: string;

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

@@ -1,74 +1,79 @@
-import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
-import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
-import { useState as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { FloatingPortal as o, autoUpdate as s, flip as c, offset as l, shift as u, size as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+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 { ChevronDown as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, size as f, useClick as p, useDismiss as m, useFloating as h, useInteractions as g, useRole as _ } from "@floating-ui/react";
 //#region src/components/search-box/SearchBoxFloatingSelect.tsx
-function _({ label: _, options: v, value: y, onChange: b, size: x }) {
-	let [S, C] = n(!1), { refs: w, floatingStyles: T, context: E } = m({
-		open: S,
-		onOpenChange: C,
+function v({ label: v, options: y, value: b, onChange: x, size: S }) {
+	let [C, w] = r(!1), { refs: T, floatingStyles: E, context: D } = h({
+		open: C,
+		onOpenChange: w,
 		placement: "bottom-start",
-		whileElementsMounted: s,
+		whileElementsMounted: c,
 		middleware: [
-			l(4),
-			c({ fallbackAxisSideDirection: "start" }),
-			u({ padding: 8 }),
-			d({ apply({ rects: e, elements: t }) {
+			u(4),
+			l({ fallbackAxisSideDirection: "start" }),
+			d({ padding: 8 }),
+			f({ apply({ rects: e, elements: t }) {
 				Object.assign(t.floating.style, { minWidth: `${e.reference.width}px` });
 			} })
 		]
-	}), { getReferenceProps: D, getFloatingProps: O } = h([
-		f(E),
-		p(E),
-		g(E, { role: "listbox" })
-	]), k = v.find((e) => String(e.value) === y), A = !!k, j = S || A, M = x === "mini" ? "h-8" : "h-10", N = x === "mini" ? "text-xs" : "text-sm", P = x === "mini" ? "px-2.5" : "px-3";
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("button", {
-		ref: w.setReference,
+	}), { getReferenceProps: O, getFloatingProps: k } = g([
+		p(D),
+		m(D),
+		_(D, { role: "listbox" })
+	]), A = y.find((e) => String(e.value) === b), j = !!A, M = C || j, N = S === "mini" ? "h-8" : "h-10", P = S === "mini" ? "rounded-control-mini" : "rounded-control-small", F = S === "mini" ? "text-xs" : "text-sm", I = S === "mini" ? "px-2.5" : "px-3";
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("button", {
+		ref: T.setReference,
 		type: "button",
-		...D(),
-		"aria-expanded": S,
+		...O(),
+		"aria-expanded": C,
 		"aria-haspopup": "listbox",
-		className: `relative ${M} w-full rounded-lg border bg-bg-white ${P} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${S ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
-		children: [/* @__PURE__ */ a("div", {
+		className: e("relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden", N, P, I, C ? "border-primary" : "border-border-subtle"),
+		children: [/* @__PURE__ */ o("div", {
 			className: "flex h-full w-full items-center justify-between gap-2",
-			children: [/* @__PURE__ */ i("span", {
-				className: `truncate ${N} ${A ? "text-text-primary" : "text-text-tertiary"}`,
-				children: A ? k.label : ""
-			}), /* @__PURE__ */ i(t, { className: `h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${S ? "rotate-180" : ""}` })]
-		}), /* @__PURE__ */ i("span", {
+			children: [/* @__PURE__ */ a("span", {
+				className: e("truncate", F, j ? "text-fg-default" : "text-fg-subtle"),
+				children: j ? A.label : ""
+			}), /* @__PURE__ */ a(n, { className: e("h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform", C && "rotate-180") })]
+		}), /* @__PURE__ */ a("span", {
 			"aria-hidden": "true",
-			className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${j ? `-top-2 ${x === "mini" ? "text-[10px]" : "text-xs"} ${S ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${N} text-text-tertiary`}`,
-			children: _
+			className: e("pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface", M ? [
+				"-top-2",
+				S === "mini" ? "text-[10px]" : "text-xs",
+				C ? "text-primary-fg" : "text-fg-muted"
+			] : ["top-1/2 -translate-y-1/2 text-fg-subtle", F]),
+			children: v
 		})]
-	}), S && /* @__PURE__ */ i(o, { children: /* @__PURE__ */ a("div", {
-		ref: w.setFloating,
-		style: T,
-		...O(),
-		className: "z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
-		children: [v.map((t) => {
-			let n = String(t.value), r = n === y;
-			return /* @__PURE__ */ a("button", {
+	}), C && /* @__PURE__ */ a(s, { children: /* @__PURE__ */ o("div", {
+		ref: T.setFloating,
+		style: E,
+		...k(),
+		className: "z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay",
+		children: [y.map((n) => {
+			let r = String(n.value), i = r === b;
+			return /* @__PURE__ */ o("button", {
 				type: "button",
 				onClick: () => {
-					b(n), C(!1);
+					x(r), w(!1);
 				},
-				className: `flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${N} ${r ? "text-text-primary" : "text-text-secondary"}`,
+				className: e("flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle", F, i ? "text-fg-default" : "text-fg-muted"),
 				role: "option",
-				"aria-selected": r,
-				children: [/* @__PURE__ */ i("span", {
+				"aria-selected": i,
+				children: [/* @__PURE__ */ a("span", {
 					className: "flex-1 truncate",
-					children: t.label
-				}), r && /* @__PURE__ */ i(e, {
-					className: "h-3 w-3 text-primary-500",
+					children: n.label
+				}), i && /* @__PURE__ */ a(t, {
+					className: "h-3 w-3 text-primary-fg",
 					strokeWidth: 3
 				})]
-			}, n);
-		}), v.length === 0 && /* @__PURE__ */ i("div", {
-			className: "px-3 py-2 text-xs text-text-tertiary",
+			}, r);
+		}), y.length === 0 && /* @__PURE__ */ a("div", {
+			className: "px-3 py-2 text-xs text-fg-subtle",
 			children: "옵션이 없어요"
 		})]
 	}) })] });
 }
 //#endregion
-export { _ as SearchBoxFloatingSelect };
+export { v as SearchBoxFloatingSelect };

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/calendar.cjs"),n=require("../date-picker/month-picker.cjs"),r=require("./SearchBoxSheetContext.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(e){let[t,n]=e.split(`-`),r=Number(t),i=Number(n);if(!(!r||!i))return{year:r,month:i}}function s({year:e,month:t}){return`${e}-${String(t).padStart(2,`0`)}`}function c({value:c,onChange:l,ariaLabel:u,size:d}){let f=(0,i.useContext)(r.SearchBoxSheetContext),p=o(c),m=p?`${p.year}년 ${p.month}월`:`년월 선택`;return(0,a.jsx)(n.MonthPicker,{value:p,onChange:e=>l(s(e)),disableMobileSheet:f,children:(0,a.jsxs)(`button`,{type:`button`,"aria-label":u,className:e.cn(`inline-flex w-full items-center gap-2 border border-border-subtle bg-bg-surface px-3 text-sm text-fg-default transition-colors hover:bg-bg-subtle`,d===`mini`?`h-8 rounded-control-mini py-1.5`:`h-10 rounded-control-small py-2`),children:[(0,a.jsx)(t.Calendar,{className:`h-4 w-4 shrink-0 text-fg-muted`}),(0,a.jsx)(`span`,{className:p?``:`text-fg-subtle`,children:m})]})})}exports.SearchBoxMonth=c;

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

@@ -1,35 +1,36 @@
-import { Calendar as e } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
-import { MonthPicker as t } from "../date-picker/month-picker.esm.js";
-import { SearchBoxSheetContext as n } from "./SearchBoxSheetContext.esm.js";
-import { useContext as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { Calendar as t } from "../../node_modules/lucide-react/dist/esm/icons/calendar.esm.js";
+import { MonthPicker as n } from "../date-picker/month-picker.esm.js";
+import { SearchBoxSheetContext as r } from "./SearchBoxSheetContext.esm.js";
+import { useContext as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/search-box/SearchBoxMonth.tsx
-function o(e) {
+function s(e) {
 	let [t, n] = e.split("-"), r = Number(t), i = Number(n);
 	if (!(!r || !i)) return {
 		year: r,
 		month: i
 	};
 }
-function s({ year: e, month: t }) {
+function c({ year: e, month: t }) {
 	return `${e}-${String(t).padStart(2, "0")}`;
 }
-function c({ value: c, onChange: l, ariaLabel: u, size: d }) {
-	let f = r(n), p = o(c), m = p ? `${p.year}년 ${p.month}월` : "년월 선택";
-	return /* @__PURE__ */ i(t, {
-		value: p,
-		onChange: (e) => l(s(e)),
-		disableMobileSheet: f,
-		children: /* @__PURE__ */ a("button", {
+function l({ value: l, onChange: u, ariaLabel: d, size: f }) {
+	let p = i(r), m = s(l), h = m ? `${m.year}년 ${m.month}월` : "년월 선택";
+	return /* @__PURE__ */ a(n, {
+		value: m,
+		onChange: (e) => u(c(e)),
+		disableMobileSheet: p,
+		children: /* @__PURE__ */ o("button", {
 			type: "button",
-			"aria-label": u,
-			className: `inline-flex w-full items-center gap-2 rounded-lg border border-border-tertiary bg-bg-card px-3 text-sm text-text-primary transition-colors hover:bg-bg-base-primary dark:border-border-secondary ${d === "small" ? "h-10 py-2" : "h-9 py-1.5"}`,
-			children: [/* @__PURE__ */ i(e, { className: "h-4 w-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ i("span", {
-				className: p ? "" : "text-text-tertiary",
-				children: m
+			"aria-label": d,
+			className: e("inline-flex w-full items-center gap-2 border border-border-subtle bg-bg-surface px-3 text-sm text-fg-default transition-colors hover:bg-bg-subtle", f === "mini" ? "h-8 rounded-control-mini py-1.5" : "h-10 rounded-control-small py-2"),
+			children: [/* @__PURE__ */ a(t, { className: "h-4 w-4 shrink-0 text-fg-muted" }), /* @__PURE__ */ a("span", {
+				className: m ? "" : "text-fg-subtle",
+				children: h
 			})]
 		})
 	});
 }
 //#endregion
-export { c as SearchBoxMonth };
+export { l as SearchBoxMonth };

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/chevron-down.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@floating-ui/react");function o({label:o,options:s,value:c,onChange:l,size:u}){let[d,f]=(0,r.useState)(!1),{refs:p,floatingStyles:m,context:h}=(0,a.useFloating)({open:d,onOpenChange:f,placement:`bottom-start`,whileElementsMounted:a.autoUpdate,middleware:[(0,a.offset)(4),(0,a.flip)({fallbackAxisSideDirection:`start`}),(0,a.shift)({padding:8}),(0,a.size)({apply({rects:e,elements:t}){Object.assign(t.floating.style,{minWidth:`${e.reference.width}px`})}})]}),{getReferenceProps:g,getFloatingProps:_}=(0,a.useInteractions)([(0,a.useClick)(h),(0,a.useDismiss)(h),(0,a.useRole)(h,{role:`listbox`})]),v=c?c.split(`,`).filter(Boolean):[],y=new Set(v),b=v.length>0,x=d||b,S=e=>{let t=new Set(y);t.has(e)?t.delete(e):t.add(e),l(s.filter(e=>t.has(String(e.value))).map(e=>String(e.value)).join(`,`))},C=u===`mini`?`h-8`:`h-10`,w=u===`mini`?`rounded-control-mini`:`rounded-control-small`,T=u===`mini`?`text-xs`:`text-sm`,E=u===`mini`?`px-2.5`:`px-3`,D=b?s.filter(e=>y.has(String(e.value))).map(e=>e.label).join(`, `):``;return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`button`,{ref:p.setReference,type:`button`,...g(),"aria-expanded":d,"aria-haspopup":`listbox`,className:e.cn(`relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden`,C,w,E,d?`border-primary`:`border-border-subtle`),children:[(0,i.jsxs)(`div`,{className:`flex h-full w-full items-center justify-between gap-2`,children:[(0,i.jsx)(`span`,{className:e.cn(`truncate`,T,b?`text-fg-default`:`text-fg-subtle`),children:D}),(0,i.jsx)(n.ChevronDown,{className:e.cn(`h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform`,d&&`rotate-180`)})]}),(0,i.jsx)(`span`,{"aria-hidden":`true`,className:e.cn(`pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface`,x?[`-top-2`,u===`mini`?`text-[10px]`:`text-xs`,d?`text-primary-fg`:`text-fg-muted`]:[`top-1/2 -translate-y-1/2 text-fg-subtle`,T]),children:o})]}),d&&(0,i.jsx)(a.FloatingPortal,{children:(0,i.jsxs)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay`,children:[s.map(n=>{let r=String(n.value),a=y.has(r);return(0,i.jsxs)(`button`,{type:`button`,onClick:()=>S(r),className:e.cn(`flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle`,T,a?`text-fg-default`:`text-fg-muted`),role:`option`,"aria-selected":a,children:[(0,i.jsx)(`span`,{className:e.cn(`flex h-4 w-4 shrink-0 items-center justify-center rounded border`,a?`border-primary bg-primary text-fg-inverse`:`border-border-default`),children:a&&(0,i.jsx)(t.Check,{className:`h-3 w-3`,strokeWidth:3})}),(0,i.jsx)(`span`,{className:`flex-1 truncate`,children:n.label})]},r)}),s.length===0&&(0,i.jsx)(`div`,{className:`px-3 py-2 text-xs text-fg-subtle`,children:`옵션이 없어요`})]})})]})}exports.SearchBoxMultiSelect=o;

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

@@ -1,4 +1,4 @@
-import { SelectOption } from '../../../components/select';
+import { SelectOption } from '../select/index.js';
 interface Props {
     /** 라벨 — 미선택일 땐 트리거 안의 placeholder처럼, 선택/오픈 시 상단 보더로 부유. */
     label: string;
@@ -15,7 +15,7 @@ interface Props {
  * 시그니처를 유지한다. 빈 값이면 미선택, "A,B"면 두 항목 선택.
  *
  * SearchBoxFloatingInput/Select와 동일한 플로팅 라벨 UX. 보더와 라벨이 포커스/오픈 시
- * primary-500으로 통일된다.
+ * 시맨틱 primary 색을 따른다.
  *
  * number[] 전용 드롭다운은 적합하지 않아 별도 inline 컴포넌트로 둔다.
  *

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

@@ -1,78 +1,83 @@
-import { Check as e } from "../../node_modules/lucide-react/dist/esm/icons/check.esm.js";
-import { ChevronDown as t } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
-import { useState as n } from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { FloatingPortal as o, autoUpdate as s, flip as c, offset as l, shift as u, size as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+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 { ChevronDown as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.esm.js";
+import { useState as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, size as f, useClick as p, useDismiss as m, useFloating as h, useInteractions as g, useRole as _ } from "@floating-ui/react";
 //#region src/components/search-box/SearchBoxMultiSelect.tsx
-function _({ label: _, options: v, value: y, onChange: b, size: x }) {
-	let [S, C] = n(!1), { refs: w, floatingStyles: T, context: E } = m({
-		open: S,
-		onOpenChange: C,
+function v({ label: v, options: y, value: b, onChange: x, size: S }) {
+	let [C, w] = r(!1), { refs: T, floatingStyles: E, context: D } = h({
+		open: C,
+		onOpenChange: w,
 		placement: "bottom-start",
-		whileElementsMounted: s,
+		whileElementsMounted: c,
 		middleware: [
-			l(4),
-			c({ fallbackAxisSideDirection: "start" }),
-			u({ padding: 8 }),
-			d({ apply({ rects: e, elements: t }) {
+			u(4),
+			l({ fallbackAxisSideDirection: "start" }),
+			d({ padding: 8 }),
+			f({ apply({ rects: e, elements: t }) {
 				Object.assign(t.floating.style, { minWidth: `${e.reference.width}px` });
 			} })
 		]
-	}), { getReferenceProps: D, getFloatingProps: O } = h([
-		f(E),
-		p(E),
-		g(E, { role: "listbox" })
-	]), k = y ? y.split(",").filter(Boolean) : [], A = new Set(k), j = k.length > 0, M = S || j, N = (e) => {
-		let t = new Set(A);
-		t.has(e) ? t.delete(e) : t.add(e), b(v.filter((e) => t.has(String(e.value))).map((e) => String(e.value)).join(","));
-	}, P = x === "mini" ? "h-8" : "h-10", F = x === "mini" ? "text-xs" : "text-sm", I = x === "mini" ? "px-2.5" : "px-3", L = j ? v.filter((e) => A.has(String(e.value))).map((e) => e.label).join(", ") : "";
-	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("button", {
-		ref: w.setReference,
+	}), { getReferenceProps: O, getFloatingProps: k } = g([
+		p(D),
+		m(D),
+		_(D, { role: "listbox" })
+	]), A = b ? b.split(",").filter(Boolean) : [], j = new Set(A), M = A.length > 0, N = C || M, P = (e) => {
+		let t = new Set(j);
+		t.has(e) ? t.delete(e) : t.add(e), x(y.filter((e) => t.has(String(e.value))).map((e) => String(e.value)).join(","));
+	}, F = S === "mini" ? "h-8" : "h-10", I = S === "mini" ? "rounded-control-mini" : "rounded-control-small", L = S === "mini" ? "text-xs" : "text-sm", R = S === "mini" ? "px-2.5" : "px-3", z = M ? y.filter((e) => j.has(String(e.value))).map((e) => e.label).join(", ") : "";
+	return /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ o("button", {
+		ref: T.setReference,
 		type: "button",
-		...D(),
-		"aria-expanded": S,
+		...O(),
+		"aria-expanded": C,
 		"aria-haspopup": "listbox",
-		className: `relative ${P} w-full rounded-lg border bg-bg-white ${I} text-left transition-colors focus-visible:border-primary-500 focus-visible:outline-hidden ${S ? "border-primary-500" : "border-border-tertiary dark:border-border-secondary"}`,
-		children: [/* @__PURE__ */ a("div", {
+		className: e("relative w-full border bg-bg-surface text-left transition-colors focus-visible:border-primary focus-visible:outline-hidden", F, I, R, C ? "border-primary" : "border-border-subtle"),
+		children: [/* @__PURE__ */ o("div", {
 			className: "flex h-full w-full items-center justify-between gap-2",
-			children: [/* @__PURE__ */ i("span", {
-				className: `truncate ${F} ${j ? "text-text-primary" : "text-text-tertiary"}`,
-				children: L
-			}), /* @__PURE__ */ i(t, { className: `h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform ${S ? "rotate-180" : ""}` })]
-		}), /* @__PURE__ */ i("span", {
+			children: [/* @__PURE__ */ a("span", {
+				className: e("truncate", L, M ? "text-fg-default" : "text-fg-subtle"),
+				children: z
+			}), /* @__PURE__ */ a(n, { className: e("h-3.5 w-3.5 shrink-0 text-icon-tertiary transition-transform", C && "rotate-180") })]
+		}), /* @__PURE__ */ a("span", {
 			"aria-hidden": "true",
-			className: `pointer-events-none absolute left-2 px-1 transition-all bg-bg-white ${M ? `-top-2 ${x === "mini" ? "text-[10px]" : "text-xs"} ${S ? "text-primary-500" : "text-text-secondary"}` : `top-1/2 -translate-y-1/2 ${F} text-text-tertiary`}`,
-			children: _
+			className: e("pointer-events-none absolute left-2 px-1 transition-all bg-bg-surface", N ? [
+				"-top-2",
+				S === "mini" ? "text-[10px]" : "text-xs",
+				C ? "text-primary-fg" : "text-fg-muted"
+			] : ["top-1/2 -translate-y-1/2 text-fg-subtle", L]),
+			children: v
 		})]
-	}), S && /* @__PURE__ */ i(o, { children: /* @__PURE__ */ a("div", {
-		ref: w.setFloating,
-		style: T,
-		...O(),
-		className: "z-9999 max-h-60 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
-		children: [v.map((t) => {
-			let n = String(t.value), r = A.has(n);
-			return /* @__PURE__ */ a("button", {
+	}), C && /* @__PURE__ */ a(s, { children: /* @__PURE__ */ o("div", {
+		ref: T.setFloating,
+		style: E,
+		...k(),
+		className: "z-floating max-h-60 overflow-y-auto rounded-surface border border-border-subtle bg-bg-surface py-1 shadow-overlay",
+		children: [y.map((n) => {
+			let r = String(n.value), i = j.has(r);
+			return /* @__PURE__ */ o("button", {
 				type: "button",
-				onClick: () => N(n),
-				className: `flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-700 ${F} ${r ? "text-text-primary" : "text-text-secondary"}`,
+				onClick: () => P(r),
+				className: e("flex w-full items-center gap-2 px-3 py-1.5 text-left transition-colors hover:bg-bg-subtle", L, i ? "text-fg-default" : "text-fg-muted"),
 				role: "option",
-				"aria-selected": r,
-				children: [/* @__PURE__ */ i("span", {
-					className: `flex h-4 w-4 shrink-0 items-center justify-center rounded border ${r ? "border-primary-500 bg-primary-500 text-white" : "border-neutral-300 dark:border-neutral-600"}`,
-					children: r && /* @__PURE__ */ i(e, {
+				"aria-selected": i,
+				children: [/* @__PURE__ */ a("span", {
+					className: e("flex h-4 w-4 shrink-0 items-center justify-center rounded border", i ? "border-primary bg-primary text-fg-inverse" : "border-border-default"),
+					children: i && /* @__PURE__ */ a(t, {
 						className: "h-3 w-3",
 						strokeWidth: 3
 					})
-				}), /* @__PURE__ */ i("span", {
+				}), /* @__PURE__ */ a("span", {
 					className: "flex-1 truncate",
-					children: t.label
+					children: n.label
 				})]
-			}, n);
-		}), v.length === 0 && /* @__PURE__ */ i("div", {
-			className: "px-3 py-2 text-xs text-text-tertiary",
+			}, r);
+		}), y.length === 0 && /* @__PURE__ */ a("div", {
+			className: "px-3 py-2 text-xs text-fg-subtle",
 			children: "옵션이 없어요"
 		})]
 	}) })] });
 }
 //#endregion
-export { _ as SearchBoxMultiSelect };
+export { v as SearchBoxMultiSelect };

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

@@ -0,0 +1 @@
+const e=require("./parseDateRange.cjs");let t=require("date-fns");var n=`yyyy-MM-dd`;function r(){let e=(0,t.format)(new Date,n);return{from:e,to:e}}function i(){let{from:t,to:n}=r();return e.serializeDateRangeValue(t,n)}var a=[{label:`전일`,range:()=>{let e=(0,t.format)((0,t.subDays)(new Date,1),n);return{from:e,to:e}}},{label:`당일`,range:()=>{let e=(0,t.format)(new Date,n);return{from:e,to:e}}},{label:`당월`,range:()=>{let e=new Date;return{from:(0,t.format)((0,t.startOfMonth)(e),n),to:(0,t.format)((0,t.endOfMonth)(e),n)}}},{label:`전월`,range:()=>{let e=(0,t.subMonths)(new Date,1);return{from:(0,t.format)((0,t.startOfMonth)(e),n),to:(0,t.format)((0,t.endOfMonth)(e),n)}}}];exports.DEFAULT_DATE_RANGE_PRESETS=a,exports.getTodayDateRange=r,exports.getTodayDateRangeValue=i;

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

@@ -1,4 +1,4 @@
-import { DateRangePreset } from './types';
+import { DateRangePreset } from './types.js';
 /** 당일 from/to. 페이지 진입 시 기본 range로 사용. */
 export declare function getTodayDateRange(): {
     from: string;

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

@@ -1,5 +1,5 @@
-export { SearchBox } from './SearchBox';
-export { parseSearchValues, parseMultiSelectValue, } from './parseSearchValues';
-export { parseDateRangeValue, serializeDateRangeValue, type DateRangeValue, } from './parseDateRange';
-export { DEFAULT_DATE_RANGE_PRESETS, getTodayDateRange, getTodayDateRangeValue, } from './dateRangePresets';
-export type { SearchField, SearchFieldText, SearchFieldSelect, SearchFieldMultiSelect, SearchFieldDateRange, SearchFieldDateSingle, DateRangePreset, DateSinglePreset, SearchValues, } from './types';
+export { SearchBox } from './SearchBox.js';
+export { parseSearchValues, parseMultiSelectValue, } from './parseSearchValues.js';
+export { parseDateRangeValue, serializeDateRangeValue, type DateRangeValue, } from './parseDateRange.js';
+export { DEFAULT_DATE_RANGE_PRESETS, getTodayDateRange, getTodayDateRangeValue, } from './dateRangePresets.js';
+export type { SearchField, SearchFieldText, SearchFieldSelect, SearchFieldMultiSelect, SearchFieldDateRange, SearchFieldDateSingle, DateRangePreset, DateSinglePreset, SearchValues, } from './types.js';

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

@@ -0,0 +1 @@
+const e=require("./parseDateRange.cjs");function t(e){return e?e.split(`,`).filter(Boolean):[]}function n(n,r){let i={};for(let a of n){let n=a.hidden?``:r[a.key]??``;a.type===`multiSelect`?i[a.key]=t(n):a.type===`dateRange`?i[a.key]=e.parseDateRangeValue(n):i[a.key]=n}return i}exports.parseMultiSelectValue=t,exports.parseSearchValues=n;

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

@@ -1,5 +1,5 @@
-import { DateRangeValue } from './parseDateRange';
-import { SearchField, SearchValues } from './types';
+import { DateRangeValue } from './parseDateRange.js';
+import { SearchField, SearchValues } from './types.js';
 /**
  * SearchValues를 type-aware하게 파싱한 결과.
  * - text/select 필드: `string` 그대로 (빈 값이면 `""`)

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

@@ -1,4 +1,4 @@
-import { SelectOption } from '../../../components/select';
+import { SelectOption } from '../select/index.js';
 /** 검색 필드 정의 — discriminated union. 새 타입은 여기에 추가. */
 export type SearchField = SearchFieldText | SearchFieldSelect | SearchFieldMultiSelect | SearchFieldDateRange | SearchFieldDateSingle | SearchFieldMonth;
 /**

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

@@ -0,0 +1 @@
+const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("./parseDateRange.cjs");let n=require("react"),r=require("react-hot-toast");r=e.__toESM(r,1);function i({fields:e,values:i,onSearch:l,onClear:u}){let[d,f]=(0,n.useState)(()=>a(e,i)),p=(0,n.useRef)(i);return(0,n.useEffect)(()=>{let t=p.current;c(i,t,e)||(f(n=>{let r={...n};for(let a of e)(n[a.key]??``)===(t[a.key]??``)&&(r[a.key]=i[a.key]??``);return r}),p.current=i)},[i]),{draft:d,setFieldValue:(e,t)=>{f(n=>({...n,[e]:t}))},submit:()=>{for(let n of e){if(n.hidden||n.type!==`dateRange`)continue;let{from:e,to:i}=t.parseDateRangeValue(d[n.key]??``);if(e&&i&&e>i)return r.default.error(`${n.label} 종료일이 시작일보다 빠를 수 없어요`),!1}return l(s(e,d)),!0},clear:()=>{let t=o(e);f(t),u?u():l(t)},chips:e.map(e=>{if(e.hidden)return null;let t=i[e.key]??``;if(t===``)return null;if(e.type===`select`){let n=e.options.find(e=>String(e.value)===t);return{key:e.key,label:e.label,valueLabel:n?.label??t}}if(e.type===`multiSelect`){let n=t.split(`,`).filter(Boolean);if(n.length===0)return null;let r=new Map(e.options.map(e=>[String(e.value),e.label])),i=n.map(e=>r.get(e)??e);return{key:e.key,label:e.label,valueLabel:i.join(`, `)}}return null}).filter(e=>e!==null),removeChip:e=>{let t={...i,[e]:``};f(t),l(t)}}}function a(e,t){let n={};for(let r of e)n[r.key]=t[r.key]??``;return n}function o(e){let t={};for(let n of e)t[n.key]=``;return t}function s(e,t){let n={...t};for(let t of e)t.hidden&&(n[t.key]=``);return n}function c(e,t,n){for(let r of n)if((e[r.key]??``)!==(t[r.key]??``))return!1;return!0}exports.useSearchBoxState=i;

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

@@ -1,4 +1,4 @@
-import { SearchField, SearchValues } from './types';
+import { SearchField, SearchValues } from './types.js';
 interface UseSearchBoxStateArgs {
     fields: readonly SearchField[];
     /** 외부에서 적용된 값. 외부가 commit한 값이라 내부 draft와 별개. */

package/dist/components/segmented-code-input/SegmentedCodeInput.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/eye-off.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/eye.cjs"),i=require("./code-utils.cjs");let a=require("react"),o=require("react/jsx-runtime");var s={show:`인증번호 표시`,hide:`인증번호 숨기기`};function c({onKeyDown:c,value:l,onChange:u,length:d=6,hasError:f=!1,describedBy:p,autoFocus:m=!1,masked:h=!0,variant:g=`box`,disabled:_=!1,id:v,"aria-label":y,maskToggleLabels:b=s}){let x=(0,a.useRef)(null),[S,C]=(0,a.useState)(!1),[w,T]=(0,a.useState)(!1),E=h&&!w,D=Math.min(l.length,d-1),O=()=>{window.requestAnimationFrame(()=>{let e=x.current;e&&e.setSelectionRange(e.value.length,e.value.length)})};return(0,o.jsxs)(`div`,{className:`relative flex w-full items-center justify-center`,children:[(0,o.jsxs)(`div`,{className:e.cn(`relative w-full max-w-[320px]`,h&&`mx-12`),children:[(0,o.jsx)(`input`,{ref:x,id:v,type:E?`password`:`text`,inputMode:`numeric`,pattern:`[0-9]*`,autoComplete:`one-time-code`,"aria-label":y,"aria-invalid":f,"aria-describedby":p,value:l,maxLength:d,autoFocus:m,disabled:_,className:`absolute inset-0 z-10 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed`,onFocus:()=>{C(!0),O()},onKeyDown:c,onClick:O,onBlur:()=>C(!1),onPaste:e=>{e.preventDefault();let t=e.currentTarget;u(i.pasteCode(l,e.clipboardData.getData(`text`),t.selectionStart??l.length,t.selectionEnd??l.length,d)),O()},onChange:e=>{u(i.normalizeCode(e.target.value,d))}}),(0,o.jsx)(`div`,{className:`flex justify-center gap-2`,"aria-hidden":`true`,children:Array.from({length:d},(t,n)=>{let r=S&&n===D,i=l[n];return(0,o.jsx)(`span`,{"data-code-slot":!0,"data-active":r||void 0,className:e.cn(`flex h-control-large w-11 min-w-0 max-w-11 flex-1 items-center justify-center text-lg font-semibold text-fg-default transition-colors duration-control ease-control motion-reduce:transition-none`,g===`line`?`rounded-control-mini border-b-2 pb-1`:`rounded-control-large border-control bg-bg-surface`,f?`border-border-danger text-fg-danger`:r?g===`line`?`border-primary`:`border-primary ring-control ring-inset ring-focus-primary`:`border-border-subtle`),children:i===void 0?null:E?(0,o.jsx)(`span`,{"data-code-mask":!0,className:e.cn(`size-2.5 rounded-circle`,f?`bg-error`:`bg-fg-default`)}):i},n)})})]}),h?(0,o.jsx)(t.Button,{type:`button`,variant:`secondary`,appearance:`transparent`,disabled:_,"aria-label":E?b.show:b.hide,"aria-pressed":!E,size:`large`,className:`absolute right-0 top-1/2 w-control-large -translate-y-1/2 px-0`,onClick:()=>T(e=>!e),children:E?(0,o.jsx)(r.Eye,{"aria-hidden":`true`,className:`size-5`}):(0,o.jsx)(n.EyeOff,{"aria-hidden":`true`,className:`size-5`})}):null]})}exports.SegmentedCodeInput=c;

package/dist/components/segmented-code-input/SegmentedCodeInput.d.ts

@@ -0,0 +1,49 @@
+import { KeyboardEvent } from 'react';
+export interface SegmentedCodeInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    hasError?: boolean;
+    describedBy?: string;
+    autoFocus?: boolean;
+    /**
+     * 숨겨진 실제 input의 keydown 핸들러. `<form>` 안에 놓이면 Enter가 자동으로
+     * submit되지만, 모달처럼 제출 버튼이 폼 밖에 있는 경우엔 Enter가 갈 곳이
+     * 없다. 그런 호출부가 Enter를 직접 처리할 수 있게 열어둔다.
+     */
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    /** 숨겨진 실제 input의 `id`. 같은 화면에 여러 인스턴스(코드·코드 확인 등)가
+     * 있을 수 있으므로 호출부가 고유값을 넘긴다. */
+    id: string;
+    /** 숨겨진 실제 input의 접근성 라벨. */
+    "aria-label": string;
+    /**
+     * 값 마스킹 여부. 기본값 `true`(마스킹 + 눈 토글).
+     *
+     * 영구 비밀값(예: PIN)은 가려야 하지만, 1회용 인증번호(OTP·SMS·이메일)는
+     * 사용자가 다른 앱·문자를 보며 옮겨 적는 값이라 가리면 대조하기만
+     * 불편해진다(GitHub·Slack·Stripe 등 주요 서비스도 1회용 코드를 마스킹하지
+     * 않는다). `masked={false}`면 마스킹도 눈 토글 버튼도 렌더하지 않는다.
+     */
+    masked?: boolean;
+    /**
+     * 슬롯 외형. 기본값 `"box"`(사방 테두리 + 라운드).
+     *
+     * `"line"`은 아래 보더만 남긴 얇은 형태다. 자릿수가 적을 때 상자가
+     * 과하게 무거워 보이는 자리에 쓴다.
+     */
+    variant?: "box" | "line";
+    /** true면 입력을 막는다(예: 코드 만료). 기본값 `false`. */
+    disabled?: boolean;
+    /** 마스킹 해제 토글 버튼의 접근성 라벨. 기본값 "인증번호 표시"/"인증번호 숨기기". */
+    maskToggleLabels?: {
+        show: string;
+        hide: string;
+    };
+}
+/**
+ * 브라우저의 OTP 자동 완성·붙여넣기는 단일 input에 맡기고,
+ * 화면에서는 각 자리를 분리된 슬롯으로 표현한다. 숫자만 허용하며 length는 1 이상의 정수로 지정한다.
+ * 값과 onChange는 호출부에서 관리하고, 일회용 코드는 masked={false}로 표시할 수 있다.
+ */
+export declare function SegmentedCodeInput({ onKeyDown, value, onChange, length, hasError, describedBy, autoFocus, masked, variant, disabled, id, "aria-label": ariaLabel, maskToggleLabels, }: SegmentedCodeInputProps): import("react").JSX.Element;

package/dist/components/segmented-code-input/SegmentedCodeInput.esm.js

@@ -0,0 +1,87 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { EyeOff as n } from "../../node_modules/lucide-react/dist/esm/icons/eye-off.esm.js";
+import { Eye as r } from "../../node_modules/lucide-react/dist/esm/icons/eye.esm.js";
+import { normalizeCode as i, pasteCode as a } from "./code-utils.esm.js";
+import { useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/segmented-code-input/SegmentedCodeInput.tsx
+var u = {
+	show: "인증번호 표시",
+	hide: "인증번호 숨기기"
+};
+function d({ onKeyDown: d, value: f, onChange: p, length: m = 6, hasError: h = !1, describedBy: g, autoFocus: _ = !1, masked: v = !0, variant: y = "box", disabled: b = !1, id: x, "aria-label": S, maskToggleLabels: C = u }) {
+	let w = o(null), [T, E] = s(!1), [D, O] = s(!1), k = v && !D, A = Math.min(f.length, m - 1), j = () => {
+		window.requestAnimationFrame(() => {
+			let e = w.current;
+			e && e.setSelectionRange(e.value.length, e.value.length);
+		});
+	};
+	return /* @__PURE__ */ l("div", {
+		className: "relative flex w-full items-center justify-center",
+		children: [/* @__PURE__ */ l("div", {
+			className: e("relative w-full max-w-[320px]", v && "mx-12"),
+			children: [/* @__PURE__ */ c("input", {
+				ref: w,
+				id: x,
+				type: k ? "password" : "text",
+				inputMode: "numeric",
+				pattern: "[0-9]*",
+				autoComplete: "one-time-code",
+				"aria-label": S,
+				"aria-invalid": h,
+				"aria-describedby": g,
+				value: f,
+				maxLength: m,
+				autoFocus: _,
+				disabled: b,
+				className: "absolute inset-0 z-10 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed",
+				onFocus: () => {
+					E(!0), j();
+				},
+				onKeyDown: d,
+				onClick: j,
+				onBlur: () => E(!1),
+				onPaste: (e) => {
+					e.preventDefault();
+					let t = e.currentTarget;
+					p(a(f, e.clipboardData.getData("text"), t.selectionStart ?? f.length, t.selectionEnd ?? f.length, m)), j();
+				},
+				onChange: (e) => {
+					p(i(e.target.value, m));
+				}
+			}), /* @__PURE__ */ c("div", {
+				className: "flex justify-center gap-2",
+				"aria-hidden": "true",
+				children: Array.from({ length: m }, (t, n) => {
+					let r = T && n === A, i = f[n];
+					return /* @__PURE__ */ c("span", {
+						"data-code-slot": !0,
+						"data-active": r || void 0,
+						className: e("flex h-control-large w-11 min-w-0 max-w-11 flex-1 items-center justify-center text-lg font-semibold text-fg-default transition-colors duration-control ease-control motion-reduce:transition-none", y === "line" ? "rounded-control-mini border-b-2 pb-1" : "rounded-control-large border-control bg-bg-surface", h ? "border-border-danger text-fg-danger" : r ? y === "line" ? "border-primary" : "border-primary ring-control ring-inset ring-focus-primary" : "border-border-subtle"),
+						children: i === void 0 ? null : k ? /* @__PURE__ */ c("span", {
+							"data-code-mask": !0,
+							className: e("size-2.5 rounded-circle", h ? "bg-error" : "bg-fg-default")
+						}) : i
+					}, n);
+				})
+			})]
+		}), v ? /* @__PURE__ */ c(t, {
+			type: "button",
+			variant: "secondary",
+			appearance: "transparent",
+			disabled: b,
+			"aria-label": k ? C.show : C.hide,
+			"aria-pressed": !k,
+			size: "large",
+			className: "absolute right-0 top-1/2 w-control-large -translate-y-1/2 px-0",
+			onClick: () => O((e) => !e),
+			children: c(k ? r : n, {
+				"aria-hidden": "true",
+				className: "size-5"
+			})
+		}) : null]
+	});
+}
+//#endregion
+export { d as SegmentedCodeInput };

package/dist/components/segmented-code-input/code-utils.cjs

@@ -0,0 +1 @@
+function e(e,t){return e.replace(/\D/g,``).slice(0,t)}function t(t,n,r,i,a){return e(t.slice(0,r)+n.replace(/\D/g,``)+t.slice(i),a)}exports.normalizeCode=e,exports.pasteCode=t;

package/dist/components/segmented-code-input/code-utils.d.ts

@@ -0,0 +1,4 @@
+/** 숫자만 남겨 슬롯 수에 맞춘다. */
+export declare function normalizeCode(value: string, length: number): string;
+/** 선택 영역을 붙여넣은 숫자로 바꾼 뒤 슬롯 수에 맞춘다. */
+export declare function pasteCode(value: string, pasted: string, start: number, end: number, length: number): string;

package/dist/components/segmented-code-input/code-utils.esm.js

@@ -0,0 +1,9 @@
+//#region src/components/segmented-code-input/code-utils.ts
+function e(e, t) {
+	return e.replace(/\D/g, "").slice(0, t);
+}
+function t(t, n, r, i, a) {
+	return e(t.slice(0, r) + n.replace(/\D/g, "") + t.slice(i), a);
+}
+//#endregion
+export { e as normalizeCode, t as pasteCode };