@thewrong/ui 0.1.0 → 0.3.0

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

@@ -0,0 +1,83 @@
+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 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: c,
+		middleware: [
+			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: 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",
+		...O(),
+		"aria-expanded": C,
+		"aria-haspopup": "listbox",
+		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__ */ 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: 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
+		})]
+	}), 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: () => 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": 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__ */ a("span", {
+					className: "flex-1 truncate",
+					children: n.label
+				})]
+			}, r);
+		}), y.length === 0 && /* @__PURE__ */ a("div", {
+			className: "px-3 py-2 text-xs text-fg-subtle",
+			children: "옵션이 없어요"
+		})]
+	}) })] });
+}
+//#endregion
+export { v as SearchBoxMultiSelect };

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

@@ -0,0 +1 @@
+var e=(0,require("react").createContext)(!1);exports.SearchBoxSheetContext=e;

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

@@ -0,0 +1,5 @@
+import { createContext as e } from "react";
+//#region src/components/search-box/SearchBoxSheetContext.ts
+var t = e(!1);
+//#endregion
+export { t as SearchBoxSheetContext };

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/components/search-box/dateRangePresets.esm.js

@@ -0,0 +1,59 @@
+import { serializeDateRangeValue as e } from "./parseDateRange.esm.js";
+import { endOfMonth as t, format as n, startOfMonth as r, subDays as i, subMonths as a } from "date-fns";
+//#region src/components/search-box/dateRangePresets.ts
+var o = "yyyy-MM-dd";
+function s() {
+	let e = n(/* @__PURE__ */ new Date(), o);
+	return {
+		from: e,
+		to: e
+	};
+}
+function c() {
+	let { from: t, to: n } = s();
+	return e(t, n);
+}
+var l = [
+	{
+		label: "전일",
+		range: () => {
+			let e = n(i(/* @__PURE__ */ new Date(), 1), o);
+			return {
+				from: e,
+				to: e
+			};
+		}
+	},
+	{
+		label: "당일",
+		range: () => {
+			let e = n(/* @__PURE__ */ new Date(), o);
+			return {
+				from: e,
+				to: e
+			};
+		}
+	},
+	{
+		label: "당월",
+		range: () => {
+			let e = /* @__PURE__ */ new Date();
+			return {
+				from: n(r(e), o),
+				to: n(t(e), o)
+			};
+		}
+	},
+	{
+		label: "전월",
+		range: () => {
+			let e = a(/* @__PURE__ */ new Date(), 1);
+			return {
+				from: n(r(e), o),
+				to: n(t(e), o)
+			};
+		}
+	}
+];
+//#endregion
+export { l as DEFAULT_DATE_RANGE_PRESETS, s as getTodayDateRange, c as getTodayDateRangeValue };

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/parseDateRange.cjs

@@ -0,0 +1 @@
+var e=`~`;function t(t){if(!t)return{from:``,to:``};let n=t.indexOf(e);return n===-1?{from:t,to:``}:{from:t.slice(0,n),to:t.slice(n+1)}}function n(t,n){return!t&&!n?``:`${t}${e}${n}`}exports.parseDateRangeValue=t,exports.serializeDateRangeValue=n;

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

@@ -0,0 +1,21 @@
+//#region src/components/search-box/parseDateRange.ts
+var e = "~";
+function t(t) {
+	if (!t) return {
+		from: "",
+		to: ""
+	};
+	let n = t.indexOf(e);
+	return n === -1 ? {
+		from: t,
+		to: ""
+	} : {
+		from: t.slice(0, n),
+		to: t.slice(n + 1)
+	};
+}
+function n(t, n) {
+	return !t && !n ? "" : `${t}${e}${n}`;
+}
+//#endregion
+export { t as parseDateRangeValue, n as serializeDateRangeValue };

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/components/search-box/parseSearchValues.esm.js

@@ -0,0 +1,15 @@
+import { parseDateRangeValue as e } from "./parseDateRange.esm.js";
+//#region src/components/search-box/parseSearchValues.ts
+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(n) : i[a.key] = n;
+	}
+	return i;
+}
+//#endregion
+export { t as parseMultiSelectValue, n as parseSearchValues };

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/search-box/useSearchBoxState.esm.js

@@ -0,0 +1,87 @@
+import { parseDateRangeValue as e } from "./parseDateRange.esm.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import i from "react-hot-toast";
+//#region src/components/search-box/useSearchBoxState.ts
+function a({ fields: a, values: u, onSearch: d, onClear: f }) {
+	let [p, m] = r(() => o(a, u)), h = n(u);
+	return t(() => {
+		let e = h.current;
+		l(u, e, a) || (m((t) => {
+			let n = { ...t };
+			for (let r of a) (t[r.key] ?? "") === (e[r.key] ?? "") && (n[r.key] = u[r.key] ?? "");
+			return n;
+		}), h.current = u);
+	}, [u]), {
+		draft: p,
+		setFieldValue: (e, t) => {
+			m((n) => ({
+				...n,
+				[e]: t
+			}));
+		},
+		submit: () => {
+			for (let t of a) {
+				if (t.hidden || t.type !== "dateRange") continue;
+				let { from: n, to: r } = e(p[t.key] ?? "");
+				if (n && r && n > r) return i.error(`${t.label} 종료일이 시작일보다 빠를 수 없어요`), !1;
+			}
+			return d(c(a, p)), !0;
+		},
+		clear: () => {
+			let e = s(a);
+			m(e), f ? f() : d(e);
+		},
+		chips: a.map((e) => {
+			if (e.hidden) return null;
+			let t = u[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 = {
+				...u,
+				[e]: ""
+			};
+			m(t), d(t);
+		}
+	};
+}
+function o(e, t) {
+	let n = {};
+	for (let r of e) n[r.key] = t[r.key] ?? "";
+	return n;
+}
+function s(e) {
+	let t = {};
+	for (let n of e) t[n.key] = "";
+	return t;
+}
+function c(e, t) {
+	let n = { ...t };
+	for (let t of e) t.hidden && (n[t.key] = "");
+	return n;
+}
+function l(e, t, n) {
+	for (let r of n) if ((e[r.key] ?? "") !== (t[r.key] ?? "")) return !1;
+	return !0;
+}
+//#endregion
+export { a as useSearchBoxState };

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

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

@@ -0,0 +1,2 @@
+export { SegmentedCodeInput } from './SegmentedCodeInput.js';
+export type { SegmentedCodeInputProps } from './SegmentedCodeInput.js';

package/dist/components/segmented-control/SegmentedControl.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");function r({value:r,onChange:i,options:a,name:o,"aria-label":s,"aria-labelledby":c,disabled:l,className:u}){let d=(0,t.useId)(),f=o??d,p=(0,t.useRef)(new Map),m=(0,t.useRef)(null),[h,g]=(0,t.useState)(null),_=(0,t.useCallback)(()=>{let e=p.current.get(r);if(!e){g(null);return}g(t=>({left:e.offsetLeft,width:e.offsetWidth,animate:t!==null}))},[r]);(0,t.useLayoutEffect)(()=>{_()},[_]),(0,t.useLayoutEffect)(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(_);return m.current=e,p.current.forEach(t=>e.observe(t)),()=>{e.disconnect(),m.current=null}},[_]);let v=(0,t.useCallback)(e=>t=>{let n=p.current.get(e);n&&m.current?.unobserve(n),t?(p.current.set(e,t),m.current?.observe(t)):p.current.delete(e)},[]),y=e=>{let t=e.key===`ArrowRight`||e.key===`ArrowDown`?1:e.key===`ArrowLeft`||e.key===`ArrowUp`?-1:0;if(t===0)return;let n=e.currentTarget,r=Array.from(n.ownerDocument.getElementsByName(n.name)).filter(e=>e instanceof HTMLInputElement&&e.type===`radio`&&e.form===n.form&&!e.disabled),i=r.indexOf(n);if(i<0||r.length<2)return;e.preventDefault();let a=r[(i+t+r.length)%r.length];a?.focus(),a?.click()};return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":s,"aria-labelledby":c,className:e.cn(`relative inline-flex items-stretch gap-1 rounded-control-medium border-control border-border-subtle bg-bg-surface p-1`,u),children:[(0,n.jsx)(`span`,{"aria-hidden":`true`,"data-segmented-control-indicator":!0,className:e.cn(`pointer-events-none absolute top-1 bottom-1 left-0 rounded-control-small bg-bg-subtle transition-[transform,width] duration-200 ease-out motion-reduce:transition-none`,!h?.animate&&`transition-none`,!h&&`hidden`),style:{transform:`translateX(${h?.left??0}px)`,width:`${h?.width??0}px`}}),a.map(t=>{let a=t.value===r,o=l||t.disabled;return(0,n.jsxs)(`label`,{ref:v(t.value),className:e.cn(`relative flex flex-1 items-center justify-center`,o?`cursor-not-allowed`:`cursor-pointer`),children:[(0,n.jsx)(`input`,{type:`radio`,className:`peer sr-only`,name:f,value:t.value,checked:a,disabled:o,onChange:()=>i(t.value),onKeyDown:y}),(0,n.jsxs)(`span`,{className:e.cn(`relative z-10 flex h-full w-full min-w-0 items-center justify-center gap-slot-small rounded-control-small px-2 py-1.5 text-control-small font-control-field font-medium text-fg-muted outline-none transition-colors duration-control ease-control`,!o&&`hover:text-fg-default`,`peer-checked:font-semibold peer-checked:text-fg-default`,`peer-focus:ring-control peer-focus:ring-focus-primary peer-focus:ring-offset-2 peer-focus:ring-offset-bg-surface`,`peer-disabled:text-fg-disabled peer-disabled:hover:bg-transparent`),children:[t.icon?(0,n.jsx)(`span`,{"aria-hidden":`true`,"data-segmented-control-leading":!0,className:`flex h-slot-icon-small w-slot-icon-small shrink-0 items-center justify-center [&>*]:h-slot-icon-small [&>*]:w-slot-icon-small`,children:t.icon}):null,(0,n.jsx)(`span`,{"data-segmented-control-label":!0,className:`min-w-0 truncate`,children:t.label})]})]},t.value)})]})}exports.SegmentedControl=r;

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,27 @@
+import { SegmentedControlProps } from './types.js';
+/**
+ * 알약형 컨테이너 하나 안에 칸으로 나뉜 세그먼트 컨트롤.
+ *
+ * 2~3택 짧은 선택지가 여러 줄 쌓이는 설정 화면에 적합하다. 원형 indicator
+ * 없이 흰 바탕+테두리 컨테이너 안에서 칸이 폭을 균등 분배(2택=50%,
+ * 3택=33%)하며, 선택 표시는 각 칸의 배경이 아니라 컨테이너 안에서
+ * 미끄러지는 인디케이터 하나(`bg-bg-subtle`)가 담당한다.
+ *
+ * 네이티브 semantics(`role="radiogroup"` + sr-only `type="radio"` input)를
+ * 유지해 방향키 roving focus·Space 선택·스크린리더 announcement가 그대로
+ * 동작한다.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   aria-label="주기"
+ *   value={period}
+ *   onChange={setPeriod}
+ *   options={[
+ *     { value: "month", label: "월간" },
+ *     { value: "year", label: "연간" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function SegmentedControl<V extends string>({ value, onChange, options, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled, className, }: SegmentedControlProps<V>): import("react").JSX.Element;

package/dist/components/segmented-control/SegmentedControl.esm.js

@@ -0,0 +1,84 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useCallback as t, useId as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/segmented-control/SegmentedControl.tsx
+function c({ value: c, onChange: l, options: u, name: d, "aria-label": f, "aria-labelledby": p, disabled: m, className: h }) {
+	let g = n(), _ = d ?? g, v = i(/* @__PURE__ */ new Map()), y = i(null), [b, x] = a(null), S = t(() => {
+		let e = v.current.get(c);
+		if (!e) {
+			x(null);
+			return;
+		}
+		x((t) => ({
+			left: e.offsetLeft,
+			width: e.offsetWidth,
+			animate: t !== null
+		}));
+	}, [c]);
+	r(() => {
+		S();
+	}, [S]), r(() => {
+		if (typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(S);
+		return y.current = e, v.current.forEach((t) => e.observe(t)), () => {
+			e.disconnect(), y.current = null;
+		};
+	}, [S]);
+	let C = t((e) => (t) => {
+		let n = v.current.get(e);
+		n && y.current?.unobserve(n), t ? (v.current.set(e, t), y.current?.observe(t)) : v.current.delete(e);
+	}, []), w = (e) => {
+		let t = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+		if (t === 0) return;
+		let n = e.currentTarget, r = Array.from(n.ownerDocument.getElementsByName(n.name)).filter((e) => e instanceof HTMLInputElement && e.type === "radio" && e.form === n.form && !e.disabled), i = r.indexOf(n);
+		if (i < 0 || r.length < 2) return;
+		e.preventDefault();
+		let a = r[(i + t + r.length) % r.length];
+		a?.focus(), a?.click();
+	};
+	return /* @__PURE__ */ s("div", {
+		role: "radiogroup",
+		"aria-label": f,
+		"aria-labelledby": p,
+		className: e("relative inline-flex items-stretch gap-1 rounded-control-medium border-control border-border-subtle bg-bg-surface p-1", h),
+		children: [/* @__PURE__ */ o("span", {
+			"aria-hidden": "true",
+			"data-segmented-control-indicator": !0,
+			className: e("pointer-events-none absolute top-1 bottom-1 left-0 rounded-control-small bg-bg-subtle transition-[transform,width] duration-200 ease-out motion-reduce:transition-none", !b?.animate && "transition-none", !b && "hidden"),
+			style: {
+				transform: `translateX(${b?.left ?? 0}px)`,
+				width: `${b?.width ?? 0}px`
+			}
+		}), u.map((t) => {
+			let n = t.value === c, r = m || t.disabled;
+			return /* @__PURE__ */ s("label", {
+				ref: C(t.value),
+				className: e("relative flex flex-1 items-center justify-center", r ? "cursor-not-allowed" : "cursor-pointer"),
+				children: [/* @__PURE__ */ o("input", {
+					type: "radio",
+					className: "peer sr-only",
+					name: _,
+					value: t.value,
+					checked: n,
+					disabled: r,
+					onChange: () => l(t.value),
+					onKeyDown: w
+				}), /* @__PURE__ */ s("span", {
+					className: e("relative z-10 flex h-full w-full min-w-0 items-center justify-center gap-slot-small rounded-control-small px-2 py-1.5 text-control-small font-control-field font-medium text-fg-muted outline-none transition-colors duration-control ease-control", !r && "hover:text-fg-default", "peer-checked:font-semibold peer-checked:text-fg-default", "peer-focus:ring-control peer-focus:ring-focus-primary peer-focus:ring-offset-2 peer-focus:ring-offset-bg-surface", "peer-disabled:text-fg-disabled peer-disabled:hover:bg-transparent"),
+					children: [t.icon ? /* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						"data-segmented-control-leading": !0,
+						className: "flex h-slot-icon-small w-slot-icon-small shrink-0 items-center justify-center [&>*]:h-slot-icon-small [&>*]:w-slot-icon-small",
+						children: t.icon
+					}) : null, /* @__PURE__ */ o("span", {
+						"data-segmented-control-label": !0,
+						className: "min-w-0 truncate",
+						children: t.label
+					})]
+				})]
+			}, t.value);
+		})]
+	});
+}
+//#endregion
+export { c as SegmentedControl };

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl.js';
+export type { SegmentedControlOption, SegmentedControlProps } from './types.js';