@loke/design-system
Version:
A design system with individually importable components
43 lines (42 loc) • 2.52 kB
text/typescript
import type { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "@loke/ui/tabs";
declare const createTabsScope: import("@loke/ui/context").CreateScope;
/**
* Tabs component for organizing content into multiple tabs
*
* The Tabs component provides a way to organize and display content in separate, selectable tabs. It's designed to be flexible and customizable, supporting various tab structures and styles.
*
* Key features:
* - Accessible, using appropriate ARIA roles and attributes
* - Customizable appearance through className props
* - Support for keyboard navigation
* - Active tab highlighting
* - Flexible content organization
*
* Usage considerations:
* - Use for grouping related content that can be viewed independently
* - Ensure tab labels are clear and concise
* - Consider the number of tabs and available space in your layout
* - Provide clear visual indication of the active tab
* - Use Tabs.List for the container of tab triggers and Tabs.Content for tab content
*/
declare const Tabs: import("react").ForwardRefExoticComponent<Omit<TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/**
* TabsList component for the list of tab triggers
*
* This component serves as a container for the tab triggers, providing a consistent layout and styling for the tab headers.
*/
declare const TabsList: import("react").ForwardRefExoticComponent<Omit<TabsListProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
/**
* TabsTrigger component for individual tab triggers
*
* This component represents a single tab header. It handles the selection state and provides visual feedback for the active tab.
*/
declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
/**
* TabsContent component for the content of individual tabs
*
* This component contains the content for a specific tab. It's displayed when its corresponding Tabs.Trigger is selected.
*/
declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
export { Tabs, TabsContent, TabsList, TabsTrigger, createTabsScope };
export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };