@hanzo/docs-base-ui 16.5.0 → 16.7.5

package/dist/components/files.js

@@ -1,12 +1,10 @@
-'use client';
-
+"use client";
+import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
-import { cn } from "@hanzo/docs-ui/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { File as File$1, Folder as Folder$1, FolderOpen } from "lucide-react";
 import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
 import { cva } from "class-variance-authority";
-
 //#region src/components/files.tsx
 const itemVariants = cva("flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4");
 function Files({ className, ...props }) {
@@ -16,7 +14,7 @@ function Files({ className, ...props }) {
 		children: props.children
 	});
 }
-function File({ name, icon = /* @__PURE__ */ jsx(File$1, {}), className, ...rest }) {
+function File({ name, icon = /* @__PURE__ */ jsx(FileIcon, {}), className, ...rest }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(itemVariants({ className })),
 		...rest,
@@ -31,14 +29,12 @@ function Folder({ name, defaultOpen = false, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: cn(itemVariants({ className: "w-full" })),
-			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder$1, {}), name]
+			children: [open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(FolderIcon, {}), name]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", {
 			className: "ms-2 flex flex-col border-l ps-2",
 			children: props.children
 		}) })]
 	});
 }
-
 //#endregion
 export { File, Files, Folder };
-//# sourceMappingURL=files.js.map

package/dist/components/github-info.d.ts

@@ -1,19 +1,32 @@
-import * as react_jsx_runtime130 from "react/jsx-runtime";
-import { AnchorHTMLAttributes } from "react";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/github-info.d.ts
+interface FetchRepositoryInfoOptions {
+  owner: string;
+  repo: string;
+  baseUrl?: string;
+  token?: string;
+  fetchOptions?: RequestInit;
+}
+interface RepositoryInfo {
+  stars: number;
+  forks: number;
+}
+declare function fetchRepositoryInfo({
+  owner,
+  repo,
+  token,
+  baseUrl,
+  fetchOptions
+}: FetchRepositoryInfoOptions): Promise<RepositoryInfo>;
 declare function GithubInfo({
   repo,
   owner,
   token,
   baseUrl,
+  fetchOptions,
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  owner: string;
-  repo: string;
-  token?: string;
-  baseUrl?: string;
-}): Promise<react_jsx_runtime130.JSX.Element>;
+}: ComponentProps<'a'> & FetchRepositoryInfoOptions): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { GithubInfo };
-//# sourceMappingURL=github-info.d.ts.map
+export { FetchRepositoryInfoOptions, GithubInfo, RepositoryInfo, fetchRepositoryInfo };

package/dist/components/github-info.js

@@ -1,15 +1,16 @@
-import { cn } from "@hanzo/docs-ui/cn";
+import { cn } from "../utils/cn.js";
+import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Star } from "lucide-react";
-
+import { GitFork, Star } from "lucide-react";
 //#region src/components/github-info.tsx
-async function getRepoStarsAndForks(owner, repo, token, baseUrl = "https://api.github.com") {
+async function fetchRepositoryInfo({ owner, repo, token, baseUrl = "https://api.github.com", fetchOptions = { next: { revalidate: 60 } } }) {
 	const endpoint = `${baseUrl}/repos/${owner}/${repo}`;
-	const headers = new Headers({ "Content-Type": "application/json" });
+	const headers = new Headers(fetchOptions.headers);
+	headers.set("Content-Type", "application/json");
 	if (token) headers.set("Authorization", `Bearer ${token}`);
 	const response = await fetch(endpoint, {
-		headers,
-		next: { revalidate: 60 }
+		...fetchOptions,
+		headers
 	});
 	if (!response.ok) {
 		const message = await response.text();
@@ -21,15 +22,29 @@ async function getRepoStarsAndForks(owner, repo, token, baseUrl = "https://api.g
 		forks: data.forks_count
 	};
 }
-async function GithubInfo({ repo, owner, token, baseUrl, ...props }) {
-	const { stars } = await getRepoStarsAndForks(owner, repo, token, baseUrl);
-	const humanizedStars = humanizeNumber(stars);
+/**
+* Uses compact notation (e.g., 1.5K, 2.3M).
+*/
+const defaultFormatter = new Intl.NumberFormat("en", {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+const promises = {};
+function GithubInfo({ repo, owner, token, baseUrl, fetchOptions, ...props }) {
+	const options = {
+		repo,
+		owner,
+		token,
+		baseUrl,
+		fetchOptions
+	};
+	const { stars, forks } = use(promises[JSON.stringify(options)] ??= fetchRepositoryInfo(options));
 	return /* @__PURE__ */ jsxs("a", {
 		href: `https://github.com/${owner}/${repo}`,
 		rel: "noreferrer noopener",
 		target: "_blank",
 		...props,
-		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors lg:flex-row lg:items-center hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
+		className: cn("flex flex-col gap-1.5 p-2 rounded-lg text-sm text-fd-foreground/80 transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent", props.className),
 		children: [/* @__PURE__ */ jsxs("p", {
 			className: "flex items-center gap-2 truncate",
 			children: [
@@ -43,26 +58,16 @@ async function GithubInfo({ repo, owner, token, baseUrl, ...props }) {
 				"/",
 				repo
 			]
-		}), /* @__PURE__ */ jsxs("p", {
+		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex text-xs items-center gap-1 text-fd-muted-foreground",
-			children: [/* @__PURE__ */ jsx(Star, { className: "size-3" }), humanizedStars]
+			children: [
+				/* @__PURE__ */ jsx(Star, { className: "size-3" }),
+				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(stars) }),
+				/* @__PURE__ */ jsx(GitFork, { className: "size-3 ms-2" }),
+				/* @__PURE__ */ jsx("span", { children: defaultFormatter.format(forks) })
+			]
 		})]
 	});
 }
-/**
-* Converts a number to a human-readable string with K suffix for thousands
-* @example 1500 -> "1.5K", 1000000 -> "1000000"
-*/
-function humanizeNumber(num) {
-	if (num < 1e3) return num.toString();
-	if (num < 1e5) {
-		const value = (num / 1e3).toFixed(1);
-		return `${value.endsWith(".0") ? value.slice(0, -2) : value}K`;
-	}
-	if (num < 1e6) return `${Math.floor(num / 1e3)}K`;
-	return num.toString();
-}
-
 //#endregion
-export { GithubInfo };
-//# sourceMappingURL=github-info.js.map
+export { GithubInfo, fetchRepositoryInfo };

package/dist/components/heading.d.ts

@@ -11,5 +11,4 @@ declare function Heading<T extends Types = 'h1'>({
   ...props
 }: HeadingProps<T>): React.ReactElement;
 //#endregion
-export { Heading };
-//# sourceMappingURL=heading.d.ts.map
+export { Heading };

package/dist/components/heading.js

@@ -1,7 +1,6 @@
-import { cn } from "@hanzo/docs-ui/cn";
+import { cn } from "../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Link } from "lucide-react";
-
+import { LinkIcon } from "lucide-react";
 //#region src/components/heading.tsx
 function Heading({ as, className, ...props }) {
 	const As = as ?? "h1";
@@ -17,13 +16,11 @@ function Heading({ as, className, ...props }) {
 			href: `#${props.id}`,
 			className: "peer",
 			children: props.children
-		}), /* @__PURE__ */ jsx(Link, {
+		}), /* @__PURE__ */ jsx(LinkIcon, {
 			"aria-hidden": true,
 			className: "size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100"
 		})]
 	});
 }
-
 //#endregion
 export { Heading };
-//# sourceMappingURL=heading.js.map

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

@@ -1,6 +1,6 @@
-import { ImageProps } from "@hanzo/docs-core/framework";
-import * as react_jsx_runtime129 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import { ImageProps } from "@hanzo/docs-core/framework";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { UncontrolledProps } from "react-medium-image-zoom";
 
 //#region src/components/image-zoom.d.ts
@@ -19,7 +19,6 @@ declare function ImageZoom({
   children,
   rmiz,
   ...props
-}: ImageZoomProps): react_jsx_runtime129.JSX.Element;
+}: ImageZoomProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { ImageZoom, ImageZoomProps };
-//# sourceMappingURL=image-zoom.d.ts.map
+export { ImageZoom, ImageZoomProps };

package/dist/components/image-zoom.js

@@ -1,10 +1,9 @@
-'use client';
-
+"use client";
 import "./image-zoom.css";
+/* empty css            */
 import { Image } from "@hanzo/docs-core/framework";
 import { jsx } from "react/jsx-runtime";
 import Zoom from "react-medium-image-zoom";
-
 //#region src/components/image-zoom.tsx
 function getImageSrc(src) {
 	if (typeof src === "string") return src;
@@ -30,7 +29,5 @@ function ImageZoom({ zoomInProps, children, rmiz, ...props }) {
 		})
 	});
 }
-
 //#endregion
 export { ImageZoom };
-//# sourceMappingURL=image-zoom.js.map

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

@@ -1,6 +1,6 @@
 import { Collapsible } from "./ui/collapsible.js";
-import * as react_jsx_runtime82 from "react/jsx-runtime";
 import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { TOCItemType } from "@hanzo/docs-core/toc";
 
 //#region src/components/inline-toc.d.ts
@@ -11,7 +11,6 @@ declare function InlineTOC({
   items,
   className,
   ...props
-}: InlineTocProps): react_jsx_runtime82.JSX.Element;
+}: InlineTocProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { InlineTOC, InlineTocProps };
-//# sourceMappingURL=inline-toc.d.ts.map
+export { InlineTOC, InlineTocProps };

package/dist/components/inline-toc.js

@@ -1,10 +1,8 @@
-'use client';
-
+"use client";
+import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
-import { cn } from "@hanzo/docs-ui/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
-
 //#region src/components/inline-toc.tsx
 function InlineTOC({ items, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Collapsible, {
@@ -24,7 +22,5 @@ function InlineTOC({ items, className, ...props }) {
 		}) })]
 	});
 }
-
 //#endregion
 export { InlineTOC };
-//# sourceMappingURL=inline-toc.js.map

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

@@ -1,13 +1,13 @@
 import { CollapsibleContentProps, CollapsibleTriggerProps } from "../ui/collapsible.js";
 import { ScrollAreaProps } from "../ui/scroll-area.js";
-import { LinkProps } from "@hanzo/docs-core/link";
-import * as react_jsx_runtime105 from "react/jsx-runtime";
-import * as react20 from "react";
+import * as react from "react";
 import { ComponentProps, PointerEvent, ReactNode, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { LinkProps } from "@hanzo/docs-core/link";
 
 //#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, useFolder, useFolderDepth, useSidebar };
+  export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarProviderProps, SidebarSeparator, SidebarTrigger, SidebarViewport, useAutoScroll, useFolder, useFolderDepth, useSidebar };
 }
 interface SidebarContext {
   open: boolean;
@@ -19,7 +19,7 @@ interface SidebarContext {
    */
   closeOnRedirect: RefObject<boolean>;
   defaultOpenLevel: number;
-  prefetch: boolean;
+  prefetch?: boolean;
   mode: Mode;
 }
 interface SidebarProviderProps {
@@ -31,20 +31,18 @@ interface SidebarProviderProps {
    */
   defaultOpenLevel?: number;
   /**
-   * Prefetch links
-   *
-   * @defaultValue true
+   * Prefetch links, default behaviour depends on your React.js framework.
    */
   prefetch?: boolean;
   children?: ReactNode;
 }
 type Mode = 'drawer' | 'full';
-declare const SidebarContext: react20.Context<SidebarContext | null>;
+declare const SidebarContext: react.Context<SidebarContext | null>;
 declare function SidebarProvider({
   defaultOpenLevel,
   prefetch,
   children
-}: SidebarProviderProps): react_jsx_runtime105.JSX.Element;
+}: SidebarProviderProps): react_jsx_runtime0.JSX.Element;
 declare function useSidebar(): SidebarContext;
 declare function useFolder(): {
   open: boolean;
@@ -64,24 +62,26 @@ declare function SidebarContent({
     onPointerLeave: (event: PointerEvent) => void;
   }) => ReactNode;
 }): ReactNode;
-declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): react_jsx_runtime105.JSX.Element | undefined;
+declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element | undefined;
 declare function SidebarDrawerContent({
   className,
   children,
   ...props
-}: ComponentProps<'aside'>): react_jsx_runtime105.JSX.Element | undefined;
+}: ComponentProps<'aside'>): react_jsx_runtime0.JSX.Element | undefined;
 declare function SidebarViewport({
   className,
   ...props
-}: ScrollAreaProps): react_jsx_runtime105.JSX.Element;
-declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime105.JSX.Element;
+}: ScrollAreaProps): react_jsx_runtime0.JSX.Element;
+declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
 declare function SidebarItem({
   icon,
+  active,
   children,
   ...props
 }: LinkProps & {
+  active?: boolean;
   icon?: ReactNode;
-}): react_jsx_runtime105.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolder({
   defaultOpen: defaultOpenProp,
   collapsible,
@@ -92,21 +92,27 @@ declare function SidebarFolder({
   active?: boolean;
   defaultOpen?: boolean;
   collapsible?: boolean;
-}): react_jsx_runtime105.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderTrigger({
   children,
   ...props
-}: CollapsibleTriggerProps): react_jsx_runtime105.JSX.Element;
+}: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
+  active,
   ...props
-}: LinkProps): react_jsx_runtime105.JSX.Element;
-declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime105.JSX.Element;
+}: LinkProps & {
+  active?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,
   ...props
-}: ComponentProps<'button'>): react_jsx_runtime105.JSX.Element;
-declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): react_jsx_runtime105.JSX.Element;
+}: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.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, useFolder, useFolderDepth, useSidebar };
-//# sourceMappingURL=base.d.ts.map
+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

@@ -1,20 +1,17 @@
-'use client';
-
-import { __exportAll } from "../../_virtual/rolldown_runtime.js";
+"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 "@hanzo/docs-core/link";
+import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
 import { usePathname } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
 import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
 import { ChevronDown, ExternalLink } from "lucide-react";
-import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
-import { isActive } from "@hanzo/docs-ui/urls";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
 import { useMediaQuery } from "@hanzo/docs-core/utils/use-media-query";
 import scrollIntoView from "scroll-into-view-if-needed";
 import ReactDOM from "react-dom";
-
 //#region src/components/sidebar/base.tsx
 var base_exports = /* @__PURE__ */ __exportAll({
 	SidebarCollapseTrigger: () => SidebarCollapseTrigger,
@@ -30,13 +27,14 @@ var base_exports = /* @__PURE__ */ __exportAll({
 	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 = true, children }) {
+function SidebarProvider({ defaultOpenLevel = 0, prefetch, children }) {
 	const closeOnRedirect = useRef(true);
 	const [open, setOpen] = useState(false);
 	const [collapsed, setCollapsed] = useState(false);
@@ -142,8 +140,7 @@ function SidebarViewport({ className, ...props }) {
 		className: (s) => cn("min-h-0 flex-1", typeof className === "function" ? className(s) : className),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollViewport, {
-			className: "p-4 overscroll-contain",
-			style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
+			className: "p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]",
 			children: props.children
 		})
 	});
@@ -156,11 +153,9 @@ function SidebarSeparator(props) {
 		children: props.children
 	});
 }
-function SidebarItem({ icon, children, ...props }) {
-	const pathname = usePathname();
+function SidebarItem({ icon, active = false, children, ...props }) {
 	const ref = useRef(null);
 	const { prefetch } = useSidebar();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,
@@ -204,7 +199,7 @@ function SidebarFolderTrigger({ children, ...props }) {
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
 			"data-icon": true,
-			className: cn("ms-auto transition-transform", !open && "-rotate-90")
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
 		})]
 	});
 	return /* @__PURE__ */ jsx("div", {
@@ -212,12 +207,10 @@ function SidebarFolderTrigger({ children, ...props }) {
 		children
 	});
 }
-function SidebarFolderLink({ children, ...props }) {
+function SidebarFolderLink({ children, active = false, ...props }) {
 	const ref = useRef(null);
 	const { open, setOpen, collapsible } = use(FolderContext);
 	const { prefetch } = useSidebar();
-	const pathname = usePathname();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,
@@ -233,7 +226,7 @@ function SidebarFolderLink({ children, ...props }) {
 		...props,
 		children: [children, collapsible && /* @__PURE__ */ jsx(ChevronDown, {
 			"data-icon": true,
-			className: cn("ms-auto transition-transform", !open && "-rotate-90")
+			className: cn("ms-auto transition-transform", !open && "-rotate-90 rtl:rotate-90")
 		})]
 	});
 }
@@ -265,6 +258,9 @@ function SidebarCollapseTrigger(props) {
 		children: props.children
 	});
 }
+/**
+* scroll to the element if `active` is true
+*/
 function useAutoScroll(active, ref) {
 	const { mode } = useSidebar();
 	useEffect(() => {
@@ -278,7 +274,5 @@ function useAutoScroll(active, ref) {
 		ref
 	]);
 }
-
 //#endregion
-export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarSeparator, SidebarTrigger, SidebarViewport, base_exports, useFolder, useFolderDepth, useSidebar };
-//# sourceMappingURL=base.js.map
+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

@@ -1,7 +1,7 @@
 import { base_d_exports } from "./base.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { LinkItemType } from "../../layouts/shared/index.js";
 import { HTMLAttributes } from "react";
-import { LinkItemType } from "@hanzo/docs-ui/link-item";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/sidebar/link-item.d.ts
 type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
@@ -20,5 +20,4 @@ declare function createLinkItemRenderer({
   }>;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { createLinkItemRenderer };
-//# sourceMappingURL=link-item.d.ts.map
+export { createLinkItemRenderer };

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

@@ -1,11 +1,14 @@
+"use client";
+import { isLinkItemActive } from "../../layouts/shared/index.js";
+import { usePathname } from "@hanzo/docs-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());
 		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 			...props,
 			children: item.children
@@ -14,6 +17,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			...props,
 			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
 				href: item.url,
+				active,
 				external: item.external,
 				children: [item.icon, item.text]
 			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
@@ -22,12 +26,11 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			href: item.url,
 			icon: item.icon,
 			external: item.external,
+			active,
 			...props,
 			children: item.text
 		});
 	};
 }
-
 //#endregion
 export { createLinkItemRenderer };
-//# sourceMappingURL=link-item.js.map

package/dist/components/sidebar/page-tree.d.ts

@@ -1,6 +1,6 @@
 import { base_d_exports } from "./base.js";
-import * as react_jsx_runtime99 from "react/jsx-runtime";
 import { FC, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/components/sidebar/page-tree.d.ts
@@ -24,7 +24,6 @@ declare function createPageTreeRenderer({
   SidebarFolderTrigger,
   SidebarSeparator,
   SidebarItem
-}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime99.JSX.Element;
+}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { SidebarPageTreeComponents, createPageTreeRenderer };
-//# sourceMappingURL=page-tree.d.ts.map
+export { SidebarPageTreeComponents, createPageTreeRenderer };