@kubit-ui-web/react-components 1.13.2 → 1.15.0

package/dist/cjs/components/input/types/input.d.ts

@@ -0,0 +1,294 @@
+import * as React from 'react';
+import { CSSProp } from 'styled-components';
+import { IButton } from '../../../components/button/types';
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { IIconHighlighted, IconHighlightedSizeType } from '../../../components/iconHighlighted';
+import { InputCounterStateProps, InputCounterStylesProps } from '../../../components/inputCounter/types/inputCounterTheme';
+import { InputCurrencyStateProps, InputCurrencyStylesProps } from '../../../components/inputCurrency/types/inputCurrencyTheme';
+import { InputDateStateProps, InputDateStylesProps } from '../../../components/inputDate/types/inputDateTheme';
+import { InputDropdownStateProps, InputDropdownStylesProps } from '../../../components/inputDropdown/types/inputDropdownTheme';
+import { InputPhoneStateProps, InputPhoneStylesProps } from '../../../components/inputPhone/types/inputPhoneTheme';
+import { InputSearchStateProps, InputSearchStylesProps } from '../../../components/inputSearch/types/inputSearchTheme';
+import { ILabelStandAlone } from '../../../components/label';
+import { ILoader } from '../../../components/loader/types';
+import { IText } from '../../../components/text';
+import { AriaLiveOptionType, CustomTokenTypes, InputModeType, ROLES } from '../../../types';
+import { InputIconPosition, InputState } from './inputTheme';
+import { InputTypeType } from './inputType';
+import { InputTitleComponentType } from './titleComponent';
+export type InputStylesProps = InputCurrencyStylesProps | InputCounterStylesProps | InputPhoneStylesProps | InputDateStylesProps | InputSearchStylesProps | InputDropdownStylesProps;
+export type InputStateProps = InputCurrencyStateProps | InputCounterStateProps | InputPhoneStateProps | InputDateStateProps | InputSearchStateProps | InputDropdownStateProps;
+export declare enum MASK_TYPE {
+    LETTERS = "LETTERS",
+    NUMBERS = "NUMBERS",
+    NUMBERS_WITH_SPACES = "NUMBERS_WITH_SPACES",
+    ALPHANUMERIC = "ALPHANUMERIC",
+    ALPHANUMERIC_WITH_SPACES = "ALPHANUMERIC_WITH_SPACES",
+    LETTERS_HYPHEN_SPACE = "LETTERS_HYPHEN_SPACE"
+}
+export declare enum ERROR_EXECUTION {
+    ON_CHANGE = "onChange",
+    ON_BLUR = "onBlur",
+    NONE = "none"
+}
+export declare enum INTERNAL_ERROR_EXECUTION {
+    ON_CHANGE = "onChange",
+    ON_BLUR = "onBlur",
+    ON_CHANGE_ON_BLUR = "onChangeOnBlur",
+    NONE = "none"
+}
+export declare enum AUTOCAPITALIZE_TYPE {
+    OFF = "off",
+    NONE = "none",
+    ON = "on",
+    SENTENCES = "sentences",
+    WORDS = "words",
+    CHARACTERS = "characters"
+}
+export declare enum AUTOCOMPLETE_TYPE {
+    ON = "on",
+    OFF = "off",
+    NAME = "name",
+    HONORIFIC_PREFIX = "honorific-prefix",
+    GIVEN_NAME = "given-name",
+    ADDITIONAL_NAME = "additional-name",
+    FAMILY_NAME = "family-name",
+    HONORIFIC_SUFFIX = "honorific-suffix",
+    NICKNAME = "nickname",
+    EMAIL = "email",
+    USERNAME = "username",
+    NEW_PASSWORD = "new-password",
+    CURRENT_PASSWORD = "current-password",
+    ONE_TIME_CODE = "one-time-code",
+    ORGANIZATION_TITLE = "organization-title",
+    ORGANIZATION = "organization",
+    STREET_ADDRESS = "street-address",
+    ADDRESS_LINE1 = "address-line1",
+    ADDRESS_LINE2 = "address-line2",
+    ADDRESS_LINE3 = "address-line3",
+    ADDRESS_LEVEL4 = "address-level4",
+    ADDRESS_LEVEL3 = "address-level3",
+    ADDRESS_LEVEL2 = "address-level2",
+    ADDRESS_LEVEL1 = "address-level1",
+    COUNTRY = "country",
+    POSTAL_CODE = "postal-code",
+    CC_NAME = "cc-name",
+    CC_GIVEN_NAME = "cc-given-name",
+    CC_ADDITIONAL_NAME = "cc-additional-name",
+    CC_FAMILY_NAME = "cc-family-name",
+    CC_NUMBER = "cc-number",
+    CC_EXP = "cc-exp",
+    CC_EXP_MONTH = "cc-exp-month",
+    CC_EXP_YEAR = "cc-exp-year",
+    CC_CSC = "cc-csc",
+    CC_TYPE = "cc-type",
+    TRANSACTION_CURRENCY = "transaction-currency",
+    TRANSACTION_AMOUNT = "transaction-amount",
+    LANGUAGE = "language",
+    BDAY = "bday",
+    BDAY_DAY = "bday-day",
+    BDAY_MONTH = "bday-month",
+    BDAY_YEAR = "bday-year",
+    SEX = "sex",
+    TEL = "tel",
+    TEL_COUNTRY_CODE = "tel-country-code",
+    TEL_NATIONAL = "tel-national",
+    TEL_AREA_CODE = "tel-area-code",
+    TEL_LOCAL = "tel-local",
+    TEL_EXTENSION = "tel-extension",
+    IMPP = "impp",
+    URL = "url",
+    PHOTO = "photo",
+    PHOTO_URL = "photo-url",
+    ROLE = "role",
+    ORGANIZATION_ROLE = "organization-role",
+    NOTE = "note",
+    SECTION = "section",
+    SEARCH = "search",
+    BOOKMARK = "bookmark",
+    HOME = "home",
+    WORK = "work",
+    MOBILE = "mobile",
+    FAX = "fax",
+    PAGER = "pager",
+    OTHER = "other"
+}
+export interface IInputIcon {
+    state: InputState;
+    styles?: InputStateProps;
+    loading?: boolean;
+    disabled?: boolean;
+    rightIcon?: IElementOrIcon;
+    leftIcon?: IElementOrIcon;
+    iconPosition?: InputIconPosition;
+    /**
+     * @deprecated `icon` will be removed. Use `rightIcon` or `leftIcon` instead
+     */
+    icon?: IElementOrIcon;
+}
+export interface IInputLoader {
+    styles?: InputStateProps;
+    loader?: Omit<ILoader, 'variant'> & {
+        variant?: string;
+    };
+    loading?: boolean;
+}
+export type InputTitleType = Omit<IText<string>, 'children' | 'component'> & {
+    content: string;
+    component?: InputTitleComponentType;
+};
+export interface ITitle {
+    styles?: InputStateProps;
+    title?: InputTitleType;
+    additionalInfo?: React.ReactNode;
+    state: InputState;
+    dataTestId?: string;
+}
+export type InputLabelType = Omit<ILabelStandAlone, 'children' | 'inputId'> & {
+    content?: string;
+};
+export interface ILabel {
+    state: InputState;
+    styles?: InputStylesProps;
+    inputId: string;
+    id: string;
+    required?: boolean;
+    label?: InputLabelType;
+    placeholder?: string;
+    textVariant?: string;
+    additionalInfo?: React.ReactNode;
+    secondaryLabel?: React.ReactNode;
+    leftExtraStyles?: boolean;
+    topExtraStyles?: boolean;
+    dataTestId?: string;
+}
+export interface ITextCount {
+    styles?: InputCounterStateProps;
+    textCounter?: React.ReactNode;
+}
+export type InputInformationAssociatedIconType = IElementOrIcon & {
+    position?: InputIconPosition;
+};
+export type InputHighlightedInformationAssociatedIconType = Omit<IIconHighlighted, 'variant' | 'size'> & {
+    position?: InputIconPosition;
+    variant?: string;
+    size?: IconHighlightedSizeType;
+};
+export interface IInformationAssociatedDecoration {
+    styles?: InputStateProps;
+    informationAssociatedIcon?: InputInformationAssociatedIconType;
+    highlightedInformationAssociatedIcon?: InputHighlightedInformationAssociatedIconType;
+}
+export type InputInformationAssociatedValueType = Omit<IText<string>, 'children'> & {
+    content: string;
+};
+export type InputInformationAssociatedButtonType = Omit<IButton, 'children' | 'variant' | 'size'> & {
+    content: string;
+    variant?: string;
+    size?: string;
+};
+export type IInformationAssociated = IInformationAssociatedDecoration & {
+    state: InputState;
+    informationAssociatedValue?: InputInformationAssociatedValueType;
+    informationAssociatedButton?: InputInformationAssociatedButtonType;
+    dataTestId?: string;
+};
+export type InputHelpMessageType = Omit<IText<string>, 'children'> & {
+    content?: React.ReactNode | string;
+};
+export interface IHelpMessage {
+    styles?: InputStateProps;
+    helpMessage?: InputHelpMessageType;
+    helpMessageId?: string;
+    dataTestId?: string;
+}
+export type InputErrorMessageType = Omit<IText<string>, 'children'> & {
+    content?: string;
+};
+export interface IErrorMessage {
+    styles?: InputStateProps;
+    state: InputState;
+    errorMessage?: InputErrorMessageType;
+    errorMessageId?: string;
+    errorIcon?: IElementOrIcon;
+    errorAriaLiveType?: AriaLiveOptionType;
+    dataTestId?: string;
+}
+type InputAriaAttributes = Pick<React.AriaAttributes, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'aria-expanded' | 'aria-invalid' | 'aria-disabled'>;
+type componentPropsToOmit = 'styles' | 'state' | 'dataTestId' | 'placeholder' | 'leftExtraStyles' | 'topExtraStyles' | 'id';
+export interface IInputComponents extends InputAriaAttributes, Omit<IErrorMessage, componentPropsToOmit>, Omit<IHelpMessage, componentPropsToOmit>, Omit<IInformationAssociated, componentPropsToOmit>, Omit<ITextCount, componentPropsToOmit>, Omit<ILabel, componentPropsToOmit>, Omit<ITitle, componentPropsToOmit>, Omit<IInputLoader, componentPropsToOmit>, Omit<IInputIcon, componentPropsToOmit> {
+}
+type AriaHasPopupType = boolean | 'dialog' | 'menu' | 'true' | 'false' | 'grid' | 'listbox' | 'tree' | undefined;
+export interface MultipleRef {
+    refInput?: React.MutableRefObject<HTMLInputElement>;
+    refIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
+    refRightIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
+    refLeftIcon: React.MutableRefObject<HTMLSpanElement | undefined>;
+}
+export type FormatNumber = Intl.NumberFormatOptions & {
+    /**
+     * @deprecated `locale` in `formatNumber` is deprecated. Please use `locale` instead.
+     */
+    locale?: string;
+};
+export type IInputStandAlone = IInputComponents & {
+    state: InputState;
+    styles: InputStylesProps;
+    value?: string | number;
+    name?: string;
+    id?: string;
+    type?: InputTypeType;
+    truncate?: boolean;
+    disabledArrowUpDownInputNumber?: boolean;
+    placeholder?: string;
+    spellCheck?: boolean;
+    autocomplete?: AUTOCOMPLETE_TYPE;
+    autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters' | AUTOCAPITALIZE_TYPE;
+    disabledCopyAndPaste?: boolean;
+    disabledWheelMouse?: boolean;
+    maxLength?: number;
+    minLength?: number;
+    min?: number;
+    max?: number;
+    ignoreKeys?: string[];
+    inputMode?: InputModeType;
+    formatNumber?: FormatNumber;
+    leftContent?: string | JSX.Element;
+    leftExtraStyles?: CSSProp;
+    rightContent?: string | JSX.Element;
+    rightExtraStyles?: CSSProp;
+    topExtraStyles?: CSSProp;
+    bottomExtraStyles?: CSSProp;
+    centerExtraStyles?: CSSProp;
+    dataTestId?: string;
+    extraAriaLabelledBy?: string;
+    ['aria-haspopup']?: AriaHasPopupType;
+    role?: ROLES;
+    mask?: string;
+    maskType?: MASK_TYPE;
+    locale?: string;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
+};
+type propsToOmit = 'styles' | 'textVariant' | 'inputId' | 'helpMessageId' | 'errorMessageId' | 'filled';
+export interface IInputControlled<V = undefined extends string ? unknown : string> extends Omit<IInputStandAlone, propsToOmit>, Omit<CustomTokenTypes<InputStylesProps>, 'cts' | 'extraCt'> {
+    variant: V;
+    id?: string;
+    overrideStyles?: InputStylesProps;
+}
+export type IInputUnControlled<V = undefined extends string ? unknown : string> = Omit<IInputControlled<V>, 'value' | 'state'> & {
+    error?: boolean;
+    disabled?: boolean;
+    value?: string | number;
+    errorExecution?: ERROR_EXECUTION;
+    internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
+    keyValidation?: string;
+    regex?: string | RegExp;
+    onInternalErrors?: (errors: string[]) => void;
+    onError?: (error: boolean) => void;
+};
+export {};

package/dist/cjs/components/input/types/inputStyledPropsType.d.ts

@@ -0,0 +1,65 @@
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { InputStateProps, InputStylesProps } from './input';
+import { InputIconPosition, InputState, LABEL_TYPE } from './inputTheme';
+export type TitleStyledProps = {
+    $titleStyles?: InputStateProps;
+};
+export type LabelStyledProps = {
+    marginLeft?: string;
+    styles?: InputStateProps;
+    $placeholder?: string;
+    $maxLabelSize?: string;
+    state?: InputState;
+    leftExtraStyles?: boolean;
+    topExtraStyles?: boolean;
+};
+export type InformationAssociatedStyledProps = {
+    iconPosition?: InputIconPosition;
+    styles?: InputStateProps;
+};
+export type ErrorAndHelpMessageWrapperStyledProps = {
+    styles?: InputStateProps;
+};
+export type ErrorMessageStyledProps = {
+    styles?: InputStateProps;
+};
+export type HelpMessageStyledProps = {
+    styles?: InputStateProps;
+    align?: string;
+};
+export type TextCounterStyledProps = {
+    $marginRight?: string;
+};
+export type LoaderStyledProps = {
+    loading?: boolean;
+    styles?: InputStateProps;
+};
+export type InputIconStyledProps = {
+    iconPosition?: InputIconPosition;
+    styles?: InputStateProps;
+    $pointerEvents?: boolean;
+};
+export type TopContentWrapperStyledProps = {
+    styles?: InputStateProps;
+};
+export type InputStyledProps = {
+    state: InputState;
+    styles?: InputStylesProps;
+    cursorPointer?: string;
+    /**
+     * @deprecated `icon` will be removed. Use 'leftIcon` or 'rightIcon' instead
+     */
+    icon?: JSX.Element | HTMLElement | React.ReactNode | string;
+    /**
+     * @deprecated `iconPosition` will be removed. Use 'leftIcon` or 'rightIcon' instead
+     */
+    iconPosition?: InputIconPosition;
+    leftIcon?: IElementOrIcon;
+    rightIcon?: IElementOrIcon;
+    labelType?: LABEL_TYPE;
+    placeholder?: string;
+};
+export type InputWrapperStyledProps = {
+    styles?: InputStateProps;
+    labelType?: LABEL_TYPE;
+};

package/dist/cjs/components/input/types/inputTheme.d.ts

@@ -0,0 +1,89 @@
+import { IconHighlightedSizeType } from '../../../components/iconHighlighted/types/size';
+import { CommonStyleType, DeviceBreakpointsType, IconTypes, TypographyTypes } from '../../../types';
+export declare enum InputState {
+    EMPTY = "EMPTY",
+    ACTIVE = "ACTIVE",
+    FILLED = "FILLED",
+    ERROR_EMPTY = "ERROR_EMPTY",
+    ERROR_FILLED = "ERROR_FILLED",
+    ERROR_FILLED_WITH_INFO = "ERROR_FILLED_WITH_INFO",
+    ERROR_ACTIVE = "ERROR_ACTIVE",
+    DISABLED_FILLED = "DISABLED_FILLED",
+    DISABLED_EMPTY = "DISABLED_EMPTY",
+    DISABLED_FILLED_WITH_INFO = "DISABLED_FILLED_WITH_INFO"
+}
+export declare enum LABEL_TYPE {
+    STANDARD = "STANDARD",
+    OUTLINED = "OUTLINED",
+    FILLED = "FILLED"
+}
+export declare enum InputHelpMessagePosition {
+    TOP = "TOP",
+    BOTTOM = "BOTTOM"
+}
+export declare enum InputIconPosition {
+    RIGHT = "RIGHT",
+    LEFT = "LEFT"
+}
+export declare enum InputContentPosition {
+    INNER = "INNER",
+    OUT = "OUT"
+}
+export type InputBasicStateProps = {
+    inputWrapperContainer?: CommonStyleType;
+    topContentContainer?: CommonStyleType;
+    input?: TypographyTypes;
+    inputContainer?: CommonStyleType;
+    inputIcon?: IconTypes;
+    inputIconContainer?: CommonStyleType;
+    inputIconContainerRight?: CommonStyleType;
+    label?: TypographyTypes & {
+        type?: LABEL_TYPE;
+    };
+    focusVisibleCustom?: CommonStyleType;
+    labelContainer?: CommonStyleType;
+    placeholder?: TypographyTypes;
+    asterisk?: TypographyTypes;
+    loader?: TypographyTypes;
+    loaderContainer?: CommonStyleType;
+    loaderIcon?: IconTypes;
+    loaderVariant?: string;
+    title?: TypographyTypes;
+    titleContainer?: CommonStyleType;
+    additionalInfoContainer?: CommonStyleType;
+    titleAndAdditionalInfoContainer?: CommonStyleType;
+    informationAssociated?: TypographyTypes;
+    informationAssociatedTextAndDecorativeContainer?: CommonStyleType;
+    informationAssociatedContainer?: CommonStyleType;
+    informationAssociatedIcon?: IconTypes;
+    informationAssociatedIconHightlight?: {
+        variant: string;
+        color: string;
+        size: IconHighlightedSizeType;
+        backgroundColor?: string;
+    };
+    informationAssociatedIconHightlightContainer?: CommonStyleType;
+    informationAssociatedButton?: {
+        variant: string;
+        size: string;
+    };
+    informationAssociatedButtonContainer?: CommonStyleType;
+    errorAndHelpMessageContainer?: CommonStyleType;
+    errorMessage?: TypographyTypes;
+    errorMessageContainer?: CommonStyleType;
+    errorMessageIcon?: IconTypes;
+    errorMessageIconContainer?: CommonStyleType;
+    helpMessage?: TypographyTypes & {
+        position?: InputHelpMessagePosition;
+    };
+    helpMessageContainer?: CommonStyleType;
+    inputCaretColor?: {
+        [key in DeviceBreakpointsType]?: string;
+    };
+};
+export type InputBasicStylesProps = {
+    [state in InputState]?: InputBasicStateProps;
+};
+export type InputStylesType<V extends string | number | symbol> = {
+    [variant in V]: InputBasicStylesProps;
+};

package/dist/cjs/components/input/types/inputType.d.ts

@@ -0,0 +1,24 @@
+export declare enum InputTypeType {
+    BUTTON = "button",
+    CHECKBOX = "checkbox",
+    COLOR = "color",
+    DATE = "date",
+    DATETIME_LOCAL = "datetime-local",
+    EMAIL = "email",
+    FILE = "file",
+    HIDDEN = "hidden",
+    IMAGE = "image",
+    MONTH = "month",
+    NUMBER = "number",
+    PASSWORD = "password",
+    RADIO = "radio",
+    RANGE = "range",
+    RESET = "reset",
+    SEARCH = "search",
+    SUBMIT = "submit",
+    TEL = "tel",
+    TEXT = "text",
+    TIME = "time",
+    URL = "url",
+    WEEK = "week"
+}

package/dist/cjs/components/input/types/internalErrors.d.ts

@@ -0,0 +1,7 @@
+export declare enum InternalErrorType {
+    INVALID_EMAIL = "invalid_email",
+    INVALID_DATE = "invalid_date",
+    INVALID_DATE_RANGE = "invalid_date_range",
+    INVALID_MIN_LENGTH = "invalid_min_length",
+    INVALID_OPTION = "INVALID_OPTION"
+}

package/dist/cjs/components/input/types/titleComponent.d.ts

@@ -0,0 +1,9 @@
+export declare enum InputTitleComponentType {
+    PARAGRAPH = "p",
+    H1 = "h1",
+    H2 = "h2",
+    H3 = "h3",
+    H4 = "h4",
+    H5 = "h5",
+    H6 = "h6"
+}

package/dist/cjs/components/input/utils/aria.utils.d.ts

@@ -0,0 +1,9 @@
+import { InputState } from '../types';
+export declare const buildAriaDescribedBy: ({ ariaDescribedBy, helpMessage, helpMessageId, errorMessage, errorMessageId, state, }: {
+    ariaDescribedBy?: string;
+    helpMessage?: React.ReactNode;
+    helpMessageId?: string;
+    errorMessage?: string;
+    errorMessageId?: string;
+    state?: InputState;
+}) => string | undefined;

package/dist/cjs/components/input/utils/aria.utils.js

@@ -9,12 +9,12 @@ const buildAriaDescribedBy = ({ ariaDescribedBy, helpMessage, helpMessageId, err
     if (ariaDescribedBy) {
         res += ` ${ariaDescribedBy}`;
     }
-    if (helpMessageId && helpMessage) {
-        res += ` ${helpMessageId}`;
-    }
     if (errorMessageId && errorMessage && (0, state_utils_1.hasError)(state)) {
         res += ` ${errorMessageId}`;
     }
+    if (helpMessageId && helpMessage) {
+        res += ` ${helpMessageId}`;
+    }
     return res;
 };
 exports.buildAriaDescribedBy = buildAriaDescribedBy;

package/dist/cjs/components/input/utils/aria.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"aria.utils.js","sourceRoot":"","sources":["../../../../../src/components/input/utils/aria.utils.ts"],"names":[],"mappings":";;;AACA,+CAAyC;AAElC,MAAM,oBAAoB,GAAG,CAAC,EACnC,eAAe,EACf,WAAW,EACX,aAAa,EACb,YAAY,EACZ,cAAc,EACd,KAAK,GAQN,EAAsB,EAAE;IACvB,IAAI,CAAC,eAAe,IAAI,CAAC,YAAY;QAAE,OAAO;IAE9C,IAAI,GAAG,GAAW,EAAE,CAAC;IACrB,IAAI,eAAe,EAAE,CAAC;QACpB,GAAG,IAAI,IAAI,eAAe,EAAE,CAAC;IAC/B,CAAC;IACD,IAAI,aAAa,IAAI,WAAW,EAAE,CAAC;QACjC,GAAG,IAAI,IAAI,aAAa,EAAE,CAAC;IAC7B,CAAC;IAED,IAAI,cAAc,IAAI,YAAY,IAAI,IAAA,sBAAQ,EAAC,KAAK,CAAC,EAAE,CAAC;QACtD,GAAG,IAAI,IAAI,cAAc,EAAE,CAAC;IAC9B,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AA7BW,QAAA,oBAAoB,wBA6B/B"}
+{"version":3,"file":"aria.utils.js","sourceRoot":"","sources":["../../../../../src/components/input/utils/aria.utils.ts"],"names":[],"mappings":";;;AACA,+CAAyC;AAElC,MAAM,oBAAoB,GAAG,CAAC,EACnC,eAAe,EACf,WAAW,EACX,aAAa,EACb,YAAY,EACZ,cAAc,EACd,KAAK,GAQN,EAAsB,EAAE;IACvB,IAAI,CAAC,eAAe,IAAI,CAAC,YAAY;QAAE,OAAO;IAE9C,IAAI,GAAG,GAAW,EAAE,CAAC;IACrB,IAAI,eAAe,EAAE,CAAC;QACpB,GAAG,IAAI,IAAI,eAAe,EAAE,CAAC;IAC/B,CAAC;IACD,IAAI,cAAc,IAAI,YAAY,IAAI,IAAA,sBAAQ,EAAC,KAAK,CAAC,EAAE,CAAC;QACtD,GAAG,IAAI,IAAI,cAAc,EAAE,CAAC;IAC9B,CAAC;IACD,IAAI,aAAa,IAAI,WAAW,EAAE,CAAC;QACjC,GAAG,IAAI,IAAI,aAAa,EAAE,CAAC;IAC7B,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AA5BW,QAAA,oBAAoB,wBA4B/B"}

package/dist/cjs/components/input/utils/extraStyles.utils.d.ts

@@ -0,0 +1,4 @@
+import { CSSProp } from 'styled-components';
+import { InputHelpMessagePosition } from '../../../components/input/types';
+import { POSITIONS } from '../../../types/positions';
+export declare const getExtraStyles: (stylesPosition: POSITIONS, affixPosition?: POSITIONS, width?: number, isOutAffixPosition?: boolean, helpTextPosition?: InputHelpMessagePosition, inputWidth?: number) => CSSProp | undefined;

package/dist/cjs/components/input/utils/fontSize.utils.d.ts

@@ -0,0 +1,2 @@
+import { InputState, InputStylesProps } from '../../../components/input/types';
+export declare const getFontSize: (state: InputState, type: string, component: string, styles?: InputStylesProps, placeholder?: string) => string | undefined;

package/dist/cjs/components/input/utils/formatNumber.d.ts

@@ -0,0 +1,7 @@
+import { FormatNumber } from '../types/input';
+export declare const formatNumber: (amount: number, formatNumber: FormatNumber, locale?: string) => string;
+export declare const getThousandSeparator: (locale?: string) => string;
+export declare const getDecimalSeparator: (locale?: string) => string;
+export declare const checkValidFormattedNumber: (value: string, locale?: string) => boolean;
+export declare const convertDecimalSeparator: (value: string, decimalSeparator: string) => string;
+export declare const removeThousandSeparator: (value: string, locale?: string, replaceDecimalSeparator?: boolean) => string;

package/dist/cjs/components/input/utils/getMaxLabelSize.utils.d.ts

@@ -0,0 +1 @@
+export declare const getMaxLabelSize: (proceed: boolean, inputId: string) => string | undefined;

package/dist/cjs/components/input/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './state.utils';
+export * from './aria.utils';
+export * from './fontSize.utils';
+export * from './extraStyles.utils';
+export * from './formatNumber';
+export * from './getMaxLabelSize.utils';

package/dist/cjs/components/input/utils/state.utils.d.ts

@@ -0,0 +1,4 @@
+import { InputState } from '../types/inputTheme';
+export declare const getState: (value: string | number | undefined, focus: boolean, disabled?: boolean, error?: boolean, informationAssociated?: string) => InputState;
+export declare const hasError: (state?: InputState) => boolean;
+export declare const isDisabled: (state: InputState) => boolean;

package/dist/cjs/components/inputCounter/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { InputCounter } from './inputCounter';

package/dist/cjs/components/inputCounter/inputCounter.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { IInputCounter } from './types';
+declare const InputCounter: <V extends string | unknown>(props: IInputCounter<V> & {
+    ref?: React.ForwardedRef<HTMLInputElement | undefined>;
+}) => JSX.Element;
+export { InputCounter };

package/dist/cjs/components/inputCounter/inputCounter.js

@@ -31,10 +31,11 @@ const hooks_1 = require("../../hooks");
 const errorBoundary_1 = require("../../provider/errorBoundary");
 const types_1 = require("../input/types");
 const inputCounterStandAlone_1 = require("./inputCounterStandAlone");
+const utils_1 = require("./utils");
 const InputCounterComponent = React.forwardRef(({ type = types_1.InputTypeType.TEXT, truncate = false, disabledCopyAndPaste, internalErrorExecution = types_1.INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR, errorExecution, keyValidation, min, max, maxLength, minLength, mask, maskType, disabled, error, value: currentValue, informationAssociatedValue, ignoreKeys, regex, onBlur, onChange, onFocus, onKeyDown, onError, onInternalErrors, onPaste, ctv, ...props }, ref) => {
-    const styles = (0, hooks_1.useStyles)(constants_1.STYLES_NAME.INPUT_COUNTER, props.variant, ctv);
     const uniqueId = (0, hooks_1.useId)('inputCounter');
     const inputId = props.id ?? uniqueId;
+    const styles = (0, hooks_1.useStyles)(constants_1.STYLES_NAME.INPUT_COUNTER, props.variant, ctv);
     const { value, state, inputRef, handleChangeInternal, handleBlurInternal, handleFocusInternal, handleKeyDownInternal, handlePasteInternal, } = (0, hooks_1.useInput)({
         ref,
         errorExecution,
@@ -63,7 +64,16 @@ const InputCounterComponent = React.forwardRef(({ type = types_1.InputTypeType.T
         onInternalErrors,
         onPaste,
     });
-    return ((0, jsx_runtime_1.jsx)(inputCounterStandAlone_1.InputCounterStandAlone, { ...props, ref: inputRef, id: inputId, informationAssociatedValue: informationAssociatedValue, max: max, maxLength: maxLength, min: min, minLength: minLength, state: state, styles: styles, truncate: truncate, type: type, value: value, onBlur: handleBlurInternal, onChange: handleChangeInternal, onFocus: handleFocusInternal, onKeyDown: handleKeyDownInternal, onPaste: handlePasteInternal }));
+    const [showMessage, setShowMessage] = React.useState(false);
+    const handleChange = e => {
+        handleChangeInternal?.(e);
+        setShowMessage(false);
+    };
+    const handleBlur = e => {
+        handleBlurInternal?.(e);
+        setShowMessage(true);
+    };
+    return ((0, jsx_runtime_1.jsx)(inputCounterStandAlone_1.InputCounterStandAlone, { ...props, ref: inputRef, id: inputId, informationAssociatedValue: informationAssociatedValue, max: max, maxLength: maxLength, min: min, minLength: minLength, screenReaderCurrentCharacters: (0, utils_1.buildScreenReaderText)(value, ref, maxLength, props.screenReaderCurrentCharacters), showMessage: showMessage, state: state, styles: styles, truncate: truncate, type: type, value: value, onBlur: handleBlur, onChange: handleChange, onFocus: handleFocusInternal, onKeyDown: handleKeyDownInternal, onPaste: handlePasteInternal }));
 });
 InputCounterComponent.displayName = 'InputCounterComponent';
 const InputCounterBoundary = (props, ref) => ((0, jsx_runtime_1.jsx)(errorBoundary_1.ErrorBoundary, { fallBackComponent: (0, jsx_runtime_1.jsx)(errorBoundary_1.FallbackComponent, { children: (0, jsx_runtime_1.jsx)(inputCounterStandAlone_1.InputCounterStandAlone, { ...props, ref: ref }) }), children: (0, jsx_runtime_1.jsx)(InputCounterComponent, { ...props, ref: ref }) }));

package/dist/cjs/components/inputCounter/inputCounter.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputCounter.js","sourceRoot":"","sources":["../../../../src/components/inputCounter/inputCounter.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,2CAA0C;AAC1C,mCAAqD;AACrD,4DAA4E;AAE5E,0CAAyE;AACzE,qEAAkE;AAGlE,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAC5C,CACE,EACE,IAAI,GAAG,qBAAa,CAAC,IAAI,EACzB,QAAQ,GAAG,KAAK,EAChB,oBAAoB,EACpB,sBAAsB,GAAG,gCAAwB,CAAC,iBAAiB,EACnE,cAAc,EACd,aAAa,EACb,GAAG,EACH,GAAG,EACH,SAAS,EACT,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,KAAK,EAAE,YAAY,EACnB,0BAA0B,EAC1B,UAAU,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACS,EACnB,GAAqD,EACxC,EAAE;IACf,MAAM,MAAM,GAAG,IAAA,iBAAS,EACtB,uBAAW,CAAC,aAAa,EACzB,KAAK,CAAC,OAAO,EACb,GAAG,CACJ,CAAC;IACF,MAAM,QAAQ,GAAG,IAAA,aAAK,EAAC,cAAc,CAAC,CAAC;IACvC,MAAM,OAAO,GAAG,KAAK,CAAC,EAAE,IAAI,QAAQ,CAAC;IAErC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,mBAAmB,GACpB,GAAG,IAAA,gBAAQ,EAAC;QACX,GAAG;QACH,cAAc;QACd,sBAAsB;QACtB,aAAa;QACb,GAAG;QACH,GAAG;QACH,SAAS;QACT,SAAS;QACT,IAAI;QACJ,QAAQ;QACR,QAAQ;QACR,KAAK;QACL,YAAY;QACZ,IAAI;QACJ,QAAQ;QACR,qBAAqB,EAAE,0BAA0B,EAAE,OAAO;QAC1D,UAAU;QACV,KAAK;QACL,oBAAoB;QACpB,MAAM;QACN,QAAQ;QACR,OAAO;QACP,SAAS;QACT,OAAO;QACP,gBAAgB;QAChB,OAAO;KACR,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,+CAAsB,OACjB,KAAK,EACT,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,OAAO,EACX,0BAA0B,EAAE,0BAA0B,EACtD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,kBAAkB,EAC1B,QAAQ,EAAE,oBAAoB,EAC9B,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAE,qBAAqB,EAChC,OAAO,EAAE,mBAAmB,GAC5B,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAE5D,MAAM,oBAAoB,GAAG,CAC3B,KAAuB,EACvB,GAAqD,EACxC,EAAE,CAAC,CAChB,uBAAC,6BAAa,IACZ,iBAAiB,EACf,uBAAC,iCAAiB,cAChB,uBAAC,+CAAsB,OAAM,KAA4C,EAAE,GAAG,EAAE,GAAG,GAAI,GACrE,YAGtB,uBAAC,qBAAqB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,GAChC,CACjB,CAAC;AAEF,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAI1C,CAAC;AAER,oCAAY"}
+{"version":3,"file":"inputCounter.js","sourceRoot":"","sources":["../../../../src/components/inputCounter/inputCounter.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/inputCounter/inputCounterStandAlone.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IInputCounterStandAlone } from './types';
+export declare const InputCounterStandAloneComponent: <V extends string | unknown>(props: IInputCounterStandAlone<V>, ref: React.ForwardedRef<HTMLInputElement | undefined | null>) => JSX.Element;
+declare const InputCounterStandAlone: <V extends string | unknown>(props: IInputCounterStandAlone<V> & {
+    ref?: React.ForwardedRef<HTMLInputElement | undefined>;
+}) => JSX.Element;
+export { InputCounterStandAlone };

package/dist/cjs/components/inputCounter/inputCounterStandAlone.js

@@ -28,15 +28,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = __importStar(require("react"));
 const textCount_1 = require("../../components/textCount/textCount");
 const input_1 = require("../input");
+const screenReaderOnly_1 = require("../screenReaderOnly");
 const utils_1 = require("./utils");
 const InputCounterStandAloneComponent = (props, ref) => {
+    const screenReaderCurrentCharactersId = 'screenReaderCurrentCharactersId';
     const renderTextCounter = () => {
         if (!props.styles?.[props.state]?.textCountVariant) {
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(textCount_1.TextCount, { currentCharacters: (0, utils_1.getCharactersLength)(props.value, ref), dataTestId: `${props.dataTestId}TextCount`, id: `${props.id}Counter`, leftColor: props.styles?.[props.state]?.textCountLeftColor, leftWeight: props.styles?.[props.state]?.textCountLeftWeight, maxLength: props.maxLength, rightColor: props.styles?.[props.state]?.textCountRightColor, rightWeight: props.styles?.[props.state]?.textCountRightWeight, screenReaderText: props.screenReaderTextCount, textVariant: props.styles?.[props.state]?.textCountTextVariant, variant: props.styles?.[props.state]?.textCountVariant, ...props.textCount }));
+        return ((0, jsx_runtime_1.jsx)(textCount_1.TextCount, { currentCharacters: (0, utils_1.getCharactersLength)(props.value, ref), id: `${props.id}Counter`, leftColor: props.styles?.[props.state]?.textCountLeftColor, leftWeight: props.styles?.[props.state]?.textCountLeftWeight, maxLength: props.maxLength, rightColor: props.styles?.[props.state]?.textCountRightColor, rightWeight: props.styles?.[props.state]?.textCountRightWeight, screenReaderText: props.screenReaderTextCount, textVariant: props.styles?.[props.state]?.textCountTextVariant, variant: props.styles?.[props.state]?.textCountVariant, ...props.textCount }));
     };
-    return ((0, jsx_runtime_1.jsx)(input_1.InputControlled, { ...props, ref: ref, id: props.id, overrideStyles: props.styles, textCounter: renderTextCounter(), variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.InputControlled, { ...props, ref: ref, "aria-describedby": props.showMessage ? screenReaderCurrentCharactersId : undefined, id: props.id, overrideStyles: props.styles, textCounter: renderTextCounter(), variant: props.inputVariant ?? props.styles?.[props.state]?.inputVariant }), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { id: screenReaderCurrentCharactersId, children: props.screenReaderCurrentCharacters })] }));
 };
 exports.InputCounterStandAloneComponent = InputCounterStandAloneComponent;
 const InputCounterStandAlone = React.forwardRef(exports.InputCounterStandAloneComponent);