panelui-web 0.5.0 → 0.6.0

package/dist/components/sheet/index.d.ts

@@ -17,7 +17,7 @@ export interface SheetProps {
      */
     dismissible?: boolean;
 }
-declare function SheetRoot({ children, open, onOpenChange, defaultOpen, side, dismissible, }: SheetProps): import("react").JSX.Element;
+declare function SheetRoot(props: SheetProps): import("react").JSX.Element;
 declare namespace SheetRoot {
     var displayName: string;
 }
@@ -28,12 +28,50 @@ export interface SheetTriggerProps extends Omit<ComponentProps<'button'>, 'child
      * the click handler and the attributes that tie it to the sheet.
      */
     render?: ReactElement;
+    /**
+     * The `name` of a `Sheet.Next` to open instead of the sheet this trigger is
+     * in. Any button in a sheet can open the next one this way, wherever it sits.
+     */
+    to?: string;
+    /**
+     * Handed to the `Sheet.Next` that `to` names, as the argument of its
+     * children function. Use it to open one sheet for every row of a list.
+     */
+    payload?: unknown;
 }
-/** What opens the sheet. A plain button unless `render` supplies one. */
-declare function SheetTrigger({ render, children, ...props }: SheetTriggerProps): import("react").JSX.Element;
+/**
+ * What opens a sheet: its own, or with `to`, the `Sheet.Next` of that name.
+ * A plain button unless `render` supplies one.
+ */
+declare function SheetTrigger({ render, children, to, payload, ...props }: SheetTriggerProps): import("react").JSX.Element;
 declare namespace SheetTrigger {
     var displayName: string;
 }
+export interface SheetNextProps extends Omit<SheetContentProps, 'children' | 'inline'> {
+    /** What a `Sheet.Trigger` passes as `to` to open this sheet. Unique within one stack of sheets. */
+    name: string;
+    /**
+     * The sheet's parts. Pass a function to read the `payload` of the trigger
+     * that opened it; it is `undefined` when that trigger has none.
+     */
+    children?: ReactNode | ((payload: any) => ReactNode);
+    /** The edge it rises from. Default: the edge of the sheet it is declared in. */
+    side?: SheetSide;
+    /** Whether a click outside, a swipe or Escape closes it. Default true. */
+    dismissible?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * A sheet opened from the one it is declared in, by any `Sheet.Trigger` whose
+ * `to` is its `name`. Put it anywhere inside the first sheet's content; it
+ * takes `Sheet.Content`'s props and draws its own content, so its children are
+ * the header, body and footer.
+ */
+declare function SheetNext({ name, children, side, dismissible, onOpenChange, ...content }: SheetNextProps): import("react").JSX.Element;
+declare namespace SheetNext {
+    var displayName: string;
+}
 export interface SheetContentProps extends Omit<ComponentProps<'div'>, 'children'> {
     children?: ReactNode;
     /**
@@ -136,6 +174,7 @@ declare namespace SheetStage {
 }
 export declare const Sheet: typeof SheetRoot & {
     Trigger: typeof SheetTrigger;
+    Next: typeof SheetNext;
     Content: typeof SheetContent;
     Header: typeof SheetHeader;
     Title: typeof SheetTitle;
@@ -145,4 +184,4 @@ export declare const Sheet: typeof SheetRoot & {
     Close: typeof SheetClose;
     Stage: typeof SheetStage;
 };
-export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/sheet/index.js

@@ -34,6 +34,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * still shows, and dimmed. Only the first sheet darkens the page, so two open
  * sheets do not stack two shades of black.
  *
+ * The next sheet is declared once, as `Sheet.Next` with a `name`, and opened
+ * by any `Sheet.Trigger to="name"` in the sheet: a row in the body, an icon in
+ * the header, a button in the footer. The trigger and the sheet it opens are
+ * apart in the markup because they are apart on the screen: a list of rows
+ * that each open a sheet should not have to wrap every row in one. A trigger
+ * can carry a `payload`, so one `Sheet.Next` serves every row of a list.
+ *
  * ## The hand decides
  *
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
@@ -48,7 +55,7 @@ import { tv } from 'tailwind-variants';
  * back, the page receding. A fast start that eases into place reads as weight,
  * where a symmetric ease reads as a slide show.
  */
-const MOVE = '[transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),border-radius_450ms_cubic-bezier(0.32,0.72,0,1),margin_450ms_cubic-bezier(0.32,0.72,0,1)]';
+const MOVE = '[transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),border-radius_450ms_cubic-bezier(0.32,0.72,0,1),margin_450ms_cubic-bezier(0.32,0.72,0,1),height_450ms_cubic-bezier(0.32,0.72,0,1)]';
 const sheetVariants = tv({
     slots: {
         backdrop: [
@@ -83,6 +90,17 @@ const sheetVariants = tv({
             "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-popover after:opacity-0 after:transition-opacity after:duration-[450ms] after:content-['']",
             'data-nested-drawer-open:after:opacity-50',
         ],
+        /*
+         * A top or bottom sheet behind another takes the front one's height, so
+         * the strip that shows past it is the same whichever of the two is taller.
+         * A taller sheet behind would otherwise stand above the stack, and a
+         * shorter one would vanish behind the front one entirely.
+         */
+        stacked: [
+            'data-nested-drawer-open:h-(--drawer-frontmost-height) data-nested-drawer-open:overflow-hidden',
+            // Lets the height animate to and from `auto` where the browser can.
+            '[interpolate-size:allow-keywords]',
+        ],
         grabber: [
             'pointer-events-none absolute inset-x-0 z-10 mx-auto flex h-6 w-24 justify-center',
             'before:h-[5px] before:w-9 before:rounded-full before:bg-muted-foreground/35',
@@ -206,6 +224,19 @@ const SWIPE = {
     left: 'left',
     right: 'right',
 };
+function createStack() {
+    const handles = new Map();
+    return {
+        handle(name) {
+            let handle = handles.get(name);
+            if (!handle) {
+                handle = Drawer.createHandle();
+                handles.set(name, handle);
+            }
+            return handle;
+        },
+    };
+}
 const SheetContext = createContext(null);
 function useSheet(part) {
     const context = useContext(SheetContext);
@@ -213,10 +244,16 @@ function useSheet(part) {
         throw new Error(`${part} must be used inside a <Sheet>.`);
     return context;
 }
-function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, }) {
+function SheetRoot(props) {
+    return _jsx(SheetFrame, { ...props });
+}
+SheetRoot.displayName = 'Sheet';
+function SheetFrame({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, handle: drawerHandle, }) {
     // A sheet inside another sheet's content finds that sheet's context.
     const parent = useContext(SheetContext);
     const nested = parent !== null && !parent.inline;
+    const [ownStack] = useState(createStack);
+    const stack = nested && parent ? parent.stack : ownStack;
     // Held here as well as by the primitive, so a sheet opened from this one
     // can close it.
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
@@ -243,6 +280,7 @@ function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = '
     useEffect(() => (nested && parent ? parent.register(handle) : undefined), [nested, parent, handle]);
     const context = useMemo(() => ({
         side,
+        stack,
         nested,
         inline: false,
         showClose: true,
@@ -252,8 +290,8 @@ function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = '
         },
         closeTree: handle.closeTree,
         hasOpenChild: () => [...opened.current].some((child) => child.isOpen()),
-    }), [side, nested, handle]);
-    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+    }), [side, stack, nested, handle]);
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: isOpen, handle: drawerHandle, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
                 // The primitive has a switch for a press outside and none for
                 // Escape or a swipe, so those are refused here.
                 if (!next &&
@@ -263,14 +301,43 @@ function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = '
                     return;
                 }
                 setOpen(next);
-            }, children: children }) }));
+            }, children: typeof children === 'function'
+                ? ({ payload }) => children(payload)
+                : children }) }));
 }
-SheetRoot.displayName = 'Sheet';
-/** What opens the sheet. A plain button unless `render` supplies one. */
-function SheetTrigger({ render, children, ...props }) {
+/**
+ * What opens a sheet: its own, or with `to`, the `Sheet.Next` of that name.
+ * A plain button unless `render` supplies one.
+ */
+function SheetTrigger({ render, children, to, payload, ...props }) {
+    const sheet = useContext(SheetContext);
+    if (to !== undefined) {
+        if (!sheet)
+            throw new Error('Sheet.Trigger with `to` must be used inside a <Sheet>.');
+        return (_jsx(Drawer.Trigger, { handle: sheet.stack.handle(to), payload: payload, render: render, ...props, children: children }));
+    }
     return (_jsx(Drawer.Trigger, { render: render, ...props, children: children }));
 }
 SheetTrigger.displayName = 'Sheet.Trigger';
+/**
+ * A sheet opened from the one it is declared in, by any `Sheet.Trigger` whose
+ * `to` is its `name`. Put it anywhere inside the first sheet's content; it
+ * takes `Sheet.Content`'s props and draws its own content, so its children are
+ * the header, body and footer.
+ */
+function SheetNext({ name, children, side, dismissible, onOpenChange, ...content }) {
+    const parent = useSheet('Sheet.Next');
+    return (_jsx(SheetFrame, { handle: parent.stack.handle(name), side: side ?? parent.side, dismissible: dismissible, onOpenChange: onOpenChange, children: (payload) => (_jsx(SheetContent, { ...content, children: typeof children === 'function' ? _jsx(NextParts, { render: children, payload: payload }) : children })) }));
+}
+SheetNext.displayName = 'Sheet.Next';
+/**
+ * Calls a `Sheet.Next` children function. As a component of its own it only
+ * runs once the sheet is open and its content mounted, which is when the
+ * trigger has handed over its payload.
+ */
+function NextParts({ render, payload }) {
+    return _jsx(_Fragment, { children: render(payload) });
+}
 /** The sheet itself, with the backdrop behind it. */
 function SheetContent({ children, detached = true, size = 'auto', showGrabber, showClose = true, blur = false, inline = false, className, ...props }) {
     const sheet = useSheet('Sheet.Content');
@@ -291,7 +358,7 @@ function SheetContent({ children, detached = true, size = 'auto', showGrabber, s
                 onClick: () => {
                     if (sheet.hasOpenChild())
                         sheet.closeTree();
-                } })), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
+                } })), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className: [vertical && slots.stacked(), className] }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
 }
 SheetContent.displayName = 'Sheet.Content';
 /**
@@ -359,6 +426,7 @@ function SheetStage({ className, children, ...props }) {
 SheetStage.displayName = 'Sheet.Stage';
 export const Sheet = Object.assign(SheetRoot, {
     Trigger: SheetTrigger,
+    Next: SheetNext,
     Content: SheetContent,
     Header: SheetHeader,
     Title: SheetTitle,
@@ -368,4 +436,4 @@ export const Sheet = Object.assign(SheetRoot, {
     Close: SheetClose,
     Stage: SheetStage,
 });
-export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/switch/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Switch — on or off, for a setting that takes effect the moment it changes.
+ *
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ *
+ * <Label>
+ *   <Label.Text>Email me a receipt</Label.Text>
+ *   <Label.Action><Switch /></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## It moves like a thing with weight
+ *
+ * The colour does not fade in. It sweeps along the track behind the thumb,
+ * so the track fills from the side the thumb left and reads as the thumb's
+ * doing. While it is pressed, the thumb stretches towards where it is going,
+ * so a press that has not yet let go already says which way it will flip.
+ *
+ * ## While a change is saved
+ *
+ * A setting saved to a server is not on until the server says so. `pending`
+ * puts a turning ring in the thumb and stops the switch being pressed again,
+ * so the switch can show the new state at once and still be honest that it
+ * has not landed yet.
+ */
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import type { CSSProperties } from 'react';
+export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SwitchColor = 'primary' | 'success' | 'info' | 'destructive';
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'color'> {
+    /** Default `md`. */
+    size?: SwitchSize;
+    /** The colour it fills with when on. `primary` by default; pick another for what it means. */
+    color?: SwitchColor;
+    /**
+     * What a screen reader calls it, when there is no visible label tied to it.
+     * A `Label` wrapped round it, or pointing at its `id`, is better when there is room.
+     */
+    label?: string;
+    /** A change is being saved: a ring turns in the thumb, and it cannot be pressed again until it is done. */
+    pending?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A switch. Takes `checked`/`onCheckedChange` or `defaultChecked`, and `name` for a form. */
+declare function Switch({ size, color, label, pending, className, style, readOnly, ...props }: SwitchProps): import("react").JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+export { Switch };

package/dist/components/switch/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Switch — on or off, for a setting that takes effect the moment it changes.
+ *
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ *
+ * <Label>
+ *   <Label.Text>Email me a receipt</Label.Text>
+ *   <Label.Action><Switch /></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## It moves like a thing with weight
+ *
+ * The colour does not fade in. It sweeps along the track behind the thumb,
+ * so the track fills from the side the thumb left and reads as the thumb's
+ * doing. While it is pressed, the thumb stretches towards where it is going,
+ * so a press that has not yet let go already says which way it will flip.
+ *
+ * ## While a change is saved
+ *
+ * A setting saved to a server is not on until the server says so. `pending`
+ * puts a turning ring in the thumb and stops the switch being pressed again,
+ * so the switch can show the new state at once and still be honest that it
+ * has not landed yet.
+ */
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { tv } from 'tailwind-variants';
+/** Height and width of the track. The thumb is the height less 2px of padding on each side. */
+const SIZE = {
+    xs: ['1rem', '1.75rem'],
+    sm: ['1.25rem', '2.125rem'],
+    md: ['1.5rem', '2.625rem'],
+    lg: ['1.75rem', '3.125rem'],
+    xl: ['2rem', '3.625rem'],
+};
+const SPRING = 'ease-[cubic-bezier(0.3,1.35,0.45,1)]';
+const switchVariants = tv({
+    slots: {
+        root: [
+            'group/switch relative inline-flex h-(--switch-h) w-(--switch-w) shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none',
+            'bg-input transition-[background-color,box-shadow] duration-200 dark:bg-input/80',
+            'hover:not-data-disabled:bg-[color-mix(in_oklab,var(--input),var(--foreground)_8%)]',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-busy:cursor-progress',
+            // The fill: the whole track in the switch's colour, uncovered from the
+            // thumb's starting side as it travels.
+            "before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--switch-color) before:content-['']",
+            'before:[clip-path:inset(0_100%_0_0_round_999px)] before:transition-[clip-path] before:duration-300 before:ease-[cubic-bezier(0.3,1.35,0.45,1)]',
+            'rtl:before:[clip-path:inset(0_0_0_100%_round_999px)]',
+            'data-checked:before:[clip-path:inset(0_0_0_0_round_999px)]',
+            'motion-reduce:before:transition-none',
+        ],
+        thumb: [
+            'relative z-10 flex size-[calc(var(--switch-h)-4px)] items-center justify-center rounded-full bg-white',
+            // On, the thumb takes the colour that reads on the fill: dark on a light primary, white on the rest.
+            'transition-colors data-checked:bg-(--switch-thumb)',
+            'shadow-[0_1px_2px_rgb(0_0_0/0.18),0_2px_6px_-1px_rgb(0_0_0/0.12)]',
+            `transition-[translate,width] duration-300 ${SPRING} motion-reduce:transition-none`,
+            // On: across by the track's width less its height, which is the room left.
+            'data-checked:translate-x-[calc(var(--switch-w)-var(--switch-h))] rtl:data-checked:-translate-x-[calc(var(--switch-w)-var(--switch-h))]',
+            // Pressed: a fifth longer, towards where it is going. When on, it grows back the way it came.
+            'group-active/switch:not-data-disabled:w-[calc((var(--switch-h)-4px)*1.22)]',
+            'group-active/switch:data-checked:not-data-disabled:translate-x-[calc(var(--switch-w)-var(--switch-h)-(var(--switch-h)-4px)*0.22)]',
+            'rtl:group-active/switch:data-checked:not-data-disabled:-translate-x-[calc(var(--switch-w)-var(--switch-h)-(var(--switch-h)-4px)*0.22)]',
+            'group-aria-busy/switch:w-[calc(var(--switch-h)-4px)]',
+        ],
+        spinner: 'size-[62%] animate-spin text-(--switch-color) group-not-data-checked/switch:text-muted-foreground motion-reduce:animate-none',
+    },
+    variants: {
+        color: {
+            primary: { root: '[--switch-color:var(--primary)] [--switch-thumb:var(--primary-foreground)]' },
+            success: { root: '[--switch-color:var(--success)] [--switch-thumb:white]' },
+            info: { root: '[--switch-color:var(--info)] [--switch-thumb:white]' },
+            destructive: { root: '[--switch-color:var(--destructive)] [--switch-thumb:white]' },
+        },
+    },
+    defaultVariants: { color: 'primary' },
+});
+/** A switch. Takes `checked`/`onCheckedChange` or `defaultChecked`, and `name` for a form. */
+function Switch({ size = 'md', color, label, pending = false, className, style, readOnly, ...props }) {
+    const slots = switchVariants({ color });
+    const [height, width] = SIZE[size];
+    return (_jsx(BaseSwitch.Root, { "data-slot": "switch", "data-size": size, "aria-label": label, "aria-busy": pending || undefined, readOnly: pending || readOnly, className: slots.root({ className }), style: { ['--switch-h']: height, ['--switch-w']: width, ...style }, ...props, children: _jsx(BaseSwitch.Thumb, { "data-slot": "switch-thumb", className: slots.thumb(), children: pending ? (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: slots.spinner(), fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 3.5 }), _jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round" })] })) : null }) }));
+}
+Switch.displayName = 'Switch';
+export { Switch };

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

@@ -0,0 +1,94 @@
+/**
+ * Tabs — a few views of one thing, one at a time, chosen from a row of tabs.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">
+ *       Activity <Tabs.Badge>12</Tabs.Badge>
+ *     </Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * ## Three weights
+ *
+ * `segmented` sets the tabs in a track with the chosen one raised out of it:
+ * a control for switching what a panel shows. `underline` is lighter, a line
+ * under the chosen tab, for the sections of a page. `pills` fills the chosen
+ * tab with the primary colour, for a filter that should be seen from across
+ * the screen.
+ *
+ * ## It moves the way the hand did
+ *
+ * The marker slides to the new tab. The underline stretches as it goes, its
+ * leading end arriving first and the trailing end catching up, so a long jump
+ * reads as one movement and not as a line teleporting. The new panel slides
+ * in from the side the tab was on, so going right looks like going right.
+ *
+ * ## A row that does not fit scrolls
+ *
+ * When the tabs are wider than the space for them, the row scrolls sideways
+ * and fades at the end that has more, rather than wrapping onto a second line
+ * or shrinking the labels.
+ */
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { type ComponentProps } from 'react';
+export type TabsVariant = 'segmented' | 'underline' | 'pills';
+export interface TabsProps extends Omit<BaseTabs.Root.Props, 'className'> {
+    /** How the tabs are drawn. Default `segmented`. */
+    variant?: TabsVariant;
+    className?: string;
+}
+/**
+ * Holds which tab is chosen: `defaultValue`, or `value` with `onValueChange`.
+ * `orientation="vertical"` puts the tabs in a column beside the content.
+ */
+declare function TabsRoot({ variant, className, ...props }: TabsProps): import("react").JSX.Element;
+declare namespace TabsRoot {
+    var displayName: string;
+}
+export interface TabsListProps extends Omit<BaseTabs.List.Props, 'className'> {
+    className?: string;
+}
+/** The row of tabs, with the marker under the chosen one. */
+declare function TabsList({ className, children, ...props }: TabsListProps): import("react").JSX.Element;
+declare namespace TabsList {
+    var displayName: string;
+}
+export interface TabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'className'> {
+    className?: string;
+}
+/**
+ * One tab. Its `value` names the `Tabs.Content` it shows. An icon and a
+ * `Tabs.Badge` can sit beside its label.
+ */
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react").JSX.Element;
+declare namespace TabsTrigger {
+    var displayName: string;
+}
+export interface TabsBadgeProps extends ComponentProps<'span'> {
+}
+/** A count beside a tab's label: unread, open, waiting. */
+declare function TabsBadge({ className, ...props }: TabsBadgeProps): import("react").JSX.Element;
+declare namespace TabsBadge {
+    var displayName: string;
+}
+export interface TabsContentProps extends Omit<BaseTabs.Panel.Props, 'className'> {
+    className?: string;
+}
+/** What one tab shows. Only the chosen one is in the page unless `keepMounted` is set. */
+declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
+declare namespace TabsContent {
+    var displayName: string;
+}
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Badge: typeof TabsBadge;
+    Content: typeof TabsContent;
+};
+export { TabsList, TabsTrigger, TabsBadge, TabsContent };