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

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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { CheckboxControlled } from '../../components/checkbox/checkboxControlled';
import { LabelStandAlone as Label } from '../../components/label/labelStandAlone';
import { Text } from '../../components/text/text';
import { useId } from '../../hooks/useId/useId';
import { TextComponentType } from '../text/types/component';
import { CheckBoxWithLabelContainerStyled, CheckboxWithLabelContentStyled, CheckboxWithLabelStyled, } from './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 = useId('checkbox');
    const checkBoxId = id ?? uniqueId;
    const checkBoxDescriptionId = `${checkBoxId}Description`;
    const labelTypography = description && styles?.[state]?.labelWhenDescription
        ? styles?.[state]?.labelWhenDescription
        : styles?.[state]?.label;
    return (_jsxs(CheckBoxWithLabelContainerStyled, { ref: ref, "data-testid": dataTestId, state: state, styles: styles, children: [_jsxs(CheckboxWithLabelStyled, { state: state, styles: styles, children: [_jsx(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 }), _jsx(Label, { 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) && (_jsxs(CheckboxWithLabelContentStyled, { state: state, styles: styles, children: [_jsx(Text, { component: TextComponentType.SMALL, customTypography: styles?.[state]?.description, ...description, children: description?.content }), _jsx(Text, { component: TextComponentType.SMALL, customTypography: styles?.[state]?.helperText, ...helperText, children: helperText?.content })] }))] }));
};
const CheckboxWithLabelStandAlone = React.forwardRef(CheckboxWithLabelStandAloneComponent);
export { CheckboxWithLabelStandAlone };
//# sourceMappingURL=checkboxWithLabelStandAlone.js.map