@payfit/unity-components
Version:
99 lines (98 loc) • 3.02 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { SwitchFieldProps as AriaSwitchFieldProps } from 'react-aria-components/Switch';
export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
isDisabled: {
false: {
indicator: string[];
knob: string[];
};
true: {
indicator: string;
knob: string;
};
};
}, {
container: string[];
mobileContainer: string[];
textWrapper: string[];
label: string[];
hintText: string[];
indicator: string[];
knob: string[];
}, undefined, {
isDisabled: {
false: {
indicator: string[];
knob: string[];
};
true: {
indicator: string;
knob: string;
};
};
}, {
container: string[];
mobileContainer: string[];
textWrapper: string[];
label: string[];
hintText: string[];
indicator: string[];
knob: string[];
}, import('tailwind-variants').TVReturnType<{
isDisabled: {
false: {
indicator: string[];
knob: string[];
};
true: {
indicator: string;
knob: string;
};
};
}, {
container: string[];
mobileContainer: string[];
textWrapper: string[];
label: string[];
hintText: string[];
indicator: string[];
knob: string[];
}, undefined, unknown, unknown, undefined>>;
export interface ToggleSwitchProps extends Omit<AriaSwitchFieldProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
/** The label for the toggle switch. */
label: string;
/** Whether the label is visually hidden and accessible only to screen readers. */
isLabelSrOnly?: boolean;
/** A helper text to display below the toggle switch's label. */
helperText?: string;
}
/**
* Binary toggle input with Unity styles and animation.
*
* The `ToggleSwitch` lets users toggle between two states. It provides a sliding
* knob animation and supports disabled, readonly and pressed states. Use it as a
* standalone input, or within a composed field such as `ToggleSwitchField`.
*
* Accessibility:
* - Renders with the ARIA `switch` role.
* - Always requires a visible label unless `isLabelSrOnly` is set, in which case
* the label is visually hidden but remains available to assistive tech.
* @param props Props for the ToggleSwitch component.
* @example
* ```tsx
* import { ToggleSwitch } from '@payfit/unity-components'
*
* export function Example() {
* return (
* <ToggleSwitch
* label="Enable notifications"
* helperText="Receive updates about your account"
* />
* )
* }
* ```
* @see {@link ToggleSwitchProps}
* @remarks
* Docs: /?path=/docs/inputs-toggleswitch--docs • Story: /?path=/story/inputs-toggleswitch--primary
*/
export declare const ToggleSwitch: import('react').ForwardRefExoticComponent<ToggleSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;