opin-ui 0.0.1

package/dist/layouts/flux/page/slots/toc.js

@@ -0,0 +1,181 @@
+"use client";
+import { cn } from "../../../../utils/cn.js";
+import { TOCScrollArea, toc_exports, useItems, useTOCItems } from "../../../../components/toc/index.js";
+import { default_exports } from "../../../../components/toc/default.js";
+import { clerk_exports } from "../../../../components/toc/clerk.js";
+import { useTreePath } from "../../../../contexts/tree.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../../components/ui/collapsible.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { createContext, use, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "motion/react";
+//#region src/layouts/flux/page/slots/toc.tsx
+const TocPopoverContext = createContext(null);
+const { TOCProvider } = toc_exports;
+function TOC({ container, trigger, content, header, footer, style = "normal", list }) {
+	const items = useTOCItems();
+	const { TOCItems, TOCEmpty, TOCItem } = style === "clerk" ? clerk_exports : default_exports;
+	if (items.length === 0 && !header && !footer) return;
+	return /* @__PURE__ */ jsxs(PageTOCPopover, {
+		...container,
+		children: [/* @__PURE__ */ jsxs(PageTOCPopoverContent, {
+			...content,
+			children: [
+				header,
+				/* @__PURE__ */ jsx(TOCScrollArea, { children: /* @__PURE__ */ jsxs(TOCItems, {
+					...list,
+					children: [items.length === 0 && /* @__PURE__ */ jsx(TOCEmpty, {}), items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))]
+				}) }),
+				footer
+			]
+		}), /* @__PURE__ */ jsx(PageTOCPopoverTrigger, { ...trigger })]
+	});
+}
+function PageTOCPopover(props) {
+	const [container, setContainer] = useState(null);
+	useEffect(() => {
+		const element = document.getElementById("flux-layout-slot");
+		if (!element) return;
+		setContainer(element);
+	}, []);
+	if (!container) return;
+	return createPortal(/* @__PURE__ */ jsx(PageTOCPopoverPhysical, { ...props }), container);
+}
+function PageTOCPopoverPhysical({ className, children, ...rest }) {
+	const ref = useRef(null);
+	const [open, setOpen] = useState(false);
+	const onClick = useEffectEvent((e) => {
+		if (!open) return;
+		if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+	});
+	useEffect(() => {
+		window.addEventListener("click", onClick);
+		return () => {
+			window.removeEventListener("click", onClick);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx(TocPopoverContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen
+		}), [setOpen, open]),
+		children: /* @__PURE__ */ jsx(Collapsible, {
+			open,
+			onOpenChange: setOpen,
+			"data-toc-popover": "",
+			className: cn("relative h-9 animate-fd-fade-in", className),
+			...rest,
+			children: /* @__PURE__ */ jsx("header", {
+				ref,
+				className: cn("absolute w-full bottom-0 border rounded-xl transition-colors bg-fd-secondary text-fd-secondary-foreground backdrop-blur-sm", open && "shadow-lg bg-fd-popover/80 text-fd-popover-foreground"),
+				children
+			})
+		})
+	});
+}
+function PageTOCPopoverTrigger({ className, ...props }) {
+	const t = useTranslations({ note: "table of contents" });
+	const { open } = use(TocPopoverContext);
+	const items = useItems();
+	const selectedIdx = items.findIndex((item) => item.active);
+	const path = useTreePath().at(-1);
+	const spanProps = {
+		transition: { duration: .1 },
+		initial: {
+			opacity: 0,
+			y: 10
+		},
+		animate: {
+			opacity: 1,
+			y: 0
+		},
+		exit: {
+			opacity: 0,
+			y: -10
+		},
+		className: cn(open && "text-fd-popover-foreground")
+	};
+	return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: cn("flex w-full h-8.5 items-center text-sm text-fd-muted-foreground gap-2.5 px-2 text-start focus-visible:outline-none [&_svg]:size-4", className),
+		"data-toc-popover-trigger": "",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ProgressCircle, {
+				value: (items.findLastIndex((item) => item.active) + 1) / Math.max(1, items.length),
+				max: 1,
+				className: cn("shrink-0", open && "text-fd-primary")
+			}),
+			/* @__PURE__ */ jsx(AnimatePresence, {
+				mode: "wait",
+				children: items[selectedIdx] && !open ? /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: items[selectedIdx].original.title
+				}, selectedIdx) : path ? /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: path.name
+				}, path.$id ?? ":pathId") : /* @__PURE__ */ jsx(motion.span, {
+					...spanProps,
+					children: t("On this page")
+				}, ":toc")
+			}),
+			/* @__PURE__ */ jsx(ChevronDown, { className: cn("ms-auto shrink-0 transition-transform", open && "rotate-180") })
+		]
+	});
+}
+function clamp(input, min, max) {
+	if (input < min) return min;
+	if (input > max) return max;
+	return input;
+}
+function ProgressCircle({ value, strokeWidth = 1.5, size = 18, min = 0, max = 100, style, ...restSvgProps }) {
+	const normalizedValue = clamp(value, min, max);
+	const radius = size / 2 - strokeWidth;
+	const circumference = 2 * Math.PI * radius;
+	const progress = normalizedValue / max * circumference;
+	const circleProps = {
+		cx: size / 2,
+		cy: size / 2,
+		r: radius,
+		fill: "none",
+		strokeWidth
+	};
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "progressbar",
+		viewBox: `0 0 ${size} ${size}`,
+		"aria-valuenow": normalizedValue,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		style: {
+			width: size,
+			height: size,
+			...style
+		},
+		...restSvgProps,
+		children: [/* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			className: "stroke-current/25"
+		}), /* @__PURE__ */ jsx("circle", {
+			...circleProps,
+			stroke: "currentColor",
+			strokeDasharray: circumference,
+			strokeDashoffset: circumference - progress,
+			strokeLinecap: "round",
+			transform: `rotate(-90 ${size / 2} ${size / 2})`,
+			className: "transition-all"
+		})]
+	});
+}
+function PageTOCPopoverContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		"data-toc-popover-content": "",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col px-2 max-h-[50vh]",
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { TOC, TOCProvider };

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

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

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

@@ -0,0 +1,13 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/layouts/flux/slots/container.tsx
+function Container(props) {
+	return /* @__PURE__ */ jsx("div", {
+		id: "nd-flux-layout",
+		...props,
+		className: cn("flex flex-col items-center pb-24 overflow-x-clip", props.className)
+	});
+}
+//#endregion
+export { Container };

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

@@ -0,0 +1,22 @@
+import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
+import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/layouts/flux/slots/sidebar.d.ts
+interface SidebarProps extends ComponentProps<'aside'> {
+  components?: Partial<SidebarPageTreeComponents>;
+  banner?: ReactNode;
+  footer?: ReactNode;
+}
+type SidebarProviderProps = SidebarProviderProps$1;
+declare const useSidebar: typeof useSidebar$1;
+declare function SidebarProvider(props: SidebarProviderProps): import("react").JSX.Element;
+declare function Sidebar({
+  footer,
+  banner,
+  components,
+  ...rest
+}: SidebarProps): import("react").JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+//#endregion
+export { Sidebar, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, useSidebar };

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 { jsx, jsxs } from "react/jsx-runtime";
+import { SidebarIcon, XIcon } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+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__ */ jsxs(SidebarViewport, {
+				viewport: { className: "*:gap-0!" },
+				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: cn(itemVariants({ variant: collapsible ? "button" : null }), "w-full", 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: cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", 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,16 @@
+import { LayoutTab } from "../../shared/index.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#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): import("react").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 Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "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, { 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

@@ -0,0 +1,28 @@
+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 /> (`opin-ui/layouts/home`).");
+	return context;
+}
+const { useProvider } = 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 } = useProvider(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,10 @@
+import { NavigationMenuContentProps, NavigationMenuItem, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
+import { LinkProps } from "fumadocs-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 "fumadocs-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 };