@korsolutions/ui 0.0.84 → 0.0.85

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

@@ -1,11 +1,7 @@
 import React, { useMemo } from "react";
-import {
-  StyleSheet,
-  View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle,
-} from "react-native";
+import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { TabsContext } from "../context";
 import { TabsVariants } from "../variants";
 
@@ -20,16 +16,19 @@ export interface TabsRootProps extends Omit<ViewProps, "children"> {
 export function TabsRoot(props: TabsRootProps) {
   const { children, value, onChange, style, ...viewProps } = props;
   const variantStyles = TabsVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("tabs");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const contextValue = useMemo(
     () => ({
       value,
       onChange,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [value, onChange, variantStyles],
+    [value, onChange, mergedStyles],
   );
-  const composedStyles = StyleSheet.flatten([variantStyles?.root, style]);
+  const composedStyles = StyleSheet.flatten([mergedStyles?.root, style]);
 
   return (
     <TabsContext.Provider value={contextValue}>

package/src/components/textarea/textarea.tsx

@@ -1,5 +1,7 @@
 import { useState } from "react";
 import { TextInput, type TextInputProps } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import type { TextareaState } from "./types";
 import { TextareaVariants } from "./variants";
 
@@ -26,14 +28,16 @@ const calculateState = (props: TextareaProps, isFocused: boolean): TextareaState
 
 export function Textarea(props: TextareaProps) {
   const variantStyles = TextareaVariants[props.variant ?? "default"]();
+  const componentConfig = useComponentConfig("textarea");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
   const [isFocused, setIsFocused] = useState(false);
   const state = calculateState(props, isFocused);
 
-  const composedStyles = [variantStyles.default?.style, variantStyles[state]?.style, props.style];
+  const composedStyles = [mergedStyles.default?.style, mergedStyles[state]?.style, props.style];
   const composedProps = {
-    ...variantStyles.default,
-    ...variantStyles[state],
+    ...mergedStyles.default,
+    ...mergedStyles[state],
     ...props,
   };
   const Component = props.render ?? TextInput;

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

@@ -1,16 +1,10 @@
 import React from "react";
-import type {
-  PropsWithRequiredRender,
-  SvgProps,
-} from "../../../types/props.types";
+import type { PropsWithRequiredRender, SvgProps } from "../../../types/props.types";
 import { useToast } from "../context";
 
 export type ToastIconProps = SvgProps;
 
-export function ToastIcon({
-  render: Component,
-  ...props
-}: PropsWithRequiredRender<SvgProps>) {
+export function ToastIcon({ render: Component, ...props }: PropsWithRequiredRender<SvgProps>) {
   const toast = useToast();
 
   const composedProps = {

package/src/components/toast/components/toast-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 { ToastContext } from "../context";
 import { ToastVariants } from "../variants";
 
@@ -14,13 +16,15 @@ export interface ToastRootProps {
 
 export function ToastRoot(props: ToastRootProps) {
   const variantStyles = ToastVariants[props.variant ?? "default"]();
-  const composedStyle = [variantStyles.root, props.style];
+  const componentConfig = useComponentConfig("toast");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+  const composedStyle = [mergedStyles.root, props.style];
 
   const Component = props.render ?? View;
   return (
     <ToastContext.Provider
       value={{
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component {...props} style={composedStyle} />

package/src/components/toast/manager.tsx

@@ -1,7 +1,7 @@
 import React, { useSyncExternalStore } from "react";
 import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "../../safe-area";
-import { useComponentsConfig } from "../../themes";
+import { useComponentConfig } from "../../themes/provider";
 import { Portal } from "../portal";
 import { ToastBody } from "./components/toast-body";
 import { ToastDescription } from "./components/toast-description";
@@ -110,18 +110,16 @@ interface ToastProps {
 }
 
 export function ToastComponent(props: ToastProps) {
-  const config = useComponentsConfig();
+  const config = useComponentConfig("toast");
   const variant = props.variant ?? "default";
-  const IconComponent = config?.toast?.icons?.[variant];
+  const IconComponent = config?.icons?.[variant];
 
   return (
     <ToastRoot variant={variant}>
       {!!IconComponent && <ToastIcon render={IconComponent} />}
       <ToastBody>
         <ToastTitle>{props.title}</ToastTitle>
-        {!!props.description && (
-          <ToastDescription>{props.description}</ToastDescription>
-        )}
+        {!!props.description && <ToastDescription>{props.description}</ToastDescription>}
       </ToastBody>
     </ToastRoot>
   );

package/src/components/touchable/touchable.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { Pressable, type PressableProps } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import { mergeStyles } from "../../utils/calculate-styles";
 import type { PressableState } from "./types";
 import { PressableVariants } from "./variants";
 
@@ -25,6 +27,8 @@ const calculateState = (
 export function Touchable(props: TouchableProps) {
   const { variant = "default", isDisabled, style, children, ...rest } = props;
   const variantStyles = PressableVariants[variant]();
+  const componentConfig = useComponentConfig("touchable");
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
   const [isHovered, setIsHovered] = useState(false);
 
   const handlePress: PressableProps["onPress"] = (event) => {
@@ -46,15 +50,11 @@ export function Touchable(props: TouchableProps) {
       }}
       disabled={isDisabled}
       style={(styleState) => {
-        const currentState = calculateState(
-          props,
-          styleState.pressed,
-          isHovered,
-        );
+        const currentState = calculateState(props, styleState.pressed, isHovered);
 
         return [
-          variantStyles?.default,
-          variantStyles?.[currentState],
+          mergedStyles?.default,
+          mergedStyles?.[currentState],
           typeof style === "function" ? style(styleState) : style,
         ];
       }}

package/src/hooks/use-color-scheme.ts

@@ -32,10 +32,7 @@ export function useColorScheme({ colorSchemeStorage }: UseColorSchemeProps) {
   };
 
   useEffect(() => {
-    const newScheme = getColorScheme(
-      colorSchemeStorage?.get,
-      systemColorScheme,
-    );
+    const newScheme = getColorScheme(colorSchemeStorage?.get, systemColorScheme);
     if (newScheme === _colorScheme) return;
     setColorScheme(newScheme);
   }, [systemColorScheme]);

package/src/hooks/use-currency-mask.ts

@@ -42,7 +42,7 @@ export function useCurrencyMask({
         maximumFractionDigits: precision,
       }).format(num);
     },
-    [locale, currency, precision]
+    [locale, currency, precision],
   );
 
   const parseCurrency = useCallback(
@@ -60,7 +60,7 @@ export function useCurrencyMask({
 
       return constrained;
     },
-    [min, max]
+    [min, max],
   );
 
   const handleChangeText = useCallback(
@@ -93,7 +93,7 @@ export function useCurrencyMask({
       setNumericValue(value);
       onValueChange?.(value);
     },
-    [parseCurrency, onValueChange, isFocused, precision]
+    [parseCurrency, onValueChange, isFocused, precision],
   );
 
   const handleBlur = useCallback(() => {
@@ -126,7 +126,7 @@ export function useCurrencyMask({
       }
       onValueChange?.(value);
     },
-    [isFocused, formatCurrency, onValueChange]
+    [isFocused, formatCurrency, onValueChange],
   );
 
   return {

package/src/hooks/use-is-react-navigation-modal.ts

@@ -3,8 +3,7 @@ import { useEffect, useMemo } from "react";
 type NavigationContainerRef =
   import("@react-navigation/native").NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
 
-let useCachedNavigationContainerRef: (() => NavigationContainerRef) | null =
-  null;
+let useCachedNavigationContainerRef: (() => NavigationContainerRef) | null = null;
 
 export function useInitializeNavigationContainerRef() {
   useEffect(() => {
@@ -16,14 +15,10 @@ export function useInitializeNavigationContainerRef() {
       }
       const reactNavigation = require("@react-navigation/native");
       if (reactNavigation) {
-        useCachedNavigationContainerRef =
-          reactNavigation.useNavigationContainerRef;
+        useCachedNavigationContainerRef = reactNavigation.useNavigationContainerRef;
       }
     } catch (error) {
-      console.warn(
-        "[useIsReactNavigationModal] Failed to load navigation ref:",
-        error,
-      );
+      console.warn("[useIsReactNavigationModal] Failed to load navigation ref:", error);
     }
   }, []);
 }
@@ -40,11 +35,7 @@ const getIsModal = () => {
     return false;
   }
   const state = navigationRef.getCurrentOptions();
-  if (
-    state &&
-    "presentation" in state &&
-    typeof state.presentation === "string"
-  ) {
+  if (state && "presentation" in state && typeof state.presentation === "string") {
     return state.presentation === "modal";
   }
   return false;

package/src/hooks/use-numeric-mask.ts

@@ -74,7 +74,7 @@ export function useNumericMask({
           }).format(num);
       }
     },
-    [format, locale, currency, effectivePrecision]
+    [format, locale, currency, effectivePrecision],
   );
 
   const parseValue = useCallback(
@@ -98,7 +98,7 @@ export function useNumericMask({
 
       return constrained;
     },
-    [min, max, allowNegative]
+    [min, max, allowNegative],
   );
 
   const handleChangeText = useCallback(
@@ -151,7 +151,7 @@ export function useNumericMask({
       setNumericValue(value);
       onChange?.(value);
     },
-    [parseValue, onChange, isFocused, effectivePrecision, allowNegative, format]
+    [parseValue, onChange, isFocused, effectivePrecision, allowNegative, format],
   );
 
   const handleBlur = useCallback(() => {
@@ -184,11 +184,16 @@ export function useNumericMask({
       }
       onChange?.(value);
     },
-    [isFocused, formatValue, onChange]
+    [isFocused, formatValue, onChange],
   );
 
   // Determine keyboard type based on format
-  const keyboardType = format === "integer" ? (allowNegative ? ("numeric" as const) : ("number-pad" as const)) : ("decimal-pad" as const);
+  const keyboardType =
+    format === "integer"
+      ? allowNegative
+        ? ("numeric" as const)
+        : ("number-pad" as const)
+      : ("decimal-pad" as const);
 
   return {
     value: displayValue,

package/src/hooks/use-phone-mask.ts

@@ -1,9 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import {
-  type CountryData,
-  COUNTRIES,
-  getCountryByCode,
-} from "../data/countries";
+import { type CountryData, COUNTRIES, getCountryByCode } from "../data/countries";
 
 export interface UsePhoneMaskOptions {
   value?: string;
@@ -57,9 +53,7 @@ function parseE164(
   if (!e164.startsWith("+")) return null;
   const digits = e164.slice(1);
 
-  const sorted = [...countries].sort(
-    (a, b) => b.dialCode.length - a.dialCode.length,
-  );
+  const sorted = [...countries].sort((a, b) => b.dialCode.length - a.dialCode.length);
 
   for (const country of sorted) {
     if (digits.startsWith(country.dialCode)) {
@@ -99,9 +93,7 @@ export function usePhoneMask({
       if (parsed) {
         setCountryState(parsed.country);
         setNationalDigits(parsed.nationalDigits);
-        setDisplayValue(
-          formatNational(parsed.nationalDigits, parsed.country.format),
-        );
+        setDisplayValue(formatNational(parsed.nationalDigits, parsed.country.format));
       }
     } else {
       setNationalDigits("");
@@ -138,8 +130,7 @@ export function usePhoneMask({
       setNationalDigits(trimmed);
       setDisplayValue(formatNational(trimmed, newCountry.format));
 
-      const e164 =
-        trimmed.length > 0 ? toE164(newCountry.dialCode, trimmed) : "";
+      const e164 = trimmed.length > 0 ? toE164(newCountry.dialCode, trimmed) : "";
       isInternalChange.current = true;
       onChange?.(e164);
     },
@@ -159,9 +150,7 @@ export function usePhoneMask({
       if (parsed) {
         setCountryState(parsed.country);
         setNationalDigits(parsed.nationalDigits);
-        setDisplayValue(
-          formatNational(parsed.nationalDigits, parsed.country.format),
-        );
+        setDisplayValue(formatNational(parsed.nationalDigits, parsed.country.format));
         isInternalChange.current = true;
         onChange?.(e164);
       }
@@ -171,8 +160,7 @@ export function usePhoneMask({
 
   return {
     displayValue,
-    e164Value:
-      nationalDigits.length > 0 ? toE164(country.dialCode, nationalDigits) : "",
+    e164Value: nationalDigits.length > 0 ? toE164(country.dialCode, nationalDigits) : "",
     country,
     countries: availableCountries,
     onChangeText,

package/src/hooks/use-relative-position.ts

@@ -10,14 +10,9 @@ import { usePortalOffset } from "../components/portal";
 import { useSafeAreaInsets, type SafeAreaInsets } from "../safe-area";
 import { useIsReactNavigationModal } from "./use-is-react-navigation-modal";
 
-type UseRelativePositionArgs = Omit<
-  GetContentStyleArgs,
-  "dimensions" | "insets"
->;
+type UseRelativePositionArgs = Omit<GetContentStyleArgs, "dimensions" | "insets">;
 
-type GetContentStyleArgs = GetPositionArgs &
-  GetSidePositionArgs &
-  GetAlignPositionArgs;
+type GetContentStyleArgs = GetPositionArgs & GetSidePositionArgs & GetAlignPositionArgs;
 
 export function useRelativePosition({
   align,
@@ -81,9 +76,7 @@ export function useRelativePosition({
       // Temporary fix to calculate portal content relative position correctly when rendered in a React Navigation modal.
       top: Platform.select({
         default: sidePosition.top,
-        ios: isReactNavigationModal
-          ? sidePosition.top + insets.top
-          : sidePosition.top,
+        ios: isReactNavigationModal ? sidePosition.top + insets.top : sidePosition.top,
       }),
     };
 
@@ -182,10 +175,8 @@ function getSidePosition({
   insets,
   dimensions,
 }: GetSidePositionArgs) {
-  const positionTop =
-    triggerPosition?.pageY - sideOffset - contentLayout.height;
-  const positionBottom =
-    triggerPosition.pageY + triggerPosition.height + sideOffset;
+  const positionTop = triggerPosition?.pageY - sideOffset - contentLayout.height;
+  const positionBottom = triggerPosition.pageY + triggerPosition.height + sideOffset;
 
   const side = getSide({
     preferredSide,
@@ -205,10 +196,7 @@ function getSidePosition({
     };
   }
 
-  let top = Math.min(
-    dimensions.height - insets.bottom - contentLayout.height,
-    positionBottom,
-  );
+  let top = Math.min(dimensions.height - insets.bottom - contentLayout.height, positionBottom);
 
   return {
     top,
@@ -242,8 +230,7 @@ function getAlignPosition({
     dimensions,
   );
 
-  const doesCollide =
-    left < insets.left || left + contentWidth > dimensions.width - insets.right;
+  const doesCollide = left < insets.left || left + contentWidth > dimensions.width - insets.right;
   if (doesCollide) {
     const spaceLeft = left - insets.left;
     const spaceRight = dimensions.width - insets.right - (left + contentWidth);
@@ -285,9 +272,6 @@ function getLeftPosition(
   }
   return Math.max(
     insets.left,
-    Math.min(
-      left + alignOffset,
-      dimensions.width - contentWidth - insets.right,
-    ),
+    Math.min(left + alignOffset, dimensions.width - contentWidth - insets.right),
   );
 }

package/src/hooks/use-screen-size.ts

@@ -10,14 +10,17 @@ interface Response {
   readonly isTablet: boolean;
   readonly isDesktop: boolean;
 
-  select<T>(specifics: ({ [size in ScreenSize]?: T } & { default: T }) | { [platform in ScreenSize]: T }): T;
+  select<T>(
+    specifics: ({ [size in ScreenSize]?: T } & { default: T }) | { [platform in ScreenSize]: T },
+  ): T;
   select<T>(specifics: { [size in ScreenSize]?: T }): T | undefined;
 }
 
 export function useScreenSize(): Response {
   const windowDimensions = useWindowDimensions();
 
-  const size: ScreenSize = windowDimensions.width < 768 ? "mobile" : windowDimensions.width < 1024 ? "tablet" : "desktop";
+  const size: ScreenSize =
+    windowDimensions.width < 768 ? "mobile" : windowDimensions.width < 1024 ? "tablet" : "desktop";
 
   return {
     size,
@@ -33,7 +36,9 @@ export function useScreenSize(): Response {
       if (size === "tablet" && tablet !== undefined) return tablet;
       if (size === "desktop" && desktop !== undefined) return desktop;
       if (!("default" in specifics)) {
-        throw new Error(`Utils.$screenSize.select: No value specified for current screen size: ${size}`);
+        throw new Error(
+          `Utils.$screenSize.select: No value specified for current screen size: ${size}`,
+        );
       }
       return specifics.default;
     },

package/src/index.tsx

@@ -5,11 +5,8 @@ import { type PortalHostProps } from "./components/portal/portal.constants";
 import { ToastContainer } from "./components/toast/manager";
 import { useInitializeNavigationContainerRef } from "./hooks/use-is-react-navigation-modal";
 import { SafeAreaProvider, type SafeAreaInsets } from "./safe-area";
-import {
-  ThemeProvider,
-  type ComponentsConfig,
-  type ThemeProviderProps,
-} from "./themes";
+import { ThemeProvider, type ThemeProviderProps } from "./themes/provider";
+import type { ComponentsConfig } from "./themes/types";
 
 export interface ProviderProps {
   children: React.ReactNode;
@@ -46,7 +43,7 @@ export * from "./hooks/use-screen-size";
 
 export * from "./themes/adapters";
 export * from "./themes/default";
-export { useTheme, type ComponentsConfig } from "./themes/provider";
+export { useTheme } from "./themes/provider";
 export * from "./themes/types";
 
 export * from "./components";

package/src/themes/index.ts

@@ -1,3 +1,3 @@
-export * from "./provider";
-export * from "./types";
 export * from "./adapters/react-navigation";
+export { ThemeProvider, useTheme } from "./provider";
+export * from "./types";

package/src/themes/provider.tsx

@@ -1,17 +1,15 @@
 import { createContext, type PropsWithChildren, useContext } from "react";
-import type { ToastVariants } from "../components/toast/variants";
 import { useColorScheme } from "../hooks/use-color-scheme";
-import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
 import type {
   Colors,
   ColorScheme,
+  ComponentsConfig,
   FontFamily,
   FontSize,
   LetterSpacing,
   Radius,
-  StorageClient,
   ThemeAssets,
 } from "./types";
 import { mergeThemeAssets } from "./utils";
@@ -27,24 +25,6 @@ interface ThemeContext {
   components?: ComponentsConfig;
 }
 
-export interface ComponentsConfig {
-  colorScheme?: {
-    storage?: StorageClient<ColorScheme>;
-  };
-  toast?: {
-    icons?: Partial<
-      Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>
-    >;
-  };
-  menu?: {
-    selectionIcon?: React.ComponentType<SvgProps>;
-  };
-  calendar?: {
-    prevIcon?: React.ComponentType<SvgProps>;
-    nextIcon?: React.ComponentType<SvgProps>;
-  };
-}
-
 const ThemeContext = createContext<ThemeContext | null>(null);
 
 export interface ThemeProviderProps extends PropsWithChildren {
@@ -58,9 +38,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     colorSchemeStorage: components?.colorScheme?.storage,
   });
 
-  const themeAssets = theme
-    ? mergeThemeAssets(defaultThemeAssets, theme)
-    : defaultThemeAssets;
+  const themeAssets = theme ? mergeThemeAssets(defaultThemeAssets, theme) : defaultThemeAssets;
 
   const colors = themeAssets.colors[colorScheme];
 
@@ -90,10 +68,15 @@ export const useTheme = () => {
   return context;
 };
 
-export const useComponentsConfig = () => {
+const useComponentsConfig = () => {
   const context = useContext(ThemeContext);
   if (!context) {
     throw new Error("useComponentsConfig must be used within a ThemeProvider");
   }
   return context.components;
 };
+
+export const useComponentConfig = <K extends keyof ComponentsConfig>(componentName: K) => {
+  const componentsConfig = useComponentsConfig();
+  return componentsConfig?.[componentName];
+};