{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header-simple",
  "title": "Navbar 01",
  "description": "A responsive site header, centered nav links on desktop, a tablet CTA-only view, and a mobile hamburger dropdown panel, with active-page highlighting and optional sticky positioning.",
  "dependencies": [
    "motion",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/new-york/header-simple/header-simple.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, AnimatePresence } from \"motion/react\";\nimport { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nfunction cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport interface HeaderSimpleNavItem {\n  label: string;\n  url: string;\n}\n\nexport interface HeaderSimpleProps extends Omit<React.ComponentPropsWithoutRef<\"header\">, \"children\"> {\n  logoImage?: string;\n  logoText?: string;\n  logoUrl?: string;\n  logoSize?: number;\n  navItems?: HeaderSimpleNavItem[];\n  activePage?: string;\n  ctaShow?: boolean;\n  ctaText?: string;\n  ctaUrl?: string;\n  ctaBackground?: string;\n  ctaTextColor?: string;\n  ctaRadius?: number;\n  ctaFontSize?: number;\n  ctaFontWeight?: number;\n  ctaFontFamily?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  showBorder?: boolean;\n  borderRadius?: number;\n  textColor?: string;\n  navFontSize?: number;\n  navGap?: number;\n  horizontalPadding?: number;\n  headerHeight?: number;\n  desktopBreakpoint?: number;\n  mobileBreakpoint?: number;\n  menuBackground?: string;\n  menuTextColor?: string;\n  menuDividerColor?: string;\n  hamburgerBackground?: string;\n  isSticky?: boolean;\n  fontFamily?: string;\n}\n\nconst PANEL_SPRING = { type: \"spring\" as const, damping: 30, stiffness: 320, mass: 0.8 };\n\nconst DEFAULT_NAV_ITEMS: HeaderSimpleNavItem[] = [\n  { label: \"Templates\", url: \"#\" },\n  { label: \"Components\", url: \"#\" },\n  { label: \"All-Access\", url: \"#\" },\n  { label: \"Blog\", url: \"#\" },\n];\n\nexport function HeaderSimple({\n  logoImage,\n  logoText = \"Brand\",\n  logoUrl = \"/\",\n  logoSize = 28,\n  navItems = DEFAULT_NAV_ITEMS,\n  activePage = \"\",\n  ctaShow = true,\n  ctaText = \"Get All Access\",\n  ctaUrl = \"#\",\n  ctaBackground = \"#161616\",\n  ctaTextColor = \"#ffffff\",\n  ctaRadius = 99,\n  ctaFontSize = 14,\n  ctaFontWeight = 500,\n  ctaFontFamily = \"\",\n  backgroundColor = \"#f2f2f2\",\n  borderColor = \"rgba(0,0,0,0.08)\",\n  showBorder = false,\n  borderRadius = 9999,\n  textColor = \"#161616\",\n  navFontSize = 15,\n  navGap = 32,\n  horizontalPadding = 32,\n  headerHeight = 72,\n  desktopBreakpoint = 900,\n  mobileBreakpoint = 540,\n  menuBackground = \"#ffffff\",\n  menuTextColor = \"#161616\",\n  menuDividerColor = \"rgba(0,0,0,0.08)\",\n  hamburgerBackground = \"rgba(0,0,0,0.06)\",\n  isSticky = false,\n  fontFamily = \"Manrope, sans-serif\",\n  className,\n  style,\n  ...props\n}: HeaderSimpleProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [hoveredNav, setHoveredNav] = React.useState<number | null>(null);\n\n  const wrapRef = React.useRef<HTMLElement>(null);\n  const [containerWidth, setContainerWidth] = React.useState(1200);\n\n  React.useLayoutEffect(() => {\n    const el = wrapRef.current;\n    if (!el) return;\n    setContainerWidth(el.getBoundingClientRect().width);\n    const ro = new ResizeObserver(([entry]) => setContainerWidth(entry.contentRect.width));\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const isDesktop = containerWidth >= desktopBreakpoint;\n  const isMobile = containerWidth < mobileBreakpoint;\n  const isTablet = !isDesktop && !isMobile;\n\n  const showInlineNav = isDesktop;\n  const showInlineCTA = isDesktop || isTablet;\n  const showHamburger = !isDesktop;\n\n  const close = React.useCallback(() => {\n    setIsOpen(false);\n    setHoveredNav(null);\n  }, []);\n\n  React.useEffect(() => {\n    if (!isDesktop) return;\n    const t = setTimeout(close, 0);\n    return () => clearTimeout(t);\n  }, [isDesktop, close]);\n\n  const isActive = (item: HeaderSimpleNavItem) => activePage !== \"\" && (item.url === activePage || item.label === activePage);\n\n  const ctaButton = (\n    <motion.a\n      href={ctaUrl || \"#\"}\n      onClick={close}\n      whileHover={{ opacity: 0.88 }}\n      whileTap={{ scale: 0.96 }}\n      transition={{ duration: 0.15 }}\n      className=\"inline-flex h-[42px] items-center rounded-full whitespace-nowrap no-underline select-none\"\n      style={{ background: ctaBackground, color: ctaTextColor, padding: \"0 22px\", borderRadius: ctaRadius, fontSize: ctaFontSize, fontWeight: ctaFontWeight, fontFamily: ctaFontFamily || \"inherit\", letterSpacing: -0.1 }}\n    >\n      {ctaText}\n    </motion.a>\n  );\n\n  return (\n    <header\n      ref={wrapRef}\n      className={cn(\"w-full\", isSticky ? \"sticky top-0 z-[1000]\" : \"relative\", className)}\n      style={{ fontFamily, ...style }}\n      {...props}\n    >\n      <div\n        className=\"relative z-[2] box-border flex items-center justify-between overflow-hidden\"\n        style={{\n          height: headerHeight,\n          padding: `0 ${horizontalPadding}px`,\n          background: backgroundColor,\n          borderRadius,\n          borderBottom: showBorder ? `1px solid ${borderColor}` : \"none\",\n        }}\n      >\n        <a href={logoUrl || \"/\"} onClick={close} className=\"flex shrink-0 items-center gap-2.5 no-underline\">\n          {logoImage && <img src={logoImage} alt={logoText || \"\"} className=\"block w-auto\" style={{ height: logoSize }} />}\n          {logoText && (\n            <span className=\"leading-none font-bold select-none\" style={{ fontSize: 18, color: textColor, letterSpacing: -0.3 }}>\n              {logoText}\n            </span>\n          )}\n        </a>\n\n        {showInlineNav && (\n          <nav className=\"absolute left-1/2 flex -translate-x-1/2 items-center\" style={{ gap: navGap }}>\n            {navItems.map((item, i) => {\n              const active = isActive(item);\n              return (\n                <a\n                  key={i}\n                  href={item.url || \"#\"}\n                  onMouseEnter={() => setHoveredNav(i)}\n                  onMouseLeave={() => setHoveredNav(null)}\n                  className=\"flex items-center gap-1.5 whitespace-nowrap no-underline transition-opacity duration-150 ease-[ease] select-none\"\n                  style={{ fontSize: navFontSize, fontWeight: active ? 700 : 500, color: textColor, opacity: hoveredNav === i ? 0.7 : 1 }}\n                >\n                  {active && <span className=\"h-[5px] w-[5px] shrink-0 rounded-full\" style={{ background: textColor }} />}\n                  {item.label}\n                </a>\n              );\n            })}\n          </nav>\n        )}\n\n        <div className=\"flex shrink-0 items-center gap-3\">\n          {showInlineCTA && ctaShow && ctaText && ctaButton}\n\n          {showHamburger && (\n            <motion.button\n              onClick={() => setIsOpen((o) => !o)}\n              whileTap={{ scale: 0.88 }}\n              transition={{ duration: 0.12 }}\n              aria-label={isOpen ? \"Close menu\" : \"Open menu\"}\n              aria-expanded={isOpen}\n              className=\"relative flex h-[42px] w-[42px] shrink-0 cursor-pointer items-center justify-center rounded-full border-none outline-none\"\n              style={{ background: hamburgerBackground }}\n            >\n              <motion.span\n                animate={{ rotate: isOpen ? 45 : 0, y: isOpen ? 0 : -3.5 }}\n                transition={{ type: \"spring\", damping: 22, stiffness: 300 }}\n                className=\"absolute block h-[1.5px] w-[18px] rounded-[2px]\"\n                style={{ background: textColor }}\n              />\n              <motion.span\n                animate={{ rotate: isOpen ? -45 : 0, y: isOpen ? 0 : 3.5 }}\n                transition={{ type: \"spring\", damping: 22, stiffness: 300 }}\n                className=\"absolute block h-[1.5px] w-[18px] rounded-[2px]\"\n                style={{ background: textColor }}\n              />\n            </motion.button>\n          )}\n        </div>\n      </div>\n\n      {showHamburger && (\n        <motion.div\n          initial={false}\n          animate={{ height: isOpen ? \"auto\" : 0, marginTop: isOpen ? 8 : 0 }}\n          transition={PANEL_SPRING}\n          className=\"relative z-[1] overflow-hidden\"\n          style={{ background: menuBackground, borderRadius: Math.min(borderRadius, 24) }}\n        >\n          <AnimatePresence>\n            {isOpen && (\n              <motion.div\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={{ duration: 0.2 }}\n                className=\"flex flex-col\"\n                style={{ padding: `8px ${horizontalPadding}px 20px` }}\n              >\n                {navItems.map((item, i) => {\n                  const active = isActive(item);\n                  return (\n                    <a\n                      key={i}\n                      href={item.url || \"#\"}\n                      onClick={close}\n                      className=\"flex items-center gap-2 py-3 no-underline select-none\"\n                      style={{\n                        fontSize: navFontSize + 1,\n                        fontWeight: active ? 700 : 500,\n                        color: menuTextColor,\n                        borderBottom: i < navItems.length - 1 ? `1px solid ${menuDividerColor}` : \"none\",\n                      }}\n                    >\n                      {active && <span className=\"h-[5px] w-[5px] shrink-0 rounded-full\" style={{ background: menuTextColor }} />}\n                      {item.label}\n                    </a>\n                  );\n                })}\n\n                {!showInlineCTA && ctaShow && ctaText && <div className=\"mt-4\">{ctaButton}</div>}\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </motion.div>\n      )}\n    </header>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}