@vellira-ui/react-native 2.52.0 → 2.54.0

package/README.md

@@ -1,41 +1,24 @@
 # @vellira-ui/react-native
 
-React Native component package for Vellira.
+React Native implementation of the Vellira design system.
 
-This package contains iOS-inspired native components built with React Native `StyleSheet`. Components use shared colors, typography, spacing, and radius from `@vellira-ui/tokens`, shared behavior from `@vellira-ui/core`, and renderer-neutral contracts from `@vellira-ui/types`.
-
-## Components
-
-- Button
-- Checkbox
-- Input
-- FormField
-- Radio
-- RadioGroup
-- Select
-- Dropdown
-- Tabs
-- Tooltip
-- Modal
-
-Each public native component has React Native Storybook coverage and Vitest unit coverage.
-
-For detailed props, shared types, examples, and compound component APIs, see
-[Native Component API](./API.md).
+It extends shared contracts from `@vellira-ui/types`, uses shared tokens from
+`@vellira-ui/tokens`, shares renderer-neutral behavior through
+`@vellira-ui/core`, and keeps native rendering, accessibility, layout, and
+interaction behavior inside the React Native layer.
 
 ## Installation
 
+Requires React and React Native.
+
 ```bash
 pnpm add @vellira-ui/react-native
 ```
 
-Peer dependencies:
-
-- `react`
-- `react-native`
-
 ## Usage
 
+Use the components directly in your React Native application:
+
 ```tsx
 import { Button, Checkbox, Input } from '@vellira-ui/react-native';
 import { useState } from 'react';
@@ -47,7 +30,12 @@ export function Example() {
 
   return (
     <View style={{ gap: 16 }}>
-      <Input label='Email' value={email} onValueChange={setEmail} />
+      <Input
+        label='Email'
+        value={email}
+        onValueChange={setEmail}
+        placeholder='name@example.com'
+      />
       <Checkbox
         label='Accept terms'
         description='Required to create an account.'
@@ -62,105 +50,56 @@ export function Example() {
 }
 ```
 
-### Button Notes
-
-Use `accessibilityLabel` for icon-only native buttons:
-
-```tsx
-import { Search } from '@vellira-ui/icons';
-
-<Button accessibilityLabel='Search' iconOnly iconStart={<Search />} />;
-```
-
-Button icons are React elements from `@vellira-ui/icons`; the component injects
-the current icon color and size. `loading` disables interaction and can replace
-the visible label with `loadingText`.
-
-### Checkbox Notes
-
-Use `description` for settings-style helper text when the checkbox is not
-wrapped in `FormField`. For checkbox rows without a visible label, provide
-`accessibilityLabel`.
-
-### Select Notes
+## Components
 
-Use `Select` for one form value from a compact list, `RadioGroup` for a few
-visible choices, and `Dropdown` for action menus. Native `Select` opens a
-sheet, modal, or popover and renders options with a FlatList-backed native
-content surface.
+### Inputs
 
-```tsx
-import { Select } from '@vellira-ui/react-native';
-import { useState } from 'react';
+- Button
+- Checkbox
+- Input
+- Radio
+- RadioGroup
+- Select
 
-export function RoleSelect() {
-  const [role, setRole] = useState('editor');
+### Overlays
 
-  return (
-    <Select
-      label='Role'
-      value={role}
-      onValueChange={(nextRole) => setRole(nextRole ?? '')}
-      searchable
-      clearable
-    >
-      <Select.Item value='admin' label='Admin' />
-      <Select.Item value='editor' label='Editor' />
-      <Select.Item value='viewer' label='Viewer' />
-    </Select>
-  );
-}
-```
-
-### Dropdown Notes
+- Dropdown
+- Tooltip
+- Popover
+- Modal
 
-Use `Dropdown` for contextual actions, not saved form values. Compose native
-menus with `Dropdown.Trigger`, `Dropdown.Content`, `Dropdown.Item`, groups,
-labels, and separators. Use `open`, `defaultOpen`, and `onOpenChange` for menu
-state. Use root `color` for the semantic trigger and menu palette, and
-`Dropdown.Item danger` for destructive commands.
+### Forms
 
-```tsx
-import { Dropdown } from '@vellira-ui/react-native';
-
-<Dropdown color='primary' label='Actions'>
-  <Dropdown.Content>
-    <Dropdown.Label>File</Dropdown.Label>
-    <Dropdown.Item value='duplicate' onSelect={duplicate}>
-      Duplicate
-    </Dropdown.Item>
-    <Dropdown.Separator />
-    <Dropdown.Item value='delete' danger onSelect={deleteFile}>
-      Delete
-    </Dropdown.Item>
-  </Dropdown.Content>
-</Dropdown>;
-```
+- FormField
+- Tabs
 
-### FormField Notes
+Every public component includes React Native Storybook stories and Vitest unit
+tests.
 
-`FormField` is a presentational wrapper for custom native controls. Do not wrap
-components that already render their own field chrome, such as `Input`, `Select`
-or `RadioGroup`. The wrapped control should provide its own
-`accessibilityLabel`, role, disabled/editable state and interaction behavior.
-`FormField` only provides layout, text styling, required mark, disabled root
-state and polite error announcement.
+For detailed props, shared types, examples, and compound component APIs, see
+[Native Component API](./API.md).
 
-## Testing
+## Infrastructure
 
-Run only native tests:
+The package also exports native infrastructure used by components and
+applications:
 
-```bash
-pnpm --filter @vellira-ui/react-native test
-```
+- `Portal`
+- `PortalProvider`
+- `ThemeProvider`
+- `useTheme`
+- `nativeThemes`
 
-The native package uses Vitest with a lightweight local `react-native` mock. These tests validate component state, callbacks, accessibility props, and conditional rendering without requiring an iOS or Android simulator.
+## Documentation
 
-Native tests and test utilities are excluded from the package build through `tsconfig.json`.
+- [Getting Started](https://docs.vellira.dev/start/getting-started)
+- [React Native](https://docs.vellira.dev/react-native/)
+- [Native Component API](./API.md)
 
 ## Storybook
 
-Native stories live next to components as `*.stories.tsx` and are consumed by `apps/native-storybook`.
+Native stories live next to components as `*.stories.tsx` and are consumed by
+`apps/native-storybook`.
 
 Run on-device Storybook from the workspace root:
 

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { Dropdown } from './components/Dropdown';
 export type { DropdownContentProps, DropdownEmptyProps, DropdownGroupProps, DropdownItemProps, DropdownLabelProps, DropdownPresentation, DropdownProps, DropdownSelectEvent, DropdownSeparatorProps, DropdownTriggerProps, } from './components/Dropdown/types';
 export type { ModalProps } from './components/Modal';
 export { Modal } from './components/Modal';
+export type { PopoverAnchorProps, PopoverArrowProps, PopoverCloseProps, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverTitleProps, PopoverTriggerProps, } from './components/Popover';
+export { Popover } from './components/Popover';
 export type { RadioGroupProps } from './components/RadioGroup';
 export { RadioGroup } from './components/RadioGroup';
 export type { SelectOption, SelectProps } from './components/Select';

package/dist/index.js

@@ -3,75 +3,205 @@ import { Check, ChevronDown, Close, Search } from "@vellira-ui/icons";
 import { AccessibilityInfo, ActivityIndicator, Animated, Dimensions, Easing, FlatList, Modal as Modal$1, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, findNodeHandle, useWindowDimensions } from "react-native";
 import { darkTheme, highContrastTheme, lightTheme } from "@vellira-ui/tokens";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/theme/fontWeight.ts
+const nativeFontWeights = /* @__PURE__ */ new Set([
+	"normal",
+	"bold",
+	"100",
+	"200",
+	"300",
+	"400",
+	"500",
+	"600",
+	"700",
+	"800",
+	"900"
+]);
+function toNativeFontWeight(weight) {
+	const normalizedWeight = String(weight);
+	if (!nativeFontWeights.has(normalizedWeight)) return "normal";
+	return normalizedWeight;
+}
+//#endregion
+//#region src/managers/FloatingManager/computeFloatingPosition.ts
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+function parsePlacement(placement) {
+	const [side, align = "center"] = placement.split("-");
+	return {
+		side,
+		align
+	};
+}
+function createPlacement(side, align) {
+	return align === "center" ? side : `${side}-${align}`;
+}
+function getOppositeSide(side) {
+	switch (side) {
+		case "top": return "bottom";
+		case "right": return "left";
+		case "bottom": return "top";
+		case "left": return "right";
+	}
+}
+function computeBasePosition({ reference, floating, side, align, offset }) {
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const alignedLeft = align === "start" ? reference.x : align === "end" ? reference.x + reference.width - floating.width : referenceCenterX - floating.width / 2;
+	const alignedTop = align === "start" ? reference.y : align === "end" ? reference.y + reference.height - floating.height : referenceCenterY - floating.height / 2;
+	switch (side) {
+		case "top": return {
+			top: reference.y - floating.height - offset,
+			left: alignedLeft
+		};
+		case "right": return {
+			top: alignedTop,
+			left: reference.x + reference.width + offset
+		};
+		case "bottom": return {
+			top: reference.y + reference.height + offset,
+			left: alignedLeft
+		};
+		case "left": return {
+			top: alignedTop,
+			left: reference.x - floating.width - offset
+		};
+	}
+}
+function getMainAxisOverflow({ side, position, floating, boundary, padding }) {
+	switch (side) {
+		case "top": return padding - position.top;
+		case "right": return position.left + floating.width + padding - boundary.width;
+		case "bottom": return position.top + floating.height + padding - boundary.height;
+		case "left": return padding - position.left;
+	}
+}
+function computeFloatingPosition({ reference, floating, boundary, placement, offset = 8, padding = 12, arrowPadding = 16, flip = true, shift = true }) {
+	const parsed = parsePlacement(placement);
+	let resolvedSide = parsed.side;
+	let position = computeBasePosition({
+		reference,
+		floating,
+		side: resolvedSide,
+		align: parsed.align,
+		offset
+	});
+	if (flip && getMainAxisOverflow({
+		side: resolvedSide,
+		position,
+		floating,
+		boundary,
+		padding
+	}) > 0) {
+		const oppositeSide = getOppositeSide(resolvedSide);
+		const oppositePosition = computeBasePosition({
+			reference,
+			floating,
+			side: oppositeSide,
+			align: parsed.align,
+			offset
+		});
+		if (getMainAxisOverflow({
+			side: oppositeSide,
+			position: oppositePosition,
+			floating,
+			boundary,
+			padding
+		}) <= 0) {
+			resolvedSide = oppositeSide;
+			position = oppositePosition;
+		}
+	}
+	if (shift) position = {
+		top: clamp(position.top, padding, boundary.height - floating.height - padding),
+		left: clamp(position.left, padding, boundary.width - floating.width - padding)
+	};
+	const referenceCenterX = reference.x + reference.width / 2;
+	const referenceCenterY = reference.y + reference.height / 2;
+	const arrowPosition = resolvedSide === "top" || resolvedSide === "bottom" ? { left: clamp(referenceCenterX - position.left, arrowPadding, floating.width - arrowPadding) } : { top: clamp(referenceCenterY - position.top, arrowPadding, floating.height - arrowPadding) };
+	return {
+		position,
+		arrowPosition,
+		placement: createPlacement(resolvedSide, parsed.align)
+	};
+}
+//#endregion
 //#region src/managers/FloatingManager/useNativeFloatingPosition.ts
-const safePadding = 12;
 function useNativeFloatingPosition(placement = "top", offset = 8) {
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
+	const [result, setResult] = useState({
+		position: {
+			top: 0,
+			left: 0
+		},
+		arrowPosition: {},
+		placement
 	});
 	const floatingSizeRef = useRef({
 		width: 0,
 		height: 0
 	});
 	const lastTriggerRef = useRef(null);
-	const clamp = useCallback((value, min, max) => {
-		return Math.min(Math.max(value, min), Math.max(min, max));
-	}, []);
-	const calculatePosition = useCallback((triggerRect, size) => {
-		const { width: screenWidth, height: screenHeight } = Dimensions.get("window");
-		const [side, align = "center"] = placement.split("-");
-		const horizontalTop = side === "bottom" ? triggerRect.y + triggerRect.height + offset : triggerRect.y - size.height - offset;
-		const verticalTop = align === "start" ? triggerRect.y : align === "end" ? triggerRect.y + triggerRect.height - size.height : triggerRect.y + triggerRect.height / 2 - size.height / 2;
-		const horizontalLeft = align === "start" ? triggerRect.x : align === "end" ? triggerRect.x + triggerRect.width - size.width : triggerRect.x + triggerRect.width / 2 - size.width / 2;
-		const verticalLeft = side === "right" ? triggerRect.x + triggerRect.width + offset : triggerRect.x - size.width - offset;
-		const rawPosition = side === "left" || side === "right" ? {
-			top: verticalTop,
-			left: verticalLeft
-		} : {
-			top: horizontalTop,
-			left: horizontalLeft
-		};
-		return {
-			top: clamp(rawPosition.top, safePadding, screenHeight - size.height - safePadding),
-			left: clamp(rawPosition.left, safePadding, screenWidth - size.width - safePadding)
-		};
-	}, [
-		placement,
-		offset,
-		clamp
-	]);
-	const updatePosition = useCallback((triggerRef, measuredSize = floatingSizeRef.current) => {
+	const lastContainerRef = useRef(null);
+	const updatePosition = useCallback((triggerRef, containerRef, measuredSize = floatingSizeRef.current) => {
 		lastTriggerRef.current = triggerRef;
-		const node = triggerRef.current;
-		if (!node || typeof node.measureInWindow !== "function") {
-			setPosition({
-				top: 0,
-				left: 0
-			});
+		lastContainerRef.current = containerRef ?? null;
+		const triggerNode = triggerRef.current;
+		const containerNode = containerRef?.current;
+		if (!triggerNode || typeof triggerNode.measureInWindow !== "function") {
+			setResult((current) => ({
+				...current,
+				position: {
+					top: 0,
+					left: 0
+				}
+			}));
 			return;
 		}
-		node.measureInWindow((x, y, width, height) => {
-			setPosition(calculatePosition({
-				x,
-				y,
-				width,
-				height
-			}, measuredSize));
+		triggerNode.measureInWindow((x, y, width, height) => {
+			const commitPosition = (containerX, containerY, containerWidth, containerHeight) => {
+				const nextResult = computeFloatingPosition({
+					reference: {
+						x: x - containerX,
+						y: y - containerY,
+						width,
+						height
+					},
+					floating: measuredSize,
+					boundary: {
+						width: containerWidth,
+						height: containerHeight
+					},
+					placement,
+					offset
+				});
+				setResult(nextResult);
+			};
+			if (!containerNode || typeof containerNode.measureInWindow !== "function") {
+				const window = Dimensions.get("window");
+				commitPosition(0, 0, window.width, window.height);
+				return;
+			}
+			containerNode.measureInWindow((containerX, containerY, containerWidth, containerHeight) => {
+				commitPosition(containerX, containerY, containerWidth, containerHeight);
+			});
 		});
-	}, [calculatePosition]);
+	}, [placement, offset]);
+	const onFloatingLayout = useCallback((event) => {
+		const { width, height } = event.nativeEvent.layout;
+		const nextSize = {
+			width,
+			height
+		};
+		floatingSizeRef.current = nextSize;
+		if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, lastContainerRef.current ?? void 0, nextSize);
+	}, [updatePosition]);
 	return {
-		position,
+		position: result.position,
+		arrowPosition: result.arrowPosition,
+		placement: result.placement,
 		updatePosition,
-		onFloatingLayout: useCallback((event) => {
-			const { width, height } = event.nativeEvent.layout;
-			const nextSize = {
-				width,
-				height
-			};
-			floatingSizeRef.current = nextSize;
-			if (lastTriggerRef.current) updatePosition(lastTriggerRef.current, nextSize);
-		}, [updatePosition])
+		onFloatingLayout
 	};
 }
 //#endregion
@@ -1772,6 +1902,338 @@ const Modal = Object.assign(ModalRoot, {
 });
 Modal.displayName = "Modal";
 //#endregion
+//#region src/components/Popover/internal/PopoverContext.tsx
+const PopoverContext = createContext(null);
+function PopoverProvider({ children, value }) {
+	return /* @__PURE__ */ jsx(PopoverContext.Provider, {
+		value,
+		children
+	});
+}
+function usePopoverContext(componentName) {
+	const context = useContext(PopoverContext);
+	if (!context) throw new Error(`${componentName} must be used within Popover.`);
+	return context;
+}
+//#endregion
+//#region src/components/Popover/Anchor/PopoverAnchor.tsx
+function PopoverAnchor({ children, asChild = false, ...anchorProps }) {
+	const { anchorRef } = usePopoverContext("Popover.Anchor");
+	if (asChild) return cloneElement(children, { ref: anchorRef });
+	return /* @__PURE__ */ jsx(View, {
+		...anchorProps,
+		ref: anchorRef,
+		children
+	});
+}
+PopoverAnchor.displayName = "Popover.Anchor";
+//#endregion
+//#region src/components/Popover/Arrow/PopoverArrow.styles.ts
+function createPopoverArrowStyles({ theme, side, arrowPosition }) {
+	const tokens = theme.components.popover.arrow;
+	const halfSize = tokens.size / 2;
+	const position = side === "top" || side === "bottom" ? {
+		left: arrowPosition.left ?? 0,
+		transform: [{ translateX: -halfSize }, { rotate: "45deg" }]
+	} : {
+		top: arrowPosition.top ?? 0,
+		transform: [{ translateY: -halfSize }, { rotate: "45deg" }]
+	};
+	const border = { borderColor: tokens.border };
+	switch (side) {
+		case "top":
+			position.bottom = -halfSize;
+			border.borderRightWidth = 1;
+			border.borderBottomWidth = 1;
+			break;
+		case "bottom":
+			position.top = -halfSize;
+			border.borderLeftWidth = 1;
+			border.borderTopWidth = 1;
+			break;
+		case "left":
+			position.right = -halfSize;
+			border.borderRightWidth = 1;
+			border.borderTopWidth = 1;
+			break;
+		case "right":
+			position.left = -halfSize;
+			border.borderLeftWidth = 1;
+			border.borderBottomWidth = 1;
+			break;
+	}
+	return StyleSheet.create({ arrow: {
+		position: "absolute",
+		width: tokens.size,
+		height: tokens.size,
+		backgroundColor: tokens.bg,
+		...position,
+		...border
+	} });
+}
+//#endregion
+//#region src/components/Popover/Arrow/PopoverArrow.tsx
+function PopoverArrow({ style }) {
+	const { theme } = useTheme();
+	const { placement, arrowPosition } = usePopoverContext("Popover.Arrow");
+	const side = placement.split("-")[0];
+	return /* @__PURE__ */ jsx(View, {
+		accessible: false,
+		pointerEvents: "none",
+		style: [useMemo(() => createPopoverArrowStyles({
+			theme,
+			side,
+			arrowPosition
+		}), [
+			theme,
+			side,
+			arrowPosition
+		]).arrow, style]
+	});
+}
+PopoverArrow.displayName = "Popover.Arrow";
+//#endregion
+//#region src/components/Popover/Close/PopoverClose.tsx
+const PopoverClose = ({ children, asChild = false, onPress, ...closeProps }) => {
+	const { setOpen } = usePopoverContext("Popover.Close");
+	const handlePress = (event) => {
+		children.props.onPress?.(event);
+		onPress?.(event);
+		if (event.defaultPrevented) return;
+		setOpen(false, { reason: "close" });
+	};
+	if (asChild) return cloneElement(children, { onPress: handlePress });
+	return /* @__PURE__ */ jsx(Pressable, {
+		...closeProps,
+		onPress: handlePress,
+		children
+	});
+};
+PopoverClose.displayName = "PopoverClose";
+//#endregion
+//#region src/primitives/Portal/Portal.tsx
+const PortalContext = createContext(null);
+const styles$1 = StyleSheet.create({ host: { flex: 1 } });
+const PortalProvider = ({ children, container = null }) => /* @__PURE__ */ jsx(PortalContext.Provider, {
+	value: container,
+	children
+});
+const Portal = ({ children, visible = true, animationType = "none", hardwareAccelerated = true, navigationBarTranslucent = true, statusBarTranslucent = true, onDismiss, onRequestClose }) => {
+	useContext(PortalContext);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsx(Modal$1, {
+		animationType,
+		hardwareAccelerated,
+		navigationBarTranslucent,
+		onDismiss,
+		onRequestClose,
+		presentationStyle: "overFullScreen",
+		statusBarTranslucent,
+		transparent: true,
+		visible: true,
+		children: /* @__PURE__ */ jsx(View, {
+			pointerEvents: "box-none",
+			style: styles$1.host,
+			children
+		})
+	});
+};
+Portal.__velliraPortal = true;
+Portal.displayName = "Portal";
+PortalProvider.displayName = "PortalProvider";
+//#endregion
+//#region src/components/Popover/Content/PopoverContent.styles.ts
+const styles = StyleSheet.create({
+	layer: { flex: 1 },
+	backdrop: StyleSheet.absoluteFill,
+	content: { position: "absolute" }
+});
+function createPopoverContentStyles(theme) {
+	const tokens = theme.components.popover.content;
+	const shadow = tokens.shadow.native;
+	return StyleSheet.create({ content: {
+		minWidth: tokens.minWidth,
+		maxWidth: tokens.maxWidth,
+		padding: tokens.padding,
+		gap: tokens.gap,
+		backgroundColor: tokens.bg,
+		borderColor: tokens.border,
+		borderWidth: tokens.borderWidth,
+		borderRadius: tokens.radius,
+		shadowColor: shadow.color,
+		shadowOpacity: shadow.opacity,
+		shadowRadius: shadow.blur,
+		shadowOffset: {
+			width: shadow.x,
+			height: shadow.y
+		},
+		elevation: shadow.elevation
+	} });
+}
+//#endregion
+//#region src/components/Popover/Content/PopoverContent.tsx
+function PopoverContent({ children, style, ...contentProps }) {
+	const { theme } = useTheme();
+	const layerRef = useRef(null);
+	const themedStyles = useMemo(() => createPopoverContentStyles(theme), [theme]);
+	const { open, position, onFloatingLayout, updatePosition, setOpen, closeOnOutsidePress } = usePopoverContext("Popover.Content");
+	useEffect(() => {
+		if (!open) return;
+		requestAnimationFrame(() => {
+			updatePosition(layerRef);
+		});
+	}, [open, updatePosition]);
+	return /* @__PURE__ */ jsx(Portal, {
+		visible: open,
+		onRequestClose: () => {
+			setOpen(false, { reason: "escape-key" });
+		},
+		children: /* @__PURE__ */ jsxs(View, {
+			ref: layerRef,
+			pointerEvents: "box-none",
+			style: styles.layer,
+			children: [/* @__PURE__ */ jsx(Pressable, {
+				testID: "popover-backdrop",
+				accessibilityLabel: closeOnOutsidePress ? "Close popover" : void 0,
+				accessibilityRole: closeOnOutsidePress ? "button" : void 0,
+				onPress: closeOnOutsidePress ? () => {
+					setOpen(false, { reason: "outside-press" });
+				} : void 0,
+				style: styles.backdrop
+			}), /* @__PURE__ */ jsx(View, {
+				...contentProps,
+				onLayout: onFloatingLayout,
+				style: [
+					styles.content,
+					themedStyles.content,
+					position,
+					style
+				],
+				children
+			})]
+		})
+	});
+}
+//#endregion
+//#region src/components/Popover/Description/PopoverDescription.styles.ts
+function createPopoverDescriptionStyles(theme) {
+	return StyleSheet.create({ description: {
+		color: theme.components.popover.description.fg,
+		fontSize: theme.tokens.typography.size.sm
+	} });
+}
+//#endregion
+//#region src/components/Popover/Description/PopoverDescription.tsx
+const PopoverDescription = ({ children, style, ...descriptionProps }) => {
+	const { theme } = useTheme();
+	const styles = useMemo(() => createPopoverDescriptionStyles(theme), [theme]);
+	return /* @__PURE__ */ jsx(Text, {
+		...descriptionProps,
+		style: [styles.description, style],
+		children
+	});
+};
+PopoverDescription.displayName = "PopoverDescription";
+//#endregion
+//#region src/components/Popover/Root/PopoverRoot.tsx
+function getNativePlacement(side, align) {
+	if (!side) return "bottom";
+	if (!align || align === "center") return side;
+	return `${side}-${align}`;
+}
+function PopoverRoot({ children, open: openProp, defaultOpen = false, onOpenChange, side = "bottom", align = "center", sideOffset = 8, closeOnOutsidePress = true }) {
+	const triggerRef = useRef(null);
+	const anchorRef = useRef(null);
+	const getReferenceRef = useCallback(() => anchorRef.current ? anchorRef : triggerRef, []);
+	const openChangeDetailsRef = useRef({ reason: "programmatic" });
+	const [open, setOpenState] = useControllableState({
+		value: openProp,
+		defaultValue: defaultOpen,
+		onChange: (nextOpen) => {
+			onOpenChange?.(nextOpen, openChangeDetailsRef.current);
+		}
+	});
+	const { position, arrowPosition, placement, updatePosition: updateFloatingPosition, onFloatingLayout } = useNativeFloatingPosition(getNativePlacement(side, align), sideOffset);
+	const setOpen = useCallback((nextOpen, details) => {
+		openChangeDetailsRef.current = details;
+		setOpenState(nextOpen);
+	}, [setOpenState]);
+	return /* @__PURE__ */ jsx(PopoverProvider, {
+		value: {
+			open,
+			closeOnOutsidePress,
+			triggerRef,
+			anchorRef,
+			side,
+			align,
+			placement,
+			position,
+			arrowPosition,
+			onFloatingLayout,
+			updatePosition: useCallback((containerRef) => {
+				updateFloatingPosition(getReferenceRef(), containerRef);
+			}, [getReferenceRef, updateFloatingPosition]),
+			setOpen
+		},
+		children
+	});
+}
+PopoverRoot.displayName = "Popover.Root";
+//#endregion
+//#region src/components/Popover/Title/PopoverTitle.styles.ts
+function createPopoverTitleStyles(theme) {
+	return StyleSheet.create({ title: {
+		color: theme.components.popover.title.fg,
+		fontSize: theme.tokens.typography.size.md,
+		fontWeight: toNativeFontWeight(theme.tokens.typography.weight.semibold)
+	} });
+}
+//#endregion
+//#region src/components/Popover/Title/PopoverTitle.tsx
+const PopoverTitle = ({ children, style, ...titleProps }) => {
+	const { theme } = useTheme();
+	const styles = useMemo(() => createPopoverTitleStyles(theme), [theme]);
+	return /* @__PURE__ */ jsx(Text, {
+		...titleProps,
+		style: [styles.title, style],
+		children
+	});
+};
+PopoverTitle.displayName = "PopoverTitle";
+//#endregion
+//#region src/components/Popover/Trigger/PopoverTrigger.tsx
+function PopoverTrigger({ children, asChild = false, onPress, ...triggerProps }) {
+	const { open, setOpen, triggerRef } = usePopoverContext("Popover.Trigger");
+	const handlePress = (event) => {
+		children.props.onPress?.(event);
+		onPress?.(event);
+		if (event.defaultPrevented) return;
+		setOpen(!open, { reason: "trigger" });
+	};
+	if (asChild) return cloneElement(children, {
+		ref: triggerRef,
+		onPress: handlePress
+	});
+	return /* @__PURE__ */ jsx(Pressable, {
+		...triggerProps,
+		ref: triggerRef,
+		onPress: handlePress,
+		children
+	});
+}
+//#endregion
+//#region src/components/Popover/Popover.tsx
+const Popover = Object.assign(PopoverRoot, {
+	Anchor: PopoverAnchor,
+	Trigger: PopoverTrigger,
+	Content: PopoverContent,
+	Arrow: PopoverArrow,
+	Close: PopoverClose,
+	Title: PopoverTitle,
+	Description: PopoverDescription
+});
+Popover.displayName = "Popover";
+//#endregion
 //#region src/components/RadioGroup/internal/RadioGroupContext.tsx
 const RadioGroupContext = createContext(null);
 const RadioGroupProvider = RadioGroupContext.Provider;
@@ -5673,18 +6135,4 @@ const Input = forwardRef(({ label, description, value, defaultValue, onValueChan
 });
 Input.displayName = "Input";
 //#endregion
-//#region src/primitives/Portal/Portal.tsx
-const PortalContext = createContext(null);
-const PortalProvider = ({ children, container = null }) => /* @__PURE__ */ jsx(PortalContext.Provider, {
-	value: container,
-	children
-});
-const Portal = ({ children }) => {
-	useContext(PortalContext);
-	return /* @__PURE__ */ jsx(Fragment, { children });
-};
-Portal.__velliraPortal = true;
-Portal.displayName = "Portal";
-PortalProvider.displayName = "PortalProvider";
-//#endregion
-export { Button, Checkbox, Dropdown, FormField, Input, Modal, Portal, PortalProvider, Radio, RadioGroup, Select, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };
+export { Button, Checkbox, Dropdown, FormField, Input, Modal, Popover, Portal, PortalProvider, Radio, RadioGroup, Select, Tabs, ThemeProvider, Tooltip, nativeThemes, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vellira-ui/react-native",
-  "version": "2.52.0",
+  "version": "2.54.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",