skillgrid 0.0.25 → 0.0.27

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';

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(breakpoint?: number): boolean;

package/dist/hooks/useViewPortSize.d.ts

@@ -0,0 +1,4 @@
+export declare function useViewportSize(): {
+    width: number;
+    height: number;
+};

package/dist/hooks/useWindowEvent.d.ts

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