@korsolutions/ui 0.0.10 → 0.0.12

package/README.md

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

package/dist/components/index.d.mts

@@ -1,5 +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-Dafk8ZGv.mjs";
 import React from "react";
+import { TextProps, TextStyle } from "react-native";
 
 //#region src/components/button/variants/index.d.ts
 declare const ButtonVariants: {
@@ -81,4 +82,53 @@ interface SelectProps<T> extends SelectRootBaseProps {
 }
 declare function Select<T>(props: SelectProps<T>): React.JSX.Element;
 //#endregion
-export { Button, Card, Field, FieldProps, Input, Select, SelectOption, SelectProps };
+//#region src/components/typography/variants/body-lg.d.ts
+declare function useTextVariantBodyLg(): TextStyle;
+//#endregion
+//#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/typography/typography.d.ts
+interface TypographyProps extends TextProps {
+  variant?: keyof typeof TypographyVariants;
+}
+declare function Typography(props: TypographyProps): React.JSX.Element;
+//#endregion
+//#region src/components/link/variants/default.d.ts
+declare function useLinkVariantDefault(): TextStyle;
+//#endregion
+//#region src/components/link/variants/index.d.ts
+declare const LinkVariants: {
+  default: typeof useLinkVariantDefault;
+};
+//#endregion
+//#region src/components/link/link.d.ts
+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, Typography, TypographyProps };

package/dist/components/index.mjs

@@ -1,7 +1,8 @@
-import { n as useTheme } from "../themes-BrLbh9h6.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 } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/utils/use-themed-styles.ts
@@ -10,14 +11,16 @@ const useThemedStyles = (callback) => {
 	return callback({
 		colors: theme.colors,
 		radius: theme.radius,
-		fontFamily: theme.fontFamily
+		fontFamily: theme.fontFamily,
+		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",
@@ -35,7 +38,7 @@ const useButtonVariantDefault = () => {
 		label: {
 			default: {
 				color: colors.primaryForeground,
-				fontSize: 16,
+				fontSize,
 				fontWeight: "bold",
 				fontFamily
 			},
@@ -70,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,
@@ -82,7 +85,7 @@ function useCardVariantDefault() {
 		header: { default: { paddingHorizontal: 24 } },
 		title: { default: {
 			fontFamily,
-			fontSize: 18,
+			fontSize: fontSize * 1.25,
 			fontWeight: "600",
 			color: colors.foreground
 		} },
@@ -111,7 +114,7 @@ function Card(props) {
 //#endregion
 //#region src/components/input/variants/default.tsx
 function useInputVariantDefault() {
-	return useThemedStyles(({ colors, radius, fontFamily }) => ({
+	return useThemedStyles(({ colors, radius, fontFamily, fontSize }) => ({
 		default: {
 			placeholderTextColor: colors.mutedForeground,
 			selectionColor: colors.primary,
@@ -124,6 +127,7 @@ function useInputVariantDefault() {
 				paddingHorizontal: 16,
 				outlineWidth: 0,
 				fontFamily,
+				fontSize,
 				height: 48,
 				color: colors.foreground
 			}
@@ -143,7 +147,8 @@ const InputVariants = { default: useInputVariantDefault };
 //#endregion
 //#region src/components/input/input.tsx
 function Input(props) {
-	const variantStyles = (props.variant ? InputVariants[props.variant] : InputVariants["default"])();
+	const useVariantStyles = InputVariants[props.variant ?? "default"];
+	const variantStyles = useVariantStyles();
 	return /* @__PURE__ */ jsx(InputPrimitive, {
 		...props,
 		styles: variantStyles
@@ -153,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
 		}
 	}));
@@ -203,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: {}
@@ -223,7 +228,7 @@ function useSelectVariantDefault() {
 		value: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -231,7 +236,7 @@ function useSelectVariantDefault() {
 		placeholder: {
 			default: {
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.mutedForeground
 			},
 			disabled: { color: colors.mutedForeground }
@@ -256,7 +261,7 @@ function useSelectVariantDefault() {
 				paddingVertical: 12,
 				paddingHorizontal: 16,
 				fontFamily,
-				fontSize: 16,
+				fontSize,
 				color: colors.foreground,
 				borderRadius: radius / 2
 			},
@@ -287,4 +292,129 @@ function Select(props) {
 }
 
 //#endregion
-export { Button, Card, Field, Input, Select };
+//#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,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#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/typography/typography.tsx
+function Typography(props) {
+	const useVariantStyles = TypographyVariants[props.variant ?? "body-md"];
+	const variantStyles = useVariantStyles();
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		style: variantStyles
+	});
+}
+
+//#endregion
+//#region src/components/link/variants/default.tsx
+function useLinkVariantDefault() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing, fontSize }) => ({
+		color: colors.primary,
+		fontSize,
+		fontFamily,
+		textDecorationLine: "underline",
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/link/variants/index.ts
+const LinkVariants = { default: useLinkVariantDefault };
+
+//#endregion
+//#region src/components/link/link.tsx
+function Link(props) {
+	const useVariantStyles = LinkVariants[props.variant ?? "default"];
+	const variantStyles = useVariantStyles();
+	const handlePress = async (e) => {
+		if (props.href) {
+			if (await Linking.canOpenURL(props.href)) await Linking.openURL(props.href);
+		}
+		props.onPress?.(e);
+	};
+	return /* @__PURE__ */ jsx(Text, {
+		...props,
+		style: variantStyles,
+		onPress: handlePress
+	});
+}
+
+//#endregion
+export { Button, Card, Field, Input, Link, Select, Typography };

package/dist/index.d.mts

@@ -21,13 +21,18 @@ interface Colors {
   info: Color;
 }
 type Radius = number;
+type FontFamily = string;
+type LetterSpacing = number;
+type FontSize = number;
 //#endregion
 //#region src/themes/provider.d.ts
 interface ThemeContext {
   colors: Colors;
   radius: Radius;
-  fontFamily: string;
+  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-BrLbh9h6.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/{themes-BrLbh9h6.mjs → themes-DXcjBdO2.mjs}

@@ -44,7 +44,9 @@ const defaultThemeAssets = {
 		dark: darkColors
 	},
 	radius: 10,
-	fontFamily: "System"
+	fontFamily: "System",
+	letterSpacing: 0,
+	fontSize: 16
 };
 
 //#endregion
@@ -71,7 +73,9 @@ const ThemeProvider = (props) => {
 			setColorScheme,
 			colors,
 			radius: themesAssets.radius,
-			fontFamily: themesAssets.fontFamily
+			fontFamily: themesAssets.fontFamily,
+			letterSpacing: themesAssets.letterSpacing,
+			fontSize: themesAssets.fontSize
 		},
 		children: props.children
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.10",
+  "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,3 +3,5 @@ export * from "./card/card";
 export * from "./input/input";
 export * from "./field/field";
 export * from "./select/select";
+export * from "./typography/typography";
+export * from "./link/link";

package/src/components/input/input.tsx

@@ -7,7 +7,7 @@ interface InputProps extends InputPrimitiveBaseProps {
 }
 
 export function Input(props: InputProps) {
-  const useVariantStyles = props.variant ? InputVariants[props.variant] : InputVariants["default"];
+  const useVariantStyles = InputVariants[props.variant ?? "default"];
   const variantStyles = useVariantStyles();
 
   return <InputPrimitive {...props} styles={variantStyles} />;

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/link.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text as RnText, TextProps as RnTextProps, Linking } from "react-native";
+import { LinkVariants } from "./variants";
+
+export interface LinkProps extends RnTextProps {
+  href?: string;
+
+  variant?: keyof typeof LinkVariants;
+}
+
+export function Link(props: LinkProps) {
+  const useVariantStyles = LinkVariants[props.variant ?? "default"];
+  const variantStyles = useVariantStyles();
+
+  const handlePress: RnTextProps["onPress"] = async (e) => {
+    if (props.href) {
+      const supported = await Linking.canOpenURL(props.href);
+      if (supported) {
+        await Linking.openURL(props.href);
+      }
+    }
+    props.onPress?.(e);
+  };
+
+  return <RnText {...props} style={variantStyles} onPress={handlePress} />;
+}

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

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

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

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

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/typography/variants/body-md.tsx

@@ -0,0 +1,13 @@
+import { useThemedStyles } from "@/utils/use-themed-styles";
+import { TextStyle } from "react-native";
+
+export function useTextVariantBodyMd(): TextStyle {
+  return useThemedStyles(
+    ({ colors, fontFamily, letterSpacing, fontSize }): TextStyle => ({
+      color: colors.foreground,
+      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

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

package/src/themes/provider.tsx

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

package/src/themes/types.ts

@@ -22,9 +22,13 @@ 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,13 +1,21 @@
 import { useTheme } from "@/themes";
-import { Colors, FontFamily, 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 => {
   const theme = useTheme();
-  return callback({ colors: theme.colors, radius: theme.radius, fontFamily: theme.fontFamily });
+  return callback({
+    colors: theme.colors,
+    radius: theme.radius,
+    fontFamily: theme.fontFamily,
+    letterSpacing: theme.letterSpacing,
+    fontSize: theme.fontSize,
+  });
 };