cnnative-ui 1.0.0

package/src/components/button/button.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Pressable, View, type PressableProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+import { Text } from '../typography';
+import { usePressAnimation } from '../../hooks/use-press-animation';
+import { useHaptics } from '../../hooks/use-haptics';
+import Animated from 'react-native-reanimated';
+
+const buttonVariants = cva(
+  'flex-row items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        // Nativecn extensions
+        gradient: 'bg-transparent', // Handled by a Gradient wrapper in Layer 3
+        glass: 'bg-glass border border-glass-border',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+// Map variants to specific text styles to override inheritance issues in React Native
+const textVariants = cva('', {
+  variants: {
+    variant: {
+      default: 'text-primary-foreground',
+      destructive: 'text-destructive-foreground',
+      outline: 'text-foreground',
+      secondary: 'text-secondary-foreground',
+      ghost: 'text-foreground',
+      link: 'text-primary underline',
+      gradient: 'text-primary-foreground',
+      glass: 'text-foreground',
+    },
+    size: {
+      default: 'text-sm font-medium',
+      sm: 'text-xs font-medium',
+      lg: 'text-base font-medium',
+      icon: 'text-sm',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export interface ButtonProps
+  extends React.ComponentPropsWithoutRef<typeof Pressable>,
+    VariantProps<typeof buttonVariants> {
+  haptic?: 'none' | 'selection' | 'light' | 'medium' | 'heavy';
+  animated?: boolean;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const Button = React.forwardRef<React.ElementRef<typeof Pressable>, ButtonProps>(
+  ({ className, variant, size, haptic = 'selection', animated = true, children, onPressIn, onPressOut, onPress, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const { handlePressIn, handlePressOut, animatedStyle } = usePressAnimation({
+      scale: 'normal',
+      springConfig: 'snappy',
+    });
+
+    const onInternalPressIn = (e: any) => {
+      if (animated) handlePressIn();
+      onPressIn?.(e);
+    };
+
+    const onInternalPressOut = (e: any) => {
+      if (animated) handlePressOut();
+      onPressOut?.(e);
+    };
+
+    const onInternalPress = (e: any) => {
+      if (haptic !== 'none') triggerHaptic(haptic);
+      onPress?.(e);
+    };
+
+    const Container = animated ? AnimatedPressable : Pressable;
+    const style = animated ? animatedStyle : undefined;
+
+    return (
+      <Container
+        ref={ref}
+        className={buttonVariants({ variant, size, className })}
+        onPressIn={onInternalPressIn}
+        onPressOut={onInternalPressOut}
+        onPress={onInternalPress}
+        style={style}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={textVariants({ variant, size })}>{children}</Text>
+        ) : (
+          children
+        )}
+      </Container>
+    );
+  }
+);
+Button.displayName = 'Button';

package/src/components/button/index.ts

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

package/src/components/card/card.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { createComponent } from '../../lib/create-component';
+import { Text } from '../typography';
+
+const Card = createComponent<View, ViewProps>({
+  Component: View,
+  baseClassName: 'rounded-lg border border-border bg-card shadow-sm',
+});
+
+const CardHeader = createComponent<View, ViewProps>({
+  Component: View,
+  baseClassName: 'flex flex-col space-y-1.5 p-6',
+});
+
+const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={`text-2xl font-semibold leading-none tracking-tight ${className}`} {...props} />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={`text-sm text-muted-foreground ${className}`} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = createComponent<View, ViewProps>({
+  Component: View,
+  baseClassName: 'p-6 pt-0',
+});
+
+const CardFooter = createComponent<View, ViewProps>({
+  Component: View,
+  baseClassName: 'flex flex-row items-center p-6 pt-0',
+});
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import Animated, { useAnimatedStyle, withSpring, interpolate } from 'react-native-reanimated';
+import { Check as CheckIcon } from 'lucide-react-native';
+import { useControllableState } from '../../hooks/use-controllable';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useSpring } from '../../hooks/use-spring';
+import { useThemeContext } from '../../context/theme-context';
+import { cn } from '../../lib/utils';
+
+export interface CheckboxProps extends Omit<PressableProps, 'value'> {
+  checked?: boolean | 'indeterminate';
+  defaultChecked?: boolean | 'indeterminate';
+  onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+  disabled?: boolean;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const Checkbox = forwardRef<React.ElementRef<typeof Pressable>, CheckboxProps>(
+  ({ className, checked: checkedProp, defaultChecked, onCheckedChange, disabled, style, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('snappy');
+    const { theme } = useThemeContext();
+
+    const [checked, setChecked] = useControllableState({
+      prop: checkedProp,
+      defaultProp: defaultChecked || false,
+      onChange: onCheckedChange,
+    });
+
+    const isChecked = checked === true;
+    const isIndeterminate = checked === 'indeterminate';
+
+    const handlePress = () => {
+      if (disabled) return;
+      triggerHaptic('selection');
+      if (isIndeterminate) {
+        setChecked(true);
+      } else {
+        setChecked(!checked);
+      }
+    };
+
+    const containerStyle = useAnimatedStyle(() => {
+      return {
+        backgroundColor: (isChecked || isIndeterminate) ? theme.primary.DEFAULT : 'transparent',
+        borderColor: (isChecked || isIndeterminate) ? theme.primary.DEFAULT : theme.primary.DEFAULT,
+      };
+    }, [isChecked, isIndeterminate, theme]);
+
+    const iconStyle = useAnimatedStyle(() => {
+      const scale = withSpring(isChecked || isIndeterminate ? 1 : 0, springConfig);
+      const opacity = withSpring(isChecked || isIndeterminate ? 1 : 0, springConfig);
+      return {
+        transform: [{ scale }],
+        opacity,
+      };
+    }, [isChecked, isIndeterminate, springConfig]);
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: isChecked, disabled }}
+        className={cn(
+          'peer h-5 w-5 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 justify-center items-center',
+          disabled && 'cursor-not-allowed opacity-50',
+          className
+        )}
+        style={[containerStyle, style]}
+        {...props}
+      >
+        <Animated.View style={iconStyle} className="flex items-center justify-center text-current">
+          {isIndeterminate ? (
+            <Animated.View className="h-0.5 w-2.5 bg-primary-foreground rounded-full" />
+          ) : (
+            <CheckIcon size={14} color={theme.primary.foreground as string} strokeWidth={3} />
+          )}
+        </Animated.View>
+      </AnimatedPressable>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';

package/src/components/checkbox/index.ts

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

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef, useState } from 'react';
+import { View, Pressable, type ViewProps, type PressableProps } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useSpring } from '../../hooks/use-spring';
+import { cn } from '../../lib/utils';
+import { useControllableState } from '../../hooks/use-controllable';
+
+const CollapsibleContext = React.createContext<{
+  isOpen: boolean;
+  toggle: () => void;
+} | null>(null);
+
+export interface CollapsibleProps extends ViewProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const Collapsible = forwardRef<React.ElementRef<typeof View>, CollapsibleProps>(
+  ({ className, open: openProp, defaultOpen, onOpenChange, children, ...props }, ref) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: openProp,
+      defaultProp: defaultOpen || false,
+      onChange: onOpenChange,
+    });
+
+    return (
+      <CollapsibleContext.Provider value={{ isOpen, toggle: () => setIsOpen(!isOpen) }}>
+        <View ref={ref} className={cn('', className)} {...props}>
+          {children}
+        </View>
+      </CollapsibleContext.Provider>
+    );
+  }
+);
+Collapsible.displayName = 'Collapsible';
+
+export const CollapsibleTrigger = forwardRef<React.ElementRef<typeof Pressable>, PressableProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext);
+    if (!context) throw new Error('CollapsibleTrigger must be used within Collapsible');
+
+    return (
+      <Pressable ref={ref} onPress={context.toggle} className={className} {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+export const CollapsibleContent = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(CollapsibleContext);
+    if (!context) throw new Error('CollapsibleContent must be used within Collapsible');
+
+    const [contentHeight, setContentHeight] = useState(0);
+    const height = useSharedValue(context.isOpen ? contentHeight : 0);
+    const opacity = useSharedValue(context.isOpen ? 1 : 0);
+    const springConfig = useSpring('snappy');
+
+    React.useEffect(() => {
+      height.value = withSpring(context.isOpen ? contentHeight : 0, springConfig);
+      opacity.value = withSpring(context.isOpen ? 1 : 0, springConfig);
+    }, [context.isOpen, contentHeight, springConfig]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      height: height.value,
+      opacity: opacity.value,
+    }));
+
+    return (
+      <Animated.View style={[animatedStyle, { overflow: 'hidden' }]}>
+        <View
+          ref={ref}
+          onLayout={(e) => {
+            const h = e.nativeEvent.layout.height;
+            if (h > 0 && contentHeight !== h) {
+              setContentHeight(h);
+              if (context.isOpen) height.value = h;
+            }
+          }}
+          className={className}
+          {...props}
+        >
+          {children}
+        </View>
+      </Animated.View>
+    );
+  }
+);
+CollapsibleContent.displayName = 'CollapsibleContent';

package/src/components/collapsible/index.ts

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

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

@@ -0,0 +1,121 @@
+import React, { forwardRef, useState } from 'react';
+import { View, Pressable, Modal, type ViewProps, type LayoutRectangle, type GestureResponderEvent } 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 ContextMenuContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerPosition: { x: number; y: number } | null;
+  setTriggerPosition: (pos: { x: number; y: number } | null) => void;
+} | null>(null);
+
+export const ContextMenu = ({ open: openProp, defaultOpen, onOpenChange, children }: any) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+  const [triggerPosition, setTriggerPosition] = useState<{ x: number; y: number } | null>(null);
+
+  return (
+    <ContextMenuContext.Provider value={{ open, onOpenChange: setOpen, triggerPosition, setTriggerPosition }}>
+      {children}
+    </ContextMenuContext.Provider>
+  );
+};
+
+export const ContextMenuTrigger = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ children, ...props }, ref) => {
+    const context = React.useContext(ContextMenuContext);
+    if (!context) throw new Error('ContextMenuTrigger must be used within ContextMenu');
+    const triggerHaptic = useHaptics();
+
+    const handleLongPress = (e: GestureResponderEvent) => {
+      triggerHaptic('heavy');
+      const { pageX, pageY } = e.nativeEvent;
+      context.setTriggerPosition({ x: pageX, y: pageY });
+      context.onOpenChange(true);
+    };
+
+    return (
+      <View ref={ref} collapsable={false}>
+        <Pressable onLongPress={handleLongPress} delayLongPress={500} {...props}>
+          {children}
+        </Pressable>
+      </View>
+    );
+  }
+);
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
+
+export const ContextMenuContent = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(ContextMenuContext);
+    if (!context) throw new Error('ContextMenuContent must be used within ContextMenu');
+
+    if (!context.triggerPosition) return null;
+
+    const { x, y } = context.triggerPosition;
+
+    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(150)}
+            exiting={FadeOut.duration(100)}
+            style={{
+              position: 'absolute',
+              top: y,
+              left: x,
+            }}
+            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>
+    );
+  }
+);
+ContextMenuContent.displayName = 'ContextMenuContent';
+
+export const ContextMenuItem = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable> & { inset?: boolean }>(
+  ({ className, inset, onPress, children, ...props }, ref) => {
+    const context = React.useContext(ContextMenuContext);
+    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',
+          inset && 'pl-8',
+          className
+        )}
+        {...props}
+      >
+        <Text className="text-sm font-medium text-popover-foreground">{children as any}</Text>
+      </Pressable>
+    );
+  }
+);
+ContextMenuItem.displayName = 'ContextMenuItem';

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

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

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,124 @@
+import React, { forwardRef } from 'react';
+import { View, Modal, Pressable, type ViewProps, type ModalProps } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn, ZoomOut } from 'react-native-reanimated';
+import { X } from 'lucide-react-native';
+import { useControllableState } from '../../hooks/use-controllable';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+const DialogContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
+
+export interface DialogProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const Dialog = ({ open: openProp, defaultOpen, onOpenChange, children }: DialogProps) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <DialogContext.Provider value={{ open, onOpenChange: setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+};
+
+export const DialogTrigger = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ children, onPress, ...props }, ref) => {
+    const context = React.useContext(DialogContext);
+    if (!context) throw new Error('DialogTrigger must be used within Dialog');
+
+    return (
+      <Pressable ref={ref} onPress={(e) => { context.onOpenChange(true); onPress?.(e); }} {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+DialogTrigger.displayName = 'DialogTrigger';
+
+export interface DialogContentProps extends ViewProps {
+  overlayClassName?: string;
+  hideClose?: boolean;
+}
+
+export const DialogContent = forwardRef<React.ElementRef<typeof View>, DialogContentProps>(
+  ({ className, overlayClassName, children, hideClose = false, ...props }, ref) => {
+    const context = React.useContext(DialogContext);
+    if (!context) throw new Error('DialogContent must be used within Dialog');
+
+    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"
+          >
+            <Pressable className="flex-1" onPress={() => context.onOpenChange(false)} />
+          </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}
+            {!hideClose && (
+              <Pressable
+                onPress={() => context.onOpenChange(false)}
+                className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+              >
+                <X size={20} className="text-muted-foreground" />
+              </Pressable>
+            )}
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+DialogContent.displayName = 'DialogContent';
+
+export const DialogHeader = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+export const DialogFooter = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 sm:gap-0 mt-4', className)} {...props} />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+export const DialogTitle = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-lg font-semibold leading-none tracking-tight', className)} {...props} />
+  )
+);
+DialogTitle.displayName = 'DialogTitle';
+
+export const DialogDescription = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+DialogDescription.displayName = 'DialogDescription';

package/src/components/dialog/index.ts

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