opin-ui 0.0.1

package/dist/components/heading.js

@@ -0,0 +1,38 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { buttonVariants } from "./ui/button.js";
+import { useCopyButton } from "../utils/use-copy-button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CopyCheckIcon, LinkIcon } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/heading.tsx
+function Heading({ as, ...props }) {
+	const As = as ?? "h1";
+	const t = useTranslations({ note: "heading anchor" });
+	const [isChecked, onCopy] = useCopyButton(() => {
+		if (!props.id) return;
+		const url = new URL(window.location.href);
+		url.hash = props.id;
+		return navigator.clipboard.writeText(url.href);
+	});
+	if (!props.id) return /* @__PURE__ */ jsx(As, { ...props });
+	return /* @__PURE__ */ jsxs(As, {
+		...props,
+		className: cn("group/heading flex scroll-m-28 flex-row items-center gap-1", props.className),
+		children: [/* @__PURE__ */ jsx("a", {
+			"data-card": "",
+			href: `#${props.id}`,
+			children: props.children
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": t("Copy Anchor Link", { note: "aria-label" }),
+			className: cn(buttonVariants({
+				variant: "ghost",
+				size: "icon-xs"
+			}), "not-prose shrink-0 text-fd-muted-foreground opacity-0 transition-opacity group-hover/heading:opacity-100"),
+			onClick: onCopy,
+			children: isChecked ? /* @__PURE__ */ jsx(CopyCheckIcon, {}) : /* @__PURE__ */ jsx(LinkIcon, {})
+		})]
+	});
+}
+//#endregion
+export { Heading };

package/dist/components/image-zoom.d.ts

@@ -0,0 +1,23 @@
+import { UncontrolledProps } from "../node_modules/.bun/react-medium-image-zoom@5.4.8_7492c01c6988791b/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
+import { ImageProps } from "fumadocs-core/framework";
+import { ComponentProps } from "react";
+
+//#region src/components/image-zoom.d.ts
+type ImageZoomProps = ImageProps & {
+  /**
+   * Image props when zoom in
+   */
+  zoomInProps?: ComponentProps<'img'>;
+  /**
+   * Props for `react-medium-image-zoom`
+   */
+  rmiz?: UncontrolledProps;
+};
+declare function ImageZoom({
+  zoomInProps,
+  children,
+  rmiz,
+  ...props
+}: ImageZoomProps): import("react").JSX.Element;
+//#endregion
+export { ImageZoom, ImageZoomProps };

package/dist/components/image-zoom.js

@@ -0,0 +1,32 @@
+"use client";
+import { Uncontrolled } from "../node_modules/.bun/react-medium-image-zoom@5.4.8_7492c01c6988791b/node_modules/react-medium-image-zoom/dist/uncontrolled.js";
+import "./image-zoom2.css";
+import { Image } from "fumadocs-core/framework";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/image-zoom.tsx
+function getImageSrc(src) {
+	if (typeof src === "string") return src;
+	if (typeof src === "object") {
+		if ("default" in src) return src.default.src;
+		return src.src;
+	}
+	return "";
+}
+function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
+	return /* @__PURE__ */ jsx(Uncontrolled, {
+		zoomMargin: 20,
+		wrapElement: "span",
+		...rmiz,
+		zoomImg: {
+			src: getImageSrc(props.src),
+			sizes: void 0,
+			...zoomInProps
+		},
+		children: children ?? /* @__PURE__ */ jsx(Image, {
+			sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px",
+			...props
+		})
+	});
+}
+//#endregion
+export { ImageZoom };

package/dist/components/image-zoom2.css

@@ -0,0 +1,71 @@
+[data-rmiz] {
+  display: block;
+  position: relative;
+}
+
+[data-rmiz-ghost] {
+  pointer-events: none;
+  position: absolute;
+}
+
+[data-rmiz-btn-zoom], [data-rmiz-btn-unzoom] {
+  display: none;
+}
+
+[data-rmiz-content="found"] img {
+  cursor: zoom-in;
+}
+
+[data-rmiz-modal][open] {
+  background-color: #0000;
+  width: 100dvw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+}
+
+[data-rmiz-modal]:focus-visible {
+  outline: none;
+}
+
+[data-rmiz-modal-overlay] {
+  transition: background-color .3s;
+  position: absolute;
+  inset: 0;
+}
+
+[data-rmiz-modal-overlay="visible"] {
+  background-color: var(--color-fd-background);
+}
+
+[data-rmiz-modal-overlay="hidden"] {
+  background-color: #0000;
+}
+
+[data-rmiz-modal-content] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+
+[data-rmiz-modal-img] {
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: 0 0;
+  transition: transform .3s;
+  position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay], [data-rmiz-modal-img] {
+    transition-duration: .01ms !important;
+  }
+}

package/dist/components/inline-toc.d.ts

@@ -0,0 +1,14 @@
+import { Collapsible } from "./ui/collapsible.js";
+import { ComponentProps } from "react";
+import { TOCItemType } from "fumadocs-core/toc";
+
+//#region src/components/inline-toc.d.ts
+interface InlineTocProps extends ComponentProps<typeof Collapsible> {
+  items: TOCItemType[];
+}
+declare function InlineTOC({
+  items,
+  ...props
+}: InlineTocProps): import("react").JSX.Element;
+//#endregion
+export { InlineTOC, InlineTocProps };

package/dist/components/inline-toc.js

@@ -0,0 +1,28 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "@fuma-translate/react";
+//#region src/components/inline-toc.tsx
+function InlineTOC({ items, ...props }) {
+	const t = useTranslations({ note: "inline table of contents" });
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		...props,
+		className: cn("not-prose rounded-3xl bg-fd-card text-fd-card-foreground", props.className),
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: "group inline-flex w-full items-center justify-between px-4 py-2.5 font-medium focus-visible:outline-none focus-visible:bg-fd-accent/40 rounded-3xl",
+			children: [props.children ?? t("Table of Contents"), /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180" })]
+		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col p-3 pt-0 text-sm text-fd-muted-foreground",
+			children: items.map((item) => /* @__PURE__ */ jsx("a", {
+				href: item.url,
+				className: "py-1.5 hover:text-fd-accent-foreground transition-colors",
+				style: { paddingInlineStart: 12 * Math.max(item.depth - 1, 0) },
+				children: item.title
+			}, item.url))
+		}) })]
+	});
+}
+//#endregion
+export { InlineTOC };

package/dist/components/sidebar/base.d.ts

@@ -0,0 +1,131 @@
+import { CollapsibleContentProps, CollapsibleTriggerProps } from "../ui/collapsible.js";
+import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
+import { LinkProps } from "fumadocs-core/link";
+import { ComponentProps, PointerEvent, ReactNode, RefObject } from "react";
+
+//#region src/components/sidebar/base.d.ts
+declare namespace base_d_exports {
+  export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarTrigger, SidebarViewport, useAutoScroll, useFolder, useFolderDepth, useSidebar };
+}
+interface SidebarContext {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  collapsed: boolean;
+  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * When set to false, don't close the sidebar when navigate to another page
+   */
+  closeOnRedirect: RefObject<boolean>;
+  defaultOpenLevel: number;
+  prefetch?: boolean;
+  mode: Mode;
+  showIcons: boolean;
+}
+interface SidebarProviderProps {
+  /**
+   * Open folders by default if their level is lower or equal to a specific level
+   * (Starting from 1)
+   *
+   * @defaultValue 0
+   */
+  defaultOpenLevel?: number;
+  /**
+   * Prefetch links, default behaviour depends on your React.js framework.
+   */
+  prefetch?: boolean;
+  /**
+   * Show page-tree icons next to sidebar items.
+   *
+   * @defaultValue false
+   */
+  showIcons?: boolean;
+  children?: ReactNode;
+}
+type Mode = 'drawer' | 'full';
+declare const SidebarContext: import("react").Context<SidebarContext | null>;
+declare function SidebarProvider({
+  defaultOpenLevel,
+  prefetch,
+  showIcons,
+  children
+}: SidebarProviderProps): import("react").JSX.Element;
+declare function useSidebar(): SidebarContext;
+declare function useFolder(): {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  depth: number;
+  collapsible: boolean;
+} | null;
+declare function useFolderDepth(): number;
+declare function SidebarContent({
+  mode: allowedMode,
+  children
+}: {
+  mode?: Mode | true;
+  children: (state: {
+    ref: RefObject<HTMLElement | null>;
+    collapsed: boolean;
+    hovered: boolean;
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerLeave: (event: PointerEvent) => void;
+  }) => ReactNode;
+}): ReactNode;
+declare function SidebarViewport({
+  area,
+  viewport,
+  children
+}: {
+  area?: ComponentProps<typeof ScrollArea>;
+  viewport?: ComponentProps<typeof ScrollViewport>;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): import("react").JSX.Element | undefined;
+declare function SidebarDrawerContent({
+  className,
+  children,
+  ...props
+}: ComponentProps<'aside'>): import("react").JSX.Element | undefined;
+declare function SidebarSeparator(props: ComponentProps<'p'>): import("react").JSX.Element;
+declare function SidebarItem({
+  icon,
+  active,
+  children,
+  ...props
+}: LinkProps & {
+  active?: boolean;
+  icon?: ReactNode;
+}): import("react").JSX.Element;
+declare function SidebarFolder({
+  defaultOpen: defaultOpenProp,
+  collapsible,
+  active,
+  children,
+  ...props
+}: ComponentProps<'div'> & {
+  active?: boolean;
+  defaultOpen?: boolean;
+  collapsible?: boolean;
+}): import("react").JSX.Element;
+declare function SidebarFolderTrigger({
+  children,
+  ...props
+}: CollapsibleTriggerProps): import("react").JSX.Element;
+declare function SidebarFolderLink({
+  children,
+  active,
+  ...props
+}: LinkProps & {
+  active?: boolean;
+}): import("react").JSX.Element;
+declare function SidebarFolderContent(props: CollapsibleContentProps): import("react").JSX.Element;
+declare function SidebarTrigger({
+  children,
+  ...props
+}: ComponentProps<'button'>): import("react").JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react").JSX.Element;
+/**
+ * scroll to the element if `active` is true
+ */
+declare function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | null>): void;
+//#endregion
+export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarTrigger, SidebarViewport, base_d_exports, useAutoScroll, useFolder, useFolderDepth, useSidebar };

package/dist/components/sidebar/base.js

@@ -0,0 +1,274 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ExternalLink } from "lucide-react";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { useMediaQuery } from "fumadocs-core/utils/use-media-query";
+import { Presence } from "@radix-ui/react-presence";
+import scrollIntoView from "scroll-into-view-if-needed";
+//#region src/components/sidebar/base.tsx
+var base_exports = /* @__PURE__ */ __exportAll({
+	SidebarCollapseTrigger: () => SidebarCollapseTrigger,
+	SidebarContent: () => SidebarContent,
+	SidebarDrawerContent: () => SidebarDrawerContent,
+	SidebarDrawerOverlay: () => SidebarDrawerOverlay,
+	SidebarFolder: () => SidebarFolder,
+	SidebarFolderContent: () => SidebarFolderContent,
+	SidebarFolderLink: () => SidebarFolderLink,
+	SidebarFolderTrigger: () => SidebarFolderTrigger,
+	SidebarItem: () => SidebarItem,
+	SidebarProvider: () => SidebarProvider,
+	SidebarSeparator: () => SidebarSeparator,
+	SidebarTrigger: () => SidebarTrigger,
+	SidebarViewport: () => SidebarViewport,
+	useAutoScroll: () => useAutoScroll,
+	useFolder: () => useFolder,
+	useFolderDepth: () => useFolderDepth,
+	useSidebar: () => useSidebar
+});
+const SidebarContext = createContext(null);
+const FolderContext = createContext(null);
+function SidebarProvider({ defaultOpenLevel = 0, prefetch, showIcons = false, children }) {
+	const closeOnRedirect = useRef(true);
+	const [open, setOpen] = useState(false);
+	const [collapsed, setCollapsed] = useState(false);
+	const pathname = usePathname();
+	const mode = useMediaQuery("(width < 768px)") ? "drawer" : "full";
+	useOnChange(pathname, () => {
+		if (closeOnRedirect.current) setOpen(false);
+		closeOnRedirect.current = true;
+	});
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen,
+			collapsed,
+			setCollapsed,
+			closeOnRedirect,
+			defaultOpenLevel,
+			prefetch,
+			showIcons,
+			mode
+		}), [
+			open,
+			collapsed,
+			defaultOpenLevel,
+			prefetch,
+			showIcons,
+			mode
+		]),
+		children
+	});
+}
+function useSidebar() {
+	const ctx = use(SidebarContext);
+	if (!ctx) throw new Error("Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.");
+	return ctx;
+}
+function useFolder() {
+	return use(FolderContext);
+}
+function useFolderDepth() {
+	return use(FolderContext)?.depth ?? 0;
+}
+function SidebarContent({ mode: allowedMode = "full", children }) {
+	const { collapsed, mode } = useSidebar();
+	const [hover, setHover] = useState(false);
+	const ref = useRef(null);
+	const timerRef = useRef(0);
+	useOnChange(collapsed, () => {
+		if (collapsed) setHover(false);
+	});
+	if (allowedMode !== true && allowedMode !== mode) return;
+	function shouldIgnoreHover(e) {
+		const element = ref.current;
+		if (!element) return true;
+		return !collapsed || e.pointerType === "touch" || element.getAnimations().length > 0;
+	}
+	return children({
+		ref,
+		collapsed,
+		hovered: hover,
+		onPointerEnter(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			setHover(true);
+		},
+		onPointerLeave(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => setHover(false), Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500);
+		}
+	});
+}
+function SidebarViewport({ area, viewport, children }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		...area,
+		className: cn("min-h-0 flex-1", area?.className),
+		children: /* @__PURE__ */ jsx(ScrollViewport, {
+			...viewport,
+			className: cn("*:flex! *:flex-col! *:gap-0.5! p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]", viewport?.className),
+			children
+		})
+	});
+}
+function SidebarDrawerOverlay(props) {
+	const { open, setOpen, mode } = useSidebar();
+	if (mode !== "drawer") return;
+	return /* @__PURE__ */ jsx(Presence, {
+		present: open,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-state": open ? "open" : "closed",
+			onClick: () => setOpen(false),
+			...props
+		})
+	});
+}
+function SidebarDrawerContent({ className, children, ...props }) {
+	const { open, mode } = useSidebar();
+	const state = open ? "open" : "closed";
+	if (mode !== "drawer") return;
+	return /* @__PURE__ */ jsx(Presence, {
+		present: open,
+		children: ({ present }) => /* @__PURE__ */ jsx("aside", {
+			id: "nd-sidebar-mobile",
+			"data-state": state,
+			className: cn(!present && "invisible", className),
+			...props,
+			children
+		})
+	});
+}
+function SidebarSeparator(props) {
+	return /* @__PURE__ */ jsx("p", { ...props });
+}
+function SidebarItem({ icon, active = false, children, ...props }) {
+	const ref = useRef(null);
+	const { prefetch, showIcons } = useSidebar();
+	useAutoScroll(active, ref);
+	return /* @__PURE__ */ jsxs(Link, {
+		ref,
+		"data-active": active,
+		prefetch,
+		...props,
+		children: [showIcons && (icon ?? (props.external ? /* @__PURE__ */ jsx(ExternalLink, {}) : null)), children]
+	});
+}
+function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible = true, active = false, children, ...props }) {
+	const { defaultOpenLevel } = useSidebar();
+	const depth = useFolderDepth() + 1;
+	const defaultOpen = collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+	const [open, setOpen] = useState(defaultOpen);
+	useOnChange(defaultOpen, (v) => {
+		if (v) setOpen(v);
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		disabled: !collapsible,
+		...props,
+		children: /* @__PURE__ */ jsx(FolderContext, {
+			value: useMemo(() => ({
+				open,
+				setOpen,
+				depth,
+				collapsible
+			}), [
+				collapsible,
+				depth,
+				open
+			]),
+			children
+		})
+	});
+}
+function SidebarFolderTrigger({ children, ...props }) {
+	const { open, collapsible } = use(FolderContext);
+	if (collapsible) return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		children
+	});
+}
+function SidebarFolderLink({ children, active = false, ...props }) {
+	const ref = useRef(null);
+	const { open, setOpen, collapsible } = use(FolderContext);
+	const { prefetch } = useSidebar();
+	useAutoScroll(active, ref);
+	return /* @__PURE__ */ jsxs(Link, {
+		ref,
+		"data-active": active,
+		onClick: (e) => {
+			if (!collapsible) return;
+			if (e.target instanceof Element && e.target.matches("[data-icon], [data-icon] *")) {
+				setOpen(!open);
+				e.preventDefault();
+			} else setOpen(active ? !open : true);
+		},
+		prefetch,
+		...props,
+		children: [children, collapsible && /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
+		})]
+	});
+}
+function SidebarFolderContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		...props,
+		children: props.children
+	});
+}
+function SidebarTrigger({ children, ...props }) {
+	const { setOpen } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": useTranslations({ note: "sidebar" })("Open Sidebar", { note: "aria-label" }),
+		onClick: () => setOpen((prev) => !prev),
+		...props,
+		children
+	});
+}
+function SidebarCollapseTrigger(props) {
+	const { collapsed, setCollapsed } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": useTranslations({ note: "sidebar" })("Collapse Sidebar", { note: "aria-label" }),
+		"data-collapsed": collapsed,
+		onClick: () => {
+			setCollapsed((prev) => !prev);
+		},
+		...props,
+		children: props.children
+	});
+}
+/**
+* scroll to the element if `active` is true
+*/
+function useAutoScroll(active, ref) {
+	const { mode } = useSidebar();
+	useEffect(() => {
+		if (active && ref.current) scrollIntoView(ref.current, {
+			boundary: document.getElementById(mode === "drawer" ? "nd-sidebar-mobile" : "nd-sidebar"),
+			scrollMode: "if-needed"
+		});
+	}, [
+		active,
+		mode,
+		ref
+	]);
+}
+//#endregion
+export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarSeparator, SidebarTrigger, SidebarViewport, base_exports, useAutoScroll, useFolder, useFolderDepth, useSidebar };

package/dist/components/sidebar/link-item.d.ts

@@ -0,0 +1,22 @@
+import { base_d_exports } from "./base.js";
+import { LinkItemType } from "../../layouts/shared/index.js";
+import { HTMLAttributes } from "react";
+
+//#region src/components/sidebar/link-item.d.ts
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createLinkItemRenderer({
+  SidebarFolder,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarFolderTrigger,
+  SidebarItem
+}: InternalComponents): ({
+  item,
+  ...props
+}: HTMLAttributes<HTMLElement> & {
+  item: Exclude<LinkItemType, {
+    type: "icon";
+  }>;
+}) => import("react").JSX.Element;
+//#endregion
+export { createLinkItemRenderer };

package/dist/components/sidebar/link-item.js

@@ -0,0 +1,38 @@
+"use client";
+import { isLinkItemActive } from "../../layouts/shared/index.js";
+import { useSidebar } from "./base.js";
+import { usePathname } from "fumadocs-core/framework";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/sidebar/link-item.tsx
+function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem }) {
+	/**
+	* Render sidebar items from page tree
+	*/
+	return function SidebarLinkItem({ item, ...props }) {
+		const active = isLinkItemActive(item, usePathname());
+		const { showIcons } = useSidebar();
+		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
+			...props,
+			children: item.children
+		});
+		if (item.type === "menu") return /* @__PURE__ */ jsxs(SidebarFolder, {
+			...props,
+			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+				href: item.url,
+				active,
+				external: item.external,
+				children: [showIcons && item.icon, item.text]
+			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [showIcons && item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
+		});
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: item.url,
+			icon: item.icon,
+			external: item.external,
+			active,
+			...props,
+			children: item.text
+		});
+	};
+}
+//#endregion
+export { createLinkItemRenderer };