@korsolutions/ui 0.0.85 → 0.0.87

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

@@ -10,11 +10,13 @@ import {
 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;
@@ -31,7 +33,7 @@ const calculateState = (props: ButtonProps, isHovered: boolean): ButtonState =>
 };
 
 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);
 

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

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

@@ -9,12 +9,14 @@ import {
 import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
 import { useComponentConfig } from "../../../themes/provider";
 import { mergeStyles } from "../../../utils/calculate-styles";
+import type { Size } from "../../../utils/size-scale";
 import { ComboboxContext } from "../context";
 import type { ComboboxState } from "../types";
 import { ComboboxVariants } from "../variants";
 
 export interface ComboboxRootProps {
   variant?: keyof typeof ComboboxVariants;
+  size?: Size;
 
   value?: string;
   onChange?: (value: string) => void;
@@ -36,7 +38,7 @@ const calculateState = (props: ComboboxRootProps): ComboboxState => {
 };
 
 export function ComboboxRoot(props: ComboboxRootProps) {
-  const variantStyles = ComboboxVariants[props.variant ?? "default"]();
+  const variantStyles = ComboboxVariants[props.variant ?? "default"](props.size ?? "md");
   const globalStyles = useComponentConfig("combobox");
   const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
 

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

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import { type ComboboxStyles } from "../types";
 
-export function useComboboxVariantDefault(): ComboboxStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): ComboboxStyles => ({
+export function useComboboxVariantDefault(size: Size): ComboboxStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): ComboboxStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {},
         disabled: {},
@@ -20,10 +23,10 @@ export function useComboboxVariantDefault(): ComboboxStyles {
             backgroundColor: colors.surface,
             justifyContent: "center",
             paddingVertical: 4,
-            paddingHorizontal: 16,
-            minHeight: 48,
+            paddingHorizontal: s.paddingHorizontal,
+            minHeight: s.height,
             fontFamily,
-            fontSize,
+            fontSize: s.fontSize,
             color: colors.foreground,
             outlineWidth: 0,
             pointerEvents: "auto",
@@ -69,10 +72,10 @@ export function useComboboxVariantDefault(): ComboboxStyles {
       },
       option: {
         default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingVertical: s.paddingVertical,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.foreground,
           borderRadius: radius / 2,
         },
@@ -88,15 +91,15 @@ export function useComboboxVariantDefault(): ComboboxStyles {
       },
       empty: {
         default: {
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingVertical: s.paddingVertical,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
+          fontSize: s.fontSize,
           color: colors.mutedForeground,
           textAlign: "center",
         },
         disabled: {},
       },
-    }),
-  );
+    };
+  });
 }

package/src/components/icon-button/icon-button.tsx

@@ -9,14 +9,15 @@ import {
 import { useComponentConfig } from "../../themes/provider";
 import type { SvgProps } from "../../types/props.types";
 import { mergeStyles } from "../../utils/calculate-styles";
+import type { Size } from "../../utils/size-scale";
 import type { IconButtonState } from "./types";
 import { IconButtonVariants } from "./variants";
 
 export interface IconButtonProps extends Omit<PressableProps, "disabled" | "children"> {
   render: (props: SvgProps) => React.ReactNode;
   variant?: keyof typeof IconButtonVariants;
+  size?: Size;
   isDisabled?: boolean;
-  size?: number;
   color?: SvgProps["color"];
   strokeWidth?: number;
   style?: StyleProp<ViewStyle>;
@@ -37,15 +38,15 @@ export function IconButton(props: IconButtonProps) {
   const {
     render: IconComponent,
     variant = "default",
+    size = "md",
     isDisabled,
-    size,
     color,
     strokeWidth,
     style,
     ...rest
   } = props;
 
-  const variantStyles = IconButtonVariants[variant]();
+  const variantStyles = IconButtonVariants[variant](size);
   const componentConfig = useComponentConfig("iconButton");
   const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
@@ -61,10 +62,9 @@ export function IconButton(props: IconButtonProps) {
   };
 
   const iconProps: SvgProps = {
-    size: size ?? mergedStyles.icon?.default?.size,
+    size: mergedStyles.icon?.default?.size,
     color: color ?? mergedStyles.icon?.[state]?.color ?? mergedStyles.icon?.default?.color,
-    strokeWidth,
-    absoluteStrokeWidth: true,
+    strokeWidth: strokeWidth ?? mergedStyles.icon?.default?.strokeWidth,
   };
 
   return (

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

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantDefault = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantDefault = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           backgroundColor: colors.primary,
           borderWidth: 1,
@@ -25,8 +29,10 @@ export const useIconButtonVariantDefault = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.primaryForeground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
       },
-    }),
-  );
+    };
+  });
 };

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

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantGhost = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantGhost = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           backgroundColor: "transparent",
         },
@@ -23,11 +27,13 @@ export const useIconButtonVariantGhost = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.foreground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

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

@@ -1,15 +1,19 @@
 import { hslaSetRelativeLightness } from "../../../utils/hsla-utils";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
 import type { IconButtonStyles } from "../types";
 
-export const useIconButtonVariantSecondary = (): IconButtonStyles => {
-  return useThemedStyles(
-    ({ colors, radius }): IconButtonStyles => ({
+export const useIconButtonVariantSecondary = (size: Size): IconButtonStyles => {
+  return useThemedStyles(({ colors, radius, sizeScale }): IconButtonStyles => {
+    const s = sizeScale(size);
+
+    return {
       root: {
         default: {
           alignItems: "center",
           justifyContent: "center",
-          padding: 8,
+          height: s.height,
+          width: s.height,
           borderRadius: radius,
           borderWidth: 1,
           borderColor: colors.border,
@@ -25,11 +29,13 @@ export const useIconButtonVariantSecondary = (): IconButtonStyles => {
       icon: {
         default: {
           color: colors.secondaryForeground,
+          size: s.iconSize,
+          strokeWidth: s.strokeWidth,
         },
         disabled: {
           color: colors.mutedForeground,
         },
       },
-    }),
-  );
+    };
+  });
 };

package/src/components/index.ts

@@ -23,6 +23,7 @@ export * from "./radio-group";
 export * from "./scroll-bar";
 export * from "./select";
 export * from "./separator";
+export * from "./sidebar";
 export * from "./spinner";
 export * from "./table";
 export * from "./tabs";

package/src/components/input/input.tsx

@@ -3,12 +3,14 @@ import { StyleSheet, TextInput, type TextInputProps } from "react-native";
 import { useComponentConfig } from "../../themes/provider";
 import type { TextInputRef } from "../../types/element.types";
 import { mergeStyles } from "../../utils/calculate-styles";
+import type { Size } from "../../utils/size-scale";
 import { useFieldOptional } from "../field/context";
 import type { InputState } from "./types";
 import { InputVariants } from "./variants";
 
 export type InputProps = Omit<TextInputProps, "onChange" | "onChangeText"> & {
   variant?: keyof typeof InputVariants;
+  size?: Size;
 
   ref?: React.Ref<TextInputRef>;
   onChange?: TextInputProps["onChangeText"];
@@ -26,7 +28,7 @@ const calculateState = (props: InputProps, isFocused: boolean): InputState => {
 };
 
 export const Input = forwardRef<TextInputRef, InputProps>((props, ref) => {
-  const variantStyles = InputVariants[props.variant || "default"]();
+  const variantStyles = InputVariants[props.variant || "default"](props.size ?? "md");
   const componentConfig = useComponentConfig("input");
   const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isFocused, setIsFocused] = useState(false);