/** * @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, };