@korsolutions/ui 0.0.84 → 0.0.85

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

@@ -6,12 +6,13 @@ 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 { 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;
   isDisabled?: boolean;
@@ -21,10 +22,7 @@ export interface IconButtonProps
   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";
@@ -48,6 +46,9 @@ export function IconButton(props: IconButtonProps) {
   } = props;
 
   const variantStyles = IconButtonVariants[variant]();
+  const componentConfig = useComponentConfig("iconButton");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
   const [isHovered, setIsHovered] = useState(false);
   const state = calculateState(props, isHovered);
 
@@ -60,8 +61,8 @@ export function IconButton(props: IconButtonProps) {
   };
 
   const iconProps: SvgProps = {
-    size: size ?? variantStyles.icon?.default?.size,
-    color: color ?? variantStyles.icon?.[state]?.color ?? variantStyles.icon?.default?.color,
+    size: size ?? mergedStyles.icon?.default?.size,
+    color: color ?? mergedStyles.icon?.[state]?.color ?? mergedStyles.icon?.default?.color,
     strokeWidth,
     absoluteStrokeWidth: true,
   };
@@ -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/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,6 +1,8 @@
 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 { useFieldOptional } from "../field/context";
 import type { InputState } from "./types";
 import { InputVariants } from "./variants";
@@ -25,18 +27,20 @@ const calculateState = (props: InputProps, isFocused: boolean): InputState => {
 
 export const Input = forwardRef<TextInputRef, InputProps>((props, ref) => {
   const variantStyles = InputVariants[props.variant || "default"]();
+  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/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} />;

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

@@ -13,42 +13,40 @@ export interface MenuTriggerRef {
   close: () => void;
 }
 
-export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>(
-  (props, ref) => {
-    const menu = useMenu();
-    const triggerRef = useRef<ViewRef>(null);
+export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>((props, ref) => {
+  const menu = useMenu();
+  const triggerRef = useRef<ViewRef>(null);
 
-    const onTriggerPress = async () => {
-      if (!menu.isOpen) {
-        measureLayoutPosition(triggerRef.current, (layout) => {
-          menu.setTriggerPosition(layout);
-          menu.setIsOpen(true);
-        });
-      } else {
-        menu.setIsOpen(false);
-      }
-    };
+  const onTriggerPress = async () => {
+    if (!menu.isOpen) {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        menu.setTriggerPosition(layout);
+        menu.setIsOpen(true);
+      });
+    } else {
+      menu.setIsOpen(false);
+    }
+  };
 
-    useImperativeHandle(ref, () => ({
-      open: () => {
-        measureLayoutPosition(triggerRef.current, (layout) => {
-          menu.setTriggerPosition(layout);
-          menu.setIsOpen(true);
-        });
-      },
-      close: () => menu.setIsOpen(false),
-    }));
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        menu.setTriggerPosition(layout);
+        menu.setIsOpen(true);
+      });
+    },
+    close: () => menu.setIsOpen(false),
+  }));
 
-    return React.cloneElement(props.children, {
-      ref: triggerRef,
-      onPress: onTriggerPress,
-      role: "button",
-      accessible: true,
-      accessibilityRole: "button",
-      accessibilityState: { expanded: menu.isOpen },
-      ...props.children.props,
-    });
-  },
-);
+  return React.cloneElement(props.children, {
+    ref: triggerRef,
+    onPress: onTriggerPress,
+    role: "button",
+    accessible: true,
+    accessibilityRole: "button",
+    accessibilityState: { expanded: menu.isOpen },
+    ...props.children.props,
+  });
+});
 
 MenuTrigger.displayName = "MenuTrigger";

package/src/components/menu/context.ts

@@ -29,9 +29,9 @@ export interface MenuRadioGroupContextValue {
   onValueChange: (value: string) => void;
 }
 
-export const MenuRadioGroupContext = createContext<
-  MenuRadioGroupContextValue | undefined
->(undefined);
+export const MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | undefined>(
+  undefined,
+);
 
 export const useMenuRadioGroup = () => {
   const context = useContext(MenuRadioGroupContext);

package/src/components/menu/types.ts

@@ -6,11 +6,7 @@ import type { MenuOverlayProps } from "./components/menu-overlay";
 
 export type MenuButtonState = "default" | "hovered";
 export type MenuCheckboxItemState = "default" | "hovered" | "disabled";
-export type MenuRadioItemState =
-  | "default"
-  | "hovered"
-  | "selected"
-  | "disabled";
+export type MenuRadioItemState = "default" | "hovered" | "selected" | "disabled";
 
 export interface MenuStyles {
   content?: MenuContentProps["style"];

package/src/components/phone-input/components/country-picker.tsx

@@ -25,15 +25,11 @@ export function CountryPicker() {
   const { styles, state, phoneMask, isDisabled, triggerRef } = usePhoneInput();
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
-  const [triggerPosition, setTriggerPosition] =
-    useState<LayoutPosition>(DEFAULT_POSITION);
-  const [contentLayout, setContentLayout] =
-    useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
 
   const filteredCountries = searchQuery
-    ? phoneMask.countries.filter((c) =>
-        c.name.toLowerCase().includes(searchQuery.toLowerCase()),
-      )
+    ? phoneMask.countries.filter((c) => c.name.toLowerCase().includes(searchQuery.toLowerCase()))
     : phoneMask.countries;
 
   const onOpen = () => {
@@ -91,27 +87,16 @@ export function CountryPicker() {
 
   return (
     <>
-      <Pressable
-        onPress={onOpen}
-        disabled={isDisabled}
-        style={countryButtonStyles}
-      >
+      <Pressable onPress={onOpen} disabled={isDisabled} style={countryButtonStyles}>
         <Text style={countryButtonTextStyles}>
           {phoneMask.country.flag} +{phoneMask.country.dialCode}
         </Text>
       </Pressable>
       {isOpen && (
         <Portal name="phone-input-country-picker">
-          <Pressable
-            onPress={onClose}
-            style={[StyleSheet.absoluteFill, overlayStyles]}
-          />
+          <Pressable onPress={onClose} style={[StyleSheet.absoluteFill, overlayStyles]} />
           <View
-            style={[
-              positionStyle,
-              contentStyles,
-              { width: triggerPosition.width },
-            ]}
+            style={[positionStyle, contentStyles, { width: triggerPosition.width }]}
             onLayout={(e) => setContentLayout(e.nativeEvent.layout)}
             pointerEvents="box-none"
           >

package/src/components/phone-input/components/phone-input-root.tsx

@@ -2,7 +2,9 @@ import React, { useMemo, useRef, useState } from "react";
 import { StyleSheet, View, type StyleProp, type ViewStyle } from "react-native";
 import { COUNTRIES, type CountryCode } from "../../../data/countries";
 import { usePhoneMask } from "../../../hooks/use-phone-mask";
+import { useComponentConfig } from "../../../themes/provider";
 import type { ViewRef } from "../../../types/element.types";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { PhoneInputContext } from "../context";
 import type { PhoneInputState } from "../types";
 import { PhoneInputVariants } from "../variants";
@@ -19,10 +21,7 @@ export interface PhoneInputRootProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  isDisabled: boolean,
-  isFocused: boolean,
-): PhoneInputState => {
+const calculateState = (isDisabled: boolean, isFocused: boolean): PhoneInputState => {
   if (isDisabled) return "disabled";
   if (isFocused) return "focused";
   return "default";
@@ -39,6 +38,8 @@ export function PhoneInputRoot({
   style,
 }: PhoneInputRootProps) {
   const variantStyles = PhoneInputVariants[variant]();
+  const componentConfig = useComponentConfig("phoneInput");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isFocused, setIsFocused] = useState(false);
   const triggerRef = useRef<ViewRef>(null);
 
@@ -54,8 +55,8 @@ export function PhoneInputRoot({
   });
 
   const rootStyles = StyleSheet.flatten([
-    variantStyles.root?.default,
-    variantStyles.root?.[state],
+    mergedStyles.root?.default,
+    mergedStyles.root?.[state],
     style,
   ]);
 
@@ -69,10 +70,11 @@ export function PhoneInputRoot({
         state,
         phoneMask,
         isDisabled,
-        styles: variantStyles,
+        styles: mergedStyles,
+
         triggerRef,
       }) satisfies PhoneInputContext,
-    [variantStyles, state, phoneMask, isDisabled, value, isFocused],
+    [mergedStyles, state, phoneMask, isDisabled, value, isFocused],
   );
 
   return (

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

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  type StyleProp,
-  StyleSheet,
-  TextInput,
-  type TextStyle,
-} from "react-native";
+import { type StyleProp, StyleSheet, TextInput, type TextStyle } from "react-native";
 import { usePhoneInput } from "../context";
 
 export interface PhoneInputProps {
@@ -12,18 +7,10 @@ export interface PhoneInputProps {
   style?: StyleProp<TextStyle>;
 }
 
-export function PhoneInput({
-  placeholder = "Enter phone number",
-  style,
-}: PhoneInputProps) {
-  const { styles, state, setIsFocused, phoneMask, isDisabled } =
-    usePhoneInput();
+export function PhoneInput({ placeholder = "Enter phone number", style }: PhoneInputProps) {
+  const { styles, state, setIsFocused, phoneMask, isDisabled } = usePhoneInput();
 
-  const inputStyles = StyleSheet.flatten([
-    styles.input?.default,
-    styles.input?.[state],
-    style,
-  ]);
+  const inputStyles = StyleSheet.flatten([styles.input?.default, styles.input?.[state], style]);
 
   return (
     <TextInput
@@ -31,9 +18,7 @@ export function PhoneInput({
       onChangeText={phoneMask.onChangeText}
       keyboardType={phoneMask.keyboardType}
       placeholder={placeholder}
-      placeholderTextColor={
-        StyleSheet.flatten(styles.countryButtonText?.disabled)?.color
-      }
+      placeholderTextColor={StyleSheet.flatten(styles.countryButtonText?.disabled)?.color}
       readOnly={isDisabled}
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}

package/src/components/phone-input/context.ts

@@ -19,9 +19,7 @@ export interface PhoneInputContext {
   styles: PhoneInputStyles;
 }
 
-export const PhoneInputContext = createContext<PhoneInputContext | undefined>(
-  undefined,
-);
+export const PhoneInputContext = createContext<PhoneInputContext | undefined>(undefined);
 
 export const usePhoneInput = () => {
   const context = useContext(PhoneInputContext);

package/src/components/phone-input/types.ts

@@ -10,11 +10,7 @@ export interface PhoneInputStyles {
   input?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
   pickerOverlay?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
   pickerContent?: Partial<Record<PhoneInputState, StyleProp<ViewStyle>>>;
-  pickerOption?: Partial<
-    Record<PhoneInputState | "selected", StyleProp<ViewStyle>>
-  >;
-  pickerOptionText?: Partial<
-    Record<PhoneInputState | "selected", StyleProp<TextStyle>>
-  >;
+  pickerOption?: Partial<Record<PhoneInputState | "selected", StyleProp<ViewStyle>>>;
+  pickerOptionText?: Partial<Record<PhoneInputState | "selected", StyleProp<TextStyle>>>;
   pickerSearch?: Partial<Record<PhoneInputState, StyleProp<TextStyle>>>;
 }

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { Pressable, type PressableProps, type StyleProp, StyleSheet, type ViewStyle } from "react-native";
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from "react-native";
 import { usePopover } from "../context";
 
 export interface PopoverOverlayProps extends Omit<PressableProps, "onPress"> {

package/src/components/popover/components/popover-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 { PopoverContext } from "../context";
 import { PopoverVariants } from "../variants";
 
@@ -11,6 +17,8 @@ export interface PopoverRootProps {
 
 export function PopoverRoot(props: PopoverRootProps) {
   const variantStyles = PopoverVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("popover");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isOpen, setIsOpen] = useState(false);
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
   const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
@@ -24,7 +32,7 @@ export function PopoverRoot(props: PopoverRootProps) {
         setContentLayout,
         triggerPosition,
         setTriggerPosition,
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       {props.children}

package/src/components/popover/components/popover-trigger.tsx

@@ -13,10 +13,7 @@ export interface PopoverTriggerRef {
   close: () => void;
 }
 
-export const PopoverTrigger = forwardRef<
-  PopoverTriggerRef,
-  PopoverTriggerProps
->((props, ref) => {
+export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>((props, ref) => {
   const popover = usePopover();
   const triggerRef = useRef<ViewRef>(null);