cnnative-ui 1.0.0

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,103 @@
+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';
+
+const TooltipContext = React.createContext<{
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerLayout: LayoutRectangle | null;
+  setTriggerLayout: (layout: LayoutRectangle | null) => void;
+} | null>(null);
+
+export const TooltipProvider = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export const Tooltip = ({ open: openProp, defaultOpen, onOpenChange, children, delayDuration = 300 }: any) => {
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen || false,
+    onChange: onOpenChange,
+  });
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(null);
+
+  return (
+    <TooltipContext.Provider value={{ open, onOpenChange: setOpen, triggerLayout, setTriggerLayout }}>
+      {children}
+    </TooltipContext.Provider>
+  );
+};
+
+export const TooltipTrigger = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ children, ...props }, ref) => {
+    const context = React.useContext(TooltipContext);
+    if (!context) throw new Error('TooltipTrigger must be used within Tooltip');
+
+    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)} 
+          onLongPress={() => context.onOpenChange(true)}
+          delayLongPress={200}
+          {...props}
+        >
+          {children}
+        </Pressable>
+      </View>
+    );
+  }
+);
+TooltipTrigger.displayName = 'TooltipTrigger';
+
+export const TooltipContent = forwardRef<React.ElementRef<typeof View>, ViewProps>(
+  ({ className, children, ...props }, ref) => {
+    const context = React.useContext(TooltipContext);
+    if (!context) throw new Error('TooltipContent must be used within Tooltip');
+
+    if (!context.triggerLayout) return null;
+
+    const { x, y, width } = 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(200)}
+            exiting={FadeOut.duration(150)}
+            style={{
+              position: 'absolute',
+              top: y - 40, // Simple offset for now
+              left: x + width / 2,
+              transform: [{ translateX: '-50%' }],
+            }}
+            className={cn(
+              'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md',
+              className
+            )}
+            {...props}
+          >
+            <Text className="text-xs font-medium text-popover-foreground">{children as any}</Text>
+          </Animated.View>
+        </View>
+      </Modal>
+    );
+  }
+);
+TooltipContent.displayName = 'TooltipContent';

package/src/components/typography/index.ts

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

package/src/components/typography/typography.tsx

@@ -0,0 +1,57 @@
+import { Text as RNText } from 'react-native';
+import { cva, type VariantProps } from '../../lib/variants';
+import { createComponent } from '../../lib/create-component';
+
+const typographyVariants = cva('text-foreground', {
+  variants: {
+    variant: {
+      default: 'text-base font-normal',
+      h1: 'text-4xl font-extrabold tracking-tight lg:text-5xl',
+      h2: 'text-3xl font-semibold tracking-tight first:mt-0',
+      h3: 'text-2xl font-semibold tracking-tight',
+      h4: 'text-xl font-semibold tracking-tight',
+      p: 'text-base leading-7',
+      blockquote: 'mt-6 border-l-2 pl-6 italic text-muted-foreground',
+      code: 'relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold',
+      lead: 'text-xl text-muted-foreground',
+      large: 'text-lg font-semibold',
+      small: 'text-sm font-medium leading-none',
+      muted: 'text-sm text-muted-foreground',
+    },
+    align: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    align: 'left',
+  },
+});
+
+export type TextProps = React.ComponentPropsWithoutRef<typeof RNText> &
+  VariantProps<typeof typographyVariants> & {
+    className?: string;
+  };
+
+/**
+ * Standardized typography component based on shadcn/ui text styles.
+ */
+export const Text = createComponent<RNText, TextProps>({
+  Component: RNText,
+  variants: typographyVariants,
+});
+
+// Semantic exports for easier usage
+export const H1 = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'h1' }) });
+export const H2 = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'h2' }) });
+export const H3 = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'h3' }) });
+export const H4 = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'h4' }) });
+export const P = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'p' }) });
+export const BlockQuote = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'blockquote' }) });
+export const Code = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'code' }) });
+export const Lead = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'lead' }) });
+export const Large = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'large' }) });
+export const Small = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'small' }) });
+export const Muted = createComponent<RNText, TextProps>({ Component: RNText, variants: () => typographyVariants({ variant: 'muted' }) });

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from './theme-context';
+export * from './toast-context';
+export * from './provider';

package/src/context/provider.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ThemeProvider, type ThemeProviderProps } from './theme-context';
+import { ToastProvider } from './toast-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export interface NativecnProviderProps extends ThemeProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * The root provider for the Nativecn library.
+ * Wraps your application with all required contexts (Theme, Toast, SafeArea, GestureHandler).
+ */
+export const NativecnProvider: React.FC<NativecnProviderProps> = ({
+  children,
+  defaultColorScheme,
+  defaultThemeName,
+}) => {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <SafeAreaProvider>
+        <ThemeProvider
+          defaultColorScheme={defaultColorScheme}
+          defaultThemeName={defaultThemeName}
+        >
+          <ToastProvider>
+            {/* The ToastRenderer would go here to automatically render toasts */}
+            {children}
+          </ToastProvider>
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
+  );
+};

package/src/context/theme-context.tsx

@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import { useColorScheme as useNativeColorScheme } from 'react-native';
+import { defaultTheme } from '../tokens/themes/default';
+import { darkTheme } from '../tokens/themes/dark';
+import type { SemanticColors } from '../tokens/colors';
+
+export type ColorScheme = 'light' | 'dark' | 'system';
+export type ThemeName = 'default' | 'ocean' | 'rose'; // Extend as we add more themes
+
+export interface ThemeContextType {
+  colorScheme: ColorScheme;
+  setColorScheme: (scheme: ColorScheme) => void;
+  isDark: boolean;
+  themeName: ThemeName;
+  setThemeName: (name: ThemeName) => void;
+  theme: SemanticColors;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export interface ThemeProviderProps {
+  children: React.ReactNode;
+  defaultColorScheme?: ColorScheme;
+  defaultThemeName?: ThemeName;
+}
+
+// Map theme names to their light/dark color definitions
+const themes: Record<ThemeName, { light: SemanticColors; dark: SemanticColors }> = {
+  default: { light: defaultTheme, dark: darkTheme },
+  ocean: {
+    light: require('../tokens/themes/ocean').oceanThemeLight,
+    dark: require('../tokens/themes/ocean').oceanThemeDark,
+  },
+  rose: {
+    light: require('../tokens/themes/rose').roseThemeLight,
+    dark: require('../tokens/themes/rose').roseThemeDark,
+  },
+};
+
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultColorScheme = 'system',
+  defaultThemeName = 'default',
+}) => {
+  const nativeColorScheme = useNativeColorScheme();
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(defaultColorScheme);
+  const [themeName, setThemeName] = useState<ThemeName>(defaultThemeName);
+
+  const isDark =
+    colorScheme === 'system'
+      ? nativeColorScheme === 'dark'
+      : colorScheme === 'dark';
+
+  const theme = isDark ? themes[themeName].dark : themes[themeName].light;
+
+  const value = useMemo(
+    () => ({
+      colorScheme,
+      setColorScheme,
+      isDark,
+      themeName,
+      setThemeName,
+      theme,
+    }),
+    [colorScheme, isDark, themeName, theme]
+  );
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useThemeContext = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useThemeContext must be used within a ThemeProvider');
+  }
+  return context;
+};

package/src/context/toast-context.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, useContext, useState, useCallback } from 'react';
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'destructive';
+
+export interface ToastProps {
+  id: string;
+  title: string;
+  description?: string;
+  type?: ToastType;
+  duration?: number;
+  action?: {
+    label: string;
+    onPress: () => void;
+  };
+}
+
+export interface ToastContextType {
+  toasts: ToastProps[];
+  toast: (props: Omit<ToastProps, 'id'>) => string;
+  dismiss: (id: string) => void;
+  clearAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastProps[]>([]);
+
+  const toast = useCallback((props: Omit<ToastProps, 'id'>) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { ...props, id }]);
+    
+    // Auto-dismiss
+    const duration = props.duration ?? 3000;
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+    
+    return id;
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, toast, dismiss, clearAll }}>
+      {children}
+    </ToastContext.Provider>
+  );
+};
+
+export const useToastContext = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToastContext must be used within a ToastProvider');
+  }
+  return context;
+};

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="nativewind/types" />
+/// <reference types="jest" />

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+export * from './use-controllable';
+export * from './use-debounce';
+export * from './use-previous';
+export * from './use-disclosure';
+export * from './use-theme';
+export * from './use-toast';
+export * from './use-spring';
+export * from './use-haptics';
+export * from './use-press-animation';
+export * from './use-keyboard';
+export * from './use-color-scheme';
+export * from './use-media-query';
+export * from './use-scroll-header';
+export * from './use-countdown';
+export * from './use-biometric';

package/src/hooks/use-biometric.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Stub biometric hook.
+ * In a real app this would use `@sbaiahmed1/react-native-biometrics` or `expo-local-authentication`.
+ */
+export function useBiometric() {
+  const [isSupported, setIsSupported] = useState(false);
+  const [biometryType, setBiometryType] = useState<'FaceID' | 'TouchID' | 'Biometrics' | null>(null);
+
+  useEffect(() => {
+    // In actual implementation:
+    // LocalAuthentication.hasHardwareAsync()
+    // LocalAuthentication.supportedAuthenticationTypesAsync()
+    setIsSupported(true);
+    setBiometryType('FaceID');
+  }, []);
+
+  const authenticate = async (promptMessage: string = 'Authenticate to continue') => {
+    // Simulate auth
+    return new Promise<boolean>((resolve) => {
+      setTimeout(() => resolve(true), 1000);
+    });
+  };
+
+  return { isSupported, biometryType, authenticate };
+}

package/src/hooks/use-color-scheme.ts

@@ -0,0 +1,10 @@
+import { useColorScheme as useNativeColorScheme } from 'react-native';
+
+/**
+ * Hook to get the current system color scheme.
+ * This is native 'light' | 'dark', unaware of Nativecn's ThemeProvider.
+ * For most use cases, you should use `useTheme().isDark` instead.
+ */
+export function useColorScheme() {
+  return useNativeColorScheme() ?? 'light';
+}

package/src/hooks/use-controllable.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react';
+
+export interface UseControllableStateParams<T> {
+  prop?: T;
+  defaultProp?: T;
+  onChange?: (state: T) => void;
+}
+
+/**
+ * A hook that allows a component to be both controlled and uncontrolled.
+ */
+export function useControllableState<T>({
+  prop,
+  defaultProp,
+  onChange = () => {},
+}: UseControllableStateParams<T>) {
+  const [uncontrolledProp, setUncontrolledProp] = useState<T | undefined>(defaultProp);
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+
+  const setValue = useCallback(
+    (nextValue: T | ((prev: T) => T)) => {
+      if (isControlled) {
+        const setter = nextValue as (prev: T) => T;
+        const value = typeof nextValue === 'function' ? setter(prop) : nextValue;
+        if (value !== prop) onChange(value);
+      } else {
+        setUncontrolledProp((prevValue) => {
+          const setter = nextValue as (prev: T | undefined) => T;
+          const value = typeof nextValue === 'function' ? setter(prevValue) : nextValue;
+          if (value !== prevValue) onChange(value);
+          return value;
+        });
+      }
+    },
+    [isControlled, prop, onChange]
+  );
+
+  return [value as T, setValue] as const;
+}

package/src/hooks/use-countdown.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Hook for managing a countdown timer (e.g. for OTP resend).
+ */
+export function useCountdown(initialSeconds: number) {
+  const [seconds, setSeconds] = useState(initialSeconds);
+  const [isActive, setIsActive] = useState(false);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | null = null;
+    if (isActive && seconds > 0) {
+      interval = setInterval(() => {
+        setSeconds((seconds) => seconds - 1);
+      }, 1000);
+    } else if (seconds === 0) {
+      setIsActive(false);
+      if (interval) clearInterval(interval);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [isActive, seconds]);
+
+  const start = useCallback(() => setIsActive(true), []);
+  const stop = useCallback(() => setIsActive(false), []);
+  const reset = useCallback(() => {
+    setSeconds(initialSeconds);
+    setIsActive(false);
+  }, [initialSeconds]);
+
+  return { seconds, isActive, start, stop, reset };
+}

package/src/hooks/use-debounce.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Hook to debounce a rapidly changing value.
+ */
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/src/hooks/use-disclosure.ts

@@ -0,0 +1,14 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Manage open/close state (e.g. for dialogs, sheets, modals).
+ */
+export function useDisclosure(defaultIsOpen: boolean = false) {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  return { isOpen, open, close, toggle, setIsOpen };
+}

package/src/hooks/use-haptics.ts

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import * as Haptics from 'expo-haptics';
+import { Platform } from 'react-native';
+import type { HapticFeedbackType } from '../lib/types';
+
+/**
+ * Triggers haptic feedback based on our semantic intent tokens.
+ * Fails silently on platforms without haptic support (e.g., Web).
+ */
+export function useHaptics() {
+  const trigger = useCallback((type: HapticFeedbackType = 'selection') => {
+    if (Platform.OS === 'web') return;
+
+    try {
+      switch (type) {
+        case 'light':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+          break;
+        case 'medium':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+          break;
+        case 'heavy':
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+          break;
+        case 'selection':
+          Haptics.selectionAsync();
+          break;
+        case 'success':
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+          break;
+        case 'warning':
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+          break;
+        case 'error':
+          Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+          break;
+        case 'none':
+        default:
+          break;
+      }
+    } catch (e) {
+      // Ignore haptic errors on unsupported devices
+    }
+  }, []);
+
+  return trigger;
+}

package/src/hooks/use-keyboard.ts

@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, Platform, KeyboardEvent } from 'react-native';
+
+/**
+ * Hook to track keyboard height and visibility.
+ */
+export function useKeyboard() {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const onKeyboardShow = (e: KeyboardEvent) => {
+      setKeyboardHeight(e.endCoordinates.height);
+      setIsKeyboardVisible(true);
+    };
+
+    const onKeyboardHide = () => {
+      setKeyboardHeight(0);
+      setIsKeyboardVisible(false);
+    };
+
+    const showSubscription = Keyboard.addListener(showEvent, onKeyboardShow);
+    const hideSubscription = Keyboard.addListener(hideEvent, onKeyboardHide);
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+
+  return { keyboardHeight, isKeyboardVisible };
+}

package/src/hooks/use-media-query.ts

@@ -0,0 +1,27 @@
+import { useWindowDimensions } from 'react-native';
+
+export const breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536,
+} as const;
+
+export type Breakpoint = keyof typeof breakpoints;
+
+/**
+ * Hook for responsive layout based on screen width.
+ */
+export function useMediaQuery() {
+  const { width } = useWindowDimensions();
+
+  return {
+    isSm: width >= breakpoints.sm,
+    isMd: width >= breakpoints.md,
+    isLg: width >= breakpoints.lg,
+    isXl: width >= breakpoints.xl,
+    is2Xl: width >= breakpoints['2xl'],
+    width,
+  };
+}

package/src/hooks/use-press-animation.ts

@@ -0,0 +1,45 @@
+import { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { useSpring } from './use-spring';
+import { pressScales, type PressScaleKey, type SpringPreset } from '../tokens/motion';
+
+export interface UsePressAnimationProps {
+  scale?: PressScaleKey;
+  springConfig?: SpringPreset;
+}
+
+/**
+ * Hook to handle scaling animations for pressable components (Buttons, Cards, etc.)
+ */
+export function usePressAnimation({
+  scale = 'normal',
+  springConfig = 'snappy',
+}: UsePressAnimationProps = {}) {
+  const pressed = useSharedValue(0);
+  const spring = useSpring(springConfig);
+  const scaleTarget = pressScales[scale];
+
+  const handlePressIn = () => {
+    pressed.value = 1;
+  };
+
+  const handlePressOut = () => {
+    pressed.value = 0;
+  };
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const currentScale = pressed.value === 1 ? scaleTarget : 1;
+    return {
+      transform: [
+        {
+          scale: withSpring(currentScale, spring),
+        },
+      ],
+    };
+  });
+
+  return {
+    handlePressIn,
+    handlePressOut,
+    animatedStyle,
+  };
+}