@vertisanpro/flowbite-react/lib/src/components/ToggleSwitch/ToggleSwitch.js

Non-Official React components built for Flowbite and Tailwind CSS

import { twMerge } from '@vertisanpro/tailwind-merge';
import { nanoid } from 'nanoid';
import React, { useMemo } from 'react';
import { mergeDeep } from '../../helpers/merge-deep';
import { getTheme } from '../../theme-store';
export const ToggleSwitch = ({ checked, className, color = 'blue', sizing = 'md', disabled, label, name, onChange, theme: customTheme = {}, ...props }) => {
    const id = useMemo(() => nanoid(), []);
    const theme = mergeDeep(getTheme().toggleSwitch, customTheme);
    const toggle = () => onChange(!checked);
    const handleClick = () => {
        toggle();
    };
    const handleOnKeyDown = (event) => {
        if (event.key == 'Enter') {
            event.preventDefault();
        }
    };
    return (React.createElement(React.Fragment, null,
        name && checked ? (React.createElement("input", { checked: checked, hidden: true, name: name, readOnly: true, type: "checkbox", className: "sr-only" })) : null,
        React.createElement("button", { "aria-checked": checked, "aria-labelledby": `${id}-flowbite-toggleswitch-label`, disabled: disabled, id: `${id}-flowbite-toggleswitch`, onClick: handleClick, onKeyDown: handleOnKeyDown, role: "switch", tabIndex: 0, type: "button", className: twMerge(theme.root.base, theme.root.active[disabled ? 'off' : 'on'], className), ...props },
            React.createElement("div", { "data-testid": "flowbite-toggleswitch-toggle", className: twMerge(theme.toggle.base, theme.toggle.checked[checked ? 'on' : 'off'], checked && theme.toggle.checked.color[color], theme.toggle.sizes[sizing]) }),
            label?.length ? (React.createElement("span", { "data-testid": "flowbite-toggleswitch-label", id: `${id}-flowbite-toggleswitch-label`, className: theme.root.label }, label)) : null)));
};
ToggleSwitch.displayName = 'ToggleSwitch';