skillgrid 0.0.25 → 0.0.26

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

@@ -5,7 +5,7 @@ import { ButtonProps } from './Button.type';
  * @component
  * @example
  * ```tsx
- * <Button mode="primary" size="medium" buttonStyle="accent">Click me</Button>
+ * <Button mode="primary" size="m" buttonStyle="accent">Click me</Button>
  * ```
  */
 export declare const Button: import('react').ForwardRefExoticComponent<(ButtonProps & {

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

@@ -1,95 +1,160 @@
-export interface ButtonCommonProps {
+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';
+} | {
     /**
-     * Размер кнопки
-     * @default 'm'
+     * Button style type
+     * @default 'accent'
      */
-    size?: 'l' | 'm' | 's' | 'xs';
+    buttonStyle?: 'accent' | 'positive' | 'negative' | 'contrast' | 'warning';
     /**
-     * Button style type
-     * @default 'neutral'
+     * Button variant
+     * @default 'primary'
      */
-    buttonStyle?: 'neutral' | 'accent' | 'positive' | 'negative' | 'special' | 'contrast';
+    mode?: 'primary' | 'secondary';
+};
+/**
+ * Link icon variants
+ * - With icons: size is required
+ * - Without icons: size is optional
+ */
+type LinkIconVariant = {
     /**
-     * Показывает состояние загрузки
-     * @default false
+     * Icons render only when size is provided.
+     * @default 'm'
      */
-    loading?: boolean;
+    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
      */
-    disabled?: boolean;
+    showUnderline?: boolean;
+    postfix?: never;
+    subcaption?: never;
+    loading?: never;
+    stretched?: never;
+};
+/**
+ * Base properties common to all button variants
+ */
+type ButtonBaseProps = {
     /**
-     * Show badge
+     * Button variant
+     * @default 'primary'
      */
-    showBadge?: boolean;
+    mode?: 'primary' | 'secondary' | 'tertiary';
     /**
-     * Badge size
+     * Disables the button
+     * @default false
      */
-    badgeSize?: 'small' | 'extra-small';
+    disabled?: boolean;
     /**
-     * Badge value
+     * Button icon (right side)
      */
-    badgeValue?: number | string;
+    iconRight?: React.ReactNode;
     /**
-     * Show subcaption
+     * Additional CSS class
      */
-    showSubcaption?: boolean;
+    className?: string;
     /**
-     * Subcaption text or node
+     * Tab index
      */
-    subcaption?: string | React.ReactNode;
+    tabIndex?: number;
     /**
-     * Stretch button to full width
-     * @default false
+     * Children content
      */
-    stretched?: boolean;
+    children?: React.ReactNode;
     /**
-     * Distribute content to both edges
-     * @default false
+     * Test ID for testing
      */
-    spaceBetween?: boolean;
+    'data-testid'?: string;
+};
+type CommonProps = (ButtonBaseProps & {
     /**
-     * Button icon
+     * Button style type
+     * @default 'neutral'
      */
-    icon?: React.ReactNode;
+    buttonStyle?: 'neutral' | 'accent' | 'positive' | 'negative' | 'contrast' | 'special';
     /**
-     * Button postfix
+     * Button size
+     * @default 'm'
      */
-    postfix?: string | React.ReactNode;
+    size?: 'l' | 'm' | 's' | 'xs';
     /**
-     * Additional CSS class
+     * Display variant
+     * @default 'button'
      */
-    className?: string;
+    displayAs?: 'button';
     /**
-     * Tab index
+     * Button postfix (only for displayAs='button')
      */
-    tabIndex?: number;
+    postfix?: React.ReactNode;
     /**
-     * Children content
+     * Subcaption text or node (only for displayAs='button')
      */
-    children?: React.ReactNode;
+    subcaption?: React.ReactNode;
     /**
-     * Test ID for testing
+     * Shows loading state
+     * @default false
      */
-    'data-testid'?: string;
-}
+    loading?: boolean;
+    /**
+     * Stretch button to full width, optionally with justify-content control
+     * @default false
+     * @example
+     * stretched={true} // Simple full width
+     * stretched={{ justify: 'space-between' }} // Full width with space-between
+     */
+    stretched?: boolean | {
+        justify: React.CSSProperties['justifyContent'];
+    };
+    iconLeft?: never;
+    showUnderline?: never;
+}) | (LinkBaseProps & LinkIconVariant);
 /**
  * Props when rendered as a native HTMLButtonElement (default behaviour).
  */
-export type ButtonAsNativeButtonProps = ButtonCommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonAsNativeButtonProps = CommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     as?: 'button';
 };
 /**
  * Props when rendered as an anchor (HTMLAnchorElement).
  */
-export type ButtonAsAnchorProps = Omit<ButtonCommonProps, 'type'> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+export type ButtonAsAnchorProps = CommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     as: 'a';
+    /**
+     * External link default. If target/rel are not provided, sets target="_blank"
+     * and adds rel="noopener noreferrer". Explicit target/rel take precedence.
+     */
+    isExternal?: boolean;
 };
 /**
  * Discriminated union tying `href` and `onClick` types to the `as` prop.
@@ -103,3 +168,16 @@ export declare const isAsLink: (props: ButtonProps) => props is ButtonAsAnchorPr
  * Runtime type guard that checks if the provided props correspond to a native button variant.
  */
 export declare const isAsButton: (props: ButtonProps) => props is ButtonAsNativeButtonProps;
+/**
+ * Runtime type guard that checks if the component should be displayed as a button.
+ */
+export declare const isDisplayAsButton: (props: ButtonProps) => props is Extract<ButtonProps, {
+    displayAs?: "button";
+}>;
+/**
+ * Runtime type guard that checks if the component should be displayed as a link.
+ */
+export declare const isDisplayAsLink: (props: ButtonProps) => props is Extract<ButtonProps, {
+    displayAs: "link";
+}>;
+export {};

package/dist/components/Button/assets/ArrowIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Arrow icon used in Button examples
+ */
+export declare const ArrowIcon: React.FC<IconProps>;

package/dist/components/Button/assets/ArrowRightIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Simple arrow right icon used in Button examples
+ */
+export declare const ArrowRightIcon: React.FC<IconProps>;

package/dist/components/Button/assets/CrossIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Cross/close icon used in Button examples
+ */
+export declare const CrossIcon: React.FC<IconProps>;

package/dist/components/Button/assets/DownloadIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Download icon used in Button examples
+ */
+export declare const DownloadIcon: React.FC<IconProps>;

package/dist/components/Button/assets/FollowIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Follow/external link icon used in Button examples
+ */
+export declare const FollowIcon: React.FC<IconProps>;

package/dist/components/Button/assets/HeartIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Heart icon used in Button examples
+ */
+export declare const HeartIcon: React.FC<IconProps>;

package/dist/components/Button/assets/LocationIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Simple location pin icon used in Button examples
+ */
+export declare const LocationIcon: React.FC<IconProps>;

package/dist/components/Button/assets/MapMarkerIcon.d.ts

@@ -0,0 +1,5 @@
+import { IconProps } from './types';
+/**
+ * Map marker icon used in Button examples
+ */
+export declare const MapMarkerIcon: React.FC<IconProps>;

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

@@ -0,0 +1,9 @@
+export type { IconProps } from './types';
+export { ArrowRightIcon } from './ArrowRightIcon';
+export { LocationIcon } from './LocationIcon';
+export { MapMarkerIcon } from './MapMarkerIcon';
+export { HeartIcon } from './HeartIcon';
+export { ArrowIcon } from './ArrowIcon';
+export { FollowIcon } from './FollowIcon';
+export { DownloadIcon } from './DownloadIcon';
+export { CrossIcon } from './CrossIcon';

package/dist/components/Button/assets/types.d.ts

@@ -0,0 +1,7 @@
+export interface IconProps {
+    width?: number;
+    height?: number;
+    className?: string;
+    color?: string;
+    [key: string]: unknown;
+}

package/dist/components/Button/lib/get-safe-props.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Filters out internal Button/Link component props from a props object.
+ * This ensures that only valid DOM attributes are forwarded to the underlying HTML element,
+ * preventing React warnings about unknown DOM properties.
+ * @param {T} props - The props object to filter
+ * @returns {Record<string, unknown>} A new object containing only safe props that can be forwarded to DOM elements
+ */
+export declare const getSafeProps: <T extends Record<string, unknown>>(props: T) => Record<string, unknown>;

package/dist/components/Button/lib/get-safe-props.test.d.ts

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

package/dist/components/Button/lib/get-typography.d.ts

@@ -0,0 +1,11 @@
+import { default as t } from '../../../styles/typography.module.css';
+import { LinkSizeType } from '../Button.type';
+type TypographyType = keyof typeof t;
+/**
+ * Maps a Link size variant to its corresponding typography CSS class name.
+ * This ensures consistent typography styling across different link sizes.
+ * @param {LinkSizeType} size - The size of the link component ('l', 'm', or 's')
+ * @returns {TypographyType} The typography class name corresponding to the given size
+ */
+declare function getTypography(size: LinkSizeType): TypographyType;
+export { getTypography };

package/dist/components/Button/lib/get-typography.test.d.ts

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

package/dist/components/Button/preview/index.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode, FC } from 'react';
+export declare const LabelChip: FC<{
+    text: string;
+}>;
+export declare const Tile: FC<{
+    title: ReactNode;
+    children: ReactNode;
+}>;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 export interface Option<T extends string | number> {
     /**
      * Значение вариант
@@ -23,6 +23,10 @@ export interface RadioProps<T> {
      * Уникальное имя для компонента
      */
     name: string;
+    /**
+     * Идентификатор компонента, иначе используется name
+     */
+    id?: string;
     /**
      * Выбрано ли значение
      * - true - отмеченный
@@ -38,7 +42,7 @@ export interface RadioProps<T> {
     /**
      * Вложенный компонент справа
      */
-    label?: ReactNode;
+    children?: ReactNode;
     /**
      * Загрузка (компонент становится неактивным)
      * @default false
@@ -74,6 +78,14 @@ export interface RadioProps<T> {
      * Формат отображения
      */
     mode?: 'card' | 'default';
+    /**
+     * Дополнительные CSS стили для контейнера
+     */
+    containerStyle?: CSSProperties;
+    /**
+     * Дополнительные CSS стили для radio
+     */
+    style?: CSSProperties;
     /**
      * Обработчик изменения состояния
      * @param value - Выбранное значение

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

@@ -1,3 +1,4 @@
+import { ReactElement, RefAttributes } from 'react';
 import { RadioGroupProps } from './RadioGroup.type';
 /**
  * RadioGroup компонент для группировки Radio
@@ -18,4 +19,4 @@ import { RadioGroupProps } from './RadioGroup.type';
  * />
  * ```
  */
-export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps<string | number> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const RadioGroup: <T extends string | number>(props: RadioGroupProps<T> & RefAttributes<HTMLInputElement>) => ReactElement | null;

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

@@ -1,5 +1,5 @@
 import { Option, RadioProps } from '../Radio.type';
-export interface RadioGroupProps<T extends string | number> extends Omit<RadioProps<T>, 'value' | 'label' | 'checked'> {
+export interface RadioGroupProps<T extends string | number> extends Omit<RadioProps<T>, 'value' | 'children' | 'checked'> {
     /**
      * Список radio кнопок
      */

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

@@ -1,4 +1,6 @@
-export { Radio } from './Radio';
+declare const Radio: (<T>(props: import('./Radio.type').RadioProps<T> & import('react').RefAttributes<HTMLInputElement>) => import('react').ReactElement | null) & {
+    Group: <T extends string | number>(props: import('.').RadioGroupProps<T> & import('react').RefAttributes<HTMLInputElement>) => import('react').ReactElement | null;
+};
 export * from './Radio.type';
-export { RadioGroup } from './RadioGroup/RadioGroup';
 export * from './RadioGroup/RadioGroup.type';
+export { Radio };

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

@@ -0,0 +1,13 @@
+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>;
+export {};

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

@@ -0,0 +1,27 @@
+import { default as React, FC } from 'react';
+import { TabsBarProps, TabPanelProps, TabsContentProps, TabsProviderProps } from './Tabs.type';
+/**
+ * Bar - компонент для отображения списка вкладок.
+ *
+ * Компонент связан с контекстом `TabsProvider` и обновляет
+ * активную вкладку при клике на элемент.
+ *
+ * @param mode - визуальный режим вкладки
+ * @param items - список вкладок для отображения
+ *
+ * @example
+ * <Tabs.Provider defaultActiveTab="tab1">
+ *   <Tabs.Bar mode="primary" items={[
+ *     { value: "tab1", label: "Tab 1" },
+ *     { value: "tab2", label: "Tab 2", postfix: "🔥" }
+ *   ]}/>
+ * </Tabs.Provider>
+ */
+declare const Bar: FC<TabsBarProps>;
+export declare const Tabs: {
+    Provider: React.FC<TabsProviderProps>;
+    Content: React.FC<TabsContentProps>;
+    Panel: React.FC<TabPanelProps>;
+    Bar: React.FC<TabsBarProps>;
+};
+export default Bar;

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

@@ -0,0 +1,199 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Nullable } from '../../types/index.ts';
+import { BadgeProps } from '../Badge';
+/**
+ * Tabs визуальный режим табов
+ * * 'primary' - навигация первого уровня (основные вкладки)
+ * * 'secondary' - навигация второго уровня (подвкладки)
+ */
+export type TabsVisualMode = 'primary' | 'secondary';
+/**
+ * Размер табов
+ * * 'md' - стандартный размер
+ * * 'sm' - уменьшенный размер
+ * * 'xs' - самый маленький размер
+ *
+ * @default 'md'
+ */
+export type TabsSize = 'md' | 'sm' | 'xs';
+/**
+ * TabsItem - представляет одну вкладку
+ */
+export interface TabsItem {
+    /**
+     * label - текстовый ярлык вкладки
+     */
+    label: string;
+    /**
+     * value - значение вкладки (используется для сравнения с activeTab)
+     */
+    value: string;
+    /**
+     * isDisabled - флаг, указывающий, что вкладка неактивна и не может быть выбрана
+     * если true, вкладка будет отображаться в стиле disabled и не будет реагировать на клики
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * showBadge - если true, будет отображаться badge
+     */
+    showBadge?: boolean;
+    /**
+     * badgeProps - свойства элемента badge (см. компонент Badge для деталей)
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * prefix - дополнительный ReactNode, например иконка или текст перед label
+     */
+    prefix?: Nullable<React.ReactNode>;
+    /**
+     * prefixWrapperProps - дополнительные пропсы для обертки prefix
+     */
+    prefixWrapperProps?: HTMLAttributes<HTMLSpanElement>;
+    /**
+     * postfix - дополнительный ReactNode, например иконка или текст после label
+     */
+    postfix?: Nullable<React.ReactNode>;
+    /**
+     * postfixWrapperProps - дополнительные пропсы для обертки postfix
+     */
+    postfixWrapperProps?: HTMLAttributes<HTMLSpanElement>;
+}
+/**
+ * TabsContextType - тип для контекста Tabs
+ */
+export interface TabsContextType {
+    /**
+     * activeTab - текущее активное значение вкладки
+     */
+    activeTab: string | undefined;
+    /**
+     * setTab - функция для смены активной вкладки по значению
+     */
+    setTab: (value: string) => void;
+}
+/**
+ * TabsProviderProps - пропсы для TabsProvider
+ */
+export interface TabsProviderProps {
+    /**
+     * children - дочерние элементы, обычно Tabs.Bar и Tabs.Content
+     */
+    children: ReactNode;
+    /**
+     * defaultActiveTab - вкладка по умолчанию (неконтролируемый режим)
+     */
+    defaultActiveTab?: string;
+    /**
+     * activeTab - активная вкладка (контролируемый режим)
+     */
+    activeTab?: string;
+    /**
+     * onChange - колбэк при смене активной вкладки
+     */
+    onChange?: (value: string) => void;
+}
+/**
+ * TabsBarProps - пропсы для компонента Tabs.Bar
+ */
+export interface TabsBarProps {
+    /**
+     * mode - визуальный режим вкладок ('primary' | 'secondary')
+     */
+    mode: TabsVisualMode;
+    /**
+     * items - список вкладок, каждый элемент — TabsItem
+     */
+    items: Array<TabsItem>;
+    /**
+     * size - размер вкладок ('md' | 'sm' | 'xs')
+     * * 'md' - стандартный размер
+     * * 'sm' - уменьшенный размер
+     * * 'xs' - самый маленький размер
+     *
+     * @default 'md'
+     */
+    size?: TabsSize;
+    /**
+     * isAllItemsDisabled - флаг, указывающий, что все элементы неактивны и не могут быть выбраны
+     * если true, все элементы будут отображаться в стиле disabled и не будут реагировать на клики
+     *
+     * @default false
+     */
+    isAllItemsDisabled?: boolean;
+}
+/**
+ * TabsItemProps - пропсы для одной вкладки (TabElement)
+ */
+export interface TabsItemProps {
+    /**
+     * mode - режим отображения по типу навигации
+     * * 'primary' - для навигации первого уровня
+     * * 'secondary' - для навигации второго уровня
+     */
+    mode: TabsVisualMode;
+    /**
+     * item - данные вкладки (label, value, badge, postfix)
+     */
+    item: TabsItem;
+    /**
+     * isActive - активна ли текущая вкладка
+     */
+    isActive: boolean;
+    /**
+     * onSelectTab - колбэк при клике на вкладку
+     * * получает значение выбранной вкладки
+     */
+    onSelectTab: (value: string) => void;
+    /**
+     * showBadge - если true, будет отображаться badge
+     */
+    showBadge?: boolean;
+    /**
+     * badgeProps - свойства элемента badge (см. компонент Badge для деталей)
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * size - размер отдельного таба ('md' | 'sm' | 'xs')
+     * * 'md' - стандартный размер
+     * * 'sm' - уменьшенный размер
+     * * 'xs' - самый маленький размер
+     *
+     * @default 'md'
+     */
+    size: TabsSize;
+    /**
+     * isDisabled - флаг, указывающий, что вкладка неактивна и не может быть выбрана
+     * если true, вкладка будет отображаться в стиле disabled и не будет реагировать на клики
+     *
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+/**
+ * Пропсы для компонента TabPanel
+ * * Наследует стандартные атрибуты div, поэтому можно передавать `className`, `style` и т.д.
+ */
+export interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * tabValue - идентификатор панели вкладки
+     * * Должен совпадать со значением соответствующей вкладки
+     */
+    tabValue: string;
+    /**
+     * children - содержимое панели вкладки
+     */
+    children?: ReactNode;
+}
+/**
+ * Пропсы для компонента TabsContent
+ * * Наследует стандартные атрибуты div, поэтому можно передавать `className`, `style` и т.д.
+ */
+export interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * children - один или несколько компонентов TabPanel
+     * * Будет отображаться только панель, чей `tabValue` совпадает с активной вкладкой
+     */
+    children: ReactNode | Array<ReactNode>;
+}

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

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

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useCustomTranslations } from './useCustomTranslations';
 export { useBackgroundColor } from './useBackgroundColor';
+export { useIsMobile } from './useIsMobile';