@campxdev/react-native-blueprint 0.1.12 → 0.1.14

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { View, Text, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Button } from '../../Input/Button/Button';
+import {
+  Popover as PopoverPrimitive,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverContainer,
+} from '../../Layout/PopoverContainer/Popover-Container';
+
+/**
+ * Popover Component
+ *
+ * A control that presents a floating panel of content anchored to a trigger button.
+ * Supports top and bottom placement with customizable opening state.
+ *
+ * Uses the underlying PopoverContainer primitive for actual positioning and animations.
+ */
+
+export type PopoverPlacement = 'top' | 'bottom';
+
+export interface PopoverProps {
+  placement?: PopoverPlacement;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export const Popover = React.forwardRef<
+  React.ElementRef<typeof View>,
+  PopoverProps
+>(({ placement = 'bottom', style, testID }, ref) => {
+  const side = placement === 'top' ? 'top' : 'bottom';
+
+  return (
+    <PopoverPrimitive>
+      {/* Trigger Button */}
+      <PopoverTrigger ref={ref} asChild>
+        <Button
+          variant="outline"
+          size="default"
+          testID={testID ?? 'popover-trigger'}
+          style={style}
+        >
+          <Text>Open Popover</Text>
+        </Button>
+      </PopoverTrigger>
+
+      {/* Popover Content */}
+      <PopoverContent align="start" side={side} sideOffset={8}>
+        <PopoverContainer size="lg" />
+      </PopoverContent>
+    </PopoverPrimitive>
+  );
+});
+
+Popover.displayName = 'Popover';
+
+export default Popover;

package/src/components/Navigation/Themetoggle/Theme-Toggle.figma.tsx

@@ -0,0 +1,19 @@
+import { ThemeToggle } from './Theme-Toggle';
+import type { ThemeToggleProps } from './Theme-Toggle';
+import { figma } from '@figma/code-connect';
+
+export type { ThemeToggleProps };
+
+figma.connect(
+  ThemeToggle,
+  'https://www.figma.com/design/66WaqopqU3WXgwVtyQuTUf/React-Native-Blueprint-Library?node-id=158-338',
+  {
+    props: {
+      value: figma.enum('state', {
+        Light: 'light',
+        Dark: 'dark',
+      }),
+    },
+    example: (props) => <ThemeToggle value={props.value} onChange={() => {}} />,
+  }
+);

package/src/components/Navigation/Themetoggle/Theme-Toggle.tsx

@@ -0,0 +1,51 @@
+import { Pressable as RNPressable, View as RNView } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { Moon, Sun } from 'lucide-react-native';
+import { cn } from '../../../lib/utils';
+
+cssInterop(RNView, { className: 'style' });
+cssInterop(RNPressable, { className: 'style' });
+
+const View = RNView as any;
+const Pressable = RNPressable as any;
+
+export type ThemeToggleProps = {
+  value: 'light' | 'dark';
+  onChange?: (value: 'light' | 'dark') => void;
+  className?: string;
+};
+
+export function ThemeToggle({ value, onChange, className }: ThemeToggleProps) {
+  const isDark = value === 'dark';
+
+  return (
+    <Pressable
+      onPress={() => onChange?.(isDark ? 'light' : 'dark')}
+      className={cn(
+        'relative flex-row items-center justify-between h-10 w-20 rounded-lg px-2',
+        isDark ? 'bg-brand-primary' : 'bg-surface-default',
+        className
+      )}
+    >
+      {isDark ? (
+        <>
+          {/* Thumb on LEFT for dark mode */}
+          <View className="h-7 w-7 rounded-md bg-surface-default items-center justify-center" />
+          {/* Moon icon on RIGHT for dark mode */}
+          <View className="h-7 w-7 items-center justify-center">
+            <Moon size={20} color="#FFF" />
+          </View>
+        </>
+      ) : (
+        <>
+          {/* Sun icon on LEFT for light mode */}
+          <View className="h-7 w-7 items-center justify-center">
+            <Sun size={20} color="#000" />
+          </View>
+          {/* Thumb on RIGHT for light mode */}
+          <View className="h-7 w-7 rounded-md bg-brand-primary items-center justify-center" />
+        </>
+      )}
+    </Pressable>
+  );
+}

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

@@ -1,15 +1,10 @@
 import * as Slot from '@rn-primitives/slot';
 import type { SlottableViewProps, ViewRef } from '@rn-primitives/types';
 import * as React from 'react';
-import { View as RNView, useColorScheme } from 'react-native';
+import { View, useColorScheme } from 'react-native';
 import { SquircleView } from 'react-native-figma-squircle';
-import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
-import { TextClassContext } from './Text';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
+import { TextClassContext } from '../Input/Text/Text';
 
 /**
  * CustomCard container component with squircle shape

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

@@ -1,6 +1,6 @@
 import { Icon } from './Icon';
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
+import { TextClassContext } from '../Input/Text/Text';
 import { cn } from '../../lib/utils';
 import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
 import {
@@ -14,21 +14,17 @@ import {
   Platform,
   type StyleProp,
   StyleSheet,
-  Text as RNText,
+  Text,
   type TextProps,
-  View as RNView,
+  View,
   type ViewStyle,
 } from 'react-native';
 import { cssInterop } from 'nativewind';
 import { FadeIn } from 'react-native-reanimated';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
 
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const Text = cssInterop(RNText, {
-  className: 'style',
-}) as React.ComponentType<any>;
+cssInterop(View, { className: 'style' });
+cssInterop(Text, { className: 'style' });
 
 /**
  * Root component for dropdown menu - provides context for all dropdown menu children
@@ -327,7 +323,7 @@ function DropdownMenuItem({
           inset && 'pl-8',
           className
         )}
-        {...(props as any)}
+        {...props}
       />
     </TextClassContext.Provider>
   );

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

@@ -9,7 +9,7 @@ import {
 import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 import { CustomCard } from './Custom-Card';
-import { Text } from './Text';
+import { Text } from '../Input/Text/Text';
 
 cssInterop(View, { className: 'style' });
 cssInterop(Pressable, { className: 'style' });

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

@@ -1,5 +1,5 @@
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
+import { TextClassContext } from '../Input/Text/Text';
 import { cn } from '../../lib/utils';
 import * as HoverCardPrimitive from '@rn-primitives/hover-card';
 import * as React from 'react';

package/src/components/ui/Input.tsx

@@ -1,15 +1,8 @@
 import { cn } from '../../lib/utils';
-import * as React from 'react';
-import {
-  Platform,
-  TextInput as RNTextInput,
-  type TextInputProps,
-} from 'react-native';
+import { Platform, TextInput, type TextInputProps } from 'react-native';
 import { cssInterop } from 'nativewind';
 
-const TextInput = cssInterop(RNTextInput, {
-  className: 'style',
-}) as React.ComponentType<any>;
+cssInterop(TextInput, { className: 'style' });
 
 /**
  * Props for Input component
@@ -18,9 +11,8 @@ const TextInput = cssInterop(RNTextInput, {
  * @property {string} [className] - Additional Tailwind classes for custom styling
  * @property {boolean} [editable=true] - Whether the input is editable (disabled when false)
  */
-interface InputProps extends Omit<TextInputProps, 'editable'> {
+interface InputProps extends TextInputProps {
   className?: string;
-  editable?: boolean;
 }
 
 /**
@@ -64,7 +56,7 @@ function Input({
   className,
   editable = true,
   ...props
-}: InputProps & React.RefAttributes<RNTextInput>) {
+}: InputProps & React.RefAttributes<TextInput>) {
   return (
     <TextInput
       className={cn(

package/src/components/ui/Label.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cn } from '../../lib/utils';
-import { Text } from './Text';
+import { Text } from '../Input/Text/Text';
 import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
 
 /**

package/src/components/ui/Menubar.tsx

@@ -1,6 +1,6 @@
 import { Icon } from './Icon';
 import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
+import { TextClassContext } from '../Input/Text/Text';
 import { cn } from '../../lib/utils';
 import * as MenubarPrimitive from '@rn-primitives/menubar';
 import { Portal } from '@rn-primitives/portal';
@@ -13,27 +13,21 @@ import {
 import * as React from 'react';
 import {
   Platform,
-  Pressable as RNPressable,
+  Pressable,
   type StyleProp,
   StyleSheet,
-  Text as RNText,
+  Text,
   type TextProps,
-  View as RNView,
+  View,
   type ViewStyle,
 } from 'react-native';
 import { cssInterop } from 'nativewind';
 import { FadeIn } from 'react-native-reanimated';
 import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
 
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const Text = cssInterop(RNText, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const Pressable = cssInterop(RNPressable, {
-  className: 'style',
-}) as React.ComponentType<any>;
+cssInterop(View, { className: 'style' });
+cssInterop(Text, { className: 'style' });
+cssInterop(Pressable, { className: 'style' });
 
 /**
  * Individual menu within the menubar
@@ -130,7 +124,6 @@ function Menubar({
           <Pressable onPress={closeMenu} style={StyleSheet.absoluteFill} />
         </Portal>
       ) : null}
-
       <MenubarPrimitive.Root
         className={cn(
           'bg-background border-border flex h-10 flex-row items-center gap-1 rounded-md border p-1 shadow-sm shadow-black/5 sm:h-9',
@@ -179,7 +172,7 @@ function MenubarTrigger({
           value === itemValue && 'bg-accent',
           className
         )}
-        {...(props as any)}
+        {...props}
       />
     </TextClassContext.Provider>
   );
@@ -351,7 +344,7 @@ function MenubarItem({
           inset && 'pl-8',
           className
         )}
-        {...(props as any)}
+        {...props}
       />
     </TextClassContext.Provider>
   );

package/src/components/ui/Native-Only-Animated-View.tsx

@@ -24,13 +24,14 @@ import Animated from 'react-native-reanimated';
  * @platform web - Renders as Fragment without animations
  */
 function NativeOnlyAnimatedView(
-  props: React.ComponentProps<typeof Animated.View> &
-    React.RefAttributes<Animated.View>
+  props: React.ComponentPropsWithRef<typeof Animated.View> & {
+    children?: React.ReactNode;
+  }
 ) {
   if (Platform.OS === 'web') {
     return <>{props.children as React.ReactNode}</>;
   } else {
-    return <Animated.View {...(props as any)} />;
+    return <Animated.View {...props} />;
   }
 }
 

package/src/components/ui/Slider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Platform, View as RNView, type ViewProps } from 'react-native';
+import { Platform, View, ViewProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   runOnJS,
@@ -7,13 +7,8 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import { cssInterop } from 'nativewind';
 import { cn } from '../../lib/utils';
 
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
 /**
  * Props for the Slider component
  *
@@ -32,7 +27,6 @@ export interface SliderProps extends Omit<ViewProps, 'children'> {
   step?: number;
   disabled?: boolean;
   className?: string;
-  style?: any;
 }
 
 /**
@@ -197,7 +191,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps>(
         <GestureDetector gesture={composed}>
           <View
             className="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
-            onLayout={(event: any) => {
+            onLayout={(event) => {
               const { width, x } = event.nativeEvent.layout;
               sliderWidth.value = width;
               setSliderDimensions({ width, x });

package/src/components/ui/Table.tsx

@@ -1,12 +1,10 @@
 import { cn } from '../../lib/utils';
-import { Text } from './Text';
-import { View as RNView, type ViewProps } from 'react-native';
+import { Text } from '../Input/Text/Text';
+import { View } from 'react-native';
 import { cssInterop } from 'nativewind';
 import * as React from 'react';
 
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
+cssInterop(View, { className: 'style' });
 
 /**
  * Root table container component
@@ -33,7 +31,7 @@ const View = cssInterop(RNView, {
 function Table({
   className,
   ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
   return <View className={cn('w-full', className)} {...props} />;
 }
 
@@ -45,7 +43,7 @@ function Table({
 function TableHeader({
   className,
   ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
   return (
     <View
       className={cn('border-border flex-row border-b', className)}
@@ -62,7 +60,7 @@ function TableHeader({
 function TableBody({
   className,
   ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
   return <View className={cn('flex-col', className)} {...props} />;
 }
 
@@ -74,7 +72,7 @@ function TableBody({
 function TableFooter({
   className,
   ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
   return (
     <View
       className={cn(
@@ -94,7 +92,7 @@ function TableFooter({
 function TableRow({
   className,
   ...props
-}: ViewProps & { className?: string } & React.RefAttributes<RNView>) {
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
   return (
     <View
       className={cn('border-border flex-row border-b', className)}

package/src/components/ui/Toast.tsx

@@ -1,14 +1,12 @@
 import { cn } from '../../lib/utils';
-import { Text, TextClassContext } from './Text';
+import { Text, TextClassContext } from '../Input/Text/Text';
 import { Icon } from './Icon';
 import type { LucideIcon } from 'lucide-react-native';
 import * as React from 'react';
-import { View as RNView, type ViewProps } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 import { cssInterop } from 'nativewind';
 
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
+cssInterop(View, { className: 'style' });
 
 /**
  * Toast notification component
@@ -50,8 +48,7 @@ function Toast({
   iconClassName,
   ...props
 }: ViewProps &
-  React.RefAttributes<RNView> & {
-    children?: React.ReactNode;
+  React.RefAttributes<View> & {
     icon?: LucideIcon;
     variant?: 'default' | 'destructive';
     iconClassName?: string;

package/src/components/ui/index.ts

@@ -1,48 +1,57 @@
-// Core components - always available (minimal dependencies)
-export * from './Alert';
-export * from './AppBar';
-export * from './Badge';
-export * from './Button';
-export * from './Card';
+export * from '../DataDisplay/Accordion/Accordion';
+export * from '../DataDisplay/AccordionItem/AccordionItem';
+export * from '../Feedback/Alert/Alert';
+export * from '../Feedback/AlertDialog/Alert-Dialog';
+export * from '../Navigation/Appbar/AppBar';
+export * from '../Layout/AspectRatio/Aspect-Ratio';
+export * from '../DataDisplay/Avatar/Avatar';
+export * from '../DataDisplay/Badge/Badge';
+export * from '../DataDisplay/Chips/Chips';
+export * from '../DataDisplay/ChipsRow/ChipsRow';
+export * from '../DataDisplay/BannerRow/BannerRow';
+export * from '../Layout/PageLayoutShell/PageLayoutShell';
+export * from '../Layout/PageLayoutFocused/PageLayoutFocused';
+export * from '../Layout/PageContent/PageContent';
+export * from '../Layout/Bottomsheet/Bottom-Sheet';
+export * from '../Input/Button/Button';
+export * from '../DataDisplay/Card/Card';
+export * from '../DataDisplay/CalendarItem/CalendarItem';
+export * from '../DataDisplay/MonthCalendar/MonthCalendar';
+export * from '../DataDisplay/DataCard/DataCard';
+export * from '../Input/Checkbox/Checkbox';
+export * from './Collapsible';
+export * from '../Navigation/ContextMenu/Context-Menu';
 export * from './Custom-Card';
-export * from './Floating-Action';
+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';
-export * from './Native-Only-Animated-View';
-export * from './NavBar';
-export * from './Separator';
-export * from './SizedBox';
-export * from './Skeleton';
-export * from './Table';
-export * from './Text';
-export * from './Textarea';
-export * from './Theme-Toggle';
-
-// Components requiring @rn-primitives packages
-// These are optional peer dependencies - install only what you need
-// For tree-shakeable imports, use: import { Component } from '@campxdev/react-native-blueprint/Component'
-export * from './Accordion';
-export * from './Alert-Dialog';
-export * from './Aspect-Ratio';
-export * from './Avatar';
-export * from './Bottom-Sheet';
-export * from './Checkbox';
-export * from './Collapsible';
-export * from './Context-Menu';
-export * from './Dialog';
-export * from './Dropdown-Menu';
-export * from './Hover-Card';
 export * from './Label';
 export * from './Menubar';
-export * from './Popover';
-export * from './Progress';
-export * from './Radio-Group';
-export * from './Select';
+export * from '../Navigation/Navbar/NavBar';
+export * from '../Navigation/Popover/Popover';
+export * from '../Layout/PopoverContainer/Popover-Container';
+export * from '../Feedback/ProgressLinear/Progress-linear';
+export * from '../Feedback/ProgressCircular/Progress-circular';
+export * from '../Feedback/Stepper/Stepper';
+export * from '../Input/RadioGroup/Radio-Group';
+export * from '../Input/Select/Select';
+export * from '../DataDisplay/Separator/Separator';
+export * from './SizedBox';
+export * from '../DataDisplay/Skeleton/Skeleton';
 export * from './Slider';
-export * from './Switch';
-export * from './Tabs';
+export * from '../Input/switch/Switch';
+export * from './Table';
+export * from '../Layout/Tabs/Tabs';
+export * from '../Input/Text/Text';
+export * from '../Input/TextField/Textfield';
+export * from '../Navigation/Themetoggle/Theme-Toggle';
 export * from './Toast';
-export * from './Toggle';
-export * from './Toggle-Group';
-export * from './Tooltip';
+export * from '../Input/Toggle/Toggle';
+export * from '../Input/ToggleGroup/Toggle-Group';
+export * from '../DataDisplay/Tooltip/Tooltip';
+export * from '../DataDisplay/DataListItem/DataListItem';
+export * from '../DataDisplay/Datalist/Datalist';

package/src/index.tsx

@@ -1,6 +1,3 @@
-// Type augmentations for NativeWind className support
-// Types are automatically loaded via tsconfig.json typeRoots and include
-
 // Export components
 export * from './components/ui';