fumadocs-ui 13.4.10 → 14.0.1

package/dist/components/dialog/search-default.js

@@ -2,14 +2,15 @@
 import {
   SearchDialog,
   TagsList
-} from "../../chunk-YIOV4KEY.js";
+} from "../../chunk-TYZZJ335.js";
+import "../../chunk-QKOA6KEZ.js";
+import "../../chunk-5QPVK7QM.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-27HFSL7N.js";
 import {
   useI18n
 } from "../../chunk-EFMHXXHW.js";
-import "../../chunk-EDNTYBXS.js";
-import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-default.tsx
@@ -22,11 +23,24 @@ function DefaultSearchDialog({
   tags,
   api,
   delayMs,
+  type = "fetch",
+  allowClear = false,
   ...props
 }) {
   const { locale } = useI18n();
   const [tag, setTag] = useState(defaultTag);
-  const { search, setSearch, query } = useDocsSearch(locale, tag, api, delayMs);
+  const { search, setSearch, query } = useDocsSearch(
+    type === "fetch" ? {
+      type: "fetch",
+      api
+    } : {
+      type: "static",
+      from: api
+    },
+    locale,
+    tag,
+    delayMs
+  );
   useOnChange(defaultTag, (v) => {
     setTag(v);
   });
@@ -39,7 +53,15 @@ function DefaultSearchDialog({
       results: query.data ?? [],
       ...props,
       footer: tags ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TagsList, { tag, onTagChange: setTag, items: tags }),
+        /* @__PURE__ */ jsx(
+          TagsList,
+          {
+            tag,
+            onTagChange: setTag,
+            items: tags,
+            allowClear
+          }
+        ),
         props.footer
       ] }) : props.footer
     }

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

@@ -1,6 +1,5 @@
-import { SortedResult } from 'fumadocs-core/search/shared';
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { SortedResult } from 'fumadocs-core/server';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
 
 type SearchLink = [name: string, href: string];
 interface SharedProps {
@@ -22,16 +21,17 @@ interface SearchContentProps {
     items: SortedResult[];
     hideResults?: boolean;
 }
-declare function SearchDialog({ open, onOpenChange, footer, links, ...props }: SearchDialogProps): react.ReactElement;
+declare function SearchDialog({ open, onOpenChange, footer, links, ...props }: SearchDialogProps): ReactElement;
 interface TagItem {
     name: string;
-    value: string;
+    value: string | undefined;
 }
 interface TagsListProps extends HTMLAttributes<HTMLDivElement> {
     tag?: string;
-    onTagChange: (tag: string) => void;
+    onTagChange: (tag: string | undefined) => void;
+    allowClear?: boolean;
     items: TagItem[];
 }
-declare function TagsList({ tag, onTagChange, items, ...props }: TagsListProps): ReactNode;
+declare function TagsList({ tag, onTagChange, items, allowClear, ...props }: TagsListProps): ReactNode;
 
 export { SearchDialog, type SearchLink, type SharedProps, type TagItem, TagsList, type TagsListProps };

package/dist/components/dialog/search.js

@@ -1,12 +1,13 @@
 import {
   SearchDialog,
   TagsList
-} from "../../chunk-YIOV4KEY.js";
+} from "../../chunk-TYZZJ335.js";
+import "../../chunk-QKOA6KEZ.js";
+import "../../chunk-5QPVK7QM.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-27HFSL7N.js";
 import "../../chunk-EFMHXXHW.js";
-import "../../chunk-EDNTYBXS.js";
-import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 export {
   SearchDialog,

package/dist/components/files.js

@@ -4,6 +4,11 @@ import {
   CollapsibleContent,
   CollapsibleTrigger
 } from "../chunk-TQJ6YPJ3.js";
+import {
+  File,
+  Folder,
+  FolderOpen
+} from "../chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -11,10 +16,9 @@ import "../chunk-MLKGABMK.js";
 
 // src/components/files.tsx
 import { cva } from "class-variance-authority";
-import { FileIcon, FolderIcon, FolderOpen } from "lucide-react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var item = cva(
+var itemVariants = cva(
   "flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-fd-accent hover:text-fd-accent-foreground [&_svg]:size-4"
 );
 function Files({
@@ -30,33 +34,33 @@ function Files({
     }
   );
 }
-function File({
+function File2({
   name,
-  icon = /* @__PURE__ */ jsx(FileIcon, {}),
+  icon = /* @__PURE__ */ jsx(File, {}),
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: twMerge(item({ className })), ...rest, children: [
+  return /* @__PURE__ */ jsxs("div", { className: twMerge(itemVariants({ className })), ...rest, children: [
     icon,
     name
   ] });
 }
-function Folder({
+function Folder2({
   name,
   defaultOpen = false,
   ...props
 }) {
   const [open, setOpen] = useState(defaultOpen);
   return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, ...props, children: [
-    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: twMerge(item({ className: "w-full" })), children: [
-      open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(FolderIcon, {}),
+    /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: twMerge(itemVariants({ className: "w-full" })), children: [
+      open ? /* @__PURE__ */ jsx(FolderOpen, {}) : /* @__PURE__ */ jsx(Folder, {}),
       name
     ] }),
-    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 flex flex-col border-l pl-2", children: props.children }) })
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 flex flex-col border-l ps-2", children: props.children }) })
   ] });
 }
 export {
-  File,
+  File2 as File,
   Files,
-  Folder
+  Folder2 as Folder
 };

package/dist/components/heading.js

@@ -1,6 +1,7 @@
 import {
   Heading
-} from "../chunk-ERUVE5R6.js";
+} from "../chunk-IHIFNFRB.js";
+import "../chunk-5QPVK7QM.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/image-zoom.js

@@ -1,13 +1,10 @@
 "use client";
-import {
-  defaultImageSizes
-} from "../chunk-UOD2T27N.js";
 import "../chunk-MLKGABMK.js";
 
 // src/components/image-zoom.tsx
 import Image from "next/image";
+import "./image-zoom.css";
 import Zoom from "react-medium-image-zoom";
-import "../../dist/image-zoom.css";
 import { jsx } from "react/jsx-runtime";
 function getImageSrc(src) {
   if (typeof src === "string") return src;
@@ -31,7 +28,13 @@ function ImageZoom({
         sizes: void 0,
         ...zoomInProps
       },
-      children: children ?? /* @__PURE__ */ jsx(Image, { sizes: defaultImageSizes, ...props })
+      children: children ?? /* @__PURE__ */ jsx(
+        Image,
+        {
+          sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 70vw, 900px",
+          ...props
+        }
+      )
     }
   );
 }

package/dist/components/inline-toc.js

@@ -4,11 +4,13 @@ import {
   CollapsibleContent,
   CollapsibleTrigger
 } from "../chunk-TQJ6YPJ3.js";
+import {
+  ChevronDown
+} from "../chunk-5QPVK7QM.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 
 // src/components/inline-toc.tsx
-import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function InlineTOC({
   items,

package/dist/components/layout/language-toggle.d.ts

@@ -1,6 +1,7 @@
-import { PopoverProps } from '@radix-ui/react-popover';
+import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
 
-type LanguageSelectProps = Omit<PopoverProps, 'open' | 'onOpenChange'>;
+type LanguageSelectProps = ButtonHTMLAttributes<HTMLButtonElement>;
 declare function LanguageToggle(props: LanguageSelectProps): React.ReactElement;
+declare function LanguageToggleText(props: HTMLAttributes<HTMLSpanElement>): React.ReactElement;
 
-export { type LanguageSelectProps, LanguageToggle };
+export { type LanguageSelectProps, LanguageToggle, LanguageToggleText };

package/dist/components/layout/language-toggle.js

@@ -1,12 +1,14 @@
 "use client";
 import {
-  LanguageToggle
-} from "../../chunk-NSEJBI4V.js";
-import "../../chunk-CP67AHDD.js";
-import "../../chunk-EFMHXXHW.js";
-import "../../chunk-EDNTYBXS.js";
+  LanguageToggle,
+  LanguageToggleText
+} from "../../chunk-KZTWSBYY.js";
+import "../../chunk-QKOA6KEZ.js";
+import "../../chunk-IVBHRX3O.js";
 import "../../chunk-TK3TM3MR.js";
+import "../../chunk-EFMHXXHW.js";
 import "../../chunk-MLKGABMK.js";
 export {
-  LanguageToggle
+  LanguageToggle,
+  LanguageToggleText
 };

package/dist/components/layout/root-toggle.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 
 interface Option {
     /**
@@ -7,11 +7,11 @@ interface Option {
     url: string;
     icon?: ReactNode;
     title: ReactNode;
-    description: ReactNode;
+    description?: ReactNode;
     props?: HTMLAttributes<HTMLElement>;
 }
 declare function RootToggle({ options, ...props }: {
     options: Option[];
 } & HTMLAttributes<HTMLButtonElement>): React.ReactElement;
 
-export { RootToggle };
+export { type Option, RootToggle };

package/dist/components/layout/root-toggle.js

@@ -1,79 +1,13 @@
 "use client";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "../../chunk-CP67AHDD.js";
-import {
-  isActive
-} from "../../chunk-UOD2T27N.js";
-import {
-  useSidebar
-} from "../../chunk-27HFSL7N.js";
-import {
-  twMerge
-} from "../../chunk-TK3TM3MR.js";
+  RootToggle
+} from "../../chunk-WRBUXI2A.js";
+import "../../chunk-CDPVENXR.js";
+import "../../chunk-IVBHRX3O.js";
+import "../../chunk-5QPVK7QM.js";
+import "../../chunk-TK3TM3MR.js";
+import "../../chunk-27HFSL7N.js";
 import "../../chunk-MLKGABMK.js";
-
-// src/components/layout/root-toggle.tsx
-import { ChevronDown } from "lucide-react";
-import { useCallback, useState } from "react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function RootToggle({
-  options,
-  ...props
-}) {
-  const [open, setOpen] = useState(false);
-  const { closeOnRedirect } = useSidebar();
-  const pathname = usePathname();
-  const selected = options.find((item) => isActive(item.url, pathname, true)) ?? options[0];
-  const onClick = useCallback(() => {
-    closeOnRedirect.current = false;
-    setOpen(false);
-  }, [closeOnRedirect]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs(
-      PopoverTrigger,
-      {
-        ...props,
-        className: twMerge(
-          "-mx-2 flex flex-row items-center gap-2.5 rounded-lg p-2 hover:bg-fd-accent/50 hover:text-fd-accent-foreground",
-          props.className
-        ),
-        children: [
-          /* @__PURE__ */ jsx(Item, { ...selected }),
-          /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground md:me-1.5" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: options.map((item) => /* @__PURE__ */ jsx(
-      Link,
-      {
-        href: item.url,
-        onClick,
-        ...item.props,
-        className: twMerge(
-          "flex w-full flex-row items-center gap-2.5 p-2",
-          selected === item ? "bg-fd-accent text-fd-accent-foreground" : "hover:bg-fd-accent/50",
-          item.props?.className
-        ),
-        children: /* @__PURE__ */ jsx(Item, { ...item })
-      },
-      item.url
-    )) })
-  ] });
-}
-function Item({ title, icon, description }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon,
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-fd-muted-foreground", children: description })
-    ] })
-  ] });
-}
 export {
   RootToggle
 };

package/dist/components/tabs.js

@@ -7,7 +7,16 @@ import {
 } from "../chunk-MLKGABMK.js";
 
 // src/components/tabs.tsx
-import { useMemo, useState, useCallback, useLayoutEffect } from "react";
+import {
+  useMemo,
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  useRef,
+  useLayoutEffect,
+  useEffect
+} from "react";
 
 // src/components/ui/tabs.tsx
 var tabs_exports = {};
@@ -83,13 +92,7 @@ function removeChangeListener(id, listener) {
     list.filter((item) => item !== listener)
   );
 }
-function update(id, v, persist) {
-  listeners.get(id)?.forEach((item) => {
-    item(v);
-  });
-  if (persist) localStorage.setItem(id, v);
-  else sessionStorage.setItem(id, v);
-}
+var ValueChangeContext = createContext(() => void 0);
 function Tabs2({
   groupId,
   items = [],
@@ -99,10 +102,12 @@ function Tabs2({
 }) {
   const values = useMemo(() => items.map((item) => toValue(item)), [items]);
   const [value, setValue] = useState(values[defaultIndex]);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
   useLayoutEffect(() => {
     if (!groupId) return;
     const onUpdate = (v) => {
-      if (values.includes(v)) setValue(v);
+      if (valuesRef.current.includes(v)) setValue(v);
     };
     const previous = persist ? localStorage.getItem(groupId) : sessionStorage.getItem(groupId);
     if (previous) onUpdate(previous);
@@ -110,11 +115,15 @@ function Tabs2({
     return () => {
       removeChangeListener(groupId, onUpdate);
     };
-  }, [groupId, persist, values]);
+  }, [groupId, persist]);
   const onValueChange = useCallback(
     (v) => {
       if (groupId) {
-        update(groupId, v, persist);
+        listeners.get(groupId)?.forEach((item) => {
+          item(v);
+        });
+        if (persist) localStorage.setItem(groupId, v);
+        else sessionStorage.setItem(groupId, v);
       } else {
         setValue(v);
       }
@@ -130,7 +139,7 @@ function Tabs2({
       className: twMerge("my-4", props.className),
       children: [
         /* @__PURE__ */ jsx2(TabsList, { children: values.map((v, i) => /* @__PURE__ */ jsx2(TabsTrigger, { value: v, children: items[i] }, v)) }),
-        props.children
+        /* @__PURE__ */ jsx2(ValueChangeContext.Provider, { value: onValueChange, children: props.children })
       ]
     }
   );
@@ -143,10 +152,18 @@ function Tab({
   className,
   ...props
 }) {
+  const v = toValue(value);
+  const onValueChange = useContext(ValueChangeContext);
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (hash === props.id) {
+      onValueChange(v);
+    }
+  }, [onValueChange, props.id, v]);
   return /* @__PURE__ */ jsx2(
     TabsContent,
     {
-      value: toValue(value),
+      value: v,
       className: twMerge(
         "prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none",
         className

package/dist/components/type-table.d.ts

@@ -1,13 +1,15 @@
-declare function Info({ children, }: {
-    children: React.ReactNode;
-}): React.ReactElement;
+import { ReactNode } from 'react';
+
+declare function Info({ children }: {
+    children: ReactNode;
+}): ReactNode;
 interface ObjectType {
     /**
      * Additional description of the field
      */
-    description?: React.ReactNode;
+    description?: ReactNode;
     type: string;
-    typeDescription?: string;
+    typeDescription?: ReactNode;
     /**
      * Optional link to the type
      */

package/dist/components/type-table.js

@@ -3,23 +3,23 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../chunk-CP67AHDD.js";
+} from "../chunk-IVBHRX3O.js";
+import {
+  Info
+} from "../chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 
 // src/components/type-table.tsx
-import { InfoIcon } from "lucide-react";
 import Link from "next/link";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
-function Info({
-  children
-}) {
+function Info2({ children }) {
   return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "prose text-sm", children })
+    /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Info, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "prose max-h-[400px] min-w-[220px] max-w-[400px] overflow-auto text-sm prose-no-margin", children })
   ] });
 }
 var th = cva("p-2 font-medium first:pl-0 last:pr-0");
@@ -45,18 +45,18 @@ function TypeTable({
     /* @__PURE__ */ jsx("tbody", { className: "border-collapse divide-y divide-fd-border", children: Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsxs("tr", { children: [
       /* @__PURE__ */ jsx("td", { className: td(), children: /* @__PURE__ */ jsxs("div", { className: field(), children: [
         /* @__PURE__ */ jsx("code", { className: twMerge(code({ color: "primary" })), children: key }),
-        value.description ? /* @__PURE__ */ jsx(Info, { children: value.description }) : null
+        value.description ? /* @__PURE__ */ jsx(Info2, { children: value.description }) : null
       ] }) }),
       /* @__PURE__ */ jsx("td", { className: td(), children: /* @__PURE__ */ jsxs("div", { className: field(), children: [
         /* @__PURE__ */ jsx("code", { className: code(), children: value.type }),
-        value.typeDescription ? /* @__PURE__ */ jsx(Info, { children: /* @__PURE__ */ jsx("pre", { className: "overflow-auto bg-fd-secondary text-fd-secondary-foreground", children: value.typeDescription }) }) : null,
-        value.typeDescriptionLink ? /* @__PURE__ */ jsx(Link, { href: value.typeDescriptionLink, children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }) }) : null
+        value.typeDescription ? /* @__PURE__ */ jsx(Info2, { children: value.typeDescription }) : null,
+        value.typeDescriptionLink ? /* @__PURE__ */ jsx(Link, { href: value.typeDescriptionLink, children: /* @__PURE__ */ jsx(Info, { className: "size-4" }) }) : null
       ] }) }),
       /* @__PURE__ */ jsx("td", { className: td(), children: value.default ? /* @__PURE__ */ jsx("code", { className: code(), children: value.default }) : /* @__PURE__ */ jsx("span", { children: "-" }) })
     ] }, key)) })
   ] }) });
 }
 export {
-  Info,
+  Info2 as Info,
   TypeTable
 };

package/dist/dynamic-sidebar-QWGMOUMS.js

@@ -0,0 +1,129 @@
+"use client";
+import {
+  Sidebar
+} from "./chunk-BN7HGCQ4.js";
+import "./chunk-V6RONFCQ.js";
+import "./chunk-CDPVENXR.js";
+import "./chunk-TQJ6YPJ3.js";
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import "./chunk-2FLZOPQN.js";
+import {
+  PanelLeft
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import "./chunk-ET4TW6M5.js";
+import "./chunk-YL3MZH7N.js";
+import {
+  useSidebar
+} from "./chunk-27HFSL7N.js";
+import "./chunk-EFMHXXHW.js";
+import "./chunk-MLKGABMK.js";
+
+// src/components/layout/dynamic-sidebar.tsx
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DynamicSidebar(props) {
+  const { collapsed, setCollapsed } = useSidebar();
+  const [hover, setHover] = useState(false);
+  const timerRef = useRef(0);
+  const closeTimeRef = useRef(0);
+  useOnChange(collapsed, () => {
+    setHover(false);
+    closeTimeRef.current = Date.now() + 150;
+  });
+  const onEnter = useCallback((e) => {
+    if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) return;
+    window.clearTimeout(timerRef.current);
+    setHover(true);
+  }, []);
+  const onLeave = useCallback((e) => {
+    if (e.pointerType === "touch") return;
+    window.clearTimeout(timerRef.current);
+    timerRef.current = window.setTimeout(
+      () => {
+        setHover(false);
+        closeTimeRef.current = Date.now() + 150;
+      },
+      Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500
+    );
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-y-0 start-0 w-6 max-md:hidden",
+          onPointerEnter: onEnter,
+          onPointerLeave: onLeave
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Collapse Sidebar",
+          className: twMerge(
+            buttonVariants({
+              color: "secondary",
+              size: "icon",
+              className: "fixed start-4 bottom-2 z-10 max-md:hidden"
+            })
+          ),
+          onClick: () => {
+            setCollapsed((v) => !v);
+          },
+          children: /* @__PURE__ */ jsx(PanelLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `#nd-page { --fd-sidebar-width: 0px; }` })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        ...props,
+        aside: useMemo(
+          () => ({
+            "data-collapse": collapsed,
+            "data-hover": hover,
+            onPointerEnter: collapsed ? onEnter : void 0,
+            onPointerLeave: collapsed ? onLeave : void 0,
+            "aria-hidden": Boolean(collapsed && !hover),
+            style: {
+              // the offset given to docs content when the sidebar is collapsed
+              "--fd-content-offset": "calc(var(--fd-sidebar-width) * -1)"
+            },
+            className: twMerge(
+              "md:transition-[transform,margin,flex]",
+              collapsed && [
+                "md:me-[var(--fd-content-offset)] md:grow-0 md:shadow-md",
+                hover ? "md:translate-x-0" : "md:translate-x-[calc(var(--fd-sidebar-width)*-1)] rtl:md:translate-x-[var(--fd-sidebar-width)]"
+              ],
+              ``
+            )
+          }),
+          [collapsed, hover, onEnter, onLeave]
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "none",
+        className: twMerge("transition-all max-md:hidden", collapsed && "flex-1")
+      }
+    )
+  ] });
+}
+export {
+  DynamicSidebar as default
+};