feat: add drawer component based on Base UI DrawerPreview

apps/ui/app/particles/particle-card.tsx

@@ -4,7 +4,12 @@ import { HugeiconsIcon } from "@hugeicons/react";
 import { cache } from "react";
 import { Index } from "@/registry/__index__";
 import { Button } from "@/registry/default/ui/button";
-import { Sheet, SheetPopup, SheetTrigger } from "@/registry/default/ui/sheet";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPopup,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer";
 import { ParticleCardContainer } from "./particle-card-container";
 import { CodeBlockCommand } from "@/components/code-block-command";
 import { ComponentSource } from "@/components/component-source";
@@ -77,16 +82,21 @@ export async function ParticleCard({
               value={`${cossuiUrl}/r/${name}.json`}
               variant="outline"
             />
-            <Sheet>
-              <SheetTrigger
+            <Drawer position="right">
+              <DrawerTrigger
                 render={
                   <Button className="text-sm" size="sm" variant="outline" />
                 }
               >
                 View code
-              </SheetTrigger>
-              <SheetPopup className="sm:max-w-3xl" showCloseButton={false}>
-                <div className="flex flex-1 flex-col overflow-hidden p-6">
+              </DrawerTrigger>
+              <DrawerPopup
+                className="max-w-4xl"
+                showBar
+                showCloseButton={false}
+                variant="straight"
+              >
+                <DrawerContent className="flex flex-1 flex-col overflow-hidden p-6">
                   <div>
                     <h2 className="mb-4 font-heading font-semibold text-xl">
                       Installation
@@ -125,9 +135,9 @@ export async function ParticleCard({
                       name={name}
                     />
                   </div>
-                </div>
-              </SheetPopup>
-            </Sheet>
+                </DrawerContent>
+              </DrawerPopup>
+            </Drawer>
           </div>
         </>
       }

apps/ui/components/category-thumbnails.tsx

@@ -450,6 +450,20 @@ export const datePickerThumbnail = (
   </Card>
 );
 
+// Drawer
+export const drawerThumbnail = (
+  <div className="flex h-full w-full flex-1 flex-col justify-end gap-2">
+    <div className="flex-1 rounded-xl border border-input border-dashed" />
+    <Card className="max-w-none shrink-0 [--radius-2xl:14px]">
+      <CardPanel className="pt-1 pb-12">
+        <div className="flex justify-center py-2">
+          <div className="h-1 w-12 rounded-full bg-muted-foreground/30" />
+        </div>
+      </CardPanel>
+    </Card>
+  </div>
+);
+
 // Dialog
 export const dialogThumbnail = (
   <Card className="max-w-36 [--radius-2xl:14px]">
@@ -974,6 +988,7 @@ export const categoryThumbnails: Record<string, ReactNode> = {
   command: commandThumbnail,
   "date-picker": datePickerThumbnail,
   dialog: dialogThumbnail,
+  drawer: drawerThumbnail,
   empty: emptyThumbnail,
   field: fieldThumbnail,
   fieldset: fieldsetThumbnail,

apps/ui/components/mobile-nav.tsx

@@ -7,7 +7,12 @@ import { useRouter } from "next/navigation";
 import * as React from "react";
 import { Badge } from "@/registry/default/ui/badge";
 import { Button } from "@/registry/default/ui/button";
-import { Sheet, SheetPopup, SheetTrigger } from "@/registry/default/ui/sheet";
+import {
+  Drawer,
+  DrawerPanel,
+  DrawerPopup,
+  DrawerTrigger,
+} from "@/registry/default/ui/drawer";
 import { PAGES_NEW } from "@/lib/docs";
 import type { source } from "@/lib/source";
 import { cn } from "@/lib/utils";
@@ -24,8 +29,8 @@ export function MobileNav({
   const [open, setOpen] = React.useState(false);
 
   return (
-    <Sheet onOpenChange={setOpen} open={open}>
-      <SheetTrigger
+    <Drawer onOpenChange={setOpen} open={open} position="left">
+      <DrawerTrigger
         render={
           <Button
             className={cn("relative -ms-1.5 size-8", className)}
@@ -41,8 +46,11 @@ export function MobileNav({
           </Button>
         }
       />
-      <SheetPopup side="left">
-        <div className="flex flex-col gap-12 overflow-auto p-6 pt-8">
+      <DrawerPopup showCloseButton variant="straight">
+        <DrawerPanel
+          className="flex flex-col gap-12 p-6 pt-8"
+          scrollFade={false}
+        >
           <div className="flex flex-col gap-3">
             <div className="font-medium text-sm">Menu</div>
             <div className="flex flex-col gap-1">
@@ -92,9 +100,9 @@ export function MobileNav({
               return null;
             })}
           </div>
-        </div>
-      </SheetPopup>
-    </Sheet>
+        </DrawerPanel>
+      </DrawerPopup>
+    </Drawer>
   );
 }
 

apps/ui/content/docs/components/dialog.mdx

@@ -99,11 +99,11 @@ Popup container that displays the dialog content. Also exported as `DialogConten
 
 ### DialogHeader
 
-Container for the dialog title and description.
+Container for the dialog title and description. Supports the `render` prop for polymorphic composition (e.g. `render={<Link href="/" />}`).
 
 ### DialogFooter
 
-Footer section for action buttons.
+Footer section for action buttons. Supports the `render` prop for polymorphic composition.
 
 | Prop        | Type                     | Default     | Description                                      |
 | ----------- | ------------------------ | ----------- | ------------------------------------------------ |
@@ -135,7 +135,7 @@ Description component. Alias for `Dialog.Description` from Base UI.
 
 ### DialogPanel
 
-Scrollable content container. Automatically wraps content in a `ScrollArea` component.
+Scrollable content container. Automatically wraps content in a `ScrollArea` component. Supports the `render` prop for polymorphic composition.
 
 | Prop         | Type      | Default | Description                                      |
 | ------------ | --------- | ------- | ------------------------------------------------ |