{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navbar",
  "title": "Navbar",
  "author": "Poyraz Avsever",
  "description": "Poyraz Soft Glass Navbar with container-responsive layout and semantic tokens.",
  "dependencies": [
    "@radix-ui/react-navigation-menu@^1.2.14",
    "@radix-ui/react-popover@^1.1.15",
    "class-variance-authority@^0.7.1",
    "lucide-react@^0.574.0"
  ],
  "registryDependencies": [
    "@poyraz/poyraz-utils",
    "@poyraz/poyraz-theme",
    "@poyraz/navbar-auto-hide"
  ],
  "files": [
    {
      "path": "registry/poyraz/ui/phase8/navbar.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronDown, ChevronRight, ChevronLeft, Menu, Search, X } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useNavbarAutoHide } from \"@/components/ui/hooks/use-navbar-auto-hide\";\n\n/* ================================================================== */\n/*  CONTEXT                                                            */\n/* ================================================================== */\n\ninterface NavbarContextValue {\n  mobileOpen: boolean;\n  setMobileOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  variant: \"default\" | \"minimal\" | \"transparent\" | \"bordered\" | \"glass\";\n  containerClassName: string;\n}\n\nconst DEFAULT_CONTAINER = \"max-w-5xl mx-auto\";\n\nconst NavbarContext = React.createContext<NavbarContextValue>({\n  mobileOpen: false,\n  setMobileOpen: () => {},\n  variant: \"default\",\n  containerClassName: DEFAULT_CONTAINER,\n});\n\nconst useNavbar = () => React.useContext(NavbarContext);\n\n/* ================================================================== */\n/*  NAVBAR ROOT                                                        */\n/* ================================================================== */\n\nconst navbarVariants = cva(\"w-full\", {\n  variants: {\n    variant: {\n      default: \"bg-background text-foreground\",\n      minimal: \"bg-background text-foreground\",\n      transparent: \"bg-transparent text-foreground\",\n      bordered: \"bg-background text-foreground border-b border-border-strong\",\n      glass:\n        \"bg-glass text-foreground border-b border-glass-border-outer shadow-[var(--poyraz-glass-shadow)] backdrop-blur-glass\",\n    },\n  },\n  defaultVariants: { variant: \"default\" },\n});\n\nexport interface NavbarProps\n  extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {\n  /** Show sticky behavior */\n  sticky?: boolean;\n  /** Auto-hide when scrolling down, reveal when scrolling up */\n  autoHide?: boolean;\n  /** Class name applied to inner containers for width constraint */\n  containerClassName?: string;\n}\n\nconst Navbar = React.forwardRef<HTMLElement, NavbarProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      sticky = false,\n      autoHide = false,\n      containerClassName,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const [mobileOpen, setMobileOpen] = React.useState(false);\n    const hidden = useNavbarAutoHide({ enabled: autoHide && sticky });\n\n    return (\n      <NavbarContext.Provider\n        value={{\n          mobileOpen,\n          setMobileOpen,\n          variant: variant ?? \"default\",\n          containerClassName: containerClassName ?? DEFAULT_CONTAINER,\n        }}\n      >\n        <nav\n          ref={ref}\n          data-slot=\"navbar\"\n          data-variant={variant ?? \"default\"}\n          data-sticky={sticky ? \"\" : undefined}\n          data-auto-hide={autoHide ? \"\" : undefined}\n          data-hidden={hidden ? \"\" : undefined}\n          className={cn(\n            \"@container/navbar min-w-0\",\n            navbarVariants({ variant }),\n            sticky && \"sticky top-0 z-50\",\n            autoHide &&\n              \"transition-transform duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)] motion-reduce:transition-none\",\n            hidden && \"-translate-y-full\",\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </nav>\n      </NavbarContext.Provider>\n    );\n  },\n);\nNavbar.displayName = \"Navbar\";\n\n/* ================================================================== */\n/*  TOP BAR (announcement / info / secondary)                          */\n/* ================================================================== */\n\nconst topBarVariants = cva([\"w-full\", \"text-xs font-medium tracking-wide\"].join(\" \"), {\n  variants: {\n    variant: {\n      announcement: \"bg-primary text-primary-foreground border-b border-primary-800\",\n      info: \"bg-accent text-secondary-foreground border-b border-border\",\n      secondary: \"bg-muted text-muted-foreground border-b border-border\",\n    },\n  },\n  defaultVariants: { variant: \"announcement\" },\n});\n\nexport interface NavbarTopBarProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof topBarVariants> {\n  /** Show a dismiss / close button */\n  dismissible?: boolean;\n}\n\nconst NavbarTopBar = React.forwardRef<HTMLDivElement, NavbarTopBarProps>(\n  ({ className, variant = \"announcement\", dismissible = false, children, ...props }, ref) => {\n    const { containerClassName } = useNavbar();\n    const [dismissed, setDismissed] = React.useState(false);\n\n    if (dismissed) return null;\n\n    return (\n      <div ref={ref} className={cn(topBarVariants({ variant }), className)} {...props}>\n        <div className={cn(\"py-1\", \"flex items-center justify-between\", containerClassName)}>\n          <div className=\"flex items-center gap-4 flex-1 min-w-0\">{children}</div>\n          {dismissible && (\n            <button\n              type=\"button\"\n              aria-label=\"Dismiss\"\n              onClick={() => setDismissed(true)}\n              className={cn(\n                \"inline-flex items-center justify-center shrink-0\",\n                \"h-5 w-5 rounded-sm ml-2\",\n                \"transition-colors duration-150 cursor-pointer\",\n                variant === \"announcement\"\n                  ? \"hover:bg-primary-600 text-primary-foreground/80 hover:text-primary-foreground\"\n                  : \"hover:bg-accent text-placeholder hover:text-muted-foreground\",\n              )}\n            >\n              <X className=\"h-3 w-3\" />\n            </button>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nNavbarTopBar.displayName = \"NavbarTopBar\";\n\n/* ================================================================== */\n/*  TOP BAR SECTION (for secondary variant layout)                     */\n/* ================================================================== */\n\ninterface NavbarTopBarSectionProps extends React.HTMLAttributes<HTMLDivElement> {\n  align?: \"start\" | \"center\" | \"end\";\n}\n\nconst NavbarTopBarSection = React.forwardRef<HTMLDivElement, NavbarTopBarSectionProps>(\n  ({ className, align = \"start\", children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"flex items-center gap-3 text-[11px]\",\n        align === \"center\" && \"justify-center\",\n        align === \"end\" && \"ml-auto\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nNavbarTopBarSection.displayName = \"NavbarTopBarSection\";\n\n/* ================================================================== */\n/*  MAIN CONTAINER                                                     */\n/* ================================================================== */\n\nconst NavbarMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { variant, containerClassName } = useNavbar();\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative w-full\",\n          \"border-b\",\n          variant === \"transparent\"\n            ? \"border-glass-border\"\n            : variant === \"bordered\"\n              ? \"border-border-strong\"\n              : \"border-border\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className={cn(\n            \"py-2\",\n            \"flex items-center justify-between gap-3 @sm/navbar:gap-4 @lg/navbar:gap-6\",\n            containerClassName,\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\nNavbarMain.displayName = \"NavbarMain\";\n\n/* ================================================================== */\n/*  BRAND                                                              */\n/* ================================================================== */\n\ninterface NavbarBrandProps extends React.HTMLAttributes<HTMLDivElement> {\n  href?: string;\n}\n\nconst NavbarBrand = React.forwardRef<HTMLDivElement, NavbarBrandProps>(\n  ({ className, children, href, ...props }, ref) => {\n    if (href) {\n      return (\n        <a\n          ref={ref as React.Ref<HTMLAnchorElement>}\n          href={href}\n          className={cn(\"flex items-center gap-2\", className)}\n          {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        >\n          {children}\n        </a>\n      );\n    }\n\n    return (\n      <div ref={ref} className={cn(\"flex items-center gap-2\", className)} {...props}>\n        {children}\n      </div>\n    );\n  },\n);\nNavbarBrand.displayName = \"NavbarBrand\";\n\n/* ================================================================== */\n/*  LINKS (NAVIGATION MENU)                                            */\n/* ================================================================== */\n\nconst NavbarLinks = React.forwardRef<\n  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => {\n  const { containerClassName } = useNavbar();\n\n  return (\n    <NavigationMenuPrimitive.Root\n      ref={ref}\n      data-slot=\"navbar-links\"\n      className={cn(\"static z-10 hidden @lg/navbar:flex items-center\", className)}\n      {...props}\n    >\n      <NavigationMenuPrimitive.List className=\"flex items-center gap-1\">\n        {children}\n      </NavigationMenuPrimitive.List>\n      <div className=\"absolute left-0 top-full w-full z-[60]\">\n        <div className={cn(containerClassName)}>\n          <NavigationMenuPrimitive.Viewport\n            className={cn(\n              \"relative w-full overflow-hidden transform-gpu origin-top\",\n              \"bg-background\",\n              \"border border-border border-t-0\",\n              \"rounded-sm shadow-none\",\n              \"h-[var(--radix-navigation-menu-viewport-height)]\",\n              \"transition-[width,height,opacity,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n              \"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-2\",\n              \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-top-2\",\n            )}\n          />\n        </div>\n      </div>\n    </NavigationMenuPrimitive.Root>\n  );\n});\nNavbarLinks.displayName = \"NavbarLinks\";\n\n/* ================================================================== */\n/*  LINK ITEM (simple)                                                 */\n/* ================================================================== */\n\nconst navLinkStyles = [\n  \"inline-flex items-center gap-1 px-2.5 py-1.5\",\n  \"text-sm font-medium tracking-wide\",\n  \"rounded-sm transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n  \"hover:bg-accent\",\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n  \"data-[active]:border-b data-[active]:border-primary\",\n].join(\" \");\n\nconst NavbarLink = React.forwardRef<\n  React.ComponentRef<typeof NavigationMenuPrimitive.Link>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Item>\n    <NavigationMenuPrimitive.Link ref={ref} className={cn(navLinkStyles, className)} {...props}>\n      {children}\n    </NavigationMenuPrimitive.Link>\n  </NavigationMenuPrimitive.Item>\n));\nNavbarLink.displayName = \"NavbarLink\";\n\n/* ================================================================== */\n/*  DROPDOWN TRIGGER                                                   */\n/* ================================================================== */\n\nconst NavbarDropdownTrigger = React.forwardRef<\n  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Trigger\n    ref={ref}\n    className={cn(navLinkStyles, \"group cursor-pointer\", className)}\n    {...props}\n  >\n    {children}\n    <ChevronDown\n      className=\"h-3.5 w-3.5 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)] group-data-[state=open]:rotate-180\"\n      aria-hidden\n    />\n  </NavigationMenuPrimitive.Trigger>\n));\nNavbarDropdownTrigger.displayName = \"NavbarDropdownTrigger\";\n\n/* ================================================================== */\n/*  DROPDOWN (wraps trigger + content)                                 */\n/* ================================================================== */\n\nconst NavbarDropdown = React.forwardRef<\n  React.ComponentRef<typeof NavigationMenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> & {\n    label: string;\n  }\n>(({ className, label, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Item ref={ref} className={cn(className)} {...props}>\n    <NavbarDropdownTrigger>{label}</NavbarDropdownTrigger>\n    <NavigationMenuPrimitive.Content\n      className={cn(\n        \"absolute left-0 top-0 w-full transform-gpu\",\n        \"data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=from-]:zoom-in-95\",\n        \"data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[motion^=to-]:zoom-out-95\",\n        \"data-[motion=from-end]:slide-in-from-right-52\",\n        \"data-[motion=from-start]:slide-in-from-left-52\",\n        \"data-[motion=to-end]:slide-out-to-right-52\",\n        \"data-[motion=to-start]:slide-out-to-left-52\",\n      )}\n    >\n      {children}\n    </NavigationMenuPrimitive.Content>\n  </NavigationMenuPrimitive.Item>\n));\nNavbarDropdown.displayName = \"NavbarDropdown\";\n\n/* ================================================================== */\n/*  MEGA MENU PANEL                                                    */\n/* ================================================================== */\n\nconst megaMenuVariants = cva(\"p-6\", {\n  variants: {\n    layout: {\n      /** Full-width: items spread across the entire row */\n      full: \"grid grid-cols-1 @sm/navbar:grid-cols-2 @lg/navbar:grid-cols-4 gap-3\",\n      /** Two columns on the left side */\n      columns: \"grid grid-cols-2 gap-3 max-w-lg\",\n      /** Featured: links on left, featured card slot on right */\n      featured: \"grid grid-cols-1 @lg/navbar:grid-cols-[1fr_280px] gap-6\",\n      /** Simple list (single column) */\n      list: \"flex flex-col gap-1 max-w-xs\",\n    },\n  },\n  defaultVariants: { layout: \"full\" },\n});\n\nexport interface NavbarMegaMenuProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof megaMenuVariants> {}\n\nconst NavbarMegaMenu = React.forwardRef<HTMLDivElement, NavbarMegaMenuProps>(\n  ({ className, layout, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"navbar-mega-menu\"\n      className={cn(megaMenuVariants({ layout }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nNavbarMegaMenu.displayName = \"NavbarMegaMenu\";\n\n/* ================================================================== */\n/*  MEGA MENU LINKS COLUMN (for \"featured\" layout left side)           */\n/* ================================================================== */\n\nconst NavbarMegaMenuLinks = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"grid grid-cols-2 gap-2\", className)} {...props}>\n      {children}\n    </div>\n  ),\n);\nNavbarMegaMenuLinks.displayName = \"NavbarMegaMenuLinks\";\n\n/* ================================================================== */\n/*  MEGA MENU FEATURED (card slot for \"featured\" layout right side)    */\n/* ================================================================== */\n\nconst NavbarMegaMenuFeatured = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"border border-border p-4\",\n      \"bg-muted\",\n      \"transition-[background-color,border-color,transform] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n));\nNavbarMegaMenuFeatured.displayName = \"NavbarMegaMenuFeatured\";\n\n/* ================================================================== */\n/*  MEGA MENU LINK ITEM                                                */\n/* ================================================================== */\n\nconst NavbarMegaMenuItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    title: string;\n    description?: string;\n  }\n>(({ className, title, description, children, ...props }, ref) => (\n  <NavigationMenuPrimitive.Link asChild>\n    <a\n      ref={ref}\n      className={cn(\n        \"block select-none p-3\",\n        \"border border-transparent\",\n        \"rounded-sm transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n        \"hover:bg-muted hover:border-border\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"text-sm font-medium leading-none\">{title}</div>\n      {description && (\n        <p className=\"mt-1.5 text-xs text-muted-foreground leading-snug\">{description}</p>\n      )}\n      {children}\n    </a>\n  </NavigationMenuPrimitive.Link>\n));\nNavbarMegaMenuItem.displayName = \"NavbarMegaMenuItem\";\n\n// Viewport is now rendered inline inside NavbarLinks\n\n/* ================================================================== */\n/*  ACTIONS (right side buttons)                                       */\n/* ================================================================== */\n\nconst NavbarActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"navbar-actions\"\n      className={cn(\"hidden @lg/navbar:flex items-center gap-2 shrink-0\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nNavbarActions.displayName = \"NavbarActions\";\n\n/* ================================================================== */\n/*  MOBILE TOGGLE                                                      */\n/* ================================================================== */\n\nconst NavbarMobileToggle = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement>\n>(({ className, ...props }, ref) => {\n  const { mobileOpen, setMobileOpen } = useNavbar();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={mobileOpen ? \"Close menu\" : \"Open menu\"}\n      onClick={() => setMobileOpen((prev) => !prev)}\n      className={cn(\n        \"inline-flex items-center justify-center\",\n        \"h-8 w-8\",\n        \"border rounded-sm\",\n        \"border-border-strong hover:bg-accent hover:border-input\",\n        \"transition-colors duration-150\",\n        \"@lg/navbar:hidden\",\n        \"cursor-pointer\",\n        className,\n      )}\n      {...props}\n    >\n      {mobileOpen ? <X className=\"h-4 w-4\" /> : <Menu className=\"h-4 w-4\" />}\n    </button>\n  );\n});\nNavbarMobileToggle.displayName = \"NavbarMobileToggle\";\n\n/* ================================================================== */\n/*  MOBILE MENU PANEL                                                  */\n/* ================================================================== */\n\nconst NavbarMobileMenu = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => {\n    const { mobileOpen, setMobileOpen } = useNavbar();\n\n    // Prevent body scroll when menu is open\n    React.useEffect(() => {\n      if (mobileOpen) {\n        document.body.style.overflow = \"hidden\";\n      } else {\n        document.body.style.overflow = \"\";\n      }\n      return () => {\n        document.body.style.overflow = \"\";\n      };\n    }, [mobileOpen]);\n\n    return (\n      <>\n        {/* Backdrop */}\n        <div\n          className={cn(\n            \"@lg/navbar:hidden fixed inset-0 z-[998] bg-overlay backdrop-blur-[1px] transition-[opacity,backdrop-filter] duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)] motion-reduce:transition-none\",\n            mobileOpen ? \"opacity-100 pointer-events-auto\" : \"opacity-0 pointer-events-none\",\n          )}\n          onClick={() => setMobileOpen(false)}\n          aria-hidden\n        />\n\n        {/* Slide-in panel */}\n        <div\n          ref={ref}\n          className={cn(\n            \"@lg/navbar:hidden fixed top-0 right-0 z-[999] h-full w-[min(88%,24rem)]\",\n            \"bg-background\",\n            \"border-l border-border\",\n            \"shadow-none transform-gpu will-change-transform\",\n            \"transition-transform duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)]\",\n            mobileOpen ? \"translate-x-0\" : \"translate-x-full\",\n            className,\n          )}\n          {...props}\n        >\n          {/* Panel header */}\n          <div className=\"flex items-center justify-between py-4 border-b border-border\">\n            <span className=\"text-xs font-bold tracking-widest uppercase text-placeholder\">\n              Menu\n            </span>\n            <button\n              type=\"button\"\n              aria-label=\"Close menu\"\n              onClick={() => setMobileOpen(false)}\n              className={cn(\n                \"inline-flex items-center justify-center\",\n                \"h-8 w-8\",\n                \"border rounded-sm\",\n                \"border-border-strong hover:bg-accent hover:border-input\",\n                \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] active:scale-95\",\n                \"cursor-pointer\",\n              )}\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n\n          {/* Panel links */}\n          <nav className=\"flex flex-col gap-1 px-4 py-4 overflow-y-auto h-[calc(100%-57px)] animate-poyraz-fade-in\">\n            {children}\n          </nav>\n        </div>\n      </>\n    );\n  },\n);\nNavbarMobileMenu.displayName = \"NavbarMobileMenu\";\n\n/* ================================================================== */\n/*  MOBILE LINK                                                        */\n/* ================================================================== */\n\ninterface NavbarMobileLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  active?: boolean;\n}\n\nconst NavbarMobileLink = React.forwardRef<HTMLAnchorElement, NavbarMobileLinkProps>(\n  ({ className, active, children, ...props }, ref) => (\n    <a\n      ref={ref}\n      className={cn(\n        \"block px-2.5 py-2\",\n        \"text-sm font-medium\",\n        \"border border-transparent\",\n        \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n        active\n          ? \"bg-primary-muted text-primary-muted-foreground border-primary-200 font-semibold\"\n          : \"hover:bg-muted hover:border-border\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </a>\n  ),\n);\nNavbarMobileLink.displayName = \"NavbarMobileLink\";\n\n/* ================================================================== */\n/*  MOBILE GROUP (labeled section in mobile menu)                      */\n/* ================================================================== */\n\ninterface NavbarMobileGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  label?: string;\n}\n\nconst NavbarMobileGroup = React.forwardRef<HTMLDivElement, NavbarMobileGroupProps>(\n  ({ className, label, children, ...props }, ref) => (\n    <div ref={ref} className={cn(\"mb-3\", className)} {...props}>\n      {label && (\n        <div className=\"px-3 mb-1.5 text-[10px] font-bold uppercase tracking-[0.15em] text-placeholder\">\n          {label}\n        </div>\n      )}\n      <div className=\"flex flex-col gap-0.5\">{children}</div>\n    </div>\n  ),\n);\nNavbarMobileGroup.displayName = \"NavbarMobileGroup\";\n\n/* ================================================================== */\n/*  MOBILE ACTIONS (CTA buttons in bottom of mobile menu)              */\n/* ================================================================== */\n\nconst NavbarMobileActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        \"mt-auto px-4 py-4\",\n        \"border-t border-border\",\n        \"flex flex-col gap-2\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  ),\n);\nNavbarMobileActions.displayName = \"NavbarMobileActions\";\n\n/* ================================================================== */\n/*  SEARCH                                                             */\n/* ================================================================== */\n\ninterface NavbarSearchProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  /** Callback when user submits search */\n  onSearch?: (value: string) => void;\n  /** Container class */\n  wrapperClassName?: string;\n}\n\nconst NavbarSearch = React.forwardRef<HTMLInputElement, NavbarSearchProps>(\n  ({ className, placeholder = \"Search…\", onSearch, wrapperClassName, ...props }, ref) => {\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\" && onSearch) {\n        onSearch(e.currentTarget.value);\n      }\n    };\n\n    return (\n      <div className={cn(\"relative hidden @sm/navbar:flex items-center\", wrapperClassName)}>\n        <Search className=\"absolute left-2.5 h-3.5 w-3.5 text-placeholder\" />\n        <input\n          ref={ref}\n          type=\"text\"\n          placeholder={placeholder}\n          onKeyDown={handleKeyDown}\n          className={cn(\n            \"h-8 w-36 @lg/navbar:w-52 pl-8 pr-3\",\n            \"text-xs font-medium\",\n            \"border rounded-md\",\n            \"bg-background border-border-strong text-foreground placeholder:text-placeholder\",\n            \"outline-none transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            \"focus:border-ring focus:ring-[3px] focus:ring-ring/20\",\n            className,\n          )}\n          {...props}\n        />\n      </div>\n    );\n  },\n);\nNavbarSearch.displayName = \"NavbarSearch\";\n\n/* ================================================================== */\n/*  DIVIDER (vertical separator)                                       */\n/* ================================================================== */\n\nconst NavbarDivider = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"separator\"\n      className={cn(\n        \"hidden @lg/navbar:block\",\n        \"h-5 w-px\",\n        \"border-l border-border\",\n        \"mx-2\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nNavbarDivider.displayName = \"NavbarDivider\";\n\n/* ================================================================== */\n/*  POPOVER DROPDOWN (small, link-specific)                            */\n/* ================================================================== */\n\ninterface NavbarPopoverDropdownProps {\n  label: string;\n  /** Alignment relative to the trigger */\n  align?: \"start\" | \"center\" | \"end\";\n  /** Custom width (default: auto, min 180px) */\n  width?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction NavbarPopoverDropdown({\n  label,\n  align = \"start\",\n  width,\n  children,\n  className,\n}: NavbarPopoverDropdownProps) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <NavigationMenuPrimitive.Item className=\"relative\">\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PopoverPrimitive.Trigger asChild>\n          <button type=\"button\" className={cn(navLinkStyles, \"group cursor-pointer\")}>\n            {label}\n            <ChevronDown\n              className={cn(\n                \"h-3.5 w-3.5 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n                open && \"rotate-180\",\n              )}\n              aria-hidden\n            />\n          </button>\n        </PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            align={align}\n            sideOffset={8}\n            className={cn(\n              \"z-[70] min-w-[180px]\",\n              \"bg-background\",\n              \"border border-border\",\n              \"rounded-sm shadow-sm origin-[var(--radix-popover-content-transform-origin)]\",\n              \"py-1\",\n              \"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-2\",\n              \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-top-2\",\n              \"duration-[var(--poyraz-motion-duration-base)]\",\n              className,\n            )}\n            style={width ? { width } : undefined}\n          >\n            {children}\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </NavigationMenuPrimitive.Item>\n  );\n}\nNavbarPopoverDropdown.displayName = \"NavbarPopoverDropdown\";\n\n/* ================================================================== */\n/*  POPOVER DROPDOWN ITEM (simple link)                                */\n/* ================================================================== */\n\nconst NavbarPopoverDropdownItem = React.forwardRef<\n  HTMLAnchorElement,\n  React.AnchorHTMLAttributes<HTMLAnchorElement>\n>(({ className, children, ...props }, ref) => (\n  <a\n    ref={ref}\n    className={cn(\n      \"block px-3 py-1.5\",\n      \"text-sm font-medium text-secondary-foreground\",\n      \"transition-[color,background-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n      \"hover:bg-muted hover:text-foreground\",\n      \"focus-visible:outline-none focus-visible:bg-muted\",\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </a>\n));\nNavbarPopoverDropdownItem.displayName = \"NavbarPopoverDropdownItem\";\n\n/* ================================================================== */\n/*  PANEL DROPDOWN (medium, icon+title+description)                    */\n/* ================================================================== */\n\ninterface NavbarPanelDropdownProps {\n  label: string;\n  /** Alignment relative to the trigger */\n  align?: \"start\" | \"center\" | \"end\";\n  /** Panel width (default: 360px) */\n  width?: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nfunction NavbarPanelDropdown({\n  label,\n  align = \"start\",\n  width = \"360px\",\n  children,\n  className,\n}: NavbarPanelDropdownProps) {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <NavigationMenuPrimitive.Item className=\"relative\">\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <PopoverPrimitive.Trigger asChild>\n          <button type=\"button\" className={cn(navLinkStyles, \"group cursor-pointer\")}>\n            {label}\n            <ChevronDown\n              className={cn(\n                \"h-3.5 w-3.5 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n                open && \"rotate-180\",\n              )}\n              aria-hidden\n            />\n          </button>\n        </PopoverPrimitive.Trigger>\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            align={align}\n            sideOffset={8}\n            className={cn(\n              \"z-[70]\",\n              \"bg-background\",\n              \"border border-border\",\n              \"rounded-sm shadow-sm origin-[var(--radix-popover-content-transform-origin)]\",\n              \"p-3\",\n              \"data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-top-2\",\n              \"data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-top-2\",\n              \"duration-[var(--poyraz-motion-duration-base)]\",\n              className,\n            )}\n            style={{ width }}\n          >\n            <div className=\"grid gap-1\">{children}</div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n    </NavigationMenuPrimitive.Item>\n  );\n}\nNavbarPanelDropdown.displayName = \"NavbarPanelDropdown\";\n\n/* ================================================================== */\n/*  PANEL DROPDOWN ITEM (icon + title + description)                   */\n/* ================================================================== */\n\ninterface NavbarPanelDropdownItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  title: string;\n  description?: string;\n  icon?: React.ReactNode;\n}\n\nconst NavbarPanelDropdownItem = React.forwardRef<HTMLAnchorElement, NavbarPanelDropdownItemProps>(\n  ({ className, title, description, icon, children, ...props }, ref) => (\n    <a\n      ref={ref}\n      className={cn(\n        \"flex items-start gap-3 p-2.5\",\n        \"rounded-sm transition-[color,background-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n        \"hover:bg-muted\",\n        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"flex items-center justify-center h-8 w-8 rounded-sm bg-accent text-muted-foreground shrink-0 mt-0.5\">\n          {icon}\n        </span>\n      )}\n      <div className=\"min-w-0\">\n        <div className=\"text-sm font-medium leading-none text-foreground\">{title}</div>\n        {description && (\n          <p className=\"mt-1 text-xs text-muted-foreground leading-snug\">{description}</p>\n        )}\n        {children}\n      </div>\n    </a>\n  ),\n);\nNavbarPanelDropdownItem.displayName = \"NavbarPanelDropdownItem\";\n\n/* ================================================================== */\n/*  MOBILE DROPDOWN (accordion-style nested nav)                       */\n/* ================================================================== */\n\ninterface NavbarMobileDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  label: string;\n  defaultOpen?: boolean;\n}\n\nconst NavbarMobileDropdown = React.forwardRef<HTMLDivElement, NavbarMobileDropdownProps>(\n  ({ className, label, defaultOpen = false, children, ...props }, ref) => {\n    const [open, setOpen] = React.useState(defaultOpen);\n    const contentRef = React.useRef<HTMLDivElement>(null);\n    const [height, setHeight] = React.useState<number>(0);\n\n    React.useEffect(() => {\n      if (contentRef.current) {\n        setHeight(contentRef.current.scrollHeight);\n      }\n    }, [children, open]);\n\n    return (\n      <div ref={ref} className={cn(className)} {...props}>\n        <button\n          type=\"button\"\n          onClick={() => setOpen((prev) => !prev)}\n          className={cn(\n            \"flex items-center justify-between w-full\",\n            \"px-2.5 py-2\",\n            \"text-sm font-medium\",\n            \"border border-transparent\",\n            \"transition-[color,background-color,border-color] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            \"hover:bg-muted hover:border-border\",\n            \"cursor-pointer\",\n          )}\n        >\n          {label}\n          <ChevronDown\n            className={cn(\n              \"h-4 w-4 text-placeholder transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n              open && \"rotate-180\",\n            )}\n            aria-hidden\n          />\n        </button>\n        <div\n          ref={contentRef}\n          className={cn(\n            \"overflow-hidden transition-[max-height,opacity] duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)]\",\n            open ? \"opacity-100\" : \"opacity-0\",\n          )}\n          style={{ maxHeight: open ? `${height}px` : \"0px\" }}\n        >\n          <div className=\"pl-3 pb-1 flex flex-col gap-0.5\">{children}</div>\n        </div>\n      </div>\n    );\n  },\n);\nNavbarMobileDropdown.displayName = \"NavbarMobileDropdown\";\n\n/* ================================================================== */\n/*  MOBILE DRILL-DOWN CONTEXT                                          */\n/* ================================================================== */\n\ninterface DrillDownContextValue {\n  activePanel: string | null;\n  pushPanel: (id: string) => void;\n  popPanel: () => void;\n}\n\nconst DrillDownContext = React.createContext<DrillDownContextValue>({\n  activePanel: null,\n  pushPanel: () => {},\n  popPanel: () => {},\n});\n\n/* ================================================================== */\n/*  MOBILE DRILL-DOWN MENU (wraps mobile menu content with stack)      */\n/* ================================================================== */\n\ntype NavbarMobileDrillMenuProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst NavbarMobileDrillMenu = React.forwardRef<HTMLDivElement, NavbarMobileDrillMenuProps>(\n  ({ className, children, ...props }, ref) => {\n    const [panelStack, setPanelStack] = React.useState<string[]>([]);\n    const childArray = React.Children.toArray(children);\n    const panels = childArray.filter(\n      (child) =>\n        React.isValidElement(child) &&\n        typeof child.type !== \"string\" &&\n        \"displayName\" in child.type &&\n        child.type.displayName === \"NavbarMobileDrillPanel\",\n    );\n    const mainContent = childArray.filter(\n      (child) =>\n        !React.isValidElement(child) ||\n        typeof child.type === \"string\" ||\n        !(\"displayName\" in child.type) ||\n        child.type.displayName !== \"NavbarMobileDrillPanel\",\n    );\n\n    const activePanel = panelStack.length > 0 ? panelStack[panelStack.length - 1] : null;\n\n    const pushPanel = React.useCallback((id: string) => {\n      setPanelStack((prev) => (prev[prev.length - 1] === id ? prev : [...prev, id]));\n    }, []);\n\n    const popPanel = React.useCallback(() => {\n      setPanelStack((prev) => prev.slice(0, -1));\n    }, []);\n\n    return (\n      <DrillDownContext.Provider value={{ activePanel, pushPanel, popPanel }}>\n        <div\n          ref={ref}\n          data-slot=\"navbar-mobile-drill-menu\"\n          data-panel={activePanel ?? undefined}\n          className={cn(\"relative overflow-hidden\", className)}\n          {...props}\n        >\n          {/* Main panel */}\n          <div\n            className={cn(\n              \"transition-[transform,opacity] duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)]\",\n              activePanel ? \"-translate-x-full\" : \"translate-x-0\",\n              activePanel ? \"opacity-0\" : \"opacity-100\",\n            )}\n          >\n            {mainContent}\n          </div>\n          {panels}\n        </div>\n      </DrillDownContext.Provider>\n    );\n  },\n);\nNavbarMobileDrillMenu.displayName = \"NavbarMobileDrillMenu\";\n\n/* ================================================================== */\n/*  MOBILE DRILL-DOWN TRIGGER                                          */\n/* ================================================================== */\n\ninterface NavbarMobileDrillTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {\n  /** Unique panel ID this trigger opens */\n  panelId: string;\n}\n\nconst NavbarMobileDrillTrigger = React.forwardRef<HTMLButtonElement, NavbarMobileDrillTriggerProps>(\n  ({ className, panelId, children, ...props }, ref) => {\n    const { activePanel, pushPanel } = React.useContext(DrillDownContext);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        data-slot=\"navbar-mobile-drill-trigger\"\n        aria-expanded={activePanel === panelId}\n        aria-controls={`navbar-drill-panel-${panelId}`}\n        onClick={() => pushPanel(panelId)}\n        className={cn(\n          \"flex items-center justify-between w-full\",\n          \"px-2.5 py-2\",\n          \"text-sm font-medium\",\n          \"border border-transparent\",\n          \"transition-[color,background-color,border-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)] group\",\n          \"hover:bg-muted hover:border-border\",\n          \"cursor-pointer\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronRight className=\"h-4 w-4 text-placeholder\" aria-hidden />\n      </button>\n    );\n  },\n);\nNavbarMobileDrillTrigger.displayName = \"NavbarMobileDrillTrigger\";\n\n/* ================================================================== */\n/*  MOBILE DRILL-DOWN PANEL (sub-page that slides in)                  */\n/* ================================================================== */\n\ninterface NavbarMobileDrillPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Unique ID matching the trigger's panelId */\n  panelId: string;\n  /** Back button label */\n  backLabel?: string;\n}\n\nconst NavbarMobileDrillPanel = React.forwardRef<HTMLDivElement, NavbarMobileDrillPanelProps>(\n  ({ className, panelId, backLabel = \"Back\", children, ...props }, ref) => {\n    const { activePanel, popPanel } = React.useContext(DrillDownContext);\n    const isActive = activePanel === panelId;\n\n    return (\n      <div\n        ref={ref}\n        id={`navbar-drill-panel-${panelId}`}\n        data-slot=\"navbar-mobile-drill-panel\"\n        data-state={isActive ? \"open\" : \"closed\"}\n        aria-hidden={!isActive}\n        className={cn(\n          \"absolute inset-0 h-full\",\n          \"bg-surface\",\n          \"transition-[transform,opacity] duration-[var(--poyraz-motion-duration-slow)] ease-[var(--poyraz-motion-ease-out)]\",\n          isActive ? \"translate-x-0\" : \"translate-x-full\",\n          isActive ? \"opacity-100\" : \"opacity-0\",\n          isActive ? \"pointer-events-auto\" : \"pointer-events-none\",\n          className,\n        )}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          data-slot=\"navbar-mobile-drill-back\"\n          onClick={popPanel}\n          className={cn(\n            \"flex items-center gap-1 w-full\",\n            \"px-2.5 py-2 mb-1\",\n            \"text-sm font-medium text-muted-foreground\",\n            \"border-b border-accent\",\n            \"transition-[color,background-color,transform] duration-[var(--poyraz-motion-duration-fast)] ease-[var(--poyraz-motion-ease-out)]\",\n            \"hover:bg-muted hover:text-secondary-foreground\",\n            \"cursor-pointer\",\n          )}\n        >\n          <ChevronLeft className=\"h-4 w-4\" aria-hidden />\n          {backLabel}\n        </button>\n        <div className=\"flex flex-col gap-0.5 px-1\">{children}</div>\n      </div>\n    );\n  },\n);\nNavbarMobileDrillPanel.displayName = \"NavbarMobileDrillPanel\";\n\n/* ================================================================== */\n/*  EXPORTS                                                            */\n/* ================================================================== */\n\nexport {\n  Navbar,\n  NavbarTopBar,\n  NavbarTopBarSection,\n  NavbarMain,\n  NavbarBrand,\n  NavbarLinks,\n  NavbarLink,\n  NavbarDropdown,\n  NavbarDropdownTrigger,\n  NavbarMegaMenu,\n  NavbarMegaMenuLinks,\n  NavbarMegaMenuFeatured,\n  NavbarMegaMenuItem,\n  NavbarPopoverDropdown,\n  NavbarPopoverDropdownItem,\n  NavbarPanelDropdown,\n  NavbarPanelDropdownItem,\n  NavbarActions,\n  NavbarMobileToggle,\n  NavbarMobileMenu,\n  NavbarMobileLink,\n  NavbarMobileGroup,\n  NavbarMobileActions,\n  NavbarMobileDropdown,\n  NavbarMobileDrillMenu,\n  NavbarMobileDrillTrigger,\n  NavbarMobileDrillPanel,\n  NavbarSearch,\n  NavbarDivider,\n  navbarVariants,\n  megaMenuVariants,\n  topBarVariants,\n  useNavbar,\n};\n",
      "type": "registry:ui",
      "target": "@ui/organisms/navbar.tsx"
    }
  ],
  "meta": {
    "category": "phase-8-organism",
    "phase": "beta",
    "responsive": "container",
    "accessibilityReviewed": true
  },
  "type": "registry:ui"
}