@kubit-ui-web/react-components/dist/esm/components/checkbox/checkboxStandAlone.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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { LabelStandAlone as Label } from '../../components/label/labelStandAlone';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { CheckboxContainerStyled, CheckboxFrameStyled, CheckboxHelpContentStyled, CheckboxHelpContentTextStyled, CheckboxHelperContentStyled, CheckboxIconLabelWrapperStyled, CheckboxStyled, CheckedIcon, } from './checkbox.styled';
import { CheckboxErrorStandAlone } from './components/checkboxErrorStandAlone';
import { buildAriaDescribedBy } from './utils/aria.utils';
import { checkboxState } from './utils/state.utils';
const CURSOR_POINTER = 'pointer';
const CURSOR_DEFAULT = 'default';
const CheckboxStandAloneComponent = ({ state, required, id, name, onBlur, onChange, styles, value, label, errorMessage, checkedIcon, errorIcon, errorAriaLiveType = AriaLiveOptionType.ASSERTIVE, helperContent, dataTestId = 'checkbox', helperText, extraAriaDescribedBy = '', screenReaderText, ...props }, ref) => {
    const uniqueId = useId('checkbox');
    const { isChecked, isDisabled, hasError } = checkboxState(state);
    const checkBoxId = id ?? uniqueId;
    const checkBoxLabelId = `${checkBoxId}Label`;
    const checkBoxkHelpContentId = `${checkBoxId}HelpContent`;
    const checkBoxErrorId = `${checkBoxId}Error`;
    const screenReaderId = `${checkBoxId}ScreenReader`;
    const labelTypography = helperContent?.content ? styles?.specialLabel : styles?.label;
    const helperTextTypography = helperContent?.content
        ? styles?.specialHelperText
        : styles?.helperText;
    const getLabel = () => {
        return (_jsx(_Fragment, { children: typeof label?.content === 'string' ? (_jsx(Label, { color: labelTypography?.color, cursor: isDisabled ? CURSOR_DEFAULT : CURSOR_POINTER, id: checkBoxLabelId, inputId: checkBoxId, required: required, textVariant: labelTypography?.font_variant, weight: labelTypography?.font_weight, ...label, children: label.content })) : (label?.content) }));
    };
    const getContent = () => {
        return (_jsx(_Fragment, { children: helperContent?.content && typeof helperContent.content !== 'string' ? (_jsx(CheckboxHelpContentStyled, { id: checkBoxkHelpContentId, children: helperContent.content })) : (_jsxs(CheckboxHelpContentTextStyled, { id: checkBoxkHelpContentId, styles: styles, children: [_jsx(Text, { component: TextComponentType.SMALL, customTypography: styles?.helpContent, id: `${checkBoxId}Description`, ...helperContent, children: helperContent?.content }), _jsx(Text, { color: helperTextTypography?.color, component: TextComponentType.SMALL, id: `${checkBoxId}HelperText`, variant: helperTextTypography?.font_variant, weight: helperTextTypography?.font_weight, ...helperText, children: helperText?.content })] })) }));
    };
    return (_jsxs(CheckboxContainerStyled, { "data-testid": dataTestId, styles: styles, children: [_jsxs(CheckboxIconLabelWrapperStyled, { styles: styles, children: [_jsxs(CheckboxFrameStyled, { styles: styles, children: [_jsx(CheckboxStyled, { ref: ref, "aria-describedby": buildAriaDescribedBy({
                                    extraAriaDescribedBy,
                                    label: label?.content,
                                    checkBoxLabelId,
                                    helpContent: helperContent?.content,
                                    checkBoxkHelpContentId,
                                    hasError,
                                    errorText: errorMessage?.content,
                                    checkBoxErrorId,
                                    screenReaderText,
                                    screenReaderId,
                                }), "aria-hidden": props['aria-hidden'], "aria-invalid": hasError, "aria-label": props['aria-label'], "aria-labelledby": props['aria-labelledby'], checked: isChecked, "data-testid": `${dataTestId}-input`, disabled: isDisabled, id: checkBoxId, name: name, required: required, styles: styles, tabIndex: props.tabIndex, type: "checkbox", value: value, onBlur: onBlur, onChange: onChange }), _jsx(CheckedIcon, { "$isChecked": isChecked, styles: styles, children: _jsx(ElementOrIcon, { color: styles?.checkedIcon?.color, complex: true, ...checkedIcon }) }), _jsx(ScreenReaderOnly, { id: screenReaderId, children: screenReaderText })] }), getLabel()] }), _jsxs(CheckboxHelperContentStyled, { styles: styles, children: [_jsx(CheckboxErrorStandAlone, { dataTestId: `${dataTestId}-error-message`, error: hasError, errorAriaLiveType: errorAriaLiveType, errorIcon: errorIcon, errorMessage: errorMessage, id: checkBoxErrorId, styles: styles }), getContent()] })] }));
};
/**
 * @description
 * Checkbox component is a input component that can be used to select one or more options from a list of options.
 * It can be used to create a list of options that can be selected.
 * @param {React.PropsWithChildren<ICheckboxStandAlone>} props
 * @returns {JSX.Element}
 * @constructor
 */
export const CheckboxStandAlone = React.forwardRef(CheckboxStandAloneComponent);
//# sourceMappingURL=checkboxStandAlone.js.map