atenea-components 1.4.35 → 1.4.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -40,11 +40,11 @@ exports.Toggle = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
40
40
|
};
|
|
41
41
|
const toggleClasses = (0, clsx_1.default)("relative inline-flex items-center w-10 h-5 rounded-full transition-colors duration-200 cursor-pointer", !disabled && !checked && "bg-gray-300", !disabled && !checked && "hover:bg-gray-400", !disabled &&
|
|
42
42
|
!checked &&
|
|
43
|
-
"focus:ring-2 focus:ring-
|
|
43
|
+
"focus:ring-2 focus:ring-primary-300 focus:ring-offset-1", !disabled && checked && "bg-primary-500", !disabled && checked && "hover:bg-primary-600", !disabled &&
|
|
44
44
|
checked &&
|
|
45
|
-
"focus:ring-2 focus:ring-
|
|
45
|
+
"focus:ring-2 focus:ring-primary-300 focus:ring-offset-1", disabled && "bg-gray-100 cursor-not-allowed opacity-50", className);
|
|
46
46
|
const thumbClasses = (0, clsx_1.default)("absolute", disabled && "opacity-50");
|
|
47
47
|
const labelClasses = (0, clsx_1.default)("ml-3 select-none transition-colors text-b1", disabled ? "text-gray-400 opacity-50" : "text-gray-700");
|
|
48
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: toggleClasses, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, role: "switch", "aria-checked": checked, "aria-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, id: id, className: "sr-only" }, props)), (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)(thumbClasses, "top-0.5 w-4 h-4 bg-white rounded-full shadow-sm transition-all duration-200 ease-in-out", checked ? "left-5" : "left-0.5") })] }), label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: labelClasses, children: label }))] }));
|
|
48
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: toggleClasses, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onClick: handleClick, role: "switch", "aria-checked": checked, "aria-disabled": disabled, children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "checkbox", checked: checked, onChange: handleChange, disabled: disabled, id: id, className: "sr-only" }, props)), (0, jsx_runtime_1.jsx)("span", { className: (0, clsx_1.default)(thumbClasses, "top-0.5 w-4 h-4 bg-white-100 rounded-full shadow-sm transition-all duration-200 ease-in-out", checked ? "left-5" : "left-0.5") })] }), label && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, className: labelClasses, children: label }))] }));
|
|
49
49
|
});
|
|
50
50
|
exports.Toggle.displayName = "Toggle";
|