{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "navigation-menu",
  "title": "Navigation Menu",
  "description": "A navigation bar whose one panel reshapes between titles.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://liquikit.dev/r/core.json",
    "https://liquikit.dev/r/glass.json",
    "https://liquikit.dev/r/popup.json"
  ],
  "files": [
    {
      "path": "src/navigation-menu.tsx",
      "content": "\"use client\";\n\nimport { NavigationMenu as BaseNavigationMenu } from \"@base-ui/react/navigation-menu\";\nimport {\n\ttype CSSProperties,\n\ttype ReactNode,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport { GlassPane, type GlassRefraction, type GlassTheme } from \"./glass\";\nimport { MorphPane, PopupState, usePopupState } from \"./popup\";\nimport { cx, type GlassOptions } from \"./types\";\nimport \"./liquikit.css\";\n\ntype Classed<P> = Omit<P, \"className\"> & { className?: string };\n\nexport type NavigationMenuRootProps = Omit<\n\tBaseNavigationMenu.Root.Props,\n\t\"className\"\n> & {\n\ttheme?: GlassTheme;\n\trefraction?: GlassRefraction;\n\tclassName?: string;\n};\n\nfunction Root({\n\ttheme,\n\trefraction,\n\tclassName,\n\tchildren,\n\tvalue: valueProp,\n\tdefaultValue = null,\n\tonValueChange,\n\t...rootProps\n}: NavigationMenuRootProps) {\n\tconst [uncontrolled, setUncontrolled] = useState(defaultValue);\n\tconst value = valueProp === undefined ? uncontrolled : valueProp;\n\tconst open = value !== null && value !== undefined;\n\tconst trigger = useRef<HTMLElement | null>(null);\n\tconst state = useMemo(() => ({ open, trigger }), [open]);\n\treturn (\n\t\t<PopupState.Provider value={state}>\n\t\t\t<BaseNavigationMenu.Root\n\t\t\t\t{...rootProps}\n\t\t\t\tvalue={value}\n\t\t\t\tonValueChange={(next, eventDetails) => {\n\t\t\t\t\tif (valueProp === undefined) setUncontrolled(next);\n\t\t\t\t\tonValueChange?.(next, eventDetails);\n\t\t\t\t}}\n\t\t\t\tclassName={cx(\"glass-ui-nav\", className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<BaseNavigationMenu.Portal>\n\t\t\t\t\t<BaseNavigationMenu.Positioner\n\t\t\t\t\t\tclassName=\"glass-ui-positioner glass-ui-nav__positioner\"\n\t\t\t\t\t\tsideOffset={10}\n\t\t\t\t\t\tcollisionPadding={16}\n\t\t\t\t\t\tcollisionAvoidance={{ side: \"none\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BaseNavigationMenu.Popup\n\t\t\t\t\t\t\tclassName=\"glass-ui-popup glass-ui-nav__popup\"\n\t\t\t\t\t\t\trender={(props) => (\n\t\t\t\t\t\t\t\t<MorphPane {...props} theme={theme} refraction={refraction} />\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BaseNavigationMenu.Viewport className=\"glass-ui-nav__viewport\" />\n\t\t\t\t\t\t</BaseNavigationMenu.Popup>\n\t\t\t\t\t</BaseNavigationMenu.Positioner>\n\t\t\t\t</BaseNavigationMenu.Portal>\n\t\t\t</BaseNavigationMenu.Root>\n\t\t</PopupState.Provider>\n\t);\n}\n\nexport type NavigationMenuListProps = Classed<BaseNavigationMenu.List.Props> &\n\tGlassOptions & {\n\t\trefraction?: GlassRefraction;\n\t\tstyle?: CSSProperties;\n\t};\n\nfunction List({\n\tclassName,\n\ttheme,\n\tlens,\n\tliquid,\n\trefraction,\n\tchildren,\n\t...listProps\n}: NavigationMenuListProps & { children?: ReactNode }) {\n\treturn (\n\t\t<BaseNavigationMenu.List\n\t\t\t{...listProps}\n\t\t\tclassName={cx(\"glass-ui-nav__list\", className)}\n\t\t\trender={(props) => (\n\t\t\t\t<GlassPane\n\t\t\t\t\t{...props}\n\t\t\t\t\tradius=\"capsule\"\n\t\t\t\t\ttheme={theme}\n\t\t\t\t\tlens={lens}\n\t\t\t\t\tliquid={liquid}\n\t\t\t\t\trefraction={refraction}\n\t\t\t\t/>\n\t\t\t)}\n\t\t>\n\t\t\t<ul className=\"glass-ui-nav__row\">{children}</ul>\n\t\t</BaseNavigationMenu.List>\n\t);\n}\n\nfunction Item(props: BaseNavigationMenu.Item.Props) {\n\treturn <BaseNavigationMenu.Item {...props} />;\n}\n\nfunction Trigger({\n\tclassName,\n\tchildren,\n\tonPointerEnter,\n\tonFocus,\n\tonClick,\n\t...triggerProps\n}: Classed<BaseNavigationMenu.Trigger.Props> & { children?: ReactNode }) {\n\tconst { trigger } = usePopupState();\n\tconst mark = (element: EventTarget) => {\n\t\ttrigger.current = element as HTMLElement;\n\t};\n\treturn (\n\t\t<BaseNavigationMenu.Trigger\n\t\t\t{...triggerProps}\n\t\t\tclassName={cx(\n\t\t\t\t\"glass-ui-toolbar__button glass-ui-nav__trigger\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonPointerEnter={(event) => {\n\t\t\t\tmark(event.currentTarget);\n\t\t\t\tonPointerEnter?.(event);\n\t\t\t}}\n\t\t\tonFocus={(event) => {\n\t\t\t\tmark(event.currentTarget);\n\t\t\t\tonFocus?.(event);\n\t\t\t}}\n\t\t\tonClick={(event) => {\n\t\t\t\tmark(event.currentTarget);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t\t<BaseNavigationMenu.Icon className=\"glass-ui-nav__icon\">\n\t\t\t\t<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n\t\t\t\t\t<path d=\"M4 6l4 4 4-4\" />\n\t\t\t\t</svg>\n\t\t\t</BaseNavigationMenu.Icon>\n\t\t</BaseNavigationMenu.Trigger>\n\t);\n}\n\nfunction Content({\n\tclassName,\n\t...contentProps\n}: Classed<BaseNavigationMenu.Content.Props>) {\n\treturn (\n\t\t<BaseNavigationMenu.Content\n\t\t\t{...contentProps}\n\t\t\tclassName={cx(\"glass-ui-nav__content\", className)}\n\t\t/>\n\t);\n}\n\n// A link closes the menu, unlike Base UI's default: in an app that routes on\n// the client the page never reloads, so a menu left open would stay over it.\nfunction Link({\n\tclassName,\n\ttitle,\n\tdescription,\n\tchildren,\n\tcloseOnClick = true,\n\t...linkProps\n}: Classed<BaseNavigationMenu.Link.Props> & {\n\ttitle?: ReactNode;\n\tdescription?: ReactNode;\n\tchildren?: ReactNode;\n}) {\n\tif (title) {\n\t\treturn (\n\t\t\t<BaseNavigationMenu.Link\n\t\t\t\t{...linkProps}\n\t\t\t\tcloseOnClick={closeOnClick}\n\t\t\t\tclassName={cx(\"glass-ui-nav__card\", className)}\n\t\t\t>\n\t\t\t\t<span className=\"glass-ui-nav__card-title\">{title}</span>\n\t\t\t\t{description ? (\n\t\t\t\t\t<span className=\"glass-ui-nav__card-description\">{description}</span>\n\t\t\t\t) : null}\n\t\t\t</BaseNavigationMenu.Link>\n\t\t);\n\t}\n\treturn (\n\t\t<BaseNavigationMenu.Link\n\t\t\t{...linkProps}\n\t\t\tcloseOnClick={closeOnClick}\n\t\t\tclassName={cx(\"glass-ui-toolbar__button\", className)}\n\t\t>\n\t\t\t{children}\n\t\t</BaseNavigationMenu.Link>\n\t);\n}\n\nexport const NavigationMenu = { Root, List, Item, Trigger, Content, Link };\n\nexport const NavigationMenuRoot = NavigationMenu.Root;\nexport const NavigationMenuList = NavigationMenu.List;\nexport const NavigationMenuItem = NavigationMenu.Item;\nexport const NavigationMenuTrigger = NavigationMenu.Trigger;\nexport const NavigationMenuContent = NavigationMenu.Content;\nexport const NavigationMenuLink = NavigationMenu.Link;\n",
      "type": "registry:ui",
      "target": "@components/liquikit/navigation-menu.tsx"
    }
  ],
  "type": "registry:ui"
}