cnnative-ui 1.0.0

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,143 @@
+import React, { forwardRef, useState } from 'react';
+import { View, Pressable, type ViewProps, type PressableProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  interpolate,
+  measure,
+  runOnUI,
+  useAnimatedRef,
+} from 'react-native-reanimated';
+import { ChevronDown } from 'lucide-react-native';
+import { useSpring } from '../../hooks/use-spring';
+import { useHaptics } from '../../hooks/use-haptics';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+import { useControllableState } from '../../hooks/use-controllable';
+
+export const Accordion = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('w-full', className)} {...props} />
+  )
+);
+Accordion.displayName = 'Accordion';
+
+const AccordionItemContext = React.createContext<{
+  isExpanded: boolean;
+  toggle: () => void;
+} | null>(null);
+
+export interface AccordionItemProps extends ViewProps {
+  value: string;
+  isExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+}
+
+export const AccordionItem = forwardRef<React.ElementRef<typeof View>, AccordionItemProps>(
+  ({ className, value, isExpanded: isExpandedProp, onExpandedChange, children, ...props }, ref) => {
+    const [isExpanded, setIsExpanded] = useControllableState({
+      prop: isExpandedProp,
+      defaultProp: false,
+      onChange: onExpandedChange,
+    });
+    const triggerHaptic = useHaptics();
+
+    const toggle = () => {
+      triggerHaptic('light');
+      setIsExpanded(!isExpanded);
+    };
+
+    return (
+      <AccordionItemContext.Provider value={{ isExpanded, toggle }}>
+        <View ref={ref} className={cn('border-b border-border', className)} {...props}>
+          {children}
+        </View>
+      </AccordionItemContext.Provider>
+    );
+  }
+);
+AccordionItem.displayName = 'AccordionItem';
+
+export interface AccordionTriggerProps extends Omit<PressableProps, 'children'> {
+  children?: React.ReactNode;
+}
+
+export const AccordionTrigger = forwardRef<React.ElementRef<typeof Pressable>, AccordionTriggerProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(AccordionItemContext);
+    if (!context) throw new Error('AccordionTrigger must be used within AccordionItem');
+    const springConfig = useSpring('snappy');
+    const rotation = useSharedValue(context.isExpanded ? 180 : 0);
+
+    React.useEffect(() => {
+      rotation.value = withSpring(context.isExpanded ? 180 : 0, springConfig);
+    }, [context.isExpanded, springConfig]);
+
+    const iconStyle = useAnimatedStyle(() => ({
+      transform: [{ rotateZ: `${rotation.value}deg` }],
+    }));
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={context.toggle}
+        className={cn(
+          'flex flex-row items-center justify-between py-4 font-medium transition-all hover:underline',
+          className
+        )}
+        {...props}
+      >
+        <Text className="font-medium text-foreground">{children}</Text>
+        <Animated.View style={iconStyle}>
+          <ChevronDown size={16} className="text-muted-foreground shrink-0 transition-transform duration-200" />
+        </Animated.View>
+      </Pressable>
+    );
+  }
+);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export const AccordionContent = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(AccordionItemContext);
+    if (!context) throw new Error('AccordionContent must be used within AccordionItem');
+
+    const animatedRef = useAnimatedRef<View>();
+    const height = useSharedValue(context.isExpanded ? 100 : 0); // Initially rough guess, we need to measure
+    const opacity = useSharedValue(context.isExpanded ? 1 : 0);
+    const springConfig = useSpring('snappy');
+
+    const [contentHeight, setContentHeight] = useState(0);
+
+    React.useEffect(() => {
+      height.value = withSpring(context.isExpanded ? contentHeight : 0, springConfig);
+      opacity.value = withSpring(context.isExpanded ? 1 : 0, springConfig);
+    }, [context.isExpanded, contentHeight, springConfig]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      height: height.value,
+      opacity: opacity.value,
+    }));
+
+    return (
+      <Animated.View style={[animatedStyle, { overflow: 'hidden' }]}>
+        <View
+          ref={animatedRef as any}
+          onLayout={(e) => {
+            const h = e.nativeEvent.layout.height;
+            if (h > 0 && contentHeight !== h) {
+              setContentHeight(h);
+              if (context.isExpanded) height.value = h;
+            }
+          }}
+          className={cn('pb-4 pt-0', className)}
+          {...props}
+        >
+          {children}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+AccordionContent.displayName = 'AccordionContent';

package/src/components/accordion/index.ts

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

package/src/components/alert/alert.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+import { Text } from '../typography';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm flex flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground border-border',
+        destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        success: 'border-success/50 text-success [&>svg]:text-success bg-success/5',
+        warning: 'border-warning/50 text-warning [&>svg]:text-warning bg-warning/5',
+        info: 'border-info/50 text-info [&>svg]:text-info bg-info/5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface AlertProps extends ViewProps, VariantProps<typeof alertVariants> {
+  icon?: React.ReactNode;
+}
+
+export const Alert = React.forwardRef<React.ElementRef<typeof View>, AlertProps>(
+  ({ className, variant, icon, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        role="alert"
+        className={alertVariants({ variant, className })}
+        {...props}
+      >
+        {icon && (
+          <View className="absolute left-4 top-4">
+            {icon}
+          </View>
+        )}
+        <View className={cn('flex flex-col space-y-1', icon && 'pl-8')}>
+          {children}
+        </View>
+      </View>
+    );
+  }
+);
+Alert.displayName = 'Alert';
+
+export const AlertTitle = createComponent<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>({
+  Component: Text,
+  baseClassName: 'mb-1 font-medium leading-none tracking-tight text-foreground',
+});
+AlertTitle.displayName = 'AlertTitle';
+
+export const AlertDescription = createComponent<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>({
+  Component: Text,
+  baseClassName: 'text-sm text-foreground opacity-90',
+});
+AlertDescription.displayName = 'AlertDescription';
+
+// Need to import cn locally since it's used inside the render
+import { cn } from '../../lib/utils';

package/src/components/alert/index.ts

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

package/src/components/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,145 @@
+import React, { forwardRef } from 'react';
+import { View, Modal, Pressable, type ViewProps } 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';
+
+const AlertDialogContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
+
+export interface AlertDialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const AlertDialog = ({ open: openProp, defaultOpen, onOpenChange, children }: AlertDialogProps) => {
+  const [open, setOpen] = useControllableState<boolean>({
+    ...(openProp !== undefined ? { prop: openProp } : {}),
+    defaultProp: defaultOpen || false,
+    ...(onOpenChange !== undefined ? { onChange: onOpenChange } : {}),
+  });
+
+  return (
+    <AlertDialogContext.Provider value={{ open, onOpenChange: setOpen }}>
+      {children}
+    </AlertDialogContext.Provider>
+  );
+};
+
+export const AlertDialogTrigger = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ children, onPress, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext);
+    if (!context) throw new Error('AlertDialogTrigger must be used within AlertDialog');
+
+    return (
+      <Pressable ref={ref} onPress={(e) => { context.onOpenChange(true); onPress?.(e); }} {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+AlertDialogTrigger.displayName = 'AlertDialogTrigger';
+
+export interface AlertDialogContentProps extends ViewProps {
+  overlayClassName?: string;
+}
+
+export const AlertDialogContent = forwardRef<React.ElementRef<typeof View>, AlertDialogContentProps>(
+  ({ className, overlayClassName, children, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext);
+    if (!context) throw new Error('AlertDialogContent must be used within AlertDialog');
+
+    return (
+      <Modal
+        visible={context.open}
+        transparent
+        animationType="none"
+        onRequestClose={() => context.onOpenChange(false)}
+      >
+        <View className={cn('flex-1 items-center justify-center', overlayClassName)}>
+          <Animated.View
+            entering={FadeIn.duration(200)}
+            exiting={FadeOut.duration(200)}
+            className="absolute inset-0 bg-black/80"
+          >
+            {/* Note: Unlike Dialog, clicking the backdrop does NOT close an AlertDialog by default */}
+            <View className="flex-1" />
+          </Animated.View>
+
+          <Animated.View
+            entering={ZoomIn.duration(200).springify().damping(20).stiffness(200)}
+            exiting={ZoomOut.duration(200)}
+            ref={ref}
+            className={cn(
+              'z-50 grid w-full max-w-lg gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full sm:w-[90%] w-[90%] rounded-xl mx-4',
+              className
+            )}
+            {...props}
+          >
+            {children}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+AlertDialogContent.displayName = 'AlertDialogContent';
+
+export const AlertDialogHeader = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+export const AlertDialogFooter = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-6', className)} {...props} />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+export const AlertDialogTitle = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
+  )
+);
+AlertDialogTitle.displayName = 'AlertDialogTitle';
+
+export const AlertDialogDescription = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+AlertDialogDescription.displayName = 'AlertDialogDescription';
+
+export const AlertDialogAction = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ className, onPress, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext);
+    return (
+      <Pressable
+        ref={ref}
+        onPress={(e) => { context?.onOpenChange(false); onPress?.(e); }}
+        className={cn('inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', className)}
+        {...props}
+      />
+    );
+  }
+);
+AlertDialogAction.displayName = 'AlertDialogAction';
+
+export const AlertDialogCancel = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ className, onPress, ...props }, ref) => {
+    const context = React.useContext(AlertDialogContext);
+    return (
+      <Pressable
+        ref={ref}
+        onPress={(e) => { context?.onOpenChange(false); onPress?.(e); }}
+        className={cn('inline-flex h-10 items-center justify-center rounded-md border border-input bg-transparent px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', className)}
+        {...props}
+      />
+    );
+  }
+);
+AlertDialogCancel.displayName = 'AlertDialogCancel';

package/src/components/alert-dialog/index.ts

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

package/src/components/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface AspectRatioProps extends ViewProps {
+  ratio?: number;
+}
+
+export const AspectRatio = React.forwardRef<React.ElementRef<typeof View>, AspectRatioProps>(
+  ({ className, ratio = 1, style, children, ...props }, ref) => {
+    return (
+      <View ref={ref} className={cn('w-full', className)} style={[style, { aspectRatio: ratio }]} {...props}>
+        {children}
+      </View>
+    );
+  }
+);
+AspectRatio.displayName = 'AspectRatio';

package/src/components/aspect-ratio/index.ts

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

package/src/components/avatar/avatar.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { View, Image, type ViewProps, type ImageProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { Text } from '../typography';
+import { cn } from '../../lib/utils';
+
+const avatarVariants = cva(
+  'relative flex shrink-0 overflow-hidden rounded-full bg-muted justify-center items-center',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 w-8',
+        default: 'h-10 w-10',
+        lg: 'h-14 w-14',
+        xl: 'h-20 w-20',
+      },
+    },
+    defaultVariants: {
+      size: 'default',
+    },
+  }
+);
+
+export interface AvatarProps extends ViewProps, VariantProps<typeof avatarVariants> {}
+
+export const Avatar = React.forwardRef<React.ElementRef<typeof View>, AvatarProps>(
+  ({ className, size, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={avatarVariants({ size, className })}
+        {...props}
+      />
+    );
+  }
+);
+Avatar.displayName = 'Avatar';
+
+export interface AvatarImageProps extends Omit<ImageProps, 'source'> {
+  src?: string;
+  onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void;
+}
+
+export const AvatarImage = React.forwardRef<React.ElementRef<typeof Image>, AvatarImageProps>(
+  ({ className, src, onLoadingStatusChange, ...props }, ref) => {
+    const [hasError, setHasError] = useState(false);
+
+    if (hasError || !src) {
+      return null;
+    }
+
+    return (
+      <Image
+        ref={ref}
+        source={{ uri: src }}
+        className={cn('aspect-square h-full w-full', className)}
+        onError={() => {
+          setHasError(true);
+          onLoadingStatusChange?.('error');
+        }}
+        onLoad={() => {
+          setHasError(false);
+          onLoadingStatusChange?.('loaded');
+        }}
+        {...props}
+      />
+    );
+  }
+);
+AvatarImage.displayName = 'AvatarImage';
+
+export interface AvatarFallbackProps extends ViewProps {
+  children?: React.ReactNode;
+}
+
+export const AvatarFallback = React.forwardRef<React.ElementRef<typeof View>, AvatarFallbackProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className="font-medium text-muted-foreground">{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+AvatarFallback.displayName = 'AvatarFallback';

package/src/components/avatar/index.ts

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

package/src/components/badge/badge.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+import { Text } from '../typography';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        outline: 'text-foreground',
+        // Nativecn extensions
+        success: 'border-transparent bg-success text-success-foreground',
+        warning: 'border-transparent bg-warning text-warning-foreground',
+        info: 'border-transparent bg-info text-info-foreground',
+        glass: 'border-glass-border bg-glass text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+const badgeTextVariants = cva('text-xs font-semibold', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      secondary: 'text-secondary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      success: 'text-primary-foreground', // Assuming success fg is light
+      warning: 'text-foreground',
+      info: 'text-primary-foreground',
+      glass: 'text-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface BadgeProps extends ViewProps, VariantProps<typeof badgeVariants> {
+  children?: React.ReactNode;
+}
+
+export const Badge = React.forwardRef<React.ElementRef<typeof View>, BadgeProps>(
+  ({ className, variant, children, ...props }, ref) => {
+    return (
+      <View ref={ref} className={badgeVariants({ variant, className })} {...props}>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <Text className={badgeTextVariants({ variant })}>{children}</Text>
+        ) : (
+          children
+        )}
+      </View>
+    );
+  }
+);
+Badge.displayName = 'Badge';

package/src/components/badge/index.ts

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

package/src/components/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View, Pressable, type ViewProps } from 'react-native';
+import { ChevronRight, MoreHorizontal } from 'lucide-react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+export const Breadcrumb = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ ...props }, ref) => <View ref={ref} {...props} />
+);
+Breadcrumb.displayName = 'Breadcrumb';
+
+export const BreadcrumbList = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'flex flex-row flex-wrap items-center break-words text-sm text-muted-foreground sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+export const BreadcrumbItem = React.forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  )
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+export const BreadcrumbLink = React.forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <Pressable ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props}>
+        {typeof children === 'string' ? <Text className="text-sm text-muted-foreground hover:text-foreground transition-colors">{children}</Text> : children}
+      </Pressable>
+    );
+  }
+);
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+export const BreadcrumbPage = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text
+      ref={ref}
+      role="link"
+      aria-disabled={true}
+      aria-current="page"
+      className={cn('text-sm font-normal text-foreground', className)}
+      {...props}
+    />
+  )
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+export const BreadcrumbSeparator = ({ children, className, ...props }: ViewProps) => (
+  <View role="presentation" aria-hidden={true} className={cn('px-1', className)} {...props}>
+    {children ?? <ChevronRight size={14} className="text-muted-foreground" />}
+  </View>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+export const BreadcrumbEllipsis = ({ className, ...props }: ViewProps) => (
+  <View
+    role="presentation"
+    aria-hidden={true}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <MoreHorizontal size={16} className="text-muted-foreground" />
+  </View>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';

package/src/components/breadcrumb/index.ts

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