@thewrong/ui 0.1.0 → 0.3.0

package/dist/components/month-range-picker/month-range-picker.esm.js

@@ -0,0 +1,227 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { Button as t } from "../button/Button.esm.js";
+import { ChevronLeft as n } from "../../node_modules/lucide-react/dist/esm/icons/chevron-left.esm.js";
+import { ChevronRight as r } from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.esm.js";
+import { PickerSheet as i, usePickerMobile as a } from "../date-picker/PickerSheet.esm.js";
+import { compareMonths as o, completeMonthRange as s, selectMonth as c, shiftMonth as l } from "./month-range-utils.esm.js";
+import { cloneElement as u, useEffect as d, useRef as f, useState as p } from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { autoUpdate as _, flip as v, offset as y, shift as b, useClick as x, useDismiss as S, useFloating as C, useInteractions as w, useRole as T } from "@floating-ui/react";
+//#region src/components/month-range-picker/month-range-picker.tsx
+function E({ year: t, from: i, to: a, onSelect: s, onYearChange: c, onMove: u, focusedMonth: p, onFocusMonth: m, focusOnMount: _, initialFocusRef: v, showPrev: y = !0, showNext: b = !0 }) {
+	let x = f([]), S = f({
+		focusedMonth: p,
+		year: t
+	}), C = f(!1);
+	d(() => {
+		if (!_ && !C.current) {
+			if (S.current.focusedMonth === p && S.current.year === t) return;
+			C.current = !0;
+		}
+		p.year === t && x.current[p.month - 1]?.focus();
+	}, [
+		_,
+		p,
+		t
+	]);
+	let w = (e) => {
+		u(l({
+			year: t,
+			month: 1
+		}, e - 1));
+	};
+	return /* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("div", {
+		className: "mb-4 flex items-center justify-between",
+		children: [
+			y ? /* @__PURE__ */ h("button", {
+				type: "button",
+				"aria-label": "이전 해",
+				className: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-subtle text-fg-muted transition-colors hover:bg-bg-subtle",
+				onClick: () => c(t - 1),
+				children: /* @__PURE__ */ h(n, { className: "h-4 w-4" })
+			}) : /* @__PURE__ */ h("span", { className: "w-8" }),
+			/* @__PURE__ */ g("div", {
+				className: "flex-1 text-center text-sm font-semibold text-fg-default",
+				children: [t, "년"]
+			}),
+			b ? /* @__PURE__ */ h("button", {
+				type: "button",
+				"aria-label": "다음 해",
+				className: "flex h-8 w-8 cursor-pointer items-center justify-center rounded-md border border-border-subtle text-fg-muted transition-colors hover:bg-bg-subtle",
+				onClick: () => c(t + 1),
+				children: /* @__PURE__ */ h(r, { className: "h-4 w-4" })
+			}) : /* @__PURE__ */ h("span", { className: "w-8" })
+		]
+	}), /* @__PURE__ */ h("div", {
+		className: "grid grid-cols-4 gap-2",
+		children: Array.from({ length: 12 }, (n, r) => {
+			let c = r + 1, l = {
+				year: t,
+				month: c
+			}, d = /* @__PURE__ */ new Date(), f = d.getFullYear() === t && d.getMonth() + 1 === c, h = !!(i && o(l, i) === 0 || a && o(l, a) === 0), _ = !!i && !!a && o(l, i) > 0 && o(l, a) < 0;
+			return /* @__PURE__ */ g("button", {
+				ref: (e) => {
+					x.current[c - 1] = e, v && p.year === t && c === p.month && (v.current = e);
+				},
+				type: "button",
+				tabIndex: p.year === t && c === p.month ? 0 : -1,
+				"aria-label": `${t}년 ${c}월`,
+				"aria-pressed": h,
+				className: e("h-10 cursor-pointer rounded-lg text-sm transition-colors", h ? "bg-primary font-bold text-fg-inverse" : _ ? "bg-bg-muted text-fg-default" : f ? "bg-bg-muted font-semibold text-fg-default" : "text-fg-default hover:bg-bg-subtle"),
+				onClick: () => {
+					s(l), m(l);
+				},
+				onKeyDown: (e) => {
+					let n = null;
+					if (e.key === "ArrowLeft" && (n = c - 1), e.key === "ArrowRight" && (n = c + 1), e.key === "ArrowUp" && (n = c - 4), e.key === "ArrowDown" && (n = c + 4), e.key === "Home" && (n = 1), e.key === "End" && (n = 12), e.key === "PageUp" || e.key === "PageDown") {
+						e.preventDefault(), u({
+							year: t + (e.key === "PageUp" ? -1 : 1),
+							month: c
+						});
+						return;
+					}
+					n !== null && (e.preventDefault(), w(n));
+				},
+				children: [c, "월"]
+			}, c);
+		})
+	})] });
+}
+function D({ children: e, value: t, onApply: n, disabled: r = !1, disableMobileSheet: o }) {
+	let [s, c] = p(!1), l = f(null), d = r || !!e.props.disabled, { isMobile: E, useSheet: D } = a(o), { refs: k, floatingStyles: A, context: j } = C({
+		open: s,
+		onOpenChange: (e) => {
+			d || c(e);
+		},
+		placement: "bottom-start",
+		whileElementsMounted: _,
+		middleware: [
+			y(8),
+			v({ fallbackAxisSideDirection: "start" }),
+			b({ padding: 8 })
+		]
+	}), { getReferenceProps: M, getFloatingProps: N } = w([
+		x(j, { enabled: !d }),
+		S(j),
+		T(j, { role: "dialog" })
+	]), P = M(), F = typeof e.type != "string" || [
+		"button",
+		"input",
+		"select",
+		"textarea"
+	].includes(e.type), I = u(e, {
+		"aria-haspopup": "dialog",
+		"aria-expanded": s,
+		"aria-controls": typeof P["aria-controls"] == "string" ? P["aria-controls"] : void 0,
+		"aria-disabled": d || void 0,
+		...d && F ? { disabled: !0 } : {}
+	});
+	return /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("span", {
+		ref: k.setReference,
+		...P,
+		className: "inline-flex w-full",
+		children: I
+	}), /* @__PURE__ */ h(i, {
+		isOpen: s,
+		onClose: () => c(!1),
+		useSheet: D,
+		context: j,
+		setFloating: k.setFloating,
+		floatingStyles: A,
+		getFloatingProps: (e) => N({
+			...e,
+			"aria-label": "월 범위 선택"
+		}),
+		desktopClassName: "z-floating max-w-[calc(100vw-16px)] rounded-2xl border border-border-subtle bg-bg-surface text-fg-default p-5 shadow-tooltip",
+		initialFocus: l,
+		children: /* @__PURE__ */ h(O, {
+			value: t,
+			isMobile: E,
+			focusOnMount: D,
+			initialFocusRef: l,
+			onClose: () => c(!1),
+			onApply: (e) => {
+				n(e), c(!1);
+			}
+		})
+	})] });
+}
+function O({ value: n, isMobile: r, focusOnMount: i, initialFocusRef: a, onApply: l, onClose: u }) {
+	let d = n?.from ?? {
+		year: (/* @__PURE__ */ new Date()).getFullYear(),
+		month: (/* @__PURE__ */ new Date()).getMonth() + 1
+	}, [f, _] = p(n?.from ?? null), [v, y] = p(n?.to ?? null), [b, x] = p(d.year), [S, C] = p(d), w = (e) => {
+		let t = c({
+			from: f,
+			to: v
+		}, e);
+		_(t.from), y(t.to);
+	}, T = () => {
+		let e = s({
+			from: f,
+			to: v
+		});
+		e ? l(e) : u();
+	}, D = (e) => {
+		if (C(e), r) {
+			x(e.year);
+			return;
+		}
+		o(e, {
+			year: b,
+			month: 1
+		}) < 0 ? x(e.year) : o(e, {
+			year: b + 1,
+			month: 12
+		}) > 0 && x(e.year - 1);
+	};
+	return /* @__PURE__ */ g("div", {
+		className: "min-w-60",
+		children: [/* @__PURE__ */ g("div", {
+			className: e(r ? "" : "grid grid-cols-[1fr_auto_1fr] gap-5"),
+			children: [/* @__PURE__ */ h(E, {
+				year: b,
+				from: f,
+				to: v,
+				onSelect: w,
+				onYearChange: x,
+				onMove: D,
+				focusedMonth: S,
+				onFocusMonth: C,
+				focusOnMount: i,
+				initialFocusRef: a,
+				showPrev: !0,
+				showNext: r
+			}), !r && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h("div", { className: "w-px bg-border-subtle" }), /* @__PURE__ */ h(E, {
+				year: b + 1,
+				from: f,
+				to: v,
+				onSelect: w,
+				onYearChange: (e) => x(e - 1),
+				onMove: D,
+				focusedMonth: S,
+				onFocusMonth: C,
+				focusOnMount: i,
+				showPrev: !1,
+				showNext: !0
+			})] })]
+		}), /* @__PURE__ */ g("div", {
+			className: "mt-6 flex justify-end gap-2",
+			children: [/* @__PURE__ */ h(t, {
+				type: "button",
+				size: "small",
+				variant: "tertiary",
+				appearance: "transparent",
+				onClick: u,
+				children: "닫기"
+			}), /* @__PURE__ */ h(t, {
+				type: "button",
+				size: "small",
+				onClick: T,
+				children: "적용"
+			})]
+		})]
+	});
+}
+//#endregion
+export { D as MonthRangePicker };

package/dist/components/month-range-picker/month-range-utils.cjs

@@ -0,0 +1 @@
+function e(e,t){return e.year*12+e.month-(t.year*12+t.month)}function t(e,t){let n=e.year*12+e.month-1+t,r=Math.floor(n/12);return{year:r,month:n-r*12+1}}function n(t,n){return!t.from||t.to||e(n,t.from)<0?{from:n,to:null}:{from:t.from,to:n}}function r(e){return e.from?{from:e.from,to:e.to??e.from}:null}exports.compareMonths=e,exports.completeMonthRange=r,exports.selectMonth=n,exports.shiftMonth=t;

package/dist/components/month-range-picker/month-range-utils.d.ts

@@ -0,0 +1,9 @@
+import { MonthValue } from '../date-picker/index.js';
+export interface MonthRange {
+    from: MonthValue | null;
+    to: MonthValue | null;
+}
+export declare function compareMonths(a: MonthValue, b: MonthValue): number;
+export declare function shiftMonth(value: MonthValue, amount: number): MonthValue;
+export declare function selectMonth(range: MonthRange, next: MonthValue): MonthRange;
+export declare function completeMonthRange(range: MonthRange): MonthRange | null;

package/dist/components/month-range-picker/month-range-utils.esm.js

@@ -0,0 +1,28 @@
+//#region src/components/month-range-picker/month-range-utils.ts
+function e(e, t) {
+	return e.year * 12 + e.month - (t.year * 12 + t.month);
+}
+function t(e, t) {
+	let n = e.year * 12 + e.month - 1 + t, r = Math.floor(n / 12);
+	return {
+		year: r,
+		month: n - r * 12 + 1
+	};
+}
+function n(t, n) {
+	return !t.from || t.to || e(n, t.from) < 0 ? {
+		from: n,
+		to: null
+	} : {
+		from: t.from,
+		to: n
+	};
+}
+function r(e) {
+	return e.from ? {
+		from: e.from,
+		to: e.to ?? e.from
+	} : null;
+}
+//#endregion
+export { e as compareMonths, r as completeMonthRange, n as selectMonth, t as shiftMonth };

package/dist/components/page-title/PageTitle.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({title:n,subtitle:r,className:i=``}){return(0,t.jsxs)(`div`,{className:e.cn(`flex min-w-0 items-baseline gap-x-3`,i),children:[(0,t.jsx)(`h1`,{className:`min-w-0 shrink truncate text-base font-semibold text-fg-muted sm:text-lg`,children:n}),r&&(0,t.jsx)(`p`,{className:`min-w-0 shrink-3 truncate text-xs text-fg-subtle sm:text-sm`,children:r})]})}exports.PageTitle=n;

package/dist/components/page-title/PageTitle.esm.js

@@ -0,0 +1,17 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/page-title/PageTitle.tsx
+function r({ title: r, subtitle: i, className: a = "" }) {
+	return /* @__PURE__ */ n("div", {
+		className: e("flex min-w-0 items-baseline gap-x-3", a),
+		children: [/* @__PURE__ */ t("h1", {
+			className: "min-w-0 shrink truncate text-base font-semibold text-fg-muted sm:text-lg",
+			children: r
+		}), i && /* @__PURE__ */ t("p", {
+			className: "min-w-0 shrink-3 truncate text-xs text-fg-subtle sm:text-sm",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { r as PageTitle };

package/dist/components/page-title/index.d.ts

@@ -0,0 +1 @@
+export { PageTitle } from './PageTitle.js';

package/dist/components/popover/Popover.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("motion/react"),i=require("@floating-ui/react");function a({trigger:a,content:o,placement:s=`bottom`,onOpenChange:c,className:l}){let[u,d]=(0,t.useState)(!1),f=e=>{d(e),c?.(e)},{refs:p,floatingStyles:m,context:h}=(0,i.useFloating)({open:u,onOpenChange:f,placement:s,whileElementsMounted:i.autoUpdate,middleware:[(0,i.offset)(8),(0,i.flip)({fallbackAxisSideDirection:`start`}),(0,i.shift)({padding:8})]}),{getReferenceProps:g,getFloatingProps:_}=(0,i.useInteractions)([(0,i.useClick)(h),(0,i.useDismiss)(h),(0,i.useRole)(h,{role:`dialog`})]),v=()=>f(!1);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`span`,{ref:p.setReference,tabIndex:0,role:`button`,...g(),className:`inline-flex cursor-pointer select-none`,children:a}),(0,n.jsx)(i.FloatingPortal,{children:(0,n.jsx)(r.AnimatePresence,{children:u&&(0,n.jsx)(`div`,{ref:p.setFloating,style:m,..._(),className:`z-floating`,children:(0,n.jsx)(r.motion.div,{initial:{opacity:0,scale:.95},animate:{opacity:1,scale:1},exit:{opacity:0,scale:.95},transition:{duration:.15},className:e.cn(`bg-bg-surface text-fg-default rounded-surface shadow-tooltip border border-border-subtle p-4 min-w-60 max-w-[320px]`,l),children:typeof o==`function`?o(v):o})})})})]})}exports.Popover=a;

package/dist/{src/components → components}/popover/Popover.d.ts

@@ -16,6 +16,11 @@ export interface PopoverProps {
     placement?: "top" | "bottom" | "left" | "right";
     /** 열림/닫힘 변화 콜백. 호출처가 open 상태에 따라 폴링 등을 제어할 때 사용. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * 팝오버 카드(콘텐츠 박스)에 병합되는 클래스. 배경·패딩·폭 등을 덮을 때 쓴다.
+     * `cn`(tailwind-merge)으로 병합된다. 위치를 잡는 바깥 wrapper(floating-ui 제어)에는 적용 안 됨.
+     */
+    className?: string;
 }
 /**
  * Popover — `@floating-ui/react` 기반.
@@ -24,5 +29,18 @@ export interface PopoverProps {
  * - **자동 flip / shift**: 공간 부족하면 반대편으로, viewport 경계로 clamp
  * - **스크롤/resize 자동 추적**(autoUpdate)
  * - **Portal 렌더**: 부모 overflow:hidden에 잘리지 않음
+ *
+ * 클릭으로 여닫는 자유 콘텐츠(헤더 드롭다운·메뉴)에 쓴다. 짧은 텍스트 힌트는 `Tooltip`,
+ * 물음표 아이콘 도움말은 `InfoTooltip`을 쓸 것.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<MoreIcon />}
+ *   content={(close) => (
+ *     <button onClick={() => { edit(); close(); }}>수정</button>
+ *   )}
+ * />
+ * ```
  */
-export declare function Popover({ trigger, content, placement, onOpenChange, }: PopoverProps): import("react").JSX.Element;
+export declare function Popover({ trigger, content, placement, onOpenChange, className, }: PopoverProps): import("react").JSX.Element;

package/dist/components/popover/Popover.esm.js

@@ -0,0 +1,57 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { useState as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { AnimatePresence as a, motion as o } from "motion/react";
+import { FloatingPortal as s, autoUpdate as c, flip as l, offset as u, shift as d, useClick as f, useDismiss as p, useFloating as m, useInteractions as h, useRole as g } from "@floating-ui/react";
+//#region src/components/popover/Popover.tsx
+function _({ trigger: _, content: v, placement: y = "bottom", onOpenChange: b, className: x }) {
+	let [S, C] = t(!1), w = (e) => {
+		C(e), b?.(e);
+	}, { refs: T, floatingStyles: E, context: D } = m({
+		open: S,
+		onOpenChange: w,
+		placement: y,
+		whileElementsMounted: c,
+		middleware: [
+			u(8),
+			l({ fallbackAxisSideDirection: "start" }),
+			d({ padding: 8 })
+		]
+	}), { getReferenceProps: O, getFloatingProps: k } = h([
+		f(D),
+		p(D),
+		g(D, { role: "dialog" })
+	]), A = () => w(!1);
+	return /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		ref: T.setReference,
+		tabIndex: 0,
+		role: "button",
+		...O(),
+		className: "inline-flex cursor-pointer select-none",
+		children: _
+	}), /* @__PURE__ */ r(s, { children: /* @__PURE__ */ r(a, { children: S && /* @__PURE__ */ r("div", {
+		ref: T.setFloating,
+		style: E,
+		...k(),
+		className: "z-floating",
+		children: /* @__PURE__ */ r(o.div, {
+			initial: {
+				opacity: 0,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .95
+			},
+			transition: { duration: .15 },
+			className: e("bg-bg-surface text-fg-default rounded-surface shadow-tooltip border border-border-subtle p-4 min-w-60 max-w-[320px]", x),
+			children: typeof v == "function" ? v(A) : v
+		})
+	}) }) })] });
+}
+//#endregion
+export { _ as Popover };

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

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

package/dist/components/progress/Progress.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");var n={small:`h-1.5`,medium:`h-2.5`};function r({value:r,size:i=`medium`,className:a,...o}){let s=Math.min(100,Math.max(0,r));return(0,t.jsx)(`div`,{role:`progressbar`,"aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,className:e.cn(`w-full overflow-hidden rounded-full bg-bg-subtle`,n[i],a),...o,children:(0,t.jsx)(`div`,{className:`h-full rounded-full bg-primary transition-[width] duration-200 ease-out motion-reduce:transition-none`,style:{width:`${s}%`}})})}exports.Progress=r;

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,13 @@
+import { ProgressProps } from './types.js';
+/**
+ * Progress — 결정형(determinate) 진행률 바 원자.
+ *
+ * `value`는 0~100 스케일이다. 서버 계약이 0~1(비율)을 내려주는 도메인이
+ * 있더라도 이 컴포넌트에는 항상 0~100으로 변환해 넘긴다 — 컴포넌트가
+ * 스케일을 추측하지 않는다.
+ *
+ * 접근성: `role="progressbar"` + `aria-valuenow/min/max`. 시각 바는 트랙
+ * 위에 채움 막대를 폭(%)으로 표현하고, transition은 순수 시각 효과라
+ * `motion-reduce:transition-none`으로 감쇠한다.
+ */
+export declare function Progress({ value, size, className, ...rest }: ProgressProps): import("react").JSX.Element;

package/dist/components/progress/Progress.esm.js

@@ -0,0 +1,24 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/progress/Progress.tsx
+var n = {
+	small: "h-1.5",
+	medium: "h-2.5"
+};
+function r({ value: r, size: i = "medium", className: a, ...o }) {
+	let s = Math.min(100, Math.max(0, r));
+	return /* @__PURE__ */ t("div", {
+		role: "progressbar",
+		"aria-valuenow": s,
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		className: e("w-full overflow-hidden rounded-full bg-bg-subtle", n[i], a),
+		...o,
+		children: /* @__PURE__ */ t("div", {
+			className: "h-full rounded-full bg-primary transition-[width] duration-200 ease-out motion-reduce:transition-none",
+			style: { width: `${s}%` }
+		})
+	});
+}
+//#endregion
+export { r as Progress };

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

@@ -0,0 +1,2 @@
+export { Progress } from './Progress.js';
+export type { ProgressProps, ProgressSize } from './types.js';

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

@@ -0,0 +1,13 @@
+import { ComponentPropsWithoutRef } from 'react';
+/** Progress 컴포넌트의 크기 타입 — 트랙 높이만 바뀐다. */
+export type ProgressSize = "small" | "medium";
+export interface ProgressProps extends Omit<ComponentPropsWithoutRef<"div">, "role" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "children"> {
+    /**
+     * 진행률. **0~100 스케일이다(0~1 아님)** — 소비처는 백분율 값을 그대로
+     * 넘긴다. 컴포넌트 내부에서 곱셈·나눗셈으로 재해석하지 않는다.
+     */
+    value: number;
+    size?: ProgressSize;
+    /** 접근성 이름. 시각적 라벨이 이미 화면에 있으면 소비처에서 함께 넘긴다. */
+    "aria-label"?: string;
+}

package/dist/components/radio/Radio.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.createContext)(null);function i({equalizeLabelWidth:e=!1,className:i,style:a,children:o,...s}){let c=(0,t.useRef)(new Set),l=(0,t.useRef)(null),u=(0,t.useRef)(e),[d,f]=(0,t.useState)(null);u.current=e;let p=(0,t.useCallback)(()=>{if(!u.current)return;let e=Array.from(c.current,e=>e.getBoundingClientRect().width),t=e.length>0?Math.ceil(Math.max(...e)):null;f(e=>e===t?e:t)},[]),m=(0,t.useCallback)(e=>(c.current.add(e),u.current&&(l.current?.observe(e),p()),()=>{l.current?.unobserve(e),c.current.delete(e),p()}),[p]);(0,t.useLayoutEffect)(()=>{if(!e){f(null);return}if(typeof ResizeObserver>`u`){p();return}let t=new ResizeObserver(p);return l.current=t,c.current.forEach(e=>t.observe(e)),p(),()=>{t.disconnect(),l.current=null}},[e,p]);let h=(0,t.useMemo)(()=>({equalizeLabelWidth:e,registerLabel:m,maxLabelWidth:d}),[e,m,d]);return(0,n.jsx)(r.Provider,{value:h,children:(0,n.jsx)(`div`,{className:i,style:a,...s,children:o})})}var a=(0,t.forwardRef)(({children:i,leadingIcon:a,contentAlignment:o=`start`,className:s,disabled:c,onKeyDown:l,...u},d)=>{let f=(0,t.useContext)(r),p=f?.equalizeLabelWidth,m=f?.registerLabel,h=(0,t.useRef)(null),g=(0,t.useCallback)(e=>{h.current?.(),h.current=e&&p&&m?m(e):null},[p,m]);return(0,n.jsxs)(`label`,{className:e.cn(`relative block`,c?`cursor-not-allowed`:`cursor-pointer`,s),children:[(0,n.jsx)(`input`,{ref:d,type:`radio`,className:`peer sr-only`,disabled:c,onKeyDown:e=>{if(l?.(e),e.defaultPrevented)return;let t=e.key===`ArrowRight`||e.key===`ArrowDown`?1:e.key===`ArrowLeft`||e.key===`ArrowUp`?-1:0;if(t===0)return;let n=e.currentTarget,r=Array.from(n.ownerDocument.getElementsByName(n.name)).filter(e=>e instanceof HTMLInputElement&&e.type===`radio`&&e.form===n.form&&!e.disabled),i=r.indexOf(n);if(i<0||r.length<2)return;e.preventDefault();let a=r[(i+t+r.length)%r.length];a?.focus(),a?.click()},...u}),(0,n.jsxs)(`span`,{className:e.cn(`min-h-control-medium w-full items-center gap-slot-medium py-2 rounded-control-medium border-control border-border-subtle bg-bg-surface px-control-pad-medium text-fg-default outline-none transition-colors duration-control ease-control`,o===`center`?`grid grid-cols-[auto_minmax(0,1fr)_auto]`:`flex`,!c&&`hover:border-border-default hover:bg-bg-subtle`,`peer-checked:border-primary peer-checked:bg-primary-subtle`,`peer-checked:hover:bg-primary-subtle`,`peer-focus:ring-control peer-focus:ring-focus-primary peer-focus:ring-offset-2 peer-focus:ring-offset-bg-surface`,`peer-disabled:border-border-subtle peer-disabled:bg-bg-disabled peer-disabled:text-fg-disabled`,`peer-disabled:[&_[data-radio-indicator]]:border-border-default peer-disabled:[&_[data-radio-indicator]]:bg-bg-radio-disabled-indicator`,`peer-disabled:[&_[data-radio-dot]]:bg-icon-disabled peer-disabled:[&_[data-radio-leading]]:text-icon-disabled`,`peer-checked:[&_[data-radio-dot]]:scale-50 peer-checked:[&_[data-radio-indicator]]:border-primary`),children:[(0,n.jsx)(`span`,{"aria-hidden":`true`,"data-radio-indicator":!0,className:`flex h-slot-icon-medium w-slot-icon-medium shrink-0 items-center justify-center rounded-full border-2 border-border-default bg-bg-surface transition-colors duration-control ease-control`,children:(0,n.jsx)(`span`,{"data-radio-dot":!0,className:`h-slot-icon-medium w-slot-icon-medium scale-0 rounded-full bg-primary transition-transform duration-control ease-control`})}),(0,n.jsxs)(`span`,{"data-radio-content":!0,className:e.cn(`flex min-w-0 items-center gap-slot-medium`,o===`center`&&`justify-self-center`),children:[a?(0,n.jsx)(`span`,{"aria-hidden":`true`,"data-radio-leading":!0,className:`flex h-slot-icon-medium w-slot-icon-medium shrink-0 items-center justify-center text-icon-secondary [&>*]:h-slot-icon-medium [&>*]:w-slot-icon-medium`,children:a}):null,(0,n.jsx)(`span`,{"data-radio-label":!0,className:`min-w-0 text-left text-control-medium font-control-field`,style:f?.equalizeLabelWidth?{width:f.maxLabelWidth===null?void 0:`${f.maxLabelWidth}px`}:void 0,children:(0,n.jsx)(`span`,{ref:g,"data-radio-label-text":!0,className:`inline-block whitespace-nowrap`,children:i})})]}),o===`center`?(0,n.jsx)(`span`,{"aria-hidden":`true`,"data-radio-balance":!0,className:`h-slot-icon-medium w-slot-icon-medium`}):null]})]})});a.displayName=`Radio.Item`;var o={Group:i,Item:a};exports.Radio=o,exports.RadioGroup=i,exports.RadioItem=a;

package/dist/components/radio/Radio.d.ts

@@ -0,0 +1,31 @@
+import { RadioGroupProps, RadioItemProps } from './types.js';
+/**
+ * Radio.Item의 배치만 담당하는 그룹입니다. 선택 semantics는 바깥 fieldset과 각
+ * Item의 동일한 name이 담당하므로 legend 등 도메인 마크업을 강제하지 않습니다.
+ */
+export declare function RadioGroup({ equalizeLabelWidth, className, style, children, ...props }: RadioGroupProps): import("react").JSX.Element;
+/**
+ * 전체 행을 클릭할 수 있는 네이티브 radio 항목.
+ *
+ * 선택 semantics는 `fieldset`/`legend`와 동일한 `name`으로 구성합니다.
+ * Radio.Group은 선택 동작을 바꾸지 않고 항목 간 레이아웃만 조율합니다.
+ * 라벨은 자연 너비 측정을 위해 기본적으로 줄바꿈하지 않습니다. 긴 문구는 폭과
+ * `whitespace-normal`을 지정한 자식으로 전달해 줄바꿈할 수 있습니다.
+ *
+ * @example
+ * ```tsx
+ * <fieldset>
+ *   <legend>알림 방식</legend>
+ *   <Radio.Group equalizeLabelWidth>
+ *     <Radio.Item name="notification" value="email" checked={value === "email"}>
+ *       E-mail
+ *     </Radio.Item>
+ *   </Radio.Group>
+ * </fieldset>
+ * ```
+ */
+export declare const RadioItem: import('react').ForwardRefExoticComponent<RadioItemProps & import('react').RefAttributes<HTMLInputElement>>;
+export declare const Radio: {
+    Group: typeof RadioGroup;
+    Item: import('react').ForwardRefExoticComponent<RadioItemProps & import('react').RefAttributes<HTMLInputElement>>;
+};

package/dist/components/radio/Radio.esm.js

@@ -0,0 +1,118 @@
+import { cn as e } from "../../lib/utils.esm.js";
+import { createContext as t, forwardRef as n, useCallback as r, useContext as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/radio/Radio.tsx
+var d = t(null);
+function f({ equalizeLabelWidth: e = !1, className: t, style: n, children: i, ...u }) {
+	let f = s(/* @__PURE__ */ new Set()), p = s(null), m = s(e), [h, g] = c(null);
+	m.current = e;
+	let _ = r(() => {
+		if (!m.current) return;
+		let e = Array.from(f.current, (e) => e.getBoundingClientRect().width), t = e.length > 0 ? Math.ceil(Math.max(...e)) : null;
+		g((e) => e === t ? e : t);
+	}, []), v = r((e) => (f.current.add(e), m.current && (p.current?.observe(e), _()), () => {
+		p.current?.unobserve(e), f.current.delete(e), _();
+	}), [_]);
+	a(() => {
+		if (!e) {
+			g(null);
+			return;
+		}
+		if (typeof ResizeObserver > "u") {
+			_();
+			return;
+		}
+		let t = new ResizeObserver(_);
+		return p.current = t, f.current.forEach((e) => t.observe(e)), _(), () => {
+			t.disconnect(), p.current = null;
+		};
+	}, [e, _]);
+	let y = o(() => ({
+		equalizeLabelWidth: e,
+		registerLabel: v,
+		maxLabelWidth: h
+	}), [
+		e,
+		v,
+		h
+	]);
+	return /* @__PURE__ */ l(d.Provider, {
+		value: y,
+		children: /* @__PURE__ */ l("div", {
+			className: t,
+			style: n,
+			...u,
+			children: i
+		})
+	});
+}
+var p = n(({ children: t, leadingIcon: n, contentAlignment: a = "start", className: o, disabled: c, onKeyDown: f, ...p }, m) => {
+	let h = i(d), g = h?.equalizeLabelWidth, _ = h?.registerLabel, v = s(null), y = r((e) => {
+		v.current?.(), v.current = e && g && _ ? _(e) : null;
+	}, [g, _]);
+	return /* @__PURE__ */ u("label", {
+		className: e("relative block", c ? "cursor-not-allowed" : "cursor-pointer", o),
+		children: [/* @__PURE__ */ l("input", {
+			ref: m,
+			type: "radio",
+			className: "peer sr-only",
+			disabled: c,
+			onKeyDown: (e) => {
+				if (f?.(e), e.defaultPrevented) return;
+				let t = e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : 0;
+				if (t === 0) return;
+				let n = e.currentTarget, r = Array.from(n.ownerDocument.getElementsByName(n.name)).filter((e) => e instanceof HTMLInputElement && e.type === "radio" && e.form === n.form && !e.disabled), i = r.indexOf(n);
+				if (i < 0 || r.length < 2) return;
+				e.preventDefault();
+				let a = r[(i + t + r.length) % r.length];
+				a?.focus(), a?.click();
+			},
+			...p
+		}), /* @__PURE__ */ u("span", {
+			className: e("min-h-control-medium w-full items-center gap-slot-medium py-2 rounded-control-medium border-control border-border-subtle bg-bg-surface px-control-pad-medium text-fg-default outline-none transition-colors duration-control ease-control", a === "center" ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "flex", !c && "hover:border-border-default hover:bg-bg-subtle", "peer-checked:border-primary peer-checked:bg-primary-subtle", "peer-checked:hover:bg-primary-subtle", "peer-focus:ring-control peer-focus:ring-focus-primary peer-focus:ring-offset-2 peer-focus:ring-offset-bg-surface", "peer-disabled:border-border-subtle peer-disabled:bg-bg-disabled peer-disabled:text-fg-disabled", "peer-disabled:[&_[data-radio-indicator]]:border-border-default peer-disabled:[&_[data-radio-indicator]]:bg-bg-radio-disabled-indicator", "peer-disabled:[&_[data-radio-dot]]:bg-icon-disabled peer-disabled:[&_[data-radio-leading]]:text-icon-disabled", "peer-checked:[&_[data-radio-dot]]:scale-50 peer-checked:[&_[data-radio-indicator]]:border-primary"),
+			children: [
+				/* @__PURE__ */ l("span", {
+					"aria-hidden": "true",
+					"data-radio-indicator": !0,
+					className: "flex h-slot-icon-medium w-slot-icon-medium shrink-0 items-center justify-center rounded-full border-2 border-border-default bg-bg-surface transition-colors duration-control ease-control",
+					children: /* @__PURE__ */ l("span", {
+						"data-radio-dot": !0,
+						className: "h-slot-icon-medium w-slot-icon-medium scale-0 rounded-full bg-primary transition-transform duration-control ease-control"
+					})
+				}),
+				/* @__PURE__ */ u("span", {
+					"data-radio-content": !0,
+					className: e("flex min-w-0 items-center gap-slot-medium", a === "center" && "justify-self-center"),
+					children: [n ? /* @__PURE__ */ l("span", {
+						"aria-hidden": "true",
+						"data-radio-leading": !0,
+						className: "flex h-slot-icon-medium w-slot-icon-medium shrink-0 items-center justify-center text-icon-secondary [&>*]:h-slot-icon-medium [&>*]:w-slot-icon-medium",
+						children: n
+					}) : null, /* @__PURE__ */ l("span", {
+						"data-radio-label": !0,
+						className: "min-w-0 text-left text-control-medium font-control-field",
+						style: h?.equalizeLabelWidth ? { width: h.maxLabelWidth === null ? void 0 : `${h.maxLabelWidth}px` } : void 0,
+						children: /* @__PURE__ */ l("span", {
+							ref: y,
+							"data-radio-label-text": !0,
+							className: "inline-block whitespace-nowrap",
+							children: t
+						})
+					})]
+				}),
+				a === "center" ? /* @__PURE__ */ l("span", {
+					"aria-hidden": "true",
+					"data-radio-balance": !0,
+					className: "h-slot-icon-medium w-slot-icon-medium"
+				}) : null
+			]
+		})]
+	});
+});
+p.displayName = "Radio.Item";
+var m = {
+	Group: f,
+	Item: p
+};
+//#endregion
+export { m as Radio, f as RadioGroup, p as RadioItem };

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

@@ -0,0 +1,2 @@
+export { Radio, RadioGroup, RadioItem } from './Radio.js';
+export type { RadioContentAlignment, RadioGroupProps, RadioItemProps, } from './types.js';

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

@@ -0,0 +1,24 @@
+import { HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+export type RadioContentAlignment = "start" | "center";
+export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * 그룹 안 라벨의 자연 너비를 측정해 가장 긴 라벨과 동일한 슬롯 너비를 사용합니다.
+     * `contentAlignment="center"`인 Item과 조합하면 문구 길이가 달라도 콘텐츠 묶음의
+     * 시작점과 시각적 중심을 함께 유지할 수 있습니다.
+     * @default false
+     */
+    equalizeLabelWidth?: boolean;
+}
+export interface RadioItemProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "type"> {
+    /** 행의 주 라벨. 전체 행을 클릭하면 이 radio가 선택됩니다. */
+    children: ReactNode;
+    /** 라벨 앞에 표시할 선택적 아이콘. */
+    leadingIcon?: ReactNode;
+    /**
+     * 선택 indicator를 왼쪽에 유지한 채 아이콘과 라벨 묶음의 정렬을 결정합니다.
+     * @default "start"
+     */
+    contentAlignment?: RadioContentAlignment;
+    /** 행 컨테이너에 추가할 클래스. */
+    className?: string;
+}

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

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs");let n=require("react/jsx-runtime");function r({value:r,onChange:i,size:a}){let o=a===`mini`,s=o?`text-xs`:`text-sm`;return(0,n.jsxs)(`label`,{className:`inline-flex cursor-pointer items-center gap-1 select-none`,children:[(0,n.jsx)(`input`,{type:`checkbox`,checked:r,onChange:e=>i(e.target.checked),className:`peer sr-only`}),(0,n.jsx)(t.Check,{className:e.cn(o?`h-3.5 w-3.5`:`h-4 w-4`,`stroke-3 transition-colors peer-focus-visible:outline-2 peer-focus-visible:outline-focus-primary peer-focus-visible:outline-offset-1`,r?`text-primary-fg`:`text-icon-tertiary`),"aria-hidden":`true`}),(0,n.jsx)(`span`,{className:e.cn(s,`font-medium transition-colors`,r?`text-primary-fg`:`text-fg-subtle`),children:`완전일치`})]})}exports.ExactMatchToggle=r;