@neuctra/ui/dist/types/components/basic/Tabs.d.ts

A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.

import { default as React, ReactNode, CSSProperties } from 'react';
type Position = "top" | "bottom" | "left" | "right";
type Variant = "solid" | "outline" | "underline" | "pill";
/**
 * mobileVariant — how <TabList> behaves on small screens:
 *  "drawer"   → collapses into an animated dropdown (hamburger-style)
 *  "scroll"   → horizontal scrollable strip with snap (default)
 *  "stack"    → forced full-width vertical column
 *  "collapse" → left/right positions collapse to top row
 */
type MobileVariant = "drawer" | "scroll" | "stack" | "collapse";
export interface TabsProps {
    children: ReactNode;
    defaultActive?: number;
    position?: Position;
    variant?: Variant;
    fullWidth?: boolean;
    radius?: number;
    transitionDuration?: number;
    bordered?: boolean;
    /** Responsive */
    mobileBreakpoint?: number;
    mobileVariant?: MobileVariant;
    /** Colors */
    primaryColor?: string;
    activeColor?: string;
    textColor?: string;
    hoverColor?: string;
    borderColor?: string;
    disabledColor?: string;
    backgroundColor?: string;
    onTabChange?: (index: number) => void;
    tabCount?: number;
    style?: CSSProperties;
    className?: string;
}
export declare const Tabs: React.FC<TabsProps>;
export interface TabListProps {
    children: ReactNode;
    gap?: number;
    /** Label shown in drawer trigger when no tab is active (fallback) */
    drawerLabel?: ReactNode;
    /** Icon for the drawer chevron area */
    drawerIcon?: ReactNode;
    style?: CSSProperties;
    className?: string;
    /** The drawer trigger `<button>` (mobileVariant="drawer" only). */
    triggerClassName?: string;
    /** The dropdown menu panel (mobileVariant="drawer" only). */
    menuClassName?: string;
}
export declare const TabList: React.FC<TabListProps>;
export interface TabProps {
    children: ReactNode;
    index?: number;
    icon?: ReactNode;
    disabled?: boolean;
    ariaLabel?: string;
    style?: CSSProperties;
    className?: string;
    activeStyle?: CSSProperties;
    inactiveStyle?: CSSProperties;
    /** Wraps the `icon` node. */
    iconClassName?: string;
}
export declare const Tab: React.FC<TabProps>;
export interface TabPanelsProps {
    children: ReactNode;
    style?: CSSProperties;
    className?: string;
}
export declare const TabPanels: React.FC<TabPanelsProps>;
export interface TabPanelProps {
    children: ReactNode;
    index: number;
    keepMounted?: boolean;
    style?: CSSProperties;
    className?: string;
}
export declare const TabPanel: React.FC<TabPanelProps>;
export {};