@hanzo/docs-base-ui 16.4.2

package/dist/components/sidebar/base.js

@@ -0,0 +1,284 @@
+'use client';
+
+import { __exportAll } from "../../_virtual/rolldown_runtime.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 { usePathname } from "@hanzo/docs-core/framework";
+import { cn } from "@hanzo/docs-ui/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+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,
+	SidebarContent: () => SidebarContent,
+	SidebarDrawerContent: () => SidebarDrawerContent,
+	SidebarDrawerOverlay: () => SidebarDrawerOverlay,
+	SidebarFolder: () => SidebarFolder,
+	SidebarFolderContent: () => SidebarFolderContent,
+	SidebarFolderLink: () => SidebarFolderLink,
+	SidebarFolderTrigger: () => SidebarFolderTrigger,
+	SidebarItem: () => SidebarItem,
+	SidebarProvider: () => SidebarProvider,
+	SidebarSeparator: () => SidebarSeparator,
+	SidebarTrigger: () => SidebarTrigger,
+	SidebarViewport: () => SidebarViewport,
+	useFolder: () => useFolder,
+	useFolderDepth: () => useFolderDepth,
+	useSidebar: () => useSidebar
+});
+const SidebarContext = createContext(null);
+const FolderContext = createContext(null);
+function SidebarProvider({ defaultOpenLevel = 0, prefetch = true, children }) {
+	const closeOnRedirect = useRef(true);
+	const [open, setOpen] = useState(false);
+	const [collapsed, setCollapsed] = useState(false);
+	const pathname = usePathname();
+	const mode = useMediaQuery("(width < 768px)") ? "drawer" : "full";
+	useOnChange(pathname, () => {
+		if (closeOnRedirect.current) setOpen(false);
+		closeOnRedirect.current = true;
+	});
+	return /* @__PURE__ */ jsx(SidebarContext, {
+		value: useMemo(() => ({
+			open,
+			setOpen,
+			collapsed,
+			setCollapsed,
+			closeOnRedirect,
+			defaultOpenLevel,
+			prefetch,
+			mode
+		}), [
+			open,
+			collapsed,
+			defaultOpenLevel,
+			prefetch,
+			mode
+		]),
+		children
+	});
+}
+function useSidebar() {
+	const ctx = use(SidebarContext);
+	if (!ctx) throw new Error("Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.");
+	return ctx;
+}
+function useFolder() {
+	return use(FolderContext);
+}
+function useFolderDepth() {
+	return use(FolderContext)?.depth ?? 0;
+}
+function SidebarContent({ children }) {
+	const { collapsed, mode } = useSidebar();
+	const [hover, setHover] = useState(false);
+	const ref = useRef(null);
+	const timerRef = useRef(0);
+	useOnChange(collapsed, () => {
+		if (collapsed) setHover(false);
+	});
+	if (mode !== "full") return;
+	function shouldIgnoreHover(e) {
+		const element = ref.current;
+		if (!element) return true;
+		return !collapsed || e.pointerType === "touch" || element.getAnimations().length > 0;
+	}
+	return children({
+		ref,
+		collapsed,
+		hovered: hover,
+		onPointerEnter(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			setHover(true);
+		},
+		onPointerLeave(e) {
+			if (shouldIgnoreHover(e)) return;
+			window.clearTimeout(timerRef.current);
+			timerRef.current = window.setTimeout(() => setHover(false), Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500);
+		}
+	});
+}
+function SidebarDrawerOverlay(props) {
+	const { open, setOpen, mode } = useSidebar();
+	const [hidden, setHidden] = useState(!open);
+	if (open && hidden) setHidden(false);
+	if (mode !== "drawer" || hidden) return;
+	return /* @__PURE__ */ jsx("div", {
+		"data-state": open ? "open" : "closed",
+		onClick: () => setOpen(false),
+		onAnimationEnd: () => {
+			if (!open) ReactDOM.flushSync(() => setHidden(true));
+		},
+		...props
+	});
+}
+function SidebarDrawerContent({ className, children, ...props }) {
+	const { open, mode } = useSidebar();
+	const [hidden, setHidden] = useState(!open);
+	if (open && hidden) setHidden(false);
+	if (mode !== "drawer") return;
+	return /* @__PURE__ */ jsx("aside", {
+		id: "nd-sidebar-mobile",
+		"data-state": open ? "open" : "closed",
+		className: cn(hidden && "invisible", className),
+		onAnimationEnd: () => {
+			if (!open) ReactDOM.flushSync(() => setHidden(true));
+		},
+		...props,
+		children
+	});
+}
+function SidebarViewport({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		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)" },
+			children: props.children
+		})
+	});
+}
+function SidebarSeparator(props) {
+	const depth = useFolderDepth();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cn("inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0", depth === 0 && "first:mt-0", props.className),
+		children: props.children
+	});
+}
+function SidebarItem({ icon, children, ...props }) {
+	const pathname = usePathname();
+	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,
+		"data-active": active,
+		prefetch,
+		...props,
+		children: [icon ?? (props.external ? /* @__PURE__ */ jsx(ExternalLink, {}) : null), children]
+	});
+}
+function SidebarFolder({ defaultOpen: defaultOpenProp, collapsible = true, active = false, children, ...props }) {
+	const { defaultOpenLevel } = useSidebar();
+	const depth = useFolderDepth() + 1;
+	const defaultOpen = collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);
+	const [open, setOpen] = useState(defaultOpen);
+	useOnChange(defaultOpen, (v) => {
+		if (v) setOpen(v);
+	});
+	return /* @__PURE__ */ jsx(Collapsible, {
+		open,
+		onOpenChange: setOpen,
+		disabled: !collapsible,
+		...props,
+		children: /* @__PURE__ */ jsx(FolderContext, {
+			value: useMemo(() => ({
+				open,
+				setOpen,
+				depth,
+				collapsible
+			}), [
+				collapsible,
+				depth,
+				open
+			]),
+			children
+		})
+	});
+}
+function SidebarFolderTrigger({ children, ...props }) {
+	const { open, collapsible } = use(FolderContext);
+	if (collapsible) return /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90")
+		})]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		children
+	});
+}
+function SidebarFolderLink({ children, ...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,
+		"data-active": active,
+		onClick: (e) => {
+			if (!collapsible) return;
+			if (e.target instanceof Element && e.target.matches("[data-icon], [data-icon] *")) {
+				setOpen(!open);
+				e.preventDefault();
+			} else setOpen(active ? !open : true);
+		},
+		prefetch,
+		...props,
+		children: [children, collapsible && /* @__PURE__ */ jsx(ChevronDown, {
+			"data-icon": true,
+			className: cn("ms-auto transition-transform", !open && "-rotate-90")
+		})]
+	});
+}
+function SidebarFolderContent(props) {
+	return /* @__PURE__ */ jsx(CollapsibleContent, {
+		...props,
+		children: props.children
+	});
+}
+function SidebarTrigger({ children, ...props }) {
+	const { setOpen } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": "Open Sidebar",
+		onClick: () => setOpen((prev) => !prev),
+		...props,
+		children
+	});
+}
+function SidebarCollapseTrigger(props) {
+	const { collapsed, setCollapsed } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": "Collapse Sidebar",
+		"data-collapsed": collapsed,
+		onClick: () => {
+			setCollapsed((prev) => !prev);
+		},
+		...props,
+		children: props.children
+	});
+}
+function useAutoScroll(active, ref) {
+	const { mode } = useSidebar();
+	useEffect(() => {
+		if (active && ref.current) scrollIntoView(ref.current, {
+			boundary: document.getElementById(mode === "drawer" ? "nd-sidebar-mobile" : "nd-sidebar"),
+			scrollMode: "if-needed"
+		});
+	}, [
+		active,
+		mode,
+		ref
+	]);
+}
+
+//#endregion
+export { SidebarCollapseTrigger, SidebarContent, SidebarDrawerContent, SidebarDrawerOverlay, SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, SidebarProvider, SidebarSeparator, SidebarTrigger, SidebarViewport, base_exports, useFolder, useFolderDepth, useSidebar };
+//# sourceMappingURL=base.js.map

package/dist/components/sidebar/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":["mode: Mode"],"sources":["../../../src/components/sidebar/base.tsx"],"sourcesContent":["'use client';\nimport { ChevronDown, ExternalLink } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  type PointerEvent,\n  type ReactNode,\n  type RefObject,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Link, { type LinkProps } from '@hanzo/docs-core/link';\nimport { useOnChange } from '@hanzo/docs-core/utils/use-on-change';\nimport { cn } from '@hanzo/docs-ui/cn';\nimport { ScrollArea, type ScrollAreaProps, ScrollViewport } from '@/components/ui/scroll-area';\nimport { isActive } from '@hanzo/docs-ui/urls';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n} from '@/components/ui/collapsible';\nimport { useMediaQuery } from '@hanzo/docs-core/utils/use-media-query';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { usePathname } from '@hanzo/docs-core/framework';\nimport ReactDOM from 'react-dom';\n\ninterface SidebarContext {\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  collapsed: boolean;\n  setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;\n\n  /**\n   * When set to false, don't close the sidebar when navigate to another page\n   */\n  closeOnRedirect: RefObject<boolean>;\n  defaultOpenLevel: number;\n  prefetch: boolean;\n  mode: Mode;\n}\n\nexport interface SidebarProviderProps {\n  /**\n   * Open folders by default if their level is lower or equal to a specific level\n   * (Starting from 1)\n   *\n   * @defaultValue 0\n   */\n  defaultOpenLevel?: number;\n\n  /**\n   * Prefetch links\n   *\n   * @defaultValue true\n   */\n  prefetch?: boolean;\n\n  children?: ReactNode;\n}\n\ntype Mode = 'drawer' | 'full';\n\nconst SidebarContext = createContext<SidebarContext | null>(null);\n\nconst FolderContext = createContext<{\n  open: boolean;\n  setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n  depth: number;\n  collapsible: boolean;\n} | null>(null);\n\nexport function SidebarProvider({\n  defaultOpenLevel = 0,\n  prefetch = true,\n  children,\n}: SidebarProviderProps) {\n  const closeOnRedirect = useRef(true);\n  const [open, setOpen] = useState(false);\n  const [collapsed, setCollapsed] = useState(false);\n  const pathname = usePathname();\n  const mode: Mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';\n\n  useOnChange(pathname, () => {\n    if (closeOnRedirect.current) {\n      setOpen(false);\n    }\n    closeOnRedirect.current = true;\n  });\n\n  return (\n    <SidebarContext\n      value={useMemo(\n        () => ({\n          open,\n          setOpen,\n          collapsed,\n          setCollapsed,\n          closeOnRedirect,\n          defaultOpenLevel,\n          prefetch,\n          mode,\n        }),\n        [open, collapsed, defaultOpenLevel, prefetch, mode],\n      )}\n    >\n      {children}\n    </SidebarContext>\n  );\n}\n\nexport function useSidebar(): SidebarContext {\n  const ctx = use(SidebarContext);\n  if (!ctx)\n    throw new Error(\n      'Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.',\n    );\n\n  return ctx;\n}\n\nexport function useFolder() {\n  return use(FolderContext);\n}\n\nexport function useFolderDepth() {\n  return use(FolderContext)?.depth ?? 0;\n}\n\nexport function SidebarContent({\n  children,\n}: {\n  children: (state: {\n    ref: RefObject<HTMLElement | null>;\n    collapsed: boolean;\n    hovered: boolean;\n    onPointerEnter: (event: PointerEvent) => void;\n    onPointerLeave: (event: PointerEvent) => void;\n  }) => ReactNode;\n}) {\n  const { collapsed, mode } = useSidebar();\n  const [hover, setHover] = useState(false);\n  const ref = useRef<HTMLElement>(null);\n  const timerRef = useRef(0);\n\n  useOnChange(collapsed, () => {\n    if (collapsed) setHover(false);\n  });\n\n  if (mode !== 'full') return;\n\n  function shouldIgnoreHover(e: PointerEvent): boolean {\n    const element = ref.current;\n    if (!element) return true;\n\n    return !collapsed || e.pointerType === 'touch' || element.getAnimations().length > 0;\n  }\n\n  return children({\n    ref,\n    collapsed,\n    hovered: hover,\n    onPointerEnter(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n      setHover(true);\n    },\n    onPointerLeave(e) {\n      if (shouldIgnoreHover(e)) return;\n      window.clearTimeout(timerRef.current);\n\n      timerRef.current = window.setTimeout(\n        () => setHover(false),\n        // if mouse is leaving the viewport, add a close delay\n        Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500,\n      );\n    },\n  });\n}\n\nexport function SidebarDrawerOverlay(props: ComponentProps<'div'>) {\n  const { open, setOpen, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer' || hidden) return;\n  return (\n    <div\n      data-state={open ? 'open' : 'closed'}\n      onClick={() => setOpen(false)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    />\n  );\n}\n\nexport function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>) {\n  const { open, mode } = useSidebar();\n  const [hidden, setHidden] = useState(!open);\n\n  if (open && hidden) setHidden(false);\n  if (mode !== 'drawer') return;\n  return (\n    <aside\n      id=\"nd-sidebar-mobile\"\n      data-state={open ? 'open' : 'closed'}\n      className={cn(hidden && 'invisible', className)}\n      onAnimationEnd={() => {\n        if (!open) ReactDOM.flushSync(() => setHidden(true));\n      }}\n      {...props}\n    >\n      {children}\n    </aside>\n  );\n}\n\nexport function SidebarViewport({ className, ...props }: ScrollAreaProps) {\n  return (\n    <ScrollArea\n      className={(s) =>\n        cn('min-h-0 flex-1', typeof className === 'function' ? className(s) : className)\n      }\n      {...props}\n    >\n      <ScrollViewport\n        className=\"p-4 overscroll-contain\"\n        style={\n          {\n            maskImage:\n              'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',\n          } as object\n        }\n      >\n        {props.children}\n      </ScrollViewport>\n    </ScrollArea>\n  );\n}\n\nexport function SidebarSeparator(props: ComponentProps<'p'>) {\n  const depth = useFolderDepth();\n  return (\n    <p\n      {...props}\n      className={cn(\n        'inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0',\n        depth === 0 && 'first:mt-0',\n        props.className,\n      )}\n    >\n      {props.children}\n    </p>\n  );\n}\n\nexport function SidebarItem({\n  icon,\n  children,\n  ...props\n}: LinkProps & {\n  icon?: ReactNode;\n}) {\n  const pathname = usePathname();\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { prefetch } = useSidebar();\n  const active = props.href !== undefined && isActive(props.href, pathname, false);\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link ref={ref} data-active={active} prefetch={prefetch} {...props}>\n      {icon ?? (props.external ? <ExternalLink /> : null)}\n      {children}\n    </Link>\n  );\n}\n\nexport function SidebarFolder({\n  defaultOpen: defaultOpenProp,\n  collapsible = true,\n  active = false,\n  children,\n  ...props\n}: ComponentProps<'div'> & {\n  active?: boolean;\n  defaultOpen?: boolean;\n  collapsible?: boolean;\n}) {\n  const { defaultOpenLevel } = useSidebar();\n  const depth = useFolderDepth() + 1;\n  const defaultOpen =\n    collapsible === false || active || (defaultOpenProp ?? defaultOpenLevel >= depth);\n  const [open, setOpen] = useState(defaultOpen);\n\n  useOnChange(defaultOpen, (v) => {\n    if (v) setOpen(v);\n  });\n\n  return (\n    <Collapsible open={open} onOpenChange={setOpen} disabled={!collapsible} {...props}>\n      <FolderContext\n        value={useMemo(() => ({ open, setOpen, depth, collapsible }), [collapsible, depth, open])}\n      >\n        {children}\n      </FolderContext>\n    </Collapsible>\n  );\n}\n\nexport function SidebarFolderTrigger({ children, ...props }: CollapsibleTriggerProps) {\n  const { open, collapsible } = use(FolderContext)!;\n\n  if (collapsible) {\n    return (\n      <CollapsibleTrigger {...props}>\n        {children}\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      </CollapsibleTrigger>\n    );\n  }\n\n  return <div {...(props as ComponentProps<'div'>)}>{children}</div>;\n}\n\nexport function SidebarFolderLink({ children, ...props }: LinkProps) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { open, setOpen, collapsible } = use(FolderContext)!;\n  const { prefetch } = useSidebar();\n  const pathname = usePathname();\n  const active = props.href !== undefined && isActive(props.href, pathname, false);\n\n  useAutoScroll(active, ref);\n\n  return (\n    <Link\n      ref={ref}\n      data-active={active}\n      onClick={(e) => {\n        if (!collapsible) return;\n\n        if (e.target instanceof Element && e.target.matches('[data-icon], [data-icon] *')) {\n          setOpen(!open);\n          e.preventDefault();\n        } else {\n          setOpen(active ? !open : true);\n        }\n      }}\n      prefetch={prefetch}\n      {...props}\n    >\n      {children}\n      {collapsible && (\n        <ChevronDown\n          data-icon\n          className={cn('ms-auto transition-transform', !open && '-rotate-90')}\n        />\n      )}\n    </Link>\n  );\n}\n\nexport function SidebarFolderContent(props: CollapsibleContentProps) {\n  return <CollapsibleContent {...props}>{props.children}</CollapsibleContent>;\n}\n\nexport function SidebarTrigger({ children, ...props }: ComponentProps<'button'>) {\n  const { setOpen } = useSidebar();\n\n  return (\n    <button aria-label=\"Open Sidebar\" onClick={() => setOpen((prev) => !prev)} {...props}>\n      {children}\n    </button>\n  );\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<'button'>) {\n  const { collapsed, setCollapsed } = useSidebar();\n\n  return (\n    <button\n      type=\"button\"\n      aria-label=\"Collapse Sidebar\"\n      data-collapsed={collapsed}\n      onClick={() => {\n        setCollapsed((prev) => !prev);\n      }}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nfunction useAutoScroll(active: boolean, ref: RefObject<HTMLAnchorElement | null>) {\n  const { mode } = useSidebar();\n\n  useEffect(() => {\n    if (active && ref.current) {\n      scrollIntoView(ref.current, {\n        boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),\n        scrollMode: 'if-needed',\n      });\n    }\n  }, [active, mode, ref]);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { base_d_exports } from "./base.js";
+import * as react_jsx_runtime58 from "react/jsx-runtime";
+import { HTMLAttributes } from "react";
+import { LinkItemType } from "@hanzo/docs-ui/link-item";
+
+//#region src/components/sidebar/link-item.d.ts
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createLinkItemRenderer({
+  SidebarFolder,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarFolderTrigger,
+  SidebarItem
+}: InternalComponents): ({
+  item,
+  ...props
+}: HTMLAttributes<HTMLElement> & {
+  item: Exclude<LinkItemType, {
+    type: "icon";
+  }>;
+}) => react_jsx_runtime58.JSX.Element;
+//#endregion
+export { createLinkItemRenderer };
+//# sourceMappingURL=link-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"sourcesContent":[],"mappings":";;;;;;KAIK,kBAAA,GAAqB,YACjB;iBAQO,sBAAA;;;;;;GAMb;;;GAOE,eAAe;QACV,QAAQ;IAvBb,IAAA,EAAA,MAAA;EASW,CAAA,CAAA;CACd,EAAA,GAcC,mBAAA,CAAA,GAAA,CAAA,OAdD"}

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

@@ -0,0 +1,33 @@
+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 }) {
+		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
+			...props,
+			children: item.children
+		});
+		if (item.type === "menu") return /* @__PURE__ */ jsxs(SidebarFolder, {
+			...props,
+			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+				href: item.url,
+				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)) })]
+		});
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: item.url,
+			icon: item.icon,
+			external: item.external,
+			...props,
+			children: item.text
+		});
+	};
+}
+
+//#endregion
+export { createLinkItemRenderer };
+//# sourceMappingURL=link-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-item.js","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport type * as Base from './base';\nimport type { LinkItemType } from '@hanzo/docs-ui/link-item';\n\ntype InternalComponents = Pick<\n  typeof Base,\n  | 'SidebarFolder'\n  | 'SidebarFolderLink'\n  | 'SidebarFolderContent'\n  | 'SidebarFolderTrigger'\n  | 'SidebarItem'\n>;\n\nexport function createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n}: InternalComponents) {\n  /**\n   * Render sidebar items from page tree\n   */\n  return function SidebarLinkItem({\n    item,\n    ...props\n  }: HTMLAttributes<HTMLElement> & {\n    item: Exclude<LinkItemType, { type: 'icon' }>;\n  }) {\n    if (item.type === 'custom') return <div {...props}>{item.children}</div>;\n\n    if (item.type === 'menu')\n      return (\n        <SidebarFolder {...props}>\n          {item.url ? (\n            <SidebarFolderLink href={item.url} external={item.external}>\n              {item.icon}\n              {item.text}\n            </SidebarFolderLink>\n          ) : (\n            <SidebarFolderTrigger>\n              {item.icon}\n              {item.text}\n            </SidebarFolderTrigger>\n          )}\n          <SidebarFolderContent>\n            {item.items.map((child, i) => (\n              <SidebarLinkItem key={i} item={child} />\n            ))}\n          </SidebarFolderContent>\n        </SidebarFolder>\n      );\n\n    return (\n      <SidebarItem href={item.url} icon={item.icon} external={item.external} {...props}>\n        {item.text}\n      </SidebarItem>\n    );\n  };\n}\n"],"mappings":";;;AAaA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,eACqB;;;;AAIrB,QAAO,SAAS,gBAAgB,EAC9B,MACA,GAAG,SAGF;AACD,MAAI,KAAK,SAAS,SAAU,QAAO,oBAAC;GAAI,GAAI;aAAQ,KAAK;IAAe;AAExE,MAAI,KAAK,SAAS,OAChB,QACE,qBAAC;GAAc,GAAI;cAChB,KAAK,MACJ,qBAAC;IAAkB,MAAM,KAAK;IAAK,UAAU,KAAK;eAC/C,KAAK,MACL,KAAK;KACY,GAEpB,qBAAC,mCACE,KAAK,MACL,KAAK,QACe,EAEzB,oBAAC,kCACE,KAAK,MAAM,KAAK,OAAO,MACtB,oBAAC,mBAAwB,MAAM,SAAT,EAAkB,CACxC,GACmB;IACT;AAGpB,SACE,oBAAC;GAAY,MAAM,KAAK;GAAK,MAAM,KAAK;GAAM,UAAU,KAAK;GAAU,GAAI;aACxE,KAAK;IACM"}

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

@@ -0,0 +1,30 @@
+import { base_d_exports } from "./base.js";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
+import { FC, ReactNode } from "react";
+import * as PageTree from "@hanzo/docs-core/page-tree";
+
+//#region src/components/sidebar/page-tree.d.ts
+interface SidebarPageTreeComponents {
+  Item: FC<{
+    item: PageTree.Item;
+  }>;
+  Folder: FC<{
+    item: PageTree.Folder;
+    children: ReactNode;
+  }>;
+  Separator: FC<{
+    item: PageTree.Separator;
+  }>;
+}
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarSeparator' | 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createPageTreeRenderer({
+  SidebarFolder,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarFolderTrigger,
+  SidebarSeparator,
+  SidebarItem
+}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => react_jsx_runtime61.JSX.Element;
+//#endregion
+export { SidebarPageTreeComponents, createPageTreeRenderer };
+//# sourceMappingURL=page-tree.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,58 @@
+import { tree_exports } from "../../contexts/tree.js";
+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)();
+		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 })]
+		});
+	}
+	/**
+	* Render sidebar items from page tree
+	*/
+	return function SidebarPageTree(components) {
+		const { root } = (0, tree_exports.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$1, { children: renderSidebarList(root.children) }, root.$id);
+		}, [
+			Folder,
+			Item,
+			Separator,
+			root
+		]);
+	};
+}
+
+//#endregion
+export { createPageTreeRenderer };
+//# sourceMappingURL=page-tree.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+import { SidebarTab } from "./index.js";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/sidebar/tabs/dropdown.d.ts
+interface SidebarTabWithProps extends SidebarTab {
+  props?: ComponentProps<'a'>;
+}
+declare function SidebarTabsDropdown({
+  options,
+  placeholder,
+  ...props
+}: {
+  placeholder?: ReactNode;
+  options: SidebarTabWithProps[];
+} & ComponentProps<'button'>): react_jsx_runtime39.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

@@ -0,0 +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,OAAA"}

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

@@ -0,0 +1,78 @@
+'use client';
+
+import { useSidebar } from "../base.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import Link from "@hanzo/docs-core/link";
+import { usePathname } from "@hanzo/docs-core/framework";
+import { cn } from "@hanzo/docs-ui/cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+import { isActive, normalize } from "@hanzo/docs-ui/urls";
+
+//#region src/components/sidebar/tabs/dropdown.tsx
+function SidebarTabsDropdown({ options, placeholder, ...props }) {
+	const [open, setOpen] = useState(false);
+	const { closeOnRedirect } = useSidebar();
+	const pathname = usePathname();
+	const selected = useMemo(() => {
+		return options.findLast((item$1) => isTabActive(item$1, pathname));
+	}, [options, pathname]);
+	const onClick = () => {
+		closeOnRedirect.current = false;
+		setOpen(false);
+	};
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "size-9 shrink-0 empty:hidden md:size-5",
+		children: selected.icon
+	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-sm font-medium",
+		children: selected.title
+	}), /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
+		children: selected.description
+	})] })] }) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		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),
+			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;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: item$1.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),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
+							children: item$1.icon
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium leading-none",
+							children: item$1.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
+							children: item$1.description
+						})] }),
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive$1 && "invisible") })
+					]
+				}, item$1.url);
+			})
+		})]
+	});
+}
+function isTabActive(tab, pathname) {
+	if (tab.urls) return tab.urls.has(normalize(pathname));
+	return isActive(tab.url, pathname, true);
+}
+
+//#endregion
+export { SidebarTabsDropdown, isTabActive };
+//# sourceMappingURL=dropdown.js.map

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

@@ -0,0 +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-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"}

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+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;
+}
+interface GetSidebarTabsOptions {
+  transform?: (option: SidebarTab, node: PageTree.Folder) => SidebarTab | null;
+}
+declare function getSidebarTabs(tree: PageTree.Root, {
+  transform
+}?: GetSidebarTabsOptions): SidebarTab[];
+//#endregion
+export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}