@korsolutions/ui 0.0.84 → 0.0.85

package/src/components/calendar/shared/calendar-day.tsx

@@ -43,22 +43,14 @@ export function CalendarDay(props: CalendarDayProps) {
   const [isHovered, setIsHovered] = useState(false);
 
   const isDisabled = useMemo(() => {
-    if (calendar.minDate && isDateBefore(props.date, calendar.minDate))
-      return true;
-    if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate))
-      return true;
+    if (calendar.minDate && isDateBefore(props.date, calendar.minDate)) return true;
+    if (calendar.maxDate && isDateAfter(props.date, calendar.maxDate)) return true;
     return false;
   }, [props.date, calendar.minDate, calendar.maxDate]);
 
-  const isMarked =
-    calendar.markedDates?.some((d) => isDateSameDay(d, props.date)) ?? false;
+  const isMarked = calendar.markedDates?.some((d) => isDateSameDay(d, props.date)) ?? false;
 
-  const state = calculateState(
-    props.date,
-    calendar.value,
-    isDisabled,
-    isHovered,
-  );
+  const state = calculateState(props.date, calendar.value, isDisabled, isHovered);
 
   const handlePress = () => {
     if (isDisabled || !calendar.onChange) return;

package/src/components/calendar/shared/calendar-header.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  View,
-  type StyleProp,
-  type ViewProps,
-  type ViewStyle,
-} from "react-native";
+import { View, type StyleProp, type ViewProps, type ViewStyle } from "react-native";
 import { useCalendarContext } from "./calendar-context";
 
 export interface CalendarHeaderProps extends ViewProps {

package/src/components/calendar/shared/calendar-nav-buttons.tsx

@@ -1,13 +1,6 @@
 import React, { useState } from "react";
-import {
-  Pressable,
-  StyleSheet,
-  Text,
-  View,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
-import { useComponentsConfig } from "../../../themes";
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
 import { useCalendarContext } from "./calendar-context";
 import type { CalendarNavButtonState } from "./types";
 
@@ -15,10 +8,7 @@ export interface CalendarNavButtonsProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (
-  isDisabled: boolean,
-  isHovered: boolean,
-): CalendarNavButtonState => {
+const calculateState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
   if (isDisabled) return "disabled";
   if (isHovered) return "hovered";
   return "default";
@@ -26,11 +16,10 @@ const calculateState = (
 
 export function CalendarNavButtons(props: CalendarNavButtonsProps) {
   const { style } = props;
-  const { goToPrev, goToNext, isPrevDisabled, isNextDisabled, styles } =
-    useCalendarContext();
-  const config = useComponentsConfig();
-  const PrevIcon = config?.calendar?.prevIcon;
-  const NextIcon = config?.calendar?.nextIcon;
+  const { goToPrev, goToNext, isPrevDisabled, isNextDisabled, styles } = useCalendarContext();
+  const config = useComponentConfig("calendar");
+  const PrevIcon = config?.prevIcon;
+  const NextIcon = config?.nextIcon;
   const [prevHovered, setPrevHovered] = useState(false);
   const [nextHovered, setNextHovered] = useState(false);
 
@@ -57,11 +46,7 @@ export function CalendarNavButtons(props: CalendarNavButtonsProps) {
         disabled={isPrevDisabled}
         style={[styles?.navButton?.default, styles?.navButton?.[prevState]]}
       >
-        {PrevIcon ? (
-          <PrevIcon {...prevIconProps} />
-        ) : (
-          <Text style={prevIconProps?.style}>‹</Text>
-        )}
+        {PrevIcon ? <PrevIcon {...prevIconProps} /> : <Text style={prevIconProps?.style}>‹</Text>}
       </Pressable>
       <Pressable
         onPress={goToNext}
@@ -70,11 +55,7 @@ export function CalendarNavButtons(props: CalendarNavButtonsProps) {
         disabled={isNextDisabled}
         style={[styles?.navButton?.default, styles?.navButton?.[nextState]]}
       >
-        {NextIcon ? (
-          <NextIcon {...nextIconProps} />
-        ) : (
-          <Text style={nextIconProps?.style}>›</Text>
-        )}
+        {NextIcon ? <NextIcon {...nextIconProps} /> : <Text style={nextIconProps?.style}>›</Text>}
       </Pressable>
     </View>
   );

package/src/components/calendar/shared/calendar-title.tsx

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Text,
-  type StyleProp,
-  type TextProps,
-  type TextStyle,
-} from "react-native";
+import { Text, type StyleProp, type TextProps, type TextStyle } from "react-native";
 import { formatDate } from "../../../utils/date-utils";
 import { useCalendarContext } from "./calendar-context";
 

package/src/components/calendar/shared/calendar-week-labels.tsx

@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  Text,
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from "react-native";
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { useCalendarContext } from "./calendar-context";
 
 export interface CalendarWeekLabelProps {

package/src/components/calendar/shared/types.ts

@@ -1,12 +1,7 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { IconProps } from "../../icon";
 
-export type CalendarDayState =
-  | "default"
-  | "selected"
-  | "today"
-  | "disabled"
-  | "hovered";
+export type CalendarDayState = "default" | "selected" | "today" | "disabled" | "hovered";
 export type CalendarNavButtonState = "default" | "disabled" | "hovered";
 
 export interface BaseCalendarStyles {

package/src/components/calendar/timeline/calendar-timeline.tsx

@@ -41,9 +41,7 @@ function groupOverlappingEvents<T>(
   getStart: (e: T) => Date,
   getEnd: (e: T) => Date,
 ): T[][] {
-  const sorted = [...events].sort(
-    (a, b) => getStart(a).getTime() - getStart(b).getTime(),
-  );
+  const sorted = [...events].sort((a, b) => getStart(a).getTime() - getStart(b).getTime());
   const groups: T[][] = [];
 
   for (const event of sorted) {
@@ -116,10 +114,7 @@ export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
     : null;
 
   return (
-    <ScrollView
-      style={[variantStyles.container, style]}
-      showsVerticalScrollIndicator
-    >
+    <ScrollView style={[variantStyles.container, style]} showsVerticalScrollIndicator>
       <View style={variantStyles.timeline}>
         {/* Time column */}
         <View style={variantStyles.timeColumn}>
@@ -165,8 +160,7 @@ export function CalendarTimeline<T>(props: CalendarTimelineProps<T>) {
               }
               const duration = endMinutes - startMinutes;
 
-              const top =
-                ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
+              const top = ((startMinutes - startHour * 60) / 60) * HOUR_HEIGHT + 1;
               const height = (duration / 60) * HOUR_HEIGHT - 3;
 
               const indexInGroup = group.indexOf(event);

package/src/components/calendar/timeline/index.ts

@@ -1,6 +1,3 @@
 export { CalendarTimeline } from "./calendar-timeline";
-export type {
-  CalendarTimelineProps,
-  TimelineEventLayout,
-} from "./calendar-timeline";
+export type { CalendarTimelineProps, TimelineEventLayout } from "./calendar-timeline";
 export type { TimelineStyles } from "./types";

package/src/components/calendar/week-calendar/week-calendar.tsx

@@ -11,7 +11,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
-import { useComponentsConfig } from "../../../themes";
+import { useComponentConfig } from "../../../themes/provider";
 import {
   addWeeks,
   endOfWeek,
@@ -22,10 +22,7 @@ import {
   startOfWeek,
   subWeeks,
 } from "../../../utils/date-utils";
-import {
-  CalendarContext,
-  type CalendarContextValue,
-} from "../shared/calendar-context";
+import { CalendarContext, type CalendarContextValue } from "../shared/calendar-context";
 import { CalendarDay } from "../shared/calendar-day";
 import type { CalendarNavButtonState } from "../shared/types";
 import { WeekCalendarVariants } from "./variants";
@@ -44,10 +41,7 @@ export interface WeekCalendarProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateNavState = (
-  isDisabled: boolean,
-  isHovered: boolean,
-): CalendarNavButtonState => {
+const calculateNavState = (isDisabled: boolean, isHovered: boolean): CalendarNavButtonState => {
   if (isDisabled) return "disabled";
   if (isHovered) return "hovered";
   return "default";
@@ -65,13 +59,11 @@ export function WeekCalendar(props: WeekCalendarProps) {
     style,
   } = props;
   const styles = WeekCalendarVariants[props.variant || "default"]();
-  const config = useComponentsConfig();
-  const PrevIcon = config?.calendar?.prevIcon;
-  const NextIcon = config?.calendar?.nextIcon;
+  const config = useComponentConfig("calendar");
+  const PrevIcon = config?.prevIcon;
+  const NextIcon = config?.nextIcon;
 
-  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(
-    startOfWeek(defaultWeek),
-  );
+  const [currentWeekStart, setCurrentWeekStart] = useState<Date>(startOfWeek(defaultWeek));
   const [containerWidth, setContainerWidth] = useState(0);
   const scrollRef = useRef<React.ComponentRef<typeof ScrollView>>(null);
   const [prevHovered, setPrevHovered] = useState(false);
@@ -169,9 +161,7 @@ export function WeekCalendar(props: WeekCalendarProps) {
       <View style={[styles.root, style]}>
         {/* Header */}
         <View style={styles.header}>
-          <Text style={styles.headerTitle}>
-            {formatDate(currentMonth, "MMMM yyyy")}
-          </Text>
+          <Text style={styles.headerTitle}>{formatDate(currentMonth, "MMMM yyyy")}</Text>
           <View style={styles.navButtons}>
             <Pressable
               onPress={goToPrev}
@@ -233,15 +223,10 @@ export function WeekCalendar(props: WeekCalendarProps) {
                   });
                 }
               }}
-              {...(Platform.OS !== "web"
-                ? { contentOffset: { x: containerWidth, y: 0 } }
-                : {})}
+              {...(Platform.OS !== "web" ? { contentOffset: { x: containerWidth, y: 0 } } : {})}
             >
               {weeks.map((weekDates, weekIndex) => (
-                <View
-                  key={weekIndex}
-                  style={[styles.weekStrip, { width: containerWidth }]}
-                >
+                <View key={weekIndex} style={[styles.weekStrip, { width: containerWidth }]}>
                   {weekDates.map((date, dayIndex) => (
                     <CalendarDay key={dayIndex} date={date} />
                   ))}

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

@@ -1,7 +1,8 @@
-import type { PropsWithRender } from "../../types/props.types";
-import { calculateComposedStyles } from "../../utils/calculate-styles";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../themes/provider";
+import type { PropsWithRender } from "../../types/props.types";
+import { calculateComposedStyles, mergeStyles } from "../../utils/calculate-styles";
 import { CardContext } from "./context";
 import { CardVariants } from "./variants";
 
@@ -14,15 +15,18 @@ export interface CardRootProps {
 
 export function CardRoot(props: PropsWithRender<CardRootProps>) {
   const variantStyles = CardVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("card");
+
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
 
-  const composedStyle = calculateComposedStyles(variantStyles, "default", "root", props.style);
+  const composedStyle = calculateComposedStyles(mergedStyles, "default", "root", props.style);
 
   const Component = props.render ?? View;
   return (
     <CardContext.Provider
       value={{
         state: "default",
-        styles: variantStyles,
+        styles: mergedStyles,
       }}
     >
       <Component {...props} style={composedStyle} />

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

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { Pressable, type PressableProps, type StyleProp, type ViewStyle } from "react-native";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { CheckboxContext } from "../context";
 import type { CheckboxState } from "../types";
 import { CheckboxVariants } from "../variants";
@@ -13,7 +15,11 @@ export interface CheckboxRootProps extends Omit<PressableProps, "children"> {
   style?: StyleProp<ViewStyle>;
 }
 
-const calculateState = (value: boolean, isDisabled: boolean | undefined, isHovered: boolean): CheckboxState => {
+const calculateState = (
+  value: boolean,
+  isDisabled: boolean | undefined,
+  isHovered: boolean,
+): CheckboxState => {
   if (isDisabled) {
     return "disabled";
   }
@@ -29,8 +35,11 @@ const calculateState = (value: boolean, isDisabled: boolean | undefined, isHover
 export function CheckboxRoot(props: CheckboxRootProps) {
   const { children, value, onChange, isDisabled, style, ...pressableProps } = props;
   const variantStyles = CheckboxVariants[props.variant || "default"]();
+  const componentConfig = useComponentConfig("checkbox");
   const [isHovered, setIsHovered] = useState(false);
 
+  const mergedStyles = mergeStyles(variantStyles, componentConfig?.styles);
+
   const state = calculateState(value, isDisabled, isHovered);
   const handlePress = () => {
     if (!isDisabled) {
@@ -38,16 +47,16 @@ export function CheckboxRoot(props: CheckboxRootProps) {
     }
   };
 
-  const calculatedStyle = [variantStyles.root?.default, variantStyles.root?.[state], style];
+  const calculatedStyle = [mergedStyles.root?.default, mergedStyles.root?.[state], style];
 
   const contextValue = React.useMemo(
     () => ({
       value,
       isDisabled,
       state,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
-    [value, isDisabled, state, variantStyles],
+    [value, isDisabled, state, mergedStyles],
   );
 
   return (

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

@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-} from "react-native";
+import { ScrollView, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import { useRelativePosition } from "../../../hooks/use-relative-position";
 import { useCombobox } from "../context";
 
@@ -34,11 +29,7 @@ export function ComboboxContent(props: ComboboxContentProps) {
 
   return (
     <ScrollView
-      style={[
-        positionStyle,
-        flatStyles,
-        { width: combobox.triggerPosition.width },
-      ]}
+      style={[positionStyle, flatStyles, { width: combobox.triggerPosition.width }]}
       onLayout={(e) => {
         combobox.setContentLayout(e.nativeEvent.layout);
       }}

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

@@ -43,8 +43,7 @@ export function ComboboxOption(props: ComboboxOptionProps) {
     <Component
       onPress={() => {
         const label =
-          props.label ??
-          (typeof props.children === "string" ? props.children : props.value);
+          props.label ?? (typeof props.children === "string" ? props.children : props.value);
         combobox.onChange?.(label);
         combobox.setIsOpen(false);
       }}

package/src/components/combobox/components/combobox-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 { useCombobox } from "../context";
 
 export interface ComboboxOverlayProps {

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

@@ -25,9 +25,7 @@ export function ComboboxPortal(props: ComboboxPortalProps) {
 
   return (
     <Portal name="combobox-portal">
-      <ComboboxContext.Provider value={combobox}>
-        {props.children}
-      </ComboboxContext.Provider>
+      <ComboboxContext.Provider value={combobox}>{props.children}</ComboboxContext.Provider>
     </Portal>
   );
 }

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

@@ -6,11 +6,9 @@ import {
   View,
   type ViewStyle,
 } from "react-native";
-import {
-  DEFAULT_LAYOUT,
-  DEFAULT_POSITION,
-  type LayoutPosition,
-} from "../../../hooks";
+import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "../../../hooks";
+import { useComponentConfig } from "../../../themes/provider";
+import { mergeStyles } from "../../../utils/calculate-styles";
 import { ComboboxContext } from "../context";
 import type { ComboboxState } from "../types";
 import { ComboboxVariants } from "../variants";
@@ -39,32 +37,31 @@ const calculateState = (props: ComboboxRootProps): ComboboxState => {
 
 export function ComboboxRoot(props: ComboboxRootProps) {
   const variantStyles = ComboboxVariants[props.variant ?? "default"]();
+  const globalStyles = useComponentConfig("combobox");
+  const mergedStyles = mergeStyles(variantStyles, globalStyles?.styles);
 
   const [isOpen, setIsOpen] = useState(false);
-  const [contentLayout, setContentLayout] =
-    useState<LayoutRectangle>(DEFAULT_LAYOUT);
-  const [triggerPosition, setTriggerPosition] =
-    useState<LayoutPosition>(DEFAULT_POSITION);
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
   const [inputValue, setInputValueInternal] = useState("");
 
   const onInputChangeRef = useRef(props.onInputChange);
   onInputChangeRef.current = props.onInputChange;
 
-  const setInputValue: React.Dispatch<React.SetStateAction<string>> =
-    useCallback((action) => {
-      setInputValueInternal((prev) => {
-        const next = typeof action === "function" ? action(prev) : action;
-        if (next !== prev) {
-          onInputChangeRef.current?.(next);
-        }
-        return next;
-      });
-    }, []);
+  const setInputValue: React.Dispatch<React.SetStateAction<string>> = useCallback((action) => {
+    setInputValueInternal((prev) => {
+      const next = typeof action === "function" ? action(prev) : action;
+      if (next !== prev) {
+        onInputChangeRef.current?.(next);
+      }
+      return next;
+    });
+  }, []);
 
   const state = calculateState(props);
   const composedStyles = StyleSheet.flatten([
-    variantStyles?.root?.default,
-    variantStyles?.root?.[state],
+    mergedStyles?.root?.default,
+    mergedStyles?.root?.[state],
     props.style,
   ]);
 
@@ -82,7 +79,7 @@ export function ComboboxRoot(props: ComboboxRootProps) {
       setInputValue,
       state,
       isDisabled: props.isDisabled ?? false,
-      styles: variantStyles,
+      styles: mergedStyles,
     }),
     [
       props.value,
@@ -94,7 +91,7 @@ export function ComboboxRoot(props: ComboboxRootProps) {
       setInputValue,
       state,
       props.isDisabled,
-      variantStyles,
+      mergedStyles,
     ],
   );
 

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

@@ -10,10 +10,7 @@ export interface ComboboxTriggerProps {
   placeholder?: string;
 }
 
-const calculateState = (
-  isDisabled: boolean,
-  isOpen: boolean,
-): ComboboxTriggerState => {
+const calculateState = (isDisabled: boolean, isOpen: boolean): ComboboxTriggerState => {
   if (isDisabled) return "disabled";
   if (isOpen) return "focused";
   return "default";
@@ -25,9 +22,7 @@ export function ComboboxTrigger(props: ComboboxTriggerProps) {
 
   const triggerState = calculateState(combobox.isDisabled, combobox.isOpen);
 
-  const displayValue = combobox.isOpen
-    ? combobox.inputValue
-    : combobox.value ?? "";
+  const displayValue = combobox.isOpen ? combobox.inputValue : (combobox.value ?? "");
 
   const open = () => {
     if (combobox.isDisabled) return;

package/src/components/combobox/context.ts

@@ -23,9 +23,7 @@ export interface ComboboxContext {
   styles: ComboboxStyles;
 }
 
-export const ComboboxContext = createContext<ComboboxContext | undefined>(
-  undefined,
-);
+export const ComboboxContext = createContext<ComboboxContext | undefined>(undefined);
 
 export const useCombobox = () => {
   const context = useContext(ComboboxContext);

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 & {