@alphakits/ui 1.31.5 → 2.0.0

package/dist/input/component.d.ts

@@ -1,68 +1,233 @@
-/// <reference types="react" />
-import React from 'react';
-import { ChangeEvent, InputHTMLAttributes, MouseEvent } from "react";
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown'> & {
+import { default as React, ChangeEvent, InputHTMLAttributes, MouseEvent } from 'react';
+export declare type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown'> & {
+    /**
+     * Значение поля ввода
+     */
     value?: string;
+    /**
+     * Начальное значение поля
+     */
     defaultValue?: string;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
     block?: boolean;
+    /**
+     * required - индикатор * лейбла для обязательного заполнения поля
+     */
     required?: boolean;
+    /**
+     * Крестик для очистки поля
+     */
     clear?: boolean;
+    /**
+     * Размер компонента
+     */
     size?: 's' | 'm' | 'l';
+    /**
+     * Отображение ошибки
+     */
     error?: string | boolean;
+    /**
+     * Отображение иконки успеха
+     */
     success?: boolean;
+    /**
+     * Текст подсказки
+     */
     hint?: string;
+    /**
+     * Лейбл компонента
+     */
     label?: React.ReactNode;
+    /**
+     * Атрибут type
+     */
     type?: 'number' | 'card' | 'email' | 'money' | 'password' | 'tel' | 'text';
+    /**
+     * Ref для обертки input
+     */
     wrapperRef?: React.Ref<HTMLDivElement>;
+    /**
+     * Слот слева
+     */
     leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
     rightAddons?: React.ReactNode;
+    /**
+     * Слот под инпутом
+     */
     bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
     className?: string;
+    /**
+     * Дополнительный класс для поля
+     */
     fieldClassName?: string;
+    /**
+     * Дополнительный класс инпута
+     */
     inputClassName?: string;
+    /**
+     * Дополнительный класс для лейбла
+     */
     labelClassName?: string;
+    /**
+     * Дополнительный класс для аддонов
+     */
     addonsClassName?: string;
+    /**
+     * Класс, который будет установлен при фокусе
+     */
     focusedClassName?: string;
+    /**
+     * Класс, который будет установлен, если в поле есть значение
+     */
     filledClassName?: string;
+    /**
+     * Обработчик поля ввода
+     */
     onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
         value: string;
     }) => void;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
     onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Обработчик клика по полю
+     */
     onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseDown по полю
+     */
     onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Обработчик MouseUp по полю
+     */
     onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
     dataTestId?: string;
 };
-declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown"> & {
+export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size" | "defaultValue" | "onChange" | "onClick" | "onMouseDown"> & {
+    /**
+     * Значение поля ввода
+     */
     value?: string | undefined;
+    /**
+     * Начальное значение поля
+     */
     defaultValue?: string | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
     block?: boolean | undefined;
+    /**
+     * required - индикатор * лейбла для обязательного заполнения поля
+     */
     required?: boolean | undefined;
+    /**
+     * Крестик для очистки поля
+     */
     clear?: boolean | undefined;
+    /**
+     * Размер компонента
+     */
     size?: "s" | "m" | "l" | undefined;
+    /**
+     * Отображение ошибки
+     */
     error?: string | boolean | undefined;
+    /**
+     * Отображение иконки успеха
+     */
     success?: boolean | undefined;
+    /**
+     * Текст подсказки
+     */
     hint?: string | undefined;
+    /**
+     * Лейбл компонента
+     */
     label?: React.ReactNode;
+    /**
+     * Атрибут type
+     */
     type?: "number" | "text" | "tel" | "email" | "card" | "money" | "password" | undefined;
+    /**
+     * Ref для обертки input
+     */
     wrapperRef?: React.Ref<HTMLDivElement> | undefined;
+    /**
+     * Слот слева
+     */
     leftAddons?: React.ReactNode;
+    /**
+     * Слот справа
+     */
     rightAddons?: React.ReactNode;
+    /**
+     * Слот под инпутом
+     */
     bottomAddons?: React.ReactNode;
+    /**
+     * Дополнительный класс
+     */
     className?: string | undefined;
+    /**
+     * Дополнительный класс для поля
+     */
     fieldClassName?: string | undefined;
+    /**
+     * Дополнительный класс инпута
+     */
     inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для лейбла
+     */
     labelClassName?: string | undefined;
+    /**
+     * Дополнительный класс для аддонов
+     */
     addonsClassName?: string | undefined;
+    /**
+     * Класс, который будет установлен при фокусе
+     */
     focusedClassName?: string | undefined;
+    /**
+     * Класс, который будет установлен, если в поле есть значение
+     */
     filledClassName?: string | undefined;
+    /**
+     * Обработчик поля ввода
+     */
     onChange?: ((event: ChangeEvent<HTMLInputElement>, payload: {
         value: string;
     }) => void) | undefined;
+    /**
+     * Обработчик нажатия на кнопку очистки
+     */
     onClear?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Обработчик клика по полю
+     */
     onClick?: ((event: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик MouseDown по полю
+     */
     onMouseDown?: ((event: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Обработчик MouseUp по полю
+     */
     onMouseUp?: ((event: MouseEvent<HTMLDivElement>) => void) | undefined;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
     dataTestId?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
-export { InputProps, Input };

package/dist/input/component.js

@@ -1 +1,143 @@
-import{__rest as e,__assign as o}from"tslib";import a,{useRef as s,useState as l,useCallback as n,Fragment as r}from"react";import t from"react-merge-refs";import d from"classnames";import{Button as i}from"../button/component.js";import{FormControl as c}from"../form-control/component.js";import{useFocus as u}from"../hooks/useFocus/index.js";import"../loader/component.js";var m={input:"index-module_input__2DyE0",hasLabel:"index-module_hasLabel__S2DGf",block:"index-module_block__lH-Pe",clearIcon:"index-module_clearIcon__TO-Pg",errorIcon:"index-module_errorIcon__vVrYK",successIcon:"index-module_successIcon__3MPpw",focusVisible:"index-module_focusVisible__3Adls"},f=a.forwardRef((function(f,p){var b,C,N=f.size,_=void 0===N?"m":N,h=f.type,v=void 0===h?"text":h,g=f.block,x=void 0!==g&&g,k=f.bottomAddons,y=f.dataTestId,A=f.clear,I=void 0!==A&&A,w=f.disabled,E=f.error,M=f.success,L=f.required,V=f.hint,B=f.className,D=f.fieldClassName,j=f.inputClassName,F=f.labelClassName,O=f.addonsClassName,P=f.focusedClassName,q=f.filledClassName,z=f.label,R=f.maxLength,T=void 0===R?100:R,U=f.leftAddons,G=f.onFocus,H=f.onBlur,K=f.onChange,S=f.onClear,Y=f.onClick,J=f.onMouseDown,Q=f.onMouseUp,W=f.rightAddons,X=f.value,Z=f.defaultValue,$=f.wrapperRef,ee=f.readOnly,oe=e(f,["size","type","block","bottomAddons","dataTestId","clear","disabled","error","success","required","hint","className","fieldClassName","inputClassName","labelClassName","addonsClassName","focusedClassName","filledClassName","label","maxLength","leftAddons","onFocus","onBlur","onChange","onClear","onClick","onMouseDown","onMouseUp","rightAddons","value","defaultValue","wrapperRef","readOnly"]),ae=void 0===X,se=s(null),le=u(se,"keyboard")[0],ne=l(!1),re=ne[0],te=ne[1],de=l(Z||""),ie=de[0],ce=de[1],ue=Boolean(ae?ie:X),me=I&&ue&&!w&&!ee,fe=n((function(e){ee||te(!0),G&&G(e)}),[G,ee]),pe=n((function(e){te(!1),H&&H(e)}),[H]),be=n((function(e){K&&K(e,{value:e.target.value}),ae&&ce(e.target.value)}),[K,ae]),Ce=n((function(e){me&&(ae&&ce(""),S&&S(e),se.current&&!re&&se.current.focus())}),[me,re,S,ae]);return a.createElement(c,{ref:$,className:d(B,re&&P,ue&&q),fieldClassName:d(D,(b={},b[m.focusVisible]=le,b)),labelClassName:F,addonsClassName:O,size:_,block:x,required:L,disabled:w,filled:ue||re,focused:re,error:E,label:z,hint:V,leftAddons:U,rightAddons:(me||W||M)&&a.createElement(r,null,me&&a.createElement(i,{type:"button",view:"ghost",disabled:w,"aria-label":"Очистить",className:m.clearButton,onClick:Ce},a.createElement("span",{className:m.clearIcon})),M&&!E&&a.createElement("span",{className:m.successIcon}),W),bottomAddons:k,onClick:Y,onMouseDown:J,onMouseUp:Q},a.createElement("input",o({},oe,{className:d(m.input,(C={},C[m.hasLabel]=z,C),j),disabled:w,onBlur:pe,onFocus:fe,onChange:be,maxLength:T,ref:t([p,se]),type:v,value:ae?ie:X,readOnly:ee,"data-test-id":y,"data-error":!!E,"aria-label":"string"==typeof z?z:void 0})))}));f.defaultProps={type:"text",block:!1};export{f as Input};
+import { jsx as a, jsxs as et } from "react/jsx-runtime";
+import st, { useRef as ot, useState as B, useCallback as f, Fragment as at } from "react";
+import rt from "react-merge-refs";
+import b from "classnames";
+import { Button as nt } from "../button/component.js";
+import { FormControl as it } from "../form-control/component.js";
+import { useFocus as ct } from "../hooks/useFocus/index.js";
+import s from "./index.module.css.js";
+const lt = st.forwardRef(
+  ({
+    size: F = "m",
+    type: v = "text",
+    block: C = !1,
+    bottomAddons: j,
+    dataTestId: w,
+    clear: y = !1,
+    disabled: r,
+    error: u,
+    success: I,
+    required: S,
+    hint: A,
+    className: L,
+    fieldClassName: P,
+    inputClassName: q,
+    labelClassName: z,
+    addonsClassName: D,
+    focusedClassName: E,
+    filledClassName: G,
+    label: n,
+    maxLength: H = 100,
+    leftAddons: J,
+    onFocus: m,
+    onBlur: p,
+    onChange: d,
+    onClear: h,
+    onClick: K,
+    onMouseDown: M,
+    onMouseUp: Q,
+    rightAddons: N,
+    value: g,
+    defaultValue: T,
+    wrapperRef: U,
+    readOnly: i,
+    ...W
+  }, X) => {
+    const e = g === void 0, c = ot(null), [Y] = ct(c, "keyboard"), [o, R] = B(!1), [x, k] = B(T || ""), V = !!(e ? x : g), l = y && V && !r && !i, Z = f(
+      (t) => {
+        i || R(!0), m && m(t);
+      },
+      [m, i]
+    ), _ = f(
+      (t) => {
+        R(!1), p && p(t);
+      },
+      [p]
+    ), $ = f(
+      (t) => {
+        d && d(t, { value: t.target.value }), e && k(t.target.value);
+      },
+      [d, e]
+    ), O = f(
+      (t) => {
+        l && (e && k(""), h && h(t), c.current && !o && c.current.focus());
+      },
+      [l, o, h, e]
+    ), tt = () => (l || N || I) && /* @__PURE__ */ et(at, { children: [
+      l && /* @__PURE__ */ a(
+        nt,
+        {
+          type: "button",
+          view: "ghost",
+          disabled: r,
+          "aria-label": "Очистить",
+          className: s.clearButton,
+          onClick: O,
+          children: /* @__PURE__ */ a("span", { className: s.clearIcon })
+        }
+      ),
+      I && !u && /* @__PURE__ */ a("span", { className: s.successIcon }),
+      N
+    ] });
+    return /* @__PURE__ */ a(
+      it,
+      {
+        ref: U,
+        className: b(L, o && E, V && G),
+        fieldClassName: b(P, {
+          [s.focusVisible]: Y
+        }),
+        labelClassName: z,
+        addonsClassName: D,
+        size: F,
+        block: C,
+        required: S,
+        disabled: r,
+        filled: V || o,
+        focused: o,
+        error: u,
+        label: n,
+        hint: A,
+        leftAddons: J,
+        rightAddons: tt(),
+        bottomAddons: j,
+        onClick: K,
+        onMouseDown: M,
+        onMouseUp: Q,
+        children: /* @__PURE__ */ a(
+          "input",
+          {
+            ...W,
+            className: b(
+              s.input,
+              {
+                [s.hasLabel]: n
+              },
+              q
+            ),
+            disabled: r,
+            onBlur: _,
+            onFocus: Z,
+            onChange: $,
+            maxLength: H,
+            ref: rt([X, c]),
+            type: v,
+            value: e ? x : g,
+            readOnly: i,
+            "data-test-id": w,
+            "data-error": !!u,
+            "aria-label": typeof n == "string" ? n : void 0
+          }
+        )
+      }
+    );
+  }
+);
+lt.defaultProps = {
+  type: "text",
+  block: !1
+};
+export {
+  lt as Input
+};
+//# sourceMappingURL=component.js.map

package/dist/input/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../src/input/component.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    Fragment,\n    InputHTMLAttributes,\n    MouseEvent,\n    useCallback,\n    useRef,\n    useState,\n} from 'react';\nimport mergeRefs from 'react-merge-refs';\nimport cn from 'classnames';\n\nimport { Button } from '../button';\nimport { FormControl } from '../form-control';\nimport { useFocus } from '../hooks/useFocus';\n\nimport styles from './index.module.css';\n\nexport type InputProps = Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'onClick' | 'onMouseDown'\n> & {\n    /**\n     * Значение поля ввода\n     */\n    value?: string;\n\n    /**\n     * Начальное значение поля\n     */\n    defaultValue?: string;\n\n    /**\n     * Растягивает компонент на ширину контейнера\n     */\n    block?: boolean;\n\n    /**\n     * required - индикатор * лейбла для обязательного заполнения поля\n     */\n    required?: boolean;\n\n    /**\n     * Крестик для очистки поля\n     */\n    clear?: boolean;\n\n    /**\n     * Размер компонента\n     */\n    size?: 's' | 'm' | 'l';\n\n    /**\n     * Отображение ошибки\n     */\n    error?: string | boolean;\n\n    /**\n     * Отображение иконки успеха\n     */\n    success?: boolean;\n\n    /**\n     * Текст подсказки\n     */\n    hint?: string;\n\n    /**\n     * Лейбл компонента\n     */\n    label?: React.ReactNode;\n\n    /**\n     * Атрибут type\n     */\n    type?: 'number' | 'card' | 'email' | 'money' | 'password' | 'tel' | 'text';\n\n    /**\n     * Ref для обертки input\n     */\n    wrapperRef?: React.Ref<HTMLDivElement>;\n\n    /**\n     * Слот слева\n     */\n    leftAddons?: React.ReactNode;\n\n    /**\n     * Слот справа\n     */\n    rightAddons?: React.ReactNode;\n\n    /**\n     * Слот под инпутом\n     */\n    bottomAddons?: React.ReactNode;\n\n    /**\n     * Дополнительный класс\n     */\n    className?: string;\n\n    /**\n     * Дополнительный класс для поля\n     */\n    fieldClassName?: string;\n\n    /**\n     * Дополнительный класс инпута\n     */\n    inputClassName?: string;\n\n    /**\n     * Дополнительный класс для лейбла\n     */\n    labelClassName?: string;\n\n    /**\n     * Дополнительный класс для аддонов\n     */\n    addonsClassName?: string;\n\n    /**\n     * Класс, который будет установлен при фокусе\n     */\n    focusedClassName?: string;\n\n    /**\n     * Класс, который будет установлен, если в поле есть значение\n     */\n    filledClassName?: string;\n\n    /**\n     * Обработчик поля ввода\n     */\n    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: { value: string }) => void;\n\n    /**\n     * Обработчик нажатия на кнопку очистки\n     */\n    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;\n\n    /**\n     * Обработчик клика по полю\n     */\n    onClick?: (event: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик MouseDown по полю\n     */\n    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Обработчик MouseUp по полю\n     */\n    onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Идентификатор для систем автоматизированного тестирования\n     */\n    dataTestId?: string;\n};\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n    (\n        {\n            size = 'm',\n            type = 'text',\n            block = false,\n            bottomAddons,\n            dataTestId,\n            clear = false,\n            disabled,\n            error,\n            success,\n            required,\n            hint,\n            className,\n            fieldClassName,\n            inputClassName,\n            labelClassName,\n            addonsClassName,\n            focusedClassName,\n            filledClassName,\n            label,\n            maxLength = 100,\n            leftAddons,\n            onFocus,\n            onBlur,\n            onChange,\n            onClear,\n            onClick,\n            onMouseDown,\n            onMouseUp,\n            rightAddons,\n            value,\n            defaultValue,\n            wrapperRef,\n            readOnly,\n            ...restProps\n        },\n        ref,\n    ) => {\n        const uncontrolled = value === undefined;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const [focusVisible] = useFocus(inputRef, 'keyboard');\n\n        const [focused, setFocused] = useState(false);\n        const [stateValue, setStateValue] = useState(defaultValue || '');\n\n        const filled = Boolean(uncontrolled ? stateValue : value);\n        // отображаем крестик только для заполненного и активного инпута\n        const clearButtonVisible = clear && filled && !disabled && !readOnly;\n\n        const handleInputFocus = useCallback(\n            (event: React.FocusEvent<HTMLInputElement>) => {\n                if (!readOnly) {\n                    setFocused(true);\n                }\n\n                if (onFocus) {\n                    onFocus(event);\n                }\n            },\n            [onFocus, readOnly],\n        );\n\n        const handleInputBlur = useCallback(\n            (event: React.FocusEvent<HTMLInputElement>) => {\n                setFocused(false);\n\n                if (onBlur) {\n                    onBlur(event);\n                }\n            },\n            [onBlur],\n        );\n\n        const handleInputChange = useCallback(\n            (event: React.ChangeEvent<HTMLInputElement>) => {\n                if (onChange) {\n                    onChange(event, { value: event.target.value });\n                }\n\n                if (uncontrolled) {\n                    setStateValue(event.target.value);\n                }\n            },\n            [onChange, uncontrolled],\n        );\n\n        const handleClear = useCallback(\n            (event: MouseEvent<HTMLButtonElement>) => {\n                if (!clearButtonVisible) return;\n\n                if (uncontrolled) {\n                    setStateValue('');\n                }\n\n                if (onClear) {\n                    onClear(event);\n                }\n\n                if (inputRef.current && !focused) {\n                    inputRef.current.focus();\n                }\n            },\n            [clearButtonVisible, focused, onClear, uncontrolled],\n        );\n\n        const renderRightAddons = () => {\n            const addonsVisible = clearButtonVisible || rightAddons || success;\n\n            return (\n                addonsVisible && (\n                    <Fragment>\n                        { clearButtonVisible && (\n                            <Button\n                                type=\"button\"\n                                view=\"ghost\"\n                                disabled={ disabled }\n                                aria-label=\"Очистить\"\n                                className={ styles.clearButton }\n                                onClick={ handleClear }\n                            >\n                                <span className={ styles.clearIcon } />\n                            </Button>\n                        ) }\n                        { success && !error && <span className={ styles.successIcon } /> }\n                        { rightAddons }\n                    </Fragment>\n                )\n            );\n        };\n\n        return (\n            <FormControl\n                ref={ wrapperRef }\n                className={ cn(className, focused && focusedClassName, filled && filledClassName) }\n                fieldClassName={ cn(fieldClassName, {\n                    [styles.focusVisible]: focusVisible,\n                }) }\n                labelClassName={ labelClassName }\n                addonsClassName={ addonsClassName }\n                size={ size }\n                block={ block }\n                required={ required }\n                disabled={ disabled }\n                filled={ filled || focused }\n                focused={ focused }\n                error={ error }\n                label={ label }\n                hint={ hint }\n                leftAddons={ leftAddons }\n                rightAddons={ renderRightAddons() }\n                bottomAddons={ bottomAddons }\n                onClick={ onClick }\n                onMouseDown={ onMouseDown }\n                onMouseUp={ onMouseUp }\n            >\n                <input\n                    { ...restProps }\n                    className={ cn(\n                        styles.input,\n                        {\n                            [styles.hasLabel]: label,\n                        },\n                        inputClassName,\n                    ) }\n                    disabled={ disabled }\n                    onBlur={ handleInputBlur }\n                    onFocus={ handleInputFocus }\n                    onChange={ handleInputChange }\n                    maxLength={ maxLength }\n                    ref={ mergeRefs([ref, inputRef]) }\n                    type={ type }\n                    value={ uncontrolled ? stateValue : value }\n                    readOnly={ readOnly }\n                    data-test-id={ dataTestId }\n                    data-error={ !!error }\n                    aria-label={ typeof label === 'string' ? label : undefined }\n                />\n            </FormControl>\n        );\n    },\n);\n\n/**\n * Для отображения в сторибуке\n */\nInput.defaultProps = {\n    type: 'text',\n    block: false,\n};\n"],"names":["Input","React","size","type","block","bottomAddons","dataTestId","clear","disabled","error","success","required","hint","className","fieldClassName","inputClassName","labelClassName","addonsClassName","focusedClassName","filledClassName","label","maxLength","leftAddons","onFocus","onBlur","onChange","onClear","onClick","onMouseDown","onMouseUp","rightAddons","value","defaultValue","wrapperRef","readOnly","restProps","ref","uncontrolled","inputRef","useRef","focusVisible","useFocus","focused","setFocused","useState","stateValue","setStateValue","filled","clearButtonVisible","handleInputFocus","useCallback","event","handleInputBlur","handleInputChange","handleClear","renderRightAddons","Fragment","jsx","Button","styles","FormControl","cn","mergeRefs"],"mappings":"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"}

package/dist/input/index.d.ts

@@ -1 +1 @@
-export * from "./component";
+export * from './component';

package/dist/input/index.js

@@ -1 +1,5 @@
-export{Input}from"./component.js";import"tslib";import"react";import"react-merge-refs";import"classnames";import"../button/component.js";import"../hooks/useFocus/index.js";import"../loader/component.js";import"../form-control/component.js";
+import { Input as r } from "./component.js";
+export {
+  r as Input
+};
+//# sourceMappingURL=index.js.map

package/dist/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/input/index.module.css

@@ -0,0 +1 @@
+:root{--text-primary-color: var(--color-text-primary);--text-secondary-color: var(--color-text-secondary);--text-tertiary-color: var(--color-text-tertiary);--border-radius: 4px;--focus-color: var(--color-border-link);--font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, sans-serif;--disabled-cursor: not-allowed;--arrow-transform: rotate(180deg)}:root{--input-clear-icon: url(https://alfabank.st/icons/glyph_cross-circle_m.svg);--input-color: var(--color-text-primary);--input-placeholder-color: var(--color-text-secondary);--input-focus-placeholder-color: var(--color-text-tertiary);--input-with-label-placeholder-color: var(--color-text-tertiary);--input-error-icon-display: flex;--input-success-icon-display: flex;--input-error-icon: url(https://alfabank.st/icons/icon_error_s_color.svg);--input-success-icon: url(https://alfabank.st/icons/icon_ok_s_color.svg);--input-disabled-color: var(--color-text-secondary);--input-read-only-color: var(--color-text-secondary)}.index-module_input__XkSql{font-size:16px!important;line-height:20px;font-weight:400;font-family:var(--font-family);position:relative;display:block;width:100%;height:100%;color:var(--input-color);background:none;border:none;margin:0;outline:none;text-overflow:ellipsis;box-sizing:border-box;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.index-module_input__XkSql::placeholder{transition:opacity .2s ease,color .2s ease;color:var(--input-placeholder-color)}.index-module_hasLabel__3lW-T::placeholder{opacity:0;color:var(--input-with-label-placeholder-color)}.index-module_block__Lq9-V{width:100%}.index-module_clearIcon__951a-{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:block;background-image:var(--input-clear-icon);opacity:.3;transition:opacity .2s ease}.index-module_clearIcon__951a-:hover{opacity:.6}.index-module_clearIcon__951a-:active{opacity:1}.index-module_errorIcon__Z4acu{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-error-icon-display);background-image:url(https://alfabank.st/icons/icon_error_s_color.svg)}.index-module_successIcon__yfoME{width:24px;height:24px;background-repeat:no-repeat;background-position:50% 50%;display:var(--input-success-icon-display);background-image:url(https://alfabank.st/icons/icon_ok_s_color.svg)}.index-module_input__XkSql:disabled{cursor:var(--disabled-cursor);color:var(--input-disabled-color)}.index-module_input__XkSql:focus.index-module_hasLabel__3lW-T::placeholder{opacity:1}.index-module_input__XkSql:focus::placeholder{color:var(--input-focus-placeholder-color)}.index-module_focusVisible__3hinw{outline:2px solid var(--focus-color);outline-offset:2px}.index-module_input__XkSql:read-only{cursor:var(--disabled-cursor);color:var(--input-read-only-color)}.index-module_input__XkSql:read-only:focus::placeholder{color:var(--input-placeholder-color)}.index-module_hasLabel__3lW-T:read-only:focus::placeholder{opacity:0}.index-module_input__XkSql::-ms-clear{display:none;width:0;height:0}.index-module_input__XkSql:-webkit-autofill,.index-module_input__XkSql:-webkit-autofill:hover,.index-module_input__XkSql:-webkit-autofill:focus,.index-module_input__XkSql:-webkit-autofill:active{-webkit-transition:background-color 999999s ease-in-out 0s;transition:background-color 999999s ease-in-out 0s;-webkit-box-shadow:0 0 0 30px #ffffff00 inset!important}

package/dist/input/index.module.css.js

@@ -0,0 +1,17 @@
+import './index.module.css';
+const s = "index-module_input__XkSql", e = "index-module_hasLabel__3lW-T", c = "index-module_clearIcon__951a-", o = "index-module_successIcon__yfoME", n = "index-module_focusVisible__3hinw", l = {
+  input: s,
+  hasLabel: e,
+  clearIcon: c,
+  successIcon: o,
+  focusVisible: n
+};
+export {
+  c as clearIcon,
+  l as default,
+  n as focusVisible,
+  e as hasLabel,
+  s as input,
+  o as successIcon
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/input/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/input-autocomplete/autocomplete-field/index.d.ts

@@ -1,6 +1,4 @@
-/// <reference types="react" />
-import { FieldProps } from "../../select/index";
-import { InputAutocompleteProps } from "../component";
-type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
-declare const AutocompleteField: ({ label, placeholder, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => JSX.Element;
-export { AutocompleteFieldProps, AutocompleteField };
+import { FieldProps } from '../../select';
+import { InputAutocompleteProps } from '../component';
+export declare type AutocompleteFieldProps = FieldProps & Pick<InputAutocompleteProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;
+export declare const AutocompleteField: ({ label, placeholder, Arrow, Input, value, error, success, hint, disabled, readOnly, onInput, inputProps, innerProps, }: AutocompleteFieldProps) => JSX.Element;

package/dist/input-autocomplete/autocomplete-field/index.js

@@ -1 +1,66 @@
-import{__assign as o}from"tslib";import r,{useRef as e,useCallback as n}from"react";import t from"classnames";import{Input as l}from"../../input/component.js";import s from"react-merge-refs";import"../../button/component.js";import"../../hooks/useFocus/index.js";import"../../loader/component.js";import"../../form-control/component.js";var i="index-module_arrow__1XlGC",a="index-module_error__24P-U",c=function(c){var m,p=c.label,d=c.placeholder,u=c.Arrow,f=c.Input,h=void 0===f?l:f,v=c.value,b=c.error,g=c.success,_=c.hint,j=c.disabled,C=c.readOnly,k=c.onInput,w=c.inputProps,x=void 0===w?{}:w,A=c.innerProps,F=e(null),E=A.onClick,P=A.onFocus,y=j||C,I=n((function(o){E&&E(o),F.current&&F.current.focus()}),[E]);return r.createElement(h,o({},x,A,{wrapperRef:s([A.ref,x.wrapperRef]),ref:s([F,x.ref]),disabled:j,readOnly:C,block:!0,label:p,placeholder:d,error:b,success:g,hint:_,onChange:k,onClick:y?void 0:I,onFocus:y?void 0:P,autoComplete:"off",value:v,rightAddons:(u||x.rightAddons)&&r.createElement(r.Fragment,null,x.rightAddons,u&&r.createElement("span",{className:t(i,(m={},m[a]=b,m))},u))}))};export{c as AutocompleteField};
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+import j, { useRef as v, useCallback as A } from "react";
+import I from "classnames";
+import { Input as w } from "../../input/component.js";
+import l from "react-merge-refs";
+import a from "./index.module.css.js";
+const E = ({
+  label: u,
+  placeholder: d,
+  Arrow: e,
+  Input: p = w,
+  value: h,
+  error: f,
+  success: g,
+  hint: C,
+  disabled: n,
+  readOnly: m,
+  onInput: R,
+  inputProps: o = {},
+  innerProps: t
+}) => {
+  const r = v(null), { onClick: c, onFocus: k } = t, s = n || m, F = A(
+    (x) => {
+      c && c(x), r.current && r.current.focus();
+    },
+    [c]
+  );
+  return /* @__PURE__ */ i(
+    p,
+    {
+      ...o,
+      ...t,
+      wrapperRef: l([t.ref, o.wrapperRef]),
+      ref: l([r, o.ref]),
+      disabled: n,
+      readOnly: m,
+      block: !0,
+      label: u,
+      placeholder: d,
+      error: f,
+      success: g,
+      hint: C,
+      onChange: R,
+      onClick: s ? void 0 : F,
+      onFocus: s ? void 0 : k,
+      autoComplete: "off",
+      value: h,
+      rightAddons: (e || o.rightAddons) && /* @__PURE__ */ b(j.Fragment, { children: [
+        o.rightAddons,
+        e && /* @__PURE__ */ i(
+          "span",
+          {
+            className: I(a.arrow, {
+              [a.error]: f
+            }),
+            children: e
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  E as AutocompleteField
+};
+//# sourceMappingURL=index.js.map

package/dist/input-autocomplete/autocomplete-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/input-autocomplete/autocomplete-field/index.tsx"],"sourcesContent":["import React, { useCallback, useRef } from 'react';\nimport cn from 'classnames';\nimport { Input as DefaultInput } from '../../input';\nimport { FieldProps } from '../../select';\nimport mergeRefs from 'react-merge-refs';\nimport { InputAutocompleteProps } from '../component';\n\nimport styles from './index.module.css';\n\nexport type AutocompleteFieldProps = FieldProps &\n    Pick<InputAutocompleteProps, 'Input' | 'inputProps' | 'value' | 'onInput' | 'readOnly'>;\n\nexport const AutocompleteField = ({\n    label,\n    placeholder,\n    Arrow,\n    Input = DefaultInput,\n    value,\n    error,\n    success,\n    hint,\n    disabled,\n    readOnly,\n    onInput,\n    inputProps = {},\n    innerProps,\n}: AutocompleteFieldProps) => {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const { onClick, onFocus } = innerProps;\n\n    const inputDisabled = disabled || readOnly;\n\n    const handleClick = useCallback(\n        event => {\n            if (onClick) onClick(event);\n\n            if (inputRef.current) {\n                inputRef.current.focus();\n            }\n        },\n        [onClick],\n    );\n    return (\n        <Input\n            {...inputProps}\n            {...innerProps}\n            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n            // @ts-ignore\n            wrapperRef={mergeRefs([innerProps.ref, inputProps.wrapperRef])}\n            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n            // @ts-ignore\n            ref={mergeRefs([inputRef, inputProps.ref])}\n            disabled={disabled}\n            readOnly={readOnly}\n            block={true}\n            label={label}\n            placeholder={placeholder}\n            error={error}\n            success={success}\n            hint={hint}\n            onChange={onInput}\n            onClick={inputDisabled ? undefined : handleClick}\n            onFocus={inputDisabled ? undefined : onFocus}\n            autoComplete='off'\n            value={value}\n            rightAddons={\n                (Arrow || inputProps.rightAddons) && (\n                    <React.Fragment>\n                        {inputProps.rightAddons}\n                        {Arrow && (\n                            <span\n                                className={cn(styles.arrow, {\n                                    [styles.error]: error,\n                                })}\n                            >\n                                {Arrow}\n                            </span>\n                        )}\n                    </React.Fragment>\n                )\n            }\n        />\n    );\n};\n"],"names":["AutocompleteField","label","placeholder","Arrow","Input","DefaultInput","value","error","success","hint","disabled","readOnly","onInput","inputProps","innerProps","inputRef","useRef","onClick","onFocus","inputDisabled","handleClick","useCallback","event","jsx","mergeRefs","jsxs","React","cn","styles"],"mappings":";;;;;;AAYO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EAAA,OACAC,IAAQC;AAAAA,EACR,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC,IAAa,CAAA;AAAA,EACb,YAAAC;AACJ,MAA8B;AAC1B,QAAMC,IAAWC,EAAyB,IAAI,GAExC,EAAE,SAAAC,GAAS,SAAAC,EAAA,IAAYJ,GAEvBK,IAAgBT,KAAYC,GAE5BS,IAAcC;AAAA,IAChB,CAAAC,MAAS;AACL,MAAIL,OAAiBK,CAAK,GAEtBP,EAAS,WACTA,EAAS,QAAQ,MAAA;AAAA,IAEzB;AAAA,IACA,CAACE,CAAO;AAAA,EAAA;AAEZ,SACI,gBAAAM;AAAA,IAACnB;AAAAA,IAAA;AAAA,MACI,GAAGS;AAAA,MACH,GAAGC;AAAA,MAGJ,YAAYU,EAAU,CAACV,EAAW,KAAKD,EAAW,UAAU,CAAC;AAAA,MAG7D,KAAKW,EAAU,CAACT,GAAUF,EAAW,GAAG,CAAC;AAAA,MACzC,UAAAH;AAAA,MACA,UAAAC;AAAA,MACA,OAAO;AAAA,MACP,OAAAV;AAAA,MACA,aAAAC;AAAA,MACA,OAAAK;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAUG;AAAA,MACV,SAASO,IAAgB,SAAYC;AAAA,MACrC,SAASD,IAAgB,SAAYD;AAAA,MACrC,cAAa;AAAA,MACb,OAAAZ;AAAA,MACA,cACKH,KAASU,EAAW,gBACjB,gBAAAY,EAACC,EAAM,UAAN,EACI,UAAA;AAAA,QAAAb,EAAW;AAAA,QACXV,KACG,gBAAAoB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWI,EAAGC,EAAO,OAAO;AAAA,cACxB,CAACA,EAAO,KAAK,GAAGrB;AAAA,YAAA,CACnB;AAAA,YAEA,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACL,EAAA,CAER;AAAA,IAAA;AAAA,EAAA;AAKpB;"}

package/dist/input-autocomplete/autocomplete-field/index.module.css

@@ -0,0 +1 @@
+.index-module_arrow__qrJxu.index-module_error__z8Onx~*{display:none}

package/dist/input-autocomplete/autocomplete-field/index.module.css.js

@@ -0,0 +1,11 @@
+import './index.module.css';
+const r = "index-module_arrow__qrJxu", o = "index-module_error__z8Onx", e = {
+  arrow: r,
+  error: o
+};
+export {
+  r as arrow,
+  e as default,
+  o as error
+};
+//# sourceMappingURL=index.module.css.js.map

package/dist/input-autocomplete/autocomplete-field/index.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}