@korsolutions/ui 0.0.41 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,6 +36,7 @@
     }
   },
   "scripts": {
+    "dev": "nodemon",
     "prepare": "./scripts/build.sh",
     "ts-check": "tsc --noEmit"
   },
@@ -44,6 +45,7 @@
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
     "babel-plugin-module-resolver": "^5.0.2",
+    "nodemon": "^3.1.11",
     "react-native-builder-bob": "^0.40.17",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.9.3"

package/src/components/button/variants/default.tsx

@@ -32,7 +32,6 @@ export const useButtonVariantDefault = (): ButtonStyles => {
         default: {
           color: colors.primaryForeground,
           fontSize,
-          fontWeight: "bold",
           fontFamily,
         },
         disabled: {
@@ -53,6 +52,6 @@ export const useButtonVariantDefault = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
-    })
+    }),
   );
 };

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

@@ -30,9 +30,8 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       },
       label: {
         default: {
-          color: colors.foreground,
+          color: colors.secondaryForeground,
           fontSize,
-          fontWeight: "bold",
           fontFamily,
         },
         disabled: {
@@ -44,7 +43,7 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
       },
       spinner: {
         default: {
-          color: colors.primaryForeground,
+          color: colors.secondaryForeground,
         },
         disabled: {
           color: colors.mutedForeground,
@@ -53,6 +52,6 @@ export const useButtonVariantSecondary = (): ButtonStyles => {
           color: colors.mutedForeground,
         },
       },
-    })
+    }),
   );
 };

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

@@ -1,8 +1,9 @@
+import { Portal } from "@/primitives/portal";
+import { useSafeAreaInsets } from "@/safe-area";
 import React, { useSyncExternalStore } from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { ToastComponent } from "./toast";
 import { ToastVariants } from "./variants";
-import { Portal } from "@/primitives/portal";
 
 export const TOAST_PORTAL_NAME = "toast-portal";
 
@@ -76,12 +77,13 @@ export const ToastAPI = {
 
 export function ToastContainer() {
   const toasts = useSyncExternalStore(subscribe, getSnapshot);
+  const insets = useSafeAreaInsets();
 
   if (!toasts.length) return null;
 
   return (
     <Portal name={TOAST_PORTAL_NAME}>
-      <View style={s.wrapper}>
+      <View style={[s.wrapper, { top: insets.top + 24 }]}>
         {toasts.map((toast) => (
           <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
         ))}
@@ -95,7 +97,6 @@ const s = StyleSheet.create({
     width: "100%",
     alignItems: "center",
     position: "absolute",
-    top: 24,
     gap: 8,
   },
 });

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useWindowDimensions, type LayoutRectangle, type ScaledSize } from "react-native";
+import { useWindowDimensions, type DisplayMetrics, type LayoutRectangle } from "react-native";
 
 interface Insets {
   top?: number;
@@ -56,7 +56,7 @@ export interface LayoutPosition {
 }
 
 interface GetPositionArgs {
-  dimensions: ScaledSize;
+  dimensions: DisplayMetrics;
   avoidCollisions: boolean;
   triggerPosition: LayoutPosition;
   contentLayout: LayoutRectangle;
@@ -136,7 +136,7 @@ function getLeftPosition(
   alignOffset: number,
   insetLeft: number,
   insetRight: number,
-  dimensions: ScaledSize
+  dimensions: DisplayMetrics,
 ) {
   let left = 0;
   if (align === "start") {
@@ -183,6 +183,6 @@ function getContentStyle({
       alignOffset,
       insets,
       dimensions,
-    })
+    }),
   );
 }

package/src/index.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from "@/themes";
+import { SafeAreaProvider, type SafeAreaInsets } from "@/safe-area";
+import { ThemeProvider, type ThemeProviderProps } from "@/themes";
 import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-dialog";
 import { ToastContainer } from "./components/toast/toast-manager";
 import { PortalHost } from "./primitives/portal";
@@ -6,21 +7,27 @@ import { type PortalHostProps } from "./primitives/portal/portal.constants";
 
 export interface ProviderProps {
   children: React.ReactNode;
-
   portalContainer?: PortalHostProps["container"];
+  theme?: ThemeProviderProps["theme"];
+  safeAreaInsets?: SafeAreaInsets;
 }
 
-export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps) => {
+export const UniversalUIProvider = ({ children, portalContainer, theme, safeAreaInsets }: ProviderProps) => {
   return (
-    <ThemeProvider>
-      <ToastContainer />
-      {children}
-      <PortalHost container={portalContainer} />
-      <AsyncAlertDialogManager />
-    </ThemeProvider>
+    <SafeAreaProvider insets={safeAreaInsets}>
+      <ThemeProvider theme={theme}>
+        <ToastContainer />
+        {children}
+        <PortalHost container={portalContainer} />
+        <AsyncAlertDialogManager />
+      </ThemeProvider>
+    </SafeAreaProvider>
   );
 };
 
 export * from "./themes/adapters";
+export * from "./themes/default";
 export { useTheme } from "./themes/provider";
 export * from "./themes/types";
+
+export * from "./safe-area";

package/src/primitives/autocomplete/autocomplete-content.tsx

@@ -1,4 +1,5 @@
 import { useRelativePosition } from "@/hooks/use-relative-position";
+import { useSafeAreaInsets } from "@/safe-area";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
 import React from "react";
 import { ScrollView, type StyleProp, type ViewStyle } from "react-native";
@@ -12,6 +13,7 @@ export interface AutocompleteContentProps {
 export function AutocompleteContent(props: AutocompleteContentProps) {
   const autocomplete = useAutocomplete();
   const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "content", props.style);
+  const safeAreaInsets = useSafeAreaInsets();
 
   const positionStyle = useRelativePosition({
     align: "start",
@@ -21,16 +23,23 @@ export function AutocompleteContent(props: AutocompleteContentProps) {
     alignOffset: 0,
     side: "bottom",
     sideOffset: 0,
+    insets: safeAreaInsets,
   });
-
   return (
     <ScrollView
-      style={[positionStyle, composedStyles, { width: autocomplete.inputPosition.width }]}
       onLayout={(e) => {
         autocomplete.setContentLayout(e.nativeEvent.layout);
       }}
-      pointerEvents="box-none"
       keyboardShouldPersistTaps="handled"
+      style={[
+        positionStyle,
+        composedStyles,
+        {
+          display: autocomplete.isOpen ? "flex" : "none",
+          width: autocomplete.inputPosition.width,
+          pointerEvents: "box-none",
+        },
+      ]}
     >
       {props.children}
     </ScrollView>

package/src/primitives/autocomplete/autocomplete-input.tsx

@@ -1,5 +1,4 @@
 import type { TextInputRef } from "@/types/element.types";
-import { setInnerInputValue } from "@/utils/input-utils";
 import { measureLayoutPosition } from "@/utils/normalize-layout";
 import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
 import { StyleSheet, TextInput, type StyleProp, type TextInputProps, type TextStyle } from "react-native";
@@ -61,12 +60,7 @@ export const AutocompleteInput = forwardRef<TextInputRef, AutocompleteInputProps
 
   useImperativeHandle(ref, () => inputRef.current!);
   useEffect(() => {
-    autocomplete.setBlurInput(() => () => {
-      inputRef.current?.blur();
-    });
-    autocomplete.setInputDisplayValueSetter(() => (v: string) => {
-      setInnerInputValue(inputRef.current!, v);
-    });
+    autocomplete.setInputRef(inputRef.current);
   }, []);
 
   return (

package/src/primitives/autocomplete/autocomplete-option.tsx

@@ -1,4 +1,5 @@
 import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { setInnerInputValue } from "@/utils/input-utils";
 import { useEffect, useState } from "react";
 import { type StyleProp, Text, type TextStyle } from "react-native";
 import { useAutocomplete } from "./context";
@@ -34,6 +35,18 @@ export function AutocompleteOption(props: AutocompleteOptionProps) {
   const optionState = calculateState(autocomplete.state, isHovered, isSelected);
   const composedStyles = calculateComposedStyles(autocomplete.styles, optionState, "option", props.style);
 
+  const handlePress = () => {
+    autocomplete.onChange?.(props.value);
+    autocomplete.setInputValue?.("");
+    autocomplete.setIsOpen(false);
+    if (autocomplete.inputRef) {
+      setInnerInputValue(autocomplete.inputRef, props.children);
+      autocomplete.inputRef.blur();
+    } else {
+      console.warn("Input reference is not available");
+    }
+  };
+
   useEffect(() => {
     autocomplete.setOptions((prev) => {
       if (prev.find((option) => option.value === props.value)) {
@@ -41,16 +54,11 @@ export function AutocompleteOption(props: AutocompleteOptionProps) {
       }
       return [...prev, { value: props.value, label: props.children }];
     });
+    return () => {
+      autocomplete.setOptions((prev) => prev.filter((option) => option.value !== props.value));
+    };
   }, [props.value, props.children]);
 
-  const handlePress = () => {
-    autocomplete.onChange?.(props.value);
-    autocomplete.setInputValue?.("");
-    autocomplete.setInputDisplayValue(props.children);
-    autocomplete.setIsOpen(false);
-    autocomplete.blurInput();
-  };
-
   const Component = props.render ?? Text;
   return (
     <Component

package/src/primitives/autocomplete/autocomplete-overlay.tsx

@@ -7,7 +7,6 @@ export interface AutocompleteOverlayProps {
   children?: React.ReactNode;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  render?: (props: AutocompleteOverlayProps) => React.ReactElement;
 }
 
 export function AutocompleteOverlay(props: AutocompleteOverlayProps) {
@@ -15,15 +14,24 @@ export function AutocompleteOverlay(props: AutocompleteOverlayProps) {
 
   const composedStyles = calculateComposedStyles(autocomplete.styles, autocomplete.state, "overlay", props.style);
 
-  const Component = props.render ?? Pressable;
+  const handlePress = () => {
+    props.onPress?.();
+    autocomplete.setIsOpen(false);
+    autocomplete.inputRef?.blur();
+  };
+
   return (
-    <Component
-      onPress={() => {
-        autocomplete.setIsOpen(false);
-      }}
-      style={[StyleSheet.absoluteFill, composedStyles]}
+    <Pressable
+      onPress={handlePress}
+      style={[
+        StyleSheet.absoluteFill,
+        composedStyles,
+        {
+          display: autocomplete.isOpen ? "flex" : "none",
+        },
+      ]}
     >
       {props.children}
-    </Component>
+    </Pressable>
   );
 }

package/src/primitives/autocomplete/autocomplete-portal.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Portal } from "../portal";
-import { useAutocomplete, AutocompleteContext } from "./context";
+import { AutocompleteContext, useAutocomplete } from "./context";
 
 export interface AutocompletePortalProps {
   children?: React.ReactNode;
@@ -9,16 +9,6 @@ export interface AutocompletePortalProps {
 export function AutocompletePortal(props: AutocompletePortalProps) {
   const autocomplete = useAutocomplete();
 
-  useEffect(() => {
-    return () => {
-      autocomplete.setOptions([]);
-    };
-  }, []);
-
-  if (!autocomplete.isOpen) {
-    return null;
-  }
-
   return (
     <Portal name="autocomplete-portal">
       <AutocompleteContext.Provider value={autocomplete}>{props.children}</AutocompleteContext.Provider>

package/src/primitives/autocomplete/autocomplete-root.tsx

@@ -1,14 +1,12 @@
 import { DEFAULT_LAYOUT, DEFAULT_POSITION, type LayoutPosition } from "@/hooks";
+import type { TextInputRef } from "@/types/element.types";
 import { calculateComposedStyles } from "@/utils/calculate-styles";
+import { setInnerInputValue } from "@/utils/input-utils";
 import React, { useEffect, useMemo, useState } from "react";
 import { type LayoutRectangle, type StyleProp, View, type ViewStyle } from "react-native";
 import { AutocompleteContext } from "./context";
 import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
 
-interface AutocompleteRootInjectedProps {
-  style?: StyleProp<ViewStyle>;
-}
-
 export interface AutocompleteRootBaseProps {
   value?: string;
   onChange?: (value: string) => void;
@@ -21,7 +19,6 @@ export interface AutocompleteRootBaseProps {
 
 export interface AutocompleteRootProps extends AutocompleteRootBaseProps {
   children?: React.ReactNode;
-  render?: (props: AutocompleteRootInjectedProps) => React.ReactElement;
   styles?: AutocompleteStyles;
   style?: StyleProp<ViewStyle>;
 }
@@ -41,19 +38,21 @@ export function AutocompleteRoot(props: AutocompleteRootProps) {
   const [contentLayout, setContentLayout] = useState<LayoutRectangle>(DEFAULT_LAYOUT);
   const [inputPosition, setInputPosition] = useState<LayoutPosition>(DEFAULT_POSITION);
   const [options, setOptions] = useState<Array<AutocompleteOption>>([]);
-  const [blurInput, setBlurInput] = useState<() => void>(() => () => {});
-  const [setInputDisplayValue, setInputDisplayValueSetter] = useState<(value: string) => void>(() => () => {});
+  const [inputRef, setInputRef] = useState<TextInputRef | null>(null);
 
   useEffect(() => {
+    if (!inputRef) return;
     if (props.value) {
       const selectedOption = options.find((opt) => opt.value === props.value);
       if (selectedOption) {
         props.setInputValue?.(selectedOption.label);
+        setInnerInputValue(inputRef, selectedOption.label);
       }
     } else {
       props.setInputValue?.("");
+      setInnerInputValue(inputRef, "");
     }
-  }, [props.value, options]);
+  }, [props.value, options, inputRef]);
 
   const state = calculateState(props, isOpen);
   const composedStyles = calculateComposedStyles(props.styles, state, "root", props.style);
@@ -75,10 +74,8 @@ export function AutocompleteRoot(props: AutocompleteRootProps) {
         options,
         setOptions,
         openOnFocus: props.openOnFocus ?? true,
-        blurInput,
-        setBlurInput,
-        setInputDisplayValue,
-        setInputDisplayValueSetter,
+        inputRef,
+        setInputRef,
         state,
         isDisabled: props.isDisabled ?? false,
         styles: props.styles ?? null,
@@ -96,16 +93,13 @@ export function AutocompleteRoot(props: AutocompleteRootProps) {
       inputPosition,
       contentLayout,
       options,
-      blurInput,
-      setInputDisplayValue,
       state,
     ],
   );
 
-  const Component = props.render ?? View;
   return (
     <AutocompleteContext.Provider value={contextValue}>
-      <Component style={composedStyles}>{props.children}</Component>
+      <View style={composedStyles}>{props.children}</View>
     </AutocompleteContext.Provider>
   );
 }

package/src/primitives/autocomplete/context.ts

@@ -1,5 +1,6 @@
 import type { LayoutPosition } from "@/hooks";
-import { createContext, type Dispatch, useContext } from "react";
+import type { TextInputRef } from "@/types/element.types";
+import React, { createContext, type Dispatch, useContext } from "react";
 import type { LayoutRectangle } from "react-native";
 import type { AutocompleteOption, AutocompleteState, AutocompleteStyles } from "./types";
 
@@ -23,10 +24,8 @@ export interface AutocompleteContext {
 
   openOnFocus: boolean;
 
-  blurInput: () => void;
-  setBlurInput: Dispatch<React.SetStateAction<() => void>>;
-  setInputDisplayValueSetter: Dispatch<React.SetStateAction<(value: string) => void>>;
-  setInputDisplayValue: (value: string) => void;
+  inputRef: TextInputRef | null;
+  setInputRef: Dispatch<React.SetStateAction<TextInputRef | null>>;
 
   isDisabled: boolean;
 

package/src/primitives/avatar/avatar-fallback.tsx

@@ -1,16 +1,14 @@
 import React from "react";
-import { type StyleProp, type TextStyle, View } from "react-native";
+import { Text, type StyleProp, type TextStyle } from "react-native";
 import { useAvatar } from "./context";
 
 export interface AvatarFallbackProps {
   children: string;
-  render?: (props: AvatarFallbackProps) => React.ReactNode;
   style?: StyleProp<TextStyle>;
 }
 
 export function AvatarFallback(props: AvatarFallbackProps) {
   const avatar = useAvatar();
   const composedStyles = [avatar.styles?.fallback, props.style];
-  const Component = props.render ?? View;
-  return <Component {...props} style={composedStyles} />;
+  return <Text {...props} style={composedStyles} />;
 }

package/src/primitives/calendar/calendar-day.tsx

@@ -17,7 +17,7 @@ const calculateState = (
   selected: Date | null | undefined,
   isCurrentMonth: boolean,
   isDisabled: boolean,
-  isHovered: boolean
+  isHovered: boolean,
 ): CalendarDayState => {
   if (isDisabled) return "disabled";
   if (selected && isDateSameDay(date, selected)) return "selected";
@@ -42,7 +42,6 @@ export function CalendarDay(props: CalendarDayProps) {
   const state = calculateState(props.date, calendar.value, isCurrentMonth, isDisabled, isHovered);
 
   const handlePress = () => {
-    console.log("Day pressed:", isDisabled, calendar.onChange);
     if (isDisabled || !calendar.onChange) return;
     calendar.onChange(props.date);
   };

package/src/primitives/popover/popover-content.tsx

@@ -1,4 +1,5 @@
 import { useRelativePosition } from "@/hooks/use-relative-position";
+import { useSafeAreaInsets } from "@/safe-area";
 import React from "react";
 import { type StyleProp, View, type ViewStyle } from "react-native";
 import { usePopover } from "./context";
@@ -13,6 +14,7 @@ export interface PopoverContentProps {
 
 export function PopoverContent(props: PopoverContentProps) {
   const popover = usePopover();
+  const insets = useSafeAreaInsets();
 
   const positionStyle = useRelativePosition({
     align: "start",
@@ -22,6 +24,7 @@ export function PopoverContent(props: PopoverContentProps) {
     alignOffset: 0,
     side: "bottom",
     sideOffset: 0,
+    insets,
   });
 
   const composedStyle = [positionStyle, popover.styles?.content, props.style];

package/src/safe-area/context.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+import type { SafeAreaContextValue } from "./types";
+
+const SafeAreaContext = createContext<SafeAreaContextValue | null>(null);
+
+export const useSafeAreaInsets = () => {
+  const context = useContext(SafeAreaContext);
+  if (!context) {
+    throw new Error("useSafeAreaInsets must be used within SafeAreaProvider");
+  }
+  return context.insets;
+};
+
+export { SafeAreaContext };

package/src/safe-area/index.ts

@@ -0,0 +1,3 @@
+export { SafeAreaProvider } from "./provider";
+export { useSafeAreaInsets } from "./context";
+export type { SafeAreaInsets, SafeAreaContextValue } from "./types";

package/src/safe-area/provider.tsx

@@ -0,0 +1,28 @@
+import { type PropsWithChildren } from "react";
+import { SafeAreaContext } from "./context";
+import type { SafeAreaInsets } from "./types";
+
+export interface SafeAreaProviderProps extends PropsWithChildren {
+  insets?: SafeAreaInsets;
+}
+
+export const SafeAreaProvider = ({ children, insets }: SafeAreaProviderProps) => {
+  const defaultInsets: SafeAreaInsets = {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  };
+
+  const calculatedInsets: SafeAreaInsets = { ...defaultInsets, ...insets };
+
+  return (
+    <SafeAreaContext.Provider
+      value={{
+        insets: calculatedInsets,
+      }}
+    >
+      {children}
+    </SafeAreaContext.Provider>
+  );
+};

package/src/safe-area/types.ts

@@ -0,0 +1,10 @@
+export interface SafeAreaInsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+export interface SafeAreaContextValue {
+  insets: SafeAreaInsets;
+}

package/src/themes/adapters/react-navigation.ts

@@ -1,7 +1,7 @@
-import { useEffect } from "react";
 import type { Theme } from "@react-navigation/native";
-import { useTheme } from "../provider";
+import { useEffect } from "react";
 import { Platform } from "react-native";
+import { useTheme } from "../provider";
 
 export function useReactNavigationTheme(): Theme {
   const theme = useTheme();
@@ -13,13 +13,14 @@ export function useReactNavigationTheme(): Theme {
     styles.innerHTML = `
       :root {
         --expo-router-modal-border: 1px solid ${theme.colors.border};
+        --expo-router-modal-border-radius: ${theme.radius}px;
       }
     `;
     document.head.appendChild(styles);
     return () => {
       document.head.removeChild(styles);
     };
-  }, [theme.colors.border]);
+  }, [theme.colors.border, theme.radius]);
 
   return {
     dark: theme.colorScheme === "dark",