@fumadocs/base-ui 16.7.6 → 16.7.8

package/dist/layouts/docs/slots/sidebar.js

@@ -14,7 +14,7 @@ import { useMemo, useRef, useState } from "react";
 import { usePathname } from "fumadocs-core/framework";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
-import { Check, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
+import { Check, ChevronDown, ChevronsUpDown, Languages, SidebarIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 //#region src/layouts/docs/slots/sidebar.tsx
 const itemVariants = cva("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", { variants: {
@@ -22,7 +22,7 @@ const itemVariants = cva("relative flex flex-row items-center gap-2 rounded-lg p
 		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",
 		button: "transition-colors hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none"
 	},
-	highlight: { 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" }
+	highlight: { 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:inset-s-2.5" }
 } });
 const { useSidebar } = base_exports;
 function SidebarProvider(props) {
@@ -66,12 +66,20 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 			}),
 			viewport,
 			(slots.languageSelect || iconLinks.length > 0 || slots.themeSwitch || footer) && /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col border-t p-4 pt-2 empty:hidden",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex text-fd-muted-foreground items-center empty:hidden",
-					children: [
-						slots.languageSelect && /* @__PURE__ */ jsx(slots.languageSelect.root, { children: /* @__PURE__ */ jsx(Languages, { className: "size-4.5" }) }),
-						iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
+				className: "flex flex-col p-4 pt-2",
+				children: [
+					slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
+						variant: "secondary",
+						className: "text-fd-muted-foreground text-start justify-start bg-fd-secondary/50 mb-2",
+						children: [
+							/* @__PURE__ */ jsx(Languages, { className: "size-4.5" }),
+							/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
+							/* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto size-3.5" })
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex text-fd-muted-foreground items-center border bg-fd-secondary/50 p-0.5 pe-0 rounded-lg empty:hidden",
+						children: [iconLinks.map((item, i) => /* @__PURE__ */ jsx(LinkItem, {
 							item,
 							className: cn(buttonVariants({
 								size: "icon-sm",
@@ -79,10 +87,10 @@ function Sidebar({ footer, banner, collapsible = true, components, ...rest }) {
 							})),
 							"aria-label": item.label,
 							children: item.icon
-						}, i)),
-						slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "ms-auto p-0" })
-					]
-				}), footer]
+						}, i)), slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: "px-1 py-0 border-y-0 border-e-0 rounded-none ms-auto *:rounded-md" })]
+					}),
+					footer
+				]
 			})
 		]
 	}), /* @__PURE__ */ jsxs(SidebarDrawer, { children: [
@@ -143,21 +151,21 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 		"data-sidebar-placeholder": "",
 		className: "sticky top-(--fd-docs-row-1) z-20 [grid-area:sidebar] pointer-events-none *:pointer-events-auto h-[calc(var(--fd-docs-height)-var(--fd-docs-row-1))] md:layout:[--fd-sidebar-width:268px] max-md:hidden",
 		children: [collapsed && /* @__PURE__ */ jsx("div", {
-			className: "absolute start-0 inset-y-0 w-4",
+			className: "absolute inset-s-0 inset-y-0 w-4",
 			...rest
 		}), /* @__PURE__ */ jsx("aside", {
 			id: "nd-sidebar",
 			ref: mergeRefs(ref, refProp, asideRef),
 			"data-collapsed": collapsed,
 			"data-hovered": collapsed && hovered,
-			className: cn("absolute flex flex-col w-full start-0 inset-y-0 items-end bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)", collapsed && ["inset-y-2 rounded-xl transition-transform border w-(--fd-sidebar-width)", hovered ? "shadow-lg translate-x-2 rtl:-translate-x-2" : "-translate-x-(--fd-sidebar-width) rtl:translate-x-full"], ref.current && ref.current.getAttribute("data-collapsed") === "true" !== collapsed && "transition-[width,inset-block,translate,background-color]", className),
+			className: cn("absolute flex flex-col w-full inset-s-0 inset-y-0 items-end bg-fd-card text-sm border-e duration-250 *:w-(--fd-sidebar-width)", collapsed && ["inset-y-2 rounded-xl transition-transform border w-(--fd-sidebar-width)", hovered ? "shadow-lg translate-x-2 rtl:-translate-x-2" : "-translate-x-(--fd-sidebar-width) rtl:translate-x-full"], ref.current && ref.current.getAttribute("data-collapsed") === "true" !== collapsed && "transition-[width,inset-block,translate,background-color]", className),
 			...props,
 			...rest,
 			children
 		})]
 	}), /* @__PURE__ */ jsxs("div", {
 		"data-sidebar-panel": "",
-		className: cn("fixed flex top-[calc(--spacing(4)+var(--fd-docs-row-3))] start-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10", (!collapsed || hovered) && "pointer-events-none opacity-0"),
+		className: cn("fixed flex top-[calc(--spacing(4)+var(--fd-docs-row-3))] inset-s-4 shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10", (!collapsed || hovered) && "pointer-events-none opacity-0"),
 		children: [/* @__PURE__ */ jsx(SidebarCollapseTrigger$1, {
 			className: cn(buttonVariants({
 				color: "ghost",
@@ -173,7 +181,7 @@ function SidebarContent({ ref: refProp, className, children, ...props }) {
 }
 function SidebarDrawer({ children, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarDrawerOverlay, { className: "fixed z-40 inset-0 backdrop-blur-xs data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out" }), /* @__PURE__ */ jsx(SidebarDrawerContent, {
-		className: cn("fixed text-[0.9375rem] flex flex-col shadow-lg border-s end-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out", className),
+		className: cn("fixed text-[0.9375rem] flex flex-col shadow-lg border-s inset-e-0 inset-y-0 w-[85%] max-w-[380px] z-40 bg-fd-background data-[state=open]:animate-fd-sidebar-in data-[state=closed]:animate-fd-sidebar-out", className),
 		...props,
 		children
 	})] });
@@ -235,7 +243,7 @@ function SidebarFolderLink({ className, style, ...props }) {
 function SidebarFolderContent({ className, children, ...props }) {
 	const depth = useFolderDepth();
 	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: (state) => cn("relative flex flex-col gap-0.5 pt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:start-2.5", typeof className === "function" ? className(state) : className),
+		className: (state) => cn("relative flex flex-col gap-0.5 pt-0.5", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", typeof className === "function" ? className(state) : className),
 		...props,
 		children
 	});

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

@@ -3,7 +3,7 @@ import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, LinkItemType } from "
 import { TabDropdownProps } from "./slots/tab-dropdown.js";
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "fumadocs-core/page-tree";
 import { motion } from "motion/react";
 
@@ -43,7 +43,7 @@ declare function useFluxLayout(): {
   navItems: LinkItemType[];
   slots: DocsSlots;
 };
-declare function DocsLayout(props: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function DocsLayout(props: DocsLayoutProps): _$react_jsx_runtime0.JSX.Element;
 interface NavigationPanelProps {
   head: ReactNode;
   tabDropdown: ReactNode;
@@ -62,13 +62,13 @@ declare function NavigationPanel({
    * replace default children
    */
   children?: (defaultChildren: ReactNode) => ReactNode;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 declare function NavigationPanelOverlay({
   enabled,
   className,
   ...props
 }: ComponentProps<typeof motion.div> & {
   enabled?: boolean;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsLayout, DocsLayoutProps, DocsSlots, NavigationPanel, NavigationPanelOverlay, NavigationPanelProps, useFluxLayout };

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

@@ -3,7 +3,7 @@ import { TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { Footer, FooterProps } from "./slots/footer.js";
 import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/flux/page/index.d.ts
@@ -75,8 +75,8 @@ declare function DocsPage({
   slots: defaultSlots,
   children,
   ...containerProps
-}: DocsPageProps): react_jsx_runtime0.JSX.Element;
-declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
+}: DocsPageProps): _$react_jsx_runtime0.JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): _$react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
  */
@@ -84,22 +84,22 @@ declare function DocsBody({
   children,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare function DocsDescription({
   children,
   className,
   ...props
-}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element | null;
+}: ComponentProps<'p'>): _$react_jsx_runtime0.JSX.Element | null;
 declare function DocsTitle({
   children,
   className,
   ...props
-}: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'h1'>): _$react_jsx_runtime0.JSX.Element;
 declare function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/flux/page/slots/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
 
 //#region src/layouts/flux/page/slots/breadcrumb.d.ts
@@ -9,6 +9,6 @@ declare function Breadcrumb({
   includeSeparator,
   includePage,
   ...props
-}: BreadcrumbProps): react_jsx_runtime0.JSX.Element | null;
+}: BreadcrumbProps): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { Breadcrumb, BreadcrumbProps };

package/dist/layouts/flux/page/slots/container.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/flux/page/slots/container.d.ts
-declare function Container(props: ComponentProps<'article'>): react_jsx_runtime0.JSX.Element;
+declare function Container(props: ComponentProps<'article'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Container };

package/dist/layouts/flux/page/slots/footer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/layouts/flux/page/slots/footer.d.ts
@@ -18,6 +18,6 @@ declare function Footer({
   children,
   className,
   ...props
-}: FooterProps): react_jsx_runtime0.JSX.Element;
+}: FooterProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Footer, FooterProps };

package/dist/layouts/flux/page/slots/toc.d.ts

@@ -1,6 +1,6 @@
 import { TOCProvider as TOCProvider$1, TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/flux/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
@@ -29,6 +29,6 @@ declare function TOC({
   header,
   footer,
   style
-}: TOCProps): react_jsx_runtime0.JSX.Element;
+}: TOCProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/flux/slots/container.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/flux/slots/container.d.ts
-declare function Container(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function Container(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Container };

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

@@ -1,7 +1,7 @@
 import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSidebar$1 } from "../../../components/sidebar/base.js";
 import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/flux/slots/sidebar.d.ts
 interface SidebarProps extends ComponentProps<'aside'> {
@@ -11,13 +11,13 @@ interface SidebarProps extends ComponentProps<'aside'> {
 }
 type SidebarProviderProps = SidebarProviderProps$1;
 declare const useSidebar: typeof useSidebar$1;
-declare function SidebarProvider(props: SidebarProviderProps): react_jsx_runtime0.JSX.Element;
+declare function SidebarProvider(props: SidebarProviderProps): _$react_jsx_runtime0.JSX.Element;
 declare function Sidebar({
   footer,
   banner,
   components,
   ...rest
-}: SidebarProps): react_jsx_runtime0.JSX.Element;
-declare function SidebarTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+}: SidebarProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Sidebar, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTrigger, useSidebar };

package/dist/layouts/flux/slots/tab-dropdown.d.ts

@@ -1,6 +1,6 @@
 import { LayoutTab } from "../../shared/index.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/flux/slots/tab-dropdown.d.ts
 interface TabDropdownProps extends ComponentProps<'button'> {
@@ -12,6 +12,6 @@ declare function TabDropdown({
   placeholder,
   className,
   ...props
-}: TabDropdownProps): react_jsx_runtime0.JSX.Element;
+}: TabDropdownProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TabDropdown, TabDropdownProps };

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

@@ -1,7 +1,7 @@
 import { BaseSlots, BaseSlotsProps } from "../shared/client.js";
 import { BaseLayoutProps, LinkItemType, NavOptions } from "../shared/index.js";
 import { ComponentProps, FC } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/home/index.d.ts
 interface HomeLayoutProps extends BaseLayoutProps, ComponentProps<'main'> {
@@ -24,6 +24,6 @@ declare function useHomeLayout(): {
   menuItems: LinkItemType[];
   slots: HomeSlots;
 };
-declare function HomeLayout(props: HomeLayoutProps): react_jsx_runtime0.JSX.Element;
+declare function HomeLayout(props: HomeLayoutProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { HomeLayout, HomeLayoutProps, HomeSlots, useHomeLayout };

package/dist/layouts/home/navbar.d.ts

@@ -1,11 +1,11 @@
 import { NavigationMenuContentProps, NavigationMenuItem, NavigationMenuTriggerProps } from "../../components/ui/navigation-menu.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { LinkProps } from "fumadocs-core/link";
 
 //#region src/layouts/home/navbar.d.ts
 declare const NavbarMenu: typeof NavigationMenuItem;
-declare function NavbarMenuContent(props: NavigationMenuContentProps): react_jsx_runtime0.JSX.Element;
-declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): react_jsx_runtime0.JSX.Element;
-declare function NavbarMenuLink(props: LinkProps): react_jsx_runtime0.JSX.Element;
+declare function NavbarMenuContent(props: NavigationMenuContentProps): _$react_jsx_runtime0.JSX.Element;
+declare function NavbarMenuTrigger(props: NavigationMenuTriggerProps): _$react_jsx_runtime0.JSX.Element;
+declare function NavbarMenuLink(props: LinkProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { NavbarMenu, NavbarMenuContent, NavbarMenuLink, NavbarMenuTrigger };

package/dist/layouts/home/not-found.d.ts

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/home/not-found.d.ts
 /**
  * the default not found page content, please make your own if you want to customise it.
  */
-declare function DefaultNotFound(): react_jsx_runtime0.JSX.Element;
+declare function DefaultNotFound(): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DefaultNotFound };

package/dist/layouts/home/slots/container.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/home/slots/container.d.ts
-declare function Container(props: ComponentProps<'main'>): react_jsx_runtime0.JSX.Element;
+declare function Container(props: ComponentProps<'main'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Container };

package/dist/layouts/home/slots/header.d.ts

@@ -1,11 +1,11 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
   variant?: "button" | "main" | "icon" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function Header(props: ComponentProps<'header'>): react_jsx_runtime0.JSX.Element;
+} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function Header(props: ComponentProps<'header'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Header, navItemVariants };

package/dist/layouts/notebook/client.d.ts

@@ -3,7 +3,6 @@ import { LayoutTab, LinkItemType } from "../shared/index.js";
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsLayoutProps } from "./index.js";
 import { ComponentProps, FC } from "react";
-
 //#region src/layouts/notebook/client.d.ts
 interface DocsSlots extends BaseSlots {
   container: FC<ComponentProps<'div'>>;

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

@@ -2,7 +2,7 @@ import { BaseLayoutProps, GetLayoutTabsOptions, LayoutTab, NavOptions } from "..
 import { SidebarProps, SidebarProviderProps } from "./slots/sidebar.js";
 import { DocsSlots, useNotebookLayout } from "./client.js";
 import { HTMLAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/layouts/notebook/index.d.ts
@@ -34,6 +34,6 @@ declare function DocsLayout({
   children,
   tabs,
   ...props
-}: DocsLayoutProps): react_jsx_runtime0.JSX.Element;
+}: DocsLayoutProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DocsLayout, DocsLayoutProps, type DocsSlots, useNotebookLayout };

package/dist/layouts/notebook/page/index.d.ts

@@ -3,7 +3,7 @@ import { TOCPopoverProps, TOCProps, TOCProviderProps } from "./slots/toc.js";
 import { Footer, FooterProps } from "./slots/footer.js";
 import { Breadcrumb, BreadcrumbProps } from "./slots/breadcrumb.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { TOCItemType } from "fumadocs-core/toc";
 
 //#region src/layouts/notebook/page/index.d.ts
@@ -87,8 +87,8 @@ declare function DocsPage({
   slots: defaultSlots,
   children,
   ...containerProps
-}: DocsPageProps): react_jsx_runtime0.JSX.Element;
-declare function EditOnGitHub(props: ComponentProps<'a'>): react_jsx_runtime0.JSX.Element;
+}: DocsPageProps): _$react_jsx_runtime0.JSX.Element;
+declare function EditOnGitHub(props: ComponentProps<'a'>): _$react_jsx_runtime0.JSX.Element;
 /**
  * Add typography styles
  */
@@ -96,22 +96,22 @@ declare function DocsBody({
   children,
   className,
   ...props
-}: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 declare function DocsDescription({
   children,
   className,
   ...props
-}: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element | null;
+}: ComponentProps<'p'>): _$react_jsx_runtime0.JSX.Element | null;
 declare function DocsTitle({
   children,
   className,
   ...props
-}: ComponentProps<'h1'>): react_jsx_runtime0.JSX.Element;
+}: ComponentProps<'h1'>): _$react_jsx_runtime0.JSX.Element;
 declare function PageLastUpdate({
   date: value,
   ...props
 }: Omit<ComponentProps<'p'>, 'children'> & {
   date: Date;
-}): react_jsx_runtime0.JSX.Element;
+}): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { type BreadcrumbProps, DocsBody, DocsDescription, DocsPage, DocsPageProps, DocsTitle, EditOnGitHub, type FooterProps, MarkdownCopyButton, Breadcrumb as PageBreadcrumb, Footer as PageFooter, PageLastUpdate, ViewOptionsPopover, useDocsPage };

package/dist/layouts/notebook/page/slots/breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { BreadcrumbOptions } from "fumadocs-core/breadcrumb";
 
 //#region src/layouts/notebook/page/slots/breadcrumb.d.ts
@@ -9,6 +9,6 @@ declare function Breadcrumb({
   includeSeparator,
   includePage,
   ...props
-}: BreadcrumbProps): react_jsx_runtime0.JSX.Element | null;
+}: BreadcrumbProps): _$react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { Breadcrumb, BreadcrumbProps };

package/dist/layouts/notebook/page/slots/container.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/page/slots/container.d.ts
-declare function Container(props: ComponentProps<'article'>): react_jsx_runtime0.JSX.Element;
+declare function Container(props: ComponentProps<'article'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Container };

package/dist/layouts/notebook/page/slots/footer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as PageTree from "fumadocs-core/page-tree";
 
 //#region src/layouts/notebook/page/slots/footer.d.ts
@@ -18,6 +18,6 @@ declare function Footer({
   children,
   className,
   ...props
-}: FooterProps): react_jsx_runtime0.JSX.Element;
+}: FooterProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Footer, FooterProps };

package/dist/layouts/notebook/page/slots/toc.d.ts

@@ -1,10 +1,10 @@
 import { TOCProviderProps as TOCProviderProps$1 } from "../../../../components/toc/index.js";
 import { ComponentProps, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/page/slots/toc.d.ts
 type TOCProviderProps = TOCProviderProps$1;
-declare function TOCProvider(props: TOCProviderProps): react_jsx_runtime0.JSX.Element;
+declare function TOCProvider(props: TOCProviderProps): _$react_jsx_runtime0.JSX.Element;
 interface TOCProps {
   container?: ComponentProps<'div'>;
   /**
@@ -25,7 +25,7 @@ declare function TOC({
   header,
   footer,
   style
-}: TOCProps): react_jsx_runtime0.JSX.Element;
+}: TOCProps): _$react_jsx_runtime0.JSX.Element;
 interface TOCPopoverProps {
   container?: ComponentProps<'div'>;
   trigger?: ComponentProps<'button'>;
@@ -50,6 +50,6 @@ declare function TOCPopover({
   header,
   footer,
   style
-}: TOCPopoverProps): react_jsx_runtime0.JSX.Element;
+}: TOCPopoverProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOC, TOCPopover, TOCPopoverProps, TOCProps, TOCProvider, TOCProviderProps };

package/dist/layouts/notebook/slots/container.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/slots/container.d.ts
-declare function Container(props: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function Container(props: ComponentProps<'div'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Container };

package/dist/layouts/notebook/slots/container.js

@@ -1,15 +1,22 @@
 "use client";
 import { cn } from "../../../utils/cn.js";
 import { useNotebookLayout } from "../client.js";
+import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/notebook/slots/container.tsx
 function Container(props) {
 	const { props: { nav }, slots } = useNotebookLayout();
 	const pageCol = "calc(var(--fd-layout-width,97rem) - var(--fd-sidebar-col) - var(--fd-toc-width))";
 	const { collapsed } = slots.sidebar?.useSidebar?.() ?? {};
+	const [previousCollapsed, setPreviousCollapsed] = useState(collapsed);
+	const isCollapseChanged = previousCollapsed !== collapsed;
+	useEffect(() => {
+		if (isCollapseChanged) setPreviousCollapsed(collapsed);
+	}, [collapsed, isCollapseChanged]);
 	return /* @__PURE__ */ jsx("div", {
 		id: "nd-notebook-layout",
 		"data-sidebar-collapsed": collapsed,
+		"data-column-changed": isCollapseChanged,
 		...props,
 		style: {
 			gridTemplate: nav?.mode === "top" ? `". header header header ."
@@ -23,7 +30,7 @@ function Container(props) {
 			"--fd-sidebar-col": collapsed ? "0px" : "var(--fd-sidebar-width)",
 			...props.style
 		},
-		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) transition-[grid-template-columns] auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px]", props.className),
+		className: cn("grid overflow-x-clip min-h-(--fd-docs-height) auto-cols-auto auto-rows-auto [--fd-docs-height:100dvh] [--fd-header-height:0px] [--fd-toc-popover-height:0px] [--fd-sidebar-width:0px] [--fd-toc-width:0px] data-[column-changed=true]:transition-[grid-template-columns]", props.className),
 		children: props.children
 	});
 }

package/dist/layouts/notebook/slots/header.d.ts

@@ -1,8 +1,8 @@
-import * as react from "react";
+import * as _$react from "react";
 import { ComponentProps } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/slots/header.d.ts
-declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | react_jsx_runtime0.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined>;
+declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | _$react_jsx_runtime0.JSX.Element | Iterable<_$react.ReactNode> | Promise<string | number | bigint | boolean | _$react.ReactPortal | _$react.ReactElement<unknown, string | _$react.JSXElementConstructor<any>> | Iterable<_$react.ReactNode> | null | undefined>;
 //#endregion
 export { Header };

package/dist/layouts/notebook/slots/header.js

@@ -34,7 +34,7 @@ function Header(props) {
 							className: cn(buttonVariants({
 								color: "ghost",
 								size: "icon-sm"
-							}), "text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
+							}), "-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden"),
 							children: /* @__PURE__ */ jsx(Sidebar, {})
 						}),
 						slots.navTitle && /* @__PURE__ */ jsx(slots.navTitle, { className: cn("inline-flex items-center gap-2.5 font-semibold", navMode === "auto" && "md:hidden") }),

package/dist/layouts/notebook/slots/sidebar.d.ts

@@ -2,7 +2,7 @@ import { SidebarProviderProps as SidebarProviderProps$1, useSidebar as useSideba
 import { LayoutTab } from "../../shared/index.js";
 import { SidebarPageTreeComponents } from "../../../components/sidebar/page-tree.js";
 import { ComponentProps, FC, ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/layouts/notebook/slots/sidebar.d.ts
 interface SidebarProps extends ComponentProps<'aside'> {
@@ -18,16 +18,16 @@ interface SidebarProps extends ComponentProps<'aside'> {
 }
 type SidebarProviderProps = SidebarProviderProps$1;
 declare const useSidebar: typeof useSidebar$1;
-declare function SidebarProvider(props: SidebarProviderProps): react_jsx_runtime0.JSX.Element;
-declare function SidebarTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
-declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+declare function SidebarProvider(props: SidebarProviderProps): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarTrigger(props: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
+declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
 declare function Sidebar({
   banner,
   footer,
   components,
   collapsible,
   ...rest
-}: SidebarProps): react_jsx_runtime0.JSX.Element;
+}: SidebarProps): _$react_jsx_runtime0.JSX.Element;
 declare function SidebarTabsDropdown({
   options,
   placeholder,
@@ -35,6 +35,6 @@ declare function SidebarTabsDropdown({
 }: {
   placeholder?: ReactNode;
   options: LayoutTab[];
-} & ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+} & ComponentProps<'button'>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Sidebar, SidebarCollapseTrigger, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarTabsDropdown, SidebarTrigger, useSidebar };