@cloud-ru/uikit-product-claudia 1.6.2 → 1.6.4

package/dist/esm/components/ButtonGiga/helperComponents/ButtonPrivate/types.d.ts

@@ -0,0 +1,48 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, ICON_POSITION, SIZE } from '../../constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type IconPosition = ValueOf<typeof ICON_POSITION>;
+export type Size = ValueOf<typeof SIZE>;
+export type BaseButtonProps = {
+    /** CSS-класс */
+    className?: string;
+    /** Флаг неактивности компонента */
+    disabled?: boolean;
+    /**
+     * Иконка
+     * @type ReactElement
+     */
+    icon?: ReactElement;
+    /** Позиция иконки */
+    iconPosition?: IconPosition;
+    /** Текст кнопки */
+    label?: string;
+    /** Флаг состояния загрузки */
+    loading?: boolean;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** Колбек обработки нажатия клавиши */
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    /** Колбек обработки фокуса */
+    onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    /** Колбек обработки блюра */
+    onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    /** Размер */
+    size?: Size;
+    /** Внешний вид кнопки */
+    appearance?: Appearance;
+    /** HTML-аттрибут type */
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+    /** Сделать кнопку во всю ширину */
+    fullWidth?: boolean;
+};
+export type AnchorButtonProps = {
+    /** Ссылка */
+    href?: string;
+    /** HTML-аттрибут target */
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/dist/esm/components/ButtonGiga/helperComponents/ButtonPrivate/types.js

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

package/dist/esm/components/ButtonGiga/helperComponents/ButtonPrivate/utils.d.ts

@@ -0,0 +1,11 @@
+import { ButtonPrivateProps } from './ButtonPrivate';
+import { Variant } from './constants';
+type GetVariantProps = Pick<ButtonPrivateProps, 'label' | 'icon' | 'iconPosition'>;
+export declare function getVariant({ label, icon, iconPosition }: GetVariantProps): Variant;
+type GetWrappedIconProps = Pick<ButtonPrivateProps, 'icon' | 'iconClassName' | 'loading'>;
+export declare function getWrappedIcon({ icon, iconClassName, loading }: GetWrappedIconProps): import("react/jsx-runtime").JSX.Element | undefined;
+type GetWrappedLabelProps = Pick<ButtonPrivateProps, 'label' | 'labelClassName'>;
+export declare function getWrappedLabel({ label, labelClassName }: GetWrappedLabelProps): import("react/jsx-runtime").JSX.Element | undefined;
+type GetChildrenProps = Pick<ButtonPrivateProps, 'icon' | 'label' | 'iconPosition' | 'iconClassName' | 'labelClassName' | 'loading'>;
+export declare function getChildren({ icon, label, iconPosition, iconClassName, labelClassName, loading }: GetChildrenProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ButtonGiga/helperComponents/ButtonPrivate/utils.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sun } from '@snack-uikit/loaders';
+import { ICON_POSITION } from '../../constants';
+import { Variant } from './constants';
+export function getVariant({ label, icon, iconPosition }) {
+    if (label && icon && iconPosition === ICON_POSITION.After) {
+        return Variant.IconAfter;
+    }
+    if (label && icon && iconPosition === ICON_POSITION.Before) {
+        return Variant.IconBefore;
+    }
+    if (label) {
+        return Variant.LabelOnly;
+    }
+    return Variant.IconOnly;
+}
+export function getWrappedIcon({ icon, iconClassName, loading }) {
+    if (loading) {
+        return (_jsx("span", { "data-test-id": 'loading-icon', className: iconClassName, children: _jsx(Sun, { size: 's' }) }));
+    }
+    if (icon) {
+        return (_jsx("span", { "data-test-id": 'icon', className: iconClassName, children: icon }));
+    }
+    return undefined;
+}
+export function getWrappedLabel({ label, labelClassName }) {
+    return label ? (_jsx("span", { "data-test-id": 'label', className: labelClassName, children: label })) : undefined;
+}
+export function getChildren({ icon, label, iconPosition, iconClassName, labelClassName, loading }) {
+    const wrappedIcon = getWrappedIcon({
+        icon,
+        iconClassName,
+        loading,
+    });
+    const wrappedLabel = getWrappedLabel({
+        label,
+        labelClassName,
+    });
+    switch (iconPosition) {
+        case ICON_POSITION.Before: {
+            return (_jsxs(_Fragment, { children: [wrappedIcon, wrappedLabel] }));
+        }
+        case ICON_POSITION.After:
+        default: {
+            return (_jsxs(_Fragment, { children: [wrappedLabel, wrappedIcon] }));
+        }
+    }
+}

package/dist/esm/components/ButtonGiga/helperComponents/index.d.ts

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

package/dist/esm/components/ButtonGiga/helperComponents/index.js

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

package/dist/esm/components/ButtonGiga/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ButtonGigaMama';
+export * from './ButtonGigaOutline';
+export * from './ButtonGigaFunction';

package/dist/esm/components/ButtonGiga/index.js

@@ -0,0 +1,3 @@
+export * from './ButtonGigaMama';
+export * from './ButtonGigaOutline';
+export * from './ButtonGigaFunction';

package/dist/esm/components/ButtonGiga/types.d.ts

@@ -0,0 +1,28 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE, ICON_POSITION, SIZE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;
+export type IconPosition = ValueOf<typeof ICON_POSITION>;
+export type Size = ValueOf<typeof SIZE>;
+export type BaseButtonProps = {
+    className?: string;
+    disabled?: boolean;
+    icon?: ReactElement;
+    iconPosition?: IconPosition;
+    label?: string;
+    loading?: boolean;
+    onClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    size?: Size;
+    appearance?: Appearance;
+    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+    tabIndex?: number;
+    fullWidth?: boolean;
+};
+export type AnchorButtonProps = {
+    href?: string;
+    target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/dist/esm/components/ButtonGiga/types.js

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

package/dist/esm/components/ChatStatusAnnouncement/ChatStatusAnnouncement.d.ts

@@ -0,0 +1,2 @@
+import { ChatStatusAnnouncementProps } from './types';
+export declare function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }: ChatStatusAnnouncementProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ChatStatusAnnouncement/ChatStatusAnnouncement.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { PlaceholderSVG } from '@sbercloud/uikit-product-icons';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { ANIMATION_INTERVAL } from './constants';
+import { AlertButton } from './helperComponents/AlertButton';
+import { TextContent } from './helperComponents/TextContent';
+import styles from './styled.module.css';
+import { getContent, isReactNode } from './utils';
+export function ChatStatusAnnouncement({ content, onActionClick, actionLabel, icon, layoutType, className, }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const [isAnimationEnded, setAnimationEnded] = useState(false);
+    const [mouseEntered, setMouseEntered] = useState(false);
+    const hoverRef = useRef();
+    const totalTextItems = getContent(content);
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    useEffect(() => () => clearTimeout(hoverRef.current));
+    // запуск основной анимации
+    useEffect(() => {
+        if (isReactNode(content) || isAnimationEnded || content.length <= 1)
+            return;
+        let interval;
+        if (currentIndex === content.length - 1) {
+            interval = setInterval(() => {
+                setAnimationEnded(true);
+            }, ANIMATION_INTERVAL);
+            return;
+        }
+        interval = setInterval(() => {
+            setCurrentIndex(prevIndex => (prevIndex + 1) % content.length);
+        }, ANIMATION_INTERVAL);
+        return () => clearInterval(interval);
+    }, [currentIndex, content, isAnimationEnded]);
+    // запуск анимации по ховеру
+    useEffect(() => {
+        if (!isAnimationEnded || totalTextItems.length === 1)
+            return;
+        const runForwardAnimation = () => {
+            if (hoverRef.current)
+                clearTimeout(hoverRef.current);
+            if (currentIndex === totalTextItems.length - 1)
+                return;
+            hoverRef.current = setTimeout(() => setCurrentIndex(prev => prev + 1), 300);
+        };
+        const runBackwardAnimation = () => {
+            if (hoverRef.current)
+                clearTimeout(hoverRef.current);
+            if (currentIndex <= totalTextItems.length - 2)
+                return;
+            hoverRef.current = setTimeout(() => setCurrentIndex(prev => prev - 1), 300);
+        };
+        if (mouseEntered) {
+            runForwardAnimation();
+            return;
+        }
+        runBackwardAnimation();
+    }, [currentIndex, isAnimationEnded, mouseEntered, totalTextItems.length]);
+    const onMouseEnter = () => setMouseEntered(true);
+    const onMouseLeave = () => setMouseEntered(false);
+    return (_jsxs("div", { className: cn(styles.fieldAdvice, className), "data-mobile": isMobile || undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsxs("div", { className: styles.descriptionContainer, children: [icon !== null && icon !== void 0 ? icon : _jsx(PlaceholderSVG, { size: 16 }), _jsx("div", { className: styles.animationContainer, children: totalTextItems.map((item, index) => {
+                            const currentTextNextOrPreviousStyle = index === (currentIndex - 1 + totalTextItems.length) % totalTextItems.length
+                                ? styles.textBlockPrevious
+                                : styles.textBlockNext;
+                            const currentTextStyle = index === currentIndex ? styles.textBlockCurrent : currentTextNextOrPreviousStyle;
+                            return (_jsx(TextContent, { content: item.content, className: cn(styles.textBlock, currentTextStyle) }, index));
+                        }) })] }), _jsx(AlertButton, { onClick: onActionClick, text: actionLabel, layoutType: layoutType })] }));
+}

package/dist/esm/components/ChatStatusAnnouncement/constants.d.ts

@@ -0,0 +1 @@
+export declare const ANIMATION_INTERVAL = 1900;

package/dist/esm/components/ChatStatusAnnouncement/constants.js

@@ -0,0 +1 @@
+export const ANIMATION_INTERVAL = 1900;

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/AlertButton/AlertButton.d.ts

@@ -0,0 +1,10 @@
+import { MouseEvent } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+type PrivateAlertButtonProps = {
+    text?: string;
+    onClick?(e: MouseEvent<HTMLButtonElement>): void;
+    layoutType: LayoutType;
+};
+export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
+export declare function AlertButton({ text, onClick, layoutType }: PrivateAlertButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/AlertButton/AlertButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function AlertButton({ text, onClick, layoutType }) {
+    const TypographyText = layoutType === LAYOUT_TYPE.Mobile ? Typography.SansLabelL : Typography.SansLabelM;
+    return (_jsx("button", { type: 'button', onClick: onClick, className: styles.alertButton, children: text && _jsx(TypographyText, { className: styles.text, children: text }) }));
+}

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/AlertButton/index.d.ts

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

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/AlertButton/index.js

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

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/AlertButton/styles.module.css

@@ -0,0 +1,20 @@
+.alertButton{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:16px;
+  box-sizing:border-box;
+  margin:0;
+  padding:0;
+  white-space:nowrap;
+  background:none;
+  border:0;
+}
+
+.text{
+  color:var(--sys-blue-text-support, #4877b0);
+}
+.text:hover{
+  color:var(--sys-blue-text-main, #2b537e);
+}

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type TextContent = {
+    content: ReactNode;
+    className?: string;
+};
+export declare function TextContent({ content, className }: TextContent): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export {};

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@snack-uikit/typography';
+import { isReactNode } from '../../utils';
+export function TextContent({ content, className }) {
+    if (isReactNode(content)) {
+        return content;
+    }
+    return _jsx(Typography.SansBodyS, { className: className, children: content });
+}

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/index.d.ts

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

package/dist/esm/components/ChatStatusAnnouncement/helperComponents/TextContent/index.js

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

package/dist/esm/components/ChatStatusAnnouncement/index.d.ts

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

package/dist/esm/components/ChatStatusAnnouncement/index.js

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

package/dist/esm/components/ChatStatusAnnouncement/styled.module.css

@@ -0,0 +1,62 @@
+.fieldAdvice{
+  display:flex;
+  justify-content:space-between;
+  align-items:flex-start;
+  padding:4px 8px 0px 8px;
+  height:38px;
+  max-height:38px;
+  border-radius:10px 10px 0 0;
+  border:1px solid var(--sys-blue-decor-activated, #aac4ea);
+  background-color:var(--sys-blue-decor-default, #d6e2f4);
+  box-sizing:border-box;
+}
+.fieldAdvice[data-mobile]{
+  height:44px;
+  max-height:44px;
+  border-radius:0;
+  padding:8px 16px 0px 16px;
+}
+
+.descriptionContainer{
+  display:flex;
+  justify-content:center;
+  align-items:center;
+  gap:8px;
+  width:100%;
+}
+
+.animationContainer{
+  position:relative;
+  width:100%;
+  height:16px;
+  padding:0 8px 0 0;
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  justify-content:center;
+  overflow:hidden;
+}
+
+.textBlock{
+  position:absolute;
+  padding:0 8px 0 0;
+  box-sizing:border-box;
+  transition:all 0.7s ease-in-out;
+  will-change:transform, opacity;
+}
+
+.textBlockCurrent{
+  opacity:1;
+  transform:translateY(0);
+}
+
+.textBlockPrevious{
+  opacity:0;
+  transform:translateY(-50px);
+}
+
+.textBlockNext{
+  opacity:0;
+  transform:translateY(50px);
+}

package/dist/esm/components/ChatStatusAnnouncement/types.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+export type TextItem = {
+    content: ReactNode;
+    shouldFocusOnHover?: boolean;
+};
+export type ChatStatusAnnouncementProps = {
+    icon?: ReactElement;
+    content: ReactNode | TextItem[];
+    actionLabel: string;
+    onActionClick?: () => void;
+    layoutType: LayoutType;
+    className?: string;
+};

package/dist/esm/components/ChatStatusAnnouncement/types.js

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

package/dist/esm/components/ChatStatusAnnouncement/utils/index.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+import { ChatStatusAnnouncementProps, TextItem } from '../types';
+export declare function isString(value: unknown): value is string;
+export declare function isReactNode(value: unknown): value is ReactNode;
+export declare const getContent: (textContent: ChatStatusAnnouncementProps["content"]) => TextItem[];

package/dist/esm/components/ChatStatusAnnouncement/utils/index.js

@@ -0,0 +1,38 @@
+import { isValidElement } from 'react';
+export function isString(value) {
+    return typeof value === 'string';
+}
+export function isReactNode(value) {
+    if (value === null ||
+        value === undefined ||
+        typeof value === 'boolean' ||
+        typeof value === 'string' ||
+        typeof value === 'number') {
+        return true;
+    }
+    if (isValidElement(value)) {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        return value.every(item => isReactNode(item));
+    }
+    if (value && typeof value === 'object' && 'key' in value && 'props' in value && 'type' in value) {
+        return isValidElement(value);
+    }
+    return false;
+}
+export const getContent = (textContent) => {
+    if (isReactNode(textContent))
+        return [
+            {
+                content: textContent,
+            },
+        ];
+    if (textContent.length === 1)
+        return textContent;
+    const alertTextElement = textContent.find(item => item.shouldFocusOnHover);
+    if (!alertTextElement)
+        return textContent;
+    const totalTextItems = [...textContent, { content: alertTextElement.content }];
+    return totalTextItems;
+};

package/dist/esm/components/IconGiga/IconGiga.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, SVGProps } from 'react';
+export type IconGigaProps = {
+    className?: string;
+    size?: number;
+    style?: CSSProperties;
+    withBranding?: boolean;
+} & SVGProps<SVGSVGElement>;
+export declare const IconGiga: import("react").ForwardRefExoticComponent<Omit<IconGigaProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/components/IconGiga/IconGiga.js

@@ -0,0 +1,26 @@
+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 { forwardRef } from 'react';
+import { GIGA_ICON_GRADIENT_ID, GRADIENT_PARAMS, GRADIENT_STOPS, ICON_PATH } from './constants';
+export const IconGiga = forwardRef((_a, ref) => {
+    var { size = 24, className, style, withBranding } = _a, props = __rest(_a, ["size", "className", "style", "withBranding"]);
+    const customStyle = Object.assign({}, style);
+    if (typeof size === 'number') {
+        customStyle.width = `${size}px`;
+        customStyle.height = `${size}px`;
+    }
+    if (withBranding) {
+        return (_jsxs("svg", Object.assign({ ref: ref, width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: customStyle, className: className }, props, { children: [_jsx("path", { d: ICON_PATH, fill: `url(#${GIGA_ICON_GRADIENT_ID})` }), _jsx("defs", { children: _jsx("radialGradient", Object.assign({ id: GIGA_ICON_GRADIENT_ID }, GRADIENT_PARAMS, { children: GRADIENT_STOPS.map(({ offset, stopColor }) => (_jsx("stop", { offset: offset, stopColor: stopColor }, offset))) })) })] })));
+    }
+    return (_jsx("svg", Object.assign({ ref: ref, width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', style: customStyle, className: className }, props, { children: _jsx("path", { d: ICON_PATH, fill: 'currentColor' }) })));
+});

package/dist/esm/components/IconGiga/constants.d.ts

@@ -0,0 +1,13 @@
+export declare const ICON_PATH = "M12 3C7.02902 3 3 7.0297 3 12C3 16.9703 7.0297 21 12 21C16.9703 21 21 16.9703 21 12C21 7.0297 16.9703 3 12 3ZM5.54642 10.3679C5.4259 9.98549 5.40974 9.54784 5.49794 9.0698C5.65146 8.28473 6.04938 7.48418 6.64861 6.75499L6.65737 6.74422C8.04234 4.91352 10.4521 3.82075 13.1035 3.82075C13.6503 3.82075 14.1882 3.86721 14.7121 3.95878C12.7581 4.1399 10.7436 5.00038 8.71901 6.51934C8.63283 6.58398 8.57762 6.6816 8.56752 6.78866C8.55742 6.89571 8.59243 7.00277 8.66515 7.08289C9.32566 7.8114 9.98684 8.60791 10.7443 9.59026C10.8702 9.75387 11.1011 9.78821 11.2708 9.66769C12.7979 8.57358 14.1229 7.76292 15.4062 7.14147C15.349 7.79928 14.469 8.81866 13.5493 9.58959C12.0788 10.7934 10.308 12.0451 8.32176 12.2054L8.24434 12.2121C7.95213 12.2256 7.63769 12.1912 7.31114 12.1104C6.5254 11.9091 5.83257 11.223 5.54777 10.3686L5.54642 10.3679ZM11.9939 19.7827C10.1908 19.7827 8.53183 19.1673 7.21419 18.1358C7.466 18.1587 7.73128 18.1701 8.02012 18.1701C8.26184 18.1701 8.52039 18.162 8.79846 18.1466C10.4413 18.0267 12.1394 17.5372 13.7095 16.7326C15.2971 15.9186 16.6808 14.8178 17.713 13.5459C18.3822 12.6989 19.1841 11.3974 19.4117 9.81985C19.4258 9.83938 19.44 9.85958 19.4541 9.87978C19.6494 10.5605 19.7544 11.2796 19.7544 12.0236C19.7544 16.3091 16.2802 19.7833 11.9946 19.7833L11.9939 19.7827Z";
+export declare const GIGA_ICON_GRADIENT_ID = "GIGA_ICON_GRADIENT_ID";
+export declare const GRADIENT_STOPS: {
+    offset: string;
+    stopColor: string;
+}[];
+export declare const GRADIENT_PARAMS: {
+    cx: string;
+    cy: string;
+    r: string;
+    gradientUnits: string;
+    gradientTransform: string;
+};

package/dist/esm/components/IconGiga/constants.js

@@ -0,0 +1,19 @@
+export const ICON_PATH = 'M12 3C7.02902 3 3 7.0297 3 12C3 16.9703 7.0297 21 12 21C16.9703 21 21 16.9703 21 12C21 7.0297 16.9703 3 12 3ZM5.54642 10.3679C5.4259 9.98549 5.40974 9.54784 5.49794 9.0698C5.65146 8.28473 6.04938 7.48418 6.64861 6.75499L6.65737 6.74422C8.04234 4.91352 10.4521 3.82075 13.1035 3.82075C13.6503 3.82075 14.1882 3.86721 14.7121 3.95878C12.7581 4.1399 10.7436 5.00038 8.71901 6.51934C8.63283 6.58398 8.57762 6.6816 8.56752 6.78866C8.55742 6.89571 8.59243 7.00277 8.66515 7.08289C9.32566 7.8114 9.98684 8.60791 10.7443 9.59026C10.8702 9.75387 11.1011 9.78821 11.2708 9.66769C12.7979 8.57358 14.1229 7.76292 15.4062 7.14147C15.349 7.79928 14.469 8.81866 13.5493 9.58959C12.0788 10.7934 10.308 12.0451 8.32176 12.2054L8.24434 12.2121C7.95213 12.2256 7.63769 12.1912 7.31114 12.1104C6.5254 11.9091 5.83257 11.223 5.54777 10.3686L5.54642 10.3679ZM11.9939 19.7827C10.1908 19.7827 8.53183 19.1673 7.21419 18.1358C7.466 18.1587 7.73128 18.1701 8.02012 18.1701C8.26184 18.1701 8.52039 18.162 8.79846 18.1466C10.4413 18.0267 12.1394 17.5372 13.7095 16.7326C15.2971 15.9186 16.6808 14.8178 17.713 13.5459C18.3822 12.6989 19.1841 11.3974 19.4117 9.81985C19.4258 9.83938 19.44 9.85958 19.4541 9.87978C19.6494 10.5605 19.7544 11.2796 19.7544 12.0236C19.7544 16.3091 16.2802 19.7833 11.9946 19.7833L11.9939 19.7827Z';
+export const GIGA_ICON_GRADIENT_ID = 'GIGA_ICON_GRADIENT_ID';
+export const GRADIENT_STOPS = [
+    { offset: '0.08', stopColor: '#7CB5F2' },
+    { offset: '0.17', stopColor: '#78B9EC' },
+    { offset: '0.28', stopColor: '#70C6DD' },
+    { offset: '0.38', stopColor: '#64D8C7' },
+    { offset: '0.44', stopColor: '#5FD7C2' },
+    { offset: '0.51', stopColor: '#54D5B3' },
+    { offset: '0.58', stopColor: '#40D39C' },
+    { offset: '0.66', stopColor: '#26D07C' },
+];
+export const GRADIENT_PARAMS = {
+    cx: '0',
+    cy: '0',
+    r: '1',
+    gradientUnits: 'userSpaceOnUse',
+    gradientTransform: 'translate(14.8575 6.90447) scale(16.6554)',
+};

package/dist/esm/components/IconGiga/index.d.ts

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

package/dist/esm/components/IconGiga/index.js

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

package/dist/esm/components/RecommendPannel/RecommendPanel.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipProps, ChipType, Size } from './types';
+export type RecommendPanelProps = {
+    chips: ChipProps[];
+    size: Size;
+    type?: ChipType;
+    layoutType?: LayoutType;
+    onCloseClick?: () => void;
+    onCloseChipLabel?: ReactNode;
+    tooltip?: ReactNode;
+    onClaudiaClick?: () => void;
+};
+export declare function RecommendPanel({ chips, type, size, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }: RecommendPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RecommendPannel/RecommendPanel.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { LAYOUT_TYPE } from '@sbercloud/uikit-product-utils';
+import { Chip } from './helperComponents/Chip';
+import { ClaudiaChip } from './helperComponents/ClaudiaChip';
+import { CloseChip } from './helperComponents/CloseChip';
+import { DropdownChip } from './helperComponents/DropdownChip';
+import styles from './styles.module.css';
+import { CHIP_TYPE, SIZE } from './types';
+import { getVisibleChipsCount } from './utils/gitVisibleChipsCount';
+export function RecommendPanel({ chips, type = CHIP_TYPE.Default, size = SIZE.S, layoutType, onCloseClick, onCloseChipLabel, tooltip, onClaudiaClick, }) {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [isCloseIconVisible, setCloseIconVisible] = useState(false);
+    const [chipWidths, setChipWidths] = useState([]);
+    const containerRef = useRef(null);
+    const allChipsRefs = useRef([]);
+    const isSmall = size === SIZE.S;
+    useEffect(() => {
+        if (layoutType === LAYOUT_TYPE.Mobile) {
+            setCloseIconVisible(true);
+            return;
+        }
+        setCloseIconVisible(false);
+    }, [layoutType]);
+    useEffect(() => {
+        const widths = allChipsRefs.current.map(ref => {
+            if (!ref)
+                return 0;
+            const rect = ref.getBoundingClientRect();
+            return rect.width;
+        });
+        setChipWidths(widths);
+    }, [chips, allChipsRefs]);
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        resizeObserver.observe(containerRef.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+    const visibleChipsCount = getVisibleChipsCount({
+        containerWidth,
+        chips,
+        chipWidths,
+        isSmall,
+        isCloseChipExist: Boolean(onCloseClick) && Boolean(onCloseChipLabel),
+    });
+    const visibleChips = chips.slice(0, visibleChipsCount);
+    const hiddenChips = chips.slice(visibleChipsCount);
+    const hasHiddenChips = hiddenChips.length > 0;
+    const showCloseIcon = () => {
+        if (layoutType === LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(true);
+    };
+    const hideCloseIcon = () => {
+        if (layoutType === LAYOUT_TYPE.Mobile)
+            return;
+        setCloseIconVisible(false);
+    };
+    return (_jsxs("div", { className: styles.container, ref: containerRef, onMouseEnter: showCloseIcon, onMouseLeave: hideCloseIcon, children: [_jsx(ClaudiaChip, { layoutType: layoutType, onClick: onClaudiaClick, size: size, tooltip: tooltip }), visibleChips.map((chip, index) => (_jsx(Chip, { ref: chipElement => (allChipsRefs.current[index] = chipElement), label: chip.label, size: size, type: type, layoutType: layoutType, onClick: chip.onClick }, chip.id))), hasHiddenChips && (_jsx(DropdownChip, { layoutType: layoutType, type: type, size: size, label: `+${hiddenChips.length}`, dropdownItems: hiddenChips })), onCloseClick && onCloseChipLabel && (_jsx(CloseChip, { size: size, layoutType: layoutType, content: onCloseChipLabel, onClick: onCloseClick, isVisible: isCloseIconVisible }))] }));
+}

package/dist/esm/components/RecommendPannel/helperComponents/Chip/Chip.d.ts

@@ -0,0 +1,14 @@
+import { MouseEventHandler } from 'react';
+import { LayoutType } from '@sbercloud/uikit-product-utils';
+import { ChipType, Size } from '../../types';
+type ChipProps = {
+    type: ChipType;
+    label: string;
+    onClick?: MouseEventHandler<HTMLElement>;
+    className?: string;
+    isVisible?: boolean;
+    size: Size;
+    layoutType?: LayoutType;
+};
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};