@kubit-ui-web/react-components/dist/cjs/components/checkboxWithLabel/checkboxWithLabelStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxWithLabelStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const checkboxControlled_1 = require("../../components/checkbox/checkboxControlled");
const labelStandAlone_1 = require("../../components/label/labelStandAlone");
const text_1 = require("../../components/text/text");
const useId_1 = require("../../hooks/useId/useId");
const component_1 = require("../text/types/component");
const checkboxWithLabelStyled_1 = require("./checkboxWithLabelStyled");
const CheckboxWithLabelStandAloneComponent = ({ checked, description, id, name, value, disabled, onBlur, onChange, required, styles, variant, dataTestId = 'checkbox-with-label', state, helperText, checkedIcon, ...props }, ref) => {
    const uniqueId = (0, useId_1.useId)('checkbox');
    const checkBoxId = id ?? uniqueId;
    const checkBoxDescriptionId = `${checkBoxId}Description`;
    const labelTypography = description && styles?.[state]?.labelWhenDescription
        ? styles?.[state]?.labelWhenDescription
        : styles?.[state]?.label;
    return ((0, jsx_runtime_1.jsxs)(checkboxWithLabelStyled_1.CheckBoxWithLabelContainerStyled, { ref: ref, "data-testid": dataTestId, state: state, styles: styles, children: [(0, jsx_runtime_1.jsxs)(checkboxWithLabelStyled_1.CheckboxWithLabelStyled, { state: state, styles: styles, children: [(0, jsx_runtime_1.jsx)(checkboxControlled_1.CheckboxControlled, { "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], checked: checked, checkedIcon: checkedIcon, disabled: disabled, extraAriaDescribedBy: checkBoxDescriptionId, id: checkBoxId, name: name, value: value, variant: variant, onBlur: onBlur, onChange: onChange }), (0, jsx_runtime_1.jsx)(labelStandAlone_1.LabelStandAlone, { color: labelTypography?.color, inputId: checkBoxId, required: required, textVariant: labelTypography?.font_variant, weight: labelTypography?.font_weight, ...props.label, children: props.label.content })] }), (description?.content || helperText?.content) && ((0, jsx_runtime_1.jsxs)(checkboxWithLabelStyled_1.CheckboxWithLabelContentStyled, { state: state, styles: styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SMALL, customTypography: styles?.[state]?.description, ...description, children: description?.content }), (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SMALL, customTypography: styles?.[state]?.helperText, ...helperText, children: helperText?.content })] }))] }));
};
const CheckboxWithLabelStandAlone = react_1.default.forwardRef(CheckboxWithLabelStandAloneComponent);
exports.CheckboxWithLabelStandAlone = CheckboxWithLabelStandAlone;
//# sourceMappingURL=checkboxWithLabelStandAlone.js.map