@tipp/ui 2.5.0 → 2.7.0

package/dist/atoms/check-box-card.cjs

@@ -1,8 +1,37 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,10 +49,58 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/atoms/check-box-card.tsx
 var check_box_card_exports = {};
 __export(check_box_card_exports, {
-  CheckboxCards: () => import_themes.CheckboxCards
+  CheckboxCards: () => CheckboxCards
 });
 module.exports = __toCommonJS(check_box_card_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
+var import_react = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/check-box-card.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Root = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const appliedColor = colorClassName ? void 0 : radixColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.CheckboxCards.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      color: appliedColor,
+      ref
+    })
+  );
+});
+Root.displayName = "CheckboxCards.Root";
+var CheckboxCards = __spreadProps(__spreadValues({}, import_themes.CheckboxCards), {
+  Root
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CheckboxCards

package/dist/atoms/check-box-card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/check-box-card.tsx"],"sourcesContent":["export { CheckboxCards } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAA8B;","names":[]}
+{"version":3,"sources":["../../src/atoms/check-box-card.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import { CheckboxCards as RadixCheckboxCards } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, useMemo } from 'react';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\ntype CheckboxCardsRootProps = DistributiveOmit<\n  React.ComponentPropsWithoutRef<typeof RadixCheckboxCards.Root>,\n  'color'\n> & {\n  color?: UiColor;\n};\n\nconst Root = forwardRef<\n  React.ElementRef<typeof RadixCheckboxCards.Root>,\n  CheckboxCardsRootProps\n>((props, ref) => {\n  const { color, className, ...rest } = props;\n\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  // custom color(black)는 className의 변수 override만 사용한다. fallback color를 함께 넘기면\n  // CheckboxCards가 그 color를 자식 Item으로 전파하고, 각 Item이 자기 `data-accent-color`로\n  // gray를 다시 적용해 조상 className override를 자식 스코프에서 덮어버린다.\n  const appliedColor = colorClassName ? undefined : radixColor;\n\n  return (\n    <RadixCheckboxCards.Root\n      {...rest}\n      className={clsx(colorClassName, className)}\n      color={appliedColor}\n      ref={ref}\n    />\n  );\n});\n\nRoot.displayName = 'CheckboxCards.Root';\n\nexport const CheckboxCards: Omit<typeof RadixCheckboxCards, 'Root'> & {\n  Root: typeof Root;\n} = {\n  ...RadixCheckboxCards,\n  Root,\n};\n\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoD;AACpD,kBAAqB;AACrB,mBAA2C;;;AC2B3C,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;ADpDI;AAjBJ,IAAM,WAAO,yBAGX,CAAC,OAAO,QAAQ;AAChB,QAAsC,YAA9B,SAAO,UApBjB,IAoBwC,IAAT,iBAAS,IAAT,CAArB,SAAO;AAEf,QAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,IACvD,MAAM,aAAa,KAAK;AAAA,IACxB,CAAC,KAAK;AAAA,EACR;AAKA,QAAM,eAAe,iBAAiB,SAAY;AAElD,SACE;AAAA,IAAC,cAAAA,cAAmB;AAAA,IAAnB,iCACK,OADL;AAAA,MAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,MACzC,OAAO;AAAA,MACP;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,gBAET,iCACC,cAAAA,gBADD;AAAA,EAEF;AACF;","names":["RadixCheckboxCards"]}

package/dist/atoms/check-box-card.d.cts

@@ -1 +1,12 @@
-export { CheckboxCards } from '@radix-ui/themes';
+import { CheckboxCards as CheckboxCards$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.cjs';
+
+declare const Root: React__default.ForwardRefExoticComponent<Omit<Omit<CheckboxCards$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref">, "color"> & {
+    color?: UiColor;
+} & React__default.RefAttributes<HTMLDivElement>>;
+declare const CheckboxCards: Omit<typeof CheckboxCards$1, 'Root'> & {
+    Root: typeof Root;
+};
+
+export { CheckboxCards };

package/dist/atoms/check-box-card.d.ts

@@ -1 +1,12 @@
-export { CheckboxCards } from '@radix-ui/themes';
+import { CheckboxCards as CheckboxCards$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.js';
+
+declare const Root: React__default.ForwardRefExoticComponent<Omit<Omit<CheckboxCards$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref">, "color"> & {
+    color?: UiColor;
+} & React__default.RefAttributes<HTMLDivElement>>;
+declare const CheckboxCards: Omit<typeof CheckboxCards$1, 'Root'> & {
+    Root: typeof Root;
+};
+
+export { CheckboxCards };

package/dist/atoms/check-box-card.js

@@ -1,6 +1,7 @@
 import {
   CheckboxCards
-} from "../chunk-MIMJ7LON.js";
+} from "../chunk-JETG3WEI.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   CheckboxCards

package/dist/atoms/check-box-group.cjs

@@ -53,10 +53,36 @@ __export(check_box_group_exports, {
 });
 module.exports = __toCommonJS(check_box_group_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/check-box-group.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Root = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, { children, size = "medium" } = _a, rest = __objRest(_a, ["children", "size"]);
+  const _a = props, { children, size = "medium", color, className } = _a, rest = __objRest(_a, ["children", "size", "color", "className"]);
   const groupSize = (0, import_react.useMemo)(() => {
     switch (size) {
       case "small":
@@ -68,7 +94,19 @@ var Root = (0, import_react.forwardRef)((props, ref) => {
         return "2";
     }
   }, [size]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.CheckboxGroup.Root, __spreadProps(__spreadValues({}, rest), { ref, size: groupSize, children }));
+  const { className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.CheckboxGroup.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      ref,
+      size: groupSize,
+      children
+    })
+  );
 });
 Root.displayName = "CheckboxGroup.Root";
 var CheckboxGroup = {

package/dist/atoms/check-box-group.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/check-box-group.tsx"],"sourcesContent":["import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\ntype RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<\n  typeof RadixCheckboxGroup.Root\n>;\ntype CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n};\n\nconst Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {\n  const { children, size = 'medium', ...rest } = props;\n\n  const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {\n    switch (size) {\n      case 'small':\n        return '1';\n      case 'large':\n        return '3';\n      case 'medium':\n      default:\n        return '2';\n    }\n  }, [size]);\n\n  return (\n    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>\n      {children}\n    </RadixCheckboxGroup.Root>\n  );\n});\n\nRoot.displayName = 'CheckboxGroup.Root';\n\nexport const CheckboxGroup = {\n  Root,\n  Item: RadixCheckboxGroup.Item,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoD;AACpD,mBAA2C;AAyBvC;AAhBJ,IAAM,WAAO,yBAA+C,CAAC,OAAO,QAAQ;AAC1E,QAA+C,YAAvC,YAAU,OAAO,SAX3B,IAWiD,IAAT,iBAAS,IAAT,CAA9B,YAAU;AAElB,QAAM,gBAAY,sBAAyC,MAAM;AAC/D,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,SACE,4CAAC,cAAAA,cAAmB,MAAnB,iCAA4B,OAA5B,EAAkC,KAAU,MAAM,WAChD,WACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA,MAAM,cAAAA,cAAmB;AAC3B;","names":["RadixCheckboxGroup"]}
+{"version":3,"sources":["../../src/atoms/check-box-group.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, useMemo } from 'react';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<\n  typeof RadixCheckboxGroup.Root\n>;\ntype CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * CheckboxGroup은 Radix color prop이 없어 per-instance로는 custom accent(black 등)만\n   * className override로 적용된다. semantic/radix color는 theme accent로만 가능.\n   */\n  color?: UiColor;\n};\n\nconst Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {\n  const { children, size = 'medium', color, className, ...rest } = props;\n\n  const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {\n    switch (size) {\n      case 'small':\n        return '1';\n      case 'large':\n        return '3';\n      case 'medium':\n      default:\n        return '2';\n    }\n  }, [size]);\n\n  const { className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  return (\n    <RadixCheckboxGroup.Root\n      {...rest}\n      className={clsx(colorClassName, className)}\n      ref={ref}\n      size={groupSize}\n    >\n      {children}\n    </RadixCheckboxGroup.Root>\n  );\n});\n\nRoot.displayName = 'CheckboxGroup.Root';\n\nexport const CheckboxGroup = {\n  Root,\n  Item: RadixCheckboxGroup.Item,\n};\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAoD;AACpD,kBAAqB;AACrB,mBAA2C;;;AC2B3C,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;AD/CI;AArBJ,IAAM,WAAO,yBAA+C,CAAC,OAAO,QAAQ;AAC1E,QAAiE,YAAzD,YAAU,OAAO,UAAU,OAAO,UAlB5C,IAkBmE,IAAT,iBAAS,IAAT,CAAhD,YAAU,QAAiB,SAAO;AAE1C,QAAM,gBAAY,sBAAyC,MAAM;AAC/D,YAAQ,MAAM;AAAA,MACZ,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AAAA,MACL;AACE,eAAO;AAAA,IACX;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,EAAE,WAAW,eAAe,QAAI;AAAA,IACpC,MAAM,aAAa,KAAK;AAAA,IACxB,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC,cAAAA,cAAmB;AAAA,IAAnB,iCACK,OADL;AAAA,MAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,MACzC;AAAA,MACA,MAAM;AAAA,MAEL;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA,MAAM,cAAAA,cAAmB;AAC3B;","names":["RadixCheckboxGroup"]}

package/dist/atoms/check-box-group.d.cts

@@ -1,9 +1,15 @@
 import { CheckboxGroup as CheckboxGroup$1 } from '@radix-ui/themes';
 import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.cjs';
 
 declare const CheckboxGroup: {
     Root: React__default.ForwardRefExoticComponent<Omit<Omit<CheckboxGroup$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: "small" | "medium" | "large";
+        /**
+         * CheckboxGroup은 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+         * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
     } & React__default.RefAttributes<HTMLDivElement>>;
     Item: React__default.ForwardRefExoticComponent<CheckboxGroup$1.ItemProps & React__default.RefAttributes<HTMLButtonElement>>;
 };

package/dist/atoms/check-box-group.d.ts

@@ -1,9 +1,15 @@
 import { CheckboxGroup as CheckboxGroup$1 } from '@radix-ui/themes';
 import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.js';
 
 declare const CheckboxGroup: {
     Root: React__default.ForwardRefExoticComponent<Omit<Omit<CheckboxGroup$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref">, "size"> & {
         size?: "small" | "medium" | "large";
+        /**
+         * CheckboxGroup은 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+         * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
     } & React__default.RefAttributes<HTMLDivElement>>;
     Item: React__default.ForwardRefExoticComponent<CheckboxGroup$1.ItemProps & React__default.RefAttributes<HTMLButtonElement>>;
 };

package/dist/atoms/check-box-group.js

@@ -1,6 +1,7 @@
 import {
   CheckboxGroup
-} from "../chunk-W7X7KSJP.js";
+} from "../chunk-WG5OK3YN.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   CheckboxGroup

package/dist/atoms/check-box.cjs

@@ -53,11 +53,37 @@ __export(check_box_exports, {
 });
 module.exports = __toCommonJS(check_box_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/check-box.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Checkbox = (0, import_react.forwardRef)(
   (props, ref) => {
-    const _a = props, { size = "medium" } = _a, rest = __objRest(_a, ["size"]);
+    const _a = props, { size = "medium", color, className } = _a, rest = __objRest(_a, ["size", "color", "className"]);
     const radixSize = (0, import_react.useMemo)(() => {
       switch (size) {
         case "small":
@@ -68,7 +94,16 @@ var Checkbox = (0, import_react.forwardRef)(
           return "3";
       }
     }, [size]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Checkbox, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize }));
+    const { color: radixColor, className: colorClassName } = resolveColor(color);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Checkbox,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize
+      })
+    );
   }
 );
 Checkbox.displayName = "Checkbox";

package/dist/atoms/check-box.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/check-box.tsx"],"sourcesContent":["import {\n  Checkbox as RadixCheckbox,\n  type CheckboxProps as RadixCheckboxProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref): React.ReactNode => {\n    const { size = 'medium', ...rest } = props;\n\n    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n      }\n    }, [size]);\n\n    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAGO;AACP,mBAAoC;AAqBzB;AAfJ,IAAM,eAAW;AAAA,EACtB,CAAC,OAAO,QAAyB;AAC/B,UAAqC,YAA7B,SAAO,SAZnB,IAYyC,IAAT,iBAAS,IAAT,CAApB;AAER,UAAM,gBAAY,sBAAoC,MAAM;AAC1D,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,MACX;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAET,WAAO,4CAAC,cAAAA,UAAA,iCAAkB,OAAlB,EAAwB,KAAU,MAAM,YAAW;AAAA,EAC7D;AACF;AAEA,SAAS,cAAc;","names":["RadixCheckbox"]}
+{"version":3,"sources":["../../src/atoms/check-box.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import {\n  Checkbox as RadixCheckbox,\n  type CheckboxProps as RadixCheckboxProps,\n} from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { useMemo, forwardRef } from 'react';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\nexport type CheckboxProps = Omit<RadixCheckboxProps, 'size' | 'color'> & {\n  size?: 'small' | 'medium' | 'large';\n  color?: UiColor;\n};\n\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref): React.ReactNode => {\n    const { size = 'medium', color, className, ...rest } = props;\n\n    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n          return '3';\n      }\n    }, [size]);\n\n    const { color: radixColor, className: colorClassName } =\n      resolveColor(color);\n\n    return (\n      <RadixCheckbox\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAGO;AACP,kBAAqB;AACrB,mBAAoC;;;ACwBpC,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;ADrDM;AAnBC,IAAM,eAAW;AAAA,EACtB,CAAC,OAAO,QAAyB;AAC/B,UAAuD,YAA/C,SAAO,UAAU,OAAO,UAfpC,IAe2D,IAAT,iBAAS,IAAT,CAAtC,QAAiB,SAAO;AAEhC,UAAM,gBAAY,sBAAoC,MAAM;AAC1D,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO;AAAA,MACX;AAAA,IACF,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,EAAE,OAAO,YAAY,WAAW,eAAe,IACnD,aAAa,KAAK;AAEpB,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA,iCACK,OADL;AAAA,QAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":["RadixCheckbox"]}

package/dist/atoms/check-box.d.cts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { CheckboxProps as CheckboxProps$1 } from '@radix-ui/themes';
+import { UiColor } from '../utils/resolve-color.cjs';
 
-type CheckboxProps = Omit<CheckboxProps$1, 'size'> & {
+type CheckboxProps = Omit<CheckboxProps$1, 'size' | 'color'> & {
     size?: 'small' | 'medium' | 'large';
+    color?: UiColor;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "size"> & {
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "color" | "size"> & {
     size?: "small" | "medium" | "large";
+    color?: UiColor;
 } & React.RefAttributes<HTMLButtonElement>>;
 
 export { Checkbox, type CheckboxProps };

package/dist/atoms/check-box.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { CheckboxProps as CheckboxProps$1 } from '@radix-ui/themes';
+import { UiColor } from '../utils/resolve-color.js';
 
-type CheckboxProps = Omit<CheckboxProps$1, 'size'> & {
+type CheckboxProps = Omit<CheckboxProps$1, 'size' | 'color'> & {
     size?: 'small' | 'medium' | 'large';
+    color?: UiColor;
 };
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "size"> & {
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "color" | "size"> & {
     size?: "small" | "medium" | "large";
+    color?: UiColor;
 } & React.RefAttributes<HTMLButtonElement>>;
 
 export { Checkbox, type CheckboxProps };

package/dist/atoms/check-box.js

@@ -1,6 +1,7 @@
 import {
   Checkbox
-} from "../chunk-VYCYVN3L.js";
+} from "../chunk-ZCGH6TJ3.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Checkbox

package/dist/atoms/code.cjs

@@ -1,8 +1,37 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,10 +49,53 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/atoms/code.tsx
 var code_exports = {};
 __export(code_exports, {
-  Code: () => import_themes.Code
+  Code: () => Code
 });
 module.exports = __toCommonJS(code_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
+var import_react = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/code.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Code = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+    const { color: radixColor, className: colorClassName } = resolveColor(color);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Code,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref
+      })
+    );
+  }
+);
+Code.displayName = "Code";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Code

package/dist/atoms/code.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/code.tsx"],"sourcesContent":["export { Code, type CodeProps } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAqC;","names":[]}
+{"version":3,"sources":["../../src/atoms/code.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import {\n  Code as RadixCode,\n  type CodeProps as RadixCodeProps,\n} from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { forwardRef } from 'react';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\nexport type CodeProps = Omit<RadixCodeProps, 'color'> & {\n  color?: UiColor;\n};\n\nexport const Code = forwardRef<React.ComponentRef<typeof RadixCode>, CodeProps>(\n  (props, ref): React.ReactNode => {\n    const { color, className, ...rest } = props;\n\n    const { color: radixColor, className: colorClassName } =\n      resolveColor(color);\n\n    return (\n      <RadixCode\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n      />\n    );\n  }\n);\n\nCode.displayName = 'Code';\n","import type { BadgeProps as RadixBadgeProps } from '@radix-ui/themes';\n\n/**\n * Radix Themes가 제공하는 accent color union (gray, red, blue, ...).\n * 모든 color 지원 컴포넌트가 동일한 union을 공유하므로 Badge에서 파생한다.\n */\nexport type RadixColor = NonNullable<RadixBadgeProps['color']>;\n\n/** TIPP 시맨틱 color 별칭. */\nexport type SemanticColor = 'error' | 'accent' | 'neutral' | 'success';\n\n/**\n * Radix accent에 대응이 없어 CSS accent override로 처리하는 커스텀 color.\n * (예: black — `style/black.scss`의 `.tipp-accent-black` 참고)\n */\nexport type CustomColor = 'black';\n\n/** color 지원 컴포넌트가 노출하는 통합 color 타입. */\nexport type UiColor = RadixColor | SemanticColor | CustomColor;\n\n/**\n * union 각 멤버에 분배되는 Omit.\n * Radix의 polymorphic 컴포넌트 props(Text/Heading/Link 등 `as`로 분기되는 union)에서\n * 키를 제거할 때 일반 Omit은 union을 단일 객체로 합쳐 `as` 분기를 무너뜨리므로 이 타입을 쓴다.\n */\nexport type DistributiveOmit<T, K extends PropertyKey> = T extends unknown\n  ? Omit<T, K>\n  : never;\n\nconst SEMANTIC_COLOR_MAP: Record<SemanticColor, RadixColor | undefined> = {\n  error: 'red',\n  neutral: 'gray',\n  success: 'green',\n  accent: undefined,\n};\n\ninterface CustomColorConfig {\n  /**\n   * accent override를 적용할 className.\n   */\n  className: string;\n  /**\n   * Radix에 넘길 fallback color.\n   * Text/Heading/Link 등은 `color` prop이 있어야 `data-accent-color`가 붙어\n   * `--accent-*`를 참조하므로, 유효한 Radix color를 함께 넘긴 뒤 className으로\n   * `--accent-*`를 덮어쓴다. (Badge/Button은 prop 없이도 accent 기반이라 무해)\n   */\n  fallbackColor: RadixColor;\n}\n\nconst CUSTOM_COLOR_MAP: Record<CustomColor, CustomColorConfig> = {\n  black: { className: 'tipp-accent-black', fallbackColor: 'gray' },\n};\n\nconst isSemanticColor = (color?: UiColor): color is SemanticColor =>\n  color !== undefined && color in SEMANTIC_COLOR_MAP;\n\nconst isCustomColor = (color?: UiColor): color is CustomColor =>\n  color !== undefined && color in CUSTOM_COLOR_MAP;\n\nexport interface ResolvedColor {\n  /** Radix 컴포넌트의 `color` prop에 그대로 전달할 값. custom color면 undefined. */\n  color?: RadixColor;\n  /** accent override를 적용하기 위해 요소에 붙일 className. */\n  className?: string;\n}\n\n/**\n * 통합 color 입력을 Radix color prop과 className으로 정규화한다.\n *\n * - custom color(black 등): Radix color는 비우고 accent override className을 반환\n * - semantic color(error/neutral/success/accent): 대응 Radix color로 변환\n * - Radix color: 그대로 pass-through\n */\nexport const resolveColor = (color?: UiColor): ResolvedColor => {\n  if (isCustomColor(color)) {\n    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];\n    return { color: fallbackColor, className };\n  }\n\n  if (isSemanticColor(color)) {\n    return { color: SEMANTIC_COLOR_MAP[color] };\n  }\n\n  return { color };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAGO;AACP,kBAAqB;AACrB,mBAAkC;;;ACwBlC,IAAM,qBAAoE;AAAA,EACxE,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV;AAgBA,IAAM,mBAA2D;AAAA,EAC/D,OAAO,EAAE,WAAW,qBAAqB,eAAe,OAAO;AACjE;AAEA,IAAM,kBAAkB,CAAC,UACvB,UAAU,UAAa,SAAS;AAElC,IAAM,gBAAgB,CAAC,UACrB,UAAU,UAAa,SAAS;AAgB3B,IAAM,eAAe,CAAC,UAAmC;AAC9D,MAAI,cAAc,KAAK,GAAG;AACxB,UAAM,EAAE,WAAW,cAAc,IAAI,iBAAiB,KAAK;AAC3D,WAAO,EAAE,OAAO,eAAe,UAAU;AAAA,EAC3C;AAEA,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,EAAE,OAAO,mBAAmB,KAAK,EAAE;AAAA,EAC5C;AAEA,SAAO,EAAE,MAAM;AACjB;;;ADjEM;AARC,IAAM,WAAO;AAAA,EAClB,CAAC,OAAO,QAAyB;AAC/B,UAAsC,YAA9B,SAAO,UAdnB,IAc0C,IAAT,iBAAS,IAAT,CAArB,SAAO;AAEf,UAAM,EAAE,OAAO,YAAY,WAAW,eAAe,IACnD,aAAa,KAAK;AAEpB,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA,iCACK,OADL;AAAA,QAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["RadixCode"]}

package/dist/atoms/code.d.cts

@@ -1 +1,12 @@
-export { Code, CodeProps } from '@radix-ui/themes';
+import { CodeProps as CodeProps$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.cjs';
+
+type CodeProps = Omit<CodeProps$1, 'color'> & {
+    color?: UiColor;
+};
+declare const Code: React__default.ForwardRefExoticComponent<Omit<CodeProps$1, "color"> & {
+    color?: UiColor;
+} & React__default.RefAttributes<HTMLElement>>;
+
+export { Code, type CodeProps };

package/dist/atoms/code.d.ts

@@ -1 +1,12 @@
-export { Code, CodeProps } from '@radix-ui/themes';
+import { CodeProps as CodeProps$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.js';
+
+type CodeProps = Omit<CodeProps$1, 'color'> & {
+    color?: UiColor;
+};
+declare const Code: React__default.ForwardRefExoticComponent<Omit<CodeProps$1, "color"> & {
+    color?: UiColor;
+} & React__default.RefAttributes<HTMLElement>>;
+
+export { Code, type CodeProps };

package/dist/atoms/code.js

@@ -1,6 +1,7 @@
 import {
   Code
-} from "../chunk-OHMOP5PV.js";
+} from "../chunk-UFWDQGOK.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Code

package/dist/atoms/data-list.cjs

@@ -1,8 +1,37 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -20,10 +49,57 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/atoms/data-list.tsx
 var data_list_exports = {};
 __export(data_list_exports, {
-  DataList: () => import_themes.DataList
+  DataList: () => DataList
 });
 module.exports = __toCommonJS(data_list_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
+var import_react = require("react");
+
+// src/utils/resolve-color.ts
+var SEMANTIC_COLOR_MAP = {
+  error: "red",
+  neutral: "gray",
+  success: "green",
+  accent: void 0
+};
+var CUSTOM_COLOR_MAP = {
+  black: { className: "tipp-accent-black", fallbackColor: "gray" }
+};
+var isSemanticColor = (color) => color !== void 0 && color in SEMANTIC_COLOR_MAP;
+var isCustomColor = (color) => color !== void 0 && color in CUSTOM_COLOR_MAP;
+var resolveColor = (color) => {
+  if (isCustomColor(color)) {
+    const { className, fallbackColor } = CUSTOM_COLOR_MAP[color];
+    return { color: fallbackColor, className };
+  }
+  if (isSemanticColor(color)) {
+    return { color: SEMANTIC_COLOR_MAP[color] };
+  }
+  return { color };
+};
+
+// src/atoms/data-list.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Label = (0, import_react.forwardRef)((props, ref) => {
+  const _a = props, { color, className } = _a, rest = __objRest(_a, ["color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.DataList.Label,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      color: radixColor,
+      ref
+    })
+  );
+});
+Label.displayName = "DataList.Label";
+var DataList = __spreadProps(__spreadValues({}, import_themes.DataList), {
+  Label
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DataList