@campxdev/react-native-blueprint 0.1.0

package/src/components/ui/Radio-Group.tsx

@@ -0,0 +1,79 @@
+import { cn } from '../../lib/utils';
+import * as RadioGroupPrimitive from '@rn-primitives/radio-group';
+import { Platform } from 'react-native';
+
+/**
+ * Radio group component for single-choice selection
+ *
+ * Groups radio buttons together to ensure only one can be selected at a time.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RadioGroup value={selectedValue} onValueChange={setSelectedValue}>
+ *   <View className="flex-row items-center gap-2">
+ *     <RadioGroupItem value="option1" />
+ *     <Label>Option 1</Label>
+ *   </View>
+ *   <View className="flex-row items-center gap-2">
+ *     <RadioGroupItem value="option2" />
+ *     <Label>Option 2</Label>
+ *   </View>
+ * </RadioGroup>
+ * ```
+ *
+ * @accessibility
+ * - Uses proper ARIA role for radio group
+ * - Keyboard navigation support (arrow keys)
+ * - Screen reader friendly with proper labeling
+ */
+function RadioGroup({
+  className,
+  ...props
+}: RadioGroupPrimitive.RootProps &
+  React.RefAttributes<RadioGroupPrimitive.RootRef>) {
+  return (
+    <RadioGroupPrimitive.Root className={cn('gap-3', className)} {...props} />
+  );
+}
+
+/**
+ * Individual radio button item
+ *
+ * Displays as a circular button with an inner indicator when selected.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RadioGroupItem value="dark" />
+ * <RadioGroupItem value="light" disabled />
+ * ```
+ *
+ * @accessibility
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ * - Invalid state styling for form validation
+ */
+function RadioGroupItem({
+  className,
+  ...props
+}: RadioGroupPrimitive.ItemProps &
+  React.RefAttributes<RadioGroupPrimitive.ItemRef>) {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'border-input dark:bg-input/30 aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-sm shadow-black/5',
+        Platform.select({
+          web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed',
+        }),
+        props.disabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="bg-primary size-2 rounded-full" />
+    </RadioGroupPrimitive.Item>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/src/components/ui/Select.tsx

@@ -0,0 +1,344 @@
+import { Icon } from './Icon';
+import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
+import { TextClassContext } from './Text';
+import { cn } from '../../lib/utils';
+import * as SelectPrimitive from '@rn-primitives/select';
+import {
+  Check,
+  ChevronDown,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+
+cssInterop(View, { className: 'style' });
+cssInterop(ScrollView, { className: 'style' });
+
+/**
+ * Option type for select items
+ */
+type Option = SelectPrimitive.Option;
+
+/**
+ * Root select component for dropdown selection
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Select value={value} onValueChange={setValue}>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select an option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">
+ *       <Text>Option 1</Text>
+ *     </SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+const Select = SelectPrimitive.Root;
+
+/**
+ * Groups related select items together
+ * @component
+ */
+const SelectGroup = SelectPrimitive.Group;
+
+/**
+ * Displays the selected value or placeholder text
+ * @component
+ */
+function SelectValue({
+  ref,
+  className,
+  ...props
+}: SelectPrimitive.ValueProps &
+  React.RefAttributes<SelectPrimitive.ValueRef> & {
+    className?: string;
+  }) {
+  const { value } = SelectPrimitive.useRootContext();
+  return (
+    <SelectPrimitive.Value
+      ref={ref}
+      className={cn(
+        'text-foreground line-clamp-1 flex flex-row items-center gap-2 text-sm',
+        !value && 'text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Trigger button that opens the select dropdown
+ * @component
+ */
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  size = 'default',
+  ...props
+}: SelectPrimitive.TriggerProps &
+  React.RefAttributes<SelectPrimitive.TriggerRef> & {
+    children?: React.ReactNode;
+    size?: 'default' | 'sm';
+  }) {
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'border-input dark:bg-input/30 dark:active:bg-input/50 bg-background flex h-10 flex-row items-center justify-between gap-2 rounded-md border px-3 py-2 shadow-sm shadow-black/5 sm:h-9',
+        Platform.select({
+          web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 w-fit whitespace-nowrap text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        }),
+        props.disabled && 'opacity-50',
+        size === 'sm' && 'h-8 py-2 sm:py-1.5',
+        className
+      )}
+      {...props}
+    >
+      <>{children}</>
+      <Icon
+        as={ChevronDown}
+        aria-hidden={true}
+        className="text-muted-foreground size-4"
+      />
+    </SelectPrimitive.Trigger>
+  );
+}
+
+/**
+ * Full window overlay wrapper for iOS
+ */
+const FullWindowOverlay =
+  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Content container for select items
+ * @component
+ */
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  portalHost,
+  ...props
+}: SelectPrimitive.ContentProps &
+  React.RefAttributes<SelectPrimitive.ContentRef> & {
+    className?: string;
+    portalHost?: string;
+  }) {
+  return (
+    <SelectPrimitive.Portal hostName={portalHost}>
+      <FullWindowOverlay>
+        <SelectPrimitive.Overlay
+          style={Platform.select({ native: StyleSheet.absoluteFill })}
+        >
+          <TextClassContext.Provider value="text-popover-foreground">
+            <NativeOnlyAnimatedView
+              className="z-50"
+              entering={FadeIn}
+              exiting={FadeOut}
+            >
+              <SelectPrimitive.Content
+                className={cn(
+                  'bg-popover border-border relative z-50 min-w-[8rem] rounded-md border shadow-md shadow-black/5',
+                  Platform.select({
+                    web: cn(
+                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-select-content-transform-origin) max-h-52 overflow-y-auto overflow-x-hidden',
+                      props.side === 'bottom' && 'slide-in-from-top-2',
+                      props.side === 'top' && 'slide-in-from-bottom-2'
+                    ),
+                    native: 'p-1',
+                  }),
+                  position === 'popper' &&
+                    Platform.select({
+                      web: cn(
+                        props.side === 'bottom' && 'translate-y-1',
+                        props.side === 'top' && '-translate-y-1'
+                      ),
+                    }),
+                  className
+                )}
+                position={position}
+                {...props}
+              >
+                <SelectScrollUpButton />
+                <SelectPrimitive.Viewport
+                  className={cn(
+                    'p-1',
+                    position === 'popper' &&
+                      cn(
+                        'w-full',
+                        Platform.select({
+                          web: 'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]',
+                        })
+                      )
+                  )}
+                >
+                  {children}
+                </SelectPrimitive.Viewport>
+                <SelectScrollDownButton />
+              </SelectPrimitive.Content>
+            </NativeOnlyAnimatedView>
+          </TextClassContext.Provider>
+        </SelectPrimitive.Overlay>
+      </FullWindowOverlay>
+    </SelectPrimitive.Portal>
+  );
+}
+
+/**
+ * Label for grouping select items
+ * @component
+ */
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.LabelProps & React.RefAttributes<SelectPrimitive.LabelRef>) {
+  return (
+    <SelectPrimitive.Label
+      className={cn(
+        'text-muted-foreground px-2 py-2 text-xs sm:py-1.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Individual selectable item
+ * @component
+ */
+function SelectItem({
+  className,
+  children: _children,
+  ...props
+}: SelectPrimitive.ItemProps & React.RefAttributes<SelectPrimitive.ItemRef>) {
+  return (
+    <SelectPrimitive.Item
+      className={cn(
+        'active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-sm py-2 pl-2 pr-8 sm:py-1.5',
+        Platform.select({
+          web: 'focus:bg-accent focus:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-default outline-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none',
+        }),
+        props.disabled && 'opacity-50',
+        className
+      )}
+      {...props}
+    >
+      <View className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <Icon as={Check} className="text-muted-foreground size-4 shrink-0" />
+        </SelectPrimitive.ItemIndicator>
+      </View>
+      <SelectPrimitive.ItemText className="text-foreground group-active:text-accent-foreground select-none text-sm" />
+    </SelectPrimitive.Item>
+  );
+}
+
+/**
+ * Visual separator between select items
+ * @component
+ */
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.SeparatorProps &
+  React.RefAttributes<SelectPrimitive.SeparatorRef>) {
+  return (
+    <SelectPrimitive.Separator
+      className={cn(
+        'bg-border -mx-1 my-1 h-px',
+        Platform.select({ web: 'pointer-events-none' }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return (
+    <SelectPrimitive.ScrollUpButton
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <Icon as={ChevronUpIcon} className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return (
+    <SelectPrimitive.ScrollDownButton
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className
+      )}
+      {...props}
+    >
+      <Icon as={ChevronDownIcon} className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+/**
+ * @platform Native only
+ * Returns the children on the web
+ */
+function NativeSelectScrollView({
+  className,
+  ...props
+}: React.ComponentProps<typeof ScrollView>) {
+  if (Platform.OS === 'web') {
+    return <>{props.children}</>;
+  }
+  return <ScrollView className={cn('max-h-52', className)} {...props} />;
+}
+
+export {
+  NativeSelectScrollView,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  type Option,
+};

package/src/components/ui/Separator.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cn } from '../../lib/utils';
+import type { ViewRef, SlottableViewProps } from '@rn-primitives/types';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Visual divider for separating content sections
+ *
+ * A thin line that creates visual separation between content areas. Can be oriented
+ * horizontally or vertically and supports decorative or semantic roles.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Horizontal separator (default)
+ * <View>
+ *   <Text>Section 1</Text>
+ *   <Separator className="my-4" />
+ *   <Text>Section 2</Text>
+ * </View>
+ *
+ * // Vertical separator
+ * <View className="flex-row items-center gap-4">
+ *   <Text>Left</Text>
+ *   <Separator orientation="vertical" className="h-4" />
+ *   <Text>Right</Text>
+ * </View>
+ *
+ * // Semantic separator for screen readers
+ * <Separator decorative={false} />
+ * ```
+ *
+ * @accessibility
+ * - Decorative separators (default) have role="none" for screen readers
+ * - Non-decorative separators have role="separator" for semantic meaning
+ */
+const Separator = React.forwardRef<
+  ViewRef,
+  SlottableViewProps & {
+    className?: string;
+    orientation?: 'horizontal' | 'vertical';
+    decorative?: boolean;
+  }
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => {
+    return (
+      <View
+        role={decorative ? 'none' : 'separator'}
+        className={cn(
+          'shrink-0 bg-border dark:bg-border',
+          orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Separator.displayName = 'Separator';
+
+export { Separator };

package/src/components/ui/SizedBox.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { View, type ViewStyle } from 'react-native';
+
+interface SizedBoxProps {
+  /**
+   * The width of the box
+   */
+  width?: number;
+
+  /**
+   * The height of the box
+   */
+  height?: number;
+
+  /**
+   * Optional child element to render inside the box
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Additional styles to apply
+   */
+  style?: ViewStyle;
+}
+
+/**
+ * A box with a specified size.
+ *
+ * If a child is provided, this widget forces its child to have a specific width and/or height.
+ * If either the width or height is not specified, this widget will size itself to match the child's size in that dimension.
+ *
+ * If no child is provided, this widget will size itself to the specified width and height,
+ * treating null values as zero.
+ *
+ * This is similar to Flutter's SizedBox widget and is useful for:
+ * - Adding fixed spacing between widgets
+ * - Constraining child widget dimensions
+ * - Creating empty space
+ *
+ * @example
+ * // Create spacing
+ * <SizedBox height={16} />
+ *
+ * @example
+ * // Constrain child size
+ * <SizedBox width={100} height={100}>
+ *   <Image source={...} />
+ * </SizedBox>
+ *
+ * @example
+ * // Create horizontal spacing
+ * <View style={{ flexDirection: 'row' }}>
+ *   <Button />
+ *   <SizedBox width={12} />
+ *   <Button />
+ * </View>
+ */
+export function SizedBox({ width, height, children, style }: SizedBoxProps) {
+  const boxStyle: ViewStyle = {
+    ...(width !== undefined && { width }),
+    ...(height !== undefined && { height }),
+    ...style,
+  };
+
+  return <View style={boxStyle}>{children}</View>;
+}
+
+// Convenience components for common spacing values
+export namespace SizedBox {
+  /**
+   * Creates a square SizedBox with equal width and height
+   */
+  export function Square({
+    size,
+    children,
+    style,
+  }: {
+    size: number;
+    children?: React.ReactNode;
+    style?: ViewStyle;
+  }) {
+    return (
+      <SizedBox width={size} height={size} style={style}>
+        {children}
+      </SizedBox>
+    );
+  }
+
+  /**
+   * Creates a SizedBox that expands to fill available space
+   */
+  export function Expand({
+    children,
+    style,
+  }: {
+    children?: React.ReactNode;
+    style?: ViewStyle;
+  }) {
+    const expandStyle: ViewStyle = { flex: 1 };
+    return <View style={[expandStyle, style]}>{children}</View>;
+  }
+
+  /**
+   * Creates a SizedBox that shrinks to fit its content
+   */
+  export function Shrink({
+    children,
+    style,
+  }: {
+    children?: React.ReactNode;
+    style?: ViewStyle;
+  }) {
+    const shrinkStyle: ViewStyle = { flexShrink: 1 };
+    return <View style={[shrinkStyle, style]}>{children}</View>;
+  }
+}

package/src/components/ui/Skeleton.tsx

@@ -0,0 +1,55 @@
+import { cn } from '../../lib/utils';
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+
+cssInterop(View, { className: 'style' });
+
+/**
+ * Skeleton loading placeholder component
+ *
+ * Displays an animated placeholder during content loading states. Provides visual feedback
+ * to users while data is being fetched, improving perceived performance.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Text skeleton
+ * <Skeleton className="h-4 w-[250px]" />
+ *
+ * // Avatar skeleton
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ *
+ * // Card skeleton
+ * <View className="flex gap-3">
+ *   <Skeleton className="h-[125px] w-full rounded-xl" />
+ *   <View className="gap-2">
+ *     <Skeleton className="h-4 w-full" />
+ *     <Skeleton className="h-4 w-[80%]" />
+ *   </View>
+ * </View>
+ *
+ * // List skeleton
+ * {[1, 2, 3].map((i) => (
+ *   <View key={i} className="flex-row items-center gap-4">
+ *     <Skeleton className="h-12 w-12 rounded-full" />
+ *     <View className="flex-1 gap-2">
+ *       <Skeleton className="h-4 w-full" />
+ *       <Skeleton className="h-4 w-3/4" />
+ *     </View>
+ *   </View>
+ * ))}
+ * ```
+ */
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+  return (
+    <View
+      className={cn('bg-accent animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };