@campxdev/react-native-blueprint 0.1.4 → 0.1.7

package/lib/typescript/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/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/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/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"}