@campxdev/react-native-blueprint 0.1.12 → 0.1.14

package/src/components/ui/Popover.tsx

@@ -1,110 +0,0 @@
-import { NativeOnlyAnimatedView } from './Native-Only-Animated-View';
-import { TextClassContext } from './Text';
-import { cn } from '../../lib/utils';
-import * as PopoverPrimitive from '@rn-primitives/popover';
-import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
-import { FadeIn, FadeOut } from 'react-native-reanimated';
-import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
-
-/**
- * Root component for popover - provides context for trigger and content
- *
- * @component
- * @example
- * ```tsx
- * <Popover>
- *   <PopoverTrigger>
- *     <Button variant="outline">
- *       <Text>Open Popover</Text>
- *     </Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <Text>Popover content goes here</Text>
- *   </PopoverContent>
- * </Popover>
- * ```
- */
-const Popover = PopoverPrimitive.Root;
-
-/**
- * Trigger component that opens the popover when pressed
- *
- * @component
- */
-const PopoverTrigger = PopoverPrimitive.Trigger;
-
-/**
- * Full window overlay wrapper for iOS, Fragment for other platforms
- */
-const FullWindowOverlay =
-  Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
-
-/**
- * Content container for popover
- *
- * Displays content in a floating panel anchored to the trigger.
- * Includes smooth animations and proper positioning.
- *
- * @component
- * @example
- * ```tsx
- * <PopoverContent align="start" sideOffset={8}>
- *   <View className="gap-2">
- *     <Text className="font-semibold">Dimensions</Text>
- *     <Text className="text-sm">Set the dimensions for the layer</Text>
- *   </View>
- * </PopoverContent>
- * ```
- *
- * @accessibility
- * - Content is announced by screen readers
- * - Dismissible with escape key on web
- * - Proper focus management
- */
-function PopoverContent({
-  className,
-  align = 'center',
-  sideOffset = 4,
-  portalHost,
-  ...props
-}: PopoverPrimitive.ContentProps &
-  React.RefAttributes<PopoverPrimitive.ContentRef> & {
-    portalHost?: string;
-  }) {
-  return (
-    <PopoverPrimitive.Portal hostName={portalHost}>
-      <FullWindowOverlay>
-        <PopoverPrimitive.Overlay
-          style={Platform.select({ native: StyleSheet.absoluteFill })}
-        >
-          <NativeOnlyAnimatedView
-            entering={FadeIn.duration(200)}
-            exiting={FadeOut}
-          >
-            <TextClassContext.Provider value="text-popover-foreground">
-              <PopoverPrimitive.Content
-                align={align}
-                sideOffset={sideOffset}
-                className={cn(
-                  'bg-popover border-border outline-hidden z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5',
-                  Platform.select({
-                    web: cn(
-                      'animate-in fade-in-0 zoom-in-95 origin-(--radix-popover-content-transform-origin) cursor-auto',
-                      props.side === 'bottom' && 'slide-in-from-top-2',
-                      props.side === 'top' && 'slide-in-from-bottom-2'
-                    ),
-                  }),
-                  className
-                )}
-                {...props}
-              />
-            </TextClassContext.Provider>
-          </NativeOnlyAnimatedView>
-        </PopoverPrimitive.Overlay>
-      </FullWindowOverlay>
-    </PopoverPrimitive.Portal>
-  );
-}
-
-export { Popover, PopoverContent, PopoverTrigger };

package/src/components/ui/Progress.tsx

@@ -1,140 +0,0 @@
-import { cn } from '../../lib/utils';
-import * as ProgressPrimitive from '@rn-primitives/progress';
-import { Platform, View as RNView } from 'react-native';
-import { cssInterop } from 'nativewind';
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedStyle,
-  useDerivedValue,
-  withSpring,
-} from 'react-native-reanimated';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * Progress bar component for displaying task completion
- *
- * Displays an animated progress indicator with customizable styles.
- * Uses spring animations on native platforms for smooth transitions.
- *
- * @component
- * @example
- * ```tsx
- * <Progress value={60} className="w-full" />
- *
- * <Progress
- *   value={progress}
- *   indicatorClassName="bg-green-500"
- * />
- * ```
- *
- * @accessibility
- * - Uses proper ARIA attributes for progress indication
- * - Value changes are announced by screen readers
- */
-function Progress({
-  className,
-  value,
-  indicatorClassName,
-  ...props
-}: ProgressPrimitive.RootProps &
-  React.RefAttributes<ProgressPrimitive.RootRef> & {
-    indicatorClassName?: string;
-  }) {
-  return (
-    <ProgressPrimitive.Root
-      className={cn(
-        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
-        className
-      )}
-      {...props}
-    >
-      <Indicator value={value} className={indicatorClassName} />
-    </ProgressPrimitive.Root>
-  );
-}
-
-export { Progress };
-
-/**
- * Platform-specific indicator component selector
- */
-const Indicator = Platform.select({
-  web: WebIndicator,
-  native: NativeIndicator,
-  default: NullIndicator,
-});
-
-/**
- * Props for progress indicator components
- */
-type IndicatorProps = {
-  value: number | undefined | null;
-  className?: string;
-};
-
-/**
- * Web-specific progress indicator using CSS transforms
- *
- * @platform web
- */
-function WebIndicator({ value, className }: IndicatorProps) {
-  if (Platform.OS !== 'web') {
-    return null;
-  }
-
-  return (
-    <View
-      className={cn(
-        'bg-primary h-full w-full flex-1 transition-all',
-        className
-      )}
-      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
-    >
-      <ProgressPrimitive.Indicator className={cn('h-full w-full', className)} />
-    </View>
-  );
-}
-
-/**
- * Native-specific progress indicator using Reanimated
- *
- * Provides smooth spring animations for progress changes.
- *
- * @platform native
- */
-function NativeIndicator({ value, className }: IndicatorProps) {
-  const progress = useDerivedValue(() => value ?? 0);
-
-  const indicator = useAnimatedStyle(() => {
-    return {
-      width: withSpring(
-        `${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
-        { overshootClamping: true }
-      ),
-    };
-  }, [value]);
-
-  if (Platform.OS === 'web') {
-    return null;
-  }
-
-  return (
-    <ProgressPrimitive.Indicator asChild>
-      <Animated.View
-        style={indicator}
-        className={cn('bg-foreground h-full', className)}
-      />
-    </ProgressPrimitive.Indicator>
-  );
-}
-
-/**
- * Null indicator fallback for unsupported platforms
- */
-function NullIndicator(_props: IndicatorProps) {
-  return null;
-}

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

@@ -1,79 +0,0 @@
-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

@@ -1,356 +0,0 @@
-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 as RNScrollView,
-  StyleSheet,
-  View as RNView,
-} from 'react-native';
-import { cssInterop } from 'nativewind';
-import { FadeIn, FadeOut } from 'react-native-reanimated';
-import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
-
-const View = cssInterop(RNView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-const ScrollView = cssInterop(RNScrollView, {
-  className: 'style',
-}) as React.ComponentType<any>;
-
-/**
- * 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 as any)}
-    />
-  );
-}
-
-/**
- * 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 as any)}
-    >
-      <>{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 as any)}
-              >
-                <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,
-};