analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
56 lines • 1.91 kB
TypeScript
import { ButtonHTMLAttributes } from 'react';
/**
* ToggleSwitch size variants
*/
type ToggleSwitchSize = 'small' | 'medium' | 'large';
/**
* ToggleSwitch component props interface
*/
export type ToggleSwitchProps = {
/** Whether the toggle is checked */
checked?: boolean;
/** Callback when toggle state changes */
onChange?: () => void;
/** Size variant of the toggle switch */
size?: ToggleSwitchSize;
/** Whether the toggle switch is disabled */
disabled?: boolean;
/** Additional CSS classes for the track */
className?: string;
/** Additional CSS classes for the thumb */
thumbClassName?: string;
/** Color when checked (Tailwind class, e.g., 'bg-success-500') */
checkedColor?: string;
/** Color when unchecked (Tailwind class, e.g., 'bg-border-300') */
uncheckedColor?: string;
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'type' | 'onChange'>;
/**
* ToggleSwitch component for Analytica Ensino platforms
*
* A toggle switch component with support for different sizes and colors.
* Uses the Button component with variant="raw" for clean rendering.
*
* @example
* ```tsx
* // Basic toggle switch
* <ToggleSwitch checked={isActive} onChange={() => setIsActive(!isActive)} />
*
* // Different sizes
* <ToggleSwitch size="small" checked={value} onChange={toggle} />
* <ToggleSwitch size="large" checked={value} onChange={toggle} />
*
* // Custom colors
* <ToggleSwitch
* checked={isEnabled}
* onChange={toggle}
* checkedColor="bg-primary-950"
* uncheckedColor="bg-border-400"
* />
* ```
*/
declare const ToggleSwitch: {
({ checked, onChange, size, disabled, className, thumbClassName, checkedColor, uncheckedColor, ...props }: ToggleSwitchProps): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
export default ToggleSwitch;
//# sourceMappingURL=ToggleSwitch.d.ts.map