cnnative-ui 1.0.0

package/src/components/scroll-area/index.ts

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

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ScrollView, type ScrollViewProps } from 'react-native';
+import { cn } from '../../lib/utils';
+
+export interface ScrollAreaProps extends ScrollViewProps {
+  orientation?: 'vertical' | 'horizontal';
+}
+
+export const ScrollArea = React.forwardRef<React.ElementRef<typeof ScrollView>, ScrollAreaProps>(
+  ({ className, orientation = 'vertical', children, ...props }, ref) => {
+    const isHorizontal = orientation === 'horizontal';
+    
+    return (
+      <ScrollView
+        ref={ref}
+        horizontal={isHorizontal}
+        showsVerticalScrollIndicator={!isHorizontal}
+        showsHorizontalScrollIndicator={isHorizontal}
+        className={cn('flex shrink-0', className)}
+        {...props}
+      >
+        {children}
+      </ScrollView>
+    );
+  }
+);
+ScrollArea.displayName = 'ScrollArea';

package/src/components/select/index.ts

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

package/src/components/select/select.tsx

@@ -0,0 +1,154 @@
+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 { ChevronDown, Check } from 'lucide-react-native';
+import { useControllableState } from '../../hooks/use-controllable';
+import { cn } from '../../lib/utils';
+import { Text } from '../typography';
+import { useHaptics } from '../../hooks/use-haptics';
+import { useThemeContext } from '../../context/theme-context';
+
+const SelectContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  triggerLayout: LayoutRectangle | null;
+  setTriggerLayout: (layout: LayoutRectangle | null) => void;
+} | null>(null);
+
+export const Select = ({ open: openProp, defaultOpen, onOpenChange, value: valueProp, defaultValue, onValueChange, children }: any) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+  
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue || '',
+    onChange: onValueChange,
+  });
+
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+
+  return (
+    <SelectContext.Provider value={{ open, onOpenChange: setOpen, value, onValueChange: setValue, triggerLayout, setTriggerLayout }}>
+      {children}
+    </SelectContext.Provider>
+  );
+};
+
+export const SelectTrigger = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(SelectContext);
+    if (!context) throw new Error('SelectTrigger must be used within Select');
+
+    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 });
+          });
+        }}
+        className={cn(
+          'flex h-10 w-full flex-row items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+      >
+        <Pressable className="flex-1 flex-row justify-between items-center" onPress={() => context.onOpenChange(true)} {...props}>
+          {children}
+          <ChevronDown size={16} className="text-muted-foreground opacity-50" />
+        </Pressable>
+      </View>
+    );
+  }
+);
+SelectTrigger.displayName = 'SelectTrigger';
+
+export const SelectValue = ({ placeholder }: { placeholder?: string }) => {
+  const context = React.useContext(SelectContext);
+  return (
+    <Text className={cn('text-sm', !context?.value ? 'text-muted-foreground' : 'text-foreground')} numberOfLines={1}>
+      {context?.value || placeholder}
+    </Text>
+  );
+};
+
+export const SelectContent = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(SelectContext);
+    if (!context) throw new Error('SelectContent must be used within Select');
+
+    if (!context.triggerLayout) return null;
+
+    const { x, y, width, height } = context.triggerLayout;
+
+    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 + height + 4,
+              left: x,
+              width: width,
+            }}
+            className={cn(
+              'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md',
+              className
+            )}
+            {...props}
+          >
+            <View className="p-1">{children}</View>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+SelectContent.displayName = 'SelectContent';
+
+export const SelectItem = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable> & { value: string; label: string }>(
+  ({ className, value, label, onPress, ...props }, ref) => {
+    const context = React.useContext(SelectContext);
+    const triggerHaptic = useHaptics();
+    const { theme } = useThemeContext();
+
+    const isSelected = context?.value === value;
+
+    return (
+      <Pressable
+        ref={ref}
+        onPress={(e) => {
+          triggerHaptic('selection');
+          context?.onValueChange(value);
+          context?.onOpenChange(false);
+          onPress?.(e);
+        }}
+        className={cn(
+          'relative flex w-full flex-row cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground',
+          isSelected ? 'bg-accent' : '',
+          className
+        )}
+        {...props}
+      >
+        <View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+          {isSelected && <Check size={16} color={theme.foreground as string} />}
+        </View>
+        <Text className="text-sm font-medium text-foreground">{label}</Text>
+      </Pressable>
+    );
+  }
+);
+SelectItem.displayName = 'SelectItem';

package/src/components/separator/index.ts

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

package/src/components/separator/separator.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+
+const separatorVariants = cva('shrink-0 bg-border', {
+  variants: {
+    orientation: {
+      horizontal: 'h-[1px] w-full',
+      vertical: 'h-full w-[1px]',
+    },
+    variant: {
+      default: 'bg-border',
+      gradient: 'bg-transparent', // Handled by Layer 3 Gradient wrapper
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'default',
+  },
+});
+
+export interface SeparatorProps extends ViewProps, VariantProps<typeof separatorVariants> {}
+
+export const Separator = React.forwardRef<React.ElementRef<typeof View>, SeparatorProps>(
+  ({ className, orientation, variant, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={separatorVariants({ orientation, variant, className })}
+        role={props.role ?? 'separator'}
+        {...props}
+      />
+    );
+  }
+);
+Separator.displayName = 'Separator';

package/src/components/sheet/index.ts

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

package/src/components/sheet/sheet.tsx

@@ -0,0 +1,128 @@
+import React, { forwardRef } from 'react';
+import { View, Modal, Pressable, type ViewProps } from 'react-native';
+import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } 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 SheetContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+} | null>(null);
+
+export interface SheetProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: React.ReactNode;
+}
+
+export const Sheet = ({ open: openProp, defaultOpen, onOpenChange, children }: SheetProps) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <SheetContext.Provider value={{ open, onOpenChange: setOpen }}>
+      {children}
+    </SheetContext.Provider>
+  );
+};
+
+export const SheetTrigger = forwardRef<React.ElementRef<typeof Pressable>, React.ComponentPropsWithoutRef<typeof Pressable>>(
+  ({ children, onPress, ...props }, ref) => {
+    const context = React.useContext(SheetContext);
+    if (!context) throw new Error('SheetTrigger must be used within Sheet');
+
+    return (
+      <Pressable ref={ref} onPress={(e) => { context.onOpenChange(true); onPress?.(e); }} {...props}>
+        {children}
+      </Pressable>
+    );
+  }
+);
+SheetTrigger.displayName = 'SheetTrigger';
+
+export interface SheetContentProps extends ViewProps {
+  overlayClassName?: string;
+  hideClose?: boolean;
+}
+
+export const SheetContent = forwardRef<React.ElementRef<typeof View>, SheetContentProps>(
+  ({ className, overlayClassName, children, hideClose = false, ...props }, ref) => {
+    const context = React.useContext(SheetContext);
+    if (!context) throw new Error('SheetContent must be used within Sheet');
+
+    return (
+      <Modal
+        visible={context.open}
+        transparent
+        animationType="none"
+        onRequestClose={() => context.onOpenChange(false)}
+      >
+        <View className={cn('flex-1 justify-end', overlayClassName)}>
+          <Animated.View
+            entering={FadeIn.duration(300)}
+            exiting={FadeOut.duration(300)}
+            className="absolute inset-0 bg-black/80"
+          >
+            <Pressable className="flex-1" onPress={() => context.onOpenChange(false)} />
+          </Animated.View>
+
+          <Animated.View
+            entering={SlideInDown.springify().damping(20).stiffness(200)}
+            exiting={SlideOutDown.duration(300)}
+            ref={ref}
+            className={cn(
+              'z-50 w-full gap-4 bg-background p-6 shadow-lg rounded-t-3xl border-t border-border mt-10',
+              className
+            )}
+            {...props}
+          >
+            {/* Grab bar for aesthetics */}
+            <View className="w-10 h-1 bg-muted rounded-full self-center mb-4" />
+            
+            {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>
+    );
+  }
+);
+SheetContent.displayName = 'SheetContent';
+
+export const SheetHeader = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+export const SheetFooter = ({ className, ...props }: ViewProps) => (
+  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-auto pb-8', className)} {...props} />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+export const SheetTitle = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
+  )
+);
+SheetTitle.displayName = 'SheetTitle';
+
+export const SheetDescription = forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
+  ({ className, ...props }, ref) => (
+    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+SheetDescription.displayName = 'SheetDescription';

package/src/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect } from 'react';
+import { View, type ViewProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  interpolate,
+  Extrapolate,
+} from 'react-native-reanimated';
+import { cn } from '../../lib/utils';
+import { useThemeContext } from '../../context/theme-context';
+
+export interface SkeletonProps extends ViewProps {
+  /** Uses true wave-like shimmer animation instead of opacity pulse */
+  shimmer?: boolean;
+}
+
+export const Skeleton = React.forwardRef<React.ElementRef<typeof View>, SkeletonProps>(
+  ({ className, shimmer = true, style, ...props }, ref) => {
+    const { theme } = useThemeContext();
+    const progress = useSharedValue(0);
+
+    useEffect(() => {
+      progress.value = withRepeat(
+        withTiming(1, { duration: 1200 }),
+        -1,
+        false
+      );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => {
+      if (!shimmer) {
+        // Fallback to simple opacity pulse if shimmer is false
+        return {
+          opacity: interpolate(progress.value, [0, 0.5, 1], [0.5, 1, 0.5]),
+        };
+      }
+
+      // We translate the shimmer layer across the background
+      return {};
+    });
+
+    return (
+      <View
+        ref={ref}
+        className={cn('animate-pulse rounded-md bg-muted overflow-hidden relative', className)}
+        style={style}
+        {...props}
+      >
+        {shimmer && (
+          <Animated.View
+            style={[
+              {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                backgroundColor: theme.shimmer,
+                width: '200%', // wider to sweep across
+              },
+              useAnimatedStyle(() => ({
+                transform: [
+                  {
+                    translateX: interpolate(
+                      progress.value,
+                      [0, 1],
+                      [-200, 200], // Translate across the screen
+                      Extrapolate.CLAMP
+                    ),
+                  },
+                ],
+              })),
+            ]}
+          />
+        )}
+      </View>
+    );
+  }
+);
+Skeleton.displayName = 'Skeleton';
+
+import { StyleSheet } from 'react-native';

package/src/components/slider/index.ts

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

package/src/components/slider/slider.tsx

@@ -0,0 +1,145 @@
+import React, { forwardRef, useState } from 'react';
+import { View, type ViewProps, PanResponder } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  runOnJS,
+} from 'react-native-reanimated';
+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 SliderProps extends Omit<ViewProps, 'value'> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}
+
+export const Slider = forwardRef<React.ElementRef<typeof View>, SliderProps>(
+  (
+    {
+      className,
+      value: valueProp,
+      defaultValue = 0,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const triggerHaptic = useHaptics();
+    const springConfig = useSpring('snappy');
+    const { theme } = useThemeContext();
+
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const [width, setWidth] = useState(0);
+    const isInteracting = useSharedValue(false);
+
+    // Ensure value is within bounds
+    const clampedValue = Math.min(Math.max(value, min), max);
+    const percentage = ((clampedValue - min) / (max - min)) * 100;
+
+    const handleValueChange = (newPercentage: number) => {
+      const rawValue = (newPercentage / 100) * (max - min) + min;
+      const steppedValue = Math.round(rawValue / step) * step;
+      const finalValue = Math.min(Math.max(steppedValue, min), max);
+      
+      if (finalValue !== value) {
+        // Trigger haptic if we crossed a step
+        if (step > 0 && finalValue % step === 0) {
+          triggerHaptic('selection');
+        }
+        setValue(finalValue);
+      }
+    };
+
+    const panResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (evt) => {
+        isInteracting.value = true;
+        triggerHaptic('light');
+        if (width > 0) {
+          const newPercentage = (evt.nativeEvent.locationX / width) * 100;
+          handleValueChange(newPercentage);
+        }
+      },
+      onPanResponderMove: (evt, gestureState) => {
+        if (width > 0) {
+          // Adjust based on the initial touch + drag distance
+          const newPercentage = ((evt.nativeEvent.locationX) / width) * 100;
+          handleValueChange(newPercentage);
+        }
+      },
+      onPanResponderRelease: () => {
+        isInteracting.value = false;
+        triggerHaptic('light');
+      },
+    });
+
+    const trackAnimatedStyle = useAnimatedStyle(() => {
+      return {
+        width: withSpring(`${percentage}%`, springConfig),
+      };
+    }, [percentage, springConfig]);
+
+    const thumbAnimatedStyle = useAnimatedStyle(() => {
+      return {
+        left: withSpring(`${percentage}%`, springConfig),
+        transform: [
+          { translateX: -10 }, // Half of thumb width
+          { scale: withSpring(isInteracting.value ? 1.2 : 1, springConfig) }
+        ]
+      };
+    }, [percentage, isInteracting.value, springConfig]);
+
+    return (
+      <View
+        ref={ref}
+        className={cn(
+          'relative flex w-full touch-none select-none items-center justify-center py-4',
+          disabled && 'opacity-50',
+          className
+        )}
+        style={style}
+        accessibilityRole="adjustable"
+        accessibilityValue={{ min, max, now: clampedValue }}
+        {...props}
+      >
+        <View 
+          className="relative h-2 w-full overflow-hidden rounded-full bg-secondary"
+          onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
+          {...panResponder.panHandlers}
+        >
+          <Animated.View
+            className="absolute h-full bg-primary"
+            style={trackAnimatedStyle}
+          />
+        </View>
+
+        <Animated.View
+          className="absolute h-5 w-5 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          style={thumbAnimatedStyle}
+          pointerEvents="none"
+        />
+      </View>
+    );
+  }
+);
+Slider.displayName = 'Slider';

package/src/components/switch/index.ts

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

package/src/components/switch/switch.tsx

@@ -0,0 +1,78 @@
+import React, { forwardRef } from 'react';
+import { Pressable, View, type PressableProps } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  interpolateColor,
+} from 'react-native-reanimated';
+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 SwitchProps extends Omit<PressableProps, 'value'> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const Switch = forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
+  ({ 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 handlePress = () => {
+      if (disabled) return;
+      triggerHaptic('light');
+      setChecked(!checked);
+    };
+
+    const trackStyle = useAnimatedStyle(() => {
+      const backgroundColor = interpolateColor(
+        checked ? 1 : 0,
+        [0, 1],
+        [theme.input, theme.primary.DEFAULT]
+      );
+      return { backgroundColor };
+    }, [checked, theme]);
+
+    const thumbStyle = useAnimatedStyle(() => {
+      const translateX = withSpring(checked ? 20 : 0, springConfig);
+      return { transform: [{ translateX }] };
+    }, [checked, springConfig]);
+
+    return (
+      <AnimatedPressable
+        ref={ref}
+        onPress={handlePress}
+        disabled={disabled}
+        accessibilityRole="switch"
+        accessibilityState={{ checked, disabled }}
+        className={cn(
+          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+          disabled && 'cursor-not-allowed opacity-50',
+          className
+        )}
+        style={[trackStyle, style]}
+        {...props}
+      >
+        <Animated.View
+          className="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform"
+          style={thumbStyle}
+        />
+      </AnimatedPressable>
+    );
+  }
+);
+Switch.displayName = 'Switch';

package/src/components/table/index.ts

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