fumadocs-ui 15.2.8 → 16.0.3

package/dist/components/layout/toc.js

@@ -1,33 +1,29 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as Primitive from 'fumadocs-core/toc';
-import { useRef, } from 'react';
+import { createContext, useContext, useRef } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useI18n } from '../../contexts/i18n.js';
 import { TocThumb } from '../../components/layout/toc-thumb.js';
-import { ScrollArea, ScrollViewport } from '../ui/scroll-area.js';
-import { usePageStyles } from '../../contexts/layout.js';
-export function Toc(props) {
-    const { toc } = usePageStyles();
-    return (_jsx("div", { id: "nd-toc", ...props, className: cn('sticky top-[calc(var(--fd-banner-height)+var(--fd-nav-height))] h-(--fd-toc-height) pb-2 pt-12', toc, props.className), style: {
-            ...props.style,
-            '--fd-toc-height': 'calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))',
-        }, children: _jsx("div", { className: "flex h-full w-(--fd-toc-width) max-w-full flex-col gap-3 pe-4", children: props.children }) }));
+import { mergeRefs } from '../../utils/merge-refs.js';
+const TOCContext = createContext([]);
+export function useTOCItems() {
+    return useContext(TOCContext);
 }
-export function TocItemsEmpty() {
-    const { text } = useI18n();
-    return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+export function TOCProvider({ toc, children, ...props }) {
+    return (_jsx(TOCContext, { value: toc, children: _jsx(Primitive.AnchorProvider, { toc: toc, ...props, children: children }) }));
 }
-export function TOCScrollArea({ isMenu, ...props }) {
+export function TOCScrollArea({ ref, className, ...props }) {
     const viewRef = useRef(null);
-    return (_jsx(ScrollArea, { ...props, className: cn('flex flex-col ps-px', props.className), children: _jsx(ScrollViewport, { ref: viewRef, className: cn('relative min-h-0 text-sm', isMenu &&
-                '[mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] px-4 md:px-6 py-2'), children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }) }));
+    return (_jsx("div", { ref: mergeRefs(viewRef, ref), className: cn('relative min-h-0 text-sm ms-px overflow-auto [scrollbar-width:none] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3', className), ...props, children: _jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: props.children }) }));
 }
-export function TOCItems({ items }) {
+export function TOCItems({ ref, className, ...props }) {
     const containerRef = useRef(null);
+    const items = useTOCItems();
+    const { text } = useI18n();
     if (items.length === 0)
-        return _jsx(TocItemsEmpty, {});
-    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: containerRef, className: "flex flex-col border-s border-fd-foreground/10", children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
+        return (_jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings }));
+    return (_jsxs(_Fragment, { children: [_jsx(TocThumb, { containerRef: containerRef, className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-fd-primary transition-all" }), _jsx("div", { ref: mergeRefs(ref, containerRef), className: cn('flex flex-col border-s border-fd-foreground/10', className), ...props, children: items.map((item) => (_jsx(TOCItem, { item: item }, item.url))) })] }));
 }
 function TOCItem({ item }) {
     return (_jsx(Primitive.TOCItem, { href: item.url, className: cn('prose py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary', item.depth <= 2 && 'ps-3', item.depth === 3 && 'ps-6', item.depth >= 4 && 'ps-8'), children: item.title }));

package/dist/components/tabs.d.ts

@@ -1,31 +1,31 @@
-import type { TabsContentProps, TabsProps as BaseProps } from '@radix-ui/react-tabs';
-import * as Primitive from './ui/tabs.js';
-export { Primitive };
-export interface TabsProps extends BaseProps {
+import * as React from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import * as Unstyled from './tabs.unstyled.js';
+export interface TabsProps extends Omit<ComponentProps<typeof Unstyled.Tabs>, 'value' | 'onValueChange'> {
     /**
-     * Identifier for Sharing value of tabs
+     * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
      */
-    groupId?: string;
-    /**
-     * Enable persistent
-     */
-    persist?: boolean;
+    items?: string[];
     /**
+     * Shortcut for `defaultValue` when `items` is provided.
+     *
      * @defaultValue 0
      */
     defaultIndex?: number;
-    items?: string[];
     /**
-     * If true, updates the URL hash based on the tab's id
+     * Additional label in tabs list when `items` is provided.
      */
-    updateAnchor?: boolean;
+    label?: ReactNode;
 }
-export declare function Tabs({ groupId, items, persist, defaultIndex, updateAnchor, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export type TabProps = Omit<TabsContentProps, 'value'> & {
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function Tabs({ ref, className, items, label, defaultIndex, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabProps extends Omit<ComponentProps<typeof Unstyled.TabsContent>, 'value'> {
     /**
      * Value of tab, detect from index if unspecified.
      */
-    value?: TabsContentProps['value'];
-};
-export declare function Tab({ value, className, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+    value?: string;
+}
+export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Unstyled.TabsContent>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,gBAAgB,EAChB,SAAS,IAAI,SAAS,EACvB,MAAM,sBAAsB,CAAC;AAW9B,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAGvC,OAAO,EAAE,SAAS,EAAE,CAAC;AAmBrB,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAQD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAU,EACV,OAAe,EACf,YAAgB,EAChB,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,SAAS,2CAgFX;AAMD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC,CAAC;AAEF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CA6B3D"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,QAAQ,MAAM,iBAAiB,CAAC;AAI5C,MAAM,WAAW,SACf,SAAQ,IAAI,CACV,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,EACpC,OAAO,GAAG,eAAe,CAC1B;IACD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAaD,eAAO,MAAM,QAAQ,wKAYnB,CAAC;AAGH,eAAO,MAAM,WAAW,iLAYtB,CAAC;AAGH,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAgB,EAChB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAqCX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAClE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,QAAQ,2CAgBhD;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,WAAW,CAAC,2CAc7C"}

package/dist/components/tabs.js

@@ -1,94 +1,40 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, createContext, useContext, useLayoutEffect, useId, useEffect, } from 'react';
+import * as React from 'react';
+import { createContext, useContext, useEffect, useId, useMemo, useState, } from 'react';
 import { cn } from '../utils/cn.js';
-import * as Primitive from './ui/tabs.js';
-import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
-export { Primitive };
-const listeners = new Map();
-function addChangeListener(id, listener) {
-    const list = listeners.get(id) ?? [];
-    list.push(listener);
-    listeners.set(id, list);
-}
-function removeChangeListener(id, listener) {
-    const list = listeners.get(id) ?? [];
-    listeners.set(id, list.filter((item) => item !== listener));
-}
+import * as Unstyled from './tabs.unstyled.js';
 const TabsContext = createContext(null);
-export function Tabs({ groupId, items = [], persist = false, defaultIndex = 0, updateAnchor = false, ...props }) {
-    const values = useMemo(() => items.map((item) => toValue(item)), [items]);
-    const [value, setValue] = useState(values[defaultIndex]);
-    const valueToIdMap = useMemo(() => new Map(), []);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- re-reconstruct the collection if items changed
-    const collection = useMemo(() => createCollection(), [items]);
-    const onUpdate = useEffectEvent((v) => {
-        if (values.includes(v))
-            setValue(v);
-    });
-    useLayoutEffect(() => {
-        if (!groupId)
-            return;
-        const previous = persist
-            ? localStorage.getItem(groupId)
-            : sessionStorage.getItem(groupId);
-        if (previous)
-            onUpdate(previous);
-        addChangeListener(groupId, onUpdate);
-        return () => {
-            removeChangeListener(groupId, onUpdate);
-        };
-    }, [groupId, onUpdate, persist]);
-    useLayoutEffect(() => {
-        const hash = window.location.hash.slice(1);
-        if (!hash)
-            return;
-        for (const [value, id] of valueToIdMap.entries()) {
-            if (id === hash) {
-                setValue(value);
-                break;
-            }
-        }
-    }, [valueToIdMap]);
-    return (_jsxs(Primitive.Tabs, { value: value, onValueChange: (v) => {
-            if (updateAnchor) {
-                const id = valueToIdMap.get(v);
-                if (id) {
-                    window.history.replaceState(null, '', `#${id}`);
-                }
-            }
-            if (groupId) {
-                listeners.get(groupId)?.forEach((item) => {
-                    item(v);
-                });
-                if (persist)
-                    localStorage.setItem(groupId, v);
-                else
-                    sessionStorage.setItem(groupId, v);
-            }
-            else {
-                setValue(v);
-            }
-        }, ...props, className: cn('my-4', props.className), children: [_jsx(Primitive.TabsList, { children: values.map((v, i) => (_jsx(Primitive.TabsTrigger, { value: v, children: items[i] }, v))) }), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
+function useTabContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('You must wrap your component in <Tabs>');
+    return ctx;
 }
-function toValue(v) {
-    return v.toLowerCase().replace(/\s/, '-');
+export const TabsList = React.forwardRef((props, ref) => (_jsx(Unstyled.TabsList, { ref: ref, ...props, className: cn('flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose', props.className) })));
+TabsList.displayName = 'TabsList';
+export const TabsTrigger = React.forwardRef((props, ref) => (_jsx(Unstyled.TabsTrigger, { ref: ref, ...props, className: cn('inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=active]:border-fd-primary data-[state=active]:text-fd-primary', props.className) })));
+TabsTrigger.displayName = 'TabsTrigger';
+export function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
+    const [value, setValue] = useState(defaultValue);
+    const collection = useMemo(() => [], []);
+    return (_jsxs(Unstyled.Tabs, { ref: ref, className: cn('flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4', className), value: value, onValueChange: (v) => {
+            if (items && !items.some((item) => escapeValue(item) === v))
+                return;
+            setValue(v);
+        }, ...props, children: [items && (_jsxs(TabsList, { children: [label && (_jsx("span", { className: "text-sm font-medium my-auto me-auto", children: label })), items.map((item) => (_jsx(TabsTrigger, { value: escapeValue(item), children: item }, item)))] })), _jsx(TabsContext.Provider, { value: useMemo(() => ({ items, collection }), [collection, items]), children: props.children })] }));
 }
-export function Tab({ value, className, ...props }) {
-    const ctx = useContext(TabsContext);
-    const resolvedValue = value ??
+export function Tab({ value, ...props }) {
+    const { items } = useTabContext();
+    const resolved = value ??
         // eslint-disable-next-line react-hooks/rules-of-hooks -- `value` is not supposed to change
-        ctx?.items.at(useCollectionIndex());
-    if (!resolvedValue)
+        items?.at(useCollectionIndex());
+    if (!resolved)
         throw new Error('Failed to resolve tab `value`, please pass a `value` prop to the Tab component.');
-    const v = toValue(resolvedValue);
-    if (props.id && ctx) {
-        ctx.valueToIdMap.set(v, props.id);
-    }
-    return (_jsx(Primitive.TabsContent, { value: v, className: cn('prose-no-margin [&>figure:only-child]:-m-4 [&>figure:only-child]:rounded-none [&>figure:only-child]:border-none', className), ...props, children: props.children }));
+    return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
 }
-function createCollection() {
-    return [];
+export function TabsContent({ value, className, ...props }) {
+    return (_jsx(Unstyled.TabsContent, { value: value, forceMount: true, className: cn('p-4 text-[15px] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
 }
 /**
  * Inspired by Headless UI.
@@ -98,28 +44,21 @@ function createCollection() {
  */
 function useCollectionIndex() {
     const key = useId();
-    const ctx = useContext(TabsContext);
-    if (!ctx)
-        throw new Error('You must wrap your component in <Tabs>');
-    const list = ctx.collection;
-    function register() {
-        if (!list.includes(key))
-            list.push(key);
-    }
-    function unregister() {
-        const idx = list.indexOf(key);
-        if (idx !== -1)
-            list.splice(idx, 1);
-    }
-    useMemo(() => {
-        // re-order the item to the bottom if registered
-        unregister();
-        register();
-        // eslint-disable-next-line -- register
-    }, [list]);
+    const { collection } = useTabContext();
     useEffect(() => {
-        return unregister;
-        // eslint-disable-next-line -- clean up only
-    }, []);
-    return list.indexOf(key);
+        return () => {
+            const idx = collection.indexOf(key);
+            if (idx !== -1)
+                collection.splice(idx, 1);
+        };
+    }, [key, collection]);
+    if (!collection.includes(key))
+        collection.push(key);
+    return collection.indexOf(key);
+}
+/**
+ * only escape whitespaces in values in simple mode
+ */
+function escapeValue(v) {
+    return v.toLowerCase().replace(/\s/, '-');
 }

package/dist/components/tabs.unstyled.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentProps } from 'react';
+import * as Primitive from '@radix-ui/react-tabs';
+export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
+    /**
+     * Identifier for Sharing value of tabs
+     */
+    groupId?: string;
+    /**
+     * Enable persistent
+     */
+    persist?: boolean;
+    /**
+     * If true, updates the URL hash based on the tab's id
+     */
+    updateAnchor?: boolean;
+}
+export declare const TabsList: import("react").ForwardRefExoticComponent<Primitive.TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Primitive.TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * @internal You better not use it
+ */
+export declare function Tabs({ ref, groupId, persist, updateAnchor, defaultValue, value: _value, onValueChange: _onValueChange, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsContent({ value, ...props }: ComponentProps<typeof Primitive.TabsContent>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tabs.unstyled.d.ts.map

package/dist/components/tabs.unstyled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.unstyled.d.ts","sourceRoot":"","sources":["../../src/components/tabs.unstyled.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAOpB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAqBlD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC;IACtE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,QAAQ,oHAAqB,CAAC;AAE3C,eAAO,MAAM,WAAW,0HAAwB,CAAC;AAEjD;;GAEG;AACH,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,OAAO,EACP,OAAe,EACf,YAAoB,EACpB,YAAY,EACZ,KAAK,EAAE,MAAM,EACb,aAAa,EAAE,cAAc,EAC7B,GAAG,KAAK,EACT,EAAE,SAAS,2CAsEX;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,2CAY9C"}

package/dist/components/tabs.unstyled.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import * as Primitive from '@radix-ui/react-tabs';
+import { mergeRefs } from '../utils/merge-refs.js';
+import { useEffectEvent } from 'fumadocs-core/utils/use-effect-event';
+const listeners = new Map();
+function addChangeListener(id, listener) {
+    const list = listeners.get(id) ?? [];
+    list.push(listener);
+    listeners.set(id, list);
+}
+function removeChangeListener(id, listener) {
+    const list = listeners.get(id) ?? [];
+    listeners.set(id, list.filter((item) => item !== listener));
+}
+const TabsContext = createContext(null);
+function useTabContext() {
+    const ctx = useContext(TabsContext);
+    if (!ctx)
+        throw new Error('You must wrap your component in <Tabs>');
+    return ctx;
+}
+export const TabsList = Primitive.TabsList;
+export const TabsTrigger = Primitive.TabsTrigger;
+/**
+ * @internal You better not use it
+ */
+export function Tabs({ ref, groupId, persist = false, updateAnchor = false, defaultValue, value: _value, onValueChange: _onValueChange, ...props }) {
+    const tabsRef = useRef(null);
+    const [value, setValue] = _value === undefined
+        ? // eslint-disable-next-line react-hooks/rules-of-hooks -- not supposed to change controlled/uncontrolled
+            useState(defaultValue)
+        : [_value, _onValueChange ?? (() => undefined)];
+    const onChange = useEffectEvent((v) => setValue(v));
+    const valueToIdMap = useMemo(() => new Map(), []);
+    useLayoutEffect(() => {
+        if (!groupId)
+            return;
+        const previous = persist
+            ? localStorage.getItem(groupId)
+            : sessionStorage.getItem(groupId);
+        if (previous)
+            onChange(previous);
+        addChangeListener(groupId, onChange);
+        return () => {
+            removeChangeListener(groupId, onChange);
+        };
+    }, [groupId, persist]);
+    useLayoutEffect(() => {
+        const hash = window.location.hash.slice(1);
+        if (!hash)
+            return;
+        for (const [value, id] of valueToIdMap.entries()) {
+            if (id === hash) {
+                onChange(value);
+                tabsRef.current?.scrollIntoView();
+                break;
+            }
+        }
+    }, [valueToIdMap]);
+    return (_jsx(Primitive.Tabs, { ref: mergeRefs(ref, tabsRef), value: value, onValueChange: (v) => {
+            if (updateAnchor) {
+                const id = valueToIdMap.get(v);
+                if (id) {
+                    window.history.replaceState(null, '', `#${id}`);
+                }
+            }
+            if (groupId) {
+                listeners.get(groupId)?.forEach((item) => {
+                    item(v);
+                });
+                if (persist)
+                    localStorage.setItem(groupId, v);
+                else
+                    sessionStorage.setItem(groupId, v);
+            }
+            else {
+                setValue(v);
+            }
+        }, ...props, children: _jsx(TabsContext.Provider, { value: useMemo(() => ({ valueToIdMap }), [valueToIdMap]), children: props.children }) }));
+}
+export function TabsContent({ value, ...props }) {
+    const { valueToIdMap } = useTabContext();
+    if (props.id) {
+        valueToIdMap.set(value, props.id);
+    }
+    return (_jsx(Primitive.TabsContent, { value: value, ...props, children: props.children }));
+}

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

@@ -1,23 +1,32 @@
-import type { ReactNode } from 'react';
-export declare function Info({ children }: {
-    children: ReactNode;
-}): ReactNode;
-interface ObjectType {
+import { type ReactNode } from 'react';
+export interface ParameterNode {
+    name: string;
+    description: ReactNode;
+}
+export interface TypeNode {
     /**
      * Additional description of the field
      */
     description?: ReactNode;
-    type: string;
+    /**
+     * type signature (short)
+     */
+    type: ReactNode;
+    /**
+     * type signature (full)
+     */
     typeDescription?: ReactNode;
     /**
-     * Optional link to the type
+     * Optional `href` for the type
      */
     typeDescriptionLink?: string;
-    default?: string;
+    default?: ReactNode;
     required?: boolean;
+    deprecated?: boolean;
+    parameters?: ParameterNode[];
+    returns?: ReactNode;
 }
 export declare function TypeTable({ type }: {
-    type: Record<string, ObjectType>;
+    type: Record<string, TypeNode>;
 }): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=type-table.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAWrE;AAED,UAAU,UAAU;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAYD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;CAAE,2CAiDvE"}
+{"version":3,"file":"type-table.d.ts","sourceRoot":"","sources":["../../src/components/type-table.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAOjD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,UAAU,CAAC,EAAE,aAAa,EAAE,CAAC;IAE7B,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAYD,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;CAAE,2CAYrE"}

package/dist/components/type-table.js

@@ -1,19 +1,28 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InfoIcon } from 'lucide-react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from '../icons.js';
 import Link from 'fumadocs-core/link';
 import { cva } from 'class-variance-authority';
 import { cn } from '../utils/cn.js';
-import { Popover, PopoverContent, PopoverTrigger, } from '../components/ui/popover.js';
-export function Info({ children }) {
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: _jsx(InfoIcon, { className: "size-4" }) }), _jsx(PopoverContent, { className: "prose max-h-[400px] min-w-[220px] max-w-[400px] overflow-auto text-sm prose-no-margin", children: children })] }));
-}
-const field = cva('inline-flex flex-row items-center gap-1');
-const code = cva('rounded-md bg-fd-secondary p-1 text-fd-secondary-foreground', {
+import { useState } from 'react';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '../components/ui/collapsible.js';
+const keyVariants = cva('text-fd-primary', {
     variants: {
-        color: { primary: 'bg-fd-primary/10 text-fd-primary' },
+        deprecated: {
+            true: 'line-through text-fd-primary/50',
+        },
     },
 });
+const fieldVariants = cva('text-fd-muted-foreground not-prose pe-2');
 export function TypeTable({ type }) {
-    return (_jsx("div", { className: "prose my-6 overflow-auto prose-no-margin", children: _jsxs("table", { className: "whitespace-nowrap text-sm text-fd-muted-foreground", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "w-[45%]", children: "Prop" }), _jsx("th", { className: "w-[30%]", children: "Type" }), _jsx("th", { className: "w-1/4", children: "Default" })] }) }), _jsx("tbody", { children: Object.entries(type).map(([key, value]) => (_jsxs("tr", { children: [_jsx("td", { children: _jsxs("div", { className: field(), children: [_jsxs("code", { className: cn(code({ color: 'primary' })), children: [key, !value.required && '?'] }), value.description ? _jsx(Info, { children: value.description }) : null] }) }), _jsx("td", { children: _jsxs("div", { className: field(), children: [_jsx("code", { className: code(), children: value.type }), value.typeDescription ? (_jsx(Info, { children: value.typeDescription })) : null, value.typeDescriptionLink ? (_jsx(Link, { href: value.typeDescriptionLink, children: _jsx(InfoIcon, { className: "size-4" }) })) : null] }) }), _jsx("td", { children: value.default ? (_jsx("code", { className: code(), children: value.default })) : (_jsx("span", { children: "-" })) })] }, key))) })] }) }));
+    return (_jsxs("div", { className: "@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", children: [_jsxs("div", { className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground", children: [_jsx("p", { className: "w-[25%]", children: "Prop" }), _jsx("p", { className: "@max-xl:hidden", children: "Type" })] }), Object.entries(type).map(([key, value]) => (_jsx(Item, { name: key, item: value }, key)))] }));
+}
+function Item({ name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns, }, }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Collapsible, { open: open, onOpenChange: setOpen, className: cn('rounded-xl border overflow-hidden transition-all', open
+            ? 'shadow-sm bg-fd-background not-last:mb-2'
+            : 'border-transparent'), children: [_jsxs(CollapsibleTrigger, { className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent", children: [_jsxs("code", { className: cn(keyVariants({
+                            deprecated,
+                            className: 'min-w-fit w-[25%] font-medium',
+                        })), children: [name, !required && '?'] }), typeDescriptionLink ? (_jsx(Link, { href: typeDescriptionLink, className: "underline @max-xl:hidden", children: type })) : (_jsx("span", { className: "@max-xl:hidden", children: type })), _jsx(ChevronDown, { className: "absolute end-2 size-4 text-fd-muted-foreground transition-transform group-data-[state=open]:rotate-180" })] }), _jsx(CollapsibleContent, { children: _jsxs("div", { className: "grid grid-cols-[1fr_3fr] gap-y-4 text-sm p-3 overflow-auto fd-scroll-container border-t", children: [_jsx("div", { className: "text-sm prose col-span-full prose-no-margin empty:hidden", children: description }), typeDescription && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Type" }), _jsx("p", { className: "my-auto not-prose", children: typeDescription })] })), defaultValue && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Default" }), _jsx("p", { className: "my-auto not-prose", children: defaultValue })] })), parameters.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Parameters" }), _jsx("div", { className: "flex flex-col gap-2", children: parameters.map((param) => (_jsxs("div", { className: "inline-flex items-center flex-wrap gap-1", children: [_jsxs("p", { className: "font-medium not-prose text-nowrap", children: [param.name, " -"] }), _jsx("div", { className: "text-sm prose prose-no-margin", children: param.description })] }, param.name))) })] })), returns && (_jsxs(_Fragment, { children: [_jsx("p", { className: cn(fieldVariants()), children: "Returns" }), _jsx("div", { className: "my-auto text-sm prose prose-no-margin", children: returns })] }))] }) })] }));
 }

package/dist/components/ui/button.d.ts

@@ -1,7 +1,8 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
     color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-    size?: "sm" | "icon" | "icon-sm" | null | undefined;
+    size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonProps = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=button.d.ts.map

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,cAAc;;;;8EAe1B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/ui/button.js

@@ -1,16 +1,20 @@
 import { cva } from 'class-variance-authority';
-export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50', {
+const variants = {
+    primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
+    outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
+    ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
+    secondary: 'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
+};
+export const buttonVariants = cva('inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring', {
     variants: {
-        color: {
-            primary: 'bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80',
-            outline: 'border hover:bg-fd-accent hover:text-fd-accent-foreground',
-            ghost: 'hover:bg-fd-accent hover:text-fd-accent-foreground',
-            secondary: 'border bg-fd-secondary text-fd-secondary-foreground hover:bg-fd-accent hover:text-fd-accent-foreground',
-        },
+        variant: variants,
+        // fumadocs use `color` instead of `variant`
+        color: variants,
         size: {
-            sm: 'gap-1 p-1 text-xs',
+            sm: 'gap-1 px-2 py-1.5 text-xs',
             icon: 'p-1.5 [&_svg]:size-5',
             'icon-sm': 'p-1.5 [&_svg]:size-4.5',
+            'icon-xs': 'p-1 [&_svg]:size-4',
         },
     },
 });

package/dist/components/ui/navigation-menu.js

@@ -9,9 +9,9 @@ const NavigationMenuItem = React.forwardRef(({ className, children, ...props },
 NavigationMenuItem.displayName = Primitive.NavigationMenuItem.displayName;
 const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(Primitive.Trigger, { ref: ref, className: cn('data-[state=open]:bg-fd-accent/50', className), ...props, children: children })));
 NavigationMenuTrigger.displayName = Primitive.Trigger.displayName;
-const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Primitive.Content, { ref: ref, className: cn('absolute inset-x-0 top-0 data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft', className), ...props })));
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Primitive.Content, { ref: ref, className: cn('absolute inset-x-0 top-0 overflow-auto fd-scroll-container max-h-[80svh] data-[motion=from-end]:animate-fd-enterFromRight data-[motion=from-start]:animate-fd-enterFromLeft data-[motion=to-end]:animate-fd-exitToRight data-[motion=to-start]:animate-fd-exitToLeft', className), ...props })));
 NavigationMenuContent.displayName = Primitive.Content.displayName;
 const NavigationMenuLink = Primitive.Link;
-const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden text-fd-popover-foreground transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in', className) }) })));
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: "flex w-full justify-center", children: _jsx(Primitive.Viewport, { ...props, className: cn('relative h-(--radix-navigation-menu-viewport-height) w-full origin-[top_center] overflow-hidden transition-[width,height] duration-300 data-[state=closed]:animate-fd-nav-menu-out data-[state=open]:animate-fd-nav-menu-in', className) }) })));
 NavigationMenuViewport.displayName = Primitive.Viewport.displayName;
 export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuViewport, };

package/dist/components/ui/popover.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { cn } from '../../utils/cn.js';
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, side: "bottom", className: cn('z-50 origin-(--radix-popover-content-transform-origin) overflow-y-auto max-h-(--radix-popover-content-available-height) min-w-[240px] max-w-[98vw] rounded-xl border bg-fd-popover/60 backdrop-blur-lg p-2 text-sm text-fd-popover-foreground shadow-lg focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in', className), ...props }) })));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverClose = PopoverPrimitive.PopoverClose;
 export { Popover, PopoverTrigger, PopoverContent, PopoverClose };

package/dist/components/ui/scroll-area.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+JAad,CAAC;AAIH,QAAA,MAAM,cAAc,uKAWlB,CAAC;AAIH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,QAAA,MAAM,UAAU,+JAcd,CAAC;AAIH,QAAA,MAAM,cAAc,uKAWlB,CAAC;AAIH,QAAA,MAAM,SAAS,wKAiBb,CAAC;AAGH,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ui/scroll-area.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as React from 'react';
 import { cn } from '../../utils/cn.js';
-const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
+const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(ScrollAreaPrimitive.Root, { ref: ref, type: "scroll", className: cn('overflow-hidden', className), ...props, children: [children, _jsx(ScrollAreaPrimitive.Corner, {}), _jsx(ScrollBar, { orientation: "vertical" })] })));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 const ScrollViewport = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, className: cn('size-full rounded-[inherit]', className), ...props, children: children })));
 ScrollViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;

package/dist/contexts/search.d.ts

@@ -1,5 +1,4 @@
 import { type ComponentType, type ReactNode } from 'react';
-import type { SearchLink, SharedProps } from '../components/dialog/search.js';
 interface HotKey {
     display: ReactNode;
     /**
@@ -7,6 +6,15 @@ interface HotKey {
      */
     key: string | ((e: KeyboardEvent) => boolean);
 }
+export interface SharedProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+export type SearchLink = [name: string, href: string];
+export interface TagItem {
+    name: string;
+    value: string;
+}
 export interface SearchProviderProps {
     /**
      * Preload search dialog before opening it
@@ -33,7 +41,7 @@ export interface SearchProviderProps {
     /**
      * Additional props to the dialog
      */
-    options?: Partial<SharedProps>;
+    options?: Partial<SharedProps & Record<string, unknown>>;
     children?: ReactNode;
 }
 interface SearchContextType {