@gv-tech/ui-native 2.25.2 → 2.25.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.25.2",
+  "version": "2.25.4",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -37,6 +37,7 @@
     "@gv-tech/design-tokens": "^2.12.0",
     "@gv-tech/ui-core": "^2.12.0",
     "@react-native-community/datetimepicker": "^9.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",

package/src/alert-dialog.tsx

@@ -1,6 +1,6 @@
 import * as AlertDialogPrimitive from '@rn-primitives/alert-dialog';
 import * as React from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
 import { buttonVariants } from './button';
@@ -43,16 +43,23 @@ const AlertDialogContent: React.ForwardRefExoticComponent<
   return (
     <AlertDialogPortal hostName={portalHost}>
       <AlertDialogOverlay className={overlayClassName} style={overlayStyle} />
-      <AlertDialogPrimitive.Content ref={ref} asChild {...props}>
-        <Animated.View
-          entering={FadeIn.duration(150)}
-          exiting={FadeOut.duration(150)}
-          className={cn(
-            'border-border bg-background z-50 w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
-            className,
-          )}
-        />
-      </AlertDialogPrimitive.Content>
+      <View
+        pointerEvents="box-none"
+        className={cn('absolute inset-0 z-50 flex items-center justify-center p-4', Platform.OS === 'web' && 'fixed')}
+      >
+        <AlertDialogPrimitive.Content ref={ref} asChild {...props}>
+          <Animated.View
+            entering={FadeIn.duration(150)}
+            exiting={FadeOut.duration(150)}
+            className={cn(
+              'border-border bg-background w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
+              className,
+            )}
+          >
+            {props.children}
+          </Animated.View>
+        </AlertDialogPrimitive.Content>
+      </View>
     </AlertDialogPortal>
   );
 });

package/src/dialog.tsx

@@ -60,63 +60,40 @@ export type DialogContentRef = React.ComponentRef<typeof DialogPrimitive.Content
 const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentRef>> =
   React.forwardRef<DialogContentRef, DialogContentProps>(
     ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
-      const PlatformWrapper = React.useCallback(({ children }: { children: React.ReactNode }) => {
-        if (Platform.OS === 'web') {
-          return <>{children}</>;
-        }
-        return (
-          <View
-            pointerEvents="box-none"
-            style={{
-              position: 'absolute',
-              top: 0,
-              right: 0,
-              bottom: 0,
-              left: 0,
-              zIndex: 50,
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: 16,
-            }}
-          >
-            {children}
-          </View>
-        );
-      }, []);
-
       return (
         <DialogPortal hostName={portalHost}>
           <DialogOverlay className={overlayClassName} style={overlayStyle} />
-          <PlatformWrapper>
-            <DialogPrimitive.Content ref={ref} {...props}>
-              <View
-                pointerEvents="box-none"
-                className="absolute inset-0 z-50 flex items-center justify-center"
-                style={Platform.OS === 'web' ? ({ position: 'fixed' } as unknown as ViewStyle) : undefined}
+          {/* Centering wrapper that is full screen */}
+          <View
+            pointerEvents="box-none"
+            className={cn(
+              'absolute inset-0 z-50 flex items-center justify-center p-4',
+              Platform.OS === 'web' && 'fixed',
+            )}
+          >
+            <DialogPrimitive.Content ref={ref} asChild {...props}>
+              <Animated.View
+                entering={FadeIn.duration(150)}
+                exiting={FadeOut.duration(150)}
+                className={cn(
+                  'border-border bg-background w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
+                  className,
+                )}
               >
-                <Animated.View
-                  entering={FadeIn.duration(150)}
-                  exiting={FadeOut.duration(150)}
-                  className={cn(
-                    'border-border bg-background w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
-                    className,
-                  )}
+                {children}
+                <DialogPrimitive.Close
+                  className={
+                    'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
+                  }
                 >
-                  {children}
-                  <DialogPrimitive.Close
-                    className={
-                      'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none'
-                    }
-                  >
-                    <X size={18} className="text-muted-foreground" />
-                    <View className="sr-only">
-                      <DialogPrimitive.Title>Close</DialogPrimitive.Title>
-                    </View>
-                  </DialogPrimitive.Close>
-                </Animated.View>
-              </View>
+                  <X size={18} className="text-muted-foreground" />
+                  <View className="sr-only">
+                    <DialogPrimitive.Title>Close</DialogPrimitive.Title>
+                  </View>
+                </DialogPrimitive.Close>
+              </Animated.View>
             </DialogPrimitive.Content>
-          </PlatformWrapper>
+          </View>
         </DialogPortal>
       );
     },

package/src/dropdown-menu.tsx

@@ -9,6 +9,7 @@ import type {
   DropdownMenuSubContentBaseProps,
   DropdownMenuSubTriggerBaseProps,
 } from '@gv-tech/ui-core';
+import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as DropdownMenuPrimitive from '@rn-primitives/dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react-native';
 import * as React from 'react';
@@ -78,6 +79,23 @@ export const DropdownMenuItem = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
   DropdownMenuItemBaseProps
 >(({ className, children, inset, onSelect, ...props }, ref) => {
+  if (Platform.OS === 'web') {
+    return (
+      <RadixDropdownMenu.Item
+        ref={ref as React.Ref<HTMLDivElement>}
+        onSelect={onSelect}
+        className={cn(
+          'focus:bg-accent focus:text-accent-foreground active:bg-accent active:text-accent-foreground relative flex cursor-default flex-row items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none',
+          inset && 'pl-8',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </RadixDropdownMenu.Item>
+    );
+  }
+
   return (
     <DropdownMenuPrimitive.Item
       ref={ref}

package/src/hooks/use-theme.ts

@@ -1,7 +1,14 @@
 import { theme as designTokens } from '@gv-tech/design-tokens';
+import * as React from 'react';
 import { useColorScheme } from 'react-native';
+import { ThemeContext } from '../theme-provider';
 
 export function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (context) {
+    return context;
+  }
+
   const colorScheme = useColorScheme();
 
   const resolvedTheme = colorScheme as 'light' | 'dark';

package/src/theme-provider.tsx

@@ -1,24 +1,48 @@
+import { theme as designTokens } from '@gv-tech/design-tokens';
 import * as React from 'react';
-import { View, ViewProps } from 'react-native';
-import { useTheme } from './hooks/use-theme';
+import { useColorScheme, View, ViewProps } from 'react-native';
 import { cn } from './lib/utils';
 
+export interface ThemeContextValue {
+  theme: 'light' | 'dark' | 'system';
+  resolvedTheme: 'light' | 'dark';
+  tokens: typeof designTokens.light | typeof designTokens.dark;
+}
+
+export const ThemeContext = React.createContext<ThemeContextValue | null>(null);
+
 export interface ThemeProviderProps extends ViewProps {
   children: React.ReactNode;
+  value?: 'light' | 'dark' | 'system';
   [key: string]: unknown;
 }
 
-export function ThemeProvider({ children, className, style, ...props }: ThemeProviderProps) {
-  const { theme, tokens } = useTheme();
-  const isDark = theme === 'dark';
+export function ThemeProvider({ children, className, style, value, ...props }: ThemeProviderProps) {
+  const systemScheme = useColorScheme();
+  const theme = value || 'system';
+  const resolvedTheme = theme === 'system' ? (systemScheme === 'dark' ? 'dark' : 'light') : theme;
+  const tokens = resolvedTheme === 'dark' ? designTokens.dark : designTokens.light;
+
+  const isDark = resolvedTheme === 'dark';
+
+  const contextValue = React.useMemo<ThemeContextValue>(
+    () => ({
+      theme,
+      resolvedTheme,
+      tokens,
+    }),
+    [theme, resolvedTheme, tokens],
+  );
 
   return (
-    <View
-      className={cn('flex-1', isDark ? 'dark' : '', className)}
-      style={[{ backgroundColor: tokens.background }, style]}
-      {...props}
-    >
-      {children}
-    </View>
+    <ThemeContext.Provider value={contextValue}>
+      <View
+        className={cn('flex-1', isDark ? 'dark' : '', className)}
+        style={[{ backgroundColor: tokens.background }, style]}
+        {...props}
+      >
+        {children}
+      </View>
+    </ThemeContext.Provider>
   );
 }

package/src/theme-toggle.tsx

@@ -15,7 +15,7 @@ iconWithClassName(SunMoon);
 export type ThemeToggleProps = ThemeToggleBaseProps;
 
 export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
-  const { theme, resolvedTheme } = useTheme();
+  const { theme, resolvedTheme, tokens } = useTheme();
 
   const currentTheme = (customTheme ?? theme) as 'light' | 'dark' | 'system';
 
@@ -45,7 +45,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
           !isSystem && !isDark ? 'rotate-0 opacity-100' : 'absolute -rotate-90 opacity-0',
         )}
       >
-        <Sun size={18} className="text-foreground" />
+        <Sun size={18} color={tokens.foreground} />
       </View>
       <View
         className={cn(
@@ -53,7 +53,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
           !isSystem && isDark ? 'rotate-0 opacity-100' : 'absolute rotate-90 opacity-0',
         )}
       >
-        <Moon size={18} className="text-foreground" />
+        <Moon size={18} color={tokens.foreground} />
       </View>
       <View
         className={cn(
@@ -61,7 +61,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
           isSystem ? 'rotate-0 opacity-100' : 'absolute rotate-90 opacity-0',
         )}
       >
-        <SunMoon size={18} className="text-foreground" />
+        <SunMoon size={18} color={tokens.foreground} />
       </View>
     </View>
   );
@@ -69,22 +69,25 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
   if (variant === 'ternary') {
     return (
       <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" size="icon" className={cn('relative h-9 w-9', className)}>
-            <IconToggle />
-          </Button>
+        <DropdownMenuTrigger
+          className={cn(
+            'relative h-9 w-9 flex-row items-center justify-center rounded-md bg-transparent transition-colors active:opacity-80',
+            className,
+          )}
+        >
+          <IconToggle />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
           <DropdownMenuItem onSelect={() => handleThemeChange('light')}>
-            <Sun size={14} className="text-foreground mr-2" />
+            <Sun size={14} color={tokens.foreground} className="mr-2" />
             <Text>Light</Text>
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => handleThemeChange('dark')}>
-            <Moon size={14} className="text-foreground mr-2" />
+            <Moon size={14} color={tokens.foreground} className="mr-2" />
             <Text>Dark</Text>
           </DropdownMenuItem>
           <DropdownMenuItem onSelect={() => handleThemeChange('system')}>
-            <SunMoon size={14} className="text-foreground mr-2" />
+            <SunMoon size={14} color={tokens.foreground} className="mr-2" />
             <Text>System</Text>
           </DropdownMenuItem>
         </DropdownMenuContent>