@campxdev/react-native-blueprint 0.1.9 → 0.1.12

package/lib/typescript/module/src/components/ui/Input.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { TextInput as RNTextInput, type TextInputProps } from 'react-native';
+/**
+ * Props for Input component
+ *
+ * @extends TextInputProps - All standard React Native TextInput props
+ * @property {string} [className] - Additional Tailwind classes for custom styling
+ * @property {boolean} [editable=true] - Whether the input is editable (disabled when false)
+ */
+interface InputProps extends Omit<TextInputProps, 'editable'> {
+    className?: string;
+    editable?: boolean;
+}
+/**
+ * A styled text input component with consistent design across platforms
+ *
+ * Features platform-specific behaviors:
+ * - Web: Focus ring, selection styling, aria-invalid support
+ * - Native: Optimized placeholder opacity and input styling
+ *
+ * Automatically adapts styling when disabled/non-editable.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic input
+ * <Input
+ *   placeholder="Enter your name"
+ *   value={name}
+ *   onChangeText={setName}
+ * />
+ *
+ * // Disabled input
+ * <Input
+ *   value="Read only"
+ *   editable={false}
+ * />
+ *
+ * // With custom styling
+ * <Input
+ *   className="border-primary"
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Supports aria-invalid for form validation states (web)
+ * - Placeholder text uses appropriate contrast colors
+ * - Disabled state is visually indicated with opacity
+ */
+declare function Input({ className, editable, ...props }: InputProps & React.RefAttributes<RNTextInput>): import("react/jsx-runtime").JSX.Element;
+export { Input };
+export type { InputProps };
+//# sourceMappingURL=Input.d.ts.map

package/lib/typescript/module/src/components/ui/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,SAAS,IAAI,WAAW,EACxB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAOtB;;;;;;GAMG;AACH,UAAU,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,QAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,2CA4B/C;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/lib/typescript/module/src/components/ui/Label.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import type { SlottableTextProps } from '@rn-primitives/types';
+/**
+ * Accessible label component for form controls
+ *
+ * Provides semantic labeling for form inputs with proper styling and accessibility support.
+ * Automatically associates with form controls and respects disabled states.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Label with input
+ * <View className="gap-2">
+ *   <Label htmlFor="email">Email Address</Label>
+ *   <Input id="email" placeholder="Enter email" />
+ * </View>
+ *
+ * // Label for checkbox
+ * <View className="flex-row items-center gap-2">
+ *   <Checkbox id="terms" />
+ *   <Label htmlFor="terms">I agree to the terms and conditions</Label>
+ * </View>
+ * ```
+ *
+ * @accessibility
+ * - Properly associates with form controls via htmlFor/id
+ * - Reduced opacity when associated control is disabled
+ * - Screen reader compatible
+ */
+declare const Label: React.ForwardRefExoticComponent<SlottableTextProps & {
+    className?: string;
+} & React.RefAttributes<import("react-native/types_generated/src/private/types/HostInstance").LegacyHostInstanceMethods>>;
+export { Label };
+//# sourceMappingURL=Label.d.ts.map

package/lib/typescript/module/src/components/ui/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAW,MAAM,sBAAsB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,QAAA,MAAM,KAAK;gBAE0B,MAAM;yHAUzC,CAAC;AAGH,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/lib/typescript/module/src/components/ui/Menubar.d.ts

@@ -0,0 +1,142 @@
+import * as MenubarPrimitive from '@rn-primitives/menubar';
+import * as React from 'react';
+import { type StyleProp, type TextProps, type ViewStyle } from 'react-native';
+/**
+ * Individual menu within the menubar
+ *
+ * @component
+ */
+declare const MenubarMenu: React.ForwardRefExoticComponent<MenubarPrimitive.MenuProps>;
+/**
+ * Groups related menu items together
+ *
+ * @component
+ */
+declare const MenubarGroup: React.ForwardRefExoticComponent<MenubarPrimitive.GroupProps>;
+/**
+ * Portal component to render menu content outside the DOM hierarchy
+ *
+ * @component
+ */
+declare const MenubarPortal: React.ForwardRefExoticComponent<MenubarPrimitive.PortalProps>;
+/**
+ * Root component for nested submenu
+ *
+ * @component
+ */
+declare const MenubarSub: React.ForwardRefExoticComponent<MenubarPrimitive.SubProps>;
+/**
+ * Groups radio items together with single selection
+ *
+ * @component
+ */
+declare const MenubarRadioGroup: React.ForwardRefExoticComponent<MenubarPrimitive.RadioGroupProps>;
+/**
+ * Root menubar component for application-level menu navigation
+ *
+ * Provides horizontal menu bar similar to desktop applications, with support
+ * for nested menus and automatic close on outside press.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Menubar>
+ *   <MenubarMenu>
+ *     <MenubarTrigger>
+ *       <Text>File</Text>
+ *     </MenubarTrigger>
+ *     <MenubarContent>
+ *       <MenubarItem>
+ *         <Text>New File</Text>
+ *       </MenubarItem>
+ *       <MenubarItem>
+ *         <Text>Open</Text>
+ *       </MenubarItem>
+ *     </MenubarContent>
+ *   </MenubarMenu>
+ * </Menubar>
+ * ```
+ *
+ * @accessibility
+ * - Keyboard navigation support
+ * - Proper ARIA attributes for menu structure
+ */
+declare function Menubar({ className, value: valueProp, onValueChange: onValueChangeProp, ...props }: MenubarPrimitive.RootProps & React.RefAttributes<MenubarPrimitive.RootRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Trigger button for a menubar menu
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <MenubarTrigger>
+ *   <Text>Edit</Text>
+ * </MenubarTrigger>
+ * ```
+ */
+declare function MenubarTrigger({ className, ...props }: MenubarPrimitive.TriggerProps & React.RefAttributes<MenubarPrimitive.TriggerRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Trigger for opening a nested submenu
+ * @component
+ */
+declare function MenubarSubTrigger({ className: _className, inset, children, iconClassName, ...props }: MenubarPrimitive.SubTriggerProps & React.RefAttributes<MenubarPrimitive.SubTriggerRef> & {
+    children?: React.ReactNode;
+    iconClassName?: string;
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Content container for nested submenu items
+ * @component
+ */
+declare function MenubarSubContent({ className, ...props }: MenubarPrimitive.SubContentProps & React.RefAttributes<MenubarPrimitive.SubContentRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main content container for menu items
+ * @component
+ */
+declare function MenubarContent({ className, overlayClassName: _overlayClassName, overlayStyle: _overlayStyle, portalHost, align, alignOffset, sideOffset, ...props }: MenubarPrimitive.ContentProps & React.RefAttributes<MenubarPrimitive.ContentRef> & {
+    overlayStyle?: StyleProp<ViewStyle>;
+    overlayClassName?: string;
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual menu item component
+ * @component
+ */
+declare function MenubarItem({ className, inset, variant, ...props }: MenubarPrimitive.ItemProps & React.RefAttributes<MenubarPrimitive.ItemRef> & {
+    className?: string;
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Menu item with checkbox for multi-selection
+ * @component
+ */
+declare function MenubarCheckboxItem({ className, children, ...props }: MenubarPrimitive.CheckboxItemProps & React.RefAttributes<MenubarPrimitive.CheckboxItemRef> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Menu item with radio button for single selection within a group
+ * @component
+ */
+declare function MenubarRadioItem({ className, children, ...props }: MenubarPrimitive.RadioItemProps & React.RefAttributes<MenubarPrimitive.RadioItemRef> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Label component for grouping and describing menu sections
+ * @component
+ */
+declare function MenubarLabel({ className, inset, ...props }: MenubarPrimitive.LabelProps & React.RefAttributes<MenubarPrimitive.LabelRef> & {
+    className?: string;
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Visual separator between menu items or sections
+ * @component
+ */
+declare function MenubarSeparator({ className, ...props }: MenubarPrimitive.SeparatorProps & React.RefAttributes<MenubarPrimitive.SeparatorRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays keyboard shortcut hint for menu items
+ * @component
+ */
+declare function MenubarShortcut({ className, ...props }: TextProps & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, };
+//# sourceMappingURL=Menubar.d.ts.map

package/lib/typescript/module/src/components/ui/Menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Menubar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAC;AAQ3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAetB;;;;GAIG;AACH,QAAA,MAAM,WAAW,6DAAwB,CAAC;AAE1C;;;;GAIG;AACH,QAAA,MAAM,YAAY,8DAAyB,CAAC;AAE5C;;;;GAIG;AACH,QAAA,MAAM,aAAa,+DAA0B,CAAC;AAE9C;;;;GAIG;AACH,QAAA,MAAM,UAAU,4DAAuB,CAAC;AAExC;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,mEAA8B,CAAC;AAQtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,KAAK,EAAE,SAAS,EAChB,aAAa,EAAE,iBAAiB,EAChC,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,CAAC,2CA+B5E;AAED;;;;;;;;;;GAUG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,2CAwBjD;AAED;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EAAE,UAAU,EACrB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,eAAe,GACjC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,aAAa,CAAC,GAAG;IACpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAiCF;AAED;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,eAAe,GACjC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,aAAa,CAAC,2CAepD;AAED;;;GAGG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,gBAAgB,EAAE,iBAAiB,EACnC,YAAY,EAAE,aAAa,EAC3B,UAAU,EACV,KAAe,EACf,WAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,YAAY,GAC9B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAG;IACjD,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAgCF;AAED;;;GAGG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,SAAS,GAC3B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,OAAO,CAAC,GAAG;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;CACrC,2CA6BF;AAED;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,iBAAiB,GACnC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,eAAe,CAAC,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CA6BF;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,cAAc,GAChC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAuBF;AAED;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,UAAU,GAC5B,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,2CAWF;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,cAAc,GAChC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,YAAY,CAAC,2CAOnD;AAED;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,2CAUvC;AAED,OAAO,EACL,OAAO,EACP,mBAAmB,EACnB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,GACf,CAAC"}

package/lib/typescript/module/src/components/ui/Native-Only-Animated-View.d.ts

@@ -0,0 +1,26 @@
+import Animated from 'react-native-reanimated';
+/**
+ * Platform-conditional animated view component
+ *
+ * Renders an Animated.View on native platforms (iOS/Android) and a React Fragment
+ * on web. This utility helps maintain consistent animation APIs across platforms
+ * while avoiding web-incompatible animations.
+ *
+ * Used internally by other components like Dialog, Popover, Tooltip, etc. to provide
+ * smooth entrance/exit animations on native while gracefully degrading to no animation
+ * on web where certain Reanimated features are not supported.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+ *   <View><Text>Animated content on native, static on web</Text></View>
+ * </NativeOnlyAnimatedView>
+ * ```
+ *
+ * @platform iOS, Android - Full animation support
+ * @platform web - Renders as Fragment without animations
+ */
+declare function NativeOnlyAnimatedView(props: React.ComponentProps<typeof Animated.View> & React.RefAttributes<Animated.View>): import("react/jsx-runtime").JSX.Element;
+export { NativeOnlyAnimatedView };
+//# sourceMappingURL=Native-Only-Animated-View.d.ts.map

package/lib/typescript/module/src/components/ui/Native-Only-Animated-View.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Native-Only-Animated-View.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Native-Only-Animated-View.tsx"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,sBAAsB,CAC7B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,GAC/C,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,2CAOrC;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

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

@@ -0,0 +1,273 @@
+import * as React from 'react';
+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;
+}
+/**
+ * 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/module/src/components/ui/NavBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/NavBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAkBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC;IAC/C,UAAU,EAAE,mBAAmB,GAAG,KAAK,CAAC,YAAY,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoLG;AACH,QAAA,MAAM,MAAM,qKA4GX,CAAC;AAIF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -0,0 +1,54 @@
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as React from 'react';
+/**
+ * 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<PopoverPrimitive.RootProps>;
+/**
+ * Trigger component that opens the popover when pressed
+ *
+ * @component
+ */
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.TriggerProps>;
+/**
+ * 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/module/src/components/ui/Popover.d.ts.map

@@ -0,0 +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,6DAAwB,CAAC;AAEtC;;;;GAIG;AACH,QAAA,MAAM,cAAc,gEAA2B,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/module/src/components/ui/Progress.d.ts

@@ -0,0 +1,27 @@
+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/module/src/components/ui/Progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Progress.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,iBAAiB,MAAM,yBAAyB,CAAC;AAe7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,kBAAkB,EAClB,GAAG,KAAK,EACT,EAAE,iBAAiB,CAAC,SAAS,GAC5B,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,GAAG;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,2CAYF;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}