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.
50 lines (49 loc) • 1.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { forwardRef } from 'react';
import './Checkbox.scss';
import { Icon } from '../Icon';
export const Checkbox = forwardRef(({ checked, defaultChecked, onChange, disabled = false, label, labelPosition = 'right', size = 'md', variant = 'primary', id, name, className = '', indeterminate = false, }, ref) => {
const handleChange = (event) => {
if (onChange) {
onChange(event.target.checked);
}
};
// Create input props object
const inputProps = {
ref,
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: 'checkbox-sm',
md: 'checkbox-md',
lg: 'checkbox-lg'
};
const checkboxClasses = [
'checkbox',
sizeClasses[size],
`checkbox--${variant}`,
labelPosition === 'left' ? 'checkbox--label-left' : 'checkbox--label-right',
disabled ? 'checkbox--disabled' : '',
indeterminate ? 'checkbox--indeterminate' : '',
className
].filter(Boolean).join(' ');
return (_jsxs("div", { className: checkboxClasses, children: [_jsx("input", { ...inputProps }), _jsx("div", { className: "checkbox__box", children: _jsx(Icon, { name: "check" }) }), label && _jsx("label", { htmlFor: id, children: label })] }));
});
Checkbox.displayName = 'Checkbox';