{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-mega-menu",
  "type": "registry:block",
  "title": "Header Mega Menu",
  "description": "Responsive site header with a hover-card feature mega-menu that collapses into a mobile drawer.",
  "dependencies": [
    "@mantine/core@^9",
    "@mantine/hooks@^9",
    "@tabler/icons-react@^3"
  ],
  "docs": "Adapted from Mantine UI HeaderMegaMenu at ffbf61c559f374a7ea28fcf00355e84dcbe9a908; feature-grid mock data and the two CTA labels became typed props, the fixed nav links became a consumer-supplied array, and the upstream @mantinex/mantine-logo import (not part of this workspace) became a logo ReactNode prop. Kept as an opinionated block with internal CSS classes rather than a public Styles API, consistent with this catalog's other page-section blocks (authentication-form, stats-grid, table-sort).",
  "registryDependencies": [
    "@house/mantine-ui-license"
  ],
  "files": [
    {
      "path": "registry/mantine-ui/header-mega-menu/header-mega-menu.tsx",
      "type": "registry:ui",
      "content": "/**\n * Adapted from Mantine UI's HeaderMegaMenu at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n\nimport {\n  Anchor,\n  Box,\n  Burger,\n  Button,\n  Center,\n  Collapse,\n  Divider,\n  Drawer,\n  Group,\n  HoverCard,\n  ScrollArea,\n  SimpleGrid,\n  Text,\n  ThemeIcon,\n  UnstyledButton,\n  useMantineTheme,\n} from \"@mantine/core\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport { IconChevronDown } from \"@tabler/icons-react\";\nimport type { ReactNode } from \"react\";\n\nimport classes from \"./header-mega-menu.module.css\";\n\nexport interface HeaderMegaMenuFeature {\n  icon?: ReactNode;\n  title: string;\n  description: string;\n}\n\nexport interface HeaderMegaMenuLink {\n  label: string;\n  href: string;\n  /**\n   * Renders this link as a hover/tap mega-menu instead of a plain link. Only\n   * the first entry in `links` that sets `features` is treated as the\n   * mega-menu; `features` on any later entry is ignored.\n   */\n  features?: readonly HeaderMegaMenuFeature[];\n}\n\nexport interface HeaderMegaMenuProps {\n  /** Rendered at the start of the header bar; nothing renders when omitted. */\n  logo?: ReactNode;\n  /** Ordered nav links; at most one entry should set `features`. */\n  links: readonly HeaderMegaMenuLink[];\n  /** \"View all\" link inside the mega-menu; the link is omitted when unset. */\n  featuresViewAllHref?: string;\n  featuresFooterHeading?: string;\n  featuresFooterDescription?: string;\n  featuresFooterActionLabel?: string;\n  loginLabel?: string;\n  signUpLabel?: string;\n  onLogin?: () => void;\n  onSignUp?: () => void;\n}\n\nexport function HeaderMegaMenu({\n  logo,\n  links,\n  featuresViewAllHref,\n  featuresFooterHeading = \"Get started\",\n  featuresFooterDescription = \"Everything you need to explore what's possible and start building.\",\n  featuresFooterActionLabel = \"Get started\",\n  loginLabel = \"Log in\",\n  signUpLabel = \"Sign up\",\n  onLogin,\n  onSignUp,\n}: HeaderMegaMenuProps) {\n  const [drawerOpened, { toggle: toggleDrawer, close: closeDrawer }] = useDisclosure(false);\n  const [linksOpened, { toggle: toggleLinks }] = useDisclosure(false);\n  const theme = useMantineTheme();\n\n  const featuresLink = links.find((link) => link.features);\n  const featureItems = featuresLink?.features?.map((item) => (\n    <UnstyledButton className={classes.subLink} key={item.title}>\n      <Group wrap=\"nowrap\" align=\"flex-start\">\n        <ThemeIcon size={34} variant=\"default\" radius=\"md\">\n          {item.icon}\n        </ThemeIcon>\n        <div>\n          <Text size=\"sm\" fw={500}>\n            {item.title}\n          </Text>\n          <Text size=\"xs\" c=\"dimmed\">\n            {item.description}\n          </Text>\n        </div>\n      </Group>\n    </UnstyledButton>\n  ));\n\n  return (\n    <>\n      <header className={classes.header}>\n        <Group justify=\"space-between\" h=\"100%\">\n          {logo}\n\n          <Group h=\"100%\" gap={0} visibleFrom=\"sm\">\n            {links.map((link) =>\n              link === featuresLink ? (\n                <HoverCard\n                  key={link.label}\n                  width={600}\n                  position=\"bottom\"\n                  radius=\"md\"\n                  shadow=\"md\"\n                  withinPortal\n                >\n                  <HoverCard.Target>\n                    <UnstyledButton className={classes.link}>\n                      <Center inline>\n                        <Box component=\"span\" mr={5}>\n                          {link.label}\n                        </Box>\n                        <IconChevronDown size={16} color={theme.colors.blue[6]} />\n                      </Center>\n                    </UnstyledButton>\n                  </HoverCard.Target>\n\n                  <HoverCard.Dropdown style={{ overflow: \"hidden\" }}>\n                    <Group justify=\"space-between\" px=\"md\">\n                      <Text fw={500}>{link.label}</Text>\n                      {featuresViewAllHref && (\n                        <Anchor href={featuresViewAllHref} fz=\"xs\">\n                          View all\n                        </Anchor>\n                      )}\n                    </Group>\n\n                    <Divider my=\"sm\" />\n\n                    <SimpleGrid cols={2} spacing={0}>\n                      {featureItems}\n                    </SimpleGrid>\n\n                    <div className={classes.dropdownFooter}>\n                      <Group justify=\"space-between\">\n                        <div>\n                          <Text fw={500} fz=\"sm\">\n                            {featuresFooterHeading}\n                          </Text>\n                          <Text size=\"xs\" c=\"dimmed\">\n                            {featuresFooterDescription}\n                          </Text>\n                        </div>\n                        <Button variant=\"default\" onClick={onSignUp}>\n                          {featuresFooterActionLabel}\n                        </Button>\n                      </Group>\n                    </div>\n                  </HoverCard.Dropdown>\n                </HoverCard>\n              ) : (\n                <a href={link.href} className={classes.link} key={link.label}>\n                  {link.label}\n                </a>\n              ),\n            )}\n          </Group>\n\n          <Group visibleFrom=\"sm\">\n            <Button variant=\"default\" onClick={onLogin}>\n              {loginLabel}\n            </Button>\n            <Button onClick={onSignUp}>{signUpLabel}</Button>\n          </Group>\n\n          <Burger\n            opened={drawerOpened}\n            onClick={toggleDrawer}\n            hiddenFrom=\"sm\"\n            aria-label=\"Toggle navigation\"\n          />\n        </Group>\n      </header>\n\n      <Drawer\n        opened={drawerOpened}\n        onClose={closeDrawer}\n        size=\"100%\"\n        padding=\"md\"\n        title=\"Navigation\"\n        hiddenFrom=\"sm\"\n        zIndex={1000000}\n      >\n        <ScrollArea h=\"calc(100vh - 80px)\" mx=\"-md\">\n          <Divider my=\"sm\" />\n\n          {links.map((link) =>\n            link === featuresLink ? (\n              <div key={link.label}>\n                <UnstyledButton\n                  className={classes.link}\n                  onClick={toggleLinks}\n                  aria-expanded={linksOpened}\n                >\n                  <Center inline>\n                    <Box component=\"span\" mr={5}>\n                      {link.label}\n                    </Box>\n                    <IconChevronDown size={16} color={theme.colors.blue[6]} />\n                  </Center>\n                </UnstyledButton>\n                <Collapse expanded={linksOpened}>{featureItems}</Collapse>\n              </div>\n            ) : (\n              <a href={link.href} className={classes.link} key={link.label}>\n                {link.label}\n              </a>\n            ),\n          )}\n\n          <Divider my=\"sm\" />\n\n          <Group justify=\"center\" grow pb=\"xl\" px=\"md\">\n            <Button variant=\"default\" onClick={onLogin}>\n              {loginLabel}\n            </Button>\n            <Button onClick={onSignUp}>{signUpLabel}</Button>\n          </Group>\n        </ScrollArea>\n      </Drawer>\n    </>\n  );\n}\n"
    },
    {
      "path": "registry/mantine-ui/header-mega-menu/header-mega-menu.module.css",
      "type": "registry:file",
      "target": "@ui/header-mega-menu.module.css",
      "content": "/*\n * Adapted from Mantine UI's HeaderMegaMenu at\n * ffbf61c559f374a7ea28fcf00355e84dcbe9a908. MIT licensed; see\n * LICENSES/MANTINE-UI.txt after installation.\n */\n.header {\n  height: 60px;\n  padding-left: var(--mantine-spacing-md);\n  padding-right: var(--mantine-spacing-md);\n  border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n}\n\n/* Upstream used postcss-preset-mantine's `@mixin hover` and\n * `$mantine-breakpoint-sm`; this registry ships plain CSS modules with no\n * PostCSS preset, so both are inlined here (`:hover`, and the literal `48em`\n * default `sm` breakpoint value — `var()` is invalid inside a media\n * condition). See cards-carousel.module.css for the same convention. */\n.link {\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding-left: var(--mantine-spacing-md);\n  padding-right: var(--mantine-spacing-md);\n  text-decoration: none;\n  color: light-dark(var(--mantine-color-black), var(--mantine-color-white));\n  font-weight: 500;\n  font-size: var(--mantine-font-size-sm);\n}\n\n.link:hover {\n  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));\n}\n\n@media (max-width: 48em) {\n  .link {\n    height: 42px;\n    width: 100%;\n  }\n}\n\n.subLink {\n  width: 100%;\n  padding: var(--mantine-spacing-xs) var(--mantine-spacing-md);\n  border-radius: var(--mantine-radius-md);\n}\n\n.subLink:hover {\n  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));\n}\n\n.dropdownFooter {\n  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7));\n  margin: calc(var(--mantine-spacing-md) * -1);\n  margin-top: var(--mantine-spacing-sm);\n  padding: var(--mantine-spacing-md) calc(var(--mantine-spacing-md) * 2);\n  padding-bottom: var(--mantine-spacing-xl);\n  border-top: 1px solid light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));\n}\n"
    }
  ],
  "meta": {
    "mantine": {
      "requires": ">=9",
      "provider": "MantineProvider",
      "props": {
        "HeaderMegaMenu": [
          {
            "name": "logo",
            "type": "ReactNode",
            "required": false,
            "description": "Rendered at the start of the header bar; nothing renders when omitted."
          },
          {
            "name": "links",
            "type": "readonly HeaderMegaMenuLink[]",
            "required": true,
            "description": "Ordered nav links rendered in the header bar and the mobile drawer. At most one entry should set `features`: only the first entry that does renders as the mega-menu (a hover-card dropdown on desktop, a collapsible section on mobile); `features` on any later entry is ignored."
          },
          {
            "name": "featuresViewAllHref",
            "type": "string",
            "required": false,
            "description": "Href for the mega-menu's \"View all\" link; the link is omitted when unset."
          },
          {
            "name": "featuresFooterHeading",
            "type": "string",
            "required": false,
            "default": "\"Get started\"",
            "description": "Heading shown in the mega-menu's footer callout."
          },
          {
            "name": "featuresFooterDescription",
            "type": "string",
            "required": false,
            "default": "\"Everything you need to explore what's possible and start building.\"",
            "description": "Body copy shown in the mega-menu's footer callout."
          },
          {
            "name": "featuresFooterActionLabel",
            "type": "string",
            "required": false,
            "default": "\"Get started\"",
            "description": "Label for the mega-menu footer's action button; clicking it calls `onSignUp`."
          },
          {
            "name": "loginLabel",
            "type": "string",
            "required": false,
            "default": "\"Log in\"",
            "description": "Label for the log in button, shown in the header and the mobile drawer."
          },
          {
            "name": "signUpLabel",
            "type": "string",
            "required": false,
            "default": "\"Sign up\"",
            "description": "Label for the sign up button, shown in the header and the mobile drawer."
          },
          {
            "name": "onLogin",
            "type": "() => void",
            "required": false,
            "description": "Called when a log in button (header or drawer) is clicked."
          },
          {
            "name": "onSignUp",
            "type": "() => void",
            "required": false,
            "description": "Called when a sign up button (header or drawer) or the mega-menu footer's action button is clicked."
          }
        ]
      },
      "usage": {
        "path": "registry/mantine-ui/header-mega-menu/header-mega-menu.usage.tsx",
        "content": "import { Text } from \"@mantine/core\";\nimport {\n  IconBook,\n  IconChartPie3,\n  IconCode,\n  IconCoin,\n  IconFingerprint,\n  IconNotification,\n} from \"@tabler/icons-react\";\nimport { HeaderMegaMenu, type HeaderMegaMenuLink } from \"@/components/ui/header-mega-menu\";\n\nconst links: HeaderMegaMenuLink[] = [\n  { label: \"Home\", href: \"/\" },\n  {\n    label: \"Features\",\n    href: \"/features\",\n    features: [\n      {\n        icon: <IconCode size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Open source\",\n        description: \"The full source is on GitHub, under the MIT license\",\n      },\n      {\n        icon: <IconCoin size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Free for everyone\",\n        description: \"No paid tier gates any core feature\",\n      },\n      {\n        icon: <IconBook size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Documentation\",\n        description: \"Guides and API references for every component\",\n      },\n      {\n        icon: <IconFingerprint size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Security\",\n        description: \"SOC 2 Type II audited, with SSO on every plan\",\n      },\n      {\n        icon: <IconChartPie3 size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Analytics\",\n        description: \"Usage dashboards and exportable reports\",\n      },\n      {\n        icon: <IconNotification size={22} color=\"var(--mantine-color-blue-6)\" />,\n        title: \"Notifications\",\n        description: \"Email and webhook alerts for every event\",\n      },\n    ],\n  },\n  { label: \"Learn\", href: \"/learn\" },\n  { label: \"Academy\", href: \"/academy\" },\n];\n\nexport function SiteHeader() {\n  return (\n    <HeaderMegaMenu\n      logo={\n        <Text fw={700} size=\"lg\">\n          Acme\n        </Text>\n      }\n      links={links}\n      featuresViewAllHref=\"/features\"\n      onLogin={() => console.log(\"log in\")}\n      onSignUp={() => console.log(\"sign up\")}\n    />\n  );\n}\n"
      }
    }
  }
}