@tipp/ui 2.7.0 → 2.8.0

package/dist/utils/mono-style.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/mono-style.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\n\n/**\n * 등폭(monospace) 텍스트 스타일.\n * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)\n * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함\n *\n * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.\n */\nexport const MONO_STYLE: CSSProperties = {\n  fontFamily: 'var(--code-font-family, ui-monospace, \"SF Mono\", monospace)',\n  fontVariantNumeric: 'tabular-nums',\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASO,IAAM,aAA4B;AAAA,EACvC,YAAY;AAAA,EACZ,oBAAoB;AACtB;","names":[]}

package/dist/utils/mono-style.d.cts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+/**
+ * 등폭(monospace) 텍스트 스타일.
+ * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)
+ * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함
+ *
+ * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.
+ */
+declare const MONO_STYLE: CSSProperties;
+
+export { MONO_STYLE };

package/dist/utils/mono-style.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+/**
+ * 등폭(monospace) 텍스트 스타일.
+ * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)
+ * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함
+ *
+ * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.
+ */
+declare const MONO_STYLE: CSSProperties;
+
+export { MONO_STYLE };

package/dist/utils/mono-style.js

@@ -0,0 +1,8 @@
+import {
+  MONO_STYLE
+} from "../chunk-PO2PBAHW.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  MONO_STYLE
+};
+//# sourceMappingURL=mono-style.js.map

package/dist/utils/mono-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/atoms/heading.tsx

@@ -6,6 +6,7 @@ import type { Responsive } from '@radix-ui/themes/props';
 import { clsx } from 'clsx';
 import { useMemo } from 'react';
 import { mapWithResponsive } from '@/utils/map-with-responsive';
+import { MONO_STYLE } from '../utils/mono-style';
 import {
   resolveColor,
   type DistributiveOmit,
@@ -22,6 +23,8 @@ type HeadingVariant =
 export type HeadingProps = DistributiveOmit<RadixHeadingProps, 'color'> & {
   variant?: Responsive<HeadingVariant>;
   color?: UiColor;
+  /** 등폭(monospace) 폰트 + 숫자 고정폭 정렬(tabular-nums). 점수·퍼센트 등 수치 표시에 사용한다. */
+  mono?: boolean;
 };
 
 type HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
@@ -44,7 +47,8 @@ const mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {
 };
 
 export function Heading(props: HeadingProps): React.ReactNode {
-  const { size, children, variant, color, className, ...rest } = props;
+  const { size, children, variant, color, className, mono, style, ...rest } =
+    props;
 
   const { color: radixColor, className: colorClassName } = useMemo(
     () => resolveColor(color),
@@ -67,6 +71,7 @@ export function Heading(props: HeadingProps): React.ReactNode {
       className={clsx(colorClassName, className)}
       color={radixColor}
       size={radixSize}
+      style={mono ? { ...MONO_STYLE, ...style } : style}
     >
       {children}
     </RadixHeading>

package/src/atoms/typo.tsx

@@ -4,6 +4,7 @@ import { Text as RadixText } from '@radix-ui/themes';
 import { clsx } from 'clsx';
 import React, { useMemo, forwardRef } from 'react';
 import { mapWithResponsive } from '@/utils/map-with-responsive';
+import { MONO_STYLE } from '../utils/mono-style';
 import {
   resolveColor,
   type DistributiveOmit,
@@ -13,11 +14,14 @@ import {
 export type TypoProps = DistributiveOmit<RadixTextProps, 'color'> & {
   variant?: Responsive<'body' | 'caption' | 'subtitle'>;
   color?: UiColor;
+  /** 등폭(monospace) 폰트 + 숫자 고정폭 정렬(tabular-nums). 점수·퍼센트 등 수치 표시에 사용한다. */
+  mono?: boolean;
 };
 
 export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
   (props: TypoProps, ref): React.ReactNode => {
-    const { size, variant, children, color, className, ...rest } = props;
+    const { size, variant, children, color, className, mono, style, ...rest } =
+      props;
 
     const { color: radixColor, className: colorClassName } = useMemo(
       () => resolveColor(color),
@@ -52,6 +56,7 @@ export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
         color={radixColor}
         ref={ref}
         size={radixSize}
+        style={mono ? { ...MONO_STYLE, ...style } : style}
       >
         {children}
       </RadixText>

package/src/utils/index.ts

@@ -4,4 +4,5 @@ export * from './scroll-to';
 export * from './get-time-options';
 export * from './get-callout-icon-component';
 export * from './get-dynamic-form-display-value';
-export * from './resolve-color';
+export * from './resolve-color';
+export * from './mono-style';

package/src/utils/mono-style.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * 등폭(monospace) 텍스트 스타일.
+ * - `font-family`: 등폭 폰트(`--code-font-family`는 Radix Themes가 제공, 없으면 시스템 등폭으로 폴백)
+ * - `font-variant-numeric: tabular-nums`: 숫자를 고정폭으로 정렬해 점수·퍼센트·통계가 자릿수마다 흔들리지 않게 함
+ *
+ * `Typo`/`Heading`의 `mono` prop 구현에 사용된다.
+ */
+export const MONO_STYLE: CSSProperties = {
+  fontFamily: 'var(--code-font-family, ui-monospace, "SF Mono", monospace)',
+  fontVariantNumeric: 'tabular-nums',
+};

package/dist/chunk-GR4PG6HY.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/typo.tsx"],"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"],"mappings":";;;;;;;;;;;;;AAEA,SAAS,QAAQ,iBAAiB;AAClC,SAAS,YAAY;AACrB,SAAgB,SAAS,kBAAkB;AA4CrC;AA/BC,IAAM,OAAO;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,IAAI;AAAA,MACvD,MAAM,aAAa,KAAK;AAAA,MACxB,CAAC,KAAK;AAAA,IACR;AAEA,UAAM,YAAY,QAAgC,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;AAAA,uCACK,OADL;AAAA,QAEC,WAAW,KAAK,gBAAgB,SAAS;AAAA,QACzC,OAAO;AAAA,QACP;AAAA,QACA,MAAM;AAAA,QAEL;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;","names":[]}

package/dist/chunk-NLHVQJQ2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/heading.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;AAAA;AAAA,EACE,WAAW;AAAA,OAEN;AAEP,SAAS,YAAY;AACrB,SAAS,eAAe;AAQxB,SAAoB,eAAoB;AAkDpC;AApCJ,IAAM,aAAa,CAAC,YAAsD;AACxE,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,SAASA,SAAQ,OAAsC;AAC5D,QAA+D,YAAvD,QAAM,UAAU,SAAS,OAAO,UA9C1C,IA8CiE,IAAT,iBAAS,IAAT,CAA9C,QAAM,YAAU,WAAS,SAAO;AAExC,QAAM,EAAE,OAAO,YAAY,WAAW,eAAe,IAAI;AAAA,IACvD,MAAM,aAAa,KAAK;AAAA,IACxB,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,YAAY,QAAmC,MAAM;AACzD,WAAO,UACH,kBAAkB;AAAA,MAChB,OAAO;AAAA,MACP,OAAO;AAAA,IACT,CAAC,IACD;AAAA,EAEN,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SACE;AAAA,IAAC;AAAA,qCACK,OADL;AAAA,MAEC,WAAW,KAAK,gBAAgB,SAAS;AAAA,MACzC,OAAO;AAAA,MACP,MAAM;AAAA,MAEL;AAAA;AAAA,EACH;AAEJ;","names":["Heading"]}

package/dist/chunk-OLJN3WXR.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-OLJN3WXR.js.map