@gv-tech/ui-native 2.25.3 → 2.26.0

package/package.json

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

package/src/accordion.tsx

@@ -55,7 +55,7 @@ const AccordionTrigger: React.ForwardRefExoticComponent<
     isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 }),
   );
   const chevronStyle = useAnimatedStyle(() => ({
-    transform: [{ rotate: `${progress.value * 180}deg` }],
+    transform: [{ rotate: `${progress.value * -180}deg` }],
     opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP),
   }));
 

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';
@@ -23,7 +23,7 @@ const AlertDialogOverlay: React.ForwardRefExoticComponent<
       <Animated.View
         entering={FadeIn.duration(150)}
         exiting={FadeOut.duration(150)}
-        className={cn('z-50 flex items-center justify-center bg-black/80 p-2', className)}
+        className={cn('z-50 flex items-center justify-center bg-black/60 p-2 backdrop-blur-md', className)}
       />
     </AlertDialogPrimitive.Overlay>
   );
@@ -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

@@ -6,6 +6,7 @@ import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
 import { cn } from './lib/utils';
+import { Text } from './text';
 
 const Dialog = DialogPrimitive.Root;
 
@@ -49,7 +50,7 @@ const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.
         <Animated.View
           entering={FadeIn.duration(150)}
           exiting={FadeOut.duration(150)}
-          className={cn('flex items-center justify-center bg-black/80 p-2', className)}
+          className={cn('flex items-center justify-center bg-black/60 p-2 backdrop-blur-md', className)}
         />
       </DialogPrimitive.Overlay>
     );
@@ -60,63 +61,38 @@ 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" />
+                  <Text className="sr-only">Close</Text>
+                </DialogPrimitive.Close>
+              </Animated.View>
             </DialogPrimitive.Content>
-          </PlatformWrapper>
+          </View>
         </DialogPortal>
       );
     },

package/src/drawer.tsx

@@ -10,13 +10,15 @@ import type {
 } from '@gv-tech/ui-core';
 import * as DialogPrimitive from '@rn-primitives/dialog';
 import * as React from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { Platform, View, type StyleProp, type ViewStyle } from 'react-native';
 import Animated, { FadeIn, FadeOut, SlideInDown, SlideOutDown } from 'react-native-reanimated';
 import { wrapTextChildren } from './lib/render-native';
 import { cn } from './lib/utils';
 
-export const Drawer: React.FC<DrawerBaseProps> = ({ children }) => {
-  return <DialogPrimitive.Root>{children}</DialogPrimitive.Root>;
+export interface DrawerProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, DrawerBaseProps {}
+
+export const Drawer: React.FC<DrawerProps> = ({ children, ...props }) => {
+  return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;
 };
 Drawer.displayName = 'Drawer';
 
@@ -39,13 +41,28 @@ export type DrawerOverlayRef = React.ComponentRef<typeof DialogPrimitive.Overlay
 
 export const DrawerOverlay: React.ForwardRefExoticComponent<
   DrawerOverlayProps & React.RefAttributes<DrawerOverlayRef>
-> = React.forwardRef<DrawerOverlayRef, DrawerOverlayProps>(({ className, ...props }, ref) => {
+> = React.forwardRef<DrawerOverlayRef, DrawerOverlayProps>(({ className, style, ...props }, ref) => {
   return (
-    <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+    <DialogPrimitive.Overlay
+      style={[
+        {
+          position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 50,
+        } as unknown as ViewStyle,
+        style as StyleProp<ViewStyle>,
+      ]}
+      asChild
+      ref={ref}
+      {...props}
+    >
       <Animated.View
         entering={FadeIn.duration(150)}
         exiting={FadeOut.duration(150)}
-        className={cn('z-50 bg-black/80', className)}
+        className={cn('bg-black/80', className)}
       />
     </DialogPrimitive.Overlay>
   );
@@ -68,7 +85,8 @@ export const DrawerContent = React.forwardRef<
           entering={SlideInDown.duration(200)}
           exiting={SlideOutDown.duration(200)}
           className={cn(
-            'border-border bg-background fixed inset-x-0 bottom-0 z-50 flex h-auto flex-col rounded-t-xl border p-6 pb-10 shadow-lg',
+            'border-border bg-background z-50 flex h-auto flex-col rounded-t-xl border p-6 pb-10 shadow-lg',
+            Platform.OS === 'web' ? 'fixed inset-x-0 bottom-0' : 'absolute inset-x-0 bottom-0',
             className,
           )}
         >

package/src/dropdown-menu.tsx

@@ -44,7 +44,7 @@ const DropdownMenuOverlay = React.forwardRef<
       <Animated.View
         entering={FadeIn.duration(100)}
         exiting={FadeOut.duration(100)}
-        className={cn('absolute inset-0 z-50 bg-black/30', className)}
+        className={cn('absolute inset-0 z-50 bg-black/30 backdrop-blur-md', className)}
       />
     </DropdownMenuPrimitive.Overlay>
   );

package/src/sheet.tsx

@@ -2,7 +2,18 @@ import * as DialogPrimitive from '@rn-primitives/dialog';
 import { X } from 'lucide-react-native';
 import * as React from 'react';
 import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
-import Animated, { FadeIn, FadeOut, SlideInRight, SlideOutRight } from 'react-native-reanimated';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInDown,
+  SlideInLeft,
+  SlideInRight,
+  SlideInUp,
+  SlideOutDown,
+  SlideOutLeft,
+  SlideOutRight,
+  SlideOutUp,
+} from 'react-native-reanimated';
 
 import { type DialogContentProps } from './dialog';
 import { cn } from './lib/utils';
@@ -30,7 +41,7 @@ const SheetOverlay: React.ForwardRefExoticComponent<SheetOverlayProps & React.Re
         <Animated.View
           entering={FadeIn.duration(150)}
           exiting={FadeOut.duration(150)}
-          className={cn('web:cursor-default absolute inset-0 z-50 bg-black/80', className)}
+          className={cn('web:cursor-default absolute inset-0 z-50 bg-black/60 backdrop-blur-md', className)}
         />
       </DialogPrimitive.Overlay>
     );
@@ -48,8 +59,26 @@ const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.Re
     ({ className, children, side = 'right', overlayClassName, overlayStyle, ...props }, ref) => {
       const isWeb = Platform.OS === 'web';
       // TODO: Add support for other sides
-      const entering = isWeb ? undefined : SlideInRight;
-      const exiting = isWeb ? undefined : SlideOutRight;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let entering: any = undefined;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let exiting: any = undefined;
+
+      if (!isWeb) {
+        if (side === 'bottom') {
+          entering = SlideInDown;
+          exiting = SlideOutDown;
+        } else if (side === 'top') {
+          entering = SlideInUp;
+          exiting = SlideOutUp;
+        } else if (side === 'left') {
+          entering = SlideInLeft;
+          exiting = SlideOutLeft;
+        } else {
+          entering = SlideInRight;
+          exiting = SlideOutRight;
+        }
+      }
 
       return (
         <SheetPortal>

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';
 
@@ -29,8 +29,7 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
       onThemeChange(newTheme);
     } else {
       if (newTheme === 'system') {
-        // @ts-expect-error React Native Appearance.setColorScheme accepts null to reset to system theme
-        Appearance.setColorScheme(null);
+        Appearance.setColorScheme('unspecified');
       } else {
         Appearance.setColorScheme(newTheme);
       }
@@ -45,7 +44,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 +52,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 +60,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>
   );
@@ -79,15 +78,15 @@ export function ThemeToggle({ variant = 'binary', onThemeChange, customTheme, cl
         </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>