feat: migrate Dialog to Base UI

apps/www/src/app/examples/page.tsx

@@ -1439,7 +1439,6 @@ const Page = () => {
               <Dialog.Content width='500px'>
                 <Dialog.Header>
                   <Dialog.Title>Dialog Title</Dialog.Title>
-                  <Dialog.CloseButton />
                 </Dialog.Header>
                 <Dialog.Body>
                   <Text>This is the dialog content. </Text>

apps/www/src/components/demo/demo-playground.tsx

@@ -100,7 +100,11 @@ export default function DemoPlayground({
     <>
       <DemoPreview type='code' code={previewCode} scope={scope} />
       <Dialog open={openPlayground} onOpenChange={setOpenPlayground}>
-        <Dialog.Content className={styles.playgroundDialog}>
+        <Dialog.Content
+          className={styles.playgroundDialog}
+          showCloseButton={false}
+          showNestedAnimation={false}
+        >
           <Dialog.Header className={styles.playgroundHeader}>
             <DemoTitle className={styles.playgroundTitle} />
             <Flex gap={3} align='center'>

apps/www/src/components/docs/search.tsx

@@ -1,5 +1,4 @@
 'use client';
-import { getFileFromUrl, getFolderFromUrl } from '@/lib/utils';
 import {
   Cross1Icon,
   ExclamationTriangleIcon,
@@ -15,13 +14,14 @@ import {
 } from '@raystack/apsara';
 import { cx } from 'class-variance-authority';
 import {
+  flattenTree,
   type Item as PageItem,
-  Root,
-  flattenTree
+  Root
 } from 'fumadocs-core/page-tree';
 import { useDocsSearch } from 'fumadocs-core/search/client';
 import { useRouter } from 'next/navigation';
 import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { getFileFromUrl, getFolderFromUrl } from '@/lib/utils';
 import styles from './search.module.css';
 
 type Item = Omit<PageItem, 'type'> & {
@@ -134,10 +134,8 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <Dialog.Trigger asChild>
-        <IconButton size={3} aria-label='Search docs'>
-          <MagnifyingGlassIcon />
-        </IconButton>
+      <Dialog.Trigger render={<IconButton size={3} aria-label='Search docs' />}>
+        <MagnifyingGlassIcon />
       </Dialog.Trigger>
       <Dialog.Content width={512} className={styles.searchContainer}>
         <Command className={styles.searchCommand} filter={() => 1}>

apps/www/src/components/playground/code-block-examples.tsx

@@ -25,8 +25,8 @@ export function CodeBlockExamples() {
           </CodeBlock.Header>
           <CodeBlock.Content>
             <CodeBlock.Code language='jsx'>{`<Dialog>
-  <Dialog.Trigger asChild>
-    <Button>Basic Dialog</Button>
+  <Dialog.Trigger render={<Button />}>
+    Basic Dialog
   </Dialog.Trigger>
   <Dialog.Content
     width={300}
@@ -35,7 +35,6 @@ export function CodeBlockExamples() {
   >
     <Dialog.Header>
       <Dialog.Title>A simple dialog example</Dialog.Title>
-      <Dialog.CloseButton />
     </Dialog.Header>
     <Dialog.Body>
       <Dialog.Description>
@@ -44,9 +43,7 @@ export function CodeBlockExamples() {
     </Dialog.Body>
     <Dialog.Footer>
       <Button>OK</Button>
-      <Dialog.Close asChild>
-        <Button color="neutral">Cancel</Button>
-      </Dialog.Close>
+      <Dialog.Close render={<Button color="neutral">Cancel</Button>} />
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog>`}</CodeBlock.Code>

apps/www/src/components/playground/dialog-examples.tsx

@@ -8,14 +8,14 @@ export function DialogExamples() {
     <PlaygroundLayout title='Dialog'>
       <Flex gap='medium'>
         <Dialog>
-          <Dialog.Trigger asChild>
-            <Button> Dialog</Button>
-          </Dialog.Trigger>
+          <Dialog.Trigger render={<Button />}>Dialog</Dialog.Trigger>
           <Dialog.Content
             width='400px'
-            overlayBlur
-            overlayClassName='custom-overlay'
-            overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+            overlay={{
+              blur: true,
+              className: 'custom-overlay',
+              style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' }
+            }}
           >
             <Dialog.Title>Custom Styled Dialog</Dialog.Title>
             <Dialog.Description className='custom-description'>
@@ -25,10 +25,10 @@ export function DialogExamples() {
           </Dialog.Content>
         </Dialog>
         <Dialog>
-          <Dialog.Trigger asChild>
-            <Button variant='outline'>Open Dialog</Button>
+          <Dialog.Trigger render={<Button variant='outline' />}>
+            Open Dialog
           </Dialog.Trigger>
-          <Dialog.Content width={600} close={false}>
+          <Dialog.Content width={600} showCloseButton={false}>
             <Dialog.Title>No Close Button</Dialog.Title>
             <Dialog.Description>
               This dialog doesn't show the close button.

apps/www/src/content/docs/components/code-block/demo.ts

@@ -11,8 +11,8 @@ const tsxCode = `{\`function add(a: number, b: number): number {
 }\`}`;
 
 const longCode = `{\`<Dialog>
-  <Dialog.Trigger asChild>
-    <Button>Basic Dialog</Button>
+  <Dialog.Trigger render={<Button />}>
+    Basic Dialog
   </Dialog.Trigger>
   <Dialog.Content
     width={300}
@@ -21,7 +21,6 @@ const longCode = `{\`<Dialog>
   >
     <Dialog.Header>
       <Dialog.Title>A simple dialog example</Dialog.Title>
-      <Dialog.CloseButton />
     </Dialog.Header>
     <Dialog.Body>
       <Dialog.Description>
@@ -30,9 +29,7 @@ const longCode = `{\`<Dialog>
     </Dialog.Body>
     <Dialog.Footer>
       <Button>OK</Button>
-      <Dialog.Close asChild>
-        <Button color="neutral">Cancel</Button>
-      </Dialog.Close>
+      <Dialog.Close render={<Button color="neutral">Cancel</Button>} />
     </Dialog.Footer>
   </Dialog.Content>
 </Dialog>\`}`;

apps/www/src/content/docs/components/dialog/demo.ts

@@ -1,11 +1,11 @@
 'use client';
 
-export const getCode = (props: any) => {
-  const { title, description, ...rest } = props;
+export const getCode = (props: { title?: string; description?: string }) => {
+  const { title, description } = props;
   return `
     <Dialog>
-      <Dialog.Trigger asChild>
-        <Button >Basic Dialog</Button>
+      <Dialog.Trigger render={<Button />}>
+        Basic Dialog
       </Dialog.Trigger>
       <Dialog.Content
         width={300}
@@ -14,15 +14,14 @@ export const getCode = (props: any) => {
       >
         <Dialog.Header>
           <Dialog.Title>${title}</Dialog.Title>
-          <Dialog.CloseButton />
         </Dialog.Header>
         <Dialog.Body>
           <Dialog.Description>
           ${description}
           </Dialog.Description>
         </Dialog.Body>
         <Dialog.Footer>
-        <Dialog.Close asChild><Button variant="outline" color="neutral">Cancel</Button></Dialog.Close>
+        <Dialog.Close render={<Button variant="outline" color="neutral">Cancel</Button>} />
         <Button>OK</Button>
         </Dialog.Footer>
       </Dialog.Content>
@@ -49,8 +48,8 @@ export const controlledDemo = {
 
     return (
       <Dialog open={open} onOpenChange={setOpen}>
-        <Dialog.Trigger asChild>
-          <Button>Controlled Dialog</Button>
+        <Dialog.Trigger render={<Button />}>
+          Controlled Dialog
         </Dialog.Trigger>
         <Dialog.Content width={600}>
           <Dialog.Body>
@@ -69,14 +68,12 @@ export const customDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Styled Dialog</Button>
+    <Dialog.Trigger render={<Button />}>
+      Styled Dialog
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Body>
         <Dialog.Title>Custom Styled Dialog</Dialog.Title>
@@ -92,18 +89,15 @@ export const onlyHeaderDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Only Header and Body</Button>
+    <Dialog.Trigger render={<Button />}>
+      Only Header and Body
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Header>
         <Dialog.Title>Title</Dialog.Title>
-        <Dialog.CloseButton />
       </Dialog.Header>
       <Dialog.Body>
         <Dialog.Description className="custom-description">
@@ -118,14 +112,12 @@ export const onlyFooterDemo = {
   type: 'code',
   code: `
   <Dialog>
-    <Dialog.Trigger asChild>
-      <Button>Only Footer and Body</Button>
+    <Dialog.Trigger render={<Button />}>
+      Only Footer and Body
     </Dialog.Trigger>
     <Dialog.Content
       width="400px"
-      overlayBlur
-      overlayClassName="custom-overlay"
-      overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      overlay={{ blur: true, className: 'custom-overlay', style: { backgroundColor: 'rgba(0, 0, 0, 0.5)' } }}
     >
       <Dialog.Body>
         <Dialog.Title>Title</Dialog.Title>
@@ -134,9 +126,60 @@ export const onlyFooterDemo = {
         </Dialog.Description>
       </Dialog.Body>
       <Dialog.Footer>
-        <Dialog.Close asChild><Button color="neutral">Close</Button></Dialog.Close>
+        <Dialog.Close render={<Button color="neutral">Close</Button>} />
         <Button color="danger">Cancel</Button>
       </Dialog.Footer>
     </Dialog.Content>
   </Dialog>`
 };
+
+export const nestedDemo = {
+  type: 'code',
+  code: `
+  function NestedDialogExample() {
+    const [parentOpen, setParentOpen] = React.useState(false);
+    const [nestedOpen, setNestedOpen] = React.useState(false);
+
+    return (
+      <>
+        <Dialog open={parentOpen} onOpenChange={setParentOpen}>
+          <Dialog.Trigger render={<Button />}>
+            Open Parent Dialog
+          </Dialog.Trigger>
+          <Dialog.Content width={400}>
+            <Dialog.Header>
+              <Dialog.Title>Parent Dialog</Dialog.Title>
+            </Dialog.Header>
+            <Dialog.Body>
+              <Dialog.Description>
+                This is the parent dialog. Click the button below to open a nested dialog.
+              </Dialog.Description>
+              <Dialog open={nestedOpen} onOpenChange={setNestedOpen}>
+                <Dialog.Trigger render={<Button />}>
+                  Open Nested Dialog
+                </Dialog.Trigger>
+                <Dialog.Content width={400}>
+                  <Dialog.Header>
+                    <Dialog.Title>Nested Dialog</Dialog.Title>
+                  </Dialog.Header>
+                  <Dialog.Body>
+                    <Dialog.Description>
+                      This is a nested dialog. Notice how the parent dialog scales down
+                      and becomes slightly transparent when this dialog is open.
+                    </Dialog.Description>
+                  </Dialog.Body>
+                  <Dialog.Footer>
+                    <Dialog.Close render={<Button variant="outline" color="neutral">Close</Button>} />
+                  </Dialog.Footer>
+                </Dialog.Content>
+              </Dialog>
+            </Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.Close render={<Button variant="outline" color="neutral">Close Parent</Button>} />
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog>
+      </>
+    );
+  }`
+};

apps/www/src/content/docs/components/dialog/index.mdx

@@ -4,7 +4,7 @@ description: A window overlaid on either the primary window or another dialog wi
 source: packages/raystack/components/dialog
 ---
 
-import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo } from "./demo.ts";
+import { playground, closeDemo, customDemo, controlledDemo, onlyHeaderDemo, onlyFooterDemo, nestedDemo } from "./demo.ts";
 
 <Demo data={playground} />
 
@@ -79,6 +79,11 @@ Example with header and body.
 
 <Demo data={onlyFooterDemo} />
 
+### Nested Dialogs
+
+You can nest dialogs within one another. When a nested dialog opens, the parent dialog automatically scales down and becomes slightly transparent. The nested dialog's backdrop won't be rendered, allowing you to see the parent dialog behind it.
+
+<Demo data={nestedDemo} />
 
 ### Accessibility
 

apps/www/src/content/docs/components/dialog/props.ts

@@ -16,26 +16,28 @@ export interface DialogContentProps {
   /** Controls dialog width */
   width?: string | number;
 
-  /** Enables backdrop blur effect */
-  overlayBlur?: boolean;
+  /**
+   * Controls whether to show the close button
+   * @default true
+   */
+  showCloseButton?: boolean;
 
-  /** Custom class for overlay styling */
-  overlayClassName?: string;
+  /**
+   * Toggle nested dialog animation (scaling and translation)
+   * @default true
+   */
+  showNestedAnimation?: boolean;
 
-  /** Custom styles for overlay */
-  overlayStyle?: React.CSSProperties;
+  /** Overlay configuration including blur, className, and style */
+  overlay?: {
+    blur?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    forceRender?: boolean;
+  } & React.ComponentPropsWithoutRef<'div'>;
 
   /** Additional CSS class names */
   className?: string;
-
-  /** Position of the dialog */
-  side?: 'top' | 'right' | 'bottom' | 'left';
-
-  /** Accessible label for the dialog */
-  ariaLabel?: string;
-
-  /** Detailed description for screen readers */
-  ariaDescription?: string;
 }
 
 export interface DialogHeaderProps {

apps/www/src/styles.css

@@ -1,5 +1,4 @@
 * {
-  overscroll-behavior: none;
   box-sizing: border-box;
 }
 :root {

packages/raystack/components/dialog/__tests__/dialog.test.tsx

@@ -24,7 +24,6 @@ const BasicDialog = ({
     <Dialog.Content>
       <Dialog.Header>
         <Dialog.Title>{DIALOG_TITLE}</Dialog.Title>
-        <Dialog.CloseButton />
       </Dialog.Header>
       <Dialog.Body>
         <Dialog.Description>{DIALOG_DESCRIPTION}</Dialog.Description>