@fumadocs/base-ui 16.6.4 → 16.6.6

package/css/generated/flux.css

@@ -2,6 +2,7 @@
 @source inline("!isActive");
 @source inline("!open");
 @source inline("*:rounded-lg");
+@source inline("---spacing");
 @source inline("--fd-toc-width");
 @source inline("--removed-body-scroll-bar-size");
 @source inline("--spacing");
@@ -12,7 +13,6 @@
 @source inline("[&_svg]:shrink-0");
 @source inline("[&_svg]:size-4");
 @source inline("[grid-area:main]");
-@source inline("[scrollbar-width:none]");
 @source inline("a");
 @source inline("absolute");
 @source inline("active");
@@ -187,6 +187,7 @@
 @source inline("inline-flex");
 @source inline("input");
 @source inline("inset-0");
+@source inline("inset-x-0");
 @source inline("interface");
 @source inline("invisible");
 @source inline("isActive");
@@ -207,7 +208,7 @@
 @source inline("located");
 @source inline("lucide-react");
 @source inline("main");
-@source inline("mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)]");
+@source inline("mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)]");
 @source inline("max");
 @source inline("max-h-[50vh]");
 @source inline("max-w-[1200px]");
@@ -221,6 +222,7 @@
 @source inline("menuItems");
 @source inline("mergeRefs");
 @source inline("min");
+@source inline("min-h-0");
 @source inline("min-h-11");
 @source inline("min-w-0");
 @source inline("mode");
@@ -249,6 +251,7 @@
 @source inline("number");
 @source inline("object");
 @source inline("of");
+@source inline("onAnimationComplete");
 @source inline("onClick");
 @source inline("onOpenChange");
 @source inline("opacity");
@@ -260,7 +263,6 @@
 @source inline("overflow-x-clip");
 @source inline("overflow-y-auto");
 @source inline("overflow-y-hidden");
-@source inline("overscroll-contain");
 @source inline("p");
 @source inline("p-1");
 @source inline("p-1.5");
@@ -314,10 +316,12 @@
 @source inline("rounded-lg");
 @source inline("rounded-xl");
 @source inline("rtl:rotate-180");
+@source inline("scale");
 @source inline("searchToggle");
 @source inline("secondary");
 @source inline("selected");
 @source inline("selectedIdx");
+@source inline("setBlockScroll");
 @source inline("setContainer");
 @source inline("setDate");
 @source inline("setOpen");
@@ -381,6 +385,7 @@
 @source inline("tocOptions");
 @source inline("tocPopoverEnabled");
 @source inline("tool");
+@source inline("top-0");
 @source inline("transform");
 @source inline("transition");
 @source inline("transition-all");
@@ -388,6 +393,7 @@
 @source inline("transition-opacity");
 @source inline("transition-transform");
 @source inline("translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)]");
+@source inline("translateY");
 @source inline("tree");
 @source inline("true");
 @source inline("truncate");
@@ -404,6 +410,7 @@
 @source inline("useMemo");
 @source inline("usePathname");
 @source inline("useRef");
+@source inline("useSearchContext");
 @source inline("useSidebar");
 @source inline("useState");
 @source inline("useTOCItems");

package/css/generated/shared.css

@@ -473,6 +473,7 @@
 @source inline("is");
 @source inline("isActive");
 @source inline("isLoading");
+@source inline("isOpen");
 @source inline("isWindows");
 @source inline("it");
 @source inline("item");
@@ -531,6 +532,7 @@
 @source inline("main");
 @source inline("make");
 @source inline("mapped");
+@source inline("margin");
 @source inline("marginBottom");
 @source inline("mark");
 @source inline("marked");

package/dist/contexts/search.d.ts

@@ -49,6 +49,7 @@ interface SearchProviderProps {
 }
 interface SearchContextType {
   enabled: boolean;
+  open: boolean;
   hotKey: HotKey[];
   setOpenSearch: (value: boolean) => void;
 }

package/dist/contexts/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","names":[],"sources":["../../src/contexts/search.tsx"],"mappings":";;;;UAaU,MAAA;EACR,OAAA,EAAS,SAAA;;AAHI;;EAQb,GAAA,aAAgB,CAAA,EAAG,aAAA;AAAA;AAAA,UAGJ,WAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,KAGL,UAAA,IAAc,IAAA,UAAc,IAAA;AAAA,UAEvB,OAAA;EACf,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,mBAAA;EAZW;;;;;EAkB1B,OAAA;EAbU;;;EAkBV,KAAA,GAAQ,UAAA;EAlBkC;AAE5C;;;;EAuBE,MAAA,GAAS,MAAA;EAlBM;;;;;EAyBf,YAAA,EAAc,aAAA,CAAc,WAAA;EAAd;;;EAKd,OAAA,GAAU,OAAA,CAAQ,WAAA,GAAc,MAAA;EAEhC,QAAA,GAAW,SAAA;AAAA;AAAA,UAGH,iBAAA;EACR,OAAA;EACA,MAAA,EAAQ,MAAA;EACR,aAAA,GAAgB,KAAA;AAAA;AAAA,iBASF,gBAAA,CAAA,GAAoB,iBAAA;AAAA,iBAgBpB,cAAA,CAAA;EACd,YAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EAUA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBA+CN,UAAA,CAAA;EAAa;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,SAAA"}
+{"version":3,"file":"search.d.ts","names":[],"sources":["../../src/contexts/search.tsx"],"mappings":";;;;UAaU,MAAA;EACR,OAAA,EAAS,SAAA;;AAHI;;EAQb,GAAA,aAAgB,CAAA,EAAG,aAAA;AAAA;AAAA,UAGJ,WAAA;EACf,IAAA;EACA,YAAA,GAAe,IAAA;AAAA;AAAA,KAGL,UAAA,IAAc,IAAA,UAAc,IAAA;AAAA,UAEvB,OAAA;EACf,IAAA;EACA,KAAA;AAAA;AAAA,UAGe,mBAAA;EAZW;;;;;EAkB1B,OAAA;EAbU;;;EAkBV,KAAA,GAAQ,UAAA;EAlBkC;AAE5C;;;;EAuBE,MAAA,GAAS,MAAA;EAlBM;;;;;EAyBf,YAAA,EAAc,aAAA,CAAc,WAAA;EAAd;;;EAKd,OAAA,GAAU,OAAA,CAAQ,WAAA,GAAc,MAAA;EAEhC,QAAA,GAAW,SAAA;AAAA;AAAA,UAGH,iBAAA;EACR,OAAA;EACA,IAAA;EACA,MAAA,EAAQ,MAAA;EACR,aAAA,GAAgB,KAAA;AAAA;AAAA,iBAUF,gBAAA,CAAA,GAAoB,iBAAA;AAAA,iBAgBpB,cAAA,CAAA;EACd,YAAA;EACA,QAAA;EACA,OAAA;EACA,OAAA;EACA,MAAA;EAUA;AAAA,GACC,mBAAA,GAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAgDN,UAAA,CAAA;EAAa;AAAA;EAAc,QAAA,EAAU,SAAA;AAAA,IAAW,SAAA"}

package/dist/contexts/search.js

@@ -6,6 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/contexts/search.tsx
 const SearchContext = createContext({
 	enabled: false,
+	open: false,
 	hotKey: [],
 	setOpenSearch: () => void 0
 });
@@ -42,9 +43,10 @@ function SearchProvider({ SearchDialog, children, preload = true, options, hotKe
 	return /* @__PURE__ */ jsxs(SearchContext, {
 		value: useMemo(() => ({
 			enabled: true,
+			open: isOpen ?? false,
 			hotKey,
 			setOpenSearch: setIsOpen
-		}), [hotKey]),
+		}), [isOpen, hotKey]),
 		children: [isOpen !== void 0 && /* @__PURE__ */ jsx(Suspense, {
 			fallback: null,
 			children: /* @__PURE__ */ jsx(SearchDialog, {

package/dist/contexts/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","names":[],"sources":["../../src/contexts/search.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  Suspense,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface HotKey {\n  display: ReactNode;\n\n  /**\n   * Key code or a function determining whether the key is pressed.\n   */\n  key: string | ((e: KeyboardEvent) => boolean);\n}\n\nexport interface SharedProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nexport type SearchLink = [name: string, href: string];\n\nexport interface TagItem {\n  name: string;\n  value: string;\n}\n\nexport interface SearchProviderProps {\n  /**\n   * Preload search dialog before opening it\n   *\n   * @defaultValue `true`\n   */\n  preload?: boolean;\n\n  /**\n   * Custom links to be displayed if search is empty\n   */\n  links?: SearchLink[];\n\n  /**\n   * Hotkeys for triggering search dialog\n   *\n   * @defaultValue Meta/Ctrl + K\n   */\n  hotKey?: HotKey[];\n\n  /**\n   * Replace default search dialog, allowing you to use other solutions such as Algolia Search\n   *\n   * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`\n   */\n  SearchDialog: ComponentType<SharedProps>;\n\n  /**\n   * Additional props to the dialog\n   */\n  options?: Partial<SharedProps & Record<string, unknown>>;\n\n  children?: ReactNode;\n}\n\ninterface SearchContextType {\n  enabled: boolean;\n  hotKey: HotKey[];\n  setOpenSearch: (value: boolean) => void;\n}\n\nconst SearchContext = createContext<SearchContextType>({\n  enabled: false,\n  hotKey: [],\n  setOpenSearch: () => undefined,\n});\n\nexport function useSearchContext(): SearchContextType {\n  return use(SearchContext);\n}\n\nfunction MetaOrControl() {\n  const [key, setKey] = useState('⌘');\n\n  useEffect(() => {\n    const isWindows = window.navigator.userAgent.includes('Windows');\n\n    if (isWindows) setKey('Ctrl');\n  }, []);\n\n  return key;\n}\n\nexport function SearchProvider({\n  SearchDialog,\n  children,\n  preload = true,\n  options,\n  hotKey = [\n    {\n      key: (e) => e.metaKey || e.ctrlKey,\n      display: <MetaOrControl />,\n    },\n    {\n      key: 'k',\n      display: 'K',\n    },\n  ],\n  links,\n}: SearchProviderProps) {\n  const [isOpen, setIsOpen] = useState(preload ? false : undefined);\n  const onKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    if (hotKey.every((v) => (typeof v.key === 'string' ? e.key === v.key : v.key(e)))) {\n      setIsOpen((open) => !open);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    window.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n    };\n  }, [hotKey]);\n\n  return (\n    <SearchContext\n      value={useMemo(\n        () => ({\n          enabled: true,\n          hotKey,\n          setOpenSearch: setIsOpen,\n        }),\n        [hotKey],\n      )}\n    >\n      {isOpen !== undefined && (\n        <Suspense fallback={null}>\n          <SearchDialog\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            // @ts-expect-error -- insert prop for official UIs\n            links={links}\n            {...options}\n          />\n        </Suspense>\n      )}\n\n      {children}\n    </SearchContext>\n  );\n}\n\n/**\n * Show children only when search is enabled via React Context\n */\nexport function SearchOnly({ children }: { children: ReactNode }) {\n  const search = useSearchContext();\n\n  if (search.enabled) return children;\n}\n"],"mappings":";;;;;;AA2EA,MAAM,gBAAgB,cAAiC;CACrD,SAAS;CACT,QAAQ,EAAE;CACV,qBAAqB;CACtB,CAAC;AAEF,SAAgB,mBAAsC;AACpD,QAAO,IAAI,cAAc;;AAG3B,SAAS,gBAAgB;CACvB,MAAM,CAAC,KAAK,UAAU,SAAS,IAAI;AAEnC,iBAAgB;AAGd,MAFkB,OAAO,UAAU,UAAU,SAAS,UAAU,CAEjD,QAAO,OAAO;IAC5B,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,eAAe,EAC7B,cACA,UACA,UAAU,MACV,SACA,SAAS,CACP;CACE,MAAM,MAAM,EAAE,WAAW,EAAE;CAC3B,SAAS,oBAAC,kBAAgB;CAC3B,EACD;CACE,KAAK;CACL,SAAS;CACV,CACF,EACD,SACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAAS,UAAU,QAAQ,OAAU;CACjE,MAAM,YAAY,gBAAgB,MAAqB;AACrD,MAAI,OAAO,OAAO,MAAO,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAE,EAAE;AACjF,cAAW,SAAS,CAAC,KAAK;AAC1B,KAAE,gBAAgB;;GAEpB;AAEF,iBAAgB;AACd,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa;AACX,UAAO,oBAAoB,WAAW,UAAU;;IAEjD,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC;EACC,OAAO,eACE;GACL,SAAS;GACT;GACA,eAAe;GAChB,GACD,CAAC,OAAO,CACT;aAEA,WAAW,UACV,oBAAC;GAAS,UAAU;aAClB,oBAAC;IACC,MAAM;IACN,cAAc;IAEP;IACP,GAAI;KACJ;IACO,EAGZ;GACa;;;;;AAOpB,SAAgB,WAAW,EAAE,YAAqC;AAGhE,KAFe,kBAAkB,CAEtB,QAAS,QAAO"}
+{"version":3,"file":"search.js","names":[],"sources":["../../src/contexts/search.tsx"],"sourcesContent":["'use client';\nimport {\n  type ComponentType,\n  createContext,\n  type ReactNode,\n  Suspense,\n  use,\n  useEffect,\n  useEffectEvent,\n  useMemo,\n  useState,\n} from 'react';\n\ninterface HotKey {\n  display: ReactNode;\n\n  /**\n   * Key code or a function determining whether the key is pressed.\n   */\n  key: string | ((e: KeyboardEvent) => boolean);\n}\n\nexport interface SharedProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nexport type SearchLink = [name: string, href: string];\n\nexport interface TagItem {\n  name: string;\n  value: string;\n}\n\nexport interface SearchProviderProps {\n  /**\n   * Preload search dialog before opening it\n   *\n   * @defaultValue `true`\n   */\n  preload?: boolean;\n\n  /**\n   * Custom links to be displayed if search is empty\n   */\n  links?: SearchLink[];\n\n  /**\n   * Hotkeys for triggering search dialog\n   *\n   * @defaultValue Meta/Ctrl + K\n   */\n  hotKey?: HotKey[];\n\n  /**\n   * Replace default search dialog, allowing you to use other solutions such as Algolia Search\n   *\n   * It receives the `open` and `onOpenChange` prop, can be lazy loaded with `next/dynamic`\n   */\n  SearchDialog: ComponentType<SharedProps>;\n\n  /**\n   * Additional props to the dialog\n   */\n  options?: Partial<SharedProps & Record<string, unknown>>;\n\n  children?: ReactNode;\n}\n\ninterface SearchContextType {\n  enabled: boolean;\n  open: boolean;\n  hotKey: HotKey[];\n  setOpenSearch: (value: boolean) => void;\n}\n\nconst SearchContext = createContext<SearchContextType>({\n  enabled: false,\n  open: false,\n  hotKey: [],\n  setOpenSearch: () => undefined,\n});\n\nexport function useSearchContext(): SearchContextType {\n  return use(SearchContext);\n}\n\nfunction MetaOrControl() {\n  const [key, setKey] = useState('⌘');\n\n  useEffect(() => {\n    const isWindows = window.navigator.userAgent.includes('Windows');\n\n    if (isWindows) setKey('Ctrl');\n  }, []);\n\n  return key;\n}\n\nexport function SearchProvider({\n  SearchDialog,\n  children,\n  preload = true,\n  options,\n  hotKey = [\n    {\n      key: (e) => e.metaKey || e.ctrlKey,\n      display: <MetaOrControl />,\n    },\n    {\n      key: 'k',\n      display: 'K',\n    },\n  ],\n  links,\n}: SearchProviderProps) {\n  const [isOpen, setIsOpen] = useState(preload ? false : undefined);\n  const onKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    if (hotKey.every((v) => (typeof v.key === 'string' ? e.key === v.key : v.key(e)))) {\n      setIsOpen((open) => !open);\n      e.preventDefault();\n    }\n  });\n\n  useEffect(() => {\n    window.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.removeEventListener('keydown', onKeyDown);\n    };\n  }, [hotKey]);\n\n  return (\n    <SearchContext\n      value={useMemo(\n        () => ({\n          enabled: true,\n          open: isOpen ?? false,\n          hotKey,\n          setOpenSearch: setIsOpen,\n        }),\n        [isOpen, hotKey],\n      )}\n    >\n      {isOpen !== undefined && (\n        <Suspense fallback={null}>\n          <SearchDialog\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            // @ts-expect-error -- insert prop for official UIs\n            links={links}\n            {...options}\n          />\n        </Suspense>\n      )}\n\n      {children}\n    </SearchContext>\n  );\n}\n\n/**\n * Show children only when search is enabled via React Context\n */\nexport function SearchOnly({ children }: { children: ReactNode }) {\n  const search = useSearchContext();\n\n  if (search.enabled) return children;\n}\n"],"mappings":";;;;;;AA4EA,MAAM,gBAAgB,cAAiC;CACrD,SAAS;CACT,MAAM;CACN,QAAQ,EAAE;CACV,qBAAqB;CACtB,CAAC;AAEF,SAAgB,mBAAsC;AACpD,QAAO,IAAI,cAAc;;AAG3B,SAAS,gBAAgB;CACvB,MAAM,CAAC,KAAK,UAAU,SAAS,IAAI;AAEnC,iBAAgB;AAGd,MAFkB,OAAO,UAAU,UAAU,SAAS,UAAU,CAEjD,QAAO,OAAO;IAC5B,EAAE,CAAC;AAEN,QAAO;;AAGT,SAAgB,eAAe,EAC7B,cACA,UACA,UAAU,MACV,SACA,SAAS,CACP;CACE,MAAM,MAAM,EAAE,WAAW,EAAE;CAC3B,SAAS,oBAAC,kBAAgB;CAC3B,EACD;CACE,KAAK;CACL,SAAS;CACV,CACF,EACD,SACsB;CACtB,MAAM,CAAC,QAAQ,aAAa,SAAS,UAAU,QAAQ,OAAU;CACjE,MAAM,YAAY,gBAAgB,MAAqB;AACrD,MAAI,OAAO,OAAO,MAAO,OAAO,EAAE,QAAQ,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,CAAE,EAAE;AACjF,cAAW,SAAS,CAAC,KAAK;AAC1B,KAAE,gBAAgB;;GAEpB;AAEF,iBAAgB;AACd,SAAO,iBAAiB,WAAW,UAAU;AAC7C,eAAa;AACX,UAAO,oBAAoB,WAAW,UAAU;;IAEjD,CAAC,OAAO,CAAC;AAEZ,QACE,qBAAC;EACC,OAAO,eACE;GACL,SAAS;GACT,MAAM,UAAU;GAChB;GACA,eAAe;GAChB,GACD,CAAC,QAAQ,OAAO,CACjB;aAEA,WAAW,UACV,oBAAC;GAAS,UAAU;aAClB,oBAAC;IACC,MAAM;IACN,cAAc;IAEP;IACP,GAAI;KACJ;IACO,EAGZ;GACa;;;;;AAOpB,SAAgB,WAAW,EAAE,YAAqC;AAGhE,KAFe,kBAAkB,CAEtB,QAAS,QAAO"}

package/dist/layouts/flux/index.d.ts

@@ -58,7 +58,6 @@ declare function NavigationPanel({
   tabDropdown,
   tool,
   link,
-  className,
   children,
   ...props
 }: NavigationPanelProps & Omit<ComponentProps<typeof motion.div>, 'children'> & {

package/dist/layouts/flux/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/flux/index.tsx"],"mappings":";;;;;;;;;;;UAqBiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAHK;;;EAQf,cAAA,GAAiB,cAAA,CAAe,cAAA;EAEhC,qBAAA,IAAyB,KAAA,EAAO,oBAAA,KAAyB,SAAA;AAAA;AAAA,UAGjD,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBiC;;;EAwBtD,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;AAAA;AAAA,iBAGK,UAAA,CAAA;EACd,IAAA;EACA,GAAA;EACA,OAAA;IACE,OAAA,EAAS,cAAA;IACT,IAAA,EAAM,WAAA;IACN,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,cAAA;EACA,qBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAuID,oBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,SAAA;EACb,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;AAAA;AAAA,iBAGQ,eAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,IAAA;EACA,IAAA;EACA,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GACD,IAAA,CAAK,cAAA,QAAsB,MAAA,CAAO,GAAA;EA5LgC;;AACnE;EA+LG,QAAA,IAAY,eAAA,EAAiB,SAAA,KAAc,SAAA;AAAA,IAC5C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiCa,sBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,GAAA;EAAS,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/layouts/flux/index.tsx"],"mappings":";;;;;;;;;;;UAsBiB,eAAA,SAAwB,eAAA;EACvC,IAAA,EAAM,QAAA,CAAS,IAAA;EAEf,OAAA,GAAU,cAAA;EAHK;;;EAQf,cAAA,GAAiB,cAAA,CAAe,cAAA;EAEhC,qBAAA,IAAyB,KAAA,EAAO,oBAAA,KAAyB,SAAA;AAAA;AAAA,UAGjD,cAAA,SAEN,cAAA,WACA,IAAA,CAAK,cAAA,QAAsB,OAAA;EAC7B,OAAA;EACA,SAAA,GAAY,SAAA;EACZ,UAAA,GAAa,OAAA,CAAQ,yBAAA;EAnBiC;;;EAwBtD,IAAA,GAAO,mBAAA,KAAwB,qBAAA;EAE/B,MAAA,GAAS,SAAA;EACT,MAAA,GAAS,SAAA;AAAA;AAAA,iBAGK,UAAA,CAAA;EACd,IAAA;EACA,GAAA;EACA,OAAA;IACE,OAAA,EAAS,cAAA;IACT,IAAA,EAAM,WAAA;IACN,gBAAA;IACA,QAAA;IAAA,GACG;EAAA;EAEL,YAAA;EACA,WAAA;EACA,IAAA;EACA,QAAA;EACA,cAAA;EACA,qBAAA;EAAA,GACG;AAAA,GACF,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,UAuID,oBAAA;EACf,IAAA,EAAM,SAAA;EACN,WAAA,EAAa,SAAA;EACb,IAAA,EAAM,SAAA;EACN,IAAA,EAAM,SAAA;AAAA;AAAA,iBAGQ,eAAA,CAAA;EACd,IAAA;EACA,WAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,GACD,IAAA,CAAK,cAAA,QAAsB,MAAA,CAAO,GAAA;EA3LgC;;AACnE;EA8LG,QAAA,IAAY,eAAA,EAAiB,SAAA,KAAc,SAAA;AAAA,IAC5C,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAyCa,sBAAA,CAAA;EACd,OAAA;EACA,SAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,MAAA,CAAO,GAAA;EAAS,OAAA;AAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/layouts/flux/index.js

@@ -5,6 +5,7 @@ import { buttonVariants } from "../../components/ui/button.js";
 import { TreeContextProvider } from "../../contexts/tree.js";
 import { SidebarViewport, useSidebar } from "../../components/sidebar/base.js";
 import { LinkItem } from "../../utils/link-item.js";
+import { useSearchContext } from "../../contexts/search.js";
 import { SearchToggle } from "../shared/search-toggle.js";
 import { renderTitleNav, useLinkItems } from "../shared/index.js";
 import { LanguageToggle } from "../shared/language-toggle.js";
@@ -117,10 +118,16 @@ function NavigationSidebarTrigger() {
 		})
 	});
 }
-function NavigationPanel({ head, tabDropdown, tool, link, className, children = (v) => v, ...props }) {
+function NavigationPanel({ head, tabDropdown, tool, link, children = (v) => v, ...props }) {
+	const { open } = useSearchContext();
 	return /* @__PURE__ */ jsx(motion.div, {
-		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", className),
 		...props,
+		className: cn("fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]", props.className),
+		animate: props.animate ?? {
+			scale: open ? .9 : 1,
+			translateY: open ? 20 : 0,
+			opacity: open ? .8 : 1
+		},
 		children: children(/* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11",
 			children: [head, /* @__PURE__ */ jsx("div", {

package/dist/layouts/flux/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Sidebar"],"sources":["../../../src/layouts/flux/index.tsx"],"sourcesContent":["'use client';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type { BaseLayoutProps } from '@/layouts/shared';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { type ComponentProps, HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { SidebarViewport, useSidebar } from '@/components/sidebar/base';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from './tab-dropdown';\nimport { Sidebar, SidebarContent, SidebarLinkItem, SidebarPageTree } from './sidebar';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, SidebarIcon, XIcon } from 'lucide-react';\nimport { renderTitleNav, useLinkItems } from '../shared';\nimport { LanguageToggle } from '../shared/language-toggle';\nimport { SearchToggle } from '../shared/search-toggle';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LinkItem } from '@/utils/link-item';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n}\n\nexport function DocsLayout({\n  tree,\n  nav = {},\n  sidebar: {\n    enabled: sidebarEnabled = true,\n    tabs: sidebarTabs,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  i18n = false,\n  children,\n  containerProps,\n  renderNavigationPanel = (props) => <NavigationPanel {...props} />,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n  const iconLinks = menuItems.filter((item) => item.type === 'icon');\n\n  function sidebar() {\n    const { footer, banner, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    return (\n      <SidebarContent {...rest}>\n        <div className=\"flex flex-col gap-3 p-4 pb-2 empty:hidden\">{banner}</div>\n        <SidebarViewport>\n          {menuItems\n            .filter((v) => v.type !== 'icon')\n            .map((item, i, list) => (\n              <SidebarLinkItem\n                key={i}\n                item={item}\n                className={cn(i === list.length - 1 && 'mb-4')}\n              />\n            ))}\n          <SidebarPageTree {...components} />\n        </SidebarViewport>\n        {footer}\n      </SidebarContent>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n        <div\n          id=\"nd-flux-layout\"\n          {...containerProps}\n          className={cn(\n            'flex flex-col items-center pb-24 overflow-x-clip',\n            containerProps?.className,\n          )}\n        >\n          {sidebarEnabled && sidebar()}\n          {children}\n        </div>\n        {renderNavigationPanel({\n          head: renderTitleNav(nav, {\n            className: 'inline-flex items-center gap-2.5 text-sm font-semibold',\n          }),\n          tabDropdown: tabs.length > 0 && <SidebarTabsDropdown className=\"flex-1\" options={tabs} />,\n          tool: (\n            <>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                </LanguageToggle>\n              )}\n\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? (\n                  <SearchToggle className=\"rounded-lg\" hideIfDisabled />\n                ))}\n\n              <NavigationSidebarTrigger />\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? (\n                  <ThemeToggle\n                    className=\"px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg\"\n                    mode={themeSwitch.mode}\n                  />\n                ))}\n            </>\n          ),\n          link: iconLinks.map((item, i) => (\n            <LinkItem\n              key={i}\n              item={item}\n              className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n              aria-label={item.label}\n            >\n              {item.icon}\n            </LinkItem>\n          )),\n        })}\n      </Sidebar>\n    </TreeContextProvider>\n  );\n}\n\nfunction NavigationSidebarTrigger() {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      className={cn(\n        buttonVariants({\n          variant: 'ghost',\n          size: 'icon-sm',\n          className: 'overflow-hidden',\n        }),\n      )}\n      onClick={() => setOpen((prev) => !prev)}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={open ? 'open' : 'closed'}\n          transition={{ duration: 0.2 }}\n          initial={{\n            y: '100%',\n            opacity: 0,\n          }}\n          animate={{\n            y: 0,\n            opacity: 1,\n          }}\n          exit={{\n            y: '100%',\n            opacity: 0,\n          }}\n        >\n          {open ? <XIcon /> : <SidebarIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n\nexport interface NavigationPanelProps {\n  head: ReactNode;\n  tabDropdown: ReactNode;\n  tool: ReactNode;\n  link: ReactNode;\n}\n\nexport function NavigationPanel({\n  head,\n  tabDropdown,\n  tool,\n  link,\n  className,\n  children = (v) => v,\n  ...props\n}: NavigationPanelProps &\n  Omit<ComponentProps<typeof motion.div>, 'children'> & {\n    /**\n     * replace default children\n     */\n    children?: (defaultChildren: ReactNode) => ReactNode;\n  }) {\n  return (\n    <motion.div\n      className={cn(\n        'fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]',\n        className,\n      )}\n      {...props}\n    >\n      {children(\n        <>\n          <div className=\"flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11\">\n            {head}\n            <div id=\"flux-layout-slot\" className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1\">\n            <div className=\"flex flex-row items-center gap-2 min-w-0 flex-1\">{tabDropdown}</div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden\">\n              {link}\n            </div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground empty:hidden\">\n              {tool}\n            </div>\n          </div>\n        </>,\n      )}\n    </motion.div>\n  );\n}\n\nexport function NavigationPanelOverlay({\n  enabled = false,\n  className,\n  ...props\n}: ComponentProps<typeof motion.div> & { enabled?: boolean }) {\n  return (\n    <RemoveScroll enabled={enabled}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60',\n          !enabled && 'pointer-events-none',\n          className,\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={enabled ? 'show' : 'hide'}\n        exit=\"hide\"\n        {...props}\n      />\n    </RemoveScroll>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Sidebar"],"sources":["../../../src/layouts/flux/index.tsx"],"sourcesContent":["'use client';\nimport type * as PageTree from 'fumadocs-core/page-tree';\nimport type { BaseLayoutProps } from '@/layouts/shared';\nimport { TreeContextProvider } from '@/contexts/tree';\nimport { getSidebarTabs, type GetSidebarTabsOptions } from '@/components/sidebar/tabs';\nimport type { SidebarPageTreeComponents } from '@/components/sidebar/page-tree';\nimport { type ComponentProps, HTMLAttributes, type ReactNode, useMemo } from 'react';\nimport { cn } from '@/utils/cn';\nimport { SidebarViewport, useSidebar } from '@/components/sidebar/base';\nimport { SidebarTabsDropdown, type SidebarTabWithProps } from './tab-dropdown';\nimport { Sidebar, SidebarContent, SidebarLinkItem, SidebarPageTree } from './sidebar';\nimport { buttonVariants } from '@/components/ui/button';\nimport { Languages, SidebarIcon, XIcon } from 'lucide-react';\nimport { renderTitleNav, useLinkItems } from '../shared';\nimport { LanguageToggle } from '../shared/language-toggle';\nimport { SearchToggle } from '../shared/search-toggle';\nimport { ThemeToggle } from '../shared/theme-toggle';\nimport { LinkItem } from '@/utils/link-item';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { useSearchContext } from '@/contexts/search';\n\nexport interface DocsLayoutProps extends BaseLayoutProps {\n  tree: PageTree.Root;\n\n  sidebar?: SidebarOptions;\n\n  /**\n   * Props for the `div` container\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n\n  renderNavigationPanel?: (props: NavigationPanelProps) => ReactNode;\n}\n\ninterface SidebarOptions\n  extends\n    ComponentProps<'aside'>,\n    Pick<ComponentProps<typeof Sidebar>, 'defaultOpenLevel' | 'prefetch'> {\n  enabled?: boolean;\n  component?: ReactNode;\n  components?: Partial<SidebarPageTreeComponents>;\n\n  /**\n   * Root Toggle options\n   */\n  tabs?: SidebarTabWithProps[] | GetSidebarTabsOptions | false;\n\n  banner?: ReactNode;\n  footer?: ReactNode;\n}\n\nexport function DocsLayout({\n  tree,\n  nav = {},\n  sidebar: {\n    enabled: sidebarEnabled = true,\n    tabs: sidebarTabs,\n    defaultOpenLevel,\n    prefetch,\n    ...sidebarProps\n  } = {},\n  searchToggle = {},\n  themeSwitch = {},\n  i18n = false,\n  children,\n  containerProps,\n  renderNavigationPanel = (props) => <NavigationPanel {...props} />,\n  ...props\n}: DocsLayoutProps) {\n  const tabs = useMemo(() => {\n    if (Array.isArray(sidebarTabs)) {\n      return sidebarTabs;\n    }\n    if (typeof sidebarTabs === 'object') {\n      return getSidebarTabs(tree, sidebarTabs);\n    }\n    if (sidebarTabs !== false) {\n      return getSidebarTabs(tree);\n    }\n    return [];\n  }, [tree, sidebarTabs]);\n  const { menuItems } = useLinkItems(props);\n  const iconLinks = menuItems.filter((item) => item.type === 'icon');\n\n  function sidebar() {\n    const { footer, banner, component, components, ...rest } = sidebarProps;\n    if (component) return component;\n\n    return (\n      <SidebarContent {...rest}>\n        <div className=\"flex flex-col gap-3 p-4 pb-2 empty:hidden\">{banner}</div>\n        <SidebarViewport>\n          {menuItems\n            .filter((v) => v.type !== 'icon')\n            .map((item, i, list) => (\n              <SidebarLinkItem\n                key={i}\n                item={item}\n                className={cn(i === list.length - 1 && 'mb-4')}\n              />\n            ))}\n          <SidebarPageTree {...components} />\n        </SidebarViewport>\n        {footer}\n      </SidebarContent>\n    );\n  }\n\n  return (\n    <TreeContextProvider tree={tree}>\n      <Sidebar defaultOpenLevel={defaultOpenLevel} prefetch={prefetch}>\n        <div\n          id=\"nd-flux-layout\"\n          {...containerProps}\n          className={cn(\n            'flex flex-col items-center pb-24 overflow-x-clip',\n            containerProps?.className,\n          )}\n        >\n          {sidebarEnabled && sidebar()}\n          {children}\n        </div>\n        {renderNavigationPanel({\n          head: renderTitleNav(nav, {\n            className: 'inline-flex items-center gap-2.5 text-sm font-semibold',\n          }),\n          tabDropdown: tabs.length > 0 && <SidebarTabsDropdown className=\"flex-1\" options={tabs} />,\n          tool: (\n            <>\n              {i18n && (\n                <LanguageToggle>\n                  <Languages className=\"size-4.5\" />\n                </LanguageToggle>\n              )}\n\n              {searchToggle.enabled !== false &&\n                (searchToggle.components?.sm ?? (\n                  <SearchToggle className=\"rounded-lg\" hideIfDisabled />\n                ))}\n\n              <NavigationSidebarTrigger />\n              {themeSwitch.enabled !== false &&\n                (themeSwitch.component ?? (\n                  <ThemeToggle\n                    className=\"px-1 py-0 h-full ms-1 rounded-xl bg-fd-muted *:rounded-lg\"\n                    mode={themeSwitch.mode}\n                  />\n                ))}\n            </>\n          ),\n          link: iconLinks.map((item, i) => (\n            <LinkItem\n              key={i}\n              item={item}\n              className={cn(buttonVariants({ size: 'icon-sm', color: 'ghost' }))}\n              aria-label={item.label}\n            >\n              {item.icon}\n            </LinkItem>\n          )),\n        })}\n      </Sidebar>\n    </TreeContextProvider>\n  );\n}\n\nfunction NavigationSidebarTrigger() {\n  const { open, setOpen } = useSidebar();\n  return (\n    <button\n      className={cn(\n        buttonVariants({\n          variant: 'ghost',\n          size: 'icon-sm',\n          className: 'overflow-hidden',\n        }),\n      )}\n      onClick={() => setOpen((prev) => !prev)}\n    >\n      <AnimatePresence mode=\"wait\">\n        <motion.span\n          key={open ? 'open' : 'closed'}\n          transition={{ duration: 0.2 }}\n          initial={{\n            y: '100%',\n            opacity: 0,\n          }}\n          animate={{\n            y: 0,\n            opacity: 1,\n          }}\n          exit={{\n            y: '100%',\n            opacity: 0,\n          }}\n        >\n          {open ? <XIcon /> : <SidebarIcon />}\n        </motion.span>\n      </AnimatePresence>\n    </button>\n  );\n}\n\nexport interface NavigationPanelProps {\n  head: ReactNode;\n  tabDropdown: ReactNode;\n  tool: ReactNode;\n  link: ReactNode;\n}\n\nexport function NavigationPanel({\n  head,\n  tabDropdown,\n  tool,\n  link,\n  children = (v) => v,\n  ...props\n}: NavigationPanelProps &\n  Omit<ComponentProps<typeof motion.div>, 'children'> & {\n    /**\n     * replace default children\n     */\n    children?: (defaultChildren: ReactNode) => ReactNode;\n  }) {\n  const { open } = useSearchContext();\n  return (\n    <motion.div\n      {...props}\n      className={cn(\n        'fixed left-1/2 w-[calc(100%-var(--removed-body-scroll-bar-size,0px))] translate-x-[calc(-50%-var(--removed-body-scroll-bar-size,0px)/2)] bottom-0 z-40 bg-fd-popover text-fd-popover-foreground border-t shadow-lg sm:bottom-6 sm:rounded-2xl sm:border sm:max-w-[380px]',\n        props.className,\n      )}\n      animate={\n        props.animate ?? {\n          scale: open ? 0.9 : 1,\n          translateY: open ? 20 : 0,\n          opacity: open ? 0.8 : 1,\n        }\n      }\n    >\n      {children(\n        <>\n          <div className=\"flex flex-row items-center ps-2.5 p-1 gap-2 min-h-11\">\n            {head}\n            <div id=\"flux-layout-slot\" className=\"flex-1\" />\n          </div>\n\n          <div className=\"flex flex-row gap-1.5 overflow-x-auto overflow-y-hidden p-2 sm:p-1\">\n            <div className=\"flex flex-row items-center gap-2 min-w-0 flex-1\">{tabDropdown}</div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground border-x px-0.5 empty:hidden\">\n              {link}\n            </div>\n\n            <div className=\"flex flex-row items-center text-fd-muted-foreground empty:hidden\">\n              {tool}\n            </div>\n          </div>\n        </>,\n      )}\n    </motion.div>\n  );\n}\n\nexport function NavigationPanelOverlay({\n  enabled = false,\n  className,\n  ...props\n}: ComponentProps<typeof motion.div> & { enabled?: boolean }) {\n  return (\n    <RemoveScroll enabled={enabled}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 z-30 pr-(--removed-body-scroll-bar-size,0) backdrop-blur-md bg-fd-background/60',\n          !enabled && 'pointer-events-none',\n          className,\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={enabled ? 'show' : 'hide'}\n        exit=\"hide\"\n        {...props}\n      />\n    </RemoveScroll>\n  );\n}\n"],"mappings":"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"}

package/dist/layouts/flux/sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../src/layouts/flux/sidebar.tsx"],"mappings":";;;;;;;;;iBAoCgB,OAAA,CAAQ,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1D,aAAA,CAAc,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9D,sBAAA,CAAuB,KAAA,EAAO,cAAA,QAAsB,wBAAA,IAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,eAAA,CAAgB,KAAA,EAAO,cAAA,QAAsB,iBAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIlE,cAAA,CAAe,KAAA,EAAO,cAAA,QAAsB,gBAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhE,cAAA,CAAA;EACd,GAAA,EAAK,OAAA;EACL,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA0EV,gBAAA,CAAA;EAAmB,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB9E,WAAA,CAAA;EACd,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,aAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB1B,oBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBnC,iBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,mBAAA,IAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiBhC,oBAAA,CAAA;EACd,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAoCtC,eAAA,GAAe,UAAA,EAAA,OAAA,CAO1B,yBAAA,MAP0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cASf,eAAA;EAAe,IAAA;EAAA,GAAA;AAAA,GAAA,KAAA,CAAA,cAAA,CAAA,WAAA;gBAAA,YAAA"}
+{"version":3,"file":"sidebar.d.ts","names":[],"sources":["../../../src/layouts/flux/sidebar.tsx"],"mappings":";;;;;;;;;iBAoCgB,OAAA,CAAQ,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI1D,aAAA,CAAc,KAAA,EAAO,cAAA,QAAsB,eAAA,IAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAI9D,sBAAA,CAAuB,KAAA,EAAO,cAAA,QAAsB,wBAAA,IAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhF,eAAA,CAAgB,KAAA,EAAO,cAAA,QAAsB,iBAAA,IAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIlE,cAAA,CAAe,KAAA,EAAO,cAAA,QAAsB,gBAAA,IAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAIhE,cAAA,CAAA;EACd,GAAA,EAAK,OAAA;EACL,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,YAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBA6EV,gBAAA,CAAA;EAAmB,SAAA;EAAW,KAAA;EAAO,QAAA;EAAA,GAAa;AAAA,GAAS,cAAA,QAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB9E,WAAA,CAAA;EACd,SAAA;EACA,KAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,aAAA,IAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiB1B,oBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAuBnC,iBAAA,CAAA;EACd,SAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,mBAAA,IAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAiBhC,oBAAA,CAAA;EACd,SAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,cAAA,QAAsB,sBAAA,IAA0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAoCtC,eAAA,GAAe,UAAA,EAAA,OAAA,CAO1B,yBAAA,MAP0B,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cASf,eAAA;EAAe,IAAA;EAAA,GAAA;AAAA,GAAA,KAAA,CAAA,cAAA,CAAA,WAAA;gBAAA,YAAA"}

package/dist/layouts/flux/sidebar.js

@@ -5,7 +5,7 @@ import { mergeRefs } from "../../utils/merge-refs.js";
 import { SidebarCollapseTrigger as SidebarCollapseTrigger$1, SidebarFolder as SidebarFolder$1, SidebarFolderContent as SidebarFolderContent$1, SidebarFolderLink as SidebarFolderLink$1, SidebarFolderTrigger as SidebarFolderTrigger$1, SidebarItem as SidebarItem$1, SidebarProvider, SidebarSeparator as SidebarSeparator$1, SidebarTrigger as SidebarTrigger$1, SidebarViewport as SidebarViewport$1, useFolder, useFolderDepth, useSidebar } from "../../components/sidebar/base.js";
 import { createLinkItemRenderer } from "../../components/sidebar/link-item.js";
 import { createPageTreeRenderer } from "../../components/sidebar/page-tree.js";
-import { useEffect, useEffectEvent, useRef } from "react";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { motion } from "motion/react";
@@ -43,6 +43,7 @@ function SidebarTrigger(props) {
 }
 function SidebarContent({ ref: refProp, className, children, ...props }) {
 	const ref = useRef(null);
+	const [blockScroll, setBlockScroll] = useState(false);
 	const { open, setOpen } = useSidebar();
 	const listener = useEffectEvent((e) => {
 		if (open && e.key === "Escape") {
@@ -56,8 +57,9 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			window.removeEventListener("keydown", listener);
 		};
 	}, []);
+	if (open && !blockScroll) setBlockScroll(true);
 	return /* @__PURE__ */ jsx(RemoveScroll, {
-		enabled: open,
+		enabled: blockScroll,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			className: cn("fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60", !open && "pointer-events-none"),
 			initial: "hide",
@@ -70,8 +72,11 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 			onClick: () => {
 				setOpen(false);
 			},
+			onAnimationComplete: (definition) => {
+				if (definition === "hide") setBlockScroll(false);
+			},
 			children: /* @__PURE__ */ jsx(motion.div, {
-				className: "absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm",
+				className: "absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm",
 				variants: {
 					show: {
 						y: 0,
@@ -83,14 +88,13 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 					}
 				},
 				transition: {
-					duration: .3,
+					duration: .4,
 					ease: [
 						.16,
 						1,
 						.3,
 						1
-					],
-					opacity: { duration: .1 }
+					]
 				},
 				children: /* @__PURE__ */ jsx(motion.aside, {
 					id: "nd-sidebar",

package/dist/layouts/flux/sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar.js","names":["Base.SidebarItem","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent","Base.SidebarProvider","Base.SidebarFolder","Base.SidebarCollapseTrigger","Base.SidebarViewport","Base.SidebarTrigger","Base.useSidebar","Base.useFolderDepth","Base.SidebarSeparator","Base.useFolder"],"sources":["../../../src/layouts/flux/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useEffect, useEffectEvent, useRef } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst MotionSidebarItem = motion.create(Base.SidebarItem);\nconst MotionSidebarFolderTrigger = motion.create(Base.SidebarFolderTrigger);\nconst MotionSidebarFolderLink = motion.create(Base.SidebarFolderLink);\nconst MotionSidebarFolderContent = motion.create(Base.SidebarFolderContent);\n\nconst itemVariants = cva(\n  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        true: \"data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport function Sidebar(props: ComponentProps<typeof Base.SidebarProvider>) {\n  return <Base.SidebarProvider {...props} />;\n}\n\nexport function SidebarFolder(props: ComponentProps<typeof Base.SidebarFolder>) {\n  return <Base.SidebarFolder {...props} />;\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<typeof Base.SidebarCollapseTrigger>) {\n  return <Base.SidebarCollapseTrigger {...props} />;\n}\n\nexport function SidebarViewport(props: ComponentProps<typeof Base.SidebarViewport>) {\n  return <Base.SidebarViewport {...props} />;\n}\n\nexport function SidebarTrigger(props: ComponentProps<typeof Base.SidebarTrigger>) {\n  return <Base.SidebarTrigger {...props} />;\n}\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const ref = useRef<HTMLElement>(null);\n  const { open, setOpen } = Base.useSidebar();\n\n  const listener = useEffectEvent((e: KeyboardEvent) => {\n    if (open && e.key === 'Escape') {\n      setOpen(false);\n      e.preventDefault();\n    }\n  });\n  useEffect(() => {\n    window.addEventListener('keydown', listener);\n    return () => {\n      window.removeEventListener('keydown', listener);\n    };\n  }, []);\n\n  return (\n    <RemoveScroll enabled={open}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60',\n          !open && 'pointer-events-none',\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        onClick={() => {\n          setOpen(false);\n        }}\n      >\n        <motion.div\n          className=\"absolute overflow-y-auto pr-(--removed-body-scroll-bar-size,0) [scrollbar-width:none] py-16 inset-0 bottom-26 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_calc(var(--spacing)*14),white_calc(100%-var(--spacing)*14),transparent)] lg:text-sm\"\n          variants={{\n            show: {\n              y: 0,\n              opacity: 1,\n            },\n            hide: {\n              y: '80%',\n              opacity: 0,\n            },\n          }}\n          transition={{\n            duration: 0.3,\n            ease: [0.16, 1, 0.3, 1],\n            opacity: {\n              duration: 0.1,\n            },\n          }}\n        >\n          <motion.aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp)}\n            className={cn('mx-auto sm:max-w-[400px]', className)}\n            onClick={(e) => e.stopPropagation()}\n            {...(props as ComponentProps<typeof motion.aside>)}\n          >\n            {children}\n          </motion.aside>\n        </motion.div>\n      </motion.div>\n    </RemoveScroll>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...(props as object)}\n    >\n      {children}\n    </MotionSidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderTrigger>)}\n    >\n      {props.children}\n    </MotionSidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderLink>)}\n    >\n      {props.children}\n    </MotionSidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n  const { open } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...(props as ComponentProps<typeof MotionSidebarFolderContent>)}\n    >\n      <motion.div\n        initial=\"hide\"\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n      >\n        {children}\n      </motion.div>\n    </MotionSidebarFolderContent>\n  );\n}\n\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarSeparator,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}
+{"version":3,"file":"sidebar.js","names":["Base.SidebarItem","Base.SidebarFolderTrigger","Base.SidebarFolderLink","Base.SidebarFolderContent","Base.SidebarProvider","Base.SidebarFolder","Base.SidebarCollapseTrigger","Base.SidebarViewport","Base.SidebarTrigger","Base.useSidebar","Base.useFolderDepth","Base.SidebarSeparator","Base.useFolder"],"sources":["../../../src/layouts/flux/sidebar.tsx"],"sourcesContent":["'use client';\nimport * as Base from '@/components/sidebar/base';\nimport { cn } from '@/utils/cn';\nimport { type ComponentProps, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { cva } from 'class-variance-authority';\nimport { createPageTreeRenderer } from '@/components/sidebar/page-tree';\nimport { createLinkItemRenderer } from '@/components/sidebar/link-item';\nimport { mergeRefs } from '@/utils/merge-refs';\nimport { motion } from 'motion/react';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nconst MotionSidebarItem = motion.create(Base.SidebarItem);\nconst MotionSidebarFolderTrigger = motion.create(Base.SidebarFolderTrigger);\nconst MotionSidebarFolderLink = motion.create(Base.SidebarFolderLink);\nconst MotionSidebarFolderContent = motion.create(Base.SidebarFolderContent);\n\nconst itemVariants = cva(\n  'relative flex flex-row items-center gap-2 rounded-lg p-2 text-start text-fd-muted-foreground wrap-anywhere [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        link: 'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none data-[active=true]:bg-fd-primary/10 data-[active=true]:text-fd-primary data-[active=true]:hover:transition-colors',\n        button:\n          'transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none',\n      },\n      highlight: {\n        true: \"data-[active=true]:before:content-[''] data-[active=true]:before:bg-fd-primary data-[active=true]:before:absolute data-[active=true]:before:w-px data-[active=true]:before:inset-y-2.5 data-[active=true]:before:start-2.5\",\n      },\n    },\n  },\n);\n\nfunction getItemOffset(depth: number) {\n  return `calc(${2 + 3 * depth} * var(--spacing))`;\n}\n\nexport function Sidebar(props: ComponentProps<typeof Base.SidebarProvider>) {\n  return <Base.SidebarProvider {...props} />;\n}\n\nexport function SidebarFolder(props: ComponentProps<typeof Base.SidebarFolder>) {\n  return <Base.SidebarFolder {...props} />;\n}\n\nexport function SidebarCollapseTrigger(props: ComponentProps<typeof Base.SidebarCollapseTrigger>) {\n  return <Base.SidebarCollapseTrigger {...props} />;\n}\n\nexport function SidebarViewport(props: ComponentProps<typeof Base.SidebarViewport>) {\n  return <Base.SidebarViewport {...props} />;\n}\n\nexport function SidebarTrigger(props: ComponentProps<typeof Base.SidebarTrigger>) {\n  return <Base.SidebarTrigger {...props} />;\n}\n\nexport function SidebarContent({\n  ref: refProp,\n  className,\n  children,\n  ...props\n}: ComponentProps<'aside'>) {\n  const ref = useRef<HTMLElement>(null);\n  const [blockScroll, setBlockScroll] = useState(false);\n  const { open, setOpen } = Base.useSidebar();\n\n  const listener = useEffectEvent((e: KeyboardEvent) => {\n    if (open && e.key === 'Escape') {\n      setOpen(false);\n      e.preventDefault();\n    }\n  });\n  useEffect(() => {\n    window.addEventListener('keydown', listener);\n    return () => {\n      window.removeEventListener('keydown', listener);\n    };\n  }, []);\n\n  if (open && !blockScroll) setBlockScroll(true);\n\n  return (\n    <RemoveScroll enabled={blockScroll}>\n      <motion.div\n        className={cn(\n          'fixed inset-0 py-10 z-30 backdrop-blur-md bg-fd-background/60',\n          !open && 'pointer-events-none',\n        )}\n        initial=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        onClick={() => {\n          setOpen(false);\n        }}\n        onAnimationComplete={(definition) => {\n          if (definition === 'hide') setBlockScroll(false);\n        }}\n      >\n        <motion.div\n          className=\"absolute top-0 min-h-0 inset-x-0 bottom-26 overflow-y-auto fd-scroll-container pr-(--removed-body-scroll-bar-size,0) py-16 mask-[linear-gradient(to_bottom,transparent,white_--spacing(14),white_calc(100%---spacing(14)),transparent)] lg:text-sm\"\n          variants={{\n            show: {\n              y: 0,\n              opacity: 1,\n            },\n            hide: {\n              y: '80%',\n              opacity: 0,\n            },\n          }}\n          transition={{\n            duration: 0.4,\n            ease: [0.16, 1, 0.3, 1],\n          }}\n        >\n          <motion.aside\n            id=\"nd-sidebar\"\n            ref={mergeRefs(ref, refProp)}\n            className={cn('mx-auto sm:max-w-[400px]', className)}\n            onClick={(e) => e.stopPropagation()}\n            {...(props as ComponentProps<typeof motion.aside>)}\n          >\n            {children}\n          </motion.aside>\n        </motion.div>\n      </motion.div>\n    </RemoveScroll>\n  );\n}\n\nexport function SidebarSeparator({ className, style, children, ...props }: ComponentProps<'p'>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <Base.SidebarSeparator\n      className={cn('[&_svg]:size-4 [&_svg]:shrink-0', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...props}\n    >\n      {children}\n    </Base.SidebarSeparator>\n  );\n}\n\nexport function SidebarItem({\n  className,\n  style,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarItem>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarItem\n      className={cn(itemVariants({ variant: 'link', highlight: depth >= 1 }), className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth),\n        ...style,\n      }}\n      {...(props as object)}\n    >\n      {children}\n    </MotionSidebarItem>\n  );\n}\n\nexport function SidebarFolderTrigger({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderTrigger>) {\n  const { depth, collapsible } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderTrigger\n      className={(s) =>\n        cn(\n          itemVariants({ variant: collapsible ? 'button' : null }),\n          'w-full',\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderTrigger>)}\n    >\n      {props.children}\n    </MotionSidebarFolderTrigger>\n  );\n}\n\nexport function SidebarFolderLink({\n  className,\n  style,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderLink>) {\n  const depth = Base.useFolderDepth();\n\n  return (\n    <MotionSidebarFolderLink\n      className={cn(itemVariants({ variant: 'link', highlight: depth > 1 }), 'w-full', className)}\n      style={{\n        paddingInlineStart: getItemOffset(depth - 1),\n        ...style,\n      }}\n      {...(props as ComponentProps<typeof MotionSidebarFolderLink>)}\n    >\n      {props.children}\n    </MotionSidebarFolderLink>\n  );\n}\n\nexport function SidebarFolderContent({\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Base.SidebarFolderContent>) {\n  const depth = Base.useFolderDepth();\n  const { open } = Base.useFolder()!;\n\n  return (\n    <MotionSidebarFolderContent\n      className={(s) =>\n        cn(\n          'relative',\n          depth === 1 &&\n            \"before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5\",\n\n          typeof className === 'function' ? className(s) : className,\n        )\n      }\n      {...(props as ComponentProps<typeof MotionSidebarFolderContent>)}\n    >\n      <motion.div\n        initial=\"hide\"\n        animate={open ? 'show' : 'hide'}\n        exit=\"hide\"\n        variants={{\n          show: {\n            opacity: 1,\n          },\n          hide: {\n            opacity: 0,\n          },\n        }}\n      >\n        {children}\n      </motion.div>\n    </MotionSidebarFolderContent>\n  );\n}\n\nexport const SidebarPageTree = createPageTreeRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarSeparator,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n\nexport const SidebarLinkItem = createLinkItemRenderer({\n  SidebarFolder,\n  SidebarFolderContent,\n  SidebarFolderLink,\n  SidebarFolderTrigger,\n  SidebarItem,\n});\n"],"mappings":"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"}

package/dist/og/takumi.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ImageResponse, ImageResponseOptions } from "@takumi-rs/image-response";
+
+//#region src/og/takumi.d.ts
+interface GenerateProps {
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  primaryColor?: string;
+  primaryTextColor?: string;
+  site?: ReactNode;
+}
+declare function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse;
+declare function generate({
+  primaryColor,
+  primaryTextColor,
+  ...props
+}: GenerateProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { generate, generateOGImage };
+//# sourceMappingURL=takumi.d.ts.map

package/dist/og/takumi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"takumi.d.ts","names":[],"sources":["../../src/og/takumi.tsx"],"mappings":";;;;;UAGU,aAAA;EACR,KAAA,EAAO,SAAA;EACP,WAAA,GAAc,SAAA;EACd,IAAA,GAAO,SAAA;EACP,YAAA;EACA,gBAAA;EACA,IAAA,GAAO,SAAA;AAAA;AAAA,iBAGO,eAAA,CAAgB,OAAA,EAAS,aAAA,GAAgB,oBAAA,GAAuB,aAAA;AAAA,iBAoBhE,QAAA,CAAA;EACd,YAAA;EACA,gBAAA;EAAA,GACG;AAAA,GACF,aAAA,GAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/og/takumi.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ImageResponse } from "@takumi-rs/image-response";
+
+//#region src/og/takumi.tsx
+function generateOGImage(options) {
+	const { title, description, icon, site, primaryColor, primaryTextColor, ...rest } = options;
+	return new ImageResponse(generate({
+		title,
+		description,
+		icon,
+		site,
+		primaryTextColor,
+		primaryColor
+	}), {
+		width: 1200,
+		height: 630,
+		...rest
+	});
+}
+function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "rgb(255,150,255)", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			width: "100%",
+			height: "100%",
+			color: "white",
+			padding: "4rem",
+			backgroundColor: "#0c0c0c",
+			backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					gap: "16px",
+					marginBottom: "12px",
+					color: primaryTextColor
+				},
+				children: [props.icon, /* @__PURE__ */ jsx("p", {
+					style: {
+						fontSize: "56px",
+						fontWeight: 600,
+						margin: 0
+					},
+					children: props.site
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					fontWeight: 800,
+					fontSize: "82px",
+					margin: 0
+				},
+				children: props.title
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					fontSize: "52px",
+					color: "rgba(240,240,240,0.8)",
+					margin: 0
+				},
+				children: props.description
+			})
+		]
+	});
+}
+
+//#endregion
+export { generate, generateOGImage };
+//# sourceMappingURL=takumi.js.map

package/dist/og/takumi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"takumi.js","names":[],"sources":["../../src/og/takumi.tsx"],"sourcesContent":["import { ImageResponse, type ImageResponseOptions } from '@takumi-rs/image-response';\nimport type { ReactNode } from 'react';\n\ninterface GenerateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  site?: ReactNode;\n}\n\nexport function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse {\n  const { title, description, icon, site, primaryColor, primaryTextColor, ...rest } = options;\n\n  return new ImageResponse(\n    generate({\n      title,\n      description,\n      icon,\n      site,\n      primaryTextColor,\n      primaryColor,\n    }),\n    {\n      width: 1200,\n      height: 630,\n      ...rest,\n    },\n  );\n}\n\nexport function generate({\n  primaryColor = 'rgba(255,150,255,0.3)',\n  primaryTextColor = 'rgb(255,150,255)',\n  ...props\n}: GenerateProps) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        color: 'white',\n        padding: '4rem',\n        backgroundColor: '#0c0c0c',\n        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          gap: '16px',\n          marginBottom: '12px',\n          color: primaryTextColor,\n        }}\n      >\n        {props.icon}\n        <p\n          style={{\n            fontSize: '56px',\n            fontWeight: 600,\n            margin: 0,\n          }}\n        >\n          {props.site}\n        </p>\n      </div>\n\n      <p\n        style={{\n          fontWeight: 800,\n          fontSize: '82px',\n          margin: 0,\n        }}\n      >\n        {props.title}\n      </p>\n      <p\n        style={{\n          fontSize: '52px',\n          color: 'rgba(240,240,240,0.8)',\n          margin: 0,\n        }}\n      >\n        {props.description}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,gBAAgB,SAA8D;CAC5F,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,cAAc,kBAAkB,GAAG,SAAS;AAEpF,QAAO,IAAI,cACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EACF;EACE,OAAO;EACP,QAAQ;EACR,GAAG;EACJ,CACF;;AAGH,SAAgB,SAAS,EACvB,eAAe,yBACf,mBAAmB,oBACnB,GAAG,SACa;AAChB,QACE,qBAAC;EACC,OAAO;GACL,SAAS;GACT,eAAe;GACf,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,iBAAiB;GACjB,iBAAiB,iCAAiC,aAAa;GAChE;;GAED,qBAAC;IACC,OAAO;KACL,SAAS;KACT,eAAe;KACf,YAAY;KACZ,KAAK;KACL,cAAc;KACd,OAAO;KACR;eAEA,MAAM,MACP,oBAAC;KACC,OAAO;MACL,UAAU;MACV,YAAY;MACZ,QAAQ;MACT;eAEA,MAAM;MACL;KACA;GAEN,oBAAC;IACC,OAAO;KACL,YAAY;KACZ,UAAU;KACV,QAAQ;KACT;cAEA,MAAM;KACL;GACJ,oBAAC;IACC,OAAO;KACL,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAEA,MAAM;KACL;;GACA"}

package/dist/og.js

@@ -42,7 +42,8 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 				children: [props.icon, /* @__PURE__ */ jsx("p", {
 					style: {
 						fontSize: "56px",
-						fontWeight: 600
+						fontWeight: 600,
+						margin: 0
 					},
 					children: props.site
 				})]
@@ -50,14 +51,16 @@ function generate({ primaryColor = "rgba(255,150,255,0.3)", primaryTextColor = "
 			/* @__PURE__ */ jsx("p", {
 				style: {
 					fontWeight: 800,
-					fontSize: "82px"
+					fontSize: "82px",
+					margin: 0
 				},
 				children: props.title
 			}),
 			/* @__PURE__ */ jsx("p", {
 				style: {
 					fontSize: "52px",
-					color: "rgba(240,240,240,0.8)"
+					color: "rgba(240,240,240,0.8)",
+					margin: 0
 				},
 				children: props.description
 			})

package/dist/og.js.map

@@ -1 +1 @@
-{"version":3,"file":"og.js","names":[],"sources":["../src/og.tsx"],"sourcesContent":["import { ImageResponse } from 'next/og';\nimport type { ReactNode } from 'react';\nimport type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';\n\ninterface GenerateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  site?: ReactNode;\n}\n\nexport function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse {\n  const { title, description, icon, site, primaryColor, primaryTextColor, ...rest } = options;\n\n  return new ImageResponse(\n    generate({\n      title,\n      description,\n      icon,\n      site,\n      primaryTextColor,\n      primaryColor,\n    }),\n    {\n      width: 1200,\n      height: 630,\n      ...rest,\n    },\n  );\n}\n\nexport function generate({\n  primaryColor = 'rgba(255,150,255,0.3)',\n  primaryTextColor = 'rgb(255,150,255)',\n  ...props\n}: GenerateProps) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        color: 'white',\n        padding: '4rem',\n        backgroundColor: '#0c0c0c',\n        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          gap: '16px',\n          marginBottom: '12px',\n          color: primaryTextColor,\n        }}\n      >\n        {props.icon}\n        <p\n          style={{\n            fontSize: '56px',\n            fontWeight: 600,\n          }}\n        >\n          {props.site}\n        </p>\n      </div>\n\n      <p\n        style={{\n          fontWeight: 800,\n          fontSize: '82px',\n        }}\n      >\n        {props.title}\n      </p>\n      <p\n        style={{\n          fontSize: '52px',\n          color: 'rgba(240,240,240,0.8)',\n        }}\n      >\n        {props.description}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,gBAAgB,SAA8D;CAC5F,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,cAAc,kBAAkB,GAAG,SAAS;AAEpF,QAAO,IAAI,cACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EACF;EACE,OAAO;EACP,QAAQ;EACR,GAAG;EACJ,CACF;;AAGH,SAAgB,SAAS,EACvB,eAAe,yBACf,mBAAmB,oBACnB,GAAG,SACa;AAChB,QACE,qBAAC;EACC,OAAO;GACL,SAAS;GACT,eAAe;GACf,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,iBAAiB;GACjB,iBAAiB,iCAAiC,aAAa;GAChE;;GAED,qBAAC;IACC,OAAO;KACL,SAAS;KACT,eAAe;KACf,YAAY;KACZ,KAAK;KACL,cAAc;KACd,OAAO;KACR;eAEA,MAAM,MACP,oBAAC;KACC,OAAO;MACL,UAAU;MACV,YAAY;MACb;eAEA,MAAM;MACL;KACA;GAEN,oBAAC;IACC,OAAO;KACL,YAAY;KACZ,UAAU;KACX;cAEA,MAAM;KACL;GACJ,oBAAC;IACC,OAAO;KACL,UAAU;KACV,OAAO;KACR;cAEA,MAAM;KACL;;GACA"}
+{"version":3,"file":"og.js","names":[],"sources":["../src/og.tsx"],"sourcesContent":["import { ImageResponse } from 'next/og';\nimport type { ReactNode } from 'react';\nimport type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';\n\ninterface GenerateProps {\n  title: ReactNode;\n  description?: ReactNode;\n  icon?: ReactNode;\n  primaryColor?: string;\n  primaryTextColor?: string;\n  site?: ReactNode;\n}\n\nexport function generateOGImage(options: GenerateProps & ImageResponseOptions): ImageResponse {\n  const { title, description, icon, site, primaryColor, primaryTextColor, ...rest } = options;\n\n  return new ImageResponse(\n    generate({\n      title,\n      description,\n      icon,\n      site,\n      primaryTextColor,\n      primaryColor,\n    }),\n    {\n      width: 1200,\n      height: 630,\n      ...rest,\n    },\n  );\n}\n\nexport function generate({\n  primaryColor = 'rgba(255,150,255,0.3)',\n  primaryTextColor = 'rgb(255,150,255)',\n  ...props\n}: GenerateProps) {\n  return (\n    <div\n      style={{\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%',\n        color: 'white',\n        padding: '4rem',\n        backgroundColor: '#0c0c0c',\n        backgroundImage: `linear-gradient(to top right, ${primaryColor}, transparent)`,\n      }}\n    >\n      <div\n        style={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          gap: '16px',\n          marginBottom: '12px',\n          color: primaryTextColor,\n        }}\n      >\n        {props.icon}\n        <p\n          style={{\n            fontSize: '56px',\n            fontWeight: 600,\n            margin: 0,\n          }}\n        >\n          {props.site}\n        </p>\n      </div>\n\n      <p\n        style={{\n          fontWeight: 800,\n          fontSize: '82px',\n          margin: 0,\n        }}\n      >\n        {props.title}\n      </p>\n      <p\n        style={{\n          fontSize: '52px',\n          color: 'rgba(240,240,240,0.8)',\n          margin: 0,\n        }}\n      >\n        {props.description}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";;;;AAaA,SAAgB,gBAAgB,SAA8D;CAC5F,MAAM,EAAE,OAAO,aAAa,MAAM,MAAM,cAAc,kBAAkB,GAAG,SAAS;AAEpF,QAAO,IAAI,cACT,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACD,CAAC,EACF;EACE,OAAO;EACP,QAAQ;EACR,GAAG;EACJ,CACF;;AAGH,SAAgB,SAAS,EACvB,eAAe,yBACf,mBAAmB,oBACnB,GAAG,SACa;AAChB,QACE,qBAAC;EACC,OAAO;GACL,SAAS;GACT,eAAe;GACf,OAAO;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,iBAAiB;GACjB,iBAAiB,iCAAiC,aAAa;GAChE;;GAED,qBAAC;IACC,OAAO;KACL,SAAS;KACT,eAAe;KACf,YAAY;KACZ,KAAK;KACL,cAAc;KACd,OAAO;KACR;eAEA,MAAM,MACP,oBAAC;KACC,OAAO;MACL,UAAU;MACV,YAAY;MACZ,QAAQ;MACT;eAEA,MAAM;MACL;KACA;GAEN,oBAAC;IACC,OAAO;KACL,YAAY;KACZ,UAAU;KACV,QAAQ;KACT;cAEA,MAAM;KACL;GACJ,oBAAC;IACC,OAAO;KACL,UAAU;KACV,OAAO;KACP,QAAQ;KACT;cAEA,MAAM;KACL;;GACA"}

package/dist/style.css

@@ -281,6 +281,9 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
   .inset-x-2 {
     inset-inline: calc(var(--spacing) * 2);
   }
@@ -1463,12 +1466,12 @@
   .bg-transparent {
     background-color: transparent;
   }
+  .mask-\[linear-gradient\(to_bottom\,transparent\,white_--spacing\(14\)\,white_calc\(100\%---spacing\(14\)\)\,transparent\)\] {
+    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - calc(var(--spacing) * 14)),transparent);
+  }
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_16px\,white_calc\(100\%-16px\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white 16px,white calc(100% - 16px),transparent);
   }
-  .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
-    mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
-  }
   .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
     mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fumadocs/base-ui",
-  "version": "16.6.4",
+  "version": "16.6.6",
   "description": "The Base UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -85,6 +85,10 @@
       "types": "./dist/og.d.ts",
       "import": "./dist/og.js"
     },
+    "./og/*": {
+      "types": "./dist/og/*.d.ts",
+      "import": "./dist/og/*.js"
+    },
     "./utils/*": {
       "types": "./dist/utils/*.d.ts",
       "import": "./dist/utils/*.js"
@@ -118,21 +122,25 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.4",
+    "fumadocs-core": "16.6.6",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
+    "@takumi-rs/image-response": "^0.68.17",
     "@types/react": "*",
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tailwindcss": "^4.0.0",
-    "fumadocs-core": "16.6.4"
+    "fumadocs-core": "16.6.6"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
     },
+    "@takumi-rs/image-response": {
+      "optional": true
+    },
     "@types/react": {
       "optional": true
     },