fumadocs-ui 15.5.4 → 15.6.0

package/css/neutral.css

@@ -21,7 +21,7 @@
   --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: hsl(0, 0%, 60.9%);
+  --color-fd-muted-foreground: hsla(0, 0%, 70%, 0.8);
   --color-fd-popover: hsl(0, 0%, 10.6%);
   --color-fd-popover-foreground: hsl(0, 0%, 86.9%);
   --color-fd-card: hsl(0, 0%, 9.8%);
@@ -30,7 +30,7 @@
   --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%, 98%);
+  --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%);

package/css/preset.css

@@ -3,6 +3,13 @@
 @source '../dist/**/*.js';
 @plugin '../dist/theme/typography/index.js';
 
+@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);
+}
+
 @theme {
   --spacing-fd-container: 1400px;
   --fd-page-width: 1200px;
@@ -110,14 +117,14 @@
   @keyframes fd-popover-in {
     from {
       opacity: 0;
-      transform: translateY(-12px) scale(0.9);
+      transform: scale(0.7);
     }
   }
 
   @keyframes fd-popover-out {
     to {
       opacity: 0;
-      transform: translateY(-12px) scale(0.9);
+      transform: scale(0.7);
     }
   }
 

package/css/shiki.css

@@ -1,11 +1,16 @@
 .shiki:not(.not-fumadocs-codeblock *) {
+  --padding-left: calc(var(--spacing) * 3);
+  --padding-right: calc(var(--spacing) * 3);
+
   code span {
     color: var(--shiki-light);
   }
 
   code .line {
+    position: relative;
     min-height: 1lh;
-    @apply relative;
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
   }
 
   &.has-focused code .line:not(.focused) {
@@ -24,6 +29,7 @@
   &[data-line-numbers] code .line {
     width: calc(100% - 7 * var(--spacing));
     counter-increment: line;
+    padding-left: calc(var(--padding-left) - var(--spacing));
     @apply ml-7;
 
     &::after {

package/dist/components/banner.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes } from 'react';
-export declare function Banner({ id, variant, changeLayout, height, ...props }: HTMLAttributes<HTMLDivElement> & {
+type BannerVariant = 'rainbow' | 'normal';
+export declare function Banner({ id, variant, changeLayout, height, rainbowColors, ...props }: HTMLAttributes<HTMLDivElement> & {
     /**
      * @defaultValue 3rem
      */
@@ -7,7 +8,11 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
     /**
      * @defaultValue 'normal'
      */
-    variant?: 'rainbow' | 'normal';
+    variant?: BannerVariant;
+    /**
+     * For rainbow variant only, customise the colors
+     */
+    rainbowColors?: string[];
     /**
      * Change Fumadocs layout styles
      *
@@ -15,4 +20,5 @@ export declare function Banner({ id, variant, changeLayout, height, ...props }:
      */
     changeLayout?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
+export {};
 //# sourceMappingURL=banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAE/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAkEA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/components/banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAC;AAKjE,KAAK,aAAa,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE1C,wBAAgB,MAAM,CAAC,EACrB,EAAE,EACF,OAAkB,EAClB,YAAmB,EACnB,MAAe,EACf,aAKC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,cAAc,CAAC,GAAG;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAuEA"}

package/dist/components/banner.js

@@ -4,7 +4,12 @@ import { useEffect, useState } from 'react';
 import { X } from '../icons.js';
 import { cn } from '../utils/cn.js';
 import { buttonVariants } from '../components/ui/button.js';
-export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', ...props }) {
+export function Banner({ id, variant = 'normal', changeLayout = true, height = '3rem', rainbowColors = [
+    'rgba(0,149,255,0.56)',
+    'rgba(231,77,255,0.77)',
+    'rgba(255,0,0,0.73)',
+    'rgba(131,255,166,0.66)',
+], ...props }) {
     const [open, setOpen] = useState(true);
     const globalKey = id ? `nd-banner-${id}` : null;
     useEffect(() => {
@@ -13,47 +18,37 @@ export function Banner({ id, variant = 'normal', changeLayout = true, height = '
     }, [globalKey]);
     if (!open)
         return null;
-    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
+    return (_jsxs("div", { id: id, ...props, className: cn('sticky top-0 z-40 flex flex-row items-center justify-center px-4 text-center text-sm font-medium', variant === 'normal' && 'bg-fd-secondary', variant === 'rainbow' && 'bg-fd-background', !open && 'hidden', props.className), style: {
             height,
         }, children: [changeLayout && open ? (_jsx("style", { children: globalKey
                     ? `:root:not(.${globalKey}) { --fd-banner-height: ${height}; }`
                     : `:root { --fd-banner-height: ${height}; }` })) : null, globalKey ? (_jsx("style", { children: `.${globalKey} #${id} { display: none; }` })) : null, globalKey ? (_jsx("script", { dangerouslySetInnerHTML: {
                     __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`,
-                } })) : null, variant === 'rainbow' ? rainbowLayer : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
+                } })) : null, variant === 'rainbow'
+                ? flow({
+                    colors: rainbowColors,
+                })
+                : null, props.children, id ? (_jsx("button", { type: "button", "aria-label": "Close Banner", onClick: () => {
                     setOpen(false);
                     if (globalKey)
                         localStorage.setItem(globalKey, 'true');
                 }, className: cn(buttonVariants({
                     color: 'ghost',
-                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground',
-                    size: 'icon',
+                    className: 'absolute end-2 top-1/2 -translate-y-1/2 text-fd-muted-foreground/50',
+                    size: 'icon-sm',
                 })), children: _jsx(X, {}) })) : null] }));
 }
 const maskImage = 'linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)';
-const rainbowLayer = (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 16s linear infinite',
-                '--start': 'rgba(0,87,255,0.5)',
-                '--mid': 'rgba(255,0,166,0.77)',
-                '--end': 'rgba(255,77,0,0.4)',
-                '--via': 'rgba(164,255,68,0.4)',
-                animationDirection: 'reverse',
-                backgroundImage: 'repeating-linear-gradient(60deg, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) calc(50% - 12px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'difference',
-            } }), _jsx("div", { className: "absolute inset-0 z-[-1]", style: {
-                maskImage,
-                maskComposite: 'intersect',
-                animation: 'fd-moving-banner 20s linear infinite',
-                '--start': 'rgba(255,120,120,0.5)',
-                '--mid': 'rgba(36,188,255,0.4)',
-                '--end': 'rgba(64,0,255,0.51)',
-                '--via': 'rgba(255,89,0,0.56)',
-                backgroundImage: 'repeating-linear-gradient(45deg, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) calc(50% - 16.8px))',
-                backgroundSize: '200% 100%',
-                mixBlendMode: 'color-dodge',
-            } }), _jsx("style", { children: `@keyframes fd-moving-banner {
+function flow({ colors }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute inset-0 z-[-1]", style: {
+                    maskImage,
+                    maskComposite: 'intersect',
+                    animation: 'fd-moving-banner 20s linear infinite',
+                    backgroundImage: `repeating-linear-gradient(70deg, ${[...colors, colors[0]].map((color, i) => `${color} ${(i * 50) / colors.length}%`).join(', ')})`,
+                    backgroundSize: '200% 100%',
+                    filter: 'saturate(2)',
+                } }), _jsx("style", { children: `@keyframes fd-moving-banner {
             from { background-position: 0% 0;  }
             to { background-position: 100% 0;  }
          }` })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAkCxE,eAAO,MAAM,OAAO;YA1BV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDAoDjB,CAAC"}
+{"version":3,"file":"callout.d.ts","sourceRoot":"","sources":["../../src/components/callout.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBxE,eAAO,MAAM,OAAO;YAZV,SAAS;IACjB;;OAEG;WACI,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS;IAExD;;OAEG;WACI,SAAS;kDAyCjB,CAAC"}

package/dist/components/callout.js

@@ -2,28 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CircleCheck, CircleX, Info, TriangleAlert } from '../icons.js';
 import { forwardRef } from 'react';
 import { cn } from '../utils/cn.js';
-import { cva } from 'class-variance-authority';
-const calloutVariants = cva('my-4 flex gap-2 rounded-lg border border-s-2 bg-fd-card p-3 text-sm text-fd-card-foreground shadow-md', {
-    variants: {
-        type: {
-            info: 'border-s-blue-500/50',
-            warn: 'border-s-amber-500/50',
-            error: 'border-s-red-500/50',
-            success: 'border-s-green-500/50',
-        },
-    },
-});
 export const Callout = forwardRef(({ className, children, title, type = 'info', icon, ...props }, ref) => {
-    if (type === 'warning')
-        type = 'warn';
-    return (_jsxs("div", { ref: ref, className: cn(calloutVariants({
-            type: type,
-        }), className), ...props, children: [icon ??
-                {
-                    info: _jsx(Info, { className: "size-5 fill-blue-500 text-fd-card" }),
-                    warn: (_jsx(TriangleAlert, { className: "size-5 fill-amber-500 text-fd-card" })),
-                    error: _jsx(CircleX, { className: "size-5 fill-red-500 text-fd-card" }),
-                    success: (_jsx(CircleCheck, { className: "size-5 fill-green-500 text-fd-card" })),
-                }[type], _jsxs("div", { className: "min-w-0 flex flex-col gap-2 flex-1", children: [title ? _jsx("p", { className: "font-medium !my-0", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
+    if (type === 'warn')
+        type = 'warning';
+    const DefaultIcon = {
+        info: Info,
+        warning: TriangleAlert,
+        error: CircleX,
+        success: CircleCheck,
+    }[type];
+    return (_jsxs("div", { ref: ref, className: cn('flex gap-2 my-4 rounded-xl border bg-fd-card p-3 ps-1 text-sm text-fd-card-foreground shadow-md', className), ...props, style: {
+            '--callout-color': `var(--color-fd-${type})`,
+            ...props.style,
+        }, children: [_jsx("div", { role: "none", className: "w-1 bg-(--callout-color)/50 rounded-sm" }), icon ?? (_jsx(DefaultIcon, { className: "size-5 -me-0.5 fill-(--callout-color) text-fd-card" })), _jsxs("div", { className: "flex flex-col gap-2 min-w-0 flex-1", children: [title ? _jsx("p", { className: "font-medium !my-0", children: title }) : null, _jsx("div", { className: "text-fd-muted-foreground prose-no-margin empty:hidden", children: children })] })] }));
 });
 Callout.displayName = 'Callout';

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

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAS1D;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA6BrE"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvD,wBAAgB,KAAK,CAAC,KAAK,EAAE,cAAc,CAAC,cAAc,CAAC,2CAS1D;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA2BrE"}

package/dist/components/card.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from 'fumadocs-core/link';
 import { cn } from '../utils/cn.js';
 export function Cards(props) {
-    return (_jsx("div", { ...props, className: cn('grid grid-cols-2 gap-4 @container', props.className), children: props.children }));
+    return (_jsx("div", { ...props, className: cn('grid grid-cols-2 gap-3 @container', props.className), children: props.children }));
 }
 export function Card({ icon, title, description, ...props }) {
     const E = props.href ? Link : 'div';
-    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, props.children ? (_jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children })) : null] }));
+    return (_jsxs(E, { ...props, "data-card": true, className: cn('block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full', props.href && 'hover:bg-fd-accent/80', props.className), children: [icon ? (_jsx("div", { className: "not-prose mb-2 w-fit shadow-md rounded-lg border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon })) : null, _jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }), description ? (_jsx("p", { className: "!my-0 text-sm text-fd-muted-foreground", children: description })) : null, _jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin empty:hidden", children: props.children })] }));
 }

package/dist/components/codeblock.d.ts

@@ -1,5 +1,6 @@
-import { type HTMLAttributes, type ReactNode } from 'react';
-export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
+import { type ComponentProps, type HTMLAttributes, type ReactNode } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/tabs.unstyled.js';
+export interface CodeBlockProps extends ComponentProps<'figure'> {
     /**
      * Icon of code block
      *
@@ -27,35 +28,15 @@ export type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      * @defaultValue 1
      */
     'data-line-numbers-start'?: number;
-};
-export declare const Pre: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & import("react").RefAttributes<HTMLPreElement>>;
-export declare const CodeBlock: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
-    /**
-     * Icon of code block
-     *
-     * When passed as a string, it assumes the value is the HTML of icon
-     */
-    icon?: ReactNode;
-    /**
-     * Allow to copy code with copy button
-     *
-     * @defaultValue true
-     */
-    allowCopy?: boolean;
-    /**
-     * Keep original background color generated by Shiki or Rehype Code
-     *
-     * @defaultValue false
-     */
-    keepBackground?: boolean;
-    viewportProps?: HTMLAttributes<HTMLElement>;
-    /**
-     * show line numbers
-     */
-    'data-line-numbers'?: boolean;
-    /**
-     * @defaultValue 1
-     */
-    'data-line-numbers-start'?: number;
-} & import("react").RefAttributes<HTMLElement>>;
+    Actions?: (props: {
+        className?: string;
+        children?: ReactNode;
+    }) => ReactNode;
+}
+export declare function Pre(props: ComponentProps<'pre'>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ ref, title, allowCopy, keepBackground, icon, viewportProps, children, Actions, ...props }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabs({ ref, ...props }: ComponentProps<typeof Tabs>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabsList(props: ComponentProps<typeof TabsList>): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlockTabsTrigger({ children, ...props }: ComponentProps<typeof TabsTrigger>): import("react/jsx-runtime").JSX.Element;
+export declare const CodeBlockTab: (props: ComponentProps<typeof TabsContent>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=codeblock.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAKf,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,GAAG,2HAYf,CAAC;AAIF,eAAO,MAAM,SAAS;IAlDpB;;;;OAIG;WACI,SAAS;IAEhB;;;;OAIG;gBACS,OAAO;IAEnB;;;;OAIG;qBACc,OAAO;oBAER,cAAc,CAAC,WAAW,CAAC;IAE3C;;OAEG;0BACmB,OAAO;IAE7B;;OAEG;gCACyB,MAAM;+CAyGnC,CAAC"}
+{"version":3,"file":"codeblock.d.ts","sourceRoot":"","sources":["../../src/components/codeblock.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EACnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAGpC,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,QAAQ,CAAC;IAC9D;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,aAAa,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAEnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,KAAK,SAAS,CAAC;CAC9E;AAOD,wBAAgB,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC,2CAS/C;AAED,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,SAAS,EACT,cAAsB,EACtB,IAAI,EACJ,aAAkB,EAClB,QAAQ,EACR,OAEC,EACD,GAAG,KAAK,EACT,EAAE,cAAc,2CAwEhB;AAwCD,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,2CA2B3E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,2CAoBvE;AAED,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,2CAapC;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,cAAc,CAAC,OAAO,WAAW,CAAC,4CAErE,CAAC"}

package/dist/components/codeblock.js

@@ -1,18 +1,40 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Copy } from '../icons.js';
-import { forwardRef, useRef, } from 'react';
+import { createContext, useContext, useMemo, useRef, } from 'react';
 import { cn } from '../utils/cn.js';
 import { useCopyButton } from '../utils/use-copy-button.js';
 import { buttonVariants } from '../components/ui/button.js';
-export const Pre = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("pre", { ref: ref, className: cn('min-w-full w-max *:flex *:flex-col', className), ...props, children: props.children }));
-});
-Pre.displayName = 'Pre';
-export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground = false, icon, viewportProps, children, ...props }, ref) => {
+import { Tabs, TabsContent, TabsList, TabsTrigger, } from '../components/tabs.unstyled.js';
+import { mergeRefs } from '../utils/merge-refs.js';
+const TabsContext = createContext(null);
+export function Pre(props) {
+    return (_jsx("pre", { ...props, className: cn('min-w-full w-max *:flex *:flex-col', props.className), children: props.children }));
+}
+export function CodeBlock({ ref, title, allowCopy, keepBackground = false, icon, viewportProps = {}, children, Actions = (props) => (_jsx("div", { ...props, className: cn('empty:hidden', props.className) })), ...props }) {
+    const isTab = useContext(TabsContext) !== null;
     const areaRef = useRef(null);
-    const onCopy = () => {
-        const pre = areaRef.current?.getElementsByTagName('pre').item(0);
+    allowCopy ?? (allowCopy = !isTab);
+    const bg = cn('bg-fd-secondary', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)');
+    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn(isTab ? [bg, 'rounded-lg shadow-sm'] : 'my-4 rounded-xl bg-fd-card p-1', 'shiki relative border outline-none not-prose overflow-hidden text-sm', props.className), children: [title ? (_jsxs("div", { className: cn('flex text-fd-muted-foreground items-center gap-2 ps-3 h-9.5', isTab && 'border-b'), children: [typeof icon === 'string' ? (_jsx("div", { className: "[&_svg]:size-3.5", dangerouslySetInnerHTML: {
+                            __html: icon,
+                        } })) : (icon), _jsx("figcaption", { className: "flex-1 truncate", children: title }), Actions({
+                        children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+                    })] })) : (Actions({
+                className: 'absolute top-1 right-1 z-2 bg-fd-card rounded-bl-lg border-l border-b text-fd-muted-foreground',
+                children: allowCopy && _jsx(CopyButton, { containerRef: areaRef }),
+            })), _jsx("div", { ref: areaRef, ...viewportProps, className: cn(!isTab && [bg, 'rounded-lg border'], 'text-[13px] py-3.5 overflow-auto max-h-[600px] fd-scroll-container', viewportProps.className), style: {
+                    // space for toolbar
+                    '--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
+                    counterSet: props['data-line-numbers']
+                        ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+                        : undefined,
+                    ...viewportProps.style,
+                }, children: children })] }));
+}
+function CopyButton({ className, containerRef, ...props }) {
+    const [checked, onClick] = useCopyButton(() => {
+        const pre = containerRef.current?.getElementsByTagName('pre').item(0);
         if (!pre)
             return;
         const clone = pre.cloneNode(true);
@@ -20,22 +42,25 @@ export const CodeBlock = forwardRef(({ title, allowCopy = true, keepBackground =
             node.replaceWith('\n');
         });
         void navigator.clipboard.writeText(clone.textContent ?? '');
-    };
-    return (_jsxs("figure", { ref: ref, dir: "ltr", ...props, className: cn('not-prose group relative my-4 overflow-hidden rounded-lg border bg-fd-card text-sm outline-none', keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)', props.className), children: [title ? (_jsxs("div", { className: "flex items-center gap-2 bg-fd-secondary px-4 py-1.5", children: [icon ? (_jsx("div", { className: "text-fd-muted-foreground [&_svg]:size-3.5", dangerouslySetInnerHTML: typeof icon === 'string'
-                            ? {
-                                __html: icon,
-                            }
-                            : undefined, children: typeof icon !== 'string' ? icon : null })) : null, _jsx("figcaption", { className: "flex-1 truncate text-fd-muted-foreground", children: title }), allowCopy && _jsx(CopyButton, { className: "-me-2", onCopy: onCopy })] })) : (allowCopy && (_jsx(CopyButton, { className: "absolute right-2 top-2 z-[2] backdrop-blur-md", onCopy: onCopy }))), _jsx("div", { ref: areaRef, ...viewportProps, className: cn('text-[13px] py-3.5 overflow-auto [&_.line]:px-4 max-h-[600px] fd-scroll-container', props['data-line-numbers'] && '[&_.line]:pl-3', viewportProps?.className), style: {
-                    counterSet: props['data-line-numbers']
-                        ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
-                        : undefined,
-                    ...viewportProps?.style,
-                }, children: children })] }));
-});
-CodeBlock.displayName = 'CodeBlock';
-function CopyButton({ className, onCopy, ...props }) {
-    const [checked, onClick] = useCopyButton(onCopy);
-    return (_jsxs("button", { type: "button", className: cn(buttonVariants({
+    });
+    return (_jsx("button", { type: "button", className: cn(buttonVariants({
             color: 'ghost',
-        }), 'transition-opacity group-hover:opacity-100 [&_svg]:size-3.5', !checked && '[@media(hover:hover)]:opacity-0', className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: [_jsx(Check, { className: cn('transition-transform', !checked && 'scale-0') }), _jsx(Copy, { className: cn('absolute transition-transform', checked && 'scale-0') })] }));
+            className: '[&_svg]:size-3.5',
+        }), className), "aria-label": checked ? 'Copied Text' : 'Copy Text', onClick: onClick, ...props, children: checked ? _jsx(Check, {}) : _jsx(Copy, {}) }));
+}
+export function CodeBlockTabs({ ref, ...props }) {
+    const containerRef = useRef(null);
+    const nested = useContext(TabsContext) !== null;
+    return (_jsx(Tabs, { ref: mergeRefs(containerRef, ref), ...props, className: cn('bg-fd-card p-1 rounded-xl border overflow-hidden', !nested && 'my-4', props.className), children: _jsx(TabsContext.Provider, { value: useMemo(() => ({
+                containerRef,
+                nested,
+            }), [nested]), children: props.children }) }));
+}
+export function CodeBlockTabsList(props) {
+    const { containerRef, nested } = useContext(TabsContext);
+    return (_jsxs(TabsList, { ...props, className: cn('flex flex-row overflow-x-auto px-1 -mx-1 text-fd-muted-foreground', props.className), children: [props.children, !nested && (_jsx(CopyButton, { className: "sticky ms-auto right-0 bg-fd-card backdrop-blur-sm", containerRef: containerRef }))] }));
+}
+export function CodeBlockTabsTrigger({ children, ...props }) {
+    return (_jsxs(TabsTrigger, { ...props, className: cn('relative group inline-flex text-sm font-medium items-center gap-2 px-2 first:ms-1 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5', props.className), children: [_jsx("div", { className: "absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary" }), children] }));
 }
+export const CodeBlockTab = (props) => (_jsx(TabsContent, { ...props, asChild: true }));

package/dist/components/layout/sidebar.js

@@ -208,5 +208,5 @@ function getOffset(level) {
 function Border({ level, active }) {
     if (level <= 1)
         return null;
-    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-[2] start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
+    return (_jsx("div", { className: cn('absolute w-px inset-y-3 z-2 start-2.5 md:inset-y-2', active && 'bg-fd-primary') }));
 }

package/dist/components/tabs.d.ts

@@ -1,18 +1,7 @@
+import * as React from 'react';
 import { type ComponentProps, type ReactNode } from 'react';
-import * as Primitive from './ui/tabs.js';
-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;
+import * as Unstyled from './tabs.unstyled.js';
+export interface TabsProps extends Omit<ComponentProps<typeof Unstyled.Tabs>, 'value' | 'onValueChange'> {
     /**
      * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
      */
@@ -28,15 +17,15 @@ export interface TabsProps extends ComponentProps<typeof Primitive.Tabs> {
      */
     label?: ReactNode;
 }
-export declare const TabsList: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-export declare function Tabs({ ref, className, groupId, items, persist, label, defaultIndex, updateAnchor, defaultValue, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export interface TabProps extends Omit<ComponentProps<typeof Primitive.TabsContent>, '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?: string;
 }
 export declare function Tab({ value, ...props }: TabProps): import("react/jsx-runtime").JSX.Element;
-export declare function TabsContent({ value, className, ...props }: ComponentProps<typeof Primitive.TabsContent>): 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,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAQf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AAsBvC,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;IAEvB;;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;AAcD,eAAO,MAAM,QAAQ,sMAAqB,CAAC;AAC3C,eAAO,MAAM,WAAW,+MAAwB,CAAC;AAEjD,wBAAgB,IAAI,CAAC,EACnB,GAAG,EACH,SAAS,EACT,OAAO,EACP,KAAK,EACL,OAAe,EACf,KAAK,EACL,YAAgB,EAChB,YAAoB,EACpB,YAAmE,EACnE,GAAG,KAAK,EACT,EAAE,SAAS,2CAsFX;AAED,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IACnE;;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,SAAS,CAAC,WAAW,CAAC,2CAoB9C"}
+{"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,20 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } 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';
-import { mergeRefs } from '../utils/merge-refs.js';
-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);
 function useTabContext() {
     const ctx = useContext(TabsContext);
@@ -22,63 +11,18 @@ function useTabContext() {
         throw new Error('You must wrap your component in <Tabs>');
     return ctx;
 }
-export const TabsList = Primitive.TabsList;
-export const TabsTrigger = Primitive.TabsTrigger;
-export function Tabs({ ref, className, groupId, items, persist = false, label, defaultIndex = 0, updateAnchor = false, defaultValue = items ? escapeValue(items[defaultIndex]) : undefined, ...props }) {
-    const tabsRef = useRef(null);
+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 valueToIdMap = useMemo(() => new Map(), []);
     const collection = useMemo(() => [], []);
-    const onUpdate = useEffectEvent((v) => {
-        if (items && !items.some((item) => escapeValue(item) === v))
-            return;
-        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);
-                tabsRef.current?.scrollIntoView();
-                break;
-            }
-        }
-    }, [valueToIdMap]);
-    return (_jsxs(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);
-            }
-        }, className: cn('my-4', className), ...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, valueToIdMap, collection }), [valueToIdMap, collection, items]), children: props.children })] }));
+    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, ...props }) {
     const { items } = useTabContext();
@@ -90,11 +34,7 @@ export function Tab({ value, ...props }) {
     return (_jsx(TabsContent, { value: escapeValue(resolved), ...props, children: props.children }));
 }
 export function TabsContent({ value, className, ...props }) {
-    const { valueToIdMap } = useTabContext();
-    if (props.id) {
-        valueToIdMap.set(value, props.id);
-    }
-    return (_jsx(Primitive.TabsContent, { value: value, forceMount: true, className: cn('prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none', className), ...props, children: props.children }));
+    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.
@@ -116,6 +56,9 @@ function useCollectionIndex() {
         collection.push(key);
     return collection.indexOf(key);
 }
+/**
+ * only escape whitespaces in values in simple mode
+ */
 function escapeValue(v) {
     return v.toLowerCase().replace(/\s/, '-');
 }