@gv-tech/ui-native 2.25.2 → 2.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.25.2",
+  "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,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

@@ -69,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')}>