@kubit-ui-web/react-components/dist/esm/components/pill/pillStandAlone.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 { Text } from '../../components/text/text';
import { useId } from '../../hooks/useId/useId';
import { pickAriaProps } from '../../utils/aria/aria';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { InputTypeType } from '../input/types/inputType';
import { TextComponentType } from '../text/types/component';
import { IconContainerStyled, LabelContainerStyled, ParentContainerStyled, PillInputStyled, PillLabelStyled, PillStyled, } from './pill.styled';
import { getPillState } from './utils/state.utils';
const PillStandAloneComponent = ({ styles, decorativeIcon, selectedIcon, dataTestId = 'pill', children, multiSelect = false, disabled, selected, name, onFocus, tabIndex, onPillChange, onKeyDown, value, ...props }, ref) => {
    const ariaProps = pickAriaProps(props);
    const id = useId('pill');
    const component = multiSelect ? InputTypeType.CHECKBOX : InputTypeType.RADIO;
    const state = getPillState(selected, disabled);
    const stateStyles = styles[state];
    return (_jsxs(ParentContainerStyled, { styles: stateStyles, children: [_jsxs(PillStyled, { ref: ref, "data-testid": dataTestId, styles: stateStyles, tabIndex: tabIndex, onKeyDown: onKeyDown?.(value || ''), children: [_jsx(PillInputStyled, { "aria-checked": selected, ...ariaProps, checked: selected, "data-testid": `${dataTestId}-input`, disabled: disabled, id: id, name: name, styles: stateStyles, tabIndex: -1, type: component, value: value, onChange: onPillChange, onFocus: onFocus }), decorativeIcon && (_jsx(IconContainerStyled, { styles: stateStyles, children: _jsx(ElementOrIcon, { color: stateStyles?.decorativeIcon?.color, height: stateStyles?.decorativeIcon?.height, width: stateStyles?.decorativeIcon?.width, ...decorativeIcon }) })), _jsx(PillLabelStyled, { htmlFor: id, styles: stateStyles, children: children }), selectedIcon && selected && (_jsx(ElementOrIcon, { color: stateStyles?.selectedIcon?.color, height: stateStyles?.selectedIcon?.height, width: stateStyles?.selectedIcon?.width, ...selectedIcon }))] }), props.label?.content && props.label.content !== null && (_jsx(LabelContainerStyled, { styles: stateStyles, children: _jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: stateStyles?.labelContent, ...props.label, children: props.label.content }) }))] }));
};
export const PillStandAlone = React.forwardRef(PillStandAloneComponent);
//# sourceMappingURL=pillStandAlone.js.map