@campxdev/react-native-blueprint 0.1.13 → 0.1.14

package/lib/module/components/Layout/PageLayoutShell/PageLayoutShell.js

@@ -0,0 +1,86 @@
+"use strict";
+
+import { View } from 'react-native';
+import { AppBar } from "../../Navigation/Appbar/AppBar.js";
+import { PageContent } from "../PageContent/PageContent.js";
+import { NavBar } from "../../Navigation/Navbar/NavBar.js";
+
+/* -----------------------------------------------------
+ * Types
+ * --------------------------------------------------- */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+/**
+ * PageLayoutShell Component
+ *
+ * Main layout component for mobile screens that provides AppBar, scrollable content area, and bottom NavBar.
+ * This is the primary shell for app screens with navigation.
+ *
+ * @param {React.ReactNode} children - Main content to render inside the layout
+ * @param {AppBarProps} appBarProps - Configuration for the top AppBar
+ * @param {NavBarProps} navBarProps - Configuration for the bottom NavBar (required)
+ *
+ * @returns {React.ReactElement} The complete page layout with AppBar, content area, and NavBar
+ *
+ * @example
+ * ```tsx
+ * <PageLayoutShell
+ *   appBarProps={{
+ *     variant: 'home',
+ *     headerType: 'tabs',
+ *     logoSource: require('./assets/logo.png'),
+ *   }}
+ *   navBarProps={{
+ *     items: [
+ *       { key: 'home', icon: <HomeIcon /> },
+ *       { key: 'search', icon: <SearchIcon /> },
+ *       { key: 'cart', icon: <CartIcon /> },
+ *       { key: 'notifications', icon: <BellIcon /> },
+ *       { key: 'profile', icon: <UserIcon /> },
+ *     ],
+ *     activeIndex: 2,
+ *     showCenterGlow: true,
+ *   }}
+ * >
+ *   <YourPageContent />
+ * </PageLayoutShell>
+ * ```
+ */
+export const PageLayoutShell = ({
+  children,
+  appBarProps,
+  navBarProps
+}) => {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1,
+      backgroundColor: '#F7F8FA'
+    },
+    children: [/*#__PURE__*/_jsx(AppBar, {
+      ...appBarProps,
+      useSafeArea: false
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      },
+      children: /*#__PURE__*/_jsx(PageContent, {
+        scroll: true,
+        children: children
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        paddingHorizontal: 20,
+        paddingBottom: 16,
+        paddingTop: 8
+      },
+      children: /*#__PURE__*/_jsx(NavBar, {
+        ...navBarProps
+      })
+    })]
+  });
+};
+PageLayoutShell.displayName = 'PageLayoutShell';
+//# sourceMappingURL=PageLayoutShell.js.map

package/lib/module/components/Layout/PageLayoutShell/PageLayoutShell.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","AppBar","PageContent","NavBar","jsx","_jsx","jsxs","_jsxs","PageLayoutShell","children","appBarProps","navBarProps","style","flex","backgroundColor","useSafeArea","scroll","paddingHorizontal","paddingBottom","paddingTop","displayName"],"sourceRoot":"../../../../../src","sources":["components/Layout/PageLayoutShell/PageLayoutShell.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,MAAM,QAA0B,mCAAgC;AACzE,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,MAAM,QAA0B,mCAAgC;;AAEzE;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAeA;AACA;AACA;;AAEA;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,OAAO,MAAMC,eAAe,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,WAAW;EACXC;AACoB,CAAC,KAAK;EAC1B,oBACEJ,KAAA,CAACP,IAAI;IAACY,KAAK,EAAE;MAAEC,IAAI,EAAE,CAAC;MAAEC,eAAe,EAAE;IAAU,CAAE;IAAAL,QAAA,gBAEnDJ,IAAA,CAACJ,MAAM;MAAA,GAAKS,WAAW;MAAEK,WAAW,EAAE;IAAM,CAAE,CAAC,eAG/CV,IAAA,CAACL,IAAI;MAACY,KAAK,EAAE;QAAEC,IAAI,EAAE;MAAE,CAAE;MAAAJ,QAAA,eACvBJ,IAAA,CAACH,WAAW;QAACc,MAAM;QAAAP,QAAA,EAAEA;MAAQ,CAAc;IAAC,CACxC,CAAC,eAGPJ,IAAA,CAACL,IAAI;MAACY,KAAK,EAAE;QAAEK,iBAAiB,EAAE,EAAE;QAAEC,aAAa,EAAE,EAAE;QAAEC,UAAU,EAAE;MAAE,CAAE;MAAAV,QAAA,eACvEJ,IAAA,CAACF,MAAM;QAAA,GAAKQ;MAAW,CAAG;IAAC,CACvB,CAAC;EAAA,CACH,CAAC;AAEX,CAAC;AAEDH,eAAe,CAACY,WAAW,GAAG,iBAAiB","ignoreList":[]}

package/lib/module/components/Layout/PopoverContainer/Popover-Container.js

@@ -0,0 +1,226 @@
+"use strict";
+
+import { NativeOnlyAnimatedView } from "../../ui/Native-Only-Animated-View.js";
+import { TextClassContext, Text } from "../../Input/Text/Text.js";
+import { Button } from "../../Input/Button/Button.js";
+import { cn } from "../../../lib/utils.js";
+import * as PopoverPrimitive from '@rn-primitives/popover';
+import * as React from 'react';
+import { Platform, StyleSheet, View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+// NativeWind interop
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const View = cssInterop(RNView, {
+  className: 'style'
+});
+
+/**
+ * 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>
+ * ```
+ */
+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
+ */
+const PopoverContent = /*#__PURE__*/React.forwardRef(({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  portalHost,
+  ...props
+}, ref) => {
+  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, {
+              ref: ref,
+              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
+            })
+          })
+        })
+      })
+    })
+  });
+});
+PopoverContent.displayName = 'PopoverContent';
+
+/* -----------------------------------------------------
+ * PopoverContainer Variants (match Figma props)
+ * --------------------------------------------------- */
+
+export const PopoverContainerVariants = {
+  size: ['lg', 'md']
+};
+const rootVariants = cva(cn('flex-col items-start', 'rounded-lg border border-border-default bg-surface-default', 'p-md gap-lg'), {
+  variants: {
+    size: {
+      lg: 'self-stretch',
+      md: 'w-[300px] self-center'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const headerVariants = cva(cn('flex-col items-start self-stretch', 'gap-xs'));
+const titleVariants = cva(cn('text-base font-bold', 'text-text-primary'));
+const descriptionVariants = cva(cn('text-xs font-medium', 'text-text-secondary'));
+const contentRowVariants = cva(cn('flex-row items-start self-stretch'));
+const contentInnerVariants = cva('flex-1');
+const footerVariants = cva(cn('flex-row items-start self-stretch', 'gap-sm'));
+
+/* -----------------------------------------------------
+ * PopoverContainer Props
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * PopoverContainer Component
+ * --------------------------------------------------- */
+
+/**
+ * Styled container for popover content with header, body, and footer sections.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <PopoverContainer
+ *   size="md"
+ *   title="Popover Title"
+ *   description="Popover Description"
+ *   showHeader
+ *   showFooter
+ * >
+ *   <Text>Custom content here</Text>
+ * </PopoverContainer>
+ * ```
+ */
+export function PopoverContainer({
+  description = 'Popover Description',
+  title = 'Popover Title',
+  size = 'lg',
+  showDescription = true,
+  showFooter = true,
+  showHeader = true,
+  showSecondaryButton = true,
+  children,
+  primaryButtonText = 'Button',
+  secondaryButtonText = 'Button',
+  onPrimaryPress,
+  onSecondaryPress,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ?? 'popover-container',
+    className: cn(rootVariants({
+      size
+    })),
+    style: style,
+    children: [showHeader && /*#__PURE__*/_jsxs(View, {
+      testID: "popover-header",
+      className: cn(headerVariants()),
+      children: [/*#__PURE__*/_jsx(Text, {
+        testID: "popover-title",
+        className: cn(titleVariants()),
+        children: title
+      }), showDescription && /*#__PURE__*/_jsx(Text, {
+        testID: "popover-description",
+        className: cn(descriptionVariants()),
+        children: description
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      testID: "popover-content-row",
+      className: cn(contentRowVariants()),
+      children: /*#__PURE__*/_jsx(View, {
+        className: cn(contentInnerVariants()),
+        children: children ?? /*#__PURE__*/_jsx(Text, {
+          className: "text-sm font-medium text-text-primary",
+          children: "PopoverContent - Switch content type in Props"
+        })
+      })
+    }), showFooter && /*#__PURE__*/_jsxs(View, {
+      testID: "popover-footer",
+      className: cn(footerVariants()),
+      children: [/*#__PURE__*/_jsx(Button, {
+        testID: "popover-primary",
+        size: "default",
+        variant: "default",
+        onPress: onPrimaryPress,
+        children: primaryButtonText
+      }), showSecondaryButton && /*#__PURE__*/_jsx(Button, {
+        testID: "popover-secondary",
+        size: "default",
+        variant: "secondary",
+        onPress: onSecondaryPress,
+        children: secondaryButtonText
+      })]
+    })]
+  });
+}
+PopoverContainer.displayName = 'PopoverContainer';
+export { Popover, PopoverContent, PopoverTrigger };
+//# sourceMappingURL=Popover-Container.js.map

package/lib/module/components/Layout/PopoverContainer/Popover-Container.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NativeOnlyAnimatedView","TextClassContext","Text","Button","cn","PopoverPrimitive","React","Platform","StyleSheet","View","RNView","cssInterop","cva","FadeIn","FadeOut","FullWindowOverlay","RNFullWindowOverlay","jsx","_jsx","jsxs","_jsxs","className","Popover","Root","PopoverTrigger","Trigger","OS","Fragment","PopoverContent","forwardRef","align","sideOffset","portalHost","props","ref","Portal","hostName","children","Overlay","style","select","native","absoluteFill","entering","duration","exiting","Provider","value","Content","web","side","displayName","PopoverContainerVariants","size","rootVariants","variants","lg","md","defaultVariants","headerVariants","titleVariants","descriptionVariants","contentRowVariants","contentInnerVariants","footerVariants","PopoverContainer","description","title","showDescription","showFooter","showHeader","showSecondaryButton","primaryButtonText","secondaryButtonText","onPrimaryPress","onSecondaryPress","testID","variant","onPress"],"sourceRoot":"../../../../../src","sources":["components/Layout/PopoverContainer/Popover-Container.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Layout/PopoverContainer/PopoverContainer.figma.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { PopoverContainer } from "./Popover-Container.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(PopoverContainer, 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=207-1188', {
+  props: {
+    // Text content
+    title: figma.string('PopoverTitle'),
+    description: figma.string('PopoverDescription'),
+    // Size variant
+    size: figma.enum('size', {
+      lg: 'lg',
+      md: 'md'
+    }),
+    // Visibility toggles
+    showHeader: figma.boolean('Show HeaderContent'),
+    showTitle: figma.boolean('Show Title'),
+    showDescription: figma.boolean('Show Description'),
+    showFooter: figma.boolean('Show FooterActions'),
+    showSecondaryButton: figma.boolean('Show SecondaryButton')
+  },
+  example: props => /*#__PURE__*/_jsx(PopoverContainer, {
+    title: props.title,
+    description: props.description,
+    size: props.size,
+    showHeader: props.showHeader,
+    showFooter: props.showFooter,
+    showSecondaryButton: props.showSecondaryButton,
+    showDescription: props.showDescription
+  })
+});
+//# sourceMappingURL=PopoverContainer.figma.js.map

package/lib/module/components/Layout/PopoverContainer/PopoverContainer.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","PopoverContainer","jsx","_jsx","connect","props","title","string","description","size","enum","lg","md","showHeader","boolean","showTitle","showDescription","showFooter","showSecondaryButton","example"],"sourceRoot":"../../../../../src","sources":["components/Layout/PopoverContainer/PopoverContainer.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,gBAAgB,QAAQ,wBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEvDH,KAAK,CAACI,OAAO,CACXH,gBAAgB,EAChB,qGAAqG,EACrG;EACEI,KAAK,EAAE;IACL;IACAC,KAAK,EAAEN,KAAK,CAACO,MAAM,CAAC,cAAc,CAAC;IACnCC,WAAW,EAAER,KAAK,CAACO,MAAM,CAAC,oBAAoB,CAAC;IAC/C;IACAE,IAAI,EAAET,KAAK,CAACU,IAAI,CAAC,MAAM,EAAE;MACvBC,EAAE,EAAE,IAAI;MACRC,EAAE,EAAE;IACN,CAAC,CAAC;IACF;IACAC,UAAU,EAAEb,KAAK,CAACc,OAAO,CAAC,oBAAoB,CAAC;IAC/CC,SAAS,EAAEf,KAAK,CAACc,OAAO,CAAC,YAAY,CAAC;IACtCE,eAAe,EAAEhB,KAAK,CAACc,OAAO,CAAC,kBAAkB,CAAC;IAClDG,UAAU,EAAEjB,KAAK,CAACc,OAAO,CAAC,oBAAoB,CAAC;IAC/CI,mBAAmB,EAAElB,KAAK,CAACc,OAAO,CAAC,sBAAsB;EAC3D,CAAC;EACDK,OAAO,EAAGd,KAAK,iBACbF,IAAA,CAACF,gBAAgB;IACfK,KAAK,EAAED,KAAK,CAACC,KAAM;IACnBE,WAAW,EAAEH,KAAK,CAACG,WAAY;IAC/BC,IAAI,EAAEJ,KAAK,CAACI,IAAK;IACjBI,UAAU,EAAER,KAAK,CAACQ,UAAW;IAC7BI,UAAU,EAAEZ,KAAK,CAACY,UAAW;IAC7BC,mBAAmB,EAAEb,KAAK,CAACa,mBAAoB;IAC/CF,eAAe,EAAEX,KAAK,CAACW;EAAgB,CAGvB;AAEtB,CACF,CAAC","ignoreList":[]}

package/lib/module/components/Layout/Tabs/Tabs.figma.js

@@ -0,0 +1,25 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { TabItem } from "./Tabs.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(TabItem, 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=89-326',
+// Replace with actual node ID
+{
+  props: {
+    variant: figma.enum('variant', {
+      inactive: 'inactive',
+      active: 'active',
+      disabled: 'disabled'
+    }),
+    showBadge: figma.boolean('Show Badge')
+  },
+  example: ({
+    variant,
+    showBadge
+  }) => /*#__PURE__*/_jsx(TabItem, {
+    variant: variant,
+    showBadge: showBadge
+  })
+});
+//# sourceMappingURL=Tabs.figma.js.map

package/lib/module/components/Layout/Tabs/Tabs.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","TabItem","jsx","_jsx","connect","props","variant","enum","inactive","active","disabled","showBadge","boolean","example"],"sourceRoot":"../../../../../src","sources":["components/Layout/Tabs/Tabs.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,OAAO,QAAQ,WAAQ;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjCH,KAAK,CAACI,OAAO,CACXH,OAAO,EACP,mGAAmG;AAAE;AACrG;EACEI,KAAK,EAAE;IACLC,OAAO,EAAEN,KAAK,CAACO,IAAI,CAAC,SAAS,EAAE;MAC7BC,QAAQ,EAAE,UAAU;MACpBC,MAAM,EAAE,QAAQ;MAChBC,QAAQ,EAAE;IACZ,CAAC,CAAC;IACFC,SAAS,EAAEX,KAAK,CAACY,OAAO,CAAC,YAAY;EACvC,CAAC;EAEDC,OAAO,EAAEA,CAAC;IAAEP,OAAO;IAAEK;EAAU,CAAC,kBAC9BR,IAAA,CAACF,OAAO;IAACK,OAAO,EAAEA,OAAQ;IAACK,SAAS,EAAEA;EAAU,CAAE;AAEtD,CACF,CAAC","ignoreList":[]}

package/lib/module/components/Layout/Tabs/Tabs.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import * as React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cva } from 'class-variance-authority';
+import { cn } from "../../../lib/utils.js";
+import { Badge } from "../../DataDisplay/Badge/Badge.js";
+
+// NativeWind interop (className -> style)
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Pressable, {
+  className: 'style'
+});
+
+/* -----------------------------------------------------
+ * Variants
+ * --------------------------------------------------- */
+
+const rootVariants = cva('w-full flex-row items-center rounded-md bg-muted p-1', {
+  variants: {
+    size: {
+      default: ''
+    }
+  },
+  defaultVariants: {
+    size: 'default'
+  }
+});
+const tabSlotVariants = cva('flex-1', {
+  variants: {
+    active: {
+      false: '',
+      true: 'bg-background rounded-md'
+    }
+  },
+  defaultVariants: {
+    active: 'false'
+  }
+});
+
+/* -----------------------------------------------------
+ * TabItem
+ * --------------------------------------------------- */
+
+const tabItemVariants = cva('flex-row pt-2 pb-2 pl-6 pr-6 justify-center items-center gap-2 rounded-md', {
+  variants: {
+    variant: {
+      Inactive: '',
+      Active: 'bg-background',
+      Disabled: 'opacity-50'
+    }
+  },
+  defaultVariants: {
+    variant: 'Inactive'
+  }
+});
+const tabTextVariants = cva('text-center text-sm font-semibold font-[Geist]', {
+  variants: {
+    variant: {
+      Inactive: 'text-muted-foreground',
+      Active: 'text-foreground',
+      Disabled: 'text-muted-foreground'
+    }
+  },
+  defaultVariants: {
+    variant: 'Inactive'
+  }
+});
+export function TabItem({
+  variant,
+  showBadge,
+  style,
+  testID
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID,
+    className: cn(tabItemVariants({
+      variant
+    })),
+    style: style,
+    children: [/*#__PURE__*/_jsx(Text, {
+      className: cn(tabTextVariants({
+        variant
+      })),
+      children: "TabItem"
+    }), showBadge && /*#__PURE__*/_jsx(Badge, {
+      text: "03",
+      size: "sm",
+      variant: "outline",
+      showRightIcon: false,
+      className: cn('border-border', variant === 'Active' && 'bg-muted', variant === 'Disabled' && 'bg-muted')
+    })]
+  });
+}
+
+/* -----------------------------------------------------
+ * Props
+ * --------------------------------------------------- */
+
+/* -----------------------------------------------------
+ * Component
+ * --------------------------------------------------- */
+
+export function Tabs(props) {
+  const {
+    style,
+    testID
+  } = props;
+  const [activeTab, setActiveTab] = React.useState(1);
+  return /*#__PURE__*/_jsxs(View, {
+    testID: testID ?? 'tabs',
+    className: cn(rootVariants()),
+    style: style,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      className: cn(tabSlotVariants({
+        active: activeTab === 0
+      })),
+      onPress: () => setActiveTab(0),
+      children: /*#__PURE__*/_jsx(TabItem, {
+        testID: "tab-item-1",
+        variant: activeTab === 0 ? 'Active' : 'Inactive',
+        showBadge: true
+      })
+    }), /*#__PURE__*/_jsx(Pressable, {
+      className: cn(tabSlotVariants({
+        active: activeTab === 1
+      })),
+      onPress: () => setActiveTab(1),
+      children: /*#__PURE__*/_jsx(TabItem, {
+        testID: "tab-item-2",
+        variant: activeTab === 1 ? 'Active' : 'Inactive',
+        showBadge: true
+      })
+    })]
+  });
+}
+Tabs.displayName = 'Tabs';
+export { rootVariants, tabSlotVariants };
+//# sourceMappingURL=Tabs.js.map

package/lib/module/components/Layout/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Pressable","cssInterop","cva","cn","Badge","jsx","_jsx","jsxs","_jsxs","className","rootVariants","variants","size","default","defaultVariants","tabSlotVariants","active","false","true","tabItemVariants","variant","Inactive","Active","Disabled","tabTextVariants","TabItem","showBadge","style","testID","children","text","showRightIcon","Tabs","props","activeTab","setActiveTab","useState","onPress","displayName"],"sourceRoot":"../../../../../src","sources":["components/Layout/Tabs/Tabs.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Navigation/Appbar/AppBar.figma.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import figma from '@figma/code-connect';
+import { AppBar } from "./AppBar.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FIGMA_URL = 'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=227-4357';
+
+/**
+ * AppBar - Navigation header component
+ *
+ * Use cases:
+ * - Page header with title and subtitle
+ * - Home screen with centered logo
+ * - Navigation with leading/trailing actions
+ *
+ * Features:
+ * - Two variants: default (with title) and home (with logo)
+ * - Optional header block: tabs or search
+ * - Configurable leading/trailing icons
+ * - SafeAreaView support for status bar
+ */
+figma.connect(AppBar, FIGMA_URL, {
+  props: {
+    variant: figma.enum('variant', {
+      default: 'default',
+      home: 'home'
+    }),
+    showLeading: figma.boolean('Show Leading'),
+    showTrailing: figma.boolean('Show Trailing'),
+    showSubtitle: figma.boolean('Show Subtitle'),
+    title: figma.string('Title'),
+    subtitle: figma.string('Subtitle'),
+    showHeaderBlock: figma.boolean('Show HeaderBlock'),
+    headerType: figma.nestedProps('HeaderBlock', {
+      type: figma.enum('type', {
+        tabs: 'tabs',
+        search: 'search'
+      })
+    }),
+    logo: figma.instance('Logo')
+  },
+  example: props => /*#__PURE__*/_jsx(AppBar, {
+    variant: props.variant,
+    title: props.title,
+    subtitle: props.subtitle,
+    showLeading: props.showLeading,
+    showTrailing: props.showTrailing,
+    showSubtitle: props.showSubtitle,
+    showHeaderBlock: props.showHeaderBlock,
+    headerType: props.headerType.type,
+    onLeadingPress: () => {},
+    onTrailingPress: () => {}
+  })
+});
+i;
+//# sourceMappingURL=AppBar.figma.js.map

package/lib/module/components/Navigation/Appbar/AppBar.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["figma","AppBar","jsx","_jsx","FIGMA_URL","connect","props","variant","enum","default","home","showLeading","boolean","showTrailing","showSubtitle","title","string","subtitle","showHeaderBlock","headerType","nestedProps","type","tabs","search","logo","instance","example","onLeadingPress","onTrailingPress","i"],"sourceRoot":"../../../../../src","sources":["components/Navigation/Appbar/AppBar.figma.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,qBAAqB;AACvC,SAASC,MAAM,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElC,MAAMC,SAAS,GACb,qGAAqG;;AAEvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACAJ,KAAK,CAACK,OAAO,CAACJ,MAAM,EAAEG,SAAS,EAAE;EAC/BE,KAAK,EAAE;IACLC,OAAO,EAAEP,KAAK,CAACQ,IAAI,CAAC,SAAS,EAAE;MAC7BC,OAAO,EAAE,SAAS;MAClBC,IAAI,EAAE;IACR,CAAC,CAAC;IACFC,WAAW,EAAEX,KAAK,CAACY,OAAO,CAAC,cAAc,CAAC;IAC1CC,YAAY,EAAEb,KAAK,CAACY,OAAO,CAAC,eAAe,CAAC;IAC5CE,YAAY,EAAEd,KAAK,CAACY,OAAO,CAAC,eAAe,CAAC;IAC5CG,KAAK,EAAEf,KAAK,CAACgB,MAAM,CAAC,OAAO,CAAC;IAC5BC,QAAQ,EAAEjB,KAAK,CAACgB,MAAM,CAAC,UAAU,CAAC;IAClCE,eAAe,EAAElB,KAAK,CAACY,OAAO,CAAC,kBAAkB,CAAC;IAClDO,UAAU,EAAEnB,KAAK,CAACoB,WAAW,CAAC,aAAa,EAAE;MAC3CC,IAAI,EAAErB,KAAK,CAACQ,IAAI,CAAC,MAAM,EAAE;QACvBc,IAAI,EAAE,MAAM;QACZC,MAAM,EAAE;MACV,CAAC;IACH,CAAC,CAAC;IACFC,IAAI,EAAExB,KAAK,CAACyB,QAAQ,CAAC,MAAM;EAC7B,CAAC;EACDC,OAAO,EAAGpB,KAAK,iBACbH,IAAA,CAACF,MAAM;IACLM,OAAO,EAAED,KAAK,CAACC,OAAQ;IACvBQ,KAAK,EAAET,KAAK,CAACS,KAAM;IACnBE,QAAQ,EAAEX,KAAK,CAACW,QAAS;IACzBN,WAAW,EAAEL,KAAK,CAACK,WAAY;IAC/BE,YAAY,EAAEP,KAAK,CAACO,YAAa;IACjCC,YAAY,EAAER,KAAK,CAACQ,YAAa;IACjCI,eAAe,EAAEZ,KAAK,CAACY,eAAgB;IACvCC,UAAU,EAAEb,KAAK,CAACa,UAAU,CAACE,IAAK;IAClCM,cAAc,EAAEA,CAAA,KAAM,CAAC,CAAE;IACzBC,eAAe,EAAEA,CAAA,KAAM,CAAC;EAAE,CAC3B;AAEL,CAAC,CAAC;AACFC,CAAC","ignoreList":[]}