@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/dist/components/toc/default.js

@@ -1,12 +1,47 @@
-import { __reExport } from "../../_virtual/rolldown_runtime.js";
-
-export * from "@hanzo/docs-ui/components/toc/default"
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { useI18n } from "../../contexts/i18n.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { TocThumb } from "./index.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 //#region src/components/toc/default.tsx
-var default_exports = {};
-import * as import__hanzo_docs_ui_components_toc_default from "@hanzo/docs-ui/components/toc/default";
-__reExport(default_exports, import__hanzo_docs_ui_components_toc_default);
-
+var default_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
+function TOCItems({ ref, className, ...props }) {
+	const containerRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(TocThumb, {
+			containerRef,
+			className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
+			style: { clipPath: "polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))" }
+		}), /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(ref, containerRef),
+			className: cn("flex flex-col border-s border-fd-foreground/10", className),
+			...props
+		})]
+	});
+}
+function TOCEmpty() {
+	const { text } = useI18n();
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+}
+function TOCItem({ item, ...props }) {
+	return /* @__PURE__ */ jsx(Primitive.TOCItem, {
+		href: item.url,
+		...props,
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8", props.className),
+		children: item.title
+	});
+}
 //#endregion
-export { default_exports };
-//# sourceMappingURL=default.js.map
+export { TOCEmpty, TOCItem, TOCItems, default_exports };

package/dist/components/toc/index.d.ts

@@ -1 +1,29 @@
-export * from "@hanzo/docs-ui/components/toc/index";
+import { ComponentProps, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
+
+//#region src/components/toc/index.d.ts
+declare function useTOCItems(): Primitive.TOCItemType[];
+type TOCProviderProps = Primitive.AnchorProviderProps;
+declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors, useItems: typeof Primitive.useItems;
+declare function TOCProvider({
+  toc,
+  children,
+  ...props
+}: TOCProviderProps): react_jsx_runtime0.JSX.Element;
+declare function TOCScrollArea({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+interface TocThumbProps extends ComponentProps<'div'> {
+  containerRef: RefObject<HTMLElement | null>;
+  align?: 'center' | 'end';
+}
+declare function TocThumb({
+  containerRef,
+  align,
+  ...props
+}: TocThumbProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -1,12 +1,107 @@
-import { __reExport } from "../../_virtual/rolldown_runtime.js";
-
-export * from "@hanzo/docs-ui/components/toc/index"
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
+import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 //#region src/components/toc/index.tsx
-var toc_exports = {};
-import * as import__hanzo_docs_ui_components_toc_index from "@hanzo/docs-ui/components/toc/index";
-__reExport(toc_exports, import__hanzo_docs_ui_components_toc_index);
-
+var toc_exports = /* @__PURE__ */ __exportAll({
+	TOCProvider: () => TOCProvider,
+	TOCScrollArea: () => TOCScrollArea,
+	TocThumb: () => TocThumb,
+	useActiveAnchor: () => useActiveAnchor,
+	useActiveAnchors: () => useActiveAnchors,
+	useItems: () => useItems,
+	useTOCItems: () => useTOCItems
+});
+const TOCContext = createContext([]);
+function useTOCItems() {
+	return use(TOCContext);
+}
+const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
+function TOCProvider({ toc, children, ...props }) {
+	return /* @__PURE__ */ jsx(TOCContext, {
+		value: toc,
+		children: /* @__PURE__ */ jsx(Primitive.AnchorProvider, {
+			toc,
+			...props,
+			children
+		})
+	});
+}
+function TOCScrollArea({ ref, className, ...props }) {
+	const viewRef = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(viewRef, ref),
+		className: cn("relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Primitive.ScrollProvider, {
+			containerRef: viewRef,
+			children: props.children
+		})
+	});
+}
+function TocThumb({ containerRef, align = "end", ...props }) {
+	const thumbRef = useRef(null);
+	const active = useActiveAnchors();
+	function update(info) {
+		const element = thumbRef.current;
+		const container = containerRef.current;
+		if (!element || !container) return;
+		element.style.setProperty("--fd-top", `${info.top}px`);
+		element.style.setProperty("--fd-height", `${info.height}px`);
+	}
+	function calc(active) {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return null;
+		if (active.length === 0) return {
+			height: 0,
+			top: 0
+		};
+		let upper = Number.MAX_VALUE;
+		let lower = 0;
+		for (const item of active) {
+			const element = container.querySelector(`a[href="#${item}"]`);
+			if (!element) continue;
+			if (align === "center") {
+				const y = element.offsetTop + element.clientHeight / 2;
+				upper = Math.min(upper, y);
+				lower = Math.max(lower, y);
+			} else {
+				const styles = getComputedStyle(element);
+				upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+				lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
+			}
+		}
+		return {
+			top: upper,
+			height: lower - upper
+		};
+	}
+	const onPrint = useEffectEvent(() => {
+		const result = calc(active);
+		if (result) update(result);
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const container = containerRef.current;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+		};
+	}, [containerRef]);
+	useOnChange(active, () => {
+		const result = calc(active);
+		if (result) update(result);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: thumbRef,
+		"data-hidden": active.length === 0,
+		...props
+	});
+}
 //#endregion
-export { toc_exports };
-//# sourceMappingURL=index.js.map
+export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/type-table.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime77 from "react/jsx-runtime";
-import { ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/type-table.d.ts
 interface ParameterNode {
@@ -26,14 +26,19 @@ interface TypeNode {
   default?: ReactNode;
   required?: boolean;
   deprecated?: boolean;
+  /**
+   * a list of parameters info if the type is a function.
+   */
   parameters?: ParameterNode[];
   returns?: ReactNode;
 }
 declare function TypeTable({
-  type
+  id,
+  type,
+  className,
+  ...props
 }: {
   type: Record<string, TypeNode>;
-}): react_jsx_runtime77.JSX.Element;
+} & ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ParameterNode, TypeNode, TypeTable };
-//# sourceMappingURL=type-table.d.ts.map
+export { ParameterNode, TypeNode, TypeTable };

package/dist/components/type-table.js

@@ -1,48 +1,55 @@
-'use client';
-
+"use client";
+import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { useEffect, 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 } from "lucide-react";
-import { useState } from "react";
 import { cva } from "class-variance-authority";
-
 //#region src/components/type-table.tsx
-const keyVariants = cva("text-fd-primary", { variants: { deprecated: { true: "line-through text-fd-primary/50" } } });
 const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
-function TypeTable({ type }) {
+function TypeTable({ id, type, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden",
+		id,
+		className: cn("@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", className),
+		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "w-[25%]",
+				className: "w-1/4",
 				children: "Prop"
 			}), /* @__PURE__ */ jsx("p", {
 				className: "@max-xl:hidden",
 				children: "Type"
 			})]
 		}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
+			parentId: id,
 			name: key,
 			item: value
 		}, key))]
 	});
 }
-function Item({ name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
+function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
 	const [open, setOpen] = useState(false);
+	const id = parentId ? `${parentId}-${name}` : void 0;
+	useEffect(() => {
+		const hash = window.location.hash;
+		if (!id || !hash) return;
+		if (`#${id}` === hash) setOpen(true);
+	}, [id]);
 	return /* @__PURE__ */ jsxs(Collapsible, {
+		id,
 		open,
-		onOpenChange: setOpen,
-		className: cn("rounded-xl border overflow-hidden transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
+		onOpenChange: (v) => {
+			if (v && id) window.history.replaceState(null, "", `#${id}`);
+			setOpen(v);
+		},
+		className: cn("rounded-xl border overflow-hidden scroll-m-20 transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent",
 			children: [
 				/* @__PURE__ */ jsxs("code", {
-					className: cn(keyVariants({
-						deprecated,
-						className: "min-w-fit w-[25%] font-medium pe-2"
-					})),
+					className: cn("text-fd-primary min-w-fit w-1/4 font-mono font-medium pe-2", deprecated && "line-through text-fd-primary/50"),
 					children: [name, !required && "?"]
 				}),
 				typeDescriptionLink ? /* @__PURE__ */ jsx(Link, {
@@ -62,21 +69,21 @@ function Item({ name, item: { parameters = [], description, required = false, de
 					className: "text-sm prose col-span-full prose-no-margin empty:hidden",
 					children: description
 				}),
-				typeDescription && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				typeDescription && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
 					children: "Type"
 				}), /* @__PURE__ */ jsx("p", {
 					className: "my-auto not-prose",
 					children: typeDescription
 				})] }),
-				defaultValue && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				defaultValue && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
 					children: "Default"
 				}), /* @__PURE__ */ jsx("p", {
 					className: "my-auto not-prose",
 					children: defaultValue
 				})] }),
-				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				parameters.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
 					children: "Parameters"
 				}), /* @__PURE__ */ jsx("div", {
@@ -92,7 +99,7 @@ function Item({ name, item: { parameters = [], description, required = false, de
 						})]
 					}, param.name))
 				})] }),
-				returns && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				returns && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 					className: cn(fieldVariants()),
 					children: "Returns"
 				}), /* @__PURE__ */ jsx("div", {
@@ -103,7 +110,5 @@ function Item({ name, item: { parameters = [], description, required = false, de
 		}) })]
 	});
 }
-
 //#endregion
 export { TypeTable };
-//# sourceMappingURL=type-table.js.map

package/dist/components/ui/accordion.d.ts

@@ -1,31 +1,30 @@
-import * as react_jsx_runtime100 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/ui/accordion.d.ts
 declare function Accordion({
   className,
   ...props
-}: ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime100.JSX.Element;
+}: ComponentProps<typeof Accordion$1.Root>): react_jsx_runtime0.JSX.Element;
 declare function AccordionItem({
   children,
   ...props
-}: ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime100.JSX.Element;
+}: ComponentProps<typeof Accordion$1.Item>): react_jsx_runtime0.JSX.Element;
 declare function AccordionHeader({
   className,
   children,
   ...props
-}: ComponentProps<typeof Accordion$1.Header>): react_jsx_runtime100.JSX.Element;
+}: ComponentProps<typeof Accordion$1.Header>): react_jsx_runtime0.JSX.Element;
 declare function AccordionTrigger({
   className,
   children,
   ...props
-}: ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime100.JSX.Element;
+}: ComponentProps<typeof Accordion$1.Trigger>): react_jsx_runtime0.JSX.Element;
 declare function AccordionContent({
   className,
   children,
   ...props
-}: ComponentProps<typeof Accordion$1.Panel>): react_jsx_runtime100.JSX.Element;
+}: ComponentProps<typeof Accordion$1.Panel>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };
-//# sourceMappingURL=accordion.d.ts.map
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -1,10 +1,8 @@
-'use client';
-
-import { cn } from "@hanzo/docs-ui/cn";
+"use client";
+import { cn } from "../../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-
 //#region src/components/ui/accordion.tsx
 function Accordion({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
@@ -39,7 +37,5 @@ function AccordionContent({ className, children, ...props }) {
 		children
 	});
 }
-
 //#endregion
 export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };
-//# sourceMappingURL=accordion.js.map

package/dist/components/ui/button.d.ts

@@ -9,5 +9,4 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion
-export { ButtonProps, buttonVariants };
-//# sourceMappingURL=button.d.ts.map
+export { ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -1,5 +1,4 @@
 import { cva } from "class-variance-authority";
-
 //#region src/components/ui/button.tsx
 const variants = {
 	primary: "bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80",
@@ -17,7 +16,5 @@ const buttonVariants = cva("inline-flex items-center justify-center rounded-md p
 		"icon-xs": "p-1 [&_svg]:size-4"
 	}
 } });
-
 //#endregion
 export { buttonVariants };
-//# sourceMappingURL=button.js.map

package/dist/components/ui/collapsible.d.ts

@@ -1,20 +1,19 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
-import * as react0 from "react";
+import * as react from "react";
 import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/ui/collapsible.d.ts
-declare const Collapsible: react0.ForwardRefExoticComponent<_base_ui_react0.CollapsibleRootProps & react0.RefAttributes<HTMLDivElement>>;
-declare const CollapsibleTrigger: react0.ForwardRefExoticComponent<_base_ui_react0.CollapsibleTriggerProps & react0.RefAttributes<HTMLButtonElement>>;
+declare const Collapsible: react.ForwardRefExoticComponent<Omit<_base_ui_react0.CollapsibleRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<Omit<_base_ui_react0.CollapsibleTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 declare function CollapsibleContent({
   children,
   className,
   ...props
-}: ComponentProps<typeof Collapsible$1.Panel>): react_jsx_runtime15.JSX.Element;
+}: ComponentProps<typeof Collapsible$1.Panel>): react_jsx_runtime0.JSX.Element;
 type CollapsibleProps = Collapsible$1.Root.Props;
 type CollapsibleContentProps = Collapsible$1.Panel.Props;
 type CollapsibleTriggerProps = Collapsible$1.Trigger.Props;
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };
-//# sourceMappingURL=collapsible.d.ts.map
+export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };

package/dist/components/ui/collapsible.js

@@ -1,20 +1,16 @@
-'use client';
-
-import { cn } from "@hanzo/docs-ui/cn";
+"use client";
+import { cn } from "../../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-
 //#region src/components/ui/collapsible.tsx
 const Collapsible = Collapsible$1.Root;
 const CollapsibleTrigger = Collapsible$1.Trigger;
 function CollapsibleContent({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		...props,
-		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height] data-[starting-style]:h-0 data-[ending-style]:h-0", typeof className === "function" ? className(s) : className),
+		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0", typeof className === "function" ? className(s) : className),
 		children
 	});
 }
-
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
-//# sourceMappingURL=collapsible.js.map

package/dist/components/ui/navigation-menu.d.ts

@@ -1,16 +1,30 @@
-import * as React from "react";
-import { NavigationMenu } from "@base-ui/react/navigation-menu";
-import * as _base_ui_react7 from "@base-ui/react";
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
+import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/ui/navigation-menu.d.ts
-type NavigationMenuContentProps = NavigationMenu.Content.Props;
-type NavigationMenuTriggerProps = NavigationMenu.Trigger.Props;
-declare const NavigationMenuRoot: React.ForwardRefExoticComponent<_base_ui_react7.NavigationMenuRootProps & React.RefAttributes<HTMLElement>>;
-declare const NavigationMenuList: React.ForwardRefExoticComponent<_base_ui_react7.NavigationMenuListProps & React.RefAttributes<HTMLDivElement>>;
-declare const NavigationMenuItem: React.ForwardRefExoticComponent<Omit<_base_ui_react7.NavigationMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<_base_ui_react7.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<_base_ui_react7.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const NavigationMenuLink: React.ForwardRefExoticComponent<_base_ui_react7.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+type NavigationMenuContentProps = NavigationMenu$1.Content.Props;
+type NavigationMenuTriggerProps = NavigationMenu$1.Trigger.Props;
+declare const NavigationMenu: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.NavigationMenuRootProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React$1.ForwardRefExoticComponent<Omit<_base_ui_react0.NavigationMenuListProps, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare function NavigationMenuItem({
+  className,
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Item>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuTrigger({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Trigger>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuContent({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Content>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuLink({
+  children,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof NavigationMenu$1.Link>): react_jsx_runtime0.JSX.Element;
+declare function NavigationMenuViewport(props: NavigationMenu$1.Positioner.Props): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger, NavigationMenuTriggerProps };
-//# sourceMappingURL=navigation-menu.d.ts.map
+export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport };

package/dist/components/ui/navigation-menu.js

@@ -1,34 +1,56 @@
-'use client';
-
-import { cn } from "@hanzo/docs-ui/cn";
+"use client";
+import { cn } from "../../utils/cn.js";
+import "react";
 import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { NavigationMenu } from "@base-ui/react/navigation-menu";
-
+import { NavigationMenu as NavigationMenu$1 } from "@base-ui/react/navigation-menu";
 //#region src/components/ui/navigation-menu.tsx
-const NavigationMenuRoot = NavigationMenu.Root;
-const NavigationMenuList = NavigationMenu.List;
-const NavigationMenuItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Item, {
-	ref,
-	className: (s) => cn("list-none", typeof className === "function" ? className(s) : className),
-	...props,
-	children
-}));
-NavigationMenuItem.displayName = NavigationMenu.Item.displayName;
-const NavigationMenuTrigger = React.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Trigger, {
-	ref,
-	...props,
-	children
-}));
-NavigationMenuTrigger.displayName = NavigationMenu.Trigger.displayName;
-const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(NavigationMenu.Content, {
-	ref,
-	className: (s) => cn("size-full p-4", "transition-[opacity,transform,translate] duration-(--duration) ease-(--easing)", "data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", "data-[starting-style]:data-[activation-direction=left]:-translate-x-1/2", "data-[starting-style]:data-[activation-direction=right]:translate-x-1/2", "data-[ending-style]:data-[activation-direction=left]:translate-x-1/2", "data-[ending-style]:data-[activation-direction=right]:-translate-x-1/2", typeof className === "function" ? className(s) : className),
-	...props
-}));
-NavigationMenuContent.displayName = NavigationMenu.Content.displayName;
-const NavigationMenuLink = NavigationMenu.Link;
-
+const NavigationMenu = NavigationMenu$1.Root;
+const NavigationMenuList = NavigationMenu$1.List;
+function NavigationMenuItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Item, {
+		className: (s) => cn("list-none", typeof className === "function" ? className(s) : className),
+		...props,
+		children
+	});
+}
+function NavigationMenuTrigger({ children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Trigger, {
+		...props,
+		children
+	});
+}
+function NavigationMenuContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Content, {
+		className: (s) => cn("size-full p-3", "transition-[opacity,transform,translate] duration-(--duration) ease-(--easing)", "data-starting-style:opacity-0 data-ending-style:opacity-0", "data-starting-style:data-[activation-direction=left]:-translate-x-1/2", "data-starting-style:data-[activation-direction=right]:translate-x-1/2", "data-ending-style:data-[activation-direction=left]:translate-x-1/2", "data-ending-style:data-[activation-direction=right]:-translate-x-1/2", typeof className === "function" ? className(s) : className),
+		...props
+	});
+}
+function NavigationMenuLink({ children, ...props }) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Link, {
+		...props,
+		children
+	});
+}
+function NavigationMenuViewport(props) {
+	return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { children: /* @__PURE__ */ jsx(NavigationMenu$1.Positioner, {
+		collisionPadding: {
+			top: 5,
+			bottom: 5,
+			left: 20,
+			right: 20
+		},
+		...props,
+		className: (s) => cn("box-border h-(--positioner-height) w-(--anchor-width) max-w-(--available-width) duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=left]:before:top-0 data-[side=left]:before:right-[-10px] data-[side=left]:before:bottom-0 data-[side=left]:before:w-2.5 data-[side=right]:before:top-0 data-[side=right]:before:bottom-0 data-[side=right]:before:left-[-10px] data-[side=right]:before:w-2.5 data-[side=top]:before:right-0 data-[side=top]:before:bottom-[-10px] data-[side=top]:before:left-0 data-[side=top]:before:h-2.5", typeof props.className === "function" ? props.className(s) : props.className),
+		style: {
+			["--duration"]: "0.35s",
+			["--easing"]: "cubic-bezier(0.22, 1, 0.36, 1)",
+			...props.style
+		},
+		children: /* @__PURE__ */ jsx(NavigationMenu$1.Popup, {
+			className: "data-[ending-style]:easing-[ease] relative border h-(--popup-height) origin-(--transform-origin) rounded-xl bg-fd-popover/80 text-fd-popover-foreground backdrop-blur-md 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 w-(--popup-width)",
+			children: /* @__PURE__ */ jsx(NavigationMenu$1.Viewport, { className: "relative size-full overflow-hidden" })
+		})
+	}) });
+}
 //#endregion
-export { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuRoot, NavigationMenuTrigger };
-//# sourceMappingURL=navigation-menu.js.map
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport };