@korsolutions/ui 0.0.11 → 0.0.12

package/README.md

@@ -0,0 +1,2 @@
+# TODO
+- [ ] Line height

package/dist/components/index.d.mts

@@ -1,6 +1,6 @@
-import { E as InputStyles, f as SelectStyles, k as FieldStyles, r as CardStyles, u as SelectRootBaseProps, w as InputPrimitiveBaseProps, x as ButtonStyles } from "../index-Cq_-PiOm.mjs";
+import { E as InputStyles, f as SelectStyles, k as FieldStyles, r as CardStyles, u as SelectRootBaseProps, w as InputPrimitiveBaseProps, x as ButtonStyles } from "../index-Dafk8ZGv.mjs";
 import React from "react";
-import { TextProps as TextProps$1, TextStyle } from "react-native";
+import { TextProps, TextStyle } from "react-native";
 
 //#region src/components/button/variants/index.d.ts
 declare const ButtonVariants: {
@@ -34,11 +34,11 @@ interface CardProps {
 declare function Card(props: CardProps): React.JSX.Element;
 //#endregion
 //#region src/components/input/variants/default.d.ts
-declare function useInputVariantDefault$1(): InputStyles;
+declare function useInputVariantDefault(): InputStyles;
 //#endregion
 //#region src/components/input/variants/index.d.ts
 declare const InputVariants: {
-  default: typeof useInputVariantDefault$1;
+  default: typeof useInputVariantDefault;
 };
 //#endregion
 //#region src/components/input/input.d.ts
@@ -82,19 +82,39 @@ interface SelectProps<T> extends SelectRootBaseProps {
 }
 declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
 //#endregion
-//#region src/components/text/variants/default.d.ts
-declare function useInputVariantDefault(): TextStyle;
+//#region src/components/typography/variants/body-lg.d.ts
+declare function useTextVariantBodyLg(): TextStyle;
 //#endregion
-//#region src/components/text/variants/index.d.ts
-declare const TextVariants: {
-  default: typeof useInputVariantDefault;
+//#region src/components/typography/variants/body-md.d.ts
+declare function useTextVariantBodyMd(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/body-sm.d.ts
+declare function useTextVariantBodySm(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-lg.d.ts
+declare function useTextVariantHeadingLg(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-md.d.ts
+declare function useTextVariantHeadingMd(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/heading-sm.d.ts
+declare function useTextVariantHeadingSm(): TextStyle;
+//#endregion
+//#region src/components/typography/variants/index.d.ts
+declare const TypographyVariants: {
+  "body-sm": typeof useTextVariantBodySm;
+  "body-md": typeof useTextVariantBodyMd;
+  "body-lg": typeof useTextVariantBodyLg;
+  "heading-sm": typeof useTextVariantHeadingSm;
+  "heading-md": typeof useTextVariantHeadingMd;
+  "heading-lg": typeof useTextVariantHeadingLg;
 };
 //#endregion
-//#region src/components/text/text.d.ts
-interface TextProps extends TextProps$1 {
-  variant?: keyof typeof TextVariants;
+//#region src/components/typography/typography.d.ts
+interface TypographyProps extends TextProps {
+  variant?: keyof typeof TypographyVariants;
 }
-declare function Text(props: TextProps): React.JSX.Element;
+declare function Typography(props: TypographyProps): React.JSX.Element;
 //#endregion
 //#region src/components/link/variants/default.d.ts
 declare function useLinkVariantDefault(): TextStyle;
@@ -105,10 +125,10 @@ declare const LinkVariants: {
 };
 //#endregion
 //#region src/components/link/link.d.ts
-interface LinkProps extends TextProps$1 {
+interface LinkProps extends TextProps {
   href?: string;
   variant?: keyof typeof LinkVariants;
 }
 declare function Link(props: LinkProps): React.JSX.Element;
 //#endregion
-export { Button, Card, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Text, TextProps };
+export { Button, Card, Field, FieldProps, Input, Link, LinkProps, Select, SelectOption, SelectProps, Typography, TypographyProps };

package/dist/components/index.mjs

@@ -1,8 +1,8 @@
-import { n as useTheme } from "../themes-D5iq6sfL.mjs";
+import { n as useTheme } from "../themes-DXcjBdO2.mjs";
 import "../portal-DoPaAohb.mjs";
 import { a as FieldPrimitive, i as InputPrimitive, n as SelectPrimitive, r as ButtonPrimitive, t as CardPrimitive } from "../primitives-C2enZ5Ku.mjs";
 import React from "react";
-import { Linking, Text as Text$1 } from "react-native";
+import { Linking, Text } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/utils/use-themed-styles.ts
@@ -12,14 +12,15 @@ const useThemedStyles = (callback) => {
 		colors: theme.colors,
 		radius: theme.radius,
 		fontFamily: theme.fontFamily,
-		letterSpacing: theme.letterSpacing
+		letterSpacing: theme.letterSpacing,
+		fontSize: theme.fontSize
 	});
 };
 
 //#endregion
 //#region src/components/button/variants/default.tsx
 const useButtonVariantDefault = () => {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		root: {
 			default: {
 				flexDirection: "row",
@@ -37,7 +38,7 @@ const useButtonVariantDefault = () => {
 		label: {
 			default: {
 				color: colors.primaryForeground,
-				fontSize: 16,
+				fontSize,
 				fontWeight: "bold",
 				fontFamily
 			},
@@ -72,7 +73,7 @@ function Button(props) {
 //#endregion
 //#region src/components/card/variants/default.tsx
 function useCardVariantDefault() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		root: { default: {
 			borderWidth: 1,
 			borderColor: colors.border,
@@ -84,7 +85,7 @@ function useCardVariantDefault() {
 		header: { default: { paddingHorizontal: 24 } },
 		title: { default: {
 			fontFamily,
-			fontSize: 18,
+			fontSize: fontSize * 1.25,
 			fontWeight: "600",
 			color: colors.foreground
 		} },
@@ -112,8 +113,8 @@ function Card(props) {
 
 //#endregion
 //#region src/components/input/variants/default.tsx
-function useInputVariantDefault$1() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+function useInputVariantDefault() {
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		default: {
 			placeholderTextColor: colors.mutedForeground,
 			selectionColor: colors.primary,
@@ -126,6 +127,7 @@ function useInputVariantDefault$1() {
 				paddingHorizontal: 16,
 				outlineWidth: 0,
 				fontFamily,
+				fontSize,
 				height: 48,
 				color: colors.foreground
 			}
@@ -140,7 +142,7 @@ function useInputVariantDefault$1() {
 
 //#endregion
 //#region src/components/input/variants/index.ts
-const InputVariants = { default: useInputVariantDefault$1 };
+const InputVariants = { default: useInputVariantDefault };
 
 //#endregion
 //#region src/components/input/input.tsx
@@ -156,25 +158,25 @@ function Input(props) {
 //#endregion
 //#region src/components/field/variants/default.tsx
 const useFieldVariantDefault = () => {
-	return useThemedStyles(({ colors, fontFamily }) => ({
+	return useThemedStyles(({ colors, fontFamily, fontSize }) => ({
 		root: {
 			flexDirection: "column",
 			gap: 8
 		},
 		label: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			fontWeight: "600",
 			color: colors.foreground
 		},
 		description: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			color: colors.mutedForeground
 		},
 		error: {
 			fontFamily,
-			fontSize: 14,
+			fontSize: fontSize * .875,
 			color: colors.danger
 		}
 	}));
@@ -206,7 +208,7 @@ function Field(props) {
 //#endregion
 //#region src/components/select/variants/default.tsx
 function useSelectVariantDefault() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		root: {
 			default: {},
 			disabled: {}
@@ -226,7 +228,7 @@ function useSelectVariantDefault() {
 		value: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -234,7 +236,7 @@ function useSelectVariantDefault() {
 		placeholder: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.mutedForeground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -259,7 +261,7 @@ function useSelectVariantDefault() {
 				paddingVertical: 12,
 				paddingHorizontal: 16,
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground,
 				borderRadius: radius / 2
 			},
@@ -290,26 +292,91 @@ function Select(props) {
 }
 
 //#endregion
-//#region src/components/text/variants/default.tsx
-function useInputVariantDefault() {
-	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+//#region src/components/typography/variants/body-lg.tsx
+function useTextVariantBodyLg() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * 1.25,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/body-md.tsx
+function useTextVariantBodyMd() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
 		color: colors.foreground,
-		fontSize: 16,
+		fontSize,
 		fontFamily,
 		letterSpacing
 	}));
 }
 
 //#endregion
-//#region src/components/text/variants/index.ts
-const TextVariants = { default: useInputVariantDefault };
+//#region src/components/typography/variants/body-sm.tsx
+function useTextVariantBodySm() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * .875,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-lg.tsx
+function useTextVariantHeadingLg() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * 1.5,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-md.tsx
+function useTextVariantHeadingMd() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize: fontSize * 1.25,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/heading-sm.tsx
+function useTextVariantHeadingSm() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.foreground,
+		fontSize,
+		fontFamily,
+		letterSpacing,
+		fontWeight: "600"
+	}));
+}
+
+//#endregion
+//#region src/components/typography/variants/index.ts
+const TypographyVariants = {
+	["body-sm"]: useTextVariantBodySm,
+	["body-md"]: useTextVariantBodyMd,
+	["body-lg"]: useTextVariantBodyLg,
+	["heading-sm"]: useTextVariantHeadingSm,
+	["heading-md"]: useTextVariantHeadingMd,
+	["heading-lg"]: useTextVariantHeadingLg
+};
 
 //#endregion
-//#region src/components/text/text.tsx
-function Text(props) {
-	const useVariantStyles = TextVariants[props.variant ?? "default"];
+//#region src/components/typography/typography.tsx
+function Typography(props) {
+	const useVariantStyles = TypographyVariants[props.variant ?? "body-md"];
 	const variantStyles = useVariantStyles();
-	return /* @__PURE__ */ jsx(Text$1, {
+	return /* @__PURE__ */ jsx(Text, {
 		...props,
 		style: variantStyles
 	});
@@ -318,9 +385,9 @@ function Text(props) {
 //#endregion
 //#region src/components/link/variants/default.tsx
 function useLinkVariantDefault() {
-	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
 		color: colors.primary,
-		fontSize: 16,
+		fontSize,
 		fontFamily,
 		textDecorationLine: "underline",
 		letterSpacing
@@ -342,7 +409,7 @@ function Link(props) {
 		}
 		props.onPress?.(e);
 	};
-	return /* @__PURE__ */ jsx(Text$1, {
+	return /* @__PURE__ */ jsx(Text, {
 		...props,
 		style: variantStyles,
 		onPress: handlePress
@@ -350,4 +417,4 @@ function Link(props) {
 }
 
 //#endregion
-export { Button, Card, Field, Input, Link, Select, Text };
+export { Button, Card, Field, Input, Link, Select, Typography };

package/dist/{index-Cq_-PiOm.d.mts → index-Dafk8ZGv.d.mts}

@@ -1,4 +1,4 @@
-import * as react3 from "react";
+import * as react2 from "react";
 import React$1 from "react";
 import { StyleProp, TextInputProps, TextProps, TextStyle, ViewStyle } from "react-native";
 
@@ -65,7 +65,7 @@ interface InputPrimitiveProps extends InputPrimitiveBaseProps {
   render?: (props: InputPrimitiveProps) => React.ReactNode;
   styles?: InputStyles;
 }
-declare function InputPrimitive(props: InputPrimitiveProps): react3.JSX.Element;
+declare function InputPrimitive(props: InputPrimitiveProps): react2.JSX.Element;
 //#endregion
 //#region src/primitives/button/button-label.d.ts
 interface ButtonPrimitiveLabelProps {
@@ -152,7 +152,7 @@ interface SelectOptionProps {
   render?: (props: SelectOptionProps) => React.ReactElement;
   style?: StyleProp<TextStyle>;
 }
-declare function SelectOption(props: SelectOptionProps): react3.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react2.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";

package/dist/index.d.mts

@@ -23,6 +23,7 @@ interface Colors {
 type Radius = number;
 type FontFamily = string;
 type LetterSpacing = number;
+type FontSize = number;
 //#endregion
 //#region src/themes/provider.d.ts
 interface ThemeContext {
@@ -31,6 +32,7 @@ interface ThemeContext {
   fontFamily: FontFamily;
   colorScheme: ColorScheme;
   letterSpacing: LetterSpacing;
+  fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { n as useTheme, t as ThemeProvider } from "./themes-D5iq6sfL.mjs";
+import { n as useTheme, t as ThemeProvider } from "./themes-DXcjBdO2.mjs";
 import { n as PortalHost } from "./portal-DoPaAohb.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/primitives/index.d.mts

@@ -1,2 +1,2 @@
-import { A as FieldErrorProps, C as InputPrimitive, D as FieldPrimitive, E as InputStyles, M as FieldLabelProps, O as FieldPrimitiveRootProps, S as ButtonPrimitiveLabelProps, T as InputPrimitiveProps, _ as SelectTriggerProps, a as CardBodyProps, b as ButtonState, c as SelectPrimitive, d as SelectRootProps, f as SelectStyles, g as SelectValueProps, h as SelectOverlayProps, i as CardFooterProps, j as FieldDescriptionProps, k as FieldStyles, l as SelectPortalProps, m as SelectContentProps, n as CardRootProps, o as CardTitleProps, p as SelectOptionProps, r as CardStyles, s as CardHeaderProps, t as CardPrimitive, u as SelectRootBaseProps, v as ButtonPrimitive, w as InputPrimitiveBaseProps, x as ButtonStyles, y as ButtonPrimitiveRootProps } from "../index-Cq_-PiOm.mjs";
+import { A as FieldErrorProps, C as InputPrimitive, D as FieldPrimitive, E as InputStyles, M as FieldLabelProps, O as FieldPrimitiveRootProps, S as ButtonPrimitiveLabelProps, T as InputPrimitiveProps, _ as SelectTriggerProps, a as CardBodyProps, b as ButtonState, c as SelectPrimitive, d as SelectRootProps, f as SelectStyles, g as SelectValueProps, h as SelectOverlayProps, i as CardFooterProps, j as FieldDescriptionProps, k as FieldStyles, l as SelectPortalProps, m as SelectContentProps, n as CardRootProps, o as CardTitleProps, p as SelectOptionProps, r as CardStyles, s as CardHeaderProps, t as CardPrimitive, u as SelectRootBaseProps, v as ButtonPrimitive, w as InputPrimitiveBaseProps, x as ButtonStyles, y as ButtonPrimitiveRootProps } from "../index-Dafk8ZGv.mjs";
 export { ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps };

package/dist/{themes-D5iq6sfL.mjs → themes-DXcjBdO2.mjs}

@@ -45,7 +45,8 @@ const defaultThemeAssets = {
 	},
 	radius: 10,
 	fontFamily: "System",
-	letterSpacing: 0
+	letterSpacing: 0,
+	fontSize: 16
 };
 
 //#endregion
@@ -73,7 +74,8 @@ const ThemeProvider = (props) => {
 			colors,
 			radius: themesAssets.radius,
 			fontFamily: themesAssets.fontFamily,
-			letterSpacing: themesAssets.letterSpacing
+			letterSpacing: themesAssets.letterSpacing,
+			fontSize: themesAssets.fontSize
 		},
 		children: props.children
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

package/src/components/button/variants/default.tsx

@@ -3,7 +3,7 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useButtonVariantDefault = (): ButtonStyles => {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): ButtonStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
       root: {
         default: {
           flexDirection: "row",
@@ -25,7 +25,7 @@ export const useButtonVariantDefault = (): ButtonStyles => {
       label: {
         default: {
           color: colors.primaryForeground,
-          fontSize: 16,
+          fontSize,
           fontWeight: "bold",
           fontFamily,
         },

package/src/components/card/variants/default.tsx

@@ -3,7 +3,7 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useCardVariantDefault(): CardStyles {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): CardStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): CardStyles => ({
       root: {
         default: {
           borderWidth: 1,
@@ -22,7 +22,7 @@ export function useCardVariantDefault(): CardStyles {
       title: {
         default: {
           fontFamily,
-          fontSize: 18,
+          fontSize: fontSize * 1.25,
           fontWeight: "600",
           color: colors.foreground,
         },

package/src/components/field/variants/default.tsx

@@ -3,25 +3,25 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export const useFieldVariantDefault = (): FieldStyles => {
   return useThemedStyles(
-    ({ colors, fontFamily }): FieldStyles => ({
+    ({ colors, fontFamily, fontSize }): FieldStyles => ({
       root: {
         flexDirection: "column",
         gap: 8,
       },
       label: {
         fontFamily,
-        fontSize: 14,
+        fontSize: fontSize * 0.875,
         fontWeight: "600",
         color: colors.foreground,
       },
       description: {
         fontFamily,
-        fontSize: 14,
+        fontSize: fontSize * 0.875,
         color: colors.mutedForeground,
       },
       error: {
         fontFamily,
-        fontSize: 14,
+        fontSize: fontSize * 0.875,
         color: colors.danger,
       },
     })

package/src/components/index.ts

@@ -3,5 +3,5 @@ export * from "./card/card";
 export * from "./input/input";
 export * from "./field/field";
 export * from "./select/select";
-export * from "./text/text";
+export * from "./typography/typography";
 export * from "./link/link";

package/src/components/input/variants/default.tsx

@@ -3,7 +3,7 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useInputVariantDefault(): InputStyles {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): InputStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
       default: {
         placeholderTextColor: colors.mutedForeground,
         selectionColor: colors.primary,
@@ -16,6 +16,7 @@ export function useInputVariantDefault(): InputStyles {
           paddingHorizontal: 16,
           outlineWidth: 0,
           fontFamily,
+          fontSize,
           height: 48,
           color: colors.foreground,
         },

package/src/components/link/variants/default.tsx

@@ -3,9 +3,9 @@ import { TextStyle } from "react-native";
 
 export function useLinkVariantDefault(): TextStyle {
   return useThemedStyles(
-    ({ colors, fontFamily, letterSpacing }): TextStyle => ({
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
       color: colors.primary,
-      fontSize: 16,
+      fontSize,
       fontFamily,
       textDecorationLine: "underline",
       letterSpacing,

package/src/components/select/variants/default.tsx

@@ -3,7 +3,7 @@ import { useThemedStyles } from "@/utils/use-themed-styles";
 
 export function useSelectVariantDefault(): SelectStyles {
   return useThemedStyles(
-    ({ colors, radius, fontFamily }): SelectStyles => ({
+    ({ colors, radius, fontFamily, fontSize }): SelectStyles => ({
       root: {
         default: {},
         disabled: {},
@@ -25,7 +25,7 @@ export function useSelectVariantDefault(): SelectStyles {
       value: {
         default: {
           fontFamily,
-          fontSize: 16,
+          fontSize,
           color: colors.foreground,
         },
         disabled: {
@@ -35,7 +35,7 @@ export function useSelectVariantDefault(): SelectStyles {
       placeholder: {
         default: {
           fontFamily,
-          fontSize: 16,
+          fontSize,
           color: colors.mutedForeground,
         },
         disabled: {
@@ -62,7 +62,7 @@ export function useSelectVariantDefault(): SelectStyles {
           paddingVertical: 12,
           paddingHorizontal: 16,
           fontFamily,
-          fontSize: 16,
+          fontSize,
           color: colors.foreground,
           borderRadius: radius / 2,
         },

package/src/components/typography/typography.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Text as RnText, TextProps as RnTextProps } from "react-native";
+import { TypographyVariants } from "./variants";
+
+export interface TypographyProps extends RnTextProps {
+  variant?: keyof typeof TypographyVariants;
+}
+
+export function Typography(props: TypographyProps) {
+  const useVariantStyles = TypographyVariants[props.variant ?? "body-md"];
+  const variantStyles = useVariantStyles();
+  return <RnText {...props} style={variantStyles} />;
+}

package/src/components/typography/variants/body-lg.tsx

@@ -0,0 +1,13 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantBodyLg(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.25,
+      fontFamily,
+      letterSpacing,
+    })
+  );
+}

package/src/components/{text/variants/default.tsx → typography/variants/body-md.tsx}

@@ -1,11 +1,11 @@
 import { useThemedStyles } from "@/utils/use-themed-styles";
 import { TextStyle } from "react-native";
 
-export function useInputVariantDefault(): TextStyle {
+export function useTextVariantBodyMd(): TextStyle {
   return useThemedStyles(
-    ({ colors, fontFamily, letterSpacing }): TextStyle => ({
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
       color: colors.foreground,
-      fontSize: 16,
+      fontSize,
       fontFamily,
       letterSpacing,
     })

package/src/components/typography/variants/body-sm.tsx

@@ -0,0 +1,13 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantBodySm(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 0.875,
+      fontFamily,
+      letterSpacing,
+    })
+  );
+}

package/src/components/typography/variants/heading-lg.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantHeadingLg(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.5,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+    })
+  );
+}

package/src/components/typography/variants/heading-md.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantHeadingMd(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize: fontSize * 1.25,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+    })
+  );
+}

package/src/components/typography/variants/heading-sm.tsx

@@ -0,0 +1,14 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantHeadingSm(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      fontSize,
+      fontFamily,
+      letterSpacing,
+      fontWeight: "600",
+    })
+  );
+}

package/src/components/typography/variants/index.ts

@@ -0,0 +1,15 @@
+import { useTextVariantBodyLg } from "./body-lg";
+import { useTextVariantBodyMd } from "./body-md";
+import { useTextVariantBodySm } from "./body-sm";
+import { useTextVariantHeadingLg } from "./heading-lg";
+import { useTextVariantHeadingMd } from "./heading-md";
+import { useTextVariantHeadingSm } from "./heading-sm";
+
+export const TypographyVariants = {
+  ["body-sm"]: useTextVariantBodySm,
+  ["body-md"]: useTextVariantBodyMd,
+  ["body-lg"]: useTextVariantBodyLg,
+  ["heading-sm"]: useTextVariantHeadingSm,
+  ["heading-md"]: useTextVariantHeadingMd,
+  ["heading-lg"]: useTextVariantHeadingLg,
+};

package/src/themes/default/index.ts

@@ -9,4 +9,5 @@ export const defaultThemeAssets: ThemeAssets = {
   radius: 10,
   fontFamily: "System",
   letterSpacing: 0,
+  fontSize: 16,
 };

package/src/themes/provider.tsx

@@ -1,5 +1,5 @@
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
-import { Colors, ColorScheme, FontFamily, LetterSpacing, Radius, ThemeName } from "./types";
+import { Colors, ColorScheme, FontFamily, FontSize, LetterSpacing, Radius, ThemeName } from "./types";
 import { themes } from "./themes";
 import { useColorScheme } from "react-native";
 
@@ -9,6 +9,7 @@ interface ThemeContext {
   fontFamily: FontFamily;
   colorScheme: ColorScheme;
   letterSpacing: LetterSpacing;
+  fontSize: FontSize;
   setColorScheme: (scheme: ColorScheme) => void;
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;
@@ -42,6 +43,7 @@ export const ThemeProvider = (props: PropsWithChildren) => {
         radius: themesAssets.radius,
         fontFamily: themesAssets.fontFamily,
         letterSpacing: themesAssets.letterSpacing,
+        fontSize: themesAssets.fontSize,
       }}
     >
       {props.children}

package/src/themes/types.ts

@@ -23,10 +23,12 @@ export interface Colors {
 export type Radius = number;
 export type FontFamily = string;
 export type LetterSpacing = number;
+export type FontSize = number;
 
 export interface ThemeAssets {
   colors: Record<ColorScheme, Colors>;
   radius: Radius;
   fontFamily: FontFamily;
   letterSpacing: LetterSpacing;
+  fontSize: FontSize;
 }

package/src/utils/use-themed-styles.ts

@@ -1,11 +1,12 @@
 import { useTheme } from "@/themes";
-import { Colors, FontFamily, LetterSpacing, Radius } from "@/themes/types";
+import { Colors, FontFamily, FontSize, LetterSpacing, Radius } from "@/themes/types";
 
 interface CallbackProps {
   colors: Colors;
   radius: Radius;
   fontFamily: FontFamily;
   letterSpacing: LetterSpacing;
+  fontSize: FontSize;
 }
 
 export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T => {
@@ -15,5 +16,6 @@ export const useThemedStyles = <T>(callback: (props: CallbackProps) => T): T =>
     radius: theme.radius,
     fontFamily: theme.fontFamily,
     letterSpacing: theme.letterSpacing,
+    fontSize: theme.fontSize,
   });
 };

package/src/components/text/text.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import { Text as RnText, TextProps as RnTextProps } from "react-native";
-import { TextVariants } from "./variants";
-
-export interface TextProps extends RnTextProps {
-  variant?: keyof typeof TextVariants;
-}
-
-export function Text(props: TextProps) {
-  const useVariantStyles = TextVariants[props.variant ?? "default"];
-  const variantStyles = useVariantStyles();
-  return <RnText {...props} style={variantStyles} />;
-}

package/src/components/text/variants/index.ts

@@ -1,5 +0,0 @@
-import { useInputVariantDefault } from "./default";
-
-export const TextVariants = {
-  default: useInputVariantDefault,
-};