@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,659 +0,0 @@
-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} />
-  }
-}