diff --git a/apps/mail/components/responsive-modal.tsx b/apps/mail/components/responsive-modal.tsx
index 9fba45e3e4..fa6f74ecba 100644
--- a/apps/mail/components/responsive-modal.tsx
+++ b/apps/mail/components/responsive-modal.tsx
@@ -6,7 +6,7 @@ import {
DialogTitle,
} from '@/components/ui/dialog';
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '@/components/ui/drawer';
-import { VisuallyHidden } from 'radix-ui';
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
import { type ReactElement } from 'react';
// import { useMedia } from 'react-use';
diff --git a/apps/mail/components/setup-phone.tsx b/apps/mail/components/setup-phone.tsx
index b254d58442..3199b2b639 100644
--- a/apps/mail/components/setup-phone.tsx
+++ b/apps/mail/components/setup-phone.tsx
@@ -105,7 +105,7 @@ export const SetupInboxDialog = () => {
-
+
Set up your Inbox assistant
diff --git a/apps/mail/components/ui/accordion.tsx b/apps/mail/components/ui/accordion.tsx
index 1b59ab5115..c2c1872208 100644
--- a/apps/mail/components/ui/accordion.tsx
+++ b/apps/mail/components/ui/accordion.tsx
@@ -1,4 +1,6 @@
-import { Accordion as AccordionPrimitive } from 'radix-ui';
+'use client';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
import { ChevronDown } from 'lucide-react';
import * as React from 'react';
@@ -22,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
svg]:rotate-180',
+ 'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
className,
)}
{...props}
@@ -40,7 +42,7 @@ const AccordionContent = React.forwardRef<
>(({ className, children, ...props }, ref) => (
{children}
diff --git a/apps/mail/components/ui/alert.tsx b/apps/mail/components/ui/alert.tsx
index 1573d4b4da..fbb31be414 100644
--- a/apps/mail/components/ui/alert.tsx
+++ b/apps/mail/components/ui/alert.tsx
@@ -1,7 +1,8 @@
import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@/lib/utils';
import * as React from 'react';
+import { cn } from '@/lib/utils';
+
const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
{
diff --git a/apps/mail/components/ui/app-sidebar.tsx b/apps/mail/components/ui/app-sidebar.tsx
index 46d0c4f05c..1d212ea7f3 100644
--- a/apps/mail/components/ui/app-sidebar.tsx
+++ b/apps/mail/components/ui/app-sidebar.tsx
@@ -1,8 +1,6 @@
import {
Dialog,
DialogContent,
- DialogDescription,
- DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader } from '@/components/ui/sidebar';
@@ -196,9 +194,6 @@ function ComposeButton() {
};
return (
diff --git a/apps/mail/components/ui/avatar.tsx b/apps/mail/components/ui/avatar.tsx
index 7feb9dfdde..b0ec97bff3 100644
--- a/apps/mail/components/ui/avatar.tsx
+++ b/apps/mail/components/ui/avatar.tsx
@@ -1,14 +1,17 @@
-import { Avatar as AvatarPrimitive } from 'radix-ui';
-import { cn } from '@/lib/utils';
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
import * as React from 'react';
+import { cn } from '@/lib/utils';
+
const Avatar = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
>(({ className, ...props }, ref) => (
));
@@ -32,7 +35,10 @@ const AvatarFallback = React.forwardRef<
>(({ className, ...props }, ref) => (
));
diff --git a/apps/mail/components/ui/badge.tsx b/apps/mail/components/ui/badge.tsx
index 3044947326..4a80911395 100644
--- a/apps/mail/components/ui/badge.tsx
+++ b/apps/mail/components/ui/badge.tsx
@@ -4,21 +4,16 @@ import * as React from 'react';
import { cn } from '@/lib/utils';
const badgeVariants = cva(
- 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+ 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
{
variants: {
variant: {
- default: 'border-transparent bg-primary text-primary-foreground ',
+ default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
secondary:
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
destructive:
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline: 'text-foreground',
- important: 'border-0 text-amber-700 dark:text-amber-500 ',
- promotions: 'border-0 text-red-700 dark:text-red-500 ',
- personal: 'border-0 text-green-700 dark:text-green-500 ',
- updates: 'border-0 text-purple-700 dark:text-purple-500 ',
- forums: 'border-transparent text-blue-500 dark:text-blue-400',
},
},
defaultVariants: {
diff --git a/apps/mail/components/ui/button.tsx b/apps/mail/components/ui/button.tsx
index 2ba3b6b7a4..485f6a00ca 100644
--- a/apps/mail/components/ui/button.tsx
+++ b/apps/mail/components/ui/button.tsx
@@ -1,32 +1,33 @@
import { cva, type VariantProps } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
+import { Slot } from '@radix-ui/react-slot';
import * as React from 'react';
import { cn } from '@/lib/utils';
const buttonVariants = cva(
- 'inline-flex items-center justify-center cursor-pointer gap-2 whitespace-nowrap rounded-lg text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 aria-busy:cursor-progress',
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
{
variants: {
variant: {
- default: 'bg-primary text-primary-foreground hover:bg-primary/90',
- destructive: 'bg-logout text-destructive-foreground hover:bg-logout/90',
- outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
- secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
- ghost: 'hover:bg-accent hover:text-accent-foreground',
- link: 'text-primary underline-offset-4 hover:underline',
- main: 'bg-muted text-primary',
+ default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+ outline:
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+ secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+ link: 'text-primary underline-offset-4 hover:underline',main: 'bg-muted text-primary',
// A button that resembles a dropdownItem
dropdownItem:
'select-none gap-2 rounded-sm text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground hover:bg-accent',
},
size: {
dropdownItem: 'px-2 py-1.5',
- default: 'h-10 px-4 py-2',
- sm: 'h-9 rounded-md px-3',
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+ sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
xs: 'h-8 rounded-md px-2',
- lg: 'h-11 rounded-md px-8',
- icon: 'h-10 w-10',
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+ icon: 'size-9',
},
},
defaultVariants: {
@@ -36,50 +37,25 @@ const buttonVariants = cva(
},
);
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean;
- isLoading?: boolean;
- loadingText?: string;
-}
+function Button({
+ className,
+ variant,
+ size,
+ asChild = false,
+ ...props
+}: React.ComponentProps<'button'> &
+ VariantProps & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : 'button';
-const Button = React.forwardRef(
- (
- {
- className,
- variant,
- size,
- asChild = false,
- isLoading = false,
- loadingText,
- children,
- ...props
- },
- ref,
- ) => {
- const Comp = asChild ? Slot.Slot : 'button';
- return (
-
- {isLoading ? (
- <>
- ↻
- {loadingText || children}
- >
- ) : (
- children
- )}
-
- );
- },
-);
-Button.displayName = 'Button';
+ return (
+
+ );
+}
export { Button, buttonVariants };
diff --git a/apps/mail/components/ui/checkbox.tsx b/apps/mail/components/ui/checkbox.tsx
index 50bef6d2cb..5022a357f3 100644
--- a/apps/mail/components/ui/checkbox.tsx
+++ b/apps/mail/components/ui/checkbox.tsx
@@ -1,4 +1,6 @@
-import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+'use client';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { Check } from 'lucide-react';
import * as React from 'react';
diff --git a/apps/mail/components/ui/collapsible.tsx b/apps/mail/components/ui/collapsible.tsx
index da83ed1053..86ab87d88e 100644
--- a/apps/mail/components/ui/collapsible.tsx
+++ b/apps/mail/components/ui/collapsible.tsx
@@ -1,4 +1,6 @@
-import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
const Collapsible = CollapsiblePrimitive.Root;
diff --git a/apps/mail/components/ui/command.tsx b/apps/mail/components/ui/command.tsx
index 2cbca53c1b..8787f6c725 100644
--- a/apps/mail/components/ui/command.tsx
+++ b/apps/mail/components/ui/command.tsx
@@ -1,15 +1,13 @@
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogTitle,
- type DialogProps,
-} from '@/components/ui/dialog';
+'use client';
+
+import { type DialogProps } from '@radix-ui/react-dialog';
import { Command as CommandPrimitive } from 'cmdk';
-import { Search } from '../icons/icons';
-import { cn } from '@/lib/utils';
+import { Search } from 'lucide-react';
import * as React from 'react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+
const Command = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef
@@ -17,7 +15,7 @@ const Command = React.forwardRef<
{
return (