added universal Typography component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sensearena/ui",
-  "version": "0.2.63",
+  "version": "0.2.64",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/components/typography/Heading.tsx

@@ -10,7 +10,10 @@ type Props = {
   className?: string;
   style?: CSSProperties;
 };
-
+/**
+ *
+ * @deprecated use UniTypography
+ */
 export const Heading: FC<Props> = ({ children, weight, root = 'h1', className, style, variant }) => {
   const Root = root;
   return (

src/components/typography/Paragraph.tsx

@@ -7,6 +7,10 @@ type Props = {
   children?: ReactNode;
 } & DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
 
+/**
+ *
+ * @deprecated use UniTypography
+ */
 export const Paragraph: FC<Props> = ({ children, variant, className, style, ...rest }) => {
   return (
     <p style={style} className={clsx(paragraphStyle({ variant }), className)} {...rest}>

src/components/typography/UniversalTypography.tsx

@@ -0,0 +1,34 @@
+import { DetailedHTMLProps, HTMLAttributes, ReactNode, forwardRef } from 'react';
+import { clsx } from '../../utils';
+import { uniTypoStyle } from './typography.style.css';
+
+export type UniTypographyProps = {
+  weight?: 'light' | 'medium' | 'normal' | 'bold' | 'semiBold';
+  children?: ReactNode;
+  root?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+  font?: 'base' | 'atp';
+  transform?: 'up';
+  size?: string | number;
+  lineHeight?: string | number;
+} & DetailedHTMLProps<HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>;
+
+export const UniTypography = forwardRef<HTMLElement, UniTypographyProps>(
+  ({ weight, font, children, root = 'p', ref, className, transform, style = {}, lineHeight, size, ...rest }) => {
+    const Root = root;
+
+    return (
+      <Root
+        ref={ref}
+        style={{
+          lineHeight,
+          fontSize: size,
+          ...style,
+        }}
+        className={clsx(className, uniTypoStyle({ font, weight, transform }))}
+        {...rest}
+      >
+        {children}
+      </Root>
+    );
+  },
+);

src/components/typography/index.ts

@@ -1,2 +1,3 @@
 export * from './Heading';
 export * from './Paragraph';
+export * from './UniversalTypography';

src/components/typography/typography.style.css.ts

@@ -193,3 +193,46 @@ export const paragraphStyle = recipe({
     variant: 'body',
   },
 });
+
+export const uniTypoStyle = recipe({
+  base: {
+    letterSpacing: 0,
+    margin: 0,
+  },
+  variants: {
+    weight: {
+      light: {
+        fontWeight: 300,
+      },
+      normal: {
+        fontWeight: 400,
+      },
+      medium: {
+        fontWeight: 500,
+      },
+      semiBold: {
+        fontWeight: 600,
+      },
+      bold: {
+        fontWeight: 700,
+      },
+    },
+    font: {
+      base: {
+        fontFamily: vars.font.family,
+      },
+      atp: {
+        fontFamily: vars.font.atpFamily,
+      },
+    },
+    transform: {
+      up: {
+        textTransform: 'uppercase',
+      },
+    },
+  },
+  defaultVariants: {
+    weight: 'normal',
+    font: 'base',
+  },
+});