import type { ControlSize } from "@charcuterie/tokens";
import type { ReactNode } from "react";
export type SwitchProps = {
    className?: string;
    /**
     * **Initial** only. The `Switch` owns it from then on — the same
     * uncontrolled contract as `Checkbox` and `SegmentedControl`, so
     * `onChange` reports the new state and there is no controlled
     * `checked` prop to keep in step.
     */
    isChecked?: boolean;
    isDisabled?: boolean;
    /**
     * Shows the state at full contrast but refuses to flip it — a
     * setting you may read here and change elsewhere. Unlike
     * `isDisabled` it does not dim, and it announces `aria-readonly`.
     */
    isReadOnly?: boolean;
    /** The visible text, and the switch's accessible name. */
    label: ReactNode;
    onChange?: (isChecked: boolean) => void;
    size?: ControlSize;
};
/**
 * A boolean that takes effect the moment it is flipped — a setting,
 * not a form value.
 *
 * A `Checkbox` and a `Switch` are the same state kind and a
 * different affordance, and the split is meaning rather than looks:
 * a checkbox is a value you submit ("I agree"), a switch is a state
 * you toggle and live with immediately ("dark mode on"). ARIA gives
 * the second its own role, and a screen reader announces "on/off"
 * for a `switch` where it announces "checked/unchecked" for a
 * checkbox.
 *
 * ### A `button role="switch"`, not an `input`
 *
 * The sliding track and thumb are the whole point of the affordance,
 * and a `<button>` styles them without fighting a native control's
 * own rendering. It carries `aria-checked`, `aria-labelledby`, and
 * nothing else the browser would try to own. The value lives in
 * React state seeded once from `isChecked` — the switch is the
 * store, the same as the DOM is for `Checkbox`.
 *
 * ### The thumb is one colour, the track carries the state
 *
 * `bg-surface-raised` in both positions — the knob is the same object
 * sliding, not two differently-painted dots, which is what the first
 * cut looked like when off was `content-secondary` and on was
 * `on-solid`. A themed system has no single colour that is "light" in
 * both schemes, so consistency lives *within* a scheme: `surface-raised`
 * is a white knob in a light one and a raised charcoal knob in a dark
 * one, off and on identical either way. The **track** shows the state —
 * `bg-intent-accent-solid` on, `bg-surface-sunken` with a `ring-2`
 * outline off — which is where a switch's state belongs, and the ring
 * gives the off track the defined edge a bare well would miss on a pale
 * theme.
 */
export declare const Switch: ({ className, isChecked, isDisabled, isReadOnly, label, onChange, size, }: SwitchProps) => ReactNode;
//# sourceMappingURL=Switch.d.ts.map