cosscom__coss/apps/ui/public/r/menu.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menu",
  "type": "registry:ui",
  "dependencies": ["@base-ui-components/react"],
  "files": [
    {
      "path": "registry/default/ui/menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui-components/react/menu\"\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Menu = MenuPrimitive.Root\n\nconst MenuPortal = MenuPrimitive.Portal\n\nfunction MenuTrigger(props: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuPopup({\n  className,\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n  side?: MenuPrimitive.Positioner.Props[\"side\"]\n}) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        data-slot=\"menu-positioner\"\n        className=\"z-50\"\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n      >\n        <span\n          className={cn(\n            \"relative flex origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding shadow-lg transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]\",\n            className\n          )}\n        >\n          <MenuPrimitive.Popup\n            data-slot=\"menu-popup\"\n            className=\"max-h-(--available-height) overflow-y-auto p-1 not-[class*='w-']:min-w-32\"\n            {...props}\n          />\n        </span>\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction MenuGroup(props: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <MenuPrimitive.CheckboxItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.CheckboxItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuPrimitive.RadioGroup.Props) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      className={cn(\n        \"grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <MenuPrimitive.RadioItemIndicator className=\"col-start-1\">\n        <CheckIcon />\n      </MenuPrimitive.RadioItemIndicator>\n      <span className=\"col-start-2\">{children}</span>\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuGroupLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:ps-9 sm:data-inset:ps-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      className={cn(\n        \"ms-auto text-xs tracking-widest text-muted-foreground/64\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSub(props: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-disabled:opacity-64 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ms-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubPopup({\n  className,\n  sideOffset = 0,\n  alignOffset = -4,\n  align = \"start\",\n  ...props\n}: MenuPrimitive.Popup.Props & {\n  align?: MenuPrimitive.Positioner.Props[\"align\"]\n  sideOffset?: MenuPrimitive.Positioner.Props[\"sideOffset\"]\n  alignOffset?: MenuPrimitive.Positioner.Props[\"alignOffset\"]\n}) {\n  return (\n    <MenuPopup\n      className={className}\n      sideOffset={sideOffset}\n      align={align}\n      alignOffset={alignOffset}\n      data-slot=\"menu-sub-content\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  Menu as DropdownMenu,\n  MenuPortal,\n  MenuPortal as DropdownMenuPortal,\n  MenuTrigger,\n  MenuTrigger as DropdownMenuTrigger,\n  MenuPopup,\n  MenuPopup as DropdownMenuContent,\n  MenuGroup,\n  MenuGroup as DropdownMenuGroup,\n  MenuItem,\n  MenuItem as DropdownMenuItem,\n  MenuCheckboxItem,\n  MenuCheckboxItem as DropdownMenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioGroup as DropdownMenuRadioGroup,\n  MenuRadioItem,\n  MenuRadioItem as DropdownMenuRadioItem,\n  MenuGroupLabel,\n  MenuGroupLabel as DropdownMenuLabel,\n  MenuSeparator,\n  MenuSeparator as DropdownMenuSeparator,\n  MenuShortcut,\n  MenuShortcut as DropdownMenuShortcut,\n  MenuSub,\n  MenuSub as DropdownMenuSub,\n  MenuSubTrigger,\n  MenuSubTrigger as DropdownMenuSubTrigger,\n  MenuSubPopup,\n  MenuSubPopup as DropdownMenuSubContent,\n}\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "light": {
      "destructive-foreground": "var(--color-red-700)"
    },
    "dark": {
      "destructive-foreground": "var(--color-red-400)"
    }
  }
}