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

Opinionated design system for Drivy's projects.

import React from 'react';
import cx from 'classnames';
import { Icon } from '../Icon/index.js';
import { withFieldLabelAndHint } from './field.js';

const CheckablePill = ({ type, icon, value, children, defaultChecked, status, ...InputProps }) => {
    return (React.createElement("span", { className: cx("cobalt-CheckablePillField", {
            "cobalt-CheckablePillField--error": status === "error",
            "cobalt-CheckablePillField--with-icon": icon,
        }) },
        React.createElement("label", { className: "cobalt-CheckablePillField__LabelWrapper" },
            React.createElement("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }),
            React.createElement("span", { className: "cobalt-CheckablePillField__Label" },
                icon && React.createElement(Icon, { source: icon }),
                children))));
};
const CheckboxPill = ({ ...props }) => {
    return React.createElement(CheckablePill, { ...props, type: "checkbox" });
};
CheckboxPill.displayName = "CheckboxPill";
const RadioPill = ({ ...props }) => {
    return React.createElement(CheckablePill, { ...props, type: "radio" });
};
RadioPill.displayName = "RadioPill";
const _CheckablePillsGroup = ({ children }) => {
    return (React.createElement("div", { className: "cobalt-CheckablePillsGroup" }, typeof children === "function" ? children() : children));
};
const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
CheckablePillsGroup.displayName = "CheckablePillsGroup";

export { CheckablePillsGroup, CheckboxPill, RadioPill };
//# sourceMappingURL=CheckablePill.js.map