@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
35 lines (34 loc) • 2.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Checkbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Icon_1 = require("../Icon");
require("./Checkbox.css");
const Checkbox = ({ label, description, indeterminate = false, error = false, disabled, className = '', onChange, checked, defaultChecked, id, ...rest }) => {
const inputRef = (0, react_1.useRef)(null);
// Sincroniza estado indeterminado con la prop
(0, react_1.useEffect)(() => {
if (inputRef.current) {
inputRef.current.indeterminate = !!indeterminate && !checked;
}
}, [indeterminate, checked]);
const handleChange = (event) => {
if (indeterminate && inputRef.current) {
// Al interactuar, salimos del estado indeterminado
inputRef.current.indeterminate = false;
}
onChange === null || onChange === void 0 ? void 0 : onChange(event);
};
const rootClassName = [
'ds-checkbox',
error && 'ds-checkbox--error',
disabled && 'ds-checkbox--disabled',
className,
]
.filter(Boolean)
.join(' ');
const hasLabelContent = label !== null && label !== void 0 ? label : rest.children;
return ((0, jsx_runtime_1.jsxs)("label", { className: rootClassName, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: id, type: "checkbox", className: "ds-checkbox__input", disabled: disabled, checked: checked, defaultChecked: defaultChecked, onChange: handleChange, ...rest }), (0, jsx_runtime_1.jsxs)("span", { className: "ds-checkbox__box", "aria-hidden": "true", children: [(0, jsx_runtime_1.jsx)("span", { className: "ds-checkbox__icon ds-checkbox__icon--check", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: 12 }) }), (0, jsx_runtime_1.jsx)("span", { className: "ds-checkbox__icon ds-checkbox__icon--dash", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "dash", size: 12 }) })] }), (hasLabelContent || description) && ((0, jsx_runtime_1.jsxs)("span", { className: "ds-checkbox__label-wrapper", children: [hasLabelContent && ((0, jsx_runtime_1.jsx)("span", { className: "ds-checkbox__label", children: hasLabelContent })), description && ((0, jsx_runtime_1.jsx)("span", { className: "ds-checkbox__description", children: description }))] }))] }));
};
exports.Checkbox = Checkbox;