@korsolutions/ui 0.0.24 → 0.0.26

package/README.md

@@ -1,2 +1,5 @@
 # TODO
-- [ ] Line height
+- [ ] Line height
+- [ ] Letter spacing
+- [ ] Custom safe area insets
+- [ ] Custom portal host container

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-CCYJiglk.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-j_OCsdsx.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-Cdhl1ep0.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-ApsPS0vU.mjs";
+import { i as useThemedStyles, r as ToastComponent, t as ToastAPI } from "../toast-manager-Bn8NB8Ie.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-CB1VBoeH.mjs";
 import "../use-relative-position-BTKEyT1F.mjs";
 import { t as useNumericMask } from "../use-numeric-mask-BQlz1Pus.mjs";
 import React, { forwardRef, useEffect, useState } from "react";
@@ -282,7 +282,7 @@ function Field(props) {
 		styles: variantStyles,
 		children: [
 			props.label && /* @__PURE__ */ jsx(FieldPrimitive.Label, {
-				htmlFor: props.id,
+				for: props.id,
 				children: props.label
 			}),
 			props.description && /* @__PURE__ */ jsx(FieldPrimitive.Description, { children: props.description }),

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-CCYJiglk.d.mts → index-j_OCsdsx.d.mts}

@@ -1,12 +1,13 @@
 import { r as LayoutPosition } from "./use-relative-position-DBzhrBU7.mjs";
-import * as react8 from "react";
+import { n as PortalHostProps, r as PortalProps } from "./portal.constants-ClRV24_C.mjs";
+import * as react9 from "react";
 import React$1, { Dispatch, RefAttributes } from "react";
-import { ImageSource, ImageStyle, LayoutRectangle, PressableProps, StyleProp, TextInputProps, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
+import { ImageSource, ImageStyle, LayoutRectangle, PressableProps, StyleProp, TextInput, TextInputProps, TextProps, TextStyle, View, ViewProps, ViewStyle } from "react-native";
 
 //#region src/primitives/field/field-label.d.ts
 interface FieldLabelProps {
   children: string;
-  htmlFor?: string;
+  for?: string;
   render?: (props: FieldLabelProps) => React$1.ReactNode;
   style?: TextProps["style"];
 }
@@ -59,6 +60,7 @@ type InputStyles = Partial<Record<InputState, InputPrimitiveBaseProps>>;
 //#endregion
 //#region src/primitives/input/input.d.ts
 type InputPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  ref?: React.Ref<TextInput>;
   onChange?: TextInputProps["onChangeText"];
   isDisabled?: boolean;
 };
@@ -66,7 +68,7 @@ interface InputPrimitiveProps extends InputPrimitiveBaseProps {
   render?: (props: InputPrimitiveProps) => React.ReactNode;
   styles?: InputStyles;
 }
-declare function InputPrimitive(props: InputPrimitiveProps): react8.JSX.Element;
+declare const InputPrimitive: react9.ForwardRefExoticComponent<Omit<InputPrimitiveProps, "ref"> & react9.RefAttributes<TextInput>>;
 //#endregion
 //#region src/primitives/button/button-label.d.ts
 interface ButtonPrimitiveLabelProps {
@@ -152,7 +154,7 @@ interface SelectOptionProps {
   render?: (props: SelectOptionProps) => React.ReactElement;
   style?: StyleProp<TextStyle>;
 }
-declare function SelectOption(props: SelectOptionProps): react8.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react9.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";
@@ -433,7 +435,7 @@ interface TextareaPrimitiveProps extends TextareaPrimitiveBaseProps {
   render?: (props: TextareaPrimitiveProps) => React.ReactNode;
   styles?: TextareaStyles;
 }
-declare function TextareaPrimitive(props: TextareaPrimitiveProps): react8.JSX.Element;
+declare function TextareaPrimitive(props: TextareaPrimitiveProps): react9.JSX.Element;
 //#endregion
 //#region src/primitives/dropdown-menu/dropdown-menu-trigger.d.ts
 interface DropdownMenuTriggerProps extends PressableProps {
@@ -504,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: react8.ForwardRefExoticComponent<DropdownMenuTriggerProps & react8.RefAttributes<DropdownMenuTriggerRef>>;
+  Trigger: react9.ForwardRefExoticComponent<DropdownMenuTriggerProps & react9.RefAttributes<DropdownMenuTriggerRef>>;
   Portal: typeof DropdownMenuPortal;
   Overlay: typeof DropdownMenuOverlay;
   Content: typeof DropdownMenuContent;
@@ -578,19 +580,32 @@ interface PopoverContext {
   setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
   styles?: PopoverStyles;
 }
-declare const PopoverContext: react8.Context<PopoverContext | undefined>;
+declare const PopoverContext: react9.Context<PopoverContext | undefined>;
 declare const usePopover: () => PopoverContext;
 //#endregion
 //#region src/primitives/popover/index.d.ts
 declare const PopoverPrimitive: {
   Root: typeof PopoverRoot;
-  Trigger: react8.ForwardRefExoticComponent<PopoverTriggerProps & react8.RefAttributes<PopoverTriggerRef>>;
+  Trigger: react9.ForwardRefExoticComponent<PopoverTriggerProps & react9.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): react9.JSX.Element | null;
+declare const PortalHost: typeof NativePortalHost;
+declare function NativePortal({
+  name,
+  hostName,
+  children
+}: PortalProps): react9.JSX.Element;
+declare const Portal: typeof NativePortal;
+//#endregion
 //#region src/primitives/calendar/calendar-weeks.d.ts
 interface CalendarWeekProps extends ViewProps {
   index: number;
@@ -686,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,3 +1,4 @@
+import { n as PortalHostProps } from "./portal.constants-ClRV24_C.mjs";
 import * as react4 from "react";
 
 //#region src/themes/types.d.ts
@@ -41,10 +42,13 @@ declare const ThemeContext: react4.Context<ThemeContext | null>;
 declare const useTheme: () => ThemeContext;
 //#endregion
 //#region src/index.d.ts
-declare const UniversalUIProvider: ({
-  children
-}: {
+interface ProviderProps {
   children: React.ReactNode;
-}) => react4.JSX.Element;
+  portalContainer?: PortalHostProps["container"];
+}
+declare const UniversalUIProvider: ({
+  children,
+  portalContainer
+}: ProviderProps) => react4.JSX.Element;
 //#endregion
-export { UniversalUIProvider, useTheme };
+export { ProviderProps, UniversalUIProvider, useTheme };

package/dist/index.mjs

@@ -1,14 +1,14 @@
-import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-Cdhl1ep0.mjs";
-import { h as PortalHost } from "./primitives-ApsPS0vU.mjs";
+import { a as ThemeProvider, n as ToastContainer, o as useTheme } from "./toast-manager-Bn8NB8Ie.mjs";
+import { g as PortalHost } from "./primitives-CB1VBoeH.mjs";
 import "./use-relative-position-BTKEyT1F.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/index.tsx
-const UniversalUIProvider = ({ children }) => {
+const UniversalUIProvider = ({ children, portalContainer }) => {
 	return /* @__PURE__ */ jsxs(ThemeProvider, { children: [
+		/* @__PURE__ */ jsx(ToastContainer, {}),
 		children,
-		/* @__PURE__ */ jsx(PortalHost, {}),
-		/* @__PURE__ */ jsx(ToastContainer, {})
+		/* @__PURE__ */ jsx(PortalHost, { container: portalContainer })
 	] });
 };
 

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-CCYJiglk.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-j_OCsdsx.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-ApsPS0vU.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-CB1VBoeH.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-ApsPS0vU.mjs → primitives-CB1VBoeH.mjs}

@@ -1,10 +1,14 @@
 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, useImperativeHandle, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { ActivityIndicator, Image, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+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 { 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__";
+
+//#endregion
 //#region src/primitives/portal/portal.tsx
-const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
 const store = {
 	map: (/* @__PURE__ */ new Map()).set(DEFAULT_PORTAL_HOST, /* @__PURE__ */ new Map()),
 	listeners: /* @__PURE__ */ new Set()
@@ -37,12 +41,35 @@ function removePortal(hostName, name) {
 	store.map = next;
 	emit();
 }
-function PortalHost({ name = DEFAULT_PORTAL_HOST }) {
+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(Fragment, { children: Array.from(portalMap.values()) });
+	return /* @__PURE__ */ jsx(Platform.select({
+		default: (props) => /* @__PURE__ */ jsx(View, {
+			...props,
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				elevation: 999,
+				zIndex: 999,
+				pointerEvents: "box-none"
+			}
+		}),
+		ios: container?.ios,
+		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);
 	}, [
@@ -55,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
@@ -66,14 +109,21 @@ const useField = () => {
 	if (!context) throw new Error("useField must be used within a FieldProvider");
 	return context;
 };
+const useFieldOptional = () => {
+	return useContext(FieldContext);
+};
 
 //#endregion
 //#region src/primitives/field/field-root.tsx
 function FieldRoot(props) {
+	const id = useId();
 	const composedStyles = [props.styles?.root, props.style];
 	const Component = props.render ?? View;
 	return /* @__PURE__ */ jsx(FieldContext.Provider, {
-		value: { styles: props.styles },
+		value: {
+			styles: props.styles,
+			id
+		},
 		children: /* @__PURE__ */ jsx(Component, {
 			...props,
 			style: composedStyles
@@ -87,7 +137,7 @@ function FieldLabel(props) {
 	const field = useField();
 	return /* @__PURE__ */ jsx(props.render ?? Text, {
 		...props,
-		htmlFor: props.htmlFor,
+		for: props.for ?? field.id,
 		style: [field.styles?.label, props.style]
 	});
 }
@@ -128,9 +178,10 @@ const calculateState$7 = (props, isFocused) => {
 	if (isFocused) return "focused";
 	return "default";
 };
-function InputPrimitive(props) {
+const InputPrimitive = forwardRef((props, ref) => {
 	const [isFocused, setIsFocused] = useState(false);
 	const state = calculateState$7(props, isFocused);
+	const field = useFieldOptional();
 	const composedStyles = [
 		props.styles?.default?.style,
 		props.styles?.[state]?.style,
@@ -143,6 +194,8 @@ function InputPrimitive(props) {
 	};
 	return /* @__PURE__ */ jsx(props.render ?? TextInput, {
 		...composedProps,
+		ref,
+		id: field?.id,
 		onChange: void 0,
 		onChangeText: props.onChange,
 		onFocus: (e) => {
@@ -156,7 +209,8 @@ function InputPrimitive(props) {
 		readOnly: props.isDisabled || props.readOnly,
 		style: composedStyles
 	});
-}
+});
+InputPrimitive.displayName = "InputPrimitive";
 
 //#endregion
 //#region src/primitives/button/button-context.tsx
@@ -1380,4 +1434,4 @@ const CalendarPrimitive = {
 };
 
 //#endregion
-export { TextareaPrimitive as a, AvatarPrimitive as c, SelectPrimitive as d, ButtonPrimitive as f, PortalHost 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-Cdhl1ep0.mjs → toast-manager-Bn8NB8Ie.mjs}

@@ -1,4 +1,4 @@
-import { s as ToastPrimitive } from "./primitives-ApsPS0vU.mjs";
+import { h as Portal, s as ToastPrimitive } from "./primitives-CB1VBoeH.mjs";
 import React, { createContext, useContext, useEffect, useState, useSyncExternalStore } from "react";
 import { StyleSheet, View, useColorScheme } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -198,15 +198,16 @@ const ToastVariants = {
 //#region src/components/toast/toast.tsx
 function ToastComponent(props) {
 	const useVariantStyles = ToastVariants[props.variant || "default"];
-	const styles$1 = useVariantStyles();
+	const styles = useVariantStyles();
 	return /* @__PURE__ */ jsxs(ToastPrimitive.Root, {
-		styles: styles$1,
+		styles,
 		children: [/* @__PURE__ */ jsx(ToastPrimitive.Title, { children: props.title }), !!props.description && /* @__PURE__ */ jsx(ToastPrimitive.Description, { children: props.description })]
 	});
 }
 
 //#endregion
 //#region src/components/toast/toast-manager.tsx
+const TOAST_PORTAL_NAME = "toast-portal";
 const store = {
 	toasts: [],
 	listeners: /* @__PURE__ */ new Set()
@@ -248,34 +249,25 @@ const ToastAPI = {
 function ToastContainer() {
 	const toasts = useSyncExternalStore(subscribe, getSnapshot);
 	if (!toasts.length) return null;
-	return /* @__PURE__ */ jsx(View, {
-		style: styles.container,
-		pointerEvents: "box-none",
-		children: toasts.map((toast) => /* @__PURE__ */ jsx(View, {
-			style: styles.toastWrapper,
-			children: /* @__PURE__ */ jsx(ToastComponent, {
+	return /* @__PURE__ */ jsx(Portal, {
+		name: TOAST_PORTAL_NAME,
+		children: /* @__PURE__ */ jsx(View, {
+			style: s.wrapper,
+			children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastComponent, {
 				title: toast.title,
 				description: toast.description,
 				variant: toast.variant
-			})
-		}, toast.id))
+			}, toast.id))
+		})
 	});
 }
-const styles = StyleSheet.create({
-	container: {
-		position: "absolute",
-		top: 50,
-		left: 0,
-		right: 0,
-		alignItems: "center",
-		gap: 12,
-		zIndex: 9999
-	},
-	toastWrapper: {
-		width: "100%",
-		alignItems: "center"
-	}
-});
+const s = StyleSheet.create({ wrapper: {
+	width: "100%",
+	alignItems: "center",
+	position: "absolute",
+	top: 24,
+	gap: 8
+} });
 
 //#endregion
 export { ThemeProvider as a, useThemedStyles as i, ToastContainer as n, useTheme as o, ToastComponent as r, ToastAPI as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@korsolutions/ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "license": "MIT",
   "main": "dist/index.mjs",
   "module": "dist/index.mjs",
@@ -27,19 +27,15 @@
       "dev-source": "./src/hooks/index.ts"
     }
   },
-  "scripts": {
-    "build": "tsdown",
-    "prepublish": "tsdown",
-    "publish": "npm publish --access public",
-    "ts-check": "tsc --noEmit"
-  },
   "peerDependencies": {
     "react": "*",
+    "react-dom": "*",
     "react-native": "*",
     "react-native-web": "*"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "tsdown": "0.17.0-beta.4"
   },
   "repository": {
@@ -48,5 +44,10 @@
   },
   "bugs": {
     "url": "https://github.com/KorSoftwareSolutions/ui/issues"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "prepublish": "tsdown",
+    "ts-check": "tsc --noEmit"
   }
-}
+}

package/src/components/field/field.tsx

@@ -18,7 +18,7 @@ export function Field(props: FieldProps) {
 
   return (
     <FieldPrimitive.Root styles={variantStyles}>
-      {props.label && <FieldPrimitive.Label htmlFor={props.id}>{props.label}</FieldPrimitive.Label>}
+      {props.label && <FieldPrimitive.Label for={props.id}>{props.label}</FieldPrimitive.Label>}
       {props.description && <FieldPrimitive.Description>{props.description}</FieldPrimitive.Description>}
       {props.children}
       {props.error && <FieldPrimitive.Error>{props.error}</FieldPrimitive.Error>}

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

@@ -2,6 +2,9 @@ import React, { useSyncExternalStore } from "react";
 import { View, StyleSheet } from "react-native";
 import { ToastComponent } from "./toast";
 import { ToastVariants } from "./variants";
+import { Portal } from "@/primitives/portal";
+
+export const TOAST_PORTAL_NAME = "toast-portal";
 
 export interface ToastConfig {
   id: string;
@@ -77,28 +80,22 @@ export function ToastContainer() {
   if (!toasts.length) return null;
 
   return (
-    <View style={styles.container} pointerEvents="box-none">
-      {toasts.map((toast) => (
-        <View key={toast.id} style={styles.toastWrapper}>
-          <ToastComponent title={toast.title} description={toast.description} variant={toast.variant} />
-        </View>
-      ))}
-    </View>
+    <Portal name={TOAST_PORTAL_NAME}>
+      <View style={s.wrapper}>
+        {toasts.map((toast) => (
+          <ToastComponent key={toast.id} title={toast.title} description={toast.description} variant={toast.variant} />
+        ))}
+      </View>
+    </Portal>
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    position: "absolute",
-    top: 50,
-    left: 0,
-    right: 0,
-    alignItems: "center",
-    gap: 12,
-    zIndex: 9999,
-  },
-  toastWrapper: {
+const s = StyleSheet.create({
+  wrapper: {
     width: "100%",
     alignItems: "center",
+    position: "absolute",
+    top: 24,
+    gap: 8,
   },
 });

package/src/index.tsx

@@ -1,13 +1,20 @@
 import { ThemeProvider } from "@/themes";
 import { PortalHost } from "./primitives/portal";
 import { ToastContainer } from "./components/toast/toast-manager";
+import { PortalHostProps } from "./primitives/portal/portal.constants";
 
-export const UniversalUIProvider = ({ children }: { children: React.ReactNode }) => {
+export interface ProviderProps {
+  children: React.ReactNode;
+
+  portalContainer?: PortalHostProps["container"];
+}
+
+export const UniversalUIProvider = ({ children, portalContainer }: ProviderProps) => {
   return (
     <ThemeProvider>
-      {children}
-      <PortalHost />
       <ToastContainer />
+      {children}
+      <PortalHost container={portalContainer} />
     </ThemeProvider>
   );
 };

package/src/primitives/field/context.ts

@@ -3,6 +3,7 @@ import { FieldStyles } from "./types";
 
 export interface FieldContext {
   styles?: FieldStyles;
+  id: string;
 }
 
 export const FieldContext = createContext<FieldContext | undefined>(undefined);
@@ -14,3 +15,7 @@ export const useField = () => {
   }
   return context;
 };
+
+export const useFieldOptional = () => {
+  return useContext(FieldContext);
+};

package/src/primitives/field/field-label.tsx

@@ -5,7 +5,7 @@ import { Text, TextProps } from "react-native";
 export interface FieldLabelProps {
   children: string;
 
-  htmlFor?: string;
+  for?: string;
 
   render?: (props: FieldLabelProps) => React.ReactNode;
 
@@ -16,5 +16,5 @@ export function FieldLabel(props: FieldLabelProps) {
   const field = useField();
 
   const Component = props.render ?? Text;
-  return <Component {...props} htmlFor={props.htmlFor} style={[field.styles?.label, props.style]} />;
+  return <Component {...props} for={props.for ?? field.id} style={[field.styles?.label, props.style]} />;
 }

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useId } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { FieldContext } from "./context";
 import { FieldStyles } from "./types";
@@ -13,10 +13,11 @@ export interface FieldPrimitiveRootProps {
 }
 
 export function FieldRoot(props: FieldPrimitiveRootProps) {
+  const id = useId();
   const composedStyles = [props.styles?.root, props.style];
   const Component = props.render ?? View;
   return (
-    <FieldContext.Provider value={{ styles: props.styles }}>
+    <FieldContext.Provider value={{ styles: props.styles, id }}>
       <Component {...props} style={composedStyles} />
     </FieldContext.Provider>
   );

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/input/input.tsx

@@ -1,10 +1,11 @@
 import { TextInput, TextInputProps } from "react-native";
 import { InputState, InputStyles } from "./types";
-import { useState } from "react";
+import { useState, forwardRef } from "react";
+import { useFieldOptional } from "../field/context";
 
 export type InputPrimitiveBaseProps = Omit<TextInputProps, "onChange"> & {
+  ref?: React.Ref<TextInput>;
   onChange?: TextInputProps["onChangeText"];
-
   isDisabled?: boolean;
 };
 
@@ -24,9 +25,10 @@ const calculateState = (props: InputPrimitiveProps, isFocused: boolean): InputSt
   return "default";
 };
 
-export function InputPrimitive(props: InputPrimitiveProps) {
+export const InputPrimitive = forwardRef<TextInput, InputPrimitiveProps>((props, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const state = calculateState(props, isFocused);
+  const field = useFieldOptional();
 
   const composedStyles = [props.styles?.default?.style, props.styles?.[state]?.style, props.style];
   const composedProps = {
@@ -35,9 +37,12 @@ export function InputPrimitive(props: InputPrimitiveProps) {
     ...props,
   };
   const Component = props.render ?? TextInput;
+
   return (
     <Component
       {...composedProps}
+      ref={ref}
+      id={field?.id}
       onChange={undefined}
       onChangeText={props.onChange}
       onFocus={(e) => {
@@ -52,4 +57,6 @@ export function InputPrimitive(props: InputPrimitiveProps) {
       style={composedStyles}
     />
   );
-}
+});
+
+InputPrimitive.displayName = "InputPrimitive";

package/src/primitives/portal/index.ts

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

package/src/primitives/portal/portal.constants.tsx

@@ -0,0 +1,15 @@
+export const DEFAULT_PORTAL_HOST = "__KOR_PORTAL_HOST__";
+
+export interface PortalHostProps {
+  name?: string;
+  container?: {
+    ios?: React.ComponentType<React.PropsWithChildren>;
+    android?: React.ComponentType<React.PropsWithChildren>;
+  };
+}
+
+export interface PortalProps {
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}

package/src/primitives/portal/portal.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
-import { Platform, type View, type ViewStyle } from "react-native";
-
-const DEFAULT_PORTAL_HOST = "KOR_NATIVE_DEFAULT_HOST_NAME";
+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>;
@@ -50,14 +49,44 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
+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;
-  return <>{Array.from(portalMap.values())}</>;
+
+  const Container = Platform.select({
+    default: (props: React.PropsWithChildren) => (
+      <View
+        {...props}
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          elevation: 999,
+          zIndex: 999,
+          pointerEvents: "box-none",
+        }}
+      />
+    ),
+    ios: container?.ios,
+    android: container?.android,
+  });
+
+  return <Container>{Array.from(portalMap.values())}</Container>;
 }
 
-export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: { name: string; hostName?: string; children: React.ReactNode }) {
+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]);
@@ -68,28 +97,25 @@ export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: { nam
     };
   }, [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,
+});