@hanzo/docs-base-ui 16.5.3 → 16.7.5

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

@@ -21,5 +21,4 @@ declare function ImageZoom({
   ...props
 }: 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

@@ -13,5 +13,4 @@ declare function InlineTOC({
   ...props
 }: 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 { 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

@@ -75,9 +75,11 @@ declare function SidebarViewport({
 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_runtime0.JSX.Element;
 declare function SidebarFolder({
@@ -97,8 +99,11 @@ declare function SidebarFolderTrigger({
 }: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
+  active,
   ...props
-}: LinkProps): react_jsx_runtime0.JSX.Element;
+}: LinkProps & {
+  active?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,
@@ -110,5 +115,4 @@ declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): react_
  */
 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 };
-//# 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,8 +1,6 @@
-'use client';
-
+"use client";
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
-import { isActive } from "../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
@@ -14,7 +12,6 @@ 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,
@@ -143,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
 		})
 	});
@@ -157,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,
@@ -205,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", {
@@ -213,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,
@@ -234,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")
 		})]
 	});
 }
@@ -282,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, useAutoScroll, useFolder, useFolderDepth, useSidebar };
-//# sourceMappingURL=base.js.map

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

@@ -1,5 +1,5 @@
 import { base_d_exports } from "./base.js";
-import { LinkItemType } from "../../utils/link-item.js";
+import { LinkItemType } from "../../layouts/shared/index.js";
 import { HTMLAttributes } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
@@ -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

@@ -26,5 +26,4 @@ declare function createPageTreeRenderer({
   SidebarItem
 }: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { SidebarPageTreeComponents, createPageTreeRenderer };
-//# sourceMappingURL=page-tree.d.ts.map
+export { SidebarPageTreeComponents, createPageTreeRenderer };

package/dist/components/sidebar/page-tree.js

@@ -1,58 +1,69 @@
 import { useTreeContext, useTreePath } from "../../contexts/tree.js";
-import { Fragment, useMemo } from "react";
+import { isActive } from "../../utils/urls.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { usePathname } from "@hanzo/docs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/sidebar/page-tree.tsx
+const RendererContext = createContext(null);
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
-	function PageTreeFolder({ item, children }) {
-		const path = useTreePath();
-		return /* @__PURE__ */ jsxs(SidebarFolder, {
-			collapsible: item.collapsible,
-			active: path.includes(item),
-			defaultOpen: item.defaultOpen,
-			children: [item.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-				href: item.index.url,
-				external: item.index.external,
-				children: [item.icon, item.name]
-			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children })]
+	function renderList(nodes) {
+		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
+	}
+	function PageTreeNode({ node }) {
+		const { Separator, Item, Folder, pathname } = use(RendererContext);
+		if (node.type === "separator") {
+			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
+			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
+		}
+		if (node.type === "folder") {
+			const path = useTreePath();
+			if (Folder) return /* @__PURE__ */ jsx(Folder, {
+				item: node,
+				children: renderList(node.children)
+			});
+			return /* @__PURE__ */ jsxs(SidebarFolder, {
+				collapsible: node.collapsible,
+				active: path.includes(node),
+				defaultOpen: node.defaultOpen,
+				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+					href: node.index.url,
+					active: isActive(node.index.url, pathname),
+					external: node.index.external,
+					children: [node.icon, node.name]
+				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
+			});
+		}
+		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: node.url,
+			external: node.external,
+			active: isActive(node.url, pathname),
+			icon: node.icon,
+			children: node.name
 		});
 	}
 	/**
 	* Render sidebar items from page tree
 	*/
 	return function SidebarPageTree(components) {
+		const { Folder, Item, Separator } = components;
 		const { root } = useTreeContext();
-		const { Separator, Item, Folder = PageTreeFolder } = components;
-		return useMemo(() => {
-			function renderSidebarList(items) {
-				return items.map((item, i) => {
-					if (item.type === "separator") {
-						if (Separator) return /* @__PURE__ */ jsx(Separator, { item }, i);
-						return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i);
-					}
-					if (item.type === "folder") return /* @__PURE__ */ jsx(Folder, {
-						item,
-						children: renderSidebarList(item.children)
-					}, i);
-					if (Item) return /* @__PURE__ */ jsx(Item, { item }, item.url);
-					return /* @__PURE__ */ jsx(SidebarItem, {
-						href: item.url,
-						external: item.external,
-						icon: item.icon,
-						children: item.name
-					}, item.url);
-				});
-			}
-			return /* @__PURE__ */ jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id);
-		}, [
-			Folder,
-			Item,
-			Separator,
-			root
-		]);
+		const pathname = usePathname();
+		return /* @__PURE__ */ jsx(RendererContext, {
+			value: useMemo(() => ({
+				Folder,
+				Item,
+				Separator,
+				pathname
+			}), [
+				Folder,
+				Item,
+				Separator,
+				pathname
+			]),
+			children: /* @__PURE__ */ jsx(Fragment, { children: renderList(root.children) }, root.$id)
+		});
 	};
 }
-
 //#endregion
 export { createPageTreeRenderer };
-//# sourceMappingURL=page-tree.js.map

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -1,11 +1,9 @@
-import { SidebarTab } from "./index.js";
+import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/sidebar/tabs/dropdown.d.ts
-interface SidebarTabWithProps extends SidebarTab {
-  props?: ComponentProps<'a'>;
-}
+type SidebarTabWithProps = LayoutTab;
 declare function SidebarTabsDropdown({
   options,
   placeholder,
@@ -14,7 +12,6 @@ declare function SidebarTabsDropdown({
   placeholder?: ReactNode;
   options: SidebarTabWithProps[];
 } & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
-declare function isTabActive(tab: SidebarTab, pathname: string): boolean;
+declare const isTabActive: typeof isLayoutTabActive;
 //#endregion
-export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };
-//# sourceMappingURL=dropdown.d.ts.map
+export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/dropdown.js

@@ -1,15 +1,13 @@
-'use client';
-
+"use client";
 import { cn } from "../../../utils/cn.js";
-import { isActive, normalize } from "../../../utils/urls.js";
-import { useSidebar } from "../base.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { useSidebar } from "../base.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";
-
 //#region src/components/sidebar/tabs/dropdown.tsx
 function SidebarTabsDropdown({ options, placeholder, ...props }) {
 	const [open, setOpen] = useState(false);
@@ -68,11 +66,6 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 		})]
 	});
 }
-function isTabActive(tab, pathname) {
-	if (tab.urls) return tab.urls.has(normalize(pathname));
-	return isActive(tab.url, pathname, true);
-}
-
+const isTabActive = isLayoutTabActive;
 //#endregion
 export { SidebarTabsDropdown, isTabActive };
-//# sourceMappingURL=dropdown.js.map

package/dist/components/sidebar/tabs/index.d.ts

@@ -1,21 +1,8 @@
-import { ReactNode } from "react";
+import { LayoutTab } from "../../../layouts/shared/index.js";
 import * as PageTree from "@hanzo/docs-core/page-tree";
 
 //#region src/components/sidebar/tabs/index.d.ts
-interface SidebarTab {
-  /**
-   * Redirect URL of the folder, usually the index page
-   */
-  url: string;
-  icon?: ReactNode;
-  title: ReactNode;
-  description?: ReactNode;
-  /**
-   * Detect from a list of urls
-   */
-  urls?: Set<string>;
-  unlisted?: boolean;
-}
+type SidebarTab = LayoutTab;
 interface GetSidebarTabsOptions {
   transform?: (option: SidebarTab, node: PageTree.Folder) => SidebarTab | null;
 }
@@ -23,5 +10,4 @@ declare function getSidebarTabs(tree: PageTree.Root, {
   transform
 }?: GetSidebarTabsOptions): SidebarTab[];
 //#endregion
-export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };
-//# sourceMappingURL=index.d.ts.map
+export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };

package/dist/components/sidebar/tabs/index.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/sidebar/tabs/index.tsx
 const defaultTransform = (option, node) => {
 	if (!node.icon) return option;
@@ -43,7 +42,5 @@ function getFolderUrls(folder, output = /* @__PURE__ */ new Set()) {
 	}
 	return output;
 }
-
 //#endregion
 export { getSidebarTabs };
-//# sourceMappingURL=index.js.map

package/dist/components/steps.d.ts

@@ -13,5 +13,4 @@ declare function Step({
   children: ReactNode;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Step, Steps };
-//# sourceMappingURL=steps.d.ts.map
+export { Step, Steps };

package/dist/components/steps.js

@@ -1,5 +1,4 @@
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/steps.tsx
 function Steps({ children }) {
 	return /* @__PURE__ */ jsx("div", {
@@ -13,7 +12,5 @@ function Step({ children }) {
 		children
 	});
 }
-
 //#endregion
 export { Step, Steps };
-//# sourceMappingURL=steps.js.map

package/dist/components/tabs.d.ts

@@ -1,8 +1,7 @@
-import { Tabs as Tabs$1, TabsContent as TabsContent$1 } from "./ui/tabs.js";
-import * as React from "react";
+import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
+import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/tabs.d.ts
 interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {
@@ -21,8 +20,14 @@ interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onVal
    */
   label?: ReactNode;
 }
-declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.TabsListProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.TabsTabProps, "ref"> & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare function TabsList({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof TabsList$1>): react_jsx_runtime0.JSX.Element;
+declare function TabsTrigger({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof TabsTrigger$1>): react_jsx_runtime0.JSX.Element;
 declare function Tabs({
   ref,
   className,
@@ -48,5 +53,4 @@ declare function TabsContent({
   ...props
 }: ComponentProps<typeof TabsContent$1>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };
-//# sourceMappingURL=tabs.d.ts.map
+export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };

package/dist/components/tabs.js

@@ -1,11 +1,8 @@
-'use client';
-
+"use client";
 import { cn } from "../utils/cn.js";
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
-import * as React from "react";
 import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/tabs.tsx
 const TabsContext = createContext(null);
 function useTabContext() {
@@ -13,18 +10,18 @@ function useTabContext() {
 	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
 	return ctx;
 }
-const TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsList$1, {
-	ref,
-	...props,
-	className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
-}));
-TabsList.displayName = "TabsList";
-const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsTrigger$1, {
-	ref,
-	...props,
-	className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
-}));
-TabsTrigger.displayName = "TabsTrigger";
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsList$1, {
+		...props,
+		className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsTrigger$1, {
+		...props,
+		className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
+	});
+}
 function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : void 0, ...props }) {
 	const [value, setValue] = useState(defaultValue);
 	const collection = useMemo(() => [], []);
@@ -95,7 +92,5 @@ function useCollectionIndex() {
 function escapeValue(v) {
 	return v.toLowerCase().replace(/\s/, "-");
 }
-
 //#endregion
 export { Tab, Tabs, TabsContent, TabsList, TabsTrigger };
-//# sourceMappingURL=tabs.js.map

package/dist/components/toc/clerk.d.ts

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 
 //#region src/components/toc/clerk.d.ts
 declare function TOCItems({
@@ -7,6 +8,12 @@ declare function TOCItems({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+declare function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCItems };
-//# sourceMappingURL=clerk.d.ts.map
+export { TOCEmpty, TOCItem, TOCItems };