skillgrid 0.0.26 → 0.0.28-dev-41308-avatar-group.1182116

package/dist/components/Avatar/Avatar.type.d.ts

@@ -87,5 +87,7 @@ export interface AvatarGroupProps {
     overflowProps?: Omit<AvatarProps, 'size' | 'name' | 'icon' | 'shape'>;
     /** Степень перекрытия аватаров (0.25 | 0.3 | 0.5) */
     overlap?: 0.5 | 0.4 | 0.3 | 0.25 | 0.2 | 0.1;
+    /** Цвет обводки аватаров (по умолчанию берется из фона контейнера) */
+    cutoutBackground?: CSSProperties['color'];
 }
 export {};

package/dist/components/Button/Button.type.d.ts

@@ -1,85 +1,12 @@
-export type LinkSizeType = 'l' | 'm' | 's';
-/**
- * Link style variants - buttonStyle and mode combinations
- */
-type LinkStyleProps = {
-    /**
-     * Button style type
-     * @default 'neutral'
-     */
-    buttonStyle?: 'neutral';
-    /**
-     * Button variant
-     * @default 'primary'
-     */
-    mode?: 'primary' | 'secondary' | 'tertiary';
-} | {
-    /**
-     * Button style type
-     * @default 'accent'
-     */
-    buttonStyle?: 'accent' | 'positive' | 'negative' | 'contrast' | 'warning';
-    /**
-     * Button variant
-     * @default 'primary'
-     */
-    mode?: 'primary' | 'secondary';
-};
-/**
- * Link icon variants
- * - With icons: size is required
- * - Without icons: size is optional
- */
-type LinkIconVariant = {
-    /**
-     * Icons render only when size is provided.
-     * @default 'm'
-     */
-    size: LinkSizeType;
-    iconLeft?: React.ReactNode;
-    iconRight?: React.ReactNode;
-} | {
-    /** No icons in this variant */
-    size?: LinkSizeType;
-    iconLeft?: never;
-    iconRight?: never;
-};
-/**
- * Base properties common to all link variants
- */
-type LinkBaseProps = Omit<ButtonBaseProps, 'mode' | 'iconRight'> & LinkStyleProps & {
-    /**
-     * Display variant
-     */
-    displayAs: 'link';
-    /**
-     * Underline setting (only for displayAs='link')
-     * @default false
-     */
-    showUnderline?: boolean;
-    postfix?: never;
-    subcaption?: never;
-    loading?: never;
-    stretched?: never;
-};
 /**
  * Base properties common to all button variants
  */
-type ButtonBaseProps = {
-    /**
-     * Button variant
-     * @default 'primary'
-     */
-    mode?: 'primary' | 'secondary' | 'tertiary';
+type BaseProps = {
     /**
      * Disables the button
      * @default false
      */
     disabled?: boolean;
-    /**
-     * Button icon (right side)
-     */
-    iconRight?: React.ReactNode;
     /**
      * Additional CSS class
      */
@@ -97,7 +24,16 @@ type ButtonBaseProps = {
      */
     'data-testid'?: string;
 };
-type CommonProps = (ButtonBaseProps & {
+type ButtonBaseProps = BaseProps & {
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    mode?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Button icon (right side)
+     */
+    iconRight?: React.ReactNode;
     /**
      * Button style type
      * @default 'neutral'
@@ -138,17 +74,81 @@ type CommonProps = (ButtonBaseProps & {
     };
     iconLeft?: never;
     showUnderline?: never;
-}) | (LinkBaseProps & LinkIconVariant);
+};
+export type LinkSizeType = 'l' | 'm' | 's';
+/**
+ * Link style variants - buttonStyle and mode combinations
+ */
+type LinkStyleProps = {
+    /**
+     * Button style type
+     * @default 'neutral'
+     */
+    buttonStyle?: 'neutral';
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    mode?: 'primary' | 'secondary' | 'tertiary';
+} | {
+    /**
+     * Button style type
+     * @default 'accent'
+     */
+    buttonStyle?: 'accent' | 'positive' | 'negative' | 'contrast' | 'warning';
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    mode?: 'primary' | 'secondary';
+};
+/**
+ * Link icon variants
+ * - With icons: size is required
+ * - Without icons: size is optional
+ */
+type LinkIconVariant = {
+    /**
+     * Icons render only when size is provided.
+     * @default 'm'
+     */
+    size: LinkSizeType;
+    iconLeft?: React.ReactNode;
+    iconRight?: React.ReactNode;
+} | {
+    /** No icons in this variant */
+    size?: LinkSizeType;
+    iconLeft?: never;
+    iconRight?: never;
+};
+/**
+ * Base properties common to all link variants
+ */
+type LinkBaseProps = BaseProps & LinkStyleProps & {
+    /**
+     * Display variant
+     */
+    displayAs: 'link';
+    /**
+     * Underline setting (only for displayAs='link')
+     * @default false
+     */
+    showUnderline?: boolean;
+    postfix?: never;
+    subcaption?: never;
+    loading?: never;
+    stretched?: never;
+};
 /**
  * Props when rendered as a native HTMLButtonElement (default behaviour).
  */
-export type ButtonAsNativeButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonAsNativeButtonProps = ButtonBaseProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: 'button';
 };
 /**
  * Props when rendered as an anchor (HTMLAnchorElement).
  */
-export type ButtonAsAnchorProps = CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type ButtonAsAnchorProps = LinkBaseProps & LinkIconVariant & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     as: 'a';
     /**
      * External link default. If target/rel are not provided, sets target="_blank"

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,5 @@
+import { SegmentedControlProps } from './SegmentedControl.type';
+/**
+ * SegmentedControl component
+ */
+export declare const SegmentedControl: <T>(props: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/SegmentedControl/SegmentedControl.type.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+type Segment<T> = {
+    value: T;
+    label?: ReactNode;
+};
+export interface SegmentedControlProps<T> {
+    className?: string;
+    /**
+     * Размер компонента
+     */
+    size?: 's' | 'm' | 'l';
+    /**
+     * Должен ли компонент растягиваться на всю ширину контейнера
+     */
+    stretched?: boolean;
+    /**
+     * Значение
+     */
+    value?: T;
+    /**
+     * Массив сегментов
+     */
+    segments: Array<Segment<T>>;
+    /**
+     * Значение по умолчанию
+     */
+    defaultValue?: T;
+    /** Режим отображения сегментов
+     * * icon - только иконка
+     * * text - текстовый лейбл
+     */
+    mode?: 'icon' | 'label';
+    /**
+     * Хэндлер изменения активного сегмента
+     */
+    onChange?: (value: T) => void;
+}
+export {};

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl.type';

package/dist/components/Tabs/ScrollWrapper.d.ts

@@ -1,12 +1,8 @@
 import { FC, ReactNode } from 'react';
 interface ScrollWrapperProps {
-    /** дочерние элементы внутри скролл-бара */
     children: ReactNode;
-    /** size - размер компонента (элементов управления скроллом) */
     size: 'sm' | 'md' | 'xs';
-    /** включить контролы/маски (обычно на десктопе) */
     withControls?: boolean;
-    /** className для внешнего враппера (ячейка сетки) */
     className?: string;
 }
 export declare const ScrollWrapper: FC<ScrollWrapperProps>;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,43 @@
 import { default as React, FC } from 'react';
-import { TabsBarProps, TabPanelProps, TabsContentProps, TabsProviderProps } from './Tabs.type';
+import { TabsBarProps, TabPanelProps, TabsContentProps, TabsContextType, TabsProviderProps } from './Tabs.type';
+/**
+ * useTabs - кастомный хук для доступа к контексту вкладок
+ *
+ * Должен использоваться внутри TabsProvider для доступа к активной вкладке и функции её изменения
+ * Бросает ошибку, если используется вне контекста TabsProvider
+ *
+ * @returns {TabsContextType} Объект контекста с activeTab и функцией setTab
+ * @throws {Error} Если хук используется вне TabsProvider
+ *
+ * @example
+ * const { activeTab, setTab } = useTabs();
+ */
+export declare const useTabs: () => TabsContextType;
+/**
+ * TabsProvider - провайдер контекста для управления состоянием вкладок.
+ *
+ * Хранит текущую активную вкладку и предоставляет метод (`setTab`)
+ * для её изменения, доступный всем дочерним компонентам через контекст.
+ *
+ * Поддерживает как контролируемый, так и неконтролируемый режим:
+ * - Неконтролируемый: использует `defaultActiveTab`
+ * - Контролируемый: использует `activeTab` и колбэк `onChange`
+ *
+ * @param defaultActiveTab - вкладка, выбранная по умолчанию (неконтролируемый режим)
+ * @param activeTab - текущая активная вкладка (контролируемый режим)
+ * @param onChange - колбэк, вызываемый при изменении активной вкладки
+ * @param children - дочерние компоненты, которые будут иметь доступ к TabsContext
+ *
+ * @example
+ * <Tabs.Provider defaultActiveTab="tab1" onChange={(val) => console.log(val)}>
+ *   <Tabs.Bar mode="primary" items={tabItems} />
+ *   <Tabs.Content>
+ *     <Tabs.Panel tabValue="tab1">Content 1</Tabs.Panel>
+ *     <Tabs.Panel tabValue="tab2">Content 2</Tabs.Panel>
+ *   </Tabs.Content>
+ * </Tabs.Provider>
+ */
+export declare const TabsProvider: FC<TabsProviderProps>;
 /**
  * Bar - компонент для отображения списка вкладок.
  *
@@ -17,7 +55,41 @@ import { TabsBarProps, TabPanelProps, TabsContentProps, TabsProviderProps } from
  *   ]}/>
  * </Tabs.Provider>
  */
-declare const Bar: FC<TabsBarProps>;
+export declare const Bar: FC<TabsBarProps>;
+/** ====================== Секция контента ====================== */
+/**
+ * TabPanel - рендерит контент для конкретной вкладки внутри TabsContent.
+ * Отображается только панель активной вкладки.
+ * @param tabValue - идентификатор панели вкладки
+ * @param children - содержимое панели вкладки
+ * @param restProps - дополнительные пропсы, передаваемые в контейнерный div
+ *
+ * @example
+ * <TabPanel tabValue="tab1" className="p-4">
+ *   Контент для Вкладки 1
+ * </TabPanel>
+ */
+export declare const TabPanel: FC<TabPanelProps>;
+/**
+ * TabsContent - компонент для отображения панелей вкладок,
+ * связанных с активной вкладкой.
+ *
+ * Принимает дочерние элементы 'TabPanel' и отображает только тот,
+ * который соответствует текущей активной вкладке
+ *
+ * @param children - один или несколько компонентов 'TabPanel'.
+ * @param restProps - дополнительные пропсы, передаваемые в контейнерный div.
+ *
+ * @example
+ * <TabsProvider defaultActiveTab="tab1">
+ *   <TabsContent className="tab-content">
+ *     <TabPanel tabValue="tab1">Контент для Вкладки 1</TabPanel>
+ *     <TabPanel tabValue="tab2">Контент для Вкладки 2</TabPanel>
+ *   </TabsContent>
+ * </TabsProvider>
+ */
+export declare const TabsContent: FC<TabsContentProps>;
+/** ====================== Экспорт ====================== */
 export declare const Tabs: {
     Provider: React.FC<TabsProviderProps>;
     Content: React.FC<TabsContentProps>;

package/dist/components/Tabs/Tabs.type.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode, HTMLAttributes } from 'react';
-import { Nullable } from '../../types/index.ts';
+import { Nullable } from '../../../../../../src/types';
 import { BadgeProps } from '../Badge';
 /**
  * Tabs визуальный режим табов

package/dist/components/Tooltip/Tooltip.constants.d.ts

@@ -0,0 +1,8 @@
+import { BuildInPlacements } from '@rc-component/trigger';
+import { TooltipButtonConfig } from './Tooltip.type';
+export declare const TOOLTIP_PLACEMENTS_M: BuildInPlacements;
+export declare const TOOLTIP_PLACEMENTS_SMALL: BuildInPlacements;
+/**
+ * Дефолтные пресеты кнопок для каждого варианта тултипа и количества кнопок
+ */
+export declare const BUTTON_PRESETS: Record<'neutral' | 'contrast' | 'accent', Record<number, TooltipButtonConfig[]>>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from './Tooltip.type';
+/**
+ * Tooltip component to render tooltip
+ */
+export declare const Tooltip: ({ customContent, children, placement, contentClassNames, mouseEnterDelay, mouseLeaveDelay, showArrow, showClose, trigger, variant, size, text, title, media, buttons, buttonProps, onClose, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Tooltip/Tooltip.type.d.ts

@@ -0,0 +1,92 @@
+import { ReactNode } from 'react';
+import { default as RcTooltip } from 'rc-tooltip';
+import { ButtonAsNativeButtonProps } from '../Button/Button.type';
+export type TooltipVariant = 'neutral' | 'contrast' | 'accent';
+export type TooltipSize = 'xs' | 's' | 'm';
+type OneToThree<T> = [T] | [T, T] | [T, T, T];
+export type TooltipContentClassNames = {
+    mediaWrapper?: string;
+    textWrapper?: string;
+    typography?: string;
+    title?: string;
+    text?: string;
+    closeButton?: string;
+};
+export type TooltipButtonConfig = ButtonAsNativeButtonProps & {
+    closeOnClick?: boolean;
+};
+export interface TooltipCommonProps {
+    /**
+     * Вариант цветовой схемы тултипа
+     * @default 'neutral'
+     */
+    variant?: TooltipVariant;
+    /**
+     * Размер тултипа
+     * @default 's'
+     */
+    size?: TooltipSize;
+    /**
+     * Основной текст тултипа
+     */
+    text?: string;
+    /**
+     * Дополнительные CSS классы для содержимого тултипа
+     */
+    contentClassNames?: TooltipContentClassNames;
+    /**
+     * Функция закрытия тултипа
+     */
+    onClose?: () => void;
+}
+export interface TooltipSmallProps extends TooltipCommonProps {
+    size?: 'xs' | 's';
+    title?: never;
+    media?: never;
+    buttons?: never;
+    buttonProps?: never;
+    showClose?: never;
+}
+export interface TooltipMediumProps extends TooltipCommonProps {
+    size: 'm';
+    /**
+     * Заголовок тултипа (для размера m)
+     */
+    title?: string;
+    /**
+     * Медиа контент тултипа (для размера m)
+     */
+    media?: ReactNode;
+    /**
+     * Показывать кнопку закрытия тултипа (для размера m)
+     * Если выбран размер m и не переданы кнопки, то кнопка закрытия отображается по умолчанию.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Конфигурация кнопок действия, можно передать от 1 до 3 кнопок (для размера m).
+     * Каждый элемент — полноценные пропсы `Button` с возможностью переопределить любые свойства.
+     * По умолчанию используются дефолтные пресеты кнопок для каждого варианта тултипа и количества кнопок в соответствии с дизайн-системой.
+     */
+    buttons?: OneToThree<TooltipButtonConfig>;
+    /**
+     * Общие пропсы для всех кнопок (для размера m). Применяются ко всем элементам `buttons`
+     * и могут быть переопределены индивидуальными пропсами конкретной кнопки.
+     * Помогает избежать разрастания пропсов при необходимости сменить стиль у всех сразу.
+     */
+    buttonProps?: Partial<TooltipButtonConfig>;
+}
+export type TooltipBaseProps = TooltipSmallProps | TooltipMediumProps;
+export type TooltipProps = TooltipBaseProps & Omit<React.ComponentProps<typeof RcTooltip>, 'overlay'> & {
+    /**
+     * Кастомное содержимое тултипа (полностью заменяет все элементы внутри тултипа)
+     */
+    customContent?: ReactNode;
+};
+export type TooltipContentProps = TooltipBaseProps & {
+    /**
+     * Дополнительные CSS классы для содержимого тултипа
+     */
+    classNames?: TooltipContentClassNames;
+};
+export {};

package/dist/components/Tooltip/assets/index.d.ts

@@ -0,0 +1 @@
+export { CrossOutlinedIcon, TooltipArrowIcon } from './react-svg-icons';

package/dist/components/Tooltip/assets/react-svg-icons.d.ts

@@ -0,0 +1,3 @@
+declare const CrossOutlinedIcon: () => import("react/jsx-runtime").JSX.Element;
+declare const TooltipArrowIcon: () => import("react/jsx-runtime").JSX.Element;
+export { CrossOutlinedIcon, TooltipArrowIcon };

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip.type';

package/dist/hooks/useWindowEvent.d.ts

@@ -1 +1 @@
-export declare function useWindowEvent<K extends string>(type: K, listener: K extends keyof WindowEventMap ? (this: Window, ev: WindowEventMap[K]) => void : (this: Window, ev: CustomEvent) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useWindowEvent<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;