cnnative-ui 1.0.0

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,145 @@
+import React, { forwardRef, useState } from 'react';
+import { View, Pressable, Modal, type ViewProps, type LayoutRectangle } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { useControllableState } from '../../hooks/use-controllable';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+import { useHaptics } from '../../hooks/use-haptics';
+
+const DropdownMenuContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerLayout: LayoutRectangle | null;
+  setTriggerLayout: (layout: LayoutRectangle | null) => void;
+} | null>(null);
+
+export const DropdownMenu = ({ open: openProp, defaultOpen, onOpenChange, children }: any) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+
+  return (
+    <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen, triggerLayout, setTriggerLayout }}>
+      {children}
+    </DropdownMenuContext.Provider>
+  );
+};
+
+export const DropdownMenuTrigger = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ children, ...props }, ref) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) throw new Error('DropdownMenuTrigger must be used within DropdownMenu');
+
+    return (
+      <View
+        ref={ref}
+        collapsable={false}
+        onLayout={(e) => {
+          (e.target as any).measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            context.setTriggerLayout({ x: pageX, y: pageY, width, height });
+          });
+        }}
+      >
+        <Pressable onPress={() => context.onOpenChange(true)} {...props}>
+          {children}
+        </Pressable>
+      </View>
+    );
+  }
+);
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
+
+export const DropdownMenuContent = forwardRef<React.ElementRef<typeof View>, ViewProps & { align?: 'start' | 'center' | 'end' }>(
+  ({ className, children, align = 'center', ...props }, ref) => {
+    const context = React.useContext(DropdownMenuContext);
+    if (!context) throw new Error('DropdownMenuContent must be used within DropdownMenu');
+
+    if (!context.triggerLayout) return null;
+
+    const { x, y, width, height } = context.triggerLayout;
+    
+    // Very basic positioning relative to the trigger.
+    let leftPosition = x;
+    if (align === 'center') leftPosition = x + width / 2;
+    if (align === 'end') leftPosition = x + width;
+
+    return (
+      <Modal
+        visible={context.open}
+        transparent
+        animationType="none"
+        onRequestClose={() => context.onOpenChange(false)}
+      >
+        <View className="flex-1">
+          <Pressable className="absolute inset-0" onPress={() => context.onOpenChange(false)} />
+          <Animated.View
+            entering={ZoomIn.duration(200)}
+            exiting={FadeOut.duration(150)}
+            style={{
+              position: 'absolute',
+              top: y + height + 8,
+              left: leftPosition,
+              transform: align === 'center' ? [{ translateX: '-50%' }] : align === 'end' ? [{ translateX: '-100%' }] : [],
+            }}
+            className={cn(
+              'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+DropdownMenuContent.displayName = 'DropdownMenuContent';
+
+export const DropdownMenuItem = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable> & { inset?: boolean }>(
+  ({ className, inset, onPress, children, ...props }, ref) => {
+    const context = React.useContext(DropdownMenuContext);
+    const triggerHaptic = useHaptics();
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={(e) => {
+          triggerHaptic('selection');
+          onPress?.(e);
+          context?.onOpenChange(false);
+        }}
+        className={cn(
+          'relative flex flex-row cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+          inset && 'pl-8',
+          className
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-medium text-popover-foreground">{children as any}</Text>
+      </Pressable>
+    );
+  }
+);
+DropdownMenuItem.displayName = 'DropdownMenuItem';
+
+export const DropdownMenuSeparator = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  )
+);
+DropdownMenuSeparator.displayName = 'DropdownMenuSeparator';
+
+export const DropdownMenuLabel = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text> & { inset?: boolean }>(
+  ({ className, inset, ...props }, ref) => (
+    <Text
+      ref={ref}
+      className={cn('px-2 py-1.5 text-sm font-semibold text-popover-foreground', inset && 'pl-8', className)}
+      {...props}
+    />
+  )
+);
+DropdownMenuLabel.displayName = 'DropdownMenuLabel';

package/src/components/dropdown-menu/index.ts

@@ -0,0 +1 @@
+export * from './dropdown-menu';

package/src/components/form/form.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { View, type ViewProps, TextInput, type TextInputProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+const FormItemContext = createContext<{ id: string } | null>(null);
+
+export const Form = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('space-y-6', className)} {...props} />
+  )
+);
+Form.displayName = 'Form';
+
+export const FormItem = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <View ref={ref} className={cn('space-y-2', className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = 'FormItem';
+
+export const FormLabel = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text> & { error?: boolean }>(
+  ({ className, error, ...props }, ref) => {
+    return (
+      <Text
+        ref={ref}
+        className={cn(
+          'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+          error && 'text-destructive',
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+FormLabel.displayName = 'FormLabel';
+
+export const FormControl = forwardRef<React.ElementRef<typeof View>, ViewProps & { error?: boolean }>(
+  ({ className, error, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn('w-full', className)}
+        {...props}
+      />
+    );
+  }
+);
+FormControl.displayName = 'FormControl';
+
+export const FormDescription = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-[0.8rem] text-muted-foreground', className)}
+        {...props}
+      />
+    );
+  }
+);
+FormDescription.displayName = 'FormDescription';
+
+export const FormMessage = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, children, ...props }, ref) => {
+    if (!children) return null;
+    return (
+      <Text
+        ref={ref}
+        className={cn('text-[0.8rem] font-medium text-destructive', className)}
+        {...props}
+      >
+        {children}
+      </Text>
+    );
+  }
+);
+FormMessage.displayName = 'FormMessage';

package/src/components/form/index.ts

@@ -0,0 +1 @@
+export * from './form';

package/src/components/input/index.ts

@@ -0,0 +1 @@
+export * from './input';

package/src/components/input/input.tsx

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { TextInput, View, type TextInputProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { Text } from '../typography';
+import { useThemeContext } from '../../context/theme-context';
+import Animated, { useAnimatedStyle, withSpring, useSharedValue, interpolateColor } from 'react-native-reanimated';
+
+const inputVariants = cva(
+  'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        glass: 'bg-glass border-glass-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface InputProps extends TextInputProps, VariantProps<typeof inputVariants> {
+  label?: string;
+  floatingLabel?: boolean;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+export const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
+  ({ className, variant, label, floatingLabel, error, helperText, leftIcon, rightIcon, onFocus, onBlur, value, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const { theme } = useThemeContext();
+
+    // Floating label animation state
+    const floatingAnim = useSharedValue(value ? 1 : 0);
+
+    const handleFocus = (e: any) => {
+      setIsFocused(true);
+      if (floatingLabel) floatingAnim.value = withSpring(1, { damping: 20, stiffness: 300 });
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: any) => {
+      setIsFocused(false);
+      if (floatingLabel && !value) floatingAnim.value = withSpring(0, { damping: 20, stiffness: 300 });
+      onBlur?.(e);
+    };
+
+    const labelStyle = useAnimatedStyle(() => {
+      return {
+        transform: [
+          { translateY: floatingAnim.value === 1 ? -24 : 0 },
+          { scale: floatingAnim.value === 1 ? 0.85 : 1 },
+        ],
+        opacity: floatingAnim.value === 1 ? 1 : 0.7,
+      };
+    });
+
+    return (
+      <View className="flex flex-col space-y-1.5 w-full relative">
+        {label && !floatingLabel && (
+          <Text className="text-sm font-medium text-foreground mb-1">{label}</Text>
+        )}
+        
+        <View className="relative w-full justify-center">
+          {leftIcon && (
+            <View className="absolute left-3 z-10 justify-center h-full">
+              {leftIcon}
+            </View>
+          )}
+
+          {label && floatingLabel && (
+            <Animated.Text
+              style={[
+                labelStyle,
+                { position: 'absolute', left: leftIcon ? 36 : 12, top: 10 },
+              ]}
+              className="text-sm font-medium text-muted-foreground pointer-events-none z-10"
+            >
+              {label}
+            </Animated.Text>
+          )}
+
+          <AnimatedTextInput
+            ref={ref as any}
+            className={inputVariants({ variant, className: [className, leftIcon && 'pl-10', rightIcon && 'pr-10', error && 'border-destructive focus-visible:ring-destructive'].filter(Boolean).join(' ') })}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            value={value}
+            placeholderTextColor={theme.muted.foreground}
+            {...props}
+          />
+
+          {rightIcon && (
+            <View className="absolute right-3 z-10 justify-center h-full">
+              {rightIcon}
+            </View>
+          )}
+        </View>
+
+        {(helperText || error) && (
+          <Text className={`text-sm ${error ? 'text-destructive' : 'text-muted-foreground'}`}>
+            {error || helperText}
+          </Text>
+        )}
+      </View>
+    );
+  }
+);
+Input.displayName = 'Input';

package/src/components/label/index.ts

@@ -0,0 +1 @@
+export * from './label';

package/src/components/label/label.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '../../lib/create-component';
+import { Text, type TextProps } from '../typography';
+
+const labelVariants = 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70';
+
+export interface LabelProps extends TextProps {}
+
+export const Label = createComponent<React.ElementRef<typeof Text>, LabelProps>({
+  Component: Text,
+  baseClassName: labelVariants,
+});
+Label.displayName = 'Label';

package/src/components/navigation-menu/index.ts

@@ -0,0 +1 @@
+export * from './navigation-menu';

package/src/components/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef } from 'react';
+import { View, Pressable, type ViewProps, type PressableProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+export const NavigationMenu = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn('relative z-10 flex max-w-max flex-1 items-center justify-center', className)}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+);
+NavigationMenu.displayName = 'NavigationMenu';
+
+export const NavigationMenuList = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn('group flex flex-1 flex-row list-none items-center justify-center space-x-1', className)}
+      {...props}
+    />
+  )
+);
+NavigationMenuList.displayName = 'NavigationMenuList';
+
+export const NavigationMenuItem = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={className} {...props} />
+  )
+);
+NavigationMenuItem.displayName = 'NavigationMenuItem';
+
+export const NavigationMenuTrigger = forwardRef<React.ElementRef<typeof Pressable>, PressableProps>(
+  ({ className, children, ...props }, ref) => (
+    <Pressable
+      ref={ref}
+      className={cn(
+        'group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
+        className
+      )}
+      {...props}
+    >
+      {typeof children === 'string' ? <Text className="font-medium">{children}</Text> : children}
+    </Pressable>
+  )
+);
+NavigationMenuTrigger.displayName = 'NavigationMenuTrigger';
+
+export const NavigationMenuLink = forwardRef<React.ElementRef<typeof Pressable>, PressableProps & { active?: boolean }>(
+  ({ className, active, children, ...props }, ref) => (
+    <Pressable
+      ref={ref}
+      className={cn(
+        'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+        active && 'bg-accent/50',
+        className
+      )}
+      {...props}
+    >
+      {typeof children === 'string' ? <Text>{children}</Text> : children}
+    </Pressable>
+  )
+);
+NavigationMenuLink.displayName = 'NavigationMenuLink';

package/src/components/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination';

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react-native';
+import { cn } from '../../lib/utils';
+import { Button, type ButtonProps } from '../button';
+import { Text } from '../typography';
+
+export const Pagination = ({ className, ...props }: ViewProps) => (
+  <View
+    role="navigation"
+    aria-label="pagination"
+    className={cn('mx-auto flex w-full justify-center flex-row', className)}
+    {...props}
+  />
+);
+Pagination.displayName = 'Pagination';
+
+export const PaginationContent = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex flex-row items-center gap-1', className)} {...props} />
+  )
+);
+PaginationContent.displayName = 'PaginationContent';
+
+export const PaginationItem = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('', className)} {...props} />
+);
+PaginationItem.displayName = 'PaginationItem';
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+export const PaginationLink = ({ className, isActive, size = 'icon', ...props }: PaginationLinkProps) => (
+  <Button
+    aria-current={isActive ? 'page' : undefined}
+    variant={isActive ? 'outline' : 'ghost'}
+    size={size}
+    className={cn('w-9 h-9', className)}
+    {...props}
+  />
+);
+PaginationLink.displayName = 'PaginationLink';
+
+export const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn('gap-1 pl-2.5', className)} {...props}>
+    <View className="flex flex-row items-center gap-1">
+      <ChevronLeft size={16} className="text-foreground" />
+      <Text className="text-sm font-medium">Previous</Text>
+    </View>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = 'PaginationPrevious';
+
+export const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn('gap-1 pr-2.5', className)} {...props}>
+    <View className="flex flex-row items-center gap-1">
+      <Text className="text-sm font-medium">Next</Text>
+      <ChevronRight size={16} className="text-foreground" />
+    </View>
+  </PaginationLink>
+);
+PaginationNext.displayName = 'PaginationNext';
+
+export const PaginationEllipsis = ({ className, ...props }: ViewProps) => (
+  <View aria-hidden className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
+    <MoreHorizontal size={16} className="text-foreground" />
+  </View>
+);
+PaginationEllipsis.displayName = 'PaginationEllipsis';

package/src/components/progress/index.ts

@@ -0,0 +1 @@
+export * from './progress';

package/src/components/progress/progress.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, useSharedValue } from 'react-native-reanimated';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { useThemeContext } from '../../context/theme-context';
+
+export interface ProgressProps extends ViewProps {
+  /** Value between 0 and 100 */
+  value?: number;
+  /** Max value, defaults to 100 */
+  max?: number;
+  /** If true, the progress bar will animate continuously */
+  indeterminate?: boolean;
+}
+
+export const Progress = React.forwardRef<React.ElementRef<typeof View>, ProgressProps>(
+  ({ className, value = 0, max = 100, indeterminate = false, style, ...props }, ref) => {
+    const springConfig = useSpring('gentle');
+    const { theme } = useThemeContext();
+    const progressWidth = useSharedValue(0);
+    const translateX = useSharedValue(-100);
+
+    // Calculate percentage (0-100)
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+
+    useEffect(() => {
+      if (!indeterminate) {
+        progressWidth.value = withSpring(percentage, springConfig);
+      }
+    }, [percentage, indeterminate, springConfig]);
+
+    const indicatorStyle = useAnimatedStyle(() => {
+      if (indeterminate) {
+        // We'll handle indeterminate animation via CSS/Tailwind if possible
+        // but for Native, it's better to do a repeating animation loop.
+        // For simplicity right now, we'll let it fill or just do a standard fill.
+        return { width: '50%' };
+      }
+      return { width: `${progressWidth.value}%` };
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn('relative h-2 w-full overflow-hidden rounded-full bg-secondary', className)}
+        style={style}
+        accessibilityRole="progressbar"
+        accessibilityValue={{ min: 0, max, now: value }}
+        {...props}
+      >
+        <Animated.View
+          className={cn(
+            'h-full w-full flex-1 bg-primary transition-all',
+            indeterminate && 'animate-pulse' // Nativewind supports animate-pulse out of the box
+          )}
+          style={[
+            indicatorStyle,
+            { backgroundColor: theme.primary.DEFAULT as string }
+          ]}
+        />
+      </View>
+    );
+  }
+);
+Progress.displayName = 'Progress';

package/src/components/radio-group/index.ts

@@ -0,0 +1 @@
+export * from './radio-group';

package/src/components/radio-group/radio-group.tsx

@@ -0,0 +1,90 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { View, Pressable, type ViewProps, type PressableProps } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { useControllableState } from '../../hooks/use-controllable';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+const RadioGroupContext = createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+} | null>(null);
+
+export interface RadioGroupProps extends ViewProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const RadioGroup = forwardRef<React.ElementRef<typeof View>, RadioGroupProps>(
+  ({ className, value: valueProp, defaultValue, onValueChange, children, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue || '',
+      onChange: onValueChange,
+    });
+
+    return (
+      <RadioGroupContext.Provider value={{ value, onValueChange: setValue }}>
+        <View ref={ref} className={cn('flex flex-col gap-2', className)} {...props}>
+          {children}
+        </View>
+      </RadioGroupContext.Provider>
+    );
+  }
+);
+RadioGroup.displayName = 'RadioGroup';
+
+export interface RadioGroupItemProps extends PressableProps {
+  value: string;
+  label?: string;
+}
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+export const RadioGroupItem = forwardRef<React.ElementRef<typeof Pressable>, RadioGroupItemProps>(
+  ({ className, value, label, disabled, style, ...props }, ref) => {
+    const context = useContext(RadioGroupContext);
+    if (!context) throw new Error('RadioGroupItem must be used within a RadioGroup');
+
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('snappy');
+    const checked = context.value === value;
+
+    const handlePress = () => {
+      if (disabled) return;
+      if (!checked) {
+        triggerHaptic('selection');
+        context.onValueChange(value);
+      }
+    };
+
+    const indicatorStyle = useAnimatedStyle(() => {
+      const scale = withSpring(checked ? 1 : 0, springConfig);
+      return { transform: [{ scale }] };
+    }, [checked, springConfig]);
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="radio"
+        accessibilityState={{ checked, disabled: !!disabled }}
+        className={cn('flex flex-row items-center space-x-2', disabled && 'opacity-50', className)}
+        {...props}
+      >
+        <View className="aspect-square h-5 w-5 items-center justify-center rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
+          <AnimatedView
+            style={indicatorStyle}
+            className="h-2.5 w-2.5 rounded-full bg-primary"
+          />
+        </View>
+        {label && <Text className="text-sm font-medium leading-none">{label}</Text>}
+      </Pressable>
+    );
+  }
+);
+RadioGroupItem.displayName = 'RadioGroupItem';