@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/dialog-x.tsx

@@ -0,0 +1,659 @@
+import React from 'react'
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X, AlertTriangle, CheckCircle, Info, Mail } from "lucide-react"
+import { cn } from "~/components/catalyst-ui"
+import { Dialog, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, useDialogContext, dialogContentVariants } from "~/components/catalyst-ui"
+import { Avatar, AvatarImage, AvatarFallback } from "~/components/catalyst-ui"
+import { ScrollArea } from "~/components/catalyst-ui"
+import type { LucideIcon } from "lucide-react"
+
+
+/**
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ DialogX ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ★ ━━━━ ☆ ━━━━  ━━━━ ☆ ━━━━ ★
+* type DialogType = 'default' | 'alert' | 'alertWithIcon' | 'alertDestructive' | 'terms' | 'subscribe' | 'referEarn' | 'rating' | 'otpVerification' | 'signUp' | 'signIn' | 'inviteFriends'
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Default Dialog ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX>
+*     <DialogXTrigger>Open Dialog</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader>
+*             <DialogXTitle>Dialog Title</DialogXTitle>
+*             <DialogXDescription>
+*                 This is a default dialog description.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         <DialogXFooter>
+*             <Button>Cancel</Button>
+*             <Button>Confirm</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Alert Dialog ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="alert">
+*     <DialogXTrigger>Open Alert</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader>
+*             <DialogXTitle>Are you sure?</DialogXTitle>
+*             <DialogXDescription>
+*                 This action cannot be undone.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         <DialogXFooter>
+*             <Button variant="outline">Cancel</Button>
+*             <Button>Continue</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Alert with Icon ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="alertWithIcon">
+*     <DialogXTrigger>Open Alert with Icon</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader icon={CheckCircle}>
+*             <DialogXTitle>Success!</DialogXTitle>
+*             <DialogXDescription>
+*                 Your action was completed successfully.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         <DialogXFooter>
+*             <Button>OK</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Destructive Alert ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="alertDestructive">
+*     <DialogXTrigger>Open Destructive Alert</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader>
+*             <DialogXTitle>Delete Account</DialogXTitle>
+*             <DialogXDescription>
+*                 Are you sure you want to delete your account? This action cannot be undone.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         <DialogXFooter>
+*             <Button variant="outline">Cancel</Button>
+*             <Button variant="destructive">Delete</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Terms & Conditions ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="terms">
+*     <DialogXTrigger>View Terms</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader>
+*             <DialogXTitle>Terms & Conditions</DialogXTitle>
+*         </DialogXHeader>
+*         <DialogXDescription>
+*             <ScrollArea className="h-64">
+*                 <p className="text-sm">
+*                     {/* Long terms content here * /}
+*                 </p>
+*             </ScrollArea>
+*         </DialogXDescription>
+*         <DialogXFooter>
+*             <Button variant="outline">Decline</Button>
+*             <Button>Accept</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Subscribe Dialog ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="subscribe">
+*     <DialogXTrigger>Subscribe</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader icon={Mail}>
+*             <DialogXTitle>Subscribe to Newsletter</DialogXTitle>
+*             <DialogXDescription>
+*                 Get the latest updates and news delivered to your inbox.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         {/* Email input field * /}
+*         <DialogXFooter>
+*             <Button>Subscribe</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Sign Up Dialog ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="signUp">
+*     <DialogXTrigger>Sign Up</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader icon={Mail}>
+*             <DialogXTitle>Create Account</DialogXTitle>
+*             <DialogXDescription>
+*                 Join our community today!
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         {/* Sign up form fields * /}
+*         <DialogXFooter>
+*             <Button variant="outline">Cancel</Button>
+*             <Button>Sign Up</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Sign In Dialog ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <DialogX dialog="signIn">
+*     <DialogXTrigger>Sign In</DialogXTrigger>
+*     <DialogXContent>
+*         <DialogXHeader icon={Mail}>
+*             <DialogXTitle>Welcome Back</DialogXTitle>
+*             <DialogXDescription>
+*                 Sign in to your account to continue.
+*             </DialogXDescription>
+*         </DialogXHeader>
+*         {/* Sign in form fields * /}
+*         <DialogXFooter>
+*             <Button variant="outline">Cancel</Button>
+*             <Button>Sign In</Button>
+*         </DialogXFooter>
+*     </DialogXContent>
+* </DialogX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Props ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - DialogX Props:
+* - `dialog`: DialogType - The type of dialog to render
+* - `open`: boolean - Controlled open state
+* - `onOpenChange`: (open: boolean) => void - Callback when open state changes
+* - `defaultOpen`: boolean - Default open state
+* - `modal`: boolean - Whether the dialog is modal (default: true)
+* 
+* - DialogXContent Props:
+* - `className`: string - Additional CSS classes
+* - `showCloseButton`: boolean - Whether to show close button (default: true)
+* - `children`: ReactNode - Dialog content
+* 
+* - DialogXHeader Props:
+* - `className`: string - Additional CSS classes
+* - `icon`: LucideIcon - Icon component for icon-based dialogs
+* - `children`: ReactNode - Header content
+* 
+* - DialogXFooter Props:
+* - `className`: string - Additional CSS classes
+* - `children`: ReactNode - Footer content
+* 
+* - DialogXTitle Props:
+* - `className`: string - Additional CSS classes
+* - `children`: ReactNode - Title content
+* 
+* - DialogXDescription Props:
+* - `className`: string - Additional CSS classes
+* - `children`: ReactNode - Description content
+* 
+* - DialogXTrigger Props:
+* - `asChild`: boolean - Whether to merge props (default: false)
+* - `children`: ReactNode - Trigger element
+* 
+* - DialogXClose Props:
+* - `asChild`: boolean - Whether to merge props (default: false)
+* - `children`: ReactNode - Close element
+* 
+* - DialogXOverlay Props:
+* - `className`: string - Additional CSS classes
+* 
+* - DialogXPortal Props:
+* - `children`: ReactNode - Portal content
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Special Features ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - **Gradient Backgrounds**: SignUp (green gradient), SignIn (sky gradient)
+* - **Custom Overlays**: Themed overlays for different dialog types
+* - **Icon Support**: Built-in icon display with background styling
+* - **Scroll Areas**: Built-in scroll areas for content-heavy dialogs (Terms)
+* - **Responsive Design**: Adaptive layouts for mobile and desktop
+* - **Accessibility**: Full ARIA support and keyboard navigation
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Usage Notes ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* 1. Always wrap DialogXTrigger and DialogXContent inside DialogX
+* 2. Use the appropriate dialog type for your use case
+* 3. Customize icons by passing LucideIcon components to DialogXHeader
+* 4. Disable close button with `showCloseButton={false}` on DialogXContent
+* 5. The component automatically applies appropriate styling based on dialog type
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Available Icons ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```typescript
+* // Import from lucide-react
+* import { 
+*     CheckCircle, 
+*     AlertTriangle, 
+*     Info, 
+*     Mail, 
+*     X 
+* } from "lucide-react"
+* 
+* // Usage in DialogXHeader
+* <DialogXHeader icon={CheckCircle}>
+* ```
+* 
+*/
+
+type DialogType = 'default' | 'alert' | 'alertWithIcon' | 'alertDestructive' | 'terms' | 'subscribe' | 'referEarn' | 'rating' | 'otpVerification' | 'signUp' | 'signIn' | 'inviteFriends'
+
+const DialogXContext = React.createContext<DialogType>('default')
+
+export function DialogX({ dialog = 'default', ...props }: any) {
+  return (
+    <DialogXContext.Provider value={dialog}>
+      <Dialog {...props} />
+    </DialogXContext.Provider>
+  )
+}
+
+export function DialogXTrigger({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    default:
+      return <DialogTrigger {...props} />
+  }
+}
+
+export function DialogXClose({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+   switch (dialogType) {
+    default:
+      return <DialogClose {...props} />
+  }
+}
+
+export function DialogXContent({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+  const { variant } = useDialogContext()
+
+  switch (dialogType) {
+    case 'alert':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(dialogContentVariants({ variant }), props.className)}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'alertWithIcon':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(dialogContentVariants({ variant }), props.className)}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'alertDestructive':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(dialogContentVariants({ variant }), props.className)}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'terms':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(
+              "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 rounded-lg border p-0 shadow-lg duration-200 sm:max-h-[min(600px,80vh)] sm:max-w-md",
+              props.className
+            )}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'subscribe':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(
+              "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+              props.className
+            )}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'signUp':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(
+              "to-card bg-gradient-to-b from-green-100 to-40% [background-size:100%_101%] 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-sm dark:from-green-900",
+              props.className
+            )}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    case 'signIn':
+      return (
+        <DialogPrimitive.Portal>
+          <DialogPrimitive.Overlay
+            className={cn(
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50"
+            )}
+          />
+          <DialogPrimitive.Content
+            className={cn(
+              "to-card bg-gradient-to-b from-sky-100 to-40% [background-size:100%_101%] 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-sm dark:from-sky-900",
+              props.className
+            )}
+            {...props}
+          >
+            {props.children}
+            {props.showCloseButton !== false && (
+              <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-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+                <X />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Portal>
+      )
+
+    default:
+      return <DialogContent {...props} />
+  }
+}
+
+export function DialogXHeader({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+  const Icon = props.icon
+
+  switch (dialogType) {
+    case 'alertWithIcon':
+      return (
+        <div className={cn("flex flex-col gap-2 text-center sm:text-left", props.className)} {...props}>
+          <div className='mb-4 flex size-9 items-center justify-center rounded-full bg-sky-600/10 sm:mx-0 dark:bg-sky-400/10'>
+            {Icon && <Icon className='size-4.5 text-sky-600 dark:text-sky-400' />}
+          </div>
+          {props.children}
+        </div>
+      )
+
+    case 'alertDestructive':
+      return (
+        <div className={cn("flex flex-col gap-2 items-center", props.className)} {...props}>
+          <div className='bg-destructive/10 mx-auto mb-2 flex size-12 items-center justify-center rounded-full'>
+            <AlertTriangle className='text-destructive size-6' />
+          </div>
+          {props.children}
+        </div>
+      )
+
+    case 'terms':
+      return (
+        <div className={cn("contents space-y-0 text-left", props.className)}>
+          {props.children}
+        </div>
+      )
+
+    case 'subscribe':
+    case 'signUp':
+    case 'signIn':
+    case 'inviteFriends':
+      return (
+        <div className={cn("flex flex-col gap-2 items-center", props.className)} {...props}>
+          {Icon && (
+            <div className='mb-4 flex size-12 items-center justify-center rounded-full bg-sky-600/10 sm:mx-0 dark:bg-sky-400/10'>
+              <Icon className='size-6 text-sky-600 dark:text-sky-400' />
+            </div>
+          )}
+          {props.children}
+        </div>
+      )
+
+    default:
+      return <DialogHeader {...props} />
+  }
+}
+
+export function DialogXFooter({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    case 'terms':
+      return (
+        <div className={cn("px-6 pb-4 sm:justify-end flex flex-col-reverse gap-2 sm:flex-row", props.className)} {...props}>
+          {props.children}
+        </div>
+      )
+
+    case 'signUp':
+    case 'signIn':
+      return (
+        <div className={cn("space-y-2 pt-4 sm:flex-col flex flex-col-reverse gap-2", props.className)} {...props}>
+          {props.children}
+        </div>
+      )
+
+    default:
+      return <DialogFooter {...props} />
+  }
+}
+
+export function DialogXTitle({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    case 'terms':
+      return (
+        <DialogPrimitive.Title
+          className={cn("border-b px-6 py-4 text-lg leading-none font-semibold", props.className)}
+          {...props}
+        />
+      )
+
+    case 'subscribe':
+    case 'signUp':
+    case 'signIn':
+    case 'inviteFriends':
+      return (
+        <DialogPrimitive.Title
+          className={cn("text-xl leading-none font-semibold", props.className)}
+          {...props}
+        />
+      )
+
+    case 'alertDestructive':
+      return (
+        <DialogPrimitive.Title
+          className={cn("text-lg leading-none font-semibold text-center", props.className)}
+          {...props}
+        />
+      )
+
+    default:
+      return <DialogTitle {...props} />
+  }
+}
+
+export function DialogXDescription({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    case 'terms':
+      return (
+        <div className={cn('text-muted-foreground px-6 py-4 text-sm', props.className)}>
+          {props.children}
+        </div>
+      )
+
+    case 'subscribe':
+    case 'signUp':
+    case 'signIn':
+    case 'inviteFriends':
+      return (
+        <DialogPrimitive.Description
+          className={cn("text-muted-foreground text-base", props.className)}
+          {...props}
+        />
+      )
+
+    case 'alertDestructive':
+      return (
+        <DialogPrimitive.Description
+          className={cn("text-muted-foreground text-sm text-center", props.className)}
+          {...props}
+        />
+      )
+
+    default:
+      return <DialogDescription {...props} />
+  }
+}
+
+export function DialogXPortal({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    default:
+      return <DialogPortal {...props} />
+  }
+}
+
+
+export function DialogXOverlay({ ...props }: any) {
+  const dialogType = React.useContext(DialogXContext)
+
+  switch (dialogType) {
+    case 'barbieFartDust':
+      return (
+        <DialogPrimitive.Overlay
+          className={cn(
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-pink-300/50 backdrop-blur-sm",
+            props.className
+          )}
+          {...props}
+        />
+      )
+
+    case 'signUp':
+      return (
+        <DialogPrimitive.Overlay
+          className={cn(
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-green-500/20 backdrop-blur-sm",
+            props.className
+          )}
+          {...props}
+        />
+      )
+
+    case 'signIn':
+      return (
+        <DialogPrimitive.Overlay
+          className={cn(
+            "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-sky-500/20 backdrop-blur-sm",
+            props.className
+          )}
+          {...props}
+        />
+      )
+
+    default:
+      return <DialogOverlay {...props} />
+  }
+}