feat: migrate Sheet to Base UI

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

@@ -5,12 +5,15 @@ import { getPropsString } from '@/lib/utils';
 export const getCode = (props: any) => {
   return `
     <Sheet>
-      <Sheet.Trigger asChild>
+      <Sheet.Trigger>
         <Button>Sheet</Button>
       </Sheet.Trigger>
       <Sheet.Content${getPropsString(props)}>
-        <Sheet.Title>Sheet</Sheet.Title>
-        <Sheet.Description>A simple sheet</Sheet.Description>
+        <Sheet.Header>
+          <Sheet.Title>Sheet</Sheet.Title>
+          <Sheet.Description>A simple sheet</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>Content goes here</Sheet.Body>
       </Sheet.Content>
     </Sheet>`;
 };
@@ -23,9 +26,9 @@ export const playground = {
       options: ['top', 'right', 'bottom', 'left'],
       defaultValue: 'right'
     },
-    close: {
+    showCloseButton: {
       type: 'checkbox',
-      defaultValue: false
+      defaultValue: true
     }
   },
   getCode
@@ -35,56 +38,72 @@ export const basicDemo = {
   type: 'code',
   code: `
   <Sheet>
-  <Sheet.Trigger asChild>
-    <Button>Open Sheet</Button>
-  </Sheet.Trigger>
-  <Sheet.Content close>
-    <Sheet.Title>Sheet Title</Sheet.Title>
-    <Sheet.Description>Sheet description goes here</Sheet.Description>
-    <span>Main content of the sheet</span>
-  </Sheet.Content>
-</Sheet>`
+    <Sheet.Trigger>
+      <Button>Open Sheet</Button>
+    </Sheet.Trigger>
+    <Sheet.Content>
+      <Sheet.Header>
+        <Sheet.Title>Sheet Title</Sheet.Title>
+        <Sheet.Description>Sheet description goes here</Sheet.Description>
+      </Sheet.Header>
+      <Sheet.Body>
+        <span>Main content of the sheet</span>
+      </Sheet.Body>
+    </Sheet.Content>
+  </Sheet>`
 };
 
 export const positionDemo = {
   type: 'code',
   code: `
   <Flex gap="medium">
     <Sheet>
-    <Sheet.Trigger asChild>
-      <Button>Top Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content side="top" close>
-      <Sheet.Title>Top Sheet</Sheet.Title>
-      <Sheet.Description>Slides in from the Top</Sheet.Description>
-    </Sheet.Content>
+      <Sheet.Trigger>
+        <Button>Top Sheet</Button>
+      </Sheet.Trigger>
+      <Sheet.Content side="top">
+        <Sheet.Header>
+          <Sheet.Title>Top Sheet</Sheet.Title>
+          <Sheet.Description>Slides in from the Top</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>Content here</Sheet.Body>
+      </Sheet.Content>
+    </Sheet>
+    <Sheet>
+      <Sheet.Trigger>
+        <Button>Right Sheet</Button>
+      </Sheet.Trigger>
+      <Sheet.Content side="right">
+        <Sheet.Header>
+          <Sheet.Title>Right Sheet</Sheet.Title>
+          <Sheet.Description>Slides in from the Right</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>Content here</Sheet.Body>
+      </Sheet.Content>
+    </Sheet>
+    <Sheet>
+      <Sheet.Trigger>
+        <Button>Left Sheet</Button>
+      </Sheet.Trigger>
+      <Sheet.Content side="left">
+        <Sheet.Header>
+          <Sheet.Title>Left Sheet</Sheet.Title>
+          <Sheet.Description>Slides in from the Left</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>Content here</Sheet.Body>
+      </Sheet.Content>
+    </Sheet>
+    <Sheet>
+      <Sheet.Trigger>
+        <Button>Bottom Sheet</Button>
+      </Sheet.Trigger>
+      <Sheet.Content side="bottom">
+        <Sheet.Header>
+          <Sheet.Title>Bottom Sheet</Sheet.Title>
+          <Sheet.Description>Slides in from the Bottom</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>Content here</Sheet.Body>
+      </Sheet.Content>
     </Sheet>
-  <Sheet>
-    <Sheet.Trigger asChild>
-      <Button>Right Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content side="right" close>
-      <Sheet.Title>Right Sheet</Sheet.Title>
-      <Sheet.Description>Slides in from the Right</Sheet.Description>
-    </Sheet.Content>
-  </Sheet>
-  <Sheet>
-    <Sheet.Trigger asChild>
-      <Button>Left Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content side="left" close>
-      <Sheet.Title>Left Sheet</Sheet.Title>
-      <Sheet.Description>Slides in from the Left</Sheet.Description>
-    </Sheet.Content>
-  </Sheet>
-  <Sheet>
-    <Sheet.Trigger asChild>
-      <Button>Bottom Sheet</Button>
-    </Sheet.Trigger>
-    <Sheet.Content side="bottom" close>
-      <Sheet.Title>Bottom Sheet</Sheet.Title>
-      <Sheet.Description>Slides in from the Bottom</Sheet.Description>
-    </Sheet.Content>
-  </Sheet>
   </Flex>`
 };

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

@@ -22,13 +22,26 @@ import { Sheet } from "@raystack/apsara";
 
 <auto-type-table path="./props.ts" name="SheetContentProps" />
 
+### Sheet.Header Props
+
+- `children`: React.ReactNode - Content to render inside the header
+- `className`: string - Additional CSS class name
+
 ### Sheet.Title Props
 
-- Inherits all HTML heading element props
+- Inherits all Base UI Dialog.Title props
 
 ### Sheet.Description Props
 
-- Inherits all HTML paragraph element props
+- Inherits all Base UI Dialog.Description props
+
+### Sheet.Body Props
+
+- Inherits all HTML div element props
+
+### Sheet.Footer Props
+
+- Inherits all HTML div element props
 
 ## Examples
 
@@ -41,11 +54,3 @@ import { Sheet } from "@raystack/apsara";
 The Sheet can slide in from different sides of the screen.
 
 <Demo data={positionDemo} />
-
-## Accessibility
-
-Sheet components are built with proper accessibility features following WAI-ARIA guidelines:
-
-- Uses semantic HTML elements for proper structure
-- Dismiss button includes `aria-label` and `aria-description` for screen readers
-- Interactive elements are keyboard accessible

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

@@ -1,24 +1,35 @@
 export interface SheetProps {
-  /** The content to be rendered inside the sheet. */
-  children: React.ReactNode;
+  /** Boolean to control the default open state. */
+  defaultOpen?: boolean;
+
+  /** Controlled open state. */
+  open?: boolean;
 
-  /** Accessible label for the sheet trigger. */
-  ariaLabel?: string;
+  /** Callback when open state changes. */
+  onOpenChange?: (open: boolean) => void;
 }
 
 export interface SheetContentProps {
   /** The direction from which the sheet appears. */
   side?: 'top' | 'right' | 'bottom' | 'left';
 
   /** Whether to show the close button. */
-  close?: boolean;
+  showCloseButton?: boolean;
 
-  /** Accessible label for the sheet content. */
-  ariaLabel?: string;
+  /** Props to pass to the backdrop/overlay component. */
+  overlayProps?: {
+    className?: string;
+    style?: React.CSSProperties;
 
-  /** Accessible description for the sheet content. */
-  ariaDescription?: string;
+    forceRender?: boolean;
+  };
 
   /** The content to be rendered inside the sheet. */
-  children: React.ReactNode;
+  children?: React.ReactNode;
+
+  /** Additional CSS class name. */
+  className?: string;
+
+  /** Additional inline styles. */
+  style?: React.CSSProperties;
 }