@fumadocs/base-ui 16.6.0 → 16.6.2

package/css/generated/notebook.css

@@ -398,7 +398,6 @@
 @source inline("start-0");
 @source inline("sticky");
 @source inline("still");
-@source inline("string");
 @source inline("stroke");
 @source inline("stroke-current/25");
 @source inline("strokeDasharray");

package/css/generated/shared.css

@@ -61,8 +61,8 @@
 @source inline("absolute");
 @source inline("action");
 @source inline("active");
-@source inline("activeType");
 @source inline("add");
+@source inline("addEventListener");
 @source inline("advanced");
 @source inline("after");
 @source inline("algolia");
@@ -87,6 +87,7 @@
 @source inline("aria-selected");
 @source inline("as");
 @source inline("aside");
+@source inline("assume");
 @source inline("assumes");
 @source inline("async");
 @source inline("at");
@@ -237,6 +238,7 @@
 @source inline("data-icon");
 @source inline("data-line-numbers");
 @source inline("data-line-numbers-start");
+@source inline("data-open:animate-fd-dialog-in");
 @source inline("data-open:animate-fd-fade-in");
 @source inline("data-open:bg-fd-accent");
 @source inline("data-open:text-fd-accent-foreground");
@@ -244,7 +246,6 @@
 @source inline("data-search-full");
 @source inline("data-state");
 @source inline("data-theme-toggle");
-@source inline("dataopen:animate-fd-dialog-in");
 @source inline("date");
 @source inline("debounced");
 @source inline("decimal");
@@ -318,6 +319,7 @@
 @source inline("false");
 @source inline("fd-moving-banner");
 @source inline("fd-scroll-container");
+@source inline("fd-search-dialog-content");
 @source inline("fd-step");
 @source inline("fd-steps");
 @source inline("fetch");
@@ -485,7 +487,6 @@
 @source inline("keepBackground");
 @source inline("keepMounted");
 @source inline("key");
-@source inline("keyVariants");
 @source inline("keydown");
 @source inline("keyof");
 @source inline("label");
@@ -611,6 +612,7 @@
 @source inline("nextIdRef");
 @source inline("nextPage");
 @source inline("node");
+@source inline("nodes");
 @source inline("none");
 @source inline("noopener");
 @source inline("noreferrer");
@@ -691,6 +693,7 @@
 @source inline("page");
 @source inline("parameters");
 @source inline("params");
+@source inline("parentId");
 @source inline("pass");
 @source inline("passed");
 @source inline("path");
@@ -776,6 +779,7 @@
 @source inline("relative");
 @source inline("remarkRehypeOptions");
 @source inline("remove");
+@source inline("removeEventListener");
 @source inline("render");
 @source inline("renderHighlights");
 @source inline("renderMarkdown");
@@ -812,6 +816,7 @@
 @source inline("s");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
+@source inline("scroll-m-20");
 @source inline("scroll-m-24");
 @source inline("scroll-m-28");
 @source inline("scrollIntoView");
@@ -844,7 +849,6 @@
 @source inline("setTag");
 @source inline("setValue");
 @source inline("shadow-2xl");
-@source inline("shadow-black/50");
 @source inline("shadow-lg");
 @source inline("shadow-md");
 @source inline("shadow-sm");
@@ -980,6 +984,7 @@
 @source inline("twMerge");
 @source inline("type");
 @source inline("typeof");
+@source inline("unchanged");
 @source inline("undefined");
 @source inline("under");
 @source inline("underline");
@@ -1039,7 +1044,7 @@
 @source inline("w-0");
 @source inline("w-0.5");
 @source inline("w-1.5");
-@source inline("w-[25%]");
+@source inline("w-1/4");
 @source inline("w-[calc(100%-1rem)]");
 @source inline("w-fit");
 @source inline("w-full");

package/dist/components/dialog/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","names":[],"sources":["../../../src/components/dialog/search.tsx"],"mappings":";;;;;;;KAgCY,cAAA,IACP,iBAAA;EACC,QAAA;AAAA;EAGA,EAAA;EACA,IAAA;EACA,IAAA,EAAM,SAAA;EACN,QAAA;AAAA;AAAA,UAMW,iBAAA,SAA0B,WAAA;EACzC,MAAA;EACA,cAAA,GAAiB,CAAA;EACjB,QAAA,IAAY,IAAA,EAAM,cAAA;EAClB,SAAA;EAEA,QAAA,EAAU,SAAA;AAAA;AAAA,iBAkHI,YAAA,CAAA;EACd,IAAA;EACA,YAAA;EACA,MAAA;EACA,cAAA;EACA,SAAA;EACA,QAAA,EAAU,YAAA;EACV;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0CJ,kBAAA,CAAmB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,iBAAA,CAAkB,KAAA,EAAO,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAehD,iBAAA,CAAA;EACd,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBX,kBAAA,CAAmB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,mBAAA,CAAA;EACd,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAczB,mBAAA,CAAA;EACd,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBtB,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EAKA,IAAA;EAAA,GACG;AAAA,GACF,IAAA,CAAK,cAAA;EACN,KAAA,EAAO,cAAA;EAhRP;;;EAoRA,KAAA,SAAc,SAAA;EAlRI;;;EAsRlB,IAAA,IAAQ,KAAA;IAAS,IAAA,EAAM,cAAA;IAAgB,OAAA;EAAA,MAA0B,SAAA;AAAA,IAClE,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuFe,oBAAA,CAAA;EACd,IAAA;EACA,SAAA;EACA,QAAA;EACA,cAAA;EACA,gBAAA,EAAkB,CAAA;EAAA,GACf;AAAA,GACF,cAAA;EACD,cAAA,IAAkB,CAAA,aAAc,SAAA,EAhQhC;EAkQA,gBAAA,IAAoB,MAAA,EAAQ,eAAA,CAAgB,SAAA,QAAiB,SAAA;EAC7D,IAAA,EAAM,cAAA;AAAA,IACP,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoEe,gBAAA,CAAiB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe5C,aAAA,SAAsB,cAAA;EACrC,GAAA;EACA,WAAA,GAAc,GAAA;EACd,UAAA;AAAA;AAAA,iBAac,QAAA,CAAA;EAAW,GAAA;EAAK,WAAA;EAAa,UAAA;EAAA,GAAuB;AAAA,GAAS,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB1E,YAAA,CAAA;EACd,KAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,KAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBe,SAAA,CAAA;;iBAlgBC,IAAA;;mBAEE,CAAA;aACN,IAAA,EAAM,cAAA;;;iBAqgBH,WAAA,CAAA;;kBA1fE,KAAA;;;iBAggBF,aAAA,CAAA;;cArgBF,CAAA;AAAA"}
+{"version":3,"file":"search.d.ts","names":[],"sources":["../../../src/components/dialog/search.tsx"],"mappings":";;;;;;;KAgCY,cAAA,IACP,iBAAA;EACC,QAAA;AAAA;EAGA,EAAA;EACA,IAAA;EACA,IAAA,EAAM,SAAA;EACN,QAAA;AAAA;AAAA,UAMW,iBAAA,SAA0B,WAAA;EACzC,MAAA;EACA,cAAA,GAAiB,CAAA;EACjB,QAAA,IAAY,IAAA,EAAM,cAAA;EAClB,SAAA;EAEA,QAAA,EAAU,SAAA;AAAA;AAAA,iBAkHI,YAAA,CAAA;EACd,IAAA;EACA,YAAA;EACA,MAAA;EACA,cAAA;EACA,SAAA;EACA,QAAA,EAAU,YAAA;EACV;AAAA,GACC,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0CJ,kBAAA,CAAmB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,iBAAA,CAAkB,KAAA,EAAO,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAehD,iBAAA,CAAA;EACd,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBX,kBAAA,CAAmB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI/C,mBAAA,CAAA;EACd,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAczB,mBAAA,CAAA;EACd,QAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,KAAA,IAAM,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAwBtB,gBAAA,CAAA;EACd,KAAA;EACA,KAAA;EAKA,IAAA;EAAA,GACG;AAAA,GACF,IAAA,CAAK,cAAA;EACN,KAAA,EAAO,cAAA;EAjRP;;;EAqRA,KAAA,SAAc,SAAA;EAnRI;;;EAuRlB,IAAA,IAAQ,KAAA;IAAS,IAAA,EAAM,cAAA;IAAgB,OAAA;EAAA,MAA0B,SAAA;AAAA,IAClE,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyFe,oBAAA,CAAA;EACd,IAAA;EACA,SAAA;EACA,QAAA;EACA,cAAA;EACA,gBAAA,EAAkB,CAAA;EAAA,GACf;AAAA,GACF,cAAA;EACD,cAAA,IAAkB,CAAA,aAAc,SAAA,EAnQhC;EAqQA,gBAAA,IAAoB,MAAA,EAAQ,eAAA,CAAgB,SAAA,QAAiB,SAAA;EAC7D,IAAA,EAAM,cAAA;AAAA,IACP,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoEe,gBAAA,CAAiB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAe5C,aAAA,SAAsB,cAAA;EACrC,GAAA;EACA,WAAA,GAAc,GAAA;EACd,UAAA;AAAA;AAAA,iBAac,QAAA,CAAA;EAAW,GAAA;EAAK,WAAA;EAAa,UAAA;EAAA,GAAuB;AAAA,GAAS,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB1E,YAAA,CAAA;EACd,KAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,KAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBe,SAAA,CAAA;;iBArgBC,IAAA;;mBAEE,CAAA;aACN,IAAA,EAAM,cAAA;;;iBAwgBH,WAAA,CAAA;;kBA7fE,KAAA;;;iBAmgBF,aAAA,CAAA;;cAxgBF,CAAA;AAAA"}

package/dist/components/dialog/search.js

@@ -181,9 +181,10 @@ function SearchDialogOverlay({ className, ...props }) {
 function SearchDialogContent({ children, className, ...props }) {
 	const { text } = useI18n();
 	return /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+		id: "fd-search-dialog-content",
 		"aria-describedby": void 0,
 		...props,
-		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-closed:animate-fd-dialog-out dataopen:animate-fd-dialog-in", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
+		className: (s) => cn("fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl overflow-hidden data-closed:animate-fd-dialog-out data-open:animate-fd-dialog-in focus-visible:outline-none", "*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0", typeof className === "function" ? className(s) : className),
 		children: [/* @__PURE__ */ jsx(Dialog.Title, {
 			className: "hidden",
 			children: text.search
@@ -222,10 +223,11 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		});
 		const viewport = element.firstElementChild;
 		if (viewport) observer.observe(viewport);
-		window.addEventListener("keydown", onKey);
+		const content = document.getElementById("fd-search-dialog-content") ?? window;
+		content.addEventListener("keydown", onKey);
 		return () => {
 			observer.disconnect();
-			window.removeEventListener("keydown", onKey);
+			content.removeEventListener("keydown", onKey);
 		};
 	}, []);
 	useOnChange(items, () => {

package/dist/components/dialog/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":["SearchIcon"],"sources":["../../../src/components/dialog/search.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight, Hash, Search as SearchIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type ReactNode,\n  use,\n  useCallback,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { I18nLabel, useI18n } from '@/contexts/i18n';\nimport { cn } from '@/utils/cn';\nimport { Dialog } from '@base-ui/react/dialog';\nimport type { HighlightedText, ReactSortedResult as BaseResultType } from 'fumadocs-core/search';\nimport { cva } from 'class-variance-authority';\nimport { useRouter } from 'fumadocs-core/framework';\nimport type { SharedProps } from '@/contexts/search';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { buttonVariants } from '@/components/ui/button';\nimport { createMarkdownRenderer } from 'fumadocs-core/content/md';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport type { Transformer } from 'unified';\nimport type { Root } from 'hast';\n\nexport type SearchItemType =\n  | (BaseResultType & {\n      external?: boolean;\n    })\n  | {\n      id: string;\n      type: 'action';\n      node: ReactNode;\n      onSelect: () => void;\n    };\n\n// needed for backward compatible since some previous guides referenced it\nexport type { SharedProps };\n\nexport interface SearchDialogProps extends SharedProps {\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect?: (item: SearchItemType) => void;\n  isLoading?: boolean;\n\n  children: ReactNode;\n}\n\nconst RootContext = createContext<{\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect: (item: SearchItemType) => void;\n  isLoading: boolean;\n} | null>(null);\n\nconst ListContext = createContext<{\n  active: string | null;\n  setActive: (v: string | null) => void;\n} | null>(null);\n\nconst TagsListContext = createContext<{\n  value?: string;\n  onValueChange: (value: string | undefined) => void;\n  allowClear: boolean;\n} | null>(null);\n\nconst PreContext = createContext(false);\n\nconst mdRenderer = createMarkdownRenderer({\n  remarkRehypeOptions: {\n    allowDangerousHtml: true,\n  },\n  rehypePlugins: [rehypeRaw, rehypeCustomElements],\n});\n\nconst mdComponents = {\n  mark(props: ComponentProps<'mark'>) {\n    return <span {...props} className=\"text-fd-primary underline\" />;\n  },\n  a: 'span',\n  p(props: ComponentProps<'p'>) {\n    return <p {...props} className=\"min-w-0\" />;\n  },\n  strong(props: ComponentProps<'strong'>) {\n    return <strong {...props} className=\"text-fd-accent-foreground font-medium\" />;\n  },\n  code(props: ComponentProps<'pre'>) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is a component\n    const inPre = use(PreContext);\n    if (inPre)\n      return (\n        <code\n          {...props}\n          className=\"mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]\"\n        />\n      );\n\n    return (\n      <code\n        {...props}\n        className=\"border rounded-md px-px bg-fd-secondary text-fd-secondary-foreground\"\n      />\n    );\n  },\n  custom({\n    _tagName = 'fragment',\n    children,\n    ...rest\n  }: Record<string, unknown> & { _tagName: string; children: ReactNode }) {\n    return (\n      <span className=\"inline-flex max-w-full items-center border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border\">\n        <code className=\"rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none\">\n          {_tagName}\n        </code>\n        {Object.entries(rest).map(([k, v]) => {\n          if (typeof v !== 'string') return;\n\n          return (\n            <code key={k} className=\"truncate text-xs text-fd-muted-foreground px-1\">\n              <span className=\"text-fd-card-foreground\">{k}: </span>\n              {v}\n            </code>\n          );\n        })}\n        {children && <span className=\"ps-1\">{children}</span>}\n      </span>\n    );\n  },\n  pre(props: ComponentProps<'pre'>) {\n    return (\n      <pre\n        {...props}\n        className={cn(\n          'flex flex-col border rounded-md my-0.5 p-2 bg-fd-secondary text-fd-secondary-foreground max-h-20 overflow-hidden',\n          props.className,\n        )}\n      >\n        <PreContext value={true}>{props.children}</PreContext>\n      </pre>\n    );\n  },\n};\n\nfunction rehypeCustomElements(): Transformer<Root, Root> {\n  return (tree) => {\n    visit(tree, (node) => {\n      if (\n        node.type === 'element' &&\n        document.createElement(node.tagName) instanceof HTMLUnknownElement\n      ) {\n        node.properties._tagName = node.tagName;\n        node.tagName = 'custom';\n      }\n    });\n  };\n}\n\nexport function SearchDialog({\n  open,\n  onOpenChange,\n  search,\n  onSearchChange,\n  isLoading = false,\n  onSelect: onSelectProp,\n  children,\n}: SearchDialogProps) {\n  const router = useRouter();\n  const onOpenChangeCallback = useRef(onOpenChange);\n  onOpenChangeCallback.current = onOpenChange;\n  const onSearchChangeCallback = useRef(onSearchChange);\n  onSearchChangeCallback.current = onSearchChange;\n  const onSelect = (item: SearchItemType) => {\n    if (item.type === 'action') {\n      item.onSelect();\n    } else if (item.external) {\n      window.open(item.url, '_blank')?.focus();\n    } else {\n      router.push(item.url);\n    }\n\n    onOpenChange(false);\n    onSelectProp?.(item);\n  };\n  const onSelectCallback = useRef(onSelect);\n  onSelectCallback.current = onSelect;\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <RootContext\n        value={useMemo(\n          () => ({\n            open,\n            search,\n            isLoading,\n            onOpenChange: (v) => onOpenChangeCallback.current(v),\n            onSearchChange: (v) => onSearchChangeCallback.current(v),\n            onSelect: (v) => onSelectCallback.current(v),\n          }),\n          [isLoading, open, search],\n        )}\n      >\n        {children}\n      </RootContext>\n    </Dialog.Root>\n  );\n}\n\nexport function SearchDialogHeader(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('flex flex-row items-center gap-2 p-3', props.className)} />;\n}\n\nexport function SearchDialogInput(props: ComponentProps<'input'>) {\n  const { text } = useI18n();\n  const { search, onSearchChange } = useSearch();\n\n  return (\n    <input\n      {...props}\n      value={search}\n      onChange={(e) => onSearchChange(e.target.value)}\n      placeholder={text.search}\n      className=\"w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none\"\n    />\n  );\n}\n\nexport function SearchDialogClose({\n  children = 'ESC',\n  className,\n  ...props\n}: ComponentProps<'button'>) {\n  const { onOpenChange } = useSearch();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onOpenChange(false)}\n      className={cn(\n        buttonVariants({\n          color: 'outline',\n          size: 'sm',\n          className: 'font-mono text-fd-muted-foreground',\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SearchDialogFooter(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('bg-fd-secondary/50 p-3 empty:hidden', props.className)} />;\n}\n\nexport function SearchDialogOverlay({\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Backdrop>) {\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={(s) =>\n        cn(\n          'fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-open:animate-fd-fade-in data-closed:animate-fd-fade-out',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n    />\n  );\n}\n\nexport function SearchDialogContent({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Popup>) {\n  const { text } = useI18n();\n\n  return (\n    <Dialog.Portal>\n      <Dialog.Popup\n        aria-describedby={undefined}\n        {...props}\n        className={(s) =>\n          cn(\n            'fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-closed:animate-fd-dialog-out dataopen:animate-fd-dialog-in',\n            '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0',\n            typeof className === 'function' ? className(s) : className,\n          )\n        }\n      >\n        <Dialog.Title className=\"hidden\">{text.search}</Dialog.Title>\n        {children}\n      </Dialog.Popup>\n    </Dialog.Portal>\n  );\n}\n\nexport function SearchDialogList({\n  items = null,\n  Empty = () => (\n    <div className=\"py-12 text-center text-sm text-fd-muted-foreground\">\n      <I18nLabel label=\"searchNoResult\" />\n    </div>\n  ),\n  Item = (props) => <SearchDialogListItem {...props} />,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  items: SearchItemType[] | null | undefined;\n  /**\n   * Renderer for empty list UI\n   */\n  Empty?: () => ReactNode;\n  /**\n   * Renderer for items\n   */\n  Item?: (props: { item: SearchItemType; onClick: () => void }) => ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { onSelect } = useSearch();\n  const [active, setActive] = useState<string | null>(() =>\n    items && items.length > 0 ? items[0].id : null,\n  );\n\n  const onKey = useEffectEvent((e: KeyboardEvent) => {\n    if (!items || e.isComposing) return;\n\n    if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {\n      let idx = items.findIndex((item) => item.id === active);\n      if (idx === -1) idx = 0;\n      else if (e.key === 'ArrowDown') idx++;\n      else idx--;\n\n      setActive(items.at(idx % items.length)?.id ?? null);\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter') {\n      const selected = items.find((item) => item.id === active);\n\n      if (selected) onSelect(selected);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(() => {\n      const viewport = element.firstElementChild!;\n\n      element.style.setProperty('--fd-animated-height', `${viewport.clientHeight}px`);\n    });\n\n    const viewport = element.firstElementChild;\n    if (viewport) observer.observe(viewport);\n\n    window.addEventListener('keydown', onKey);\n    return () => {\n      observer.disconnect();\n      window.removeEventListener('keydown', onKey);\n    };\n  }, []);\n\n  useOnChange(items, () => {\n    if (items && items.length > 0) {\n      setActive(items[0].id);\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-empty={items === null}\n      className={cn(\n        'overflow-hidden h-(--fd-animated-height) transition-[height]',\n        props.className,\n      )}\n    >\n      <div\n        className={cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1', !items && 'hidden')}\n      >\n        <ListContext\n          value={useMemo(\n            () => ({\n              active,\n              setActive,\n            }),\n            [active],\n          )}\n        >\n          {items?.length === 0 && Empty()}\n\n          {items?.map((item) => (\n            <Fragment key={item.id}>{Item({ item, onClick: () => onSelect(item) })}</Fragment>\n          ))}\n        </ListContext>\n      </div>\n    </div>\n  );\n}\n\nexport function SearchDialogListItem({\n  item,\n  className,\n  children,\n  renderMarkdown = (s) => <mdRenderer.Markdown components={mdComponents}>{s}</mdRenderer.Markdown>,\n  renderHighlights: _,\n  ...props\n}: ComponentProps<'button'> & {\n  renderMarkdown?: (v: string) => ReactNode;\n  /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */\n  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;\n  item: SearchItemType;\n}) {\n  const { active: activeId, setActive } = useSearchList();\n  const active = item.id === activeId;\n\n  if (item.type === 'action') {\n    children ??= item.node;\n  } else {\n    children ??= (\n      <>\n        <div className=\"inline-flex items-center text-fd-muted-foreground text-xs empty:hidden\">\n          {item.breadcrumbs?.map((item, i) => (\n            <Fragment key={i}>\n              {i > 0 && <ChevronRight className=\"size-4 rtl:rotate-180\" />}\n              {item}\n            </Fragment>\n          ))}\n        </div>\n\n        {item.type !== 'page' && (\n          <div role=\"none\" className=\"absolute start-3 inset-y-0 w-px bg-fd-border\" />\n        )}\n        {item.type === 'heading' && (\n          <Hash className=\"absolute start-6 top-2.5 size-4 text-fd-muted-foreground\" />\n        )}\n        <div\n          className={cn(\n            'min-w-0',\n            item.type === 'text' && 'ps-4',\n            item.type === 'heading' && 'ps-8',\n            item.type === 'page' || item.type === 'heading'\n              ? 'font-medium'\n              : 'text-fd-popover-foreground/80',\n          )}\n        >\n          {typeof item.content === 'string' ? renderMarkdown(item.content) : item.content}\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      ref={useCallback(\n        (element: HTMLButtonElement | null) => {\n          if (active && element) {\n            scrollIntoView(element, {\n              scrollMode: 'if-needed',\n              block: 'nearest',\n              boundary: element.parentElement,\n            });\n          }\n        },\n        [active],\n      )}\n      aria-selected={active}\n      className={cn(\n        'relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-lg',\n        active && 'bg-fd-accent text-fd-accent-foreground',\n        className,\n      )}\n      onPointerMove={() => setActive(item.id)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\nexport function SearchDialogIcon(props: ComponentProps<'svg'>) {\n  const { isLoading } = useSearch();\n\n  return (\n    <SearchIcon\n      {...props}\n      className={cn(\n        'size-5 text-fd-muted-foreground',\n        isLoading && 'animate-pulse duration-400',\n        props.className,\n      )}\n    />\n  );\n}\n\nexport interface TagsListProps extends ComponentProps<'div'> {\n  tag?: string;\n  onTagChange: (tag: string | undefined) => void;\n  allowClear?: boolean;\n}\n\nconst itemVariants = cva(\n  'rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors',\n  {\n    variants: {\n      active: {\n        true: 'bg-fd-accent text-fd-accent-foreground',\n      },\n    },\n  },\n);\nexport function TagsList({ tag, onTagChange, allowClear = false, ...props }: TagsListProps) {\n  const onTagChangeCallback = useRef(onTagChange);\n  onTagChangeCallback.current = onTagChange;\n  return (\n    <div {...props} className={cn('flex items-center gap-1 flex-wrap', props.className)}>\n      <TagsListContext\n        value={useMemo(\n          () => ({\n            value: tag,\n            onValueChange: (v) => onTagChangeCallback.current(v),\n            allowClear,\n          }),\n          [allowClear, tag],\n        )}\n      >\n        {props.children}\n      </TagsListContext>\n    </div>\n  );\n}\n\nexport function TagsListItem({\n  value,\n  className,\n  ...props\n}: ComponentProps<'button'> & {\n  value: string;\n}) {\n  const { onValueChange, value: selectedValue, allowClear } = useTagsList();\n  const selected = value === selectedValue;\n\n  return (\n    <button\n      type=\"button\"\n      data-active={selected}\n      className={cn(itemVariants({ active: selected, className }))}\n      onClick={() => onValueChange(selected && allowClear ? undefined : value)}\n      tabIndex={-1}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport function useSearch() {\n  const ctx = use(RootContext);\n  if (!ctx) throw new Error('Missing <SearchDialog />');\n  return ctx;\n}\n\nexport function useTagsList() {\n  const ctx = use(TagsListContext);\n  if (!ctx) throw new Error('Missing <TagsList />');\n  return ctx;\n}\n\nexport function useSearchList() {\n  const ctx = use(ListContext);\n  if (!ctx) throw new Error('Missing <SearchDialogList />');\n  return ctx;\n}\n"],"mappings":"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"}
+{"version":3,"file":"search.js","names":["SearchIcon"],"sources":["../../../src/components/dialog/search.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight, Hash, Search as SearchIcon } from 'lucide-react';\nimport {\n  type ComponentProps,\n  createContext,\n  Fragment,\n  type ReactNode,\n  use,\n  useCallback,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { I18nLabel, useI18n } from '@/contexts/i18n';\nimport { cn } from '@/utils/cn';\nimport { Dialog } from '@base-ui/react/dialog';\nimport type { HighlightedText, ReactSortedResult } from 'fumadocs-core/search';\nimport { cva } from 'class-variance-authority';\nimport { useRouter } from 'fumadocs-core/framework';\nimport type { SharedProps } from '@/contexts/search';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { buttonVariants } from '@/components/ui/button';\nimport { createMarkdownRenderer } from 'fumadocs-core/content/md';\nimport rehypeRaw from 'rehype-raw';\nimport { visit } from 'unist-util-visit';\nimport type { Transformer } from 'unified';\nimport type { Root } from 'hast';\n\nexport type SearchItemType =\n  | (ReactSortedResult & {\n      external?: boolean;\n    })\n  | {\n      id: string;\n      type: 'action';\n      node: ReactNode;\n      onSelect: () => void;\n    };\n\n// needed for backward compatible since some previous guides referenced it\nexport type { SharedProps };\n\nexport interface SearchDialogProps extends SharedProps {\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect?: (item: SearchItemType) => void;\n  isLoading?: boolean;\n\n  children: ReactNode;\n}\n\nconst RootContext = createContext<{\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  search: string;\n  onSearchChange: (v: string) => void;\n  onSelect: (item: SearchItemType) => void;\n  isLoading: boolean;\n} | null>(null);\n\nconst ListContext = createContext<{\n  active: string | null;\n  setActive: (v: string | null) => void;\n} | null>(null);\n\nconst TagsListContext = createContext<{\n  value?: string;\n  onValueChange: (value: string | undefined) => void;\n  allowClear: boolean;\n} | null>(null);\n\nconst PreContext = createContext(false);\n\nconst mdRenderer = createMarkdownRenderer({\n  remarkRehypeOptions: {\n    allowDangerousHtml: true,\n  },\n  rehypePlugins: [rehypeRaw, rehypeCustomElements],\n});\n\nconst mdComponents = {\n  mark(props: ComponentProps<'mark'>) {\n    return <span {...props} className=\"text-fd-primary underline\" />;\n  },\n  a: 'span',\n  p(props: ComponentProps<'p'>) {\n    return <p {...props} className=\"min-w-0\" />;\n  },\n  strong(props: ComponentProps<'strong'>) {\n    return <strong {...props} className=\"text-fd-accent-foreground font-medium\" />;\n  },\n  code(props: ComponentProps<'pre'>) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is a component\n    const inPre = use(PreContext);\n    if (inPre)\n      return (\n        <code\n          {...props}\n          className=\"mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]\"\n        />\n      );\n\n    return (\n      <code\n        {...props}\n        className=\"border rounded-md px-px bg-fd-secondary text-fd-secondary-foreground\"\n      />\n    );\n  },\n  custom({\n    _tagName = 'fragment',\n    children,\n    ...rest\n  }: Record<string, unknown> & { _tagName: string; children: ReactNode }) {\n    return (\n      <span className=\"inline-flex max-w-full items-center border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border\">\n        <code className=\"rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none\">\n          {_tagName}\n        </code>\n        {Object.entries(rest).map(([k, v]) => {\n          if (typeof v !== 'string') return;\n\n          return (\n            <code key={k} className=\"truncate text-xs text-fd-muted-foreground px-1\">\n              <span className=\"text-fd-card-foreground\">{k}: </span>\n              {v}\n            </code>\n          );\n        })}\n        {children && <span className=\"ps-1\">{children}</span>}\n      </span>\n    );\n  },\n  pre(props: ComponentProps<'pre'>) {\n    return (\n      <pre\n        {...props}\n        className={cn(\n          'flex flex-col border rounded-md my-0.5 p-2 bg-fd-secondary text-fd-secondary-foreground max-h-20 overflow-hidden',\n          props.className,\n        )}\n      >\n        <PreContext value={true}>{props.children}</PreContext>\n      </pre>\n    );\n  },\n};\n\nfunction rehypeCustomElements(): Transformer<Root, Root> {\n  return (tree) => {\n    visit(tree, (node) => {\n      if (\n        node.type === 'element' &&\n        document.createElement(node.tagName) instanceof HTMLUnknownElement\n      ) {\n        node.properties._tagName = node.tagName;\n        node.tagName = 'custom';\n      }\n    });\n  };\n}\n\nexport function SearchDialog({\n  open,\n  onOpenChange,\n  search,\n  onSearchChange,\n  isLoading = false,\n  onSelect: onSelectProp,\n  children,\n}: SearchDialogProps) {\n  const router = useRouter();\n  const onOpenChangeCallback = useRef(onOpenChange);\n  onOpenChangeCallback.current = onOpenChange;\n  const onSearchChangeCallback = useRef(onSearchChange);\n  onSearchChangeCallback.current = onSearchChange;\n  const onSelect = (item: SearchItemType) => {\n    if (item.type === 'action') {\n      item.onSelect();\n    } else if (item.external) {\n      window.open(item.url, '_blank')?.focus();\n    } else {\n      router.push(item.url);\n    }\n\n    onOpenChange(false);\n    onSelectProp?.(item);\n  };\n  const onSelectCallback = useRef(onSelect);\n  onSelectCallback.current = onSelect;\n\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <RootContext\n        value={useMemo(\n          () => ({\n            open,\n            search,\n            isLoading,\n            onOpenChange: (v) => onOpenChangeCallback.current(v),\n            onSearchChange: (v) => onSearchChangeCallback.current(v),\n            onSelect: (v) => onSelectCallback.current(v),\n          }),\n          [isLoading, open, search],\n        )}\n      >\n        {children}\n      </RootContext>\n    </Dialog.Root>\n  );\n}\n\nexport function SearchDialogHeader(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('flex flex-row items-center gap-2 p-3', props.className)} />;\n}\n\nexport function SearchDialogInput(props: ComponentProps<'input'>) {\n  const { text } = useI18n();\n  const { search, onSearchChange } = useSearch();\n\n  return (\n    <input\n      {...props}\n      value={search}\n      onChange={(e) => onSearchChange(e.target.value)}\n      placeholder={text.search}\n      className=\"w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none\"\n    />\n  );\n}\n\nexport function SearchDialogClose({\n  children = 'ESC',\n  className,\n  ...props\n}: ComponentProps<'button'>) {\n  const { onOpenChange } = useSearch();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onOpenChange(false)}\n      className={cn(\n        buttonVariants({\n          color: 'outline',\n          size: 'sm',\n          className: 'font-mono text-fd-muted-foreground',\n        }),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function SearchDialogFooter(props: ComponentProps<'div'>) {\n  return <div {...props} className={cn('bg-fd-secondary/50 p-3 empty:hidden', props.className)} />;\n}\n\nexport function SearchDialogOverlay({\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Backdrop>) {\n  return (\n    <Dialog.Backdrop\n      {...props}\n      className={(s) =>\n        cn(\n          'fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-open:animate-fd-fade-in data-closed:animate-fd-fade-out',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n    />\n  );\n}\n\nexport function SearchDialogContent({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof Dialog.Popup>) {\n  const { text } = useI18n();\n\n  return (\n    <Dialog.Portal>\n      <Dialog.Popup\n        id=\"fd-search-dialog-content\"\n        aria-describedby={undefined}\n        {...props}\n        className={(s) =>\n          cn(\n            'fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl overflow-hidden data-closed:animate-fd-dialog-out data-open:animate-fd-dialog-in focus-visible:outline-none',\n            '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0',\n            typeof className === 'function' ? className(s) : className,\n          )\n        }\n      >\n        <Dialog.Title className=\"hidden\">{text.search}</Dialog.Title>\n        {children}\n      </Dialog.Popup>\n    </Dialog.Portal>\n  );\n}\n\nexport function SearchDialogList({\n  items = null,\n  Empty = () => (\n    <div className=\"py-12 text-center text-sm text-fd-muted-foreground\">\n      <I18nLabel label=\"searchNoResult\" />\n    </div>\n  ),\n  Item = (props) => <SearchDialogListItem {...props} />,\n  ...props\n}: Omit<ComponentProps<'div'>, 'children'> & {\n  items: SearchItemType[] | null | undefined;\n  /**\n   * Renderer for empty list UI\n   */\n  Empty?: () => ReactNode;\n  /**\n   * Renderer for items\n   */\n  Item?: (props: { item: SearchItemType; onClick: () => void }) => ReactNode;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const { onSelect } = useSearch();\n  const [active, setActive] = useState<string | null>(() =>\n    items && items.length > 0 ? items[0].id : null,\n  );\n\n  const onKey = useEffectEvent((e: KeyboardEvent) => {\n    if (!items || e.isComposing) return;\n\n    if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {\n      let idx = items.findIndex((item) => item.id === active);\n      if (idx === -1) idx = 0;\n      else if (e.key === 'ArrowDown') idx++;\n      else idx--;\n\n      setActive(items.at(idx % items.length)?.id ?? null);\n      e.preventDefault();\n    }\n\n    if (e.key === 'Enter') {\n      const selected = items.find((item) => item.id === active);\n\n      if (selected) onSelect(selected);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n\n    const observer = new ResizeObserver(() => {\n      const viewport = element.firstElementChild!;\n\n      element.style.setProperty('--fd-animated-height', `${viewport.clientHeight}px`);\n    });\n\n    const viewport = element.firstElementChild;\n    if (viewport) observer.observe(viewport);\n\n    const content: Pick<Window, 'addEventListener' | 'removeEventListener'> =\n      document.getElementById('fd-search-dialog-content') ?? window;\n    content.addEventListener('keydown', onKey);\n    return () => {\n      observer.disconnect();\n      content.removeEventListener('keydown', onKey);\n    };\n  }, []);\n\n  useOnChange(items, () => {\n    if (items && items.length > 0) {\n      setActive(items[0].id);\n    }\n  });\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      data-empty={items === null}\n      className={cn(\n        'overflow-hidden h-(--fd-animated-height) transition-[height]',\n        props.className,\n      )}\n    >\n      <div\n        className={cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1', !items && 'hidden')}\n      >\n        <ListContext\n          value={useMemo(\n            () => ({\n              active,\n              setActive,\n            }),\n            [active],\n          )}\n        >\n          {items?.length === 0 && Empty()}\n\n          {items?.map((item) => (\n            <Fragment key={item.id}>{Item({ item, onClick: () => onSelect(item) })}</Fragment>\n          ))}\n        </ListContext>\n      </div>\n    </div>\n  );\n}\n\nexport function SearchDialogListItem({\n  item,\n  className,\n  children,\n  renderMarkdown = (s) => <mdRenderer.Markdown components={mdComponents}>{s}</mdRenderer.Markdown>,\n  renderHighlights: _,\n  ...props\n}: ComponentProps<'button'> & {\n  renderMarkdown?: (v: string) => ReactNode;\n  /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */\n  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;\n  item: SearchItemType;\n}) {\n  const { active: activeId, setActive } = useSearchList();\n  const active = item.id === activeId;\n\n  if (item.type === 'action') {\n    children ??= item.node;\n  } else {\n    children ??= (\n      <>\n        <div className=\"inline-flex items-center text-fd-muted-foreground text-xs empty:hidden\">\n          {item.breadcrumbs?.map((item, i) => (\n            <Fragment key={i}>\n              {i > 0 && <ChevronRight className=\"size-4 rtl:rotate-180\" />}\n              {item}\n            </Fragment>\n          ))}\n        </div>\n\n        {item.type !== 'page' && (\n          <div role=\"none\" className=\"absolute start-3 inset-y-0 w-px bg-fd-border\" />\n        )}\n        {item.type === 'heading' && (\n          <Hash className=\"absolute start-6 top-2.5 size-4 text-fd-muted-foreground\" />\n        )}\n        <div\n          className={cn(\n            'min-w-0',\n            item.type === 'text' && 'ps-4',\n            item.type === 'heading' && 'ps-8',\n            item.type === 'page' || item.type === 'heading'\n              ? 'font-medium'\n              : 'text-fd-popover-foreground/80',\n          )}\n        >\n          {typeof item.content === 'string' ? renderMarkdown(item.content) : item.content}\n        </div>\n      </>\n    );\n  }\n\n  return (\n    <button\n      type=\"button\"\n      ref={useCallback(\n        (element: HTMLButtonElement | null) => {\n          if (active && element) {\n            scrollIntoView(element, {\n              scrollMode: 'if-needed',\n              block: 'nearest',\n              boundary: element.parentElement,\n            });\n          }\n        },\n        [active],\n      )}\n      aria-selected={active}\n      className={cn(\n        'relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-lg',\n        active && 'bg-fd-accent text-fd-accent-foreground',\n        className,\n      )}\n      onPointerMove={() => setActive(item.id)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\nexport function SearchDialogIcon(props: ComponentProps<'svg'>) {\n  const { isLoading } = useSearch();\n\n  return (\n    <SearchIcon\n      {...props}\n      className={cn(\n        'size-5 text-fd-muted-foreground',\n        isLoading && 'animate-pulse duration-400',\n        props.className,\n      )}\n    />\n  );\n}\n\nexport interface TagsListProps extends ComponentProps<'div'> {\n  tag?: string;\n  onTagChange: (tag: string | undefined) => void;\n  allowClear?: boolean;\n}\n\nconst itemVariants = cva(\n  'rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors',\n  {\n    variants: {\n      active: {\n        true: 'bg-fd-accent text-fd-accent-foreground',\n      },\n    },\n  },\n);\nexport function TagsList({ tag, onTagChange, allowClear = false, ...props }: TagsListProps) {\n  const onTagChangeCallback = useRef(onTagChange);\n  onTagChangeCallback.current = onTagChange;\n  return (\n    <div {...props} className={cn('flex items-center gap-1 flex-wrap', props.className)}>\n      <TagsListContext\n        value={useMemo(\n          () => ({\n            value: tag,\n            onValueChange: (v) => onTagChangeCallback.current(v),\n            allowClear,\n          }),\n          [allowClear, tag],\n        )}\n      >\n        {props.children}\n      </TagsListContext>\n    </div>\n  );\n}\n\nexport function TagsListItem({\n  value,\n  className,\n  ...props\n}: ComponentProps<'button'> & {\n  value: string;\n}) {\n  const { onValueChange, value: selectedValue, allowClear } = useTagsList();\n  const selected = value === selectedValue;\n\n  return (\n    <button\n      type=\"button\"\n      data-active={selected}\n      className={cn(itemVariants({ active: selected, className }))}\n      onClick={() => onValueChange(selected && allowClear ? undefined : value)}\n      tabIndex={-1}\n      {...props}\n    >\n      {props.children}\n    </button>\n  );\n}\n\nexport function useSearch() {\n  const ctx = use(RootContext);\n  if (!ctx) throw new Error('Missing <SearchDialog />');\n  return ctx;\n}\n\nexport function useTagsList() {\n  const ctx = use(TagsListContext);\n  if (!ctx) throw new Error('Missing <TagsList />');\n  return ctx;\n}\n\nexport function useSearchList() {\n  const ctx = use(ListContext);\n  if (!ctx) throw new Error('Missing <SearchDialogList />');\n  return ctx;\n}\n"],"mappings":"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"}

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

@@ -75,9 +75,11 @@ declare function SidebarViewport({
 declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
 declare function SidebarItem({
   icon,
+  active,
   children,
   ...props
 }: LinkProps & {
+  active?: boolean;
   icon?: ReactNode;
 }): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolder({
@@ -97,8 +99,11 @@ declare function SidebarFolderTrigger({
 }: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
+  active,
   ...props
-}: LinkProps): react_jsx_runtime0.JSX.Element;
+}: LinkProps & {
+  active?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,

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

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"mappings":";;;;;;;;;;;UA+BU,cAAA;EACR,IAAA;EACA,OAAA,EAAS,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;EAC9B,SAAA;EACA,YAAA,EAAc,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;EAKnC,eAAA,EAAiB,SAAA;EACjB,gBAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;AAAA;AAAA,UAGS,oBAAA;;;;;;;EAOf,gBAAA;;;;EAKA,QAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,IAAA;AAAA,cAEC,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,cAAA;AAAA,iBASJ,eAAA,CAAA;EACd,gBAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCP,UAAA,CAAA,GAAc,cAAA;AAAA,iBAUd,SAAA,CAAA;;WAtDL,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;iBA0DhB,cAAA,CAAA;AAAA,iBAIA,cAAA,CAAA;EACd;AAAA;EAEA,QAAA,GAAW,KAAA;IACT,GAAA,EAAK,SAAA,CAAU,WAAA;IACf,SAAA;IACA,OAAA;IACA,cAAA,GAAiB,KAAA,EAAO,YAAA;IACxB,cAAA,GAAiB,KAAA,EAAO,YAAA;EAAA,MACpB,SAAA;AAAA,IACP,SAAA;AAAA,iBAyCe,oBAAA,CAAqB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjD,oBAAA,CAAA;EAAuB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB/E,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBxD,gBAAA,CAAiB,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgB3C,WAAA,CAAA;EACd,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,IAAA,GAAO,SAAA;AAAA,IACR,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgBe,aAAA,CAAA;EACd,WAAA,EAAa,eAAA;EACb,WAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,MAAA;EACA,WAAA;EACA,WAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBe,oBAAA,CAAA;EAAuB,QAAA;EAAA,GAAa;AAAA,GAAS,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBpE,iBAAA,CAAA;EAAoB,QAAA;EAAA,GAAa;AAAA,GAAS,SAAA,GAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqCnD,oBAAA,CAAqB,KAAA,EAAO,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAInD,cAAA,CAAA;EAAiB,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,sBAAA,CAAuB,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;AAlUrE;iBAuVe,aAAA,CAAc,MAAA,WAAiB,GAAA,EAAK,SAAA,CAAU,WAAA"}
+{"version":3,"file":"base.d.ts","names":[],"sources":["../../../src/components/sidebar/base.tsx"],"mappings":";;;;;;;;;;;UA8BU,cAAA;EACR,IAAA;EACA,OAAA,EAAS,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;EAC9B,SAAA;EACA,YAAA,EAAc,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;EAKnC,eAAA,EAAiB,SAAA;EACjB,gBAAA;EACA,QAAA;EACA,IAAA,EAAM,IAAA;AAAA;AAAA,UAGS,oBAAA;;;;;;;EAOf,gBAAA;;;;EAKA,QAAA;EAEA,QAAA,GAAW,SAAA;AAAA;AAAA,KAGR,IAAA;AAAA,cAEC,cAAA,EAAc,KAAA,CAAA,OAAA,CAAA,cAAA;AAAA,iBASJ,eAAA,CAAA;EACd,gBAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCP,UAAA,CAAA,GAAc,cAAA;AAAA,iBAUd,SAAA,CAAA;;WAtDL,KAAA,CAAM,QAAA,CAAS,KAAA,CAAM,cAAA;;;;iBA0DhB,cAAA,CAAA;AAAA,iBAIA,cAAA,CAAA;EACd;AAAA;EAEA,QAAA,GAAW,KAAA;IACT,GAAA,EAAK,SAAA,CAAU,WAAA;IACf,SAAA;IACA,OAAA;IACA,cAAA,GAAiB,KAAA,EAAO,YAAA;IACxB,cAAA,GAAiB,KAAA,EAAO,YAAA;EAAA,MACpB,SAAA;AAAA,IACP,SAAA;AAAA,iBAyCe,oBAAA,CAAqB,KAAA,EAAO,cAAA,UAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBjD,oBAAA,CAAA;EAAuB,SAAA;EAAW,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqB/E,eAAA,CAAA;EAAkB,SAAA;EAAA,GAAc;AAAA,GAAS,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBxD,gBAAA,CAAiB,KAAA,EAAO,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAgB3C,WAAA,CAAA;EACd,IAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,MAAA;EACA,IAAA,GAAO,SAAA;AAAA,IACR,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAce,aAAA,CAAA;EACd,WAAA,EAAa,eAAA;EACb,WAAA;EACA,MAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA;EACD,MAAA;EACA,WAAA;EACA,WAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAsBe,oBAAA,CAAA;EAAuB,QAAA;EAAA,GAAa;AAAA,GAAS,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAkBpE,iBAAA,CAAA;EACd,QAAA;EACA,MAAA;EAAA,GACG;AAAA,GACF,SAAA;EACD,MAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAmCe,oBAAA,CAAqB,KAAA,EAAO,uBAAA,GAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAInD,cAAA,CAAA;EAAiB,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAU/D,sBAAA,CAAuB,KAAA,EAAO,cAAA,aAAwB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAqBtD,aAAA,CAAc,MAAA,WAAiB,GAAA,EAAK,SAAA,CAAU,WAAA"}

package/dist/components/sidebar/base.js

@@ -2,7 +2,6 @@
 
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
-import { isActive } from "../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
@@ -157,11 +156,9 @@ function SidebarSeparator(props) {
 		children: props.children
 	});
 }
-function SidebarItem({ icon, children, ...props }) {
-	const pathname = usePathname();
+function SidebarItem({ icon, active = false, children, ...props }) {
 	const ref = useRef(null);
 	const { prefetch } = useSidebar();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,
@@ -213,12 +210,10 @@ function SidebarFolderTrigger({ children, ...props }) {
 		children
 	});
 }
-function SidebarFolderLink({ children, ...props }) {
+function SidebarFolderLink({ children, active = false, ...props }) {
 	const ref = useRef(null);
 	const { open, setOpen, collapsible } = use(FolderContext);
 	const { prefetch } = useSidebar();
-	const pathname = usePathname();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,

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

@@ -1 +1 @@
-{"version":3,"file":"base.js","names":[],"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 'fumadocs-core/link';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport { cn } from '@/utils/cn';\nimport { ScrollArea, type ScrollAreaProps, ScrollViewport } from '@/components/ui/scroll-area';\nimport { isActive } from '@/utils/urls';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n} from '@/components/ui/collapsible';\nimport { useMediaQuery } from 'fumadocs-core/utils/use-media-query';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { usePathname } from 'fumadocs-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, default behaviour depends on your React.js framework.\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,\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\n/**\n * scroll to the element if `active` is true\n */\nexport function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | 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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"}
+{"version":3,"file":"base.js","names":[],"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 'fumadocs-core/link';\nimport { useOnChange } from 'fumadocs-core/utils/use-on-change';\nimport { cn } from '@/utils/cn';\nimport { ScrollArea, type ScrollAreaProps, ScrollViewport } from '@/components/ui/scroll-area';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  type CollapsibleContentProps,\n  CollapsibleTrigger,\n  type CollapsibleTriggerProps,\n} from '@/components/ui/collapsible';\nimport { useMediaQuery } from 'fumadocs-core/utils/use-media-query';\nimport scrollIntoView from 'scroll-into-view-if-needed';\nimport { usePathname } from 'fumadocs-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, default behaviour depends on your React.js framework.\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,\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  active = false,\n  children,\n  ...props\n}: LinkProps & {\n  active?: boolean;\n  icon?: ReactNode;\n}) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { prefetch } = useSidebar();\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({\n  children,\n  active = false,\n  ...props\n}: LinkProps & {\n  active?: boolean;\n}) {\n  const ref = useRef<HTMLAnchorElement>(null);\n  const { open, setOpen, collapsible } = use(FolderContext)!;\n  const { prefetch } = useSidebar();\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\n/**\n * scroll to the element if `active` is true\n */\nexport function useAutoScroll(active: boolean, ref: RefObject<HTMLElement | 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.map

@@ -1 +1 @@
-{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"mappings":";;;;;;KAIK,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBAQO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA;AAAA,GACC,kBAAA;EAI+B,IAAA;EAAA,GAAA;AAAA,GAG7B,cAAA,CAAe,WAAA;EAChB,IAAA,EAAM,OAAA,CAAQ,YAAA;IAAgB,IAAA;EAAA;AAAA,MAC/B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"link-item.d.ts","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"mappings":";;;;;;KAKK,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBAQO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA;AAAA,GACC,kBAAA;EAI+B,IAAA;EAAA,GAAA;AAAA,GAG7B,cAAA,CAAe,WAAA;EAChB,IAAA,EAAM,OAAA,CAAQ,YAAA;IAAgB,IAAA;EAAA;AAAA,MAC/B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,3 +1,6 @@
+'use client';
+
+import { useLinkItemActive } from "../../utils/link-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/sidebar/link-item.tsx
@@ -6,6 +9,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 	* Render sidebar items from page tree
 	*/
 	return function SidebarLinkItem({ item, ...props }) {
+		const active = useLinkItemActive(item);
 		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 			...props,
 			children: item.children
@@ -14,6 +18,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			...props,
 			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
 				href: item.url,
+				active,
 				external: item.external,
 				children: [item.icon, item.text]
 			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
@@ -22,6 +27,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			href: item.url,
 			icon: item.icon,
 			external: item.external,
+			active,
 			...props,
 			children: item.text
 		});

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

@@ -1 +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 '@/utils/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"}
+{"version":3,"file":"link-item.js","names":[],"sources":["../../../src/components/sidebar/link-item.tsx"],"sourcesContent":["'use client';\nimport type { HTMLAttributes } from 'react';\nimport type * as Base from './base';\nimport { useLinkItemActive, type LinkItemType } from '@/utils/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    const active = useLinkItemActive(item);\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} active={active} 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\n        href={item.url}\n        icon={item.icon}\n        external={item.external}\n        active={active}\n        {...props}\n      >\n        {item.text}\n      </SidebarItem>\n    );\n  };\n}\n"],"mappings":";;;;;;AAcA,SAAgB,uBAAuB,EACrC,eACA,sBACA,mBACA,sBACA,eACqB;;;;AAIrB,QAAO,SAAS,gBAAgB,EAC9B,MACA,GAAG,SAGF;EACD,MAAM,SAAS,kBAAkB,KAAK;AACtC,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;IAAa;IAAQ,UAAU,KAAK;eAC/D,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;GACC,MAAM,KAAK;GACX,MAAM,KAAK;GACX,UAAU,KAAK;GACP;GACR,GAAI;aAEH,KAAK;IACM"}

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"],"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"}
+{"version":3,"file":"page-tree.d.ts","names":[],"sources":["../../../src/components/sidebar/page-tree.tsx"],"mappings":";;;;;;UAOiB,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,KAU5B,kBAAA,GAAqB,IAAA,QACjB,cAAA;AAAA,iBASO,sBAAA,CAAA;EACd,aAAA;EACA,oBAAA;EACA,iBAAA;EACA,oBAAA;EACA,gBAAA;EACA;AAAA,GACC,kBAAA,IAiE+B,UAAA,EAAY,OAAA,CAAQ,yBAAA,MAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

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