{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menu",
  "title": "Menu",
  "description": "A vertically stacked set of interactive menu items",
  "dependencies": ["@ark-ui/react", "lucide-react", "clsx", "tailwind-merge"],
  "files": [
    {
      "path": "src/registry/thornberry/components/menu.tsx",
      "content": "import { Menu as ArkMenu } from \"@ark-ui/react/menu\";\nimport { Check, ChevronRight } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport type { ark } from \"@ark-ui/react\";\nimport type { ComponentProps } from \"react\";\n\nconst MenuProvider = ArkMenu.RootProvider;\nconst MenuRoot = ArkMenu.Root;\nconst PrimitiveMenuIndicator = ArkMenu.ItemIndicator;\n\nconst MenuTrigger = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.Trigger>) => (\n  <ArkMenu.Trigger className={className} {...rest} />\n);\n\nconst MenuPositioner = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.Positioner>) => (\n  <ArkMenu.Positioner className={className} {...rest} />\n);\n\nconst MenuContent = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.Content>) => (\n  <ArkMenu.Content\n    className={cn(\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 z-50 flex min-w-32 origin-(--transform-origin) flex-col gap-0.5 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md outline-none duration-300 data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst MenuArrow = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.Arrow>) => (\n  <ArkMenu.Arrow className={cn(\"fill-popover\", className)} {...rest} />\n);\n\nconst MenuArrowTip = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.ArrowTip>) => (\n  <ArkMenu.ArrowTip className={cn(\"fill-border\", className)} {...rest} />\n);\n\nconst MenuItem = ({\n  className,\n  children,\n  variant = \"default\",\n  ...rest\n}: ComponentProps<typeof ArkMenu.Item> & {\n  variant?: \"default\" | \"destructive\";\n}) => (\n  <ArkMenu.Item\n    data-variant={variant}\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-[state=checked]:bg-accent data-highlighted:bg-accent data-inset:pl-8 data-[state=checked]:text-accent-foreground data-[variant=destructive]:text-destructive data-highlighted:text-accent-foreground data-disabled:opacity-50 data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:hover:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 [&[data-state=checked][data-highlighted]]:bg-sidebar-accent/80 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:*:[svg]:text-destructive!\",\n      variant === \"destructive\" &&\n        \"data-highlighted:bg-destructive/10 data-highlighted:text-destructive\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </ArkMenu.Item>\n);\n\nconst MenuCheckboxItem = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkMenu.CheckboxItem>) => (\n  <ArkMenu.CheckboxItem\n    className={cn(\n      \"relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-[state=checked]:bg-accent data-highlighted:bg-accent data-[state=checked]:text-accent-foreground data-highlighted:text-accent-foreground data-disabled:opacity-50 [&[data-state=checked][data-highlighted]]:bg-sidebar-accent/80\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </ArkMenu.CheckboxItem>\n);\n\nconst MenuItemGroup = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.ItemGroup>) => (\n  <ArkMenu.ItemGroup className={cn(\"overflow-hidden\", className)} {...rest} />\n);\n\nconst MenuItemGroupLabel = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.ItemGroupLabel>) => (\n  <ArkMenu.ItemGroupLabel\n    className={cn(\n      \"flex w-full cursor-default items-center justify-between p-2 font-medium text-foreground text-sm\",\n      className,\n    )}\n    {...rest}\n  />\n);\n\nconst MenuItemText = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.ItemText>) => (\n  <ArkMenu.ItemText className={className} {...rest} />\n);\n\nconst MenuItemIndicator = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.ItemIndicator>) => (\n  <ArkMenu.ItemIndicator\n    className={cn(\n      \"ml-auto flex h-3.5 w-3.5 items-center justify-center\",\n      className,\n    )}\n    {...rest}\n  >\n    <Check className=\"size-4\" />\n  </ArkMenu.ItemIndicator>\n);\n\nconst MenuRadioItem = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkMenu.RadioItem>) => (\n  <ArkMenu.RadioItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </ArkMenu.RadioItem>\n);\n\nconst MenuRadioItemGroup = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.RadioItemGroup>) => (\n  <ArkMenu.RadioItemGroup className={className} {...rest} />\n);\n\nconst MenuSeparator = ({\n  className,\n  ...rest\n}: ComponentProps<typeof ArkMenu.Separator>) => (\n  <ArkMenu.Separator\n    className={cn(\"-mx-1 mt-1 mb-1 h-px bg-border\", className)}\n    {...rest}\n  />\n);\n\nconst MenuTriggerItem = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ArkMenu.TriggerItem>) => (\n  <ArkMenu.TriggerItem\n    className={cn(\n      \"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-50 [&>svg]:size-4\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n    <ChevronRight className=\"ml-auto h-4 w-4\" />\n  </ArkMenu.TriggerItem>\n);\n\n// TODO: Dicuss passing in an Icon i.e, <Settings /> as children\nconst MenuItemShortcut = ({\n  className,\n  children,\n  ...rest\n}: ComponentProps<typeof ark.span>) => (\n  <span\n    className={cn(\n      \"ml-auto text-muted-foreground text-xs tracking-widest\",\n      className,\n    )}\n    {...rest}\n  >\n    {children}\n  </span>\n);\n\nexport {\n  MenuArrow,\n  MenuArrowTip,\n  MenuContent,\n  MenuItem,\n  MenuItemGroup,\n  MenuItemGroupLabel,\n  MenuCheckboxItem,\n  MenuRadioItem,\n  MenuRadioItemGroup,\n  MenuItemText,\n  MenuItemIndicator,\n  MenuPositioner,\n  MenuProvider,\n  MenuRoot,\n  MenuSeparator,\n  MenuTrigger,\n  MenuTriggerItem,\n  MenuItemShortcut,\n  PrimitiveMenuIndicator,\n};\n",
      "type": "registry:ui"
    },
    {
      "path": "src/lib/utils.ts",
      "content": "import { clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nimport type { ClassValue } from \"clsx\";\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n",
      "type": "registry:lib",
      "target": ""
    }
  ],
  "type": "registry:ui"
}