@accelint/design-toolkit
Version:
An open-source component library to serve as part of the entire ecosystem of UX for Accelint.
81 lines (78 loc) • 2.89 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { TabListProps, TabProps, TabPanelProps, ContextValue } from 'react-aria-components';
import { ProviderProps } from '../../lib/types.js';
import { TabsProps } from './types.js';
declare const TabsContext: react.Context<ContextValue<TabsProps, HTMLDivElement>>;
declare function TabsProvider({ children, ...props }: ProviderProps<TabsProps>): react_jsx_runtime.JSX.Element;
declare namespace TabsProvider {
var displayName: string;
}
declare function Tab({ children, className, ...rest }: TabProps): react_jsx_runtime.JSX.Element;
declare namespace Tab {
var displayName: string;
}
declare function TabList<T extends object>({ children, className, ...rest }: TabListProps<T>): react_jsx_runtime.JSX.Element;
declare namespace TabList {
var displayName: string;
}
declare function TabPanel({ children, className, ...rest }: TabPanelProps): react_jsx_runtime.JSX.Element;
declare namespace TabPanel {
var displayName: string;
}
/**
* Tabs - A tab navigation component for organizing content into sections
*
* Provides accessible tab navigation with keyboard support and proper ARIA implementation.
* Supports both horizontal and vertical orientations with icon and text variants.
* Perfect for organizing related content into separate, focusable sections.
*
* @example
* // Basic horizontal tabs
* <Tabs>
* <Tabs.List>
* <Tabs.List.Tab id="overview">Overview</Tabs.List.Tab>
* <Tabs.List.Tab id="details">Details</Tabs.List.Tab>
* <Tabs.List.Tab id="settings">Settings</Tabs.List.Tab>
* </Tabs.List>
* <Tabs.Panel id="overview">Overview content</Tabs.Panel>
* <Tabs.Panel id="details">Details content</Tabs.Panel>
* <Tabs.Panel id="settings">Settings content</Tabs.Panel>
* </Tabs>
*
* @example
* // Vertical tabs
* <Tabs orientation="vertical">
* <Tabs.List>
* <Tabs.List.Tab id="profile">Profile</Tabs.List.Tab>
* <Tabs.List.Tab id="account">Account</Tabs.List.Tab>
* </Tabs.List>
* <Tabs.Panel id="profile">Profile settings</Tabs.Panel>
* <Tabs.Panel id="account">Account settings</Tabs.Panel>
* </Tabs>
*
* @example
* // Icon tabs
* <Tabs>
* <Tabs.List variant="icons">
* <Tabs.List.Tab id="home">
* <Icon><Home /></Icon>
* </Tabs.List.Tab>
* <Tabs.List.Tab id="search">
* <Icon><Search /></Icon>
* </Tabs.List.Tab>
* </Tabs.List>
* <Tabs.Panel id="home">Home content</Tabs.Panel>
* <Tabs.Panel id="search">Search content</Tabs.Panel>
* </Tabs>
*/
declare function Tabs({ ref, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
declare namespace Tabs {
var displayName: string;
var Provider: typeof TabsProvider;
var List: typeof TabList & {
Tab: typeof Tab;
};
var Panel: typeof TabPanel;
}
export { Tabs, TabsContext };