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

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from 'react/jsx-runtime';
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 (jsx("span", { className: cx("cobalt-CheckablePillField", {
            "cobalt-CheckablePillField--error": status === "error",
            "cobalt-CheckablePillField--with-icon": icon,
        }), children: jsxs("label", { className: "cobalt-CheckablePillField__LabelWrapper", children: [jsx("input", { ...InputProps, type: type, className: "cobalt-CheckablePillField__Input", value: value, defaultChecked: defaultChecked }), jsxs("span", { className: "cobalt-CheckablePillField__Label", children: [icon && jsx(Icon, { source: icon }), children] })] }) }));
};
const CheckboxPill = ({ ...props }) => {
    return jsx(CheckablePill, { ...props, type: "checkbox" });
};
CheckboxPill.displayName = "CheckboxPill";
const RadioPill = ({ ...props }) => {
    return jsx(CheckablePill, { ...props, type: "radio" });
};
RadioPill.displayName = "RadioPill";
const _CheckablePillsGroup = ({ children }) => {
    return (jsx("div", { className: "cobalt-CheckablePillsGroup", children: typeof children === "function" ? children() : children }));
};
const CheckablePillsGroup = withFieldLabelAndHint(_CheckablePillsGroup);
CheckablePillsGroup.displayName = "CheckablePillsGroup";

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