@pagamio/frontend-commons-lib/lib/components/ui/Switch.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { ToggleSwitch } from 'flowbite-react';
// Custom theme configuration
const customTheme = {
    root: {
        base: 'relative inline-flex h-6 w-11 items-center rounded-full',
    },
    toggle: {
        base: clsx('h-6 w-11 rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25', 'transition-colors duration-200 relative', 
        // Thumb styles using before: pseudo-element
        'before:content-[""] before:absolute before:h-5 before:w-5 before:rounded-full', 'before:bg-white before:transition-transform before:duration-200', 'before:start-0.5 before:top-[0.07rem]'),
        checked: {
            on: clsx('bg-primary-500 border-primary-500', 'before:translate-x-5 rtl:before:-translate-x-5'),
            off: 'border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700',
        },
    },
};
const Switch = ({ id = 'switch-component', checked, onChange, label, disabled, className, ...props }) => {
    return (_jsxs("div", { className: `flex items-center justify-between gap-2 ${className}`, children: [_jsx(ToggleSwitch, { id: id, theme: customTheme, checked: checked, label: "", onChange: (e) => onChange && onChange(e), disabled: disabled, color: "primary", ...props }), label && _jsx("span", { className: "text-sm font-medium text-gray-900 dark:text-gray-300", children: label })] }));
};
export default Switch;