@korsolutions/ui 0.0.84 → 0.0.86

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/empty/components/empty-root.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { EmptyContext } from "../context";
 import { EmptyVariants } from "../variants";
 
@@ -12,11 +14,14 @@ export interface EmptyRootProps {
 
 export function EmptyRoot(props: EmptyRootProps) {
   const variantStyles = EmptyVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("empty");
 
-  const composedStyles = [variantStyles.root, props.style];
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
+  const composedStyles = [mergedStyles.root, props.style];
   const Component = props.render ?? View;
   return (
-    <EmptyContext.Provider value={{ styles: variantStyles }}>
+    <EmptyContext.Provider value={{ styles: mergedStyles }}>
       <Component {...props} style={composedStyles} />
     </EmptyContext.Provider>
   );

package/src/components/field/components/field-label.tsx

@@ -16,5 +16,7 @@ export function FieldLabel(props: FieldLabelProps) {
   const field = useField();
 
   const Component = props.render ?? Text;
-  return <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />;
+  return (
+    <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />
+  );
 }

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

@@ -1,5 +1,7 @@
 import React, { useId } from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { FieldContext } from "../context";
 import { FieldVariants } from "../variants";
 
@@ -14,12 +16,15 @@ export interface FieldRootProps {
 
 export function FieldRoot(props: FieldRootProps) {
   const variantStyles = FieldVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("field");
   const id = useId();
 
-  const composedStyles = [variantStyles.root, props.style];
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
+  const composedStyles = [mergedStyles.root, props.style];
   const Component = props.render ?? View;
   return (
-    <FieldContext.Provider value={{ styles: variantStyles, id }}>
+    <FieldContext.Provider value={{ styles: mergedStyles, id }}>
       <Component {...props} style={composedStyles} />
     </FieldContext.Provider>
   );

package/src/components/icon/icon.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import type {
-  PropsWithRequiredRender,
-  SvgProps,
-} from "../../types/props.types";
+import type { PropsWithRequiredRender, SvgProps } from "../../types/props.types";
 import { IconVariants } from "./variants";
 
 export type IconProps = SvgProps & {

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

@@ -6,25 +6,24 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
+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"> {
+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>;
 }
 
-const calculateState = (
-  props: IconButtonProps,
-  isHovered: boolean,
-): IconButtonState => {
+const calculateState = (props: IconButtonProps, isHovered: boolean): IconButtonState => {
   if (props.isDisabled) return "disabled";
   if (isHovered) return "hovered";
   return "default";
@@ -39,15 +38,18 @@ 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);
+
   const [isHovered, setIsHovered] = useState(false);
   const state = calculateState(props, isHovered);
 
@@ -60,10 +62,9 @@ export function IconButton(props: IconButtonProps) {
   };
 
   const iconProps: SvgProps = {
-    size: size ?? variantStyles.icon?.default?.size,
-    color: color ?? variantStyles.icon?.[state]?.color ?? variantStyles.icon?.default?.color,
-    strokeWidth,
-    absoluteStrokeWidth: true,
+    size: mergedStyles.icon?.default?.size,
+    color: color ?? mergedStyles.icon?.[state]?.color ?? mergedStyles.icon?.default?.color,
+    strokeWidth: strokeWidth ?? mergedStyles.icon?.default?.strokeWidth,
   };
 
   return (
@@ -80,8 +81,8 @@ export function IconButton(props: IconButtonProps) {
       }}
       disabled={isDisabled}
       style={[
-        variantStyles.root?.default,
-        variantStyles.root?.[state],
+        mergedStyles.root?.default,
+        mergedStyles.root?.[state],
         { cursor: cursorValue(state) },
         style,
       ]}

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

@@ -24,6 +24,7 @@ export * from "./scroll-bar";
 export * from "./select";
 export * from "./separator";
 export * from "./spinner";
+export * from "./table";
 export * from "./tabs";
 export * from "./textarea";
 export * from "./toast";

package/src/components/input/input.tsx

@@ -1,12 +1,16 @@
 import { forwardRef, useState } from "react";
 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"];
@@ -24,19 +28,21 @@ 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);
   const state = calculateState(props, isFocused);
   const field = useFieldOptional();
 
   const composedStyles = StyleSheet.flatten([
-    variantStyles.default?.style,
-    variantStyles[state]?.style,
+    mergedStyles.default?.style,
+    mergedStyles[state]?.style,
     props.style,
   ]);
   const composedProps = {
-    ...variantStyles.default,
-    ...variantStyles[state],
+    ...mergedStyles.default,
+    ...mergedStyles[state],
     ...props,
   };
 

package/src/components/input/numeric-input.tsx

@@ -1,15 +1,9 @@
 import React, { useEffect } from "react";
-import {
-  useNumericMask,
-  type NumericMaskFormat,
-} from "../../hooks/use-numeric-mask";
+import { useNumericMask, type NumericMaskFormat } from "../../hooks/use-numeric-mask";
 import { Input, type InputProps } from "./input";
 import { InputVariants } from "./variants";
 
-export interface NumericInputProps extends Omit<
-  InputProps,
-  "value" | "onChange" | "keyboardType"
-> {
+export interface NumericInputProps extends Omit<InputProps, "value" | "onChange" | "keyboardType"> {
   variant?: keyof typeof InputVariants;
   value?: number | null;
   onChange?: (value: number | null) => void;
@@ -32,7 +26,6 @@ export function NumericInput({
   min,
   max,
   allowNegative = true,
-  variant = "default",
   onBlur,
   onFocus,
   ...props

package/src/components/input/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 InputStyles } from "../types";
 
-export function useInputVariantDefault(): InputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
+export function useInputVariantDefault(size: Size): InputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): InputStyles => {
+    const s = sizeScale(size);
+
+    return {
       default: {
         placeholderTextColor: colors.mutedForeground,
         selectionColor: colors.primary,
@@ -13,11 +16,10 @@ export function useInputVariantDefault(): InputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.surface,
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
-          height: 48,
+          fontSize: s.fontSize,
+          height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
           ...Platform.select({
@@ -39,6 +41,6 @@ export function useInputVariantDefault(): InputStyles {
           backgroundColor: colors.muted,
         },
       },
-    }),
-  );
+    };
+  });
 }

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

@@ -1,10 +1,13 @@
 import { Platform } from "react-native";
-import { type InputStyles } from "../..";
+import type { Size } from "../../../utils/size-scale";
 import { useThemedStyles } from "../../../utils/use-themed-styles";
+import { type InputStyles } from "../types";
 
-export function useInputVariantSecondary(): InputStyles {
-  return useThemedStyles(
-    ({ colors, radius, fontFamily, fontSize }): InputStyles => ({
+export function useInputVariantSecondary(size: Size): InputStyles {
+  return useThemedStyles(({ colors, radius, fontFamily, sizeScale }): InputStyles => {
+    const s = sizeScale(size);
+
+    return {
       default: {
         placeholderTextColor: colors.mutedForeground,
         selectionColor: colors.primary,
@@ -13,11 +16,10 @@ export function useInputVariantSecondary(): InputStyles {
           borderColor: colors.border,
           borderRadius: radius,
           backgroundColor: colors.background,
-          paddingVertical: 12,
-          paddingHorizontal: 16,
+          paddingHorizontal: s.paddingHorizontal,
           fontFamily,
-          fontSize,
-          height: 48,
+          fontSize: s.fontSize,
+          height: s.height,
           color: colors.foreground,
           outlineWidth: 0,
           ...Platform.select({
@@ -39,6 +41,6 @@ export function useInputVariantSecondary(): InputStyles {
           backgroundColor: colors.muted,
         },
       },
-    }),
-  );
+    };
+  });
 }

package/src/components/menu/components/menu-checkbox-item.tsx

@@ -14,10 +14,7 @@ export interface MenuCheckboxItemProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  isHovered: boolean,
-  disabled?: boolean,
-): MenuCheckboxItemState => {
+const calculateState = (isHovered: boolean, disabled?: boolean): MenuCheckboxItemState => {
   if (disabled) return "disabled";
   if (isHovered) return "hovered";
   return "default";
@@ -45,11 +42,7 @@ export function MenuCheckboxItem(props: MenuCheckboxItemProps) {
   const textStyles = menu.styles?.itemText;
   const iconStyles = menu.styles?.itemIcon;
 
-  const organizedChildren = useOrganizedChildren(
-    props.children,
-    textStyles,
-    iconStyles,
-  );
+  const organizedChildren = useOrganizedChildren(props.children, textStyles, iconStyles);
 
   if (props.render) {
     return (

package/src/components/menu/components/menu-item.tsx

@@ -23,11 +23,7 @@ export function MenuItem(props: MenuItemProps) {
   const menu = useMenu();
   const [isHovered, setIsHovered] = useState(false);
   const state = calculateState(isHovered);
-  const composedStyle = [
-    menu.styles?.item?.default,
-    menu.styles?.item?.[state],
-    props.style,
-  ];
+  const composedStyle = [menu.styles?.item?.default, menu.styles?.item?.[state], props.style];
 
   const handlePress = () => {
     props.onPress?.();
@@ -39,11 +35,7 @@ export function MenuItem(props: MenuItemProps) {
   const textStyles = menu.styles?.itemText;
   const iconStyles = menu.styles?.itemIcon;
 
-  const organizedChildren = useOrganizedChildren(
-    props.children,
-    textStyles,
-    iconStyles,
-  );
+  const organizedChildren = useOrganizedChildren(props.children, textStyles, iconStyles);
 
   if (props.render) {
     return (

package/src/components/menu/components/menu-overlay.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Pressable,
-  type StyleProp,
-  StyleSheet,
-  type ViewStyle,
-} from "react-native";
+import { Pressable, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
 import { useMenu } from "../context";
 
 export interface MenuOverlayProps {

package/src/components/menu/components/menu-radio-group.tsx

@@ -23,11 +23,7 @@ export function MenuRadioGroup(props: MenuRadioGroupProps) {
 
   return (
     <MenuRadioGroupContext.Provider value={contextValue}>
-      <View
-        accessibilityRole="radiogroup"
-        role="radiogroup"
-        style={composedStyle}
-      >
+      <View accessibilityRole="radiogroup" role="radiogroup" style={composedStyle}>
         {props.children}
       </View>
     </MenuRadioGroupContext.Provider>

package/src/components/menu/components/menu-radio-item.tsx

@@ -48,11 +48,7 @@ export function MenuRadioItem(props: MenuRadioItemProps) {
   const textStyles = menu.styles?.itemText;
   const iconStyles = menu.styles?.itemIcon;
 
-  const organizedChildren = useOrganizedChildren(
-    props.children,
-    textStyles,
-    iconStyles,
-  );
+  const organizedChildren = useOrganizedChildren(props.children, textStyles, iconStyles);
 
   if (props.render) {
     return (

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

@@ -1,6 +1,12 @@
-import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks/use-relative-position";
 import React, { useState } from "react";
 import { type LayoutRectangle } from "react-native";
+import {
+  DEFAULT_LAYOUT,
+  DEFAULT_POSITION,
+  type LayoutPosition,
+} from "../../../hooks/use-relative-position";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { MenuContext } from "../context";
 import { MenuVariants } from "../variants";
 
@@ -13,6 +19,8 @@ export interface MenuRootProps {
 
 export function MenuRoot(props: MenuRootProps) {
   const variantStyles = MenuVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("menu");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isOpen, setIsOpen] = useState(false);
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
@@ -26,7 +34,7 @@ export function MenuRoot(props: MenuRootProps) {
         setTriggerPosition,
         contentLayout,
         setContentLayout,
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       {props.children}

package/src/components/menu/components/menu-selection-indicator.tsx

@@ -1,18 +1,16 @@
 import React from "react";
 import { Text, View } from "react-native";
-import { useComponentsConfig } from "../../../themes";
+import { useComponentConfig } from "../../../themes/provider";
 import { useMenu } from "../context";
 
 interface MenuSelectionIndicatorProps {
   isSelected: boolean;
 }
 
-export function MenuSelectionIndicator({
-  isSelected,
-}: MenuSelectionIndicatorProps) {
-  const config = useComponentsConfig();
+export function MenuSelectionIndicator({ isSelected }: MenuSelectionIndicatorProps) {
+  const config = useComponentConfig("menu");
   const menu = useMenu();
-  const SelectionIcon = config?.menu?.selectionIcon;
+  const SelectionIcon = config?.selectionIcon;
 
   if (!isSelected) {
     return <View style={menu.styles?.selectionIndicator} />;