claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
52 lines • 1.93 kB
TypeScript
type $$ComponentProps = {
variant?: 'default' | 'underlined' | 'pills';
size?: 'sm' | 'md' | 'lg';
orientation?: 'horizontal' | 'vertical';
activeTab?: string;
class?: string;
disabled?: boolean;
tabState?: string | undefined;
tabs?: import('svelte').Snippet;
children?: import('svelte').Snippet;
};
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
$$bindings?: Bindings;
} & Exports;
(internal: unknown, props: Props & {
$$events?: Events;
$$slots?: Slots;
}): Exports & {
$set?: any;
$on?: any;
};
z_$$bindings?: Bindings;
}
/**
* Tabs
*
* Navigation tabs component following WAI-ARIA tab pattern.
*
* @prop {string} [variant='default'] - Tab variant (default, underlined, pills)
* @prop {string} [size='md'] - Tab size (sm, md, lg)
* @prop {string} [orientation='horizontal'] - Tab orientation (horizontal, vertical)
* @prop {string} [activeTab] - Currently active tab ID
* @prop {string} [className] - Additional CSS classes
* @prop {boolean} [disabled=false] - Whether tabs are disabled
*
* @event {CustomEvent<{tabId: string, previousTabId: string}>} tab-change - Fired when active tab changes
*
* @slot default - Tab panels content
* @slot tabs - Tab buttons (use TabButton components)
*/
declare const Tabs: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
'tab-change': CustomEvent<{
tabId: string;
previousTabId: string;
}>;
} & {
[evt: string]: CustomEvent<any>;
}, {}, {}, "activeTab">;
type Tabs = InstanceType<typeof Tabs>;
export default Tabs;
//# sourceMappingURL=Tabs.svelte.d.ts.map