@thewrong/ui 0.2.0 → 0.4.0

package/dist/components/animated-height/AnimatedHeight.esm.js

@@ -1,36 +1,36 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { motion as i } from "motion/react";
+import { motion as i, useReducedMotion as a } from "motion/react";
 //#region src/components/animated-height/AnimatedHeight.tsx
-function a({ children: a, durationMs: o = 220, ease: s = [
+function o({ children: o, durationMs: s = 220, ease: c = [
 	.16,
 	1,
 	.3,
 	1
-], className: c = "" }) {
-	let l = t(null), [u, d] = n("auto"), f = t(!0), [p, m] = n(!1);
+], className: l = "" }) {
+	let u = a(), d = t(null), [f, p] = n("auto"), m = t(!0), [h, g] = n(!1);
 	return e(() => {
-		let e = l.current;
+		let e = d.current;
 		if (!e) return;
 		let t = new ResizeObserver(([e]) => {
 			if (!e) return;
 			let t = e.contentRect.height;
-			d(t), f.current && (f.current = !1, requestAnimationFrame(() => m(!0)));
+			p(t), m.current && (m.current = !1, requestAnimationFrame(() => g(!0)));
 		});
 		return t.observe(e), () => t.disconnect();
 	}, []), /* @__PURE__ */ r(i.div, {
-		animate: { height: u },
-		transition: p ? {
-			duration: o / 1e3,
-			ease: s
+		animate: { height: f },
+		transition: h && !u ? {
+			duration: s / 1e3,
+			ease: c
 		} : { duration: 0 },
 		style: { overflow: "hidden" },
-		className: c,
+		className: l,
 		children: /* @__PURE__ */ r("div", {
-			ref: l,
-			children: a
+			ref: d,
+			children: o
 		})
 	});
 }
 //#endregion
-export { a as AnimatedHeight };
+export { o as AnimatedHeight };

package/dist/components/animated-height/index.d.ts

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

package/dist/components/badge/Badge.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)((n,i)=>{let{size:a=`medium`,variant:o=`fill`,color:s=`neutral`,className:c=``,children:l,...u}=n,d=e.cn(t.getBadgeBaseClasses(),t.getBadgeColorClasses(s,o),t.getBadgeSizeClasses(a),c);if(`as`in n&&n.as===`div`){let{as:e,...t}=u;return(0,r.jsx)(`div`,{ref:i,className:d,...t,children:l})}return(0,r.jsx)(`span`,{ref:i,className:d,...u,children:l})});i.displayName=`Badge`,exports.Badge=i;

package/dist/{src/components → components}/badge/Badge.d.ts

@@ -1,2 +1,2 @@
-import { BadgeProps } from './types';
+import { BadgeProps } from './types.js';
 export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLDivElement | HTMLSpanElement>>;

package/dist/components/badge/Badge.esm.js

@@ -1,30 +1,26 @@
-import { getBadgeBaseClasses as e, getBadgeColorClasses as t, getBadgeSizeClasses as n } from "./utils.esm.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { getBadgeBaseClasses as t, getBadgeColorClasses as n, getBadgeSizeClasses as r } from "./utils.esm.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/badge/Badge.tsx
-var a = r((r, a) => {
-	let { size: o = "medium", variant: s = "fill", color: c = "neutral", className: l = "", children: u, ...d } = r, f = [
-		e(),
-		t(c, s),
-		n(o),
-		l
-	].filter(Boolean).join(" ");
-	if ("as" in r && r.as === "div") {
-		let { as: e, ...t } = d;
-		return /* @__PURE__ */ i("div", {
-			ref: a,
-			className: f,
+var o = i((i, o) => {
+	let { size: s = "medium", variant: c = "fill", color: l = "neutral", className: u = "", children: d, ...f } = i, p = e(t(), n(l, c), r(s), u);
+	if ("as" in i && i.as === "div") {
+		let { as: e, ...t } = f;
+		return /* @__PURE__ */ a("div", {
+			ref: o,
+			className: p,
 			...t,
-			children: u
+			children: d
 		});
 	}
-	return /* @__PURE__ */ i("span", {
-		ref: a,
-		className: f,
-		...d,
-		children: u
+	return /* @__PURE__ */ a("span", {
+		ref: o,
+		className: p,
+		...f,
+		children: d
 	});
 });
-a.displayName = "Badge";
+o.displayName = "Badge";
 //#endregion
-export { a as Badge };
+export { o as Badge };

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge.js';
+export type { BadgeProps, BadgeBaseProps, BadgeDivProps, BadgeCommonProps, BadgeColor, BadgeVariant, BadgeSize, } from './types.js';

package/dist/components/badge/utils.cjs

@@ -0,0 +1 @@
+var e=(e=`neutral`,t=`fill`)=>({primary:{fill:`bg-primary text-fg-inverse`,weak:`bg-primary-subtle text-primary-fg border border-primary-border`},secondary:{fill:`bg-neutral-fill text-fg-inverse`,weak:`bg-neutral-subtle text-neutral-fg border border-neutral-border`},success:{fill:`bg-success text-fg-inverse`,weak:`bg-success-subtle text-success-fg border border-success-border`},error:{fill:`bg-error text-fg-inverse`,weak:`bg-error-subtle text-error-fg border border-error-border`},warning:{fill:`bg-warning text-fg-inverse`,weak:`bg-warning-subtle text-warning-fg border border-warning-border`},info:{fill:`bg-info text-fg-inverse`,weak:`bg-info-subtle text-info-fg border border-info-border`},neutral:{fill:`bg-neutral-fill text-fg-inverse`,weak:`bg-neutral-subtle text-neutral-fg border border-neutral-border`}})[e][t],t=(e=`medium`)=>({xsmall:`px-1.5 py-0.5 text-xs`,small:`px-2 py-1 text-xs`,medium:`px-2.5 py-1 text-sm`,large:`px-3 py-1.5 text-base`})[e],n=()=>`inline-flex items-center justify-center font-medium rounded-badge whitespace-nowrap`;exports.getBadgeBaseClasses=n,exports.getBadgeColorClasses=e,exports.getBadgeSizeClasses=t;

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

@@ -1,4 +1,4 @@
-import { BadgeColor, BadgeVariant, BadgeSize } from './types';
+import { BadgeColor, BadgeVariant, BadgeSize } from './types.js';
 /**
  * Badge 색상에 따른 Tailwind 클래스 매핑
  */

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

@@ -1,38 +1,38 @@
 //#region src/components/badge/utils.ts
 var e = (e = "neutral", t = "fill") => ({
 	primary: {
-		fill: "bg-primary-500 text-white",
-		weak: "bg-primary-50 text-primary-600 border border-primary-300"
+		fill: "bg-primary text-fg-inverse",
+		weak: "bg-primary-subtle text-primary-fg border border-primary-border"
 	},
 	secondary: {
-		fill: "bg-secondary-500 text-white",
-		weak: "bg-secondary-50 text-secondary-600 border border-secondary-300"
+		fill: "bg-neutral-fill text-fg-inverse",
+		weak: "bg-neutral-subtle text-neutral-fg border border-neutral-border"
 	},
 	success: {
-		fill: "bg-success-500 text-white",
-		weak: "bg-success-50 text-success-600 border border-success-300"
+		fill: "bg-success text-fg-inverse",
+		weak: "bg-success-subtle text-success-fg border border-success-border"
 	},
 	error: {
-		fill: "bg-error-500 text-white",
-		weak: "bg-error-50 text-error-600 border border-error-300"
+		fill: "bg-error text-fg-inverse",
+		weak: "bg-error-subtle text-error-fg border border-error-border"
 	},
 	warning: {
-		fill: "bg-warning-500 text-white",
-		weak: "bg-warning-50 text-warning-600 border border-warning-300"
+		fill: "bg-warning text-fg-inverse",
+		weak: "bg-warning-subtle text-warning-fg border border-warning-border"
 	},
 	info: {
-		fill: "bg-info-500 text-white",
-		weak: "bg-info-50 text-info-600 border border-info-300"
+		fill: "bg-info text-fg-inverse",
+		weak: "bg-info-subtle text-info-fg border border-info-border"
 	},
 	neutral: {
-		fill: "bg-neutral-500 text-white",
-		weak: "bg-neutral-50 text-neutral-600 border border-neutral-300"
+		fill: "bg-neutral-fill text-fg-inverse",
+		weak: "bg-neutral-subtle text-neutral-fg border border-neutral-border"
 	}
 })[e][t], t = (e = "medium") => ({
 	xsmall: "px-1.5 py-0.5 text-xs",
 	small: "px-2 py-1 text-xs",
 	medium: "px-2.5 py-1 text-sm",
 	large: "px-3 py-1.5 text-base"
-})[e], n = () => "inline-flex items-center justify-center font-medium rounded-md whitespace-nowrap";
+})[e], n = () => "inline-flex items-center justify-center font-medium rounded-badge whitespace-nowrap";
 //#endregion
 export { n as getBadgeBaseClasses, e as getBadgeColorClasses, t as getBadgeSizeClasses };

package/dist/components/button/Button.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=()=>(0,r.jsxs)(`svg`,{className:`animate-button-spinner size-button-spinner-small`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,r.jsx)(`circle`,{className:`opacity-button-spinner-track`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,r.jsx)(`path`,{className:`opacity-button-spinner-head`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z`})]}),a=(0,n.forwardRef)((a,o)=>{let{variant:s=`primary`,appearance:c=`filled`,size:l=`medium`,display:u=`inline`,loading:d=!1,clickThrottleMs:f=0,leadingIcon:p,trailingIcon:m,className:h=``,children:g,..._}=a,[v,y]=(0,n.useState)(!1),b=(0,n.useRef)(null),x=()=>{f&&(y(!0),b.current&&clearTimeout(b.current),b.current=setTimeout(()=>{y(!1),b.current=null},f))};(0,n.useEffect)(()=>()=>{b.current&&clearTimeout(b.current)},[]);let S=`as`in a&&a.as===`a`,C=(`disabled`in a?a.disabled:!1)||d||v,w=e.cn(t.getButtonBaseClasses(c),t.getButtonColorClasses(s,c),c===`link`?`h-auto min-w-0 border-0 p-0 align-baseline text-start underline hover:decoration-2 hover:underline-offset-2 active:decoration-[3px] active:underline-offset-4 text-[length:inherit] leading-[inherit] font-[inherit]`:t.getButtonSizeClasses(l),c===`link`?`inline`:t.getButtonDisplayClasses(u),t.getButtonFocusRing(s,c),c===`link`&&C&&`no-underline`,d&&`opacity-70 cursor-wait`,S&&C&&`pointer-events-none`,S&&C&&!d&&c!==`link`&&`opacity-button-disabled`,h);if(S){let e=_,t=t=>{if(C){t.preventDefault();return}x(),e.onClick?.(t)};return(0,r.jsxs)(`a`,{ref:o,className:w,"aria-disabled":C,tabIndex:C?-1:e.tabIndex,...e,onClick:t,children:[c===`link`&&(d||p)?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:d?(0,r.jsx)(i,{}):p}):d?(0,r.jsx)(i,{}):p,g,!d&&(c===`link`&&m?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:m}):m)]})}let T=_,E=e=>{if(C){e.preventDefault();return}x(),T.onClick?.(e)};return(0,r.jsxs)(`button`,{ref:o,className:w,disabled:C,...T,onClick:E,children:[c===`link`&&(d||p)?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:d?(0,r.jsx)(i,{}):p}):d?(0,r.jsx)(i,{}):p,g,!d&&(c===`link`&&m?(0,r.jsx)(`span`,{className:`inline-flex align-middle`,children:m}):m)]})});a.displayName=`Button`,exports.Button=a;

package/dist/{src/components → components}/button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonBaseProps, ButtonLinkProps } from './types';
+import { ButtonBaseProps, ButtonLinkProps } from './types.js';
 /**
  * 기본 버튼. `variant`(primary/secondary/tertiary/danger) × `appearance`(filled/outlined/transparent)
  * × `size`(mini/small/medium/large) 조합으로 표현한다.
@@ -6,6 +6,10 @@ import { ButtonBaseProps, ButtonLinkProps } from './types';
  * - 저장·정산·전송 같은 **비가역 async 액션**에는 `clickThrottleMs`로 더블클릭을 막는다.
  * - 모달 푸터·모바일 등 부모 폭을 채워야 하면 `display="block"`.
  * - 시각은 버튼이지만 실제 이동이 필요하면 `as="a"` + `href`(링크로 렌더, loading/disabled 동일 동작).
+ * - `appearance="link"`는 문장 안에 배치하며 size와 display를 무시하고 부모 글자 크기·줄높이·글꼴을 상속한다.
+ *   `font-[inherit]`는 font-family만 상속하며, 글자 굵기는 기본 CSS(preflight)의 폼 컨트롤 상속 규칙을 따른다.
+ *   `as="a"`는 문장 사이에서 줄바꿈되며, 기본 button은 브라우저의 인라인 블록으로 배치된다.
+ * - 크기와 색상은 `className`으로 덮어쓸 수 있다.
  *
  * @example
  * ```tsx

package/dist/components/button/Button.esm.js

@@ -1,84 +1,89 @@
-import { getButtonBaseClasses as e, getButtonColorClasses as t, getButtonDisplayClasses as n, getButtonFocusRing as r, getButtonSizeClasses as i } from "./utils.esm.js";
-import { forwardRef as a, useEffect as o, useRef as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { getButtonBaseClasses as t, getButtonColorClasses as n, getButtonDisplayClasses as r, getButtonFocusRing as i, getButtonSizeClasses as a } from "./utils.esm.js";
+import { forwardRef as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
-var d = () => /* @__PURE__ */ u("svg", {
-	className: "animate-spin h-4 w-4",
+var f = () => /* @__PURE__ */ d("svg", {
+	className: "animate-button-spinner size-button-spinner-small",
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
 	viewBox: "0 0 24 24",
-	children: [/* @__PURE__ */ l("circle", {
-		className: "opacity-25",
+	children: [/* @__PURE__ */ u("circle", {
+		className: "opacity-button-spinner-track",
 		cx: "12",
 		cy: "12",
 		r: "10",
 		stroke: "currentColor",
 		strokeWidth: "4"
-	}), /* @__PURE__ */ l("path", {
-		className: "opacity-75",
+	}), /* @__PURE__ */ u("path", {
+		className: "opacity-button-spinner-head",
 		fill: "currentColor",
 		d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
 	})]
-}), f = a((a, f) => {
-	let { variant: p = "primary", appearance: m = "filled", size: h = "medium", display: g = "inline", loading: _ = !1, clickThrottleMs: v = 0, leadingIcon: y, trailingIcon: b, className: x = "", children: S, ...C } = a, [w, T] = c(!1), E = s(null), D = () => {
-		v && (T(!0), E.current && clearTimeout(E.current), E.current = setTimeout(() => {
-			T(!1), E.current = null;
-		}, v));
+}), p = o((o, p) => {
+	let { variant: m = "primary", appearance: h = "filled", size: g = "medium", display: _ = "inline", loading: v = !1, clickThrottleMs: y = 0, leadingIcon: b, trailingIcon: x, className: S = "", children: C, ...w } = o, [T, E] = l(!1), D = c(null), O = () => {
+		y && (E(!0), D.current && clearTimeout(D.current), D.current = setTimeout(() => {
+			E(!1), D.current = null;
+		}, y));
 	};
-	o(() => () => {
-		E.current && clearTimeout(E.current);
+	s(() => () => {
+		D.current && clearTimeout(D.current);
 	}, []);
-	let O = [
-		e(),
-		t(p, m),
-		i(h),
-		n(g),
-		r(p),
-		_ ? "opacity-70 cursor-wait" : "",
-		x
-	].filter(Boolean).join(" "), k = "as" in a && a.as === "a", A = ("disabled" in a ? a.disabled : !1) || _ || w;
+	let k = "as" in o && o.as === "a", A = ("disabled" in o ? o.disabled : !1) || v || T, j = e(t(h), n(m, h), h === "link" ? "h-auto min-w-0 border-0 p-0 align-baseline text-start underline hover:decoration-2 hover:underline-offset-2 active:decoration-[3px] active:underline-offset-4 text-[length:inherit] leading-[inherit] font-[inherit]" : a(g), h === "link" ? "inline" : r(_), i(m, h), h === "link" && A && "no-underline", v && "opacity-70 cursor-wait", k && A && "pointer-events-none", k && A && !v && h !== "link" && "opacity-button-disabled", S);
 	if (k) {
-		let e = C, t = (t) => {
+		let e = w, t = (t) => {
 			if (A) {
 				t.preventDefault();
 				return;
 			}
-			D(), e.onClick?.(t);
+			O(), e.onClick?.(t);
 		};
-		return /* @__PURE__ */ u("a", {
-			ref: f,
-			className: `${O} ${A ? "pointer-events-none opacity-60" : ""}`.trim(),
+		return /* @__PURE__ */ d("a", {
+			ref: p,
+			className: j,
 			"aria-disabled": A,
 			tabIndex: A ? -1 : e.tabIndex,
 			...e,
 			onClick: t,
 			children: [
-				_ ? /* @__PURE__ */ l(d, {}) : y,
-				S,
-				!_ && b
+				h === "link" && (v || b) ? /* @__PURE__ */ u("span", {
+					className: "inline-flex align-middle",
+					children: v ? /* @__PURE__ */ u(f, {}) : b
+				}) : v ? /* @__PURE__ */ u(f, {}) : b,
+				C,
+				!v && (h === "link" && x ? /* @__PURE__ */ u("span", {
+					className: "inline-flex align-middle",
+					children: x
+				}) : x)
 			]
 		});
 	}
-	let j = C, M = (e) => {
+	let M = w, N = (e) => {
 		if (A) {
 			e.preventDefault();
 			return;
 		}
-		D(), j.onClick?.(e);
+		O(), M.onClick?.(e);
 	};
-	return /* @__PURE__ */ u("button", {
-		ref: f,
-		className: O,
+	return /* @__PURE__ */ d("button", {
+		ref: p,
+		className: j,
 		disabled: A,
-		...j,
-		onClick: M,
+		...M,
+		onClick: N,
 		children: [
-			_ ? /* @__PURE__ */ l(d, {}) : y,
-			S,
-			!_ && b
+			h === "link" && (v || b) ? /* @__PURE__ */ u("span", {
+				className: "inline-flex align-middle",
+				children: v ? /* @__PURE__ */ u(f, {}) : b
+			}) : v ? /* @__PURE__ */ u(f, {}) : b,
+			C,
+			!v && (h === "link" && x ? /* @__PURE__ */ u("span", {
+				className: "inline-flex align-middle",
+				children: x
+			}) : x)
 		]
 	});
 });
-f.displayName = "Button";
+p.displayName = "Button";
 //#endregion
-export { f as Button };
+export { p as Button };

package/dist/{src/components → components}/button/index.d.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps, ButtonBaseProps, ButtonLinkProps, ButtonVariant, ButtonAppearance, ButtonSize, ButtonDisplay, } from './types';
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonBaseProps, ButtonLinkProps, ButtonVariant, ButtonAppearance, ButtonSize, ButtonDisplay, } from './types.js';

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

@@ -1,12 +1,14 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
-export type ButtonAppearance = "filled" | "outlined" | "transparent";
+export type ButtonAppearance = "filled" | "outlined" | "transparent" | "link";
 export type ButtonSize = "mini" | "small" | "medium" | "large";
 export type ButtonDisplay = "inline" | "block";
 export interface ButtonCommonProps {
     variant?: ButtonVariant;
     appearance?: ButtonAppearance;
+    /** link 모양에서는 크기 대신 부모의 글자 크기·줄높이·글꼴을 상속한다. 굵기는 기본 CSS의 폼 컨트롤 상속 규칙을 따른다. */
     size?: ButtonSize;
+    /** link 모양에서는 block도 무시하고 문장 안에 배치한다. */
     display?: ButtonDisplay;
     loading?: boolean;
     /** 클릭 후 N ms 동안 추가 클릭 무시 — 더블클릭 방지 */

package/dist/components/button/utils.cjs

@@ -0,0 +1 @@
+var e=(e=`primary`,t=`filled`)=>({primary:{link:`border-transparent bg-transparent text-primary-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},secondary:{link:`border-transparent bg-transparent text-fg-muted hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled`},tertiary:{link:`border-transparent bg-transparent text-fg-subtle hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled`,outlined:`bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled`},danger:{link:`border-transparent bg-transparent text-error-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled`,filled:`border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled`,outlined:`bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent`,transparent:`border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border`}})[e][t],t=(e=`medium`)=>({mini:`h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini`,small:`h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small`,medium:`h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium`,large:`h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large`})[e],n=(e=`inline`)=>({inline:`inline-flex`,block:`flex w-full`})[e],r=(e=`filled`)=>`items-center justify-center ${e===`link`?``:`font-control-action `}border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button ${e===`link`?`box-decoration-clone focus-visible:ring-offset-2 focus-visible:ring-offset-transparent`:`focus-visible:ring-inset`} disabled:cursor-not-allowed disabled:pointer-events-none`,i=(e=`primary`,t=`filled`)=>t===`link`?`focus-visible:ring-primary-fg`:{primary:`focus-visible:ring-focus-primary`,secondary:`focus-visible:ring-focus-primary`,tertiary:`focus-visible:ring-border-default`,danger:`focus-visible:ring-focus-danger`}[e];exports.getButtonBaseClasses=r,exports.getButtonColorClasses=e,exports.getButtonDisplayClasses=n,exports.getButtonFocusRing=i,exports.getButtonSizeClasses=t;

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

@@ -1,6 +1,6 @@
-import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './types';
+import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './types.js';
 export declare const getButtonColorClasses: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;
 export declare const getButtonSizeClasses: (size?: ButtonSize) => string;
 export declare const getButtonDisplayClasses: (display?: ButtonDisplay) => string;
-export declare const getButtonBaseClasses: () => string;
-export declare const getButtonFocusRing: (variant?: ButtonVariant) => string;
+export declare const getButtonBaseClasses: (appearance?: ButtonAppearance) => string;
+export declare const getButtonFocusRing: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;

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

@@ -1,38 +1,42 @@
 //#region src/components/button/utils.ts
 var e = (e = "primary", t = "filled") => ({
 	primary: {
-		filled: "border-transparent bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700 disabled:bg-secondary-200 disabled:text-secondary-300 dark:disabled:bg-secondary-700 dark:disabled:text-secondary-500",
-		outlined: "bg-white dark:bg-transparent text-secondary-800 dark:text-secondary-100 border-secondary-400 dark:border-secondary-500 hover:bg-secondary-50 dark:hover:bg-secondary-800 active:bg-secondary-100 dark:active:bg-secondary-700 disabled:text-secondary-300 disabled:border-secondary-200 disabled:bg-transparent",
-		transparent: "border-transparent bg-transparent text-secondary-800 dark:text-secondary-100 hover:bg-secondary-50 dark:hover:bg-secondary-800 active:bg-secondary-100 dark:active:bg-secondary-700 disabled:text-secondary-300"
+		link: "border-transparent bg-transparent text-primary-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled",
+		filled: "border-transparent bg-primary text-fg-inverse hover:bg-primary-hover active:bg-primary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-default border-border-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-subtle disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-default hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
 	},
 	secondary: {
-		filled: "border-transparent bg-primary-300 text-white hover:bg-primary-500 active:bg-primary-600 disabled:bg-secondary-200 disabled:text-secondary-300 dark:disabled:bg-secondary-700 dark:disabled:text-secondary-500",
-		outlined: "bg-white dark:bg-transparent text-secondary-500 dark:text-secondary-400 border-secondary-200 dark:border-secondary-700 hover:bg-secondary-50 dark:hover:bg-secondary-800 active:bg-secondary-100 dark:active:bg-secondary-700 disabled:text-secondary-300 disabled:border-secondary-100 disabled:bg-transparent",
-		transparent: "border-transparent bg-transparent text-secondary-500 dark:text-secondary-400 hover:bg-secondary-50 dark:hover:bg-secondary-800 active:bg-secondary-100 dark:active:bg-secondary-700 disabled:text-secondary-300"
+		link: "border-transparent bg-transparent text-fg-muted hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled",
+		filled: "border-transparent bg-primary-subtle text-primary-fg hover:bg-button-secondary-hover active:bg-button-secondary-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-muted border-border-subtle hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-muted hover:bg-bg-subtle active:bg-bg-muted disabled:text-fg-disabled"
 	},
 	tertiary: {
-		filled: "border-transparent bg-secondary-100 dark:bg-secondary-700 text-secondary-500 dark:text-secondary-300 hover:bg-secondary-200 dark:hover:bg-secondary-600 active:bg-secondary-300 dark:active:bg-secondary-500 disabled:bg-secondary-50 dark:disabled:bg-secondary-900 disabled:text-secondary-300",
-		outlined: "bg-white dark:bg-transparent text-secondary-400 dark:text-secondary-500 border-secondary-200 dark:border-secondary-600 hover:bg-secondary-50 dark:hover:bg-secondary-900 active:bg-secondary-100 dark:active:bg-secondary-800 disabled:text-secondary-300 disabled:border-secondary-100 disabled:bg-transparent",
-		transparent: "border-transparent bg-transparent text-secondary-400 dark:text-secondary-500 hover:bg-secondary-50 dark:hover:bg-secondary-900 active:bg-secondary-100 dark:active:bg-secondary-800 disabled:text-secondary-300"
+		link: "border-transparent bg-transparent text-fg-subtle hover:text-fg-default active:text-fg-default disabled:text-fg-disabled aria-disabled:text-fg-disabled",
+		filled: "border-transparent bg-bg-subtle text-fg-muted hover:bg-bg-muted active:bg-bg-disabled disabled:bg-bg-page disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-fg-subtle border-border-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled disabled:border-border-faint disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-fg-subtle hover:bg-bg-page active:bg-bg-subtle disabled:text-fg-disabled"
 	},
 	danger: {
-		filled: "border-transparent bg-error-500 text-white hover:bg-error-600 active:bg-error-700 disabled:bg-secondary-200 disabled:text-secondary-300 dark:disabled:bg-secondary-700 dark:disabled:text-secondary-500",
-		outlined: "bg-white dark:bg-transparent text-error-600 dark:text-error-400 border-error-500 dark:border-error-400 hover:bg-error-50 dark:hover:bg-error-950 active:bg-error-100 dark:active:bg-error-900 disabled:text-error-300 disabled:border-error-200 disabled:bg-transparent",
-		transparent: "border-transparent bg-transparent text-error-600 dark:text-error-400 hover:bg-error-50 dark:hover:bg-error-950 active:bg-error-100 dark:active:bg-error-900 disabled:text-error-300"
+		link: "border-transparent bg-transparent text-error-fg disabled:text-fg-disabled aria-disabled:text-fg-disabled",
+		filled: "border-transparent bg-error text-fg-inverse hover:bg-error-hover active:bg-error-active disabled:bg-bg-disabled disabled:text-fg-disabled",
+		outlined: "bg-bg-surface text-error-fg border-border-danger hover:bg-error-subtle active:bg-error-muted disabled:text-error-border disabled:border-error-border disabled:bg-transparent",
+		transparent: "border-transparent bg-transparent text-error-fg hover:bg-error-subtle active:bg-error-muted disabled:text-error-border"
 	}
 })[e][t], t = (e = "medium") => ({
-	mini: "h-7 px-2 text-xs gap-1 rounded-md",
-	small: "h-9 px-3 text-sm gap-1.5 rounded-lg",
-	medium: "h-11 px-3.5 text-sm gap-2 rounded-xl",
-	large: "h-12 px-5 text-base gap-2 rounded-xl"
+	mini: "h-control-mini px-control-pad-mini text-control-mini gap-button-mini rounded-control-mini",
+	small: "h-control-small px-control-pad-small text-control-small gap-button-small rounded-control-small",
+	medium: "h-control-medium px-control-pad-medium text-control-medium gap-button-medium rounded-control-medium",
+	large: "h-control-large px-control-pad-large text-control-large gap-button-large rounded-control-large"
 })[e], n = (e = "inline") => ({
 	inline: "inline-flex",
 	block: "flex w-full"
-})[e], r = () => "items-center justify-center font-medium border-[1.5px] transition-colors duration-200 ease-out outline-none focus:ring-2 focus:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none", i = (e = "primary") => ({
-	primary: "focus:ring-primary-300",
-	secondary: "focus:ring-primary-300",
-	tertiary: "focus:ring-secondary-400",
-	danger: "focus:ring-error-300"
-})[e];
+})[e], r = (e = "filled") => `items-center justify-center ${e === "link" ? "" : "font-control-action "}border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button ${e === "link" ? "box-decoration-clone focus-visible:ring-offset-2 focus-visible:ring-offset-transparent" : "focus-visible:ring-inset"} disabled:cursor-not-allowed disabled:pointer-events-none`, i = (e = "primary", t = "filled") => t === "link" ? "focus-visible:ring-primary-fg" : {
+	primary: "focus-visible:ring-focus-primary",
+	secondary: "focus-visible:ring-focus-primary",
+	tertiary: "focus-visible:ring-border-default",
+	danger: "focus-visible:ring-focus-danger"
+}[e];
 //#endregion
 export { r as getButtonBaseClasses, e as getButtonColorClasses, n as getButtonDisplayClasses, i as getButtonFocusRing, t as getButtonSizeClasses };

package/dist/components/checkbox/Checkbox.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs"),t=require("./utils.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(({variant:n,inputType:i=`checkbox`,size:a=24,baseColor:o=`primary`,label:s,onCheckedChange:c,onChange:l,className:u=``,...d},f)=>{let p=e=>{l?.(e),c?.(e.target.checked)},m=t.getCheckboxVariantClasses(n,o),h=t.getCheckboxSizeStyle(a),g=(0,r.jsxs)(`div`,{className:`inline-flex items-center relative`,children:[(0,r.jsx)(`input`,{ref:f,type:i,className:`sr-only peer`,onChange:p,...d}),(0,r.jsx)(`div`,{className:e.cn(m,`peer-checked:[&_path]:scale-100`,u),style:h,children:(0,r.jsx)(`svg`,{className:`absolute inset-0 w-full h-full pointer-events-none`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:(0,r.jsx)(`path`,{d:`M5 12l5 5L20 7`,stroke:`currentColor`,strokeWidth:`2.5`,strokeLinecap:`round`,strokeLinejoin:`round`,className:`origin-center scale-0 transition-transform duration-200 ease-out`})})})]});return s?(0,r.jsxs)(`label`,{className:t.getLabelClasses(),children:[g,(0,r.jsx)(`span`,{className:`text-base text-fg-default`,children:s})]}):g});i.displayName=`CheckboxInternal`;var a=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`circle`,...e}));a.displayName=`Checkbox.Circle`;var o=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`line`,...e}));o.displayName=`Checkbox.Line`;var s=(0,n.forwardRef)((e,t)=>(0,r.jsx)(i,{ref:t,variant:`lineTransparent`,...e}));s.displayName=`Checkbox.LineTransparent`;var c={Circle:a,Line:o,LineTransparent:s};exports.Checkbox=c,exports.CheckboxCircle=a,exports.CheckboxLine=o,exports.CheckboxLineTransparent=s;

package/dist/{src/components → components}/checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { CheckboxProps } from './types';
+import { CheckboxProps } from './types.js';
 /**
  * Checkbox.Circle 컴포넌트 — 원형 아이콘을 사용하는 체크박스
  */

package/dist/components/checkbox/Checkbox.esm.js

@@ -1,27 +1,28 @@
-import { getCheckboxSizeStyle as e, getCheckboxVariantClasses as t, getLabelClasses as n } from "./utils.esm.js";
-import { forwardRef as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { getCheckboxSizeStyle as t, getCheckboxVariantClasses as n, getLabelClasses as r } from "./utils.esm.js";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/checkbox/Checkbox.tsx
-var o = r(({ variant: r, inputType: o = "checkbox", size: s = 24, baseColor: c = "primary", label: l, onCheckedChange: u, onChange: d, className: f = "", ...p }, m) => {
-	let h = (e) => {
-		d?.(e), u?.(e.target.checked);
-	}, g = t(r, c), _ = e(s), v = /* @__PURE__ */ a("div", {
+var s = i(({ variant: i, inputType: s = "checkbox", size: c = 24, baseColor: l = "primary", label: u, onCheckedChange: d, onChange: f, className: p = "", ...m }, h) => {
+	let g = (e) => {
+		f?.(e), d?.(e.target.checked);
+	}, _ = n(i, l), v = t(c), y = /* @__PURE__ */ o("div", {
 		className: "inline-flex items-center relative",
-		children: [/* @__PURE__ */ i("input", {
-			ref: m,
-			type: o,
+		children: [/* @__PURE__ */ a("input", {
+			ref: h,
+			type: s,
 			className: "sr-only peer",
-			onChange: h,
-			...p
-		}), /* @__PURE__ */ i("div", {
-			className: `${g} ${f} peer-checked:[&_path]:scale-100`,
-			style: _,
-			children: /* @__PURE__ */ i("svg", {
+			onChange: g,
+			...m
+		}), /* @__PURE__ */ a("div", {
+			className: e(_, "peer-checked:[&_path]:scale-100", p),
+			style: v,
+			children: /* @__PURE__ */ a("svg", {
 				className: "absolute inset-0 w-full h-full pointer-events-none",
 				viewBox: "0 0 24 24",
 				fill: "none",
 				xmlns: "http://www.w3.org/2000/svg",
-				children: /* @__PURE__ */ i("path", {
+				children: /* @__PURE__ */ a("path", {
 					d: "M5 12l5 5L20 7",
 					stroke: "currentColor",
 					strokeWidth: "2.5",
@@ -32,37 +33,37 @@ var o = r(({ variant: r, inputType: o = "checkbox", size: s = 24, baseColor: c =
 			})
 		})]
 	});
-	return l ? /* @__PURE__ */ a("label", {
-		className: n(),
-		children: [v, /* @__PURE__ */ i("span", {
-			className: "text-base text-neutral-900 dark:text-neutral-100",
-			children: l
+	return u ? /* @__PURE__ */ o("label", {
+		className: r(),
+		children: [y, /* @__PURE__ */ a("span", {
+			className: "text-base text-fg-default",
+			children: u
 		})]
-	}) : v;
+	}) : y;
 });
-o.displayName = "CheckboxInternal";
-var s = r((e, t) => /* @__PURE__ */ i(o, {
+s.displayName = "CheckboxInternal";
+var c = i((e, t) => /* @__PURE__ */ a(s, {
 	ref: t,
 	variant: "circle",
 	...e
 }));
-s.displayName = "Checkbox.Circle";
-var c = r((e, t) => /* @__PURE__ */ i(o, {
+c.displayName = "Checkbox.Circle";
+var l = i((e, t) => /* @__PURE__ */ a(s, {
 	ref: t,
 	variant: "line",
 	...e
 }));
-c.displayName = "Checkbox.Line";
-var l = r((e, t) => /* @__PURE__ */ i(o, {
+l.displayName = "Checkbox.Line";
+var u = i((e, t) => /* @__PURE__ */ a(s, {
 	ref: t,
 	variant: "lineTransparent",
 	...e
 }));
-l.displayName = "Checkbox.LineTransparent";
-var u = {
-	Circle: s,
-	Line: c,
-	LineTransparent: l
+u.displayName = "Checkbox.LineTransparent";
+var d = {
+	Circle: c,
+	Line: l,
+	LineTransparent: u
 };
 //#endregion
-export { u as Checkbox, s as CheckboxCircle, c as CheckboxLine, l as CheckboxLineTransparent };
+export { d as Checkbox, c as CheckboxCircle, l as CheckboxLine, u as CheckboxLineTransparent };

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

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxCircle, CheckboxLine, CheckboxLineTransparent, } from './Checkbox.js';
+export type { CheckboxProps, CheckboxVariant } from './types.js';

package/dist/components/checkbox/utils.cjs

@@ -0,0 +1 @@
+function e(){return`appearance-none cursor-pointer transition-all duration-200 focus:outline-hidden`}function t(t=`primary`){return`${e()} rounded-full border-2 ${{primary:`border-border-default peer-checked:bg-primary peer-checked:border-primary text-fg-inverse`,secondary:`border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse`,neutral:`border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse`}[t]} relative flex items-center justify-center transition-all duration-200`}function n(t=`primary`){return`${e()} rounded-checkbox border-2 ${{primary:`border-border-default peer-checked:bg-primary peer-checked:border-primary text-fg-inverse`,secondary:`border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse`,neutral:`border-border-default peer-checked:bg-neutral-fill peer-checked:border-neutral-fill text-fg-inverse`}[t]} relative flex items-center justify-center transition-all duration-200`}function r(t=`primary`){return`${e()} rounded-checkbox border-2 bg-transparent ${{primary:`border-border-subtle peer-checked:border-primary text-primary-fg`,secondary:`border-border-subtle peer-checked:border-neutral-fill text-neutral-fg`,neutral:`border-border-subtle peer-checked:border-neutral-fill text-neutral-fg`}[t]} relative flex items-center justify-center transition-all duration-200`}function i(e,i=`primary`){switch(e){case`circle`:return t(i);case`line`:return n(i);case`lineTransparent`:return r(i);default:return n(i)}}function a(e=24){return{width:`${e}px`,height:`${e}px`}}function o(){return`inline-flex items-center gap-2 cursor-pointer select-none`}exports.getCheckboxSizeStyle=a,exports.getCheckboxVariantClasses=i,exports.getLabelClasses=o;

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

@@ -1,4 +1,4 @@
-import { CheckboxProps, CheckboxVariant } from './types';
+import { CheckboxProps, CheckboxVariant } from './types.js';
 /**
  * Checkbox의 기본 스타일 클래스를 반환합니다.
  */