@campxdev/react-native-blueprint 0.1.0

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

@@ -0,0 +1,403 @@
+"use strict";
+
+import { ArrowLeft, Menu, MoreVertical } from 'lucide-react-native';
+import { cssInterop, useColorScheme } from 'nativewind';
+import * as React from 'react';
+import { Platform, Pressable as RNPressable, View as RNView, StatusBar } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { cn } from "../../lib/utils.js";
+import { Icon } from "./Icon.js";
+import { Text } from "./Text.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const View = cssInterop(RNView, {
+  className: 'style'
+});
+const Pressable = cssInterop(RNPressable, {
+  className: 'style'
+});
+
+/**
+ * Configuration for an action item in the AppBar
+ *
+ * @property {LucideIcon} icon - Icon component from lucide-react-native
+ * @property {() => void} [onPress] - Callback when action is pressed
+ * @property {string} [label] - Accessibility label for the action
+ * @property {string} [className] - Additional classes for the action button container
+ * @property {string} [iconClassName] - Additional classes for the icon
+ * @property {boolean} [disabled] - Whether the action is disabled
+ *
+ * @example
+ * ```tsx
+ * const actions: AppBarAction[] = [
+ *   { icon: Search, onPress: handleSearch, label: 'Search' },
+ *   { icon: MoreVertical, onPress: handleMore, label: 'More options' }
+ * ];
+ * ```
+ */
+
+/**
+ * Props for AppBar component - A flexible top app bar following Material Design guidelines
+ *
+ * @property {string | React.ReactNode} [title] - AppBar title text or custom component
+ * @property {string} [subtitle] - Optional subtitle text displayed below title
+ *
+ * @property {React.ReactNode} [leading] - Custom leading widget (can include multiple icons or custom components, overrides default back button)
+ * @property {boolean} [showLeading=true] - Whether to show the leading widget
+ * @property {() => void} [onLeadingPress] - Callback when leading icon is pressed (only used if no custom leading provided)
+ * @property {LucideIcon} [leadingIcon=ArrowLeft] - Icon for the leading button (only used if no custom leading provided)
+ *
+ * @property {React.ReactNode} [center] - Custom center component (overrides title/subtitle, can include images, text, or complex layouts)
+ *
+ * @property {AppBarAction[]} [actions=[]] - Array of action items to display on the right (supports multiple icons)
+ *
+ * @property {string} [className] - Additional classes for the root container
+ * @property {string} [titleClassName] - Additional classes for the title text
+ * @property {string} [subtitleClassName] - Additional classes for the subtitle text
+ * @property {string} [contentClassName] - Additional classes for the content container
+ * @property {string} [leadingClassName] - Additional classes for the leading section container
+ * @property {string} [centerClassName] - Additional classes for the center section container
+ * @property {string} [actionsClassName] - Additional classes for the actions section container
+ *
+ * @property {boolean} [centerTitle=false] - Whether to center the title
+ * @property {number} [elevation=4] - Elevation level for shadow (0 = no shadow)
+ * @property {boolean} [transparent=false] - Whether the AppBar background is transparent
+ *
+ * @property {boolean} [useSafeArea=true] - Whether to respect safe area insets
+ *
+ * @property {string} [backgroundColor] - Custom background color class
+ * @property {string} [foregroundColor] - Custom foreground/text color class
+ *
+ * @property {'default' | 'light-content' | 'dark-content'} [statusBarStyle] - Status bar text color (auto-adjusts based on theme if not set)
+ * @property {string} [statusBarColor] - Status bar background color (Android)
+ *
+ * @property {number} [height] - Custom height in pixels (default: 56px per Material Design)
+ *
+ * @property {React.ReactNode} [bottom] - Additional content below main app bar (e.g., tabs, search)
+ *
+ * @example
+ * ```tsx
+ * // Simple app bar with title
+ * <AppBar title="Home" />
+ *
+ * // With custom center containing image and text
+ * <AppBar
+ *   center={
+ *     <View className="flex-row items-center gap-2">
+ *       <Image source={logo} className="w-8 h-8" />
+ *       <Text className="text-lg font-bold">MyApp</Text>
+ *     </View>
+ *   }
+ * />
+ *
+ * // With multiple leading icons
+ * <AppBar
+ *   title="Settings"
+ *   leading={
+ *     <View className="flex-row items-center">
+ *       <IconButton icon={Menu} onPress={openMenu} />
+ *       <IconButton icon={ArrowLeft} onPress={goBack} />
+ *     </View>
+ *   }
+ *   actions={[
+ *     { icon: Search, onPress: handleSearch },
+ *     { icon: Settings, onPress: openSettings },
+ *     { icon: MoreVertical, onPress: handleMore }
+ *   ]}
+ * />
+ * ```
+ */
+
+/**
+ * A flexible top app bar component following Material Design guidelines
+ *
+ * Provides consistent navigation and actions across your app with support for:
+ * - Customizable leading navigation (back button, menu, custom widget)
+ * - Title and subtitle with flexible positioning
+ * - Action buttons on the right side
+ * - Safe area insets handling
+ * - Platform-specific status bar configuration
+ * - Transparent overlay mode
+ * - Bottom content slot for tabs or search bars
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic with back button
+ * <AppBar
+ *   title="Profile"
+ *   onLeadingPress={() => navigation.goBack()}
+ * />
+ *
+ * // With menu and actions
+ * <AppBar
+ *   title="Home"
+ *   leadingIcon={Menu}
+ *   onLeadingPress={openDrawer}
+ *   actions={[
+ *     { icon: Search, onPress: handleSearch },
+ *     { icon: Settings, onPress: openSettings }
+ *   ]}
+ * />
+ *
+ * // Transparent overlay (for use over content)
+ * <AppBar
+ *   title="Photo"
+ *   transparent
+ *   foregroundColor="text-white"
+ *   statusBarStyle="light-content"
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Leading button includes "Navigate back" accessibility label
+ * - Action buttons support custom accessibility labels
+ * - Proper button role for all interactive elements
+ */
+const AppBar = /*#__PURE__*/React.forwardRef(({
+  title,
+  subtitle,
+  leading,
+  showLeading = true,
+  onLeadingPress,
+  leadingIcon = ArrowLeft,
+  center,
+  actions = [],
+  className,
+  titleClassName,
+  subtitleClassName,
+  contentClassName,
+  leadingClassName,
+  centerClassName,
+  actionsClassName,
+  centerTitle = false,
+  elevation = 4,
+  transparent = false,
+  useSafeArea = true,
+  backgroundColor,
+  foregroundColor,
+  statusBarStyle,
+  statusBarColor,
+  height,
+  bottom
+}, ref) => {
+  // Get the current color scheme for dark mode support
+  const {
+    colorScheme
+  } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  // Default height following Material Design guidelines
+  const defaultHeight = 56;
+  const appBarHeight = height ?? defaultHeight;
+
+  // Determine status bar style based on theme if not explicitly set
+  const defaultStatusBarStyle = transparent ? 'light-content' // Transparent bars usually overlay content, so use light text
+  : isDark ? 'light-content' : 'dark-content';
+  const resolvedStatusBarStyle = statusBarStyle ?? defaultStatusBarStyle;
+
+  // Background color
+  const bgColor = transparent ? 'bg-transparent' : backgroundColor || 'bg-background';
+
+  // Shadow/elevation styles
+  const elevationStyle = !transparent && elevation > 0 ? 'border-b border-border shadow-sm' : '';
+
+  // Render center/title content
+  const renderCenter = () => {
+    // If custom center is provided, use it
+    if (center) {
+      return /*#__PURE__*/_jsx(View, {
+        className: cn('flex-1 justify-center', centerClassName),
+        children: center
+      });
+    }
+
+    // Otherwise fall back to title/subtitle
+    if (!title) return null;
+    if (typeof title === 'string') {
+      return /*#__PURE__*/_jsxs(View, {
+        className: cn('flex-1 justify-center', subtitle && 'gap-0.5', centerClassName),
+        children: [/*#__PURE__*/_jsx(Text, {
+          className: cn('text-xl font-semibold', foregroundColor || 'text-foreground', titleClassName),
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: title
+        }), subtitle && /*#__PURE__*/_jsx(Text, {
+          className: cn('text-xs', foregroundColor ? 'opacity-70' : 'text-muted-foreground', subtitleClassName),
+          numberOfLines: 1,
+          ellipsizeMode: "tail",
+          children: subtitle
+        })]
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      className: cn('flex-1 justify-center', centerClassName),
+      children: title
+    });
+  };
+
+  // Render leading icon/widget
+  const renderLeading = () => {
+    if (!showLeading) return null;
+    if (leading) {
+      return /*#__PURE__*/_jsx(View, {
+        className: cn('mr-2', leadingClassName),
+        children: leading
+      });
+    }
+    if (onLeadingPress) {
+      const LeadingIcon = leadingIcon;
+      return /*#__PURE__*/_jsx(Pressable, {
+        onPress: onLeadingPress,
+        className: cn('mr-2 -ml-2 h-10 w-10 items-center justify-center rounded-full active:bg-accent/50', leadingClassName),
+        accessibilityRole: "button",
+        accessibilityLabel: "Navigate back",
+        children: /*#__PURE__*/_jsx(Icon, {
+          as: LeadingIcon,
+          size: 24,
+          className: cn(foregroundColor || 'text-foreground')
+        })
+      });
+    }
+    return null;
+  };
+
+  // Render action items
+  const renderActions = () => {
+    if (!actions || actions.length === 0) return null;
+    return /*#__PURE__*/_jsx(View, {
+      className: cn('flex-row items-center gap-1', actionsClassName),
+      children: actions.map((action, index) => {
+        const ActionIcon = action.icon;
+        return /*#__PURE__*/_jsx(Pressable, {
+          onPress: action.onPress,
+          disabled: action.disabled,
+          className: cn('h-10 w-10 items-center justify-center rounded-full active:bg-accent/50', action.disabled && 'opacity-50', action.className),
+          accessibilityRole: "button",
+          accessibilityLabel: action.label || `Action ${index + 1}`,
+          children: /*#__PURE__*/_jsx(Icon, {
+            as: ActionIcon,
+            size: 24,
+            className: cn(foregroundColor || 'text-foreground', action.iconClassName)
+          })
+        }, index);
+      })
+    });
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [Platform.OS !== 'web' && /*#__PURE__*/_jsx(StatusBar, {
+      barStyle: resolvedStatusBarStyle,
+      backgroundColor: statusBarColor || 'transparent',
+      translucent: useSafeArea
+    }), useSafeArea ? /*#__PURE__*/_jsx(SafeAreaView, {
+      edges: ['top'],
+      children: /*#__PURE__*/_jsxs(View, {
+        ref: ref,
+        className: cn(bgColor, elevationStyle, className),
+        children: [/*#__PURE__*/_jsxs(View, {
+          className: cn('flex-row items-center justify-between px-4', contentClassName),
+          style: {
+            height: appBarHeight
+          },
+          children: [renderLeading(), /*#__PURE__*/_jsx(View, {
+            className: cn('flex-1', centerTitle && 'items-center', !centerTitle && 'items-start'),
+            children: renderCenter()
+          }), renderActions()]
+        }), bottom && /*#__PURE__*/_jsx(View, {
+          className: "pb-2",
+          children: bottom
+        })]
+      })
+    }) : /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      className: cn(bgColor, elevationStyle, className),
+      children: [/*#__PURE__*/_jsxs(View, {
+        className: cn('flex-row items-center justify-between px-4', contentClassName),
+        style: {
+          height: appBarHeight
+        },
+        children: [renderLeading(), /*#__PURE__*/_jsx(View, {
+          className: cn('flex-1', centerTitle && 'items-center', !centerTitle && 'items-start'),
+          children: renderCenter()
+        }), renderActions()]
+      }), bottom && /*#__PURE__*/_jsx(View, {
+        className: "pb-2",
+        children: bottom
+      })]
+    })]
+  });
+});
+AppBar.displayName = 'AppBar';
+
+/**
+ * Pre-configured AppBar variants for common use cases
+ *
+ * @example
+ * ```tsx
+ * // Simple app bar without navigation
+ * <AppBarVariants.Simple title="Home" />
+ *
+ * // With back button
+ * <AppBarVariants.WithBack title="Details" onLeadingPress={goBack} />
+ *
+ * // With menu drawer
+ * <AppBarVariants.WithMenu title="Main" onLeadingPress={openDrawer} />
+ *
+ * // Transparent overlay
+ * <AppBarVariants.Transparent title="Gallery" />
+ *
+ * // Centered title
+ * <AppBarVariants.Centered title="About" />
+ * ```
+ */
+export const AppBarVariants = {
+  // Simple app bar with just a title
+  Simple: props => /*#__PURE__*/_jsx(AppBar, {
+    ...props,
+    showLeading: false
+  }),
+  // App bar with back button
+  WithBack: props => /*#__PURE__*/_jsx(AppBar, {
+    ...props,
+    showLeading: true
+  }),
+  // App bar with menu icon
+  WithMenu: props => /*#__PURE__*/_jsx(AppBar, {
+    ...props,
+    leadingIcon: Menu,
+    showLeading: true
+  }),
+  // Transparent app bar (for use over content)
+  Transparent: props => /*#__PURE__*/_jsx(AppBar, {
+    ...props,
+    transparent: true,
+    elevation: 0
+  }),
+  // Centered title app bar
+  Centered: props => /*#__PURE__*/_jsx(AppBar, {
+    ...props,
+    centerTitle: true
+  })
+};
+
+/**
+ * Common icons exported for convenience when configuring AppBar
+ *
+ * @example
+ * ```tsx
+ * import { AppBar, AppBarIcons } from './AppBar';
+ *
+ * <AppBar
+ *   leadingIcon={AppBarIcons.Menu}
+ *   actions={[
+ *     { icon: AppBarIcons.MoreVertical, onPress: handleMore }
+ *   ]}
+ * />
+ * ```
+ */
+export const AppBarIcons = {
+  Menu,
+  ArrowLeft,
+  MoreVertical
+};
+export { AppBar };
+//# sourceMappingURL=AppBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["ArrowLeft","Menu","MoreVertical","cssInterop","useColorScheme","React","Platform","Pressable","RNPressable","View","RNView","StatusBar","SafeAreaView","cn","Icon","Text","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","className","AppBar","forwardRef","title","subtitle","leading","showLeading","onLeadingPress","leadingIcon","center","actions","titleClassName","subtitleClassName","contentClassName","leadingClassName","centerClassName","actionsClassName","centerTitle","elevation","transparent","useSafeArea","backgroundColor","foregroundColor","statusBarStyle","statusBarColor","height","bottom","ref","colorScheme","isDark","defaultHeight","appBarHeight","defaultStatusBarStyle","resolvedStatusBarStyle","bgColor","elevationStyle","renderCenter","children","numberOfLines","ellipsizeMode","renderLeading","LeadingIcon","onPress","accessibilityRole","accessibilityLabel","as","size","renderActions","length","map","action","index","ActionIcon","icon","disabled","label","iconClassName","OS","barStyle","translucent","edges","style","displayName","AppBarVariants","Simple","props","WithBack","WithMenu","Transparent","Centered","AppBarIcons"],"sourceRoot":"../../../../src","sources":["components/ui/AppBar.tsx"],"mappings":";;AACA,SAASA,SAAS,EAAEC,IAAI,EAAEC,YAAY,QAAQ,qBAAqB;AACnE,SAASC,UAAU,EAAEC,cAAc,QAAQ,YAAY;AACvD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EACRC,SAAS,IAAIC,WAAW,EACxBC,IAAI,IAAIC,MAAM,EACdC,SAAS,QACJ,cAAc;AACrB,SAASC,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,EAAE,QAAQ,oBAAiB;AACpC,SAASC,IAAI,QAAQ,WAAQ;AAC7B,SAASC,IAAI,QAAQ,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE9B,MAAMZ,IAAI,GAAGN,UAAU,CAACO,MAAM,EAAE;EAAEY,SAAS,EAAE;AAAQ,CAAC,CAAC;AACvD,MAAMf,SAAS,GAAGJ,UAAU,CAACK,WAAW,EAAE;EAAEc,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAEjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA;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;;AAkDA;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;AA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","ignoreList":[]}

package/lib/module/components/ui/Aspect-Ratio.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import * as AspectRatioPrimitive from '@rn-primitives/aspect-ratio';
+
+/**
+ * Maintains a consistent aspect ratio for its child content
+ *
+ * Displays content within a desired ratio (e.g., 16/9, 4/3, 1/1) regardless of available space.
+ * Commonly used for images, videos, and embedded content that require specific proportions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // 16:9 aspect ratio for video container
+ * <AspectRatio ratio={16 / 9} className="bg-muted">
+ *   <Image source={{uri: 'video-thumbnail.jpg'}} className="h-full w-full rounded-md object-cover" />
+ * </AspectRatio>
+ *
+ * // Square aspect ratio for avatars
+ * <AspectRatio ratio={1} className="w-full">
+ *   <Image source={{uri: 'avatar.jpg'}} className="h-full w-full" />
+ * </AspectRatio>
+ * ```
+ */
+const AspectRatio = AspectRatioPrimitive.Root;
+export { AspectRatio };
+//# sourceMappingURL=Aspect-Ratio.js.map

package/lib/module/components/ui/Aspect-Ratio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AspectRatioPrimitive","AspectRatio","Root"],"sourceRoot":"../../../../src","sources":["components/ui/Aspect-Ratio.tsx"],"mappings":";;AAAA,OAAO,KAAKA,oBAAoB,MAAM,6BAA6B;;AAEnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGD,oBAAoB,CAACE,IAAI;AAE7C,SAASD,WAAW","ignoreList":[]}

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

@@ -0,0 +1,97 @@
+"use strict";
+
+import * as React from 'react';
+import { Image, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cn } from "../../lib/utils.js";
+import * as Slot from '@rn-primitives/slot';
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Slot.View, {
+  className: 'style'
+});
+cssInterop(Image, {
+  className: 'style'
+});
+
+/**
+ * Avatar container component
+ *
+ * Circular container for displaying user avatars with images or fallback initials.
+ * Use with AvatarImage and AvatarFallback for complete functionality.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage source={{ uri: userPhoto }} alt="User avatar" />
+ *   <AvatarFallback>
+ *     <Text>JD</Text>
+ *   </AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const Avatar = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(Component, {
+    className: cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className),
+    ref: ref,
+    ...props
+  });
+});
+Avatar.displayName = 'Avatar';
+
+/**
+ * AvatarImage - Image component for avatar
+ *
+ * Displays the user's profile image. Falls back to AvatarFallback if image fails to load.
+ *
+ * @property {ImageSource} source - Image source (local or remote URI)
+ * @property {string} [alt] - Alternative text for accessibility
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const AvatarImage = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(Image, {
+    className: cn('aspect-square h-full w-full', className),
+    ref: ref,
+    ...props
+  });
+});
+AvatarImage.displayName = 'AvatarImage';
+
+/**
+ * AvatarFallback - Fallback content when image is unavailable
+ *
+ * Typically displays user initials or an icon. Shows when AvatarImage fails to load
+ * or is not provided.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const AvatarFallback = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(Component, {
+    className: cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className),
+    ref: ref,
+    ...props
+  });
+});
+AvatarFallback.displayName = 'AvatarFallback';
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","View","cssInterop","cn","Slot","jsx","_jsx","className","Avatar","forwardRef","asChild","props","ref","Component","displayName","AvatarImage","AvatarFallback"],"sourceRoot":"../../../../src","sources":["components/ui/Avatar.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,KAAK,EAAEC,IAAI,QAAQ,cAAc;AAC1C,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,EAAE,QAAQ,oBAAiB;AAEpC,OAAO,KAAKC,IAAI,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE5CJ,UAAU,CAACD,IAAI,EAAE;EAAEM,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxCL,UAAU,CAACE,IAAI,CAACH,IAAI,EAAE;EAAEM,SAAS,EAAE;AAAQ,CAAC,CAAC;AAC7CL,UAAU,CAACF,KAAK,EAAE;EAAEO,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,MAAM,gBAAGT,KAAK,CAACU,UAAU,CAG7B,CAAC;EAAEF,SAAS;EAAEG,OAAO,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACnD,MAAMC,SAAS,GAAGH,OAAO,GAAGN,IAAI,CAACH,IAAI,GAAGA,IAAI;EAC5C,oBACEK,IAAA,CAACO,SAAS;IACRN,SAAS,EAAEJ,EAAE,CACX,+DAA+D,EAC/DI,SACF,CAAE;IACFK,GAAG,EAAEA,GAAW;IAAA,GACZD;EAAK,CACV,CAAC;AAEN,CAAC,CAAC;AACFH,MAAM,CAACM,WAAW,GAAG,QAAQ;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,gBAAGhB,KAAK,CAACU,UAAU,CAMlC,CAAC;EAAEF,SAAS;EAAE,GAAGI;AAAM,CAAC,EAAEC,GAAG,KAAK;EAClC,oBACEN,IAAA,CAACN,KAAK;IACJO,SAAS,EAAEJ,EAAE,CAAC,6BAA6B,EAAEI,SAAS,CAAE;IACxDK,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAK,CACV,CAAC;AAEN,CAAC,CAAC;AACFI,WAAW,CAACD,WAAW,GAAG,aAAa;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,cAAc,gBAAGjB,KAAK,CAACU,UAAU,CAGrC,CAAC;EAAEF,SAAS;EAAEG,OAAO,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACnD,MAAMC,SAAS,GAAGH,OAAO,GAAGN,IAAI,CAACH,IAAI,GAAGA,IAAI;EAC5C,oBACEK,IAAA,CAACO,SAAS;IACRN,SAAS,EAAEJ,EAAE,CACX,sEAAsE,EACtEI,SACF,CAAE;IACFK,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAK,CACV,CAAC;AAEN,CAAC,CAAC;AACFK,cAAc,CAACF,WAAW,GAAG,gBAAgB;AAE7C,SAASN,MAAM,EAAEO,WAAW,EAAEC,cAAc","ignoreList":[]}

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

@@ -0,0 +1,127 @@
+"use strict";
+
+import * as Slot from '@rn-primitives/slot';
+import { cva } from 'class-variance-authority';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { View } from 'react-native';
+import { cn } from "../../lib/utils.js";
+import { TextClassContext } from "./Text.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Slot.View, {
+  className: 'style'
+});
+
+/**
+ * Badge container style variants
+ *
+ * @variant default - Primary badge with solid background
+ * @variant secondary - Secondary badge with muted background
+ * @variant destructive - Destructive badge with danger/error styling
+ * @variant outline - Badge with border and transparent background
+ */
+const badgeVariants = cva('flex-row items-center rounded-full border border-border px-2.5 py-0.5 web:inline-flex', {
+  variants: {
+    variant: {
+      default: 'border-transparent bg-primary',
+      secondary: 'border-transparent bg-secondary',
+      destructive: 'border-transparent bg-destructive',
+      outline: 'border-border'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
+
+/**
+ * Badge text style variants for matching text colors with badge variants
+ * Applied through TextClassContext to child Text components
+ *
+ * Variants match badgeVariants to ensure proper contrast
+ * @see badgeVariants
+ */
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+});
+
+/**
+ * Props for Badge component
+ *
+ * @extends SlottableViewProps - Includes all View props plus asChild for slot composition
+ * @extends VariantProps - Includes variant styling options from badgeVariants
+ *
+ * @property {string} [className] - Additional Tailwind classes for custom styling
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {'default' | 'secondary' | 'destructive' | 'outline'} [variant='default'] - Badge style variant
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="default">
+ *   <Text>New</Text>
+ * </Badge>
+ * ```
+ */
+
+/**
+ * A compact badge component for displaying status, labels, or counts
+ *
+ * Small, pill-shaped component for highlighting information. Supports multiple
+ * variants for different contexts and automatically styles child Text components.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Status badge
+ * <Badge variant="default">
+ *   <Text>Active</Text>
+ * </Badge>
+ *
+ * // Count badge
+ * <Badge variant="destructive">
+ *   <Text>5</Text>
+ * </Badge>
+ *
+ * // Outline badge
+ * <Badge variant="outline">
+ *   <Text>Draft</Text>
+ * </Badge>
+ * ```
+ */
+const Badge = /*#__PURE__*/React.forwardRef(({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: cn(badgeTextVariants({
+      variant
+    })),
+    children: /*#__PURE__*/_jsx(Component, {
+      className: cn(badgeVariants({
+        variant,
+        className
+      })),
+      ref: ref,
+      ...props
+    })
+  });
+});
+Badge.displayName = 'Badge';
+export { Badge, badgeTextVariants, badgeVariants };
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["Slot","cva","cssInterop","React","View","cn","TextClassContext","jsx","_jsx","className","badgeVariants","variants","variant","default","secondary","destructive","outline","defaultVariants","badgeTextVariants","Badge","forwardRef","asChild","props","ref","Component","Provider","value","children","displayName"],"sourceRoot":"../../../../src","sources":["components/ui/Badge.tsx"],"mappings":";;AAAA,OAAO,KAAKA,IAAI,MAAM,qBAAqB;AAE3C,SAASC,GAAG,QAA2B,0BAA0B;AACjE,SAASC,UAAU,QAAQ,YAAY;AACvC,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,EAAE,QAAQ,oBAAiB;AACpC,SAASC,gBAAgB,QAAQ,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE1CN,UAAU,CAACE,IAAI,EAAE;EAAEK,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxCP,UAAU,CAACF,IAAI,CAACI,IAAI,EAAE;EAAEK,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGT,GAAG,CACvB,uFAAuF,EACvF;EACEU,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,+BAA+B;MACxCC,SAAS,EAAE,iCAAiC;MAC5CC,WAAW,EAAE,mCAAmC;MAChDC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE;EACX;AACF,CACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,iBAAiB,GAAGjB,GAAG,CAAC,uBAAuB,EAAE;EACrDU,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE,yBAAyB;MAClCC,SAAS,EAAE,2BAA2B;MACtCC,WAAW,EAAE,6BAA6B;MAC1CC,OAAO,EAAE;IACX;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,OAAO,EAAE;EACX;AACF,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA;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,MAAMO,KAAK,gBAAGhB,KAAK,CAACiB,UAAU,CAC5B,CAAC;EAAEX,SAAS;EAAEG,OAAO;EAAES,OAAO,GAAG,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EAC1D,MAAMC,SAAS,GAAGH,OAAO,GAAGrB,IAAI,CAACI,IAAI,GAAGA,IAAI;EAC5C,oBACEI,IAAA,CAACF,gBAAgB,CAACmB,QAAQ;IAACC,KAAK,EAAErB,EAAE,CAACa,iBAAiB,CAAC;MAAEN;IAAQ,CAAC,CAAC,CAAE;IAAAe,QAAA,eACnEnB,IAAA,CAACgB,SAAS;MACRf,SAAS,EAAEJ,EAAE,CAACK,aAAa,CAAC;QAAEE,OAAO;QAAEH;MAAU,CAAC,CAAC,CAAE;MACrDc,GAAG,EAAEA,GAAW;MAAA,GACZD;IAAK,CACV;EAAC,CACuB,CAAC;AAEhC,CACF,CAAC;AACDH,KAAK,CAACS,WAAW,GAAG,OAAO;AAE3B,SAAST,KAAK,EAAED,iBAAiB,EAAER,aAAa","ignoreList":[]}