@korsolutions/ui 0.0.84 → 0.0.86

package/src/components/alert/components/alert-root.tsx

@@ -1,6 +1,8 @@
-import type { PropsWithRender } from "../../../types/props.types";
 import React from "react";
-import { type StyleProp, View, type ViewStyle } from "react-native";
+import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import type { PropsWithRender } from "../../../types/props.types";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { AlertContext } from "../context";
 import { AlertVariants } from "../variants";
 
@@ -13,13 +15,16 @@ export interface AlertRootProps {
 
 export function AlertRoot(props: PropsWithRender<AlertRootProps>) {
   const variantStyles = AlertVariants[props.variant ?? "default"]();
-  const composedStyle: StyleProp<ViewStyle> = [variantStyles.root, props.style];
+  const componentConfig = useComponentConfig("alert");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = StyleSheet.flatten([mergedStyles.root, props.style]);
 
   const Component = props.render ?? View;
   return (
     <AlertContext.Provider
       value={{
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component {...props} style={composedStyle} />

package/src/components/alert-dialog/async-alert-dialog.tsx

@@ -32,9 +32,7 @@ interface AsyncAlertDialogInstance {
 // Global state
 const dialogQueue: AsyncAlertDialogInstance[] = [];
 let currentDialog: AsyncAlertDialogInstance | null = null;
-let setCurrentDialogFn:
-  | ((dialog: AsyncAlertDialogInstance | null) => void)
-  | null = null;
+let setCurrentDialogFn: ((dialog: AsyncAlertDialogInstance | null) => void) | null = null;
 
 // Process next dialog in queue
 function processQueue() {
@@ -57,17 +55,8 @@ function closeDialog(confirmed: boolean) {
 }
 
 // Inner component that has access to the dialog context
-function AsyncAlertDialogContent({
-  instance,
-}: {
-  instance: AsyncAlertDialogInstance;
-}) {
-  const {
-    title,
-    description,
-    actionLabel = "Continue",
-    cancelLabel = "Cancel",
-  } = instance.props;
+function AsyncAlertDialogContent({ instance }: { instance: AsyncAlertDialogInstance }) {
+  const { title, description, actionLabel = "Continue", cancelLabel = "Cancel" } = instance.props;
   const { setIsOpen } = useAlertDialog();
 
   const handleAction = () => closeDialog(true);
@@ -85,12 +74,8 @@ function AsyncAlertDialogContent({
         <AlertDialogTitle>{title}</AlertDialogTitle>
         <AlertDialogDescription>{description}</AlertDialogDescription>
         <AlertDialogFooter>
-          <AlertDialogCancel onPress={handleCancel}>
-            {cancelLabel}
-          </AlertDialogCancel>
-          <AlertDialogAction onPress={handleAction}>
-            {actionLabel}
-          </AlertDialogAction>
+          <AlertDialogCancel onPress={handleCancel}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction onPress={handleAction}>{actionLabel}</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialogPortal>
@@ -98,11 +83,7 @@ function AsyncAlertDialogContent({
 }
 
 // Component that renders a single dialog instance
-function AsyncAlertDialogInstance({
-  instance,
-}: {
-  instance: AsyncAlertDialogInstance;
-}) {
+function AsyncAlertDialogInstance({ instance }: { instance: AsyncAlertDialogInstance }) {
   return (
     <AlertDialogRoot {...instance.props}>
       <AsyncAlertDialogContent instance={instance} />

package/src/components/alert-dialog/components/alert-dialog-root.tsx

@@ -1,24 +1,31 @@
 import React, { useMemo, useState } from "react";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
+import type { Size } from "../../../utils/size-scale";
 import { AlertDialogContext, type AlertDialogContextValue } from "../context";
 import { AlertDialogVariants } from "../variants";
 
 export interface AlertDialogRootProps {
   variant?: keyof typeof AlertDialogVariants;
+  size?: Size;
   children: React.ReactNode;
 }
 
 export function AlertDialogRoot(props: AlertDialogRootProps) {
-  const variantStyles = AlertDialogVariants[props.variant || "default"]();
   const { children } = props;
+  const variantStyles = AlertDialogVariants[props.variant || "default"](props.size ?? "md");
+  const componentConfig = useComponentConfig("alertDialog");
   const [isOpen, setIsOpen] = useState(false);
 
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
   const contextValue: AlertDialogContextValue = useMemo(
     () => ({
       isOpen,
       setIsOpen,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [isOpen, variantStyles],
+    [isOpen, mergedStyles],
   );
 
   return <AlertDialogContext.Provider value={contextValue}>{children}</AlertDialogContext.Provider>;

package/src/components/alert-dialog/variants/default.tsx

@@ -1,84 +1,93 @@
-import { type AlertDialogStyles } from "../..";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type AlertDialogStyles } from "../types";
 
-export const useAlertDialogVariantDefault = (): AlertDialogStyles => {
+export const useAlertDialogVariantDefault = (size: Size): AlertDialogStyles => {
   return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): AlertDialogStyles => ({
-      overlay: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        justifyContent: "center",
-        alignItems: "center",
-        zIndex: 999,
-      },
-      content: {
-        backgroundColor: colors.background,
-        borderRadius: radius,
-        padding: 24,
-        maxWidth: 400,
-        width: "90%",
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 8,
-        elevation: 5,
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: [{ translateX: "-50%" }, { translateY: "-50%" }],
-        borderWidth: 1,
-        borderColor: colors.border,
-        zIndex: 1000,
-      },
-      title: {
-        fontSize: fontSize * 1.25,
-        fontWeight: "600",
-        color: colors.foreground,
-        fontFamily,
-        marginBottom: 8,
-      },
-      description: {
-        fontSize,
-        color: colors.mutedForeground,
-        fontFamily,
-        lineHeight: fontSize * 1.5,
-      },
-      footer: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        gap: 12,
-        marginTop: 24,
-      },
-      cancel: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        borderRadius: radius,
-        borderWidth: 1,
-        borderColor: colors.border,
-        backgroundColor: colors.background,
-      },
-      cancelText: {
-        color: colors.foreground,
-        fontSize,
-        fontWeight: "500",
-        fontFamily,
-      },
-      action: {
-        paddingVertical: 10,
-        paddingHorizontal: 16,
-        borderRadius: radius,
-        backgroundColor: colors.primary,
-      },
-      actionText: {
-        color: colors.primaryForeground,
-        fontSize,
-        fontWeight: "500",
-        fontFamily,
-      },
-    }),
+    ({ colors, radius, fontFamily, fontSize, sizeScale }): AlertDialogStyles => {
+      const s = sizeScale(size);
+
+      return {
+        overlay: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          justifyContent: "center",
+          alignItems: "center",
+          zIndex: 999,
+        },
+        content: {
+          backgroundColor: colors.background,
+          borderRadius: radius,
+          padding: 24,
+          maxWidth: 400,
+          width: "90%",
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.25,
+          shadowRadius: 8,
+          elevation: 5,
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: [{ translateX: "-50%" }, { translateY: "-50%" }],
+          borderWidth: 1,
+          borderColor: colors.border,
+          zIndex: 1000,
+        },
+        title: {
+          fontSize: fontSize * 1.25,
+          fontWeight: "600",
+          color: colors.foreground,
+          fontFamily,
+          marginBottom: 8,
+        },
+        description: {
+          fontSize,
+          color: colors.mutedForeground,
+          fontFamily,
+          lineHeight: fontSize * 1.5,
+        },
+        footer: {
+          flexDirection: "row",
+          justifyContent: "flex-end",
+          gap: s.gap,
+          marginTop: 24,
+        },
+        cancel: {
+          height: s.height,
+          paddingHorizontal: s.paddingHorizontal,
+          borderRadius: radius,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.background,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        cancelText: {
+          color: colors.foreground,
+          fontSize: s.fontSize,
+          fontWeight: "500",
+          fontFamily,
+        },
+        action: {
+          height: s.height,
+          paddingHorizontal: s.paddingHorizontal,
+          borderRadius: radius,
+          backgroundColor: colors.primary,
+          justifyContent: "center",
+          alignItems: "center",
+        },
+        actionText: {
+          color: colors.primaryForeground,
+          fontSize: s.fontSize,
+          fontWeight: "500",
+          fontFamily,
+        },
+      };
+    },
   );
 };

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

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Image,
-  type ImageSource,
-  type ImageStyle,
-  type StyleProp,
-} from "react-native";
+import { Image, type ImageSource, type ImageStyle, type StyleProp } from "react-native";
 import { useAvatar } from "../context";
 
 export interface AvatarImageProps {

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

@@ -1,5 +1,7 @@
 import React, { useMemo, useState } from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { AvatarContext } from "../context";
 import { AvatarVariants } from "../variants";
 
@@ -12,17 +14,20 @@ export interface AvatarRootProps {
 
 export function AvatarRoot(props: AvatarRootProps) {
   const variantStyles = AvatarVariants[props.variant || "default"]();
-  const composedStyles = [variantStyles.root, props.style];
+  const componentConfig = useComponentConfig("avatar");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyles = [mergedStyles.root, props.style];
 
   const [imageLoaded, setImageLoaded] = useState(false);
 
   const contextValue: AvatarContext = useMemo(
     () => ({
-      styles: variantStyles,
+      styles: mergedStyles,
       imageLoaded,
       setImageLoaded,
     }),
-    [variantStyles, imageLoaded],
+    [mergedStyles, imageLoaded],
   );
 
   const Component = props.render ?? View;

package/src/components/badge/badge.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { type StyleProp, StyleSheet, View, type ViewStyle } from "react-native";
 import { useOrganizedChildren } from "../../hooks/use-organized-children";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import { BadgeContext } from "./context";
 import { BadgeVariants } from "./variants";
 
@@ -16,26 +18,22 @@ export interface BadgeProps {
 
 export function Badge(props: BadgeProps) {
   const variantStyles = BadgeVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("badge");
 
-  const customStyle = props.color
-    ? { backgroundColor: props.color }
-    : undefined;
+  const customStyle = props.color ? { backgroundColor: props.color } : undefined;
 
-  const composedStyle = StyleSheet.flatten([variantStyles.root, props.style]);
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = StyleSheet.flatten([mergedStyles.root, props.style]);
 
-  const textStyle = variantStyles.text;
-  const iconStyle = variantStyles.icon;
-  const organizedChildren = useOrganizedChildren(
-    props.children,
-    textStyle,
-    iconStyle,
-  );
+  const textStyle = StyleSheet.flatten([mergedStyles.text, props.style]);
+  const iconStyle = { ...mergedStyles.icon, ...props.style };
+  const organizedChildren = useOrganizedChildren(props.children, textStyle, iconStyle);
 
   const Component = props.render ?? View;
   return (
     <BadgeContext.Provider
       value={{
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component {...props} style={[composedStyle, customStyle]}>

package/src/components/button/button.tsx

@@ -8,11 +8,15 @@ import {
   type ViewStyle,
 } from "react-native";
 import { useOrganizedChildren } from "../../hooks/use-organized-children";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
+import type { Size } from "../../utils/size-scale";
 import type { ButtonState } from "./types";
 import { ButtonVariants } from "./variants";
 
 export interface ButtonProps extends Omit<PressableProps, "disabled"> {
   variant?: keyof typeof ButtonVariants;
+  size?: Size;
   children?: React.ReactNode;
 
   isDisabled?: boolean;
@@ -21,10 +25,7 @@ export interface ButtonProps extends Omit<PressableProps, "disabled"> {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  props: ButtonProps,
-  isHovered: boolean,
-): ButtonState => {
+const calculateState = (props: ButtonProps, isHovered: boolean): ButtonState => {
   if (props.isDisabled) return "disabled";
   if (props.isLoading) return "loading";
   if (isHovered) return "hovered";
@@ -32,25 +33,18 @@ const calculateState = (
 };
 
 export function Button(props: ButtonProps) {
-  const variantStyles = ButtonVariants[props.variant ?? "default"]();
+  const variantStyles = ButtonVariants[props.variant ?? "default"](props.size ?? "md");
+  const componentConfig = useComponentConfig("button");
   const [isHovered, setIsHovered] = useState(false);
 
   const state = calculateState(props, isHovered);
 
-  const textStyle = StyleSheet.flatten([
-    variantStyles.text?.default,
-    variantStyles.text?.[state],
-  ]);
-  const iconProps = StyleSheet.flatten([
-    variantStyles.icon?.default,
-    variantStyles.icon?.[state],
-  ]);
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
-  const organizedChildren = useOrganizedChildren(
-    props.children,
-    textStyle,
-    iconProps,
-  );
+  const textStyle = StyleSheet.flatten([mergedStyles.text?.default, mergedStyles.text?.[state]]);
+  const iconProps = StyleSheet.flatten([mergedStyles.icon?.default, mergedStyles.icon?.[state]]);
+
+  const organizedChildren = useOrganizedChildren(props.children, textStyle, iconProps);
 
   const handlePress: PressableProps["onPress"] = (event) => {
     if (props.isDisabled || props.isLoading) {
@@ -72,11 +66,7 @@ export function Button(props: ButtonProps) {
       onHoverIn={() => setIsHovered(true)}
       onHoverOut={() => setIsHovered(false)}
       disabled={props.isDisabled}
-      style={[
-        variantStyles.root?.default,
-        variantStyles.root?.[state],
-        props.style,
-      ]}
+      style={[variantStyles.root?.default, variantStyles.root?.[state], props.style]}
     >
       {organizedChildren}
       {props.isLoading && <ActivityIndicator {...spinnerProps} />}

package/src/components/button/types.ts

@@ -1,8 +1,4 @@
-import type {
-  ActivityIndicatorProps,
-  TextStyle,
-  ViewStyle,
-} from "react-native";
+import type { ActivityIndicatorProps, TextStyle, ViewStyle } from "react-native";
 import type { IconProps } from "../icon";
 
 export type ButtonState = "default" | "disabled" | "loading" | "hovered";

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

@@ -1,18 +1,21 @@
 import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { ButtonStyles } from "../types";
 
-export const useButtonVariantDefault = (): ButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
+export const useButtonVariantDefault = (size: Size): ButtonStyles => {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): ButtonStyles => {
+    const sizeStyles = sizeScale(size);
+
+    return {
       root: {
         default: {
           flexDirection: "row",
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
           borderRadius: radius,
-          gap: 8,
+          gap: sizeStyles.gap,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: colors.primary,
@@ -35,14 +38,15 @@ export const useButtonVariantDefault = (): ButtonStyles => {
       text: {
         default: {
           color: colors.primaryForeground,
-          fontSize,
+          fontSize: sizeStyles.fontSize,
           fontFamily,
         },
       },
       icon: {
         default: {
           color: colors.primaryForeground,
-          size: fontSize,
+          size: sizeStyles.iconSize,
+          strokeWidth: sizeStyles.strokeWidth,
         },
       },
       spinner: {
@@ -50,6 +54,6 @@ export const useButtonVariantDefault = (): ButtonStyles => {
           color: colors.primaryForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

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

@@ -1,18 +1,21 @@
 import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { ButtonStyles } from "../types";
 
-export const useButtonVariantGhost = (): ButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
+export const useButtonVariantGhost = (size: Size): ButtonStyles => {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): ButtonStyles => {
+    const sizeStyles = sizeScale(size);
+
+    return {
       root: {
         default: {
           flexDirection: "row",
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
           borderRadius: radius,
-          gap: 8,
+          gap: sizeStyles.gap,
           alignItems: "center",
           justifyContent: "center",
           backgroundColor: "transparent",
@@ -33,7 +36,7 @@ export const useButtonVariantGhost = (): ButtonStyles => {
       text: {
         default: {
           color: colors.foreground,
-          fontSize,
+          fontSize: sizeStyles.fontSize,
           fontFamily,
         },
         disabled: {
@@ -46,7 +49,8 @@ export const useButtonVariantGhost = (): ButtonStyles => {
       icon: {
         default: {
           color: colors.foreground,
-          size: fontSize,
+          size: sizeStyles.iconSize,
+          strokeWidth: sizeStyles.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
@@ -66,6 +70,6 @@ export const useButtonVariantGhost = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

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

@@ -1,18 +1,21 @@
 import type { CursorValue } from "react-native";
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { ButtonStyles } from "../types";
 
-export const useButtonVariantSecondary = (): ButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): ButtonStyles => ({
+export const useButtonVariantSecondary = (size: Size): ButtonStyles => {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): ButtonStyles => {
+    const sizeStyles = sizeScale(size);
+
+    return {
       root: {
         default: {
           flexDirection: "row",
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          height: sizeStyles.height,
+          paddingHorizontal: sizeStyles.paddingHorizontal,
           borderRadius: radius,
-          gap: 8,
+          gap: sizeStyles.gap,
           alignItems: "center",
           justifyContent: "center",
           borderWidth: 1,
@@ -35,7 +38,7 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       text: {
         default: {
           color: colors.secondaryForeground,
-          fontSize,
+          fontSize: sizeStyles.fontSize,
           fontFamily,
         },
         disabled: {
@@ -48,7 +51,8 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       icon: {
         default: {
           color: colors.secondaryForeground,
-          size: fontSize,
+          size: sizeStyles.iconSize,
+          strokeWidth: sizeStyles.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
@@ -68,6 +72,6 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };