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/components/typetable/typetable.module.css

@@ -99,3 +99,8 @@
   flex-wrap: wrap;
   gap: var(--rs-space-1);
 }
+.required {
+  color: var(--rs-color-foreground-danger-primary);
+  position: relative;
+  top: -4px;
+}

apps/www/src/components/typetable/typetable.tsx

@@ -45,7 +45,10 @@ export interface TypeNode {
 export function TypeTable({
   type,
   className
-}: { type: Record<string, TypeNode>; className?: string }) {
+}: {
+  type: Record<string, TypeNode>;
+  className?: string;
+}) {
   const entries = Object.entries(type);
 
   return (
@@ -87,7 +90,7 @@ function Item({
           className={deprecated ? styles.propNameDeprecated : styles.propName}
         >
           {name}
-          {!required && '?'}
+          {required ? <span className={styles.required}>*</span> : ''}
         </code>
         <span className={styles.fieldValue}>
           {typeDescriptionLink ? (
@@ -130,7 +133,10 @@ function Item({
                 language='tsx'
                 className={cx(styles.fieldCode, styles.fieldValue)}
               >
-                {String(typeDescription ?? type)}
+                {String(type) +
+                  (!required && !String(type).includes('undefined')
+                    ? ' | undefined'
+                    : '')}
               </CodeBlock.Code>
             </CodeBlock>
           </Flex>

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

@@ -2,6 +2,7 @@
 title: Avatar
 description: An image element with a fallback for representing the user.
 source: packages/raystack/components/avatar
+tag: new
 ---
 
 import {

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

@@ -44,8 +44,14 @@ export interface AvatarProps {
     | 'crimson'
     | 'gold';
 
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Allows you to replace the component's HTML element with a different tag,
+   * or compose it with another component. Accepts a ReactElement or a function
+   * that returns the element to render.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?: React.ReactElement;
 
   /** Additional CSS class names */
   className?: string;

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

@@ -13,9 +13,14 @@ export const playground = {
   type: 'playground',
   controls: {
     checked: {
-      type: 'select',
-      options: ['true', 'false', 'indeterminate'],
-      initialValue: 'true'
+      type: 'checkbox',
+      initialValue: false,
+      defaultValue: false
+    },
+    indeterminate: {
+      type: 'checkbox',
+      initialValue: false,
+      defaultValue: false
     },
     disabled: {
       type: 'checkbox',
@@ -34,11 +39,11 @@ export const statesExamples = {
     },
     {
       name: 'Checked',
-      code: `<Checkbox checked={true} />`
+      code: `<Checkbox checked/>`
     },
     {
       name: 'Indeterminate',
-      code: `<Checkbox checked="indeterminate" />`
+      code: `<Checkbox indeterminate />`
     },
     {
       name: 'Disabled',

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

@@ -2,17 +2,22 @@ export interface CheckboxProps {
   /**
    * The controlled state of the checkbox
    */
-  checked?: boolean | 'indeterminate';
+  checked?: boolean;
 
   /**
    * The default state when initially rendered
    */
-  defaultChecked?: boolean | 'indeterminate';
+  defaultChecked?: boolean;
 
   /**
    * Event handler called when the state changes
    */
-  onCheckedChange?: (checked: boolean | 'indeterminate') => void;
+  onCheckedChange?: (checked: boolean) => void;
+
+  /**
+   * When true, the checkbox is in an indeterminate state
+   */
+  indeterminate?: boolean;
 
   /**
    * When true, prevents the user from interacting with the checkbox

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>\`}`;