@mrmeg/expo-ui 0.1.0

package/dist/components/Popover.d.ts

@@ -0,0 +1,79 @@
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import * as React from "react";
+import { View, ViewProps } from "react-native";
+/**
+ * Popover Trigger Component
+ * The element that triggers the popover to open/close
+ */
+declare const PopoverTrigger: {
+    ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+        asChild?: boolean;
+    } & {
+        onKeyDown?: (ev: React.KeyboardEvent) => void;
+        onKeyUp?: (ev: React.KeyboardEvent) => void;
+    } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
+    displayName: string;
+};
+interface PopoverContentProps extends PopoverPrimitive.ContentProps {
+    /**
+     * Optional portal host name for custom portal mounting
+     */
+    portalHost?: string;
+}
+/**
+ * Popover Content Component
+ * The content that appears in the popover overlay
+ * Supports smart positioning, animations, and theme integration
+ */
+declare function PopoverContent({ side, align, sideOffset, portalHost, ...props }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Header Component
+ * Optional header section for the popover content
+ */
+interface PopoverHeaderProps extends ViewProps {
+    children: React.ReactNode;
+}
+declare function PopoverHeader({ children, style, ...props }: PopoverHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Body Component
+ * Main content area of the popover
+ */
+interface PopoverBodyProps extends ViewProps {
+    children: React.ReactNode;
+}
+declare function PopoverBody({ children, style, ...props }: PopoverBodyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Footer Component
+ * Optional footer section for the popover content
+ */
+interface PopoverFooterProps extends ViewProps {
+    children: React.ReactNode;
+}
+declare function PopoverFooter({ children, style, ...props }: PopoverFooterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Popover Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Popover.Trigger)
+ */
+declare const Popover: {
+    ({ asChild, onOpenChange: onOpenChangeProp, ref, ...viewProps }: ViewProps & {
+        asChild?: boolean;
+    } & {
+        onOpenChange?: (open: boolean) => void;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: {
+        ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+            asChild?: boolean;
+        } & {
+            onKeyDown?: (ev: React.KeyboardEvent) => void;
+            onKeyUp?: (ev: React.KeyboardEvent) => void;
+        } & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>): React.JSX.Element;
+        displayName: string;
+    };
+    Content: typeof PopoverContent;
+    Header: typeof PopoverHeader;
+    Body: typeof PopoverBody;
+    Footer: typeof PopoverFooter;
+};
+export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, };

package/dist/components/Popover.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AnimatedView } from "./AnimatedView";
+import { TextClassContext, TextColorContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { palette } from "../constants/colors";
+/**
+ * Popover Trigger Component
+ * The element that triggers the popover to open/close
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+/**
+ * FullWindowOverlay wrapper - uses native overlay on iOS for proper z-index handling
+ * On Android/Web, uses Fragment to avoid unnecessary nesting
+ */
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+/**
+ * Popover Content Component
+ * The content that appears in the popover overlay
+ * Supports smart positioning, animations, and theme integration
+ */
+function PopoverContent({ side, align = "center", sideOffset = 4, portalHost, ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    // Calculate text color for popover content based on background
+    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    const contentStyle = StyleSheet.flatten([
+        {
+            backgroundColor: theme.colors.background,
+            borderColor: theme.colors.border,
+            borderWidth: 1,
+            borderRadius: spacing.radiusMd,
+            padding: spacing.xs,
+            ...getShadowStyle("soft"),
+        },
+    ]);
+    return (_jsx(PopoverPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(PopoverPrimitive.Overlay, { style: Platform.select({ native: StyleSheet.absoluteFill }), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(PopoverPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, style: contentStyle, ...props }) }) }) }) }) }) }));
+}
+function PopoverHeader({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.xs,
+                paddingVertical: spacing.sm,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
+}
+function PopoverBody({ children, style, ...props }) {
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.xs,
+                paddingVertical: spacing.sm,
+            },
+            style,
+        ], ...props, children: children }));
+}
+function PopoverFooter({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.xs,
+                paddingVertical: spacing.sm,
+                borderTopWidth: 1,
+                borderTopColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
+}
+/**
+ * Popover Root Component
+ * Manages popover state and provides context for trigger and content
+ */
+const PopoverRoot = PopoverPrimitive.Root;
+/**
+ * Popover Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Popover.Trigger)
+ */
+const Popover = Object.assign(PopoverRoot, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+    Header: PopoverHeader,
+    Body: PopoverBody,
+    Footer: PopoverFooter,
+});
+export { Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter, };

package/dist/components/Progress.d.ts

@@ -0,0 +1,28 @@
+import { StyleProp, ViewStyle } from "react-native";
+export type ProgressVariant = "default" | "accent" | "destructive";
+export type ProgressSize = "sm" | "md" | "lg";
+export interface ProgressProps {
+    /** Progress value 0-100. Omit for indeterminate mode. */
+    value?: number;
+    /** Color variant for the fill bar */
+    variant?: ProgressVariant;
+    /** Height size preset */
+    size?: ProgressSize;
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Progress Component
+ *
+ * A linear progress bar supporting determinate and indeterminate modes.
+ * Determinate mode animates the fill width via Reanimated.
+ * Indeterminate mode pulses opacity via RN core Animated.loop.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={60} />
+ * <Progress variant="accent" size="lg" value={30} />
+ * <Progress /> // indeterminate
+ * ```
+ */
+export declare function Progress({ value, variant, size, style, }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Progress.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import Reanimated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { useTheme } from "../hooks/useTheme";
+import { shouldUseNativeDriver } from "../lib/animations";
+// ============================================================================
+// Constants
+// ============================================================================
+const SIZE_MAP = {
+    sm: 4,
+    md: 8,
+    lg: 12,
+};
+// ============================================================================
+// Progress
+// ============================================================================
+/**
+ * Progress Component
+ *
+ * A linear progress bar supporting determinate and indeterminate modes.
+ * Determinate mode animates the fill width via Reanimated.
+ * Indeterminate mode pulses opacity via RN core Animated.loop.
+ *
+ * @example
+ * ```tsx
+ * <Progress value={60} />
+ * <Progress variant="accent" size="lg" value={30} />
+ * <Progress /> // indeterminate
+ * ```
+ */
+export function Progress({ value, variant = "default", size = "md", style, }) {
+    const { theme } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const isDeterminate = value !== undefined;
+    const height = SIZE_MAP[size];
+    const borderRadius = height / 2;
+    const fillColor = variant === "accent"
+        ? theme.colors.accent
+        : variant === "destructive"
+            ? theme.colors.destructive
+            : theme.colors.primary;
+    const flattenedStyle = style ? StyleSheet.flatten(style) : undefined;
+    return (_jsx(View, { accessible: true, accessibilityRole: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isDeterminate ? Math.round(Math.min(100, Math.max(0, value))) : undefined, accessibilityState: { busy: !isDeterminate }, style: StyleSheet.flatten([
+            {
+                height,
+                borderRadius,
+                backgroundColor: theme.colors.muted,
+                overflow: "hidden",
+            },
+            flattenedStyle,
+        ]), children: isDeterminate ? (_jsx(DeterminateFill, { value: value, fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) : (_jsx(IndeterminateFill, { fillColor: fillColor, height: height, borderRadius: borderRadius, reduceMotion: reduceMotion })) }));
+}
+function DeterminateFill({ value, fillColor, height, borderRadius, reduceMotion, }) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const clamped = Math.min(100, Math.max(0, value));
+    const animatedWidth = useSharedValue(0);
+    useEffect(() => {
+        if (containerWidth === 0)
+            return;
+        const target = (clamped / 100) * containerWidth;
+        animatedWidth.value = withTiming(target, {
+            duration: reduceMotion ? 0 : 300,
+        });
+    }, [clamped, containerWidth, reduceMotion]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        width: animatedWidth.value,
+    }));
+    return (_jsx(View, { style: { flex: 1 }, onLayout: (e) => setContainerWidth(e.nativeEvent.layout.width), children: _jsx(Reanimated.View, { style: [
+                {
+                    height,
+                    borderRadius,
+                    backgroundColor: fillColor,
+                },
+                animatedStyle,
+            ] }) }));
+}
+function IndeterminateFill({ fillColor, height, borderRadius, reduceMotion, }) {
+    const opacity = useRef(new Animated.Value(reduceMotion ? 0.7 : 0.4)).current;
+    useEffect(() => {
+        if (reduceMotion) {
+            opacity.setValue(0.7);
+            return;
+        }
+        const animation = Animated.loop(Animated.sequence([
+            Animated.timing(opacity, {
+                toValue: 1.0,
+                duration: 800,
+                useNativeDriver: shouldUseNativeDriver,
+            }),
+            Animated.timing(opacity, {
+                toValue: 0.4,
+                duration: 800,
+                useNativeDriver: shouldUseNativeDriver,
+            }),
+        ]));
+        animation.start();
+        return () => animation.stop();
+    }, [opacity, reduceMotion]);
+    return (_jsx(Animated.View, { style: {
+            width: "40%",
+            height,
+            borderRadius,
+            backgroundColor: fillColor,
+            opacity,
+        } }));
+}

package/dist/components/RadioGroup.d.ts

@@ -0,0 +1,65 @@
+import { StyleProp, ViewStyle } from "react-native";
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
+/**
+ * Size variants for RadioGroup items
+ */
+export type RadioGroupSize = "sm" | "md" | "lg";
+export interface RadioGroupProps extends Omit<RadioGroupPrimitive.RootProps, "style"> {
+    /**
+     * Size variant for all items
+     * @default "md"
+     */
+    size?: RadioGroupSize;
+    /**
+     * Whether the group is in an error state
+     */
+    error?: boolean;
+    /**
+     * Custom style override
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * RadioGroup Component
+ * A group of radio buttons for single selection.
+ * Uses @rn-primitives/radio-group with animated indicators.
+ *
+ * Usage:
+ * ```tsx
+ * const [value, setValue] = useState("option1");
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroup.Item value="option1" label="Option 1" />
+ *   <RadioGroup.Item value="option2" label="Option 2" />
+ *   <RadioGroup.Item value="option3" label="Option 3" />
+ * </RadioGroup>
+ * ```
+ */
+declare function RadioGroupRoot({ size, error, value, onValueChange, style: styleOverride, children, ...props }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+export interface RadioGroupItemProps extends Omit<RadioGroupPrimitive.ItemProps, "style"> {
+    /**
+     * Optional label text displayed next to the radio button
+     */
+    label?: string;
+    /**
+     * Whether the field is required (shows asterisk in label)
+     */
+    required?: boolean;
+    /**
+     * Custom style override for the radio circle
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Style for the label container row
+     */
+    labelStyle?: StyleProp<ViewStyle>;
+}
+/**
+ * RadioGroupItem Component
+ * Individual radio button with optional label.
+ * Must be rendered inside a RadioGroup.
+ */
+declare function RadioGroupItem({ label, required, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }: RadioGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare const RadioGroupComponent: typeof RadioGroupRoot & {
+    Item: typeof RadioGroupItem;
+};
+export { RadioGroupComponent as RadioGroup, RadioGroupItem };

package/dist/components/RadioGroup.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect } from "react";
+import { View, StyleSheet, Pressable } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { StyledText } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { hapticLight } from "../lib/haptics";
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
+const DEFAULT_HIT_SLOP = 8;
+const SIZE_CONFIGS = {
+    sm: { outer: 16, inner: 8, borderWidth: 1 },
+    md: { outer: 20, inner: 10, borderWidth: 1 },
+    lg: { outer: 24, inner: 12, borderWidth: 1 },
+};
+const RadioGroupContext = createContext(null);
+function useRadioGroupContext() {
+    const context = useContext(RadioGroupContext);
+    if (context === null) {
+        throw new Error("RadioGroup compound components cannot be rendered outside the RadioGroup component");
+    }
+    return context;
+}
+/**
+ * RadioGroup Component
+ * A group of radio buttons for single selection.
+ * Uses @rn-primitives/radio-group with animated indicators.
+ *
+ * Usage:
+ * ```tsx
+ * const [value, setValue] = useState("option1");
+ * <RadioGroup value={value} onValueChange={setValue}>
+ *   <RadioGroup.Item value="option1" label="Option 1" />
+ *   <RadioGroup.Item value="option2" label="Option 2" />
+ *   <RadioGroup.Item value="option3" label="Option 3" />
+ * </RadioGroup>
+ * ```
+ */
+function RadioGroupRoot({ size = "md", error = false, value, onValueChange, style: styleOverride, children, ...props }) {
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    return (_jsx(RadioGroupContext.Provider, { value: { size, error, value, onValueChange }, children: _jsx(RadioGroupPrimitive.Root, { ...props, value: value, onValueChange: onValueChange, style: {
+                flexDirection: "column",
+                gap: spacing.listItemSpacing,
+                ...(flattenedStyle || {}),
+            }, children: children }) }));
+}
+/**
+ * RadioGroupItem Component
+ * Individual radio button with optional label.
+ * Must be rendered inside a RadioGroup.
+ */
+function RadioGroupItem({ label, required = false, style: styleOverride, labelStyle, value: itemValue, disabled, ...props }) {
+    const { theme, getContrastingColor } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const { size, error, value: groupValue, onValueChange } = useRadioGroupContext();
+    const sizeConfig = SIZE_CONFIGS[size];
+    const isChecked = groupValue === itemValue;
+    // Animated dot scale — follows Checkbox opacity pattern
+    const dotScale = useSharedValue(isChecked ? 1 : 0);
+    useEffect(() => {
+        dotScale.value = reduceMotion
+            ? (isChecked ? 1 : 0)
+            : withTiming(isChecked ? 1 : 0, { duration: 60 });
+    }, [isChecked, reduceMotion, dotScale]);
+    const dotStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: dotScale.value }],
+    }));
+    // Wrap onPress to add haptic feedback
+    const handlePress = () => {
+        hapticLight();
+    };
+    // Border color follows Checkbox pattern
+    const borderColor = error
+        ? theme.colors.destructive
+        : isChecked
+            ? theme.colors.primary
+            : getContrastingColor(theme.colors.background, theme.colors.text, theme.colors.textDim);
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    const radioElement = (_jsx(RadioGroupPrimitive.Item, { ...props, value: itemValue, disabled: disabled, onPress: handlePress, style: {
+            borderColor,
+            backgroundColor: "transparent",
+            borderRadius: sizeConfig.outer / 2,
+            borderWidth: sizeConfig.borderWidth,
+            width: sizeConfig.outer,
+            height: sizeConfig.outer,
+            justifyContent: "center",
+            alignItems: "center",
+            opacity: disabled ? 0.5 : 1,
+            ...(flattenedStyle || {}),
+        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityLabel: label, children: _jsx(Animated.View, { style: [
+                dotStyle,
+                {
+                    width: sizeConfig.inner,
+                    height: sizeConfig.inner,
+                    borderRadius: sizeConfig.inner / 2,
+                    backgroundColor: theme.colors.primary,
+                },
+            ] }) }));
+    // If no label, return just the radio button
+    if (!label) {
+        return radioElement;
+    }
+    // With label, wrap in a pressable row — tapping the label selects the item
+    return (_jsxs(Pressable, { onPress: () => {
+            if (!disabled) {
+                hapticLight();
+                onValueChange(itemValue);
+            }
+        }, style: [styles.container, labelStyle], disabled: disabled, accessibilityRole: "radio", accessibilityState: {
+            checked: isChecked,
+            disabled: !!disabled,
+        }, accessibilityLabel: label, children: [radioElement, _jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: [
+                        styles.label,
+                        { color: theme.colors.text },
+                        disabled && styles.disabledLabel,
+                        error && { color: theme.colors.destructive },
+                    ], children: [label, required && (_jsx(StyledText, { style: [styles.required, { color: theme.colors.destructive }], children: " *" }))] }) })] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.sm,
+    },
+    labelContainer: {
+        flex: 1,
+    },
+    label: {
+        fontSize: 14,
+    },
+    disabledLabel: {
+        opacity: 0.5,
+    },
+    required: {
+        fontWeight: "bold",
+    },
+});
+// Compound export
+const RadioGroupComponent = Object.assign(RadioGroupRoot, {
+    Item: RadioGroupItem,
+});
+export { RadioGroupComponent as RadioGroup, RadioGroupItem };

package/dist/components/Select.d.ts

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { View } from "react-native";
+import * as SelectPrimitive from "@rn-primitives/select";
+/**
+ * Size variants for SelectTrigger
+ */
+type SelectSize = "sm" | "md" | "lg";
+/**
+ * SelectTrigger Component
+ * Button that shows the current value and a chevron-down icon
+ * Supports sm/md/lg sizes and error state
+ */
+type SelectTriggerProps = SelectPrimitive.TriggerProps & {
+    size?: SelectSize;
+    error?: boolean;
+};
+declare function SelectTrigger({ size, error, children, style: styleOverride, disabled, ...props }: SelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectValue Component
+ * Displays the selected value text or placeholder
+ */
+type SelectValueProps = SelectPrimitive.ValueProps & {
+    size?: SelectSize;
+};
+declare function SelectValue({ size, placeholder, style: styleOverride, ...props }: SelectValueProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectContent Component
+ * Dropdown overlay following the DropdownMenu.Content pattern
+ * Uses portal + FullWindowOverlay on iOS, React.Fragment on other platforms
+ */
+type SelectContentProps = SelectPrimitive.ContentProps & {
+    portalHost?: string;
+};
+declare function SelectContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: SelectContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectItem Component
+ * Individual option in the select dropdown
+ * Shows a check icon on the left when selected
+ */
+type SelectItemProps = SelectPrimitive.ItemProps;
+declare function SelectItem({ children, style: styleOverride, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectGroup Component
+ * Groups related select items together
+ */
+type SelectGroupProps = SelectPrimitive.GroupProps;
+declare function SelectGroup({ style: styleOverride, ...props }: SelectGroupProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectLabel Component
+ * Label for a group of select items
+ */
+type SelectLabelProps = SelectPrimitive.LabelProps;
+declare function SelectLabel({ style: styleOverride, ...props }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * SelectSeparator Component
+ * Visual divider between select item groups
+ */
+type SelectSeparatorProps = SelectPrimitive.SeparatorProps;
+declare function SelectSeparator({ style: styleOverride, ...props }: SelectSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Select Component with Sub-components
+ * Properly typed interface for dot notation access (e.g., Select.Trigger)
+ */
+declare const Select: {
+    ({ asChild, value: valueProp, defaultValue, onValueChange: onValueChangeProp, onOpenChange: onOpenChangeProp, disabled, ref, ...viewProps }: import("react-native").ViewProps & {
+        asChild?: boolean;
+    } & {
+        value?: import("@rn-primitives/select").Option;
+        defaultValue?: import("@rn-primitives/select").Option;
+        onValueChange?: (option: import("@rn-primitives/select").Option) => void;
+        onOpenChange?: (open: boolean) => void;
+        disabled?: boolean;
+        dir?: "ltr" | "rtl";
+        name?: string;
+        required?: boolean;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+} & {
+    Trigger: typeof SelectTrigger;
+    Value: typeof SelectValue;
+    Content: typeof SelectContent;
+    Item: typeof SelectItem;
+    Group: typeof SelectGroup;
+    Label: typeof SelectLabel;
+    Separator: typeof SelectSeparator;
+};
+export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, };
+export type { SelectSize, SelectTriggerProps, SelectValueProps, SelectContentProps, SelectItemProps, SelectGroupProps, SelectLabelProps, SelectSeparatorProps, };