cnnative-ui 1.0.0

package/src/components/table/table.tsx

@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+export const Table = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View className="w-full">
+      <View
+        ref={ref}
+        className={cn('w-full max-w-full flex-col text-sm', className)}
+        {...props}
+      />
+    </View>
+  )
+);
+Table.displayName = 'Table';
+
+export const TableHeader = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex-row border-b border-border bg-muted/50', className)} {...props} />
+  )
+);
+TableHeader.displayName = 'TableHeader';
+
+export const TableBody = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex-col', className)} {...props} />
+  )
+);
+TableBody.displayName = 'TableBody';
+
+export const TableFooter = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View ref={ref} className={cn('flex-row border-t border-border bg-muted/50 font-medium', className)} {...props} />
+  )
+);
+TableFooter.displayName = 'TableFooter';
+
+export const TableRow = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn('flex-row border-b border-border transition-colors hover:bg-muted/50', className)}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = 'TableRow';
+
+export const TableHead = forwardRef<React.ElementRef<typeof View>, ViewProps & { title: string }>(
+  ({ className, title, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn('h-12 flex-1 justify-center px-4 align-middle font-medium', className)}
+      {...props}
+    >
+      <Text className="text-muted-foreground font-semibold">{title}</Text>
+    </View>
+  )
+);
+TableHead.displayName = 'TableHead';
+
+export const TableCell = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => (
+    <View ref={ref} className={cn('flex-1 justify-center p-4 align-middle', className)} {...props}>
+      {typeof children === 'string' ? <Text>{children}</Text> : children}
+    </View>
+  )
+);
+TableCell.displayName = 'TableCell';

package/src/components/tabs/index.ts

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

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,124 @@
+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 { 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 TabsContext = React.createContext<{
+  value: string;
+  onValueChange: (value: string) => void;
+} | null>(null);
+
+export interface TabsProps extends ViewProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export const Tabs = forwardRef<React.ElementRef<typeof View>, TabsProps>(
+  ({ className, value: valueProp, defaultValue, onValueChange, children, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue || '',
+      onChange: onValueChange,
+    });
+
+    return (
+      <TabsContext.Provider value={{ value, onValueChange: setValue }}>
+        <View ref={ref} className={cn('w-full', className)} {...props}>
+          {children}
+        </View>
+      </TabsContext.Provider>
+    );
+  }
+);
+Tabs.displayName = 'Tabs';
+
+export const TabsList = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => (
+    <View
+      ref={ref}
+      className={cn(
+        'inline-flex h-10 flex-row items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+);
+TabsList.displayName = 'TabsList';
+
+export interface TabsTriggerProps extends PressableProps {
+  value: string;
+}
+
+export const TabsTrigger = forwardRef<React.ElementRef<typeof Pressable>, TabsTriggerProps>(
+  ({ className, value, disabled, children, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    if (!context) throw new Error('TabsTrigger must be used within Tabs');
+    const triggerHaptic = useHaptics();
+
+    const isActive = context.value === value;
+
+    const handlePress = () => {
+      if (disabled) return;
+      if (!isActive) {
+        triggerHaptic('selection');
+        context.onValueChange(value);
+      }
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        className={cn(
+          'inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all',
+          isActive ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground',
+          disabled && 'opacity-50',
+          className
+        )}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={cn('text-sm font-medium', isActive ? 'text-foreground' : 'text-muted-foreground')}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+TabsTrigger.displayName = 'TabsTrigger';
+
+export interface TabsContentProps extends ViewProps {
+  value: string;
+}
+
+export const TabsContent = forwardRef<React.ElementRef<typeof View>, TabsContentProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const context = React.useContext(TabsContext);
+    if (!context) throw new Error('TabsContent must be used within Tabs');
+
+    if (context.value !== value) return null;
+
+    return (
+      <View
+        ref={ref}
+        className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+TabsContent.displayName = 'TabsContent';

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { TextInput, View, type TextInputProps, type NativeSyntheticEvent, type TextInputContentSizeChangeEventData } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { useThemeContext } from '../../context/theme-context';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+
+const textareaVariants = cva(
+  'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground 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 TextareaProps extends TextInputProps, VariantProps<typeof textareaVariants> {
+  error?: string;
+  helperText?: string;
+  autoGrow?: boolean;
+  maxHeight?: number;
+  showCharacterCount?: boolean;
+  maxLength?: number;
+}
+
+export const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextareaProps>(
+  ({ className, variant, error, helperText, autoGrow = true, maxHeight = 200, showCharacterCount, maxLength, value, onChangeText, style, ...props }, ref) => {
+    const { theme } = useThemeContext();
+    const [height, setHeight] = useState(80);
+
+    const handleContentSizeChange = (e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+      if (autoGrow) {
+        setHeight(Math.min(Math.max(80, e.nativeEvent.contentSize.height), maxHeight));
+      }
+      props.onContentSizeChange?.(e);
+    };
+
+    const count = value?.length || 0;
+
+    return (
+      <View className="flex flex-col space-y-1.5 w-full">
+        <TextInput
+          ref={ref}
+          className={cn(
+            textareaVariants({ variant }),
+            error && 'border-destructive focus-visible:ring-destructive',
+            className
+          )}
+          style={[style, autoGrow && { height }]}
+          placeholderTextColor={theme.muted.foreground as string}
+          multiline
+          textAlignVertical="top"
+          onContentSizeChange={handleContentSizeChange}
+          value={value}
+          onChangeText={onChangeText}
+          maxLength={maxLength}
+          {...props}
+        />
+        
+        <View className="flex flex-row justify-between w-full">
+          {(helperText || error) ? (
+            <Text className={cn('text-sm flex-1', error ? 'text-destructive' : 'text-muted-foreground')}>
+              {error || helperText}
+            </Text>
+          ) : <View />}
+
+          {showCharacterCount && maxLength && (
+            <Text className="text-sm text-muted-foreground text-right pl-2">
+              {count}/{maxLength}
+            </Text>
+          )}
+        </View>
+      </View>
+    );
+  }
+);
+Textarea.displayName = 'Textarea';

package/src/components/toast/index.ts

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

package/src/components/toast/toast.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect } from 'react';
+import { View, Pressable, type ViewProps, SafeAreaView } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+  withDelay,
+  runOnJS,
+} from 'react-native-reanimated';
+import { X } from 'lucide-react-native';
+import { useToastContext, type ToastProps } from '../../context/toast-context';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+import { useHaptics } from '../../hooks/use-haptics';
+
+const ToastItem = ({ toast, onDismiss }: { toast: ToastProps; onDismiss: (id: string) => void }) => {
+  const translateY = useSharedValue(-100);
+  const opacity = useSharedValue(0);
+  const triggerHaptic = useHaptics();
+
+  useEffect(() => {
+    // Entrance animation
+    translateY.value = withSpring(0, { damping: 15, stiffness: 200 });
+    opacity.value = withTiming(1, { duration: 300 });
+
+    // Haptic feedback based on type
+    if (toast.type === 'error') triggerHaptic('error');
+    else if (toast.type === 'success') triggerHaptic('success');
+    else if (toast.type === 'warning') triggerHaptic('warning');
+    else triggerHaptic('light');
+
+    // Setup exit animation manually if it wasn't auto-dismissed early
+    return () => {
+      // Cleanup happens via the dismiss function animating out
+    };
+  }, []);
+
+  const handleDismiss = () => {
+    translateY.value = withTiming(-100, { duration: 300 });
+    opacity.value = withTiming(0, { duration: 300 }, () => {
+      runOnJS(onDismiss)(toast.id);
+    });
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value }],
+    opacity: opacity.value,
+  }));
+
+  const getVariantStyles = () => {
+    switch (toast.type) {
+      case 'destructive':
+      case 'error':
+        return 'bg-destructive border-destructive text-destructive-foreground';
+      case 'success':
+        return 'bg-success border-success text-success-foreground';
+      case 'warning':
+        return 'bg-warning border-warning text-warning-foreground';
+      default:
+        return 'bg-background border-border text-foreground';
+    }
+  };
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className={cn(
+        'pointer-events-auto relative w-full flex-row items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all',
+        getVariantStyles()
+      )}
+    >
+      <View className="flex-1 flex-col gap-1">
+        <Text className={cn('text-sm font-semibold', toast.type && toast.type !== 'default' ? 'text-white' : 'text-foreground')}>
+          {toast.title}
+        </Text>
+        {toast.description && (
+          <Text className={cn('text-sm opacity-90', toast.type && toast.type !== 'default' ? 'text-white' : 'text-muted-foreground')}>
+            {toast.description}
+          </Text>
+        )}
+      </View>
+
+      {toast.action && (
+        <Pressable
+          onPress={toast.action.onPress}
+          className="inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        >
+          <Text className={toast.type && toast.type !== 'default' ? 'text-white' : 'text-foreground'}>
+            {toast.action.label}
+          </Text>
+        </Pressable>
+      )}
+
+      <Pressable
+        onPress={handleDismiss}
+        className="absolute right-2 top-2 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100"
+      >
+        <X size={16} color={toast.type && toast.type !== 'default' ? 'white' : 'gray'} />
+      </Pressable>
+    </Animated.View>
+  );
+};
+
+export const ToastViewport = ({ className, ...props }: ViewProps) => {
+  const { toasts, dismiss } = useToastContext();
+
+  return (
+    <SafeAreaView pointerEvents="box-none" className="absolute inset-0 z-50">
+      <View
+        pointerEvents="box-none"
+        className={cn(
+          'flex-col items-center justify-start gap-2 p-4 pt-10 sm:justify-end sm:p-6 w-full max-w-[420px] self-center',
+          className
+        )}
+        {...props}
+      >
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} onDismiss={dismiss} />
+        ))}
+      </View>
+    </SafeAreaView>
+  );
+};

package/src/components/toggle/index.ts

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

package/src/components/toggle/toggle.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+import { Text } from '../typography';
+import { useControllableState } from '../../hooks/use-controllable';
+import { useHaptics } from '../../hooks/use-haptics';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground 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-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-10 px-3',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5',
+      },
+      pressed: {
+        true: '',
+        false: '',
+      }
+    },
+    compoundVariants: [
+      { variant: 'default', pressed: true, className: 'bg-accent text-accent-foreground' },
+      { variant: 'outline', pressed: true, className: 'bg-accent text-accent-foreground' },
+    ],
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ToggleProps extends Omit<PressableProps, 'value'>, VariantProps<typeof toggleVariants> {
+  pressed?: boolean;
+  defaultPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+}
+
+export const Toggle = forwardRef<React.ElementRef<typeof Pressable>, ToggleProps>(
+  ({ className, variant, size, pressed: pressedProp, defaultPressed, onPressedChange, disabled, children, style, ...props }, ref) => {
+    const triggerHaptic = useHaptics();
+    
+    const [pressed, setPressed] = useControllableState({
+      prop: pressedProp,
+      defaultProp: defaultPressed || false,
+      onChange: onPressedChange,
+    });
+
+    const handlePress = () => {
+      if (disabled) return;
+      triggerHaptic('light');
+      setPressed(!pressed);
+    };
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ selected: pressed, disabled: !!disabled }}
+        className={toggleVariants({ variant, size, pressed, className })}
+        style={style}
+        {...props}
+      >
+        {typeof children === 'string' ? (
+          <Text className={cn(
+            'text-sm font-medium',
+            pressed ? 'text-accent-foreground' : 'text-foreground'
+          )}>
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </Pressable>
+    );
+  }
+);
+Toggle.displayName = 'Toggle';
+
+import { cn } from '../../lib/utils';

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

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

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

@@ -0,0 +1,87 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { Toggle } from '../toggle';
+import { useControllableState } from '../../hooks/use-controllable';
+
+const ToggleGroupContext = createContext<{
+  type: 'single' | 'multiple';
+  value: string | string[];
+  onValueChange: (value: string) => void;
+  variant?: 'default' | 'outline';
+  size?: 'default' | 'sm' | 'lg';
+} | null>(null);
+
+export interface ToggleGroupProps extends ViewProps {
+  type: 'single' | 'multiple';
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: any) => void;
+  variant?: 'default' | 'outline';
+  size?: 'default' | 'sm' | 'lg';
+}
+
+export const ToggleGroup = forwardRef<React.ElementRef<typeof View>, ToggleGroupProps>(
+  ({ className, type, value: valueProp, defaultValue, onValueChange, variant, size, children, ...props }, ref) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue || (type === 'single' ? '' : []),
+      onChange: onValueChange,
+    });
+
+    const handleValueChange = (itemValue: string) => {
+      if (type === 'single') {
+        setValue(value === itemValue ? '' : itemValue);
+      } else {
+        const arr = value as string[];
+        setValue(
+          arr.includes(itemValue)
+            ? arr.filter((v) => v !== itemValue)
+            : [...arr, itemValue]
+        );
+      }
+    };
+
+    return (
+      <ToggleGroupContext.Provider value={{ type, value, onValueChange: handleValueChange, variant, size }}>
+        <View ref={ref} className={cn('flex flex-row items-center justify-center gap-1', className)} {...props}>
+          {children}
+        </View>
+      </ToggleGroupContext.Provider>
+    );
+  }
+);
+ToggleGroup.displayName = 'ToggleGroup';
+
+export interface ToggleGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Toggle>, 'pressed' | 'onPressedChange'> {
+  value: string;
+}
+
+export const ToggleGroupItem = forwardRef<React.ElementRef<typeof Toggle>, ToggleGroupItemProps>(
+  ({ className, value, children, ...props }, ref) => {
+    const context = useContext(ToggleGroupContext);
+    if (!context) throw new Error('ToggleGroupItem must be used within a ToggleGroup');
+
+    const isPressed =
+      context.type === 'single'
+        ? context.value === value
+        : (context.value as string[]).includes(value);
+
+    return (
+      <Toggle
+        ref={ref}
+        variant={context.variant}
+        size={context.size}
+        pressed={isPressed}
+        onPressedChange={() => context.onValueChange(value)}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Toggle>
+    );
+  }
+);
+ToggleGroupItem.displayName = 'ToggleGroupItem';
+
+import { cn } from '../../lib/utils';

package/src/components/tooltip/index.ts

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