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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { Icon } from "../Icon/index.js";
import { withFieldLabelAndHint } from "./field.js";
const CheckablePill = ({ type, icon, value, children, defaultChecked, status, ...InputProps })=>/*#__PURE__*/ jsx("span", {
        className: classnames("cobalt-CheckablePillField", {
            "cobalt-CheckablePillField--error": "error" === status,
            "cobalt-CheckablePillField--with-icon": icon
        }),
        children: /*#__PURE__*/ jsxs("label", {
            className: "cobalt-CheckablePillField__LabelWrapper",
            children: [
                /*#__PURE__*/ jsx("input", {
                    ...InputProps,
                    type: type,
                    className: "cobalt-CheckablePillField__Input",
                    value: value,
                    defaultChecked: defaultChecked
                }),
                /*#__PURE__*/ jsxs("span", {
                    className: "cobalt-CheckablePillField__Label",
                    children: [
                        icon && /*#__PURE__*/ jsx(Icon, {
                            source: icon
                        }),
                        children
                    ]
                })
            ]
        })
    });
const CheckboxPill = ({ ...props })=>/*#__PURE__*/ jsx(CheckablePill, {
        ...props,
        type: "checkbox"
    });
CheckboxPill.displayName = "CheckboxPill";
const RadioPill = ({ ...props })=>/*#__PURE__*/ jsx(CheckablePill, {
        ...props,
        type: "radio"
    });
RadioPill.displayName = "RadioPill";
const _CheckablePillsGroup = ({ children })=>/*#__PURE__*/ jsx("div", {
        className: "cobalt-CheckablePillsGroup",
        children: "function" == typeof children ? children() : children
    });
const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
CheckablePillsGroup.displayName = "CheckablePillsGroup";
export { CheckablePillsGroup, CheckboxPill, RadioPill };

//# sourceMappingURL=CheckablePill.js.map