@korsolutions/ui 0.0.11 → 0.0.13

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,7 @@ 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";
+export * from "./empty/empty";
+export * from "./avatar/avatar";

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/primitives/avatar/avatar-fallback.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, TextStyle, View } from "react-native";
+import { useAvatar } from "./context";
+
+export interface AvatarFallbackProps {
+  children: string;
+  render?: (props: AvatarFallbackProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const avatar = useAvatar();
+  const composedStyles = [avatar.styles?.fallback, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/avatar/avatar-image.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Image, ImageSource, ImageStyle, StyleProp } from "react-native";
+import { useAvatar } from "./context";
+
+export interface AvatarImageProps {
+  source: ImageSource;
+  onError: () => void;
+  render?: (props: AvatarImageProps) => React.ReactNode;
+  style?: StyleProp<ImageStyle>;
+}
+
+export function AvatarImage(props: AvatarImageProps) {
+  const avatar = useAvatar();
+  const composedStyles = [avatar.styles?.image, props.style];
+  const Component = props.render ?? Image;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/avatar/avatar-root.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { AvatarContext } from "./context";
+import { AvatarStyles } from "./types";
+
+export interface AvatarRootProps {
+  children: React.ReactNode;
+  render?: (props: AvatarRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: AvatarStyles;
+}
+
+export function AvatarRoot(props: AvatarRootProps) {
+  const composedStyles = [props.styles?.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <AvatarContext.Provider value={{ styles: props.styles }}>
+      <Component {...props} style={composedStyles} />
+    </AvatarContext.Provider>
+  );
+}

package/src/primitives/avatar/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { AvatarStyles } from "./types";
+
+export interface AvatarContext {
+  styles?: AvatarStyles;
+}
+
+export const AvatarContext = createContext<AvatarContext | undefined>(undefined);
+
+export const useAvatar = () => {
+  const context = useContext(AvatarContext);
+  if (!context) {
+    throw new Error("useAvatarContext must be used within a AvatarProvider");
+  }
+  return context;
+};

package/src/primitives/avatar/index.ts

@@ -0,0 +1,14 @@
+import { AvatarRoot } from "./avatar-root";
+import { AvatarFallback } from "./avatar-fallback";
+import { AvatarImage } from "./avatar-image";
+
+export const AvatarPrimitive = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+};
+
+export type { AvatarRootProps } from "./avatar-root";
+export type { AvatarFallbackProps } from "./avatar-fallback";
+export type { AvatarImageProps } from "./avatar-image";
+export type { AvatarStyles } from "./types";

package/src/primitives/avatar/types.ts

@@ -0,0 +1,9 @@
+import { AvatarFallbackProps } from "./avatar-fallback";
+import { AvatarImageProps } from "./avatar-image";
+import { AvatarRootProps } from "./avatar-root";
+
+export type AvatarStyles = {
+  root?: AvatarRootProps["style"];
+  image?: AvatarImageProps["style"];
+  fallback?: AvatarFallbackProps["style"];
+};

package/src/primitives/button/button-root.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Pressable, StyleProp, ViewStyle } from "react-native";
 import { ButtonStyles, ButtonState } from "./types";
 import { ButtonPrimitiveContext } from "./button-context";
@@ -17,25 +17,30 @@ export interface ButtonPrimitiveRootProps {
   render?: (props: this) => React.ReactElement;
 }
 
-const calculateState = (props: ButtonPrimitiveRootProps): ButtonState => {
+const calculateState = (props: ButtonPrimitiveRootProps, isHovered: boolean): ButtonState => {
   if (props.isDisabled) {
     return "disabled";
   }
   if (props.isLoading) {
     return "loading";
   }
+  if (isHovered) {
+    return "hovered";
+  }
   return "default";
 };
 
 export function ButtonRoot(props: ButtonPrimitiveRootProps) {
-  const state = calculateState(props);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const state = calculateState(props, isHovered);
 
   const calculatedStyle = [props.styles?.root?.default, props.styles?.root?.[state], props.style];
 
   const Container = props.render ?? Pressable;
   return (
     <ButtonPrimitiveContext.Provider value={{ disabled: props.isDisabled, state, styles: props.styles }}>
-      <Container {...props} style={calculatedStyle} />
+      <Container {...props} onHoverIn={() => setIsHovered(true)} onHoverOut={() => setIsHovered(false)} style={calculatedStyle} />
     </ButtonPrimitiveContext.Provider>
   );
 }

package/src/primitives/button/types.ts

@@ -1,7 +1,7 @@
 import { ButtonPrimitiveRootProps } from "./button-root";
 import { ButtonPrimitiveLabelProps } from "./button-label";
 
-export type ButtonState = "default" | "disabled" | "loading";
+export type ButtonState = "default" | "disabled" | "loading" | "hovered";
 
 export interface ButtonStyles {
   root?: Partial<Record<ButtonState, ButtonPrimitiveRootProps["style"]>>;

package/src/primitives/empty/context.ts

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { EmptyStyles } from "./types";
+
+export interface EmptyContext {
+  styles?: EmptyStyles;
+}
+
+export const EmptyContext = createContext<EmptyContext>({});
+
+export const useEmpty = () => {
+  const context = useContext(EmptyContext);
+  if (!context) {
+    throw new Error("useEmptyContext must be used within a EmptyProvider");
+  }
+  return context;
+};

package/src/primitives/empty/empty-description.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, Text, TextStyle } from "react-native";
+import { useEmpty } from "./context";
+
+export interface EmptyDescriptionProps {
+  children: string;
+  render?: (props: EmptyDescriptionProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyDescription(props: EmptyDescriptionProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.description, props.style];
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/empty/empty-media.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { useEmpty } from "./context";
+
+export interface EmptyMediaProps {
+  children: React.ReactNode;
+  render?: (props: EmptyMediaProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function EmptyMedia(props: EmptyMediaProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.media, props.style];
+  const Component = props.render ?? View;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/empty/empty-root.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { EmptyContext } from "./context";
+import { EmptyStyles } from "./types";
+
+export interface EmptyRootProps {
+  children: React.ReactNode;
+  render?: (props: EmptyRootProps) => React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  styles?: EmptyStyles;
+}
+
+export function EmptyRoot(props: EmptyRootProps) {
+  const composedStyles = [props.styles?.root, props.style];
+  const Component = props.render ?? View;
+  return (
+    <EmptyContext.Provider value={{ styles: props.styles }}>
+      <Component {...props} style={composedStyles} />
+    </EmptyContext.Provider>
+  );
+}

package/src/primitives/empty/empty-title.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { useEmpty } from "./context";
+import { StyleProp, Text, TextStyle } from "react-native";
+
+export interface EmptyTitleProps {
+  children: string;
+  render?: (props: EmptyTitleProps) => React.ReactNode;
+  style?: StyleProp<TextStyle>;
+}
+
+export function EmptyTitle(props: EmptyTitleProps) {
+  const empty = useEmpty();
+  const composedStyles = [empty.styles?.title, props.style];
+  const Component = props.render ?? Text;
+  return <Component {...props} style={composedStyles} />;
+}

package/src/primitives/empty/index.ts

@@ -0,0 +1,17 @@
+import { EmptyRoot } from "./empty-root";
+import { EmptyMedia } from "./empty-media";
+import { EmptyTitle } from "./empty-title";
+import { EmptyDescription } from "./empty-description";
+
+export const EmptyPrimitive = {
+  Root: EmptyRoot,
+  Media: EmptyMedia,
+  Title: EmptyTitle,
+  Description: EmptyDescription,
+};
+
+export type { EmptyRootProps } from "./empty-root";
+export type { EmptyMediaProps } from "./empty-media";
+export type { EmptyTitleProps } from "./empty-title";
+export type { EmptyDescriptionProps } from "./empty-description";
+export type { EmptyStyles } from "./types";

package/src/primitives/empty/types.ts

@@ -0,0 +1,11 @@
+import { EmptyDescriptionProps } from "./empty-description";
+import { EmptyMediaProps } from "./empty-media";
+import { EmptyRootProps } from "./empty-root";
+import { EmptyTitleProps } from "./empty-title";
+
+export type EmptyStyles = {
+  root?: EmptyRootProps["style"];
+  media?: EmptyMediaProps["style"];
+  title?: EmptyTitleProps["style"];
+  description?: EmptyDescriptionProps["style"];
+};

package/src/primitives/index.ts

@@ -3,3 +3,5 @@ export * from "./input";
 export * from "./button";
 export * from "./select";
 export * from "./card";
+export * from "./empty";
+export * from "./avatar";

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/hsla-utils.ts

@@ -8,3 +8,29 @@ export const hslaSetAlpha = (hsla: string, alpha: number): string => {
   const l = parseInt(parts[2], 10);
   return `hsla(${h}, ${s}%, ${l}%, ${alpha})`;
 };
+
+export const hslaSetLightness = (hsla: string, lightness: number): string => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  const h = parseInt(parts[0], 10);
+  const s = parseInt(parts[1], 10);
+  return `hsla(${h}, ${s}%, ${lightness}%, ${parts[3] ? parseFloat(parts[3]) : 1})`;
+};
+
+export const hslaGetLightness = (hsla: string): number => {
+  const parts = hsla.replace(/^hsla?\(|\s+|\)$/g, "").split(",");
+  if (parts.length < 3) {
+    throw new Error("Invalid HSLA color format");
+  }
+  return parseInt(parts[2], 10);
+};
+
+export const hslaSetRelativeLightness = (hsla: string, delta: number): string => {
+  const currentLightness = hslaGetLightness(hsla);
+  let newLightness = currentLightness + delta;
+  if (newLightness > 100) newLightness = 100;
+  if (newLightness < 0) newLightness = 0;
+  return hslaSetLightness(hsla, newLightness);
+};

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/tsconfig.json

@@ -4,6 +4,7 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
+    "customConditions": ["dev-source"],
     "paths": {
       "@/*": ["./src/*"]
     }

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,
-};