@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
20 lines (19 loc) • 1.78 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Switch = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Switch.css");
const Icon_1 = require("../Icon");
const Switch = ({ label, description, error = false, disabled, className = '', onChange, checked, defaultChecked, id, ...rest }) => {
const rootClassName = [
'ds-switch',
error && 'ds-switch--error',
disabled && 'ds-switch--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", { id: id, type: "checkbox", className: "ds-switch__input", disabled: disabled, checked: checked, defaultChecked: defaultChecked, onChange: onChange, ...rest }), (0, jsx_runtime_1.jsx)("span", { className: "ds-switch__track", children: (0, jsx_runtime_1.jsxs)("span", { className: "ds-switch__handle", children: [(0, jsx_runtime_1.jsx)("span", { className: "ds-switch__icon ds-switch__icon--check", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: 16 }) }), (0, jsx_runtime_1.jsx)("span", { className: "ds-switch__icon ds-switch__icon--cross", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 16 }) })] }) }), (hasLabelContent || description) && ((0, jsx_runtime_1.jsxs)("span", { className: "ds-switch__label-wrapper", children: [hasLabelContent && ((0, jsx_runtime_1.jsx)("span", { className: "ds-switch__label", children: hasLabelContent })), description && ((0, jsx_runtime_1.jsx)("span", { className: "ds-switch__description", children: description }))] }))] }));
};
exports.Switch = Switch;