-
onClick(-10)}
- disabled={goal <= 200}
- >
- {t.decrease}
-
-
-
- {goal.toLocaleString(locale)}
-
-
- {t.caloriesPerDay}
+
{t.trigger}} />
+
+
+
+
+ {t.title}
+ {t.description}
+
+
+
+
onClick(-10)}
+ disabled={goal <= 200}
+ >
+ {t.decrease}
+
+
+
+ {goal.toLocaleString(locale)}
+
+
+ {t.caloriesPerDay}
+
+
onClick(10)}
+ disabled={goal >= 400}
+ >
+ {t.increase}
+
+
+
+
+
+ value.toLocaleString(locale)}
+ reversed={dir === "rtl"}
+ />
+
+
-
onClick(10)}
- disabled={goal >= 400}
- >
- {t.increase}
-
-
-
-
-
- value.toLocaleString(locale)}
- reversed={dir === "rtl"}
- />
-
-
+
+ {t.submit}
+ {t.cancel}}
+ />
+
- {t.submit}
-
- {t.cancel}
-
-
-
-
+
+
)
}
diff --git a/apps/v4/examples/base/drawer-scrollable-content.tsx b/apps/v4/examples/base/drawer-scrollable-content.tsx
index e005c83ac1f..af54c0c4f24 100644
--- a/apps/v4/examples/base/drawer-scrollable-content.tsx
+++ b/apps/v4/examples/base/drawer-scrollable-content.tsx
@@ -6,41 +6,42 @@ import {
DrawerDescription,
DrawerFooter,
DrawerHeader,
+ DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/styles/base-nova/ui/drawer"
export function DrawerScrollableContent() {
return (
-
-
- Scrollable Content
-
-
-
- Move Goal
- Set your daily activity goal.
-
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
- reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- ))}
-
- Submit
-
- Cancel
-
-
-
+
+ Scrollable Content}
+ />
+
+
+
+ Move Goal
+ Set your daily activity goal.
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris
+ nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+ in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+ sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ ))}
+
+ Submit
+ Cancel} />
+
+
+
)
}
diff --git a/apps/v4/examples/base/drawer-sides.tsx b/apps/v4/examples/base/drawer-sides.tsx
index 6b26bd27f90..79a2066f1df 100644
--- a/apps/v4/examples/base/drawer-sides.tsx
+++ b/apps/v4/examples/base/drawer-sides.tsx
@@ -6,11 +6,12 @@ import {
DrawerDescription,
DrawerFooter,
DrawerHeader,
+ DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/styles/base-nova/ui/drawer"
-const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+const DRAWER_SIDES = ["up", "right", "down", "left"] as const
export function DrawerWithSides() {
return (
@@ -18,43 +19,47 @@ export function DrawerWithSides() {
{DRAWER_SIDES.map((side) => (
-
-
- {side}
-
-
-
-
- Move Goal
-
- Set your daily activity goal.
-
-
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Ut enim ad minim veniam, quis nostrud exercitation ullamco
- laboris nisi ut aliquip ex ea commodo consequat. Duis aute
- irure dolor in reprehenderit in voluptate velit esse cillum
- dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt
- mollit anim id est laborum.
-
- ))}
-
- Submit
-
- Cancel
-
-
-
+
+ {side}
+
+ }
+ />
+
+
+
+ Move Goal
+
+ Set your daily activity goal.
+
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia
+ deserunt mollit anim id est laborum.
+
+ ))}
+
+ Submit
+ Cancel}
+ />
+
+
+
))}
diff --git a/apps/v4/public/r/index.json b/apps/v4/public/r/index.json
index 7d3fc8e7c08..4c2a82f7088 100644
--- a/apps/v4/public/r/index.json
+++ b/apps/v4/public/r/index.json
@@ -494,7 +494,7 @@
"base": {
"docs": "https://ui.shadcn.com/docs/components/base/drawer",
"examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- "api": "https://vaul.emilkowal.ski/getting-started"
+ "api": "https://base-ui.com/react/components/drawer.md"
}
}
}
diff --git a/apps/v4/public/r/styles/base-luma/drawer-example.json b/apps/v4/public/r/styles/base-luma/drawer-example.json
index 3902cd4efb4..fa58ba7c67b 100644
--- a/apps/v4/public/r/styles/base-luma/drawer-example.json
+++ b/apps/v4/public/r/styles/base-luma/drawer-example.json
@@ -9,7 +9,7 @@
"files": [
{
"path": "registry/base-luma/examples/drawer-example.tsx",
- "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n
\n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n
\n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n
\n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n
\n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n
\n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n
\n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-luma/drawer.json b/apps/v4/public/r/styles/base-luma/drawer.json
index 7d645b84180..0f061bf8adb 100644
--- a/apps/v4/public/r/styles/base-luma/drawer.json
+++ b/apps/v4/public/r/styles/base-luma/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-luma/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps
) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-lyra/drawer.json b/apps/v4/public/r/styles/base-lyra/drawer.json
index a763c431dd8..30c1c4e7be3 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-lyra/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-maia/drawer.json b/apps/v4/public/r/styles/base-maia/drawer.json
index 104a4ab1e13..5ed9f9a56b1 100644
--- a/apps/v4/public/r/styles/base-maia/drawer.json
+++ b/apps/v4/public/r/styles/base-maia/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-maia/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-mira/drawer.json b/apps/v4/public/r/styles/base-mira/drawer.json
index 30574dd89ed..38612f27453 100644
--- a/apps/v4/public/r/styles/base-mira/drawer.json
+++ b/apps/v4/public/r/styles/base-mira/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-mira/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-nova/drawer.json b/apps/v4/public/r/styles/base-nova/drawer.json
index 8f49c1c6051..6392312fdb9 100644
--- a/apps/v4/public/r/styles/base-nova/drawer.json
+++ b/apps/v4/public/r/styles/base-nova/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-nova/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n \n {side}\n \n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n \n Scrollable Content \n \n \n \n Move Goal \n Set your daily activity goal. \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n sunt in culpa qui officia deserunt mollit anim id est laborum.\n \n ))}\n \n Submit \n \n Cancel \n \n \n \n \n \n )\n}\n",
+ "content": "\"use client\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerPopup,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n return (\n \n \n )\n}\n\nconst DRAWER_SIDES = [\"up\", \"right\", \"down\", \"left\"] as const\n\nfunction DrawerWithSides() {\n return (\n \n \n {DRAWER_SIDES.map((side) => (\n
\n \n {side}\n \n }\n />\n \n \n \n Move goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Sed do eiusmod tempor incididunt ut labore et dolore magna\n aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n Duis aute irure dolor in reprehenderit in voluptate velit\n esse cillum dolore eu fugiat nulla pariatur. Excepteur\n sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum.\n
\n ))}\n
\n Submit \n Cancel}\n />\n \n \n \n \n ))}\n \n )\n}\n\nfunction DrawerScrollableContent() {\n return (\n \n \n Scrollable Content}\n />\n \n \n \n Move Goal \n \n Set your daily activity goal.\n \n \n \n {Array.from({ length: 10 }).map((_, index) => (\n
\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute\n irure dolor in reprehenderit in voluptate velit esse cillum\n dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n ))}\n \n Submit \n Cancel}\n >\n \n \n \n \n \n )\n}\n",
"type": "registry:example"
}
],
diff --git a/apps/v4/public/r/styles/base-vega/drawer.json b/apps/v4/public/r/styles/base-vega/drawer.json
index 992b1f39a58..ffea08cbf24 100644
--- a/apps/v4/public/r/styles/base-vega/drawer.json
+++ b/apps/v4/public/r/styles/base-vega/drawer.json
@@ -2,12 +2,12 @@
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "drawer",
"dependencies": [
- "vaul"
+ "@base-ui/react"
],
"files": [
{
"path": "registry/base-vega/ui/drawer.tsx",
- "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Drawer({\n ...props\n}: React.ComponentProps) {\n return ) {\n return ) {\n return ) {\n return ) {\n return (\n ) {\n return (\n \n \n
\n {children}\n \n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n ) {\n return (\n ) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerOverlay({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props) {\n return (\n \n \n \n
\n {children}\n \n \n \n )\n}\n\nfunction DrawerContent({\n className,\n children,\n ...props\n}: DrawerPrimitive.Content.Props) {\n return (\n \n {children}\n \n )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n > = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
@@ -23562,7 +23562,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
@@ -25309,7 +25309,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
@@ -27056,7 +27056,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
@@ -28803,7 +28803,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
@@ -30550,7 +30550,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
diff --git a/apps/v4/registry/bases/__index__.tsx b/apps/v4/registry/bases/__index__.tsx
index 238a72187b4..470cb4dcff8 100644
--- a/apps/v4/registry/bases/__index__.tsx
+++ b/apps/v4/registry/bases/__index__.tsx
@@ -5547,7 +5547,7 @@ export const Index: Record> = {
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
index c49d0bd224e..c0b24ffb0c6 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
@@ -56,6 +56,7 @@ import {
DrawerDescription,
DrawerFooter,
DrawerHeader,
+ DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/registry/bases/base/ui/drawer"
@@ -743,199 +744,212 @@ const chartConfig = {
function TableCellViewer({ item }: { item: z.infer }) {
const isMobile = useIsMobile()
return (
-
-
-
- {item.header}
-
-
-
-
- {item.header}
-
- Showing total visitors for the last 6 months
-
-
-
- {!isMobile && (
- <>
-
-
- value.slice(0, 3)}
- hide
- />
-
-
-
-
-
- Trending up by 5.2% this month{" "}
-
+
+
+ {item.header}
+
+ }
+ />
+
+
+
+ {item.header}
+
+ Showing total visitors for the last 6 months
+
+
+
+ {!isMobile && (
+ <>
+
+
+ value.slice(0, 3)}
+ hide
+ />
+
+
+
+
+
+ Trending up by 5.2% this month{" "}
+
+
+ Showing total visitors for the last 6 months. This is just
+ some random text to test the layout. It spans multiple lines
+ and should wrap around.
+
-
- Showing total visitors for the last 6 months. This is just
- some random text to test the layout. It spans multiple lines
- and should wrap around.
+
+
+ )}
+
+
+
+ Submit
+
+
+
)
}
diff --git a/apps/v4/registry/bases/base/examples/drawer-example.tsx b/apps/v4/registry/bases/base/examples/drawer-example.tsx
index f6bd63ee7c2..5297b632532 100644
--- a/apps/v4/registry/bases/base/examples/drawer-example.tsx
+++ b/apps/v4/registry/bases/base/examples/drawer-example.tsx
@@ -12,6 +12,7 @@ import {
DrawerDescription,
DrawerFooter,
DrawerHeader,
+ DrawerPopup,
DrawerTitle,
DrawerTrigger,
} from "@/registry/bases/base/ui/drawer"
@@ -25,7 +26,7 @@ export default function DrawerExample() {
)
}
-const DRAWER_SIDES = ["top", "right", "bottom", "left"] as const
+const DRAWER_SIDES = ["up", "right", "down", "left"] as const
function DrawerWithSides() {
return (
@@ -34,46 +35,47 @@ function DrawerWithSides() {
{DRAWER_SIDES.map((side) => (
-
-
- {side}
-
-
-
-
- Move Goal
-
- Set your daily activity goal.
-
-
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
- do eiusmod tempor incididunt ut labore et dolore magna
- aliqua. Ut enim ad minim veniam, quis nostrud exercitation
- ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Duis aute irure dolor in reprehenderit in voluptate velit
- esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia
- deserunt mollit anim id est laborum.
-
- ))}
-
- Submit
-
- Cancel
-
-
-
+
+ {side}
+
+ }
+ />
+
+
+
+ Move goal
+
+ Set your daily activity goal.
+
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat.
+ Duis aute irure dolor in reprehenderit in voluptate velit
+ esse cillum dolore eu fugiat nulla pariatur. Excepteur
+ sint occaecat cupidatat non proident, sunt in culpa qui
+ officia deserunt mollit anim id est laborum.
+
+ ))}
+
+ Submit
+ Cancel}
+ />
+
+
+
))}
-
-
- Scrollable Content
-
-
-
- Move Goal
- Set your daily activity goal.
-
-
- {Array.from({ length: 10 }).map((_, index) => (
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- ))}
-
- Submit
-
- Cancel
-
-
-
+
+ Scrollable Content}
+ />
+
+
+
+ Move Goal
+
+ Set your daily activity goal.
+
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+ cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+ ))}
+
+ Submit
+ Cancel}
+ >
+
+
+
)
diff --git a/apps/v4/registry/bases/base/ui/_registry.ts b/apps/v4/registry/bases/base/ui/_registry.ts
index 185cfdd042a..6befff838c0 100644
--- a/apps/v4/registry/bases/base/ui/_registry.ts
+++ b/apps/v4/registry/bases/base/ui/_registry.ts
@@ -351,7 +351,7 @@ export const ui: Registry["items"] = [
{
name: "drawer",
type: "registry:ui",
- dependencies: ["vaul"],
+ dependencies: ["@base-ui/react"],
files: [
{
path: "ui/drawer.tsx",
@@ -363,7 +363,7 @@ export const ui: Registry["items"] = [
docs: "https://ui.shadcn.com/docs/components/base/drawer",
examples:
"https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
- api: "https://vaul.emilkowal.ski/getting-started",
+ api: "https://base-ui.com/react/components/drawer.md",
},
},
},
diff --git a/apps/v4/registry/bases/base/ui/drawer.tsx b/apps/v4/registry/bases/base/ui/drawer.tsx
index 8efcca212b5..9ebd5f059fd 100644
--- a/apps/v4/registry/bases/base/ui/drawer.tsx
+++ b/apps/v4/registry/bases/base/ui/drawer.tsx
@@ -1,75 +1,121 @@
"use client"
import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { cn } from "@/registry/bases/base/lib/utils"
-function Drawer({
- ...props
-}: React.ComponentProps) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
@@ -85,10 +131,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
-
+
{children}
@@ -69,7 +69,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
)
diff --git a/apps/v4/registry/styles/style-luma.css b/apps/v4/registry/styles/style-luma.css
index d0f9a96916c..1f513a74ef6 100644
--- a/apps/v4/registry/styles/style-luma.css
+++ b/apps/v4/registry/styles/style-luma.css
@@ -697,22 +697,42 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/30 supports-backdrop-filter:backdrop-blur-sm;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply before:bg-popover before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/30 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-sm;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply before:bg-popover before:border-border relative flex h-auto transform-(--drawer-transform) touch-none flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:shadow-xl transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left;
+ }
+
.cn-drawer-title {
@apply text-foreground text-base font-medium;
}
diff --git a/apps/v4/registry/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index 56145a5723c..2d9ae979fe3 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -448,22 +448,42 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply bg-popover text-popover-foreground flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply bg-popover text-popover-foreground flex h-auto transform-(--drawer-transform) touch-none flex-col overflow-hidden text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left;
+ }
+
.cn-drawer-title {
@apply text-foreground text-sm font-medium;
}
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index 20c3fd7c43d..49128111d17 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -473,22 +473,42 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto transform-(--drawer-transform) touch-none flex-col overflow-hidden bg-transparent p-4 text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left;
+ }
+
.cn-drawer-title {
@apply text-foreground text-base font-medium;
}
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index 43853972e43..998939f0260 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -473,22 +473,42 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/80 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply before:bg-popover text-popover-foreground before:border-border relative flex h-auto transform-(--drawer-transform) touch-none flex-col overflow-hidden bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-1 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:text-left;
+ }
+
.cn-drawer-title {
@apply text-foreground text-sm font-medium;
}
diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css
index 7ead341f3cd..3f88c4ef59a 100644
--- a/apps/v4/registry/styles/style-nova.css
+++ b/apps/v4/registry/styles/style-nova.css
@@ -473,22 +473,42 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply bg-popover text-popover-foreground flex h-auto transform-(--drawer-transform) touch-none flex-col overflow-hidden text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-0.5 md:text-left;
+ }
+
.cn-drawer-title {
@apply text-foreground text-base font-medium;
}
diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css
index 01a3b048426..f1bb97ca806 100644
--- a/apps/v4/registry/styles/style-vega.css
+++ b/apps/v4/registry/styles/style-vega.css
@@ -469,22 +469,41 @@
}
/* MARK: Drawer */
- .cn-drawer-overlay {
+ .cn-radix-drawer-overlay {
@apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
}
- .cn-drawer-content {
+ .cn-radix-drawer-content {
@apply bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm;
}
- .cn-drawer-handle {
+ .cn-radix-drawer-handle {
@apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block;
}
- .cn-drawer-header {
+ .cn-radix-drawer-header {
@apply gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left;
}
+ .cn-base-ui-drawer-overlay {
+ @apply bg-black/10 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs;
+ }
+
+ .cn-base-ui-drawer-popup {
+ @apply bg-popover text-popover-foreground flex h-auto transform-(--drawer-transform) touch-none flex-col overflow-hidden text-sm transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--drawer-bleed-x:3rem] [--drawer-bleed-y:3rem] data-ending-style:transform-(--drawer-closed-transform) data-starting-style:transform-(--drawer-closed-transform) data-swiping:duration-0 data-swiping:select-none data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:-mb-(--drawer-bleed-y) data-[swipe-direction=down]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=down]:w-full data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=down]:pb-(--drawer-bleed-y) data-[swipe-direction=down]:[--drawer-closed-transform:translate3d(0,100%,0)] data-[swipe-direction=down]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-(--drawer-bleed-x) data-[swipe-direction=left]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=left]:pl-(--drawer-bleed-x) data-[swipe-direction=left]:[--drawer-closed-transform:translate3d(-100%,0,0)] data-[swipe-direction=left]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-(--drawer-bleed-x) data-[swipe-direction=right]:w-[calc(75%+var(--drawer-bleed-x))] data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=right]:pr-(--drawer-bleed-x) data-[swipe-direction=right]:[--drawer-closed-transform:translate3d(100%,0,0)] data-[swipe-direction=right]:[--drawer-transform:translate3d(var(--drawer-swipe-movement-x),0,0)] data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-(--drawer-bleed-y) data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[calc(80vh+var(--drawer-bleed-y))] data-[swipe-direction=up]:w-full data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b data-[swipe-direction=up]:pt-(--drawer-bleed-y) data-[swipe-direction=up]:[--drawer-closed-transform:translate3d(0,-100%,0)] data-[swipe-direction=up]:[--drawer-transform:translate3d(0,var(--drawer-swipe-movement-y),0)] data-[swipe-direction=left]:sm:w-[calc(24rem+var(--drawer-bleed-x))] data-[swipe-direction=right]:sm:w-[calc(24rem+var(--drawer-bleed-x))];
+ }
+
+ .cn-base-ui-drawer-content {
+ @apply flex min-h-0 flex-1 flex-col;
+ }
+
+ .cn-base-ui-drawer-handle {
+ @apply bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[swipe-direction=down]/drawer-content:block;
+ }
+
+ .cn-base-ui-drawer-header {
+ @apply gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left;
+ }
.cn-drawer-title {
@apply text-foreground font-medium;
}
diff --git a/apps/v4/styles/base-luma/ui/drawer.tsx b/apps/v4/styles/base-luma/ui/drawer.tsx
index 368e71321e8..99344f83a42 100644
--- a/apps/v4/styles/base-luma/ui/drawer.tsx
+++ b/apps/v4/styles/base-luma/ui/drawer.tsx
@@ -1,43 +1,71 @@
"use client"
import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
import { cn } from "@/lib/utils"
-function Drawer({
- ...props
-}: React.ComponentProps) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps
) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
) {
+function Drawer({ ...props }: DrawerPrimitive.Root.Props) {
return ) {
+function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
return ) {
+function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
return ) {
+}: DrawerPrimitive.Viewport.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerOverlay({
className,
...props
-}: React.ComponentProps) {
+}: DrawerPrimitive.Backdrop.Props) {
return (
- ) {
+}: DrawerPrimitive.Popup.Props) {
return (
-
+
-
- {children}
-
+
+
+
+ {children}
+
+
)
}
+function DrawerContent({
+ className,
+ children,
+ ...props
+}: DrawerPrimitive.Content.Props) {
+ return (
+
+ {children}
+
+ )
+}
+
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
) {
)
}
-function DrawerTitle({
- className,
- ...props
-}: React.ComponentProps) {
+function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
return (
) {
+}: DrawerPrimitive.Description.Props) {
return (
=6.9.0'}
- '@babel/runtime@7.28.4':
- resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+ '@babel/runtime@7.29.2':
+ resolution: {integrity: sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==}
engines: {node: '>=6.9.0'}
'@babel/runtime@7.29.2':
@@ -8228,7 +8228,7 @@ snapshots:
'@babel/runtime@7.28.2': {}
- '@babel/runtime@7.28.4': {}
+ '@babel/runtime@7.29.2': {}
'@babel/runtime@7.29.2': {}