/**
* @fileoverview Saasflare Tabs — tabbed navigation with animated indicator.
* @module packages/ui/components/ui/tabs
* @layer core
*
* Self-contained implementation using Radix Tabs primitive directly.
* The active-tab indicator is a single `m.div` inside `TabsList` that
* animates `x`/`y`/`width`/`height` to track the active trigger via a
* MutationObserver on `data-state`. No `LayoutGroup` — works under
* `LazyMotion features={domAnimation}` strict mode.
*
* Layout indicator animation respects reduced-motion preference.
*
* @example
* import { Tabs, TabsList, TabsTrigger, TabsContent } from "@saasflare/ui";
*
*
* Overview
* Settings
*
* ...
* ...
*
*/
import * as React from "react";
import { type VariantProps } from "class-variance-authority";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { type SaasflareComponentProps } from "../../providers";
/**
* Props for {@link Tabs}. Extends {@link SaasflareComponentProps} so
* `surface`, `radius`, `animated`, and `iconWeight` can be supplied
* per-instance or inherited from the provider.
*/
interface TabsProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Tabbed navigation root built on Radix Tabs, with an animated indicator that
* tracks the active trigger. Owns the active value and orientation; compose
* with {@link TabsList}, {@link TabsTrigger}, and {@link TabsContent}.
*
* @component
* @layer core
*/
declare function Tabs({ className, orientation, surface, radius, animated, iconWeight, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
/**
* Variant classes for {@link TabsList} — `default` (filled muted track) vs
* `line` (transparent, underline-style); consumed by `TabsList` and exported
* for class reuse.
*/
declare const tabsListVariants: (props?: ({
variant?: "line" | "default" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
* Props for {@link TabsList}. `variant` selects the track style
* (`"default"` filled vs `"line"` transparent).
*/
interface TabsListProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps, VariantProps {
}
/**
* Container for tab triggers. Renders the single animated active-tab
* indicator that follows the active trigger via measured position.
*
* @component
* @layer core
*/
declare function TabsList({ className, variant, children, surface, radius, animated, iconWeight, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
/**
* Tab trigger. The active-tab indicator is rendered once at the
* `TabsList` level and animates between triggers via measured position;
* triggers themselves only own their content + state styling.
*
* @component
* @layer core
*/
interface TabsTriggerProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Tab trigger button that activates its associated {@link TabsContent} panel.
*
* @component
* @layer core
*/
declare function TabsTrigger({ className, children, surface, radius, animated, iconWeight, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
/**
* Props for {@link TabsContent}.
*/
interface TabsContentProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps {
}
/**
* Panel shown when its `value` matches the active tab.
*
* @component
* @layer core
*/
declare function TabsContent({ className, surface, radius, animated, iconWeight, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants, type TabsProps, type TabsListProps, type TabsTriggerProps, type TabsContentProps, };