@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/input/decimal-validation.esm.js

@@ -0,0 +1,66 @@
+//#region src/components/input/decimal-validation.ts
+function e(e) {
+	let t = e.startsWith("-"), [n = "", r = ""] = (t ? e.slice(1) : e).split(".");
+	return {
+		negative: t,
+		integer: n || "0",
+		fraction: r
+	};
+}
+function t(e) {
+	let [t = "", n] = e.toLowerCase().split("e");
+	if (n === void 0) return e;
+	let r = Number(n), i = t.startsWith("-"), [a = "", o = ""] = (i ? t.slice(1) : t).split("."), s = `${a}${o}`.replace(/^0+(?=\d)/, ""), c = a.length + r, l = c <= 0 ? `0.${"0".repeat(-c)}${s}` : c >= s.length ? `${s}${"0".repeat(c - s.length)}` : `${s.slice(0, c)}.${s.slice(c)}`;
+	return i ? `-${l}` : l;
+}
+function n(e) {
+	return 10n ** BigInt(e);
+}
+function r(t, r) {
+	let { negative: i, integer: a, fraction: o } = e(t), s = n(r), c = BigInt(o.slice(0, r).padEnd(r, "0") || "0"), l = BigInt(a) * s + c;
+	return i ? -l : l;
+}
+function i(r, i, a) {
+	if (r === void 0 || !Number.isFinite(r)) return;
+	let { negative: o, integer: s, fraction: c } = e(t(String(r))), l = n(i), u = BigInt(c.slice(0, i).padEnd(i, "0") || "0"), d = BigInt(s) * l + u, f = /[1-9]/.test(c.slice(i));
+	return o ? a === "max" && f ? -(d + 1n) : -d : a === "min" && f ? d + 1n : d;
+}
+function a(e, t, n) {
+	return (t === void 0 || e.max >= t) && (n === void 0 || e.min <= n);
+}
+function o(t, o, s, c) {
+	let { negative: l, integer: u, fraction: d } = e(t), f = t.includes(".") ? d : void 0, p = o - d.length, m = r(t, o), h = n(Math.max(0, p)) - 1n, g = l ? {
+		min: m - h,
+		max: m
+	} : {
+		min: m,
+		max: m + h
+	}, _ = i(s, o, "min"), v = i(c, o, "max");
+	if (a(g, _, v)) return !0;
+	if (f !== void 0 || u === "0") return !1;
+	if (!l && v === void 0 || l && _ === void 0) return !0;
+	let y = BigInt(u), b = n(o);
+	for (let e = 1; e < 309; e += 1) {
+		let t = n(e), r = y * t, i = (y + 1n) * t - 1n;
+		if (a(l ? {
+			min: -(i * b + (b - 1n)),
+			max: -(r * b)
+		} : {
+			min: r * b,
+			max: i * b + (b - 1n)
+		}, _, v)) return !0;
+		if (!l && v !== void 0 && r * b > v || l && _ !== void 0 && -(r * b) < _) return !1;
+	}
+	return !1;
+}
+function s(e, { decimalPlaces: t, allowNegative: n, min: a, max: s }) {
+	let c = n ? "-?" : "", l = Math.max(0, Math.floor(t)), u = l > 0 ? `(?:\\.\\d{0,${l}})?` : "", d = l > 0 ? `|\\.\\d{0,${l}}` : "", f = RegExp(`^${c}(?:(?:0|[1-9]\\d*)${u}${d})?$`);
+	if (e !== "" && e !== "-" && !f.test(e) || e === "-" && !n) return "reject";
+	if (e === "") return "empty";
+	if (e === "-") return "draft";
+	if (!Number.isFinite(Number(e)) || !o(e, l, a, s)) return "reject";
+	let p = r(e, l), m = i(a, l, "min"), h = i(s, l, "max"), g = (m === void 0 || p >= m) && (h === void 0 || p <= h);
+	return !e.endsWith(".") && g ? "value" : "draft";
+}
+//#endregion
+export { s as validateDecimalDraft };

package/dist/components/input/format.cjs

@@ -0,0 +1 @@
+function e(e){return e.replace(/\B(?=(\d{3})+(?!\d))/g,`,`)}function t(e){return e.replace(/,/g,``)}function n(e){let t=e.toString().replace(/[^\d]/g,``);return t.length<=3?t:t.length<=7?`${t.slice(0,3)}-${t.slice(3)}`:t.length<=10?`${t.slice(0,3)}-${t.slice(3,7)}-${t.slice(7)}`:`${t.slice(0,3)}-${t.slice(3,7)}-${t.slice(7,11)}`}function r(e){return e.toString().replace(/-/g,``)}function i(e){let t=e.toString().replace(/[^\d]/g,``).slice(0,10);return t.length<=2?t:t.length<=5?`${t.slice(0,2)}-${t.slice(2)}`:`${t.slice(0,2)}-${t.slice(2,5)}-${t.slice(5)}`}function a(e){return e.toString().replace(/[^\d]/g,``).slice(0,10)}function o(t){let n=t.toString().replace(/[^\d]/g,``);return n?e(n):``}function s(e){return t(e.toString())}var c={phoneNumber:{transform:n,reset:r},businessNumber:{transform:i,reset:a},price:{transform:o,reset:s}};exports.inputFormats=c;

package/dist/{src/components → components}/input/format.d.ts

@@ -1,4 +1,4 @@
-import { InputFormat, InputValue } from './types';
+import { InputFormat, InputValue } from './types.js';
 /**
  * 전화번호에 하이픈을 추가해요
  * @example "01012345678" → "010-1234-5678"
@@ -9,6 +9,16 @@ export declare function transformToPhoneNumber(value: InputValue): string;
  * @example "010-1234-5678" → "01012345678"
  */
 export declare function resetFromPhoneNumber(value: InputValue): string;
+/**
+ * 사업자등록번호에 하이픈을 추가해요
+ * @example "1234567890" → "12-345-67890"
+ */
+export declare function transformToBusinessNumber(value: InputValue): string;
+/**
+ * 사업자등록번호에서 하이픈을 제거해요
+ * @example "12-345-67890" → "1234567890"
+ */
+export declare function resetFromBusinessNumber(value: InputValue): string;
 /**
  * 금액에 콤마를 추가해요
  * @example "1000000" → "1,000,000"
@@ -29,6 +39,12 @@ export declare const inputFormats: {
      * reset: "010-1234-5678" → "01012345678"
      */
     readonly phoneNumber: InputFormat;
+    /**
+     * 사업자등록번호 포맷
+     * transform: "1234567890" → "12-345-67890"
+     * reset: "12-345-67890" → "1234567890"
+     */
+    readonly businessNumber: InputFormat;
     /**
      * 금액 포맷
      * transform: "1000000" → "1,000,000"

package/dist/components/input/format.esm.js

@@ -12,22 +12,33 @@ function n(e) {
 function r(e) {
 	return e.toString().replace(/-/g, "");
 }
-function i(t) {
+function i(e) {
+	let t = e.toString().replace(/[^\d]/g, "").slice(0, 10);
+	return t.length <= 2 ? t : t.length <= 5 ? `${t.slice(0, 2)}-${t.slice(2)}` : `${t.slice(0, 2)}-${t.slice(2, 5)}-${t.slice(5)}`;
+}
+function a(e) {
+	return e.toString().replace(/[^\d]/g, "").slice(0, 10);
+}
+function o(t) {
 	let n = t.toString().replace(/[^\d]/g, "");
 	return n ? e(n) : "";
 }
-function a(e) {
+function s(e) {
 	return t(e.toString());
 }
-var o = {
+var c = {
 	phoneNumber: {
 		transform: n,
 		reset: r
 	},
-	price: {
+	businessNumber: {
 		transform: i,
 		reset: a
+	},
+	price: {
+		transform: o,
+		reset: s
 	}
 };
 //#endregion
-export { o as inputFormats };
+export { c as inputFormats };

package/dist/components/input/index.d.ts

@@ -0,0 +1,7 @@
+export { Input } from './Input.js';
+export { PasswordInput } from './PasswordInput.js';
+export { DecimalInput } from './DecimalInput.js';
+export type { DecimalInputProps } from './DecimalInput.js';
+export { useInputFormat } from './use-input-format.js';
+export { inputFormats } from './format.js';
+export type { InputProps, InputVariant, InputSize, InputLabelOption, InputValue, InputFormat, FormatTransform, FormatReset, } from './types.js';

package/dist/{src/components → components}/input/types.d.ts

@@ -22,7 +22,7 @@ export type InputValue = string | number;
 /**
  * Format 함수 타입
  */
-export type FormatTransform = (value: InputValue) => InputValue;
+export type FormatTransform = (value: InputValue, inputType?: string) => InputValue;
 export type FormatReset = (formattedValue: InputValue) => InputValue;
 /**
  * Format 옵션
@@ -91,7 +91,7 @@ export interface InputCommonProps {
     trailingIcon?: ReactNode;
     /**
      * 값이 있을 때 우측에 X 버튼(CircleX)을 노출. 클릭 시 onChange로 빈 값을 emit.
-     * disabled에서는 노출하지 않는다. trailingIcon 다음, badge 앞에 위치.
+     * disabled 또는 readOnly에서는 노출하지 않는다. trailingIcon 다음, badge 앞에 위치.
      * @default false
      */
     clearable?: boolean;

package/dist/components/input/use-input-format.cjs

@@ -0,0 +1 @@
+let e=require("react");function t(e,t,n){let r=t.transform(e,n).toString();return{display:r,raw:t.reset?t.reset(r).toString():r}}function n(e,t,n){if(e===t)return Math.min(n,t.length);if(n>=e.length)return t.length;if(!/\d/.test(e)&&!/\d/.test(t))return Math.min(n,t.length);let r=(e.slice(0,n).match(/\d/g)??[]).length;if(r===0)return e.length===t.length?n:0;let i=0;for(let e=0;e<t.length;e++)if(/\d/.test(t[e])&&++i===r)return e+1;return t.length}function r(e,t){let n=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,`value`);n?.set&&n.set.bind(e)(t)}function i({value:i,defaultValue:a,format:o,onChange:s,readOnly:c=!1}){let[l,u]=(0,e.useState)(()=>{let e=i??a??``;return o?o.transform(e).toString():e.toString()}),[d,f]=(0,e.useState)(null),p=(0,e.useRef)(null),m=(0,e.useRef)(!1),h=(0,e.useRef)(!1),g=i!==void 0,_=g?i.toString():l;return{displayValue:o?d??o.transform(_).toString():_,handleChange:e=>{if(c)return;let i=e.target.value;if(o){let a=e.nativeEvent;if(m.current||a.isComposing){h.current=!0,f(i),g||u(i),s?.(e);return}let c=e.target,{selectionStart:l,selectionEnd:d,selectionDirection:p}=c,_=e.nativeEvent.inputType,{display:v,raw:y}=t(i,o,typeof _==`string`?_:void 0);g||u(v),r(c,y);try{s?.(e)}finally{c.value=i,l!==null&&d!==null&&c.setSelectionRange(l,d,p??void 0),v!==i&&(c.value=v,l!==null&&d!==null&&c.setSelectionRange(n(i,v,l),n(i,v,d),p??void 0))}}else g||u(i),s?.(e)},handleCompositionStart:e=>{o&&(m.current=!0,h.current=!1,f(e.currentTarget.value))},handleCompositionEnd:e=>{if(m.current=!1,f(null),!o||!h.current){h.current=!1;return}h.current=!1;let t=e.currentTarget,n=t.value,{selectionStart:i,selectionEnd:a,selectionDirection:s}=t;t.value=n===``?`0`:``,r(t,n),i!==null&&a!==null&&t.setSelectionRange(i,a,s??void 0),t.dispatchEvent(new InputEvent(`input`,{bubbles:!0,inputType:`insertCompositionText`}))},setMergedInputRef:(e,t)=>n=>{p.current=n,typeof e==`function`?e(n):e!==null&&Object.assign(e,{current:n}),typeof t==`function`?t(n):t!=null&&`current`in t&&Object.assign(t,{current:n})},handleClear:()=>{if(c)return;let e=p.current;e&&(r(e,``),e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.focus())}}}exports.useInputFormat=i;

package/dist/components/input/use-input-format.d.ts

@@ -0,0 +1,43 @@
+import { InputFormat, InputValue } from './types.js';
+/** 화면 값과 부모에게 전달할 원본 값을 계산한다. */
+export declare function applyInputFormat(value: InputValue, format: InputFormat, inputType?: string): {
+    display: string;
+    raw: string;
+};
+/**
+ * 포맷 변경 전 커서 앞의 숫자 개수를 포맷된 값에서도 유지한다.
+ * 커서 보존은 내장 price·phoneNumber·businessNumber처럼 숫자 기반 포맷을 전제로 한다.
+ * 다른 구분자나 문자의 위치까지 보존해야 하면 format 대신 제어 입력과 별도 커서 관리를 사용한다.
+ */
+export declare function getFormattedCursorPosition(typedValue: string, formattedValue: string, position: number): number;
+/**
+ * Input 포맷 훅.
+ * controlled/uncontrolled 양쪽을 지원하며 format 변환을 일관되게 처리한다.
+ *
+ * ## RHF (react-hook-form) 호환
+ * format 적용 시 `e.target.value`를 네이티브 setter로 변경한 뒤 원본 이벤트를 전달.
+ * 이렇게 하면 `e.target`이 실제 DOM 엘리먼트라 `name`·`type` 등 모든 속성이 보존된다.
+ * `{ ...e.target, value }` 스프레드는 prototype 속성을 복사하지 않으므로 사용하지 않는다.
+ * 원본 값은 onChange 호출 중 읽어야 하며, 호출 직후에는 표시 값으로 돌아간다.
+ * format 사용 중 IME 조합 단계에서는 포맷하지 않은 입력 원문을 onChange로 전달하고,
+ * 조합 확정 시 변환 및 reset을 적용한 원본 값을 onChange로 한 번 더 전달한다.
+ *
+ * @returns displayValue — 화면에 표시할 포맷팅된 값
+ * @returns handleChange — onChange 핸들러 (format 적용 후 부모 onChange 호출)
+ * @returns setMergedInputRef — forwardRef + RHF register ref + 내부 inputRef 병합
+ * @returns handleClear — clearable 버튼 클릭 핸들러 (native value setter 경유)
+ */
+export declare function useInputFormat({ value, defaultValue, format, onChange, readOnly, }: {
+    value?: InputValue;
+    defaultValue?: InputValue;
+    format?: InputFormat;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    readOnly?: boolean;
+}): {
+    displayValue: string;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCompositionStart: (e: React.CompositionEvent<HTMLInputElement>) => void;
+    handleCompositionEnd: (e: React.CompositionEvent<HTMLInputElement>) => void;
+    setMergedInputRef: (externalRef: React.ForwardedRef<HTMLInputElement>, rhfRef?: React.Ref<HTMLInputElement>) => (node: HTMLInputElement | null) => void;
+    handleClear: () => void;
+};

package/dist/components/input/use-input-format.esm.js

@@ -0,0 +1,75 @@
+import { useRef as e, useState as t } from "react";
+//#region src/components/input/use-input-format.ts
+function n(e, t, n) {
+	let r = t.transform(e, n).toString();
+	return {
+		display: r,
+		raw: t.reset ? t.reset(r).toString() : r
+	};
+}
+function r(e, t, n) {
+	if (e === t) return Math.min(n, t.length);
+	if (n >= e.length) return t.length;
+	if (!/\d/.test(e) && !/\d/.test(t)) return Math.min(n, t.length);
+	let r = (e.slice(0, n).match(/\d/g) ?? []).length;
+	if (r === 0) return e.length === t.length ? n : 0;
+	let i = 0;
+	for (let e = 0; e < t.length; e++) if (/\d/.test(t[e]) && ++i === r) return e + 1;
+	return t.length;
+}
+function i(e, t) {
+	let n = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+	n?.set && n.set.bind(e)(t);
+}
+function a({ value: a, defaultValue: o, format: s, onChange: c, readOnly: l = !1 }) {
+	let [u, d] = t(() => {
+		let e = a ?? o ?? "";
+		return s ? s.transform(e).toString() : e.toString();
+	}), [f, p] = t(null), m = e(null), h = e(!1), g = e(!1), _ = a !== void 0, v = _ ? a.toString() : u;
+	return {
+		displayValue: s ? f ?? s.transform(v).toString() : v,
+		handleChange: (e) => {
+			if (l) return;
+			let t = e.target.value;
+			if (s) {
+				let a = e.nativeEvent;
+				if (h.current || a.isComposing) {
+					g.current = !0, p(t), _ || d(t), c?.(e);
+					return;
+				}
+				let o = e.target, { selectionStart: l, selectionEnd: u, selectionDirection: f } = o, m = e.nativeEvent.inputType, { display: v, raw: y } = n(t, s, typeof m == "string" ? m : void 0);
+				_ || d(v), i(o, y);
+				try {
+					c?.(e);
+				} finally {
+					o.value = t, l !== null && u !== null && o.setSelectionRange(l, u, f ?? void 0), v !== t && (o.value = v, l !== null && u !== null && o.setSelectionRange(r(t, v, l), r(t, v, u), f ?? void 0));
+				}
+			} else _ || d(t), c?.(e);
+		},
+		handleCompositionStart: (e) => {
+			s && (h.current = !0, g.current = !1, p(e.currentTarget.value));
+		},
+		handleCompositionEnd: (e) => {
+			if (h.current = !1, p(null), !s || !g.current) {
+				g.current = !1;
+				return;
+			}
+			g.current = !1;
+			let t = e.currentTarget, n = t.value, { selectionStart: r, selectionEnd: a, selectionDirection: o } = t;
+			t.value = n === "" ? "0" : "", i(t, n), r !== null && a !== null && t.setSelectionRange(r, a, o ?? void 0), t.dispatchEvent(new InputEvent("input", {
+				bubbles: !0,
+				inputType: "insertCompositionText"
+			}));
+		},
+		setMergedInputRef: (e, t) => (n) => {
+			m.current = n, typeof e == "function" ? e(n) : e !== null && Object.assign(e, { current: n }), typeof t == "function" ? t(n) : t != null && "current" in t && Object.assign(t, { current: n });
+		},
+		handleClear: () => {
+			if (l) return;
+			let e = m.current;
+			e && (i(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+		}
+	};
+}
+//#endregion
+export { a as useInputFormat };

package/dist/components/input/utils.cjs

@@ -0,0 +1 @@
+const e=require("../_shared/form-size-tokens.cjs");var t={large:`h-control-large rounded-control-large border-control px-control-pad-large transition-colors focus-within:outline-hidden`,medium:`h-control-medium rounded-control-medium border-control px-control-pad-medium transition-colors focus-within:outline-hidden`,small:`h-control-small rounded-control-small border-control px-control-pad-small transition-colors focus-within:outline-hidden`,mini:`h-control-mini rounded-control-mini border-control px-control-pad-mini transition-colors focus-within:outline-hidden`},n=(e,n,r,i=`medium`)=>{if(e===`box`){let e=t[i];return r?[e,`bg-bg-disabled border-border-subtle`].join(` `):n?[e,`bg-bg-surface border-border-danger`].join(` `):[e,`bg-bg-surface border-border-subtle focus-within:border-border-primary`].join(` `)}return{box:``,line:`border-b-2 border-border-subtle px-0 py-2 focus:border-primary focus:ring-0`,big:`border-2 border-border-subtle rounded px-5 py-4 text-lg focus:border-primary focus:ring-control focus:ring-primary focus:ring-offset-0 h-[52px]`,hero:`border-2 border-border-subtle rounded px-6 py-5 text-xl font-semibold focus:border-primary focus:ring-control focus:ring-primary focus:ring-offset-0 h-[64px]`}[e]},r=(t,n,r,i,a=`medium`)=>{let o=`w-full bg-transparent ${e.CONTROL_TEXT_CLASS[a]} focus:outline-hidden disabled:cursor-not-allowed`;return t===`box`?r?[o,`text-fg-disabled placeholder:text-fg-disabled`].join(` `):n?[o,`text-fg-danger placeholder:text-fg-danger-placeholder`].join(` `):i?[o,`text-fg-default placeholder:text-fg-subtle`].join(` `):[o,`text-fg-subtle placeholder:text-fg-subtle`].join(` `):[`w-full bg-bg-surface text-sm text-fg-default placeholder:text-fg-subtle transition-all duration-200 ease-out focus:outline-hidden disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed disabled:border-border-subtle`].join(` `)},i=(e,t,n)=>t?`text-fg-disabled`:e?`text-fg-danger`:n?`text-fg-muted`:`text-fg-subtle`,a=()=>`w-full`,o=(e,t)=>[`block text-xs font-medium mb-2`,t?`text-fg-danger`:`text-fg-muted`].join(` `),s=e=>[`mt-2 text-sm`,e?`text-fg-danger`:`text-fg-muted`].join(` `);exports.getInputClasses=r,exports.getInputContainerClasses=a,exports.getInputHelpClasses=s,exports.getInputLabelClasses=o,exports.getInputTrailingIconColor=i,exports.getInputVariantClasses=n;

package/dist/{src/components → components}/input/utils.d.ts

@@ -1,4 +1,4 @@
-import { InputSize, InputVariant } from './types';
+import { InputSize, InputVariant } from './types.js';
 /**
  * Input Variant에 따른 컨테이너(input wrapper) 클래스 매핑.
  * box variant는 새 디자인 적용. line/big/hero는 레거시.

package/dist/components/input/utils.esm.js

@@ -1,23 +1,24 @@
+import { CONTROL_TEXT_CLASS as e } from "../_shared/form-size-tokens.esm.js";
 //#region src/components/input/utils.ts
-var e = {
-	large: "h-12 rounded-xl border px-5 transition-colors focus-within:outline-hidden",
-	medium: "h-11 rounded-xl border px-3.5 transition-colors focus-within:outline-hidden",
-	small: "h-9 rounded-lg border px-3 transition-colors focus-within:outline-hidden",
-	mini: "h-7 rounded-md border px-2 transition-colors focus-within:outline-hidden"
-}, t = (t, n, r, i = "medium") => {
-	if (t === "box") {
-		let t = e[i];
-		return r ? [t, "bg-bg-disabled border-border-tertiary dark:border-border-secondary"].join(" ") : n ? [t, "bg-bg-white border-border-danger"].join(" ") : [t, "bg-bg-white border-border-tertiary dark:border-border-secondary focus-within:border-border-primary"].join(" ");
+var t = {
+	large: "h-control-large rounded-control-large border-control px-control-pad-large transition-colors focus-within:outline-hidden",
+	medium: "h-control-medium rounded-control-medium border-control px-control-pad-medium transition-colors focus-within:outline-hidden",
+	small: "h-control-small rounded-control-small border-control px-control-pad-small transition-colors focus-within:outline-hidden",
+	mini: "h-control-mini rounded-control-mini border-control px-control-pad-mini transition-colors focus-within:outline-hidden"
+}, n = (e, n, r, i = "medium") => {
+	if (e === "box") {
+		let e = t[i];
+		return r ? [e, "bg-bg-disabled border-border-subtle"].join(" ") : n ? [e, "bg-bg-surface border-border-danger"].join(" ") : [e, "bg-bg-surface border-border-subtle focus-within:border-border-primary"].join(" ");
 	}
 	return {
 		box: "",
-		line: "border-b-2 border-neutral-300 dark:border-neutral-600 px-0 py-2 focus:border-primary-500 dark:focus:border-primary-400 focus:ring-0",
-		big: "border-2 border-neutral-300 dark:border-neutral-600 rounded px-5 py-4 text-lg focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[52px]",
-		hero: "border-2 border-neutral-300 dark:border-neutral-600 rounded px-6 py-5 text-xl font-semibold focus:border-primary-500 dark:focus:border-primary-400 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400 focus:ring-offset-0 h-[64px]"
-	}[t];
-}, n = (e, t, n, r, i = "medium") => {
-	let a = `w-full bg-transparent ${i === "mini" ? "text-xs" : i === "large" ? "text-base" : "text-sm"} focus:outline-hidden disabled:cursor-not-allowed`;
-	return e === "box" ? n ? [a, "text-text-disabled placeholder:text-text-disabled"].join(" ") : t ? [a, "text-text-danger placeholder:text-text-danger"].join(" ") : r ? [a, "text-text-primary placeholder:text-text-tertiary"].join(" ") : [a, "text-text-tertiary placeholder:text-text-tertiary"].join(" ") : ["w-full bg-white dark:bg-neutral-800 text-sm text-neutral-900 dark:text-white placeholder:text-neutral-400 transition-all duration-200 ease-out focus:outline-hidden disabled:bg-neutral-50 disabled:text-neutral-400 disabled:cursor-not-allowed disabled:border-neutral-200"].join(" ");
-}, r = (e, t, n) => t ? "text-icon-disabled" : e ? "text-icon-danger" : n ? "text-icon-secondary" : "text-icon-tertiary", i = () => "w-full", a = (e, t) => ["block text-xs font-medium mb-2", t ? "text-text-danger" : "text-text-secondary"].join(" "), o = (e) => ["mt-2 text-sm", e ? "text-text-danger" : "text-text-secondary"].join(" ");
+		line: "border-b-2 border-border-subtle px-0 py-2 focus:border-primary focus:ring-0",
+		big: "border-2 border-border-subtle rounded px-5 py-4 text-lg focus:border-primary focus:ring-control focus:ring-primary focus:ring-offset-0 h-[52px]",
+		hero: "border-2 border-border-subtle rounded px-6 py-5 text-xl font-semibold focus:border-primary focus:ring-control focus:ring-primary focus:ring-offset-0 h-[64px]"
+	}[e];
+}, r = (t, n, r, i, a = "medium") => {
+	let o = `w-full bg-transparent ${e[a]} focus:outline-hidden disabled:cursor-not-allowed`;
+	return t === "box" ? r ? [o, "text-fg-disabled placeholder:text-fg-disabled"].join(" ") : n ? [o, "text-fg-danger placeholder:text-fg-danger-placeholder"].join(" ") : i ? [o, "text-fg-default placeholder:text-fg-subtle"].join(" ") : [o, "text-fg-subtle placeholder:text-fg-subtle"].join(" ") : ["w-full bg-bg-surface text-sm text-fg-default placeholder:text-fg-subtle transition-all duration-200 ease-out focus:outline-hidden disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed disabled:border-border-subtle"].join(" ");
+}, i = (e, t, n) => t ? "text-fg-disabled" : e ? "text-fg-danger" : n ? "text-fg-muted" : "text-fg-subtle", a = () => "w-full", o = (e, t) => ["block text-xs font-medium mb-2", t ? "text-fg-danger" : "text-fg-muted"].join(" "), s = (e) => ["mt-2 text-sm", e ? "text-fg-danger" : "text-fg-muted"].join(" ");
 //#endregion
-export { n as getInputClasses, i as getInputContainerClasses, o as getInputHelpClasses, a as getInputLabelClasses, r as getInputTrailingIconColor, t as getInputVariantClasses };
+export { r as getInputClasses, a as getInputContainerClasses, s as getInputHelpClasses, o as getInputLabelClasses, i as getInputTrailingIconColor, n as getInputVariantClasses };

package/dist/components/loading-spinner/LoadingSpinner.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n={sm:`h-4 w-4`,md:`h-6 w-6`,lg:`h-8 w-8`};function r({size:r=`md`}){return(0,t.jsxs)(`svg`,{className:e.cn(`animate-spin text-primary-fg`,n[r]),xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,t.jsx)(`circle`,{className:`opacity-25`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,t.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]})}function i({message:n=`데이터를 불러오는 중이에요...`,size:i=`md`,className:a=``}){return(0,t.jsx)(`div`,{className:e.cn(`flex items-center justify-center h-full min-h-[200px]`,a),children:(0,t.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,t.jsx)(r,{size:i}),n&&(0,t.jsx)(`span`,{className:`text-sm text-fg-muted`,children:n})]})})}function a({size:e=`sm`}){return(0,t.jsx)(`div`,{className:`flex items-center justify-center py-3`,children:(0,t.jsx)(r,{size:e})})}exports.InlineSpinner=a,exports.LoadingSpinner=i,exports.Spinner=r;

package/dist/components/loading-spinner/LoadingSpinner.esm.js

@@ -1,47 +1,48 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/loading-spinner/LoadingSpinner.tsx
-var n = {
+var r = {
 	sm: "h-4 w-4",
 	md: "h-6 w-6",
 	lg: "h-8 w-8"
 };
-function r({ size: r = "md" }) {
-	return /* @__PURE__ */ t("svg", {
-		className: `animate-spin ${n[r]} text-primary-500 dark:text-primary-400`,
+function i({ size: i = "md" }) {
+	return /* @__PURE__ */ n("svg", {
+		className: e("animate-spin text-primary-fg", r[i]),
 		xmlns: "http://www.w3.org/2000/svg",
 		fill: "none",
 		viewBox: "0 0 24 24",
-		children: [/* @__PURE__ */ e("circle", {
+		children: [/* @__PURE__ */ t("circle", {
 			className: "opacity-25",
 			cx: "12",
 			cy: "12",
 			r: "10",
 			stroke: "currentColor",
 			strokeWidth: "4"
-		}), /* @__PURE__ */ e("path", {
+		}), /* @__PURE__ */ t("path", {
 			className: "opacity-75",
 			fill: "currentColor",
 			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 		})]
 	});
 }
-function i({ message: n = "데이터를 불러오는 중이에요...", size: i = "md", className: a = "" }) {
-	return /* @__PURE__ */ e("div", {
-		className: `flex items-center justify-center h-full min-h-[200px] ${a}`,
-		children: /* @__PURE__ */ t("div", {
+function a({ message: r = "데이터를 불러오는 중이에요...", size: a = "md", className: o = "" }) {
+	return /* @__PURE__ */ t("div", {
+		className: e("flex items-center justify-center h-full min-h-[200px]", o),
+		children: /* @__PURE__ */ n("div", {
 			className: "flex flex-col items-center gap-2",
-			children: [/* @__PURE__ */ e(r, { size: i }), n && /* @__PURE__ */ e("span", {
-				className: "text-sm text-neutral-500 dark:text-neutral-400",
-				children: n
+			children: [/* @__PURE__ */ t(i, { size: a }), r && /* @__PURE__ */ t("span", {
+				className: "text-sm text-fg-muted",
+				children: r
 			})]
 		})
 	});
 }
-function a({ size: t = "sm" }) {
-	return /* @__PURE__ */ e("div", {
+function o({ size: e = "sm" }) {
+	return /* @__PURE__ */ t("div", {
 		className: "flex items-center justify-center py-3",
-		children: /* @__PURE__ */ e(r, { size: t })
+		children: /* @__PURE__ */ t(i, { size: e })
 	});
 }
 //#endregion
-export { a as InlineSpinner, i as LoadingSpinner, r as Spinner };
+export { o as InlineSpinner, a as LoadingSpinner, i as Spinner };

package/dist/components/loading-spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { LoadingSpinner, InlineSpinner, Spinner } from './LoadingSpinner.js';
+export type { LoadingSpinnerProps } from './LoadingSpinner.js';

package/dist/components/modal/Modal.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../hooks/useMediaQuery.cjs"),n=require("../../hooks/useScrollLock.cjs"),r=require("../../hooks/useFocusTrap.cjs"),i=require("../../lib/overlay-stack.cjs"),a=require("../../lib/Portal.cjs"),o=require("./ModalFocusTrapContext.cjs");let s=require("react"),c=require("react/jsx-runtime"),l=require("motion/react");function u({isOpen:u,onClose:d,title:f,dismissible:p=!0,trapFocus:m=!0,onExitComplete:h,widthPx:g,footer:_,bodyPadded:v=!1,subView:y,className:b,children:x}){let S=t.useIsMobile(),C=(0,s.useId)(),w=(0,s.useId)(),T=(0,l.useDragControls)(),E=(0,l.useReducedMotion)(),[D,O]=(0,s.useState)(null),{context:k,isTop:A}=o.useModalSubViews(u,m,C);(0,s.useLayoutEffect)(()=>{D&&(D.inert=!u)},[D,u]);let j=(e,t)=>{p&&(t.offset.y>100||t.velocity.y>500)&&d()};(0,s.useEffect)(()=>{if(u)return i.overlayStack.push(C),()=>{i.overlayStack.pop(C)}},[u,C]),n.useScrollLock(u),r.useFocusTrap(D,{enabled:u,trapFocus:m,canTrap:A}),(0,s.useEffect)(()=>{let e=e=>{e.key!==`Escape`||!p||A()&&d()};return u&&window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[u,d,p,A]);let M=(0,c.jsxs)(a.Portal,{children:[(0,c.jsx)(l.AnimatePresence,{children:u&&(0,c.jsx)(l.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:E?0:.2},onClick:()=>{!p||!A()||d()},className:`fixed inset-0 z-overlay bg-bg-overlay`},`modal-backdrop`)}),(0,c.jsx)(l.AnimatePresence,{onExitComplete:h,children:u&&(0,c.jsxs)(l.motion.div,{ref:O,role:`dialog`,"aria-modal":`true`,"aria-labelledby":f?w:void 0,tabIndex:-1,initial:S?{y:`100%`}:{opacity:0,y:24,scale:.96},animate:S?{y:0}:{opacity:1,y:0,scale:1},exit:S?{y:`100%`,transition:{duration:E?0:.2,ease:[.4,0,1,1]}}:{opacity:0,y:24,scale:.96},transition:E?{duration:0}:S?{type:`spring`,damping:38,stiffness:320}:{duration:.25,ease:[.32,.72,0,1]},drag:S&&p?`y`:!1,dragListener:!1,dragControls:T,dragConstraints:{top:0,bottom:0},dragElastic:{top:0,bottom:.4},onDragEnd:j,className:e.cn(`fixed -bottom-8 left-0 right-0 z-overlay mx-auto flex max-h-[88vh] w-full flex-col overflow-hidden rounded-t-sheet bg-bg-surface text-fg-default pb-8 shadow-overlay outline-none sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-h-[90vh] sm:w-auto sm:min-w-[320px] sm:max-w-[90vw] sm:rounded-surface sm:pb-0`,b),style:S?void 0:{translateX:`-50%`,translateY:`-50%`,...g?{width:g}:{}},children:[(0,c.jsx)(`div`,{className:e.cn(`flex justify-center pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing sm:hidden`,!p&&`pointer-events-none opacity-0`),onPointerDown:e=>{p&&T.start(e)},children:(0,c.jsx)(`div`,{className:`h-1 w-10 rounded-full bg-bg-handle`})}),f&&(0,c.jsxs)(`div`,{className:`flex items-center justify-between px-4 py-3`,children:[(0,c.jsx)(`h3`,{id:w,className:`text-base font-semibold text-fg-default sm:text-lg`,children:f}),(0,c.jsx)(`button`,{type:`button`,onClick:d,disabled:!p,className:e.cn(`rounded-control-medium p-1 text-fg-muted hover:text-fg-default`,!p&&`pointer-events-none opacity-0`),"aria-label":`닫기`,children:(0,c.jsx)(`svg`,{className:`h-5 w-5`,fill:`none`,stroke:`currentColor`,viewBox:`0 0 24 24`,children:(0,c.jsx)(`path`,{strokeLinecap:`round`,strokeLinejoin:`round`,strokeWidth:2,d:`M6 18L18 6M6 6l12 12`})})})]}),(0,c.jsxs)(`div`,{className:`relative flex min-h-0 flex-1 flex-col overflow-hidden`,children:[(0,c.jsx)(`div`,{className:e.cn(`transform-[translateZ(0)] flex-1 overflow-y-auto overflow-x-hidden`,v&&`mx-1 sm:mx-4`),children:x}),y]}),_&&(0,c.jsx)(`div`,{className:`shrink-0`,children:_})]},`modal-sheet`)})]});return(0,c.jsx)(o.ModalFocusTrapContext.Provider,{value:k,children:M})}exports.Modal=u;

package/dist/{src/components → components}/modal/Modal.d.ts

@@ -2,6 +2,18 @@ export interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
+    /** false면 ESC, 백드롭, 닫기 버튼과 바텀시트 드래그로 닫히지 않는다. @default true */
+    dismissible?: boolean;
+    /**
+     * false면 Tab 가두기, 배경 포커스 복귀와 레이어·토스트 제거로 body에 유실된 포커스 복구를 끈다.
+     * 초기 포커스와 닫힐 때의 복원 규칙은 유지한다 —
+     * 닫는 시점에 포커스가 시트·부유 레이어 안이거나 body이면 열기 직전 요소로 복원하고,
+     * 소비자가 배경의 다른 요소로 옮겨 둔 포커스는 그대로 둔다.
+     * ModalSubView에도 같은 설정이 적용된다. @default true
+     */
+    trapFocus?: boolean;
+    /** 닫힘 모션이 끝난 뒤 호출한다. isOpen을 false로 바꾸지 않고 컴포넌트를 언마운트하면 호출되지 않는다. */
+    onExitComplete?: () => void;
     /**
      * 데스크탑(sm+) 모달의 고정 폭(px). 지정하지 않으면 콘텐츠 폭에 fit (`sm:w-auto`).
      *
@@ -37,6 +49,7 @@ export interface ModalProps {
 }
 /**
  * 데스크탑(`sm`+)에서는 중앙 정렬 모달, 모바일에서는 화면 하단에서 올라오는 bottom-sheet으로 동작.
+ * 열리면 첫 tabbable(제목과 활성 닫기 버튼이 있으면 닫기 버튼)에 포커스하며, 다른 필드는 `autoFocus`를 준다.
  *
  * - 모바일: 시트가 화면 하단에 붙고 상단 모서리만 둥글다. 핸들 바 표시.
  *   진입/퇴장 모션은 화면 밖에서 슬라이드 (`y: "100%" → 0 → "100%"`).
@@ -51,7 +64,20 @@ export interface ModalProps {
  * 등으로 변할 수 있으면 `widthPx`로 고정해 시트가 흔들리지 않게 할 것.
  *
  * **레이어드 오버레이**: ESC/백드롭은 `overlayStack`에서 자신이 top일 때만 반응한다.
- * ActionToast나 ModalSubView가 위에 떠 있으면(더 높은 priority/나중 push) 자동으로 양보된다.
+ * ActionToast나 열린 ModalSubView가 위에 떠 있으면 자동으로 양보된다.
  * 모달 위에 또 모달을 쌓는 대신 ModalSubView(푸시 네비)나 ActionToast(재확인)로 푸는 것을 권장.
+ *
+ * **포커스 트랩**: `aria-controls`로 연결된 Floating UI 포털 또는 `data-focus-trap-layer`가
+ * 붙은 포털만 부유 레이어로 인정한다. 연결을 알 수 없는 포털의 Tab은 모달로 돌아오므로
+ * 해당 포털에 표식을 붙이거나 `trapFocus={false}`를 사용한다. 표식은 문서 전체에서 찾으므로
+ * 현재 트랩에 편입할 포털에만 붙인다. `role="dialog"` + `aria-modal="true"`인 포털(서드파티
+ * 다이얼로그 등)은 표식이 있어도 편입하지 않으므로 `trapFocus={false}`를 사용한다.
+ * 가드 없는 부유 레이어(Popover·표식 포털)는 트리거 바로 뒤가 아니라 모달의
+ * 모든 tabbable 뒤에 붙는다. 포털 DOM 위치와 무관하게 순환을 일정하게 하기 위해 트리거에서
+ * Tab을 누르면 다음 필드로 가고, 패널은 한 바퀴의 마지막에 지난다. 열자마자 패널을 조작하려면
+ * 패널 안으로 바로 포커스를 옮기는 컴포넌트나 Select·DatePicker처럼 floating-ui 포커스 관리가 있는 패널을 쓴다.
+ * 액션 토스트가 top이면 트랩은 양보하며, 그동안에는 Tab이 모달 밖으로 나갈 수 있다
+ * (`backdrop: false` 알림성 토스트 포함). Tab으로 모달 밖에 떨어진 포커스는 고리로 되돌리고,
+ * 마우스로 옮긴 포커스는 건드리지 않는다.
  */
-export declare function Modal({ isOpen, onClose, title, widthPx, footer, bodyPadded, subView, className, children, }: ModalProps): import("react").JSX.Element;
+export declare function Modal({ isOpen, onClose, title, dismissible, trapFocus, onExitComplete, widthPx, footer, bodyPadded, subView, className, children, }: ModalProps): import("react").JSX.Element;