@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Slider.tsx

@@ -0,0 +1,222 @@
+import * as React from 'react';
+import { Platform, View, ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+
+/**
+ * Props for the Slider component
+ *
+ * @property {number} value - Current slider value
+ * @property {function} onValueChange - Callback when value changes
+ * @property {number} min - Minimum value (default: 0)
+ * @property {number} max - Maximum value (default: 100)
+ * @property {number} step - Step increment (default: 1)
+ * @property {boolean} disabled - Whether the slider is disabled
+ */
+export interface SliderProps extends Omit<ViewProps, 'children'> {
+  value: number;
+  onValueChange?: (value: number[]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Ref interface for Slider component
+ *
+ * @property {function} reset - Resets slider to minimum value
+ */
+export interface SliderRef {
+  reset: () => void;
+}
+
+/**
+ * Interactive slider component for selecting numeric values
+ *
+ * Provides smooth gesture-based interaction with spring animations.
+ * Supports min/max ranges, step increments, and tap-to-select.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Slider
+ *   value={volume}
+ *   onValueChange={(values) => setVolume(values[0])}
+ *   min={0}
+ *   max={100}
+ *   step={5}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ * - Value changes are announced by screen readers
+ */
+const Slider = React.forwardRef<SliderRef, SliderProps>(
+  (
+    {
+      value,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const sliderWidth = useSharedValue(0);
+    const translationX = useSharedValue(0);
+    const startPosition = useSharedValue(0);
+    const [sliderDimensions, setSliderDimensions] = React.useState({
+      width: 0,
+      x: 0,
+    });
+
+    // Calculate thumb position from value
+    const getThumbPosition = React.useCallback(
+      (val: number) => {
+        const range = max - min;
+        const percentage = (val - min) / range;
+        return percentage * sliderDimensions.width;
+      },
+      [max, min, sliderDimensions.width]
+    );
+
+    // Calculate value from position
+    const getValueFromPosition = React.useCallback(
+      (position: number) => {
+        if (sliderWidth.value === 0) return min;
+        const percentage = Math.max(
+          0,
+          Math.min(1, position / sliderWidth.value)
+        );
+        const range = max - min;
+        let newValue = min + percentage * range;
+
+        // Apply step
+        if (step > 0) {
+          newValue = Math.round(newValue / step) * step;
+        }
+
+        return Math.max(min, Math.min(max, newValue));
+      },
+      [max, min, step, sliderWidth]
+    );
+
+    // Initialize thumb position based on value
+    React.useEffect(() => {
+      if (sliderDimensions.width > 0) {
+        const newPosition = getThumbPosition(value);
+        translationX.value = newPosition;
+      }
+    }, [value, sliderDimensions.width, getThumbPosition, translationX]);
+
+    // Expose reset method via ref
+    React.useImperativeHandle(ref, () => ({
+      reset: () => {
+        translationX.value = withSpring(getThumbPosition(min));
+        onValueChange?.([min]);
+      },
+    }));
+
+    const handleValueChange = React.useCallback(
+      (newValue: number) => {
+        onValueChange?.([newValue]);
+      },
+      [onValueChange]
+    );
+
+    const pan = Gesture.Pan()
+      .enabled(!disabled)
+      .onBegin(() => {
+        startPosition.value = translationX.value;
+      })
+      .onUpdate((event: { translationX: number }) => {
+        if (sliderWidth.value === 0) return;
+        const newPosition = Math.max(
+          0,
+          Math.min(sliderWidth.value, event.translationX + startPosition.value)
+        );
+        translationX.value = newPosition;
+      })
+      .onEnd(() => {
+        if (sliderWidth.value === 0) return;
+        const newValue = getValueFromPosition(translationX.value);
+        translationX.value = withSpring(getThumbPosition(newValue));
+        runOnJS(handleValueChange)(newValue);
+      });
+
+    const tap = Gesture.Tap()
+      .enabled(!disabled)
+      .onEnd((event: { x: number }) => {
+        if (sliderWidth.value === 0) return;
+        const newPosition = Math.max(0, Math.min(sliderWidth.value, event.x));
+        const newValue = getValueFromPosition(newPosition);
+        translationX.value = withSpring(getThumbPosition(newValue));
+        runOnJS(handleValueChange)(newValue);
+      });
+
+    const composed = Gesture.Race(tap, pan);
+
+    const thumbAnimatedStyle = useAnimatedStyle(() => ({
+      transform: [{ translateX: translationX.value }],
+    }));
+
+    const rangeAnimatedStyle = useAnimatedStyle(() => ({
+      width: translationX.value,
+    }));
+
+    return (
+      <View
+        className={cn(
+          'relative flex h-10 w-full flex-row items-center justify-center',
+          disabled && 'opacity-50',
+          className
+        )}
+        style={style}
+        {...props}
+      >
+        <GestureDetector gesture={composed}>
+          <View
+            className="relative h-2 w-full overflow-hidden rounded-full bg-primary/20"
+            onLayout={(event) => {
+              const { width, x } = event.nativeEvent.layout;
+              sliderWidth.value = width;
+              setSliderDimensions({ width, x });
+            }}
+          >
+            <Animated.View
+              className="absolute left-0 h-full rounded-full bg-primary"
+              style={rangeAnimatedStyle}
+            />
+            <Animated.View
+              className={cn(
+                'absolute -top-1.5 size-5 -ml-2.5 rounded-full border-2 border-primary bg-background shadow-sm shadow-black/5',
+                Platform.select({
+                  web: 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-none focus-visible:ring-[3px] disabled:pointer-events-none',
+                })
+              )}
+              style={thumbAnimatedStyle}
+            />
+          </View>
+        </GestureDetector>
+      </View>
+    );
+  }
+);
+
+Slider.displayName = 'Slider';
+
+export { Slider };

package/src/components/ui/Switch.tsx

@@ -0,0 +1,67 @@
+import { cn } from '../../lib/utils';
+import * as SwitchPrimitives from '@rn-primitives/switch';
+import { Platform } from 'react-native';
+
+/**
+ * A toggle switch component for binary on/off states
+ *
+ * Provides a visual toggle control with smooth animations and platform-specific styling.
+ * Automatically handles checked/unchecked states and disabled interactions.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * const [enabled, setEnabled] = useState(false);
+ *
+ * <Switch
+ *   checked={enabled}
+ *   onCheckedChange={setEnabled}
+ * />
+ *
+ * // Disabled switch
+ * <Switch checked={true} disabled />
+ * ```
+ *
+ * @param {boolean} checked - Current state of the switch
+ * @param {(checked: boolean) => void} onCheckedChange - Callback when switch is toggled
+ * @param {boolean} [disabled] - Whether the switch is disabled
+ * @param {string} [className] - Additional Tailwind classes
+ *
+ * @accessibility
+ * - Proper focus states on web for keyboard navigation
+ * - Disabled state prevents interaction
+ * - Visual feedback for checked/unchecked states
+ */
+function Switch({
+  className,
+  ...props
+}: SwitchPrimitives.RootProps & React.RefAttributes<SwitchPrimitives.RootRef>) {
+  return (
+    <SwitchPrimitives.Root
+      className={cn(
+        'flex h-[1.15rem] w-8 shrink-0 flex-row items-center rounded-full border border-transparent shadow-sm shadow-black/5',
+        Platform.select({
+          web: 'focus-visible:border-ring focus-visible:ring-ring/50 peer inline-flex outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed',
+        }),
+        props.checked ? 'bg-primary' : 'bg-input dark:bg-input/80',
+        props.disabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitives.Thumb
+        className={cn(
+          'bg-background size-4 rounded-full transition-transform',
+          Platform.select({
+            web: 'pointer-events-none block ring-0',
+          }),
+          props.checked
+            ? 'dark:bg-primary-foreground translate-x-3.5'
+            : 'dark:bg-foreground translate-x-0'
+        )}
+      />
+    </SwitchPrimitives.Root>
+  );
+}
+
+export { Switch };

package/src/components/ui/Table.tsx

@@ -0,0 +1,170 @@
+import { cn } from '../../lib/utils';
+import { Text } from './Text';
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Root table container component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead><Text>Name</Text></TableHead>
+ *       <TableHead><Text>Email</Text></TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell><Text>John Doe</Text></TableCell>
+ *       <TableCell><Text>john@example.com</Text></TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+function Table({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return <View className={cn('w-full', className)} {...props} />;
+}
+
+/**
+ * Table header container
+ *
+ * @component
+ */
+function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View
+      className={cn('border-border flex-row border-b', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Table body container for data rows
+ *
+ * @component
+ */
+function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return <View className={cn('flex-col', className)} {...props} />;
+}
+
+/**
+ * Table footer container
+ *
+ * @component
+ */
+function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View
+      className={cn(
+        'border-border bg-muted/50 flex-row border-t font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Table row component
+ *
+ * @component
+ */
+function TableRow({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View
+      className={cn('border-border flex-row border-b', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Table header cell component
+ *
+ * @component
+ */
+function TableHead({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground flex-1 p-2 text-left align-middle text-xs font-medium',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Table data cell component
+ *
+ * @component
+ */
+function TableCell({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn('flex-1 p-2 align-middle text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Table caption for describing the table
+ *
+ * @component
+ */
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+  return (
+    <Text
+      className={cn(
+        'text-muted-foreground mt-2 text-center text-sm',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

package/src/components/ui/Tabs.tsx

@@ -0,0 +1,119 @@
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as TabsPrimitive from '@rn-primitives/tabs';
+import { Platform } from 'react-native';
+
+/**
+ * Root tabs component for organizing content into panels
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="account">
+ *       <Text>Account</Text>
+ *     </TabsTrigger>
+ *     <TabsTrigger value="password">
+ *       <Text>Password</Text>
+ *     </TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">
+ *     <Text>Account settings content</Text>
+ *   </TabsContent>
+ *   <TabsContent value="password">
+ *     <Text>Password settings content</Text>
+ *   </TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @accessibility
+ * - Keyboard navigation support (arrow keys)
+ * - Proper ARIA attributes for tab structure
+ * - Screen reader friendly
+ */
+function Tabs({
+  className,
+  ...props
+}: TabsPrimitive.RootProps & React.RefAttributes<TabsPrimitive.RootRef>) {
+  return (
+    <TabsPrimitive.Root
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Container for tab triggers
+ *
+ * @component
+ */
+function TabsList({
+  className,
+  ...props
+}: TabsPrimitive.ListProps & React.RefAttributes<TabsPrimitive.ListRef>) {
+  return (
+    <TabsPrimitive.List
+      className={cn(
+        'bg-muted flex h-9 flex-row items-center justify-center rounded-lg p-[3px]',
+        Platform.select({ web: 'inline-flex w-fit', native: 'mr-auto' }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Individual tab trigger button
+ *
+ * @component
+ */
+function TabsTrigger({
+  className,
+  ...props
+}: TabsPrimitive.TriggerProps & React.RefAttributes<TabsPrimitive.TriggerRef>) {
+  const { value } = TabsPrimitive.useRootContext();
+  return (
+    <TextClassContext.Provider
+      value={cn(
+        'text-foreground dark:text-muted-foreground text-sm font-medium',
+        value === props.value && 'dark:text-foreground'
+      )}
+    >
+      <TabsPrimitive.Trigger
+        className={cn(
+          'flex h-[calc(100%-1px)] flex-row items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 shadow-none shadow-black/5',
+          Platform.select({
+            web: 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex cursor-default whitespace-nowrap transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+          }),
+          props.disabled && 'opacity-50',
+          props.value === value &&
+            'bg-background dark:border-foreground/10 dark:bg-input/30',
+          className
+        )}
+        {...props}
+      />
+    </TextClassContext.Provider>
+  );
+}
+
+/**
+ * Tab content panel
+ *
+ * @component
+ */
+function TabsContent({
+  className,
+  ...props
+}: TabsPrimitive.ContentProps & React.RefAttributes<TabsPrimitive.ContentRef>) {
+  return (
+    <TabsPrimitive.Content
+      className={cn(Platform.select({ web: 'flex-1 outline-none' }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/src/components/ui/Text.tsx

@@ -0,0 +1,73 @@
+import * as Slot from '@rn-primitives/slot';
+import type { SlottableTextProps, TextRef } from '@rn-primitives/types';
+import { cssInterop } from 'nativewind';
+import * as React from 'react';
+import { Text as RNText } from 'react-native';
+import { cn } from '../../lib/utils';
+
+cssInterop(RNText, { className: 'style' });
+
+/**
+ * Context for sharing text class styles with child Text components
+ * Used by components like Button, Card, Badge to automatically style nested Text
+ */
+const TextClassContext = React.createContext<string | undefined>(undefined);
+
+/**
+ * Enhanced Text component with NativeWind styling support
+ *
+ * Extends React Native's Text with:
+ * - Automatic style inheritance from TextClassContext
+ * - NativeWind className support
+ * - Slot pattern support for composition
+ * - Web-specific selection styling
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic text
+ * <Text>Hello World</Text>
+ *
+ * // With custom styling
+ * <Text className="text-lg font-bold">Title</Text>
+ *
+ * // Inside a styled context (e.g., Button)
+ * <Button variant="default">
+ *   <Text>Button Text</Text> // Automatically inherits button text styling
+ * </Button>
+ *
+ * // Using asChild for composition
+ * <Text asChild>
+ *   <Link href="/home">Home</Link>
+ * </Text>
+ * ```
+ *
+ * @property {string} [className] - Additional Tailwind classes
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ */
+const Text = React.forwardRef<
+  TextRef,
+  SlottableTextProps & {
+    className?: string;
+    children?: React.ReactNode;
+  }
+>(({ className, asChild = false, style, ...props }, ref) => {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+
+  const finalClassName = textClass
+    ? cn('text-base web:select-text', textClass, className)
+    : cn('text-base text-foreground web:select-text', className);
+
+  return (
+    <Component
+      className={finalClassName}
+      style={style}
+      ref={ref as any}
+      {...props}
+    />
+  );
+});
+Text.displayName = 'Text';
+
+export { Text, TextClassContext };