@thewrong/ui 0.2.0 → 0.3.0

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(),t.getButtonColorClasses(s,c),t.getButtonSizeClasses(l),t.getButtonDisplayClasses(u),t.getButtonFocusRing(s),d&&`opacity-70 cursor-wait`,S&&C&&`pointer-events-none`,S&&C&&!d&&`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:[d?(0,r.jsx)(i,{}):p,g,!d&&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:[d?(0,r.jsx)(i,{}):p,g,!d&&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,7 @@ import { ButtonBaseProps, ButtonLinkProps } from './types';
  * - 저장·정산·전송 같은 **비가역 async 액션**에는 `clickThrottleMs`로 더블클릭을 막는다.
  * - 모달 푸터·모바일 등 부모 폭을 채워야 하면 `display="block"`.
  * - 시각은 버튼이지만 실제 이동이 필요하면 `as="a"` + `href`(링크로 렌더, loading/disabled 동일 동작).
+ * - 크기와 색상은 `className`으로 덮어쓸 수 있다.
  *
  * @example
  * ```tsx

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

@@ -1,84 +1,77 @@
-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(), n(m, h), a(g), r(_), i(m), v && "opacity-70 cursor-wait", k && A && "pointer-events-none", k && A && !v && "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
+				v ? /* @__PURE__ */ u(f, {}) : b,
+				C,
+				!v && 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
+			v ? /* @__PURE__ */ u(f, {}) : b,
+			C,
+			!v && 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/components/button/utils.cjs

@@ -0,0 +1 @@
+var e=(e=`primary`,t=`filled`)=>({primary:{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-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-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 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=()=>`items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none`,i=(e=`primary`)=>({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,4 +1,4 @@
-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;

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

@@ -1,38 +1,38 @@
 //#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"
+		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"
+		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"
+		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"
+		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], r = () => "items-center justify-center font-control-action border-button transition-colors duration-button ease-button outline-none focus-visible:ring-button focus-visible:ring-inset disabled:cursor-not-allowed disabled:pointer-events-none", i = (e = "primary") => ({
+	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의 기본 스타일 클래스를 반환합니다.
  */

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

@@ -4,23 +4,23 @@ function e() {
 }
 function t(t = "primary") {
 	return `${e()} rounded-full border-2 ${{
-		primary: "border-neutral-300 peer-checked:bg-primary-500 peer-checked:border-primary-500 text-white",
-		secondary: "border-neutral-300 peer-checked:bg-secondary-500 peer-checked:border-secondary-500 text-white",
-		neutral: "border-neutral-300 peer-checked:bg-neutral-600 peer-checked:border-neutral-600 text-white"
+		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-sm border-2 ${{
-		primary: "border-neutral-300 peer-checked:bg-primary-500 peer-checked:border-primary-500 text-white",
-		secondary: "border-neutral-300 peer-checked:bg-secondary-500 peer-checked:border-secondary-500 text-white",
-		neutral: "border-neutral-300 peer-checked:bg-neutral-600 peer-checked:border-neutral-600 text-white"
+	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-sm border-2 bg-transparent ${{
-		primary: "border-neutral-200 peer-checked:border-primary-500 text-primary-500",
-		secondary: "border-neutral-200 peer-checked:border-secondary-500 text-secondary-500",
-		neutral: "border-neutral-200 peer-checked:border-neutral-600 text-neutral-600"
+	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") {

package/dist/components/collapsible/Collapsible.cjs

@@ -0,0 +1 @@
+const e=require("../../lib/utils.cjs");let t=require("react/jsx-runtime");function n({open:n,durationMs:r=200,ease:i=`cubic-bezier(0.16, 1, 0.3, 1)`,unmountWhenClosed:a=!1,fade:o=!0,className:s=``,children:c}){return a&&!n?null:(0,t.jsx)(`div`,{className:e.cn(`grid`,s),style:{gridTemplateRows:n?`1fr`:`0fr`,opacity:o?+!!n:void 0,transition:[`grid-template-rows ${r}ms ${i}`,o?`opacity ${r}ms ${i}`:null].filter(Boolean).join(`, `)},"aria-hidden":!n,children:(0,t.jsx)(`div`,{className:`overflow-hidden`,children:c})})}exports.Collapsible=n;

package/dist/components/collapsible/Collapsible.esm.js

@@ -1,19 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
+import { cn as e } from "../../lib/utils.esm.js";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/collapsible/Collapsible.tsx
-function t({ open: t, durationMs: n = 200, ease: r = "cubic-bezier(0.16, 1, 0.3, 1)", unmountWhenClosed: i = !1, fade: a = !0, className: o = "", children: s }) {
-	return i && !t ? null : /* @__PURE__ */ e("div", {
-		className: `grid ${o}`,
+function n({ open: n, durationMs: r = 200, ease: i = "cubic-bezier(0.16, 1, 0.3, 1)", unmountWhenClosed: a = !1, fade: o = !0, className: s = "", children: c }) {
+	return a && !n ? null : /* @__PURE__ */ t("div", {
+		className: e("grid", s),
 		style: {
-			gridTemplateRows: t ? "1fr" : "0fr",
-			opacity: a ? +!!t : void 0,
-			transition: [`grid-template-rows ${n}ms ${r}`, a ? `opacity ${n}ms ${r}` : null].filter(Boolean).join(", ")
+			gridTemplateRows: n ? "1fr" : "0fr",
+			opacity: o ? +!!n : void 0,
+			transition: [`grid-template-rows ${r}ms ${i}`, o ? `opacity ${r}ms ${i}` : null].filter(Boolean).join(", ")
 		},
-		"aria-hidden": !t,
-		children: /* @__PURE__ */ e("div", {
+		"aria-hidden": !n,
+		children: /* @__PURE__ */ t("div", {
 			className: "overflow-hidden",
-			children: s
+			children: c
 		})
 	});
 }
 //#endregion
-export { t as Collapsible };
+export { n as Collapsible };

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

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

package/dist/components/copyable-text/CopyableText.cjs

@@ -0,0 +1 @@
+require("../../_virtual/_rolldown/runtime.cjs");const e=require("../../lib/utils.cjs"),t=require("../button/Button.cjs"),n=require("../../node_modules/lucide-react/dist/esm/icons/check.cjs"),r=require("../../node_modules/lucide-react/dist/esm/icons/copy.cjs");let i=require("react"),a=require("react/jsx-runtime"),o=require("react-hot-toast");var s=1500;function c({value:c,children:l,label:u,className:d,iconOnly:f=!1,feedbackDurationMs:p=s}){let[m,h]=(0,i.useState)(!1),g=(0,i.useRef)(null);(0,i.useEffect)(()=>()=>{g.current!==null&&window.clearTimeout(g.current)},[]);let _=async()=>{try{await navigator.clipboard.writeText(c),h(!0),o.default.success(u?`${u}을(를) 복사했습니다.`:`복사했습니다.`),g.current!==null&&window.clearTimeout(g.current),g.current=window.setTimeout(()=>{h(!1),g.current=null},p)}catch{o.default.error(u?`${u} 복사에 실패했습니다.`:`복사에 실패했습니다.`)}},v=m?(0,a.jsx)(n.Check,{"aria-hidden":`true`,className:f?`size-4`:`size-3.5 shrink-0`}):(0,a.jsx)(r.Copy,{"aria-hidden":`true`,className:f?`size-4`:`size-3.5 shrink-0 opacity-60`});return f?(0,a.jsx)(t.Button,{type:`button`,variant:`secondary`,appearance:`transparent`,"aria-label":u?`${u} 복사`:`복사`,title:u?`클릭하여 ${u} 복사`:`클릭하여 복사`,size:`mini`,className:e.cn(`w-control-mini px-0`,m&&`text-success-fg`,d),onClick:()=>void _(),children:v}):(0,a.jsxs)(`button`,{type:`button`,onClick:()=>void _(),"aria-label":u?`${u} 복사`:`복사`,title:u?`클릭하여 ${u} 복사`:`클릭하여 복사`,className:e.cn(`inline-flex items-center gap-1 rounded-control-mini text-fg-accent underline decoration-transparent underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-none focus-visible:ring-control focus-visible:ring-focus-primary-soft`,m&&`text-success-fg`,d),children:[(0,a.jsx)(`span`,{children:l??c}),v]})}exports.CopyableText=c;