bits-ui
Version:
The headless components for Svelte.
104 lines (103 loc) • 3.96 kB
TypeScript
import { SvelteMap } from "svelte/reactivity";
import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
import type { TabsActivationMode } from "./types.js";
import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
import type { Orientation } from "../../shared/index.js";
import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
interface TabsRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
orientation: Orientation;
loop: boolean;
activationMode: TabsActivationMode;
disabled: boolean;
}>, WritableBoxedValues<{
value: string;
}> {
}
export declare class TabsRootState {
static create(opts: TabsRootStateOpts): TabsRootState;
readonly opts: TabsRootStateOpts;
readonly attachment: RefAttachment;
readonly rovingFocusGroup: RovingFocusGroup;
triggerIds: string[];
readonly valueToTriggerId: SvelteMap<string, string>;
readonly valueToContentId: SvelteMap<string, string>;
constructor(opts: TabsRootStateOpts);
registerTrigger(id: string, value: string): () => void;
registerContent(id: string, value: string): () => void;
setValue(v: string): void;
readonly props: {
readonly id: string;
readonly "data-orientation": "horizontal" | "vertical";
};
}
interface TabsListStateOpts extends WithRefOpts {
}
export declare class TabsListState {
#private;
static create(opts: TabsListStateOpts): TabsListState;
readonly opts: TabsListStateOpts;
readonly root: TabsRootState;
readonly attachment: RefAttachment;
constructor(opts: TabsListStateOpts, root: TabsRootState);
readonly props: {
readonly id: string;
readonly role: "tablist";
readonly "aria-orientation": "horizontal" | "vertical";
readonly "data-orientation": "horizontal" | "vertical";
readonly "data-disabled": "" | undefined;
};
}
interface TabsTriggerStateOpts extends WithRefOpts, ReadableBoxedValues<{
value: string;
disabled: boolean;
}> {
}
export declare class TabsTriggerState {
#private;
static create(opts: TabsTriggerStateOpts): TabsTriggerState;
readonly opts: TabsTriggerStateOpts;
readonly root: TabsRootState;
readonly attachment: RefAttachment;
constructor(opts: TabsTriggerStateOpts, root: TabsRootState);
onfocus(_: BitsFocusEvent): void;
onclick(_: BitsMouseEvent): void;
onkeydown(e: BitsKeyboardEvent): void;
readonly props: {
readonly id: string;
readonly role: "tab";
readonly "data-state": "active" | "inactive";
readonly "data-value": string;
readonly "data-orientation": "horizontal" | "vertical";
readonly "data-disabled": "" | undefined;
readonly "aria-selected": "true" | "false";
readonly "aria-controls": string | undefined;
readonly disabled: true | undefined;
readonly tabindex: number;
readonly onclick: (_: BitsMouseEvent) => void;
readonly onfocus: (_: BitsFocusEvent) => void;
readonly onkeydown: (e: BitsKeyboardEvent) => void;
};
}
interface TabsContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
value: string;
}> {
}
export declare class TabsContentState {
#private;
static create(opts: TabsContentStateOpts): TabsContentState;
readonly opts: TabsContentStateOpts;
readonly root: TabsRootState;
readonly attachment: RefAttachment;
constructor(opts: TabsContentStateOpts, root: TabsRootState);
readonly props: {
readonly id: string;
readonly role: "tabpanel";
readonly hidden: true | undefined;
readonly tabindex: 0;
readonly "data-value": string;
readonly "data-state": "active" | "inactive";
readonly "aria-labelledby": string | undefined;
readonly "data-orientation": "horizontal" | "vertical";
};
}
export {};