@gv-tech/ui-native 2.6.0 → 2.10.0

package/README.md

@@ -0,0 +1,19 @@
+# @gv-tech/ui-native
+
+React Native implementations of the GV Tech design system components, optimized for Expo and mobile platforms. Built with NativeWind and React Native Primitives.
+
+## Installation
+
+```bash
+yarn add @gv-tech/ui-native
+```
+
+## Features
+
+- **Mobile First**: Components tailored for touch interactions and native mobile patterns.
+- **NativeWind**: Styled with a powerful Tailwind-like engine for React Native.
+- **Consistent**: Follows the same API contracts as `@gv-tech/ui-web`.
+
+---
+
+This is a sub-package of the [GV Tech Design System](https://github.com/Garcia-Ventures/gvtech-design).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gv-tech/ui-native",
-  "version": "2.6.0",
+  "version": "2.10.0",
   "description": "React Native implementations of the GV Tech design system components",
   "repository": {
     "type": "git",
@@ -19,22 +19,24 @@
       "default": "./src/*/index.ts"
     }
   },
-  "main": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "files": [
+    "dist",
     "src",
     "!src/**/*.test.*",
     "!src/**/*.spec.*"
   ],
   "scripts": {
-    "build": "echo 'No build step — consumed as TS source by sibling packages'",
+    "build": "vite build",
     "lint": "echo 'Linted from workspace root'",
     "test": "vitest run",
     "typecheck": "npx tsc --noEmit"
   },
   "dependencies": {
-    "@gv-tech/design-tokens": "2.6.0",
-    "@gv-tech/ui-core": "2.6.0",
+    "@gv-tech/design-tokens": "workspace:*",
+    "@gv-tech/ui-core": "workspace:*",
     "@rn-primitives/accordion": "^1.2.0",
     "@rn-primitives/alert-dialog": "^1.2.0",
     "@rn-primitives/aspect-ratio": "^1.2.0",
@@ -75,6 +77,7 @@
     "react-native": ">=0.72"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   }
 }

package/src/accordion.tsx

@@ -12,7 +12,9 @@ import Animated, {
 
 import { cn } from './lib/utils';
 
-const Accordion = React.forwardRef<
+const Accordion: React.ForwardRefExoticComponent<
+  AccordionProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Root>>
+> = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>
 >(({ className, ...props }, ref) => {
@@ -20,17 +22,21 @@ const Accordion = React.forwardRef<
 });
 Accordion.displayName = AccordionPrimitive.Root?.displayName || 'Accordion';
 
-const AccordionItem = React.forwardRef<
+const AccordionItem: React.ForwardRefExoticComponent<
+  AccordionItemProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Item>>
+> = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => {
   return (
-    <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border overflow-hidden', className)} {...props} />
+    <AccordionPrimitive.Item ref={ref} className={cn('border-border overflow-hidden border-b', className)} {...props} />
   );
 });
 AccordionItem.displayName = AccordionPrimitive.Item?.displayName || 'AccordionItem';
 
-const AccordionHeader = React.forwardRef<
+const AccordionHeader: React.ForwardRefExoticComponent<
+  AccordionHeaderProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Header>>
+> = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Header>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>
 >(({ className, ...props }, ref) => {
@@ -38,7 +44,9 @@ const AccordionHeader = React.forwardRef<
 });
 AccordionHeader.displayName = AccordionPrimitive.Header?.displayName || 'AccordionHeader';
 
-const AccordionTrigger = React.forwardRef<
+const AccordionTrigger: React.ForwardRefExoticComponent<
+  AccordionTriggerProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Trigger>>
+> = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => {
@@ -63,7 +71,7 @@ const AccordionTrigger = React.forwardRef<
       >
         <>{children}</>
         <Animated.View style={chevronStyle}>
-          <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+          <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
         </Animated.View>
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
@@ -71,7 +79,9 @@ const AccordionTrigger = React.forwardRef<
 });
 AccordionTrigger.displayName = AccordionPrimitive.Trigger?.displayName || 'AccordionTrigger';
 
-const AccordionContent = React.forwardRef<
+const AccordionContent: React.ForwardRefExoticComponent<
+  AccordionContentProps & React.RefAttributes<React.ElementRef<typeof AccordionPrimitive.Content>>
+> = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => {
@@ -79,15 +89,20 @@ const AccordionContent = React.forwardRef<
     <AccordionPrimitive.Content
       ref={ref}
       className={cn(
-        'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
+        'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all',
         className,
       )}
       {...props}
     >
-      <View className={cn('pb-4 pt-0', className)}>{children}</View>
+      <View className={cn('pt-0 pb-4', className)}>{children}</View>
     </AccordionPrimitive.Content>
   );
 });
 AccordionContent.displayName = AccordionPrimitive.Content?.displayName || 'AccordionContent';
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>;
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>;
+export type AccordionHeaderProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Header>;
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>;
+export type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>;

package/src/alert-dialog.tsx

@@ -12,7 +12,9 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = React.forwardRef<
+const AlertDialogOverlay: React.ForwardRefExoticComponent<
+  AlertDialogOverlayProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Overlay>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => {
@@ -21,14 +23,16 @@ const AlertDialogOverlay = React.forwardRef<
       <Animated.View
         entering={FadeIn.duration(150)}
         exiting={FadeOut.duration(150)}
-        className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
+        className={cn('z-50 flex items-center justify-center bg-black/80 p-2', className)}
       />
     </AlertDialogPrimitive.Overlay>
   );
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay?.displayName || 'AlertDialogOverlay';
 
-const AlertDialogContent = React.forwardRef<
+const AlertDialogContent: React.ForwardRefExoticComponent<
+  AlertDialogContentProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Content>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
     portalHost?: string;
@@ -44,7 +48,7 @@ const AlertDialogContent = React.forwardRef<
           entering={FadeIn.duration(150)}
           exiting={FadeOut.duration(150)}
           className={cn(
-            'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg w-full rounded-xl',
+            'border-border bg-background z-50 w-full max-w-lg gap-4 rounded-xl border p-6 shadow-lg sm:rounded-lg',
             className,
           )}
         />
@@ -60,35 +64,41 @@ const AlertDialogHeader = ({ className, ...props }: React.ComponentPropsWithoutR
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
 const AlertDialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
-  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)} {...props} />
+  <View className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
 );
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
-const AlertDialogTitle = React.forwardRef<
+const AlertDialogTitle: React.ForwardRefExoticComponent<
+  AlertDialogTitleProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Title>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn('text-lg native:text-xl font-semibold text-foreground', className)}
+    className={cn('native:text-xl text-foreground text-lg font-semibold', className)}
     {...props}
   />
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title?.displayName || 'AlertDialogTitle';
 
-const AlertDialogDescription = React.forwardRef<
+const AlertDialogDescription: React.ForwardRefExoticComponent<
+  AlertDialogDescriptionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Description>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm native:text-base text-muted-foreground', className)}
+    className={cn('native:text-base text-muted-foreground text-sm', className)}
     {...props}
   />
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description?.displayName || 'AlertDialogDescription';
 
-const AlertDialogAction = React.forwardRef<
+const AlertDialogAction: React.ForwardRefExoticComponent<
+  AlertDialogActionProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Action>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
@@ -96,7 +106,9 @@ const AlertDialogAction = React.forwardRef<
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action?.displayName || 'AlertDialogAction';
 
-const AlertDialogCancel = React.forwardRef<
+const AlertDialogCancel: React.ForwardRefExoticComponent<
+  AlertDialogCancelProps & React.RefAttributes<React.ElementRef<typeof AlertDialogPrimitive.Cancel>>
+> = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
@@ -121,3 +133,16 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
 };
+
+export type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
+export type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+  portalHost?: string;
+  overlayClassName?: string;
+  overlayStyle?: ViewStyle;
+};
+export type AlertDialogHeaderProps = React.ComponentPropsWithoutRef<typeof View>;
+export type AlertDialogFooterProps = React.ComponentPropsWithoutRef<typeof View>;
+export type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
+export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
+export type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
+export type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;

package/src/alert.tsx

@@ -33,7 +33,7 @@ const AlertTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Compone
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
-      className={cn('mb-1 font-medium leading-none tracking-tight text-foreground', className)}
+      className={cn('text-foreground mb-1 leading-none font-medium tracking-tight', className)}
       {...props}
     />
   ),
@@ -42,7 +42,7 @@ AlertTitle.displayName = 'AlertTitle';
 
 const AlertDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
-    <Text ref={ref} className={cn('text-sm text-muted-foreground leading-relaxed', className)} {...props} />
+    <Text ref={ref} className={cn('text-muted-foreground text-sm leading-relaxed', className)} {...props} />
   ),
 );
 AlertDescription.displayName = 'AlertDescription';

package/src/avatar.tsx

@@ -3,7 +3,9 @@ import * as React from 'react';
 
 import { cn } from './lib/utils';
 
-const Avatar = React.forwardRef<
+const Avatar: React.ForwardRefExoticComponent<
+  AvatarProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Root>>
+> = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
@@ -15,7 +17,9 @@ const Avatar = React.forwardRef<
 ));
 Avatar.displayName = AvatarPrimitive.Root?.displayName || 'Avatar';
 
-const AvatarImage = React.forwardRef<
+const AvatarImage: React.ForwardRefExoticComponent<
+  AvatarImageProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Image>>
+> = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
@@ -23,16 +27,22 @@ const AvatarImage = React.forwardRef<
 ));
 AvatarImage.displayName = AvatarPrimitive.Image?.displayName || 'AvatarImage';
 
-const AvatarFallback = React.forwardRef<
+const AvatarFallback: React.ForwardRefExoticComponent<
+  AvatarFallbackProps & React.RefAttributes<React.ElementRef<typeof AvatarPrimitive.Fallback>>
+> = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
-    className={cn('flex h-full w-full items-center justify-center rounded-full bg-muted', className)}
+    className={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
     {...props}
   />
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback?.displayName || 'AvatarFallback';
 
 export { Avatar, AvatarFallback, AvatarImage };
+
+export type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
+export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;

package/src/card.tsx

@@ -8,7 +8,7 @@ import { cn } from './lib/utils';
 export interface CardProps extends React.ComponentPropsWithoutRef<typeof View>, CardBaseProps {}
 
 const Card = React.forwardRef<React.ElementRef<typeof View>, CardProps>(({ className, ...props }, ref) => (
-  <View ref={ref} className={cn('rounded-xl border border-border bg-card shadow-sm', className)} {...props} />
+  <View ref={ref} className={cn('border-border bg-card rounded-xl border shadow-sm', className)} {...props} />
 ));
 Card.displayName = 'Card';
 
@@ -23,7 +23,7 @@ const CardTitle = React.forwardRef<React.ElementRef<typeof Text>, React.Componen
   ({ className, ...props }, ref) => (
     <Text
       ref={ref}
-      className={cn('font-semibold leading-none tracking-tight text-card-foreground text-lg', className)}
+      className={cn('text-card-foreground text-lg leading-none font-semibold tracking-tight', className)}
       {...props}
     />
   ),
@@ -32,7 +32,7 @@ CardTitle.displayName = 'CardTitle';
 
 const CardDescription = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
-    <Text ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+    <Text ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
   ),
 );
 CardDescription.displayName = 'CardDescription';

package/src/checkbox.tsx

@@ -13,13 +13,13 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        'web:peer h-4 w-4 native:h-[20] native:w-[20] shrink-0 rounded-sm native:rounded border border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'web:peer native:h-[20] native:w-[20] native:rounded border-primary web:ring-offset-background web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 h-4 w-4 shrink-0 rounded-sm border disabled:cursor-not-allowed disabled:opacity-50',
         props.checked && 'bg-primary',
         className,
       )}
       {...props}
     >
-      <CheckboxPrimitive.Indicator className={cn('items-center justify-center h-full w-full')}>
+      <CheckboxPrimitive.Indicator className={cn('h-full w-full items-center justify-center')}>
         <Check size={12} strokeWidth={Platform.OS === 'web' ? 2.5 : 3.5} className="text-primary-foreground" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>

package/src/collapsible.tsx

@@ -1,11 +1,11 @@
 import { CollapsibleBaseProps, CollapsibleContentBaseProps, CollapsibleTriggerBaseProps } from '@gv-tech/ui-core';
 import * as CollapsiblePrimitive from '@rn-primitives/collapsible';
 
-const Collapsible = CollapsiblePrimitive.Root;
+const Collapsible: typeof CollapsiblePrimitive.Root = CollapsiblePrimitive.Root;
 
-const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+const CollapsibleTrigger: typeof CollapsiblePrimitive.Trigger = CollapsiblePrimitive.Trigger;
 
-const CollapsibleContent = CollapsiblePrimitive.Content;
+const CollapsibleContent: typeof CollapsiblePrimitive.Content = CollapsiblePrimitive.Content;
 
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
 export type {

package/src/dialog.tsx

@@ -24,53 +24,56 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => {
-  return (
-    <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
-      <Animated.View
-        entering={FadeIn.duration(150)}
-        exiting={FadeOut.duration(150)}
-        className={cn('z-50 bg-black/80 flex justify-center items-center p-2', className)}
-      />
-    </DialogPrimitive.Overlay>
-  );
-});
-DialogOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'DialogOverlay';
+export type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+export type DialogOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
 
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-  ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+const DialogOverlay: React.ForwardRefExoticComponent<DialogOverlayProps & React.RefAttributes<DialogOverlayRef>> =
+  React.forwardRef<DialogOverlayRef, DialogOverlayProps>(({ className, ...props }, ref) => {
     return (
-      <DialogPortal hostName={portalHost}>
-        <DialogOverlay className={overlayClassName} style={overlayStyle} />
-        <DialogPrimitive.Content ref={ref} asChild {...props}>
-          <Animated.View
-            entering={FadeIn.duration(150)}
-            exiting={FadeOut.duration(150)}
-            className={cn(
-              'z-50 max-w-lg gap-4 border border-border bg-background p-6 shadow-lg sm:rounded-lg w-full rounded-xl',
-              className,
-            )}
-          >
-            {children}
-            <DialogPrimitive.Close
-              className={
-                'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'
-              }
-            >
-              <X size={18} className="text-muted-foreground" />
-              <View className="sr-only">
-                <DialogPrimitive.Title>Close</DialogPrimitive.Title>
-              </View>
-            </DialogPrimitive.Close>
-          </Animated.View>
-        </DialogPrimitive.Content>
-      </DialogPortal>
+      <DialogPrimitive.Overlay style={StyleSheet.absoluteFill} asChild ref={ref} {...props}>
+        <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)}
+        />
+      </DialogPrimitive.Overlay>
     );
-  },
-);
+  });
+DialogOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'DialogOverlay';
+
+export type DialogContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
+const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<DialogContentRef>> =
+  React.forwardRef<DialogContentRef, DialogContentProps>(
+    ({ className, children, portalHost, overlayClassName, overlayStyle, ...props }, ref) => {
+      return (
+        <DialogPortal hostName={portalHost}>
+          <DialogOverlay className={overlayClassName} style={overlayStyle} />
+          <DialogPrimitive.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,
+              )}
+            >
+              {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>
+          </DialogPrimitive.Content>
+        </DialogPortal>
+      );
+    },
+  );
 DialogContent.displayName = DialogPrimitive.Content?.displayName || 'DialogContent';
 
 const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
@@ -79,29 +82,30 @@ const DialogHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<ty
 DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
-  <View className={cn('flex flex-col-reverse sm:flex-row sm:justify-end gap-2', className)} {...props} />
+  <View className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
 );
 DialogFooter.displayName = 'DialogFooter';
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('text-lg native:text-xl font-semibold leading-none tracking-tight text-foreground', className)}
-    {...props}
-  />
-));
+export type DialogTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
+export type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+const DialogTitle: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<DialogTitleRef>> =
+  React.forwardRef<DialogTitleRef, DialogTitleProps>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn('native:text-xl text-foreground text-lg leading-none font-semibold tracking-tight', className)}
+      {...props}
+    />
+  ));
 DialogTitle.displayName = DialogPrimitive.Title?.displayName || 'DialogTitle';
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+export type DialogDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
+export type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+const DialogDescription: React.ForwardRefExoticComponent<
+  DialogDescriptionProps & React.RefAttributes<DialogDescriptionRef>
+> = React.forwardRef<DialogDescriptionRef, DialogDescriptionProps>(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm native:text-base text-muted-foreground', className)}
+    className={cn('native:text-base text-muted-foreground text-sm', className)}
     {...props}
   />
 ));

package/src/input.tsx

@@ -12,7 +12,7 @@ const Input = React.forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
       <TextInput
         ref={ref}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus:border-ring disabled:opacity-50',
+          'border-input text-foreground placeholder:text-muted-foreground focus:border-ring flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-sm transition-colors disabled:opacity-50',
           className,
         )}
         placeholderClassName={cn('text-muted-foreground', placeholderClassName)}

package/src/label.tsx

@@ -17,7 +17,7 @@ const Label = React.forwardRef<
     <LabelPrimitive.Text
       ref={ref}
       className={cn(
-        'text-sm text-foreground native:text-base font-medium leading-none web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70',
+        'text-foreground native:text-base web:peer-disabled:cursor-not-allowed web:peer-disabled:opacity-70 text-sm leading-none font-medium',
         className,
       )}
       {...props}

package/src/radio-group.tsx

@@ -24,7 +24,7 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
       <RadioGroupPrimitive.Item
         ref={ref}
         className={cn(
-          'aspect-square h-4 w-4 native:h-5 native:w-5 rounded-full border border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+          'native:h-5 native:w-5 border-primary text-primary web:ring-offset-background web:focus:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 aspect-square h-4 w-4 rounded-full border',
           props.disabled && 'web:cursor-not-allowed opacity-50',
           className,
         )}

package/src/select.tsx

@@ -48,7 +48,7 @@ const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.T
     <SelectPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-row h-10 native:h-12 items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-muted-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 [&>span]:line-clamp-1',
+        'native:h-12 border-input bg-background text-muted-foreground web:ring-offset-background web:focus:outline-none web:focus:ring-2 web:focus:ring-ring web:focus:ring-offset-2 flex h-10 flex-row items-center justify-between rounded-md border px-3 py-2 text-sm [&>span]:line-clamp-1',
         props.disabled && 'web:cursor-not-allowed opacity-50',
         className,
       )}
@@ -121,7 +121,7 @@ const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.C
         <SelectPrimitive.Content
           ref={ref}
           className={cn(
-            'relative z-50 max-h-96 min-w-[8rem] rounded-md border border-border bg-popover shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'border-border bg-popover data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] rounded-md border shadow-md',
             position === 'popper' &&
               'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
             open ? 'web:zoom-in-95 web:animate-in web:fade-in-0' : 'web:zoom-out-95 web:animate-out web:fade-out-0',
@@ -155,7 +155,7 @@ const SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Lab
   ({ className, ...props }, ref) => (
     <SelectPrimitive.Label
       ref={ref}
-      className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold text-popover-foreground', className)}
+      className={cn('text-popover-foreground py-1.5 pr-2 pl-8 text-sm font-semibold', className)}
       {...props}
     />
   ),
@@ -177,7 +177,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
         ref={ref}
         label={itemLabel}
         className={cn(
-          'relative flex w-full cursor-default select-none flex-row items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none web:hover:bg-accent/50 web:focus:bg-accent web:focus:text-accent-foreground web:hover:text-accent-foreground data-[disabled]:opacity-50',
+          'web:hover:bg-accent/50 web:focus:bg-accent web:focus:text-accent-foreground web:hover:text-accent-foreground relative flex w-full cursor-default flex-row items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none select-none data-[disabled]:opacity-50',
           props.disabled && 'web:pointer-events-none',
           className,
         )}
@@ -192,7 +192,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
           </SelectPrimitive.ItemIndicator>
         </View>
         {/* @ts-expect-error TODO: fix type */}
-        <SelectPrimitive.ItemText className="text-sm text-popover-foreground native:text-base">
+        <SelectPrimitive.ItemText className="text-popover-foreground native:text-base text-sm">
           {children}
         </SelectPrimitive.ItemText>
       </SelectPrimitive.Item>
@@ -208,7 +208,7 @@ const SelectSeparator = React.forwardRef<React.ElementRef<typeof SelectPrimitive
   ({ className, ...props }, ref) => (
     <SelectPrimitive.Separator
       ref={ref}
-      className={cn('-mx-1 my-1 h-px bg-muted', className)}
+      className={cn('bg-muted -mx-1 my-1 h-px', className)}
       {...(props as Record<string, unknown>)}
     />
   ),

package/src/separator.tsx

@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
     ref={ref}
     decorative={decorative}
     orientation={orientation}
-    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    className={cn('bg-border shrink-0', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
     {...props}
   />
 ));

package/src/sheet.tsx

@@ -16,75 +16,77 @@ const SheetClose = DialogPrimitive.Close;
 
 const SheetPortal = DialogPrimitive.Portal;
 
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => {
-  return (
-    <DialogPrimitive.Overlay
-      style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
-      asChild
-      ref={ref}
-      {...props}
-    >
-      <Animated.View
-        entering={FadeIn.duration(150)}
-        exiting={FadeOut.duration(150)}
-        className={cn('absolute inset-0 z-50 bg-black/80  web:cursor-default', className)}
-      />
-    </DialogPrimitive.Overlay>
-  );
-});
+export type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+export type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+const SheetOverlay: React.ForwardRefExoticComponent<SheetOverlayProps & React.RefAttributes<SheetOverlayRef>> =
+  React.forwardRef<SheetOverlayRef, SheetOverlayProps>(({ className, ...props }, ref) => {
+    return (
+      <DialogPrimitive.Overlay
+        style={Platform.OS !== 'web' ? StyleSheet.absoluteFill : undefined}
+        asChild
+        ref={ref}
+        {...props}
+      >
+        <Animated.View
+          entering={FadeIn.duration(150)}
+          exiting={FadeOut.duration(150)}
+          className={cn('web:cursor-default absolute inset-0 z-50 bg-black/80', className)}
+        />
+      </DialogPrimitive.Overlay>
+    );
+  });
 SheetOverlay.displayName = DialogPrimitive.Overlay?.displayName || 'SheetOverlay';
 
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps & {
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    overlayClassName?: string;
-    overlayStyle?: ViewStyle;
-  }
->(({ 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;
+export type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
+export type SheetContentProps = DialogContentProps & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  overlayClassName?: string;
+  overlayStyle?: ViewStyle;
+};
+const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<SheetContentRef>> =
+  React.forwardRef<SheetContentRef, SheetContentProps>(
+    ({ 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;
 
-  return (
-    <SheetPortal>
-      <SheetOverlay className={overlayClassName} style={overlayStyle} />
-      <DialogPrimitive.Content ref={ref} asChild {...props}>
-        <Animated.View
-          entering={entering}
-          exiting={exiting}
-          className={cn(
-            'absolute z-50 h-full w-3/4 gap-4 bg-background p-6 shadow-lg web:cursor-default web:duration-200 web:ease-in-out',
-            side === 'right' &&
-              'right-0 top-0 border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right',
-            side === 'left' &&
-              'left-0 top-0 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left',
-            side === 'top' &&
-              'top-0 w-full border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
-            side === 'bottom' &&
-              'bottom-0 w-full border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-            className,
-          )}
-        >
-          {children}
-          <DialogPrimitive.Close
-            className={cn(
-              'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary',
-              'web:absolute web:right-4 web:top-4',
-            )}
-          >
-            <X size={24} className="text-muted-foreground" />
-            <Text className="sr-only">Close</Text>
-          </DialogPrimitive.Close>
-        </Animated.View>
-      </DialogPrimitive.Content>
-    </SheetPortal>
+      return (
+        <SheetPortal>
+          <SheetOverlay className={overlayClassName} style={overlayStyle} />
+          <DialogPrimitive.Content ref={ref} asChild {...props}>
+            <Animated.View
+              entering={entering}
+              exiting={exiting}
+              className={cn(
+                'bg-background web:cursor-default web:duration-200 web:ease-in-out absolute z-50 h-full w-3/4 gap-4 p-6 shadow-lg',
+                side === 'right' &&
+                  'border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right top-0 right-0 border-l',
+                side === 'left' &&
+                  'border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left top-0 left-0 border-r',
+                side === 'top' &&
+                  'border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top top-0 w-full border-b',
+                side === 'bottom' &&
+                  'border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom bottom-0 w-full border-t',
+                className,
+              )}
+            >
+              {children}
+              <DialogPrimitive.Close
+                className={cn(
+                  'ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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',
+                  'web:absolute web:right-4 web:top-4',
+                )}
+              >
+                <X size={24} className="text-muted-foreground" />
+                <Text className="sr-only">Close</Text>
+              </DialogPrimitive.Close>
+            </Animated.View>
+          </DialogPrimitive.Content>
+        </SheetPortal>
+      );
+    },
   );
-});
 SheetContent.displayName = DialogPrimitive.Content?.displayName || 'SheetContent';
 
 const SheetHeader = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof View>) => (
@@ -97,19 +99,20 @@ const SheetFooter = ({ className, ...props }: React.ComponentPropsWithoutRef<typ
 );
 SheetFooter.displayName = 'SheetFooter';
 
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold text-foreground', className)} {...props} />
-));
+export type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
+export type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<SheetTitleRef>> =
+  React.forwardRef<SheetTitleRef, SheetTitleProps>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title ref={ref} className={cn('text-foreground text-lg font-semibold', className)} {...props} />
+  ));
 SheetTitle.displayName = DialogPrimitive.Title?.displayName || 'SheetTitle';
 
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+export type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
+export type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+const SheetDescription: React.ForwardRefExoticComponent<
+  SheetDescriptionProps & React.RefAttributes<SheetDescriptionRef>
+> = React.forwardRef<SheetDescriptionRef, SheetDescriptionProps>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
 ));
 SheetDescription.displayName = DialogPrimitive.Description?.displayName || 'SheetDescription';
 

package/src/skeleton.tsx

@@ -25,7 +25,7 @@ function Skeleton({ className, ...props }: React.ComponentPropsWithoutRef<typeof
     opacity: opacity.value,
   }));
 
-  return <Animated.View className={cn('rounded-md bg-muted', className)} style={animatedStyle} {...props} />;
+  return <Animated.View className={cn('bg-muted rounded-md', className)} style={animatedStyle} {...props} />;
 }
 
 export { Skeleton };

package/src/switch.tsx

@@ -13,7 +13,7 @@ const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, S
   ({ className, checked, onCheckedChange, ...props }, ref) => (
     <SwitchPrimitive.Root
       className={cn(
-        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer flex-row items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-6 w-11 shrink-0 cursor-pointer flex-row items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -23,7 +23,7 @@ const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitive.Root>, S
     >
       <SwitchPrimitive.Thumb
         className={cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
+          'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
         )}
       />
     </SwitchPrimitive.Root>

package/src/table.tsx

@@ -12,7 +12,7 @@ const Table = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPro
 Table.displayName = 'Table';
 
 const TableHeader = React.forwardRef<React.ElementRef<typeof View>, React.ComponentPropsWithoutRef<typeof View>>(
-  ({ className, ...props }, ref) => <View ref={ref} className={cn('border-b border-border', className)} {...props} />,
+  ({ className, ...props }, ref) => <View ref={ref} className={cn('border-border border-b', className)} {...props} />,
 );
 TableHeader.displayName = 'TableHeader';
 
@@ -33,7 +33,7 @@ const TableRow = React.forwardRef<React.ElementRef<typeof View>, React.Component
     <View
       ref={ref}
       className={cn(
-        'flex-row border-b border-border transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+        'border-border hover:bg-muted/50 data-[state=selected]:bg-muted flex-row border-b transition-colors',
         className,
       )}
       {...props}
@@ -47,7 +47,7 @@ const TableHead = React.forwardRef<React.ElementRef<typeof Text>, React.Componen
     <Text
       ref={ref}
       className={cn(
-        'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+        'text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0',
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ TableCell.displayName = 'TableCell';
 
 const TableCaption = React.forwardRef<React.ElementRef<typeof Text>, React.ComponentPropsWithoutRef<typeof Text>>(
   ({ className, ...props }, ref) => (
-    <Text ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
+    <Text ref={ref} className={cn('text-muted-foreground mt-4 text-sm', className)} {...props} />
   ),
 );
 TableCaption.displayName = 'TableCaption';

package/src/tabs.tsx

@@ -22,7 +22,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'h-10 inline-flex flex-row items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        'bg-muted text-muted-foreground inline-flex h-10 flex-row items-center justify-center rounded-md p-1',
         className,
       )}
       {...props}
@@ -44,9 +44,9 @@ const TabsTrigger = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Trigg
         <TabsPrimitive.Trigger
           ref={ref}
           className={cn(
-            'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+            'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-sm px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
             props.disabled && 'opacity-50',
-            value === props.value && 'bg-background shadow-sm shadow-foreground/10',
+            value === props.value && 'bg-background shadow-foreground/10 shadow-sm',
             className,
           )}
           {...props}
@@ -62,7 +62,7 @@ const TabsContent = React.forwardRef<React.ElementRef<typeof TabsPrimitive.Conte
     <TabsPrimitive.Content
       ref={ref}
       className={cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
         className,
       )}
       {...props}

package/src/textarea.tsx

@@ -13,7 +13,7 @@ const Textarea = React.forwardRef<React.ElementRef<typeof TextInput>, TextareaPr
         multiline
         numberOfLines={props.numberOfLines || 3}
         className={cn(
-          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base text-foreground shadow-sm transition-colors placeholder:text-muted-foreground focus:border-ring disabled:opacity-50',
+          'border-input bg-background text-foreground placeholder:text-muted-foreground focus:border-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-base shadow-sm transition-colors disabled:opacity-50',
           className,
         )}
         placeholderClassName={cn('text-muted-foreground', placeholderClassName)}

package/src/toast.tsx

@@ -24,7 +24,7 @@ const Toast = React.forwardRef<
       )}
       {...props}
     >
-      <Animated.View entering={FadeInUp} exiting={FadeOutDown} layout={Layout} className="flex-row items-center w-full">
+      <Animated.View entering={FadeInUp} exiting={FadeOutDown} layout={Layout} className="w-full flex-row items-center">
         {props.children}
       </Animated.View>
     </ToastPrimitive.Root>
@@ -36,7 +36,7 @@ const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitive.Title ref={ref} className={cn('text-sm font-semibold text-foreground', className)} {...props} />
+  <ToastPrimitive.Title ref={ref} className={cn('text-foreground text-sm font-semibold', className)} {...props} />
 ));
 ToastTitle.displayName = ToastPrimitive.Title.displayName;
 
@@ -46,7 +46,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitive.Description
     ref={ref}
-    className={cn('text-sm opacity-90 text-muted-foreground', className)}
+    className={cn('text-muted-foreground text-sm opacity-90', className)}
     {...props}
   />
 ));
@@ -59,7 +59,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitive.Close
     ref={ref}
     className={cn(
-      'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100',
+      'text-foreground/50 hover:text-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 focus:ring-1 focus:outline-none',
       className,
     )}
     {...props}
@@ -76,7 +76,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitive.Action
     ref={ref}
     className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50',
+      'hover:bg-secondary focus:ring-ring inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus:ring-1 focus:outline-none disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
     {...props}

package/src/tooltip.tsx

@@ -10,7 +10,11 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
+const TooltipContent: React.ForwardRefExoticComponent<
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & { portalHost?: string } & React.RefAttributes<
+      React.ElementRef<typeof TooltipPrimitive.Content>
+    >
+> = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
     portalHost?: string;
@@ -27,11 +31,11 @@ const TooltipContent = React.forwardRef<
           entering={FadeIn}
           exiting={FadeOut}
           className={cn(
-            'z-50 overflow-hidden rounded-md border border-border bg-popover px-3 py-1.5 shadow-md web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            'border-border bg-popover web:animate-in web:fade-in-0 web:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 shadow-md',
             className,
           )}
         >
-          <Text className="text-sm text-popover-foreground native:text-base">{props.children}</Text>
+          <Text className="text-popover-foreground native:text-base text-sm">{props.children}</Text>
         </Animated.View>
       </TooltipPrimitive.Overlay>
     </TooltipPrimitive.Portal>