{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "context-menu",
  "title": "Context Menu",
  "description": "Displays a menu to the user triggered by a right click or a long press.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/context-menu.jsx",
      "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 { ChevronRightIcon, CheckIcon, CircleIcon } from \"lucide-react\";\n\nfunction ContextMenu({ ...props } = {}) {\n\treturn <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />;\n}\n\nfunction ContextMenuPortal({ ...props } = {}) {\n\treturn (\n\t\t<ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n\t);\n}\n\nfunction ContextMenuTrigger({ className = \"\", ...props }) {\n\treturn (\n\t\t<ContextMenuPrimitive.Trigger\n\t\t\tdata-slot=\"context-menu-trigger\"\n\t\t\tclassName={cn(\"select-none\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ContextMenuContent({\n\tclassName = \"\",\n\talign = \"start\",\n\talignOffset = 4,\n\tside = \"right\",\n\tsideOffset = 0,\n\t...props\n}) {\n\treturn (\n\t\t<ContextMenuPrimitive.Portal>\n\t\t\t<ContextMenuPrimitive.Positioner\n\t\t\t\tclassName=\"isolate z-50 outline-none\"\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t>\n\t\t\t\t<ContextMenuPrimitive.Popup\n\t\t\t\t\tdata-slot=\"context-menu-content\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</ContextMenuPrimitive.Positioner>\n\t\t</ContextMenuPrimitive.Portal>\n\t);\n}\n\nfunction ContextMenuGroup({ ...props } = {}) {\n\treturn (\n\t\t<ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n\t);\n}\n\nfunction ContextMenuLabel({ className = \"\", inset = false, ...props }) {\n\treturn (\n\t\t<ContextMenuPrimitive.Group>\n\t\t\t<ContextMenuPrimitive.GroupLabel\n\t\t\t\tdata-slot=\"context-menu-label\"\n\t\t\t\tdata-inset={inset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</ContextMenuPrimitive.Group>\n\t);\n}\n\nfunction ContextMenuItem({\n\tclassName = \"\",\n\tinset = false,\n\tvariant = \"default\",\n\t...props\n}) {\n\treturn (\n\t\t<ContextMenuPrimitive.Item\n\t\t\tdata-slot=\"context-menu-item\"\n\t\t\tdata-inset={inset}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ContextMenuSub({ ...props } = {}) {\n\treturn (\n\t\t<ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n\t);\n}\n\nfunction ContextMenuSubTrigger({\n\tclassName = \"\",\n\tinset = false,\n\tchildren = null,\n\t...props\n}) {\n\treturn (\n\t\t<ContextMenuPrimitive.SubmenuTrigger\n\t\t\tdata-slot=\"context-menu-sub-trigger\"\n\t\t\tdata-inset={inset}\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t\t<ChevronRightIcon className=\"ml-auto\" />\n\t\t</ContextMenuPrimitive.SubmenuTrigger>\n\t);\n}\n\nfunction ContextMenuSubContent({ ...props } = {}) {\n\treturn (\n\t\t<ContextMenuContent\n\t\t\tdata-slot=\"context-menu-sub-content\"\n\t\t\tclassName=\"shadow-lg\"\n\t\t\tside=\"right\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ContextMenuCheckboxItem({\n\tclassName = \"\",\n\tchildren = null,\n\tchecked = undefined,\n\t...props\n}) {\n\treturn (\n\t\t<ContextMenuPrimitive.CheckboxItem\n\t\t\tdata-slot=\"context-menu-checkbox-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pl-8 pr-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t\"relative\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tchecked={checked}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n\t\t\t\t<ContextMenuPrimitive.CheckboxItemIndicator>\n\t\t\t\t\t<CheckIcon />\n\t\t\t\t</ContextMenuPrimitive.CheckboxItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</ContextMenuPrimitive.CheckboxItem>\n\t);\n}\n\nfunction ContextMenuRadioGroup({ ...props } = {}) {\n\treturn (\n\t\t<ContextMenuPrimitive.RadioGroup\n\t\t\tdata-slot=\"context-menu-radio-group\"\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ContextMenuRadioItem({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<ContextMenuPrimitive.RadioItem\n\t\t\tdata-slot=\"context-menu-radio-item\"\n\t\t\tclassName={cn(\n\t\t\t\t\"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pl-8 pr-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t\"relative\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n\t\t\t\t<ContextMenuPrimitive.RadioItemIndicator>\n\t\t\t\t\t<CircleIcon className=\"size-2 fill-current\" />\n\t\t\t\t</ContextMenuPrimitive.RadioItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</ContextMenuPrimitive.RadioItem>\n\t);\n}\n\nfunction ContextMenuSeparator({ className = \"\", ...props }) {\n\treturn (\n\t\t<ContextMenuPrimitive.Separator\n\t\t\tdata-slot=\"context-menu-separator\"\n\t\t\tclassName={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction ContextMenuShortcut({ className = \"\", ...props }) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"context-menu-shortcut\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nContextMenu.displayName = \"ContextMenu\";\nContextMenuTrigger.displayName = \"ContextMenuTrigger\";\nContextMenuContent.displayName = \"ContextMenuContent\";\nContextMenuItem.displayName = \"ContextMenuItem\";\nContextMenuCheckboxItem.displayName = \"ContextMenuCheckboxItem\";\nContextMenuRadioItem.displayName = \"ContextMenuRadioItem\";\nContextMenuLabel.displayName = \"ContextMenuLabel\";\nContextMenuSeparator.displayName = \"ContextMenuSeparator\";\nContextMenuShortcut.displayName = \"ContextMenuShortcut\";\nContextMenuGroup.displayName = \"ContextMenuGroup\";\nContextMenuPortal.displayName = \"ContextMenuPortal\";\nContextMenuSub.displayName = \"ContextMenuSub\";\nContextMenuSubContent.displayName = \"ContextMenuSubContent\";\nContextMenuSubTrigger.displayName = \"ContextMenuSubTrigger\";\nContextMenuRadioGroup.displayName = \"ContextMenuRadioGroup\";\n\nexport {\n\tContextMenu,\n\tContextMenuTrigger,\n\tContextMenuContent,\n\tContextMenuItem,\n\tContextMenuCheckboxItem,\n\tContextMenuRadioItem,\n\tContextMenuLabel,\n\tContextMenuSeparator,\n\tContextMenuShortcut,\n\tContextMenuGroup,\n\tContextMenuPortal,\n\tContextMenuSub,\n\tContextMenuSubContent,\n\tContextMenuSubTrigger,\n\tContextMenuRadioGroup,\n};\n",
      "type": "registry:component",
      "target": "components/optics/context-menu.jsx"
    }
  ],
  "type": "registry:component"
}