@korsolutions/ui 0.0.25 → 0.0.27

package/dist/components/index.d.mts

@@ -1,6 +1,7 @@
-import { Et as InputStyles, K as AvatarStyles, L as BadgeStyles, M as TextareaPrimitiveBaseProps, P as TextareaStyles, T as DropdownMenuStyles, V as ToastStyles, Z as EmptyStyles, _ as PopoverStyles, a as CalendarStyles, ft as SelectStyles, kt as FieldStyles, r as CalendarRootProps, rt as CardStyles, ut as SelectRootBaseProps, wt as InputPrimitiveBaseProps, x as PopoverTriggerRef, xt as ButtonStyles, yt as ButtonPrimitiveRootProps } from "../index-DLFYQx-P.mjs";
+import { $ as EmptyStyles, C as PopoverTriggerRef, Ct as ButtonStyles, D as DropdownMenuStyles, Et as InputPrimitiveBaseProps, I as TextareaStyles, J as AvatarStyles, Ot as InputStyles, P as TextareaPrimitiveBaseProps, U as ToastStyles, a as CalendarStyles, at as CardStyles, ft as SelectRootBaseProps, jt as FieldStyles, mt as SelectStyles, r as CalendarRootProps, xt as ButtonPrimitiveRootProps, y as PopoverStyles, z as BadgeStyles } from "../index-_EJRToiG.mjs";
 import "../use-relative-position-DBzhrBU7.mjs";
-import { t as NumericMaskFormat } from "../use-numeric-mask-B9WZG25o.mjs";
+import "../portal.constants-ClRV24_C.mjs";
+import { t as NumericMaskFormat } from "../use-numeric-mask-D4zqPOnE.mjs";
 import React from "react";
 import { ImageSource, PressableProps, TextProps, TextStyle } from "react-native";
 

package/dist/components/index.mjs

@@ -1,5 +1,5 @@
-import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-BCt2uAJl.mjs";
-import { a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-1609Y7eP.mjs";
+import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-B5sELMqc.mjs";
+import { a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-8eataXpJ.mjs";
 import "../use-relative-position-BTKEyT1F.mjs";
 import { t as useNumericMask } from "../use-numeric-mask-BQlz1Pus.mjs";
 import React, { forwardRef, useEffect, useState } from "react";
@@ -777,7 +777,10 @@ function DropdownMenu(props) {
 //#region src/components/popover/variants/default.tsx
 const usePopoverVariantDefault = () => {
 	return useThemedStyles(({ colors, radius }) => ({
-		overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
+		overlay: {
+			backgroundColor: "rgba(0, 0, 0, 0.5)",
+			zIndex: 999
+		},
 		content: {
 			backgroundColor: colors.surface,
 			borderRadius: radius,

package/dist/hooks/index.d.mts

@@ -1,5 +1,5 @@
 import { i as useRelativePosition, n as DEFAULT_POSITION, r as LayoutPosition, t as DEFAULT_LAYOUT } from "../use-relative-position-DBzhrBU7.mjs";
-import { i as useNumericMask, n as UseNumericMaskOptions, r as UseNumericMaskReturn, t as NumericMaskFormat } from "../use-numeric-mask-B9WZG25o.mjs";
+import { i as useNumericMask, n as UseNumericMaskOptions, r as UseNumericMaskReturn, t as NumericMaskFormat } from "../use-numeric-mask-D4zqPOnE.mjs";
 
 //#region src/hooks/use-screen-size.d.ts
 type ScreenSize = "mobile" | "tablet" | "desktop";

package/dist/{index-DLFYQx-P.d.mts → index-_EJRToiG.d.mts}

@@ -1,5 +1,6 @@
 import { r as LayoutPosition } from "./use-relative-position-DBzhrBU7.mjs";
-import * as react7 from "react";
+import { n as PortalHostProps, r as PortalProps } from "./portal.constants-ClRV24_C.mjs";
+import * as react10 from "react";
 import React$1, { Dispatch, RefAttributes } from "react";
 import { ImageSource, ImageStyle, LayoutRectangle, PressableProps, StyleProp, TextInput, TextInputProps, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
 
@@ -67,7 +68,7 @@ interface InputPrimitiveProps extends InputPrimitiveBaseProps {
   render?: (props: InputPrimitiveProps) => React.ReactNode;
   styles?: InputStyles;
 }
-declare const InputPrimitive: react7.ForwardRefExoticComponent<Omit<InputPrimitiveProps, "ref"> & react7.RefAttributes<TextInput>>;
+declare const InputPrimitive: react10.ForwardRefExoticComponent<Omit<InputPrimitiveProps, "ref"> & react10.RefAttributes<TextInput>>;
 //#endregion
 //#region src/primitives/button/button-label.d.ts
 interface ButtonPrimitiveLabelProps {
@@ -153,7 +154,7 @@ interface SelectOptionProps {
   render?: (props: SelectOptionProps) => React.ReactElement;
   style?: StyleProp<TextStyle>;
 }
-declare function SelectOption(props: SelectOptionProps): react7.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react10.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";
@@ -434,7 +435,7 @@ interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
   render?: (props: TextareaPrimitiveProps) => React.ReactNode;
   styles?: TextareaStyles;
 }
-declare function TextareaPrimitive(props: TextareaPrimitiveProps): react7.JSX.Element;
+declare function TextareaPrimitive(props: TextareaPrimitiveProps): react10.JSX.Element;
 //#endregion
 //#region src/primitives/dropdown-menu/dropdown-menu-trigger.d.ts
 interface DropdownMenuTriggerProps extends PressableProps {
@@ -505,7 +506,7 @@ declare function DropdownMenuPortal(props: DropdownMenuPortalProps): React$1.JSX
 //#region src/primitives/dropdown-menu/index.d.ts
 declare const DropdownMenuPrimitive: {
   Root: typeof DropdownMenuRoot;
-  Trigger: react7.ForwardRefExoticComponent<DropdownMenuTriggerProps & react7.RefAttributes<DropdownMenuTriggerRef>>;
+  Trigger: react10.ForwardRefExoticComponent<DropdownMenuTriggerProps & react10.RefAttributes<DropdownMenuTriggerRef>>;
   Portal: typeof DropdownMenuPortal;
   Overlay: typeof DropdownMenuOverlay;
   Content: typeof DropdownMenuContent;
@@ -579,19 +580,32 @@ interface PopoverContext {
   setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
   styles?: PopoverStyles;
 }
-declare const PopoverContext: react7.Context<PopoverContext | undefined>;
+declare const PopoverContext: react10.Context<PopoverContext | undefined>;
 declare const usePopover: () => PopoverContext;
 //#endregion
 //#region src/primitives/popover/index.d.ts
 declare const PopoverPrimitive: {
   Root: typeof PopoverRoot;
-  Trigger: react7.ForwardRefExoticComponent<PopoverTriggerProps & react7.RefAttributes<PopoverTriggerRef>>;
+  Trigger: react10.ForwardRefExoticComponent<PopoverTriggerProps & react10.RefAttributes<PopoverTriggerRef>>;
   Portal: typeof PopoverPortal;
   Overlay: typeof PopoverOverlay;
   Content: typeof PopoverContent;
   Close: typeof PopoverClose;
 };
 //#endregion
+//#region src/primitives/portal/portal.d.ts
+declare function NativePortalHost({
+  name,
+  container
+}: PortalHostProps): react10.JSX.Element | null;
+declare const PortalHost: typeof NativePortalHost;
+declare function NativePortal({
+  name,
+  hostName,
+  children
+}: PortalProps): react10.JSX.Element;
+declare const Portal: typeof NativePortal;
+//#endregion
 //#region src/primitives/calendar/calendar-weeks.d.ts
 interface CalendarWeekProps extends ViewProps {
   index: number;
@@ -687,4 +701,4 @@ declare const CalendarPrimitive: {
   Day: typeof CalendarDay;
 };
 //#endregion
-export { EmptyMediaProps as $, DropdownMenuTriggerProps as A, FieldErrorProps as At, ToastRootProps as B, DropdownMenuPortalProps as C, InputPrimitive as Ct, DropdownMenuDividerProps as D, FieldPrimitive as Dt, DropdownMenuOverlayProps as E, InputStyles as Et, BadgePrimitive as F, AvatarRootProps as G, ToastDescriptionProps as H, BadgeRootProps as I, AvatarFallbackProps as J, AvatarStyles as K, BadgeStyles as L, TextareaPrimitiveBaseProps as M, FieldLabelProps as Mt, TextareaPrimitiveProps as N, DropdownMenuButtonProps as O, FieldPrimitiveRootProps as Ot, TextareaStyles as P, EmptyTitleProps as Q, BadgeLabelProps as R, DropdownMenuPrimitive as S, ButtonPrimitiveLabelProps as St, DropdownMenuStyles as T, InputPrimitiveProps as Tt, ToastTitleProps as U, ToastStyles as V, AvatarPrimitive as W, EmptyRootProps as X, EmptyPrimitive as Y, EmptyStyles as Z, PopoverStyles as _, SelectTriggerProps as _t, CalendarStyles as a, CardBodyProps as at, PopoverTriggerProps as b, ButtonState as bt, CalendarDayProps as c, SelectPrimitive as ct, PopoverPrimitive as d, SelectRootProps as dt, EmptyDescriptionProps as et, PopoverContext as f, SelectStyles as ft, PopoverRootProps as g, SelectValueProps as gt, PopoverPortalProps as h, SelectOverlayProps as ht, CalendarDayState as i, CardFooterProps as it, TextareaPrimitive as j, FieldDescriptionProps as jt, DropdownMenuContentProps as k, FieldStyles as kt, CalendarWeekLabelsProps as l, SelectPortalProps as lt, PopoverCloseProps as m, SelectContentProps as mt, CalendarNavButtonProps as n, CardRootProps as nt, CalendarTitleProps as o, CardTitleProps as ot, usePopover as p, SelectOptionProps as pt, AvatarImageProps as q, CalendarRootProps as r, CardStyles as rt, CalendarHeaderProps as s, CardHeaderProps as st, CalendarPrimitive as t, CardPrimitive as tt, CalendarWeeksProps as u, SelectRootBaseProps as ut, PopoverOverlayProps as v, ButtonPrimitive as vt, DropdownMenuRootProps as w, InputPrimitiveBaseProps as wt, PopoverTriggerRef as x, ButtonStyles as xt, PopoverContentProps as y, ButtonPrimitiveRootProps as yt, ToastPrimitive as z };
+export { EmptyStyles as $, DropdownMenuButtonProps as A, FieldPrimitiveRootProps as At, BadgeLabelProps as B, PopoverTriggerRef as C, ButtonStyles as Ct, DropdownMenuStyles as D, InputPrimitiveProps as Dt, DropdownMenuRootProps as E, InputPrimitiveBaseProps as Et, TextareaPrimitiveProps as F, ToastTitleProps as G, ToastRootProps as H, TextareaStyles as I, AvatarStyles as J, AvatarPrimitive as K, BadgePrimitive as L, DropdownMenuTriggerProps as M, FieldErrorProps as Mt, TextareaPrimitive as N, FieldDescriptionProps as Nt, DropdownMenuOverlayProps as O, InputStyles as Ot, TextareaPrimitiveBaseProps as P, FieldLabelProps as Pt, EmptyRootProps as Q, BadgeRootProps as R, PopoverTriggerProps as S, ButtonState as St, DropdownMenuPortalProps as T, InputPrimitive as Tt, ToastStyles as U, ToastPrimitive as V, ToastDescriptionProps as W, AvatarFallbackProps as X, AvatarImageProps as Y, EmptyPrimitive as Z, PopoverPortalProps as _, SelectOverlayProps as _t, CalendarStyles as a, CardStyles as at, PopoverOverlayProps as b, ButtonPrimitive as bt, CalendarDayProps as c, CardTitleProps as ct, Portal as d, SelectPortalProps as dt, EmptyTitleProps as et, PortalHost as f, SelectRootBaseProps as ft, PopoverCloseProps as g, SelectContentProps as gt, usePopover as h, SelectOptionProps as ht, CalendarDayState as i, CardRootProps as it, DropdownMenuContentProps as j, FieldStyles as jt, DropdownMenuDividerProps as k, FieldPrimitive as kt, CalendarWeekLabelsProps as l, CardHeaderProps as lt, PopoverContext as m, SelectStyles as mt, CalendarNavButtonProps as n, EmptyDescriptionProps as nt, CalendarTitleProps as o, CardFooterProps as ot, PopoverPrimitive as p, SelectRootProps as pt, AvatarRootProps as q, CalendarRootProps as r, CardPrimitive as rt, CalendarHeaderProps as s, CardBodyProps as st, CalendarPrimitive as t, EmptyMediaProps as tt, CalendarWeeksProps as u, SelectPrimitive as ut, PopoverRootProps as v, SelectValueProps as vt, DropdownMenuPrimitive as w, ButtonPrimitiveLabelProps as wt, PopoverContentProps as x, ButtonPrimitiveRootProps as xt, PopoverStyles as y, SelectTriggerProps as yt, BadgeStyles as z };

package/dist/index.d.mts

@@ -1,14 +1,6 @@
-import * as react5 from "react";
+import { n as PortalHostProps } from "./portal.constants-ClRV24_C.mjs";
+import * as react7 from "react";
 
-//#region src/primitives/portal/portal.constants.d.ts
-interface PortalHostProps {
-  name?: string;
-  container?: {
-    ios?: React.ComponentType<React.PropsWithChildren>;
-    android?: React.ComponentType<React.PropsWithChildren>;
-  };
-}
-//#endregion
 //#region src/themes/types.d.ts
 type ThemeName = "default";
 type ColorScheme = "light" | "dark";
@@ -46,7 +38,7 @@ interface ThemeContext {
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;
 }
-declare const ThemeContext: react5.Context<ThemeContext | null>;
+declare const ThemeContext: react7.Context<ThemeContext | null>;
 declare const useTheme: () => ThemeContext;
 //#endregion
 //#region src/index.d.ts
@@ -57,6 +49,6 @@ interface ProviderProps {
 declare const UniversalUIProvider: ({
   children,
   portalContainer
-}: ProviderProps) => react5.JSX.Element;
+}: ProviderProps) => react7.JSX.Element;
 //#endregion
 export { ProviderProps, UniversalUIProvider, useTheme };

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-BCt2uAJl.mjs";
-import { g as PortalHost } from "./primitives-1609Y7eP.mjs";
+import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-B5sELMqc.mjs";
+import { g as PortalHost } from "./primitives-8eataXpJ.mjs";
 import "./use-relative-position-BTKEyT1F.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/portal.constants-ClRV24_C.d.mts

@@ -0,0 +1,16 @@
+//#region src/primitives/portal/portal.constants.d.ts
+declare const DEFAULT_PORTAL_HOST = "__KOR_PORTAL_HOST__";
+interface PortalHostProps {
+  name?: string;
+  container?: {
+    ios?: React.ComponentType<React.PropsWithChildren>;
+    android?: React.ComponentType<React.PropsWithChildren>;
+  };
+}
+interface PortalProps {
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}
+//#endregion
+export { PortalHostProps as n, PortalProps as r, DEFAULT_PORTAL_HOST as t };

package/dist/primitives/index.d.mts

@@ -1,3 +1,4 @@
-import { $ as EmptyMediaProps, A as DropdownMenuTriggerProps, At as FieldErrorProps, B as ToastRootProps, C as DropdownMenuPortalProps, Ct as InputPrimitive, D as DropdownMenuDividerProps, Dt as FieldPrimitive, E as DropdownMenuOverlayProps, Et as InputStyles, F as BadgePrimitive, G as AvatarRootProps, H as ToastDescriptionProps, I as BadgeRootProps, J as AvatarFallbackProps, K as AvatarStyles, L as BadgeStyles, M as TextareaPrimitiveBaseProps, Mt as FieldLabelProps, N as TextareaPrimitiveProps, O as DropdownMenuButtonProps, Ot as FieldPrimitiveRootProps, P as TextareaStyles, Q as EmptyTitleProps, R as BadgeLabelProps, S as DropdownMenuPrimitive, St as ButtonPrimitiveLabelProps, T as DropdownMenuStyles, Tt as InputPrimitiveProps, U as ToastTitleProps, V as ToastStyles, W as AvatarPrimitive, X as EmptyRootProps, Y as EmptyPrimitive, Z as EmptyStyles, _t as SelectTriggerProps, a as CalendarStyles, at as CardBodyProps, b as PopoverTriggerProps, bt as ButtonState, c as CalendarDayProps, ct as SelectPrimitive, d as PopoverPrimitive, dt as SelectRootProps, et as EmptyDescriptionProps, f as PopoverContext, ft as SelectStyles, g as PopoverRootProps, gt as SelectValueProps, h as PopoverPortalProps, ht as SelectOverlayProps, i as CalendarDayState, it as CardFooterProps, j as TextareaPrimitive, jt as FieldDescriptionProps, k as DropdownMenuContentProps, kt as FieldStyles, l as CalendarWeekLabelsProps, lt as SelectPortalProps, m as PopoverCloseProps, mt as SelectContentProps, n as CalendarNavButtonProps, nt as CardRootProps, o as CalendarTitleProps, ot as CardTitleProps, p as usePopover, pt as SelectOptionProps, q as AvatarImageProps, r as CalendarRootProps, rt as CardStyles, s as CalendarHeaderProps, st as CardHeaderProps, t as CalendarPrimitive, tt as CardPrimitive, u as CalendarWeeksProps, ut as SelectRootBaseProps, v as PopoverOverlayProps, vt as ButtonPrimitive, w as DropdownMenuRootProps, wt as InputPrimitiveBaseProps, x as PopoverTriggerRef, xt as ButtonStyles, y as PopoverContentProps, yt as ButtonPrimitiveRootProps, z as ToastPrimitive } from "../index-DLFYQx-P.mjs";
+import { $ as EmptyStyles, A as DropdownMenuButtonProps, At as FieldPrimitiveRootProps, B as BadgeLabelProps, C as PopoverTriggerRef, Ct as ButtonStyles, D as DropdownMenuStyles, Dt as InputPrimitiveProps, E as DropdownMenuRootProps, Et as InputPrimitiveBaseProps, F as TextareaPrimitiveProps, G as ToastTitleProps, H as ToastRootProps, I as TextareaStyles, J as AvatarStyles, K as AvatarPrimitive, L as BadgePrimitive, M as DropdownMenuTriggerProps, Mt as FieldErrorProps, N as TextareaPrimitive, Nt as FieldDescriptionProps, O as DropdownMenuOverlayProps, Ot as InputStyles, P as TextareaPrimitiveBaseProps, Pt as FieldLabelProps, Q as EmptyRootProps, R as BadgeRootProps, S as PopoverTriggerProps, St as ButtonState, T as DropdownMenuPortalProps, Tt as InputPrimitive, U as ToastStyles, V as ToastPrimitive, W as ToastDescriptionProps, X as AvatarFallbackProps, Y as AvatarImageProps, Z as EmptyPrimitive, _ as PopoverPortalProps, _t as SelectOverlayProps, a as CalendarStyles, at as CardStyles, b as PopoverOverlayProps, bt as ButtonPrimitive, c as CalendarDayProps, ct as CardTitleProps, d as Portal, dt as SelectPortalProps, et as EmptyTitleProps, f as PortalHost, ft as SelectRootBaseProps, g as PopoverCloseProps, gt as SelectContentProps, h as usePopover, ht as SelectOptionProps, i as CalendarDayState, it as CardRootProps, j as DropdownMenuContentProps, jt as FieldStyles, k as DropdownMenuDividerProps, kt as FieldPrimitive, l as CalendarWeekLabelsProps, lt as CardHeaderProps, m as PopoverContext, mt as SelectStyles, n as CalendarNavButtonProps, nt as EmptyDescriptionProps, o as CalendarTitleProps, ot as CardFooterProps, p as PopoverPrimitive, pt as SelectRootProps, q as AvatarRootProps, r as CalendarRootProps, rt as CardPrimitive, s as CalendarHeaderProps, st as CardBodyProps, t as CalendarPrimitive, tt as EmptyMediaProps, u as CalendarWeeksProps, ut as SelectPrimitive, v as PopoverRootProps, vt as SelectValueProps, w as DropdownMenuPrimitive, wt as ButtonPrimitiveLabelProps, x as PopoverContentProps, xt as ButtonPrimitiveRootProps, yt as SelectTriggerProps, z as BadgeStyles } from "../index-_EJRToiG.mjs";
 import "../use-relative-position-DBzhrBU7.mjs";
-export { AvatarFallbackProps, AvatarImageProps, AvatarPrimitive, AvatarRootProps, AvatarStyles, BadgeLabelProps, BadgePrimitive, BadgeRootProps, BadgeStyles, ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CalendarDayProps, CalendarDayState, CalendarHeaderProps, CalendarNavButtonProps, CalendarPrimitive, CalendarRootProps, CalendarStyles, CalendarTitleProps, CalendarWeekLabelsProps, CalendarWeeksProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, DropdownMenuButtonProps, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuPrimitive, DropdownMenuRootProps, DropdownMenuStyles, DropdownMenuTriggerProps, EmptyDescriptionProps, EmptyMediaProps, EmptyPrimitive, EmptyRootProps, EmptyStyles, EmptyTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, PopoverCloseProps, PopoverContentProps, PopoverContext, PopoverOverlayProps, PopoverPortalProps, PopoverPrimitive, PopoverRootProps, PopoverTriggerProps, PopoverTriggerRef, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps, TextareaPrimitive, TextareaPrimitiveBaseProps, TextareaPrimitiveProps, TextareaStyles, ToastDescriptionProps, ToastPrimitive, ToastRootProps, ToastStyles, ToastTitleProps, usePopover };
+import { n as PortalHostProps, r as PortalProps, t as DEFAULT_PORTAL_HOST } from "../portal.constants-ClRV24_C.mjs";
+export { AvatarFallbackProps, AvatarImageProps, AvatarPrimitive, AvatarRootProps, AvatarStyles, BadgeLabelProps, BadgePrimitive, BadgeRootProps, BadgeStyles, ButtonPrimitive, ButtonPrimitiveLabelProps, ButtonPrimitiveRootProps, ButtonState, ButtonStyles, CalendarDayProps, CalendarDayState, CalendarHeaderProps, CalendarNavButtonProps, CalendarPrimitive, CalendarRootProps, CalendarStyles, CalendarTitleProps, CalendarWeekLabelsProps, CalendarWeeksProps, CardBodyProps, CardFooterProps, CardHeaderProps, CardPrimitive, CardRootProps, CardStyles, CardTitleProps, DEFAULT_PORTAL_HOST, DropdownMenuButtonProps, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuOverlayProps, DropdownMenuPortalProps, DropdownMenuPrimitive, DropdownMenuRootProps, DropdownMenuStyles, DropdownMenuTriggerProps, EmptyDescriptionProps, EmptyMediaProps, EmptyPrimitive, EmptyRootProps, EmptyStyles, EmptyTitleProps, FieldDescriptionProps, FieldErrorProps, FieldLabelProps, FieldPrimitive, FieldPrimitiveRootProps, FieldStyles, InputPrimitive, InputPrimitiveBaseProps, InputPrimitiveProps, InputStyles, PopoverCloseProps, PopoverContentProps, PopoverContext, PopoverOverlayProps, PopoverPortalProps, PopoverPrimitive, PopoverRootProps, PopoverTriggerProps, PopoverTriggerRef, Portal, PortalHost, PortalHostProps, PortalProps, SelectContentProps, SelectOptionProps, SelectOverlayProps, SelectPortalProps, SelectPrimitive, SelectRootBaseProps, SelectRootProps, SelectStyles, SelectTriggerProps, SelectValueProps, TextareaPrimitive, TextareaPrimitiveBaseProps, TextareaPrimitiveProps, TextareaStyles, ToastDescriptionProps, ToastPrimitive, ToastRootProps, ToastStyles, ToastTitleProps, usePopover };

package/dist/primitives/index.mjs

@@ -1,4 +1,4 @@
-import { a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, s as ToastPrimitive, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-1609Y7eP.mjs";
+import { _ as DEFAULT_PORTAL_HOST, a as TextareaPrimitive, c as AvatarPrimitive, d as SelectPrimitive, f as ButtonPrimitive, g as PortalHost, h as Portal, i as DropdownMenuPrimitive, l as EmptyPrimitive, m as FieldPrimitive, n as PopoverPrimitive, o as BadgePrimitive, p as InputPrimitive, r as usePopover, s as ToastPrimitive, t as CalendarPrimitive, u as CardPrimitive } from "../primitives-8eataXpJ.mjs";
 import "../use-relative-position-BTKEyT1F.mjs";
 
-export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CalendarPrimitive, CardPrimitive, DropdownMenuPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, PopoverPrimitive, SelectPrimitive, TextareaPrimitive, ToastPrimitive, usePopover };
+export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CalendarPrimitive, CardPrimitive, DEFAULT_PORTAL_HOST, DropdownMenuPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, PopoverPrimitive, Portal, PortalHost, SelectPrimitive, TextareaPrimitive, ToastPrimitive, usePopover };

package/dist/{primitives-1609Y7eP.mjs → primitives-8eataXpJ.mjs}

@@ -1,7 +1,8 @@
 import { n as DEFAULT_POSITION, r as useRelativePosition, t as DEFAULT_LAYOUT } from "./use-relative-position-BTKEyT1F.mjs";
-import React, { createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import React, { createContext, forwardRef, useContext, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ActivityIndicator, Image, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 
 //#region src/primitives/portal/portal.constants.tsx
 const DEFAULT_PORTAL_HOST = "__KOR_PORTAL_HOST__";
@@ -40,7 +41,7 @@ function removePortal(hostName, name) {
 	store.map = next;
 	emit();
 }
-function PortalHost({ name = DEFAULT_PORTAL_HOST, container }) {
+function NativePortalHost({ name = DEFAULT_PORTAL_HOST, container }) {
 	const portalMap = useSyncExternalStore(subscribe, getSnapshot, getSnapshot).get(name) ?? /* @__PURE__ */ new Map();
 	if (portalMap.size === 0) return null;
 	return /* @__PURE__ */ jsx(Platform.select({
@@ -61,7 +62,14 @@ function PortalHost({ name = DEFAULT_PORTAL_HOST, container }) {
 		android: container?.android
 	}), { children: Array.from(portalMap.values()) });
 }
-function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
+function WebPortalHost() {
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+const PortalHost = Platform.select({
+	default: NativePortalHost,
+	web: WebPortalHost
+});
+function NativePortal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
 	useEffect(() => {
 		updatePortal(hostName, name, children);
 	}, [
@@ -74,8 +82,24 @@ function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
 			removePortal(hostName, name);
 		};
 	}, [hostName, name]);
-	return null;
+	return /* @__PURE__ */ jsx(Fragment, {});
+}
+function WebPortal({ name, hostName = DEFAULT_PORTAL_HOST, children }) {
+	const [container] = useState(() => {
+		let container$1 = document.getElementById(hostName);
+		if (!container$1) {
+			container$1 = document.createElement("div");
+			container$1.id = hostName;
+			document.body.appendChild(container$1);
+		}
+		return container$1;
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: createPortal(children, container, name) });
 }
+const Portal = Platform.select({
+	default: NativePortal,
+	web: WebPortal
+});
 
 //#endregion
 //#region src/primitives/field/context.ts
@@ -978,7 +1002,7 @@ const PopoverTrigger = forwardRef((props, ref) => {
 	const popover = usePopover();
 	const triggerRef = useRef(null);
 	const onTriggerPress = async () => {
-		triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+		triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
 			popover.setTriggerPosition({
 				height,
 				width,
@@ -1410,4 +1434,4 @@ const CalendarPrimitive = {
 };
 
 //#endregion
-export { TextareaPrimitive as a, AvatarPrimitive as c, SelectPrimitive as d, ButtonPrimitive as f, PortalHost as g, Portal as h, DropdownMenuPrimitive as i, EmptyPrimitive as l, FieldPrimitive as m, PopoverPrimitive as n, BadgePrimitive as o, InputPrimitive as p, usePopover as r, ToastPrimitive as s, CalendarPrimitive as t, CardPrimitive as u };
+export { DEFAULT_PORTAL_HOST as _, TextareaPrimitive as a, AvatarPrimitive as c, SelectPrimitive as d, ButtonPrimitive as f, PortalHost as g, Portal as h, DropdownMenuPrimitive as i, EmptyPrimitive as l, FieldPrimitive as m, PopoverPrimitive as n, BadgePrimitive as o, InputPrimitive as p, usePopover as r, ToastPrimitive as s, CalendarPrimitive as t, CardPrimitive as u };

package/dist/{toast-manager-BCt2uAJl.mjs → toast-manager-B5sELMqc.mjs}

@@ -1,4 +1,4 @@
-import { h as Portal, s as ToastPrimitive } from "./primitives-1609Y7eP.mjs";
+import { h as Portal, s as ToastPrimitive } from "./primitives-8eataXpJ.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -251,19 +251,22 @@ function ToastContainer() {
 	if (!toasts.length) return null;
 	return /* @__PURE__ */ jsx(Portal, {
 		name: TOAST_PORTAL_NAME,
-		children: toasts.map((toast) => /* @__PURE__ */ jsx(View, {
+		children: /* @__PURE__ */ jsx(View, {
 			style: s.wrapper,
-			children: /* @__PURE__ */ jsx(ToastComponent, {
+			children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastComponent, {
 				title: toast.title,
 				description: toast.description,
 				variant: toast.variant
-			})
-		}, toast.id))
+			}, toast.id))
+		})
 	});
 }
 const s = StyleSheet.create({ wrapper: {
 	width: "100%",
-	alignItems: "center"
+	alignItems: "center",
+	position: "absolute",
+	top: 24,
+	gap: 8
 } });
 
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",

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

@@ -6,6 +6,7 @@ export const usePopoverVariantDefault = (): PopoverStyles => {
     ({ colors, radius }): PopoverStyles => ({
       overlay: {
         backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 999,
       },
       content: {
         backgroundColor: colors.surface,

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

@@ -81,11 +81,11 @@ export function ToastContainer() {
 
   return (
     <Portal name={TOAST_PORTAL_NAME}>
-      {toasts.map((toast) => (
-        <View key={toast.id} style={s.wrapper}>
-          <ToastComponent title={toast.title} description={toast.description} variant={toast.variant} />
-        </View>
-      ))}
+      <View style={s.wrapper}>
+        {toasts.map((toast) => (
+          <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
+        ))}
+      </View>
     </Portal>
   );
 }
@@ -94,5 +94,8 @@ const s = StyleSheet.create({
   wrapper: {
     width: "100%",
     alignItems: "center",
+    position: "absolute",
+    top: 24,
+    gap: 8,
   },
 });

package/src/primitives/index.ts

@@ -10,4 +10,5 @@ export * from "./badge";
 export * from "./textarea";
 export * from "./dropdown-menu";
 export * from "./popover";
+export * from "./portal";
 export * from "./calendar";

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

@@ -16,7 +16,7 @@ export const PopoverTrigger = forwardRef<PopoverTriggerRef, PopoverTriggerProps>
   const triggerRef = useRef<View>(null);
 
   const onTriggerPress = async () => {
-    triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+    triggerRef.current?.measureInWindow((pageX, pageY, width, height) => {
       popover.setTriggerPosition({
         height,
         width,

package/src/primitives/portal/index.ts

@@ -1 +1,2 @@
 export * from "./portal";
+export * from "./portal.constants";

package/src/primitives/portal/portal.tsx

@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Platform, View, type ViewStyle } from "react-native";
+import { useEffect, useSyncExternalStore, useState } from "react";
+import { Platform, View } from "react-native";
 import { DEFAULT_PORTAL_HOST, PortalHostProps, PortalProps } from "./portal.constants";
+import { createPortal } from "react-dom";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -49,7 +49,7 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
+function NativePortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHostProps) {
   const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
   const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
   if (portalMap.size === 0) return null;
@@ -77,7 +77,16 @@ export function PortalHost({ name = DEFAULT_PORTAL_HOST, container }: PortalHost
   return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
+function WebPortalHost() {
+  return <></>;
+}
+
+export const PortalHost = Platform.select({
+  default: NativePortalHost,
+  web: WebPortalHost,
+});
+
+function NativePortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   useEffect(() => {
     updatePortal(hostName, name, children);
   }, [hostName, name, children]);
@@ -88,28 +97,25 @@ export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: Porta
     };
   }, [hostName, name]);
 
-  return null;
+  return <></>;
 }
 
-const ROOT: ViewStyle = {
-  flex: 1,
-};
+function WebPortal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
+  const [container] = useState(() => {
+    let container = document.getElementById(hostName);
 
-export function useModalPortalRoot() {
-  const ref = useRef<View>(null);
-  const [offset, setSideOffSet] = useState(0);
-
-  const onLayout = useCallback(() => {
-    if (Platform.OS === "web") return;
-    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
-      setSideOffSet(-pageY);
-    });
-  }, []);
-
-  return {
-    ref,
-    offset,
-    onLayout,
-    style: ROOT,
-  };
+    if (!container) {
+      container = document.createElement("div");
+      container.id = hostName;
+      document.body.appendChild(container);
+    }
+    return container;
+  });
+
+  return <>{createPortal(children, container, name)}</>;
 }
+
+export const Portal = Platform.select({
+  default: NativePortal,
+  web: WebPortal,
+});

package/src/primitives/portal/portal.web.tsx

@@ -1,21 +0,0 @@
-import { createPortal } from "react-dom";
-import { DEFAULT_PORTAL_HOST, PortalHostProps, PortalProps } from "./portal.constants";
-
-function getPortalContainer(containerId: string) {
-  let container = document.getElementById(containerId);
-  if (!container) {
-    container = document.createElement("div");
-    container.id = containerId;
-    document.body.appendChild(container);
-  }
-  return container;
-}
-
-export function PortalHost({ name = DEFAULT_PORTAL_HOST }: PortalHostProps) {
-  return <div id={name} />;
-}
-
-export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
-  const container = getPortalContainer(hostName);
-  return <>{createPortal(children, container, name)}</>;
-}