@gv-tech/ui-native 2.22.0 → 2.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.22.0",
+  "version": "2.22.1",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",

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/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/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>