@campxdev/react-native-blueprint 0.1.1 → 0.1.2

package/lib/typescript/src/components/ui/NavBar.d.ts

@@ -1,11 +1,273 @@
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface NavBarProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
+import type { ImageSourcePropType } from 'react-native';
+/**
+ * Props for individual navigation bar items
+ *
+ * Defines the structure for each item displayed in the NavBar component.
+ * Each item can have both active and inactive states with different icons.
+ *
+ * @interface NavBarItem
+ *
+ * @property {ImageSourcePropType | React.ReactElement} icon - Icon displayed when item is inactive
+ *   - Can be an image source from require() or { uri: 'url' }
+ *   - Can be a React element like lucide-react-native icons
+ * @property {ImageSourcePropType | React.ReactElement} activeIcon - Icon displayed when item is active
+ *   - Same types as icon property
+ *   - Typically a different color or style variant
+ * @property {string} label - Text label displayed below the icon
+ * @property {() => void} onPress - Callback function invoked when item is pressed
+ * @property {boolean} [disabled] - Optional flag to disable the item interaction
+ *
+ * @example
+ * ```tsx
+ * // Using image sources
+ * const homeItem: NavBarItem = {
+ *   icon: require('./assets/home-inactive.png'),
+ *   activeIcon: require('./assets/home-active.png'),
+ *   label: 'Home',
+ *   onPress: () => console.log('Home pressed'),
+ * };
+ *
+ * // Using React elements (lucide icons)
+ * import { Home } from 'lucide-react-native';
+ * const homeItem: NavBarItem = {
+ *   icon: <Icon as={Home} color="#666" />,
+ *   activeIcon: <Icon as={Home} color="#000" />,
+ *   label: 'Home',
+ *   onPress: () => navigation.navigate('Home'),
+ * };
+ * ```
+ */
+export interface NavBarItem {
+    icon: ImageSourcePropType | React.ReactElement;
+    activeIcon: ImageSourcePropType | React.ReactElement;
+    label: string;
+    onPress: () => void;
+    disabled?: boolean;
 }
-
-export const NavBar: React.ComponentType<NavBarProps>;
-export default NavBar;
+/**
+ * Props for NavBar component
+ *
+ * Configuration options for customizing the NavBar appearance and behavior.
+ * Provides fine-grained control over styling for different states and elements.
+ *
+ * @interface NavBarProps
+ *
+ * @property {NavBarItem[]} items - Array of navigation items to display in the bar
+ * @property {number} activeIndex - Zero-based index of the currently active item
+ *
+ * @property {string} [className] - Additional Tailwind classes for the main container
+ * @property {string} [itemClassName] - Additional Tailwind classes applied to all items
+ * @property {string} [activeItemClassName] - Additional Tailwind classes for the active item only
+ * @property {string} [labelClassName] - Additional Tailwind classes for all labels
+ * @property {string} [activeLabelClassName] - Additional Tailwind classes for the active label only
+ * @property {string} [backgroundColor] - Custom background color classes (overrides default)
+ * @property {number} [iconSize] - Size of icons in pixels (default: 24)
+ *
+ * @example
+ * ```tsx
+ * const navBarProps: NavBarProps = {
+ *   items: navigationItems,
+ *   activeIndex: 0,
+ *   iconSize: 28,
+ *   className: 'px-4',
+ *   activeItemClassName: 'scale-110',
+ *   backgroundColor: 'bg-white dark:bg-gray-900',
+ * };
+ * ```
+ */
+export interface NavBarProps {
+    items: NavBarItem[];
+    activeIndex: number;
+    className?: string;
+    itemClassName?: string;
+    activeItemClassName?: string;
+    labelClassName?: string;
+    activeLabelClassName?: string;
+    backgroundColor?: string;
+    iconSize?: number;
+}
+/**
+ * NavBar - Bottom navigation bar component
+ *
+ * A navigation component designed for mobile applications that displays at the bottom
+ * of the screen with proper safe area handling. Similar to Flutter's BottomNavigationBar,
+ * it provides an intuitive way to switch between different sections of your app.
+ *
+ * Features:
+ * - Automatic safe area handling for devices with notches/home indicators
+ * - Support for both image and React element icons
+ * - Active/inactive state management with visual feedback
+ * - Customizable styling through Tailwind classes
+ * - Full dark mode support
+ * - Accessibility features built-in
+ * - Disabled state support for items
+ *
+ * @component
+ *
+ * @example
+ * // Basic usage with state management
+ * ```tsx
+ * import { useState } from 'react';
+ * import { NavBar, NavBarItem } from 'react-native-blueprint';
+ *
+ * function App() {
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   const navItems: NavBarItem[] = [
+ *     {
+ *       icon: require('./assets/home-inactive.png'),
+ *       activeIcon: require('./assets/home-active.png'),
+ *       label: 'Home',
+ *       onPress: () => setActiveIndex(0),
+ *     },
+ *     {
+ *       icon: require('./assets/browse-inactive.png'),
+ *       activeIcon: require('./assets/browse-active.png'),
+ *       label: 'Browse',
+ *       onPress: () => setActiveIndex(1),
+ *     },
+ *     {
+ *       icon: require('./assets/feed-inactive.png'),
+ *       activeIcon: require('./assets/feed-active.png'),
+ *       label: 'Feed',
+ *       onPress: () => setActiveIndex(2),
+ *     },
+ *     {
+ *       icon: require('./assets/chat-inactive.png'),
+ *       activeIcon: require('./assets/chat-active.png'),
+ *       label: 'Chat',
+ *       onPress: () => setActiveIndex(3),
+ *     },
+ *   ];
+ *
+ *   return (
+ *     <View style={{ flex: 1 }}>
+ *       <View style={{ flex: 1 }}>
+ *         {renderScreen(activeIndex)}
+ *       </View>
+ *       <NavBar items={navItems} activeIndex={activeIndex} />
+ *     </View>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With React Navigation
+ * ```tsx
+ * import { useNavigation, useRoute } from '@react-navigation/native';
+ * import { Home, Search, Bell, MessageCircle } from 'lucide-react-native';
+ * import { Icon } from 'react-native-blueprint';
+ *
+ * function BottomTabBar() {
+ *   const navigation = useNavigation();
+ *   const route = useRoute();
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   const navItems: NavBarItem[] = [
+ *     {
+ *       icon: <Icon as={Home} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Home} size={24} color="#000" />,
+ *       label: 'Home',
+ *       onPress: () => {
+ *         setActiveIndex(0);
+ *         navigation.navigate('Home');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={Search} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Search} size={24} color="#000" />,
+ *       label: 'Browse',
+ *       onPress: () => {
+ *         setActiveIndex(1);
+ *         navigation.navigate('Browse');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={Bell} size={24} color="#666" />,
+ *       activeIcon: <Icon as={Bell} size={24} color="#000" />,
+ *       label: 'Feed',
+ *       onPress: () => {
+ *         setActiveIndex(2);
+ *         navigation.navigate('Feed');
+ *       },
+ *     },
+ *     {
+ *       icon: <Icon as={MessageCircle} size={24} color="#666" />,
+ *       activeIcon: <Icon as={MessageCircle} size={24} color="#000" />,
+ *       label: 'Chat',
+ *       onPress: () => {
+ *         setActiveIndex(3);
+ *         navigation.navigate('Chat');
+ *       },
+ *     },
+ *   ];
+ *
+ *   return <NavBar items={navItems} activeIndex={activeIndex} />;
+ * }
+ * ```
+ *
+ * @example
+ * // With custom styling and theming
+ * ```tsx
+ * import { useTheme } from 'react-native-blueprint';
+ *
+ * function ThemedNavBar() {
+ *   const { isDark } = useTheme();
+ *   const [activeIndex, setActiveIndex] = useState(0);
+ *
+ *   return (
+ *     <NavBar
+ *       items={navItems}
+ *       activeIndex={activeIndex}
+ *       backgroundColor="bg-gray-100 dark:bg-gray-900"
+ *       iconSize={28}
+ *       className="py-2 px-4"
+ *       activeItemClassName="scale-110 transition-transform"
+ *       activeLabelClassName="text-blue-600 dark:text-blue-400 font-bold"
+ *       labelClassName="text-gray-500 dark:text-gray-400"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With disabled items
+ * ```tsx
+ * const navItems: NavBarItem[] = [
+ *   {
+ *     icon: require('./assets/home-inactive.png'),
+ *     activeIcon: require('./assets/home-active.png'),
+ *     label: 'Home',
+ *     onPress: () => setActiveIndex(0),
+ *   },
+ *   {
+ *     icon: require('./assets/premium-inactive.png'),
+ *     activeIcon: require('./assets/premium-active.png'),
+ *     label: 'Premium',
+ *     onPress: () => showUpgradeModal(),
+ *     disabled: !user.isPremium, // Disable if user is not premium
+ *   },
+ * ];
+ * ```
+ *
+ * @param {NavBarProps} props - Component props
+ * @param {React.Ref<ViewRef>} ref - Forwarded ref to the container View
+ *
+ * @returns {React.ReactElement} The rendered NavBar component
+ *
+ * @accessibility
+ * - Sets role="navigation" on the container for proper semantic structure
+ * - Each item has role="button" with appropriate labels
+ * - Uses aria-label for screen reader support
+ * - Indicates selected state with aria-selected
+ * - Respects and communicates disabled state
+ * - Provides accessibilityRole and accessibilityLabel for React Native
+ * - Includes accessibilityState for selected and disabled states
+ *
+ * @see {@link NavBarItem} for item configuration
+ * @see {@link NavBarProps} for all available props
+ */
+declare const NavBar: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<import("react-native/types_generated/src/private/types/HostInstance").LegacyHostInstanceMethods>>;
+export { NavBar };
+//# sourceMappingURL=NavBar.d.ts.map

package/lib/typescript/src/components/ui/Popover.d.ts

@@ -1,11 +1,71 @@
+import * as PopoverPrimitive from '@rn-primitives/popover';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface PopoverProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Popover: React.ComponentType<PopoverProps>;
-export default Popover;
+/**
+ * Root component for popover - provides context for trigger and content
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button variant="outline">
+ *       <Text>Open Popover</Text>
+ *     </Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <Text>Popover content goes here</Text>
+ *   </PopoverContent>
+ * </Popover>
+ * ```
+ */
+declare const Popover: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
+    asChild?: boolean;
+} & {
+    onOpenChange?: (open: boolean) => void;
+} & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Trigger component that opens the popover when pressed
+ *
+ * @component
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<import("react-native").PressableProps & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>, "ref"> & {
+    asChild?: boolean;
+} & {
+    onKeyDown?: (ev: React.KeyboardEvent) => void;
+    onKeyUp?: (ev: React.KeyboardEvent) => void;
+} & React.RefAttributes<import("@rn-primitives/popover").TriggerRef>>;
+/**
+ * Content container for popover
+ *
+ * Displays content in a floating panel anchored to the trigger.
+ * Includes smooth animations and proper positioning.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PopoverContent align="start" sideOffset={8}>
+ *   <View className="gap-2">
+ *     <Text className="font-semibold">Dimensions</Text>
+ *     <Text className="text-sm">Set the dimensions for the layer</Text>
+ *   </View>
+ * </PopoverContent>
+ * ```
+ *
+ * @accessibility
+ * - Content is announced by screen readers
+ * - Dismissible with escape key on web
+ * - Proper focus management
+ */
+declare function PopoverContent({ className, align, sideOffset, portalHost, ...props }: PopoverPrimitive.ContentProps & React.RefAttributes<PopoverPrimitive.ContentRef> & {
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=Popover.d.ts.map

package/lib/typescript/src/components/ui/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO;;;;;OAAC,CAAA;;OAG8B,CAAA;uBAHP,CAAC;AAEtC;;;;GAIG;AACH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAPN,CAAA;;OAG8B,CAAA;;;;;;qEAIG,CAAC;AAQhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,UAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAkCF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Popover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,OAAO;;;;;OAAC,CAAA;;OAG8B,CAAA;uBAHP,CAAC;AAEtC;;;;GAIG;AACH,QAAA,MAAM,cAAc;OAPN,CAAA;;OAG8B,CAAA;;;;;;qEAIG,CAAC;AAQhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,UAAU,EACV,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACjD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAkCF;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC"}

package/lib/typescript/src/components/ui/Progress.d.ts

@@ -1,11 +1,27 @@
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface ProgressProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Progress: React.ComponentType<ProgressProps>;
-export default Progress;
+import * as ProgressPrimitive from '@rn-primitives/progress';
+/**
+ * Progress bar component for displaying task completion
+ *
+ * Displays an animated progress indicator with customizable styles.
+ * Uses spring animations on native platforms for smooth transitions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Progress value={60} className="w-full" />
+ *
+ * <Progress
+ *   value={progress}
+ *   indicatorClassName="bg-green-500"
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA attributes for progress indication
+ * - Value changes are announced by screen readers
+ */
+declare function Progress({ className, value, indicatorClassName, ...props }: ProgressPrimitive.RootProps & React.RefAttributes<ProgressPrimitive.RootRef> & {
+    indicatorClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Progress };
+//# sourceMappingURL=Progress.d.ts.map

package/lib/typescript/src/components/ui/Radio-Group.d.ts

@@ -1,11 +1,47 @@
-import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface Radio-GroupProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Radio-Group: React.ComponentType<Radio-GroupProps>;
-export default Radio-Group;
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+/**
+ * Radio group component for single-choice selection
+ *
+ * Groups radio buttons together to ensure only one can be selected at a time.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+ *   <View className="flex-row items-center gap-2">
+ *     <RadioGroupItem value="option1" />
+ *     <Label>Option 1</Label>
+ *   </View>
+ *   <View className="flex-row items-center gap-2">
+ *     <RadioGroupItem value="option2" />
+ *     <Label>Option 2</Label>
+ *   </View>
+ * </RadioGroup>
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA role for radio group
+ * - Keyboard navigation support (arrow keys)
+ * - Screen reader friendly with proper labeling
+ */
+declare function RadioGroup({ className, ...props }: RadioGroupPrimitive.RootProps & React.RefAttributes<RadioGroupPrimitive.RootRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual radio button item
+ *
+ * Displays as a circular button with an inner indicator when selected.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RadioGroupItem value="dark" />
+ * <RadioGroupItem value="light" disabled />
+ * ```
+ *
+ * @accessibility
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ * - Invalid state styling for form validation
+ */
+declare function RadioGroupItem({ className, ...props }: RadioGroupPrimitive.ItemProps & React.RefAttributes<RadioGroupPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=Radio-Group.d.ts.map

package/lib/typescript/src/components/ui/Select.d.ts

@@ -1,11 +1,107 @@
+import * as SelectPrimitive from '@rn-primitives/select';
 import * as React from 'react';
-import { ViewProps } from 'react-native';
-
-export interface SelectProps extends ViewProps {
-  className?: string;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export const Select: React.ComponentType<SelectProps>;
-export default Select;
+import { ScrollView } from 'react-native';
+/**
+ * Option type for select items
+ */
+type Option = SelectPrimitive.Option;
+/**
+ * Root select component for dropdown selection
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Select value={value} onValueChange={setValue}>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select an option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">
+ *       <Text>Option 1</Text>
+ *     </SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+declare const Select: React.ForwardRefExoticComponent<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<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Groups related select items together
+ * @component
+ */
+declare const SelectGroup: React.ForwardRefExoticComponent<import("react-native").ViewProps & {
+    asChild?: boolean;
+} & React.RefAttributes<(props: Omit<import("react-native/types_generated/Libraries/Components/View/ViewPropTypes").ViewProps, keyof {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}> & {
+    ref?: React.Ref<React.ComponentRef<typeof import("react-native/types_generated/Libraries/Components/View/ViewNativeComponent").default>>;
+}) => React.ReactNode>>;
+/**
+ * Displays the selected value or placeholder text
+ * @component
+ */
+declare function SelectValue({ ref, className, ...props }: SelectPrimitive.ValueProps & React.RefAttributes<SelectPrimitive.ValueRef> & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Trigger button that opens the select dropdown
+ * @component
+ */
+declare function SelectTrigger({ ref, className, children, size, ...props }: SelectPrimitive.TriggerProps & React.RefAttributes<SelectPrimitive.TriggerRef> & {
+    children?: React.ReactNode;
+    size?: 'default' | 'sm';
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content container for select items
+ * @component
+ */
+declare function SelectContent({ className, children, position, portalHost, ...props }: SelectPrimitive.ContentProps & React.RefAttributes<SelectPrimitive.ContentRef> & {
+    className?: string;
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Label for grouping select items
+ * @component
+ */
+declare function SelectLabel({ className, ...props }: SelectPrimitive.LabelProps & React.RefAttributes<SelectPrimitive.LabelRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual selectable item
+ * @component
+ */
+declare function SelectItem({ className, children: _children, ...props }: SelectPrimitive.ItemProps & React.RefAttributes<SelectPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Visual separator between select items
+ * @component
+ */
+declare function SelectSeparator({ className, ...props }: SelectPrimitive.SeparatorProps & React.RefAttributes<SelectPrimitive.SeparatorRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+/**
+ * @platform Native only
+ * Returns the children on the web
+ */
+declare function NativeSelectScrollView({ className, ...props }: React.ComponentProps<typeof ScrollView>): import("react/jsx-runtime").JSX.Element;
+export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type Option, };
+//# sourceMappingURL=Select.d.ts.map