@astral/ui 4.0.0-alpha.8 → 4.0.0

package/components/AutoSaveIndicator/LoadingState/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const LoadingIcon: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/AutoSaveIndicator/LoadingState/styles.js

@@ -0,0 +1,17 @@
+import { AutosaveLoaderOutlineMd } from '../../../icons';
+import { keyframes, styled } from '../../styles';
+const loading = keyframes `
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.2;
+  }
+`;
+export const LoadingIcon = styled(AutosaveLoaderOutlineMd) `
+  width: 20px;
+  height: 20px;
+  margin: ${({ theme }) => theme.microSpacing(3)};
+
+  animation: ${loading} 1.5s infinite;
+`;

package/components/AutoSaveIndicator/SuccessState/SuccessState.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SuccessState: () => JSX.Element;

package/components/AutoSaveIndicator/SuccessState/SuccessState.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { SUCCESS_MESSAGE } from '../constants';
+import { IndicatorTypography } from '../styles';
+import { SuccessIcon } from './styles';
+export const SuccessState = () => {
+    return (_jsxs(_Fragment, { children: [_jsx(IndicatorTypography, { variant: "caption", children: SUCCESS_MESSAGE }), _jsx(SuccessIcon, {})] }));
+};

package/components/AutoSaveIndicator/SuccessState/index.d.ts

@@ -0,0 +1 @@
+export * from './SuccessState';

package/components/AutoSaveIndicator/SuccessState/index.js

@@ -0,0 +1 @@
+export * from './SuccessState';

package/components/AutoSaveIndicator/SuccessState/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const SuccessIcon: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    color?: string | undefined;
+    titleAccess?: string | undefined;
+    size?: "sm" | "md" | undefined;
+} & import("react").SVGProps<SVGSVGElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/AutoSaveIndicator/SuccessState/styles.js

@@ -0,0 +1,9 @@
+import { AutosaveOutlineMd } from '../../../icons';
+import { styled } from '../../styles';
+export const SuccessIcon = styled(AutosaveOutlineMd) `
+  width: 20px;
+  height: 20px;
+  margin: ${({ theme }) => theme.microSpacing(3)};
+
+  color: ${({ theme }) => theme.palette.green[800]};
+`;

package/components/AutoSaveIndicator/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const DEFAULT_MESSAGE = "\u0410\u0432\u0442\u043E\u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435 \u0432\u043A\u043B\u044E\u0447\u0435\u043D\u043E";
+export declare const ERROR_MESSAGE = "\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u043D\u0435 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u044B";
+export declare const SUCCESS_MESSAGE = "\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u044B";
+export declare const LOADING_MESSAGE = "\u0421\u043E\u0445\u0440\u0430\u043D\u044F\u0435\u043C...";
+export declare const AUTOSAVE_ONBOARD_KEY = "astralui-autosaveOnboard";

package/components/AutoSaveIndicator/constants.js

@@ -0,0 +1,5 @@
+export const DEFAULT_MESSAGE = 'Автосохранение включено';
+export const ERROR_MESSAGE = 'Изменения не сохранены';
+export const SUCCESS_MESSAGE = 'Изменения сохранены';
+export const LOADING_MESSAGE = 'Сохраняем...';
+export const AUTOSAVE_ONBOARD_KEY = 'astralui-autosaveOnboard';

package/components/AutoSaveIndicator/index.d.ts

@@ -0,0 +1 @@
+export * from './AutoSaveIndicator';

package/components/AutoSaveIndicator/index.js

@@ -0,0 +1 @@
+export * from './AutoSaveIndicator';

package/components/AutoSaveIndicator/styles.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopoverContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledIconButton: import("@emotion/styled").StyledComponent<Omit<import("..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "variant"> & {
+    variant?: "link" | "light" | "outlined" | "contained" | "text" | undefined;
+    loading?: boolean | undefined;
+    color?: "grey" | "error" | "success" | "warning" | "primary" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const IndicatorTypography: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+} & {
+    color?: import("../Typography").TypographyColor | undefined;
+    variant?: import("../Typography").TypographyVariant | undefined;
+    colorIntensity?: import("../Typography").Intensity | undefined;
+    component?: ("symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "clipPath" | "filter" | "marker" | "mask" | "center" | "text" | "big" | "keygen" | "menuitem" | "noindex" | "param" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentType<any>) | undefined;
+    isUpperCase?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLSpanElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/AutoSaveIndicator/styles.js

@@ -0,0 +1,24 @@
+import { IconButton } from '../IconButton';
+import { styled } from '../styles';
+import { Typography } from '../Typography';
+export const Wrapper = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: end;
+`;
+export const PopoverContent = styled.div `
+  display: flex;
+  align-items: center;
+
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
+export const StyledTypography = styled(Typography) `
+  padding-right: ${({ theme }) => theme.spacing(2)};
+`;
+export const StyledIconButton = styled(IconButton) `
+  width: 24px;
+  height: 24px;
+`;
+export const IndicatorTypography = styled(Typography) `
+  padding-right: ${({ theme }) => theme.spacing(1)};
+`;

package/components/AutoSaveIndicator/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/AutoSaveIndicator/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/AutoSaveIndicator/useLogic/useLogic.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const useLogic: () => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    handleClose: () => void;
+    popoverProps: {
+        open: boolean;
+        onClose: () => void;
+        anchorEl: HTMLDivElement | null;
+    };
+};

package/components/AutoSaveIndicator/useLogic/useLogic.js

@@ -0,0 +1,26 @@
+import { useEffect, useRef, useState } from 'react';
+import { useLocalStorage } from '../../hooks';
+import { AUTOSAVE_ONBOARD_KEY } from '../constants';
+export const useLogic = () => {
+    const [open, setOpen] = useState(false);
+    const [storageOnBoardShow, setStorageOnBoardShow] = useLocalStorage(AUTOSAVE_ONBOARD_KEY, true);
+    const ref = useRef(null);
+    useEffect(() => {
+        if (storageOnBoardShow) {
+            setOpen(true);
+        }
+    }, []);
+    const handleClose = () => {
+        setOpen(false);
+        setStorageOnBoardShow(false);
+    };
+    return {
+        ref,
+        handleClose,
+        popoverProps: {
+            open,
+            onClose: handleClose,
+            anchorEl: ref.current,
+        },
+    };
+};

package/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,92 @@
+import { type ReactNode } from 'react';
+import { type OverflowedElementProps } from '../OverflowTypography';
+import { type TextFieldProps } from '../TextField';
+import type { WithoutEmotionSpecific } from '../types';
+import { type AutocompleteRenderInputParams, type MuiAutocompleteProps } from './types';
+export type AutocompleteSize = 'small' | 'medium';
+export type AutocompleteProps<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = Omit<WithoutEmotionSpecific<MuiAutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>>, 'size' | 'renderInput' | 'noOptionsText' | 'closeText' | 'openText' | 'clearText'> & Pick<TextFieldProps, 'error' | 'success' | 'helperText' | 'label' | 'required' | 'inputRef' | 'placeholder' | 'inputProps'> & {
+    renderInput?: (props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode;
+    size?: AutocompleteSize;
+    /**
+     * Опции для OverflowTypography, который оборачивает содержимое item
+     */
+    overflowOption?: OverflowedElementProps;
+    /**
+     * Текст ошибки, который будет отображаться в меню автокомплита
+     * Пример использования: информирование пользователя о том, что АПИ
+     * используемого сервиса в текущий момент недоступно
+     */
+    loadedDataError?: string;
+    /**
+     * Если true, будет отображено сообщение об ошибке при загрузке данных
+     * в меню автокомплита
+     */
+    isLoadedDataError?: boolean;
+    /**
+     * Текст для отображения, когда нет данных
+     * @default Нет данных
+     */
+    noOptionsText?: ReactNode;
+    /**
+     * Переопределяет текст для кнопки закрытия всплывающего окна
+     * @default Закрыть
+     */
+    closeText?: string;
+    /**
+     * Переопределяет текст для кнопки открытия всплывающего окна
+     * @default Открыть
+     */
+    openText?: string;
+    /**
+     * Переопределяет текст для кнопки отчистки поля
+     * @default Очистить
+     */
+    clearText?: string;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean;
+};
+export declare const Autocomplete: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>(props: Omit<WithoutEmotionSpecific<MuiAutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo, "div">>, "size" | "clearText" | "closeText" | "noOptionsText" | "openText" | "renderInput"> & Pick<TextFieldProps, "label" | "placeholder" | "error" | "success" | "required" | "inputProps" | "inputRef" | "helperText"> & {
+    renderInput?: ((props: TextFieldProps & Omit<AutocompleteRenderInputParams, 'size'>) => ReactNode) | undefined;
+    size?: AutocompleteSize | undefined;
+    /**
+     * Опции для OverflowTypography, который оборачивает содержимое item
+     */
+    overflowOption?: OverflowedElementProps | undefined;
+    /**
+     * Текст ошибки, который будет отображаться в меню автокомплита
+     * Пример использования: информирование пользователя о том, что АПИ
+     * используемого сервиса в текущий момент недоступно
+     */
+    loadedDataError?: string | undefined;
+    /**
+     * Если true, будет отображено сообщение об ошибке при загрузке данных
+     * в меню автокомплита
+     */
+    isLoadedDataError?: boolean | undefined;
+    /**
+     * Текст для отображения, когда нет данных
+     * @default Нет данных
+     */
+    noOptionsText?: ReactNode;
+    /**
+     * Переопределяет текст для кнопки закрытия всплывающего окна
+     * @default Закрыть
+     */
+    closeText?: string | undefined;
+    /**
+     * Переопределяет текст для кнопки открытия всплывающего окна
+     * @default Открыть
+     */
+    openText?: string | undefined;
+    /**
+     * Переопределяет текст для кнопки отчистки поля
+     * @default Очистить
+     */
+    clearText?: string | undefined;
+    /**
+     * Включает/отключает резервирование места под helperText
+     */
+    hideHelperText?: boolean | undefined;
+} & import("react").RefAttributes<unknown>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,85 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListItemIcon, Popper as MuiPopper } from '@mui/material';
+import { useCallback, } from 'react';
+import { CrossOutlineMd, DownOutlineMd } from '../../icons';
+import { Checkbox } from '../Checkbox';
+import { forwardRefWithGeneric } from '../forwardRefWithGeneric';
+import { Loader } from '../Loader';
+import { OverflowTypography, } from '../OverflowTypography';
+import { Tag } from '../Tag';
+import { TextField } from '../TextField';
+import { classNames } from '../utils';
+import { DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT, DEFAULT_PLACEHOLDER, } from './constants';
+import { StyledAutocomplete, StyledMenuItem } from './styles';
+import { useLogic } from './useLogic';
+const AutocompleteInner = (props, ref) => {
+    const { isValueEmpty, isPopperVisible, autocompleteProps } = useLogic(props);
+    const { required, success, error, label, getOptionLabel, helperText, inputRef, multiple, size = 'medium', placeholder = DEFAULT_PLACEHOLDER, overflowOption, closeText = 'Закрыть', openText = 'Открыть', clearText = 'Очистить', loadingText = _jsx(Loader, {}), isLoadedDataError, loadedDataError, noOptionsText, autoHighlight, renderInput: externalRenderInput, renderTags: externalRenderTags, renderOption: externalRenderOption, inputProps, hideHelperText = false, loading } = props, restProps = __rest(props, ["required", "success", "error", "label", "getOptionLabel", "helperText", "inputRef", "multiple", "size", "placeholder", "overflowOption", "closeText", "openText", "clearText", "loadingText", "isLoadedDataError", "loadedDataError", "noOptionsText", "autoHighlight", "renderInput", "renderTags", "renderOption", "inputProps", "hideHelperText", "loading"]);
+    const renderInput = useCallback((inputParams) => {
+        var _a;
+        const generalInputParams = Object.assign(Object.assign({}, inputParams), { inputProps: Object.assign(Object.assign({}, inputParams.inputProps), { className: classNames((_a = inputParams === null || inputParams === void 0 ? void 0 : inputParams.inputProps) === null || _a === void 0 ? void 0 : _a.className, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) }), inputRef,
+            required, placeholder: isValueEmpty ? placeholder : '', label,
+            success,
+            error,
+            helperText,
+            size,
+            hideHelperText });
+        if (externalRenderInput) {
+            return externalRenderInput(generalInputParams);
+        }
+        return _jsx(TextField, Object.assign({}, generalInputParams));
+    }, [
+        isValueEmpty,
+        externalRenderInput,
+        inputRef,
+        required,
+        placeholder,
+        label,
+        success,
+        error,
+        helperText,
+        size,
+        hideHelperText,
+    ]);
+    const renderOption = useCallback((optionProps, option, optionState) => {
+        if (externalRenderOption) {
+            return externalRenderOption(optionProps, option, optionState);
+        }
+        const isSelected = Boolean(optionProps['aria-selected']);
+        const { key } = optionProps, restOptionProps = __rest(optionProps, ["key"]);
+        return (_jsxs(StyledMenuItem, Object.assign({ selected: isSelected }, restOptionProps, { children: [multiple && (_jsx(ListItemIcon, { children: _jsx(Checkbox, { role: "menuitemcheckbox", checked: isSelected }) })), _jsx(OverflowTypography, Object.assign({ rowsCount: DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT }, overflowOption, { children: optionProps.key }))] }), key));
+    }, [multiple, overflowOption, externalRenderOption]);
+    const renderTags = useCallback((tags, getTagProps, ownerSate) => {
+        if (externalRenderTags) {
+            return externalRenderTags(tags, getTagProps, ownerSate);
+        }
+        return tags.map((tag, index) => {
+            const title = (getOptionLabel === null || getOptionLabel === void 0 ? void 0 : getOptionLabel(tag)) || '';
+            const _a = getTagProps({ index }), { key } = _a, tagProps = __rest(_a, ["key"]);
+            return (_jsx(Tag, Object.assign({ variant: "light", color: "grey", label: title }, tagProps), key));
+        });
+    }, [getOptionLabel, externalRenderTags]);
+    const renderPopper = useCallback((popperProps) => {
+        if (!isPopperVisible) {
+            return null;
+        }
+        return _jsx(MuiPopper, Object.assign({}, popperProps));
+    }, [isPopperVisible]);
+    return (_jsx(StyledAutocomplete, Object.assign({}, restProps, { ref: ref, size: size, clearText: clearText, closeText: !loading ? closeText : '', openText: !loading ? openText : '', loadingText: loadingText, multiple: multiple, disableCloseOnSelect: multiple, clearIcon: _jsx(CrossOutlineMd, {}), loading: loading, popupIcon: loading ? _jsx(Loader, { color: "primary", size: "small" }) : _jsx(DownOutlineMd, {}), forcePopupIcon: true, slotProps: {
+            popper: {
+                component: renderPopper,
+            },
+        }, getOptionLabel: getOptionLabel, renderInput: renderInput, renderTags: renderTags, renderOption: renderOption }, autocompleteProps)));
+};
+export const Autocomplete = forwardRefWithGeneric(AutocompleteInner);

package/components/Autocomplete/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export declare const DEFAULT_PLACEHOLDER = "\u041D\u0430\u0447\u043D\u0438\u0442\u0435 \u0432\u0432\u043E\u0434\u0438\u0442\u044C \u0434\u043B\u044F \u043F\u043E\u0438\u0441\u043A\u0430";

package/components/Autocomplete/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT = 2;
+export const DEFAULT_PLACEHOLDER = 'Начните вводить для поиска';

package/components/Autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Autocomplete';
+export type { AutocompleteRenderGetTagProps } from './types';

package/components/Autocomplete/index.js

@@ -0,0 +1 @@
+export * from './Autocomplete';

package/components/Autocomplete/styles.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Autocomplete as MuiAutocomplete } from '@mui/material';
+export declare const StyledMenuItem: import("@emotion/styled").StyledComponent<import("..").WithoutEmotionSpecific<import("@mui/material").MenuItemProps> & {
+    disabledReason?: string | undefined;
+    note?: string | undefined;
+    tooltipPlacement?: "bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start" | undefined;
+    component?: import("react").ElementType | undefined;
+    href?: string | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
+} & import("react").RefAttributes<HTMLLIElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledAutocomplete: typeof MuiAutocomplete;

package/components/Autocomplete/styles.js

@@ -0,0 +1,24 @@
+import { autocompleteClasses, formControlClasses, iconButtonClasses, inputBaseClasses, Autocomplete as MuiAutocomplete, } from '@mui/material';
+import { MenuItem } from '../MenuItem';
+import { svgIconClassnames } from '../SvgIcon';
+import { styled } from '../styles';
+export const StyledMenuItem = styled(MenuItem) `
+    max-height: ${({ theme }) => theme.spacing(13)};
+
+    ${({ theme }) => theme.breakpoints.down('sm')} {
+        max-height: unset;
+    }
+`;
+export const StyledAutocomplete = styled(MuiAutocomplete) `
+    ${({ loading }) => {
+    return (loading &&
+        `&& .${formControlClasses.root} .${inputBaseClasses.adornedEnd} .${svgIconClassnames.root} {
+        width: 100%;
+        height: 100%;
+      }`);
+}}
+  
+  & .${autocompleteClasses.endAdornment} .${iconButtonClasses.root}:hover {
+      background-color: ${({ loading, theme }) => (loading ? 'transparent' : theme.palette.grey[100])};
+    }
+`;

package/components/Autocomplete/types.d.ts

@@ -0,0 +1 @@
+export type { AutocompleteOwnerState, AutocompleteProps as MuiAutocompleteProps, AutocompleteRenderGetTagProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, PopperProps, } from '@mui/material';

package/components/Autocomplete/types.js

@@ -0,0 +1 @@
+export {};

package/components/Autocomplete/useLogic/index.d.ts

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Autocomplete/useLogic/index.js

@@ -0,0 +1 @@
+export * from './useLogic';

package/components/Autocomplete/useLogic/useLogic.d.ts

@@ -0,0 +1,15 @@
+import { type AutocompleteInputChangeReason } from '@mui/material';
+import { type SyntheticEvent } from 'react';
+import type { AutocompleteProps } from '../Autocomplete';
+type UseLogicParams<TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AutocompleteProps<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>;
+export declare const useLogic: <TAutocompleteValueProps, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight, freeSolo, options, loading, isLoadedDataError, loadedDataError, noOptionsText, onInputChange, }: UseLogicParams<TAutocompleteValueProps, TMultiple, TDisableClearable, TFreeSolo>) => {
+    isValueEmpty: boolean;
+    isPopperVisible: boolean | undefined;
+    autocompleteProps: {
+        isOptionEqualToValue: (option: TAutocompleteValueProps, currentValue: TAutocompleteValueProps) => boolean;
+        autoHighlight: boolean;
+        noOptionsText: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | null;
+        onInputChange: (event: SyntheticEvent, currentValue: string, reason: AutocompleteInputChangeReason) => void;
+    };
+};
+export {};

package/components/Autocomplete/useLogic/useLogic.js

@@ -0,0 +1,34 @@
+import { useCallback, useState } from 'react';
+import { checkIsInputEmpty } from './utils';
+export const useLogic = ({ value, isOptionEqualToValue: externalOptionEqualToValue, autoHighlight = true, freeSolo, options, loading, isLoadedDataError, loadedDataError = 'Ошибка загрузки данных', noOptionsText = 'Нет данных', onInputChange, }) => {
+    const [innerInputValue, setInnerInputValue] = useState('');
+    const isValueEmpty = checkIsInputEmpty(value);
+    const isInnerInputValueNotEmpty = innerInputValue.length >= 1;
+    const isOptionsAvailable = options.length > 0;
+    const isPopperVisible = (loading && isOptionsAvailable) ||
+        (!loading && !isOptionsAvailable && isInnerInputValueNotEmpty) ||
+        isOptionsAvailable ||
+        isLoadedDataError;
+    const isOptionEqualToValue = useCallback((option, currentValue) => {
+        if (externalOptionEqualToValue) {
+            return externalOptionEqualToValue(option, currentValue);
+        }
+        return JSON.stringify(option) === JSON.stringify(currentValue);
+    }, [externalOptionEqualToValue]);
+    const handleInputChange = (event, currentValue, reason) => {
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(event, currentValue, reason);
+        if (!loading) {
+            setInnerInputValue(currentValue);
+        }
+    };
+    return {
+        isValueEmpty,
+        isPopperVisible,
+        autocompleteProps: {
+            isOptionEqualToValue,
+            autoHighlight: freeSolo ? false : autoHighlight,
+            noOptionsText: isLoadedDataError ? loadedDataError : noOptionsText,
+            onInputChange: handleInputChange,
+        },
+    };
+};

package/components/Autocomplete/useLogic/utils/checkIsInputEmpty/checkIsInputEmpty.d.ts

@@ -0,0 +1 @@
+export declare const checkIsInputEmpty: (value: unknown) => boolean;

package/components/Autocomplete/useLogic/utils/checkIsInputEmpty/checkIsInputEmpty.js

@@ -0,0 +1,7 @@
+export const checkIsInputEmpty = (value) => {
+    // мульти ввод
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    return !value;
+};

package/components/Autocomplete/useLogic/utils/checkIsInputEmpty/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsInputEmpty';

package/components/Autocomplete/useLogic/utils/checkIsInputEmpty/index.js

@@ -0,0 +1 @@
+export * from './checkIsInputEmpty';

package/components/Autocomplete/useLogic/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './checkIsInputEmpty';

package/components/Autocomplete/useLogic/utils/index.js

@@ -0,0 +1 @@
+export * from './checkIsInputEmpty';

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type AvatarProps } from './types';
+export declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/components/Avatar/Avatar.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Sizes } from './constants';
+import { StyledAvatar } from './styles';
+export const Avatar = forwardRef((_a, ref) => {
+    var { color, size = 'lg' } = _a, restProps = __rest(_a, ["color", "size"]);
+    return (_jsx(StyledAvatar, Object.assign({}, restProps, { sx: { background: color, width: Sizes[size], height: Sizes[size] }, ref: ref, "$size": size })));
+});

package/components/Avatar/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const Sizes: {
+    sm: number;
+    md: number;
+    lg: number;
+};

package/components/Avatar/constants.js

@@ -0,0 +1,5 @@
+export const Sizes = {
+    sm: 24,
+    md: 32,
+    lg: 40,
+};

package/components/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Avatar';
+export type { AvatarProps, AvatarSize } from './types';

package/components/Avatar/index.js

@@ -0,0 +1 @@
+export * from './Avatar';