@drivy/cobalt/components/Form/ToggleSwitch.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { Hint } from "./Hint.js";
const ToggleSwitch = ({ large, status, label, position, hint, ...inputProps })=>/*#__PURE__*/ jsxs("div", {
        className: classnames("cobalt-ToggleSwitchField", {
            "cobalt-ToggleSwitchField--large": large,
            "cobalt-ToggleSwitchField--position-left": "left" === position,
            "cobalt-ToggleSwitchField--error": "error" === status,
            "cobalt-ToggleSwitchField--standalone": !label
        }),
        children: [
            /*#__PURE__*/ jsxs("label", {
                className: "cobalt-ToggleSwitchField__LabelWrapper",
                children: [
                    /*#__PURE__*/ jsx("input", {
                        ...inputProps,
                        type: "checkbox",
                        className: "cobalt-ToggleSwitchField__Input"
                    }),
                    /*#__PURE__*/ jsx("span", {
                        className: "cobalt-ToggleSwitchField__ToggleSwitch",
                        children: /*#__PURE__*/ jsx("span", {
                            className: "cobalt-ToggleSwitchField__ToggleSwitchSlider"
                        })
                    }),
                    label && /*#__PURE__*/ jsx("span", {
                        className: "cobalt-ToggleSwitchField__Label",
                        children: label
                    })
                ]
            }),
            hint && /*#__PURE__*/ jsx(Hint, {
                status: status,
                children: /*#__PURE__*/ jsx("span", {
                    dangerouslySetInnerHTML: {
                        __html: hint
                    }
                })
            })
        ]
    });
export { ToggleSwitch };

//# sourceMappingURL=ToggleSwitch.js.map