@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/error-boundary/chunk-reload.d.ts

@@ -0,0 +1,77 @@
+/** 저장·보고·새로고침을 소비자가 제공하는 청크 복구 포트. */
+export interface ChunkReloadPort {
+    get(): number | null;
+    set(reloadedAt: number): void;
+    remove(): void;
+    report(error: Error, trigger: "navigation" | "preload"): void;
+    /** 새로고침 전 필요한 대기를 마친 뒤 reload한다. */
+    reload(): Promise<void>;
+}
+export declare const CHUNK_RELOAD_TTL_MS = 30000;
+/** 브라우저와 번들러마다 다른 dynamic import 실패 형태를 판별한다. */
+export declare function isChunkLoadError(error: unknown): boolean;
+interface ReloadOnceOptions {
+    now?: () => number;
+    ttlMs?: number;
+}
+/**
+ * TTL 가드를 판정하고 통과하면 가드 상태를 영속한다. 이 함수는 보고나 reload를
+ * 실행하지 않는다. `reloadOnceForChunkError`는 가드 통과 뒤 reload까지 잇는 래퍼다.
+ */
+export declare function tryAcquireChunkReloadGuard(port: ChunkReloadPort, options?: ReloadOnceOptions): boolean;
+/**
+ * 청크 실패를 한 번만 자동 새로고침한다.
+ *
+ * hard reload 뒤에도 가드가 남는다는 것을 쓰기 후 재조회로 확인한 경우에만
+ * reload한다. 스토리지가 차단되거나 가득 찬 환경에서는 자동 복구를 포기하고
+ * 앱 fallback에 머문다. 메모리 가드는 영속에 성공한 같은 페이지 생명주기의
+ * 중복 호출만 보조한다. TTL 뒤에는 다음 배포의 복구를 허용한다.
+ *
+ * `port.reload()`를 즉시 호출한다. 가드 통과 여부만 알고 reload는 직접 제어하려는
+ * 호출자는 `tryAcquireChunkReloadGuard`를 쓴다.
+ */
+export declare function reloadOnceForChunkError(port: ChunkReloadPort, options?: ReloadOnceOptions): boolean;
+/** 사용자가 명시적으로 reload를 선택했을 때 다음 복구 사이클을 연다. */
+export declare function clearChunkReloadGuard(port: ChunkReloadPort): void;
+export declare function reloadAfterClearingChunkGuard(port: ChunkReloadPort): void;
+/**
+ * Vite의 `vite:preloadError` payload를 보고한 뒤, 허용된 경우 1회 reload한다.
+ * 기본 보고는 동기이며, import catch의 식별이 필요하면 기존 다음 task에서 보고한다.
+ * `preventDefault()`를 호출하지 않아 Vite가 원래 실패를 다시 throw하게 둔다.
+ *
+ * 동적 import 실패에서 `preventDefault()`로 Vite의 throw를 막으면 import promise가
+ * `undefined`로 완료된다. TanStack `lazyRouteComponent`가 그 값을 `res[exportName]`에서
+ * 읽다가 원래 오류 대신 TypeError를 만들기 때문에, 원래 오류가 그대로 전파되도록 둔다.
+ *
+ * TanStack `lazyRouteComponent`는 세션의 `tanstack_router_reload:<message>` 표식이 없는
+ * 첫 인식 실패를 컴포넌트 렌더 중 reload한다. 이때 pending promise를 던져 route boundary를
+ * 건너뛸 수 있다. 실패한 import를 캐시해 후속 클릭에서 다시 import하거나 Vite 이벤트를
+ * 내지 않고, 캐시된 실패를 렌더에서 처리한다: 표식이 없으면 TanStack이 자체 reload하고,
+ * 표식이 있으면 같은 Error를 던진다. 앱의 `reportError`는 같은 Error 객체를 중복 제거한다.
+ *
+ * Vite 이벤트는 TanStack의 동작보다 먼저 발생한다. `shouldReload`는 이벤트 시점에
+ * 한 번 평가해 네비게이션 상태와 보고용 trigger를 보존한다. 결과가 false인 intent
+ * preload 실패도 보고하되 TTL 가드를 소모하거나 자체 reload를 예약하지 않는다.
+ * 다음 task에서 평가하는 `shouldIgnoreAfterImport`와 평가 시점이 다르다.
+ *
+ * 이동 보존: 네비게이션 발 이벤트 시점에는 주소창이 이미 목표 URL이다.
+ * 같은 URL을 reload하면 목표 화면에 착지하므로 별도 경로 저장은 필요 없다.
+ * 실측: Vite 8.1.3 + @tanstack/react-router 1.170.17의 코드 분할 라우트 이동.
+ *
+ * 무한 루프 가드: TTL 30초(`CHUNK_RELOAD_TTL_MS`) 안에서는 reload를 다시 예약하지 않는다.
+ * 가드에 걸리면 원래 오류가 전파되고, 경계가 수동 새로고침 화면을 보여준다.
+ *
+ * @param port 앱이 조립한 스토리지·보고·reload 경계. 다른 청크 복구 층과 같은 포트를 써야
+ *   TTL 가드가 공유된다.
+ * @param target 리스너를 붙일 대상. 기본값은 `window`이며 테스트에서 교체한다.
+ * @param shouldReload 네비게이션 발 이벤트에 reload를 허용할지 판별한다. 원본 이벤트도
+ *   전달하므로 선택 기능 청크를 구분해 제외할 수 있다. 기본값은 true.
+ * @param shouldIgnoreAfterImport 선택 기능 import의 catch가 오류 객체를 식별할 시간을
+ *   주도록 다음 task에서 평가하는 reload 제외 조건. 보고는 이 판정과 무관하게 먼저 한다.
+ *   제외된 오류는 TTL 가드를 소모하지 않는다.
+ * @param shouldReport 보고 허용 조건. 함수를 반환하면 import catch 뒤 기존 다음 task에서
+ *   평가한다. 이 경우에도 이벤트 시점 trigger를 쓰고 reload 전에 보고한다.
+ * @returns 리스너를 해제하는 함수.
+ */
+export declare function listenForChunkPreloadError(port: ChunkReloadPort, target?: Pick<Window, "addEventListener" | "removeEventListener">, shouldReload?: (event: Event) => boolean, shouldIgnoreAfterImport?: (event: Event) => boolean, shouldReport?: (event: Event) => boolean | (() => boolean)): () => void;
+export {};

package/dist/components/error-boundary/chunk-reload.esm.js

@@ -0,0 +1,73 @@
+//#region src/components/error-boundary/chunk-reload.ts
+var e = 3e4, t = null;
+function n(e, t) {
+	if (typeof e != "object" || !e || !(t in e)) return;
+	let n = e[t];
+	return typeof n == "string" ? n : void 0;
+}
+function r(e) {
+	if (n(e, "name") === "ChunkLoadError") return !0;
+	let t = n(e, "message");
+	return t ? /Loading chunk [\w-]+ failed/i.test(t) || /Failed to fetch dynamically imported module/i.test(t) || /error loading dynamically imported module/i.test(t) || /Importing a module script failed/i.test(t) || /Unable to preload CSS for/i.test(t) : !1;
+}
+function i(e, t, n) {
+	return e === null || !Number.isFinite(e) ? !1 : t - e < n;
+}
+function a(e, n = {}) {
+	let r = (n.now ?? Date.now)(), a = n.ttlMs ?? 3e4, o;
+	try {
+		o = e.get();
+	} catch {
+		return !1;
+	}
+	if (i(o, r, a) || i(t, r, a)) return !1;
+	try {
+		if (e.set(r), e.get() !== r) return !1;
+	} catch {
+		return !1;
+	}
+	return t = r, !0;
+}
+function o(e, t = {}) {
+	let n = a(e, t);
+	return n && e.reload(), n;
+}
+function s(e) {
+	t = null;
+	try {
+		e.remove();
+	} catch {}
+}
+function c(e) {
+	s(e), e.reload();
+}
+function l(e, t = window, r = () => !0, i, o) {
+	let s = /* @__PURE__ */ new Set(), c = (t) => {
+		let c = t.payload, l = c instanceof Error ? c : Error(typeof c == "string" ? c : n(c, "message") ?? "Vite preload failed"), u = r(t), d = !0;
+		try {
+			d = o?.(t) ?? !0;
+		} catch {}
+		let f = () => {
+			try {
+				(typeof d == "function" ? d() : d) && e.report(l, u ? "navigation" : "preload");
+			} catch {}
+		}, p = typeof d == "function";
+		if (p || f(), !u && !p) return;
+		let m = () => {
+			a(e) && e.reload();
+		};
+		if (i || p) {
+			let e = setTimeout(() => {
+				s.delete(e), p && f(), u && !i?.(t) && m();
+			}, 0);
+			s.add(e);
+		} else m();
+	};
+	return t.addEventListener("vite:preloadError", c), () => {
+		t.removeEventListener("vite:preloadError", c);
+		for (let e of s) clearTimeout(e);
+		s.clear();
+	};
+}
+//#endregion
+export { e as CHUNK_RELOAD_TTL_MS, s as clearChunkReloadGuard, r as isChunkLoadError, l as listenForChunkPreloadError, c as reloadAfterClearingChunkGuard, o as reloadOnceForChunkError, a as tryAcquireChunkReloadGuard };

package/dist/components/error-boundary/index.d.ts

@@ -0,0 +1,4 @@
+export { ErrorBoundary } from './ErrorBoundary.js';
+export type { ErrorBoundaryProps, ErrorBoundaryFallbackProps } from './types.js';
+export { CHUNK_RELOAD_TTL_MS, isChunkLoadError, tryAcquireChunkReloadGuard, reloadOnceForChunkError, clearChunkReloadGuard, reloadAfterClearingChunkGuard, listenForChunkPreloadError, } from './chunk-reload.js';
+export type { ChunkReloadPort } from './chunk-reload.js';

package/dist/components/error-boundary/types.d.ts

@@ -0,0 +1,23 @@
+import { ErrorInfo, ReactNode } from 'react';
+import { ChunkReloadPort } from './chunk-reload.js';
+export interface ErrorBoundaryFallbackProps {
+    error: Error;
+    isChunkError: boolean;
+    reset: () => void;
+    reload: () => void;
+}
+export interface ErrorBoundaryProps {
+    children: ReactNode;
+    /** 영속 가드와 보고·새로고침 구현. 없으면 청크 자동 새로고침을 시도하지 않는다. */
+    chunkReloadPort?: ChunkReloadPort;
+    /** 기본 안내 대신 표시할 폴백. reset과 reload를 직접 연결할 수 있다. */
+    fallbackRender?: (props: ErrorBoundaryFallbackProps) => ReactNode;
+    /** 기본 폴백의 안내 문구. */
+    message?: string;
+    /** 일반 오류에서 다시 렌더할 버튼의 문구. */
+    retryLabel?: string;
+    /** 청크 오류에서 페이지를 새로고침할 버튼의 문구. */
+    reloadLabel?: string;
+    /** 청크 오류를 포함한 렌더 오류마다 호출된다. */
+    onError?: (error: Error, errorInfo: ErrorInfo, isChunkError: boolean) => void;
+}

package/dist/components/field/Field.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({label:n,htmlFor:r,rightLabel:i,className:a,required:o,optional:s,children:c}){let l=i!=null&&typeof i!=`string`;return(0,t.jsxs)(`div`,{className:e.cn(`space-y-1.5`,a),children:[(0,t.jsxs)(`div`,{className:e.cn(`flex items-center justify-between`,!l&&`h-4`),children:[(0,t.jsxs)(`label`,{htmlFor:r,className:`block text-xs leading-4 font-medium text-fg-muted`,children:[n,o&&(0,t.jsx)(`span`,{"aria-hidden":`true`,className:`ml-1 text-fg-danger`,children:`*`}),!o&&s&&(0,t.jsx)(`span`,{className:`ml-1 text-fg-subtle`,children:`(선택)`})]}),typeof i==`string`?(0,t.jsx)(`span`,{style:{lineHeight:`16px`},className:`text-[11px] text-fg-subtle`,children:i}):i]}),c]})}exports.Field=n;

package/dist/components/field/Field.d.ts

@@ -0,0 +1,16 @@
+import { FieldProps } from './types.js';
+/**
+ * 라벨 + 우측 보조 텍스트 + 컨트롤을 묶는 폼 필드 래퍼.
+ * 모달 폼 및 일반 폼에서 공통 사용.
+ *
+ * @example
+ * <Field label="이름" required>
+ *   <Input variant="box" placeholder="이름을 입력하세요" />
+ * </Field>
+ *
+ * @example
+ * <Field label="금액" rightLabel="최대 100만원">
+ *   <Input variant="box" suffix="원" />
+ * </Field>
+ */
+export declare function Field({ label, htmlFor, rightLabel, className, required, optional, children, }: FieldProps): import("react").JSX.Element;

package/dist/components/field/Field.esm.js

@@ -0,0 +1,34 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/field/Field.tsx
+function r({ label: r, htmlFor: i, rightLabel: a, className: o, required: s, optional: c, children: l }) {
+	let u = a != null && typeof a != "string";
+	return /* @__PURE__ */ n("div", {
+		className: e("space-y-1.5", o),
+		children: [/* @__PURE__ */ n("div", {
+			className: e("flex items-center justify-between", !u && "h-4"),
+			children: [/* @__PURE__ */ n("label", {
+				htmlFor: i,
+				className: "block text-xs leading-4 font-medium text-fg-muted",
+				children: [
+					r,
+					s && /* @__PURE__ */ t("span", {
+						"aria-hidden": "true",
+						className: "ml-1 text-fg-danger",
+						children: "*"
+					}),
+					!s && c && /* @__PURE__ */ t("span", {
+						className: "ml-1 text-fg-subtle",
+						children: "(선택)"
+					})
+				]
+			}), typeof a == "string" ? /* @__PURE__ */ t("span", {
+				style: { lineHeight: "16px" },
+				className: "text-[11px] text-fg-subtle",
+				children: a
+			}) : a]
+		}), l]
+	});
+}
+//#endregion
+export { r as Field };

package/dist/components/field/FieldMessage.cjs

@@ -0,0 +1 @@
+const e=require("../animated-height/AnimatedHeight.cjs");let t=require("react/jsx-runtime");function n({children:n,animated:r=!1,...i}){let a=n?(0,t.jsx)(`div`,{...i,children:n}):null;return r?(0,t.jsx)(e.AnimatedHeight,{children:a}):a}exports.FieldMessage=n;

package/dist/components/field/FieldMessage.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface FieldMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children?: ReactNode;
+    /** 메시지가 나타나고 사라질 때 높이를 부드럽게 전환한다. */
+    animated?: boolean;
+}
+/**
+ * 폼 컨트롤 아래의 도움말·검증 메시지 영역.
+ *
+ * 조건부 메시지를 애니메이션하려면 컴포넌트 자체는 유지하고 children만 바꾼다.
+ *
+ * @example
+ * ```tsx
+ * <FieldMessage animated className="mt-1 text-xs text-fg-danger">
+ *   {errorMessage}
+ * </FieldMessage>
+ * ```
+ */
+export declare function FieldMessage({ children, animated, ...messageProps }: FieldMessageProps): import("react").JSX.Element | null;

package/dist/components/field/FieldMessage.esm.js

@@ -0,0 +1,12 @@
+import { AnimatedHeight as e } from "../animated-height/AnimatedHeight.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/field/FieldMessage.tsx
+function n({ children: n, animated: r = !1, ...i }) {
+	let a = n ? /* @__PURE__ */ t("div", {
+		...i,
+		children: n
+	}) : null;
+	return r ? /* @__PURE__ */ t(e, { children: a }) : a;
+}
+//#endregion
+export { n as FieldMessage };

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

@@ -0,0 +1,3 @@
+export { Field } from './Field.js';
+export { FieldMessage, type FieldMessageProps } from './FieldMessage.js';
+export type { FieldProps } from './types.js';

package/dist/components/field/types.d.ts

@@ -0,0 +1,24 @@
+export interface FieldProps {
+    /** 라벨 텍스트. */
+    label: string;
+    /** 연결할 폼 컨트롤 id. 제공하면 label의 htmlFor로 전달된다. */
+    htmlFor?: string;
+    /**
+     * 라벨 우측 보조 텍스트 또는 노드(버튼·뱃지 등).
+     * string이면 자동으로 옅은 보조 스타일(fg-subtle) 적용.
+     */
+    rightLabel?: React.ReactNode;
+    /** 외부 그리드에서 필드 셀의 배치를 조정할 때 사용하는 추가 className. */
+    className?: string;
+    /**
+     * 필수 표시를 라벨 뒤에 추가한다. 접근성을 위해 실제 입력에도 required를 지정한다.
+     * `optional`과 동시 사용 시 `required`가 우선한다.
+     */
+    required?: boolean;
+    /**
+     * 선택 필드 — 라벨 뒤에 `(선택)` 표시.
+     * `required`와 동시 사용 시 `required` 우선.
+     */
+    optional?: boolean;
+    children: React.ReactNode;
+}

package/dist/components/info-tooltip/InfoTooltip.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({content:n,position:r=`top`}){return(0,t.jsxs)(`div`,{className:`relative inline-flex items-center group`,children:[(0,t.jsx)(`div`,{className:`w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center cursor-help hover:bg-primary-hover transition-colors`,children:(0,t.jsx)(`span`,{className:`text-[9px] font-bold text-fg-inverse`,children:`?`})}),(0,t.jsxs)(`div`,{className:e.cn(`absolute z-floating px-3 py-2 bg-bg-tooltip text-fg-tooltip text-xs rounded-tooltip shadow-overlay opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none w-64 whitespace-normal`,{top:`bottom-full left-1/2 -translate-x-1/2 mb-2`,bottom:`top-full left-1/2 -translate-x-1/2 mt-2`,left:`right-full top-1/2 -translate-y-1/2 mr-2`,right:`left-full top-1/2 -translate-y-1/2 ml-2`}[r]),children:[n,(0,t.jsx)(`div`,{className:e.cn(`absolute w-2 h-2 bg-bg-tooltip transform rotate-45`,r===`top`?`bottom-[-4px] left-1/2 -translate-x-1/2`:r===`bottom`?`top-[-4px] left-1/2 -translate-x-1/2`:r===`left`?`right-[-4px] top-1/2 -translate-y-1/2`:`left-[-4px] top-1/2 -translate-y-1/2`)})]})]})}exports.InfoTooltip=n;

package/dist/components/info-tooltip/InfoTooltip.esm.js

@@ -1,24 +1,25 @@
-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/info-tooltip/InfoTooltip.tsx
-function n({ content: n, position: r = "top" }) {
-	return /* @__PURE__ */ t("div", {
+function r({ content: r, position: i = "top" }) {
+	return /* @__PURE__ */ n("div", {
 		className: "relative inline-flex items-center group",
-		children: [/* @__PURE__ */ e("div", {
-			className: "w-3.5 h-3.5 rounded-full bg-primary-500 dark:bg-primary-600 flex items-center justify-center cursor-help hover:bg-primary-600 dark:hover:bg-primary-500 transition-colors",
-			children: /* @__PURE__ */ e("span", {
-				className: "text-[9px] font-bold text-white",
+		children: [/* @__PURE__ */ t("div", {
+			className: "w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center cursor-help hover:bg-primary-hover transition-colors",
+			children: /* @__PURE__ */ t("span", {
+				className: "text-[9px] font-bold text-fg-inverse",
 				children: "?"
 			})
-		}), /* @__PURE__ */ t("div", {
-			className: `absolute ${{
+		}), /* @__PURE__ */ n("div", {
+			className: e("absolute z-floating px-3 py-2 bg-bg-tooltip text-fg-tooltip text-xs rounded-tooltip shadow-overlay opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none w-64 whitespace-normal", {
 				top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
 				bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
 				left: "right-full top-1/2 -translate-y-1/2 mr-2",
 				right: "left-full top-1/2 -translate-y-1/2 ml-2"
-			}[r]} z-50 px-3 py-2 bg-neutral-900 dark:bg-neutral-700 text-white text-xs rounded shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none w-64 whitespace-normal`,
-			children: [n, /* @__PURE__ */ e("div", { className: `absolute w-2 h-2 bg-neutral-900 dark:bg-neutral-700 transform rotate-45 ${r === "top" ? "bottom-[-4px] left-1/2 -translate-x-1/2" : r === "bottom" ? "top-[-4px] left-1/2 -translate-x-1/2" : r === "left" ? "right-[-4px] top-1/2 -translate-y-1/2" : "left-[-4px] top-1/2 -translate-y-1/2"}` })]
+			}[i]),
+			children: [r, /* @__PURE__ */ t("div", { className: e("absolute w-2 h-2 bg-bg-tooltip transform rotate-45", i === "top" ? "bottom-[-4px] left-1/2 -translate-x-1/2" : i === "bottom" ? "top-[-4px] left-1/2 -translate-x-1/2" : i === "left" ? "right-[-4px] top-1/2 -translate-y-1/2" : "left-[-4px] top-1/2 -translate-y-1/2") })]
 		})]
 	});
 }
 //#endregion
-export { n as InfoTooltip };
+export { r as InfoTooltip };

package/dist/components/info-tooltip/index.d.ts

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

package/dist/components/input/DecimalInput.cjs

@@ -0,0 +1 @@
+const e=require("./Input.cjs"),t=require("./decimal-validation.cjs");let n=require("react"),r=require("react/jsx-runtime");function i(e){return e==null?``:String(e)}var a=(0,n.forwardRef)(({value:a,defaultValue:o,onChange:s,decimalPlaces:c=2,allowNegative:l=!1,emitEmpty:u=!1,min:d,max:f,onBlur:p,...m},h)=>{let g=a!==void 0,[_,v]=(0,n.useState)(()=>i(a??o)),[y,b]=(0,n.useState)(()=>i(a??o));(0,n.useEffect)(()=>{if(g){let e=i(a);v(e),b(e)}},[g,a]);let x=e=>{let n=t.validateDecimalDraft(e,{decimalPlaces:c,allowNegative:l,min:d,max:f});n!==`reject`&&(v(e),n===`empty`?u&&s?.(e):n===`value`&&(b(e),s?.(e)))};return(0,r.jsx)(e.Input,{...m,ref:h,type:`text`,inputMode:`decimal`,value:_,onChange:e=>x(e.target.value),onBlur:e=>{_!==y&&v(y),p?.(e)}})});a.displayName=`DecimalInput`,exports.DecimalInput=a;

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

@@ -0,0 +1,18 @@
+import { InputProps } from './types.js';
+export interface DecimalInputProps extends Omit<InputProps, "value" | "defaultValue" | "onChange" | "type"> {
+    value?: string | number | null;
+    defaultValue?: string | number | null;
+    onChange?: (value: string) => void;
+    /** 허용할 소수 자릿수. 0 이상의 유한한 정수로 지정한다. 기본 2. */
+    decimalPlaces?: number;
+    /** 음수 입력 허용. 기본 false. */
+    allowNegative?: boolean;
+    /** 빈 값을 onChange로 전달할지 여부. 기본 false. */
+    emitEmpty?: boolean;
+    min?: number;
+    max?: number;
+}
+/** 소수 입력을 문자열로 전달한다. 범위 밖이지만 완성 가능한 접두사는 임시로 유지하고
+ * 포커스를 잃으면 마지막 유효 값으로 복원한다. 빈 값도 전달하려면 emitEmpty를 켠다.
+ * Input의 variant는 필수이며 소수점 자릿수와 범위는 호출부에서 지정한다. */
+export declare const DecimalInput: import('react').ForwardRefExoticComponent<DecimalInputProps & import('react').RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,40 @@
+import { Input as e } from "./Input.esm.js";
+import { validateDecimalDraft as t } from "./decimal-validation.esm.js";
+import { forwardRef as n, useEffect as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/input/DecimalInput.tsx
+function o(e) {
+	return e == null ? "" : String(e);
+}
+var s = n(({ value: n, defaultValue: s, onChange: c, decimalPlaces: l = 2, allowNegative: u = !1, emitEmpty: d = !1, min: f, max: p, onBlur: m, ...h }, g) => {
+	let _ = n !== void 0, [v, y] = i(() => o(n ?? s)), [b, x] = i(() => o(n ?? s));
+	r(() => {
+		if (_) {
+			let e = o(n);
+			y(e), x(e);
+		}
+	}, [_, n]);
+	let S = (e) => {
+		let n = t(e, {
+			decimalPlaces: l,
+			allowNegative: u,
+			min: f,
+			max: p
+		});
+		n !== "reject" && (y(e), n === "empty" ? d && c?.(e) : n === "value" && (x(e), c?.(e)));
+	};
+	return /* @__PURE__ */ a(e, {
+		...h,
+		ref: g,
+		type: "text",
+		inputMode: "decimal",
+		value: v,
+		onChange: (e) => S(e.target.value),
+		onBlur: (e) => {
+			v !== b && y(b), m?.(e);
+		}
+	});
+});
+s.displayName = "DecimalInput";
+//#endregion
+export { s as DecimalInput };

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

@@ -1,90 +1,84 @@
-import { CircleX as e } from "../../node_modules/lucide-react/dist/esm/icons/circle-x.esm.js";
-import { SLOT_BADGE_TEXT_CLASS as t, SLOT_CHILD_ICON_CLASS as n, SLOT_GAP_CLASS as r, SLOT_ICON_SIZE_CLASS as i } from "../_shared/form-size-tokens.esm.js";
-import { getInputClasses as ee, getInputContainerClasses as te, getInputHelpClasses as a, getInputLabelClasses as o, getInputTrailingIconColor as s, getInputVariantClasses as c } from "./utils.esm.js";
-import { forwardRef as l, useRef as ne, useState as u } from "react";
+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: re, onBlur: ie, className: j = "", ...M }, N) => {
-	let [P, F] = u(!1), [I, L] = u(() => {
-		let e = O ?? k ?? "";
-		return T ? T.transform(e).toString() : e.toString();
-	}), R = ne(null), z = O !== void 0, B = z ? O.toString() : I, V = T ? T.transform(B).toString() : B, H = (e) => {
-		let t = e.target.value;
-		if (T) {
-			let n = T.transform(t).toString(), r = T.reset ? T.reset(n).toString() : n;
-			z || L(n), A?.({
-				...e,
-				target: {
-					...e.target,
-					value: r
-				}
-			});
-		} else z || L(t), A?.(e);
-	}, U = (e) => {
-		F(!0), re?.(e);
-	}, W = (e) => {
-		F(!1), ie?.(e);
-	}, G = M.ref, K = (e) => {
-		R.current = e, typeof N == "function" ? N(e) : N && (N.current = e), typeof G == "function" ? G(e) : G && "current" in G && (G.current = e);
-	}, q = () => {
-		let e = R.current;
-		e && ((Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set)?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
-	}, J = V.length > 0, ae = te(), Y = c(l, _, v, p), X = ee(l, _, v, J, p), Z = s(_, v, J || P), oe = h === "sustain" || h === "appear" && !!V, Q = l === "box", se = r[p], $ = n[p], ce = t[p], le = i[p], ue = /* @__PURE__ */ f("div", {
-		className: Q ? `${Y} flex items-center ${se} ${j}`.trim().replace(/\s+/g, " ") : "relative flex items-center text-sm",
+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: `whitespace-nowrap text-sm ${Z}`,
+				className: e("whitespace-nowrap text-sm", Z),
 				children: y
 			}),
 			/* @__PURE__ */ d("input", {
-				...M,
-				ref: K,
-				className: Q ? X : `${X} ${Y} ${_ ? "border-error-500 focus:border-error-500 focus:ring-error-500" : ""} ${v ? "opacity-50" : ""} ${j}`.trim().replace(/\s+/g, " "),
-				value: V,
-				onChange: H,
-				onFocus: U,
-				onBlur: W,
+				...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: `whitespace-nowrap text-sm ${Z}`,
+				className: e("whitespace-nowrap text-sm", Z),
 				children: b
 			}),
 			x && /* @__PURE__ */ d("span", {
-				className: `flex shrink-0 items-center ${Z} ${$}`,
+				className: e("flex shrink-0 items-center", Z, $),
 				children: x
 			}),
-			S && !v && J && /* @__PURE__ */ d("button", {
+			S && !v && !P.readOnly && q && /* @__PURE__ */ d("button", {
 				type: "button",
-				onClick: q,
+				onClick: U,
 				"aria-label": "입력 지우기",
-				className: `flex shrink-0 cursor-pointer items-center rounded ${Z} hover:text-text-primary focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500/40`,
-				children: /* @__PURE__ */ d(e, {
-					className: le,
+				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: `flex shrink-0 items-center ${$} ${ce}`,
+				className: e("flex shrink-0 items-center", $, oe),
 				children: C
 			})
 		]
 	});
 	return /* @__PURE__ */ f("div", {
 		ref: D,
-		className: ae,
+		className: J,
 		...E,
 		children: [
-			oe && m && /* @__PURE__ */ d("label", {
-				className: o(l, _),
-				htmlFor: M.id,
+			ie && m && /* @__PURE__ */ d("label", {
+				className: c(l, _),
+				htmlFor: P.id,
 				children: m
 			}),
-			ue,
+			ce,
 			g && /* @__PURE__ */ d("div", {
-				className: a(_),
+				className: s(_),
 				children: g
 			})
 		]

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

@@ -16,7 +16,7 @@ var o = r(({ disabled: r, ...o }, s) => {
 			onClick: () => l((e) => !e),
 			disabled: r,
 			"aria-label": c ? "비밀번호 숨기기" : "비밀번호 표시",
-			className: "flex items-center justify-center text-text-tertiary transition-colors hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50",
+			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

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