@campxdev/react-native-blueprint 0.1.14 → 0.1.15

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/Greeting-Card.tsx

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

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,7 +1,9 @@
+// @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';

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/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/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/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/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 export * from './AlertDialogPattern';
 export * from './DashboardPattern';
 export * from './EmptyState';