lfg

components/doc-refs.tsx

@@ -16,7 +16,7 @@ import {
 import { Menu, MenuItem } from "react-aria-components"
 import { buttonStyles, cn } from "ui"
 
-export function DocRefs({ references }: any) {
+export function DocRefs({ references }: { references: string[] }) {
   const urls = references.map((url: string) => {
     let title = ""
     let icon: FC<SVGProps<SVGSVGElement>>
@@ -50,6 +50,10 @@ export function DocRefs({ references }: any) {
         title = "Cmdk"
         icon = IconCommandFill
         break
+      case url.includes("vaul"):
+        title = "Vaul"
+        icon = () => null
+        break
       case url.includes("github"):
         title = "Github"
         icon = IconBrandGithub
@@ -71,7 +75,7 @@ export function DocRefs({ references }: any) {
 
   return (
     <Menu className="not-prose gap-x-2 flex" aria-label="Link References" items={urls}>
-      {(item: any) => (
+      {(item: { url: string; title: string; icon: FC<SVGProps<SVGSVGElement>> }) => (
         <MenuItem
           target="_blank"
           className={cn(
@@ -84,7 +88,8 @@ export function DocRefs({ references }: any) {
           id={item.url}
           href={item.url}
         >
-          <item.icon />
+          {item.icon && <item.icon />}
+
           {item.title === "Props Reference" ? (
             <span>
               Props <span className="sm:inline hidden">Reference</span>

components/docs/anatomies/drawer-anatomy.tsx

@@ -1,19 +1,18 @@
-import { Drawer } from "ui"
+import { Button, Drawer } from "ui"
 
 export default function DrawerAnatomy() {
   return (
     <Drawer>
-      <Drawer.Trigger>Open</Drawer.Trigger>
+      <Drawer.Trigger />
       <Drawer.Content>
         <Drawer.Header>
-          <Drawer.Title>Nirvana: The Band</Drawer.Title>
-          <Drawer.Description>
-            A brief overview of the influential rock band Nirvana.
-          </Drawer.Description>
+          <Drawer.Title />
+          <Drawer.Description />
         </Drawer.Header>
-        <Drawer.Body>...</Drawer.Body>
+        <Drawer.Body />
         <Drawer.Footer>
-          <Drawer.Close shape="circle">Close</Drawer.Close>
+          <Drawer.Close />
+          <Button />
         </Drawer.Footer>
       </Drawer.Content>
     </Drawer>

components/docs/generated/previews.ts

@@ -326,21 +326,21 @@ export const previews: Record<string, any> = {
   "buttons/button/button-link-demo": {
     component: React.lazy(() => import("@/components/docs/buttons/button/button-link-demo")),
   },
-  "overlays/drawer/drawer-nested-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-nested-demo")),
+  "overlays/drawer/drawer-direction-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-direction-demo")),
+  },
+  "overlays/drawer/drawer-hide-notch-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-hide-notch-demo")),
   },
   "overlays/drawer/drawer-basic-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-basic-demo")),
   },
-  "overlays/drawer/drawer-sticky-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-sticky-demo")),
+  "overlays/drawer/drawer-is-not-centered-demo": {
+    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-is-not-centered-demo")),
   },
   "overlays/drawer/drawer-controlled-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-controlled-demo")),
   },
-  "overlays/drawer/drawer-without-notch-demo": {
-    component: React.lazy(() => import("@/components/docs/overlays/drawer/drawer-without-notch-demo")),
-  },
   "overlays/tooltip/tooltip-delay-demo": {
     component: React.lazy(() => import("@/components/docs/overlays/tooltip/tooltip-delay-demo")),
   },

components/docs/overlays/drawer/drawer-basic-demo.tsx

@@ -1,30 +1,25 @@
 "use client"
 
-import React from "react"
-
-import { buttonStyles, Drawer } from "ui"
+import { Button, buttonStyles, Drawer, TextField } from "ui"
 
 export default function DrawerBasicDemo() {
   return (
     <Drawer>
-      <Drawer.Trigger className={buttonStyles({ shape: "circle", appearance: "outline" })}>
-        Open
-      </Drawer.Trigger>
+      <Drawer.Trigger className={buttonStyles({ appearance: "outline" })}>Login</Drawer.Trigger>
       <Drawer.Content>
         <Drawer.Header>
-          <Drawer.Title>Nirvana: The Band</Drawer.Title>
+          <Drawer.Title>Login</Drawer.Title>
           <Drawer.Description>
-            A brief overview of the influential rock band Nirvana.
+            Please enter your credentials to access your account.
           </Drawer.Description>
         </Drawer.Header>
-        <Drawer.Body>
-          Nirvana was an American rock band formed in 1987, fronted by Kurt Cobain, with Krist
-          Novoselic on bass and Dave Grohl on drums. They played a key role in bringing grunge music
-          into the mainstream with their breakthrough album, *Nevermind* (1991), which featured the
-          hit single "Smells Like Teen Spirit."
+        <Drawer.Body className="space-y-4">
+          <TextField autoFocus label="Email" placeholder="john.doe@example.com" />
+          <TextField label="Password" type="password" placeholder="••••••••••••" />
         </Drawer.Body>
         <Drawer.Footer>
-          <Drawer.Close shape="circle">Close</Drawer.Close>
+          <Drawer.Close>Cancel</Drawer.Close>
+          <Button>Login</Button>
         </Drawer.Footer>
       </Drawer.Content>
     </Drawer>

components/docs/overlays/drawer/drawer-controlled-demo.tsx

@@ -2,35 +2,24 @@
 
 import React from "react"
 
-import { Button, Drawer, TextField } from "ui"
+import { Button, Drawer } from "ui"
 
 export default function DrawerControlledDemo() {
   const [isOpen, setIsOpen] = React.useState(false)
   return (
     <>
-      <Button onPress={() => setIsOpen(!isOpen)} appearance="outline">
-        Login
-      </Button>
+      <Button onPress={() => setIsOpen(true)}>Open Drawer</Button>
       <Drawer isOpen={isOpen} onOpenChange={setIsOpen}>
         <Drawer.Content>
           <Drawer.Header>
-            <Drawer.Title>Login</Drawer.Title>
+            <Drawer.Title>Drawer</Drawer.Title>
             <Drawer.Description>
-              Please enter your credentials to access your account.
+              A slide-in overlay for extra content or options.
             </Drawer.Description>
           </Drawer.Header>
-          <Drawer.Body className="flex flex-col gap-4">
-            <TextField label="Email" isRequired type="email" placeholder="Enter your email" />
-            <TextField
-              label="Password"
-              isRequired
-              type="password"
-              placeholder="Enter your password"
-            />
-          </Drawer.Body>
           <Drawer.Footer>
             <Drawer.Close>Close</Drawer.Close>
-            <Button onPress={() => setIsOpen(false)}>Login</Button>
+            <Button>Done</Button>
           </Drawer.Footer>
         </Drawer.Content>
       </Drawer>

components/docs/overlays/drawer/drawer-direction-demo.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import React from "react"
+
+import { Button, Drawer } from "ui"
+
+type Sides = "bottom" | "top" | "left" | "right"
+
+export default function DrawerDirectionDemo() {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [openSide, setOpenSide] = React.useState<Sides>("bottom")
+  const sides: Sides[] = ["bottom", "top", "left", "right"]
+  const handlePress = (side: Sides) => {
+    setOpenSide(side)
+    setIsOpen(true)
+  }
+  return (
+    <div>
+      <div className="flex gap-2 flex-wrap">
+        {sides.map((side) => (
+          <Button key={side} appearance="outline" onPress={() => handlePress(side)}>
+            {side}
+          </Button>
+        ))}
+      </div>
+
+      <Drawer side={openSide} isOpen={isOpen} onOpenChange={setIsOpen}>
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title className="capitalize">{openSide}</Drawer.Title>
+            <Drawer.Description>The drawer will slide in from the {openSide}.</Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Footer>
+            <Drawer.Close shape="circle" className="w-full">
+              Close
+            </Drawer.Close>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer>
+    </div>
+  )
+}

components/docs/overlays/drawer/drawer-hide-notch-demo.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import { Button, buttonStyles, Drawer } from "ui"
+
+export default function DrawerHideNotchDemo() {
+  return (
+    <Drawer hideNotch>
+      <Drawer.Trigger className={buttonStyles({ appearance: "outline" })}>
+        Open Drawer
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Drawer</Drawer.Title>
+          <Drawer.Description>A slide-in overlay for extra content or options.</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Footer>
+          <Drawer.Close>Close</Drawer.Close>
+          <Button>Done</Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}

components/docs/overlays/drawer/drawer-is-not-centered-demo.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import { Button, buttonStyles, Drawer } from "ui"
+
+export default function DrawerIsNotCenteredDemo() {
+  return (
+    <Drawer isCentered={false}>
+      <Drawer.Trigger className={buttonStyles({ appearance: "outline" })}>
+        Open Drawer
+      </Drawer.Trigger>
+      <Drawer.Content>
+        <Drawer.Header>
+          <Drawer.Title>Drawer</Drawer.Title>
+          <Drawer.Description>A slide-in overlay for extra content or options.</Drawer.Description>
+        </Drawer.Header>
+        <Drawer.Body>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sus</Drawer.Body>
+        <Drawer.Footer>
+          <Drawer.Close>Close</Drawer.Close>
+          <Button>Done</Button>
+        </Drawer.Footer>
+      </Drawer.Content>
+    </Drawer>
+  )
+}