@hanzo/docs-base-ui 16.4.8 → 16.5.3

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

@@ -1,6 +1,6 @@
 import { base_d_exports } from "./base.js";
-import * as react_jsx_runtime14 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,7 @@ declare function createPageTreeRenderer({
   SidebarFolderTrigger,
   SidebarSeparator,
   SidebarItem
-}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime14.JSX.Element;
+}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SidebarPageTreeComponents, createPageTreeRenderer };
 //# sourceMappingURL=page-tree.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"page-tree.d.ts","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"sourcesContent":[],"mappings":";;;;;;UAKiB,yBAAA;QACT;UAAW,QAAA,CAAS;EADX,CAAA,CAAA;EACE,MAAS,EAClB,EADkB,CAAA;IAApB,IAAA,EACa,QAAA,CAAS,MADtB;IACa,QAAS,EAAkB,SAAlB;EAAkB,CAAA,CAAA;EAAtC,SAAA,EACG,EADH,CAAA;IACc,IAAS,EAAT,QAAA,CAAS,SAAA;EAApB,CAAA,CAAA;;AACZ,KAEI,kBAAA,GAAqB,IAAH,CAAA,OACd,cAAA,EAAA,kBADqB,GAAA,eAAA,GAAA,mBAAA,GAAA,sBAAA,GAAA,sBAAA,GAAA,aAAA,CAAA;AAUd,iBAAA,sBAAA,CAAsB;EAAA,aAAA;EAAA,oBAAA;EAAA,iBAAA;EAAA,oBAAA;EAAA,gBAAA;EAAA;AAAA,CAAA,EAOnC,kBAPmC,CAAA,EAAA,CAAA,UAAA,EAoCQ,OApCR,CAoCgB,yBApChB,CAAA,EAAA,GAoC0C,mBAAA,CAAA,GAAA,CAAA,OApC1C"}
+{"version":3,"file":"page-tree.d.ts","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"mappings":";;;;;;UAKiB,yBAAA;EACf,IAAA,EAAM,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,IAAA;EAAA;EAC1B,MAAA,EAAQ,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,MAAA;IAAQ,QAAA,EAAU,SAAA;EAAA;EAC9C,SAAA,EAAW,EAAA;IAAK,IAAA,EAAM,QAAA,CAAS,SAAA;EAAA;AAAA;AAAA,KAG5B,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBASO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA,gBAAA;EACA;AAAA,GACC,kBAAA,IA6B+B,UAAA,EAAY,OAAA,CAAQ,yBAAA,MAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,11 +1,11 @@
-import { tree_exports } from "../../contexts/tree.js";
+import { useTreeContext, useTreePath } from "../../contexts/tree.js";
+import { Fragment, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useMemo } from "react";
 
 //#region src/components/sidebar/page-tree.tsx
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
 	function PageTreeFolder({ item, children }) {
-		const path = (0, tree_exports.useTreePath)();
+		const path = useTreePath();
 		return /* @__PURE__ */ jsxs(SidebarFolder, {
 			collapsible: item.collapsible,
 			active: path.includes(item),
@@ -21,7 +21,7 @@ function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 	* Render sidebar items from page tree
 	*/
 	return function SidebarPageTree(components) {
-		const { root } = (0, tree_exports.useTreeContext)();
+		const { root } = useTreeContext();
 		const { Separator, Item, Folder = PageTreeFolder } = components;
 		return useMemo(() => {
 			function renderSidebarList(items) {
@@ -43,7 +43,7 @@ function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 					}, item.url);
 				});
 			}
-			return /* @__PURE__ */ jsx(Fragment$1, { children: renderSidebarList(root.children) }, root.$id);
+			return /* @__PURE__ */ jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id);
 		}, [
 			Folder,
 			Item,

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

@@ -1 +1 @@
-{"version":3,"file":"page-tree.js","names":["Fragment"],"sources":["../../../src/components/sidebar/page-tree.tsx"],"sourcesContent":["import { useTreeContext, useTreePath } from '@/contexts/tree';\nimport { type FC, type ReactNode, useMemo, Fragment } from 'react';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport type * as Base from './base';\n\nexport interface SidebarPageTreeComponents {\n  Item: FC<{ item: PageTree.Item }>;\n  Folder: FC<{ item: PageTree.Folder; children: ReactNode }>;\n  Separator: FC<{ item: PageTree.Separator }>;\n}\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarSeparator'\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarSeparator,\n  SidebarItem,\n}: InternalComponents) {\n  function PageTreeFolder({ item, children }: { item: PageTree.Folder; children: ReactNode }) {\n    const path = useTreePath();\n\n    return (\n      <SidebarFolder\n        collapsible={item.collapsible}\n        active={path.includes(item)}\n        defaultOpen={item.defaultOpen}\n      >\n        {item.index ? (\n          <SidebarFolderLink href={item.index.url} external={item.index.external}>\n            {item.icon}\n            {item.name}\n          </SidebarFolderLink>\n        ) : (\n          <SidebarFolderTrigger>\n            {item.icon}\n            {item.name}\n          </SidebarFolderTrigger>\n        )}\n        <SidebarFolderContent>{children}</SidebarFolderContent>\n      </SidebarFolder>\n    );\n  }\n\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarPageTree(components: Partial<SidebarPageTreeComponents>) {\n    const { root } = useTreeContext();\n    const { Separator, Item, Folder = PageTreeFolder } = components;\n\n    return useMemo(() => {\n      function renderSidebarList(items: PageTree.Node[]) {\n        return items.map((item, i) => {\n          if (item.type === 'separator') {\n            if (Separator) return <Separator key={i} item={item} />;\n            return (\n              <SidebarSeparator key={i}>\n                {item.icon}\n                {item.name}\n              </SidebarSeparator>\n            );\n          }\n\n          if (item.type === 'folder') {\n            return (\n              <Folder key={i} item={item}>\n                {renderSidebarList(item.children)}\n              </Folder>\n            );\n          }\n\n          if (Item) return <Item key={item.url} item={item} />;\n          return (\n            <SidebarItem key={item.url} href={item.url} external={item.external} icon={item.icon}>\n              {item.name}\n            </SidebarItem>\n          );\n        });\n      }\n\n      return <Fragment key={root.$id}>{renderSidebarList(root.children)}</Fragment>;\n    }, [Folder, Item, Separator, root]);\n  };\n}\n"],"mappings":";;;;;AAqBA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,kBACA,eACqB;CACrB,SAAS,eAAe,EAAE,MAAM,YAA4D;EAC1F,MAAM,sCAAoB;AAE1B,SACE,qBAAC;GACC,aAAa,KAAK;GAClB,QAAQ,KAAK,SAAS,KAAK;GAC3B,aAAa,KAAK;cAEjB,KAAK,QACJ,qBAAC;IAAkB,MAAM,KAAK,MAAM;IAAK,UAAU,KAAK,MAAM;eAC3D,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,wBAAsB,WAAgC;IACzC;;;;;AAOpB,QAAO,SAAS,gBAAgB,YAAgD;EAC9E,MAAM,EAAE,2CAAyB;EACjC,MAAM,EAAE,WAAW,MAAM,SAAS,mBAAmB;AAErD,SAAO,cAAc;GACnB,SAAS,kBAAkB,OAAwB;AACjD,WAAO,MAAM,KAAK,MAAM,MAAM;AAC5B,SAAI,KAAK,SAAS,aAAa;AAC7B,UAAI,UAAW,QAAO,oBAAC,aAAwB,QAAT,EAAiB;AACvD,aACE,qBAAC,+BACE,KAAK,MACL,KAAK,SAFe,EAGJ;;AAIvB,SAAI,KAAK,SAAS,SAChB,QACE,oBAAC;MAAqB;gBACnB,kBAAkB,KAAK,SAAS;QADtB,EAEJ;AAIb,SAAI,KAAM,QAAO,oBAAC,QAA0B,QAAhB,KAAK,IAAmB;AACpD,YACE,oBAAC;MAA2B,MAAM,KAAK;MAAK,UAAU,KAAK;MAAU,MAAM,KAAK;gBAC7E,KAAK;QADU,KAAK,IAET;MAEhB;;AAGJ,UAAO,oBAACA,wBAAyB,kBAAkB,KAAK,SAAS,IAA3C,KAAK,IAAkD;KAC5E;GAAC;GAAQ;GAAM;GAAW;GAAK,CAAC"}
+{"version":3,"file":"page-tree.js","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"sourcesContent":["import { useTreeContext, useTreePath } from '@/contexts/tree';\nimport { type FC, type ReactNode, useMemo, Fragment } from 'react';\nimport type * as PageTree from '@hanzo/docs-core/page-tree';\nimport type * as Base from './base';\n\nexport interface SidebarPageTreeComponents {\n  Item: FC<{ item: PageTree.Item }>;\n  Folder: FC<{ item: PageTree.Folder; children: ReactNode }>;\n  Separator: FC<{ item: PageTree.Separator }>;\n}\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarSeparator'\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarSeparator,\n  SidebarItem,\n}: InternalComponents) {\n  function PageTreeFolder({ item, children }: { item: PageTree.Folder; children: ReactNode }) {\n    const path = useTreePath();\n\n    return (\n      <SidebarFolder\n        collapsible={item.collapsible}\n        active={path.includes(item)}\n        defaultOpen={item.defaultOpen}\n      >\n        {item.index ? (\n          <SidebarFolderLink href={item.index.url} external={item.index.external}>\n            {item.icon}\n            {item.name}\n          </SidebarFolderLink>\n        ) : (\n          <SidebarFolderTrigger>\n            {item.icon}\n            {item.name}\n          </SidebarFolderTrigger>\n        )}\n        <SidebarFolderContent>{children}</SidebarFolderContent>\n      </SidebarFolder>\n    );\n  }\n\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarPageTree(components: Partial<SidebarPageTreeComponents>) {\n    const { root } = useTreeContext();\n    const { Separator, Item, Folder = PageTreeFolder } = components;\n\n    return useMemo(() => {\n      function renderSidebarList(items: PageTree.Node[]) {\n        return items.map((item, i) => {\n          if (item.type === 'separator') {\n            if (Separator) return <Separator key={i} item={item} />;\n            return (\n              <SidebarSeparator key={i}>\n                {item.icon}\n                {item.name}\n              </SidebarSeparator>\n            );\n          }\n\n          if (item.type === 'folder') {\n            return (\n              <Folder key={i} item={item}>\n                {renderSidebarList(item.children)}\n              </Folder>\n            );\n          }\n\n          if (Item) return <Item key={item.url} item={item} />;\n          return (\n            <SidebarItem key={item.url} href={item.url} external={item.external} icon={item.icon}>\n              {item.name}\n            </SidebarItem>\n          );\n        });\n      }\n\n      return <Fragment key={root.$id}>{renderSidebarList(root.children)}</Fragment>;\n    }, [Folder, Item, Separator, root]);\n  };\n}\n"],"mappings":";;;;;AAqBA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,kBACA,eACqB;CACrB,SAAS,eAAe,EAAE,MAAM,YAA4D;EAC1F,MAAM,OAAO,aAAa;AAE1B,SACE,qBAAC;GACC,aAAa,KAAK;GAClB,QAAQ,KAAK,SAAS,KAAK;GAC3B,aAAa,KAAK;cAEjB,KAAK,QACJ,qBAAC;IAAkB,MAAM,KAAK,MAAM;IAAK,UAAU,KAAK,MAAM;eAC3D,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,wBAAsB,WAAgC;IACzC;;;;;AAOpB,QAAO,SAAS,gBAAgB,YAAgD;EAC9E,MAAM,EAAE,SAAS,gBAAgB;EACjC,MAAM,EAAE,WAAW,MAAM,SAAS,mBAAmB;AAErD,SAAO,cAAc;GACnB,SAAS,kBAAkB,OAAwB;AACjD,WAAO,MAAM,KAAK,MAAM,MAAM;AAC5B,SAAI,KAAK,SAAS,aAAa;AAC7B,UAAI,UAAW,QAAO,oBAAC,aAAwB,QAAT,EAAiB;AACvD,aACE,qBAAC,+BACE,KAAK,MACL,KAAK,SAFe,EAGJ;;AAIvB,SAAI,KAAK,SAAS,SAChB,QACE,oBAAC;MAAqB;gBACnB,kBAAkB,KAAK,SAAS;QADtB,EAEJ;AAIb,SAAI,KAAM,QAAO,oBAAC,QAA0B,QAAhB,KAAK,IAAmB;AACpD,YACE,oBAAC;MAA2B,MAAM,KAAK;MAAK,UAAU,KAAK;MAAU,MAAM,KAAK;gBAC7E,KAAK;QADU,KAAK,IAET;MAEhB;;AAGJ,UAAO,oBAAC,sBAAyB,kBAAkB,KAAK,SAAS,IAA3C,KAAK,IAAkD;KAC5E;GAAC;GAAQ;GAAM;GAAW;GAAK,CAAC"}

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

@@ -1,6 +1,6 @@
 import { SidebarTab } from "./index.js";
-import * as react_jsx_runtime58 from "react/jsx-runtime";
 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 {
@@ -13,8 +13,8 @@ declare function SidebarTabsDropdown({
 }: {
   placeholder?: ReactNode;
   options: SidebarTabWithProps[];
-} & ComponentProps<'button'>): react_jsx_runtime58.JSX.Element;
-declare function isTabActive(tab: SidebarTab, pathname: string): any;
+} & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function isTabActive(tab: SidebarTab, pathname: string): boolean;
 //#endregion
 export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };
 //# sourceMappingURL=dropdown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","names":[],"sources":["../../../../src/components/sidebar/tabs/dropdown.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,mBAAA,SAA4B;UACnC;;AADO,iBAID,mBAAA,CAHN;EAAA,OAAA;EADmC,WAAU;EAAA,GAAA;AAMrD,CANqD,EAAA;EAIvC,WAAA,CAAA,EAKA,SALmB;EACjC,OAAA,EAKS,mBALT,EAAA;CACA,GAKE,cALF,CAAA,QAAA,CAAA,CAAA,EAK0B,mBAAA,CAAA,GAAA,CAAA,OAL1B;AAGc,iBAkFA,WAAA,CAlFA,GAAA,EAkFiB,UAlFjB,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"dropdown.d.ts","names":[],"sources":["../../../../src/components/sidebar/tabs/dropdown.tsx"],"mappings":";;;;;UAWiB,mBAAA,SAA4B,UAAA;EAC3C,KAAA,GAAQ,cAAA;AAAA;AAAA,iBAGM,mBAAA,CAAA;EACd,OAAA;EACA,WAAA;EAAA,GACG;AAAA;EAEH,WAAA,GAAc,SAAA;EACd,OAAA,EAAS,mBAAA;AAAA,IACP,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgFZ,WAAA,CAAY,GAAA,EAAK,UAAA,EAAY,QAAA"}

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

@@ -1,14 +1,14 @@
 '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 Link from "@hanzo/docs-core/link";
+import { useMemo, useState } from "react";
 import { usePathname } from "@hanzo/docs-core/framework";
-import { cn } from "@hanzo/docs-ui/cn";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Link from "@hanzo/docs-core/link";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { useMemo, useState } from "react";
-import { isActive, normalize } from "@hanzo/docs-radix-ui/urls";
 
 //#region src/components/sidebar/tabs/dropdown.tsx
 function SidebarTabsDropdown({ options, placeholder, ...props }) {
@@ -16,13 +16,13 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 	const { closeOnRedirect } = useSidebar();
 	const pathname = usePathname();
 	const selected = useMemo(() => {
-		return options.findLast((item$1) => isTabActive(item$1, pathname));
+		return options.findLast((item) => isTabActive(item, pathname));
 	}, [options, pathname]);
 	const onClick = () => {
 		closeOnRedirect.current = false;
 		setOpen(false);
 	};
-	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 		className: "size-9 shrink-0 empty:hidden md:size-5",
 		children: selected.icon
 	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
@@ -37,33 +37,33 @@ function SidebarTabsDropdown({ options, placeholder, ...props }) {
 		onOpenChange: setOpen,
 		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
 			...props,
-			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[open]:bg-fd-accent data-[open]:text-fd-accent-foreground", props.className),
+			className: cn("flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-open:bg-fd-accent data-open:text-fd-accent-foreground", props.className),
 			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
 		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "flex flex-col gap-1 w-(--anchor-width) p-1 fd-scroll-container",
-			children: options.map((item$1) => {
-				const isActive$1 = selected && item$1.url === selected.url;
-				if (!isActive$1 && item$1.unlisted) return;
+			children: options.map((item) => {
+				const isActive = selected && item.url === selected.url;
+				if (!isActive && item.unlisted) return;
 				return /* @__PURE__ */ jsxs(Link, {
-					href: item$1.url,
+					href: item.url,
 					onClick,
-					...item$1.props,
-					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item$1.props?.className),
+					...item.props,
+					className: cn("flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
 					children: [
 						/* @__PURE__ */ jsx("div", {
 							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
-							children: item$1.icon
+							children: item.icon
 						}),
 						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 							className: "text-sm font-medium leading-none",
-							children: item$1.title
+							children: item.title
 						}), /* @__PURE__ */ jsx("p", {
 							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
-							children: item$1.description
+							children: item.description
 						})] }),
-						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive$1 && "invisible") })
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
 					]
-				}, item$1.url);
+				}, item.url);
 			})
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["item","isActive"],"sources":["../../../../src/components/sidebar/tabs/dropdown.tsx"],"sourcesContent":["'use client';\nimport { Check, ChevronsUpDown } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useMemo, useState } from 'react';\nimport Link from '@hanzo/docs-core/link';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { normalize, isActive } from '@hanzo/docs-radix-ui/urls';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport type { SidebarTab } from '.';\n\nexport interface SidebarTabWithProps extends SidebarTab {\n  props?: ComponentProps<'a'>;\n}\n\nexport function SidebarTabsDropdown({\n  options,\n  placeholder,\n  ...props\n}: {\n  placeholder?: ReactNode;\n  options: SidebarTabWithProps[];\n} & ComponentProps<'button'>) {\n  const [open, setOpen] = useState(false);\n  const { closeOnRedirect } = useSidebar();\n  const pathname = usePathname();\n\n  const selected = useMemo(() => {\n    return options.findLast((item) => isTabActive(item, pathname));\n  }, [options, pathname]);\n\n  const onClick = () => {\n    closeOnRedirect.current = false;\n    setOpen(false);\n  };\n\n  const item = selected ? (\n    <>\n      <div className=\"size-9 shrink-0 empty:hidden md:size-5\">{selected.icon}</div>\n      <div>\n        <p className=\"text-sm font-medium\">{selected.title}</p>\n        <p className=\"text-sm text-fd-muted-foreground empty:hidden md:hidden\">\n          {selected.description}\n        </p>\n      </div>\n    </>\n  ) : (\n    placeholder\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {item && (\n        <PopoverTrigger\n          {...props}\n          className={cn(\n            'flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[open]:bg-fd-accent data-[open]:text-fd-accent-foreground',\n            props.className,\n          )}\n        >\n          {item}\n          <ChevronsUpDown className=\"shrink-0 ms-auto size-4 text-fd-muted-foreground\" />\n        </PopoverTrigger>\n      )}\n      <PopoverContent className=\"flex flex-col gap-1 w-(--anchor-width) p-1 fd-scroll-container\">\n        {options.map((item) => {\n          const isActive = selected && item.url === selected.url;\n          if (!isActive && item.unlisted) return;\n\n          return (\n            <Link\n              key={item.url}\n              href={item.url}\n              onClick={onClick}\n              {...item.props}\n              className={cn(\n                'flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',\n                item.props?.className,\n              )}\n            >\n              <div className=\"shrink-0 size-9 md:mb-auto md:size-5 empty:hidden\">{item.icon}</div>\n              <div>\n                <p className=\"text-sm font-medium leading-none\">{item.title}</p>\n                <p className=\"text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden\">\n                  {item.description}\n                </p>\n              </div>\n\n              <Check\n                className={cn(\n                  'shrink-0 ms-auto size-3.5 text-fd-primary',\n                  !isActive && 'invisible',\n                )}\n              />\n            </Link>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function isTabActive(tab: SidebarTab, pathname: string) {\n  if (tab.urls) return tab.urls.has(normalize(pathname));\n\n  return isActive(tab.url, pathname, true);\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,oBAAoB,EAClC,SACA,aACA,GAAG,SAIyB;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,WAAW,aAAa;CAE9B,MAAM,WAAW,cAAc;AAC7B,SAAO,QAAQ,UAAU,WAAS,YAAYA,QAAM,SAAS,CAAC;IAC7D,CAAC,SAAS,SAAS,CAAC;CAEvB,MAAM,gBAAgB;AACpB,kBAAgB,UAAU;AAC1B,UAAQ,MAAM;;CAGhB,MAAM,OAAO,WACX,4CACE,oBAAC;EAAI,WAAU;YAA0C,SAAS;GAAW,EAC7E,qBAAC,oBACC,oBAAC;EAAE,WAAU;YAAuB,SAAS;GAAU,EACvD,oBAAC;EAAE,WAAU;YACV,SAAS;GACR,IACA,IACL,GAEH;AAGF,QACE,qBAAC;EAAc;EAAM,cAAc;aAChC,QACC,qBAAC;GACC,GAAI;GACJ,WAAW,GACT,gNACA,MAAM,UACP;cAEA,MACD,oBAAC,kBAAe,WAAU,qDAAqD;IAChE,EAEnB,oBAAC;GAAe,WAAU;aACvB,QAAQ,KAAK,WAAS;IACrB,MAAMC,aAAW,YAAYD,OAAK,QAAQ,SAAS;AACnD,QAAI,CAACC,cAAYD,OAAK,SAAU;AAEhC,WACE,qBAAC;KAEC,MAAMA,OAAK;KACF;KACT,GAAIA,OAAK;KACT,WAAW,GACT,+FACAA,OAAK,OAAO,UACb;;MAED,oBAAC;OAAI,WAAU;iBAAqDA,OAAK;QAAW;MACpF,qBAAC,oBACC,oBAAC;OAAE,WAAU;iBAAoCA,OAAK;QAAU,EAChE,oBAAC;OAAE,WAAU;iBACVA,OAAK;QACJ,IACA;MAEN,oBAAC,SACC,WAAW,GACT,6CACA,CAACC,cAAY,YACd,GACD;;OAtBGD,OAAK,IAuBL;KAET;IACa;GACT;;AAId,SAAgB,YAAY,KAAiB,UAAkB;AAC7D,KAAI,IAAI,KAAM,QAAO,IAAI,KAAK,IAAI,UAAU,SAAS,CAAC;AAEtD,QAAO,SAAS,IAAI,KAAK,UAAU,KAAK"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../../src/components/sidebar/tabs/dropdown.tsx"],"sourcesContent":["'use client';\nimport { Check, ChevronsUpDown } from 'lucide-react';\nimport { type ComponentProps, type ReactNode, useMemo, useState } from 'react';\nimport Link from '@hanzo/docs-core/link';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport { cn } from '@/utils/cn';\nimport { normalize, isActive } from '@/utils/urls';\nimport { useSidebar } from '@/components/sidebar/base';\nimport { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';\nimport type { SidebarTab } from '.';\n\nexport interface SidebarTabWithProps extends SidebarTab {\n  props?: ComponentProps<'a'>;\n}\n\nexport function SidebarTabsDropdown({\n  options,\n  placeholder,\n  ...props\n}: {\n  placeholder?: ReactNode;\n  options: SidebarTabWithProps[];\n} & ComponentProps<'button'>) {\n  const [open, setOpen] = useState(false);\n  const { closeOnRedirect } = useSidebar();\n  const pathname = usePathname();\n\n  const selected = useMemo(() => {\n    return options.findLast((item) => isTabActive(item, pathname));\n  }, [options, pathname]);\n\n  const onClick = () => {\n    closeOnRedirect.current = false;\n    setOpen(false);\n  };\n\n  const item = selected ? (\n    <>\n      <div className=\"size-9 shrink-0 empty:hidden md:size-5\">{selected.icon}</div>\n      <div>\n        <p className=\"text-sm font-medium\">{selected.title}</p>\n        <p className=\"text-sm text-fd-muted-foreground empty:hidden md:hidden\">\n          {selected.description}\n        </p>\n      </div>\n    </>\n  ) : (\n    placeholder\n  );\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      {item && (\n        <PopoverTrigger\n          {...props}\n          className={cn(\n            'flex items-center gap-2 rounded-lg p-2 border bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-open:bg-fd-accent data-open:text-fd-accent-foreground',\n            props.className,\n          )}\n        >\n          {item}\n          <ChevronsUpDown className=\"shrink-0 ms-auto size-4 text-fd-muted-foreground\" />\n        </PopoverTrigger>\n      )}\n      <PopoverContent className=\"flex flex-col gap-1 w-(--anchor-width) p-1 fd-scroll-container\">\n        {options.map((item) => {\n          const isActive = selected && item.url === selected.url;\n          if (!isActive && item.unlisted) return;\n\n          return (\n            <Link\n              key={item.url}\n              href={item.url}\n              onClick={onClick}\n              {...item.props}\n              className={cn(\n                'flex items-center gap-2 rounded-lg p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground',\n                item.props?.className,\n              )}\n            >\n              <div className=\"shrink-0 size-9 md:mb-auto md:size-5 empty:hidden\">{item.icon}</div>\n              <div>\n                <p className=\"text-sm font-medium leading-none\">{item.title}</p>\n                <p className=\"text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden\">\n                  {item.description}\n                </p>\n              </div>\n\n              <Check\n                className={cn(\n                  'shrink-0 ms-auto size-3.5 text-fd-primary',\n                  !isActive && 'invisible',\n                )}\n              />\n            </Link>\n          );\n        })}\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport function isTabActive(tab: SidebarTab, pathname: string) {\n  if (tab.urls) return tab.urls.has(normalize(pathname));\n\n  return isActive(tab.url, pathname, true);\n}\n"],"mappings":";;;;;;;;;;;;;AAeA,SAAgB,oBAAoB,EAClC,SACA,aACA,GAAG,SAIyB;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,MAAM;CACvC,MAAM,EAAE,oBAAoB,YAAY;CACxC,MAAM,WAAW,aAAa;CAE9B,MAAM,WAAW,cAAc;AAC7B,SAAO,QAAQ,UAAU,SAAS,YAAY,MAAM,SAAS,CAAC;IAC7D,CAAC,SAAS,SAAS,CAAC;CAEvB,MAAM,gBAAgB;AACpB,kBAAgB,UAAU;AAC1B,UAAQ,MAAM;;CAGhB,MAAM,OAAO,WACX,8CACE,oBAAC;EAAI,WAAU;YAA0C,SAAS;GAAW,EAC7E,qBAAC,oBACC,oBAAC;EAAE,WAAU;YAAuB,SAAS;GAAU,EACvD,oBAAC;EAAE,WAAU;YACV,SAAS;GACR,IACA,IACL,GAEH;AAGF,QACE,qBAAC;EAAc;EAAM,cAAc;aAChC,QACC,qBAAC;GACC,GAAI;GACJ,WAAW,GACT,4MACA,MAAM,UACP;cAEA,MACD,oBAAC,kBAAe,WAAU,qDAAqD;IAChE,EAEnB,oBAAC;GAAe,WAAU;aACvB,QAAQ,KAAK,SAAS;IACrB,MAAM,WAAW,YAAY,KAAK,QAAQ,SAAS;AACnD,QAAI,CAAC,YAAY,KAAK,SAAU;AAEhC,WACE,qBAAC;KAEC,MAAM,KAAK;KACF;KACT,GAAI,KAAK;KACT,WAAW,GACT,+FACA,KAAK,OAAO,UACb;;MAED,oBAAC;OAAI,WAAU;iBAAqD,KAAK;QAAW;MACpF,qBAAC,oBACC,oBAAC;OAAE,WAAU;iBAAoC,KAAK;QAAU,EAChE,oBAAC;OAAE,WAAU;iBACV,KAAK;QACJ,IACA;MAEN,oBAAC,SACC,WAAW,GACT,6CACA,CAAC,YAAY,YACd,GACD;;OAtBG,KAAK,IAuBL;KAET;IACa;GACT;;AAId,SAAgB,YAAY,KAAiB,UAAkB;AAC7D,KAAI,IAAI,KAAM,QAAO,IAAI,KAAK,IAAI,UAAU,SAAS,CAAC;AAEtD,QAAO,SAAS,IAAI,KAAK,UAAU,KAAK"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/sidebar/tabs/index.tsx"],"sourcesContent":[],"mappings":";;;;UAGiB,UAAA;;AAAjB;;EAOS,GAAA,EAAA,MAAA;EACO,IAAA,CAAA,EAFP,SAEO;EAKP,KAAA,EANA,SAMA;EAAG,WAAA,CAAA,EALI,SAKJ;EAIK;;;EAC4C,IAAA,CAAA,EALpD,GAKoD,CAAA,MAAA,CAAA;EAAU,QAAA,CAAA,EAAA,OAAA;AAgBvE;AACQ,UAlBS,qBAAA,CAkBA;EACb,SAAA,CAAA,EAAA,CAAA,MAAA,EAlBmB,UAkBnB,EAAA,IAAA,EAlBqC,QAAA,CAAS,MAkB9C,EAAA,GAlByD,UAkBzD,GAAA,IAAA;;AACD,iBAHa,cAAA,CAGb,IAAA,EAFK,QAAA,CAAS,IAEd,EAAA;EAAA;AAAA,CAAA,CAAA,EADiC,qBACjC,CAAA,EAAA,UAAA,EAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/sidebar/tabs/index.tsx"],"mappings":";;;;UAGiB,UAAA;;AAAjB;;EAIE,GAAA;EAEA,IAAA,GAAO,SAAA;EACP,KAAA,EAAO,SAAA;EACP,WAAA,GAAc,SAAA;EAKP;;;EAAP,IAAA,GAAO,GAAA;EACP,QAAA;AAAA;AAAA,UAGe,qBAAA;EACf,SAAA,IAAa,MAAA,EAAQ,UAAA,EAAY,IAAA,EAAM,QAAA,CAAS,MAAA,KAAW,UAAA;AAAA;AAAA,iBAgB7C,cAAA,CACd,IAAA,EAAM,QAAA,CAAS,IAAA;EACb;AAAA,IAAgC,qBAAA,GACjC,UAAA"}

package/dist/components/steps.d.ts

@@ -1,17 +1,17 @@
-import * as react_jsx_runtime99 from "react/jsx-runtime";
 import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/steps.d.ts
 declare function Steps({
   children
 }: {
   children: ReactNode;
-}): react_jsx_runtime99.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 declare function Step({
   children
 }: {
   children: ReactNode;
-}): react_jsx_runtime99.JSX.Element;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Step, Steps };
 //# sourceMappingURL=steps.d.ts.map

package/dist/components/steps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"steps.d.ts","names":[],"sources":["../../src/components/steps.tsx"],"sourcesContent":[],"mappings":";;;;iBAEgB,KAAA;;;YAAgC;IAAW,mBAAA,CAAA,GAAA,CAAA;AAA3C,iBAIA,IAAA,CAJK;EAAA;CAAA,EAAA;EAAG,QAAA,EAIuB,SAJvB;CAAwB,CAAA,EAIU,mBAAA,CAAA,GAAA,CAAA,OAJV"}
+{"version":3,"file":"steps.d.ts","names":[],"sources":["../../src/components/steps.tsx"],"mappings":";;;;iBAEgB,KAAA,CAAA;EAAQ;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI3C,IAAA,CAAA;EAAO;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/tabs.d.ts

@@ -1,7 +1,7 @@
 import { Tabs as Tabs$1, TabsContent as TabsContent$1 } from "./ui/tabs.js";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
 import * as React 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
@@ -31,7 +31,7 @@ declare function Tabs({
   defaultIndex,
   defaultValue,
   ...props
-}: TabsProps): react_jsx_runtime102.JSX.Element;
+}: TabsProps): react_jsx_runtime0.JSX.Element;
 interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
   /**
    * Value of tab, detect from index if unspecified.
@@ -41,12 +41,12 @@ interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
 declare function Tab({
   value,
   ...props
-}: TabProps): react_jsx_runtime102.JSX.Element;
+}: TabProps): react_jsx_runtime0.JSX.Element;
 declare function TabsContent({
   value,
   className,
   ...props
-}: ComponentProps<typeof TabsContent$1>): react_jsx_runtime102.JSX.Element;
+}: ComponentProps<typeof TabsContent$1>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };
 //# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/components/tabs.tsx"],"sourcesContent":[],"mappings":";;;;;;;UAkBiB,SAAA,SAAkB,KACjC,sBAAsB;;;;EADP,KAAA,CAAA,EAAA,MAAU,EAAA;EACH;;;;;EAgCX,YAcX,CAAA,EAAA,MAAA;EAAA;;;EAdmB,KAAA,CAAA,EAdX,SAcW;;AAAA,cAAR,QAAQ,EAAA,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,IAAA,CAcnB,eAAA,CAdmB,aAAA,EAAA,KAAA,CAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,KAAA,CAAA,GAAA,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA,CAAA;AAAA,cAiBR,WAjBQ,EAiBG,KAAA,CAAA,yBAjBH,CAiBG,IAjBH,CAiBG,IAjBH,CA+BnB,eAAA,CAdsB,YAAA,EAjBH,KAAA,CAAA,GAiBG,KAAA,CAAA,aAjBH,CAiBG,WAjBH,CAAA,EAAA,KAAA,CAAA,GAiBG,KAAA,CAAA,aAjBH,CAiBG,WAjBH,CAAA,CAAA;AAAA,iBAkCL,IAAA,CAlCK;EAAA,GAAA;EAAA,SAAA;EAAA,KAAA;EAAA,KAAA;EAAA,YAAA;EAAA,YAAA;EAAA,GAAA;AAAA,CAAA,EA0ClB,SA1CkB,CAAA,EA0CT,oBAAA,CAAA,GAAA,CAAA,OA1CS;AAAA,UA+EJ,QAAA,SAAiB,IA/Eb,CA+EkB,cA/ElB,CAAA,OA+EwC,aA/ExC,CAAA,EAAA,OAAA,CAAA,CAAA;EAiBR;;;EAAW,KAAA,CAAA,EAAA,MAAA;;AAAA,iBAqER,GAAA,CArEQ;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAqEiB,QArEjB,CAAA,EAqEyB,oBAAA,CAAA,GAAA,CAAA,OArEzB;AAAA,iBAuFR,WAAA,CAvFQ;EAAA,KAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA2FrB,cA3FqB,CAAA,OA2FC,aA3FD,CAAA,CAAA,EA2FsB,oBAAA,CAAA,GAAA,CAAA,OA3FtB"}
+{"version":3,"file":"tabs.d.ts","names":[],"sources":["../../src/components/tabs.tsx"],"mappings":";;;;;;;UAkBiB,SAAA,SAAkB,IAAA,CACjC,cAAA,QAAsB,MAAA;;;;EAMtB,KAAA;EAPyB;;;;;EAczB,YAAA;EAdqC;;;EAmBrC,KAAA,GAAQ,SAAA;AAAA;AAAA,cAcG,QAAA,EAAQ,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,IAAA,CAcnB,eAAA,CAdmB,aAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA,YAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,cAiBR,WAAA,EAAW,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,IAAA,CActB,eAAA,CAdsB,YAAA,WAAA,KAAA,CAAA,aAAA,CAAA,WAAA,YAAA,KAAA,CAAA,aAAA,CAAA,WAAA;AAAA,iBAiBR,IAAA,CAAA;EACd,GAAA;EACA,SAAA;EACA,KAAA;EACA,KAAA;EACA,YAAA;EACA,YAAA;EAAA,GACG;AAAA,GACF,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAqCK,QAAA,SAAiB,IAAA,CAAK,cAAA,QAAsB,aAAA;EA7FnD;;;EAiGR,KAAA;AAAA;AAAA,iBAGc,GAAA,CAAA;EAAM,KAAA;EAAA,GAAU;AAAA,GAAS,QAAA,GAAQ,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjC,WAAA,CAAA;EACd,KAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,aAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/tabs.js

@@ -1,10 +1,10 @@
 '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 { cn } from "@hanzo/docs-ui/cn";
-import { jsx, jsxs } from "react/jsx-runtime";
 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);

package/dist/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":["Unstyled.TabsList","Unstyled.TabsTrigger","Unstyled.Tabs","Unstyled.TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport * as Unstyled from './ui/tabs';\n\ntype CollectionKey = string | symbol;\n\nexport interface TabsProps extends Omit<\n  ComponentProps<typeof Unstyled.Tabs>,\n  'value' | 'onValueChange'\n> {\n  /**\n   * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.\n   */\n  items?: string[];\n\n  /**\n   * Shortcut for `defaultValue` when `items` is provided.\n   *\n   * @defaultValue 0\n   */\n  defaultIndex?: number;\n\n  /**\n   * Additional label in tabs list when `items` is provided.\n   */\n  label?: ReactNode;\n}\n\nconst TabsContext = createContext<{\n  items?: string[];\n  collection: CollectionKey[];\n} | null>(null);\n\nfunction useTabContext() {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('You must wrap your component in <Tabs>');\n  return ctx;\n}\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof Unstyled.TabsList>,\n  React.ComponentPropsWithoutRef<typeof Unstyled.TabsList>\n>(({ className, ...props }, ref) => (\n  <Unstyled.TabsList\n    ref={ref}\n    {...props}\n    className={(s) =>\n      cn(\n        'flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose',\n        typeof className === 'function' ? className(s) : className,\n      )\n    }\n  />\n));\nTabsList.displayName = 'TabsList';\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof Unstyled.TabsTrigger>,\n  React.ComponentPropsWithoutRef<typeof Unstyled.TabsTrigger>\n>(({ className, ...props }, ref) => (\n  <Unstyled.TabsTrigger\n    ref={ref}\n    {...props}\n    className={(s) =>\n      cn(\n        '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',\n        typeof className === 'function' ? className(s) : className,\n      )\n    }\n  />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nexport function Tabs({\n  ref,\n  className,\n  items,\n  label,\n  defaultIndex = 0,\n  defaultValue = items ? escapeValue(items[defaultIndex]) : undefined,\n  ...props\n}: TabsProps) {\n  const [value, setValue] = useState(defaultValue);\n  const collection = useMemo<CollectionKey[]>(() => [], []);\n\n  return (\n    <Unstyled.Tabs\n      ref={ref}\n      className={(s) =>\n        cn(\n          'flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      value={value}\n      onValueChange={(v: string) => {\n        if (items && !items.some((item) => escapeValue(item) === v)) return;\n        setValue(v);\n      }}\n      {...props}\n    >\n      {items && (\n        <TabsList>\n          {label && <span className=\"text-sm font-medium my-auto me-auto\">{label}</span>}\n          {items.map((item) => (\n            <TabsTrigger key={item} value={escapeValue(item)}>\n              {item}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      )}\n      <TabsContext.Provider value={useMemo(() => ({ items, collection }), [collection, items])}>\n        {props.children}\n      </TabsContext.Provider>\n    </Unstyled.Tabs>\n  );\n}\n\nexport interface TabProps extends Omit<ComponentProps<typeof Unstyled.TabsContent>, 'value'> {\n  /**\n   * Value of tab, detect from index if unspecified.\n   */\n  value?: string;\n}\n\nexport function Tab({ value, ...props }: TabProps) {\n  const { items } = useTabContext();\n  const resolved =\n    value ??\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change\n    items?.at(useCollectionIndex());\n  if (!resolved)\n    throw new Error(\n      'Failed to resolve tab `value`, please pass a `value` prop to the Tab component.',\n    );\n\n  return (\n    <TabsContent value={escapeValue(resolved)} {...props}>\n      {props.children}\n    </TabsContent>\n  );\n}\n\nexport function TabsContent({\n  value,\n  className,\n  ...props\n}: ComponentProps<typeof Unstyled.TabsContent>) {\n  return (\n    <Unstyled.TabsContent\n      value={value}\n      keepMounted\n      className={(s) =>\n        cn(\n          'p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...props}\n    >\n      {props.children}\n    </Unstyled.TabsContent>\n  );\n}\n\n/**\n * Inspired by Headless UI.\n *\n * Return the index of children, this is made possible by registering the order of render from children using React context.\n * This is supposed by work with pre-rendering & pure client-side rendering.\n */\nfunction useCollectionIndex() {\n  const key = useId();\n  const { collection } = useTabContext();\n\n  useEffect(() => {\n    return () => {\n      const idx = collection.indexOf(key);\n      if (idx !== -1) collection.splice(idx, 1);\n    };\n  }, [key, collection]);\n\n  if (!collection.includes(key)) collection.push(key);\n  return collection.indexOf(key);\n}\n\n/**\n * only escape whitespaces in values in simple mode\n */\nfunction escapeValue(v: string): string {\n  return v.toLowerCase().replace(/\\s/, '-');\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,cAAc,cAGV,KAAK;AAEf,SAAS,gBAAgB;CACvB,MAAM,MAAM,WAAW,YAAY;AACnC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yCAAyC;AACnE,QAAO;;AAGT,MAAa,WAAW,MAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA;CACM;CACL,GAAI;CACJ,YAAY,MACV,GACE,4EACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,CACF;AACF,SAAS,cAAc;AAEvB,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC;CACM;CACL,GAAI;CACJ,YAAY,MACV,GACE,kTACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,CACF;AACF,YAAY,cAAc;AAE1B,SAAgB,KAAK,EACnB,KACA,WACA,OACA,OACA,eAAe,GACf,eAAe,QAAQ,YAAY,MAAM,cAAc,GAAG,QAC1D,GAAG,SACS;CACZ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,aAAa,cAA+B,EAAE,EAAE,EAAE,CAAC;AAEzD,QACE,qBAACC;EACM;EACL,YAAY,MACV,GACE,wEACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEI;EACP,gBAAgB,MAAc;AAC5B,OAAI,SAAS,CAAC,MAAM,MAAM,SAAS,YAAY,KAAK,KAAK,EAAE,CAAE;AAC7D,YAAS,EAAE;;EAEb,GAAI;aAEH,SACC,qBAAC,uBACE,SAAS,oBAAC;GAAK,WAAU;aAAuC;IAAa,EAC7E,MAAM,KAAK,SACV,oBAAC;GAAuB,OAAO,YAAY,KAAK;aAC7C;KADe,KAEJ,CACd,IACO,EAEb,oBAAC,YAAY;GAAS,OAAO,eAAe;IAAE;IAAO;IAAY,GAAG,CAAC,YAAY,MAAM,CAAC;aACrF,MAAM;IACc;GACT;;AAWpB,SAAgB,IAAI,EAAE,OAAO,GAAG,SAAmB;CACjD,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,WACJ,SAEA,OAAO,GAAG,oBAAoB,CAAC;AACjC,KAAI,CAAC,SACH,OAAM,IAAI,MACR,kFACD;AAEH,QACE,oBAAC;EAAY,OAAO,YAAY,SAAS;EAAE,GAAI;YAC5C,MAAM;GACK;;AAIlB,SAAgB,YAAY,EAC1B,OACA,WACA,GAAG,SAC2C;AAC9C,QACE,oBAACC;EACQ;EACP;EACA,YAAY,MACV,GACE,qKACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,GAAI;YAEH,MAAM;GACc;;;;;;;;AAU3B,SAAS,qBAAqB;CAC5B,MAAM,MAAM,OAAO;CACnB,MAAM,EAAE,eAAe,eAAe;AAEtC,iBAAgB;AACd,eAAa;GACX,MAAM,MAAM,WAAW,QAAQ,IAAI;AACnC,OAAI,QAAQ,GAAI,YAAW,OAAO,KAAK,EAAE;;IAE1C,CAAC,KAAK,WAAW,CAAC;AAErB,KAAI,CAAC,WAAW,SAAS,IAAI,CAAE,YAAW,KAAK,IAAI;AACnD,QAAO,WAAW,QAAQ,IAAI;;;;;AAMhC,SAAS,YAAY,GAAmB;AACtC,QAAO,EAAE,aAAa,CAAC,QAAQ,MAAM,IAAI"}
+{"version":3,"file":"tabs.js","names":["Unstyled.TabsList","Unstyled.TabsTrigger","Unstyled.Tabs","Unstyled.TabsContent"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport { cn } from '@/utils/cn';\nimport * as Unstyled from './ui/tabs';\n\ntype CollectionKey = string | symbol;\n\nexport interface TabsProps extends Omit<\n  ComponentProps<typeof Unstyled.Tabs>,\n  'value' | 'onValueChange'\n> {\n  /**\n   * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.\n   */\n  items?: string[];\n\n  /**\n   * Shortcut for `defaultValue` when `items` is provided.\n   *\n   * @defaultValue 0\n   */\n  defaultIndex?: number;\n\n  /**\n   * Additional label in tabs list when `items` is provided.\n   */\n  label?: ReactNode;\n}\n\nconst TabsContext = createContext<{\n  items?: string[];\n  collection: CollectionKey[];\n} | null>(null);\n\nfunction useTabContext() {\n  const ctx = useContext(TabsContext);\n  if (!ctx) throw new Error('You must wrap your component in <Tabs>');\n  return ctx;\n}\n\nexport const TabsList = React.forwardRef<\n  React.ComponentRef<typeof Unstyled.TabsList>,\n  React.ComponentPropsWithoutRef<typeof Unstyled.TabsList>\n>(({ className, ...props }, ref) => (\n  <Unstyled.TabsList\n    ref={ref}\n    {...props}\n    className={(s) =>\n      cn(\n        'flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose',\n        typeof className === 'function' ? className(s) : className,\n      )\n    }\n  />\n));\nTabsList.displayName = 'TabsList';\n\nexport const TabsTrigger = React.forwardRef<\n  React.ComponentRef<typeof Unstyled.TabsTrigger>,\n  React.ComponentPropsWithoutRef<typeof Unstyled.TabsTrigger>\n>(({ className, ...props }, ref) => (\n  <Unstyled.TabsTrigger\n    ref={ref}\n    {...props}\n    className={(s) =>\n      cn(\n        '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',\n        typeof className === 'function' ? className(s) : className,\n      )\n    }\n  />\n));\nTabsTrigger.displayName = 'TabsTrigger';\n\nexport function Tabs({\n  ref,\n  className,\n  items,\n  label,\n  defaultIndex = 0,\n  defaultValue = items ? escapeValue(items[defaultIndex]) : undefined,\n  ...props\n}: TabsProps) {\n  const [value, setValue] = useState(defaultValue);\n  const collection = useMemo<CollectionKey[]>(() => [], []);\n\n  return (\n    <Unstyled.Tabs\n      ref={ref}\n      className={(s) =>\n        cn(\n          'flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      value={value}\n      onValueChange={(v: string) => {\n        if (items && !items.some((item) => escapeValue(item) === v)) return;\n        setValue(v);\n      }}\n      {...props}\n    >\n      {items && (\n        <TabsList>\n          {label && <span className=\"text-sm font-medium my-auto me-auto\">{label}</span>}\n          {items.map((item) => (\n            <TabsTrigger key={item} value={escapeValue(item)}>\n              {item}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n      )}\n      <TabsContext.Provider value={useMemo(() => ({ items, collection }), [collection, items])}>\n        {props.children}\n      </TabsContext.Provider>\n    </Unstyled.Tabs>\n  );\n}\n\nexport interface TabProps extends Omit<ComponentProps<typeof Unstyled.TabsContent>, 'value'> {\n  /**\n   * Value of tab, detect from index if unspecified.\n   */\n  value?: string;\n}\n\nexport function Tab({ value, ...props }: TabProps) {\n  const { items } = useTabContext();\n  const resolved =\n    value ??\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change\n    items?.at(useCollectionIndex());\n  if (!resolved)\n    throw new Error(\n      'Failed to resolve tab `value`, please pass a `value` prop to the Tab component.',\n    );\n\n  return (\n    <TabsContent value={escapeValue(resolved)} {...props}>\n      {props.children}\n    </TabsContent>\n  );\n}\n\nexport function TabsContent({\n  value,\n  className,\n  ...props\n}: ComponentProps<typeof Unstyled.TabsContent>) {\n  return (\n    <Unstyled.TabsContent\n      value={value}\n      keepMounted\n      className={(s) =>\n        cn(\n          'p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...props}\n    >\n      {props.children}\n    </Unstyled.TabsContent>\n  );\n}\n\n/**\n * Inspired by Headless UI.\n *\n * Return the index of children, this is made possible by registering the order of render from children using React context.\n * This is supposed by work with pre-rendering & pure client-side rendering.\n */\nfunction useCollectionIndex() {\n  const key = useId();\n  const { collection } = useTabContext();\n\n  useEffect(() => {\n    return () => {\n      const idx = collection.indexOf(key);\n      if (idx !== -1) collection.splice(idx, 1);\n    };\n  }, [key, collection]);\n\n  if (!collection.includes(key)) collection.push(key);\n  return collection.indexOf(key);\n}\n\n/**\n * only escape whitespaces in values in simple mode\n */\nfunction escapeValue(v: string): string {\n  return v.toLowerCase().replace(/\\s/, '-');\n}\n"],"mappings":";;;;;;;;;AAwCA,MAAM,cAAc,cAGV,KAAK;AAEf,SAAS,gBAAgB;CACvB,MAAM,MAAM,WAAW,YAAY;AACnC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yCAAyC;AACnE,QAAO;;AAGT,MAAa,WAAW,MAAM,YAG3B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACA;CACM;CACL,GAAI;CACJ,YAAY,MACV,GACE,4EACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,CACF;AACF,SAAS,cAAc;AAEvB,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAACC;CACM;CACL,GAAI;CACJ,YAAY,MACV,GACE,kTACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,CACF;AACF,YAAY,cAAc;AAE1B,SAAgB,KAAK,EACnB,KACA,WACA,OACA,OACA,eAAe,GACf,eAAe,QAAQ,YAAY,MAAM,cAAc,GAAG,QAC1D,GAAG,SACS;CACZ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,aAAa,cAA+B,EAAE,EAAE,EAAE,CAAC;AAEzD,QACE,qBAACC;EACM;EACL,YAAY,MACV,GACE,wEACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEI;EACP,gBAAgB,MAAc;AAC5B,OAAI,SAAS,CAAC,MAAM,MAAM,SAAS,YAAY,KAAK,KAAK,EAAE,CAAE;AAC7D,YAAS,EAAE;;EAEb,GAAI;aAEH,SACC,qBAAC,uBACE,SAAS,oBAAC;GAAK,WAAU;aAAuC;IAAa,EAC7E,MAAM,KAAK,SACV,oBAAC;GAAuB,OAAO,YAAY,KAAK;aAC7C;KADe,KAEJ,CACd,IACO,EAEb,oBAAC,YAAY;GAAS,OAAO,eAAe;IAAE;IAAO;IAAY,GAAG,CAAC,YAAY,MAAM,CAAC;aACrF,MAAM;IACc;GACT;;AAWpB,SAAgB,IAAI,EAAE,OAAO,GAAG,SAAmB;CACjD,MAAM,EAAE,UAAU,eAAe;CACjC,MAAM,WACJ,SAEA,OAAO,GAAG,oBAAoB,CAAC;AACjC,KAAI,CAAC,SACH,OAAM,IAAI,MACR,kFACD;AAEH,QACE,oBAAC;EAAY,OAAO,YAAY,SAAS;EAAE,GAAI;YAC5C,MAAM;GACK;;AAIlB,SAAgB,YAAY,EAC1B,OACA,WACA,GAAG,SAC2C;AAC9C,QACE,oBAACC;EACQ;EACP;EACA,YAAY,MACV,GACE,qKACA,OAAO,cAAc,aAAa,UAAU,EAAE,GAAG,UAClD;EAEH,GAAI;YAEH,MAAM;GACc;;;;;;;;AAU3B,SAAS,qBAAqB;CAC5B,MAAM,MAAM,OAAO;CACnB,MAAM,EAAE,eAAe,eAAe;AAEtC,iBAAgB;AACd,eAAa;GACX,MAAM,MAAM,WAAW,QAAQ,IAAI;AACnC,OAAI,QAAQ,GAAI,YAAW,OAAO,KAAK,EAAE;;IAE1C,CAAC,KAAK,WAAW,CAAC;AAErB,KAAI,CAAC,WAAW,SAAS,IAAI,CAAE,YAAW,KAAK,IAAI;AACnD,QAAO,WAAW,QAAQ,IAAI;;;;;AAMhC,SAAS,YAAY,GAAmB;AACtC,QAAO,EAAE,aAAa,CAAC,QAAQ,MAAM,IAAI"}

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

@@ -1 +1,12 @@
-export * from "@hanzo/docs-radix-ui/components/toc/clerk";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/toc/clerk.d.ts
+declare function TOCItems({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TOCItems };
+//# sourceMappingURL=clerk.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clerk.d.ts","names":[],"sources":["../../../src/components/toc/clerk.tsx"],"mappings":";;;;iBAQgB,QAAA,CAAA;EAAW,GAAA;EAAK,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/toc/clerk.js

@@ -1,12 +1,112 @@
-import { __reExport } from "../../_virtual/rolldown_runtime.js";
+'use client';
 
-export * from "@hanzo/docs-radix-ui/components/toc/clerk"
+import { useI18n } from "../../contexts/i18n.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { TocThumb, useTOCItems } from "./index.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 
 //#region src/components/toc/clerk.tsx
-var clerk_exports = {};
-import * as import__hanzo_docs_radix_ui_components_toc_clerk from "@hanzo/docs-radix-ui/components/toc/clerk";
-__reExport(clerk_exports, import__hanzo_docs_radix_ui_components_toc_clerk);
+function TOCItems({ ref, className, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const { text } = useI18n();
+	const [svg, setSvg] = useState();
+	useEffect(() => {
+		if (!containerRef.current) return;
+		const container = containerRef.current;
+		function onResize() {
+			if (container.clientHeight === 0) return;
+			let w = 0, h = 0;
+			const d = [];
+			for (let i = 0; i < items.length; i++) {
+				const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
+				if (!element) continue;
+				const styles = getComputedStyle(element);
+				const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+				w = Math.max(offset, w);
+				h = Math.max(h, bottom);
+				d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
+				d.push(`L${offset} ${bottom}`);
+			}
+			setSvg({
+				path: d.join(" "),
+				width: w + 1,
+				height: h
+			});
+		}
+		const observer = new ResizeObserver(onResize);
+		onResize();
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+		};
+	}, [items]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx("div", {
+		className: "absolute start-0 top-0 rtl:-scale-x-100",
+		style: {
+			width: svg.width,
+			height: svg.height,
+			maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`
+		},
+		children: /* @__PURE__ */ jsx(TocThumb, {
+			containerRef,
+			className: "absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height]"
+		})
+	}), /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(containerRef, ref),
+		className: cn("flex flex-col", className),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsx(TOCItem, {
+			item,
+			upper: items[i - 1]?.depth,
+			lower: items[i + 1]?.depth
+		}, item.url))
+	})] });
+}
+function getItemOffset(depth) {
+	if (depth <= 2) return 14;
+	if (depth === 3) return 26;
+	return 36;
+}
+function getLineOffset(depth) {
+	return depth >= 3 ? 10 : 0;
+}
+function TOCItem({ item, upper = item.depth, lower = item.depth }) {
+	const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
+	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
+		href: item.url,
+		style: { paddingInlineStart: getItemOffset(item.depth) },
+		className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+		children: [
+			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				viewBox: "0 0 16 16",
+				className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100",
+				children: /* @__PURE__ */ jsx("line", {
+					x1: upperOffset,
+					y1: "0",
+					x2: offset,
+					y2: "12",
+					className: "stroke-fd-foreground/10",
+					strokeWidth: "1"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("absolute inset-y-0 w-px bg-fd-foreground/10", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
+				style: { insetInlineStart: offset }
+			}),
+			item.title
+		]
+	});
+}
 
 //#endregion
-export { clerk_exports };
+export { TOCItems };
 //# sourceMappingURL=clerk.js.map

package/dist/components/toc/clerk.js.map

@@ -1 +1 @@
-{"version":3,"file":"clerk.js","names":[],"sources":["../../../src/components/toc/clerk.tsx"],"sourcesContent":["export * from '@hanzo/docs-radix-ui/components/toc/clerk';\n"],"mappings":""}
+{"version":3,"file":"clerk.js","names":[],"sources":["../../../src/components/toc/clerk.tsx"],"sourcesContent":["'use client';\nimport * as Primitive from '@hanzo/docs-core/toc';\nimport { type ComponentProps, useEffect, useRef, useState } from 'react';\nimport { cn } from '@/utils/cn';\nimport { TocThumb, useTOCItems } from '.';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { useI18n } from '@/contexts/i18n';\n\nexport function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const items = useTOCItems();\n  const { text } = useI18n();\n\n  const [svg, setSvg] = useState<{\n    path: string;\n    width: number;\n    height: number;\n  }>();\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n    const container = containerRef.current;\n\n    function onResize(): void {\n      if (container.clientHeight === 0) return;\n      let w = 0,\n        h = 0;\n      const d: string[] = [];\n      for (let i = 0; i < items.length; i++) {\n        const element: HTMLElement | null = container.querySelector(\n          `a[href=\"#${items[i].url.slice(1)}\"]`,\n        );\n        if (!element) continue;\n\n        const styles = getComputedStyle(element);\n        const offset = getLineOffset(items[i].depth) + 1,\n          top = element.offsetTop + parseFloat(styles.paddingTop),\n          bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);\n\n        w = Math.max(offset, w);\n        h = Math.max(h, bottom);\n\n        d.push(`${i === 0 ? 'M' : 'L'}${offset} ${top}`);\n        d.push(`L${offset} ${bottom}`);\n      }\n\n      setSvg({\n        path: d.join(' '),\n        width: w + 1,\n        height: h,\n      });\n    }\n\n    const observer = new ResizeObserver(onResize);\n    onResize();\n\n    observer.observe(container);\n    return () => {\n      observer.disconnect();\n    };\n  }, [items]);\n\n  if (items.length === 0)\n    return (\n      <div className=\"rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground\">\n        {text.tocNoHeadings}\n      </div>\n    );\n\n  return (\n    <>\n      {svg && (\n        <div\n          className=\"absolute start-0 top-0 rtl:-scale-x-100\"\n          style={{\n            width: svg.width,\n            height: svg.height,\n            maskImage: `url(\"data:image/svg+xml,${\n              // Inline SVG\n              encodeURIComponent(\n                `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ${svg.width} ${svg.height}\"><path d=\"${svg.path}\" stroke=\"black\" stroke-width=\"1\" fill=\"none\" /></svg>`,\n              )\n            }\")`,\n          }}\n        >\n          <TocThumb\n            containerRef={containerRef}\n            className=\"absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height]\"\n          />\n        </div>\n      )}\n      <div ref={mergeRefs(containerRef, ref)} className={cn('flex flex-col', className)} {...props}>\n        {items.map((item, i) => (\n          <TOCItem\n            key={item.url}\n            item={item}\n            upper={items[i - 1]?.depth}\n            lower={items[i + 1]?.depth}\n          />\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction getItemOffset(depth: number): number {\n  if (depth <= 2) return 14;\n  if (depth === 3) return 26;\n  return 36;\n}\n\nfunction getLineOffset(depth: number): number {\n  return depth >= 3 ? 10 : 0;\n}\n\nfunction TOCItem({\n  item,\n  upper = item.depth,\n  lower = item.depth,\n}: {\n  item: Primitive.TOCItemType;\n  upper?: number;\n  lower?: number;\n}) {\n  const offset = getLineOffset(item.depth),\n    upperOffset = getLineOffset(upper),\n    lowerOffset = getLineOffset(lower);\n\n  return (\n    <Primitive.TOCItem\n      href={item.url}\n      style={{\n        paddingInlineStart: getItemOffset(item.depth),\n      }}\n      className=\"prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary\"\n    >\n      {offset !== upperOffset && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 16 16\"\n          className=\"absolute -top-1.5 start-0 size-4 rtl:-scale-x-100\"\n        >\n          <line\n            x1={upperOffset}\n            y1=\"0\"\n            x2={offset}\n            y2=\"12\"\n            className=\"stroke-fd-foreground/10\"\n            strokeWidth=\"1\"\n          />\n        </svg>\n      )}\n      <div\n        className={cn(\n          'absolute inset-y-0 w-px bg-fd-foreground/10',\n          offset !== upperOffset && 'top-1.5',\n          offset !== lowerOffset && 'bottom-1.5',\n        )}\n        style={{\n          insetInlineStart: offset,\n        }}\n      />\n      {item.title}\n    </Primitive.TOCItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,SAAS,EAAE,KAAK,WAAW,GAAG,SAAgC;CAC5E,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,QAAQ,aAAa;CAC3B,MAAM,EAAE,SAAS,SAAS;CAE1B,MAAM,CAAC,KAAK,UAAU,UAIlB;AAEJ,iBAAgB;AACd,MAAI,CAAC,aAAa,QAAS;EAC3B,MAAM,YAAY,aAAa;EAE/B,SAAS,WAAiB;AACxB,OAAI,UAAU,iBAAiB,EAAG;GAClC,IAAI,IAAI,GACN,IAAI;GACN,MAAM,IAAc,EAAE;AACtB,QAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;IACrC,MAAM,UAA8B,UAAU,cAC5C,YAAY,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC,IACnC;AACD,QAAI,CAAC,QAAS;IAEd,MAAM,SAAS,iBAAiB,QAAQ;IACxC,MAAM,SAAS,cAAc,MAAM,GAAG,MAAM,GAAG,GAC7C,MAAM,QAAQ,YAAY,WAAW,OAAO,WAAW,EACvD,SAAS,QAAQ,YAAY,QAAQ,eAAe,WAAW,OAAO,cAAc;AAEtF,QAAI,KAAK,IAAI,QAAQ,EAAE;AACvB,QAAI,KAAK,IAAI,GAAG,OAAO;AAEvB,MAAE,KAAK,GAAG,MAAM,IAAI,MAAM,MAAM,OAAO,GAAG,MAAM;AAChD,MAAE,KAAK,IAAI,OAAO,GAAG,SAAS;;AAGhC,UAAO;IACL,MAAM,EAAE,KAAK,IAAI;IACjB,OAAO,IAAI;IACX,QAAQ;IACT,CAAC;;EAGJ,MAAM,WAAW,IAAI,eAAe,SAAS;AAC7C,YAAU;AAEV,WAAS,QAAQ,UAAU;AAC3B,eAAa;AACX,YAAS,YAAY;;IAEtB,CAAC,MAAM,CAAC;AAEX,KAAI,MAAM,WAAW,EACnB,QACE,oBAAC;EAAI,WAAU;YACZ,KAAK;GACF;AAGV,QACE,8CACG,OACC,oBAAC;EACC,WAAU;EACV,OAAO;GACL,OAAO,IAAI;GACX,QAAQ,IAAI;GACZ,WAAW,2BAET,mBACE,wDAAwD,IAAI,MAAM,GAAG,IAAI,OAAO,aAAa,IAAI,KAAK,wDACvG,CACF;GACF;YAED,oBAAC;GACe;GACd,WAAU;IACV;GACE,EAER,oBAAC;EAAI,KAAK,UAAU,cAAc,IAAI;EAAE,WAAW,GAAG,iBAAiB,UAAU;EAAE,GAAI;YACpF,MAAM,KAAK,MAAM,MAChB,oBAAC;GAEO;GACN,OAAO,MAAM,IAAI,IAAI;GACrB,OAAO,MAAM,IAAI,IAAI;KAHhB,KAAK,IAIV,CACF;GACE,IACL;;AAIP,SAAS,cAAc,OAAuB;AAC5C,KAAI,SAAS,EAAG,QAAO;AACvB,KAAI,UAAU,EAAG,QAAO;AACxB,QAAO;;AAGT,SAAS,cAAc,OAAuB;AAC5C,QAAO,SAAS,IAAI,KAAK;;AAG3B,SAAS,QAAQ,EACf,MACA,QAAQ,KAAK,OACb,QAAQ,KAAK,SAKZ;CACD,MAAM,SAAS,cAAc,KAAK,MAAM,EACtC,cAAc,cAAc,MAAM,EAClC,cAAc,cAAc,MAAM;AAEpC,QACE,qBAAC,UAAU;EACT,MAAM,KAAK;EACX,OAAO,EACL,oBAAoB,cAAc,KAAK,MAAM,EAC9C;EACD,WAAU;;GAET,WAAW,eACV,oBAAC;IACC,OAAM;IACN,SAAQ;IACR,WAAU;cAEV,oBAAC;KACC,IAAI;KACJ,IAAG;KACH,IAAI;KACJ,IAAG;KACH,WAAU;KACV,aAAY;MACZ;KACE;GAER,oBAAC;IACC,WAAW,GACT,+CACA,WAAW,eAAe,WAC1B,WAAW,eAAe,aAC3B;IACD,OAAO,EACL,kBAAkB,QACnB;KACD;GACD,KAAK;;GACY"}

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

@@ -1 +1,12 @@
-export * from "@hanzo/docs-radix-ui/components/toc/default";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/toc/default.d.ts
+declare function TOCItems({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TOCItems };
+//# sourceMappingURL=default.d.ts.map

package/dist/components/toc/default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.d.ts","names":[],"sources":["../../../src/components/toc/default.tsx"],"mappings":";;;;iBAQgB,QAAA,CAAA;EAAW,GAAA;EAAK,SAAA;EAAA,GAAc;AAAA,GAAS,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/toc/default.js

@@ -1,12 +1,40 @@
-import { __reExport } from "../../_virtual/rolldown_runtime.js";
+'use client';
 
-export * from "@hanzo/docs-radix-ui/components/toc/default"
+import { useI18n } from "../../contexts/i18n.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { TocThumb, useTOCItems } from "./index.js";
+import { useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 
 //#region src/components/toc/default.tsx
-var default_exports = {};
-import * as import__hanzo_docs_radix_ui_components_toc_default from "@hanzo/docs-radix-ui/components/toc/default";
-__reExport(default_exports, import__hanzo_docs_radix_ui_components_toc_default);
+function TOCItems({ ref, className, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const { text } = useI18n();
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TocThumb, {
+		containerRef,
+		className: "absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear"
+	}), /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(ref, containerRef),
+		className: cn("flex flex-col border-s border-fd-foreground/10", className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))
+	})] });
+}
+function TOCItem({ item }) {
+	return /* @__PURE__ */ jsx(Primitive.TOCItem, {
+		href: item.url,
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
+		children: item.title
+	});
+}
 
 //#endregion
-export { default_exports };
+export { TOCItems };
 //# sourceMappingURL=default.js.map

package/dist/components/toc/default.js.map

@@ -1 +1 @@
-{"version":3,"file":"default.js","names":[],"sources":["../../../src/components/toc/default.tsx"],"sourcesContent":["export * from '@hanzo/docs-radix-ui/components/toc/default';\n"],"mappings":""}
+{"version":3,"file":"default.js","names":[],"sources":["../../../src/components/toc/default.tsx"],"sourcesContent":["'use client';\nimport { useI18n } from '@/contexts/i18n';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useRef } from 'react';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { TocThumb, useTOCItems } from '.';\nimport * as Primitive from '@hanzo/docs-core/toc';\n\nexport function TOCItems({ ref, className, ...props }: ComponentProps<'div'>) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const items = useTOCItems();\n  const { text } = useI18n();\n\n  if (items.length === 0)\n    return (\n      <div className=\"rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground\">\n        {text.tocNoHeadings}\n      </div>\n    );\n\n  return (\n    <>\n      <TocThumb\n        containerRef={containerRef}\n        className=\"absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear\"\n      />\n      <div\n        ref={mergeRefs(ref, containerRef)}\n        className={cn('flex flex-col border-s border-fd-foreground/10', className)}\n        {...props}\n      >\n        {items.map((item) => (\n          <TOCItem key={item.url} item={item} />\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction TOCItem({ item }: { item: Primitive.TOCItemType }) {\n  return (\n    <Primitive.TOCItem\n      href={item.url}\n      className={cn(\n        'prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary',\n        item.depth <= 2 && 'ps-3',\n        item.depth === 3 && 'ps-6',\n        item.depth >= 4 && 'ps-8',\n      )}\n    >\n      {item.title}\n    </Primitive.TOCItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,SAAS,EAAE,KAAK,WAAW,GAAG,SAAgC;CAC5E,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,QAAQ,aAAa;CAC3B,MAAM,EAAE,SAAS,SAAS;AAE1B,KAAI,MAAM,WAAW,EACnB,QACE,oBAAC;EAAI,WAAU;YACZ,KAAK;GACF;AAGV,QACE,8CACE,oBAAC;EACe;EACd,WAAU;GACV,EACF,oBAAC;EACC,KAAK,UAAU,KAAK,aAAa;EACjC,WAAW,GAAG,kDAAkD,UAAU;EAC1E,GAAI;YAEH,MAAM,KAAK,SACV,oBAAC,WAA6B,QAAhB,KAAK,IAAmB,CACtC;GACE,IACL;;AAIP,SAAS,QAAQ,EAAE,QAAyC;AAC1D,QACE,oBAAC,UAAU;EACT,MAAM,KAAK;EACX,WAAW,GACT,yIACA,KAAK,SAAS,KAAK,QACnB,KAAK,UAAU,KAAK,QACpB,KAAK,SAAS,KAAK,OACpB;YAEA,KAAK;GACY"}

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

@@ -1 +1,26 @@
-export * from "@hanzo/docs-radix-ui/components/toc/index";
+import { ComponentProps, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
+
+//#region src/components/toc/index.d.ts
+declare function useTOCItems(): Primitive.TOCItemType[];
+declare function TOCProvider({
+  toc,
+  children,
+  ...props
+}: ComponentProps<typeof Primitive.AnchorProvider>): react_jsx_runtime0.JSX.Element;
+declare function TOCScrollArea({
+  ref,
+  className,
+  ...props
+}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+interface RefProps {
+  containerRef: RefObject<HTMLElement | null>;
+}
+declare function TocThumb({
+  containerRef,
+  ...props
+}: ComponentProps<'div'> & RefProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TOCProvider, TOCScrollArea, TocThumb, useTOCItems };
+//# sourceMappingURL=index.d.ts.map