import type { StoryObj } from '@storybook/vue3-vite';
declare const meta: {
    title: string;
    component: any;
    tags: string[];
    argTypes: {
        label: {
            control: "text";
            description: string;
        };
        labelPosition: {
            control: {
                type: "inline-radio";
            };
            options: string[];
            description: string;
        };
        disabled: {
            control: "boolean";
            description: string;
        };
        modelValue: {
            control: "boolean";
            description: string;
        };
        value: {
            control: "boolean";
            description: string;
        };
        id: {
            control: "text";
            description: string;
        };
    };
    args: {
        labelPosition: string;
        disabled: boolean;
    };
    parameters: {
        docs: {
            description: {
                component: string;
            };
        };
    };
};
export default meta;
type Story = StoryObj<typeof meta>;
/**
 * Interactive playground — tweak any prop via the **Controls** panel below to see how it
 * affects rendering. The switch is bound to a local `ref` so toggling persists during the
 * story session.
 */
export declare const Playground: Story;
/**
 * The most common shape: text label to the right of the switch. The label is rendered as
 * a real `<label for>` element, so clicking the text toggles the switch — no `for`
 * attribute juggling required.
 */
export declare const WithLabel: Story;
/**
 * `labelPosition="left"` swaps the order. Use this in settings panels where labels are
 * aligned to the right edge of the container — the switch ends up at the far right,
 * matching the visual rhythm of right-aligned form rows.
 */
export declare const LabelLeft: Story;
/**
 * Disabled in the off state. Both the native `disabled` attribute and `aria-disabled="true"`
 * are applied — most browsers' built-in handling covers screen readers, but the explicit
 * ARIA attribute is there for assistive tech that polls it. Visually the whole control
 * fades via `opacity: var(--opacity-disabled)` and loses its hover/press affordances.
 */
export declare const Disabled: Story;
/**
 * Disabled in the on state — for showing a setting that's enforced/locked by an admin or
 * by an upstream constraint. The brand color still appears (the user shouldn't lose the
 * affordance that this represents an "on" state), but interaction is blocked.
 */
export declare const DisabledChecked: Story;
/**
 * Bare switch — no label rendered. Use this when the surrounding UI already provides the
 * accessible name (e.g. inside a table cell where the column header acts as the label).
 *
 * If you go this route, **always** supply an accessible name via `aria-label` or
 * `aria-labelledby` (passed through as native HTML attributes). A switch with no
 * accessible name is an accessibility failure.
 */
export declare const NoLabel: Story;
/**
 * Verifies the click + keyboard contract end-to-end via a Storybook `play` function
 * (runs in a real browser, doubles as a Chromatic baseline for the intermediate states).
 *
 * The flow:
 *
 * 1. Initial render → `aria-checked="false"`.
 * 2. Mouse click → toggles to `true`.
 * 3. Mouse click again → toggles back to `false`.
 * 4. Focus the switch and press `Space` → toggles to `true`.
 * 5. Press `Enter` → toggles back to `false`.
 *
 * If you migrate this component or change its keyboard handling, this story will fail and
 * tell you exactly which interaction broke.
 */
export declare const KeyboardInteraction: Story;
/**
 * Three identical `<TSwitch>` instances inside three different `<TThemeProvider>` wrappers,
 * each with a different tenant brand color. This demonstrates the runtime tenant theming
 * pipeline end-to-end:
 *
 * 1. Each `<TThemeProvider>` receives `{ colors: { brand: { base: '#...' } } }`.
 * 2. `createTheme()` regenerates the 12-step brand ramp (+ 12-step alpha ramp) from the seed hex.
 * 3. The provider applies `class="toku-theme"` to its root `<div>` and sets the brand
 *    primitives as inline CSS custom properties (`--color-brand-1..12`, `--color-brand-a-1..12`).
 * 4. Because `toku-ui/tokens.css` emits every token declaration under the `:root, .toku-theme`
 *    selector, the semantic aliases (`--color-bg-primary-default: var(--color-brand-9)`)
 *    re-resolve at the provider's scope using the local primitive overrides.
 * 5. The switch reads `var(--color-bg-primary-default)` — which now resolves to the
 *    tenant's exact hex.
 *
 * The whole flip happens via CSS-variable cascade with **zero Vue re-renders**. Useful for
 * multi-tenant white-label apps (e.g. `client-payment-portal-frontend`) where each
 * organization sees their own brand color applied across the entire UI without touching
 * component code.
 */
export declare const RuntimeTheming: Story;
//# sourceMappingURL=TSwitch.stories.d.ts.map