diff --git a/apps/v4/content/docs/components/base/dropdown-menu.mdx b/apps/v4/content/docs/components/base/dropdown-menu.mdx index 73401ddc88..aa9f1250dc 100644 --- a/apps/v4/content/docs/components/base/dropdown-menu.mdx +++ b/apps/v4/content/docs/components/base/dropdown-menu.mdx @@ -60,9 +60,11 @@ npm install @base-ui/react ## Usage ```tsx showLineNumbers +import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, + DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, @@ -72,48 +74,92 @@ import { ```tsx showLineNumbers - Open + }> + Open + - My Account - - Profile - Billing - Team - Subscription + + My Account + Profile + Billing + + + + Team + Subscription + ``` ## Examples +### Basic + +A basic dropdown menu with labels and separators. + + + +### Submenu + +Use `DropdownMenuSub` to nest secondary actions. + + + +### Shortcuts + +Add `DropdownMenuShortcut` to show keyboard hints. + + + +### Icons + +Combine icons with labels for quick scanning. + + + ### Checkboxes - +Use `DropdownMenuCheckboxItem` for toggles. + + + +### Checkboxes Icons + +Add icons to checkbox items. + + ### Radio Group - +Use `DropdownMenuRadioGroup` for exclusive choices. -### Dialog + -This example shows how to open a dialog from a dropdown menu. +### Radio Icons -Use `modal={false}` on the `DropdownMenu` component. +Show radio options with icons. -```tsx showLineNumbers - - - - - -``` + - +### Destructive + +Use `variant="destructive"` for irreversible actions. + + + +### Avatar + +An account switcher dropdown triggered by an avatar. + + + +### Complex + +A richer example combining groups, icons, and submenus. + + + +## API Reference + +See the [Base UI documentation](https://base-ui.com/react/components/dropdown-menu) for the full API reference. diff --git a/apps/v4/content/docs/components/radix/dropdown-menu.mdx b/apps/v4/content/docs/components/radix/dropdown-menu.mdx index b5ebd2a788..cb495066b3 100644 --- a/apps/v4/content/docs/components/radix/dropdown-menu.mdx +++ b/apps/v4/content/docs/components/radix/dropdown-menu.mdx @@ -60,9 +60,11 @@ npm install radix-ui ## Usage ```tsx showLineNumbers +import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, + DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, @@ -72,48 +74,95 @@ import { ```tsx showLineNumbers - Open + + + - My Account - - Profile - Billing - Team - Subscription + + My Account + Profile + Billing + + + + Team + Subscription + ``` ## Examples +### Basic + +A basic dropdown menu with labels and separators. + + + +### Submenu + +Use `DropdownMenuSub` to nest secondary actions. + + + +### Shortcuts + +Add `DropdownMenuShortcut` to show keyboard hints. + + + +### Icons + +Combine icons with labels for quick scanning. + + + ### Checkboxes +Use `DropdownMenuCheckboxItem` for toggles. + + + +### Checkboxes Icons + +Add icons to checkbox items. + ### Radio Group - +Use `DropdownMenuRadioGroup` for exclusive choices. -### Dialog + -This example shows how to open a dialog from a dropdown menu. +### Radio Icons -Use `modal={false}` on the `DropdownMenu` component. +Show radio options with icons. -```tsx showLineNumbers - - - - - -``` + - +### Destructive + +Use `variant="destructive"` for irreversible actions. + + + +### Avatar + +An account switcher dropdown triggered by an avatar. + + + +### Complex + +A richer example combining groups, icons, and submenus. + + + +## API Reference + +See the [Radix UI documentation](https://www.radix-ui.com/docs/primitives/components/dropdown-menu) for the full API reference. diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx index 7a417cdc6b..c30c9804b8 100644 --- a/apps/v4/examples/__index__.tsx +++ b/apps/v4/examples/__index__.tsx @@ -1916,6 +1916,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-avatar": { + name: "dropdown-menu-avatar", + filePath: "examples/radix/dropdown-menu-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-avatar" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-basic": { name: "dropdown-menu-basic", filePath: "examples/radix/dropdown-menu-basic.tsx", @@ -1929,6 +1942,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-checkboxes-icons": { + name: "dropdown-menu-checkboxes-icons", + filePath: "examples/radix/dropdown-menu-checkboxes-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./radix/dropdown-menu-checkboxes-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-checkboxes-icons" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-checkboxes": { name: "dropdown-menu-checkboxes", filePath: "examples/radix/dropdown-menu-checkboxes.tsx", @@ -1968,29 +1994,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-dialog": { - name: "dropdown-menu-dialog", - filePath: "examples/radix/dropdown-menu-dialog.tsx", + "dropdown-menu-destructive": { + name: "dropdown-menu-destructive", + filePath: "examples/radix/dropdown-menu-destructive.tsx", component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-dialog") + const mod = await import("./radix/dropdown-menu-destructive") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-dialog" + ) || "dropdown-menu-destructive" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-in-dialog": { - name: "dropdown-menu-in-dialog", - filePath: "examples/radix/dropdown-menu-in-dialog.tsx", + "dropdown-menu-icons": { + name: "dropdown-menu-icons", + filePath: "examples/radix/dropdown-menu-icons.tsx", component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-in-dialog") + const mod = await import("./radix/dropdown-menu-icons") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-in-dialog" + ) || "dropdown-menu-icons" return { default: mod.default || mod[exportName] } }), }, @@ -2007,120 +2033,42 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-avatar": { - name: "dropdown-menu-with-avatar", - filePath: "examples/radix/dropdown-menu-with-avatar.tsx", + "dropdown-menu-radio-icons": { + name: "dropdown-menu-radio-icons", + filePath: "examples/radix/dropdown-menu-radio-icons.tsx", component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-avatar") + const mod = await import("./radix/dropdown-menu-radio-icons") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-avatar" + ) || "dropdown-menu-radio-icons" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-checkboxes-icons": { - name: "dropdown-menu-with-checkboxes-icons", - filePath: "examples/radix/dropdown-menu-with-checkboxes-icons.tsx", + "dropdown-menu-shortcuts": { + name: "dropdown-menu-shortcuts", + filePath: "examples/radix/dropdown-menu-shortcuts.tsx", component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-checkboxes-icons") + const mod = await import("./radix/dropdown-menu-shortcuts") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-checkboxes-icons" + ) || "dropdown-menu-shortcuts" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-checkboxes": { - name: "dropdown-menu-with-checkboxes", - filePath: "examples/radix/dropdown-menu-with-checkboxes.tsx", + "dropdown-menu-submenu": { + name: "dropdown-menu-submenu", + filePath: "examples/radix/dropdown-menu-submenu.tsx", component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-checkboxes") + const mod = await import("./radix/dropdown-menu-submenu") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-checkboxes" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-destructive": { - name: "dropdown-menu-with-destructive", - filePath: "examples/radix/dropdown-menu-with-destructive.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-destructive") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-destructive" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-icons": { - name: "dropdown-menu-with-icons", - filePath: "examples/radix/dropdown-menu-with-icons.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-icons") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-icons" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-radio-icons": { - name: "dropdown-menu-with-radio-icons", - filePath: "examples/radix/dropdown-menu-with-radio-icons.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-radio-icons") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-radio-icons" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-radio": { - name: "dropdown-menu-with-radio", - filePath: "examples/radix/dropdown-menu-with-radio.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-radio") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-radio" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-shortcuts": { - name: "dropdown-menu-with-shortcuts", - filePath: "examples/radix/dropdown-menu-with-shortcuts.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-shortcuts") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-shortcuts" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-submenu": { - name: "dropdown-menu-with-submenu", - filePath: "examples/radix/dropdown-menu-with-submenu.tsx", - component: React.lazy(async () => { - const mod = await import("./radix/dropdown-menu-with-submenu") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-submenu" + ) || "dropdown-menu-submenu" return { default: mod.default || mod[exportName] } }), }, @@ -8329,6 +8277,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-avatar": { + name: "dropdown-menu-avatar", + filePath: "examples/base/dropdown-menu-avatar.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-avatar") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-avatar" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-basic": { name: "dropdown-menu-basic", filePath: "examples/base/dropdown-menu-basic.tsx", @@ -8342,6 +8303,19 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, + "dropdown-menu-checkboxes-icons": { + name: "dropdown-menu-checkboxes-icons", + filePath: "examples/base/dropdown-menu-checkboxes-icons.tsx", + component: React.lazy(async () => { + const mod = await import("./base/dropdown-menu-checkboxes-icons") + const exportName = + Object.keys(mod).find( + (key) => + typeof mod[key] === "function" || typeof mod[key] === "object" + ) || "dropdown-menu-checkboxes-icons" + return { default: mod.default || mod[exportName] } + }), + }, "dropdown-menu-checkboxes": { name: "dropdown-menu-checkboxes", filePath: "examples/base/dropdown-menu-checkboxes.tsx", @@ -8381,29 +8355,29 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-dialog": { - name: "dropdown-menu-dialog", - filePath: "examples/base/dropdown-menu-dialog.tsx", + "dropdown-menu-destructive": { + name: "dropdown-menu-destructive", + filePath: "examples/base/dropdown-menu-destructive.tsx", component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-dialog") + const mod = await import("./base/dropdown-menu-destructive") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-dialog" + ) || "dropdown-menu-destructive" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-in-dialog": { - name: "dropdown-menu-in-dialog", - filePath: "examples/base/dropdown-menu-in-dialog.tsx", + "dropdown-menu-icons": { + name: "dropdown-menu-icons", + filePath: "examples/base/dropdown-menu-icons.tsx", component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-in-dialog") + const mod = await import("./base/dropdown-menu-icons") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-in-dialog" + ) || "dropdown-menu-icons" return { default: mod.default || mod[exportName] } }), }, @@ -8420,120 +8394,42 @@ export const ExamplesIndex: Record> = { return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-avatar": { - name: "dropdown-menu-with-avatar", - filePath: "examples/base/dropdown-menu-with-avatar.tsx", + "dropdown-menu-radio-icons": { + name: "dropdown-menu-radio-icons", + filePath: "examples/base/dropdown-menu-radio-icons.tsx", component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-avatar") + const mod = await import("./base/dropdown-menu-radio-icons") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-avatar" + ) || "dropdown-menu-radio-icons" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-checkboxes-icons": { - name: "dropdown-menu-with-checkboxes-icons", - filePath: "examples/base/dropdown-menu-with-checkboxes-icons.tsx", + "dropdown-menu-shortcuts": { + name: "dropdown-menu-shortcuts", + filePath: "examples/base/dropdown-menu-shortcuts.tsx", component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-checkboxes-icons") + const mod = await import("./base/dropdown-menu-shortcuts") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-checkboxes-icons" + ) || "dropdown-menu-shortcuts" return { default: mod.default || mod[exportName] } }), }, - "dropdown-menu-with-checkboxes": { - name: "dropdown-menu-with-checkboxes", - filePath: "examples/base/dropdown-menu-with-checkboxes.tsx", + "dropdown-menu-submenu": { + name: "dropdown-menu-submenu", + filePath: "examples/base/dropdown-menu-submenu.tsx", component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-checkboxes") + const mod = await import("./base/dropdown-menu-submenu") const exportName = Object.keys(mod).find( (key) => typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-checkboxes" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-destructive": { - name: "dropdown-menu-with-destructive", - filePath: "examples/base/dropdown-menu-with-destructive.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-destructive") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-destructive" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-icons": { - name: "dropdown-menu-with-icons", - filePath: "examples/base/dropdown-menu-with-icons.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-icons") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-icons" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-radio-icons": { - name: "dropdown-menu-with-radio-icons", - filePath: "examples/base/dropdown-menu-with-radio-icons.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-radio-icons") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-radio-icons" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-radio": { - name: "dropdown-menu-with-radio", - filePath: "examples/base/dropdown-menu-with-radio.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-radio") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-radio" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-shortcuts": { - name: "dropdown-menu-with-shortcuts", - filePath: "examples/base/dropdown-menu-with-shortcuts.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-shortcuts") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-shortcuts" - return { default: mod.default || mod[exportName] } - }), - }, - "dropdown-menu-with-submenu": { - name: "dropdown-menu-with-submenu", - filePath: "examples/base/dropdown-menu-with-submenu.tsx", - component: React.lazy(async () => { - const mod = await import("./base/dropdown-menu-with-submenu") - const exportName = - Object.keys(mod).find( - (key) => - typeof mod[key] === "function" || typeof mod[key] === "object" - ) || "dropdown-menu-with-submenu" + ) || "dropdown-menu-submenu" return { default: mod.default || mod[exportName] } }), }, diff --git a/apps/v4/examples/base/dropdown-menu-avatar.tsx b/apps/v4/examples/base/dropdown-menu-avatar.tsx new file mode 100644 index 0000000000..9017544b3b --- /dev/null +++ b/apps/v4/examples/base/dropdown-menu-avatar.tsx @@ -0,0 +1,52 @@ +import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar" +import { Button } from "@/examples/base/ui/button" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { + BadgeCheckIcon, + BellIcon, + CreditCardIcon, + LogOutIcon, +} from "lucide-react" + +export function DropdownMenuAvatar() { + return ( + + } + > + + + LR + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Sign Out + + + + ) +} diff --git a/apps/v4/examples/base/dropdown-menu-basic.tsx b/apps/v4/examples/base/dropdown-menu-basic.tsx index f68997c18d..35bd2543c1 100644 --- a/apps/v4/examples/base/dropdown-menu-basic.tsx +++ b/apps/v4/examples/base/dropdown-menu-basic.tsx @@ -11,26 +11,24 @@ import { export function DropdownMenuBasic() { return ( - <> - - } - > - Open - - - - My Account - Profile - Billing - Settings - - - GitHub - Support - API - - - + + } + > + Open + + + + My Account + Profile + Billing + Settings + + + GitHub + Support + API + + ) } diff --git a/apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx b/apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx new file mode 100644 index 0000000000..73f952ff40 --- /dev/null +++ b/apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx @@ -0,0 +1,63 @@ +"use client" + +import * as React from "react" +import { Button } from "@/examples/base/ui/button" +import { + DropdownMenu, + DropdownMenuCheckboxItem, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuLabel, + DropdownMenuTrigger, +} from "@/examples/base/ui/dropdown-menu" +import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react" + +export function DropdownMenuCheckboxesIcons() { + const [notifications, setNotifications] = React.useState({ + email: true, + sms: false, + push: true, + }) + + return ( + + } + > + Notifications + + + + Notification Preferences + + setNotifications({ ...notifications, email: checked === true }) + } + > + + Email notifications + + + setNotifications({ ...notifications, sms: checked === true }) + } + > + + SMS notifications + + + setNotifications({ ...notifications, push: checked === true }) + } + > + + Push notifications + + + + + ) +} diff --git a/apps/v4/examples/base/dropdown-menu-checkboxes.tsx b/apps/v4/examples/base/dropdown-menu-checkboxes.tsx index d1a2ed8d12..e2babfd871 100644 --- a/apps/v4/examples/base/dropdown-menu-checkboxes.tsx +++ b/apps/v4/examples/base/dropdown-menu-checkboxes.tsx @@ -21,7 +21,7 @@ export function DropdownMenuCheckboxes() { }> Open - + Appearance - - } - > - Complex Menu - - - - File - - - New File - ⌘N - - - - New Folder - ⇧⌘N - - - - - Open Recent - - - - - Recent Projects - - - Project Alpha - - - - Project Beta - - - - - More Projects - - - - - - Project Gamma - - - - Project Delta - - - - - - - - - - Browse... - - - - - - - - - Save - ⌘S - - - - Export - ⇧⌘E - - + + } + > + Complex Menu + + + + File + + + New File + ⌘N + + + + New Folder + ⇧⌘N + + + + + Open Recent + + + + + Recent Projects + + + Project Alpha + + + + Project Beta + + + + + More Projects + + + + + + Project Gamma + + + + Project Delta + + + + + + + + + + Browse... + + + + + - - View - - setNotifications({ ...notifications, email: checked === true }) - } - > - - Show Sidebar - - - setNotifications({ ...notifications, sms: checked === true }) - } - > - - Show Status Bar - - - - - Theme - - - - - Appearance - - - - Light - - - - Dark - - - - System - - - - - - - - - - Account - - - Profile - ⇧⌘P - - - - Billing - - - - - Settings - - - - - Preferences - - - Keyboard Shortcuts - - - - Language - - - - - Notifications - - - - - - Notification Types - - - setNotifications({ - ...notifications, - push: checked === true, - }) - } - > - - Push Notifications - - - setNotifications({ - ...notifications, - email: checked === true, - }) - } - > - - Email Notifications - - - - - - - - - - - Privacy & Security - - - - - - - - - - - Help & Support - - - - Documentation - - - - - - - Sign Out - ⇧⌘Q - - - - - + + + Save + ⌘S + + + + Export + ⇧⌘E + + + + + View + + setNotifications({ ...notifications, email: checked === true }) + } + > + + Show Sidebar + + + setNotifications({ ...notifications, sms: checked === true }) + } + > + + Show Status Bar + + + + + Theme + + + + + Appearance + + + + Light + + + + Dark + + + + System + + + + + + + + + + Account + + + Profile + ⇧⌘P + + + + Billing + + + + + Settings + + + + + Preferences + + + Keyboard Shortcuts + + + + Language + + + + + Notifications + + + + + + Notification Types + + + setNotifications({ + ...notifications, + push: checked === true, + }) + } + > + + Push Notifications + + + setNotifications({ + ...notifications, + email: checked === true, + }) + } + > + + Email Notifications + + + + + + + + + + + Privacy & Security + + + + + + + + + + + Help & Support + + + + Documentation + + + + + + + Sign Out + ⇧⌘Q + + + + ) } diff --git a/apps/v4/examples/base/dropdown-menu-demo.tsx b/apps/v4/examples/base/dropdown-menu-demo.tsx index ab2cd6194a..9c85ad90ae 100644 --- a/apps/v4/examples/base/dropdown-menu-demo.tsx +++ b/apps/v4/examples/base/dropdown-menu-demo.tsx @@ -20,7 +20,7 @@ export function DropdownMenuDemo() { }> Open - + My Account @@ -35,10 +35,6 @@ export function DropdownMenuDemo() { Settings ⌘S - - Keyboard shortcuts - ⌘K - diff --git a/apps/v4/examples/base/dropdown-menu-with-destructive.tsx b/apps/v4/examples/base/dropdown-menu-destructive.tsx similarity index 50% rename from apps/v4/examples/base/dropdown-menu-with-destructive.tsx rename to apps/v4/examples/base/dropdown-menu-destructive.tsx index 5ebde51461..d77d14d1c4 100644 --- a/apps/v4/examples/base/dropdown-menu-with-destructive.tsx +++ b/apps/v4/examples/base/dropdown-menu-destructive.tsx @@ -2,22 +2,23 @@ import { Button } from "@/examples/base/ui/button" import { DropdownMenu, DropdownMenuContent, + DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/examples/base/ui/dropdown-menu" -import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react" +import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react" -export function DropdownMenuWithDestructive() { +export function DropdownMenuDestructive() { return ( - <> - - } - > - Actions - - + + } + > + Actions + + + Edit @@ -26,17 +27,15 @@ export function DropdownMenuWithDestructive() { Share - - - - Archive - + + + Delete - - - + + + ) } diff --git a/apps/v4/examples/base/dropdown-menu-dialog.tsx b/apps/v4/examples/base/dropdown-menu-dialog.tsx deleted file mode 100644 index 3179326342..0000000000 --- a/apps/v4/examples/base/dropdown-menu-dialog.tsx +++ /dev/null @@ -1,116 +0,0 @@ -"use client" - -import { useState } from "react" -import { Button } from "@/examples/base/ui/button" -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogFooter, - DialogHeader, - DialogTitle, -} from "@/examples/base/ui/dialog" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuGroup, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuTrigger, -} from "@/examples/base/ui/dropdown-menu" -import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field" -import { Input } from "@/examples/base/ui/input" -import { Label } from "@/examples/base/ui/label" -import { Textarea } from "@/examples/base/ui/textarea" -import { MoreHorizontalIcon } from "lucide-react" - -export function DropdownMenuDialog() { - const [showNewDialog, setShowNewDialog] = useState(false) - const [showShareDialog, setShowShareDialog] = useState(false) - - return ( - <> - - - } - > - - - - - File Actions - setShowNewDialog(true)}> - New File... - - setShowShareDialog(true)}> - Share... - - Download - - - - - - - Create New File - - Provide a name for your new file. Click create when you're - done. - - - - - File Name - - - - - }> - Cancel - - - - - - - - - Share File - - Anyone with the link will be able to view this file. - - - - - - - - - Message (Optional) -