{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "title": "Context Menu",
  "description": "A context menu built on Base UI with nested menus and keyboard navigation.",
  "dependencies": [
    "@base-ui/react@^1.4.1"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/ui/context-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/lib/utils\"\nimport { IconPlaceholder } from \"@/components/icon-placeholder\"\n\nfunction childContent(\n  asChild: boolean | undefined,\n  children: React.ReactNode\n): React.ReactNode {\n  return asChild && React.isValidElement(children) ? undefined : children\n}\n\nfunction ContextMenu({\n  ...props\n}: ContextMenuPrimitive.Root.Props): React.ReactElement {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: ContextMenuPrimitive.Portal.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  asChild,\n  children,\n  render,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props & {\n  asChild?: boolean\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      render={\n        render ??\n        (asChild && React.isValidElement(children)\n          ? (children as React.ReactElement<Record<string, unknown>>)\n          : undefined)\n      }\n      {...props}\n    >\n      {childContent(asChild, children)}\n    </ContextMenuPrimitive.Trigger>\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset,\n  anchor,\n  positionMethod,\n  portalProps,\n  children,\n  ...props\n}: ContextMenuPrimitive.Popup.Props & {\n  portalProps?: ContextMenuPrimitive.Portal.Props\n  side?: ContextMenuPrimitive.Positioner.Props[\"side\"]\n  sideOffset?: ContextMenuPrimitive.Positioner.Props[\"sideOffset\"]\n  align?: ContextMenuPrimitive.Positioner.Props[\"align\"]\n  alignOffset?: ContextMenuPrimitive.Positioner.Props[\"alignOffset\"]\n  anchor?: ContextMenuPrimitive.Positioner.Props[\"anchor\"]\n  positionMethod?: ContextMenuPrimitive.Positioner.Props[\"positionMethod\"]\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Portal {...portalProps}>\n      <ContextMenuPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        positionMethod={positionMethod}\n        className=\"z-50\"\n        data-slot=\"context-menu-positioner\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          className={cn(\n            \"relative flex origin-(--transform-origin) rounded-lg border bg-popover text-popover-foreground shadow-lg/5 outline-none not-dark:bg-clip-padding not-[class*='w-']:min-w-32 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n            className\n          )}\n          data-slot=\"context-menu-content\"\n          {...props}\n        >\n          <div\n            className=\"max-h-(--available-height) w-full overflow-y-auto p-1\"\n            data-slot=\"context-menu-viewport\"\n          >\n            {children}\n          </div>\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: ContextMenuPrimitive.Group.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  asChild,\n  children,\n  render,\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n  asChild?: boolean\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Item\n      className={cn(\n        \"flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground sm:min-h-7 sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-inset={inset}\n      data-slot=\"context-menu-item\"\n      data-variant={variant}\n      render={\n        render ??\n        (asChild && React.isValidElement(children)\n          ? (children as React.ReactElement<Record<string, unknown>>)\n          : undefined)\n      }\n      {...props}\n    >\n      {childContent(asChild, children)}\n    </ContextMenuPrimitive.Item>\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  variant?: \"default\" | \"switch\"\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      checked={checked}\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm py-1 pe-2 text-base outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:min-h-7 sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\n        variant === \"default\" && \"ps-8\",\n        variant === \"switch\" && \"justify-between ps-2\",\n        className\n      )}\n      data-slot=\"context-menu-checkbox-item\"\n      data-variant={variant}\n      {...props}\n    >\n      {variant === \"switch\" ? null : (\n        <span className=\"pointer-events-none absolute start-2 flex size-4 items-center justify-center\">\n          <ContextMenuPrimitive.CheckboxItemIndicator>\n            <IconPlaceholder\n              lucide=\"Check\"\n              tabler=\"IconCheck\"\n              hugeicons=\"Tick02Icon\"\n              phosphor=\"CheckIcon\"\n              remixicon=\"RiCheckLine\"\n            />\n          </ContextMenuPrimitive.CheckboxItemIndicator>\n        </span>\n      )}\n      {children}\n      {variant === \"switch\" ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"pointer-events-none relative ms-4 inline-flex h-4 w-7 shrink-0 items-center rounded-full bg-input transition-colors data-[checked=true]:bg-primary\"\n          data-checked={checked ? \"true\" : \"false\"}\n        >\n          <span\n            className=\"size-3 translate-x-0.5 rounded-full bg-background shadow-xs transition-transform data-[checked=true]:translate-x-3.5\"\n            data-checked={checked ? \"true\" : \"false\"}\n          />\n        </span>\n      ) : null}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      className={cn(\n        \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm py-1 ps-8 pe-2 text-base outline-none select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground sm:min-h-7 sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      data-slot=\"context-menu-radio-item\"\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute start-2 flex size-4 items-center justify-center rounded-full border border-input\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <span className=\"size-2 rounded-full bg-current\" />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.GroupLabel\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      data-inset={inset}\n      data-slot=\"context-menu-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.Separator\n      className={cn(\"mx-2 my-1 h-px bg-border\", className)}\n      data-slot=\"context-menu-separator\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n  return (\n    <kbd\n      className={cn(\n        \"ms-auto font-sans text-xs font-medium tracking-widest text-muted-foreground/72\",\n        className\n      )}\n      data-slot=\"context-menu-shortcut\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: ContextMenuPrimitive.SubmenuRoot.Props): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}): React.ReactElement {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      className={cn(\n        \"flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-inset:ps-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground sm:min-h-7 sm:text-sm data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&>svg:not(:last-child)]:-mx-0.5\",\n        className\n      )}\n      data-inset={inset}\n      data-slot=\"context-menu-sub-trigger\"\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRight\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"ms-auto -me-0.5 opacity-80\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent(\n  props: React.ComponentProps<typeof ContextMenuContent>\n): React.ReactElement {\n  return (\n    <ContextMenuContent\n      side=\"inline-end\"\n      sideOffset={0}\n      align=\"start\"\n      alignOffset={-5}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuPortal,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuGroup,\n  ContextMenuLabel,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubTrigger,\n  ContextMenuSubContent,\n}\n",
      "type": "registry:ui",
      "target": "@ui/context-menu.tsx"
    }
  ],
  "type": "registry:ui"
}