@vellira-ui/react-native 2.53.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,6 +3,26 @@ 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));
@@ -1882,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;
@@ -5783,35 +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 styles = 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.host,
-			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.53.0",
+  "version": "2.54.0",
   "description": "React Native components for Vellira Design System",
   "author": "Roman Bakurov",
   "license": "MIT",