skillgrid 0.0.25 → 0.0.27

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,9 @@
+import { FC, ReactNode } from 'react';
+interface ScrollWrapperProps {
+    children: ReactNode;
+    size: 'sm' | 'md' | 'xs';
+    withControls?: boolean;
+    className?: string;
+}
+export declare const ScrollWrapper: FC<ScrollWrapperProps>;
+export {};

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

@@ -0,0 +1,99 @@
+import { default as React, FC } from 'react';
+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 - компонент для отображения списка вкладок.
+ *
+ * Компонент связан с контекстом `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>
+ */
+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>;
+    Panel: React.FC<TabPanelProps>;
+    Bar: React.FC<TabsBarProps>;
+};
+export default Bar;