@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/drawer/Drawer.esm.js

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

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

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

package/dist/components/error-boundary/ErrorBoundary.cjs

@@ -0,0 +1 @@
+const e=require("./chunk-reload.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={error:null,isChunkError:!1},i=class extends t.Component{constructor(...t){super(...t),this.state=r,this.reset=()=>{this.setState(r)},this.reload=()=>{this.props.chunkReloadPort?e.reloadAfterClearingChunkGuard(this.props.chunkReloadPort):typeof window<`u`&&window.location.reload()}}static getDerivedStateFromError(t){return{error:t,isChunkError:e.isChunkLoadError(t)}}componentDidCatch(t,n){let r=e.isChunkLoadError(t);this.props.onError?.(t,n,r),r&&this.props.chunkReloadPort&&e.reloadOnceForChunkError(this.props.chunkReloadPort)}render(){let{error:e,isChunkError:t}=this.state;return e?this.props.fallbackRender?this.props.fallbackRender({error:e,isChunkError:t,reset:this.reset,reload:this.reload}):(0,n.jsxs)(`div`,{role:`alert`,className:`flex flex-col items-start gap-3 rounded-control-medium border-control border-border-subtle bg-bg-surface p-4 text-fg-default`,children:[(0,n.jsx)(`p`,{children:this.props.message??`문제가 발생했습니다.`}),(0,n.jsx)(`button`,{type:`button`,className:`rounded-control-small bg-primary px-3 py-2 text-fg-inverse`,onClick:t?this.reload:this.reset,children:t?this.props.reloadLabel??`새로고침`:this.props.retryLabel??`다시 시도`})]}):this.props.children}};exports.ErrorBoundary=i;

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

@@ -0,0 +1,23 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { ErrorBoundaryProps } from './types.js';
+interface ErrorBoundaryState {
+    error: Error | null;
+    isChunkError: boolean;
+}
+/**
+ * 자손의 렌더 오류를 포착하고 다시 시도할 수 있는 경계.
+ *
+ * 청크 오류의 자동 새로고침에는 영속 가드가 필요하다. 저장소 접근이 막히거나
+ * chunkReloadPort가 없으면 반복 새로고침을 피하기 위해 폴백을 유지한다.
+ * 포트와 fallbackRender를 주입하면 복구·안내 방식을 직접 지정할 수 있다.
+ * 이벤트 핸들러나 비동기 콜백의 오류는 React 경계가 포착하지 않으므로 호출부에서 처리한다.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    private reset;
+    private reload;
+    render(): ReactNode;
+}
+export {};

package/dist/components/error-boundary/ErrorBoundary.esm.js

@@ -0,0 +1,46 @@
+import { isChunkLoadError as e, reloadAfterClearingChunkGuard as t, reloadOnceForChunkError as n } from "./chunk-reload.esm.js";
+import { Component as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/error-boundary/ErrorBoundary.tsx
+var o = {
+	error: null,
+	isChunkError: !1
+}, s = class extends r {
+	constructor(...e) {
+		super(...e), this.state = o, this.reset = () => {
+			this.setState(o);
+		}, this.reload = () => {
+			this.props.chunkReloadPort ? t(this.props.chunkReloadPort) : typeof window < "u" && window.location.reload();
+		};
+	}
+	static getDerivedStateFromError(t) {
+		return {
+			error: t,
+			isChunkError: e(t)
+		};
+	}
+	componentDidCatch(t, r) {
+		let i = e(t);
+		this.props.onError?.(t, r, i), i && this.props.chunkReloadPort && n(this.props.chunkReloadPort);
+	}
+	render() {
+		let { error: e, isChunkError: t } = this.state;
+		return e ? this.props.fallbackRender ? this.props.fallbackRender({
+			error: e,
+			isChunkError: t,
+			reset: this.reset,
+			reload: this.reload
+		}) : /* @__PURE__ */ a("div", {
+			role: "alert",
+			className: "flex flex-col items-start gap-3 rounded-control-medium border-control border-border-subtle bg-bg-surface p-4 text-fg-default",
+			children: [/* @__PURE__ */ i("p", { children: this.props.message ?? "문제가 발생했습니다." }), /* @__PURE__ */ i("button", {
+				type: "button",
+				className: "rounded-control-small bg-primary px-3 py-2 text-fg-inverse",
+				onClick: t ? this.reload : this.reset,
+				children: t ? this.props.reloadLabel ?? "새로고침" : this.props.retryLabel ?? "다시 시도"
+			})]
+		}) : this.props.children;
+	}
+};
+//#endregion
+export { s as ErrorBoundary };

package/dist/components/error-boundary/chunk-reload.cjs

@@ -0,0 +1 @@
+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=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()}}exports.CHUNK_RELOAD_TTL_MS=e,exports.clearChunkReloadGuard=s,exports.isChunkLoadError=r,exports.listenForChunkPreloadError=l,exports.reloadAfterClearingChunkGuard=c,exports.reloadOnceForChunkError=o,exports.tryAcquireChunkReloadGuard=a;

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/{src/components → components}/info-tooltip/InfoTooltip.d.ts

@@ -7,5 +7,12 @@ export interface InfoTooltipProps {
  * 정보 툴팁 컴포넌트
  *
  * `?` 아이콘에 마우스 호버 시 툴팁을 표시해요. CSS group-hover 기반의 단순 구현.
+ *
+ * 라벨 옆 보조 설명에 쓴다. `content`가 ReactNode라 강조·줄바꿈이 자유롭다(string만이면 `Tooltip`).
+ *
+ * @example
+ * ```tsx
+ * <label>정산 주기 <InfoTooltip content={<>영업일 기준 <b>D+2</b></>} /></label>
+ * ```
  */
 export declare function InfoTooltip({ content, position }: InfoTooltipProps): import("react").JSX.Element;

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

@@ -0,0 +1,25 @@
+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 r({ content: r, position: i = "top" }) {
+	return /* @__PURE__ */ n("div", {
+		className: "relative inline-flex items-center group",
+		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__ */ 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"
+			}[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 { 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 };