panelui-native 0.59.0 → 0.60.0

package/lib/typescript/src/components/selection-mode/index.d.ts

@@ -0,0 +1,498 @@
+/**
+ * SelectionMode — turning a list into one you can pick several things out of.
+ *
+ * ```tsx
+ * <SelectionMode values={ids} onSelectedChange={setSelected}>
+ *   <SelectionMode.Header title="Choose" />
+ *   <FlashList
+ *     data={threads}
+ *     renderItem={({ item }) => (
+ *       <SelectionMode.Item value={item.id} onPress={() => open(item)}>
+ *         <Item>…</Item>
+ *       </SelectionMode.Item>
+ *     )}
+ *   />
+ *   <SelectionMode.Bar>
+ *     <SelectionMode.Action icon={<TrashIcon size={20} />} destructive onPress={remove}>
+ *       Delete
+ *     </SelectionMode.Action>
+ *   </SelectionMode.Bar>
+ * </SelectionMode>
+ * ```
+ *
+ * ## Two ways to present it
+ *
+ * On a screen it is a *mode*: the list is there to be read, and a long press
+ * turns it into one you can pick from. In a sheet it is a *picker*:
+ * `SelectionMode.Sheet` was opened in order to choose something, so it is
+ * choosing from the moment it appears, with the actions in the sheet's footer.
+ *
+ * ## The items stay yours
+ *
+ * `SelectionMode.Item` wraps whatever you put in it rather than replacing it.
+ * It adds the circle and takes over what a press means; what the item looks
+ * like is yours. That is what lets one component hold a row of people, a grid
+ * of colours, a run of slides and a list of files without growing a prop for
+ * each of them.
+ *
+ * ## A mode has to be obvious
+ *
+ * There are two states and the list behaves differently in each: normally a tap
+ * opens a row, and in selection a tap picks it. That is only safe if leaving is
+ * always available and never hidden — hence a cancel in the header, the Android
+ * back button, and the count in front of the reader the whole time.
+ *
+ * Entering is a long press on a row, which is the gesture the platform has used
+ * for this for fifteen years, and the row you pressed is the first one picked.
+ * Entering with nothing selected leaves the reader in a changed list with no
+ * explanation of what changed.
+ *
+ * ## Selection is a set of values, not of rows
+ *
+ * The component holds ids, never indices or elements. A list that reorders,
+ * pages in more rows or drops one underneath the reader would invalidate
+ * anything positional; a set of ids survives all three, and is also the shape
+ * the action at the end needs — deleting takes ids.
+ */
+import { type ReactNode } from 'react';
+import { type ViewProps } from 'react-native';
+import { type VariantProps } from 'tailwind-variants';
+declare const selectionVariants: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            circle: string;
+            ring: string;
+        };
+    };
+    destructive: {
+        true: {
+            actionLabel: string;
+        };
+    };
+    disabled: {
+        true: {
+            action: string;
+        };
+    };
+    /**
+     * Flush to the bottom edge, or lifted off it.
+     *
+     * `bar` is the platform shape — full width against the edge, a hairline
+     * along the top, and the same background as the screen's own chrome. It is
+     * the default because it is what a list with a selection in it does on both
+     * platforms, and because it does not take width away from the list.
+     */
+    placement: {
+        bar: {
+            bar: string;
+        };
+        floating: {
+            bar: string;
+        };
+    };
+}, {
+    circle: string;
+    fill: string;
+    header: string;
+    title: string;
+    close: string;
+    group: string;
+    ring: string;
+    bar: string;
+    action: string;
+    actionLabel: string;
+}, undefined, {
+    selected: {
+        true: {
+            circle: string;
+            ring: string;
+        };
+    };
+    destructive: {
+        true: {
+            actionLabel: string;
+        };
+    };
+    disabled: {
+        true: {
+            action: string;
+        };
+    };
+    /**
+     * Flush to the bottom edge, or lifted off it.
+     *
+     * `bar` is the platform shape — full width against the edge, a hairline
+     * along the top, and the same background as the screen's own chrome. It is
+     * the default because it is what a list with a selection in it does on both
+     * platforms, and because it does not take width away from the list.
+     */
+    placement: {
+        bar: {
+            bar: string;
+        };
+        floating: {
+            bar: string;
+        };
+    };
+}, {
+    circle: string;
+    fill: string;
+    header: string;
+    title: string;
+    close: string;
+    group: string;
+    ring: string;
+    bar: string;
+    action: string;
+    actionLabel: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            circle: string;
+            ring: string;
+        };
+    };
+    destructive: {
+        true: {
+            actionLabel: string;
+        };
+    };
+    disabled: {
+        true: {
+            action: string;
+        };
+    };
+    /**
+     * Flush to the bottom edge, or lifted off it.
+     *
+     * `bar` is the platform shape — full width against the edge, a hairline
+     * along the top, and the same background as the screen's own chrome. It is
+     * the default because it is what a list with a selection in it does on both
+     * platforms, and because it does not take width away from the list.
+     */
+    placement: {
+        bar: {
+            bar: string;
+        };
+        floating: {
+            bar: string;
+        };
+    };
+}, {
+    circle: string;
+    fill: string;
+    header: string;
+    title: string;
+    close: string;
+    group: string;
+    ring: string;
+    bar: string;
+    action: string;
+    actionLabel: string;
+}, undefined, unknown, unknown, undefined>>;
+type SelectionVariantProps = VariantProps<typeof selectionVariants>;
+interface SelectionModeContextValue {
+    active: boolean;
+    enter: (value?: string) => void;
+    exit: () => void;
+    selected: string[];
+    isSelected: (value: string) => boolean;
+    toggle: (value: string) => void;
+    selectAll: () => void;
+    clear: () => void;
+    /** True when everything selectable is picked, and there is something to pick. */
+    allSelected: boolean;
+    count: number;
+    /** How many rows `values` says there are, or 0 when it was not given. */
+    total: number;
+    max?: number;
+    haptics: boolean;
+    /**
+     * Whether the selection is being presented in a sheet.
+     *
+     * A sheet is opened *in order to* pick something, so there is no mode to
+     * enter and nothing to long-press for — and the action bar belongs to the
+     * sheet's footer rather than floating over the screen.
+     */
+    sheet: boolean;
+}
+/**
+ * Read the selection from anywhere inside a `SelectionMode` — for a header of
+ * your own, a count somewhere else on the screen, or an action that has to know
+ * what is picked.
+ */
+export declare function useSelectionMode(): SelectionModeContextValue;
+export interface SelectionModeProps extends ViewProps {
+    className?: string;
+    /**
+     * Every value that can be picked, in list order.
+     *
+     * Only "select all" and the "n of m" in the header need it — picking rows one
+     * at a time works without it. Give it the same ids you give the list.
+     */
+    values?: string[];
+    /** Controlled selection mode. Leave it out and a long press turns it on. */
+    active?: boolean;
+    /** Whether selection mode starts on. */
+    defaultActive?: boolean;
+    onActiveChange?: (active: boolean) => void;
+    /** Controlled selection. */
+    selected?: string[];
+    defaultSelected?: string[];
+    onSelectedChange?: (selected: string[]) => void;
+    /**
+     * The most that can be picked at once.
+     *
+     * A row that would go over it does not toggle on, and "select all" stops at
+     * the limit rather than refusing. Leave it out for no limit.
+     */
+    max?: number;
+    /**
+     * A tick when a row is picked and when the mode is entered. Off by default —
+     * needs the optional `expo-haptics`, and is silent without it.
+     */
+    haptics?: boolean;
+    children: ReactNode;
+}
+declare function SelectionModeRoot({ className, values, active: activeProp, defaultActive, onActiveChange, selected: selectedProp, defaultSelected, onSelectedChange, max, haptics, children, ...props }: SelectionModeProps): import("react").JSX.Element;
+declare namespace SelectionModeRoot {
+    var displayName: string;
+}
+export interface SelectionModeIndicatorProps {
+    className?: string;
+    /** Which row this stands for. Defaults to the row it is inside. */
+    value?: string;
+}
+/**
+ * The circle at the left of a row.
+ *
+ * Round rather than square, and that is the convention doing real work: a
+ * square box is a form control the reader is filling in, a round one is a thing
+ * they are picking out of a list. `Checkbox` is the former and stays that way.
+ *
+ * `Item` draws one for you. This is exported for a row that wants it somewhere
+ * else — over a photo's corner, at the end instead of the start.
+ */
+declare function SelectionModeIndicator({ className, value }: SelectionModeIndicatorProps): import("react").JSX.Element;
+declare namespace SelectionModeIndicator {
+    var displayName: string;
+}
+export interface SelectionModeItemProps extends Omit<ViewProps, 'children'> {
+    className?: string;
+    /** This row's id. What ends up in `selected`. */
+    value: string;
+    /** What the row does when it is pressed and the mode is off. */
+    onPress?: () => void;
+    /**
+     * Stop this row entering selection mode, and being picked once in it. For a
+     * header row, an advert, a "load more" — anything in the list that is not one
+     * of the things being chosen between.
+     */
+    disabled?: boolean;
+    /** Draw the circle without waiting for the mode. */
+    alwaysShowIndicator?: boolean;
+    /**
+     * How being picked is drawn.
+     *
+     * `leading` puts the circle in front of the item, which is what a row wants.
+     * `ring` draws a ring around whatever you gave it instead — for a swatch, a
+     * thumbnail or a photo, where a circle beside it would be a second thing to
+     * look at and the item itself can carry the state. `none` draws nothing and
+     * leaves it to you; read `useSelectionMode().isSelected`.
+     */
+    indicator?: 'leading' | 'ring' | 'none';
+    children: ReactNode;
+}
+/**
+ * One row, with the circle in front of it.
+ *
+ * The press behaviour is the whole component: off mode, a press is the row's
+ * own and a long press turns the mode on with this row picked; in it, a press
+ * picks and unpicks and the row's own press is unreachable. Two meanings for
+ * one gesture is exactly why the mode has to be visible from the header.
+ */
+declare function SelectionModeItem({ className, value, onPress, disabled, alwaysShowIndicator, indicator, children, ...props }: SelectionModeItemProps): import("react").JSX.Element;
+declare namespace SelectionModeItem {
+    var displayName: string;
+}
+export interface SelectionModeGroupProps extends ViewProps {
+    className?: string;
+    /**
+     * Lay the items out in a grid this many across instead of stacking them.
+     *
+     * For things recognised by sight rather than read — swatches, thumbnails,
+     * slides. A grid of six colours is one glance; the same six as rows is a
+     * scroll.
+     */
+    columns?: number;
+    /** Space between items in a grid, in points. */
+    gap?: number;
+    /** Hairlines between stacked items. On by default; off in a grid. */
+    separators?: boolean;
+    children: ReactNode;
+}
+/**
+ * A rounded card holding a run of items.
+ *
+ * Grouping is what makes a sheet of choices readable: one card of options with
+ * hairlines between them reads as a set, and the same rows loose on the sheet's
+ * background read as a list that has not finished loading. It is also what the
+ * platform's own sheets do.
+ *
+ * Stacked by default, with a rule between each item. Pass `columns` for a grid.
+ */
+declare function SelectionModeGroup({ className, columns, gap, separators, children, style, ...props }: SelectionModeGroupProps): import("react").JSX.Element;
+declare namespace SelectionModeGroup {
+    var displayName: string;
+}
+export interface SelectionModeHeaderProps extends ViewProps {
+    className?: string;
+    /** The word in front of the count. */
+    title?: string;
+    /** Hide the select-all control, for a list where picking everything is wrong. */
+    hideSelectAll?: boolean;
+    /** Replaces the whole header's contents, keeping only its layout. */
+    children?: ReactNode;
+}
+/**
+ * The bar that says the mode is on: a way out, how many are picked, and all
+ * of them at once.
+ *
+ * Rendered only while the mode is on, and it is the thing that makes the mode
+ * legible — a list whose rows have quietly changed what a tap does, with no
+ * banner saying so, is a list that loses somebody's work.
+ */
+declare function SelectionModeHeader({ className, title, hideSelectAll, children, ...props }: SelectionModeHeaderProps): import("react").JSX.Element | null;
+declare namespace SelectionModeHeader {
+    var displayName: string;
+}
+export interface SelectionModeBarProps extends ViewProps, Pick<SelectionVariantProps, 'placement'> {
+    className?: string;
+    /**
+     * Room under the actions, in points — your safe-area inset.
+     *
+     * A bar against the bottom edge sits over the home indicator on a phone that
+     * has one, and an action under a home indicator is an action that takes two
+     * tries. `floating` uses it as the gap on all four sides instead.
+     */
+    inset?: number;
+    /**
+     * Keep the bar up with nothing picked.
+     *
+     * Off by default: every action on it needs something to act on, and a row of
+     * buttons that all refuse is worse than a row that is not there yet.
+     */
+    showWhenEmpty?: boolean;
+    children: ReactNode;
+}
+/**
+ * The actions, across the bottom of the list.
+ *
+ * Over the list rather than under it, because the list is as long as it is and
+ * a bar in the flow would be somewhere off the end of it. **Pad the bottom of
+ * your list so the last row can clear this** — nothing here can work out how
+ * tall the list is.
+ *
+ * Flush to the edge by default. A bar inset from the sides is a card floating
+ * over a list, which reads as something that arrived rather than as the mode
+ * the screen is in — and it takes width away from the actions, which are the
+ * one row of controls on screen that must not be cramped.
+ */
+declare function SelectionModeBar({ className, placement, inset, showWhenEmpty, children, style, ...props }: SelectionModeBarProps): import("react").JSX.Element | null;
+declare namespace SelectionModeBar {
+    var displayName: string;
+}
+export interface SelectionModeActionProps extends Omit<ViewProps, 'children'>, Pick<SelectionVariantProps, 'destructive'> {
+    className?: string;
+    /** The glyph above the label. */
+    icon?: ReactNode;
+    /**
+     * What it does. Handed the selection, so the common case needs no other
+     * wiring — and leaving the mode afterwards is up to you, because whether the
+     * list still makes sense depends on what you did to it.
+     */
+    onPress?: (selected: string[]) => void;
+    /** Leave selection mode after the action runs. */
+    exitOnPress?: boolean;
+    disabled?: boolean;
+    /** Extra classes for the label. */
+    labelClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * One action in the bar: a glyph with its name under it.
+ *
+ * Labelled, always. A row of bare glyphs at the bottom of a screen is a row of
+ * guesses, and one of them usually deletes something.
+ */
+declare function SelectionModeAction({ className, icon, onPress, exitOnPress, disabled, destructive, labelClassName, children, ...props }: SelectionModeActionProps): import("react").JSX.Element;
+declare namespace SelectionModeAction {
+    var displayName: string;
+}
+export interface SelectionModeSheetProps {
+    className?: string;
+    /** Controlled open state of the sheet. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** The word in front of the count. */
+    title?: string;
+    /** Hide the select-all control. */
+    hideSelectAll?: boolean;
+    /**
+     * How tall the sheet opens.
+     *
+     * `half` by default, and deliberately not `auto`. A sheet that sizes to its
+     * content gives its scrolling body no height to fill, and a list inside a box
+     * of no height draws nothing — which looks like an empty sheet rather than
+     * like a missing style. A selection is a list; give it the room.
+     */
+    size?: 'auto' | 'half' | 'full';
+    /**
+     * The things to pick between, and optionally a `SelectionMode.Bar` of
+     * actions. The bar is lifted into the sheet's footer wherever it is written.
+     */
+    children: ReactNode;
+}
+/**
+ * The whole selection, presented in a bottom sheet.
+ *
+ * A picker rather than a mode. The list on a screen has to be *turned into* one
+ * you can pick from — hence the long press, the cancel and the count — but a
+ * sheet was opened in order to pick something, so it is picking from the moment
+ * it appears and there is nothing to enter or leave.
+ *
+ * What goes in it is anything: a column of friends, a grid of colours, a run of
+ * slides. `SelectionMode.Item` wraps whatever you give it, so the sheet does
+ * not need to know what it is holding.
+ *
+ * ```tsx
+ * <SelectionMode values={ids} selected={selected} onSelectedChange={setSelected}>
+ *   <SelectionMode.Sheet open={open} onOpenChange={setOpen} title="Share with">
+ *     {people.map((person) => (
+ *       <SelectionMode.Item key={person.id} value={person.id}>
+ *         <Item>…</Item>
+ *       </SelectionMode.Item>
+ *     ))}
+ *     <SelectionMode.Bar>
+ *       <SelectionMode.Action icon={<SendIcon size={20} />} onPress={share}>Send</SelectionMode.Action>
+ *     </SelectionMode.Bar>
+ *   </SelectionMode.Sheet>
+ * </SelectionMode>
+ * ```
+ */
+declare function SelectionModeSheet({ className, open, defaultOpen, onOpenChange, title, hideSelectAll, size, children, }: SelectionModeSheetProps): import("react").JSX.Element;
+declare namespace SelectionModeSheet {
+    var displayName: string;
+}
+export declare const SelectionMode: typeof SelectionModeRoot & {
+    Sheet: typeof SelectionModeSheet;
+    Group: typeof SelectionModeGroup;
+    Item: typeof SelectionModeItem;
+    Indicator: typeof SelectionModeIndicator;
+    Header: typeof SelectionModeHeader;
+    Bar: typeof SelectionModeBar;
+    Action: typeof SelectionModeAction;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/components/selection-mode/index.d.ts.map

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

package/lib/typescript/src/components/tabs/index.d.ts

@@ -16,14 +16,22 @@
  * </Tabs>
  * ```
  *
- * **Swiping.** Only the visible panel is mounted, so a drag has nothing behind
- * it to reveal. The panel still tracks the finger one to one and dims as it
- * goes, and the panel arriving comes back up through the same fade — the
- * movement carries the change and the dissolve covers the gap. On release the
- * arriving panel picks up a whole panel's width from wherever the outgoing one
- * was let go, so the two views draw one continuous movement between them. The
- * displacement lives on the root for exactly that reason: a value belonging to
- * either panel would be destroyed at the handover.
+ * **Swiping puts the panels in a row.** With `swipeable`, the panels are laid
+ * out side by side in a strip as wide as all of them, inside a viewport that
+ * shows one at a time, and moving between tabs is that strip translating. The
+ * neighbours are therefore already built and already the right size before the
+ * finger arrives at them, which is the whole point: a panel that has to be
+ * mounted and measured at the moment it becomes visible is a panel that stalls
+ * there, and it stalls for exactly as long as it takes to build.
+ *
+ * One shared value carries the strip's position, in panels rather than points,
+ * and it is the only thing that decides where the strip is. A press springs it,
+ * a drag sets it, and neither waits for React: the value the tab set reports is
+ * updated alongside the movement, not ahead of it.
+ *
+ * A swipeable tab set therefore needs a height to fill, the same as any pager.
+ * Give it one — `flex-1` on the tab set, or a fixed height — or the strip has
+ * nothing to lay its panels out in.
  */
 import { type ReactNode } from 'react';
 import { type ViewProps } from 'react-native';
@@ -31,12 +39,23 @@ export type TabsVariant = 'segmented' | 'underline' | 'pill' | 'expanding';
 /**
  * How much of an inactive panel survives a switch away from it.
  *
- * `false` unmounts it. `true` keeps it mounted but takes it out of layout, so
- * it costs nothing to have around. `'measured'` keeps it laid out at full size
- * as well — the expensive option, and the only one a child that sizes itself
- * from its parent can be built inside while it is hidden.
+ * `false` unmounts it. `true` keeps it mounted.
+ *
+ * `'measured'` meant "keep it mounted *and* laid out at a real size", which was
+ * a distinction only a tab set of separately hidden panels had to make. In a
+ * swipeable tab set every panel in the strip is laid out at a real size
+ * already, so it is the same as `true` there and is kept only so that passing
+ * it does not break.
+ *
+ * @see TabsProps.keepMounted
  */
 export type TabsKeepMounted = boolean | 'measured';
+/**
+ * `'disable-all'` turns off every animation in the tab set — the indicator, the
+ * strip, and an expanding tab's reveal — including the ones its parts run
+ * themselves.
+ */
+export type TabsAnimation = 'disable-all';
 export interface TabsProps extends ViewProps {
     className?: string;
     value?: string;
@@ -54,34 +73,24 @@ export interface TabsProps extends ViewProps {
      */
     variant?: TabsVariant;
     /**
-     * Keep inactive panels mounted and hidden instead of unmounting them, so a
-     * scroll position or a half-filled form survives a switch away and back.
-     * Costs the render of every panel up front.
+     * Mount every panel up front instead of only the ones that have been
+     * reached, so a scroll position or a half-filled form is there from the
+     * start rather than from the first visit.
      *
-     * `true` hides a kept panel with `display: none`, which also takes it out of
-     * layout: it is mounted, but it has no size. That is what makes it cheap, and
-     * it is enough for a panel whose content sizes itself — a column of views, a
-     * form, a `ScrollView` of known children.
+     * Usually unnecessary. A panel that has been shown once stays mounted for
+     * the life of the tab set either way, and with `swipeable` the panels on
+     * each side of the active one are mounted before you get to them. What this
+     * adds is the panels you have *not* been near — the fourth tab of four —
+     * which costs their render at startup and buys nothing until somebody opens
+     * them.
      *
-     * It is *not* enough for a child that decides what to render by measuring the
-     * space it has been given. A virtualised list asks its parent how tall it is
-     * and fills that many rows; asked inside a panel of zero height it answers
-     * zero rows, and the whole first render still lands on the frame the tab
-     * becomes visible — the stall this flag looks like it should have avoided.
-     *
-     * `'measured'` is for that case. A kept panel stays laid out at the full size
-     * of the tab set, and is hidden by not being drawn rather than by being
-     * removed from layout: a list inside it measures, renders its rows and
-     * settles while it is still hidden, so becoming visible costs nothing.
-     *
-     * The trade is real and is why it is not the default — every kept panel lays
-     * out and draws, up front and on every size change, so a five-tab set builds
-     * five panels' worth of rows to show one. Reach for it when a panel is slow
-     * to appear and its content is virtualised; leave it at `true` otherwise.
+     * Turn it on when a panel has to be live while it is off screen: a form that
+     * must validate as another tab is edited, a chart that has to be ready to
+     * print, a subscription that must not miss a message.
      */
     keepMounted?: TabsKeepMounted;
     /**
-     * Move between tabs by dragging sideways on the panel, as well as by
+     * Move between tabs by dragging sideways on the panels, as well as by
      * pressing the triggers.
      *
      * Off by default, because a panel is allowed to contain something that
@@ -89,21 +98,30 @@ export interface TabsProps extends ViewProps {
      * open — and the two cannot both have it. Turn it on for panels of ordinary
      * scrolling content, where it is the gesture people try first.
      *
-     * **It does not change what is mounted.** Only `keepMounted` decides that,
-     * with or without this — a swipe animates between two panels of which one is
-     * being unmounted and the other mounted for the first time, exactly as a
-     * press does. What it does change is that the mount now happens *while
-     * something is moving*, so a panel that is slow to build stops being a pause
-     * before it appears and starts being a stutter in the movement. If a swipe
-     * feels heavier than a press on the same tab set, the panel is expensive to
-     * mount — and the answer is whichever `keepMounted` actually keeps its
-     * content built, which for a virtualised list is `'measured'` rather than
-     * `true`. Turning this off hides the cost rather than removing it.
+     * **It changes how the panels are laid out.** They go side by side in a strip
+     * that is as wide as all of them, and the tab set shows one panel of it at a
+     * time. So the panel on each side of the active one is built and sized before
+     * you swipe to it, which is what stops a heavy panel — a virtualised list, a
+     * chart — from stalling on the frame it becomes visible.
+     *
+     * **It needs a height to fill**, the same as any pager: `flex-1` on the tab
+     * set, or a fixed height. Without one the strip has no room to lay its panels
+     * out in, and a list inside a panel of no height renders no rows. In
+     * development the tab set says so rather than rendering nothing.
      */
     swipeable?: boolean;
+    /**
+     * Turn the tab set's animations off — the indicator, the strip, and an
+     * expanding tab's reveal.
+     *
+     * For a screen that is already animating something more important, and as a
+     * blunt instrument on a device that cannot afford them. The system's own
+     * reduce-motion setting is honoured without this.
+     */
+    animation?: TabsAnimation;
     children: ReactNode;
 }
-declare function TabsRoot({ className, value, onValueChange, defaultValue, variant, keepMounted, swipeable, children, ...props }: TabsProps): import("react").JSX.Element;
+declare function TabsRoot({ className, value, onValueChange, defaultValue, variant, keepMounted, swipeable, animation, children, ...props }: TabsProps): import("react").JSX.Element;
 export interface TabsListProps extends ViewProps {
     className?: string;
     /**