From 552a100d64584bdb4a0b4676183c5e37539bf759 Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 19 May 2026 11:02:10 +0530
Subject: [PATCH 1/2] fix: dialog styles

---
 .../docs/components/alert-dialog/demo.ts      | 16 +++++++-------
 .../docs/components/alert-dialog/index.mdx    |  5 ++---
 .../alert-dialog/alert-dialog-misc.tsx        |  8 +++----
 .../alert-dialog/alert-dialog.module.css      | 17 ++++++++++++++
 .../components/dialog/dialog-misc.tsx         |  8 +++----
 .../components/dialog/dialog.module.css       | 22 ++++---------------
 6 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/apps/www/src/content/docs/components/alert-dialog/demo.ts b/apps/www/src/content/docs/components/alert-dialog/demo.ts
index 9fa192183..c2a386eb3 100644
--- a/apps/www/src/content/docs/components/alert-dialog/demo.ts
+++ b/apps/www/src/content/docs/components/alert-dialog/demo.ts
@@ -7,13 +7,13 @@ export const getCode = (props: { title?: string; description?: string }) => {
       <AlertDialog.Trigger render={<Button color="danger" />}>
         Discard draft
       </AlertDialog.Trigger>
-      <AlertDialog.Content width={400}>
-        <AlertDialog.Body>
+      <AlertDialog.Content>
+        <AlertDialog.Header>
           <AlertDialog.Title>${title}</AlertDialog.Title>
           <AlertDialog.Description>
           ${description}
           </AlertDialog.Description>
-        </AlertDialog.Body>
+        </AlertDialog.Header>
         <AlertDialog.Footer>
           <AlertDialog.Close render={<Button variant="outline" color="neutral">Cancel</Button>} />
           <AlertDialog.Close render={<Button color="danger">Discard</Button>} />
@@ -45,7 +45,7 @@ export const controlledDemo = {
         <AlertDialog.Trigger render={<Button color="danger" />}>
           Delete Account
         </AlertDialog.Trigger>
-        <AlertDialog.Content width={450}>
+        <AlertDialog.Content>
           <AlertDialog.Header>
             <AlertDialog.Title>Delete Account</AlertDialog.Title>
           </AlertDialog.Header>
@@ -88,7 +88,7 @@ export const menuDemo = {
         </Menu>
 
         <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>
-          <AlertDialog.Content width={400}>
+          <AlertDialog.Content>
             <AlertDialog.Body>
               <AlertDialog.Title>Delete item?</AlertDialog.Title>
               <AlertDialog.Description>
@@ -113,7 +113,7 @@ export const discardDemo = {
     <AlertDialog.Trigger render={<Button variant="outline" />}>
       Discard Changes
     </AlertDialog.Trigger>
-    <AlertDialog.Content width={400}>
+    <AlertDialog.Content>
       <AlertDialog.Header>
         <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
       </AlertDialog.Header>
@@ -139,7 +139,7 @@ export const nestedDemo = {
         <AlertDialog.Trigger render={<Button color="danger" />}>
           Delete Workspace
         </AlertDialog.Trigger>
-        <AlertDialog.Content width={450}>
+        <AlertDialog.Content>
           <AlertDialog.Header>
             <AlertDialog.Title>Delete Workspace</AlertDialog.Title>
           </AlertDialog.Header>
@@ -151,7 +151,7 @@ export const nestedDemo = {
               <AlertDialog.Trigger render={<Button color="danger" size="small" />}>
                 Confirm Delete
               </AlertDialog.Trigger>
-              <AlertDialog.Content width={400}>
+              <AlertDialog.Content>
                 <AlertDialog.Body>
                   <AlertDialog.Title>Final Confirmation</AlertDialog.Title>
                   <AlertDialog.Description>
diff --git a/apps/www/src/content/docs/components/alert-dialog/index.mdx b/apps/www/src/content/docs/components/alert-dialog/index.mdx
index 0230cdad6..0722db7f8 100644
--- a/apps/www/src/content/docs/components/alert-dialog/index.mdx
+++ b/apps/www/src/content/docs/components/alert-dialog/index.mdx
@@ -21,10 +21,9 @@ import { AlertDialog } from '@raystack/apsara'
   <AlertDialog.Content>
     <AlertDialog.Header>
       <AlertDialog.Title />
-    </AlertDialog.Header>
-    <AlertDialog.Body>
       <AlertDialog.Description />
-    </AlertDialog.Body>
+    </AlertDialog.Header>
+    <AlertDialog.Body />
     <AlertDialog.Footer>
       <AlertDialog.Close />
     </AlertDialog.Footer>
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
index 00551e110..489cd2d81 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
@@ -13,9 +13,9 @@ export const AlertDialogHeader = ({
   ...props
 }: ComponentProps<typeof Flex>) => (
   <Flex
-    justify='between'
-    align='center'
-    className={cx(styles.header, className)}
+    direction='column'
+    gap={3}
+    className={cx(styles.header, alertDialogStyles.header, className)}
     {...props}
   />
 );
@@ -43,7 +43,7 @@ export const AlertDialogBody = ({
   <Flex
     direction='column'
     gap={3}
-    className={cx(styles.body, className)}
+    className={cx(styles.body, alertDialogStyles.body, className)}
     {...props}
   />
 );
diff --git a/packages/raystack/components/alert-dialog/alert-dialog.module.css b/packages/raystack/components/alert-dialog/alert-dialog.module.css
index 0501f2f89..d66224258 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog.module.css
+++ b/packages/raystack/components/alert-dialog/alert-dialog.module.css
@@ -1,3 +1,20 @@
+.header {
+  padding: var(--rs-space-7);
+  border-bottom: 0;
+}
+
+.header:has(+ .body) {
+  padding-bottom: var(--rs-space-5);
+}
+
+.body {
+  padding: 0 var(--rs-space-7) var(--rs-space-5);
+}
+
+.body:first-child {
+  padding: var(--rs-space-7);
+}
+
 .footer {
   border-top: 0;
 }
diff --git a/packages/raystack/components/dialog/dialog-misc.tsx b/packages/raystack/components/dialog/dialog-misc.tsx
index 218948816..bbff676b7 100644
--- a/packages/raystack/components/dialog/dialog-misc.tsx
+++ b/packages/raystack/components/dialog/dialog-misc.tsx
@@ -5,6 +5,7 @@ import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import { Flex } from '../flex';
+import { IconButton } from '../icon-button';
 import styles from './dialog.module.css';
 
 export function DialogHeader({
@@ -55,14 +56,11 @@ export function DialogBody({
 
 DialogBody.displayName = 'Dialog.Body';
 
-export function CloseButton({
-  className,
-  ...props
-}: DialogPrimitive.Close.Props) {
+export function CloseButton(props: DialogPrimitive.Close.Props) {
   return (
     <DialogPrimitive.Close
-      className={cx(styles.close, className)}
       aria-label='Close dialog'
+      render={<IconButton size={3} />}
       {...props}
     >
       <Cross1Icon aria-hidden='true' />
diff --git a/packages/raystack/components/dialog/dialog.module.css b/packages/raystack/components/dialog/dialog.module.css
index bdc8a24a4..eb1562737 100644
--- a/packages/raystack/components/dialog/dialog.module.css
+++ b/packages/raystack/components/dialog/dialog.module.css
@@ -17,6 +17,7 @@
   box-shadow: var(--rs-shadow-floating);
   max-width: 90vw;
   min-width: 200px;
+  width: 400px;
   min-height: 100px;
   max-height: 85vh;
   padding: 0;
@@ -55,27 +56,12 @@
   transform: translate(-50%, min(160px, calc(50vh - 50%))) scale(0.9);
 }
 
-.close {
-  all: unset;
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--rs-radius-2);
-  padding: var(--rs-space-2);
-  font-weight: var(--rs-font-weight-medium);
-  cursor: pointer;
-}
-
 .closeButton {
   position: absolute;
-  top: var(--rs-space-5);
+  top: 18px;
   right: var(--rs-space-7);
 }
 
-.close:hover {
-  background-color: var(--rs-color-background-base-primary-hover);
-  color: var(--rs-color-foreground-base-primary);
-}
-
 .overlayBlur {
   backdrop-filter: var(--rs-blur-lg);
 }
@@ -93,7 +79,7 @@
   .dialogContent {
     transition:
       opacity 150ms,
-      transform 150ms;
+      transform 150ms ease;
   }
 }
 
@@ -113,7 +99,7 @@
 }
 
 .body {
-  padding: var(--rs-space-7);
+  padding: var(--rs-space-9) var(--rs-space-7);
 }
 
 :where(.body) + .footer {

From 37c2225c554fd20f30fe75e497ca53383013f01a Mon Sep 17 00:00:00 2001
From: Rohan Chakraborty <irohan1999@gmail.com>
Date: Tue, 19 May 2026 11:07:11 +0530
Subject: [PATCH 2/2] fix: remove closeButton from alert dialog

---
 .../playground/alert-dialog-examples.tsx      |  2 +-
 .../docs/components/alert-dialog/index.mdx    |  6 ------
 .../docs/components/alert-dialog/props.ts     | 19 -------------------
 .../__tests__/alert-dialog.test.tsx           | 16 +---------------
 .../alert-dialog/alert-dialog-content.tsx     |  4 ----
 .../alert-dialog/alert-dialog-misc.tsx        | 18 ------------------
 .../components/alert-dialog/alert-dialog.tsx  |  4 +---
 7 files changed, 3 insertions(+), 66 deletions(-)

diff --git a/apps/www/src/components/playground/alert-dialog-examples.tsx b/apps/www/src/components/playground/alert-dialog-examples.tsx
index 603b9039d..7923e9e0c 100644
--- a/apps/www/src/components/playground/alert-dialog-examples.tsx
+++ b/apps/www/src/components/playground/alert-dialog-examples.tsx
@@ -37,7 +37,7 @@ export function AlertDialogExamples() {
           <AlertDialog.Trigger render={<Button variant='outline' />}>
             Discard Changes
           </AlertDialog.Trigger>
-          <AlertDialog.Content width={400} showCloseButton={false}>
+          <AlertDialog.Content width={400}>
             <AlertDialog.Body>
               <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
               <AlertDialog.Description>
diff --git a/apps/www/src/content/docs/components/alert-dialog/index.mdx b/apps/www/src/content/docs/components/alert-dialog/index.mdx
index 0722db7f8..193ca9870 100644
--- a/apps/www/src/content/docs/components/alert-dialog/index.mdx
+++ b/apps/www/src/content/docs/components/alert-dialog/index.mdx
@@ -75,12 +75,6 @@ Renders the element that opens the alert dialog.
 
 <auto-type-table path="./props.ts" name="AlertDialogTriggerProps" />
 
-### CloseButton
-
-Renders a button that closes the alert dialog.
-
-<auto-type-table path="./props.ts" name="AlertDialogCloseButtonProps" />
-
 ### Footer
 
 Renders the alert dialog footer section.
diff --git a/apps/www/src/content/docs/components/alert-dialog/props.ts b/apps/www/src/content/docs/components/alert-dialog/props.ts
index d2bbf5e1b..9bca5916d 100644
--- a/apps/www/src/content/docs/components/alert-dialog/props.ts
+++ b/apps/www/src/content/docs/components/alert-dialog/props.ts
@@ -10,12 +10,6 @@ export interface AlertDialogContentProps {
   /** Controls alert dialog width */
   width?: string | number;
 
-  /**
-   * Controls whether to show the close button
-   * @default false
-   */
-  showCloseButton?: boolean;
-
   /**
    * Toggle nested dialog animation (scaling and translation)
    * @default true
@@ -73,19 +67,6 @@ export interface AlertDialogTriggerProps {
   className?: string;
 }
 
-export interface AlertDialogCloseButtonProps {
-  /**
-   * Allows rendering as a different element.
-   * Accepts a React element or a function that receives props and returns an element.
-   *
-   * @remarks `ReactElement | function`
-   */
-  render?: React.ReactElement;
-
-  /** Additional CSS class names */
-  className?: string;
-}
-
 export interface AlertDialogFooterProps {
   /** Additional CSS class names */
   className?: string;
diff --git a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
index bccb25da7..ba5f1be6f 100644
--- a/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
+++ b/packages/raystack/components/alert-dialog/__tests__/alert-dialog.test.tsx
@@ -22,7 +22,7 @@ const BasicAlertDialog = ({
 }) => (
   <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
     <AlertDialog.Trigger>{TRIGGER_TEXT}</AlertDialog.Trigger>
-    <AlertDialog.Content showCloseButton>
+    <AlertDialog.Content>
       <AlertDialog.Header>
         <AlertDialog.Title>{ALERT_TITLE}</AlertDialog.Title>
       </AlertDialog.Header>
@@ -91,20 +91,6 @@ describe('AlertDialog', () => {
   });
 
   describe('Close Behavior', () => {
-    it('closes when close button is clicked', async () => {
-      renderAndOpenAlertDialog(<BasicAlertDialog />);
-
-      await waitFor(() => {
-        expect(screen.getByRole('alertdialog')).toBeInTheDocument();
-      });
-
-      fireEvent.click(screen.getByRole('button', { name: 'Close dialog' }));
-
-      await waitFor(() => {
-        expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument();
-      });
-    });
-
     it('closes when AlertDialog.Close is clicked', async () => {
       renderAndOpenAlertDialog(<BasicAlertDialog />);
 
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
index e659d1307..d3f807e72 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-content.tsx
@@ -3,11 +3,9 @@
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
 import styles from '../dialog/dialog.module.css';
-import { CloseButton } from './alert-dialog-misc';
 
 export interface AlertDialogContentProps
   extends AlertDialogPrimitive.Popup.Props {
-  showCloseButton?: boolean;
   overlay?: AlertDialogPrimitive.Backdrop.Props & { blur?: boolean };
   width?: string | number;
   /**
@@ -20,7 +18,6 @@ export interface AlertDialogContentProps
 export const AlertDialogContent = ({
   className,
   children,
-  showCloseButton = false,
   overlay,
   width,
   style,
@@ -48,7 +45,6 @@ export const AlertDialogContent = ({
           {...props}
         >
           {children}
-          {showCloseButton && <CloseButton className={styles.closeButton} />}
         </AlertDialogPrimitive.Popup>
       </AlertDialogPrimitive.Viewport>
     </AlertDialogPrimitive.Portal>
diff --git a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
index 489cd2d81..2dd4a1da2 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog-misc.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react';
-import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
 import styles from '../dialog/dialog.module.css';
@@ -50,23 +49,6 @@ export const AlertDialogBody = ({
 
 AlertDialogBody.displayName = 'AlertDialog.Body';
 
-export const CloseButton = ({
-  className,
-  ...props
-}: AlertDialogPrimitive.Close.Props) => {
-  return (
-    <AlertDialogPrimitive.Close
-      className={cx(styles.close, className)}
-      aria-label='Close dialog'
-      {...props}
-    >
-      <Cross1Icon aria-hidden='true' />
-    </AlertDialogPrimitive.Close>
-  );
-};
-
-CloseButton.displayName = 'AlertDialog.CloseButton';
-
 export const AlertDialogTitle = ({
   className,
   ...props
diff --git a/packages/raystack/components/alert-dialog/alert-dialog.tsx b/packages/raystack/components/alert-dialog/alert-dialog.tsx
index 74eded57e..b3f7be7d3 100644
--- a/packages/raystack/components/alert-dialog/alert-dialog.tsx
+++ b/packages/raystack/components/alert-dialog/alert-dialog.tsx
@@ -5,8 +5,7 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle,
-  CloseButton
+  AlertDialogTitle
 } from './alert-dialog-misc';
 
 export const AlertDialog = Object.assign(AlertDialogPrimitive.Root, {
@@ -16,7 +15,6 @@ export const AlertDialog = Object.assign(AlertDialogPrimitive.Root, {
   Trigger: AlertDialogPrimitive.Trigger,
   Content: AlertDialogContent,
   Close: AlertDialogPrimitive.Close,
-  CloseButton: CloseButton,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
   createHandle: AlertDialogPrimitive.createHandle