{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar",
  "title": "Navbar",
  "description": "Top navigation with logo, primary links, trailing actions, and profile dropdown.",
  "dependencies": [
    "@radix-ui/react-dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/components/navbar/index.ts",
      "content": "export { Navbar } from \"./index.tsx\"\nexport { NAVBAR_ACCENT_HEX } from \"./types\"\nexport type {\n  NavbarActionItem,\n  NavbarHref,\n  NavbarIconAction,\n  NavbarImageAction,\n  NavbarLinkItem,\n  NavbarLogo,\n  NavbarProfile,\n  NavbarProfileMenuItem,\n  NavbarProps,\n  NavbarTextAction,\n} from \"./types\"\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { NavbarLogo } from \"./navbar-logo\";\nimport { NavbarNavItems } from \"./navbar-nav-items\";\nimport { NavbarProfileMenu } from \"./navbar-profile-menu\";\nimport { NavbarTrailingActions } from \"./navbar-trailing-actions\";\nimport type { NavbarProps } from \"./types\";\n\nimport {\n  LAYOUT_NAVBAR_INNER_CLASSES,\n  LAYOUT_NAVBAR_OUTER_CLASSES,\n} from \"@/lib/layout\";\nimport { cn } from \"@/lib/utils\";\n\nexport function Navbar({\n  logo,\n  navItems,\n  profile,\n  trailingActions,\n  className,\n}: NavbarProps) {\n  return (\n    <header\n      className={cn(\n        LAYOUT_NAVBAR_OUTER_CLASSES,\n        \"sticky top-0 z-50 flex flex-col bg-white shadow-sm rounded-b-[32px]\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          LAYOUT_NAVBAR_INNER_CLASSES,\n          \"justify-between py-3 md:py-3.5\",\n        )}\n      >\n        <div className=\"flex min-w-0 flex-1 items-center gap-8\">\n          <NavbarLogo logo={logo} />\n          <NavbarNavItems items={navItems} />\n        </div>\n\n        <div className=\"flex shrink-0 items-center gap-6\">\n          <NavbarTrailingActions items={trailingActions ?? []} />\n          <NavbarProfileMenu profile={profile} />\n        </div>\n      </div>\n    </header>\n  );\n}\n",
      "type": "registry:block"
    },
    {
      "path": "lib/layout.ts",
      "content": "/**\n * Layout tokens for registry blocks. Consuming apps can replace this file\n * to match site-wide navbar shell (max width, gutters, etc.).\n */\nexport const LAYOUT_NAVBAR_OUTER_CLASSES = \"w-full\";\n\nexport const LAYOUT_NAVBAR_INNER_CLASSES =\n  \"mx-auto flex w-full max-w-[1440px] flex-row items-center\";\n",
      "type": "registry:lib"
    },
    {
      "path": "registry/components/navbar/types.ts",
      "content": "import type { MouseEventHandler, ReactNode } from \"react\"\n\n/** Hover + active text/icon color for primary nav and profile menu (keep Tailwind `text-[#6962AC]` in sync). */\nexport const NAVBAR_ACCENT_HEX = \"#6962AC\" as const\n\nexport type NavbarHref = string\n\nexport type NavbarLinkItem = {\n  id?: string\n  label: string\n  href: NavbarHref\n  /** When omitted, `http(s)://` URLs open in a new tab; app paths stay in the same tab. */\n  openInNewTab?: boolean\n  /**\n   * Fires on the anchor click before navigation. Call `event.preventDefault()` to handle\n   * routing or actions yourself (e.g. Next.js `router.push`).\n   */\n  onClick?: MouseEventHandler<HTMLAnchorElement>\n  /**\n   * Mark the current route (or logical section). Renders accent color and an underline;\n   * set from the consuming app (e.g. compare `pathname` to `href`).\n   */\n  isActive?: boolean\n}\n\nexport type NavbarLogo = {\n  src: string\n  alt: string\n  href: NavbarHref\n  openInNewTab?: boolean\n  /** Same as link items: optional handler on the logo anchor (e.g. `preventDefault` + client routing). */\n  onClick?: MouseEventHandler<HTMLAnchorElement>\n}\n\nexport type NavbarProfileMenuItem = NavbarLinkItem & {\n  /** Leading icon next to the label (treat as decorative when `label` is set). */\n  icon?: ReactNode\n}\n\nexport type NavbarProfile = {\n  avatarSrc?: string\n  avatarAlt?: string\n  /** Shown when there is no `avatarSrc` (typically initials). */\n  fallbackText?: string\n  menuItems: NavbarProfileMenuItem[]\n  /** Accessible name for the profile menu trigger. */\n  menuTriggerLabel?: string\n}\n\nexport type NavbarTextAction = {\n  id?: string\n  type: \"text\"\n  label: string\n  href: NavbarHref\n  openInNewTab?: boolean\n  onClick?: MouseEventHandler<HTMLAnchorElement>\n}\n\nexport type NavbarIconAction = {\n  id?: string\n  type: \"icon\"\n  icon: ReactNode\n  ariaLabel: string\n  href: NavbarHref\n  openInNewTab?: boolean\n  onClick?: MouseEventHandler<HTMLAnchorElement>\n  /** Shown as the native browser tooltip on hover (e.g. \"Calendar\"). */\n  tooltip?: string\n  /**\n   * Optional unread / notification count. When greater than zero, a red pill is shown on the icon\n   * (values above 9 display as `9+`).\n   */\n  notificationCount?: number\n}\n\nexport type NavbarImageAction = {\n  id?: string\n  type: \"image\"\n  src: string\n  alt: string\n  href: NavbarHref\n  openInNewTab?: boolean\n  /** Optional classes for the `<img>` (size, object-fit, etc.). */\n  imageClassName?: string\n  onClick?: MouseEventHandler<HTMLAnchorElement>\n  /** Native tooltip on hover (e.g. \"Download app\"). */\n  tooltip?: string\n}\n\nexport type NavbarActionItem = NavbarTextAction | NavbarIconAction | NavbarImageAction\n\nexport type NavbarProps = {\n  logo: NavbarLogo\n  navItems: NavbarLinkItem[]\n  profile: NavbarProfile\n  /** Shown to the left of the profile control (text links and/or icon buttons). */\n  trailingActions?: NavbarActionItem[]\n  className?: string\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/navbar-anchor.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type NavbarAnchorProps = Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\"\n> & {\n  href: string\n  openInNewTab?: boolean\n}\n\nfunction resolveOpenInNewTab(href: string, openInNewTab?: boolean) {\n  if (typeof openInNewTab === \"boolean\") {\n    return openInNewTab\n  }\n\n  return /^https?:\\/\\//i.test(href)\n}\n\nexport const NavbarAnchor = React.forwardRef<HTMLAnchorElement, NavbarAnchorProps>(\n  function NavbarAnchor(\n    { href, openInNewTab, className, children, ...rest },\n    ref,\n  ) {\n    const external = resolveOpenInNewTab(href, openInNewTab)\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        className={cn(className)}\n        {...(external ? { target: \"_blank\", rel: \"noreferrer noopener\" } : {})}\n        {...rest}\n        suppressHydrationWarning\n      >\n        {children}\n      </a>\n    )\n  },\n)\n\nNavbarAnchor.displayName = \"NavbarAnchor\"\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/navbar-logo.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavbarAnchor } from \"./navbar-anchor\"\nimport type { NavbarLogo as NavbarLogoConfig } from \"./types\"\n\ntype NavbarLogoProps = {\n  logo: NavbarLogoConfig\n  className?: string\n}\n\nexport function NavbarLogo({ logo, className }: NavbarLogoProps) {\n  return (\n    <NavbarAnchor\n      href={logo.href}\n      openInNewTab={logo.openInNewTab}\n      onClick={logo.onClick}\n      className={`inline-flex shrink-0 cursor-pointer items-center rounded-md shadow-none outline-none ring-offset-background transition-opacity hover:opacity-90 hover:shadow-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 ${className ?? \"\"}`.trim()}\n    >\n      <img\n        src={logo.src}\n        alt={logo.alt}\n        className=\"h-8 w-auto max-w-[160px] object-contain\"\n        loading=\"eager\"\n        decoding=\"async\"\n        suppressHydrationWarning\n      />\n    </NavbarAnchor>\n  )\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/navbar-nav-items.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavbarAnchor } from \"./navbar-anchor\"\nimport type { NavbarLinkItem } from \"./types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NavbarNavItemsProps = {\n  items: Array<NavbarLinkItem>\n  className?: string\n}\n\nexport function NavbarNavItems({ items, className }: NavbarNavItemsProps) {\n  if (!items.length) {\n    return null\n  }\n\n  return (\n    <nav\n      aria-label=\"Primary\"\n      className={`flex min-w-0 flex-1 flex-wrap items-center gap-1 sm:gap-2 ${className ?? \"\"}`.trim()}\n    >\n      <ul className=\"flex flex-wrap items-center gap-6\">\n        {items.map((item, index) => (\n          <li key={item.id ?? `${item.href}-${item.label}-${index}`}>\n            <NavbarAnchor\n              href={item.href}\n              openInNewTab={item.openInNewTab}\n              onClick={item.onClick}\n              aria-current={item.isActive ? \"page\" : undefined}\n              className={cn(\n                /* Legacy LMS DesktopNavbar: 16/24 Poppins medium, gray-500 #6B7280, accent #6962AC; subpixel-antialiased avoids “thin” look vs body antialiased. */\n                \"cursor-pointer border border-transparent pb-1 font-poppins text-[16px] leading-[24px] !font-[500] subpixel-antialiased transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0\",\n                \"text-[#6B7280] hover:text-[#6962AC]\",\n                item.isActive &&\n                  \"border-b-2 border-[#6962AC] pb-1 text-[#6962AC]\",\n              )}\n            >\n              {item.label}\n            </NavbarAnchor>\n          </li>\n        ))}\n      </ul>\n    </nav>\n  )\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/navbar-profile-menu.tsx",
      "content": "\"use client\";\n\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { NavbarAnchor } from \"./navbar-anchor\";\nimport type { NavbarProfile } from \"./types\";\n\ntype NavbarProfileMenuProps = {\n  profile: NavbarProfile;\n  className?: string;\n};\n\nfunction initials(value: string) {\n  const parts = value.trim().split(/\\s+/).filter(Boolean);\n  if (!parts.length) {\n    return \"?\";\n  }\n\n  if (parts.length === 1) {\n    return parts[0].slice(0, 2).toUpperCase();\n  }\n\n  return `${parts[0][0] ?? \"\"}${parts[parts.length - 1][0] ?? \"\"}`.toUpperCase();\n}\n\nconst menuItemClassName =\n  \"flex cursor-pointer select-none items-center gap-2 rounded-sm px-3 py-2 font-poppins text-[14px] font-medium leading-6 shadow-none outline-none transition-colors subpixel-antialiased text-gray-700 hover:text-[#6962AC] data-[highlighted]:text-[#6962AC] data-[highlighted]:shadow-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n\nconst menuContentClassName =\n  \"z-[220] min-w-[200px] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\";\n\nexport function NavbarProfileMenu({\n  profile,\n  className,\n}: NavbarProfileMenuProps) {\n  const label =\n    profile.menuTriggerLabel ??\n    profile.avatarAlt ??\n    profile.fallbackText ??\n    \"Account menu\";\n\n  return (\n    <div className={cn(\"shrink-0\", className)}>\n      <DropdownMenu.Root>\n        <DropdownMenu.Trigger asChild>\n          <button\n            type=\"button\"\n            className=\"inline-flex size-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background text-sm font-medium text-foreground shadow-none outline-none ring-offset-background transition-colors hover:bg-accent hover:shadow-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 data-[state=open]:ring-2 data-[state=open]:ring-ring data-[state=open]:ring-offset-0\"\n            aria-label={label}\n            suppressHydrationWarning\n          >\n            {profile.avatarSrc ? (\n              <img\n                src={profile.avatarSrc}\n                alt={profile.avatarAlt ?? \"Profile photo\"}\n                className=\"size-full rounded-full object-cover\"\n                loading=\"lazy\"\n                decoding=\"async\"\n                suppressHydrationWarning\n              />\n            ) : (\n              <span aria-hidden=\"true\">\n                {initials(profile.fallbackText ?? profile.avatarAlt ?? \"User\")}\n              </span>\n            )}\n          </button>\n        </DropdownMenu.Trigger>\n\n        <DropdownMenu.Portal>\n          <DropdownMenu.Content\n            className={menuContentClassName}\n            sideOffset={8}\n            align=\"end\"\n            collisionPadding={12}\n          >\n            {profile.menuItems.length === 0 ? (\n              <div className=\"px-3 py-2 text-xs text-muted-foreground\">\n                No menu items.\n              </div>\n            ) : (\n              profile.menuItems.map((item, index) => (\n                <DropdownMenu.Item\n                  key={item.id ?? `${item.href}-${item.label}-${index}`}\n                  asChild\n                >\n                  <NavbarAnchor\n                    href={item.href}\n                    openInNewTab={item.openInNewTab}\n                    onClick={item.onClick}\n                    aria-current={item.isActive ? \"page\" : undefined}\n                    className={cn(\n                      menuItemClassName,\n                      item.isActive &&\n                        \"font-medium text-[#6962AC] data-[highlighted]:text-[#6962AC]\",\n                    )}\n                  >\n                    {item.icon ? (\n                      <span\n                        className=\"flex size-4 shrink-0 items-center justify-center text-inherit [&_svg]:size-4\"\n                        aria-hidden\n                      >\n                        {item.icon}\n                      </span>\n                    ) : null}\n                    <span\n                      className={cn(\n                        \"min-w-0 flex-1 text-inherit text-[14px] font-medium leading-6\",\n                        item.isActive && \"font-medium text-[#6962AC]\",\n                      )}\n                    >\n                      {item.label}\n                    </span>\n                  </NavbarAnchor>\n                </DropdownMenu.Item>\n              ))\n            )}\n          </DropdownMenu.Content>\n        </DropdownMenu.Portal>\n      </DropdownMenu.Root>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    },
    {
      "path": "registry/components/navbar/navbar-trailing-actions.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { NavbarAnchor } from \"./navbar-anchor\";\nimport type { NavbarActionItem } from \"./types\";\n\ntype NavbarTrailingActionsProps = {\n  items: Array<NavbarActionItem>;\n  className?: string;\n};\n\nexport function NavbarTrailingActions({\n  items,\n  className,\n}: NavbarTrailingActionsProps) {\n  if (!items.length) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`flex shrink-0 items-center gap-[16px] ${className ?? \"\"}`.trim()}\n    >\n      {items.map((item, index) => {\n        const key = item.id ?? `${item.type}-${item.href}-${index}`;\n\n        if (item.type === \"text\") {\n          return (\n            <NavbarAnchor\n              key={key}\n              href={item.href}\n              openInNewTab={item.openInNewTab}\n              onClick={item.onClick}\n              className=\"cursor-pointer rounded-md px-2 py-1.5 font-poppins text-sm font-medium subpixel-antialiased text-[#6B7280] shadow-none transition-colors hover:text-[#6962AC] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0\"\n            >\n              {item.label}\n            </NavbarAnchor>\n          );\n        }\n\n        if (item.type === \"image\") {\n          const imageClassName = item.imageClassName?.trim().length\n            ? item.imageClassName\n            : \"size-8 max-h-9 object-contain\";\n\n          return (\n            <NavbarAnchor\n              key={key}\n              href={item.href}\n              openInNewTab={item.openInNewTab}\n              onClick={item.onClick}\n              title={item.tooltip}\n              className=\"inline-flex cursor-pointer items-center justify-center rounded-md p-1 text-gray-600 shadow-none transition-colors hover:text-[#6962AC] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0\"\n            >\n              <img\n                src={item.src}\n                alt={item.alt}\n                className={imageClassName}\n                loading=\"lazy\"\n                decoding=\"async\"\n                suppressHydrationWarning\n              />\n            </NavbarAnchor>\n          );\n        }\n\n        const count =\n          typeof item.notificationCount === \"number\" && item.notificationCount > 0\n            ? item.notificationCount\n            : 0;\n        const badge =\n          count > 0 ? (\n            <span className=\"pointer-events-none absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-red-500 px-0.5 font-poppins text-[10px] leading-none font-medium text-white\">\n              {count > 9 ? \"9+\" : count}\n            </span>\n          ) : null;\n\n        return (\n          <NavbarAnchor\n            key={key}\n            href={item.href}\n            openInNewTab={item.openInNewTab}\n            onClick={item.onClick}\n            aria-label={item.ariaLabel}\n            title={item.tooltip}\n            className=\"relative inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-gray-600 shadow-none transition-colors hover:text-[#6962AC] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0\"\n          >\n            {item.icon}\n            {badge}\n          </NavbarAnchor>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}