@campxdev/react-native-blueprint 0.1.9 → 0.1.12

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

@@ -0,0 +1,103 @@
+import * as AccordionPrimitive from '@rn-primitives/accordion';
+/**
+ * Root accordion container with smooth animations
+ *
+ * A vertically stacked set of interactive panels where only one or multiple panels can be expanded at a time.
+ * Features smooth layout animations using Reanimated for a polished user experience.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Single selection
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>
+ *       <Text>Question 1</Text>
+ *     </AccordionTrigger>
+ *     <AccordionContent>
+ *       <Text>Answer 1</Text>
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * // Multiple selection
+ * <Accordion type="multiple">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger><Text>Section 1</Text></AccordionTrigger>
+ *     <AccordionContent><Text>Content 1</Text></AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger><Text>Section 2</Text></AccordionTrigger>
+ *     <AccordionContent><Text>Content 2</Text></AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @accessibility
+ * - Implements WAI-ARIA accordion pattern
+ * - Keyboard navigation with arrow keys and Enter/Space
+ * - Proper ARIA attributes for expanded/collapsed states
+ */
+declare function Accordion({ children, ...props }: Omit<AccordionPrimitive.RootProps, 'asChild'> & React.RefAttributes<AccordionPrimitive.RootRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual accordion item with border styling
+ *
+ * Contains a trigger and content section. Each item must have a unique value prop
+ * for identification within the parent Accordion.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>
+ *     <Text>Click to expand</Text>
+ *   </AccordionTrigger>
+ *   <AccordionContent>
+ *     <Text>Hidden content revealed on expansion</Text>
+ *   </AccordionContent>
+ * </AccordionItem>
+ * ```
+ */
+declare function AccordionItem({ children, className, value, ...props }: AccordionPrimitive.ItemProps & React.RefAttributes<AccordionPrimitive.ItemRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Clickable trigger button that toggles accordion item expansion
+ *
+ * Features an animated chevron icon that rotates based on expansion state.
+ * Automatically manages focus states and hover effects on web.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionTrigger>
+ *   <Text>Click to toggle</Text>
+ * </AccordionTrigger>
+ * ```
+ *
+ * @accessibility
+ * - Automatically includes chevron icon for visual expansion indicator
+ * - Focus visible states for keyboard navigation on web
+ * - Disabled state prevents interaction
+ */
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.TriggerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Collapsible content container with smooth animations
+ *
+ * Automatically animates height changes when expanding/collapsing. Uses platform-specific
+ * animations (CSS transitions on web, Reanimated on native).
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AccordionContent>
+ *   <Text>This content slides in and out smoothly</Text>
+ *   <View className="mt-2">
+ *     <Text>Additional content here</Text>
+ *   </View>
+ * </AccordionContent>
+ * ```
+ */
+declare function AccordionContent({ className, children, ...props }: AccordionPrimitive.ContentProps & React.RefAttributes<AccordionPrimitive.ContentRef>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+//# sourceMappingURL=Accordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,kBAAkB,MAAM,0BAA0B,CAAC;AAmB/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,SAAS,CAAC,EACjB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,SAAS,CAAC,GAC9C,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,2CAahD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,aAAa,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,SAAS,GAC7B,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,2CAoBhD;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,YAAY,GAAG;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,UAAU,CAAC,2CAqDrD;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,YAAY,GAChC,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,UAAU,CAAC,2CAsBnD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,CAAC"}

package/lib/typescript/module/src/components/ui/Alert-Dialog.d.ts

@@ -0,0 +1,145 @@
+import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
+import * as React from 'react';
+import { type ViewProps } from 'react-native';
+/**
+ * Root alert dialog container
+ *
+ * A modal dialog that interrupts the user with important content and expects a response.
+ * Use for critical actions that require user confirmation before proceeding.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialog>
+ *   <AlertDialogTrigger asChild>
+ *     <Button variant="destructive"><Text>Delete Account</Text></Button>
+ *   </AlertDialogTrigger>
+ *   <AlertDialogContent>
+ *     <AlertDialogHeader>
+ *       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+ *       <AlertDialogDescription>
+ *         This action cannot be undone.
+ *       </AlertDialogDescription>
+ *     </AlertDialogHeader>
+ *     <AlertDialogFooter>
+ *       <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *       <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *     </AlertDialogFooter>
+ *   </AlertDialogContent>
+ * </AlertDialog>
+ * ```
+ *
+ * @accessibility
+ * - Traps focus within dialog when open
+ * - Closes on Escape key press
+ * - Returns focus to trigger on close
+ * - Uses appropriate ARIA attributes
+ */
+declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogPrimitive.RootProps>;
+/**
+ * Trigger button that opens the alert dialog
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogTrigger asChild>
+ *   <Button><Text>Open Dialog</Text></Button>
+ * </AlertDialogTrigger>
+ * ```
+ */
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.TriggerProps>;
+/**
+ * Portal component for rendering dialog content outside the DOM hierarchy
+ */
+declare const AlertDialogPortal: React.ForwardRefExoticComponent<AlertDialogPrimitive.PortalProps>;
+/**
+ * Semi-transparent overlay behind the alert dialog
+ *
+ * Provides backdrop that dims background content and handles click-outside behavior.
+ * Uses platform-specific full window overlay on iOS for proper z-index layering.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogOverlay>
+ *   <AlertDialogContent>...</AlertDialogContent>
+ * </AlertDialogOverlay>
+ * ```
+ */
+declare function AlertDialogOverlay({ className, children, ...props }: Omit<AlertDialogPrimitive.OverlayProps, 'asChild'> & React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Main alert dialog content container
+ *
+ * Contains the dialog's title, description, and action buttons. Automatically centered
+ * on screen with smooth entrance animations.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <AlertDialogContent>
+ *   <AlertDialogHeader>
+ *     <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+ *     <AlertDialogDescription>Description here</AlertDialogDescription>
+ *   </AlertDialogHeader>
+ *   <AlertDialogFooter>
+ *     <AlertDialogCancel><Text>Cancel</Text></AlertDialogCancel>
+ *     <AlertDialogAction><Text>Continue</Text></AlertDialogAction>
+ *   </AlertDialogFooter>
+ * </AlertDialogContent>
+ * ```
+ */
+declare function AlertDialogContent({ className, portalHost, ...props }: AlertDialogPrimitive.ContentProps & React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+    portalHost?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Header section for alert dialog content
+ *
+ * Groups the title and description with proper spacing and text alignment.
+ *
+ * @component
+ */
+declare function AlertDialogHeader({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Footer section for alert dialog action buttons
+ *
+ * Contains cancel and action buttons with responsive layout (stacked on mobile, row on desktop).
+ *
+ * @component
+ */
+declare function AlertDialogFooter({ className, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Title text for the alert dialog
+ *
+ * Prominently displays the main heading with large, semibold text.
+ *
+ * @component
+ */
+declare function AlertDialogTitle({ className, ...props }: AlertDialogPrimitive.TitleProps & React.RefAttributes<AlertDialogPrimitive.TitleRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Description text for the alert dialog
+ *
+ * Provides additional context below the title with muted styling.
+ *
+ * @component
+ */
+declare function AlertDialogDescription({ className, ...props }: AlertDialogPrimitive.DescriptionProps & React.RefAttributes<AlertDialogPrimitive.DescriptionRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Primary action button that confirms the alert dialog action
+ *
+ * Styled as a primary button. Automatically closes dialog on press.
+ *
+ * @component
+ */
+declare function AlertDialogAction({ className, ...props }: AlertDialogPrimitive.ActionProps & React.RefAttributes<AlertDialogPrimitive.ActionRef>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Cancel button that dismisses the alert dialog
+ *
+ * Styled as an outline button. Automatically closes dialog on press without performing action.
+ *
+ * @component
+ */
+declare function AlertDialogCancel({ className, ...props }: AlertDialogPrimitive.CancelProps & React.RefAttributes<AlertDialogPrimitive.CancelRef>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };
+//# sourceMappingURL=Alert-Dialog.d.ts.map

package/lib/typescript/module/src/components/ui/Alert-Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert-Dialog.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Alert-Dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA4B,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASxE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,WAAW,iEAA4B,CAAC;AAE9C;;;;;;;;;;GAUG;AACH,QAAA,MAAM,kBAAkB,oEAA+B,CAAC;AAExD;;GAEG;AACH,QAAA,MAAM,iBAAiB,mEAA8B,CAAC;AAKtD;;;;;;;;;;;;;GAaG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,oBAAoB,CAAC,YAAY,EAAE,SAAS,CAAC,GACnD,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAsBF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,YAAY,GAClC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,UAAU,CAAC,GAAG;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,2CAiBF;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAM5D;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAU5D;AAED;;;;;;GAMG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,UAAU,GAChC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,QAAQ,CAAC,2CAOnD;AAED;;;;;;GAMG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,gBAAgB,GACtC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,cAAc,CAAC,2CAOzD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CASpD;AAED;;;;;;GAMG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,WAAW,GACjC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,SAAS,CAAC,2CAWpD;AAED,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,GACnB,CAAC"}

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

@@ -0,0 +1,61 @@
+import { Text } from './Text';
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { View as RNView, type ViewProps } from 'react-native';
+/**
+ * Alert component for displaying important messages or notifications
+ *
+ * Features an icon on the left side with title and description.
+ * Supports default and destructive variants for different severity levels.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Alert icon={AlertCircle} variant="default">
+ *   <AlertTitle><Text>Heads up!</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>You can add components to your app using the cli.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ *
+ * // Destructive variant
+ * <Alert icon={AlertTriangle} variant="destructive">
+ *   <AlertTitle><Text>Error</Text></AlertTitle>
+ *   <AlertDescription>
+ *     <Text>Your session has expired. Please login again.</Text>
+ *   </AlertDescription>
+ * </Alert>
+ * ```
+ *
+ * @param {LucideIcon} icon - Icon component to display
+ * @param {'default' | 'destructive'} [variant='default'] - Alert style variant
+ * @param {string} [iconClassName] - Additional classes for the icon
+ * @param {string} [className] - Additional classes for the container
+ *
+ * @accessibility Sets role="alert" for screen reader announcement
+ */
+declare function Alert({ className, variant, children, icon, iconClassName, ...props }: ViewProps & React.RefAttributes<RNView> & {
+    children?: React.ReactNode;
+    icon: LucideIcon;
+    variant?: 'default' | 'destructive';
+    iconClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertTitle - Title text for the alert
+ *
+ * Displays as a medium-weight heading with appropriate spacing from the icon.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+declare function AlertTitle({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AlertDescription - Description text for the alert
+ *
+ * Displays detailed message content with muted styling and appropriate spacing.
+ * Automatically adjusts color for destructive variants.
+ *
+ * @param {string} [className] - Additional Tailwind classes
+ */
+declare function AlertDescription({ className, ...props }: React.ComponentProps<typeof Text> & React.RefAttributes<Text>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertDescription, AlertTitle };
+//# sourceMappingURL=Alert.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Alert.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAoB,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,IAAI,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAO9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,GAAG,KAAK,EACT,EAAE,SAAS,GACV,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,2CAgCF;AAED;;;;;;GAMG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,2CAU/D;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,2CAa/D;AAED,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC"}

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

@@ -0,0 +1,227 @@
+import type { LucideIcon } from 'lucide-react-native';
+import * as React from 'react';
+/**
+ * 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' }
+ * ];
+ * ```
+ */
+export type AppBarAction = {
+    icon: LucideIcon;
+    onPress?: () => void;
+    label?: string;
+    className?: string;
+    iconClassName?: string;
+    disabled?: boolean;
+};
+/**
+ * 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 }
+ *   ]}
+ * />
+ * ```
+ */
+export type AppBarProps = {
+    title?: string | React.ReactNode;
+    subtitle?: string;
+    leading?: React.ReactNode;
+    showLeading?: boolean;
+    onLeadingPress?: () => void;
+    leadingIcon?: LucideIcon;
+    center?: React.ReactNode;
+    actions?: AppBarAction[];
+    className?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    contentClassName?: string;
+    leadingClassName?: string;
+    centerClassName?: string;
+    actionsClassName?: string;
+    centerTitle?: boolean;
+    elevation?: number;
+    transparent?: boolean;
+    useSafeArea?: boolean;
+    backgroundColor?: string;
+    foregroundColor?: string;
+    statusBarStyle?: 'default' | 'light-content' | 'dark-content';
+    statusBarColor?: string;
+    height?: number;
+    bottom?: React.ReactNode;
+};
+/**
+ * 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
+ */
+declare const AppBar: React.ForwardRefExoticComponent<AppBarProps & 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>>;
+/**
+ * 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 declare const AppBarVariants: {
+    Simple: (props: Omit<AppBarProps, "showLeading">) => import("react/jsx-runtime").JSX.Element;
+    WithBack: (props: AppBarProps) => import("react/jsx-runtime").JSX.Element;
+    WithMenu: (props: Omit<AppBarProps, "leadingIcon">) => import("react/jsx-runtime").JSX.Element;
+    Transparent: (props: Omit<AppBarProps, "transparent">) => import("react/jsx-runtime").JSX.Element;
+    Centered: (props: Omit<AppBarProps, "centerTitle">) => import("react/jsx-runtime").JSX.Element;
+};
+/**
+ * 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 declare const AppBarIcons: {
+    Menu: React.ForwardRefExoticComponent<import("lucide-react-native").LucideProps>;
+    ArrowLeft: React.ForwardRefExoticComponent<import("lucide-react-native").LucideProps>;
+    MoreVertical: React.ForwardRefExoticComponent<import("lucide-react-native").LucideProps>;
+};
+export { AppBar };
+//# sourceMappingURL=AppBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/AppBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,MAAM,MAAM,WAAW,GAAG;IAExB,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAGlB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAC;IAGzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAGzB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAGzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGzB,cAAc,CAAC,EAAE,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;IAC9D,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,QAAA,MAAM,MAAM;OA7LiB,CAAC;;OACG,CAAC;uBAwcjC,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,cAAc;oBAET,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;sBAK9B,WAAW;sBAGX,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;yBAK7B,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;sBAKnC,IAAI,CAAC,WAAW,EAAE,aAAa,CAAC;CAGnD,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/lib/typescript/module/src/components/ui/Aspect-Ratio.d.ts

@@ -0,0 +1,24 @@
+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>
+ * ```
+ */
+declare const AspectRatio: import("react").ForwardRefExoticComponent<AspectRatioPrimitive.RootProps>;
+export { AspectRatio };
+//# sourceMappingURL=Aspect-Ratio.d.ts.map

package/lib/typescript/module/src/components/ui/Aspect-Ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Aspect-Ratio.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/Aspect-Ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,oBAAoB,MAAM,6BAA6B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,WAAW,2EAA4B,CAAC;AAE9C,OAAO,EAAE,WAAW,EAAE,CAAC"}