@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/input/Input.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/circle-x.cjs"),n=require("../_shared/form-size-tokens.cjs"),r=require("./use-input-format.cjs"),i=require("./utils.cjs");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.forwardRef)(({variant:s,inputSize:c=`medium`,label:l,labelOption:u=`appear`,help:d,hasError:f=!1,disabled:p=!1,prefix:m,suffix:h,trailingIcon:g,clearable:_=!1,badge:v,placeholder:y,format:b,containerProps:x,containerRef:S,value:C,defaultValue:w,onChange:T,onFocus:E,onBlur:D,className:O=``,...k},A)=>{let[j,M]=(0,a.useState)(!1),{displayValue:N,handleChange:P,handleCompositionStart:F,handleCompositionEnd:I,setMergedInputRef:L,handleClear:R}=r.useInputFormat({value:C,defaultValue:w,format:b,onChange:T,readOnly:k.readOnly}),z=e=>{M(!0),E?.(e)},B=e=>{M(!1),D?.(e)},V=k.ref,H=N.length>0,U=i.getInputContainerClasses(),W=i.getInputVariantClasses(s,f,p,c),G=i.getInputClasses(s,f,p,H,c),K=i.getInputTrailingIconColor(f,p,H||j),q=u===`sustain`||u===`appear`&&!!N,J=s===`box`,Y=n.SLOT_GAP_CLASS[c],X=n.SLOT_CHILD_ICON_CLASS[c],Z=n.SLOT_BADGE_TEXT_CLASS[c],Q=n.SLOT_ICON_SIZE_CLASS[c],$=(0,o.jsxs)(`div`,{className:J?e.cn(W,`flex items-center`,Y,O):`relative flex items-center text-sm`,children:[m&&(0,o.jsx)(`span`,{className:e.cn(`whitespace-nowrap text-sm`,K),children:m}),(0,o.jsx)(`input`,{...k,ref:L(A,V),className:J?G:e.cn(G,W,f&&`border-border-danger focus:border-border-danger focus:ring-focus-danger`,p&&`opacity-50`,O),value:N,onChange:P,onCompositionStart:e=>{F(e),k.onCompositionStart?.(e)},onCompositionEnd:e=>{I(e),k.onCompositionEnd?.(e)},onFocus:z,onBlur:B,disabled:p,placeholder:y}),h&&(0,o.jsx)(`span`,{className:e.cn(`whitespace-nowrap text-sm`,K),children:h}),g&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,K,X),children:g}),_&&!p&&!k.readOnly&&H&&(0,o.jsx)(`button`,{type:`button`,onClick:R,"aria-label":`입력 지우기`,className:e.cn(`flex shrink-0 cursor-pointer items-center rounded`,K,`hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring`),children:(0,o.jsx)(t.CircleX,{className:Q,strokeWidth:1.5,"aria-hidden":`true`})}),v&&(0,o.jsx)(`span`,{className:e.cn(`flex shrink-0 items-center`,X,Z),children:v})]});return(0,o.jsxs)(`div`,{ref:S,className:U,...x,children:[q&&l&&(0,o.jsx)(`label`,{className:i.getInputLabelClasses(s,f),htmlFor:k.id,children:l}),$,d&&(0,o.jsx)(`div`,{className:i.getInputHelpClasses(f),children:d})]})});s.displayName=`Input`,exports.Input=s;

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

@@ -1,4 +1,4 @@
-import { InputProps } from './types';
+import { InputProps } from './types.js';
 /**
  * Input 컴포넌트
  *

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

@@ -0,0 +1,89 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { CircleX as t } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
+import { SLOT_BADGE_TEXT_CLASS as ee, SLOT_CHILD_ICON_CLASS as n, SLOT_GAP_CLASS as r, SLOT_ICON_SIZE_CLASS as te } from "../_shared/form-size-tokens.esm.js";
+import { useInputFormat as i } from "./use-input-format.esm.js";
+import { getInputClasses as a, getInputContainerClasses as o, getInputHelpClasses as s, getInputLabelClasses as c, getInputTrailingIconColor as ne, getInputVariantClasses as re } from "./utils.esm.js";
+import { forwardRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/input/Input.tsx
+var p = l(({ variant: l, inputSize: p = "medium", label: m, labelOption: h = "appear", help: g, hasError: _ = !1, disabled: v = !1, prefix: y, suffix: b, trailingIcon: x, clearable: S = !1, badge: C, placeholder: w, format: T, containerProps: E, containerRef: D, value: O, defaultValue: k, onChange: A, onFocus: j, onBlur: M, className: N = "", ...P }, F) => {
+	let [I, L] = u(!1), { displayValue: R, handleChange: z, handleCompositionStart: B, handleCompositionEnd: V, setMergedInputRef: H, handleClear: U } = i({
+		value: O,
+		defaultValue: k,
+		format: T,
+		onChange: A,
+		readOnly: P.readOnly
+	}), W = (e) => {
+		L(!0), j?.(e);
+	}, G = (e) => {
+		L(!1), M?.(e);
+	}, K = P.ref, q = R.length > 0, J = o(), Y = re(l, _, v, p), X = a(l, _, v, q, p), Z = ne(_, v, q || I), ie = h === "sustain" || h === "appear" && !!R, Q = l === "box", ae = r[p], $ = n[p], oe = ee[p], se = te[p], ce = /* @__PURE__ */ f("div", {
+		className: Q ? e(Y, "flex items-center", ae, N) : "relative flex items-center text-sm",
+		children: [
+			y && /* @__PURE__ */ d("span", {
+				className: e("whitespace-nowrap text-sm", Z),
+				children: y
+			}),
+			/* @__PURE__ */ d("input", {
+				...P,
+				ref: H(F, K),
+				className: Q ? X : e(X, Y, _ && "border-border-danger focus:border-border-danger focus:ring-focus-danger", v && "opacity-50", N),
+				value: R,
+				onChange: z,
+				onCompositionStart: (e) => {
+					B(e), P.onCompositionStart?.(e);
+				},
+				onCompositionEnd: (e) => {
+					V(e), P.onCompositionEnd?.(e);
+				},
+				onFocus: W,
+				onBlur: G,
+				disabled: v,
+				placeholder: w
+			}),
+			b && /* @__PURE__ */ d("span", {
+				className: e("whitespace-nowrap text-sm", Z),
+				children: b
+			}),
+			x && /* @__PURE__ */ d("span", {
+				className: e("flex shrink-0 items-center", Z, $),
+				children: x
+			}),
+			S && !v && !P.readOnly && q && /* @__PURE__ */ d("button", {
+				type: "button",
+				onClick: U,
+				"aria-label": "입력 지우기",
+				className: e("flex shrink-0 cursor-pointer items-center rounded", Z, "hover:text-fg-default focus:outline-hidden focus-visible:ring-input-clear focus-visible:ring-input-clear-ring"),
+				children: /* @__PURE__ */ d(t, {
+					className: se,
+					strokeWidth: 1.5,
+					"aria-hidden": "true"
+				})
+			}),
+			C && /* @__PURE__ */ d("span", {
+				className: e("flex shrink-0 items-center", $, oe),
+				children: C
+			})
+		]
+	});
+	return /* @__PURE__ */ f("div", {
+		ref: D,
+		className: J,
+		...E,
+		children: [
+			ie && m && /* @__PURE__ */ d("label", {
+				className: c(l, _),
+				htmlFor: P.id,
+				children: m
+			}),
+			ce,
+			g && /* @__PURE__ */ d("div", {
+				className: s(_),
+				children: g
+			})
+		]
+	});
+});
+p.displayName = "Input";
+//#endregion
+export { p as Input };

package/dist/components/input/PasswordInput.cjs

@@ -0,0 +1 @@
+const e=require("../../node_modules/lucide-react/dist/esm/icons/eye-off.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/eye.cjs"),n=require("./Input.cjs");let r=require("react"),i=require("react/jsx-runtime");var a=(0,r.forwardRef)(({disabled:a,...o},s)=>{let[c,l]=(0,r.useState)(!1);return(0,i.jsx)(n.Input,{...o,ref:s,disabled:a,type:c?`text`:`password`,trailingIcon:(0,i.jsx)(`button`,{type:`button`,onClick:()=>l(e=>!e),disabled:a,"aria-label":c?`비밀번호 숨기기`:`비밀번호 표시`,className:`flex items-center justify-center text-fg-subtle transition-colors hover:text-fg-default disabled:cursor-not-allowed disabled:opacity-50`,children:c?(0,i.jsx)(e.EyeOff,{className:`h-4 w-4`,strokeWidth:1.5}):(0,i.jsx)(t.Eye,{className:`h-4 w-4`,strokeWidth:1.5})})})});a.displayName=`PasswordInput`,exports.PasswordInput=a;

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

@@ -1,4 +1,4 @@
-import { InputProps } from './types';
+import { InputProps } from './types.js';
 type PasswordInputProps = Omit<InputProps, "type" | "trailingIcon">;
 /**
  * 비밀번호 입력 — 마스킹 토글(눈 아이콘) 내장.

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

@@ -0,0 +1,29 @@
+import { EyeOff as e } from "../../node_modules/lucide-react/dist/esm/icons/eye-off.esm.js";
+import { Eye as t } from "../../node_modules/lucide-react/dist/esm/icons/eye.esm.js";
+import { Input as n } from "./Input.esm.js";
+import { forwardRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/input/PasswordInput.tsx
+var o = r(({ disabled: r, ...o }, s) => {
+	let [c, l] = i(!1);
+	return /* @__PURE__ */ a(n, {
+		...o,
+		ref: s,
+		disabled: r,
+		type: c ? "text" : "password",
+		trailingIcon: /* @__PURE__ */ a("button", {
+			type: "button",
+			onClick: () => l((e) => !e),
+			disabled: r,
+			"aria-label": c ? "비밀번호 숨기기" : "비밀번호 표시",
+			className: "flex items-center justify-center text-fg-subtle transition-colors hover:text-fg-default disabled:cursor-not-allowed disabled:opacity-50",
+			children: a(c ? e : t, {
+				className: "h-4 w-4",
+				strokeWidth: 1.5
+			})
+		})
+	});
+});
+o.displayName = "PasswordInput";
+//#endregion
+export { o as PasswordInput };

package/dist/components/input/decimal-validation.cjs

@@ -0,0 +1 @@
+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`}exports.validateDecimalDraft=s;

package/dist/components/input/decimal-validation.d.ts

@@ -0,0 +1,7 @@
+/** 입력 가능한 초안과 부모에 전달 가능한 숫자를 구분한다. */
+export declare function validateDecimalDraft(next: string, { decimalPlaces, allowNegative, min, max, }: {
+    decimalPlaces: number;
+    allowNegative: boolean;
+    min?: number;
+    max?: number;
+}): "reject" | "draft" | "empty" | "value";

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

@@ -0,0 +1,44 @@
+//#region src/components/input/format.ts
+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
+	}
+};
+//#endregion
+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

@@ -0,0 +1,24 @@
+import { CONTROL_TEXT_CLASS as e } from "../_shared/form-size-tokens.esm.js";
+//#region src/components/input/utils.ts
+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[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 { 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/{src/components → components}/loading-spinner/LoadingSpinner.d.ts

@@ -8,6 +8,13 @@ export declare function Spinner({ size }: {
 }): import("react").JSX.Element;
 /**
  * 영역 중앙에 스피너 + 메시지를 표시하는 로딩 표시. 데이터 페칭 중 컨테이너에 채워 쓴다.
+ * 텍스트 줄 안에 인라인으로 넣을 작은 스피너는 `InlineSpinner`, 스피너 단독은 `Spinner`.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <LoadingSpinner /> : <Table ... />}
+ * <LoadingSpinner message="정산 내역을 불러오는 중이에요..." size="lg" />
+ * ```
  */
 export declare function LoadingSpinner({ message, size, className, }: LoadingSpinnerProps): import("react").JSX.Element;
 /** 인라인(작은) 스피너 — 리스트 하단 더보기 로딩 등. */

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

@@ -0,0 +1,48 @@
+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 r = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-8 w-8"
+};
+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__ */ t("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__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 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__ */ t(i, { size: a }), r && /* @__PURE__ */ t("span", {
+				className: "text-sm text-fg-muted",
+				children: r
+			})]
+		})
+	});
+}
+function o({ size: e = "sm" }) {
+	return /* @__PURE__ */ t("div", {
+		className: "flex items-center justify-center py-3",
+		children: /* @__PURE__ */ t(i, { size: e })
+	});
+}
+//#endregion
+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;