skillgrid 0.0.21-dev-36347-gornyi.1125678 → 0.0.21-dev-39472-brand-colors.1146058

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

@@ -0,0 +1,110 @@
+import { ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, HTMLAttributes } from 'react';
+/**
+ * Размеры для компонента InputBase
+ */
+export type InputBaseSize = 'small' | 'medium' | 'large';
+/**
+ * Типы компонентов для InputBase
+ */
+export type InputBaseComponent = 'input' | 'textarea';
+/**
+ * Базовые пропсы для компонента InputBase
+ */
+export interface InputBaseProps {
+    /** Тип компонента (input или textarea) */
+    component?: InputBaseComponent;
+    /** Размер компонента */
+    size?: InputBaseSize;
+    /** Содержимое компонента (устаревший способ) */
+    children?: ReactNode;
+    /** Дополнительные CSS классы */
+    className?: string;
+    /** Состояние ошибки */
+    error?: boolean;
+    /** Плейсхолдер для поля */
+    placeholder?: string;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Показывать ли метку (по умолчанию: true) */
+    showLabel?: boolean;
+    /** CSS классы для плавающей метки */
+    labelClassName?: string;
+    /** Вспомогательный текст под полем */
+    helper?: string;
+    /** Префикс (иконка слева) */
+    prefix?: ReactNode;
+    /** Суффикс (иконка справа) */
+    suffix?: ReactNode;
+    /** ID компонента */
+    id?: string;
+    /** Обработчик фокуса */
+    onFocus?: () => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+    /** Обработчик изменения значения */
+    onChange?: (value: string) => void;
+    /** Текущее значение */
+    value?: string;
+    /** Стили для обертки */
+    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+    /** Стили для метки */
+    labelProps?: HTMLAttributes<HTMLLabelElement>;
+    /** Стили для вспомогательного текста */
+    helperProps?: HTMLAttributes<HTMLDivElement>;
+    /** Дополнительные стили для обертки (высота, отступы) */
+    wrapperStyles?: React.CSSProperties;
+    /** Дополнительные стили для плавающей метки */
+    floatingLabelStyles?: React.CSSProperties;
+    /** Дополнительные стили для префикса */
+    prefixStyles?: React.CSSProperties;
+    /** Дополнительные стили для суффикса */
+    suffixStyles?: React.CSSProperties;
+    /** Стили для textarea элемента */
+    textareaStyles?: React.CSSProperties;
+    /** Показывать ли счетчик символов */
+    showLimit?: boolean;
+    /** Максимальная длина */
+    maxLength?: number;
+    /** Пропсы для встроенного input/textarea */
+    inputProps?: InputHTMLAttributes<HTMLInputElement> | TextareaHTMLAttributes<HTMLTextAreaElement>;
+    /** Подсказка внутри поля ввода */
+    hint?: string;
+    /** Показывать ли подсказку */
+    showHint?: boolean;
+    /** Показывать подсказку когда значение пустое */
+    showHintOnEmpty?: boolean;
+    /** Включить обрезку текста с многоточием */
+    truncate?: boolean;
+    /** Состояние ошибки для accessibility */
+    'aria-invalid'?: boolean;
+    /** ID элемента с сообщением об ошибке для accessibility */
+    'aria-errormessage'?: string;
+    /** Тип изменения размера для textarea */
+    resize?: 'fill' | 'hug' | 'fixed';
+    /** Показывать ли grip для изменения размера */
+    showGrip?: boolean;
+}
+/**
+ * Пропсы для встроенного input элемента
+ */
+export interface InputBaseInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Состояние ошибки */
+    error?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    loading?: boolean;
+}
+/**
+ * Пропсы для встроенного textarea элемента
+ */
+export interface InputBaseTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Состояние ошибки */
+    error?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    loading?: boolean;
+}

package/dist/components/InputBase/assets/GripIcon.d.ts

@@ -0,0 +1,8 @@
+interface GripIconProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+}
+export declare const GripIcon: React.FC<GripIconProps>;
+export {};

package/dist/components/InputBase/assets/SearchIcon.d.ts

@@ -0,0 +1,17 @@
+export interface SearchIconProps {
+    /** Дополнительные CSS классы */
+    className?: string;
+    /** Инлайн стили */
+    style?: React.CSSProperties;
+    /** Размер иконки */
+    size?: 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+    /** Цвет иконки */
+    color?: string;
+    /** Дополнительные пропсы */
+    [key: string]: unknown;
+}
+/**
+ * Компонент иконки поиска
+ * Принимает className и style для кастомизации
+ */
+export declare const SearchIcon: React.FC<SearchIconProps>;

package/dist/components/InputBase/assets/XIcon.d.ts

@@ -0,0 +1,18 @@
+export interface XIconProps {
+    /** Дополнительные CSS классы */
+    className?: string;
+    /** Инлайн стили */
+    style?: React.CSSProperties;
+    /** Размер иконки */
+    size?: 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+    /** Цвет иконки */
+    color?: string;
+    /** Обработчик клика */
+    onClick?: () => void;
+    /** Дополнительные пропсы */
+    [key: string]: unknown;
+}
+/**
+ * Компонент иконки X
+ */
+export declare const XIcon: React.FC<XIconProps>;

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

@@ -0,0 +1,3 @@
+export { GripIcon } from './GripIcon';
+export { SearchIcon } from './SearchIcon';
+export { XIcon } from './XIcon';

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

@@ -0,0 +1,3 @@
+export { InputBase } from './InputBase';
+export type { InputBaseProps, InputBaseComponent, InputBaseSize } from './InputBase.type';
+export { SearchIcon, XIcon, GripIcon } from './assets';

package/dist/components/InputBase/lib/constants.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Максимальная длина hint текста
+ */
+export declare const MAX_HINT_LENGTH = 30;

package/dist/components/InputBase/lib/index.d.ts

@@ -0,0 +1,4 @@
+export { useInputSync } from './useInputSync';
+export { useTextareaResize } from './useTextareaResize';
+export { useGripResize } from './useGripResize';
+export { MAX_HINT_LENGTH } from './constants';

package/dist/components/InputBase/lib/useGripResize.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Хук для обработки resize через grip
+ * @param showGrip - показывать ли grip
+ * @param disabled - отключен ли компонент
+ * @param loading - состояние загрузки
+ * @param resize - режим изменения размера
+ * @returns обработчик mousedown для grip
+ */
+export declare const useGripResize: (showGrip: boolean | undefined, disabled: boolean | undefined, loading: boolean | undefined, resize: string | undefined) => {
+    handleGripMouseDown: (e: React.MouseEvent) => void;
+};

package/dist/components/InputBase/lib/useInputSync.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Хук для синхронизации состояния HTML элемента с внешним состоянием
+ * @param value - внешнее значение
+ * @param component - тип компонента ('input' | 'textarea')
+ * @returns refs для input и textarea элементов
+ */
+export declare const useInputSync: (value: string, component: "input" | "textarea") => {
+    textareaRef: import('react').RefObject<HTMLTextAreaElement>;
+    inputRef: import('react').RefObject<HTMLInputElement>;
+    currentRef: import('react').RefObject<HTMLInputElement> | import('react').RefObject<HTMLTextAreaElement>;
+};

package/dist/components/InputBase/lib/useTextareaResize.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Хук для автоматического изменения размера textarea
+ * @param value - значение textarea
+ * @param resize - режим изменения размера
+ * @param textareaRef - ref для textarea элемента
+ */
+export declare const useTextareaResize: (value: string, resize: string | undefined, textareaRef: React.RefObject<HTMLTextAreaElement>) => {
+    resizeTextArea: () => void;
+};

package/dist/components/List/List.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { ListProps } from './List.type';
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLOListElement | HTMLUListElement>> & {
+    Item: React.FC<import('./ListItem/ListItem').ListItemProps>;
+};

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

@@ -0,0 +1,34 @@
+/**
+ * Базовые пропсы для списка (используются и для `<ul>`, и для `<ol>`).
+ */
+interface BaseListProps {
+    /** Дополнительный CSS-класс для списка */
+    className?: string;
+    /** Дочерние элементы списка (`<List.Item>` или `<li>`) */
+    children: React.ReactNode;
+    /** Размер списка, влияет на отступы и размер шрифта */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Атрибут для тестирования */
+    'data-testid'?: string;
+}
+/**
+ * Пропсы для маркированного списка (`<ul>`).
+ * Атрибут `start` запрещён.
+ */
+interface UnorderedListProps extends BaseListProps {
+    /** Тип списка — маркированный (по умолчанию) */
+    variant?: 'unordered';
+    /** Невозможен для `<ul>` */
+    start?: never;
+}
+/**
+ * Пропсы для нумерованного списка (`<ol>`).
+ */
+interface OrderedListProps extends BaseListProps {
+    /** Тип списка — нумерованный */
+    variant: 'ordered';
+    /** Начальный номер для `<ol>` */
+    start?: number;
+}
+export type ListProps = UnorderedListProps | OrderedListProps;
+export {};

package/dist/components/List/ListItem/ListItem.d.ts

@@ -0,0 +1,9 @@
+export interface ListItemProps {
+    /** Дополнительный CSS-класс для списка */
+    className?: string;
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Атрибут для тестирования */
+    'data-testid'?: string;
+}
+export declare const ListItem: React.FC<ListItemProps>;

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

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

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,21 @@
+import { RadioProps } from './Radio.type';
+export declare const RADIO_CONTAINER_TEST_PREFIX = "radio-container-";
+export declare const RADIO_LABEL_TEST_PREFIX = "radio-label";
+/**
+ * Radio компонент для user interactions
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="radio-name"
+ *   checked={checked}
+ *   value={"radio-value"}
+ *   onChange={setValue}
+ *   size="medium"
+ * >
+ *   Элемент radio
+ * </Radio>
+ * ```
+ */
+export declare const Radio: <T>(props: RadioProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

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

@@ -0,0 +1,87 @@
+export type TValue = string | number;
+export interface Option<T> {
+    /**
+     * Значение вариант
+     */
+    value: T;
+    /**
+     * Лейбл вариант
+     */
+    label?: React.ReactNode;
+    /**
+     * Активность компонента
+     * @default false
+     */
+    disabled?: boolean;
+}
+export interface RadioProps<T> {
+    /**
+     * Значение, которое представляет radio
+     */
+    value: T;
+    /**
+     * Уникальное имя для компонента
+     */
+    name: string;
+    /**
+     * Выбрано ли значение
+     * - true - отмеченный
+     * - false - не отмеченный
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Размер radio
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Вложенный компонент справа
+     */
+    label?: React.ReactNode;
+    /**
+     * Загрузка (компонент становится неактивным)
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Сообщение об ошибке
+     */
+    error?: string;
+    /**
+     * Активность компонента
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Дополнительные CSS классы для контейнера
+     */
+    containerClassName?: string;
+    /**
+     * Дополнительные CSS классы для radio
+     */
+    className?: string;
+    /**
+     * Делает кликабельным все простарнство компонента или только radio
+     * @default all
+     */
+    clickable?: 'all' | 'control';
+    /**
+     * Tab index для навигации
+     */
+    tabIndex?: number;
+    /**
+     * Формат отображения
+     */
+    mode?: 'card' | 'default';
+    /**
+     * Обработчик изменения состояния
+     * @param value - Выбранное значение
+     * @param e - ChangeEvent<HTMLInputElement>, ивент нажатия на инпут
+     */
+    onChange?: (value: T, e?: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Идентификатор для тестирования
+     */
+    ['data-testid']?: string;
+}

package/dist/components/Radio/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,21 @@
+import { RadioGroupProps } from './RadioGroup.type';
+/**
+ * RadioGroup компонент для группировки Radio
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   {...args}
+ *     layout='horizontal'
+ *    options={[
+ *     { label: 'Test 1', value: 'Test 1' },
+ *     { label: 'Test 2', value: 'Test 2', disabled: true },
+ *     { label: 'Test 3', value: 4 },
+ *   ]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * ```
+ */
+export declare const RadioGroup: <T>(props: RadioGroupProps<T> & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;

package/dist/components/Radio/RadioGroup/RadioGroup.type.d.ts

@@ -0,0 +1,19 @@
+import { Option, RadioProps } from '../Radio.type';
+export interface RadioGroupProps<T> extends Omit<RadioProps<T>, 'value' | 'label' | 'checked'> {
+    /**
+     * Список radio кнопок
+     */
+    options: Array<Option<T>>;
+    /**
+     * Значение, которое представляет radio
+     */
+    value?: T;
+    /**
+     * Направление списка радио элементов
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Список radio кнопок
+     */
+    radioClassName?: RadioProps<T>['className'];
+}

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

@@ -0,0 +1,4 @@
+export { Radio } from './Radio';
+export * from './Radio.type';
+export { RadioGroup } from './RadioGroup/RadioGroup';
+export * from './RadioGroup/RadioGroup.type';

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,6 @@
+import { TextAreaProps } from './TextArea.type';
+/**
+ * Компонент многострочного текстового поля
+ * Восстановленная версия с полной логикой стилей
+ */
+export declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,66 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+/**
+ * Размеры для компонента TextArea
+ */
+export type TextAreaSize = 'small' | 'medium';
+/**
+ * Пропсы для компонента TextArea
+ */
+export interface TextAreaProps {
+    /** Значение поля */
+    value?: string | null;
+    /** Обработчик изменения значения */
+    onChange?: (value: string | null) => void;
+    /** Плейсхолдер для поля */
+    placeholder?: string;
+    /** Максимальная длина */
+    maxLength?: number;
+    /** Минимальная длина */
+    minLength?: number;
+    /** Показывать ли лейбл (по умолчанию true) */
+    showLabel?: boolean;
+    /** Автофокус */
+    autoFocus?: boolean;
+    /** Размер компонента */
+    size?: TextAreaSize;
+    /** Состояние ошибки */
+    error?: boolean;
+    /** Отключенное состояние */
+    disabled?: boolean;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Вспомогательный текст под полем */
+    helper?: string;
+    /** Суффикс (правая иконка) */
+    suffix?: ReactNode;
+    /** Показывать ли кнопку очистки */
+    clearable?: boolean;
+    /** ID компонента */
+    id?: string;
+    /** Обработчик фокуса */
+    onFocus?: () => void;
+    /** Обработчик потери фокуса */
+    onBlur?: () => void;
+    /** Дополнительные CSS классы */
+    className?: string;
+    /** Количество строк для textarea */
+    rows?: number;
+    /** Максимальное количество строк */
+    maxRows?: number;
+    /** Показывать ли индикатор изменения размера */
+    showGrip?: boolean;
+    /** Показывать ли счетчик символов */
+    showLimit?: boolean;
+    /** Минимальная высота компонента */
+    minHeight?: number;
+    /** Тип изменения размера */
+    resize?: 'fill' | 'hug' | 'fixed';
+    /** Стили для обертки */
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Стили для лейбла */
+    labelProps?: React.HTMLAttributes<HTMLLabelElement>;
+    /** Стили для вспомогательного текста */
+    helperProps?: React.HTMLAttributes<HTMLDivElement>;
+    /** Дополнительные пропсы для элемента textarea */
+    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'placeholder' | 'maxLength' | 'minLength' | 'autoFocus' | 'rows' | 'disabled'>;
+}

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

@@ -0,0 +1,2 @@
+export { TextArea } from './TextArea';
+export type { TextAreaProps, TextAreaSize } from './TextArea.type';

package/dist/components/TextArea/lib/constants.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Константы для размеров TextArea
+ */
+export declare const SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+};
+/**
+ * Константы для позиций
+ */
+export declare const POSITIONS: {
+    readonly SMALL: "12px";
+    readonly MEDIUM: "16px";
+};
+/**
+ * Константы для размеров иконок
+ */
+export declare const ICON_SIZES: {
+    readonly SMALL: "xs";
+    readonly MEDIUM: "sm";
+};
+/**
+ * Константы для resize режимов
+ */
+export declare const RESIZE_MODES: {
+    readonly NONE: "none";
+    readonly HUG: "hug";
+    readonly FILL: "fill";
+    readonly FIXED: "fixed";
+};
+/**
+ * Константы для высот wrapper
+ */
+export declare const WRAPPER_HEIGHTS: {
+    readonly SMALL: "112px";
+    readonly MEDIUM: "56px";
+};
+/**
+ * Константы для высот textarea
+ */
+export declare const TEXTAREA_HEIGHTS: {
+    readonly SMALL: "48px";
+    readonly MEDIUM: "22px";
+};
+/**
+ * Константы для padding
+ */
+export declare const PADDING: {
+    readonly SMALL: "12px 12px 12px 12px";
+    readonly MEDIUM: "16px 16px 16px 16px";
+    readonly MEDIUM_WITH_PREFIX: "12px 16px 12px 16px";
+    readonly MEDIUM_FLOATING_LABEL: "8px 16px 8px 16px";
+};
+/**
+ * Константы для minHeight значений
+ */
+export declare const MIN_HEIGHTS: {
+    readonly SMALL: 48;
+    readonly MEDIUM: 56;
+    readonly LARGE: 112;
+};
+export type TextAreaSize = (typeof SIZES)[keyof typeof SIZES];
+export type TextAreaPosition = (typeof POSITIONS)[keyof typeof POSITIONS];
+export type TextAreaIconSize = (typeof ICON_SIZES)[keyof typeof ICON_SIZES];
+export type TextAreaResizeMode = (typeof RESIZE_MODES)[keyof typeof RESIZE_MODES];

package/dist/components/TextArea/lib/getters.d.ts

@@ -0,0 +1,38 @@
+import { TextAreaSize, TextAreaResizeMode } from './constants';
+/**
+ * Интерфейс для стилей размеров TextArea
+ */
+export interface TextAreaSizeStyles {
+    wrapperStyles: React.CSSProperties;
+    floatingLabelStyles: React.CSSProperties;
+    suffixStyles: React.CSSProperties;
+    textareaStyles: React.CSSProperties;
+}
+/**
+ * Получает высоту wrapper в зависимости от размера и minHeight
+ */
+export declare const getWrapperHeight: (size: TextAreaSize, minHeight?: number) => string;
+/**
+ * Получает высоту textarea в зависимости от размера и minHeight
+ */
+export declare const getTextareaHeight: (size: TextAreaSize, minHeight?: number) => string;
+/**
+ * Получает padding в зависимости от размера, minHeight и состояния плавающего лейбла
+ */
+export declare const getPadding: (size: TextAreaSize, minHeight?: number, shouldShowFloatingLabel?: boolean) => string;
+/**
+ * Получает размер для InputBase в зависимости от размера TextArea и minHeight
+ */
+export declare const getInputBaseSize: (size: TextAreaSize, minHeight?: number) => "small" | "medium";
+/**
+ * Получает размер иконки в зависимости от размера TextArea
+ */
+export declare const getIconSize: (size: TextAreaSize) => "xs" | "sm";
+/**
+ * Получает позицию суффикса в зависимости от размера
+ */
+export declare const getSuffixPosition: (size: TextAreaSize) => string;
+/**
+ * Основная функция для получения стилей размеров TextArea
+ */
+export declare const getSizeStyles: (size: TextAreaSize, minHeight?: number, shouldShowFloatingLabel?: boolean, resize?: TextAreaResizeMode) => TextAreaSizeStyles;

package/dist/components/TextArea/lib/index.d.ts

@@ -0,0 +1,2 @@
+export * from './constants';
+export * from './getters';

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,6 @@
+import { TextInputProps } from './TextInput.type';
+/**
+ * Компонент текстового поля ввода
+ * Построен на основе InputBase с дополнительной логикой для текстового ввода
+ */
+export declare const TextInput: import('react').ForwardRefExoticComponent<TextInputProps & import('react').RefAttributes<HTMLInputElement>>;