@kitn.ai/ui/dist/ui/tabs.d.ts

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import { JSX } from 'solid-js';
/** One tab in a `Tabs` strip. `id` is the selected `value` throughout. */
export interface KaiTabItem {
    /** Stable id, emitted as the selected `value`. Also useful for `aria-controls`. */
    id: string;
    label?: string;
    /** Named icon (e.g. "code"), image URL / data-URI, or plain text. */
    icon?: string;
    disabled?: boolean;
}
export type TabsVariant = 'segmented' | 'underline';
/** variant → tablist container utilities. */
export declare const TABLIST_CLASS: Record<TabsVariant, string>;
/** variant → per-tab utilities, given whether the tab is active. */
export declare function tabClass(variant: TabsVariant, active: boolean): string;
export interface TabsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'onChange'> {
    items?: KaiTabItem[];
    /** Selected item id. */
    value?: string;
    variant?: TabsVariant;
    /** Stretch the strip to full width, each tab sharing the space equally. */
    block?: boolean;
    /** Disable the whole strip. */
    disabled?: boolean;
    /** Fired with the newly-selected item's id. */
    onChange?: (value: string) => void;
    /** Capture the tablist node (so the facade's `focus()` can target the active tab). */
    ref?: (el: HTMLDivElement) => void;
}
/**
 * Accessible tab strip. Selection only (emits the selected id via `onChange`);
 * the consumer renders each tab's content. Roving tabindex, Arrow/Home/End
 * keyboard nav, disabled items skipped.
 */
export declare function Tabs(props: TabsProps): JSX.Element;