@campxdev/react-native-blueprint 0.1.14 → 0.1.16

package/src/components/Input/Toggle/Toggle.figma.tsx

@@ -0,0 +1,37 @@
+import figma from '@figma/code-connect';
+import { ToggleItem } from './Toggle';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=408-2632';
+
+figma.connect(ToggleItem, FIGMA_URL, {
+  props: {
+    // State (whether toggle is on/off)
+    state: figma.boolean('state'),
+
+    // Tone (color variant)
+    tone: figma.enum('tone', {
+      default: 'default',
+      success: 'success',
+      destructive: 'destructive',
+      warning: 'warning',
+    }),
+
+    // Text content
+    text: figma.string('Text'),
+
+    // Icon visibility
+    showLeftIcon: figma.boolean('Show leftIcon'),
+    showRightIcon: figma.boolean('Show rightIcon'),
+  },
+
+  example: (props) => (
+    <ToggleItem
+      state={props.state}
+      tone={props.tone}
+      text={props.text}
+      showLeftIcon={props.showLeftIcon}
+      showRightIcon={props.showRightIcon}
+    />
+  ),
+});

package/src/components/Input/Toggle/Toggle.tsx

@@ -1,8 +1,18 @@
-import * as React from 'react';
+// @ts-nocheck
+import React from 'react';
 import { View, Text } from 'react-native';
+import { cssInterop } from 'nativewind';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../../lib/utils';
 
+// NativeWind interop
+cssInterop(View, { className: 'style' });
+cssInterop(Text, { className: 'style' });
+
+// Typed components
+const StyledView = View as any;
+const StyledText = Text as any;
+
 /* ------------------------------------------------------------------
  * Variants
  * ------------------------------------------------------------------ */
@@ -12,14 +22,14 @@ const toggleItemVariants = cva(
   {
     variants: {
       tone: {
-        default: 'border-border-default',
-        success: 'border-highlight-success-green',
-        destructive: 'border-highlight-alert-red',
-        warning: 'border-highlight-warning-orange',
+        default: 'border-text-primary bg-surface-default',
+        success: 'border-text-primary bg-surface-default',
+        destructive: 'border-text-primary bg-surface-default',
+        warning: 'border-text-primary bg-surface-default',
       },
       state: {
         true: '',
-        false: 'bg-transparent',
+        false: '',
       },
     },
     compoundVariants: [
@@ -27,25 +37,27 @@ const toggleItemVariants = cva(
       {
         tone: 'default',
         state: true,
-        className: 'bg-surface-subtle',
+        className: 'bg-surface-subtle border-text-primary',
       },
       // SUCCESS (ON)
       {
         tone: 'success',
         state: true,
-        className: 'bg-highlight-success-green-muted',
+        className:
+          'bg-highlight-success-green-muted border-highlight-success-green',
       },
       // DESTRUCTIVE (ON)
       {
         tone: 'destructive',
         state: true,
-        className: 'bg-highlight-alert-red-muted',
+        className: 'bg-highlight-alert-red-muted border-highlight-alert-red',
       },
       // WARNING (ON)
       {
         tone: 'warning',
         state: true,
-        className: 'bg-highlight-warning-orange-muted',
+        className:
+          'bg-highlight-warning-orange-muted border-highlight-warning-orange',
       },
     ],
     defaultVariants: {
@@ -59,9 +71,9 @@ const textVariants = cva('text-sm font-semibold', {
   variants: {
     tone: {
       default: 'text-text-secondary',
-      success: 'text-highlight-success-green',
-      destructive: 'text-highlight-alert-red',
-      warning: 'text-highlight-warning-orange',
+      success: 'text-text-secondary',
+      destructive: 'text-text-secondary',
+      warning: 'text-text-secondary',
     },
     state: {
       true: '',
@@ -75,9 +87,24 @@ const textVariants = cva('text-sm font-semibold', {
       state: true,
       className: 'text-brand-primary',
     },
-    // Colored tones maintain their color in ON state (already handled by variant definition),
-    // but if we needed to override, we would do it here.
-    // The current definitions 'text-highlight-success-green' apply to both ON/OFF for success tone.
+    // Success (ON)
+    {
+      tone: 'success',
+      state: true,
+      className: 'text-highlight-success-green',
+    },
+    // Destructive (ON)
+    {
+      tone: 'destructive',
+      state: true,
+      className: 'text-highlight-alert-red',
+    },
+    // Warning (ON)
+    {
+      tone: 'warning',
+      state: true,
+      className: 'text-highlight-warning-orange',
+    },
   ],
 });
 
@@ -101,19 +128,19 @@ export function ToggleItem({
   className,
 }: ToggleItemProps) {
   return (
-    <View className={cn(toggleItemVariants({ tone, state }), className)}>
-      {showLeftIcon && <View className="h-4 w-4 bg-muted rounded-sm" />}
+    <StyledView className={cn(toggleItemVariants({ tone, state }), className)}>
+      {showLeftIcon && <StyledView className="h-4 w-4 bg-muted rounded-sm" />}
 
-      <Text
+      <StyledText
         className={textVariants({
           tone,
           state,
         })}
       >
         {text}
-      </Text>
+      </StyledText>
 
-      {showRightIcon && <View className="h-4 w-4 bg-muted rounded-sm" />}
-    </View>
+      {showRightIcon && <StyledView className="h-4 w-4 bg-muted rounded-sm" />}
+    </StyledView>
   );
 }

package/src/components/Input/ToggleGroup/Toggle-Group.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/Input/switch/Switch.figma.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 
 import { Switch } from './Switch';

package/src/components/Input/switch/Switch.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cn } from '../../../lib/utils';
 import * as SwitchPrimitive from '@rn-primitives/switch';
 import { cva, type VariantProps } from 'class-variance-authority';

package/src/components/Layout/Tabs/Tabs.figma.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 import { TabItem } from './Tabs';
 

package/src/components/Layout/Tabs/Tabs.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import {
   View,

package/src/components/Navigation/Appbar/AppBar.figma.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 import { AppBar } from './AppBar';
 

package/src/components/Navigation/FloatingAction/Floating-Action.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import React from 'react';
 import {
   Text,

package/src/components/Navigation/Popover/Popover.figma.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 import React from 'react';
 import { View as RNView } from 'react-native';

package/src/components/Navigation/Popover/Popover.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, Text, type StyleProp, type ViewStyle } from 'react-native';
 

package/src/components/ui/Custom-Card.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as Slot from '@rn-primitives/slot';
 import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
 import * as React from 'react';

package/src/components/ui/Dropdown-Menu.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Icon } from './Icon';
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
 import { TextClassContext } from '../Input/Text/Text';

package/src/components/ui/Hover-Card.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
 import { TextClassContext } from '../Input/Text/Text';
 import { cn } from '../../lib/utils';

package/src/components/ui/Icon.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cn } from '../../lib/utils';
 import type { LucideIcon, LucideProps } from 'lucide-react-native';
 import { cssInterop } from 'nativewind';

package/src/components/ui/Input.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cn } from '../../lib/utils';
 import { Platform, TextInput, type TextInputProps } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/components/ui/Menubar.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { Icon } from './Icon';
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
 import { TextClassContext } from '../Input/Text/Text';

package/src/components/ui/Slider.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { Platform, View, ViewProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';

package/src/components/ui/Table.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cn } from '../../lib/utils';
 import { Text } from '../Input/Text/Text';
 import { View } from 'react-native';

package/src/components/ui/Toast.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { cn } from '../../lib/utils';
 import { Text, TextClassContext } from '../Input/Text/Text';
 import { Icon } from './Icon';

package/src/components/ui/index.ts

@@ -1,11 +1,14 @@
+// @ts-nocheck
 export * from '../DataDisplay/Accordion/Accordion';
 export * from '../DataDisplay/AccordionItem/AccordionItem';
 export * from '../Feedback/Alert/Alert';
 export * from '../Feedback/AlertDialog/Alert-Dialog';
+export * from '../Feedback/InfoBar/InfoBar';
 export * from '../Navigation/Appbar/AppBar';
 export * from '../Layout/AspectRatio/Aspect-Ratio';
 export * from '../DataDisplay/Avatar/Avatar';
 export * from '../DataDisplay/Badge/Badge';
+export * from '../DataDisplay/Banner/Banner';
 export * from '../DataDisplay/Chips/Chips';
 export * from '../DataDisplay/ChipsRow/ChipsRow';
 export * from '../DataDisplay/BannerRow/BannerRow';
@@ -16,6 +19,7 @@ export * from '../Layout/Bottomsheet/Bottom-Sheet';
 export * from '../Input/Button/Button';
 export * from '../DataDisplay/Card/Card';
 export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/Greeting/Greeting';
 export * from '../DataDisplay/MonthCalendar/MonthCalendar';
 export * from '../DataDisplay/DataCard/DataCard';
 export * from '../Input/Checkbox/Checkbox';
@@ -25,7 +29,7 @@ export * from './Custom-Card';
 export * from '../Navigation/Dialog/Dialog';
 export * from './Dropdown-Menu';
 export * from '../Navigation/FloatingAction/Floating-Action';
-export * from './Greeting-Card';
+
 export * from './Hover-Card';
 export * from './Icon';
 export * from './Input';

package/src/index.tsx

@@ -1,6 +1,9 @@
 // Export components
 export * from './components/ui';
 
+// Export patterns
+export * from './patterns/pattern-components';
+
 // Export layout
 export { default as RootLayout } from './app/_layout';
 

package/src/patterns/pattern-components/AlertDialogPattern/AlertDialogPattern.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { View } from 'react-native';
 import { cssInterop } from 'nativewind';
 import {

package/src/patterns/pattern-components/AlertPattern/AlertPattern.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { useCallback, useEffect, useRef } from 'react';
 import { View, Animated } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/patterns/pattern-components/BottomSheetPattern/index.ts

@@ -0,0 +1 @@
+export { BottomSheetPattern } from './BottomSheetPattern';

package/src/patterns/pattern-components/CalendarPattern/CalendarPattern.figma.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import figma from '@figma/code-connect';
 import { CalendarPattern } from './CalendarPattern';
 

package/src/patterns/pattern-components/CalendarPattern/CalendarPattern.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View, ScrollView, type StyleProp, type ViewStyle } from 'react-native';
 import { cssInterop } from 'nativewind';

package/src/patterns/pattern-components/CalendarPattern/index.ts

@@ -0,0 +1 @@
+export { CalendarPattern } from './CalendarPattern';

package/src/patterns/pattern-components/DashboardPattern/index.ts

@@ -0,0 +1 @@
+export { DashboardPattern } from './DashboardPattern';

package/src/patterns/pattern-components/EmptyState/EmptyState.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as React from 'react';
 import { View as RNView, Text as RNText } from 'react-native';
 import LottieView from 'lottie-react-native';

package/src/patterns/pattern-components/EntityPatternGuided/EntityPatternGuided.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { View, Text as RNText } from 'react-native';
 
 import {

package/src/patterns/pattern-components/EntityPatternGuided/index.ts

@@ -0,0 +1 @@
+export { EntityPatternGuided } from './EntityPatternGuided';

package/src/patterns/pattern-components/EntityPatternOverview/EntityPatternOverview.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { View, Text as RNText } from 'react-native';
 
 import {

package/src/patterns/pattern-components/EntityPatternStructured/EntityPatternStructured.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { View, Text as RNText } from 'react-native';
 
 import {

package/src/patterns/pattern-components/FormPattern/FormPattern.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { View } from 'react-native';
 
 import { TextField } from '../../../components/Input/TextField/Textfield';

package/src/patterns/pattern-components/SuccessPattern/SuccessPattern.figma.tsx

@@ -0,0 +1,38 @@
+import figma from '@figma/code-connect';
+import { SuccessPattern } from './SuccessPattern';
+
+const FIGMA_URL =
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=411-3184';
+
+/**
+ * SuccessPattern - Success state pattern with animated checkmark
+ *
+ * Use cases:
+ * - Order confirmation screens
+ * - Form submission success
+ * - Action completion feedback
+ * - Payment confirmation
+ * - Task completion states
+ *
+ * Features:
+ * - Animated success tick using Lottie (Success-Tick.json)
+ * - Customizable success message
+ * - Optional description text
+ * - Configurable animation behavior (loop, autoplay, duration)
+ * - Callback when animation completes
+ */
+figma.connect(SuccessPattern, FIGMA_URL, {
+  props: {
+    successMessage: figma.string('SuccessMessage'),
+    description: figma.string('Description'),
+  },
+  example: (props) => (
+    <SuccessPattern
+      successMessage={props.successMessage}
+      description={props.description}
+      showAnimation={true}
+      autoplay={true}
+      loop={false}
+    />
+  ),
+});

package/src/patterns/pattern-components/SuccessPattern/SuccessPattern.tsx

@@ -0,0 +1,119 @@
+// @ts-nocheck
+import React from 'react';
+import { View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import LottieView from 'lottie-react-native';
+import { cn } from '../../../lib/utils';
+import { Text } from '../../../components/Input/Text/Text';
+
+cssInterop(RNView, { className: 'style' });
+
+const View = RNView as React.ComponentType<
+  React.ComponentProps<typeof RNView> & { className?: string }
+>;
+
+/* ============================================================================
+ * Types
+ * ============================================================================ */
+
+export interface SuccessPatternProps {
+  /** Main success message text */
+  successMessage?: string;
+  /** Secondary description text */
+  description?: string;
+  /** Whether to show the lottie animation */
+  showAnimation?: boolean;
+  /** Animation duration in milliseconds */
+  animationDuration?: number;
+  /** Loop the animation */
+  loop?: boolean;
+  /** Auto-play the animation */
+  autoplay?: boolean;
+  /** Custom className for styling */
+  className?: string;
+  /** Test ID for testing */
+  testID?: string;
+  /** Callback when animation completes */
+  onAnimationFinish?: () => void;
+}
+
+/* ============================================================================
+ * Component
+ * ============================================================================ */
+
+/**
+ * SuccessPattern Component
+ *
+ * A pattern component that displays a success state with:
+ * - Animated success tick/checkmark (Lottie animation)
+ * - Success message
+ * - Description text
+ *
+ * Perfect for use after form submissions, confirmations, or successful operations.
+ *
+ * @example
+ * ```tsx
+ * <SuccessPattern
+ *   successMessage="Order Placed Successfully!"
+ *   description="Your order has been confirmed"
+ *   showAnimation={true}
+ *   onAnimationFinish={() => navigation.navigate('Home')}
+ * />
+ * ```
+ */
+export const SuccessPattern = ({
+  successMessage = 'This is the Success Message',
+  description = 'Success message descriptions goes here',
+  showAnimation = true,
+  animationDuration = 2000,
+  loop = false,
+  autoplay = true,
+  className,
+  testID,
+  onAnimationFinish,
+}: SuccessPatternProps) => {
+  const animationRef = React.useRef<any>(null);
+
+  React.useEffect(() => {
+    if (autoplay && animationRef.current && showAnimation) {
+      animationRef.current.play();
+    }
+  }, [showAnimation, autoplay]);
+
+  return (
+    <View
+      testID={testID}
+      className={cn(
+        'w-full items-center justify-center bg-surface-page',
+        className
+      )}
+    >
+      {/* Animation Container */}
+      {showAnimation && (
+        <View className="h-60 w-60 items-center justify-center">
+          <LottieView
+            ref={animationRef}
+            source={require('../../../assets/Success-Tick.json')}
+            autoPlay={autoplay}
+            loop={loop}
+            duration={animationDuration}
+            onAnimationFinish={onAnimationFinish}
+            style={{ width: 300, height: 300 }}
+          />
+        </View>
+      )}
+
+      {/* Content Section */}
+      <View className="w-full items-center gap-2 text-center px-4 py-6">
+        <Text className="text-lg font-semibold text-text-primary">
+          {successMessage}
+        </Text>
+        <Text className="text-sm font-medium text-text-secondary">
+          {description}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+SuccessPattern.displayName = 'SuccessPattern';

package/src/patterns/pattern-components/SuccessPattern/index.ts

@@ -0,0 +1,2 @@
+export { SuccessPattern } from './SuccessPattern';
+export type { SuccessPatternProps } from './SuccessPattern';

package/src/patterns/pattern-components/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export * from './AlertDialogPattern';
 export * from './DashboardPattern';
 export * from './EmptyState';
@@ -6,9 +7,10 @@ export * from './CardListPattern';
 export * from './AlertPattern';
 export * from './DialogPattern';
 export * from './SkeletonPattern';
+export * from './SuccessPattern';
 export * from './FormPattern';
 export * from './EntityPatternOverview';
 export * from './EntityPatternStructured';
 export * from './EntityPatternGuided';
-export * from './CalendarPattern/CalendarPattern';
+export * from './CalendarPattern';
 export * from './MonthlyCalendarPattern';