@tipp/ui 2.5.0 → 2.7.0

package/dist/atoms/tab-nav.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,56 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/atoms/tab-nav.tsx
 var tab_nav_exports = {};
 __export(tab_nav_exports, {
-  TabNav: () => import_themes.TabNav
+  TabNav: () => TabNav
 });
 module.exports = __toCommonJS(tab_nav_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/tab-nav.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 { className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.TabNav.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      ref
+    })
+  );
+});
+Root.displayName = "TabNav.Root";
+var TabNav = __spreadProps(__spreadValues({}, import_themes.TabNav), {
+  Root
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   TabNav

package/dist/atoms/tab-nav.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/tab-nav.tsx"],"sourcesContent":["export { TabNav } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAuB;","names":[]}
+{"version":3,"sources":["../../src/atoms/tab-nav.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import { TabNav as RadixTabNav } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, useMemo } from 'react';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype TabNavRootProps = React.ComponentPropsWithoutRef<\n  typeof RadixTabNav.Root\n> & {\n  /**\n   * TabNav는 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<\n  React.ElementRef<typeof RadixTabNav.Root>,\n  TabNavRootProps\n>((props, ref) => {\n  const { color, className, ...rest } = props;\n\n  const { className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  return (\n    <RadixTabNav.Root\n      {...rest}\n      className={clsx(colorClassName, className)}\n      ref={ref}\n    />\n  );\n});\n\nRoot.displayName = 'TabNav.Root';\n\nexport const TabNav = {\n  ...RadixTabNav,\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,oBAAsC;AACtC,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;;;AD1DI;AAZJ,IAAM,WAAO,yBAGX,CAAC,OAAO,QAAQ;AAChB,QAAsC,YAA9B,SAAO,UAnBjB,IAmBwC,IAAT,iBAAS,IAAT,CAArB,SAAO;AAEf,QAAM,EAAE,WAAW,eAAe,QAAI;AAAA,IACpC,MAAM,aAAa,KAAK;AAAA,IACxB,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC,cAAAA,OAAY;AAAA,IAAZ,iCACK,OADL;AAAA,MAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,MACzC;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,SAAS,iCACjB,cAAAA,SADiB;AAAA,EAEpB;AACF;","names":["RadixTabNav"]}

package/dist/atoms/tab-nav.d.cts

@@ -1 +1,16 @@
-export { TabNav } from '@radix-ui/themes';
+import { TabNav as TabNav$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.cjs';
+
+declare const TabNav: {
+    Root: React__default.ForwardRefExoticComponent<Omit<TabNav$1.RootProps & React__default.RefAttributes<HTMLElement>, "ref"> & {
+        /**
+         * TabNav는 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+         * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
+    } & React__default.RefAttributes<HTMLElement>>;
+    Link: React__default.ForwardRefExoticComponent<TabNav$1.LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+};
+
+export { TabNav };

package/dist/atoms/tab-nav.d.ts

@@ -1 +1,16 @@
-export { TabNav } from '@radix-ui/themes';
+import { TabNav as TabNav$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.js';
+
+declare const TabNav: {
+    Root: React__default.ForwardRefExoticComponent<Omit<TabNav$1.RootProps & React__default.RefAttributes<HTMLElement>, "ref"> & {
+        /**
+         * TabNav는 Radix color prop이 없어 per-instance로는 custom accent(black 등)만
+         * className override로 적용된다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
+    } & React__default.RefAttributes<HTMLElement>>;
+    Link: React__default.ForwardRefExoticComponent<TabNav$1.LinkProps & React__default.RefAttributes<HTMLAnchorElement>>;
+};
+
+export { TabNav };

package/dist/atoms/tab-nav.js

@@ -1,6 +1,7 @@
 import {
   TabNav
-} from "../chunk-YJ7ZFOYL.js";
+} from "../chunk-6TU647KJ.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   TabNav

package/dist/atoms/tabs.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,56 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/atoms/tabs.tsx
 var tabs_exports = {};
 __export(tabs_exports, {
-  Tabs: () => import_themes.Tabs
+  Tabs: () => Tabs
 });
 module.exports = __toCommonJS(tabs_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/tabs.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 { className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Tabs.Root,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      ref
+    })
+  );
+});
+Root.displayName = "Tabs.Root";
+var Tabs = __spreadProps(__spreadValues({}, import_themes.Tabs), {
+  Root
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Tabs

package/dist/atoms/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/tabs.tsx"],"sourcesContent":["export { Tabs } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAqB;","names":[]}
+{"version":3,"sources":["../../src/atoms/tabs.tsx","../../src/utils/resolve-color.ts"],"sourcesContent":["import { Tabs as RadixTabs } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, useMemo } from 'react';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype TabsRootProps = React.ComponentPropsWithoutRef<typeof RadixTabs.Root> & {\n  /**\n   * Tabs는 Radix color prop이 없지만 active 인디케이터(`.rt-BaseTabListTrigger::before`)가\n   * `--accent-indicator`를 사용하므로, Root className override로 custom accent(black 등)를\n   * per-instance 적용할 수 있다. semantic/radix color는 theme accent로만 가능.\n   */\n  color?: UiColor;\n};\n\nconst Root = forwardRef<\n  React.ElementRef<typeof RadixTabs.Root>,\n  TabsRootProps\n>((props, ref) => {\n  const { color, className, ...rest } = props;\n\n  const { className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  return (\n    <RadixTabs.Root\n      {...rest}\n      className={clsx(colorClassName, className)}\n      ref={ref}\n    />\n  );\n});\n\nRoot.displayName = 'Tabs.Root';\n\nexport const Tabs = {\n  ...RadixTabs,\n  Root,\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,oBAAkC;AAClC,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;;;AD3DI;AAZJ,IAAM,WAAO,yBAGX,CAAC,OAAO,QAAQ;AAChB,QAAsC,YAA9B,SAAO,UAlBjB,IAkBwC,IAAT,iBAAS,IAAT,CAArB,SAAO;AAEf,QAAM,EAAE,WAAW,eAAe,QAAI;AAAA,IACpC,MAAM,aAAa,KAAK;AAAA,IACxB,CAAC,KAAK;AAAA,EACR;AAEA,SACE;AAAA,IAAC,cAAAA,KAAU;AAAA,IAAV,iCACK,OADL;AAAA,MAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,MACzC;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,KAAK,cAAc;AAEZ,IAAM,OAAO,iCACf,cAAAA,OADe;AAAA,EAElB;AACF;","names":["RadixTabs"]}

package/dist/atoms/tabs.d.cts

@@ -1 +1,19 @@
-export { Tabs } from '@radix-ui/themes';
+import { Tabs as Tabs$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.cjs';
+
+declare const Tabs: {
+    Root: React__default.ForwardRefExoticComponent<Omit<Tabs$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * Tabs는 Radix color prop이 없지만 active 인디케이터(`.rt-BaseTabListTrigger::before`)가
+         * `--accent-indicator`를 사용하므로, Root className override로 custom accent(black 등)를
+         * per-instance 적용할 수 있다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
+    } & React__default.RefAttributes<HTMLDivElement>>;
+    List: React__default.ForwardRefExoticComponent<Tabs$1.ListProps & React__default.RefAttributes<HTMLDivElement>>;
+    Trigger: React__default.ForwardRefExoticComponent<Tabs$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+    Content: React__default.ForwardRefExoticComponent<Tabs$1.ContentProps & React__default.RefAttributes<HTMLDivElement>>;
+};
+
+export { Tabs };

package/dist/atoms/tabs.d.ts

@@ -1 +1,19 @@
-export { Tabs } from '@radix-ui/themes';
+import { Tabs as Tabs$1 } from '@radix-ui/themes';
+import React__default from 'react';
+import { UiColor } from '../utils/resolve-color.js';
+
+declare const Tabs: {
+    Root: React__default.ForwardRefExoticComponent<Omit<Tabs$1.RootProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & {
+        /**
+         * Tabs는 Radix color prop이 없지만 active 인디케이터(`.rt-BaseTabListTrigger::before`)가
+         * `--accent-indicator`를 사용하므로, Root className override로 custom accent(black 등)를
+         * per-instance 적용할 수 있다. semantic/radix color는 theme accent로만 가능.
+         */
+        color?: UiColor;
+    } & React__default.RefAttributes<HTMLDivElement>>;
+    List: React__default.ForwardRefExoticComponent<Tabs$1.ListProps & React__default.RefAttributes<HTMLDivElement>>;
+    Trigger: React__default.ForwardRefExoticComponent<Tabs$1.TriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
+    Content: React__default.ForwardRefExoticComponent<Tabs$1.ContentProps & React__default.RefAttributes<HTMLDivElement>>;
+};
+
+export { Tabs };

package/dist/atoms/tabs.js

@@ -1,6 +1,7 @@
 import {
   Tabs
-} from "../chunk-5ZITU5L7.js";
+} from "../chunk-CGDBUDY3.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Tabs

package/dist/atoms/tooltip.cjs

@@ -52,8 +52,9 @@ __export(tooltip_exports, {
   Tooltip: () => Tooltip
 });
 module.exports = __toCommonJS(tooltip_exports);
-var import_themes = require("@radix-ui/themes");
-var import_react2 = require("react");
+var import_themes2 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
+var import_react3 = require("react");
 
 // src/context/ui-state-provider.tsx
 var import_react = require("react");
@@ -70,8 +71,38 @@ var useUIState = () => {
   }
 };
 
-// src/atoms/tooltip.tsx
+// 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/theme/theme-provider.tsx
+var import_react2 = require("react");
+var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThemeAccentContext = (0, import_react2.createContext)(void 0);
+
+// src/atoms/tooltip.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Tooltip(_a) {
   var _b = _a, {
     children
@@ -80,15 +111,20 @@ function Tooltip(_a) {
   ]);
   var _a2;
   const { isMobile } = useUIState();
-  const [open, setOpen] = (0, import_react2.useState)((_a2 = props.defaultOpen) != null ? _a2 : false);
-  const onOpenChange = (0, import_react2.useCallback)(
+  const [open, setOpen] = (0, import_react3.useState)((_a2 = props.defaultOpen) != null ? _a2 : false);
+  const themeAccent = (0, import_react3.useContext)(ThemeAccentContext);
+  const accentClassName = (0, import_react3.useMemo)(
+    () => resolveColor(themeAccent).className,
+    [themeAccent]
+  );
+  const onOpenChange = (0, import_react3.useCallback)(
     (e) => {
       if (isMobile) return;
       setOpen(e);
     },
     [isMobile]
   );
-  const onClick = (0, import_react2.useCallback)(
+  const onClick = (0, import_react3.useCallback)(
     (e) => {
       if (!isMobile) return;
       e.preventDefault();
@@ -96,14 +132,15 @@ function Tooltip(_a) {
     },
     [isMobile]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_themes.Tooltip,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_themes2.Tooltip,
     __spreadProps(__spreadValues({
       delayDuration: isMobile ? props.delayDuration : 0,
       onOpenChange,
       open
     }, props), {
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes.Box, { asChild: true, onClick, children })
+      className: (0, import_clsx2.clsx)(accentClassName, props.className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Box, { asChild: true, onClick, children })
     })
   );
 }

package/dist/atoms/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/tooltip.tsx","../../src/context/ui-state-provider.tsx"],"sourcesContent":["import {\n  Box,\n  Tooltip as RadixTooltip,\n  type TooltipProps as RadixTooltipProps,\n} from '@radix-ui/themes';\nimport { useCallback, useState } from 'react';\nimport { useUIState } from '@/context/ui-state-provider';\n\nexport function Tooltip({\n  children,\n  ...props\n}: RadixTooltipProps): React.ReactElement {\n  const { isMobile } = useUIState();\n  const [open, setOpen] = useState<boolean>(props.defaultOpen ?? false);\n\n  const onOpenChange = useCallback(\n    (e: boolean) => {\n      if (isMobile) return;\n      setOpen(e);\n    },\n    [isMobile]\n  );\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isMobile) return;\n      e.preventDefault();\n      setOpen((p) => !p);\n    },\n    [isMobile]\n  );\n\n  return (\n    <RadixTooltip\n      delayDuration={isMobile ? props.delayDuration : 0}\n      onOpenChange={onOpenChange}\n      open={open}\n      {...props}\n    >\n      <Box asChild onClick={onClick}>\n        {children}\n      </Box>\n    </RadixTooltip>\n  );\n}\n","import { createContext, useContext } from 'react';\n\ninterface UIStateContextType {\n  isMobile: boolean;\n}\n\nexport const UIStateContext = createContext<UIStateContextType>({\n  isMobile: false,\n});\n\nexport type UiStateProviderProps = React.ReactNode;\n\nexport function UIStateProvider({\n  children,\n  isMobile,\n}: {\n  children: UiStateProviderProps;\n  isMobile: boolean;\n}): React.ReactElement {\n  return (\n    <UIStateContext.Provider value={{ isMobile }}>\n      {children}\n    </UIStateContext.Provider>\n  );\n}\n\nexport const useUIState = (): UIStateContextType => {\n  try {\n    const state = useContext(UIStateContext);\n    return state;\n  } catch (error) {\n    throw new Error('UIStateProvider not found');\n  }\n};"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAIO;AACP,IAAAA,gBAAsC;;;ACLtC,mBAA0C;AAoBtC;AAdG,IAAM,qBAAiB,4BAAkC;AAAA,EAC9D,UAAU;AACZ,CAAC;AAkBM,IAAM,aAAa,MAA0B;AAClD,MAAI;AACF,UAAM,YAAQ,yBAAW,cAAc;AACvC,WAAO;AAAA,EACT,SAAS,OAAO;AACd,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC7C;AACF;;;ADMM,IAAAC,sBAAA;AA/BC,SAAS,QAAQ,IAGkB;AAHlB,eACtB;AAAA;AAAA,EATF,IAQwB,IAEnB,kBAFmB,IAEnB;AAAA,IADH;AAAA;AATF,MAAAC;AAYE,QAAM,EAAE,SAAS,IAAI,WAAW;AAChC,QAAM,CAAC,MAAM,OAAO,QAAI,yBAAkBA,MAAA,MAAM,gBAAN,OAAAA,MAAqB,KAAK;AAEpE,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAe;AACd,UAAI,SAAU;AACd,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,cAAU;AAAA,IACd,CAAC,MAAwC;AACvC,UAAI,CAAC,SAAU;AACf,QAAE,eAAe;AACjB,cAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE;AAAA,IAAC,cAAAC;AAAA,IAAA;AAAA,MACC,eAAe,WAAW,MAAM,gBAAgB;AAAA,MAChD;AAAA,MACA;AAAA,OACI,QAJL;AAAA,MAMC,uDAAC,qBAAI,SAAO,MAAC,SACV,UACH;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime","_a","RadixTooltip"]}
+{"version":3,"sources":["../../src/atoms/tooltip.tsx","../../src/context/ui-state-provider.tsx","../../src/utils/resolve-color.ts","../../src/theme/theme-provider.tsx"],"sourcesContent":["import {\n  Box,\n  Tooltip as RadixTooltip,\n  type TooltipProps as RadixTooltipProps,\n} from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { useCallback, useContext, useMemo, useState } from 'react';\nimport { useUIState } from '@/context/ui-state-provider';\nimport { resolveColor } from '../utils/resolve-color';\nimport { ThemeAccentContext } from '../theme/theme-provider';\n\nexport function Tooltip({\n  children,\n  ...props\n}: RadixTooltipProps): React.ReactElement {\n  const { isMobile } = useUIState();\n  const [open, setOpen] = useState<boolean>(props.defaultOpen ?? false);\n  const themeAccent = useContext(ThemeAccentContext);\n\n  // Content는 Portal(body)로 렌더돼 theme의 className override를 못 받으므로, theme custom\n  // accent(black)를 className으로 다시 적용해 Portal 안에서도 black을 유지한다.\n  // (RadixTooltip의 className은 Content에 적용됨)\n  const accentClassName = useMemo(\n    () => resolveColor(themeAccent).className,\n    [themeAccent]\n  );\n\n  const onOpenChange = useCallback(\n    (e: boolean) => {\n      if (isMobile) return;\n      setOpen(e);\n    },\n    [isMobile]\n  );\n\n  const onClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isMobile) return;\n      e.preventDefault();\n      setOpen((p) => !p);\n    },\n    [isMobile]\n  );\n\n  return (\n    <RadixTooltip\n      delayDuration={isMobile ? props.delayDuration : 0}\n      onOpenChange={onOpenChange}\n      open={open}\n      {...props}\n      className={clsx(accentClassName, props.className)}\n    >\n      <Box asChild onClick={onClick}>\n        {children}\n      </Box>\n    </RadixTooltip>\n  );\n}\n","import { createContext, useContext } from 'react';\n\ninterface UIStateContextType {\n  isMobile: boolean;\n}\n\nexport const UIStateContext = createContext<UIStateContextType>({\n  isMobile: false,\n});\n\nexport type UiStateProviderProps = React.ReactNode;\n\nexport function UIStateProvider({\n  children,\n  isMobile,\n}: {\n  children: UiStateProviderProps;\n  isMobile: boolean;\n}): React.ReactElement {\n  return (\n    <UIStateContext.Provider value={{ isMobile }}>\n      {children}\n    </UIStateContext.Provider>\n  );\n}\n\nexport const useUIState = (): UIStateContextType => {\n  try {\n    const state = useContext(UIStateContext);\n    return state;\n  } catch (error) {\n    throw new Error('UIStateProvider not found');\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","import React, { createContext } from 'react';\nimport { Theme } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { resolveColor, type UiColor } from '../utils/resolve-color';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\n/**\n * 테마 전역 primary가 custom color(black 등)일 때 그 값을 하위로 전달하는 context.\n * Radix는 Portal 컨텐츠(Select 드롭다운 등)에 theme의 accentColor \"값\"(여기선 fallback gray)만\n * 복제하고 `.tipp-accent-black` className은 복제하지 않으므로, Portal 안에서는 accent override가\n * 사라진다. 래핑된 overlay 컴포넌트(Select 등)가 이 context를 최하위 fallback color로 읽어\n * 자기 요소에 className을 직접 부여하면 Portal 내부에서도 black이 유지된다.\n * (custom accent가 아닐 때는 undefined — Radix 네이티브 portal 상속에 맡긴다.)\n */\nexport const ThemeAccentContext = createContext<UiColor | undefined>(undefined);\n\nexport interface ThemeProviderProps extends Omit<ThemeProps, 'accentColor'> {\n  children: React.ReactNode;\n  /**\n   * 전역 primary(accent) color. Radix accent color에 더해 커스텀 `black`을 지원한다.\n   * black이면 Radix에는 fallback `gray`를 넘기고 Theme 루트에 accent override\n   * className을 부여하여 하위 컴포넌트가 color prop 없이도 black을 상속한다.\n   */\n  accentColor?: ThemeProps['accentColor'] | 'black';\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  const { accentColor = 'iris', className, ...rest } = props;\n\n  const { color: radixAccent, className: accentClassName } =\n    resolveColor(accentColor);\n\n  // custom accent(className이 생기는 경우 = black)일 때만 Portal 보정용으로 context에 흘린다.\n  const themeAccent = accentClassName ? accentColor : undefined;\n\n  return (\n    <ThemeAccentContext.Provider value={themeAccent}>\n      <Theme\n        accentColor={radixAccent ?? 'iris'}\n        className={clsx(accentClassName, className)}\n        radius=\"medium\"\n        {...rest}\n      />\n    </ThemeAccentContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,iBAIO;AACP,IAAAC,eAAqB;AACrB,IAAAC,gBAA2D;;;ACN3D,mBAA0C;AAoBtC;AAdG,IAAM,qBAAiB,4BAAkC;AAAA,EAC9D,UAAU;AACZ,CAAC;AAkBM,IAAM,aAAa,MAA0B;AAClD,MAAI;AACF,UAAM,YAAQ,yBAAW,cAAc;AACvC,WAAO;AAAA,EACT,SAAS,OAAO;AACd,UAAM,IAAI,MAAM,2BAA2B;AAAA,EAC7C;AACF;;;ACJA,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;;;ACrFA,IAAAC,gBAAqC;AACrC,oBAAsB;AACtB,kBAAqB;AAoCf,IAAAC,sBAAA;AAvBC,IAAM,yBAAqB,6BAAmC,MAAS;;;AHqCxE,IAAAC,sBAAA;AAzCC,SAAS,QAAQ,IAGkB;AAHlB,eACtB;AAAA;AAAA,EAZF,IAWwB,IAEnB,kBAFmB,IAEnB;AAAA,IADH;AAAA;AAZF,MAAAC;AAeE,QAAM,EAAE,SAAS,IAAI,WAAW;AAChC,QAAM,CAAC,MAAM,OAAO,QAAI,yBAAkBA,MAAA,MAAM,gBAAN,OAAAA,MAAqB,KAAK;AACpE,QAAM,kBAAc,0BAAW,kBAAkB;AAKjD,QAAM,sBAAkB;AAAA,IACtB,MAAM,aAAa,WAAW,EAAE;AAAA,IAChC,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAe;AACd,UAAI,SAAU;AACd,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,cAAU;AAAA,IACd,CAAC,MAAwC;AACvC,UAAI,CAAC,SAAU;AACf,QAAE,eAAe;AACjB,cAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SACE;AAAA,IAAC,eAAAC;AAAA,IAAA;AAAA,MACC,eAAe,WAAW,MAAM,gBAAgB;AAAA,MAChD;AAAA,MACA;AAAA,OACI,QAJL;AAAA,MAKC,eAAW,mBAAK,iBAAiB,MAAM,SAAS;AAAA,MAEhD,uDAAC,sBAAI,SAAO,MAAC,SACV,UACH;AAAA;AAAA,EACF;AAEJ;","names":["import_themes","import_clsx","import_react","import_react","import_jsx_runtime","import_jsx_runtime","_a","RadixTooltip"]}

package/dist/atoms/tooltip.js

@@ -1,7 +1,9 @@
 import {
   Tooltip
-} from "../chunk-3NUQAVE6.js";
+} from "../chunk-2M3UFZUD.js";
 import "../chunk-PT57HCAI.js";
+import "../chunk-WYWM2HSZ.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Tooltip

package/dist/atoms/typo.cjs

@@ -53,6 +53,7 @@ __export(typo_exports, {
 });
 module.exports = __toCommonJS(typo_exports);
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -73,11 +74,38 @@ var mapWithResponsive = (args) => {
   return value;
 };
 
+// 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/typo.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var Typo = (0, import_react.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
+    const _a = props, { size, variant, children, color, className } = _a, rest = __objRest(_a, ["size", "variant", "children", "color", "className"]);
+    const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -96,7 +124,16 @@ var Typo = (0, import_react.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";

package/dist/atoms/typo.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts"],"sourcesContent":["import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport type TypoProps = RadixTextProps & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, ...rest } = props;\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText {...rest} ref={ref} size={radixSize}>\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,oBAAkC;AAClC,mBAA2C;;;ACDpC,IAAM,oBAAoB,CAChC,SAC+B;AAC9B,QAAM,EAAC,OAAO,MAAK,IAAI;AACvB,MAAG,OAAO,UAAU,UAAS;AAC3B,WAAO,MAAM,KAAK;AAAA,EACpB;AAAC;AAED,MAAG,OAAO,UAAU,UAAS;AAC3B,UAAM,SAAyC,CAAC;AAChD,QAAI;AACJ,SAAI,OAAO,OAAM;AACf,aAAO,GAAG,IAAI,MAAM,MAAM,GAAG,CAAC;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;ADiBM;AA1BC,IAAM,WAAO;AAAA,EAClB,CAAC,OAAkB,QAAyB;AAC1C,UAA6C,YAArC,QAAM,SAAS,SAZ3B,IAYiD,IAAT,iBAAS,IAAT,CAA5B,QAAM,WAAS;AAEvB,UAAM,gBAAY,sBAAgC,MAAM;AACtD,UAAI,SAAS,OAAW,QAAO;AAE/B,UAAI,YAAY,OAAW,QAAO;AAElC,aAAO,kBAAkB;AAAA,QACvB,OAAO;AAAA,QACP,OAAO,CAAC,iBAAmD;AACzD,kBAAQ,cAAc;AAAA,YACpB,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,WACE,4CAAC,cAAAA,MAAA,iCAAc,OAAd,EAAoB,KAAU,MAAM,WAClC,WACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["RadixText"]}
+{"version":3,"sources":["../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts","../../src/utils/resolve-color.ts"],"sourcesContent":["import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport React, { useMemo, forwardRef } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\nimport {\n  resolveColor,\n  type DistributiveOmit,\n  type UiColor,\n} from '../utils/resolve-color';\n\nexport type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {\n  variant?: Responsive<'body' | 'caption' | 'subtitle'>;\n  color?: UiColor;\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n  (props: TypoProps, ref): React.ReactNode => {\n    const { size, variant, children, color, className, ...rest } = props;\n\n    const { color: radixColor, className: colorClassName } = useMemo(\n      () => resolveColor(color),\n      [color]\n    );\n\n    const radixSize = useMemo<RadixTextProps['size']>(() => {\n      if (size !== undefined) return size;\n\n      if (variant === undefined) return '2';\n\n      return mapWithResponsive({\n        value: variant,\n        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {\n          switch (variantValue) {\n            case 'caption':\n              return '1';\n            case 'subtitle':\n              return '3';\n            case 'body':\n            default:\n              return '2';\n          }\n        },\n      });\n    }, [size, variant]);\n\n    return (\n      <RadixText\n        {...rest}\n        className={clsx(colorClassName, className)}\n        color={radixColor}\n        ref={ref}\n        size={radixSize}\n      >\n        {children}\n      </RadixText>\n    );\n  }\n);\n\nTypo.displayName = 'Typo';\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\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;AAEA,oBAAkC;AAClC,kBAAqB;AACrB,mBAA2C;;;ACFpC,IAAM,oBAAoB,CAChC,SAC+B;AAC9B,QAAM,EAAC,OAAO,MAAK,IAAI;AACvB,MAAG,OAAO,UAAU,UAAS;AAC3B,WAAO,MAAM,KAAK;AAAA,EACpB;AAAC;AAED,MAAG,OAAO,UAAU,UAAS;AAC3B,UAAM,SAAyC,CAAC;AAChD,QAAI;AACJ,SAAI,OAAO,OAAM;AACf,aAAO,GAAG,IAAI,MAAM,MAAM,GAAG,CAAC;AAAA,IAChC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;;;ACUA,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;;;AFrCM;AA/BC,IAAM,WAAO;AAAA,EAClB,CAAC,OAAkB,QAAyB;AAC1C,UAA+D,YAAvD,QAAM,SAAS,UAAU,OAAO,UAnB5C,IAmBmE,IAAT,iBAAS,IAAT,CAA9C,QAAM,WAAS,YAAU,SAAO;AAExC,UAAM,EAAE,OAAO,YAAY,WAAW,eAAe,QAAI;AAAA,MACvD,MAAM,aAAa,KAAK;AAAA,MACxB,CAAC,KAAK;AAAA,IACR;AAEA,UAAM,gBAAY,sBAAgC,MAAM;AACtD,UAAI,SAAS,OAAW,QAAO;AAE/B,UAAI,YAAY,OAAW,QAAO;AAElC,aAAO,kBAAkB;AAAA,QACvB,OAAO;AAAA,QACP,OAAO,CAAC,iBAAmD;AACzD,kBAAQ,cAAc;AAAA,YACpB,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AACH,qBAAO;AAAA,YACT,KAAK;AAAA,YACL;AACE,qBAAO;AAAA,UACX;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA,iCACK,OADL;AAAA,QAEC,eAAW,kBAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QAEL;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":["RadixText"]}

package/dist/atoms/typo.d.cts

@@ -1,9 +1,11 @@
 import { TextProps } from '@radix-ui/themes';
 import { Responsive } from '@radix-ui/themes/props';
 import React__default from 'react';
+import { DistributiveOmit, UiColor } from '../utils/resolve-color.cjs';
 
-type TypoProps = TextProps & {
+type TypoProps = DistributiveOmit<TextProps, 'color'> & {
     variant?: Responsive<'body' | 'caption' | 'subtitle'>;
+    color?: UiColor;
 };
 declare const Typo: React__default.ForwardRefExoticComponent<TypoProps & React__default.RefAttributes<HTMLSpanElement>>;
 

package/dist/atoms/typo.d.ts

@@ -1,9 +1,11 @@
 import { TextProps } from '@radix-ui/themes';
 import { Responsive } from '@radix-ui/themes/props';
 import React__default from 'react';
+import { DistributiveOmit, UiColor } from '../utils/resolve-color.js';
 
-type TypoProps = TextProps & {
+type TypoProps = DistributiveOmit<TextProps, 'color'> & {
     variant?: Responsive<'body' | 'caption' | 'subtitle'>;
+    color?: UiColor;
 };
 declare const Typo: React__default.ForwardRefExoticComponent<TypoProps & React__default.RefAttributes<HTMLSpanElement>>;
 

package/dist/atoms/typo.js

@@ -1,7 +1,8 @@
 import {
   Typo
-} from "../chunk-PMJIFLDT.js";
+} from "../chunk-GR4PG6HY.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   Typo

package/dist/charts/chart-default-props.cjs

@@ -167,7 +167,7 @@ var EchartDefaultProps = {
   opts: { renderer: "svg" },
   theme: chart_theme_default,
   option: {
-    textStyle: { fontFamily: "Noto Sans KR" },
+    textStyle: { fontFamily: "Pretendard Variable" },
     tooltip: { textStyle: { fontSize: 16 } }
   }
 };