@korsolutions/ui 0.0.9 → 0.0.11

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 { 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 React from "react";
+import { TextProps as TextProps$1, TextStyle } from "react-native";
 
 //#region src/components/button/variants/index.d.ts
 declare const ButtonVariants: {
@@ -33,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(): InputStyles;
+declare function useInputVariantDefault$1(): InputStyles;
 //#endregion
 //#region src/components/input/variants/index.d.ts
 declare const InputVariants: {
-  default: typeof useInputVariantDefault;
+  default: typeof useInputVariantDefault$1;
 };
 //#endregion
 //#region src/components/input/input.d.ts
@@ -81,4 +82,33 @@ 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/text/variants/default.d.ts
+declare function useInputVariantDefault(): TextStyle;
+//#endregion
+//#region src/components/text/variants/index.d.ts
+declare const TextVariants: {
+  default: typeof useInputVariantDefault;
+};
+//#endregion
+//#region src/components/text/text.d.ts
+interface TextProps extends TextProps$1 {
+  variant?: keyof typeof TextVariants;
+}
+declare function Text(props: TextProps): 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$1 {
+  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 };

package/dist/components/index.mjs

@@ -1,7 +1,8 @@
-import { n as useTheme } from "../themes-BrLbh9h6.mjs";
+import { n as useTheme } from "../themes-D5iq6sfL.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 { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/utils/use-themed-styles.ts
@@ -10,7 +11,8 @@ const useThemedStyles = (callback) => {
 	return callback({
 		colors: theme.colors,
 		radius: theme.radius,
-		fontFamily: theme.fontFamily
+		fontFamily: theme.fontFamily,
+		letterSpacing: theme.letterSpacing
 	});
 };
 
@@ -110,10 +112,11 @@ function Card(props) {
 
 //#endregion
 //#region src/components/input/variants/default.tsx
-function useInputVariantDefault() {
+function useInputVariantDefault$1() {
 	return useThemedStyles(({ colors, radius, fontFamily }) => ({
 		default: {
 			placeholderTextColor: colors.mutedForeground,
+			selectionColor: colors.primary,
 			style: {
 				borderWidth: 1,
 				borderColor: colors.border,
@@ -123,7 +126,8 @@ function useInputVariantDefault() {
 				paddingHorizontal: 16,
 				outlineWidth: 0,
 				fontFamily,
-				height: 48
+				height: 48,
+				color: colors.foreground
 			}
 		},
 		focused: { style: { borderColor: colors.primary } },
@@ -136,12 +140,13 @@ function useInputVariantDefault() {
 
 //#endregion
 //#region src/components/input/variants/index.ts
-const InputVariants = { default: useInputVariantDefault };
+const InputVariants = { default: useInputVariantDefault$1 };
 
 //#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
@@ -285,4 +290,64 @@ function Select(props) {
 }
 
 //#endregion
-export { Button, Card, Field, Input, Select };
+//#region src/components/text/variants/default.tsx
+function useInputVariantDefault() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+		color: colors.foreground,
+		fontSize: 16,
+		fontFamily,
+		letterSpacing
+	}));
+}
+
+//#endregion
+//#region src/components/text/variants/index.ts
+const TextVariants = { default: useInputVariantDefault };
+
+//#endregion
+//#region src/components/text/text.tsx
+function Text(props) {
+	const useVariantStyles = TextVariants[props.variant ?? "default"];
+	const variantStyles = useVariantStyles();
+	return /* @__PURE__ */ jsx(Text$1, {
+		...props,
+		style: variantStyles
+	});
+}
+
+//#endregion
+//#region src/components/link/variants/default.tsx
+function useLinkVariantDefault() {
+	return useThemedStyles(({ colors, fontFamily, letterSpacing }) => ({
+		color: colors.primary,
+		fontSize: 16,
+		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$1, {
+		...props,
+		style: variantStyles,
+		onPress: handlePress
+	});
+}
+
+//#endregion
+export { Button, Card, Field, Input, Link, Select, Text };

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

@@ -1,4 +1,4 @@
-import * as react2 from "react";
+import * as react3 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): react2.JSX.Element;
+declare function InputPrimitive(props: InputPrimitiveProps): react3.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): react2.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react3.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";

package/dist/index.d.mts

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

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

package/package.json

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

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 "./text/text";
+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

@@ -6,6 +6,7 @@ export function useInputVariantDefault(): InputStyles {
     ({ colors, radius, fontFamily }): InputStyles => ({
       default: {
         placeholderTextColor: colors.mutedForeground,
+        selectionColor: colors.primary,
         style: {
           borderWidth: 1,
           borderColor: colors.border,

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 }): TextStyle => ({
+      color: colors.primary,
+      fontSize: 16,
+      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/text/text.tsx

@@ -0,0 +1,13 @@
+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/default.tsx

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

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

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

package/src/themes/default/index.ts

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

package/src/themes/provider.tsx

@@ -1,13 +1,14 @@
 import { createContext, PropsWithChildren, useContext, useEffect, useState } from "react";
-import { Colors, ColorScheme, Radius, ThemeName } from "./types";
+import { Colors, ColorScheme, FontFamily, 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;
   setColorScheme: (scheme: ColorScheme) => void;
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;
@@ -40,6 +41,7 @@ export const ThemeProvider = (props: PropsWithChildren) => {
         colors,
         radius: themesAssets.radius,
         fontFamily: themesAssets.fontFamily,
+        letterSpacing: themesAssets.letterSpacing,
       }}
     >
       {props.children}

package/src/themes/types.ts

@@ -22,9 +22,11 @@ export interface Colors {
 
 export type Radius = number;
 export type FontFamily = string;
+export type LetterSpacing = number;
 
 export interface ThemeAssets {
   colors: Record<ColorScheme, Colors>;
   radius: Radius;
   fontFamily: FontFamily;
+  letterSpacing: LetterSpacing;
 }

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

@@ -1,13 +1,19 @@
 import { useTheme } from "@/themes";
-import { Colors, FontFamily, Radius } from "@/themes/types";
+import { Colors, FontFamily, LetterSpacing, Radius } from "@/themes/types";
 
 interface CallbackProps {
   colors: Colors;
   radius: Radius;
   fontFamily: FontFamily;
+  letterSpacing: LetterSpacing;
 }
 
 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,
+  });
 };