@customafk/lunas-ui 0.0.21 → 0.0.23

package/packages/components/ui/dialog.tsx

@@ -1,52 +1,40 @@
-"use client";
-import React from "react";
-import { Dialog as DialogPrimitive } from "radix-ui";
-import { XIcon } from "lucide-react";
+'use client'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+import { XIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50",
-        "data-[state=open]:animate-in",
-        "data-[state=open]:fade-in-0",
-        "data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0",
+        'fixed inset-0 z-50 bg-black/50',
+        'data-[state=open]:animate-in',
+        'data-[state=open]:fade-in-0',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
         className,
       )}
       {...props}
     />
-  );
+  )
 }
 
 function DialogContent({
@@ -55,7 +43,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean;
+  showCloseButton?: boolean
 }) {
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -64,15 +52,16 @@ function DialogContent({
         <DialogPrimitive.Content
           data-slot="dialog-content"
           className={cn(
-            "bg-background relative dark:border",
-            "z-50 grid max-h-[85svh] w-full max-w-[calc(100%-2rem)]",
-            "gap-4 rounded-2xl p-6 shadow-lg duration-200 sm:max-w-lg",
-            "data-[state=open]:animate-in",
-            "data-[state=open]:fade-in-0",
-            "data-[state=open]:zoom-in-80",
-            "data-[state=closed]:animate-out",
-            "data-[state=closed]:fade-out-0",
-            "data-[state=closed]:zoom-out-80",
+            'bg-background relative z-50 grid',
+            'shadow-dialog gap-4 p-6 outline-none',
+            'max-h-[85svh] w-full max-w-[calc(100%-2rem)] sm:max-w-lg',
+            'rounded-2xl duration-200',
+            'data-[state=open]:animate-in',
+            'data-[state=open]:fade-in-0',
+            'data-[state=open]:zoom-in-80',
+            'data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0',
+            'data-[state=closed]:zoom-out-80',
             className,
           )}
           {...props}
@@ -83,21 +72,21 @@ function DialogContent({
               data-slot="dialog-close"
               tabIndex={-1}
               className={cn(
-                "btnClose",
-                "absolute top-3 right-3 rounded-full p-2 opacity-70",
-                "cursor-pointer transition-all",
-                "outline-0",
-                "focus:ring-2",
-                "focus:ring-border",
-                "hover:opacity-100",
-                "hover:bg-accent",
-                "data-[state=open]:bg-accent",
-                "data-[state=open]:text-muted-foreground",
-                "disabled:pointer-events-none",
-                "[&_svg]:text-accent-foreground/60",
-                "[&_svg]:hover:text-accent-foreground",
-                "[&_svg]:pointer-events-none",
-                "[&_svg]:shrink-0",
+                'btnClose',
+                'absolute top-3 right-3 rounded-full p-2 opacity-70',
+                'cursor-pointer transition-all',
+                'outline-0',
+                'disabled:pointer-events-none',
+                'focus:ring-2',
+                'focus:ring-border-weak',
+                'hover:opacity-100',
+                'hover:bg-accent-muted',
+                'data-[state=open]:bg-accent-weak',
+                'data-[state=open]:text-text-positive-muted',
+                '[&_svg]:text-accent-foreground/60',
+                '[&_svg]:hover:text-text-positive-strong',
+                '[&_svg]:pointer-events-none',
+                '[&_svg]:shrink-0',
                 "[&_svg:not([class*='size-'])]:size-5",
               )}
             >
@@ -108,67 +97,23 @@ function DialogContent({
         </DialogPrimitive.Content>
       </div>
     </DialogPortal>
-  );
+  )
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  );
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="dialog-header" className={cn('flex flex-col gap-2 text-center sm:text-left', className)} {...props} />
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
-      )}
-      {...props}
-    />
-  );
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div data-slot="dialog-footer" className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)} {...props} />
 }
 
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  );
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return <DialogPrimitive.Title data-slot="dialog-title" className={cn('text-text-positive-strong text-lg leading-none font-semibold', className)} {...props} />
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  );
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return <DialogPrimitive.Description data-slot="dialog-description" className={cn('text-text-positive-weak text-sm', className)} {...props} />
 }
 
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }

package/packages/components/ui/dropdown-menu.tsx

@@ -1,89 +1,66 @@
-"use client";
-import React from "react";
-import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+'use client'
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
 }
 
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  );
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
 }
 
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  );
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
 }
 
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  align = "start",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+function DropdownMenuContent({ className, sideOffset = 4, align = 'start', ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground",
-          "z-50",
-          "min-w-32",
-          "overflow-x-hidden overflow-y-auto",
-          "rounded-md border p-1.5 shadow-md",
-          "max-h-(--radix-dropdown-menu-content-available-height)",
-          "origin-(--radix-dropdown-menu-content-transform-origin)",
-          "data-[state=open]:animate-in",
-          "data-[state=open]:fade-in-0",
-          "data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0",
-          "data-[state=closed]:zoom-out-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",
+          'bg-popover text-text-positive',
+          'z-50',
+          'min-w-32',
+          'overflow-x-hidden overflow-y-auto',
+          'border-border-weak shadow-dropdown rounded-md border p-1.5',
+          'max-h-(--radix-dropdown-menu-content-available-height)',
+          'origin-(--radix-dropdown-menu-content-transform-origin)',
+          'data-[state=open]:animate-in',
+          'data-[state=open]:fade-in-0',
+          'data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0',
+          'data-[state=closed]:zoom-out-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',
           className,
         )}
         {...props}
         align={align}
       />
     </DropdownMenuPrimitive.Portal>
-  );
+  )
 }
 
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  );
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = "default",
+  variant = 'default',
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean;
-  variant?: "default" | "destructive";
+  inset?: boolean
+  variant?: 'default' | 'destructive'
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -91,45 +68,39 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 text-sm outline-hidden transition-all select-none",
-        "focus:bg-accent/70",
-        "focus:text-accent-foreground",
-        "dark:data-[variant=destructive]:focus:bg-destructive/20",
-        "data-[inset]:pl-8",
-        "data-[disabled]:pointer-events-none",
-        "data-[disabled]:opacity-50",
-        "data-[variant=destructive]:text-destructive",
-        "data-[variant=destructive]:focus:bg-destructive/10",
-        "data-[variant=destructive]:focus:text-destructive",
-        "data-[variant=destructive]:*:[svg]:!text-destructive",
-        "[&_svg]:shrink-0",
-        "[&_svg]:pointer-events-none",
+        'relative flex cursor-pointer items-center gap-2 rounded-md px-2 py-2.5 text-sm outline-hidden transition-all select-none',
+        'focus:bg-accent-muted',
+        'focus:text-text-positive-strong',
+        'data-[inset]:pl-8',
+        'data-[disabled]:pointer-events-none',
+        'data-[disabled]:opacity-50',
+        'data-[variant=destructive]:text-danger',
+        'data-[variant=destructive]:focus:bg-danger-muted',
+        'data-[variant=destructive]:focus:text-danger-strong',
+        'data-[variant=destructive]:*:[svg]:!text-danger',
+        '[&_svg]:shrink-0',
+        '[&_svg]:pointer-events-none',
         "[&_svg:not([class*='size-'])]:size-4",
-        "[&_svg:not([class*='text-'])]:text-muted-foreground",
+        "[&_svg:not([class*='text-'])]:text-text-positive-muted",
         className,
       )}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none",
-        "focus:bg-accent",
-        "focus:text-accent-foreground",
-        "data-[disabled]:opacity-50",
-        "data-[disabled]:pointer-events-none",
-        "[&_svg]:pointer-events-none",
-        "[&_svg]:shrink-0",
+        'relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none',
+        'focus:bg-accent-muted',
+        'focus:text-text-positive-strong',
+        'data-[disabled]:opacity-50',
+        'data-[disabled]:pointer-events-none',
+        '[&_svg]:pointer-events-none',
+        '[&_svg]:shrink-0',
         "[&_svg:not([class*='size-'])]:size-4",
         className,
       )}
@@ -143,36 +114,25 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  );
+  )
 }
 
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
 }
 
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none",
-        "focus:bg-accent",
-        "focus:text-accent-foreground",
-        "data-[disabled]:pointer-events-none",
-        "data-[disabled]:opacity-50",
-        "[&_svg]:pointer-events-none",
-        "[&_svg]:shrink-0",
+        'relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none',
+        'focus:bg-accent-muted',
+        'focus:text-text-positive-strong',
+        'data-[disabled]:pointer-events-none',
+        'data-[disabled]:opacity-50',
+        '[&_svg]:pointer-events-none',
+        '[&_svg]:shrink-0',
         "[&_svg:not([class*='size-'])]:size-4",
         className,
       )}
@@ -185,7 +145,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  );
+  )
 }
 
 function DropdownMenuLabel({
@@ -193,54 +153,28 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
+      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
       {...props}
     />
-  );
+  )
 }
 
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return <DropdownMenuPrimitive.Separator data-slot="dropdown-menu-separator" className={cn('bg-border-weak -mx-1 my-1 h-px', className)} {...props} />
 }
 
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return <span data-slot="dropdown-menu-shortcut" className={cn('text-text-positive-muted ml-auto text-xs tracking-widest', className)} {...props} />
 }
 
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
 }
 
 function DropdownMenuSubTrigger({
@@ -249,19 +183,19 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean;
+  inset?: boolean
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
-        "focus:bg-accent",
-        "focus:text-accent-foreground",
-        "data-[state=open]:bg-accent",
-        "data-[state=open]:text-accent-foreground",
-        "data-[inset]:pl-8",
+        'flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
+        'focus:bg-accent-muted',
+        'focus:text-text-positive-strong',
+        'data-[state=open]:bg-accent-muted',
+        'data-[state=open]:text-text-positive-strong',
+        'data-[inset]:pl-8',
         className,
       )}
       {...props}
@@ -269,34 +203,31 @@ function DropdownMenuSubTrigger({
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  );
+  )
 }
 
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground",
-        "z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        "data-[state=open]:animate-in",
-        "data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0",
-        "data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95",
-        "data-[state=open]: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",
+        'bg-popover text-text-positive',
+        'border-border-weak shadow-dropdown z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1',
+        'data-[state=open]:animate-in',
+        'data-[state=open]:fade-in-0',
+        'data-[state=open]:zoom-in-95',
+        'data-[state=closed]:zoom-out-95',
+        'data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0',
+        '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',
         className,
       )}
       {...props}
     />
-  );
+  )
 }
 
 export {
@@ -315,4 +246,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-};
+}