{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mega-menu",
  "title": "Mega Menu",
  "description": "A data-driven header menu with wide panels of grouped, described links, an optional featured card, and an accordion list for small screens.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "navigation-menu"
  ],
  "files": [
    {
      "path": "registry/tealmac/mega-menu.tsx",
      "content": "// Adapted from Ballmac UI (https://github.com/vamsiy78/ballmac-ui), MIT License, Copyright (c) 2026 Ballmac.\n\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRight, ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\n\ntype MegaMenuLinkItem = {\n  /** Link title. */\n  title: string\n  /** Destination. */\n  href: string\n  /** One line under the title. */\n  description?: string\n  /** Icon shown in a tile before the title. */\n  icon?: React.ReactNode\n  /** Small label after the title, such as \"New\". */\n  badge?: string\n}\n\ntype MegaMenuColumn = {\n  /** Small heading above the links. */\n  title?: string\n  links: MegaMenuLinkItem[]\n}\n\ntype MegaMenuFeatured = {\n  title: string\n  description: string\n  href: string\n  /** Call-to-action text. */\n  cta?: string\n  /** Visual area above the text: an icon, illustration or gradient element. */\n  media?: React.ReactNode\n}\n\ntype MegaMenuItem =\n  | { label: string; href: string }\n  | { label: string; columns: MegaMenuColumn[]; featured?: MegaMenuFeatured }\n\ntype MegaMenuProps = Omit<\n  React.ComponentProps<typeof NavigationMenu>,\n  \"children\"\n> & {\n  /** Top-level entries: a plain link (`href`) or a panel (`columns`, optionally `featured`). */\n  items: MegaMenuItem[]\n  /** Accessible name of the navigation landmark. */\n  label?: string\n  /** Where the dropdown panel lines up: under the start of the menu, or centered under it. */\n  viewportAlign?: \"start\" | \"center\"\n}\n\nfunction isPanel(\n  item: MegaMenuItem\n): item is Extract<MegaMenuItem, { columns: MegaMenuColumn[] }> {\n  return \"columns\" in item\n}\n\nfunction LinkCard({ link }: { link: MegaMenuLinkItem }) {\n  return (\n    <NavigationMenuLink\n      href={link.href}\n      className=\"group/link flex-row items-start gap-3 rounded-xl p-2.5\"\n    >\n      {link.icon && (\n        <span className=\"bg-background text-foreground group-hover/link:border-ring/40 flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs transition-colors [&_svg]:size-4\">\n          {link.icon}\n        </span>\n      )}\n      <span className=\"grid min-w-0 gap-0.5\">\n        <span className=\"flex items-center gap-2 text-sm font-medium\">\n          {link.title}\n          {link.badge && (\n            <span className=\"bg-primary/10 text-primary rounded-full px-1.5 py-px text-[10px] font-semibold tracking-wide uppercase\">\n              {link.badge}\n            </span>\n          )}\n        </span>\n        {link.description && (\n          <span className=\"text-muted-foreground text-xs leading-snug\">\n            {link.description}\n          </span>\n        )}\n      </span>\n    </NavigationMenuLink>\n  )\n}\n\n/**\n * A data-driven mega menu on Navigation Menu: wide panels with grouped, described links and an optional featured card.\n * Shown from the `md` breakpoint up; pair it with MegaMenuMobileList inside your mobile menu.\n */\nfunction MegaMenu({\n  items,\n  label,\n  className,\n  viewportAlign = \"center\",\n  ...props\n}: MegaMenuProps) {\n  label ??= \"Main\"\n  return (\n    <NavigationMenu\n      aria-label={label}\n      data-slot=\"mega-menu\"\n      className={cn(\n        \"hidden md:flex\",\n        // The viewport wrapper is the root's last child; center it under the menu.\n        viewportAlign === \"center\" &&\n          \"[&>div:last-child]:left-1/2 [&>div:last-child]:-translate-x-1/2\",\n        className\n      )}\n      {...props}\n    >\n      <NavigationMenuList>\n        {items.map((item) =>\n          isPanel(item) ? (\n            <NavigationMenuItem key={item.label}>\n              <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>\n              <NavigationMenuContent>\n                <div\n                  className={cn(\n                    \"grid gap-2 p-1 md:w-[min(46rem,calc(100vw-3rem))]\",\n                    item.featured\n                      ? \"md:grid-cols-[1fr_1fr_14rem]\"\n                      : item.columns.length > 1\n                        ? \"md:grid-cols-2\"\n                        : \"md:w-80\"\n                  )}\n                >\n                  {item.columns.map((column, index) => (\n                    <div\n                      key={column.title ?? index}\n                      className=\"grid content-start gap-0.5\"\n                    >\n                      {column.title && (\n                        <p className=\"text-muted-foreground px-2.5 pt-1.5 pb-1 text-[11px] font-semibold tracking-wide uppercase\">\n                          {column.title}\n                        </p>\n                      )}\n                      {column.links.map((link) => (\n                        <LinkCard key={link.href} link={link} />\n                      ))}\n                    </div>\n                  ))}\n                  {item.featured && (\n                    <NavigationMenuLink\n                      href={item.featured.href}\n                      className=\"group/featured from-primary/10 via-muted/60 to-muted/30 hover:from-primary/15 row-span-1 justify-between gap-3 rounded-xl border bg-gradient-to-br p-4\"\n                    >\n                      <span className=\"text-primary flex min-h-20 items-center justify-center [&_svg]:size-10\">\n                        {item.featured.media}\n                      </span>\n                      <span className=\"grid gap-1\">\n                        <span className=\"text-sm font-semibold\">\n                          {item.featured.title}\n                        </span>\n                        <span className=\"text-muted-foreground text-xs leading-snug\">\n                          {item.featured.description}\n                        </span>\n                        <span className=\"text-foreground mt-1 inline-flex items-center gap-1 text-xs font-medium\">\n                          {item.featured.cta ?? \"Learn more\"}\n                          <ArrowRight\n                            aria-hidden=\"true\"\n                            className=\"size-3 transition-transform group-hover/featured:translate-x-0.5 motion-reduce:transition-none rtl:rotate-180 rtl:group-hover/featured:-translate-x-0.5\"\n                          />\n                        </span>\n                      </span>\n                    </NavigationMenuLink>\n                  )}\n                </div>\n              </NavigationMenuContent>\n            </NavigationMenuItem>\n          ) : (\n            <NavigationMenuItem key={item.label}>\n              <NavigationMenuLink\n                href={item.href}\n                className={navigationMenuTriggerStyle()}\n              >\n                {item.label}\n              </NavigationMenuLink>\n            </NavigationMenuItem>\n          )\n        )}\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\ntype MegaMenuMobileListProps = React.ComponentProps<\"div\"> & {\n  items: MegaMenuItem[]\n  /** Called when a link is chosen, for example to close a sheet. */\n  onNavigate?: () => void\n}\n\n/** The same items as accordions for small screens. Uses native disclosure elements, so it works without JavaScript. */\nfunction MegaMenuMobileList({\n  items,\n  onNavigate,\n  className,\n  ...props\n}: MegaMenuMobileListProps) {\n  return (\n    <div\n      data-slot=\"mega-menu-mobile\"\n      className={cn(\"grid gap-1\", className)}\n      {...props}\n    >\n      {items.map((item) =>\n        isPanel(item) ? (\n          <details key={item.label} className=\"group/details rounded-lg\">\n            <summary className=\"hover:bg-accent focus-visible:ring-ring/50 flex h-11 cursor-pointer list-none items-center justify-between rounded-lg px-3 text-[15px] font-medium outline-none focus-visible:ring-[3px] [&::-webkit-details-marker]:hidden\">\n              {item.label}\n              <ChevronDown\n                aria-hidden=\"true\"\n                className=\"text-muted-foreground size-4 transition-transform group-open/details:rotate-180 motion-reduce:transition-none\"\n              />\n            </summary>\n            <div className=\"grid gap-0.5 ps-3 pt-1 pb-2\">\n              {item.columns\n                .flatMap((column) => column.links)\n                .map((link) => (\n                  <a\n                    key={link.href}\n                    href={link.href}\n                    onClick={onNavigate}\n                    className=\"hover:bg-accent focus-visible:ring-ring/50 grid gap-0.5 rounded-lg px-3 py-2 outline-none focus-visible:ring-[3px]\"\n                  >\n                    <span className=\"text-sm font-medium\">{link.title}</span>\n                    {link.description && (\n                      <span className=\"text-muted-foreground text-xs\">\n                        {link.description}\n                      </span>\n                    )}\n                  </a>\n                ))}\n            </div>\n          </details>\n        ) : (\n          <a\n            key={item.label}\n            href={item.href}\n            onClick={onNavigate}\n            className=\"hover:bg-accent focus-visible:ring-ring/50 flex h-11 items-center rounded-lg px-3 text-[15px] font-medium outline-none focus-visible:ring-[3px]\"\n          >\n            {item.label}\n          </a>\n        )\n      )}\n    </div>\n  )\n}\n\nexport {\n  MegaMenu,\n  MegaMenuMobileList,\n  type MegaMenuProps,\n  type MegaMenuItem,\n  type MegaMenuColumn,\n  type MegaMenuLinkItem,\n  type MegaMenuFeatured,\n  type MegaMenuMobileListProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}