@gv-tech/ui-native 2.22.0 → 2.22.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.22.0",
+  "version": "2.22.2",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -36,8 +36,7 @@
   "dependencies": {
     "@gv-tech/design-tokens": "^2.12.0",
     "@gv-tech/ui-core": "^2.12.0",
-    "react-native-reanimated": "4.3.0",
-    "react-native-worklets": "0.8.1",
+    "react-hook-form": "^7.71.1",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",
@@ -66,22 +65,28 @@
     "@rn-primitives/toggle-group": "^1.2.0",
     "@rn-primitives/tooltip": "^1.2.0",
     "clsx": "^2.1.1",
-    "lucide-react-native": "^1.8.0",
     "nativewind": "^4.2.1",
-    "react-native-svg": "^15.15.3",
     "tailwind-merge": "^3.4.1",
     "tailwindcss": "^4.1.18"
   },
   "peerDependencies": {
+    "lucide-react-native": "^1.8.0",
     "react": ">=18",
     "react-native": ">=0.72",
     "react-native-reanimated": "^4.2.3",
+    "react-native-svg": "^15.15.3",
     "react-native-worklets": "^0.7.2"
   },
   "peerDependenciesMeta": {
+    "lucide-react-native": {
+      "optional": false
+    },
     "react-native-reanimated": {
       "optional": false
     },
+    "react-native-svg": {
+      "optional": false
+    },
     "react-native-worklets": {
       "optional": false
     }

package/src/carousel.tsx

@@ -5,25 +5,202 @@ import type {
   CarouselNextBaseProps,
   CarouselPreviousBaseProps,
 } from '@gv-tech/ui-core';
+import { ArrowLeft, ArrowRight } from 'lucide-react-native';
 import * as React from 'react';
-import { View } from 'react-native';
+import {
+  Dimensions,
+  ScrollView,
+  View,
+  type LayoutChangeEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { Button } from './button';
+import { cn } from './lib/utils';
+type CarouselApi = unknown;
 
-export const Carousel: React.FC<CarouselBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
+type CarouselContextType = {
+  orientation: 'horizontal' | 'vertical';
+  scrollRef: React.RefObject<ScrollView>;
+  scrollNext: () => void;
+  scrollPrev: () => void;
+  canScrollNext: boolean;
+  canScrollPrev: boolean;
+  itemWidth: number;
+  setItemWidth: (width: number) => void;
 };
 
-export const CarouselContent: React.FC<CarouselContentBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
-};
+const CarouselContext = React.createContext<CarouselContextType | null>(null);
 
-export const CarouselItem: React.FC<CarouselItemBaseProps> = ({ children, className }) => {
-  return <View className={className}>{children}</View>;
-};
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error('useCarousel must be used within a <Carousel />');
+  }
+  return context;
+}
 
-export const CarouselPrevious: React.FC<CarouselPreviousBaseProps> = ({ className }) => {
-  return <View className={className} />;
+export type CarouselProps = CarouselBaseProps & {
+  opts?: unknown;
+  plugins?: unknown;
+  setApi?: (api: CarouselApi) => void;
 };
 
-export const CarouselNext: React.FC<CarouselNextBaseProps> = ({ className }) => {
-  return <View className={className} />;
-};
+export const Carousel = React.forwardRef<View, CarouselProps>(
+  ({ children, className, opts, orientation = 'horizontal', setApi, plugins, ...props }, ref) => {
+    const scrollRef = React.useRef<ScrollView>(null) as React.RefObject<ScrollView>;
+    const [canScrollNext, setCanScrollNext] = React.useState(true);
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [itemWidth, setItemWidth] = React.useState(Dimensions.get('window').width);
+    const [currentIndex, setCurrentIndex] = React.useState(0);
+
+    const scrollNext = React.useCallback(() => {
+      scrollRef.current?.scrollTo({ x: (currentIndex + 1) * itemWidth, animated: true });
+    }, [currentIndex, itemWidth]);
+
+    const scrollPrev = React.useCallback(() => {
+      scrollRef.current?.scrollTo({ x: Math.max(0, currentIndex - 1) * itemWidth, animated: true });
+    }, [currentIndex, itemWidth]);
+
+    // Very basic API shim
+    React.useEffect(() => {
+      if (setApi) {
+        setApi({
+          scrollNext,
+          scrollPrev,
+          canScrollNext: () => canScrollNext,
+          canScrollPrev: () => canScrollPrev,
+          on: () => {},
+          off: () => {},
+        } as unknown as CarouselApi);
+      }
+    }, [setApi, scrollNext, scrollPrev, canScrollNext, canScrollPrev]);
+
+    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetX = event.nativeEvent.contentOffset.x;
+      const contentWidth = event.nativeEvent.contentSize.width;
+      const layoutWidth = event.nativeEvent.layoutMeasurement.width;
+
+      const newIndex = Math.round(offsetX / itemWidth);
+      setCurrentIndex(newIndex);
+      setCanScrollPrev(offsetX > 0);
+      setCanScrollNext(offsetX + layoutWidth < contentWidth);
+    };
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          orientation,
+          scrollRef,
+          scrollNext,
+          scrollPrev,
+          canScrollNext,
+          canScrollPrev,
+          itemWidth,
+          setItemWidth,
+        }}
+      >
+        <View ref={ref} className={cn('relative', className)} {...props}>
+          {children}
+        </View>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = 'Carousel';
+
+export const CarouselContent = React.forwardRef<ScrollView, CarouselContentBaseProps>(
+  ({ children, className, ...props }, ref) => {
+    const { scrollRef, orientation } = useCarousel();
+
+    return (
+      <View className="overflow-hidden">
+        <ScrollView
+          ref={scrollRef}
+          horizontal={orientation === 'horizontal'}
+          showsHorizontalScrollIndicator={false}
+          showsVerticalScrollIndicator={false}
+          pagingEnabled
+          snapToInterval={orientation === 'horizontal' ? Dimensions.get('window').width : undefined}
+          decelerationRate="fast"
+          className={cn('flex', orientation === 'horizontal' ? 'flex-row' : 'flex-col', className)}
+          {...props}
+        >
+          {children}
+        </ScrollView>
+      </View>
+    );
+  },
+);
+CarouselContent.displayName = 'CarouselContent';
+
+export const CarouselItem = React.forwardRef<View, CarouselItemBaseProps>(({ children, className, ...props }, ref) => {
+  const { orientation, setItemWidth } = useCarousel();
+
+  const handleLayout = (e: LayoutChangeEvent) => {
+    if (orientation === 'horizontal') {
+      setItemWidth(e.nativeEvent.layout.width);
+    }
+  };
+
+  return (
+    <View ref={ref} onLayout={handleLayout} className={cn('min-w-0 shrink-0 grow-0 basis-full', className)} {...props}>
+      {children}
+    </View>
+  );
+});
+CarouselItem.displayName = 'CarouselItem';
+
+export const CarouselPrevious = React.forwardRef<React.ElementRef<typeof Button>, CarouselPreviousBaseProps>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant as React.ComponentProps<typeof Button>['variant']}
+        size={size as React.ComponentProps<typeof Button>['size']}
+        className={cn(
+          'absolute h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? 'top-1/2 -left-12 -translate-y-1/2'
+            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onPress={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="text-foreground h-4 w-4" size={16} />
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = 'CarouselPrevious';
+
+export const CarouselNext = React.forwardRef<React.ElementRef<typeof Button>, CarouselNextBaseProps>(
+  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant as React.ComponentProps<typeof Button>['variant']}
+        size={size as React.ComponentProps<typeof Button>['size']}
+        className={cn(
+          'absolute h-8 w-8 rounded-full',
+          orientation === 'horizontal'
+            ? 'top-1/2 -right-12 -translate-y-1/2'
+            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+          className,
+        )}
+        disabled={!canScrollNext}
+        onPress={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="text-foreground h-4 w-4" size={16} />
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = 'CarouselNext';

package/src/dropdown-menu.tsx

@@ -77,10 +77,11 @@ DropdownMenuContent.displayName = 'DropdownMenuContent';
 export const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   DropdownMenuItemBaseProps
->(({ className, children, inset, ...props }, ref) => {
+>(({ className, children, inset, onSelect, ...props }, ref) => {
   return (
     <DropdownMenuPrimitive.Item
       ref={ref}
+      onPress={() => onSelect?.(new Event('select'))}
       className={cn(
         'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none',
         inset && 'pl-8',

package/src/form.tsx

@@ -1,9 +1,171 @@
+import * as React from 'react';
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from 'react-hook-form';
 import { Text, View } from 'react-native';
 
-export const Form = () => {
+import {
+  FormControlBaseProps,
+  FormDescriptionBaseProps,
+  FormItemBaseProps,
+  FormLabelBaseProps,
+  FormMessageBaseProps,
+} from '@gv-tech/ui-core';
+import { Label } from './label';
+import { cn } from './lib/utils';
+// Assuming we have Slot from @rn-primitives/slot
+import * as Slot from '@rn-primitives/slot';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  if (!itemContext) {
+    throw new Error('useFormField should be used within <FormItem>');
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+const FormItem = React.forwardRef<
+  React.ElementRef<typeof View>,
+  React.ComponentPropsWithoutRef<typeof View> & FormItemBaseProps
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <View ref={ref} className={cn('space-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label> & FormLabelBaseProps
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && 'text-destructive', className)} nativeID={formItemId} {...props} />;
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot.Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot.Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot.Slot
+      ref={ref}
+      nativeID={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & FormDescriptionBaseProps
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
   return (
-    <View>
-      <Text>form is not yet implemented for React Native</Text>
-    </View>
+    <Text
+      ref={ref}
+      nativeID={formDescriptionId}
+      className={cn('text-muted-foreground text-[13px]', className)}
+      {...props}
+    />
   );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  React.ComponentPropsWithoutRef<typeof Text> & FormMessageBaseProps
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? '') : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <Text
+      ref={ref}
+      nativeID={formMessageId}
+      className={cn('text-destructive text-[13px] font-medium', className)}
+      {...props}
+    >
+      {body}
+    </Text>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+export type {
+  FormControlBaseProps as FormControlProps,
+  FormDescriptionBaseProps as FormDescriptionProps,
+  FormItemBaseProps as FormItemProps,
+  FormLabelBaseProps as FormLabelProps,
+  FormMessageBaseProps as FormMessageProps,
 };

package/src/hooks/use-theme.ts

@@ -0,0 +1,18 @@
+import { theme as designTokens } from '@gv-tech/design-tokens';
+import { useColorScheme } from 'nativewind';
+
+export function useTheme() {
+  const { colorScheme, setColorScheme } = useColorScheme();
+
+  const resolvedTheme = colorScheme as 'light' | 'dark';
+
+  // Default to light theme tokens if resolvedTheme is dark or invalid
+  const activeTokens = resolvedTheme === 'dark' ? designTokens.dark : designTokens.light;
+
+  return {
+    theme: colorScheme,
+    setTheme: setColorScheme,
+    resolvedTheme,
+    tokens: activeTokens,
+  };
+}

package/src/index.ts

@@ -314,6 +314,7 @@ export type { ToastProps } from './toast';
 export { ThemeProvider } from './theme-provider';
 
 // Theme Toggle
+export { useTheme } from './hooks/use-theme';
 export { ThemeToggle } from './theme-toggle';
 
 // Toaster

package/src/scroll-area.tsx

@@ -9,8 +9,8 @@ export const ScrollArea = React.forwardRef<ScrollView, ScrollAreaBaseProps>(
       <ScrollView
         ref={ref}
         className={cn('flex-1', className)}
-        showsVerticalScrollIndicator={false}
-        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={true}
+        showsHorizontalScrollIndicator={true}
         {...props}
       >
         <View>{children}</View>
@@ -21,6 +21,8 @@ export const ScrollArea = React.forwardRef<ScrollView, ScrollAreaBaseProps>(
 ScrollArea.displayName = 'ScrollArea';
 
 export const ScrollBar: React.FC<ScrollBarBaseProps> = () => {
+  // Natively, we rely on the ScrollView's built-in indicators.
+  // This component is a no-op shim for contract compatibility.
   return null;
 };
 ScrollBar.displayName = 'ScrollBar';

package/src/search.tsx

@@ -1,17 +1,79 @@
-import { Text, View } from 'react-native';
+import { SearchBaseProps, SearchTriggerBaseProps } from '@gv-tech/ui-core';
+import { Search as SearchIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, Text, View } from 'react-native';
+import { Button } from './button';
+import { Dialog } from './dialog';
+import { cn } from './lib/utils';
 
-export const Search = () => {
-  return (
-    <View>
-      <Text>Search is not yet implemented for React Native</Text>
-    </View>
+export type SearchProps = SearchBaseProps;
+
+export function Search({ children, open: customOpen, onOpenChange }: SearchProps) {
+  const [open, setOpen] = React.useState(false);
+  const isControlled = customOpen !== undefined;
+  const isOpen = isControlled ? (customOpen as boolean) : open;
+
+  const setIsOpen = React.useCallback(
+    (value: boolean) => {
+      if (isControlled) {
+        onOpenChange?.(value);
+      } else {
+        setOpen(value);
+      }
+    },
+    [isControlled, onOpenChange],
   );
-};
 
-export const SearchTrigger = () => {
   return (
-    <View>
-      <Text>SearchTrigger is not yet implemented for React Native</Text>
-    </View>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      {children}
+    </Dialog>
   );
-};
+}
+
+export interface SearchTriggerProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Button>, 'variant'>, SearchTriggerBaseProps {}
+
+export const SearchTrigger = React.forwardRef<React.ElementRef<typeof Button>, SearchTriggerProps>(
+  ({ className, placeholder, variant = 'default', responsive = false, ...props }, ref) => {
+    const defaultPlaceholder = variant === 'compact' ? 'Search...' : 'Search docs...';
+    const activePlaceholder = placeholder || defaultPlaceholder;
+
+    return (
+      <Button
+        variant="outline"
+        className={cn(
+          'relative h-12 flex-row justify-start pl-3 text-sm transition-all sm:h-9',
+          variant === 'default'
+            ? 'w-full pr-12'
+            : cn('w-12 px-0 sm:w-9 sm:justify-center', responsive && 'md:w-48 md:justify-start md:px-3 md:pr-12'),
+          className,
+        )}
+        ref={ref}
+        {...props}
+      >
+        <View className="flex-row items-center gap-2">
+          <SearchIcon className="text-muted-foreground shrink-0" size={18} />
+          <Text
+            className={cn(
+              'text-muted-foreground truncate',
+              variant === 'compact' && (responsive ? 'hidden md:flex' : 'hidden'),
+            )}
+          >
+            {activePlaceholder}
+          </Text>
+        </View>
+        <View
+          className={cn(
+            'bg-muted absolute top-2 right-2 hidden h-6 flex-row items-center gap-1 rounded border px-1.5 opacity-100',
+            variant === 'default' && Platform.OS !== 'android' && Platform.OS !== 'ios' && 'sm:flex',
+            variant === 'compact' && responsive && Platform.OS !== 'android' && Platform.OS !== 'ios' && 'md:flex',
+          )}
+        >
+          <Text className="text-muted-foreground font-mono text-[10px] font-medium">⌘K</Text>
+        </View>
+      </Button>
+    );
+  },
+);
+SearchTrigger.displayName = 'SearchTrigger';

package/src/sonner.tsx

@@ -1,7 +1,11 @@
 import type { SonnerBaseProps } from '@gv-tech/ui-core';
 import * as React from 'react';
-import { View } from 'react-native';
+import { ToastProvider, ToastViewport } from './toast';
 
-export const Toaster: React.FC<SonnerBaseProps> = ({ className }) => {
-  return <View className={className} />;
+export const Toaster: React.FC<SonnerBaseProps> = () => {
+  return (
+    <ToastProvider>
+      <ToastViewport />
+    </ToastProvider>
+  );
 };

package/src/theme-toggle.tsx

@@ -1,28 +1,29 @@
 import { ThemeToggleBaseProps } from '@gv-tech/ui-core';
 import { Moon, Sun, SunMoon } from 'lucide-react-native';
-import { useColorScheme } from 'nativewind';
 import { View } from 'react-native';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu';
+import { useTheme } from './hooks/use-theme';
 import { cn } from './lib/utils';
 import { Text } from './text';
 
 export type ThemeToggleProps = ThemeToggleBaseProps;
 
 export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
-  const { colorScheme, setColorScheme } = useColorScheme();
+  const { theme, setTheme, resolvedTheme } = useTheme();
 
-  const currentTheme = (customTheme ?? colorScheme) as 'light' | 'dark' | 'system';
+  const currentTheme = (customTheme ?? theme) as 'light' | 'dark' | 'system';
 
-  // Determine if dark based on currentTheme
-  const isDark = currentTheme === 'dark';
+  // Determine the effective theme for icon rendering
+  const effectiveTheme = customTheme ? customTheme : resolvedTheme;
+  const isDark = effectiveTheme === 'dark';
   const isSystem = currentTheme === 'system';
 
   const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
     if (onThemeChange) {
       onThemeChange(newTheme);
     } else {
-      setColorScheme(newTheme);
+      setTheme(newTheme);
     }
   };
 
@@ -61,15 +62,15 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
-          <DropdownMenuItem onPress={() => handleThemeChange('light')}>
+          <DropdownMenuItem onSelect={() => handleThemeChange('light')}>
             <Sun size={14} className="text-foreground mr-2" />
             <Text>Light</Text>
           </DropdownMenuItem>
-          <DropdownMenuItem onPress={() => handleThemeChange('dark')}>
+          <DropdownMenuItem onSelect={() => handleThemeChange('dark')}>
             <Moon size={14} className="text-foreground mr-2" />
             <Text>Dark</Text>
           </DropdownMenuItem>
-          <DropdownMenuItem onPress={() => handleThemeChange('system')}>
+          <DropdownMenuItem onSelect={() => handleThemeChange('system')}>
             <SunMoon size={14} className="text-foreground mr-2" />
             <Text>System</Text>
           </DropdownMenuItem>