aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
125 lines • 2.97 kB
TypeScript
/**
* EnhancedGlassTabs Component
*
* High-contrast, accessibility-focused tab component for chart navigation
* with glass morphism styling.
*/
import React from "react";
/**
* TabItem interface
*/
export interface TabItem {
/**
* Unique ID for the tab
*/
id: string;
/**
* Display label for the tab
*/
label: string;
/**
* Optional badge count to display
*/
badgeCount?: number;
/**
* Whether the tab is disabled
*/
disabled?: boolean;
/**
* Optional icon component
*/
icon?: React.ReactNode;
}
/**
* EnhancedGlassTabs props interface
*/
export interface EnhancedGlassTabsProps {
/**
* Array of tab items
*/
tabs?: TabItem[];
/**
* Currently active tab ID
*/
activeTab?: string;
/**
* Callback when tab changes
*/
onChange?: (tabId: string) => void;
/**
* Visual variant of the tabs
*/
variant?: "default" | "elevated" | "outlined" | "text";
/**
* Size of the tabs
*/
size?: "small" | "medium" | "large";
/**
* Color scheme for the tabs
*/
color?: "primary" | "secondary" | "accent" | "light" | "dark";
/**
* Whether to use high contrast mode
*/
highContrast?: boolean;
/**
* Animation behavior of the indicator
*/
indicatorAnimation?: "slide" | "fade" | "none";
/**
* Whether to stretch tabs to fill width
*/
fullWidth?: boolean;
/**
* Default tab to select if none provided
*/
defaultTab?: string;
/**
* Whether to apply physics motion effects
*/
physicsEnabled?: boolean;
/**
* Whether to show the active indicator
*/
showIndicator?: boolean;
/**
* Text alignment within tabs
*/
textAlign?: "center" | "left" | "right";
/**
* Additional CSS class name
*/
className?: string;
/**
* Inline styles
*/
style?: React.CSSProperties;
/**
* Whether to respect motion preferences for animations
*/
respectMotionPreference?: boolean;
/**
* Accessible label for the tabs
*/
"aria-label"?: string;
/**
* Test ID for testing
*/
"data-testid"?: string;
}
export interface EnhancedGlassTabsRef {
/** Gets the main tabs container DOM element */
getContainerElement: () => HTMLDivElement | null;
/** Programmatically sets the active tab */
setActiveTab: (tabId: string) => void;
/** Gets the ID of the currently active tab */
getActiveTab: () => string;
/** Get the DOM element for a specific tab button */
getTabElement: (tabId: string) => HTMLButtonElement | null;
}
/**
* EnhancedGlassTabs Component
*/
export declare const EnhancedGlassTabs: React.ForwardRefExoticComponent<EnhancedGlassTabsProps & React.RefAttributes<EnhancedGlassTabsRef>>;
export default EnhancedGlassTabs;
//# sourceMappingURL=EnhancedGlassTabs.d.ts.map