fumadocs-ui 14.4.1 → 14.5.0

package/dist/components/image-zoom.css

@@ -1 +1,78 @@
-[data-rmiz]{display:block;position:relative}[data-rmiz-ghost]{pointer-events:none;position:absolute}[data-rmiz-btn-zoom],[data-rmiz-btn-unzoom]{display:none}[data-rmiz-content=found] img{cursor:zoom-in}[data-rmiz-modal][open]{width:100vw;width:100dvw;height:100vh;background-color:transparent;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;overflow:hidden}[data-rmiz-modal]:focus-visible{outline:none}[data-rmiz-modal-overlay]{transition:background-color .3s;position:absolute;top:0;bottom:0;left:0;right:0}[data-rmiz-modal-overlay=hidden]{background-color:transparent}[data-rmiz-modal-overlay=visible]{--tw-bg-opacity:1;background-color:hsl(var(--background)/var(--tw-bg-opacity))}[data-rmiz-modal-content]{width:100%;height:100%;position:relative}[data-rmiz-modal]::-ms-backdrop{display:none}[data-rmiz-modal]::backdrop{display:none}[data-rmiz-modal-img]{cursor:zoom-out;image-rendering:high-quality;transform-origin:0 0;transition:transform .3s;position:absolute}@media (prefers-reduced-motion:reduce){[data-rmiz-modal-overlay],[data-rmiz-modal-img]{transition-duration:.01ms!important}}
+[data-rmiz] {
+  display: block;
+  position: relative;
+}
+
+[data-rmiz-ghost] {
+  pointer-events: none;
+  position: absolute;
+}
+
+[data-rmiz-btn-zoom],
+[data-rmiz-btn-unzoom] {
+  display: none;
+}
+
+[data-rmiz-content='found'] img {
+  cursor: zoom-in;
+}
+
+[data-rmiz-modal][open] {
+  width: 100vw /* fallback */;
+  width: 100dvw;
+
+  height: 100vh /* fallback */;
+  height: 100dvh;
+
+  background-color: transparent;
+  max-width: none;
+  max-height: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  overflow: hidden;
+}
+
+[data-rmiz-modal]:focus-visible {
+  outline: none;
+}
+
+[data-rmiz-modal-overlay] {
+  transition: background-color 0.3s;
+  position: absolute;
+  inset: 0;
+}
+
+[data-rmiz-modal-overlay='hidden'] {
+  background-color: transparent;
+}
+
+[data-rmiz-modal-overlay='visible'] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
+}
+
+[data-rmiz-modal-content] {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+[data-rmiz-modal]::backdrop {
+  display: none;
+}
+
+[data-rmiz-modal-img] {
+  cursor: zoom-out;
+  image-rendering: high-quality;
+  transform-origin: 0 0;
+  transition: transform 0.3s;
+  position: absolute;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-rmiz-modal-overlay],
+  [data-rmiz-modal-img] {
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/components/tabs.d.ts

@@ -15,7 +15,11 @@ export interface TabsProps extends BaseProps {
      */
     defaultIndex?: number;
     items?: string[];
+    /**
+     * If true, updates the URL hash based on the tab's id
+     */
+    updateAnchor?: boolean;
 }
-export declare function Tabs({ groupId, items, persist, defaultIndex, ...props }: TabsProps): React.ReactElement;
-export declare function Tab({ value, className, ...props }: TabsContentProps): React.ReactElement;
+export declare function Tabs({ groupId, items, persist, defaultIndex, updateAnchor, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ value, className, ...props }: TabsContentProps): 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;AAY9B,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAEvC,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;CAClB;AAID,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAU,EACV,OAAe,EACf,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,CA2DhC;AAMD,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAsBvC"}
+{"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;AAEvC,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;AAMD,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAU,EACV,OAAe,EACf,YAAgB,EAChB,YAAoB,EACpB,GAAG,KAAK,EACT,EAAE,SAAS,2CA+EX;AAMD,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAkBnE"}

package/dist/components/tabs.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState, useCallback, createContext, useContext, useRef, useLayoutEffect, useEffect, } from 'react';
+import { useMemo, useState, useCallback, createContext, useContext, useRef, useLayoutEffect, } from 'react';
 import { cn } from '../utils/cn';
 import * as Primitive from './ui/tabs';
 export { Primitive };
@@ -14,19 +14,20 @@ function removeChangeListener(id, listener) {
     const list = listeners.get(id) ?? [];
     listeners.set(id, list.filter((item) => item !== listener));
 }
-const ValueChangeContext = createContext(() => undefined);
-export function Tabs({ groupId, items = [], persist = false, defaultIndex = 0, ...props }) {
+const ValueToMapContext = createContext(undefined);
+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 valuesRef = useRef(values);
-    valuesRef.current = values;
+    const valueToIdMapRef = useRef(new Map());
+    const onChangeRef = useRef();
+    onChangeRef.current = (v) => {
+        if (values.includes(v))
+            setValue(v);
+    };
     useLayoutEffect(() => {
         if (!groupId)
             return;
-        const onUpdate = (v) => {
-            if (valuesRef.current.includes(v))
-                setValue(v);
-        };
+        const onUpdate = (v) => onChangeRef.current?.(v);
         const previous = persist
             ? localStorage.getItem(groupId)
             : sessionStorage.getItem(groupId);
@@ -37,7 +38,23 @@ export function Tabs({ groupId, items = [], persist = false, defaultIndex = 0, .
             removeChangeListener(groupId, onUpdate);
         };
     }, [groupId, persist]);
+    useLayoutEffect(() => {
+        const hash = window.location.hash.slice(1);
+        if (!hash)
+            return;
+        const entry = valueToIdMapRef.current
+            .entries()
+            .find(([_, id]) => id === hash);
+        if (entry)
+            setValue(entry[0]);
+    }, []);
     const onValueChange = useCallback((v) => {
+        if (updateAnchor) {
+            const id = valueToIdMapRef.current.get(v);
+            if (id) {
+                window.history.replaceState(null, '', `#${id}`);
+            }
+        }
         if (groupId) {
             listeners.get(groupId)?.forEach((item) => {
                 item(v);
@@ -50,20 +67,17 @@ export function Tabs({ groupId, items = [], persist = false, defaultIndex = 0, .
         else {
             setValue(v);
         }
-    }, [groupId, persist]);
-    return (_jsxs(Primitive.Tabs, { value: value, onValueChange: onValueChange, ...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(ValueChangeContext.Provider, { value: onValueChange, children: props.children })] }));
+    }, [groupId, persist, updateAnchor]);
+    return (_jsxs(Primitive.Tabs, { value: value, onValueChange: onValueChange, ...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(ValueToMapContext.Provider, { value: valueToIdMapRef.current, children: props.children })] }));
 }
 function toValue(v) {
     return v.toLowerCase().replace(/\s/, '-');
 }
 export function Tab({ value, className, ...props }) {
     const v = toValue(value);
-    const onValueChange = useContext(ValueChangeContext);
-    useEffect(() => {
-        const hash = window.location.hash.slice(1);
-        if (hash === props.id) {
-            onValueChange(v);
-        }
-    }, [onValueChange, props.id, v]);
+    const valueToIdMap = useContext(ValueToMapContext);
+    if (props.id) {
+        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 }));
 }

package/dist/layouts/notebook.js

@@ -32,7 +32,7 @@ export function DocsLayout({ nav: { transparentMode, ...nav } = {}, sidebar: { c
 function DocsNavbar({ sidebarCollapsible, links, nav = {}, i18n, }) {
     return (_jsxs(Navbar, { id: "nd-subnav", className: "h-14 md:gap-1.5", children: [sidebarCollapsible ? (_jsx(SidebarCollapseTrigger, { className: "-ms-1.5 text-fd-muted-foreground data-[collapsed=false]:hidden max-md:hidden" })) : null, _jsx(SearchOnly, { children: _jsx(LargeSearchToggle, { className: "w-full max-w-[240px] rounded-lg max-md:hidden" }) }), _jsx(Title, { url: nav.url, title: nav.title, className: "md:hidden" }), _jsxs("div", { className: "flex flex-1 flex-row items-center gap-6 px-2", children: [links
                         .filter((item) => item.type !== 'icon')
-                        .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground max-lg:hidden" }, i))), nav.children] }), _jsx(SearchOnly, { children: _jsx(SearchToggle, { className: "md:hidden" }) }), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 max-lg:hidden md:hidden" }), _jsx("div", { className: "flex flex-row items-center empty:hidden", children: links
+                        .map((item, i) => (_jsx(NavbarLinkItem, { item: item, className: "text-sm text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground max-lg:hidden" }, i))), nav.children] }), _jsx(SearchOnly, { children: _jsx(SearchToggle, { className: "md:hidden" }) }), _jsx(NavbarSidebarTrigger, { className: "-me-1.5 md:hidden" }), _jsx("div", { className: "flex flex-row items-center empty:hidden max-lg:hidden", children: links
                     .filter((item) => item.type === 'icon')
                     .map((item, i) => (_jsx(BaseLinkItem, { item: item, className: cn(buttonVariants({ size: 'icon', color: 'ghost' }), 'text-fd-muted-foreground'), "aria-label": item.label, children: item.icon }, i))) }), i18n ? (_jsx(LanguageToggle, { children: _jsx(Languages, { className: "size-5" }) })) : null, _jsx(ThemeToggle, { className: "p-0 max-md:hidden" })] }));
 }