@hanzo/docs-base-ui 16.4.8 → 16.5.3

package/dist/layouts/flux/sidebar.js

@@ -0,0 +1,197 @@
+'use client';
+
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, SidebarViewport as SidebarViewport$1, useFolder, useFolderDepth, useSidebar } from "../../components/sidebar/base.js";
+import { createLinkItemRenderer } from "../../components/sidebar/link-item.js";
+import { createPageTreeRenderer } from "../../components/sidebar/page-tree.js";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { motion } from "motion/react";
+import { RemoveScroll } from "react-remove-scroll";
+
+//#region src/layouts/flux/sidebar.tsx
+const MotionSidebarItem = motion.create(SidebarItem$1);
+const MotionSidebarFolderTrigger = motion.create(SidebarFolderTrigger$1);
+const MotionSidebarFolderLink = motion.create(SidebarFolderLink$1);
+const MotionSidebarFolderContent = motion.create(SidebarFolderContent$1);
+const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0", { variants: {
+	variant: {
+		link: "transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors",
+		button: "transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none"
+	},
+	highlight: { true: "data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5" }
+} });
+function getItemOffset(depth) {
+	return `calc(${2 + 3 * depth} * var(--spacing))`;
+}
+function Sidebar(props) {
+	return /* @__PURE__ */ jsx(SidebarProvider, { ...props });
+}
+function SidebarFolder(props) {
+	return /* @__PURE__ */ jsx(SidebarFolder$1, { ...props });
+}
+function SidebarCollapseTrigger(props) {
+	return /* @__PURE__ */ jsx(SidebarCollapseTrigger$1, { ...props });
+}
+function SidebarViewport(props) {
+	return /* @__PURE__ */ jsx(SidebarViewport$1, { ...props });
+}
+function SidebarTrigger(props) {
+	return /* @__PURE__ */ jsx(SidebarTrigger$1, { ...props });
+}
+function SidebarContent({ ref: refProp, className, children, ...props }) {
+	const ref = useRef(null);
+	const { open, setOpen } = useSidebar();
+	const listener = useEffectEvent((e) => {
+		if (open && e.key === "Escape") {
+			setOpen(false);
+			e.preventDefault();
+		}
+	});
+	useEffect(() => {
+		window.addEventListener("keydown", listener);
+		return () => {
+			window.removeEventListener("keydown", listener);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(RemoveScroll, {
+		enabled: open,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			className: cn("fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60", !open && "pointer-events-none"),
+			initial: "hide",
+			variants: {
+				show: { opacity: 1 },
+				hide: { opacity: 0 }
+			},
+			animate: open ? "show" : "hide",
+			exit: "hide",
+			onClick: () => {
+				setOpen(false);
+			},
+			children: /* @__PURE__ */ jsx(motion.div, {
+				className: "absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm",
+				variants: {
+					show: {
+						y: 0,
+						opacity: 1
+					},
+					hide: {
+						y: "80%",
+						opacity: 0
+					}
+				},
+				transition: {
+					duration: .3,
+					ease: [
+						.16,
+						1,
+						.3,
+						1
+					],
+					opacity: { duration: .1 }
+				},
+				children: /* @__PURE__ */ jsx(motion.aside, {
+					id: "nd-sidebar",
+					ref: mergeRefs(ref, refProp),
+					className: cn("mx-auto sm:max-w-[400px]", className),
+					onClick: (e) => e.stopPropagation(),
+					...props,
+					children
+				})
+			})
+		})
+	});
+}
+function SidebarSeparator({ className, style, children, ...props }) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx(SidebarSeparator$1, {
+		className: cn("[&_svg]:size-4 [&_svg]:shrink-0", className),
+		style: {
+			paddingInlineStart: getItemOffset(depth),
+			...style
+		},
+		...props,
+		children
+	});
+}
+function SidebarItem({ className, style, children, ...props }) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx(MotionSidebarItem, {
+		className: cn(itemVariants({
+			variant: "link",
+			highlight: depth >= 1
+		}), className),
+		style: {
+			paddingInlineStart: getItemOffset(depth),
+			...style
+		},
+		...props,
+		children
+	});
+}
+function SidebarFolderTrigger({ className, style, ...props }) {
+	const { depth, collapsible } = useFolder();
+	return /* @__PURE__ */ jsx(MotionSidebarFolderTrigger, {
+		className: (s) => cn(itemVariants({ variant: collapsible ? "button" : null }), "w-full", typeof className === "function" ? className(s) : className),
+		style: {
+			paddingInlineStart: getItemOffset(depth - 1),
+			...style
+		},
+		...props,
+		children: props.children
+	});
+}
+function SidebarFolderLink({ className, style, ...props }) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx(MotionSidebarFolderLink, {
+		className: cn(itemVariants({
+			variant: "link",
+			highlight: depth > 1
+		}), "w-full", className),
+		style: {
+			paddingInlineStart: getItemOffset(depth - 1),
+			...style
+		},
+		...props,
+		children: props.children
+	});
+}
+function SidebarFolderContent({ className, children, ...props }) {
+	const depth = useFolderDepth();
+	const { open } = useFolder();
+	return /* @__PURE__ */ jsx(MotionSidebarFolderContent, {
+		className: (s) => cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(s) : className),
+		...props,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			initial: "hide",
+			animate: open ? "show" : "hide",
+			exit: "hide",
+			variants: {
+				show: { opacity: 1 },
+				hide: { opacity: 0 }
+			},
+			children
+		})
+	});
+}
+const SidebarPageTree = createPageTreeRenderer({
+	SidebarFolder,
+	SidebarFolderContent,
+	SidebarSeparator,
+	SidebarFolderLink,
+	SidebarFolderTrigger,
+	SidebarItem
+});
+const SidebarLinkItem = createLinkItemRenderer({
+	SidebarFolder,
+	SidebarFolderContent,
+	SidebarFolderLink,
+	SidebarFolderTrigger,
+	SidebarItem
+});
+
+//#endregion
+export { Sidebar, SidebarCollapseTrigger, SidebarContent, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarLinkItem, SidebarPageTree, SidebarSeparator, SidebarTrigger, SidebarViewport };
+//# sourceMappingURL=sidebar.js.map

package/dist/layouts/flux/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","names":["Base.SidebarItem","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent","Base.SidebarProvider","Base.SidebarFolder","Base.SidebarCollapseTrigger","Base.SidebarViewport","Base.SidebarTrigger","Base.useSidebar","Base.useFolderDepth","Base.SidebarSeparator","Base.useFolder"],"sources":["../../../src/layouts/flux/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useEffect, useEffectEvent, useRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst MotionSidebarItem = motion.create(Base.SidebarItem);\nconst MotionSidebarFolderTrigger = motion.create(Base.SidebarFolderTrigger);\nconst MotionSidebarFolderLink = motion.create(Base.SidebarFolderLink);\nconst MotionSidebarFolderContent = motion.create(Base.SidebarFolderContent);\n\nconst itemVariants = cva(\n  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        true: \"data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport function Sidebar(props: ComponentProps<typeof Base.SidebarProvider>) {\n  return <Base.SidebarProvider {...props} />;\n}\n\nexport function SidebarFolder(props: ComponentProps<typeof Base.SidebarFolder>) {\n  return <Base.SidebarFolder {...props} />;\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<typeof Base.SidebarCollapseTrigger>) {\n  return <Base.SidebarCollapseTrigger {...props} />;\n}\n\nexport function SidebarViewport(props: ComponentProps<typeof Base.SidebarViewport>) {\n  return <Base.SidebarViewport {...props} />;\n}\n\nexport function SidebarTrigger(props: ComponentProps<typeof Base.SidebarTrigger>) {\n  return <Base.SidebarTrigger {...props} />;\n}\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const ref = useRef<HTMLElement>(null);\n  const { open, setOpen } = Base.useSidebar();\n\n  const listener = useEffectEvent((e: KeyboardEvent) => {\n    if (open && e.key === 'Escape') {\n      setOpen(false);\n      e.preventDefault();\n    }\n  });\n  useEffect(() => {\n    window.addEventListener('keydown', listener);\n    return () => {\n      window.removeEventListener('keydown', listener);\n    };\n  }, []);\n\n  return (\n    <RemoveScroll enabled={open}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60',\n          !open && 'pointer-events-none',\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        onClick={() => {\n          setOpen(false);\n        }}\n      >\n        <motion.div\n          className=\"absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm\"\n          variants={{\n            show: {\n              y: 0,\n              opacity: 1,\n            },\n            hide: {\n              y: '80%',\n              opacity: 0,\n            },\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.16, 1, 0.3, 1],\n            opacity: {\n              duration: 0.1,\n            },\n          }}\n        >\n          <motion.aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp)}\n            className={cn('mx-auto sm:max-w-[400px]', className)}\n            onClick={(e) => e.stopPropagation()}\n            {...(props as ComponentProps<typeof motion.aside>)}\n          >\n            {children}\n          </motion.aside>\n        </motion.div>\n      </motion.div>\n    </RemoveScroll>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...(props as object)}\n    >\n      {children}\n    </MotionSidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderTrigger>)}\n    >\n      {props.children}\n    </MotionSidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderLink>)}\n    >\n      {props.children}\n    </MotionSidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n  const { open } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...(props as ComponentProps<typeof MotionSidebarFolderContent>)}\n    >\n      <motion.div\n        initial=\"hide\"\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n      >\n        {children}\n      </motion.div>\n    </MotionSidebarFolderContent>\n  );\n}\n\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarSeparator,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}

package/dist/layouts/flux/tab-dropdown.d.ts

@@ -0,0 +1,21 @@
+import { SidebarTab } from "../../components/sidebar/tabs/index.js";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/flux/tab-dropdown.d.ts
+interface SidebarTabWithProps extends SidebarTab {
+  props?: ComponentProps<'a'>;
+}
+declare function SidebarTabsDropdown({
+  options,
+  placeholder,
+  className,
+  ...props
+}: {
+  placeholder?: ReactNode;
+  options: SidebarTabWithProps[];
+} & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function isTabActive(tab: SidebarTab, pathname: string): boolean;
+//#endregion
+export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };
+//# sourceMappingURL=tab-dropdown.d.ts.map

package/dist/layouts/flux/tab-dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-dropdown.d.ts","names":[],"sources":["../../../src/layouts/flux/tab-dropdown.tsx"],"mappings":";;;;;UAYiB,mBAAA,SAA4B,UAAA;EAC3C,KAAA,GAAQ,cAAA;AAAA;AAAA,iBAGM,mBAAA,CAAA;EACd,OAAA;EACA,WAAA;EACA,SAAA;EAAA,GACG;AAAA;EAEH,WAAA,GAAc,SAAA;EACd,OAAA,EAAS,mBAAA;AAAA,IACP,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiGZ,WAAA,CAAY,GAAA,EAAK,UAAA,EAAY,QAAA"}

package/dist/layouts/flux/tab-dropdown.js

@@ -0,0 +1,96 @@
+'use client';
+
+import { cn } from "../../utils/cn.js";
+import { isActive, normalize } from "../../utils/urls.js";
+import { useSidebar } from "../../components/sidebar/base.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import { useMemo, useState } from "react";
+import { usePathname } from "@hanzo/docs-core/framework";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+
+//#region src/layouts/flux/tab-dropdown.tsx
+function SidebarTabsDropdown({ options, placeholder, className, ...props }) {
+	const [open, setOpen] = useState(false);
+	const { closeOnRedirect } = useSidebar();
+	const pathname = usePathname();
+	const selectedIdx = useMemo(() => {
+		return options.findLastIndex((item) => isTabActive(item, pathname));
+	}, [options, pathname]);
+	const selected = selectedIdx !== -1 ? options[selectedIdx] : void 0;
+	const onClick = () => {
+		closeOnRedirect.current = false;
+		setOpen(false);
+	};
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "size-4.5 shrink-0 empty:hidden",
+		children: selected.icon
+	}), /* @__PURE__ */ jsx("p", {
+		className: "font-medium",
+		children: selected.title
+	})] }) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
+			className: cn("flex items-center gap-2 rounded-full p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-open:bg-fd-accent data-open:text-fd-accent-foreground", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "popLayout",
+				children: /* @__PURE__ */ jsx(motion.span, {
+					className: "flex w-full items-center text-nowrap gap-1.5",
+					initial: {
+						opacity: 0,
+						y: "100%"
+					},
+					animate: {
+						opacity: 1,
+						y: 0
+					},
+					exit: {
+						opacity: 0,
+						y: "-100%"
+					},
+					children: item
+				}, selectedIdx)
+			}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "start",
+			className: "flex flex-col gap-1 max-w-svw p-1 fd-scroll-container",
+			children: options.map((item, i) => {
+				const isActive = i === selectedIdx;
+				if (!isActive && item.unlisted) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: item.url,
+					onClick,
+					...item.props,
+					className: cn("flex items-center gap-1.5 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 mb-auto size-4.5 empty:hidden",
+							children: item.icon
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium leading-none",
+							children: item.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
+							children: item.description
+						})] }),
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
+					]
+				}, item.url);
+			})
+		})]
+	});
+}
+function isTabActive(tab, pathname) {
+	if (tab.urls) return tab.urls.has(normalize(pathname));
+	return isActive(tab.url, pathname, true);
+}
+
+//#endregion
+export { SidebarTabsDropdown, isTabActive };
+//# sourceMappingURL=tab-dropdown.js.map

package/dist/layouts/flux/tab-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-dropdown.js","names":[],"sources":["../../../src/layouts/flux/tab-dropdown.tsx"],"sourcesContent":["'use client';\nimport { Check, ChevronsUpDown } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useMemo, useState } from 'react';\nimport Link from '@hanzo/docs-core/link';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { cn } from '@/utils/cn';\nimport { isActive, normalize } from '@/utils/urls';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport type { SidebarTab } from '@/components/sidebar/tabs';\nimport { AnimatePresence, motion } from 'motion/react';\n\nexport interface SidebarTabWithProps extends SidebarTab {\n  props?: ComponentProps<'a'>;\n}\n\nexport function SidebarTabsDropdown({\n  options,\n  placeholder,\n  className,\n  ...props\n}: {\n  placeholder?: ReactNode;\n  options: SidebarTabWithProps[];\n} & ComponentProps<'button'>) {\n  const [open, setOpen] = useState(false);\n  const { closeOnRedirect } = useSidebar();\n  const pathname = usePathname();\n  const selectedIdx = useMemo(() => {\n    return options.findLastIndex((item) => isTabActive(item, pathname));\n  }, [options, pathname]);\n  const selected = selectedIdx !== -1 ? options[selectedIdx] : undefined;\n\n  const onClick = () => {\n    closeOnRedirect.current = false;\n    setOpen(false);\n  };\n\n  const item = selected ? (\n    <>\n      <div className=\"size-4.5 shrink-0 empty:hidden\">{selected.icon}</div>\n      <p className=\"font-medium\">{selected.title}</p>\n    </>\n  ) : (\n    placeholder\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {item && (\n        <PopoverTrigger\n          className={cn(\n            'flex items-center gap-2 rounded-full p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-open:bg-fd-accent data-open:text-fd-accent-foreground',\n            className,\n          )}\n          {...props}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            <motion.span\n              key={selectedIdx}\n              className=\"flex w-full items-center text-nowrap gap-1.5\"\n              initial={{\n                opacity: 0,\n                y: '100%',\n              }}\n              animate={{\n                opacity: 1,\n                y: 0,\n              }}\n              exit={{\n                opacity: 0,\n                y: '-100%',\n              }}\n            >\n              {item}\n            </motion.span>\n          </AnimatePresence>\n          <ChevronsUpDown className=\"shrink-0 ms-auto size-4 text-fd-muted-foreground\" />\n        </PopoverTrigger>\n      )}\n      <PopoverContent\n        align=\"start\"\n        className=\"flex flex-col gap-1 max-w-svw p-1 fd-scroll-container\"\n      >\n        {options.map((item, i) => {\n          const isActive = i === selectedIdx;\n          if (!isActive && item.unlisted) return;\n\n          return (\n            <Link\n              key={item.url}\n              href={item.url}\n              onClick={onClick}\n              {...item.props}\n              className={cn(\n                'flex items-center gap-1.5 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',\n                item.props?.className,\n              )}\n            >\n              <div className=\"shrink-0 mb-auto size-4.5 empty:hidden\">{item.icon}</div>\n              <div>\n                <p className=\"text-sm font-medium leading-none\">{item.title}</p>\n                <p className=\"text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden\">\n                  {item.description}\n                </p>\n              </div>\n\n              <Check\n                className={cn(\n                  'shrink-0 ms-auto size-3.5 text-fd-primary',\n                  !isActive && 'invisible',\n                )}\n              />\n            </Link>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function isTabActive(tab: SidebarTab, pathname: string) {\n  if (tab.urls) return tab.urls.has(normalize(pathname));\n\n  return isActive(tab.url, pathname, true);\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,oBAAoB,EAClC,SACA,aACA,WACA,GAAG,SAIyB;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,WAAW,aAAa;CAC9B,MAAM,cAAc,cAAc;AAChC,SAAO,QAAQ,eAAe,SAAS,YAAY,MAAM,SAAS,CAAC;IAClE,CAAC,SAAS,SAAS,CAAC;CACvB,MAAM,WAAW,gBAAgB,KAAK,QAAQ,eAAe;CAE7D,MAAM,gBAAgB;AACpB,kBAAgB,UAAU;AAC1B,UAAQ,MAAM;;CAGhB,MAAM,OAAO,WACX,8CACE,oBAAC;EAAI,WAAU;YAAkC,SAAS;GAAW,EACrE,oBAAC;EAAE,WAAU;YAAe,SAAS;GAAU,IAC9C,GAEH;AAGF,QACE,qBAAC;EAAc;EAAM,cAAc;aAChC,QACC,qBAAC;GACC,WAAW,GACT,kNACA,UACD;GACD,GAAI;cAEJ,oBAAC;IAAgB,MAAK;cACpB,oBAAC,OAAO;KAEN,WAAU;KACV,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,SAAS;MACP,SAAS;MACT,GAAG;MACJ;KACD,MAAM;MACJ,SAAS;MACT,GAAG;MACJ;eAEA;OAfI,YAgBO;KACE,EAClB,oBAAC,kBAAe,WAAU,qDAAqD;IAChE,EAEnB,oBAAC;GACC,OAAM;GACN,WAAU;aAET,QAAQ,KAAK,MAAM,MAAM;IACxB,MAAM,WAAW,MAAM;AACvB,QAAI,CAAC,YAAY,KAAK,SAAU;AAEhC,WACE,qBAAC;KAEC,MAAM,KAAK;KACF;KACT,GAAI,KAAK;KACT,WAAW,GACT,iGACA,KAAK,OAAO,UACb;;MAED,oBAAC;OAAI,WAAU;iBAA0C,KAAK;QAAW;MACzE,qBAAC,oBACC,oBAAC;OAAE,WAAU;iBAAoC,KAAK;QAAU,EAChE,oBAAC;OAAE,WAAU;iBACV,KAAK;QACJ,IACA;MAEN,oBAAC,SACC,WAAW,GACT,6CACA,CAAC,YAAY,YACd,GACD;;OAtBG,KAAK,IAuBL;KAET;IACa;GACT;;AAId,SAAgB,YAAY,KAAiB,UAAkB;AAC7D,KAAI,IAAI,KAAM,QAAO,IAAI,KAAK,IAAI,UAAU,SAAS,CAAC;AAEtD,QAAO,SAAS,IAAI,KAAK,UAAU,KAAK"}

package/dist/layouts/home/client.d.ts

@@ -1,10 +1,10 @@
 import { HomeLayoutProps } from "./index.js";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/layouts/home/client.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "icon" | "button" | "main" | null | undefined;
+  variant?: "main" | "icon" | "button" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header({
   nav,
@@ -13,7 +13,7 @@ declare function Header({
   githubUrl,
   themeSwitch,
   searchToggle
-}: HomeLayoutProps): react_jsx_runtime32.JSX.Element;
+}: HomeLayoutProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Header, navItemVariants };
 //# sourceMappingURL=client.d.ts.map

package/dist/layouts/home/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/home/client.tsx"],"sourcesContent":[],"mappings":";;;;;cA4Ca;;IAiBX,+BAAA,CAAA;iBAEc,MAAA;;;;;;;GAOb,kBAAe,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"client.d.ts","names":[],"sources":["../../../src/layouts/home/client.tsx"],"mappings":";;;;;cAuCa,eAAA,GAAe,KAAA;;IAiB1B,+BAAA,CAAA,SAAA;AAAA,iBAEc,MAAA,CAAA;EACd,GAAA;EACA,IAAA;EACA,KAAA;EACA,SAAA;EACA,WAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/home/client.js

@@ -1,27 +1,27 @@
 'use client';
 
+import { cn } from "../../utils/cn.js";
 import { buttonVariants } from "../../components/ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../components/ui/collapsible.js";
+import { useIsScrollTop } from "../../utils/use-is-scroll-top.js";
+import { LinkItem } from "../../utils/link-item.js";
 import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger } from "../../components/ui/navigation-menu.js";
 import { LargeSearchToggle, SearchToggle } from "../shared/search-toggle.js";
-import { renderTitleNav, resolveLinkItems } from "../shared/index.js";
+import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle, LanguageToggleText } from "../shared/language-toggle.js";
 import { ThemeToggle } from "../shared/theme-toggle.js";
+import { Fragment, createContext, use, useEffect, useEffectEvent, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "@hanzo/docs-core/link";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, Languages } from "lucide-react";
-import { Fragment as Fragment$1, createContext, use, useCallback, useEffect, useMemo, useState } from "react";
 import { cva } from "class-variance-authority";
-import { useIsScrollTop } from "@hanzo/docs-radix-ui/hooks/use-is-scroll-top";
-import { LinkItem } from "@hanzo/docs-radix-ui/link-item";
 import { NavigationMenu } from "@base-ui/react";
 
 //#region src/layouts/home/client.tsx
 const MobileMenuContext = createContext(null);
 const navItemVariants = cva("[&_svg]:size-4", {
 	variants: { variant: {
-		main: "inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary data-[popup-open]:text-fd-primary",
+		main: "inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary data-popup-open:text-fd-primary",
 		button: buttonVariants({
 			color: "secondary",
 			className: "gap-1.5"
@@ -34,28 +34,10 @@ const navItemVariants = cva("[&_svg]:size-4", {
 	defaultVariants: { variant: "main" }
 });
 function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, searchToggle = {} }) {
-	const { navItems, menuItems } = useMemo(() => {
-		const navItems$1 = [];
-		const menuItems$1 = [];
-		for (const item of resolveLinkItems({
-			links,
-			githubUrl
-		})) switch (item.on ?? "all") {
-			case "menu":
-				menuItems$1.push(item);
-				break;
-			case "nav":
-				navItems$1.push(item);
-				break;
-			default:
-				navItems$1.push(item);
-				menuItems$1.push(item);
-		}
-		return {
-			navItems: navItems$1,
-			menuItems: menuItems$1
-		};
-	}, [links, githubUrl]);
+	const { menuItems, navItems } = useLinkItems({
+		links,
+		githubUrl
+	});
 	return /* @__PURE__ */ jsx(MobileMenuCollapsible, { render: (_, s) => /* @__PURE__ */ jsxs(HeaderRoot, {
 		transparentMode: nav.transparentMode,
 		className: cn(s.open && "shadow-lg rounded-b-2xl"),
@@ -102,7 +84,7 @@ function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, se
 								color: "ghost",
 								className: "group [&_svg]:size-5.5"
 							})),
-							children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-[panel-open]:rotate-180" })
+							children: /* @__PURE__ */ jsx(ChevronDown, { className: "transition-transform duration-300 group-data-panel-open:rotate-180" })
 						})]
 					})
 				]
@@ -134,13 +116,13 @@ function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, se
 			}),
 			/* @__PURE__ */ jsx(NavigationMenu.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu.Positioner, {
 				sideOffset: 10,
-				className: "z-20 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[left,right] duration-(--duration) ease-(--easing) data-[instant]:transition-none",
+				className: "z-20 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[left,right] duration-(--duration) ease-(--easing) data-instant:transition-none",
 				style: {
 					["--duration"]: "0.35s",
 					["--easing"]: "cubic-bezier(0.22, 1, 0.36, 1)"
 				},
 				children: /* @__PURE__ */ jsx(NavigationMenu.Popup, {
-					className: "relative w-(--popup-width) h-(--popup-height) max-w-(--fd-layout-width,1400px) origin-(--transform-origin) rounded-xl bg-fd-background/80  border backdrop-blur-lg shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0",
+					className: "relative w-(--popup-width) h-(--popup-height) max-w-(--fd-layout-width,1400px) origin-(--transform-origin) rounded-xl bg-fd-background/80  border backdrop-blur-lg shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0",
 					children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: "relative size-full overflow-hidden" })
 				})
 			}) })
@@ -149,17 +131,17 @@ function Header({ nav = {}, i18n = false, links, githubUrl, themeSwitch = {}, se
 }
 function MobileMenuCollapsible(props) {
 	const [open, setOpen] = useState(false);
-	const onClick = useCallback((e) => {
+	const onClick = useEffectEvent((e) => {
 		if (!open) return;
 		const header = document.getElementById("nd-nav");
 		if (header && !header.contains(e.target)) setOpen(false);
-	}, [open]);
+	});
 	useEffect(() => {
 		window.addEventListener("click", onClick);
 		return () => {
 			window.removeEventListener("click", onClick);
 		};
-	}, [onClick]);
+	}, []);
 	return /* @__PURE__ */ jsx(MobileMenuContext, {
 		value: useMemo(() => ({
 			open,
@@ -196,7 +178,7 @@ function NavigationMenuLinkItem({ item, ...props }) {
 	});
 	if (item.type === "menu") {
 		const children = item.items.map((child, j) => {
-			if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment$1, { children: child.children }, j);
+			if (child.type === "custom") return /* @__PURE__ */ jsx(Fragment, { children: child.children }, j);
 			const { banner = child.icon ? /* @__PURE__ */ jsx("div", {
 				className: "w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4",
 				children: child.icon
@@ -206,7 +188,7 @@ function NavigationMenuLinkItem({ item, ...props }) {
 				external: child.external,
 				...rest,
 				className: cn("flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground", rest.className),
-				children: rest.children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+				children: rest.children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					banner,
 					/* @__PURE__ */ jsx("p", {
 						className: "text-base font-medium",
@@ -251,7 +233,7 @@ function MobileMenuLinkItem({ item, className }) {
 	});
 	const { setOpen } = use(MobileMenuContext);
 	if (item.type === "menu") {
-		const header = /* @__PURE__ */ jsxs(Fragment, { children: [item.icon, item.text] });
+		const header = /* @__PURE__ */ jsxs(Fragment$1, { children: [item.icon, item.text] });
 		return /* @__PURE__ */ jsxs("div", {
 			className: cn("mb-4 flex flex-col", className),
 			children: [/* @__PURE__ */ jsx("p", {

package/dist/layouts/home/client.js.map

@@ -1 +1 @@
-{"version":3,"file":"client.js","names":["navItems","menuItems","Fragment"],"sources":["../../../src/layouts/home/client.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport Link from '@hanzo/docs-core/link';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport {\n  type LinkItemType,\n  type NavOptions,\n  renderTitleNav,\n  resolveLinkItems,\n} from '@/layouts/shared';\nimport { LinkItem } from '@hanzo/docs-radix-ui/link-item';\nimport {\n  NavigationMenuRoot,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from '@/components/ui/navigation-menu';\nimport { buttonVariants } from '@/components/ui/button';\nimport type { HomeLayoutProps } from '.';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { ThemeToggle } from '@/layouts/shared/theme-toggle';\nimport { LanguageToggle, LanguageToggleText } from '@/layouts/shared/language-toggle';\nimport { ChevronDown, Languages } from 'lucide-react';\nimport { useIsScrollTop } from '@hanzo/docs-radix-ui/hooks/use-is-scroll-top';\nimport { NavigationMenu } from '@base-ui/react';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\n\nconst MobileMenuContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport const navItemVariants = cva('[&_svg]:size-4', {\n  variants: {\n    variant: {\n      main: 'inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary data-[popup-open]:text-fd-primary',\n      button: buttonVariants({\n        color: 'secondary',\n        className: 'gap-1.5',\n      }),\n      icon: buttonVariants({\n        color: 'ghost',\n        size: 'icon',\n      }),\n    },\n  },\n  defaultVariants: {\n    variant: 'main',\n  },\n});\n\nexport function Header({\n  nav = {},\n  i18n = false,\n  links,\n  githubUrl,\n  themeSwitch = {},\n  searchToggle = {},\n}: HomeLayoutProps) {\n  const { navItems, menuItems } = useMemo(() => {\n    const navItems: LinkItemType[] = [];\n    const menuItems: LinkItemType[] = [];\n\n    for (const item of resolveLinkItems({ links, githubUrl })) {\n      switch (item.on ?? 'all') {\n        case 'menu':\n          menuItems.push(item);\n          break;\n        case 'nav':\n          navItems.push(item);\n          break;\n        default:\n          navItems.push(item);\n          menuItems.push(item);\n      }\n    }\n\n    return { navItems, menuItems };\n  }, [links, githubUrl]);\n\n  return (\n    <MobileMenuCollapsible\n      render={(_, s) => (\n        <HeaderRoot\n          transparentMode={nav.transparentMode}\n          className={cn(s.open && 'shadow-lg rounded-b-2xl')}\n        >\n          <NavigationMenuList className=\"flex h-14 w-full items-center px-4\">\n            {renderTitleNav(nav, {\n              className: 'inline-flex items-center gap-2.5 font-semibold',\n            })}\n            {nav.children}\n            <ul className=\"flex flex-row items-center gap-2 px-6 max-sm:hidden\">\n              {navItems\n                .filter((item) => !isSecondary(item))\n                .map((item, i) => (\n                  <NavigationMenuLinkItem key={i} item={item} className=\"text-sm\" />\n                ))}\n            </ul>\n            <div className=\"flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden\">\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.lg ?? (\n                  <LargeSearchToggle\n                    className=\"w-full rounded-full ps-2.5 max-w-[240px]\"\n                    hideIfDisabled\n                  />\n                ))}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />)}\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-5\" />\n                </LanguageToggle>\n              )}\n              <ul className=\"flex flex-row gap-2 items-center empty:hidden\">\n                {navItems.filter(isSecondary).map((item, i) => (\n                  <NavigationMenuLinkItem\n                    key={i}\n                    className={cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0')}\n                    item={item}\n                  />\n                ))}\n              </ul>\n            </div>\n            <ul className=\"flex flex-row items-center ms-auto -me-1.5 lg:hidden\">\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? <SearchToggle className=\"p-2\" hideIfDisabled />)}\n              <CollapsibleTrigger\n                aria-label=\"Toggle Menu\"\n                className={cn(\n                  buttonVariants({\n                    size: 'icon',\n                    color: 'ghost',\n                    className: 'group [&_svg]:size-5.5',\n                  }),\n                )}\n              >\n                <ChevronDown className=\"transition-transform duration-300 group-data-[panel-open]:rotate-180\" />\n              </CollapsibleTrigger>\n            </ul>\n          </NavigationMenuList>\n          <CollapsibleContent className=\"flex flex-col px-4\">\n            {menuItems\n              .filter((item) => !isSecondary(item))\n              .map((item, i) => (\n                <MobileMenuLinkItem key={i} item={item} className=\"first:mt-4 sm:hidden\" />\n              ))}\n            <div className=\"-ms-1.5 flex flex-row pt-2 pb-4 items-center justify-end gap-2\">\n              {menuItems.filter(isSecondary).map((item, i) => (\n                <MobileMenuLinkItem\n                  key={i}\n                  item={item}\n                  className={cn(item.type === 'icon' && '-mx-1 first:ms-0')}\n                />\n              ))}\n              <div role=\"separator\" className=\"flex-1 sm:hidden\" />\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-5\" />\n                  <LanguageToggleText />\n                  <ChevronDown className=\"size-3 text-fd-muted-foreground\" />\n                </LanguageToggle>\n              )}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />)}\n            </div>\n          </CollapsibleContent>\n          <NavigationMenu.Portal>\n            <NavigationMenu.Positioner\n              sideOffset={10}\n              className=\"z-20 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[left,right] duration-(--duration) ease-(--easing) data-[instant]:transition-none\"\n              style={{\n                ['--duration' as string]: '0.35s',\n                ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',\n              }}\n            >\n              <NavigationMenu.Popup className=\"relative w-(--popup-width) h-(--popup-height) max-w-(--fd-layout-width,1400px) origin-(--transform-origin) rounded-xl bg-fd-background/80  border backdrop-blur-lg shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-[ending-style]:scale-90 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[starting-style]:scale-90 data-[starting-style]:opacity-0\">\n                <NavigationMenu.Viewport className=\"relative size-full overflow-hidden\" />\n              </NavigationMenu.Popup>\n            </NavigationMenu.Positioner>\n          </NavigationMenu.Portal>\n        </HeaderRoot>\n      )}\n    />\n  );\n}\n\nfunction MobileMenuCollapsible(props: ComponentProps<typeof Collapsible>) {\n  const [open, setOpen] = useState(false);\n\n  const onClick = useCallback((e: Event) => {\n    if (!open) return;\n    const header = document.getElementById('nd-nav');\n    if (header && !header.contains(e.target as HTMLElement)) setOpen(false);\n  }, [open]);\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, [onClick]);\n\n  return (\n    <MobileMenuContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [open],\n      )}\n    >\n      <Collapsible open={open} onOpenChange={setOpen} {...props} />\n    </MobileMenuContext>\n  );\n}\n\nfunction isSecondary(item: LinkItemType): boolean {\n  if ('secondary' in item && item.secondary != null) return item.secondary;\n\n  return item.type === 'icon';\n}\n\nfunction HeaderRoot({\n  transparentMode = 'none',\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  transparentMode?: NavOptions['transparentMode'];\n}) {\n  const isTop = useIsScrollTop({ enabled: transparentMode === 'top' }) ?? true;\n  const isTransparent = transparentMode === 'top' ? isTop : transparentMode === 'always';\n\n  return (\n    <header id=\"nd-nav\" className=\"sticky h-14 top-0 z-40\">\n      <NavigationMenuRoot\n        render={(_, s) => (\n          <nav\n            className={cn(\n              'w-full backdrop-blur-lg border-b transition-colors mx-auto max-w-(--fd-layout-width)',\n              (!isTransparent || s.open) && 'bg-fd-background/80',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </nav>\n        )}\n      />\n    </header>\n  );\n}\n\nfunction NavigationMenuLinkItem({ item, ...props }: { item: LinkItemType; className?: string }) {\n  if (item.type === 'custom') return <div {...props}>{item.children}</div>;\n\n  if (item.type === 'menu') {\n    const children = item.items.map((child, j) => {\n      if (child.type === 'custom') {\n        return <Fragment key={j}>{child.children}</Fragment>;\n      }\n\n      const {\n        banner = child.icon ? (\n          <div className=\"w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4\">{child.icon}</div>\n        ) : null,\n        ...rest\n      } = child.menu ?? {};\n\n      return (\n        <NavigationMenuLink\n          key={`${j}-${child.url}`}\n          render={\n            <Link\n              href={child.url}\n              external={child.external}\n              {...rest}\n              className={cn(\n                'flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',\n                rest.className,\n              )}\n            >\n              {rest.children ?? (\n                <>\n                  {banner}\n                  <p className=\"text-base font-medium\">{child.text}</p>\n                  <p className=\"text-sm text-fd-muted-foreground empty:hidden\">\n                    {child.description}\n                  </p>\n                </>\n              )}\n            </Link>\n          }\n        />\n      );\n    });\n\n    return (\n      <NavigationMenuItem {...props}>\n        <NavigationMenuTrigger className={cn(navItemVariants(), 'rounded-md')}>\n          {item.url ? (\n            <Link href={item.url} external={item.external}>\n              {item.text}\n            </Link>\n          ) : (\n            item.text\n          )}\n        </NavigationMenuTrigger>\n        <NavigationMenuContent className=\"grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3\">\n          {children}\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n    );\n  }\n\n  return (\n    <NavigationMenuItem {...props}>\n      <NavigationMenuLink\n        render={\n          <LinkItem\n            item={item}\n            aria-label={item.type === 'icon' ? item.label : undefined}\n            className={cn(navItemVariants({ variant: item.type }))}\n          >\n            {item.type === 'icon' ? item.icon : item.text}\n          </LinkItem>\n        }\n      />\n    </NavigationMenuItem>\n  );\n}\n\nfunction MobileMenuLinkItem({ item, className }: { item: LinkItemType; className?: string }) {\n  if (item.type === 'custom') return <div className={cn('grid', className)}>{item.children}</div>;\n  const { setOpen } = use(MobileMenuContext)!;\n\n  if (item.type === 'menu') {\n    const header = (\n      <>\n        {item.icon}\n        {item.text}\n      </>\n    );\n\n    return (\n      <div className={cn('mb-4 flex flex-col', className)}>\n        <p className=\"mb-1 text-sm text-fd-muted-foreground\">\n          {item.url ? (\n            <Link href={item.url} external={item.external} onClick={() => setOpen(false)}>\n              {header}\n            </Link>\n          ) : (\n            header\n          )}\n        </p>\n        {item.items.map((child, i) => (\n          <MobileMenuLinkItem key={i} item={child} />\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        (!item.type || item.type === 'main') &&\n          'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',\n        item.type === 'icon' &&\n          buttonVariants({\n            size: 'icon',\n            color: 'ghost',\n          }),\n        item.type === 'button' &&\n          buttonVariants({\n            color: 'secondary',\n            className: 'gap-1.5 [&_svg]:size-4',\n          }),\n        className,\n      )}\n      aria-label={item.type === 'icon' ? item.label : undefined}\n      onClick={() => setOpen(false)}\n    >\n      {item.icon}\n      {item.type !== 'icon' && item.text}\n    </LinkItem>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"client.js","names":[],"sources":["../../../src/layouts/home/client.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useState,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport Link from '@hanzo/docs-core/link';\nimport { cn } from '@/utils/cn';\nimport { type LinkItemType, type NavOptions, renderTitleNav, useLinkItems } from '@/layouts/shared';\nimport { LinkItem } from '@/utils/link-item';\nimport {\n  NavigationMenuRoot,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n} from '@/components/ui/navigation-menu';\nimport { buttonVariants } from '@/components/ui/button';\nimport type { HomeLayoutProps } from '.';\nimport { LargeSearchToggle, SearchToggle } from '@/layouts/shared/search-toggle';\nimport { ThemeToggle } from '@/layouts/shared/theme-toggle';\nimport { LanguageToggle, LanguageToggleText } from '@/layouts/shared/language-toggle';\nimport { ChevronDown, Languages } from 'lucide-react';\nimport { useIsScrollTop } from '@/utils/use-is-scroll-top';\nimport { NavigationMenu } from '@base-ui/react';\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';\n\nconst MobileMenuContext = createContext<{\n  open: boolean;\n  setOpen: (open: boolean) => void;\n} | null>(null);\n\nexport const navItemVariants = cva('[&_svg]:size-4', {\n  variants: {\n    variant: {\n      main: 'inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary data-popup-open:text-fd-primary',\n      button: buttonVariants({\n        color: 'secondary',\n        className: 'gap-1.5',\n      }),\n      icon: buttonVariants({\n        color: 'ghost',\n        size: 'icon',\n      }),\n    },\n  },\n  defaultVariants: {\n    variant: 'main',\n  },\n});\n\nexport function Header({\n  nav = {},\n  i18n = false,\n  links,\n  githubUrl,\n  themeSwitch = {},\n  searchToggle = {},\n}: HomeLayoutProps) {\n  const { menuItems, navItems } = useLinkItems({ links, githubUrl });\n\n  return (\n    <MobileMenuCollapsible\n      render={(_, s) => (\n        <HeaderRoot\n          transparentMode={nav.transparentMode}\n          className={cn(s.open && 'shadow-lg rounded-b-2xl')}\n        >\n          <NavigationMenuList className=\"flex h-14 w-full items-center px-4\">\n            {renderTitleNav(nav, {\n              className: 'inline-flex items-center gap-2.5 font-semibold',\n            })}\n            {nav.children}\n            <ul className=\"flex flex-row items-center gap-2 px-6 max-sm:hidden\">\n              {navItems\n                .filter((item) => !isSecondary(item))\n                .map((item, i) => (\n                  <NavigationMenuLinkItem key={i} item={item} className=\"text-sm\" />\n                ))}\n            </ul>\n            <div className=\"flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden\">\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.lg ?? (\n                  <LargeSearchToggle\n                    className=\"w-full rounded-full ps-2.5 max-w-[240px]\"\n                    hideIfDisabled\n                  />\n                ))}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />)}\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-5\" />\n                </LanguageToggle>\n              )}\n              <ul className=\"flex flex-row gap-2 items-center empty:hidden\">\n                {navItems.filter(isSecondary).map((item, i) => (\n                  <NavigationMenuLinkItem\n                    key={i}\n                    className={cn(item.type === 'icon' && '-mx-1 first:ms-0 last:me-0')}\n                    item={item}\n                  />\n                ))}\n              </ul>\n            </div>\n            <ul className=\"flex flex-row items-center ms-auto -me-1.5 lg:hidden\">\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? <SearchToggle className=\"p-2\" hideIfDisabled />)}\n              <CollapsibleTrigger\n                aria-label=\"Toggle Menu\"\n                className={cn(\n                  buttonVariants({\n                    size: 'icon',\n                    color: 'ghost',\n                    className: 'group [&_svg]:size-5.5',\n                  }),\n                )}\n              >\n                <ChevronDown className=\"transition-transform duration-300 group-data-panel-open:rotate-180\" />\n              </CollapsibleTrigger>\n            </ul>\n          </NavigationMenuList>\n          <CollapsibleContent className=\"flex flex-col px-4\">\n            {menuItems\n              .filter((item) => !isSecondary(item))\n              .map((item, i) => (\n                <MobileMenuLinkItem key={i} item={item} className=\"first:mt-4 sm:hidden\" />\n              ))}\n            <div className=\"-ms-1.5 flex flex-row pt-2 pb-4 items-center justify-end gap-2\">\n              {menuItems.filter(isSecondary).map((item, i) => (\n                <MobileMenuLinkItem\n                  key={i}\n                  item={item}\n                  className={cn(item.type === 'icon' && '-mx-1 first:ms-0')}\n                />\n              ))}\n              <div role=\"separator\" className=\"flex-1 sm:hidden\" />\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-5\" />\n                  <LanguageToggleText />\n                  <ChevronDown className=\"size-3 text-fd-muted-foreground\" />\n                </LanguageToggle>\n              )}\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? <ThemeToggle mode={themeSwitch?.mode} />)}\n            </div>\n          </CollapsibleContent>\n          <NavigationMenu.Portal>\n            <NavigationMenu.Positioner\n              sideOffset={10}\n              className=\"z-20 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[left,right] duration-(--duration) ease-(--easing) data-instant:transition-none\"\n              style={{\n                ['--duration' as string]: '0.35s',\n                ['--easing' as string]: 'cubic-bezier(0.22, 1, 0.36, 1)',\n              }}\n            >\n              <NavigationMenu.Popup className=\"relative w-(--popup-width) h-(--popup-height) max-w-(--fd-layout-width,1400px) origin-(--transform-origin) rounded-xl bg-fd-background/80  border backdrop-blur-lg shadow-lg transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n                <NavigationMenu.Viewport className=\"relative size-full overflow-hidden\" />\n              </NavigationMenu.Popup>\n            </NavigationMenu.Positioner>\n          </NavigationMenu.Portal>\n        </HeaderRoot>\n      )}\n    />\n  );\n}\n\nfunction MobileMenuCollapsible(props: ComponentProps<typeof Collapsible>) {\n  const [open, setOpen] = useState(false);\n\n  const onClick = useEffectEvent((e: Event) => {\n    if (!open) return;\n    const header = document.getElementById('nd-nav');\n    if (header && !header.contains(e.target as HTMLElement)) setOpen(false);\n  });\n\n  useEffect(() => {\n    window.addEventListener('click', onClick);\n\n    return () => {\n      window.removeEventListener('click', onClick);\n    };\n  }, []);\n\n  return (\n    <MobileMenuContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n        }),\n        [open],\n      )}\n    >\n      <Collapsible open={open} onOpenChange={setOpen} {...props} />\n    </MobileMenuContext>\n  );\n}\n\nfunction isSecondary(item: LinkItemType): boolean {\n  if ('secondary' in item && item.secondary != null) return item.secondary;\n\n  return item.type === 'icon';\n}\n\nfunction HeaderRoot({\n  transparentMode = 'none',\n  children,\n  className,\n  ...props\n}: ComponentProps<'div'> & {\n  transparentMode?: NavOptions['transparentMode'];\n}) {\n  const isTop = useIsScrollTop({ enabled: transparentMode === 'top' }) ?? true;\n  const isTransparent = transparentMode === 'top' ? isTop : transparentMode === 'always';\n\n  return (\n    <header id=\"nd-nav\" className=\"sticky h-14 top-0 z-40\">\n      <NavigationMenuRoot\n        render={(_, s) => (\n          <nav\n            className={cn(\n              'w-full backdrop-blur-lg border-b transition-colors mx-auto max-w-(--fd-layout-width)',\n              (!isTransparent || s.open) && 'bg-fd-background/80',\n              className,\n            )}\n            {...props}\n          >\n            {children}\n          </nav>\n        )}\n      />\n    </header>\n  );\n}\n\nfunction NavigationMenuLinkItem({ item, ...props }: { item: LinkItemType; className?: string }) {\n  if (item.type === 'custom') return <div {...props}>{item.children}</div>;\n\n  if (item.type === 'menu') {\n    const children = item.items.map((child, j) => {\n      if (child.type === 'custom') {\n        return <Fragment key={j}>{child.children}</Fragment>;\n      }\n\n      const {\n        banner = child.icon ? (\n          <div className=\"w-fit rounded-md border bg-fd-muted p-1 [&_svg]:size-4\">{child.icon}</div>\n        ) : null,\n        ...rest\n      } = child.menu ?? {};\n\n      return (\n        <NavigationMenuLink\n          key={`${j}-${child.url}`}\n          render={\n            <Link\n              href={child.url}\n              external={child.external}\n              {...rest}\n              className={cn(\n                'flex flex-col gap-2 rounded-lg border bg-fd-card p-3 transition-colors hover:bg-fd-accent/80 hover:text-fd-accent-foreground',\n                rest.className,\n              )}\n            >\n              {rest.children ?? (\n                <>\n                  {banner}\n                  <p className=\"text-base font-medium\">{child.text}</p>\n                  <p className=\"text-sm text-fd-muted-foreground empty:hidden\">\n                    {child.description}\n                  </p>\n                </>\n              )}\n            </Link>\n          }\n        />\n      );\n    });\n\n    return (\n      <NavigationMenuItem {...props}>\n        <NavigationMenuTrigger className={cn(navItemVariants(), 'rounded-md')}>\n          {item.url ? (\n            <Link href={item.url} external={item.external}>\n              {item.text}\n            </Link>\n          ) : (\n            item.text\n          )}\n        </NavigationMenuTrigger>\n        <NavigationMenuContent className=\"grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3\">\n          {children}\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n    );\n  }\n\n  return (\n    <NavigationMenuItem {...props}>\n      <NavigationMenuLink\n        render={\n          <LinkItem\n            item={item}\n            aria-label={item.type === 'icon' ? item.label : undefined}\n            className={cn(navItemVariants({ variant: item.type }))}\n          >\n            {item.type === 'icon' ? item.icon : item.text}\n          </LinkItem>\n        }\n      />\n    </NavigationMenuItem>\n  );\n}\n\nfunction MobileMenuLinkItem({ item, className }: { item: LinkItemType; className?: string }) {\n  if (item.type === 'custom') return <div className={cn('grid', className)}>{item.children}</div>;\n  const { setOpen } = use(MobileMenuContext)!;\n\n  if (item.type === 'menu') {\n    const header = (\n      <>\n        {item.icon}\n        {item.text}\n      </>\n    );\n\n    return (\n      <div className={cn('mb-4 flex flex-col', className)}>\n        <p className=\"mb-1 text-sm text-fd-muted-foreground\">\n          {item.url ? (\n            <Link href={item.url} external={item.external} onClick={() => setOpen(false)}>\n              {header}\n            </Link>\n          ) : (\n            header\n          )}\n        </p>\n        {item.items.map((child, i) => (\n          <MobileMenuLinkItem key={i} item={child} />\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <LinkItem\n      item={item}\n      className={cn(\n        (!item.type || item.type === 'main') &&\n          'inline-flex items-center gap-2 py-1.5 transition-colors hover:text-fd-popover-foreground/50 data-[active=true]:font-medium data-[active=true]:text-fd-primary [&_svg]:size-4',\n        item.type === 'icon' &&\n          buttonVariants({\n            size: 'icon',\n            color: 'ghost',\n          }),\n        item.type === 'button' &&\n          buttonVariants({\n            color: 'secondary',\n            className: 'gap-1.5 [&_svg]:size-4',\n          }),\n        className,\n      )}\n      aria-label={item.type === 'icon' ? item.label : undefined}\n      onClick={() => setOpen(false)}\n    >\n      {item.icon}\n      {item.type !== 'icon' && item.text}\n    </LinkItem>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/home/index.d.ts

@@ -1,12 +1,12 @@
 import { BaseLayoutProps, NavOptions } from "../shared/index.js";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/home/index.d.ts
 interface HomeLayoutProps extends BaseLayoutProps {
   nav?: Partial<NavOptions>;
 }
-declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): react_jsx_runtime42.JSX.Element;
+declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { HomeLayout, HomeLayoutProps };
 //# sourceMappingURL=index.d.ts.map