@gv-tech/ui-native 2.25.1 → 2.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.25.1",
+  "version": "2.25.3",
   "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/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,8 +1,15 @@
 import { theme as designTokens } from '@gv-tech/design-tokens';
-import { useColorScheme } from 'nativewind';
+import * as React from 'react';
+import { useColorScheme } from 'react-native';
+import { ThemeContext } from '../theme-provider';
 
 export function useTheme() {
-  const { colorScheme, setColorScheme } = useColorScheme();
+  const context = React.useContext(ThemeContext);
+  if (context) {
+    return context;
+  }
+
+  const colorScheme = useColorScheme();
 
   const resolvedTheme = colorScheme as 'light' | 'dark';
 
@@ -11,7 +18,6 @@ export function useTheme() {
 
   return {
     theme: colorScheme,
-    setTheme: setColorScheme,
     resolvedTheme,
     tokens: activeTokens,
   };

package/src/theme-provider.tsx

@@ -1,9 +1,48 @@
-import { useColorScheme } from 'nativewind';
+import { theme as designTokens } from '@gv-tech/design-tokens';
 import * as React from 'react';
-import { View } from 'react-native';
+import { useColorScheme, View, ViewProps } from 'react-native';
 import { cn } from './lib/utils';
 
-export function ThemeProvider({ children, className }: { children: React.ReactNode; className?: string }) {
-  const { colorScheme } = useColorScheme();
-  return <View className={cn('flex-1', colorScheme === 'dark' ? 'dark' : '', className)}>{children}</View>;
+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, 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 (
+    <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

@@ -1,6 +1,6 @@
 import { ThemeToggleBaseProps } from '@gv-tech/ui-core';
 import { Moon, Sun, SunMoon } from 'lucide-react-native';
-import { View } from 'react-native';
+import { Appearance, View } from 'react-native';
 import { Button } from './button';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './dropdown-menu';
 import { useTheme } from './hooks/use-theme';
@@ -15,12 +15,12 @@ iconWithClassName(SunMoon);
 export type ThemeToggleProps = ThemeToggleBaseProps;
 
 export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, className }: ThemeToggleProps) {
-  const { theme, setTheme, resolvedTheme } = useTheme();
+  const { theme, resolvedTheme } = useTheme();
 
   const currentTheme = (customTheme ?? theme) as 'light' | 'dark' | 'system';
 
   // Determine the effective theme for icon rendering
-  const effectiveTheme = customTheme ? customTheme : resolvedTheme;
+  const effectiveTheme = customTheme === 'system' || !customTheme ? resolvedTheme : customTheme;
   const isDark = effectiveTheme === 'dark';
   const isSystem = currentTheme === 'system';
 
@@ -28,7 +28,12 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
     if (onThemeChange) {
       onThemeChange(newTheme);
     } else {
-      setTheme(newTheme as 'light' | 'dark');
+      if (newTheme === 'system') {
+        // @ts-expect-error React Native Appearance.setColorScheme accepts null to reset to system theme
+        Appearance.setColorScheme(null);
+      } else {
+        Appearance.setColorScheme(newTheme);
+      }
     }
   };
 
@@ -64,10 +69,13 @@ 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')}>