@tipp/ui 2.5.0 → 2.7.0

package/dist/molecules/force-refresh.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/molecules/force-refresh.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/code.tsx","../../src/atoms/kbd.tsx","../../src/atoms/flex.tsx"],"sourcesContent":["import React from 'react';\nimport { DotsVerticalIcon, ReloadIcon } from '@radix-ui/react-icons';\nimport { Typo } from '../atoms/typo';\nimport { Code } from '../atoms/code';\nimport { Kbd } from '../atoms/kbd';\nimport { Flex } from '../atoms/flex';\n\nfunction CodeSize3(props: { children: React.ReactNode }): React.ReactNode {\n  return (\n    <Code\n      style={{\n        display: 'inline-flex',\n        justifyItems: 'center',\n        alignItems: 'center',\n      }}\n    >\n      {props.children}\n    </Code>\n  );\n}\n\nexport function ForceRefresh(): React.ReactNode {\n  return (\n    <Flex direction=\"column\" gap=\"2\">\n      <Typo>\n        1. 크롬 브라우저 오른쪽 상단의{' '}\n        <CodeSize3>\n          <DotsVerticalIcon height=\"13px\" />\n          더보기\n        </CodeSize3>\n        아이콘을 클릭합니다.\n      </Typo>\n      <Typo>\n        2. <CodeSize3>도구 더보기</CodeSize3> {'>'}{' '}\n        <CodeSize3>개발자 도구</CodeSize3> 메뉴를 선택합니다. (또는 아래의\n        단축키를 사용 할 수 있습니다.)\n      </Typo>\n      <Flex direction=\"column\" gap=\"3\" p=\"0\" pl=\"3\">\n        <Typo>\n          a. 윈도우 단축키: <Kbd>F12</Kbd>\n        </Typo>\n        <Typo>\n          b. 맥 단축키: <Kbd>Option</Kbd> + <Kbd>Command</Kbd> + <Kbd>I</Kbd>\n        </Typo>\n      </Flex>\n\n      <Typo>\n        3. 개발자 도구가 열리면, 브라우저 상단에 있는{' '}\n        <CodeSize3>\n          <ReloadIcon style={{ paddingRight: '5px' }} />\n          새로고침 버튼\n        </CodeSize3>\n        을 우클릭합니다.\n      </Typo>\n\n      <Typo>\n        4. 새로고침 메뉴에서 <CodeSize3>캐시 비우기 및 강력 새로고침</CodeSize3>\n        을 클릭합니다.\n      </Typo>\n    </Flex>\n  );\n}\n","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","export { Code, type CodeProps } from '@radix-ui/themes';\n","export { Kbd, type KbdProps } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA6C;;;ACC7C,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;;;AE3CnB,IAAAC,iBAAqC;;;ACArC,IAAAC,iBAAmC;;;ACAnC,IAAAC,iBAAqC;;;ALSjC,IAAAC,sBAAA;AAFJ,SAAS,UAAU,OAAuD;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,SAAS;AAAA,QACT,cAAc;AAAA,QACd,YAAY;AAAA,MACd;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;AAEO,SAAS,eAAgC;AAC9C,SACE,8CAAC,uBAAK,WAAU,UAAS,KAAI,KAC3B;AAAA,kDAAC,QAAK;AAAA;AAAA,MACe;AAAA,MACnB,8CAAC,aACC;AAAA,qDAAC,uCAAiB,QAAO,QAAO;AAAA,QAAE;AAAA,SAEpC;AAAA,MAAY;AAAA,OAEd;AAAA,IACA,8CAAC,QAAK;AAAA;AAAA,MACD,6CAAC,aAAU,6CAAM;AAAA,MAAY;AAAA,MAAE;AAAA,MAAK;AAAA,MACvC,6CAAC,aAAU,6CAAM;AAAA,MAAY;AAAA,OAE/B;AAAA,IACA,8CAAC,uBAAK,WAAU,UAAS,KAAI,KAAI,GAAE,KAAI,IAAG,KACxC;AAAA,oDAAC,QAAK;AAAA;AAAA,QACQ,6CAAC,sBAAI,iBAAG;AAAA,SACtB;AAAA,MACA,8CAAC,QAAK;AAAA;AAAA,QACM,6CAAC,sBAAI,oBAAM;AAAA,QAAM;AAAA,QAAG,6CAAC,sBAAI,qBAAO;AAAA,QAAM;AAAA,QAAG,6CAAC,sBAAI,eAAC;AAAA,SAC3D;AAAA,OACF;AAAA,IAEA,8CAAC,QAAK;AAAA;AAAA,MACwB;AAAA,MAC5B,8CAAC,aACC;AAAA,qDAAC,iCAAW,OAAO,EAAE,cAAc,MAAM,GAAG;AAAA,QAAE;AAAA,SAEhD;AAAA,MAAY;AAAA,OAEd;AAAA,IAEA,8CAAC,QAAK;AAAA;AAAA,MACS,6CAAC,aAAU,0FAAgB;AAAA,MAAY;AAAA,OAEtD;AAAA,KACF;AAEJ;","names":["RadixText","import_themes","import_themes","import_themes","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/molecules/force-refresh.tsx","../../src/atoms/typo.tsx","../../src/utils/map-with-responsive.ts","../../src/utils/resolve-color.ts","../../src/atoms/code.tsx","../../src/atoms/kbd.tsx","../../src/atoms/flex.tsx"],"sourcesContent":["import React from 'react';\nimport { DotsVerticalIcon, ReloadIcon } from '@radix-ui/react-icons';\nimport { Typo } from '../atoms/typo';\nimport { Code } from '../atoms/code';\nimport { Kbd } from '../atoms/kbd';\nimport { Flex } from '../atoms/flex';\n\nfunction CodeSize3(props: { children: React.ReactNode }): React.ReactNode {\n  return (\n    <Code\n      style={{\n        display: 'inline-flex',\n        justifyItems: 'center',\n        alignItems: 'center',\n      }}\n    >\n      {props.children}\n    </Code>\n  );\n}\n\nexport function ForceRefresh(): React.ReactNode {\n  return (\n    <Flex direction=\"column\" gap=\"2\">\n      <Typo>\n        1. 크롬 브라우저 오른쪽 상단의{' '}\n        <CodeSize3>\n          <DotsVerticalIcon height=\"13px\" />\n          더보기\n        </CodeSize3>\n        아이콘을 클릭합니다.\n      </Typo>\n      <Typo>\n        2. <CodeSize3>도구 더보기</CodeSize3> {'>'}{' '}\n        <CodeSize3>개발자 도구</CodeSize3> 메뉴를 선택합니다. (또는 아래의\n        단축키를 사용 할 수 있습니다.)\n      </Typo>\n      <Flex direction=\"column\" gap=\"3\" p=\"0\" pl=\"3\">\n        <Typo>\n          a. 윈도우 단축키: <Kbd>F12</Kbd>\n        </Typo>\n        <Typo>\n          b. 맥 단축키: <Kbd>Option</Kbd> + <Kbd>Command</Kbd> + <Kbd>I</Kbd>\n        </Typo>\n      </Flex>\n\n      <Typo>\n        3. 개발자 도구가 열리면, 브라우저 상단에 있는{' '}\n        <CodeSize3>\n          <ReloadIcon style={{ paddingRight: '5px' }} />\n          새로고침 버튼\n        </CodeSize3>\n        을 우클릭합니다.\n      </Typo>\n\n      <Typo>\n        4. 새로고침 메뉴에서 <CodeSize3>캐시 비우기 및 강력 새로고침</CodeSize3>\n        을 클릭합니다.\n      </Typo>\n    </Flex>\n  );\n}\n","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","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","export { Kbd, type KbdProps } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n"],"mappings":"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","names":["RadixText","import_themes","import_clsx","import_react","import_jsx_runtime","RadixCode","import_themes","import_themes","import_jsx_runtime"]}

package/dist/molecules/force-refresh.js

@@ -1,11 +1,12 @@
 import {
   ForceRefresh
-} from "../chunk-GGLDVUYU.js";
+} from "../chunk-2FB75HU2.js";
 import "../chunk-TULWX7D6.js";
-import "../chunk-OHMOP5PV.js";
-import "../chunk-25HMMI7R.js";
-import "../chunk-PMJIFLDT.js";
+import "../chunk-UFWDQGOK.js";
+import "../chunk-GR4PG6HY.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-VFQD57ZY.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   ForceRefresh

package/dist/molecules/form/form.cjs

@@ -68,6 +68,7 @@ var import_react3 = require("react");
 
 // src/atoms/heading.tsx
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -88,6 +89,29 @@ 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/heading.tsx
 var import_themes2 = require("@radix-ui/themes");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -108,23 +132,40 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
   const radixSize = (0, import_react.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/atoms/typo.tsx
 var import_themes3 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Typo = (0, import_react2.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_react2.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react2.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -143,7 +184,16 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_themes3.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx2.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";

package/dist/molecules/form/form.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Root\n        {...rest}\n        className={`FormRoot ${className || ''}`}\n        ref={ref}\n      >\n        {children}\n      </RadixForm.Root>\n    );\n  }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n  name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Field\n        {...rest}\n        className={`FormField ${className || ''}`}\n        ref={ref}\n      >\n        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n      </RadixForm.Field>\n    );\n  }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo variant=\"body\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    const Comp = useMemo(() => {\n      switch (variant) {\n        case 'title':\n          return HeadingLabel;\n        case 'caption':\n          return CaptionLabel;\n        case 'body':\n        default:\n          return BodyLabel;\n      }\n    }, [variant]);\n\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Label\n        {...rest}\n        asChild\n        className={`FormLabel ${className || ''}`}\n        ref={ref}\n      >\n        <Comp>\n          {children}\n          {fieldProps.required ? (\n            <Typo as=\"span\" color=\"tomato\">\n              {` *`}\n            </Typo>\n          ) : null}\n        </Comp>\n      </RadixForm.Label>\n    );\n  }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Message\n        {...rest}\n        asChild\n        className={`FormMessage ${className || ''}`}\n        ref={ref}\n      >\n        <Typo color=\"red\">{children}</Typo>\n      </RadixForm.Message>\n    );\n  }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n  ({ className, ...rest }, ref) => {\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Control\n        {...rest}\n        className={`FormControl ${className || ''}`}\n        ref={ref}\n        required={fieldProps.required}\n      />\n    );\n  }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n  children: React.ReactNode;\n  label: string;\n  labelVariant?: FormLabelProps['variant'];\n  errorMessage?: string;\n}\n\nexport function FormItem({\n  label,\n  labelVariant,\n  children,\n  errorMessage,\n  ...fieldProps\n}: FormItemProps): React.ReactNode {\n  return (\n    <Form.Field {...fieldProps}>\n      <Form.Label variant={labelVariant}>{label}</Form.Label>\n      {children}\n      <Form.Message forceMatch={Boolean(errorMessage)}>\n        {errorMessage}\n      </Form.Message>\n    </Form.Field>\n  );\n}\n\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n  FormItem,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n \n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\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 { 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"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
+{"version":3,"sources":["../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/utils/resolve-color.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Root\n        {...rest}\n        className={`FormRoot ${className || ''}`}\n        ref={ref}\n      >\n        {children}\n      </RadixForm.Root>\n    );\n  }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n  name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Field\n        {...rest}\n        className={`FormField ${className || ''}`}\n        ref={ref}\n      >\n        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n      </RadixForm.Field>\n    );\n  }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo variant=\"body\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    const Comp = useMemo(() => {\n      switch (variant) {\n        case 'title':\n          return HeadingLabel;\n        case 'caption':\n          return CaptionLabel;\n        case 'body':\n        default:\n          return BodyLabel;\n      }\n    }, [variant]);\n\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Label\n        {...rest}\n        asChild\n        className={`FormLabel ${className || ''}`}\n        ref={ref}\n      >\n        <Comp>\n          {children}\n          {fieldProps.required ? (\n            <Typo as=\"span\" color=\"tomato\">\n              {` *`}\n            </Typo>\n          ) : null}\n        </Comp>\n      </RadixForm.Label>\n    );\n  }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Message\n        {...rest}\n        asChild\n        className={`FormMessage ${className || ''}`}\n        ref={ref}\n      >\n        <Typo color=\"red\">{children}</Typo>\n      </RadixForm.Message>\n    );\n  }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n  ({ className, ...rest }, ref) => {\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Control\n        {...rest}\n        className={`FormControl ${className || ''}`}\n        ref={ref}\n        required={fieldProps.required}\n      />\n    );\n  }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n  children: React.ReactNode;\n  label: string;\n  labelVariant?: FormLabelProps['variant'];\n  errorMessage?: string;\n}\n\nexport function FormItem({\n  label,\n  labelVariant,\n  children,\n  errorMessage,\n  ...fieldProps\n}: FormItemProps): React.ReactNode {\n  return (\n    <Form.Field {...fieldProps}>\n      <Form.Label variant={labelVariant}>{label}</Form.Label>\n      {children}\n      <Form.Message forceMatch={Boolean(errorMessage)}>\n        {errorMessage}\n      </Form.Message>\n    </Form.Field>\n  );\n}\n\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n  FormItem,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { clsx } from 'clsx';\nimport { useMemo } 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 { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = DistributiveOmit<RadixHeadingProps, 'color'> & {\n  variant?: Responsive<HeadingVariant>;\n  color?: UiColor;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, color, className, ...rest } = props;\n\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n\n  }, [size, variant]);\n\n  return (\n    <RadixHeading\n      {...rest}\n      className={clsx(colorClassName, className)}\n      color={radixColor}\n      size={radixSize}\n    >\n      {children}\n    </RadixHeading>\n  );\n}\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","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"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}

package/dist/molecules/form/form.js

@@ -1,10 +1,11 @@
 import {
   Form,
   FormItem
-} from "../../chunk-QDC3LFHS.js";
-import "../../chunk-BESTU2AY.js";
-import "../../chunk-PMJIFLDT.js";
+} from "../../chunk-MMLVZWMD.js";
+import "../../chunk-NLHVQJQ2.js";
+import "../../chunk-GR4PG6HY.js";
 import "../../chunk-LDBWASUA.js";
+import "../../chunk-VFQD57ZY.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   Form,

package/dist/molecules/form/index.cjs

@@ -70,6 +70,7 @@ var import_react3 = require("react");
 
 // src/atoms/heading.tsx
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
 var import_react = require("react");
 
 // src/utils/map-with-responsive.ts
@@ -90,6 +91,29 @@ 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/heading.tsx
 var import_themes2 = require("@radix-ui/themes");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -110,23 +134,40 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
+  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
   const radixSize = (0, import_react.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/atoms/typo.tsx
 var import_themes3 = require("@radix-ui/themes");
+var import_clsx2 = require("clsx");
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Typo = (0, import_react2.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_react2.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
     const radixSize = (0, import_react2.useMemo)(() => {
       if (size !== void 0) return size;
       if (variant === void 0) return "2";
@@ -145,7 +186,16 @@ var Typo = (0, import_react2.forwardRef)(
         }
       });
     }, [size, variant]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_themes3.Text,
+      __spreadProps(__spreadValues({}, rest), {
+        className: (0, import_clsx2.clsx)(colorClassName, className),
+        color: radixColor,
+        ref,
+        size: radixSize,
+        children
+      })
+    );
   }
 );
 Typo.displayName = "Typo";

package/dist/molecules/form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/molecules/form/index.ts","../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["export * from './form';\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Root\n        {...rest}\n        className={`FormRoot ${className || ''}`}\n        ref={ref}\n      >\n        {children}\n      </RadixForm.Root>\n    );\n  }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n  name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Field\n        {...rest}\n        className={`FormField ${className || ''}`}\n        ref={ref}\n      >\n        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n      </RadixForm.Field>\n    );\n  }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo variant=\"body\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    const Comp = useMemo(() => {\n      switch (variant) {\n        case 'title':\n          return HeadingLabel;\n        case 'caption':\n          return CaptionLabel;\n        case 'body':\n        default:\n          return BodyLabel;\n      }\n    }, [variant]);\n\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Label\n        {...rest}\n        asChild\n        className={`FormLabel ${className || ''}`}\n        ref={ref}\n      >\n        <Comp>\n          {children}\n          {fieldProps.required ? (\n            <Typo as=\"span\" color=\"tomato\">\n              {` *`}\n            </Typo>\n          ) : null}\n        </Comp>\n      </RadixForm.Label>\n    );\n  }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Message\n        {...rest}\n        asChild\n        className={`FormMessage ${className || ''}`}\n        ref={ref}\n      >\n        <Typo color=\"red\">{children}</Typo>\n      </RadixForm.Message>\n    );\n  }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n  ({ className, ...rest }, ref) => {\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Control\n        {...rest}\n        className={`FormControl ${className || ''}`}\n        ref={ref}\n        required={fieldProps.required}\n      />\n    );\n  }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n  children: React.ReactNode;\n  label: string;\n  labelVariant?: FormLabelProps['variant'];\n  errorMessage?: string;\n}\n\nexport function FormItem({\n  label,\n  labelVariant,\n  children,\n  errorMessage,\n  ...fieldProps\n}: FormItemProps): React.ReactNode {\n  return (\n    <Form.Field {...fieldProps}>\n      <Form.Label variant={labelVariant}>{label}</Form.Label>\n      {children}\n      <Form.Message forceMatch={Boolean(errorMessage)}>\n        {errorMessage}\n      </Form.Message>\n    </Form.Field>\n  );\n}\n\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n  FormItem,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n \n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\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 { 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"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}
+{"version":3,"sources":["../../../src/molecules/form/index.ts","../../../src/molecules/form/form.tsx","../../../src/atoms/heading.tsx","../../../src/utils/map-with-responsive.ts","../../../src/utils/resolve-color.ts","../../../src/atoms/typo.tsx"],"sourcesContent":["export * from './form';\n","import * as RadixForm from '@radix-ui/react-form';\nimport React, { createContext, forwardRef, useContext, useMemo } from 'react';\nimport type { HeadingProps } from '@radix-ui/themes';\nimport { Heading } from '../../atoms/heading';\nimport type { TypoProps } from '../../atoms/typo';\nimport { Typo } from '../../atoms/typo';\n\nconst Root = forwardRef<HTMLFormElement, RadixForm.FormProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Root\n        {...rest}\n        className={`FormRoot ${className || ''}`}\n        ref={ref}\n      >\n        {children}\n      </RadixForm.Root>\n    );\n  }\n);\n\nRoot.displayName = 'FORM_ROOT';\n\nexport type FormFieldProps = RadixForm.FormFieldProps & { required?: boolean };\n\nconst FieldContext = createContext<FormFieldProps>({\n  name: '',\n});\n\nconst Field = forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Field\n        {...rest}\n        className={`FormField ${className || ''}`}\n        ref={ref}\n      >\n        <FieldContext.Provider value={rest}>{children}</FieldContext.Provider>\n      </RadixForm.Field>\n    );\n  }\n);\nField.displayName = 'FORM_FIELD';\n\nexport type FormLabelProps = RadixForm.FormLabelProps & {\n  /** label의 타입을 지정  */\n  variant?: 'title' | 'body' | 'caption';\n};\n\nfunction HeadingLabel(props: HeadingProps): React.ReactNode {\n  return (\n    <Heading variant=\"heading5\" {...props}>\n      {props.children}\n    </Heading>\n  );\n}\n\nfunction CaptionLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo color=\"gray\" variant=\"caption\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nfunction BodyLabel(props: TypoProps): React.ReactNode {\n  return (\n    <Typo variant=\"body\" weight=\"bold\" {...props}>\n      {props.children}\n    </Typo>\n  );\n}\n\nconst Label = forwardRef<HTMLLabelElement, FormLabelProps>(\n  ({ children, className, variant, ...rest }, ref) => {\n    const Comp = useMemo(() => {\n      switch (variant) {\n        case 'title':\n          return HeadingLabel;\n        case 'caption':\n          return CaptionLabel;\n        case 'body':\n        default:\n          return BodyLabel;\n      }\n    }, [variant]);\n\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Label\n        {...rest}\n        asChild\n        className={`FormLabel ${className || ''}`}\n        ref={ref}\n      >\n        <Comp>\n          {children}\n          {fieldProps.required ? (\n            <Typo as=\"span\" color=\"tomato\">\n              {` *`}\n            </Typo>\n          ) : null}\n        </Comp>\n      </RadixForm.Label>\n    );\n  }\n);\nLabel.displayName = 'FORM_Label';\n\nconst Message = forwardRef<HTMLSpanElement, RadixForm.FormMessageProps>(\n  ({ children, className, ...rest }, ref) => {\n    return (\n      <RadixForm.Message\n        {...rest}\n        asChild\n        className={`FormMessage ${className || ''}`}\n        ref={ref}\n      >\n        <Typo color=\"red\">{children}</Typo>\n      </RadixForm.Message>\n    );\n  }\n);\nMessage.displayName = 'FORM_Message';\n\ntype ControlProps = Omit<RadixForm.FormControlProps, 'required'>;\nconst Control = forwardRef<HTMLInputElement, ControlProps>(\n  ({ className, ...rest }, ref) => {\n    const fieldProps = useContext(FieldContext);\n    return (\n      <RadixForm.Control\n        {...rest}\n        className={`FormControl ${className || ''}`}\n        ref={ref}\n        required={fieldProps.required}\n      />\n    );\n  }\n);\nControl.displayName = 'FORM_Control';\n\ninterface FormItemProps extends FormFieldProps {\n  children: React.ReactNode;\n  label: string;\n  labelVariant?: FormLabelProps['variant'];\n  errorMessage?: string;\n}\n\nexport function FormItem({\n  label,\n  labelVariant,\n  children,\n  errorMessage,\n  ...fieldProps\n}: FormItemProps): React.ReactNode {\n  return (\n    <Form.Field {...fieldProps}>\n      <Form.Label variant={labelVariant}>{label}</Form.Label>\n      {children}\n      <Form.Message forceMatch={Boolean(errorMessage)}>\n        {errorMessage}\n      </Form.Message>\n    </Form.Field>\n  );\n}\n\nexport const Form = {\n  Root,\n  Field,\n  Label,\n  Message,\n  Control: RadixForm.Control,\n  Submit: RadixForm.Submit,\n  FormItem,\n};\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { clsx } from 'clsx';\nimport { useMemo } 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 { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = DistributiveOmit<RadixHeadingProps, 'color'> & {\n  variant?: Responsive<HeadingVariant>;\n  color?: UiColor;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, color, className, ...rest } = props;\n\n  const { color: radixColor, className: colorClassName } = useMemo(\n    () => resolveColor(color),\n    [color]\n  );\n\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n\n  }, [size, variant]);\n\n  return (\n    <RadixHeading\n      {...rest}\n      className={clsx(colorClassName, className)}\n      color={radixColor}\n      size={radixSize}\n    >\n      {children}\n    </RadixHeading>\n  );\n}\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","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"],"mappings":"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","names":["import_react","import_themes","Heading","RadixHeading","import_themes","import_clsx","import_react","import_jsx_runtime","RadixText","import_jsx_runtime","Root","Field","Heading","Label","Message","Control"]}

package/dist/molecules/form/index.js

@@ -1,10 +1,11 @@
 import {
   Form,
   FormItem
-} from "../../chunk-QDC3LFHS.js";
-import "../../chunk-BESTU2AY.js";
-import "../../chunk-PMJIFLDT.js";
+} from "../../chunk-MMLVZWMD.js";
+import "../../chunk-NLHVQJQ2.js";
+import "../../chunk-GR4PG6HY.js";
 import "../../chunk-LDBWASUA.js";
+import "../../chunk-VFQD57ZY.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   Form,

package/dist/molecules/ghost-post.cjs

@@ -54,10 +54,48 @@ __export(ghost_post_exports, {
 module.exports = __toCommonJS(ghost_post_exports);
 
 // src/theme/theme-provider.tsx
+var import_react = require("react");
 var import_themes = require("@radix-ui/themes");
+var import_clsx = require("clsx");
+
+// 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_jsx_runtime = require("react/jsx-runtime");
+var ThemeAccentContext = (0, import_react.createContext)(void 0);
 function ThemeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
+  const _a = props, { accentColor = "iris", className } = _a, rest = __objRest(_a, ["accentColor", "className"]);
+  const { color: radixAccent, className: accentClassName } = resolveColor(accentColor);
+  const themeAccent = accentClassName ? accentColor : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeAccentContext.Provider, { value: themeAccent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_themes.Theme,
+    __spreadValues({
+      accentColor: radixAccent != null ? radixAccent : "iris",
+      className: (0, import_clsx.clsx)(accentClassName, className),
+      radius: "medium"
+    }, rest)
+  ) });
 }
 
 // src/atoms/flex.tsx
@@ -65,7 +103,8 @@ var import_themes2 = require("@radix-ui/themes");
 
 // src/atoms/heading.tsx
 var import_themes3 = require("@radix-ui/themes");
-var import_react = require("react");
+var import_clsx2 = require("clsx");
+var import_react2 = require("react");
 
 // src/utils/map-with-responsive.ts
 var mapWithResponsive = (args) => {
@@ -105,23 +144,35 @@ var mapVariant = (variant) => {
   }
 };
 function Heading2(props) {
-  const _a = props, { size, children, variant } = _a, rest = __objRest(_a, ["size", "children", "variant"]);
-  const radixSize = (0, import_react.useMemo)(() => {
+  const _a = props, { size, children, variant, color, className } = _a, rest = __objRest(_a, ["size", "children", "variant", "color", "className"]);
+  const { color: radixColor, className: colorClassName } = (0, import_react2.useMemo)(
+    () => resolveColor(color),
+    [color]
+  );
+  const radixSize = (0, import_react2.useMemo)(() => {
     return variant ? mapWithResponsive({
       value: variant,
       mapFn: mapVariant
     }) : size;
   }, [size, variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes3.Heading, __spreadProps(__spreadValues({}, rest), { size: radixSize, children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_themes3.Heading,
+    __spreadProps(__spreadValues({}, rest), {
+      className: (0, import_clsx2.clsx)(colorClassName, className),
+      color: radixColor,
+      size: radixSize,
+      children
+    })
+  );
 }
 
 // src/atoms/box.tsx
 var import_themes5 = require("@radix-ui/themes");
 
 // src/atoms/button.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_themes6 = require("@radix-ui/themes");
-var import_clsx = require("clsx");
+var import_clsx3 = require("clsx");
 
 // src/utils/convert-button-size.ts
 var convertSizeStr = (size) => {
@@ -156,19 +207,25 @@ var convertSize = (size) => {
 
 // src/atoms/button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var Button = (0, import_react2.forwardRef)(
+var Button = (0, import_react3.forwardRef)(
   (props, ref) => {
-    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
-    const radixSize = (0, import_react2.useMemo)(() => {
+    const _a = props, { size, style, variant, color } = _a, restProps = __objRest(_a, ["size", "style", "variant", "color"]);
+    const radixSize = (0, import_react3.useMemo)(() => {
       return convertSize(size);
     }, [size]);
-    const radixVariant = (0, import_react2.useMemo)(() => {
+    const radixVariant = (0, import_react3.useMemo)(() => {
       if (variant === "transparent") return "ghost";
       return variant;
     }, [variant]);
-    const className = (0, import_react2.useMemo)(() => {
-      return (0, import_clsx.clsx)(props.className, { transparent: variant === "transparent" });
-    }, [props.className, variant]);
+    const { color: radixColor, className: colorClassName } = (0, import_react3.useMemo)(
+      () => resolveColor(color),
+      [color]
+    );
+    const className = (0, import_react3.useMemo)(() => {
+      return (0, import_clsx3.clsx)(props.className, colorClassName, {
+        transparent: variant === "transparent"
+      });
+    }, [props.className, colorClassName, variant]);
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       import_themes6.Button,
       __spreadProps(__spreadValues({
@@ -177,6 +234,7 @@ var Button = (0, import_react2.forwardRef)(
         variant: radixVariant
       }, restProps), {
         className,
+        color: radixColor,
         ref,
         size: radixSize
       })