{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"navbar","type":"registry:ui","title":"Navbar","description":"Navbar from react-fancy","package":"react-fancy","dependencies":["lucide-react"],"registryDependencies":[],"files":[{"path":"components\/fancy\/navbar\/Navbar.context.ts","content":"import { createContext, useContext } from \"react\";\r\nimport type { NavbarContextValue } from \".\/Navbar.types\";\r\n\r\nexport const NavbarContext = createContext<NavbarContextValue | null>(null);\r\n\r\nexport function useNavbar(): NavbarContextValue {\r\n  const ctx = useContext(NavbarContext);\r\n  if (!ctx) {\r\n    throw new Error(\"Navbar compound components must be used within <Navbar>\");\r\n  }\r\n  return ctx;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/Navbar.context.ts"},{"path":"components\/fancy\/navbar\/Navbar.tsx","content":"import { useMemo, useState } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport { NavbarContext } from \".\/Navbar.context\";\r\nimport { NavbarBrand } from \".\/NavbarBrand\";\r\nimport { NavbarItems } from \".\/NavbarItems\";\r\nimport { NavbarItem } from \".\/NavbarItem\";\r\nimport { NavbarToggle } from \".\/NavbarToggle\";\r\nimport type { NavbarProps } from \".\/Navbar.types\";\r\n\r\nfunction NavbarRoot({ children, className }: NavbarProps) {\r\n  const [mobileOpen, setMobileOpen] = useState(false);\r\n\r\n  const ctx = useMemo(\r\n    () => ({ mobileOpen, setMobileOpen }),\r\n    [mobileOpen],\r\n  );\r\n\r\n  return (\r\n    <NavbarContext.Provider value={ctx}>\r\n      <nav\r\n        data-react-fancy-navbar=\"\"\r\n        className={cn(\r\n          \"border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900\",\r\n          className,\r\n        )}\r\n      >\r\n        <div className=\"flex items-center justify-between\">\r\n          {children}\r\n        <\/div>\r\n      <\/nav>\r\n    <\/NavbarContext.Provider>\r\n  );\r\n}\r\n\r\nexport const Navbar = Object.assign(NavbarRoot, {\r\n  Brand: NavbarBrand,\r\n  Items: NavbarItems,\r\n  Item: NavbarItem,\r\n  Toggle: NavbarToggle,\r\n});\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/Navbar.tsx"},{"path":"components\/fancy\/navbar\/Navbar.types.ts","content":"import type { ReactNode } from \"react\";\r\n\r\nexport interface NavbarContextValue {\r\n  mobileOpen: boolean;\r\n  setMobileOpen: (open: boolean) => void;\r\n}\r\n\r\nexport interface NavbarProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport interface NavbarBrandProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport interface NavbarItemsProps {\r\n  children: ReactNode;\r\n  className?: string;\r\n}\r\n\r\nexport interface NavbarItemProps {\r\n  children: ReactNode;\r\n  href?: string;\r\n  active?: boolean;\r\n  className?: string;\r\n}\r\n\r\nexport interface NavbarToggleProps {\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/Navbar.types.ts"},{"path":"components\/fancy\/navbar\/NavbarBrand.tsx","content":"import { cn } from \"..\/..\/utils\/cn\";\r\nimport type { NavbarBrandProps } from \".\/Navbar.types\";\r\n\r\nexport function NavbarBrand({ children, className }: NavbarBrandProps) {\r\n  return (\r\n    <div data-react-fancy-navbar-brand=\"\" className={cn(\"flex items-center\", className)}>{children}<\/div>\r\n  );\r\n}\r\n\r\nNavbarBrand.displayName = \"NavbarBrand\";\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/NavbarBrand.tsx"},{"path":"components\/fancy\/navbar\/NavbarItem.tsx","content":"import { cn } from \"..\/..\/utils\/cn\";\r\nimport type { NavbarItemProps } from \".\/Navbar.types\";\r\n\r\nexport function NavbarItem({\r\n  children,\r\n  href,\r\n  active = false,\r\n  className,\r\n}: NavbarItemProps) {\r\n  const baseClass = cn(\r\n    \"rounded-lg px-3 py-2 text-sm font-medium transition-colors\",\r\n    active\r\n      ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white\"\r\n      : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white\",\r\n    className,\r\n  );\r\n\r\n  if (href) {\r\n    return (\r\n      <a data-react-fancy-navbar-item=\"\" href={href} className={baseClass}>\r\n        {children}\r\n      <\/a>\r\n    );\r\n  }\r\n\r\n  return <div data-react-fancy-navbar-item=\"\" className={baseClass}>{children}<\/div>;\r\n}\r\n\r\nNavbarItem.displayName = \"NavbarItem\";\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/NavbarItem.tsx"},{"path":"components\/fancy\/navbar\/NavbarItems.tsx","content":"import { cn } from \"..\/..\/utils\/cn\";\r\nimport { useNavbar } from \".\/Navbar.context\";\r\nimport type { NavbarItemsProps } from \".\/Navbar.types\";\r\n\r\nexport function NavbarItems({ children, className }: NavbarItemsProps) {\r\n  const { mobileOpen } = useNavbar();\r\n\r\n  return (\r\n    <div\r\n      data-react-fancy-navbar-items=\"\"\r\n      className={cn(\r\n        \"items-center gap-1\",\r\n        mobileOpen\r\n          ? \"flex flex-col border-t border-zinc-200 pt-4 dark:border-zinc-700\"\r\n          : \"hidden md:flex md:flex-row\",\r\n        className,\r\n      )}\r\n    >\r\n      {children}\r\n    <\/div>\r\n  );\r\n}\r\n\r\nNavbarItems.displayName = \"NavbarItems\";\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/NavbarItems.tsx"},{"path":"components\/fancy\/navbar\/NavbarToggle.tsx","content":"import { Menu, X } from \"lucide-react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport { useNavbar } from \".\/Navbar.context\";\r\nimport type { NavbarToggleProps } from \".\/Navbar.types\";\r\n\r\nexport function NavbarToggle({ className }: NavbarToggleProps) {\r\n  const { mobileOpen, setMobileOpen } = useNavbar();\r\n\r\n  return (\r\n    <button\r\n      data-react-fancy-navbar-toggle=\"\"\r\n      type=\"button\"\r\n      onClick={() => setMobileOpen(!mobileOpen)}\r\n      className={cn(\r\n        \"inline-flex items-center rounded-lg p-2 text-zinc-500 hover:bg-zinc-100 md:hidden dark:hover:bg-zinc-800\",\r\n        className,\r\n      )}\r\n      aria-label=\"Toggle navigation\"\r\n      aria-expanded={mobileOpen}\r\n    >\r\n      {mobileOpen ? (\r\n        <X size={20} \/>\r\n      ) : (\r\n        <Menu size={20} \/>\r\n      )}\r\n    <\/button>\r\n  );\r\n}\r\n\r\nNavbarToggle.displayName = \"NavbarToggle\";\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/NavbarToggle.tsx"},{"path":"components\/fancy\/navbar\/index.ts","content":"export { Navbar } from \".\/Navbar\";\r\nexport { useNavbar } from \".\/Navbar.context\";\r\nexport type {\r\n  NavbarProps,\r\n  NavbarBrandProps,\r\n  NavbarItemsProps,\r\n  NavbarItemProps,\r\n  NavbarToggleProps,\r\n  NavbarContextValue,\r\n} from \".\/Navbar.types\";\r\n","type":"registry:ui","target":"components\/fancy\/navbar\/index.ts"}]}