fumadocs-ui 16.1.0 → 16.2.0

package/css/black.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-background: hsl(0, 0%, 98%);

package/css/catppuccin.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-popover: hsl(220, 22%, 92%);

package/css/colors/index.css

@@ -0,0 +1,51 @@
+@theme {
+  --color-fd-background: hsl(0, 0%, 96%);
+  --color-fd-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-muted: hsl(0, 0%, 96.1%);
+  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-fd-popover: hsl(0, 0%, 98%);
+  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-fd-card: hsl(0, 0%, 94.7%);
+  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
+  --color-fd-border: hsla(0, 0%, 80%, 50%);
+  --color-fd-primary: hsl(0, 0%, 9%);
+  --color-fd-primary-foreground: hsl(0, 0%, 98%);
+  --color-fd-secondary: hsl(0, 0%, 93.1%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
+  --color-fd-accent: hsla(0, 0%, 82%, 50%);
+  --color-fd-accent-foreground: hsl(0, 0%, 9%);
+  --color-fd-ring: hsl(0, 0%, 63.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 7.04%);
+  --color-fd-foreground: hsl(0, 0%, 92%);
+  --color-fd-muted: hsl(0, 0%, 12.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-fd-popover: hsl(0, 0%, 11.6%);
+  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-fd-card: hsl(0, 0%, 9.8%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-border: hsla(0, 0%, 40%, 20%);
+  --color-fd-primary: hsl(0, 0%, 98%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
+  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-fd-accent-foreground: hsl(0, 0%, 90%);
+  --color-fd-ring: hsl(0, 0%, 54.9%);
+  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
+}
+
+@theme static {
+  --color-fd-info: oklch(62.3% 0.214 259.815);
+  --color-fd-warning: oklch(76.9% 0.188 70.08);
+  --color-fd-error: oklch(63.7% 0.237 25.331);
+  --color-fd-success: oklch(72.3% 0.219 149.579);
+  --color-fd-idea: oklch(70.5% 0.209 60.849);
+  --color-fd-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-fd-diff-remove-symbol: rgb(230, 10, 100);
+  --color-fd-diff-add: rgba(14, 180, 100, 0.1);
+  --color-fd-diff-add-symbol: rgb(10, 200, 100);
+}

package/css/dusk.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-background: hsl(250, 20%, 92%);

package/css/layouts/docs.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/docs/**/*.js';

package/css/layouts/home.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/home/**/*.js';

package/css/layouts/notebook.css

@@ -0,0 +1 @@
+@source '../../dist/layouts/notebook/**/*.js';

package/css/neutral.css

@@ -1,43 +1,4 @@
-@import './default.css';
-
-@theme {
-  --color-fd-background: hsl(0, 0%, 96%);
-  --color-fd-foreground: hsl(0, 0%, 3.9%);
-  --color-fd-muted: hsl(0, 0%, 96.1%);
-  --color-fd-muted-foreground: hsl(0, 0%, 45.1%);
-  --color-fd-popover: hsl(0, 0%, 98%);
-  --color-fd-popover-foreground: hsl(0, 0%, 15.1%);
-  --color-fd-card: hsl(0, 0%, 94.7%);
-  --color-fd-card-foreground: hsl(0, 0%, 3.9%);
-  --color-fd-border: hsla(0, 0%, 80%, 50%);
-  --color-fd-primary: hsl(0, 0%, 9%);
-  --color-fd-primary-foreground: hsl(0, 0%, 98%);
-  --color-fd-secondary: hsl(0, 0%, 93.1%);
-  --color-fd-secondary-foreground: hsl(0, 0%, 9%);
-  --color-fd-accent: hsla(0, 0%, 82%, 50%);
-  --color-fd-accent-foreground: hsl(0, 0%, 9%);
-  --color-fd-ring: hsl(0, 0%, 63.9%);
-}
-
-.dark {
-  --color-fd-background: hsl(0, 0%, 7.04%);
-  --color-fd-foreground: hsl(0, 0%, 92%);
-  --color-fd-muted: hsl(0, 0%, 12.9%);
-  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
-  --color-fd-popover: hsl(0, 0%, 11.6%);
-  --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
-  --color-fd-card: hsl(0, 0%, 9.8%);
-  --color-fd-card-foreground: hsl(0, 0%, 98%);
-  --color-fd-border: hsla(0, 0%, 40%, 20%);
-  --color-fd-primary: hsl(0, 0%, 98%);
-  --color-fd-primary-foreground: hsl(0, 0%, 9%);
-  --color-fd-secondary: hsl(0, 0%, 12.9%);
-  --color-fd-secondary-foreground: hsl(0, 0%, 92%);
-  --color-fd-accent: hsla(0, 0%, 40.9%, 30%);
-  --color-fd-accent-foreground: hsl(0, 0%, 90%);
-  --color-fd-ring: hsl(0, 0%, 54.9%);
-  --color-fd-overlay: hsla(0, 0%, 0%, 0.2);
-}
+@import './colors/index.css';
 
 .dark #nd-sidebar {
   --color-fd-muted: hsl(0, 0%, 16%);

package/css/ocean.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-background: hsl(0, 0%, 98%);

package/css/preset.css

@@ -1,22 +1,25 @@
 @import './shiki.css';
 
-@source '../dist/**/*.js';
+/* TODO: remove them on next major */
+@import './layouts/docs.css';
+@import './layouts/home.css';
+@import './layouts/notebook.css';
+
+@source '../dist/*.js';
+@source '../dist/{components,contexts,provider,utils}/**/*.js';
+@source '../dist/layouts/shared/**/*.js';
+
 @plugin '../dist/theme/typography/index.js';
 
+:root {
+  --fd-sidebar-drawer-offset: 100%;
+}
+
 [dir='rtl'] {
-  --fd-sidebar-mobile-offset: -100%;
+  --fd-sidebar-drawer-offset: -100%;
 }
 
 @theme {
-  --fd-sidebar-mobile-offset: 100%;
-  --spacing-fd-container: 1400px;
-  --fd-page-width: 1200px;
-  --fd-sidebar-width: 0px;
-  --fd-toc-width: 0px;
-  --fd-layout-width: 1600px;
-  --fd-banner-height: 0px;
-  --fd-nav-height: 0px;
-  --fd-tocnav-height: 0px;
   --animate-fd-fade-in: fd-fade-in 300ms ease;
   --animate-fd-fade-out: fd-fade-out 300ms ease;
 
@@ -48,13 +51,13 @@
 
   @keyframes fd-sidebar-in {
     from {
-      transform: translateX(var(--fd-sidebar-mobile-offset));
+      transform: translateX(var(--fd-sidebar-drawer-offset));
     }
   }
 
   @keyframes fd-sidebar-out {
     to {
-      transform: translateX(var(--fd-sidebar-mobile-offset));
+      transform: translateX(var(--fd-sidebar-drawer-offset));
     }
   }
 
@@ -230,11 +233,6 @@
     background-color: var(--color-fd-background);
     color: var(--color-fd-foreground);
   }
-
-  :root,
-  #nd-docs-layout {
-    --fd-layout-offset: max(calc(50vw - var(--fd-layout-width) / 2), 0px);
-  }
 }
 
 @utility fd-scroll-container {
@@ -295,18 +293,13 @@
   initial-value: 0px;
 }
 
-@utility container {
-  margin-inline: auto;
-  padding-inline: 1rem;
-
-  @apply 2xl:max-w-(--spacing-fd-container);
-}
-
 @variant dark (&:where(.dark, .dark *));
 
-/* Apply styles to :root */
-@custom-variant on-root {
-  :root:has(&) {
+/* define/override layout variables */
+@variant layout {
+  #nd-docs-layout:has(&),
+  #nd-notebook-layout:has(&),
+  #nd-home-layout:has(&) {
     @slot;
   }
 }

package/css/purple.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-background: hsl(256, 100%, 96%);

package/css/shadcn.css

@@ -1,5 +1,3 @@
-@import './default.css';
-
 @theme {
   --color-fd-background: var(--background);
   --color-fd-foreground: var(--foreground);

package/css/shiki.css

@@ -1,9 +1,7 @@
-:root {
+.shiki:not(.not-fumadocs-codeblock *) {
   --padding-left: calc(var(--spacing) * 4);
   --padding-right: calc(var(--spacing) * 4);
-}
 
-.shiki:not(.not-fumadocs-codeblock *) {
   code span {
     color: var(--shiki-light);
   }

package/css/solar.css

@@ -1,4 +1,4 @@
-@import './neutral.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-primary: oklch(0.487 0.083 262.691);
@@ -7,8 +7,6 @@
 
 :root {
   letter-spacing: -0.25px;
-  --fd-layout-width: 1600px;
-  --fd-page-width: 1400px;
 }
 
 .dark {
@@ -18,31 +16,64 @@
 }
 
 @variant md {
-  #nd-page article {
-    @apply bg-fd-article rounded-xl border shadow-xl my-4;
-  }
+  #nd-docs-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
 
-  #nd-tocnav,
-  #nd-subnav > div {
-    border: none;
-  }
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
 
-  .fd-default-layout #nd-page article {
-    @apply mx-4;
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-1) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
   }
 
-  .fd-notebook-layout #nd-page article {
-    @apply mx-6;
+  #nd-notebook-layout {
+    #nd-page {
+      @apply relative md:px-9 xl:px-12;
+    }
+
+    #nd-page:before {
+      content: '';
+      @apply absolute inset-0 bg-fd-article rounded-xl border shadow-xl m-4 mb-2 -z-1;
+    }
+
+    [data-toc-popover-trigger],
+    [data-toc-popover-content] {
+      @apply px-4;
+    }
+
+    [data-toc-popover] {
+      top: calc(var(--fd-docs-row-2) + 2.5 * var(--spacing));
+      @apply mx-4 mt-2.5;
+
+      header {
+        transform-origin: top center;
+        @apply border rounded-xl shadow-lg transition-[margin] has-data-[active=true]:-mx-2 has-data-[active=true]:bg-fd-popover/80;
+      }
+    }
   }
 }
 
 #nd-sidebar {
-  @apply bg-fd-background;
+  @apply bg-fd-card;
 }
 
 #nd-sidebar[data-collapsed='false'] {
   border: none;
-  --color-fd-muted: inherit;
-  --color-fd-secondary: inherit;
-  --color-fd-muted-foreground: inherit;
+  @apply bg-fd-background;
 }

package/css/vitepress.css

@@ -1,4 +1,4 @@
-@import './default.css';
+@import './colors/index.css';
 
 @theme {
   --color-fd-muted: hsl(0, 0%, 96.1%);

package/dist/components/image-zoom.d.ts

@@ -1,12 +1,12 @@
 import { type ImageProps } from 'fumadocs-core/framework';
-import { type ImgHTMLAttributes } from 'react';
-import './image-zoom.css';
+import type { ComponentProps } from 'react';
 import { type UncontrolledProps } from 'react-medium-image-zoom';
+import './image-zoom.css';
 export type ImageZoomProps = ImageProps & {
     /**
      * Image props when zoom in
      */
-    zoomInProps?: ImgHTMLAttributes<HTMLImageElement>;
+    zoomInProps?: ComponentProps<'img'>;
     /**
      * Props for `react-medium-image-zoom`
      */

package/dist/components/image-zoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-zoom.d.ts","sourceRoot":"","sources":["../../src/components/image-zoom.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,kBAAkB,CAAC;AAC1B,OAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAEvE,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAElD;;OAEG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAeF,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,2CAoBhB"}
+{"version":3,"file":"image-zoom.d.ts","sourceRoot":"","sources":["../../src/components/image-zoom.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAa,EAAE,KAAK,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG;IACxC;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAEpC;;OAEG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAeF,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,QAAQ,EACR,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,cAAc,2CAoBhB"}

package/dist/components/image-zoom.js

@@ -1,8 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Image } from 'fumadocs-core/framework';
-import './image-zoom.css';
 import Zoom from 'react-medium-image-zoom';
+import './image-zoom.css';
 function getImageSrc(src) {
     if (typeof src === 'string')
         return src;

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

@@ -0,0 +1,62 @@
+import { type ComponentProps, type ReactNode, type RefObject } from 'react';
+import { type LinkProps } from 'fumadocs-core/link';
+import { type ScrollAreaProps } from '@radix-ui/react-scroll-area';
+import type { CollapsibleContentProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+interface SidebarContext {
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    collapsed: boolean;
+    setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * When set to false, don't close the sidebar when navigate to another page
+     */
+    closeOnRedirect: RefObject<boolean>;
+    defaultOpenLevel: number;
+    prefetch: boolean;
+    mode: Mode;
+}
+export interface SidebarProviderProps {
+    /**
+     * Open folders by default if their level is lower or equal to a specific level
+     * (Starting from 1)
+     *
+     * @defaultValue 0
+     */
+    defaultOpenLevel?: number;
+    /**
+     * Prefetch links
+     *
+     * @defaultValue true
+     */
+    prefetch?: boolean;
+    children?: ReactNode;
+}
+type Mode = 'drawer' | 'full';
+declare const SidebarContext: import("react").Context<SidebarContext | null>;
+export declare function SidebarProvider({ defaultOpenLevel, prefetch, children, }: SidebarProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useSidebar(): SidebarContext;
+export declare function useFolderDepth(): number;
+export declare function SidebarContent({ children, aside, }: {
+    aside?: (state: {
+        collapsed: boolean;
+        hovered: boolean;
+    }) => ComponentProps<'aside'>;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarDrawerOverlay(props: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarDrawerContent({ className, children, ...props }: ComponentProps<'aside'>): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function SidebarViewport(props: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarSeparator(props: ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarItem({ icon, children, ...props }: LinkProps & {
+    icon?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolder({ defaultOpen: defaultOpenOption, ...props }: ComponentProps<'div'> & {
+    defaultOpen?: boolean | ((currentDefault: boolean) => boolean);
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderTrigger(props: CollapsibleTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderLink(props: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarFolderContent(props: CollapsibleContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarTrigger({ children, ...props }: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export declare function SidebarCollapseTrigger(props: ComponentProps<'button'>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=base.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/base.tsx"],"names":[],"mappings":"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"}

package/dist/components/sidebar/base.js

@@ -0,0 +1,174 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ExternalLink } from '../../icons.js';
+import { createContext, use, useEffect, useMemo, useRef, useState, } from 'react';
+import Link from 'fumadocs-core/link';
+import { useOnChange } from 'fumadocs-core/utils/use-on-change';
+import { cn } from '../../utils/cn.js';
+import { ScrollArea, ScrollViewport } from '../../components/ui/scroll-area.js';
+import { isActive } from '../../utils/is-active.js';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../../components/ui/collapsible.js';
+import { useMediaQuery } from 'fumadocs-core/utils/use-media-query';
+import { Presence } from '@radix-ui/react-presence';
+import scrollIntoView from 'scroll-into-view-if-needed';
+import { usePathname } from 'fumadocs-core/framework';
+const SidebarContext = createContext(null);
+const FolderContext = createContext(null);
+export function SidebarProvider({ defaultOpenLevel = 0, prefetch = true, children, }) {
+    const closeOnRedirect = useRef(true);
+    const [open, setOpen] = useState(false);
+    const [collapsed, setCollapsed] = useState(false);
+    const pathname = usePathname();
+    const mode = useMediaQuery('(width < 768px)') ? 'drawer' : 'full';
+    useOnChange(pathname, () => {
+        if (closeOnRedirect.current) {
+            setOpen(false);
+        }
+        closeOnRedirect.current = true;
+    });
+    return (_jsx(SidebarContext, { value: useMemo(() => ({
+            open,
+            setOpen,
+            collapsed,
+            setCollapsed,
+            closeOnRedirect,
+            defaultOpenLevel,
+            prefetch,
+            mode,
+        }), [open, collapsed, defaultOpenLevel, prefetch, mode]), children: children }));
+}
+export function useSidebar() {
+    const ctx = use(SidebarContext);
+    if (!ctx)
+        throw new Error('Missing SidebarContext, make sure you have wrapped the component in <DocsLayout /> and the context is available.');
+    return ctx;
+}
+export function useFolderDepth() {
+    return use(FolderContext)?.depth ?? 0;
+}
+export function SidebarContent({ children, aside, }) {
+    const { collapsed, mode } = useSidebar();
+    const [hover, setHover] = useState(false);
+    const timerRef = useRef(0);
+    const ignoreHoverUntil = useRef(0);
+    useOnChange(collapsed, () => {
+        if (collapsed) {
+            setHover(true);
+            ignoreHoverUntil.current = Date.now() + 200;
+            setTimeout(() => {
+                setHover(false);
+            }, 200);
+        }
+    });
+    if (mode !== 'full')
+        return;
+    return (_jsx("aside", { id: "nd-sidebar", "data-collapsed": collapsed, "data-hovered": collapsed && hover, ...aside?.({ collapsed, hovered: hover }), onPointerEnter: (e) => {
+            if (!collapsed ||
+                e.pointerType === 'touch' ||
+                ignoreHoverUntil.current > Date.now())
+                return;
+            window.clearTimeout(timerRef.current);
+            setHover(true);
+        }, onPointerLeave: (e) => {
+            if (!collapsed ||
+                e.pointerType === 'touch' ||
+                ignoreHoverUntil.current > Date.now())
+                return;
+            window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => {
+                setHover(false);
+                ignoreHoverUntil.current = Date.now() + 200;
+            }, Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100
+                ? 0
+                : 500);
+        }, children: children }));
+}
+export function SidebarDrawerOverlay(props) {
+    const { open, setOpen, mode } = useSidebar();
+    if (mode !== 'drawer')
+        return;
+    return (_jsx(Presence, { present: open, children: _jsx("div", { "data-state": open ? 'open' : 'closed', onClick: () => setOpen(false), ...props }) }));
+}
+export function SidebarDrawerContent({ className, children, ...props }) {
+    const { open, mode } = useSidebar();
+    const state = open ? 'open' : 'closed';
+    if (mode !== 'drawer')
+        return;
+    return (_jsx(Presence, { present: open, children: ({ present }) => (_jsx("aside", { id: "nd-sidebar-mobile", "data-state": state, className: cn(!present && 'invisible', className), ...props, children: children })) }));
+}
+export function SidebarViewport(props) {
+    return (_jsx(ScrollArea, { ...props, className: cn('min-h-0 flex-1', props.className), children: _jsx(ScrollViewport, { className: "p-4 overscroll-contain", style: {
+                maskImage: 'linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)',
+            }, children: props.children }) }));
+}
+export function SidebarSeparator(props) {
+    const depth = useFolderDepth();
+    return (_jsx("p", { ...props, className: cn('inline-flex items-center gap-2 mb-1.5 px-2 mt-6 empty:mb-0', depth === 0 && 'first:mt-0', props.className), children: props.children }));
+}
+export function SidebarItem({ icon, children, ...props }) {
+    const pathname = usePathname();
+    const ref = useRef(null);
+    const { prefetch } = useSidebar();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    useAutoScroll(active, ref);
+    return (_jsxs(Link, { ref: ref, "data-active": active, prefetch: prefetch, ...props, children: [icon ?? (props.external ? _jsx(ExternalLink, {}) : null), children] }));
+}
+export function SidebarFolder({ defaultOpen: defaultOpenOption = false, ...props }) {
+    const { defaultOpenLevel } = useSidebar();
+    const depth = useFolderDepth() + 1;
+    const defaultOpen = typeof defaultOpenOption === 'function'
+        ? defaultOpenOption(defaultOpenLevel >= depth)
+        : defaultOpenLevel >= depth || defaultOpenOption;
+    const [open, setOpen] = useState(defaultOpen);
+    useOnChange(defaultOpen, (v) => {
+        if (v)
+            setOpen(v);
+    });
+    return (_jsx(Collapsible, { open: open, onOpenChange: setOpen, ...props, children: _jsx(FolderContext, { value: useMemo(() => ({ open, setOpen, depth }), [depth, open]), children: props.children }) }));
+}
+export function SidebarFolderTrigger(props) {
+    const { open } = use(FolderContext);
+    return (_jsxs(CollapsibleTrigger, { ...props, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+}
+export function SidebarFolderLink(props) {
+    const ref = useRef(null);
+    const { open, setOpen } = use(FolderContext);
+    const { prefetch } = useSidebar();
+    const pathname = usePathname();
+    const active = props.href !== undefined && isActive(props.href, pathname, false);
+    useAutoScroll(active, ref);
+    return (_jsxs(Link, { ref: ref, "data-active": active, onClick: (e) => {
+            if (e.target instanceof Element &&
+                e.target.matches('[data-icon], [data-icon] *')) {
+                setOpen(!open);
+                e.preventDefault();
+            }
+            else {
+                setOpen(active ? !open : true);
+            }
+        }, prefetch: prefetch, ...props, children: [props.children, _jsx(ChevronDown, { "data-icon": true, className: cn('ms-auto transition-transform', !open && '-rotate-90') })] }));
+}
+export function SidebarFolderContent(props) {
+    return _jsx(CollapsibleContent, { ...props, children: props.children });
+}
+export function SidebarTrigger({ children, ...props }) {
+    const { setOpen } = useSidebar();
+    return (_jsx("button", { "aria-label": "Open Sidebar", onClick: () => setOpen((prev) => !prev), ...props, children: children }));
+}
+export function SidebarCollapseTrigger(props) {
+    const { collapsed, setCollapsed } = useSidebar();
+    return (_jsx("button", { type: "button", "aria-label": "Collapse Sidebar", "data-collapsed": collapsed, onClick: () => {
+            setCollapsed((prev) => !prev);
+        }, ...props, children: props.children }));
+}
+function useAutoScroll(active, ref) {
+    const { mode } = useSidebar();
+    useEffect(() => {
+        if (active && ref.current) {
+            scrollIntoView(ref.current, {
+                boundary: document.getElementById(mode === 'drawer' ? 'nd-sidebar-mobile' : 'nd-sidebar'),
+                scrollMode: 'if-needed',
+            });
+        }
+    }, [active, mode, ref]);
+}

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

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react';
+import type * as Base from './base.js';
+import type { LinkItemType } from '../../layouts/shared/link-item.js';
+type InternalComponents = Pick<typeof Base, 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+export declare function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, }: InternalComponents): ({ item, ...props }: HTMLAttributes<HTMLElement> & {
+    item: Exclude<LinkItemType, {
+        type: "icon";
+    }>;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=link-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-item.d.ts","sourceRoot":"","sources":["../../../src/components/sidebar/link-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,IAAI,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE/D,KAAK,kBAAkB,GAAG,IAAI,CAC5B,OAAO,IAAI,EACT,eAAe,GACf,mBAAmB,GACnB,sBAAsB,GACtB,sBAAsB,GACtB,aAAa,CAChB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EACpB,WAAW,GACZ,EAAE,kBAAkB,IAIa,oBAG7B,cAAc,CAAC,WAAW,CAAC,GAAG;IAC/B,IAAI,EAAE,OAAO,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC/C,6CAoCF"}

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarItem, }) {
+    /**
+     * Render sidebar items from page tree
+     */
+    return function SidebarLinkItem({ item, ...props }) {
+        if (item.type === 'custom')
+            return _jsx("div", { ...props, children: item.children });
+        if (item.type === 'menu')
+            return (_jsxs(SidebarFolder, { ...props, children: [item.url ? (_jsxs(SidebarFolderLink, { href: item.url, external: item.external, children: [item.icon, item.text] })) : (_jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] })), _jsx(SidebarFolderContent, { children: item.items.map((child, i) => (_jsx(SidebarLinkItem, { item: child }, i))) })] }));
+        return (_jsx(SidebarItem, { href: item.url, icon: item.icon, external: item.external, ...props, children: item.text }));
+    };
+}