@gv-tech/ui-native 2.25.4 → 2.26.0

package/package.json

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

@@ -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>
   );

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>
     );
@@ -87,9 +88,7 @@ const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.
                   }
                 >
                   <X size={18} className="text-muted-foreground" />
-                  <View className="sr-only">
-                    <DialogPrimitive.Title>Close</DialogPrimitive.Title>
-                  </View>
+                  <Text className="sr-only">Close</Text>
                 </DialogPrimitive.Close>
               </Animated.View>
             </DialogPrimitive.Content>

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

@@ -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);
       }