@campxdev/react-native-blueprint 0.1.0

package/lib/module/components/ui/NavBar.js

@@ -0,0 +1,352 @@
+"use strict";
+
+import * as React from 'react';
+import { View as RNView, Pressable as RNPressable, Image } from 'react-native';
+import { SafeAreaView as RNSafeAreaView } from 'react-native-safe-area-context';
+import { cssInterop } from 'nativewind';
+import { cn } from "../../lib/utils.js";
+import { Text, TextClassContext } from "./Text.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Enable NativeWind className support
+const View = cssInterop(RNView, {
+  className: 'style'
+});
+const Pressable = cssInterop(RNPressable, {
+  className: 'style'
+});
+const SafeAreaView = cssInterop(RNSafeAreaView, {
+  className: 'style'
+});
+
+/**
+ * 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'),
+ * };
+ * ```
+ */
+
+/**
+ * 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',
+ * };
+ * ```
+ */
+
+/**
+ * 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
+ */
+const NavBar = /*#__PURE__*/React.forwardRef(({
+  items,
+  activeIndex,
+  className,
+  itemClassName,
+  activeItemClassName,
+  labelClassName,
+  activeLabelClassName,
+  backgroundColor,
+  iconSize = 24
+}, ref) => {
+  /**
+   * Renders an icon based on its type (image source or React element)
+   *
+   * @param {NavBarItem} item - The navigation item containing the icon
+   * @param {boolean} isActive - Whether this item is currently active
+   * @returns {React.ReactElement} The rendered icon
+   */
+  const renderIcon = (item, isActive) => {
+    const iconSource = isActive ? item.activeIcon : item.icon;
+
+    // Check if it's a React element (like lucide icon)
+    if (/*#__PURE__*/React.isValidElement(iconSource)) {
+      return iconSource;
+    }
+
+    // It's an image source
+    return /*#__PURE__*/_jsx(Image, {
+      source: iconSource,
+      style: {
+        width: iconSize,
+        height: iconSize
+      },
+      resizeMode: "contain",
+      accessibilityIgnoresInvertColors: true
+    });
+  };
+
+  // Default background color with dark mode support
+  const defaultBgColor = 'bg-background';
+  return /*#__PURE__*/_jsx(SafeAreaView, {
+    edges: ['bottom'],
+    className: cn('border-t border-border', backgroundColor || defaultBgColor),
+    ref: ref,
+    children: /*#__PURE__*/_jsx(View, {
+      className: cn('flex-row items-center justify-around px-2 py-1', className),
+      role: "navigation",
+      children: items.map((item, index) => {
+        const isActive = index === activeIndex;
+        const isDisabled = item.disabled;
+        return /*#__PURE__*/_jsxs(Pressable, {
+          onPress: item.onPress,
+          disabled: isDisabled,
+          className: cn('flex-1 items-center justify-center py-2 px-1 active:opacity-70', isDisabled && 'opacity-40', itemClassName, isActive && activeItemClassName),
+          role: "button",
+          "aria-label": item.label,
+          "aria-selected": isActive,
+          accessibilityRole: "button",
+          accessibilityLabel: item.label,
+          accessibilityState: {
+            selected: isActive,
+            disabled: isDisabled
+          },
+          children: [/*#__PURE__*/_jsx(View, {
+            className: "mb-1.5 mt-2.5",
+            children: renderIcon(item, isActive)
+          }), /*#__PURE__*/_jsx(TextClassContext.Provider, {
+            value: cn('text-xs font-medium text-center', isActive ? activeLabelClassName || 'text-foreground' : labelClassName || 'text-muted-foreground'),
+            children: /*#__PURE__*/_jsx(Text, {
+              children: item.label
+            })
+          })]
+        }, `nav-item-${index}-${item.label}`);
+      })
+    })
+  });
+});
+NavBar.displayName = 'NavBar';
+export { NavBar };
+//# sourceMappingURL=NavBar.js.map

package/lib/module/components/ui/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","RNView","Pressable","RNPressable","Image","SafeAreaView","RNSafeAreaView","cssInterop","cn","Text","TextClassContext","jsx","_jsx","jsxs","_jsxs","className","NavBar","forwardRef","items","activeIndex","itemClassName","activeItemClassName","labelClassName","activeLabelClassName","backgroundColor","iconSize","ref","renderIcon","item","isActive","iconSource","activeIcon","icon","isValidElement","source","style","width","height","resizeMode","accessibilityIgnoresInvertColors","defaultBgColor","edges","children","role","map","index","isDisabled","disabled","onPress","label","accessibilityRole","accessibilityLabel","accessibilityState","selected","Provider","value","displayName"],"sourceRoot":"../../../../src","sources":["components/ui/NavBar.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,IAAIC,MAAM,EAAEC,SAAS,IAAIC,WAAW,EAAEC,KAAK,QAAQ,cAAc;AAE9E,SAASC,YAAY,IAAIC,cAAc,QAAQ,gCAAgC;AAC/E,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,EAAE,QAAQ,oBAAiB;AACpC,SAASC,IAAI,EAAEC,gBAAgB,QAAQ,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGhD;AACA,MAAMd,IAAI,GAAGO,UAAU,CAACN,MAAM,EAAE;EAAEc,SAAS,EAAE;AAAQ,CAAC,CAAC;AACvD,MAAMb,SAAS,GAAGK,UAAU,CAACJ,WAAW,EAAE;EAAEY,SAAS,EAAE;AAAQ,CAAC,CAAC;AACjE,MAAMV,YAAY,GAAGE,UAAU,CAACD,cAAc,EAAE;EAAES,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAEvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAaA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,MAAM,gBAAGjB,KAAK,CAACkB,UAAU,CAC7B,CACE;EACEC,KAAK;EACLC,WAAW;EACXJ,SAAS;EACTK,aAAa;EACbC,mBAAmB;EACnBC,cAAc;EACdC,oBAAoB;EACpBC,eAAe;EACfC,QAAQ,GAAG;AACb,CAAC,EACDC,GAAG,KACA;EACH;AACJ;AACA;AACA;AACA;AACA;AACA;EACI,MAAMC,UAAU,GAAGA,CACjBC,IAAgB,EAChBC,QAAiB,KACM;IACvB,MAAMC,UAAU,GAAGD,QAAQ,GAAGD,IAAI,CAACG,UAAU,GAAGH,IAAI,CAACI,IAAI;;IAEzD;IACA,iBAAIjC,KAAK,CAACkC,cAAc,CAACH,UAAU,CAAC,EAAE;MACpC,OAAOA,UAAU;IACnB;;IAEA;IACA,oBACElB,IAAA,CAACR,KAAK;MACJ8B,MAAM,EAAEJ,UAAkC;MAC1CK,KAAK,EAAE;QAAEC,KAAK,EAAEX,QAAQ;QAAEY,MAAM,EAAEZ;MAAS,CAAE;MAC7Ca,UAAU,EAAC,SAAS;MACpBC,gCAAgC;IAAA,CACjC,CAAC;EAEN,CAAC;;EAED;EACA,MAAMC,cAAc,GAAG,eAAe;EAEtC,oBACE5B,IAAA,CAACP,YAAY;IACXoC,KAAK,EAAE,CAAC,QAAQ,CAAE;IAClB1B,SAAS,EAAEP,EAAE,CACX,wBAAwB,EACxBgB,eAAe,IAAIgB,cACrB,CAAE;IACFd,GAAG,EAAEA,GAAW;IAAAgB,QAAA,eAEhB9B,IAAA,CAACZ,IAAI;MACHe,SAAS,EAAEP,EAAE,CACX,gDAAgD,EAChDO,SACF,CAAE;MACF4B,IAAI,EAAC,YAAY;MAAAD,QAAA,EAEhBxB,KAAK,CAAC0B,GAAG,CAAC,CAAChB,IAAI,EAAEiB,KAAK,KAAK;QAC1B,MAAMhB,QAAQ,GAAGgB,KAAK,KAAK1B,WAAW;QACtC,MAAM2B,UAAU,GAAGlB,IAAI,CAACmB,QAAQ;QAEhC,oBACEjC,KAAA,CAACZ,SAAS;UAER8C,OAAO,EAAEpB,IAAI,CAACoB,OAAQ;UACtBD,QAAQ,EAAED,UAAW;UACrB/B,SAAS,EAAEP,EAAE,CACX,gEAAgE,EAChEsC,UAAU,IAAI,YAAY,EAC1B1B,aAAa,EACbS,QAAQ,IAAIR,mBACd,CAAE;UACFsB,IAAI,EAAC,QAAQ;UACb,cAAYf,IAAI,CAACqB,KAAM;UACvB,iBAAepB,QAAS;UACxBqB,iBAAiB,EAAC,QAAQ;UAC1BC,kBAAkB,EAAEvB,IAAI,CAACqB,KAAM;UAC/BG,kBAAkB,EAAE;YAClBC,QAAQ,EAAExB,QAAQ;YAClBkB,QAAQ,EAAED;UACZ,CAAE;UAAAJ,QAAA,gBAEF9B,IAAA,CAACZ,IAAI;YAACe,SAAS,EAAC,eAAe;YAAA2B,QAAA,EAC5Bf,UAAU,CAACC,IAAI,EAAEC,QAAQ;UAAC,CACvB,CAAC,eACPjB,IAAA,CAACF,gBAAgB,CAAC4C,QAAQ;YACxBC,KAAK,EAAE/C,EAAE,CACP,iCAAiC,EACjCqB,QAAQ,GACJN,oBAAoB,IAAI,iBAAiB,GACzCD,cAAc,IAAI,uBACxB,CAAE;YAAAoB,QAAA,eAEF9B,IAAA,CAACH,IAAI;cAAAiC,QAAA,EAAEd,IAAI,CAACqB;YAAK,CAAO;UAAC,CACA,CAAC;QAAA,GA/BvB,YAAYJ,KAAK,IAAIjB,IAAI,CAACqB,KAAK,EAgC3B,CAAC;MAEhB,CAAC;IAAC,CACE;EAAC,CACK,CAAC;AAEnB,CACF,CAAC;AAEDjC,MAAM,CAACwC,WAAW,GAAG,QAAQ;AAE7B,SAASxC,MAAM","ignoreList":[]}

package/lib/module/components/ui/Popover.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import { NativeOnlyAnimatedView } from "./Native-Only-Animated-View.js";
+import { TextClassContext } from "./Text.js";
+import { cn } from "../../lib/utils.js";
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+/**
+ * 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>
+ * ```
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const Popover = PopoverPrimitive.Root;
+
+/**
+ * Trigger component that opens the popover when pressed
+ *
+ * @component
+ */
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+/**
+ * Full window overlay wrapper for iOS, Fragment for other platforms
+ */
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * 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
+ */
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  portalHost,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(PopoverPrimitive.Portal, {
+    hostName: portalHost,
+    children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+      children: /*#__PURE__*/_jsx(PopoverPrimitive.Overlay, {
+        style: Platform.select({
+          native: StyleSheet.absoluteFill
+        }),
+        children: /*#__PURE__*/_jsx(NativeOnlyAnimatedView, {
+          entering: FadeIn.duration(200),
+          exiting: FadeOut,
+          children: /*#__PURE__*/_jsx(TextClassContext.Provider, {
+            value: "text-popover-foreground",
+            children: /*#__PURE__*/_jsx(PopoverPrimitive.Content, {
+              align: align,
+              sideOffset: sideOffset,
+              className: cn('bg-popover border-border outline-hidden z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5', Platform.select({
+                web: cn('animate-in fade-in-0 zoom-in-95 origin-(--radix-popover-content-transform-origin) cursor-auto', props.side === 'bottom' && 'slide-in-from-top-2', props.side === 'top' && 'slide-in-from-bottom-2')
+              }), className),
+              ...props
+            })
+          })
+        })
+      })
+    })
+  });
+}
+export { Popover, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=Popover.js.map

package/lib/module/components/ui/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NativeOnlyAnimatedView","TextClassContext","cn","PopoverPrimitive","React","Platform","StyleSheet","FadeIn","FadeOut","FullWindowOverlay","RNFullWindowOverlay","jsx","_jsx","Popover","Root","PopoverTrigger","Trigger","OS","Fragment","PopoverContent","className","align","sideOffset","portalHost","props","Portal","hostName","children","Overlay","style","select","native","absoluteFill","entering","duration","exiting","Provider","value","Content","web","side"],"sourceRoot":"../../../../src","sources":["components/ui/Popover.tsx"],"mappings":";;AAAA,SAASA,sBAAsB,QAAQ,gCAA6B;AACpE,SAASC,gBAAgB,QAAQ,WAAQ;AACzC,SAASC,EAAE,QAAQ,oBAAiB;AACpC,OAAO,KAAKC,gBAAgB,MAAM,wBAAwB;AAC1D,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,EAAEC,UAAU,QAAQ,cAAc;AACnD,SAASC,MAAM,EAAEC,OAAO,QAAQ,yBAAyB;AACzD,SAASC,iBAAiB,IAAIC,mBAAmB,QAAQ,sBAAsB;;AAE/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAjBA,SAAAC,GAAA,IAAAC,IAAA;AAkBA,MAAMC,OAAO,GAAGV,gBAAgB,CAACW,IAAI;;AAErC;AACA;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAGZ,gBAAgB,CAACa,OAAO;;AAE/C;AACA;AACA;AACA,MAAMP,iBAAiB,GACrBJ,QAAQ,CAACY,EAAE,KAAK,KAAK,GAAGP,mBAAmB,GAAGN,KAAK,CAACc,QAAQ;;AAE9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAAC;EACtBC,SAAS;EACTC,KAAK,GAAG,QAAQ;EAChBC,UAAU,GAAG,CAAC;EACdC,UAAU;EACV,GAAGC;AAIH,CAAC,EAAE;EACH,oBACEZ,IAAA,CAACT,gBAAgB,CAACsB,MAAM;IAACC,QAAQ,EAAEH,UAAW;IAAAI,QAAA,eAC5Cf,IAAA,CAACH,iBAAiB;MAAAkB,QAAA,eAChBf,IAAA,CAACT,gBAAgB,CAACyB,OAAO;QACvBC,KAAK,EAAExB,QAAQ,CAACyB,MAAM,CAAC;UAAEC,MAAM,EAAEzB,UAAU,CAAC0B;QAAa,CAAC,CAAE;QAAAL,QAAA,eAE5Df,IAAA,CAACZ,sBAAsB;UACrBiC,QAAQ,EAAE1B,MAAM,CAAC2B,QAAQ,CAAC,GAAG,CAAE;UAC/BC,OAAO,EAAE3B,OAAQ;UAAAmB,QAAA,eAEjBf,IAAA,CAACX,gBAAgB,CAACmC,QAAQ;YAACC,KAAK,EAAC,yBAAyB;YAAAV,QAAA,eACxDf,IAAA,CAACT,gBAAgB,CAACmC,OAAO;cACvBjB,KAAK,EAAEA,KAAM;cACbC,UAAU,EAAEA,UAAW;cACvBF,SAAS,EAAElB,EAAE,CACX,kGAAkG,EAClGG,QAAQ,CAACyB,MAAM,CAAC;gBACdS,GAAG,EAAErC,EAAE,CACL,+FAA+F,EAC/FsB,KAAK,CAACgB,IAAI,KAAK,QAAQ,IAAI,qBAAqB,EAChDhB,KAAK,CAACgB,IAAI,KAAK,KAAK,IAAI,wBAC1B;cACF,CAAC,CAAC,EACFpB,SACF,CAAE;cAAA,GACEI;YAAK,CACV;UAAC,CACuB;QAAC,CACN;MAAC,CACD;IAAC,CACV;EAAC,CACG,CAAC;AAE9B;AAEA,SAASX,OAAO,EAAEM,cAAc,EAAEJ,cAAc","ignoreList":[]}

package/lib/module/components/ui/Progress.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import { cn } from "../../lib/utils.js";
+import * as ProgressPrimitive from '@rn-primitives/progress';
+import { Platform, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import Animated, { Extrapolation, interpolate, useAnimatedStyle, useDerivedValue, withSpring } from 'react-native-reanimated';
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+
+/**
+ * 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
+ */
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ProgressPrimitive.Root, {
+    className: cn('bg-primary/20 relative h-2 w-full overflow-hidden rounded-full', className),
+    ...props,
+    children: /*#__PURE__*/_jsx(Indicator, {
+      value: value,
+      className: indicatorClassName
+    })
+  });
+}
+export { Progress };
+
+/**
+ * Platform-specific indicator component selector
+ */
+const Indicator = Platform.select({
+  web: WebIndicator,
+  native: NativeIndicator,
+  default: NullIndicator
+});
+
+/**
+ * Props for progress indicator components
+ */
+
+/**
+ * Web-specific progress indicator using CSS transforms
+ *
+ * @platform web
+ */
+function WebIndicator({
+  value,
+  className
+}) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('bg-primary h-full w-full flex-1 transition-all', className),
+    style: {
+      transform: `translateX(-${100 - (value ?? 0)}%)`
+    },
+    children: /*#__PURE__*/_jsx(ProgressPrimitive.Indicator, {
+      className: cn('h-full w-full', className)
+    })
+  });
+}
+
+/**
+ * Native-specific progress indicator using Reanimated
+ *
+ * Provides smooth spring animations for progress changes.
+ *
+ * @platform native
+ */
+function NativeIndicator({
+  value,
+  className
+}) {
+  const progress = useDerivedValue(() => value ?? 0);
+  const indicator = useAnimatedStyle(() => {
+    return {
+      width: withSpring(`${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`, {
+        overshootClamping: true
+      })
+    };
+  }, [value]);
+  if (Platform.OS === 'web') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ProgressPrimitive.Indicator, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: indicator,
+      className: cn('bg-foreground h-full', className)
+    })
+  });
+}
+
+/**
+ * Null indicator fallback for unsupported platforms
+ */
+function NullIndicator(_props) {
+  return null;
+}
+//# sourceMappingURL=Progress.js.map

package/lib/module/components/ui/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cn","ProgressPrimitive","Platform","View","cssInterop","Animated","Extrapolation","interpolate","useAnimatedStyle","useDerivedValue","withSpring","jsx","_jsx","className","Progress","value","indicatorClassName","props","Root","children","Indicator","select","web","WebIndicator","native","NativeIndicator","default","NullIndicator","OS","style","transform","progress","indicator","width","CLAMP","overshootClamping","asChild","_props"],"sourceRoot":"../../../../src","sources":["components/ui/Progress.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/Radio-Group.js

@@ -0,0 +1,75 @@
+"use strict";
+
+import { cn } from "../../lib/utils.js";
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import { Platform } from 'react-native';
+
+/**
+ * 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
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(RadioGroupPrimitive.Root, {
+    className: cn('gap-3', className),
+    ...props
+  });
+}
+
+/**
+ * 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
+ */
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(RadioGroupPrimitive.Item, {
+    className: cn('border-input dark:bg-input/30 aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-sm shadow-black/5', Platform.select({
+      web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed'
+    }), props.disabled && 'opacity-50', className),
+    ...props,
+    children: /*#__PURE__*/_jsx(RadioGroupPrimitive.Indicator, {
+      className: "bg-primary size-2 rounded-full"
+    })
+  });
+}
+export { RadioGroup, RadioGroupItem };
+//# sourceMappingURL=Radio-Group.js.map

package/lib/module/components/ui/Radio-Group.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cn","RadioGroupPrimitive","Platform","jsx","_jsx","RadioGroup","className","props","Root","RadioGroupItem","Item","select","web","disabled","children","Indicator"],"sourceRoot":"../../../../src","sources":["components/ui/Radio-Group.tsx"],"mappings":";;AAAA,SAASA,EAAE,QAAQ,oBAAiB;AACpC,OAAO,KAAKC,mBAAmB,MAAM,4BAA4B;AACjE,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAxBA,SAAAC,GAAA,IAAAC,IAAA;AAyBA,SAASC,UAAUA,CAAC;EAClBC,SAAS;EACT,GAAGC;AAE4C,CAAC,EAAE;EAClD,oBACEH,IAAA,CAACH,mBAAmB,CAACO,IAAI;IAACF,SAAS,EAAEN,EAAE,CAAC,OAAO,EAAEM,SAAS,CAAE;IAAA,GAAKC;EAAK,CAAG,CAAC;AAE9E;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,cAAcA,CAAC;EACtBH,SAAS;EACT,GAAGC;AAE4C,CAAC,EAAE;EAClD,oBACEH,IAAA,CAACH,mBAAmB,CAACS,IAAI;IACvBJ,SAAS,EAAEN,EAAE,CACX,sIAAsI,EACtIE,QAAQ,CAACS,MAAM,CAAC;MACdC,GAAG,EAAE;IACP,CAAC,CAAC,EACFL,KAAK,CAACM,QAAQ,IAAI,YAAY,EAC9BP,SACF,CAAE;IAAA,GACEC,KAAK;IAAAO,QAAA,eAETV,IAAA,CAACH,mBAAmB,CAACc,SAAS;MAACT,SAAS,EAAC;IAAgC,CAAE;EAAC,CACpD,CAAC;AAE/B;AAEA,SAASD,UAAU,EAAEI,cAAc","ignoreList":[]}