@korsolutions/ui 0.0.84 → 0.0.86

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,9 +43,11 @@ 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";
 
 export * from "./safe-area";
+export type { Size } from "./utils/size-scale";
+export type { SvgProps } from "./types/props.types";

package/src/themes/default/index.ts

@@ -7,6 +7,7 @@ export const defaultThemeAssets: ThemeAssets = {
     dark: darkColors,
   },
   radius: 10,
+  spacing: 6,
   fontFamily: "System",
   letterSpacing: 0,
   fontSize: 16,

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";
@@ -23,28 +21,11 @@ interface ThemeContext {
   colorScheme: ColorScheme;
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
+  spacing: number;
   setColorScheme: (scheme: ColorScheme) => void;
   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 +39,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];
 
@@ -74,6 +53,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
         fontFamily: themeAssets.fontFamily,
         letterSpacing: themeAssets.letterSpacing,
         fontSize: themeAssets.fontSize,
+        spacing: themeAssets.spacing,
         components,
       }}
     >
@@ -90,10 +70,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];
+};

package/src/themes/types.ts

@@ -30,9 +30,135 @@ export interface ThemeAssets {
   fontFamily: FontFamily;
   letterSpacing: LetterSpacing;
   fontSize: FontSize;
+  spacing: number;
 }
 
 export type StorageClient<T> = {
   set: (value: T) => void;
   get: () => T | null;
 };
+
+import type { AlertDialogStyles } from "../components/alert-dialog/types";
+import type { AlertStyles } from "../components/alert/types";
+import type { AvatarStyles } from "../components/avatar/types";
+import type { BadgeStyles } from "../components/badge/types";
+import type { ButtonStyles } from "../components/button/types";
+import type { CalendarStyles } from "../components/calendar/calendar/types";
+import type { TimelineStyles } from "../components/calendar/timeline/types";
+import type { WeekCalendarStyles } from "../components/calendar/week-calendar/types";
+import type { CardStyles } from "../components/card/types";
+import type { CheckboxStyles } from "../components/checkbox/types";
+import type { ComboboxStyles } from "../components/combobox/types";
+import type { EmptyStyles } from "../components/empty/types";
+import type { FieldStyles } from "../components/field/types";
+import type { IconButtonStyles } from "../components/icon-button/types";
+import type { InputStyles } from "../components/input/types";
+import type { MenuStyles } from "../components/menu/types";
+import type { PhoneInputStyles } from "../components/phone-input/types";
+import type { PopoverStyles } from "../components/popover/types";
+import type { ProgressStyles } from "../components/progress/types";
+import type { RadioGroupStyles } from "../components/radio-group/types";
+import type { SelectStyles } from "../components/select/types";
+import type { SeparatorStyles } from "../components/separator/types";
+import type { SpinnerStyles } from "../components/spinner/types";
+import type { TableStyles } from "../components/table/types";
+import type { TabsStyles } from "../components/tabs/types";
+import type { TextareaStyles } from "../components/textarea/types";
+import type { ToastStyles } from "../components/toast/types";
+import type { ToastVariants } from "../components/toast/variants";
+import type { PressableStyles } from "../components/touchable/types";
+import type { SvgProps } from "../types/props.types";
+
+export interface ComponentsConfig {
+  colorScheme?: {
+    storage?: StorageClient<ColorScheme>;
+  };
+  alert?: {
+    styles?: AlertStyles;
+  };
+  alertDialog?: {
+    styles?: AlertDialogStyles;
+  };
+  avatar?: {
+    styles?: AvatarStyles;
+  };
+  badge?: {
+    styles?: BadgeStyles;
+  };
+  button?: {
+    styles?: ButtonStyles;
+  };
+  calendar?: {
+    prevIcon?: React.ComponentType<SvgProps>;
+    nextIcon?: React.ComponentType<SvgProps>;
+    styles?: CalendarStyles;
+  };
+  card?: {
+    styles?: CardStyles;
+  };
+  checkbox?: {
+    styles?: CheckboxStyles;
+  };
+  combobox?: {
+    styles?: ComboboxStyles;
+  };
+  empty?: {
+    styles?: EmptyStyles;
+  };
+  field?: {
+    styles?: FieldStyles;
+  };
+  iconButton?: {
+    styles?: IconButtonStyles;
+  };
+  input?: {
+    styles?: InputStyles;
+  };
+  menu?: {
+    selectionIcon?: React.ComponentType<SvgProps>;
+    styles?: MenuStyles;
+  };
+  phoneInput?: {
+    styles?: PhoneInputStyles;
+  };
+  popover?: {
+    styles?: PopoverStyles;
+  };
+  progress?: {
+    styles?: ProgressStyles;
+  };
+  radioGroup?: {
+    styles?: RadioGroupStyles;
+  };
+  select?: {
+    styles?: SelectStyles;
+  };
+  separator?: {
+    styles?: SeparatorStyles;
+  };
+  spinner?: {
+    styles?: SpinnerStyles;
+  };
+  table?: {
+    styles?: TableStyles;
+  };
+  tabs?: {
+    styles?: TabsStyles;
+  };
+  textarea?: {
+    styles?: TextareaStyles;
+  };
+  timeline?: {
+    styles?: TimelineStyles;
+  };
+  toast?: {
+    icons?: Partial<Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>>;
+    styles?: ToastStyles;
+  };
+  touchable?: {
+    styles?: PressableStyles;
+  };
+  weekCalendar?: {
+    styles?: WeekCalendarStyles;
+  };
+}

package/src/themes/utils.ts

@@ -14,5 +14,6 @@ export function mergeThemeAssets(
     fontFamily: override.fontFamily ?? base.fontFamily,
     letterSpacing: override.letterSpacing ?? base.letterSpacing,
     fontSize: override.fontSize ?? base.fontSize,
+    spacing: override.spacing ?? base.spacing,
   };
 }

package/src/utils/calculate-styles.ts

@@ -1,8 +1,14 @@
-export const calculateComposedStyles = <TStyle, State extends string | "default", Component extends string>(
+import { StyleSheet } from "react-native";
+
+export const calculateComposedStyles = <
+  TStyle,
+  State extends string | "default",
+  Component extends string,
+>(
   styles: Partial<Record<Component, Partial<Record<State, TStyle>>>> | null = {},
   state: State,
   component: Component,
-  style?: TStyle
+  style?: TStyle,
 ): TStyle[] => {
   const result: TStyle[] = [];
   const componentStyles = styles?.[component];
@@ -17,3 +23,37 @@ export const calculateComposedStyles = <TStyle, State extends string | "default"
   }
   return result;
 };
+
+const mergeProps = <TProps extends { style?: any }>(
+  variantProps: TProps,
+  globalProps: TProps | undefined,
+): TProps => {
+  if (!globalProps) return variantProps;
+  const mergedProps = {
+    ...globalProps,
+    ...variantProps,
+    style: [globalProps.style, variantProps.style],
+  };
+  return mergedProps;
+};
+
+const isPropsObject = (props: unknown): props is { style?: any } => {
+  return typeof props === "object" && props !== null && "style" in props;
+};
+
+export const mergeStyles = <TStyle extends Record<string, any>>(
+  variantStyles: TStyle,
+  globalStyles: TStyle | undefined,
+): TStyle => {
+  if (!globalStyles) return variantStyles;
+  const returnStyles = {} as TStyle;
+  for (const key in variantStyles) {
+    if (isPropsObject(variantStyles[key]) && isPropsObject(globalStyles[key])) {
+      returnStyles[key] = mergeProps(variantStyles[key], globalStyles[key]);
+    } else {
+      // @ts-ignore
+      returnStyles[key] = StyleSheet.flatten([variantStyles[key], globalStyles[key]]);
+    }
+  }
+  return returnStyles;
+};