skillgrid 0.0.1

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

@@ -0,0 +1,105 @@
+export interface ButtonCommonProps {
+    /**
+     * Button variant
+     * @default 'primary'
+     */
+    mode?: 'primary' | 'secondary' | 'tertiary';
+    /**
+     * Размер кнопки
+     * @default 'm'
+     */
+    size?: 'l' | 'm' | 's' | 'xs';
+    /**
+     * Button style type
+     * @default 'neutral'
+     */
+    buttonStyle?: 'neutral' | 'accent' | 'positive' | 'negative' | 'special' | 'contrast';
+    /**
+     * Показывает состояние загрузки
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Делает кнопку недоступной
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Show badge
+     */
+    showBadge?: boolean;
+    /**
+     * Badge size
+     */
+    badgeSize?: 'small' | 'extra-small';
+    /**
+     * Badge value
+     */
+    badgeValue?: number | string;
+    /**
+     * Show subcaption
+     */
+    showSubcaption?: boolean;
+    /**
+     * Subcaption text or node
+     */
+    subcaption?: string | React.ReactNode;
+    /**
+     * Stretch button to full width
+     * @default false
+     */
+    stretched?: boolean;
+    /**
+     * Distribute content to both edges
+     * @default false
+     */
+    spaceBetween?: boolean;
+    /**
+     * Button icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Button postfix
+     */
+    postfix?: string | React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Tab index
+     */
+    tabIndex?: number;
+    /**
+     * Children content
+     */
+    children?: React.ReactNode;
+    /**
+     * Test ID for testing
+     */
+    'data-testid'?: string;
+}
+/**
+ * Props when rendered as a native HTMLButtonElement (default behaviour).
+ */
+export type ButtonAsNativeButtonProps = ButtonCommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: 'button';
+};
+/**
+ * Props when rendered as an anchor (HTMLAnchorElement).
+ */
+export type ButtonAsAnchorProps = Omit<ButtonCommonProps, 'type'> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    as: 'a';
+};
+/**
+ * Discriminated union tying `href` and `onClick` types to the `as` prop.
+ */
+export type ButtonProps = ButtonAsNativeButtonProps | ButtonAsAnchorProps;
+/**
+ * Runtime type guard that checks if the provided props correspond to an anchor variant of the Button.
+ */
+export declare const isAsLink: (props: ButtonProps) => props is ButtonAsAnchorProps;
+/**
+ * Runtime type guard that checks if the provided props correspond to a native button variant.
+ */
+export declare const isAsButton: (props: ButtonProps) => props is ButtonAsNativeButtonProps;

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

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

package/dist/components/ConfigProvider/ConfigProvider.d.ts

@@ -0,0 +1,13 @@
+import { ConfigProviderProps } from './ConfigProvider.type.ts';
+/**
+ * ConfigProvider позволяет централизованно переопределять CSS custom properties для всей библиотеки компонентов.
+ * Также он поддерживает настройку локалей для компонентов
+ *
+ * @component
+ * @example
+ * import enUS from 'skillgrid/locale/en_US';
+ * <ConfigProvider locale={enUS} theme={{ '--button-background-accent': '#FF0000' }}>
+ *   <Button mode="primary" buttonStyle="accent">Primary</Button>
+ * </ConfigProvider>
+ */
+export declare const ConfigProvider: ({ locale, theme, children, className, }: ConfigProviderProps) => import("react").JSX.Element;

package/dist/components/ConfigProvider/ConfigProvider.hook.d.ts

@@ -0,0 +1,4 @@
+import { ConfigContextType } from './ConfigProvider.type';
+export declare const ConfigContext: import('react').Context<ConfigContextType>;
+export declare const useConfig: () => ConfigContextType;
+export declare const useLocale: () => import('../../locale/type').ComponentLocale<unknown>;

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Locale } from '../../locale/type';
+export interface ConfigProviderProps {
+    /**
+     * The locale object containing translations for components
+     */
+    locale?: Locale;
+    /**
+     * Объект с CSS custom properties для темы
+     * Например: { '--button-background-accent': '#FF0000' }
+     */
+    theme?: Record<string, string>;
+    /**
+     */
+    children: ReactNode;
+    /**
+     * Дополнительный className для wrapper
+     */
+    className?: string;
+}
+export interface ConfigContextType {
+    locale: Locale;
+}

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

@@ -0,0 +1,3 @@
+export { ConfigProvider } from './ConfigProvider';
+export { useConfig, useLocale } from './ConfigProvider.hook';
+export type { ConfigProviderProps, ConfigContextType } from './ConfigProvider.type';

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,11 @@
+import { ImageProps } from './Image.type';
+/**
+ * Image компонент для отображения изображений
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Image src="/path/to/image.jpg" alt="Description" />
+ * ```
+ */
+export declare const Image: import('react').ForwardRefExoticComponent<ImageProps & import('react').RefAttributes<HTMLImageElement>>;

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

@@ -0,0 +1,36 @@
+export type ImageStatus = 'loading' | 'loaded' | 'error';
+export type ImageRenderMap = Record<'loader' | 'error' | 'image', React.ReactElement>;
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading' | 'alt' | 'onLoad' | 'onError' | 'width' | 'height'> {
+    /**
+     * Тип подгрузки картинки
+     * @default 'lazy'
+     */
+    loading?: React.ImgHTMLAttributes<HTMLImageElement>['loading'];
+    /**
+     * Альтернативный текст для изображения
+     * @default ''
+     */
+    alt?: React.ImgHTMLAttributes<HTMLImageElement>['alt'];
+    /**
+     * Показывает состояние загрузки
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Дополнительный CSS класс
+     */
+    className?: string;
+    /**
+     * Test ID для тестирования
+     * @default 'image'
+     */
+    'data-testid'?: string;
+    /**
+     * Callback при успешной загрузке изображения
+     */
+    onLoad?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /**
+     * Callback при ошибке загрузки изображения
+     */
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/dist/components/Image/assets/PlaceholderImageIcon.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Иконка placeholder для изображения
+ */
+export declare const PlaceholderImageIcon: React.FC<{
+    width?: number;
+    height?: number;
+    className?: string;
+    'data-testid'?: string;
+}>;

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

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

package/dist/components/LanguageSwitcher/LanguageSwitcher.d.ts

@@ -0,0 +1,14 @@
+import { LanguageSwitcherProps } from './LanguageSwitcher.type';
+/**
+ * Language switcher component for changing the current language
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <LanguageSwitcher />
+ * ```
+ *
+ * @param {LanguageSwitcherProps} props - The component props
+ * @returns {JSX.Element} A React component
+ */
+export declare const LanguageSwitcher: ({ className }: LanguageSwitcherProps) => import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+export interface LanguageSwitcherProps {
+    className?: string;
+}

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

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

package/dist/components/Loader/Loader.d.ts

@@ -0,0 +1,19 @@
+import { LoaderProps } from './Loader.type';
+/**
+ * Компонент лоадера
+ * * Если есть children - работает как контейнер с оверлеем
+ * * Если нет children - работает как спиннер
+ *
+ * @component
+ * @example
+ * * Как спиннер
+ * <Loader size={48} variant="neutral" />
+ *
+ * * Как контейнер
+ * <Loader loading={isLoading} variant="neutral">
+ *   <button>Click me</button>
+ * </Loader>
+ * ```
+ */
+declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement | SVGSVGElement>>;
+export { Loader };

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

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from 'react';
+export interface BaseLoaderProps {
+    /**
+     * Размер лоадера в пикселях
+     * @default 24
+     */
+    size?: 16 | 24 | 48 | 64 | 96;
+    /**
+     * Вариант цвета лоадера
+     * @default 'accent'
+     */
+    variant?: 'accent' | 'neutral' | 'positive' | 'negative' | 'contrast' | 'gray' | 'special';
+    /**
+     * Дополнительный CSS класс
+     */
+    className?: string;
+    /**
+     * ID для тестирования
+     */
+    'data-testid'?: string;
+    /**
+     * Инлайн стили
+     */
+    style?: React.CSSProperties;
+}
+export interface LoaderSpinnerProps extends BaseLoaderProps, HTMLAttributes<SVGSVGElement> {
+}
+export interface LoaderContainerProps extends BaseLoaderProps, HTMLAttributes<HTMLDivElement> {
+    /**
+     * Показывать ли лоадер
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Дочерние элементы
+     */
+    children?: React.ReactNode;
+}
+export type LoaderProps = LoaderSpinnerProps | LoaderContainerProps;

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

@@ -0,0 +1,2 @@
+export { Loader } from './Loader';
+export type { LoaderProps, LoaderContainerProps } from './Loader.type';

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

@@ -0,0 +1,13 @@
+export declare const PRIMARY_COLORS: {
+    pink: string;
+    red: string;
+    orange: string;
+    yellow: string;
+    green: string;
+    sky: string;
+    blue: string;
+    violet: string;
+    graphite: string;
+    gray: string;
+};
+export declare const COLOR_VARIABLES: string[];

package/dist/components/Palette/Palette.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PaletteProps } from './Palette.type';
+declare const Palette: React.FC<PaletteProps>;
+export default Palette;

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

@@ -0,0 +1,4 @@
+export interface PaletteProps {
+    className?: string;
+    preview?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { default as Palette } from './Palette';
+export type { PaletteProps } from './Palette.type';

package/dist/components/StoryComponents.d.ts

@@ -0,0 +1,295 @@
+import { default as React } from 'react';
+export declare const pageStyles: {
+    fontFamily: string;
+    color: string;
+    lineHeight: number;
+    padding: string;
+    maxWidth: string;
+    margin: string;
+};
+export declare const headerStyles: {
+    display: string;
+    flexDirection: "column";
+    alignItems: string;
+    padding: string;
+    gap: string;
+    width: string;
+    marginBottom: string;
+};
+export declare const headerTitleContainerStyles: {
+    display: string;
+    flexDirection: "column";
+    alignItems: string;
+    padding: string;
+    gap: string;
+    width: string;
+};
+export declare const headerTitleStyles: {
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    color: string;
+};
+export declare const headerSubtitleStyles: {
+    width: string;
+    maxWidth: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+};
+export declare const headerDescriptionStyles: {
+    width: string;
+    maxWidth: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    color: string;
+};
+export declare const sectionStyles: {
+    marginBottom: string;
+    padding: string;
+};
+export declare const sectionTitleStyles: {
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+    marginBottom: string;
+};
+export declare const subSectionTitleStyles: {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    lineHeight: string;
+    marginBottom: string;
+    marginTop: string;
+    color: string;
+};
+export declare const paragraphStyles: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+    marginBottom: string;
+};
+export declare const listStyles: {
+    marginBottom: string;
+    paddingLeft: string;
+};
+export declare const listItemStyles: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+    marginBottom: string;
+};
+export declare const dividerStyles: {
+    borderBottom: string;
+    margin: string;
+    width: string;
+};
+export declare const codeBlockStyles: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    backgroundColor: string;
+    padding: string;
+    borderRadius: string;
+    marginBottom: string;
+    overflow: string;
+    width: string;
+    color: string;
+};
+export declare const gridStyles: {
+    display: string;
+    gridTemplateColumns: string;
+    gap: string;
+    width: string;
+    marginBottom: string;
+};
+export declare const rowStyles: {
+    display: string;
+    flexWrap: "wrap";
+    gap: string;
+    marginBottom: string;
+};
+export declare const variantContainerStyles: {
+    boxSizing: "border-box";
+    display: string;
+    flexDirection: "column";
+    alignItems: string;
+    padding: string;
+    width: string;
+    height: string;
+    background: string;
+    border: string;
+    boxShadow: string;
+    borderRadius: string;
+    marginBottom: string;
+};
+export declare const darkVariantContainerStyles: {
+    background: string;
+    border: string;
+    boxSizing: "border-box";
+    display: string;
+    flexDirection: "column";
+    alignItems: string;
+    padding: string;
+    width: string;
+    height: string;
+    boxShadow: string;
+    borderRadius: string;
+    marginBottom: string;
+};
+export declare const variantDemoStyles: {
+    boxSizing: "border-box";
+    display: string;
+    flexDirection: "column";
+    justifyContent: string;
+    alignItems: string;
+    padding: string;
+    gap: string;
+    width: string;
+    height: string;
+    borderBottom: string;
+};
+export declare const darkVariantDemoStyles: {
+    borderBottom: string;
+    boxSizing: "border-box";
+    display: string;
+    flexDirection: "column";
+    justifyContent: string;
+    alignItems: string;
+    padding: string;
+    gap: string;
+    width: string;
+    height: string;
+};
+export declare const variantInfoStyles: {
+    display: string;
+    flexDirection: "column";
+    alignItems: string;
+    padding: string;
+    gap: string;
+    width: string;
+    height: string;
+};
+export declare const variantTitleStyles: {
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    color: string;
+};
+export declare const darkVariantTitleStyles: {
+    color: string;
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+};
+export declare const variantDescriptionStyles: {
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    color: string;
+};
+export declare const darkVariantDescriptionStyles: {
+    color: string;
+    width: string;
+    fontFamily: string;
+    fontStyle: string;
+    fontWeight: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+};
+export declare const tableStyles: {
+    width: string;
+    borderCollapse: "collapse";
+    marginBottom: string;
+    fontSize: string;
+    border: string;
+    borderRadius: string;
+    overflow: string;
+};
+export declare const tableCellStyles: {
+    padding: string;
+    textAlign: "left";
+    borderBottom: string;
+    color: string;
+    fontSize: string;
+    lineHeight: string;
+    fontFamily: string;
+};
+export declare const tableHeaderStyles: {
+    fontWeight: string;
+    background: string;
+    color: string;
+    padding: string;
+    textAlign: "left";
+    borderBottom: string;
+    fontSize: string;
+    lineHeight: string;
+    fontFamily: string;
+};
+export declare const Header: ({ title, subtitle, description, }: {
+    title: string;
+    subtitle?: string;
+    description?: string;
+}) => React.JSX.Element;
+export declare const Section: ({ title, children }: {
+    title: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const SubSection: ({ title, children }: {
+    title: string;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Paragraph: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const List: ({ items }: {
+    items: React.ReactNode[];
+}) => React.JSX.Element;
+export declare const Divider: () => React.JSX.Element;
+export declare const CodeBlock: ({ content }: {
+    content: string;
+}) => React.JSX.Element;
+export declare const Grid: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Row: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Variant: ({ title, paramText, dark, children, }: {
+    title: string;
+    paramText?: string;
+    dark?: boolean;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const Table: ({ headers, rows }: {
+    headers: string[];
+    rows: React.ReactNode[][];
+}) => React.JSX.Element;

package/dist/hooks/index.d.ts

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

package/dist/hooks/useBackgroundColor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Хук для определения фонового цвета элемента.
+ * @returns {Object} Объект с ref (для привязки к элементу) и bgColor (цвет фона или null).
+ * @property {React.RefObject<HTMLDivElement>} ref - Ref для привязки к целевому элементу.
+ * @property {string | null} bgColor - Цвет фона элемента или null, если фон прозрачный.
+ *  @example:
+ * const Component = () => {
+ *   const { ref, bgColor } = useBackgroundColor();
+ *
+ *   return (
+ *     <div ref={ref}>
+ *       <p>Фон этого элемента: {bgColor || 'прозрачный'}</p>
+ *   </div>
+ * );
+ * };
+ */
+export declare const useBackgroundColor: () => {
+    ref: import('react').RefObject<HTMLDivElement>;
+    bgColor: string | null;
+};

package/dist/hooks/useCustomTranslations.d.ts

@@ -0,0 +1,9 @@
+import { I18nConfig } from '../types';
+/**
+ * Hook for handling custom translations in components
+ *
+ * @param {string} namespace - Translation namespace (usually component name in lowercase)
+ * @param {I18nConfig} [customTranslations] - Custom translations to override defaults
+ * @returns {(key: string, options?: any) => string} Translation function
+ */
+export declare const useCustomTranslations: (namespace: string, customTranslations?: I18nConfig) => import('i18next').TFunction<"translation", undefined>;

package/dist/i18n.d.ts

@@ -0,0 +1,2 @@
+import { default as i18n } from 'i18next';
+export default i18n;

package/dist/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index.cjs2.js"),o=require("./index.cjs3.js"),t=require("./index.cjs4.js"),i=require("./index.cjs5.js"),n=require("./index.cjs6.js"),u=require("./index.cjs7.js"),e=require("./index.cjs8.js"),a=require("./index.cjs9.js"),d=require("./index.cjs10.js");exports.Avatar=r.Avatar;exports.Badge=o.Badge;exports.Button=t.Button;exports.Image=i.Image;exports.Loader=n.Loader;exports.ConfigProvider=u.ConfigProvider;exports.useConfig=e.useConfig;exports.useLocale=e.useLocale;exports.enUS=a.default;exports.ruRU=d.default;

package/dist/index.cjs10.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={};exports.default=e;