@gv-tech/ui-native 2.21.0 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
   },
   "main": "./dist/ui-native.cjs",
   "module": "./dist/ui-native.mjs",
+  "react-native": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",

package/src/theme-provider.tsx

@@ -1,6 +1,9 @@
+import { useColorScheme } from 'nativewind';
 import * as React from 'react';
 import { View } from 'react-native';
+import { cn } from './lib/utils';
 
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  return <View style={{ flex: 1 }}>{children}</View>;
+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>;
 }

package/src/theme-toggle.tsx

@@ -1,11 +1,91 @@
-import { Text, TouchableOpacity, View } from 'react-native';
+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 { 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 currentTheme = (customTheme ?? colorScheme) as 'light' | 'dark' | 'system';
+
+  // Determine if dark based on currentTheme
+  const isDark = currentTheme === 'dark';
+  const isSystem = currentTheme === 'system';
+
+  const handleThemeChange = (newTheme: 'light' | 'dark' | 'system') => {
+    if (onThemeChange) {
+      onThemeChange(newTheme);
+    } else {
+      setColorScheme(newTheme);
+    }
+  };
+
+  const IconToggle = () => (
+    <View className="flex items-center justify-center">
+      <Sun
+        size={18}
+        className={cn(
+          'text-foreground transition-all',
+          !isSystem && !isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 -rotate-90 opacity-0',
+        )}
+      />
+      <Moon
+        size={18}
+        className={cn(
+          'text-foreground transition-all',
+          !isSystem && isDark ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
+        )}
+      />
+      <SunMoon
+        size={18}
+        className={cn(
+          'text-foreground transition-all',
+          isSystem ? 'scale-100 rotate-0 opacity-100' : 'absolute scale-0 rotate-90 opacity-0',
+        )}
+      />
+    </View>
+  );
+
+  if (variant === 'ternary') {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className={cn('relative h-9 w-9', className)}>
+            <IconToggle />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onPress={() => handleThemeChange('light')}>
+            <Sun size={14} className="text-foreground mr-2" />
+            <Text>Light</Text>
+          </DropdownMenuItem>
+          <DropdownMenuItem onPress={() => handleThemeChange('dark')}>
+            <Moon size={14} className="text-foreground mr-2" />
+            <Text>Dark</Text>
+          </DropdownMenuItem>
+          <DropdownMenuItem onPress={() => handleThemeChange('system')}>
+            <SunMoon size={14} className="text-foreground mr-2" />
+            <Text>System</Text>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
 
-export function ThemeToggle() {
   return (
-    <TouchableOpacity onPress={() => {}}>
-      <View style={{ padding: 10, backgroundColor: '#eee', borderRadius: 5 }}>
-        <Text>Toggle Theme</Text>
-      </View>
-    </TouchableOpacity>
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn('relative h-9 w-9', className)}
+      onPress={() => handleThemeChange(currentTheme === 'dark' ? 'light' : 'dark')}
+    >
+      <IconToggle />
+    </Button>
   );
 }