@hanzo/docs-base-ui 16.5.0 → 16.7.5

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

@@ -0,0 +1,237 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { mergeRefs } from "../../../utils/merge-refs.js";
+import { SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider as SidebarProvider$1, SidebarSeparator as SidebarSeparator$1, SidebarViewport, base_exports, useFolder, useFolderDepth } from "../../../components/sidebar/base.js";
+import { createPageTreeRenderer } from "../../../components/sidebar/page-tree.js";
+import { createLinkItemRenderer } from "../../../components/sidebar/link-item.js";
+import { useFluxLayout } from "../index.js";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SidebarIcon, XIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion } from "motion/react";
+import { RemoveScroll } from "react-remove-scroll";
+//#region src/layouts/flux/slots/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))`;
+}
+const { useSidebar } = base_exports;
+function SidebarProvider(props) {
+	return /* @__PURE__ */ jsx(SidebarProvider$1, { ...props });
+}
+function Sidebar({ footer, banner, components, ...rest }) {
+	const { menuItems } = useFluxLayout();
+	return /* @__PURE__ */ jsxs(SidebarContent, {
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-3 p-4 pb-2 empty:hidden",
+				children: banner
+			}),
+			/* @__PURE__ */ jsx(SidebarViewport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col",
+				children: [menuItems.filter((v) => v.type !== "icon").map((item, i, list) => /* @__PURE__ */ jsx(SidebarLinkItem, {
+					item,
+					className: cn(i === list.length - 1 && "mb-4")
+				}, i)), /* @__PURE__ */ jsx(SidebarPageTree, { ...components })]
+			}) }),
+			footer
+		]
+	});
+}
+function SidebarTrigger(props) {
+	const { open, setOpen } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		onClick: () => setOpen((prev) => !prev),
+		...props,
+		children: /* @__PURE__ */ jsx(AnimatePresence, {
+			mode: "wait",
+			children: /* @__PURE__ */ jsx(motion.span, {
+				transition: { duration: .2 },
+				initial: {
+					y: "100%",
+					opacity: 0
+				},
+				animate: {
+					y: 0,
+					opacity: 1
+				},
+				exit: {
+					y: "100%",
+					opacity: 0
+				},
+				children: open ? /* @__PURE__ */ jsx(XIcon, {}) : /* @__PURE__ */ jsx(SidebarIcon, {})
+			}, open ? "open" : "closed")
+		})
+	});
+}
+function SidebarContent({ ref: refProp, className, children, ...props }) {
+	const ref = useRef(null);
+	const [blockScroll, setBlockScroll] = useState(false);
+	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);
+		};
+	}, []);
+	if (open && !blockScroll) setBlockScroll(true);
+	return /* @__PURE__ */ jsx(RemoveScroll, {
+		enabled: blockScroll,
+		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);
+			},
+			onAnimationComplete: (definition) => {
+				if (definition === "hide") setBlockScroll(false);
+			},
+			children: /* @__PURE__ */ jsx(motion.div, {
+				className: "absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm",
+				variants: {
+					show: {
+						y: 0,
+						opacity: 1
+					},
+					hide: {
+						y: "80%",
+						opacity: 0
+					}
+				},
+				transition: {
+					duration: .4,
+					ease: [
+						.16,
+						1,
+						.3,
+						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 SidebarFolder(props) {
+	return /* @__PURE__ */ jsx(SidebarFolder$1, { ...props });
+}
+function SidebarSeparator({ className, style, children, ...props }) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx(SidebarSeparator$1, {
+		className: cn("inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0 [&_svg]:size-4 [&_svg]:shrink-0", depth === 0 && "first:mt-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: (state) => cn(itemVariants({ variant: collapsible ? "button" : null }), "w-full", typeof className === "function" ? className(state) : 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: (state) => 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(state) : 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, SidebarProvider, SidebarTrigger, useSidebar };

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

@@ -0,0 +1,17 @@
+import { LayoutTab } from "../../shared/index.js";
+import { ComponentProps, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/flux/slots/tab-dropdown.d.ts
+interface TabDropdownProps extends ComponentProps<'button'> {
+  placeholder?: ReactNode;
+  tabs: LayoutTab[];
+}
+declare function TabDropdown({
+  tabs,
+  placeholder,
+  className,
+  ...props
+}: TabDropdownProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TabDropdown, TabDropdownProps };

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

@@ -0,0 +1,85 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.js";
+import { isLayoutTabActive } from "../../shared/index.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/slots/tab-dropdown.tsx
+function TabDropdown({ tabs, placeholder, className, ...props }) {
+	const [open, setOpen] = useState(false);
+	const pathname = usePathname();
+	const selectedIdx = useMemo(() => {
+		return tabs.findLastIndex((item) => isLayoutTabActive(item, pathname));
+	}, [tabs, pathname]);
+	const selected = selectedIdx !== -1 ? tabs[selectedIdx] : void 0;
+	const onClick = () => {
+		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-xl overflow-hidden p-1.5 border shadow-sm text-sm text-start transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", className),
+			...props,
+			children: [/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "popLayout",
+				children: /* @__PURE__ */ jsx(motion.span, {
+					className: "flex w-full min-w-0 overflow-hidden 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: tabs.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);
+			})
+		})]
+	});
+}
+//#endregion
+export { TabDropdown };

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

@@ -1,12 +1,29 @@
-import { BaseLayoutProps, NavOptions } from "../shared/index.js";
-import * as react_jsx_runtime16 from "react/jsx-runtime";
-import { ComponentProps } from "react";
+import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
+import { BaseLayoutProps, LinkItemType, NavOptions } from "../shared/index.js";
+import { ComponentProps, FC } 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>;
+interface HomeLayoutProps extends BaseLayoutProps, ComponentProps<'main'> {
+  nav?: Nav;
+  slots?: Partial<HomeSlots>;
 }
-declare function HomeLayout(props: HomeLayoutProps & ComponentProps<'main'>): react_jsx_runtime16.JSX.Element;
+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): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { HomeLayout, HomeLayoutProps };
-//# sourceMappingURL=index.d.ts.map
+export { HomeLayout, HomeLayoutProps, HomeSlots, useHomeLayout };

package/dist/layouts/home/index.js

@@ -1,25 +1,45 @@
-import { Header } from "./client.js";
-import { cn } from "@hanzo/docs-ui/cn";
+"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 { createContext, use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#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 /> (`@hanzo/docs-ui/layouts/home`).");
+	return context;
+}
+const { useProvider } = baseSlots({ useProps() {
+	return useHomeLayout().props;
+} });
 function HomeLayout(props) {
-	const { nav = {}, links, githubUrl, i18n, themeSwitch = {}, searchToggle, ...rest } = props;
-	return /* @__PURE__ */ jsxs("main", {
-		id: "nd-home-layout",
-		...rest,
-		className: cn("flex flex-1 flex-col [--fd-layout-width:1400px]", rest.className),
-		children: [nav.enabled !== false && (nav.component ?? /* @__PURE__ */ jsx(Header, {
-			links,
-			nav,
-			themeSwitch,
-			searchToggle,
-			i18n,
-			githubUrl
-		})), props.children]
+	const { nav: { enabled: navEnabled = true } = {}, slots: defaultSlots, children, i18n: _i18n, githubUrl: _githubUrl, links: _links, themeSwitch: _themeSwitch, searchToggle: _searchToggle, ...rest } = props;
+	const { baseSlots, baseProps } = useProvider(props);
+	const linkItems = useLinkItems(props);
+	const slots = {
+		...baseSlots,
+		header: defaultSlots?.header ?? InlineHeader,
+		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]
+		})
 	});
 }
-
+function InlineHeader(props) {
+	const { nav } = useHomeLayout().props;
+	if (nav?.component) return nav.component;
+	return /* @__PURE__ */ jsx(Header, { ...props });
+}
 //#endregion
-export { HomeLayout };
-//# sourceMappingURL=index.js.map
+export { HomeLayout, useHomeLayout };

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

@@ -1,20 +1,11 @@
-import { NavigationMenuContentProps, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
+import { NavigationMenuContentProps, NavigationMenuItem, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps } from "@hanzo/docs-core/link";
-import * as react_jsx_runtime20 from "react/jsx-runtime";
-import * as react7 from "react";
-import * as _base_ui_react6 from "@base-ui/react";
 
 //#region src/layouts/home/navbar.d.ts
-declare const NavbarMenu: react7.ForwardRefExoticComponent<Omit<_base_ui_react6.NavigationMenuItemProps & react7.RefAttributes<HTMLDivElement>, "ref"> & react7.RefAttributes<HTMLDivElement>>;
-declare function NavbarMenuContent({
-  className,
-  ...props
-}: NavigationMenuContentProps): react_jsx_runtime20.JSX.Element;
-declare function NavbarMenuTrigger({
-  className,
-  ...props
-}: NavigationMenuTriggerProps): react_jsx_runtime20.JSX.Element;
-declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime20.JSX.Element;
+declare const NavbarMenu: typeof NavigationMenuItem;
+declare function NavbarMenuContent(props: NavigationMenuContentProps): react_jsx_runtime0.JSX.Element;
+declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): react_jsx_runtime0.JSX.Element;
+declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };
-//# sourceMappingURL=navbar.d.ts.map
+export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };

package/dist/layouts/home/navbar.js

@@ -1,24 +1,24 @@
-'use client';
-
+"use client";
+import { cn } from "../../utils/cn.js";
 import { NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuTrigger } from "../../components/ui/navigation-menu.js";
-import { navItemVariants } from "./client.js";
-import Link from "@hanzo/docs-core/link";
-import { cn } from "@hanzo/docs-ui/cn";
+import { navItemVariants } from "./slots/header.js";
 import { jsx } from "react/jsx-runtime";
-
+import Link from "@hanzo/docs-core/link";
 //#region src/layouts/home/navbar.tsx
 const NavbarMenu = NavigationMenuItem;
-function NavbarMenuContent({ className, ...props }) {
+function NavbarMenuContent(props) {
+	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(NavigationMenuContent, {
-		className: (s) => cn("grid grid-cols-1 gap-2 p-4 md:grid-cols-2 lg:grid-cols-3", typeof className === "function" ? className(s) : className),
-		...props,
+		...rest,
+		className: (state) => cn("grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3", typeof className === "function" ? className(state) : className),
 		children: props.children
 	});
 }
-function NavbarMenuTrigger({ className, ...props }) {
+function NavbarMenuTrigger(props) {
+	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(NavigationMenuTrigger, {
-		...props,
-		className: (s) => cn(navItemVariants(), "rounded-md", typeof className === "function" ? className(s) : className),
+		...rest,
+		className: (state) => cn(navItemVariants(), "text-sm rounded-md", typeof className === "function" ? className(state) : className),
 		children: props.children
 	});
 }
@@ -29,7 +29,5 @@ function NavbarMenuLink(props) {
 		children: props.children
 	}) });
 }
-
 //#endregion
 export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };
-//# sourceMappingURL=navbar.js.map

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

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

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

@@ -0,0 +1,38 @@
+import { cn } from "../../utils/cn.js";
+import { buttonVariants } from "../../components/ui/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
+import { HomeIcon } from "lucide-react";
+//#region src/layouts/home/not-found.tsx
+/**
+* the default not found page content, please make your own if you want to customise it.
+*/
+function DefaultNotFound() {
+	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: "Page Not Found"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fd-muted-foreground max-w-md",
+				children: "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" }), "Back to Home"]
+			})
+		]
+	});
+}
+//#endregion
+export { DefaultNotFound };

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

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/layouts/home/slots/container.d.ts
+declare function Container(props: ComponentProps<'main'>): react_jsx_runtime0.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,11 @@
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/layouts/home/slots/header.d.ts
+declare const navItemVariants: (props?: ({
+  variant?: "button" | "main" | "icon" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function Header(props: ComponentProps<'header'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Header, navItemVariants };