@lax-wp/design-system/dist/components/navigation/tabs/Tabs.d.ts

A comprehensive React + TypeScript design system built with Vite, providing reusable UI components for the LAX web portal applications. Features a complete set of form components, data display elements, and interactive controls with full TypeScript suppor

import type { CommonContextProps, SetTabSettingsAction, TabSettingSelector, TabUtilServices, TBaseTabProps, TPassedProps, TSuffixRecord } from './types';
import type { TNavigationUtils } from '../tab-switch/types';
import type { ReactNode, ComponentType } from 'react';
import type { OptionButtonProps } from '../../buttons/option-button/OptionButton';
/**
 * Components that need to be provided from the consuming application
 */
export interface TabsExternalComponents {
    /** SearchBar component */
    SearchBar: ComponentType<{
        id: string;
        value: string;
        classValues?: string;
        onChange: (value: string) => void;
    }>;
    /** OptionButton component */
    OptionButton: ComponentType<OptionButtonProps & {
        suffixRecord?: TSuffixRecord;
        highlight?: string;
        truncateText?: boolean;
    }>;
    /** Tooltip component */
    Tooltip: ComponentType<{
        title: string;
        color?: string;
        children: ReactNode;
    }>;
    /** Icons */
    icons: {
        MoreVerticalIcon: ComponentType<{
            size?: number;
            className?: string;
        }>;
        PinIcon: ComponentType<{
            fill?: string;
            height?: number;
            width?: number;
        }>;
        UnpinIcon: ComponentType<any>;
        FiArrowDown: ComponentType<{
            size?: number;
            className?: string;
        }>;
        FiArrowUp: ComponentType<{
            size?: number;
            className?: string;
        }>;
        FiArrowUpRight: ComponentType<{
            size?: number;
            className?: string;
        }>;
        MdContentCopy: ComponentType<{
            size?: number;
            className?: string;
        }>;
        RemoveRedEyeRounded: ComponentType<{
            sx?: any;
        }>;
        EditIcon: ComponentType<any>;
        Trash: ComponentType<{
            size?: number;
            fill?: string;
        }>;
    };
}
/**
 * Props for the Tabs component
 */
export type TabsProps<T extends string> = TBaseTabProps<T> & TPassedProps & {
    /** Unique key for storing tab settings */
    tabKey?: string;
    /** Show all items without overflow handling */
    showAllItems?: boolean;
    /** Enable copy link functionality */
    copyLink?: boolean;
    /** Disable tab animations */
    disableAnimation?: boolean;
    /** Container element ID for portals */
    parentContainer?: string;
    /** Fit content width */
    fitContentWidth?: boolean;
    /** Height class for switch variant */
    height?: string;
    /** Callback when tab is deleted */
    onDelete?: (name: T) => void;
    /** Callback when tab is edited */
    onEdit?: (name: T) => void;
    /** Allow pinning tabs */
    allowPin?: boolean;
    /** Sort tabs alphabetically */
    sortAlphabetically?: boolean;
    /** Right section configuration */
    rightSection?: {
        className?: string;
        width: number;
        component: React.ReactNode;
    };
    /** Color theme */
    color?: string;
    /** Context props from CommonContext */
    contextProps?: CommonContextProps;
    /** Redux selector for tab settings */
    selectTabSetting?: TabSettingSelector;
    /** Redux action to set tab settings */
    setTabSettingsAction?: SetTabSettingsAction;
    /** Utility services for API calls */
    utilServices?: TabUtilServices;
    /** Dispatch function from Redux */
    dispatch?: (action: any) => void;
    /** System messages utility */
    systemMessages?: {
        copyToClipboard: (text: string) => string;
    };
    /** Number formatting utility */
    formatNumber?: (value: number, locale: string, decimals: number, useGrouping: boolean) => string;
    /** Random hex string generator */
    randomHexString?: (length: number) => string;
    /** Event listener hook */
    useEventListener?: (event: string, handler: () => void) => void;
    /** External components required by Tabs */
    components: TabsExternalComponents;
    /** Navigation utilities (searchParams, navigate, LinkComponent) - optional, only needed if using linkConfig */
    navigationUtils?: TNavigationUtils;
};
/**
 * Tabs Component
 *
 * A comprehensive tab navigation component with drag-and-drop, pinning, hiding,
 * and overflow handling capabilities.
 *
 * Features:
 * - Multiple variants: default, secondary, switch
 * - Drag and drop reordering
 * - Tab pinning
 * - Tab hiding/showing
 * - Overflow handling with "More" dropdown
 * - Responsive design
 * - Suffix badges
 * - Custom icons
 *
 * @example
 * ```tsx
 * <Tabs
 *   tabs={['Tab 1', 'Tab 2', 'Tab 3']}
 *   activeTab="Tab 1"
 *   onTabClick={(tab) => console.log(tab)}
 *   variant="default"
 *   draggable={true}
 *   components={{
 *     SearchBar,
 *     OptionButton,
 *     Tooltip,
 *     icons: { ... }
 *   }}
 * />
 * ```
 */
export declare const Tabs: <T extends string>({ variant, linkConfig, tabs, activeTab, onTabClick, suffixRecord, isLoading, size, className, draggable, tabKey, parentContainer, showAllItems, copyLink, isDisabled, color, iconsOnly, tabIcons, height, fullWidth, fitContentWidth, onDelete, onEdit, allowPin, sortAlphabetically, rightSection, contextProps, selectTabSetting, setTabSettingsAction, utilServices, dispatch, systemMessages, formatNumber, randomHexString, useEventListener, components, navigationUtils, }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;