react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
47 lines (46 loc) • 1.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import './Toggle.scss';
export const Toggle = forwardRef(({ checked, defaultChecked, onChange, disabled = false, label, labelPosition = 'right', size = 'md', variant = 'primary', id, name, className = '', }, ref) => {
const handleChange = (event) => {
if (onChange) {
onChange(event.target.checked);
}
};
// Create input props object
const inputProps = {
type: 'checkbox',
disabled,
onChange: handleChange,
};
// Add id if provided
if (id) {
inputProps.id = id;
}
// Add name if provided
if (name) {
inputProps.name = name;
}
// Only add checked or defaultChecked, not both
if (checked !== undefined) {
inputProps.checked = checked;
}
else if (defaultChecked !== undefined) {
inputProps.defaultChecked = defaultChecked;
}
const sizeClasses = {
sm: 'toggle-sm',
md: 'toggle-md',
lg: 'toggle-lg'
};
const toggleClasses = [
'toggle',
sizeClasses[size],
`toggle--${variant}`,
labelPosition === 'left' ? 'toggle--label-left' : 'toggle--label-right',
disabled ? 'toggle--disabled' : '',
className
].filter(Boolean).join(' ');
return (_jsxs("div", { className: toggleClasses, children: [_jsx("input", { ref: ref, ...inputProps }), _jsx("div", { className: "toggle__track", children: _jsx("div", { className: "toggle__thumb" }) }), label && _jsx("label", { htmlFor: id, children: label })] }));
});
Toggle.displayName = 'Toggle';