@vx-oss/docs-react 1.0.3

package/dist/layouts/glass/slots/header.js

@@ -0,0 +1,68 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { SidebarTrigger } from "../../../components/sidebar/base.js";
+import { LayoutTabsDropdown } from "../layout-tabs.js";
+import { useGlassLayout } from "../index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown, LanguagesIcon, MessageCircleIcon, SidebarIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/glass/slots/header.tsx
+const baseVariants = "rounded-full bg-fd-popover/80 text-fd-popover-foreground border backdrop-blur-sm shadow-sm";
+function Header({ className, ...props }) {
+	const { props: { tabs, aiChat }, slots } = useGlassLayout();
+	const t = useTranslations();
+	const sidebar = slots.sidebar.use();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("sticky flex flex-row justify-end gap-2 [grid-area:left-margin/left-margin/right/right] z-20 px-4 md:top-0 md:pt-2 md:px-2 md:h-12 md:bg-linear-to-b md:from-fd-background max-md:bottom-0 max-md:mt-auto max-md:h-16 max-md:pb-4 max-md:bg-linear-to-t max-md:from-fd-background", className),
+		...props,
+		children: [
+			sidebar.collapsible && sidebar.collapsed && /* @__PURE__ */ jsx("button", {
+				"aria-label": t("Show Sidebar", { note: "sidebar" }),
+				className: cn(buttonVariants({
+					size: "icon-sm",
+					variant: "secondary"
+				}), baseVariants, "size-10 me-auto shrink-0 max-md:hidden"),
+				onClick: () => sidebar.setCollapsed(false),
+				children: /* @__PURE__ */ jsx(SidebarIcon, {})
+			}),
+			slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
+				color: "secondary",
+				size: "icon",
+				className: cn(baseVariants, "size-12 shrink-0 md:hidden")
+			}),
+			tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabsDropdown, {
+				tabs,
+				size: "lg",
+				className: cn(baseVariants, "min-w-0 ps-4 pe-3 flex-1 [&_svg]:size-5 md:hidden")
+			}),
+			slots.searchTrigger && /* @__PURE__ */ jsx("div", {
+				className: "@container flex justify-end flex-1 max-md:hidden",
+				children: /* @__PURE__ */ jsx(slots.searchTrigger.full, { className: cn(baseVariants, "text-fd-muted-foreground ps-3 w-full @sm:max-w-[200px]") })
+			}),
+			aiChat && !aiChat.open && /* @__PURE__ */ jsxs("button", {
+				className: cn(buttonVariants({ variant: "secondary" }), baseVariants, "px-3 gap-2 text-fd-muted-foreground shrink-0 max-md:hidden"),
+				onClick: () => aiChat.onOpenChange(true),
+				children: [/* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-4" }), t("Ask AI", { note: "AI chat button" })]
+			}),
+			slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+				className: cn(baseVariants, "px-3 rounded-full max-md:hidden"),
+				children: [
+					/* @__PURE__ */ jsx(LanguagesIcon, { className: "size-4 text-fd-muted-foreground shrink-0" }),
+					/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+					/* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-fd-muted-foreground shrink-0" })
+				]
+			}),
+			slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: cn(baseVariants, "shrink-0 px-1.5 max-md:hidden") }),
+			/* @__PURE__ */ jsx(SidebarTrigger, {
+				className: cn(buttonVariants({
+					variant: "secondary",
+					size: "icon"
+				}), baseVariants, "shrink-0 size-12 md:hidden"),
+				children: /* @__PURE__ */ jsx(SidebarIcon, {})
+			})
+		]
+	});
+}
+//#endregion
+export { Header };

package/dist/layouts/glass/slots/sidebar.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/layouts/glass/slots/sidebar.d.ts
+interface SidebarProviderProps {
+  /** @default true */
+  collapsible?: boolean;
+  children: ReactNode;
+}
+declare function SidebarProvider({ children, collapsible }: SidebarProviderProps): import("react").JSX.Element;
+declare function useSidebar(): {
+  collapsible: boolean;
+  collapsed: boolean;
+  setCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+interface SidebarDrawerProps {
+  contentProps?: ComponentProps<'div'>;
+}
+declare function SidebarDrawer({ contentProps }: SidebarDrawerProps): import("react").JSX.Element;
+type SidebarProps = ComponentProps<'aside'>;
+declare function Sidebar({ className, children, ...props }: SidebarProps): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarDrawer, SidebarDrawerProps, SidebarProps, SidebarProvider, SidebarProviderProps, useSidebar };

package/dist/layouts/glass/slots/sidebar.js

@@ -0,0 +1,267 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { buttonVariants } from "../../../components/ui/button.js";
+import { useTreeContext, useTreePath } from "../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { isLinkItemActive } from "../../shared/index.js";
+import { ScrollArea, ScrollViewport } from "../../../components/ui/scroll-area.js";
+import { SidebarDrawerContent, SidebarDrawerOverlay, SidebarProvider as SidebarProvider$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
+import { LayoutTabsDropdown } from "../layout-tabs.js";
+import { useGlassLayout } from "../index.js";
+import Link from "@vx-oss/docs-core/link";
+import { usePathname } from "@vx-oss/docs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronsUpDown, LanguagesIcon, MessageCircleIcon, SidebarIcon, XIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cloneElement, createContext, use, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { useOnChange } from "@vx-oss/docs-core/utils/use-on-change";
+//#region src/layouts/glass/slots/sidebar.tsx
+const itemTriggerVariants = cva("inline-flex text-sm items-center gap-2 rounded-lg px-2.5 py-2 md:py-1.5 [&_svg]:size-4 outline-none focus-visible:ring-2 focus-visible:ring-fd-ring", { variants: { active: {
+	true: "bg-fd-primary/10 text-fd-primary",
+	false: "text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground"
+} } });
+const CollapsibleContext = createContext(true);
+function SidebarProvider({ children, collapsible = true }) {
+	return /* @__PURE__ */ jsx(SidebarProvider$1, { children: /* @__PURE__ */ jsx(CollapsibleContext, {
+		value: collapsible,
+		children
+	}) });
+}
+function useSidebar() {
+	const collapsible = use(CollapsibleContext);
+	const { collapsed, setCollapsed } = useSidebar$1();
+	return {
+		collapsible,
+		collapsed,
+		setCollapsed
+	};
+}
+function SidebarDrawer({ contentProps }) {
+	const { menuItems, props: { aiChat }, slots } = useGlassLayout();
+	const { root } = useTreeContext();
+	const { setOpen } = useSidebar$1();
+	const t = useTranslations();
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarDrawerOverlay, { className: "fixed z-40 inset-0 bg-fd-overlay backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), /* @__PURE__ */ jsx(SidebarDrawerContent, {
+		className: "fixed z-40 inset-e-0 inset-y-0 flex flex-col w-[360px] max-w-[calc(100vw-3rem)] border-s bg-fd-background text-fd-foreground shadow-md data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out",
+		children: /* @__PURE__ */ jsxs("div", {
+			...contentProps,
+			className: cn("flex flex-col px-3 size-full overflow-y-auto fd-scroll-container", contentProps?.className),
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "sticky flex flex-col gap-2 top-0 py-2 bg-fd-background shadow-lg shadow-fd-background",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5 ps-2.5",
+						children: [
+							/* @__PURE__ */ jsx(slots.navTitle, { className: "flex text-sm items-center font-semibold gap-2 flex-1" }),
+							aiChat && /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								className: cn(buttonVariants({
+									variant: "secondary",
+									size: "sm"
+								}), "rounded-full h-8 gap-1.5"),
+								onClick: () => {
+									aiChat.onOpenChange(!aiChat.open);
+									setOpen(false);
+								},
+								children: [/* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-4 text-fd-muted-foreground" }), t("Ask AI", { note: "AI chat button" })]
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-label": t("Close Sidebar", { note: "aria-label" }),
+								onClick: () => setOpen(false),
+								className: cn(buttonVariants({
+									variant: "secondary",
+									size: "icon-sm"
+								}), "rounded-full"),
+								children: /* @__PURE__ */ jsx(XIcon, {})
+							})
+						]
+					}), slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+						variant: "secondary",
+						className: "px-2.5 gap-2 rounded-lg",
+						children: [
+							/* @__PURE__ */ jsx(LanguagesIcon, { className: "size-4 text-fd-muted-foreground shrink-0" }),
+							/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+							/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-auto size-3.5 text-fd-muted-foreground shrink-0" })
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col py-2 flex-1",
+					children: [menuItems.map((item, i) => item.type !== "icon" && /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i)), root.children.map((item, i) => cloneElement(renderNode(item), { key: i }))]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center sticky bottom-0 bg-fd-background px-1 pt-2 pb-4 border-t mt-2 empty:hidden",
+					children: [menuItems.map((item, i) => item.type === "icon" && /* @__PURE__ */ jsx(SidebarIconLinkItem, { item }, i)), slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "p-0 ms-auto" })]
+				})
+			]
+		})
+	})] });
+}
+function Sidebar({ className, children, ...props }) {
+	const { menuItems, props: { tabs }, slots } = useGlassLayout();
+	const { root } = useTreeContext();
+	const { collapsible, collapsed, setCollapsed } = useSidebar();
+	const t = useTranslations({ note: "sidebar" });
+	return /* @__PURE__ */ jsxs("aside", {
+		id: "nd-sidebar",
+		className: cn("sticky flex flex-col transition-transform [grid-area:left] my-2 ms-2 z-30 top-2 border rounded-2xl bg-fd-popover/80 text-fd-popover-foreground backdrop-blur-sm shadow-sm h-[calc(100dvh---spacing(4))] max-md:hidden md:layout:[--fd-left-width:280px]", collapsed && "w-[calc(280px---spacing(2))] -translate-x-[280px] md:layout:[--fd-left-width:0px]", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-start gap-1 pt-4 ps-4.5 pe-3.5 empty:hidden",
+				children: [/* @__PURE__ */ jsx(slots.navTitle, { className: "flex text-sm items-center font-semibold gap-2 me-auto" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex -mt-1.5 -me-1.5 empty:hidden",
+					children: [menuItems.map((item, i) => item.type === "icon" && /* @__PURE__ */ jsx(SidebarIconLinkItem, { item }, i)), collapsible && /* @__PURE__ */ jsx("button", {
+						"aria-label": collapsed ? t("Show Sidebar") : t("Hide Sidebar"),
+						className: cn(buttonVariants({
+							variant: "ghost",
+							size: "icon-sm"
+						}), "text-fd-muted-foreground"),
+						onClick: () => setCollapsed(!collapsed),
+						children: /* @__PURE__ */ jsx(SidebarIcon, {})
+					})]
+				})]
+			}),
+			tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabsDropdown, {
+				tabs,
+				className: "min-w-0 bg-fd-secondary text-fd-secondary-foreground rounded-xl px-2.5 py-2 [&_svg]:size-4 border rounded-xl shadow-sm mx-2 mt-2.5 empty:hidden"
+			}),
+			/* @__PURE__ */ jsx(ScrollArea, {
+				className: "min-h-0 flex-1",
+				children: /* @__PURE__ */ jsxs(ScrollViewport, {
+					className: "flex flex-col p-2 [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent))]",
+					children: [menuItems.map((item, i) => item.type !== "icon" && /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i)), root.children.map((item, i) => cloneElement(renderNode(item), { key: i }))]
+				})
+			}),
+			children
+		]
+	});
+}
+function SidebarIconLinkItem({ item, className }) {
+	return /* @__PURE__ */ jsx(Link, {
+		href: item.url,
+		external: item.external,
+		"aria-label": item.label,
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "icon-sm"
+		}), "text-fd-muted-foreground", className),
+		children: item.icon
+	});
+}
+function SidebarLinkItem({ item, className }) {
+	const pathname = usePathname();
+	const [open, setOpen] = useState(true);
+	switch (item.type) {
+		case "custom": return /* @__PURE__ */ jsx("div", {
+			className,
+			children: item.children
+		});
+		case "menu": {
+			const rightIcon = /* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto text-fd-muted-foreground size-3.5! transition-transform", !open && "-rotate-90") });
+			return /* @__PURE__ */ jsxs(Collapsible, {
+				open,
+				onOpenChange: setOpen,
+				className: cn("mt-4 first:mt-0", className),
+				children: [item.url ? /* @__PURE__ */ jsxs("div", {
+					className: "flex w-full text-sm px-2.5 py-1.5 font-medium",
+					children: [/* @__PURE__ */ jsxs(Link, {
+						href: item.url,
+						external: item.external,
+						className: cn("inline-flex items-center gap-2 [&_svg]:size-4", isLinkItemActive(item, pathname) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+						children: [item.icon, item.text]
+					}), /* @__PURE__ */ jsx(CollapsibleTrigger, {
+						className: "flex-1",
+						children: rightIcon
+					})]
+				}) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+					className: "w-full text-sm px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+					children: [
+						item.icon,
+						item.text,
+						rightIcon
+					]
+				}), /* @__PURE__ */ jsx(CollapsibleContent, {
+					className: "flex flex-col",
+					children: item.items.map((item, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item }, i))
+				})]
+			});
+		}
+		default: return /* @__PURE__ */ jsxs(Link, {
+			href: item.url,
+			external: item.external,
+			className: cn(itemTriggerVariants({
+				active: isLinkItemActive(item, pathname),
+				className
+			})),
+			children: [item.icon, item.text]
+		});
+	}
+}
+function renderNode(node) {
+	if (node.type === "page") return /* @__PURE__ */ jsx(SidebarItem, { item: node });
+	if (node.type === "folder") return /* @__PURE__ */ jsx(SidebarFolder, { folder: node });
+	return /* @__PURE__ */ jsxs("p", {
+		className: "mt-4 w-full text-sm px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4 empty:hidden first:mt-0",
+		children: [node.icon, node.name]
+	});
+}
+function SidebarItem({ item }) {
+	const path = useTreePath();
+	return /* @__PURE__ */ jsxs(Link, {
+		href: item.url,
+		external: item.external,
+		className: itemTriggerVariants({ active: isNodeInPath(item, path) }),
+		children: [item.icon, item.name]
+	});
+}
+function SidebarFolder({ folder }) {
+	const path = useTreePath();
+	const shouldOpen = (folder.defaultOpen ?? true) || isNodeInPath(folder, path);
+	const [open, setOpen] = useState(shouldOpen);
+	useOnChange(shouldOpen, () => shouldOpen && setOpen(true));
+	if (folder.collapsible === false) return /* @__PURE__ */ jsxs(Fragment, { children: [folder.index ? /* @__PURE__ */ jsxs(Link, {
+		href: folder.index.url,
+		external: folder.index.external,
+		className: cn("inline-flex text-sm px-2.5 py-1.5 font-medium items-center gap-2 [&_svg]:size-4 mt-4 first:mt-0", isNodeInPath(folder.index, path) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+		children: [folder.icon, folder.name]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "w-full text-sm px-3 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4 mt-4 first:mt-0",
+		children: [folder.icon, folder.name]
+	}), folder.children.map((item, i) => cloneElement(renderNode(item), { key: i }))] });
+	const rightIcon = /* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto text-fd-muted-foreground size-3.5! transition-transform", !open && "-rotate-90") });
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		className: "mt-4 first:mt-0",
+		children: [folder.index ? /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full text-sm px-2.5 py-1.5 font-medium",
+			children: [/* @__PURE__ */ jsxs(Link, {
+				href: folder.index.url,
+				external: folder.index.external,
+				className: cn("inline-flex items-center gap-2 [&_svg]:size-4", isNodeInPath(folder.index, path) ? "text-fd-primary" : "hover:underline hover:decoration-fd-muted-foreground hover:underline-offset-4 hover:decoration-dashed hover:text-fd-accent-foreground"),
+				children: [folder.icon, folder.name]
+			}), /* @__PURE__ */ jsx(CollapsibleTrigger, {
+				className: "flex-1",
+				children: rightIcon
+			})]
+		}) : /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "w-full text-sm px-2.5 py-1.5 font-medium inline-flex items-center gap-2 [&_svg]:size-4",
+			children: [
+				folder.icon,
+				folder.name,
+				rightIcon
+			]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "flex flex-col",
+			children: folder.children.map((item, i) => cloneElement(renderNode(item), { key: i }))
+		})]
+	});
+}
+function isNodeInPath(node, path) {
+	return path.some((other) => other.$id === node.$id || other === node);
+}
+//#endregion
+export { Sidebar, SidebarDrawer, SidebarProvider, useSidebar };

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

@@ -0,0 +1,27 @@
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { BaseLayoutProps, LinkItemType, NavOptions } from "../shared/index.js";
+import { ComponentProps, FC } from "react";
+//#region src/layouts/home/index.d.ts
+interface HomeLayoutProps extends BaseLayoutProps, ComponentProps<'main'> {
+  nav?: Nav;
+  slots?: Partial<HomeSlots>;
+}
+interface Nav extends NavOptions {
+  /**
+   * Open mobile menu when hovering the trigger
+   */
+  enableHoverToOpen?: boolean;
+}
+interface HomeSlots extends BaseSlots {
+  header: FC<ComponentProps<'header'>>;
+  container: FC<ComponentProps<'main'>>;
+}
+declare function useHomeLayout(): {
+  props: BaseSlotsProps<HomeLayoutProps>;
+  navItems: LinkItemType[];
+  menuItems: LinkItemType[];
+  slots: HomeSlots;
+};
+declare function HomeLayout(props: HomeLayoutProps): import("react").JSX.Element;
+//#endregion
+export { HomeLayout, HomeLayoutProps, HomeSlots, useHomeLayout };

package/dist/layouts/home/index.js

@@ -0,0 +1,40 @@
+"use client";
+import { baseSlots } from "../shared/client.js";
+import { useLinkItems } from "../shared/index.js";
+import { Container } from "./slots/container.js";
+import { Header } from "./slots/header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use } from "react";
+//#region src/layouts/home/index.tsx
+const LayoutContext = createContext(null);
+function useHomeLayout() {
+	const context = use(LayoutContext);
+	if (!context) throw new Error("Please use this component under <HomeLayout /> (`@vx-oss/docs-react/layouts/home`).");
+	return context;
+}
+const { useBaseSlots } = baseSlots({ useProps() {
+	return useHomeLayout().props;
+} });
+function HomeLayout(props) {
+	const { nav: { enabled: navEnabled = true } = {}, slots: defaultSlots, children, i18n: _i18n, githubUrl: _githubUrl, links: _links, themeSwitch: _themeSwitch, searchToggle: _searchToggle, ...rest } = props;
+	const { baseSlots, baseProps } = useBaseSlots(props);
+	const linkItems = useLinkItems(props);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots?.header ?? Header,
+		container: defaultSlots?.container ?? Container
+	};
+	return /* @__PURE__ */ jsx(LayoutContext, {
+		value: {
+			props: baseProps,
+			slots,
+			...linkItems
+		},
+		children: /* @__PURE__ */ jsxs(slots.container, {
+			...rest,
+			children: [navEnabled && /* @__PURE__ */ jsx(slots.header, {}), children]
+		})
+	});
+}
+//#endregion
+export { HomeLayout, useHomeLayout };

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

@@ -0,0 +1,9 @@
+import { NavigationMenuContentProps, NavigationMenuItem, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
+import { LinkProps } from "@vx-oss/docs-core/link";
+//#region src/layouts/home/navbar.d.ts
+declare const NavbarMenu: typeof NavigationMenuItem;
+declare function NavbarMenuContent(props: NavigationMenuContentProps): import("react").JSX.Element;
+declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): import("react").JSX.Element;
+declare function NavbarMenuLink(props: LinkProps): import("react").JSX.Element;
+//#endregion
+export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };

package/dist/layouts/home/navbar.js

@@ -0,0 +1,34 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger } from "../../components/ui/navigation-menu.js";
+import { navItemVariants } from "./slots/header.js";
+import Link from "@vx-oss/docs-core/link";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/home/navbar.tsx
+const NavbarMenu = NavigationMenuItem;
+function NavbarMenuContent(props) {
+	return /* @__PURE__ */ jsx(NavigationMenuContent, {
+		...props,
+		className: cn("grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", props.className),
+		children: props.children
+	});
+}
+function NavbarMenuTrigger(props) {
+	return /* @__PURE__ */ jsx(NavigationMenuTrigger, {
+		...props,
+		className: cn(navItemVariants(), "text-sm rounded-md", props.className),
+		children: props.children
+	});
+}
+function NavbarMenuLink(props) {
+	return /* @__PURE__ */ jsx(NavigationMenuLink, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Link, {
+			...props,
+			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", props.className),
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };

package/dist/layouts/home/not-found.d.ts

@@ -0,0 +1,7 @@
+//#region src/layouts/home/not-found.d.ts
+/**
+ * the default not found page content, please make your own if you want to customize it.
+ */
+declare function DefaultNotFound(): import("react").JSX.Element;
+//#endregion
+export { DefaultNotFound };

package/dist/layouts/home/not-found.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../components/ui/button.js";
+import Link from "@vx-oss/docs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HomeIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/layouts/home/not-found.tsx
+/**
+* the default not found page content, please make your own if you want to customize it.
+*/
+function DefaultNotFound() {
+	const t = useTranslations({ note: "404 page" });
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col px-8 justify-center flex-1 text-center items-center gap-4",
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				className: "text-6xl font-bold text-fd-muted-foreground",
+				children: "404"
+			}),
+			/* @__PURE__ */ jsx("h2", {
+				className: "text-2xl font-semibold",
+				children: t("Page Not Found")
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fd-muted-foreground max-w-md",
+				children: t("The page you are looking for might have been removed, had its name changed, or is temporarily unavailable.")
+			}),
+			/* @__PURE__ */ jsxs(Link, {
+				href: "/",
+				className: cn(buttonVariants({
+					className: "mt-4 gap-1.5",
+					variant: "primary"
+				})),
+				children: [/* @__PURE__ */ jsx(HomeIcon, { className: "size-4" }), t("Back to Home")]
+			})
+		]
+	});
+}
+//#endregion
+export { DefaultNotFound };

package/dist/layouts/home/slots/container.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+//#region src/layouts/home/slots/container.d.ts
+declare function Container(props: ComponentProps<'main'>): import("react").JSX.Element;
+//#endregion
+export { Container };

package/dist/layouts/home/slots/container.js

@@ -0,0 +1,13 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/home/slots/container.tsx
+function Container(props) {
+	return /* @__PURE__ */ jsx("main", {
+		id: "nd-home-layout",
+		...props,
+		className: cn("flex flex-1 flex-col [--fd-layout-width:1400px]", props.className)
+	});
+}
+//#endregion
+export { Container };

package/dist/layouts/home/slots/header.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+//#region src/layouts/home/slots/header.d.ts
+declare const navItemVariants: (props?: ({
+  variant?: "main" | "icon" | "button" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
+//#endregion
+export { Header, navItemVariants };