33 lines
899 B
TypeScript
33 lines
899 B
TypeScript
import * as React from 'react';
|
|
import { cn } from '../../lib/utils';
|
|
|
|
export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
|
|
checked: boolean;
|
|
onCheckedChange?: (checked: boolean) => void;
|
|
}
|
|
|
|
export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
|
|
({ checked, className, disabled, onCheckedChange, ...props }, ref) => (
|
|
<button
|
|
aria-checked={checked}
|
|
className={cn('shSwitch', className)}
|
|
data-state={checked ? 'checked' : 'unchecked'}
|
|
disabled={disabled}
|
|
ref={ref}
|
|
role="switch"
|
|
{...props}
|
|
type="button"
|
|
onClick={(event) => {
|
|
props.onClick?.(event);
|
|
if (!event.defaultPrevented && !disabled) {
|
|
onCheckedChange?.(!checked);
|
|
}
|
|
}}
|
|
>
|
|
<span className="shSwitchThumb" />
|
|
</button>
|
|
),
|
|
);
|
|
|
|
Switch.displayName = 'Switch';
|