@korsolutions/ui 0.0.62 → 0.0.64

package/src/components/badge/context.ts

@@ -1,8 +1,7 @@
 import { createContext, useContext } from "react";
-import type { BadgeState, BadgeStyles } from "./types";
+import type { BadgeStyles } from "./types";
 
 export interface BadgeContext {
-  state: BadgeState;
   styles?: BadgeStyles;
 }
 

package/src/components/badge/index.ts

@@ -1,11 +1,2 @@
-import { BadgeLabel } from "./components/badge-label";
-import { BadgeRoot } from "./components/badge-root";
-
-export const Badge = {
-  Root: BadgeRoot,
-  Label: BadgeLabel,
-};
-
-export type { BadgeLabelProps } from "./components/badge-label";
-export type { BadgeRootProps } from "./components/badge-root";
+export { Badge, type BadgeProps } from "./badge";
 export type { BadgeStyles } from "./types";

package/src/components/badge/types.ts

@@ -1,9 +1,9 @@
-import type { BadgeLabelProps } from "./components/badge-label";
-import type { BadgeRootProps } from "./components/badge-root";
-
-export type BadgeState = "default";
+import type { TextStyle } from "react-native";
+import type { IconProps } from "../icon";
+import type { BadgeProps } from "./badge";
 
 export interface BadgeStyles {
-  root?: Partial<Record<BadgeState, BadgeRootProps["style"]>>;
-  label?: Partial<Record<BadgeState, BadgeLabelProps["style"]>>;
+  root?: BadgeProps["style"];
+  text?: TextStyle;
+  icon?: IconProps;
 }

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

@@ -5,21 +5,24 @@ export const useBadgeVariantDefault = (): BadgeStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): BadgeStyles => ({
       root: {
-        default: {
-          backgroundColor: colors.primary,
-          paddingVertical: 4,
-          paddingHorizontal: 8,
-          borderRadius: radius,
-          alignSelf: "flex-start",
-        },
+        flexDirection: "row",
+        gap: 4,
+        alignItems: "center",
+        alignSelf: "flex-start",
+        backgroundColor: colors.primary,
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: radius,
       },
-      label: {
-        default: {
-          color: colors.primaryForeground,
-          fontSize: fontSize * 0.75,
-          fontWeight: "600",
-          fontFamily,
-        },
+      text: {
+        color: colors.primaryForeground,
+        fontSize: fontSize * 0.75,
+        fontWeight: "600",
+        fontFamily,
+      },
+      icon: {
+        color: colors.primaryForeground,
+        size: fontSize * 0.75,
       },
     }),
   );

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

@@ -5,21 +5,24 @@ export const useBadgeVariantSecondary = (): BadgeStyles => {
   return useThemedStyles(
     ({ colors, radius, fontFamily, fontSize }): BadgeStyles => ({
       root: {
-        default: {
-          backgroundColor: colors.secondary,
-          paddingVertical: 4,
-          paddingHorizontal: 8,
-          borderRadius: radius,
-          alignSelf: "flex-start",
-        },
+        flexDirection: "row",
+        gap: 4,
+        alignItems: "center",
+        alignSelf: "flex-start",
+        backgroundColor: colors.secondary,
+        paddingVertical: 4,
+        paddingHorizontal: 8,
+        borderRadius: radius,
       },
-      label: {
-        default: {
-          color: colors.secondaryForeground,
-          fontSize: fontSize * 0.75,
-          fontWeight: "600",
-          fontFamily,
-        },
+      text: {
+        color: colors.secondaryForeground,
+        fontSize: fontSize * 0.75,
+        fontWeight: "600",
+        fontFamily,
+      },
+      icon: {
+        color: colors.secondaryForeground,
+        size: fontSize * 0.75,
       },
     }),
   );

package/src/components/input/input.tsx

@@ -1,6 +1,6 @@
-import type { TextInputRef } from "../../types/element.types";
 import { forwardRef, useState } from "react";
 import { StyleSheet, TextInput, type TextInputProps } from "react-native";
+import type { TextInputRef } from "../../types/element.types";
 import { useFieldOptional } from "../field/context";
 import type { InputState } from "./types";
 import { InputVariants } from "./variants";
@@ -29,7 +29,11 @@ export const Input = forwardRef<TextInputRef, InputProps>((props, ref) => {
   const state = calculateState(props, isFocused);
   const field = useFieldOptional();
 
-  const composedStyles = StyleSheet.flatten([variantStyles.default?.style, variantStyles[state]?.style, props.style]);
+  const composedStyles = StyleSheet.flatten([
+    variantStyles.default?.style,
+    variantStyles[state]?.style,
+    props.style,
+  ]);
   const composedProps = {
     ...variantStyles.default,
     ...variantStyles[state],

package/src/components/menu/components/menu-checkbox-item.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Pressable, type StyleProp, type ViewStyle } from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
 import { useMenu } from "../context";
 import type { MenuCheckboxItemState } from "../types";
-import { useOrganizedChildren } from "../use-organized-children";
 import { MenuSelectionIndicator } from "./menu-selection-indicator";
 
 export interface MenuCheckboxItemProps {
@@ -43,7 +43,14 @@ export function MenuCheckboxItem(props: MenuCheckboxItemProps) {
     }
   };
 
-  const organizedChildren = useOrganizedChildren(props.children);
+  const textStyles = menu.styles?.itemText;
+  const iconStyles = menu.styles?.itemIcon;
+
+  const organizedChildren = useOrganizedChildren(
+    props.children,
+    textStyles,
+    iconStyles,
+  );
 
   if (props.render) {
     return (

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

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Pressable, type StyleProp, type ViewStyle } from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
 import { useMenu } from "../context";
 import type { MenuButtonState } from "../types";
-import { useOrganizedChildren } from "../use-organized-children";
 
 export interface MenuItemProps {
   children: React.ReactNode;
@@ -34,7 +34,14 @@ export function MenuItem(props: MenuItemProps) {
     menu.setIsOpen((prev) => !prev);
   };
 
-  const organizedChildren = useOrganizedChildren(props.children);
+  const textStyles = menu.styles?.itemText;
+  const iconStyles = menu.styles?.itemIcon;
+
+  const organizedChildren = useOrganizedChildren(
+    props.children,
+    textStyles,
+    iconStyles,
+  );
 
   if (props.render) {
     return (

package/src/components/menu/components/menu-radio-item.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Pressable, type StyleProp, type ViewStyle } from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
 import { useMenu, useMenuRadioGroup } from "../context";
 import type { MenuRadioItemState } from "../types";
-import { useOrganizedChildren } from "../use-organized-children";
 import { MenuSelectionIndicator } from "./menu-selection-indicator";
 
 export interface MenuRadioItemProps {
@@ -46,7 +46,14 @@ export function MenuRadioItem(props: MenuRadioItemProps) {
     }
   };
 
-  const organizedChildren = useOrganizedChildren(props.children);
+  const textStyles = menu.styles?.itemText;
+  const iconStyles = menu.styles?.itemIcon;
+
+  const organizedChildren = useOrganizedChildren(
+    props.children,
+    textStyles,
+    iconStyles,
+  );
 
   if (props.render) {
     return (

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

@@ -31,13 +31,8 @@ export const MenuTrigger = forwardRef<MenuTriggerRef, MenuTriggerProps>(
 
     useImperativeHandle(ref, () => ({
       open: () => {
-        triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-          menu.setTriggerPosition({
-            height,
-            width,
-            pageX,
-            pageY,
-          });
+        measureLayoutPosition(triggerRef.current, (layout) => {
+          menu.setTriggerPosition(layout);
           menu.setIsOpen(true);
         });
       },

package/src/components/menu/types.ts

@@ -1,5 +1,6 @@
 import type { StyleProp, TextStyle, ViewStyle } from "react-native";
 import type { SvgProps } from "../../types/props.types";
+import type { IconProps } from "../icon";
 import type { MenuContentProps } from "./components/menu-content";
 import type { MenuOverlayProps } from "./components/menu-overlay";
 
@@ -15,7 +16,7 @@ export interface MenuStyles {
   content?: MenuContentProps["style"];
   item?: Partial<Record<MenuButtonState, StyleProp<ViewStyle>>>;
   itemText?: StyleProp<TextStyle>;
-  itemIcon?: SvgProps;
+  itemIcon?: IconProps;
   overlay?: MenuOverlayProps["style"];
 
   group?: StyleProp<ViewStyle>;

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

@@ -1,7 +1,7 @@
-import type { ViewRef } from "../../../types/element.types";
-import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { type PressableProps } from "react-native";
+import type { ViewRef } from "../../../types/element.types";
+import { measureLayoutPosition } from "../../../utils/normalize-layout";
 import { usePopover } from "../context";
 
 export interface PopoverTriggerProps extends PressableProps {
@@ -13,7 +13,10 @@ 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);
 
@@ -30,13 +33,8 @@ export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>
 
   useImperativeHandle(ref, () => ({
     open: () => {
-      triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
-        popover.setTriggerPosition({
-          height,
-          width,
-          pageX,
-          pageY,
-        });
+      measureLayoutPosition(triggerRef.current, (layout) => {
+        popover.setTriggerPosition(layout);
         popover.setIsOpen(true);
       });
     },

package/src/components/portal/portal.tsx

@@ -7,6 +7,7 @@ import React, {
   useSyncExternalStore,
 } from "react";
 import { Platform, View, type HostInstance } from "react-native";
+import { measureLayoutPosition } from "../../utils/normalize-layout";
 import { PortalOffsetContext, type PortalOffset } from "./portal-offset";
 import {
   DEFAULT_PORTAL_HOST,
@@ -72,10 +73,10 @@ function DefaultContainer(props: React.PropsWithChildren) {
   const [offset, setOffset] = useState<PortalOffset | null>(null);
 
   const onLayout = useCallback(() => {
-    containerRef.current?.measureInWindow((pageX: number, pageY: number) => {
+    measureLayoutPosition(containerRef.current, (layout) => {
       setOffset((prev) => {
-        if (prev?.x === pageX && prev?.y === pageY) return prev;
-        return { x: pageX, y: pageY };
+        if (prev?.x === layout.pageX && prev?.y === layout.pageY) return prev;
+        return { x: layout.pageX, y: layout.pageY };
       });
     });
   }, []);

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

@@ -24,6 +24,7 @@ export function SelectOverlay(props: SelectOverlayProps) {
       onPress={() => {
         select.setIsOpen(false);
       }}
+      pointerEvents="auto"
       style={[StyleSheet.absoluteFill, composedStyles]}
     >
       {props.children}

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

@@ -44,7 +44,9 @@ export function useSelectVariantDefault(): SelectStyles {
         },
       },
       overlay: {
-        default: {},
+        default: {
+          zIndex: 999,
+        },
         disabled: {},
       },
       content: {
@@ -55,6 +57,7 @@ export function useSelectVariantDefault(): SelectStyles {
           borderColor: colors.border,
           padding: 4,
           gap: 4,
+          zIndex: 1000,
         },
         disabled: {},
       },

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

@@ -6,9 +6,9 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
+import { useOrganizedChildren } from "../../../hooks/use-organized-children";
 import { useTabsContext } from "../context";
 import type { TabsItemState } from "../types";
-import { useOrganizedChildren } from "../use-organized-children";
 
 export interface TabsItemProps extends PressableProps {
   children: React.ReactNode;

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

@@ -10,7 +10,7 @@ export type ToastIconProps = SvgProps;
 export function ToastIcon({
   render: Component,
   ...props
-}: PropsWithRequiredRender<ToastIconProps>) {
+}: PropsWithRequiredRender<SvgProps>) {
   const toast = useToast();
 
   const composedProps = {

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

@@ -0,0 +1,56 @@
+import { useEffect, useMemo } from "react";
+
+type NavigationContainerRef =
+  import("@react-navigation/native").NavigationContainerRefWithCurrent<ReactNavigation.RootParamList>;
+
+let useCachedNavigationContainerRef: (() => NavigationContainerRef) | null =
+  null;
+
+export function useInitializeNavigationContainerRef() {
+  useEffect(() => {
+    try {
+      const expoRouter = require("expo-router");
+      if (expoRouter) {
+        useCachedNavigationContainerRef = expoRouter.useNavigationContainerRef;
+        return;
+      }
+      const reactNavigation = require("@react-navigation/native");
+      if (reactNavigation) {
+        useCachedNavigationContainerRef =
+          reactNavigation.useNavigationContainerRef;
+      }
+    } catch (error) {
+      console.warn(
+        "[useIsReactNavigationModal] Failed to load navigation ref:",
+        error,
+      );
+    }
+  }, []);
+}
+
+const getIsModal = () => {
+  const useNavigationContainerRef = useCachedNavigationContainerRef;
+
+  if (!useNavigationContainerRef) {
+    return false;
+  }
+
+  const navigationRef = useNavigationContainerRef();
+  if (!navigationRef) {
+    return false;
+  }
+  const state = navigationRef.getCurrentOptions();
+  if (
+    state &&
+    "presentation" in state &&
+    typeof state.presentation === "string"
+  ) {
+    return state.presentation === "modal";
+  }
+  return false;
+};
+
+export function useIsReactNavigationModal() {
+  const isModal = useMemo(getIsModal, []);
+  return isModal;
+}

package/src/{components/tabs → hooks}/use-organized-children.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from "react";
 import { Text, type StyleProp, type TextStyle } from "react-native";
-import { getElementProp } from "../../utils/element-utils";
-import { Icon, type IconProps } from "../icon";
+import { Icon, type IconProps } from "../components/icon";
+import { getElementProp } from "../utils/element-utils";
 
 export function useOrganizedChildren(
   children: React.ReactNode,
   textStyle: StyleProp<TextStyle> | undefined,
   iconProps: IconProps | undefined,
-) {
+): React.ReactNode {
   const organizedChildren = useMemo(() => {
     if (typeof children === "string") {
       return <Text style={textStyle}>{children}</Text>;

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

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import {
+  Platform,
   useWindowDimensions,
   type DisplayMetrics,
   type LayoutRectangle,
@@ -7,12 +8,17 @@ import {
 } from "react-native";
 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 GetContentStyleArgs = GetPositionArgs &
+  GetSidePositionArgs &
+  GetAlignPositionArgs;
+
 export function useRelativePosition({
   align,
   triggerPosition,
@@ -25,6 +31,8 @@ export function useRelativePosition({
   const insets = useSafeAreaInsets();
   const portalOffset = usePortalOffset();
 
+  const isReactNavigationModal = useIsReactNavigationModal();
+
   return useMemo(() => {
     const hasLayout =
       triggerPosition.width > 0 &&
@@ -53,7 +61,7 @@ export function useRelativePosition({
       pageY: triggerPosition.pageY - portalOffset.value.y,
     };
 
-    const style = getContentStyle({
+    const args: GetContentStyleArgs = {
       align,
       contentLayout,
       preferredSide,
@@ -62,7 +70,23 @@ export function useRelativePosition({
       insets,
       sideOffset,
       dimensions,
-    });
+    };
+
+    const sidePosition = getSidePosition(args);
+    const alignPosition = getAlignPosition(args);
+
+    const style: ViewStyle = {
+      position: "absolute",
+      ...sidePosition,
+      ...alignPosition,
+      // 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,
+      }),
+    };
 
     return style;
   }, [
@@ -76,6 +100,7 @@ export function useRelativePosition({
     dimensions.height,
     sideOffset,
     portalOffset,
+    isReactNavigationModal,
   ]);
 }
 
@@ -181,11 +206,13 @@ function getSidePosition({
     };
   }
 
+  let top = Math.min(
+    dimensions.height - insets.bottom - contentLayout.height,
+    positionBottom,
+  );
+
   return {
-    top: Math.min(
-      dimensions.height - insets.bottom - contentLayout.height,
-      positionBottom,
-    ),
+    top,
   };
 }
 
@@ -265,15 +292,3 @@ function getLeftPosition(
     ),
   );
 }
-
-type GetContentStyleArgs = GetPositionArgs &
-  GetSidePositionArgs &
-  GetAlignPositionArgs;
-
-function getContentStyle(args: GetContentStyleArgs): ViewStyle {
-  return {
-    position: "absolute",
-    ...getSidePosition(args),
-    ...getAlignPosition(args),
-  };
-}

package/src/index.tsx

@@ -2,6 +2,7 @@ import { AsyncAlertDialogManager } from "./components/alert-dialog/async-alert-d
 import { PortalHost } from "./components/portal";
 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,
@@ -24,6 +25,9 @@ export const UIProvider = ({
   safeAreaInsets,
   components,
 }: ProviderProps) => {
+  // Temporary fix to calculate portal content relative position correctly when rendered in a React Navigation modal.
+  useInitializeNavigationContainerRef();
+
   return (
     <SafeAreaProvider insets={safeAreaInsets}>
       <ThemeProvider theme={theme} components={components}>

package/src/themes/provider.tsx

@@ -7,7 +7,7 @@ import {
 } from "react";
 import { useColorScheme } from "react-native";
 import type { ToastVariants } from "../components/toast/variants";
-import type { IconComponent } from "../types/element.types";
+import type { SvgProps } from "../types/props.types";
 import type { DeepPartial } from "../types/util.types";
 import { defaultThemeAssets } from "./default";
 import type {
@@ -34,10 +34,12 @@ interface ThemeContext {
 
 export interface ComponentsConfig {
   toast?: {
-    icons?: Partial<Record<keyof typeof ToastVariants, IconComponent>>;
+    icons?: Partial<
+      Record<keyof typeof ToastVariants, React.ComponentType<SvgProps>>
+    >;
   };
   menu?: {
-    selectionIcon?: IconComponent;
+    selectionIcon?: React.ComponentType<SvgProps>;
   };
 }
 

package/src/types/props.types.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import type { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
 
 export type PropsWithRender<P> = P & {
@@ -5,7 +6,7 @@ export type PropsWithRender<P> = P & {
 };
 
 export type PropsWithRequiredRender<P> = P & {
-  render: (props: P) => React.ReactNode;
+  render: React.ComponentType<P>;
 };
 
 export type SvgProps = {

package/src/utils/normalize-layout.ts

@@ -25,6 +25,16 @@ export const measureLayoutPosition = (
   ref: HostInstance | null,
   callback: (layout: LayoutPosition) => void,
 ) => {
+  if (ref && "getBoundingClientRect" in ref) {
+    const rect = (ref as unknown as { getBoundingClientRect: () => DOMRect }).getBoundingClientRect();
+    callback({
+      height: isValidNumber(rect.height) ? rect.height : 0,
+      width: isValidNumber(rect.width) ? rect.width : 0,
+      pageX: isValidNumber(rect.x) ? rect.x : 0,
+      pageY: isValidNumber(rect.y) ? rect.y : 0,
+    });
+    return;
+  }
   ref?.measureInWindow((pageX, pageY, width, height) => {
     callback({
       height: isValidNumber(height) ? height : 0,

package/dist/module/components/badge/components/badge-label.js

@@ -1,17 +0,0 @@
-"use strict";
-
-import { calculateComposedStyles } from "../../../utils/calculate-styles.js";
-import React from "react";
-import { Text } from "react-native";
-import { useBadge } from "../context.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function BadgeLabel(props) {
-  const badge = useBadge();
-  const composedStyle = calculateComposedStyles(badge.styles, badge.state, "label", props.style);
-  const Component = props.render ?? Text;
-  return /*#__PURE__*/_jsx(Component, {
-    ...props,
-    style: composedStyle
-  });
-}
-//# sourceMappingURL=badge-label.js.map

package/dist/module/components/badge/components/badge-label.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["calculateComposedStyles","React","Text","useBadge","jsx","_jsx","BadgeLabel","props","badge","composedStyle","styles","state","style","Component","render"],"sourceRoot":"../../../../../src","sources":["components/badge/components/badge-label.tsx"],"mappings":";;AAAA,SAASA,uBAAuB,QAAQ,oCAAiC;AACzE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAAyBC,IAAI,QAAwB,cAAc;AACnE,SAASC,QAAQ,QAAQ,eAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUtC,OAAO,SAASC,UAAUA,CAACC,KAAsB,EAAE;EACjD,MAAMC,KAAK,GAAGL,QAAQ,CAAC,CAAC;EAExB,MAAMM,aAAa,GAAGT,uBAAuB,CAACQ,KAAK,CAACE,MAAM,EAAEF,KAAK,CAACG,KAAK,EAAE,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;EAE9F,MAAMC,SAAS,GAAGN,KAAK,CAACO,MAAM,IAAIZ,IAAI;EACtC,oBAAOG,IAAA,CAACQ,SAAS;IAAA,GAAKN,KAAK;IAAEK,KAAK,EAAEH;EAAc,CAAE,CAAC;AACvD","ignoreList":[]}