@korsolutions/ui 0.0.23 → 0.0.25

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,4 +1,4 @@
-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, rt as CardStyles, ut as SelectRootBaseProps, wt as InputPrimitiveBaseProps, x as PopoverTriggerRef, xt as ButtonStyles, yt as ButtonPrimitiveRootProps } from "../index-CCYJiglk.mjs";
+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 "../use-relative-position-DBzhrBU7.mjs";
 import { t as NumericMaskFormat } from "../use-numeric-mask-B9WZG25o.mjs";
 import React from "react";
@@ -301,13 +301,13 @@ declare const CalendarVariants: {
 //#endregion
 //#region src/components/calendar/calendar.d.ts
 interface CalendarProps {
-  value?: Date;
-  onChange?: (date: Date | undefined) => void;
-  defaultMonth?: Date;
-  minDate?: Date;
-  maxDate?: Date;
-  variant?: keyof typeof CalendarVariants;
+  value?: CalendarRootProps["value"];
+  onChange?: CalendarRootProps["onChange"];
+  defaultMonth?: CalendarRootProps["defaultMonth"];
+  minDate?: CalendarRootProps["minDate"];
+  maxDate?: CalendarRootProps["maxDate"];
   weekDays?: string[];
+  variant?: keyof typeof CalendarVariants;
 }
 declare function Calendar(props: CalendarProps): React.JSX.Element;
 //#endregion

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-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 "../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/{index-CCYJiglk.d.mts → index-DLFYQx-P.d.mts}

@@ -1,12 +1,12 @@
 import { r as LayoutPosition } from "./use-relative-position-DBzhrBU7.mjs";
-import * as react8 from "react";
+import * as react7 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 +59,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 +67,7 @@ interface InputPrimitiveProps extends InputPrimitiveBaseProps {
   render?: (props: InputPrimitiveProps) => React.ReactNode;
   styles?: InputStyles;
 }
-declare function InputPrimitive(props: InputPrimitiveProps): react8.JSX.Element;
+declare const InputPrimitive: react7.ForwardRefExoticComponent<Omit<InputPrimitiveProps, "ref"> & react7.RefAttributes<TextInput>>;
 //#endregion
 //#region src/primitives/button/button-label.d.ts
 interface ButtonPrimitiveLabelProps {
@@ -152,7 +153,7 @@ interface SelectOptionProps {
   render?: (props: SelectOptionProps) => React.ReactElement;
   style?: StyleProp<TextStyle>;
 }
-declare function SelectOption(props: SelectOptionProps): react8.JSX.Element;
+declare function SelectOption(props: SelectOptionProps): react7.JSX.Element;
 //#endregion
 //#region src/primitives/select/types.d.ts
 type SelectState = "default" | "disabled";
@@ -433,7 +434,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): react7.JSX.Element;
 //#endregion
 //#region src/primitives/dropdown-menu/dropdown-menu-trigger.d.ts
 interface DropdownMenuTriggerProps extends PressableProps {
@@ -504,7 +505,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: react7.ForwardRefExoticComponent<DropdownMenuTriggerProps & react7.RefAttributes<DropdownMenuTriggerRef>>;
   Portal: typeof DropdownMenuPortal;
   Overlay: typeof DropdownMenuOverlay;
   Content: typeof DropdownMenuContent;
@@ -578,13 +579,13 @@ interface PopoverContext {
   setTriggerPosition: Dispatch<React.SetStateAction<LayoutPosition>>;
   styles?: PopoverStyles;
 }
-declare const PopoverContext: react8.Context<PopoverContext | undefined>;
+declare const PopoverContext: react7.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: react7.ForwardRefExoticComponent<PopoverTriggerProps & react7.RefAttributes<PopoverTriggerRef>>;
   Portal: typeof PopoverPortal;
   Overlay: typeof PopoverOverlay;
   Content: typeof PopoverContent;

package/dist/index.d.mts

@@ -1,5 +1,14 @@
-import * as react4 from "react";
+import * as react5 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";
@@ -37,14 +46,17 @@ interface ThemeContext {
   setTheme: (themeName: ThemeName) => void;
   themeName: ThemeName;
 }
-declare const ThemeContext: react4.Context<ThemeContext | null>;
+declare const ThemeContext: react5.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) => react5.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-BCt2uAJl.mjs";
+import { g as PortalHost } from "./primitives-1609Y7eP.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/primitives/index.d.mts

@@ -1,3 +1,3 @@
-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 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 "../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 };

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 { 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 "../use-relative-position-BTKEyT1F.mjs";
 
 export { AvatarPrimitive, BadgePrimitive, ButtonPrimitive, CalendarPrimitive, CardPrimitive, DropdownMenuPrimitive, EmptyPrimitive, FieldPrimitive, InputPrimitive, PopoverPrimitive, SelectPrimitive, TextareaPrimitive, ToastPrimitive, usePopover };

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

@@ -1,10 +1,13 @@
 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 { Fragment, jsx } from "react/jsx-runtime";
+import React, { createContext, forwardRef, useCallback, 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";
 
+//#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,10 +40,26 @@ function removePortal(hostName, name) {
 	store.map = next;
 	emit();
 }
-function PortalHost({ name = DEFAULT_PORTAL_HOST }) {
+function PortalHost({ 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 }) {
 	useEffect(() => {
@@ -66,14 +85,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 +113,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 +154,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 +170,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 +185,8 @@ function InputPrimitive(props) {
 		readOnly: props.isDisabled || props.readOnly,
 		style: composedStyles
 	});
-}
+});
+InputPrimitive.displayName = "InputPrimitive";
 
 //#endregion
 //#region src/primitives/button/button-context.tsx
@@ -1380,4 +1410,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 { 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-BCt2uAJl.mjs}

@@ -1,4 +1,4 @@
-import { s as ToastPrimitive } from "./primitives-ApsPS0vU.mjs";
+import { h as Portal, s as ToastPrimitive } from "./primitives-1609Y7eP.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,11 +249,10 @@ const ToastAPI = {
 function ToastContainer() {
 	const toasts = useSyncExternalStore(subscribe, getSnapshot);
 	if (!toasts.length) return null;
-	return /* @__PURE__ */ jsx(View, {
-		style: styles.container,
-		pointerEvents: "box-none",
+	return /* @__PURE__ */ jsx(Portal, {
+		name: TOAST_PORTAL_NAME,
 		children: toasts.map((toast) => /* @__PURE__ */ jsx(View, {
-			style: styles.toastWrapper,
+			style: s.wrapper,
 			children: /* @__PURE__ */ jsx(ToastComponent, {
 				title: toast.title,
 				description: toast.description,
@@ -261,21 +261,10 @@ function ToastContainer() {
 		}, 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"
+} });
 
 //#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.23",
+  "version": "0.0.25",
   "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/calendar/calendar.tsx

@@ -1,15 +1,16 @@
 import React from "react";
-import { CalendarPrimitive } from "@/primitives";
+import { CalendarPrimitive, CalendarRootProps } from "@/primitives";
 import { CalendarVariants } from "./variants";
 
 export interface CalendarProps {
-  value?: Date;
-  onChange?: (date: Date | undefined) => void;
-  defaultMonth?: Date;
-  minDate?: Date;
-  maxDate?: Date;
-  variant?: keyof typeof CalendarVariants;
+  value?: CalendarRootProps["value"];
+  onChange?: CalendarRootProps["onChange"];
+  defaultMonth?: CalendarRootProps["defaultMonth"];
+  minDate?: CalendarRootProps["minDate"];
+  maxDate?: CalendarRootProps["maxDate"];
   weekDays?: string[];
+
+  variant?: keyof typeof CalendarVariants;
 }
 
 export function Calendar(props: CalendarProps) {

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,27 +80,18 @@ export function ToastContainer() {
   if (!toasts.length) return null;
 
   return (
-    <View style={styles.container} pointerEvents="box-none">
+    <Portal name={TOAST_PORTAL_NAME}>
       {toasts.map((toast) => (
-        <View key={toast.id} style={styles.toastWrapper}>
+        <View key={toast.id} style={s.wrapper}>
           <ToastComponent title={toast.title} description={toast.description} variant={toast.variant} />
         </View>
       ))}
-    </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",
   },

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/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/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 { Platform, View, type ViewStyle } from "react-native";
+import { DEFAULT_PORTAL_HOST, PortalHostProps, PortalProps } from "./portal.constants";
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
@@ -50,14 +49,35 @@ function removePortal(hostName: string, name: string) {
   emit();
 }
 
-export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
+export function PortalHost({ 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 }) {
+export function Portal({ name, hostName = DEFAULT_PORTAL_HOST, children }: PortalProps) {
   useEffect(() => {
     updatePortal(hostName, name, children);
   }, [hostName, name, children]);

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

@@ -0,0 +1,21 @@
+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)}</>;
+}