{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu", "title": "Dropdown Menu", "author": "AniBT ", "description": "AniBT menu: the floating panel with 32px rows that take the pink wash, stitched separators, red destructive rows, pink ticks and dots, submenus and round-face shortcuts.", "dependencies": [ "lucide-react", "radix-ui" ], "registryDependencies": [ "@anibt/theme" ], "files": [ { "path": "registry/anibt/ui/dropdown-menu.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * DropdownMenu — AniBT 「贴纸手账」.\n *\n * The panel is the floating tier (`anibt-pop`) with 4px of padding. Rows are\n * 32px on radius 10 with a muted icon; the row under the pointer or the\n * keyboard takes the pink wash, pink ink and a pink icon. Groups part on the\n * dashed stitch. A destructive row is red ink with a red icon and the red\n * wash when highlighted. A disabled row drops to the muted ink instead of\n * fading. Checked rows lead with a pink tick, the chosen radio with a pink\n * dot. Shortcuts sit at the right end in the round face.\n *\n * Export names and props are shadcn's, so this file can replace\n * `components/ui/dropdown-menu.tsx`.\n */\n\ntype RenderCompat = {\n /** Base UI's `asChild`: render this element instead, with the part's props. */\n render?: React.ReactElement\n /** Base UI compatibility; ignored (Radix decides from the rendered element). */\n nativeButton?: boolean\n}\n\n/** Maps Base UI's `render` onto Radix's `asChild`. */\nfunction renderAsChild

({\n render,\n nativeButton: _nativeButton,\n ...props\n}: P & RenderCompat): P {\n void _nativeButton\n if (!render) return props as P\n const children = props.children === undefined ? render : React.cloneElement(render, undefined, props.children)\n return { ...props, asChild: true, children } as P\n}\n\nconst PANEL =\n \"anibt-pop z-50 min-w-[8rem] overflow-x-hidden overflow-y-auto overscroll-contain p-1 duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1\"\n\nconst ROW =\n \"relative flex min-h-8 cursor-default items-center gap-2 rounded-[10px] px-2 py-1 text-[13px] text-foreground outline-hidden transition-colors duration-150 select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:text-muted-foreground data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-highlighted:[&_svg:not([class*='text-'])]:text-anibt-mark\"\n\nfunction DropdownMenu({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuPortal({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps & RenderCompat) {\n return \n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 6,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction DropdownMenuGroup({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n /** Indent the label to line up with checkbox and radio rows. */\n inset?: boolean\n /** `destructive`: red ink and icon, the red wash when highlighted. */\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\n/** A group head: 12/600, muted. */\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\n/** The dashed stitch between groups. */\nfunction DropdownMenuSeparator({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/** The key at the row's right end, in the round face. */\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction DropdownMenuSub({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction DropdownMenuSubContent({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n DropdownMenu,\n DropdownMenuPortal,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuLabel,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubTrigger,\n DropdownMenuSubContent,\n}\n", "type": "registry:ui" } ], "categories": [ "overlay" ], "type": "registry:ui" }