@tipp/ui 0.1.15 → 0.1.16

package/package.json

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

package/src/atoms/typo.tsx

@@ -1,30 +1,34 @@
 import type { TextProps as RadixTextProps } from '@radix-ui/themes';
 import { Text as RadixText } from '@radix-ui/themes';
-import React, { useMemo } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 
 export type TypoProps = RadixTextProps & {
   variant?: 'body' | 'caption' | 'subtitle';
 };
 
-export function Typo(props: TypoProps): React.ReactNode {
-  const { size, variant, children, ...rest } = props;
+const Typo = forwardRef<HTMLSpanElement, TypoProps>(
+  (props: TypoProps, ref): React.ReactNode => {
+    const { size, variant, children, ...rest } = props;
 
-  const radixSize = useMemo<RadixTextProps['size']>(() => {
-    switch (variant) {
-      case 'caption':
-        return '1';
-      case 'subtitle':
-        return '3';
-      case 'body':
-        return '2';
-      default:
-        return size;
-    }
-  }, [size, variant]);
+    const radixSize = useMemo<RadixTextProps['size']>(() => {
+      switch (variant) {
+        case 'caption':
+          return '1';
+        case 'subtitle':
+          return '3';
+        case 'body':
+          return '2';
+        default:
+          return size;
+      }
+    }, [size, variant]);
 
-  return (
-    <RadixText {...rest} size={radixSize}>
-      {children}
-    </RadixText>
-  );
-}
+    return (
+      <RadixText {...rest} ref={ref} size={radixSize}>
+        {children}
+      </RadixText>
+    );
+  }
+);
+
+Typo.displayName = 'Typo';