tharikida-ui/dist/components/Navigation/Tabs.d.ts

A modern, lightweight React UI component library with built-in theming, accessibility, and full TypeScript support. Create beautiful, responsive, and customizable web apps faster with ready-to-use components for any project.

import React from "react";
export interface TabItem {
    label: string;
    key: string;
    icon?: React.ReactNode;
    disabled?: boolean;
}
/**
 * `Tabs` is a tab navigation component supporting icons, extra content, theming, and custom styles.
 *
 * @param {object} props - The properties to customize the `Tabs` component.
 * @param {TabItem[]} props.items - Array of tab items with label, key, optional icon, and disabled state.
 * @param {string} props.activeKey - The key of the currently active tab.
 * @param {(key: string) => void} props.onChange - Callback when a tab is selected.
 * @param {React.CSSProperties} [props.styles] - Custom styles for the tabs container.
 * @param {string} [props.className] - Additional className for the tabs container.
 * @param {React.ReactNode} [props.tabBarExtraContent] - Extra content to display at the end of the tab bar.
 * @param {string} [props.primaryColor] - Primary color for active tab and border.
 * @param {string} [props.secondaryColor] - Secondary color for active tab underline.
 * @param {string} [props.textColor] - Text color for active tab.
 * @param {string} [props.backgroundColor] - Background color for the tabs container.
 * @param {string} [props.borderColor] - Border color for the tab bar.
 * @param {string} [props.borderWidth] - Border width for the tab bar.
 * @param {string} [props.borderStyle] - Border style for the tab bar.
 * @param {number} [props.cornerRadius] - Border radius for the tab buttons.
 * @param {string} [props.fontFamily] - Font family for the tabs.
 * @param {number} [props.fontSize] - Font size for the tabs.
 * @param {string} [props.fontWeight] - Font weight for the tabs.
 * @param {string} [props.transitionDuration] - Transition duration for the tabs.
 * @param {number} [props.spacingfactor] - Spacing factor for the tabs.
 * @param {string} [props.hoverColor] - Hover color for tab buttons.
 *
 * @returns {JSX.Element} A styled tab navigation component.
 */
export interface TabsProps {
    items: TabItem[];
    activeKey: string;
    onChange: (key: string) => void;
    styles?: React.CSSProperties;
    className?: string;
    tabBarExtraContent?: React.ReactNode;
    primaryColor?: string;
    secondaryColor?: string;
    textColor?: string;
    backgroundColor?: string;
    borderColor?: string;
    borderWidth?: string;
    borderStyle?: string;
    cornerRadius?: number;
    fontFamily?: string;
    fontSize?: number;
    fontWeight?: string;
    transitionDuration?: string;
    spacingfactor?: number;
    hoverColor?: string;
}
declare const Tabs: ({ items, activeKey, onChange, styles, className, tabBarExtraContent, primaryColor, secondaryColor, textColor, backgroundColor, borderColor, borderWidth, borderStyle, cornerRadius, fontFamily, fontSize, fontWeight, transitionDuration, spacingfactor, hoverColor, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
export default Tabs;