mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
05fc512820
Upstream sync from shadcn-ui/ui (1686 commits since last merge base). Key changes: - packages/shadcn upgraded to 4.1.0 (CLI font transformers, scaffold from github, chart colors) - apps/v4 replaces apps/www as the primary docs/registry app - Font system: 25+ heading font registries, font markers utility, @supports override - Chart improvements: recharts v3 compat, radial chart fixes - templates/ updated with monorepo variants (astro, vite, react-router, start) - skills/shadcn AI skill definitions added - deprecated/ removed (auth, auth-firebase, cli, www) Preserved Hanzo-only paths: app/, pkg/, demo/, docs/, template/next/
472 lines
15 KiB
TypeScript
472 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
|
|
import {
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
} from "@/registry/new-york-v4/ui/avatar"
|
|
import { Button } from "@/registry/new-york-v4/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheckboxItem,
|
|
DropdownMenuContent,
|
|
DropdownMenuGroup,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuPortal,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuShortcut,
|
|
DropdownMenuSub,
|
|
DropdownMenuSubContent,
|
|
DropdownMenuSubTrigger,
|
|
DropdownMenuTrigger,
|
|
} from "@/registry/new-york-v4/ui/dropdown-menu"
|
|
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
|
|
|
|
export function DropdownMenuDemo() {
|
|
return (
|
|
<div className="flex flex-wrap items-start gap-4">
|
|
<DropdownMenuSimple />
|
|
<DropdownMenuCheckboxes />
|
|
<DropdownMenuRadioGroupDemo />
|
|
<DropdownMenuWithAvatar />
|
|
<DropdownMenuAvatarOnly />
|
|
<DropdownMenuIconColor />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuSimple() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Open</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
Profile
|
|
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Billing
|
|
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Settings
|
|
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
Keyboard shortcuts
|
|
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>Team</DropdownMenuItem>
|
|
<DropdownMenuSub>
|
|
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
|
|
<DropdownMenuPortal>
|
|
<DropdownMenuSubContent>
|
|
<DropdownMenuItem>Email</DropdownMenuItem>
|
|
<DropdownMenuItem>Message</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>More...</DropdownMenuItem>
|
|
</DropdownMenuSubContent>
|
|
</DropdownMenuPortal>
|
|
</DropdownMenuSub>
|
|
<DropdownMenuItem>
|
|
New Team
|
|
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>GitHub</DropdownMenuItem>
|
|
<DropdownMenuItem>Support</DropdownMenuItem>
|
|
<DropdownMenuItem disabled>API</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
Log out
|
|
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuCheckboxes() {
|
|
const [showStatusBar, setShowStatusBar] = React.useState(true)
|
|
const [showActivityBar, setShowActivityBar] = React.useState(false)
|
|
const [showPanel, setShowPanel] = React.useState(false)
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Checkboxes</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Account</DropdownMenuLabel>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="UserIcon"
|
|
tabler="IconUser"
|
|
hugeicons="UserIcon"
|
|
phosphor="UserIcon"
|
|
remixicon="RiUserLine"
|
|
/>
|
|
Profile
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
remixicon="RiBankCardLine"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="SettingsIcon"
|
|
tabler="IconSettings"
|
|
hugeicons="SettingsIcon"
|
|
phosphor="GearIcon"
|
|
remixicon="RiSettings3Line"
|
|
/>
|
|
Settings
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showStatusBar}
|
|
onCheckedChange={setShowStatusBar}
|
|
>
|
|
Status Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showActivityBar}
|
|
onCheckedChange={setShowActivityBar}
|
|
disabled
|
|
>
|
|
Activity Bar
|
|
</DropdownMenuCheckboxItem>
|
|
<DropdownMenuCheckboxItem
|
|
checked={showPanel}
|
|
onCheckedChange={setShowPanel}
|
|
>
|
|
Panel
|
|
</DropdownMenuCheckboxItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
remixicon="RiLogoutBoxLine"
|
|
/>
|
|
Sign Out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuRadioGroupDemo() {
|
|
const [position, setPosition] = React.useState("bottom")
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="outline">Radio Group</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-56">
|
|
<DropdownMenuLabel inset>Panel Position</DropdownMenuLabel>
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
|
|
<DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="right" disabled>
|
|
Right
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuWithAvatar() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="h-12 justify-start px-2 md:max-w-[200px]"
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
|
|
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">shadcn</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
shadcn@example.com
|
|
</span>
|
|
</div>
|
|
<IconPlaceholder
|
|
lucide="ChevronsUpDownIcon"
|
|
tabler="IconChevronsUpDown"
|
|
hugeicons="ChevronUpDownIcon"
|
|
phosphor="CaretUpDownIcon"
|
|
remixicon="RiExpandUpDownLine"
|
|
className="ml-auto text-muted-foreground"
|
|
/>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
|
|
align="start"
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar>
|
|
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
|
|
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">shadcn</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
shadcn@example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="SparklesIcon"
|
|
tabler="IconSparkles"
|
|
hugeicons="SparklesIcon"
|
|
phosphor="SparklesIcon"
|
|
remixicon="RiSparklingLine"
|
|
/>
|
|
Upgrade to Pro
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BadgeCheckIcon"
|
|
tabler="IconBadgeCheck"
|
|
hugeicons="BadgeCheckIcon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiVerifiedBadgeLine"
|
|
/>
|
|
Account
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
remixicon="RiBankCardLine"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="BellIcon"
|
|
phosphor="BellIcon"
|
|
remixicon="RiNotification3Line"
|
|
/>
|
|
Notifications
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
remixicon="RiLogoutBoxLine"
|
|
/>
|
|
Sign Out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuAvatarOnly() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="size-8 rounded-full border-none p-0"
|
|
>
|
|
<Avatar>
|
|
<AvatarImage
|
|
src="https://github.com/maxleiter.png"
|
|
alt="maxleiter"
|
|
/>
|
|
<AvatarFallback className="rounded-lg">LR</AvatarFallback>
|
|
</Avatar>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
|
|
align="start"
|
|
>
|
|
<DropdownMenuLabel className="p-0 font-normal">
|
|
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
|
<Avatar>
|
|
<AvatarImage
|
|
src="https://github.com/maxleiter.png"
|
|
alt="maxleiter"
|
|
/>
|
|
<AvatarFallback className="rounded-lg">LR</AvatarFallback>
|
|
</Avatar>
|
|
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
<span className="truncate font-semibold">maxleiter</span>
|
|
<span className="truncate text-xs text-muted-foreground">
|
|
maxleiter@example.com
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="SparklesIcon"
|
|
tabler="IconSparkles"
|
|
hugeicons="SparklesIcon"
|
|
phosphor="SparklesIcon"
|
|
remixicon="RiSparklingLine"
|
|
/>
|
|
Upgrade to Pro
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BadgeCheckIcon"
|
|
tabler="IconBadgeCheck"
|
|
hugeicons="BadgeCheckIcon"
|
|
phosphor="CheckCircleIcon"
|
|
remixicon="RiVerifiedBadgeLine"
|
|
/>
|
|
Account
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="CreditCardIcon"
|
|
tabler="IconCreditCard"
|
|
hugeicons="CreditCardIcon"
|
|
phosphor="CreditCardIcon"
|
|
remixicon="RiBankCardLine"
|
|
/>
|
|
Billing
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="BellIcon"
|
|
tabler="IconBell"
|
|
hugeicons="BellIcon"
|
|
phosphor="BellIcon"
|
|
remixicon="RiNotification3Line"
|
|
/>
|
|
Notifications
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="LogOutIcon"
|
|
tabler="IconLogout"
|
|
hugeicons="LogoutIcon"
|
|
phosphor="SignOutIcon"
|
|
remixicon="RiLogoutBoxLine"
|
|
/>
|
|
Sign Out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
function DropdownMenuIconColor() {
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon">
|
|
<IconPlaceholder
|
|
lucide="MoreHorizontalIcon"
|
|
tabler="IconDots"
|
|
hugeicons="MoreHorizontalCircle01Icon"
|
|
phosphor="DotsThreeOutlineIcon"
|
|
remixicon="RiMoreLine"
|
|
/>
|
|
<span className="sr-only">Toggle menu</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="PencilIcon"
|
|
tabler="IconPencil"
|
|
hugeicons="EditIcon"
|
|
phosphor="PencilIcon"
|
|
remixicon="RiPencilLine"
|
|
/>
|
|
Edit
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem>
|
|
<IconPlaceholder
|
|
lucide="ShareIcon"
|
|
tabler="IconShare"
|
|
hugeicons="ShareIcon"
|
|
phosphor="ShareIcon"
|
|
remixicon="RiShareLine"
|
|
/>
|
|
Share
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem variant="destructive">
|
|
<IconPlaceholder
|
|
lucide="TrashIcon"
|
|
tabler="IconTrash"
|
|
hugeicons="DeleteIcon"
|
|
phosphor="TrashIcon"
|
|
remixicon="RiDeleteBinLine"
|
|
/>
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|