@smitch/fluid
Version:
A Next/React ui-component libray.
9 lines (8 loc) • 1.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { twMerge } from 'tailwind-merge';
import { Input, Label } from '..';
var Checkbox = function (_a) {
var _b = _a.name, name = _b === void 0 ? 'checkbox' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, style = _a.style, _d = _a.label, label = _d === void 0 ? 'I agree to Terms & Conditions' : _d, _e = _a.size, size = _e === void 0 ? 'md' : _e, _f = _a.rounded, rounded = _f === void 0 ? 'none' : _f, _g = _a.required, required = _g === void 0 ? false : _g, _h = _a.checked, checked = _h === void 0 ? false : _h, _j = _a.labelIsBold, labelIsBold = _j === void 0 ? false : _j, hint = _a.hint, onChange = _a.onChange, _k = _a.suppressHydrationWarning, suppressHydrationWarning = _k === void 0 ? false : _k;
return (_jsxs("div", { className: "text-".concat(size), children: [_jsx(Label, { type: 'checkbox', label: label, className: twMerge("check-label group ".concat(labelIsBold ? 'font-bold' : 'font-normal'), className), size: size, required: required, layout: 'row_reverse', style: style, children: _jsx(Input, { name: name, id: name, type: 'checkbox', "data-testid": "input-".concat(name), className: "checkbox", size: size, rounded: rounded, required: required, defaultChecked: checked, onChange: onChange, suppressHydrationWarning: suppressHydrationWarning }) }), hint && (_jsx("p", { className: "hint text-[.8em] font-normal mt-[.8em] dark:text-light", children: hint }))] }));
};
export default Checkbox;