@gravity-ui/aikit 0.0.1

package/dist/src/components/atoms/ChatDate/ChatDate.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { useDateFormatter } from '../../../hooks';
+import { block } from '../../../utils/cn';
+import { i18n } from './i18n';
+import './ChatDate.scss';
+const b = block('chat-date');
+/**
+ * ChatDate component displays formatted dates with optional time
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function ChatDate(props) {
+    const { date, showTime = false, format, className, qa, relative = false, style } = props;
+    const { formattedDate, formattedTime, fullDate, dateObject, isValid, diffDays } = useDateFormatter({
+        date,
+        format,
+    });
+    if (!isValid || !dateObject) {
+        return i18n('invalid-date');
+    }
+    return (_jsx("time", { className: b({}, className), dateTime: dateObject.toISOString(), title: fullDate, "data-qa": qa, style: style, children: relative && typeof diffDays === 'number' ? (_jsx("span", { children: i18n('ago', { count: diffDays }) })) : (_jsxs(Fragment, { children: [_jsx("span", { children: formattedDate }), _jsx("span", { children: showTime && formattedTime && ` ${formattedTime}` })] })) }));
+}

package/dist/src/components/atoms/ChatDate/__stories__/ChatDate.stories.d.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { ChatDateProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ChatDateProps>;
+export declare const DateString: StoryFn<ChatDateProps>;
+export declare const DateObject: StoryFn<ChatDateProps>;
+export declare const Timestamp: StoryFn<ChatDateProps>;
+export declare const WithTime: StoryFn<ChatDateProps>;
+export declare const CustomFormat: StoryFn<ChatDateProps>;
+export declare const CustomFormatWithTime: StoryFn<ChatDateProps>;
+export declare const WithCustomStyle: StoryFn<ChatDateProps>;
+export declare const DifferentFormats: StoryObj<ChatDateProps>;
+export declare const DifferentDateTypes: StoryObj<ChatDateProps>;
+export declare const RecentDates: StoryObj<ChatDateProps>;
+export declare const InvalidDate: StoryFn<ChatDateProps>;

package/dist/src/components/atoms/ChatDate/__stories__/ChatDate.stories.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChatDate } from '..';
+import { RELATIVE_DATE_THRESHOLD } from '../../../../constants';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ChatDate',
+    component: ChatDate,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        date: {
+            control: 'text',
+            description: 'Date value in string, Date, or number (timestamp) format',
+        },
+        format: {
+            control: 'text',
+            description: 'Custom format string (dayjs format)',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+        style: {
+            control: 'object',
+            description: 'Inline styles for the component',
+        },
+        locale: {
+            control: 'text',
+            description: 'Locale for date formatting',
+        },
+        relative: {
+            control: 'boolean',
+            description: 'Display relative dates (today, yesterday, two days ago, etc.)',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args)) }));
+Playground.args = {
+    date: new Date().toISOString(),
+};
+export const DateString = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }));
+export const DateObject = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: new Date(2024, 0, 15, 10, 30) })) }));
+export const Timestamp = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: 1705312200000 })) }));
+export const WithTime = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", showTime: true })) }));
+export const CustomFormat = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY" })) }));
+export const CustomFormatWithTime = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY HH:mm", showTime: true })) }));
+export const WithCustomStyle = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", style: { color: 'red', fontWeight: 'bold', fontSize: '18px' } })) }));
+export const DifferentFormats = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Default", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }), _jsx(ShowcaseItem, { title: "DD/MM/YYYY", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "DD/MM/YYYY" })) }), _jsx(ShowcaseItem, { title: "MM-DD-YYYY", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "MM-DD-YYYY" })) }), _jsx(ShowcaseItem, { title: "YYYY/MM/DD HH-mm", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z", format: "YYYY/MM/DD HH-mm", showTime: true })) })] })),
+    decorators: defaultDecorators,
+};
+export const DifferentDateTypes = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "ISO String", children: _jsx(ChatDate, Object.assign({}, args, { date: "2024-01-15T10:30:00Z" })) }), _jsx(ShowcaseItem, { title: "Date Object", children: _jsx(ChatDate, Object.assign({}, args, { date: new Date(2024, 0, 15, 10, 30) })) }), _jsx(ShowcaseItem, { title: "Timestamp", children: _jsx(ChatDate, Object.assign({}, args, { date: 1705312200000 })) })] })),
+    decorators: defaultDecorators,
+};
+export const RecentDates = {
+    render: (args) => {
+        const today = new Date('2025-11-11T10:19:59.971Z');
+        const getTitle = (daysAgo) => {
+            return daysAgo ? `[ + ${daysAgo} ]` : `[ 0 ]`;
+        };
+        return (_jsx(_Fragment, { children: Array.from({ length: RELATIVE_DATE_THRESHOLD + 1 }, (_, i) => {
+                const date = new Date(today);
+                date.setDate(date.getDate() - i);
+                return (_jsx(ShowcaseItem, { title: getTitle(i), children: _jsx(ChatDate, Object.assign({}, args, { date: date, relative: true })) }, i));
+            }) }));
+    },
+    decorators: defaultDecorators,
+};
+export const InvalidDate = (args) => (_jsx(ContentWrapper, { children: _jsx(ChatDate, Object.assign({}, args, { date: "invalid-date-string" })) }));

package/dist/src/components/atoms/ChatDate/i18n/en.json

@@ -0,0 +1,8 @@
+{
+    "ago": {
+        "zero": "Today",
+        "one": "Yesterday",
+        "other": "{{count}} days ago"
+    },
+    "invalid-date": "Input date is invalid"
+}

package/dist/src/components/atoms/ChatDate/i18n/index.d.ts

@@ -0,0 +1,13 @@
+export declare const i18n: ((key: "ago" | "invalid-date", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "ago" | "invalid-date", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "ago" | "invalid-date", params?: import("@gravity-ui/i18n").Params) => string;
+    };
+    keysetData: {
+        "g-aikit-ChatDate": Record<"ago" | "invalid-date", import("@gravity-ui/i18n").KeyData>;
+    };
+};

package/dist/src/components/atoms/ChatDate/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}ChatDate`);

package/dist/src/components/atoms/ChatDate/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+    "ago": {
+        "zero": "Сегодня",
+        "one": "Вчера",
+        "few": "{{count}} дня назад",
+        "many": "{{count}} дней назад",
+        "other": "{{count}} дней назад"
+    },
+    "invalid-date": "Входная дата неверная"
+}

package/dist/src/components/atoms/ChatDate/index.d.ts

@@ -0,0 +1 @@
+export * from './ChatDate';

package/dist/src/components/atoms/ChatDate/index.js

@@ -0,0 +1 @@
+export * from './ChatDate';

package/dist/src/components/atoms/ContextIndicator/__stories__/ContextIndicator.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { type ContextIndicatorProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ContextIndicatorProps>;
+export declare const Empty: StoryFn<ContextIndicatorProps>;
+export declare const Quarter: StoryFn<ContextIndicatorProps>;
+export declare const Half: StoryFn<ContextIndicatorProps>;
+export declare const ThreeQuarters: StoryFn<ContextIndicatorProps>;
+export declare const Full: StoryFn<ContextIndicatorProps>;
+export declare const WithNumber: StoryFn<ContextIndicatorProps>;
+export declare const WithNumberHalf: StoryFn<ContextIndicatorProps>;
+export declare const AllStates: StoryFn<ContextIndicatorProps>;
+export declare const VerticalOrientation: StoryFn<ContextIndicatorProps>;
+export declare const VerticalWithNumber: StoryFn<ContextIndicatorProps>;
+export declare const AllReversedVariants: StoryFn<ContextIndicatorProps>;
+export declare const GrayColors: StoryFn<ContextIndicatorProps>;

package/dist/src/components/atoms/ContextIndicator/__stories__/ContextIndicator.stories.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContextIndicator } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ContextIndicator',
+    component: ContextIndicator,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'radio',
+            options: ['number', 'percent'],
+            description: 'Whether to use direct percentage or calculate from numbers',
+        },
+        usedContext: {
+            control: 'number',
+            description: 'Current context usage (percentage or absolute number)',
+        },
+        maxContext: {
+            control: 'number',
+            description: 'Maximum context available (only for type="number")',
+            if: { arg: 'type', eq: 'number' },
+        },
+        orientation: {
+            control: 'radio',
+            options: ['horizontal', 'vertical'],
+            description: 'Layout orientation of the indicator',
+        },
+        reversed: {
+            control: 'boolean',
+            description: 'Reverses the order of value and progress bar',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args)) }));
+Playground.args = {
+    type: 'number',
+    usedContext: 50,
+    maxContext: 100,
+};
+export const Empty = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }));
+export const Quarter = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }));
+export const Half = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }));
+export const ThreeQuarters = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }));
+export const Full = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) }));
+export const WithNumber = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 50, maxContext: 100 })) }));
+export const WithNumberHalf = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 500, maxContext: 1000 })) }));
+export const AllStates = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) })] }) }));
+export const VerticalOrientation = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-end' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, orientation: "vertical" })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, orientation: "vertical" }))] }) }));
+export const VerticalWithNumber = (args) => (_jsx(ContentWrapper, { children: _jsx("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-end' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "number", usedContext: 500, maxContext: 1000, orientation: "vertical" })) }) }));
+export const AllReversedVariants = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '32px' }, children: [_jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '16px' }, children: "Horizontal Reversed" }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, reversed: true }))] })] }), _jsxs("div", { children: [_jsx("h4", { style: { marginBottom: '16px' }, children: "Vertical Reversed" }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'flex-start' }, children: [_jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75, orientation: "vertical", reversed: true })), _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100, orientation: "vertical", reversed: true }))] })] })] }) }));
+export const GrayColors = (args) => (_jsx(ContentWrapper, { children: _jsxs("div", { style: {
+            display: 'flex',
+            gap: '16px',
+            alignItems: 'center',
+            // Override all progress colors to gray
+            ['--g-aikit-ci-color-progress-1']: '#999999',
+            ['--g-aikit-ci-color-progress-2']: '#999999',
+            ['--g-aikit-ci-color-progress-3']: '#999999',
+        }, children: [_jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 0 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 25 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 50 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 75 })) }), _jsx("div", { style: { textAlign: 'center' }, children: _jsx(ContextIndicator, Object.assign({}, args, { type: "percent", usedContext: 100 })) })] }) }));

package/dist/src/components/atoms/ContextIndicator/index.d.ts

@@ -0,0 +1,19 @@
+import './ContextIndicator.scss';
+type CommonProps = {
+    usedContext: number;
+    className?: string;
+    qa?: string;
+    orientation?: 'horizontal' | 'vertical';
+    reversed?: boolean;
+};
+type NumberProps = {
+    type: 'number';
+    maxContext: number;
+} & CommonProps;
+type PercentProps = {
+    type: 'percent';
+    usedContext: number;
+} & CommonProps;
+export type ContextIndicatorProps = NumberProps | PercentProps;
+export declare const ContextIndicator: (props: ContextIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/ContextIndicator/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block } from '../../../utils/cn';
+import { getProgressColor } from './utils';
+import './ContextIndicator.scss';
+const b = block('context-indicator');
+export const ContextIndicator = (props) => {
+    const { className, qa, orientation = 'horizontal', reversed = false } = props;
+    const percentage = props.type === 'number'
+        ? Math.round((props.usedContext / props.maxContext) * 100)
+        : props.usedContext;
+    const clampedPercentage = Math.min(Math.max(percentage, 0), 100);
+    return (_jsxs("div", { className: b('container', { orientation, reversed }, className), "data-qa": qa, children: [_jsx("div", { className: b('progress'), style: {
+                    '--percentage': clampedPercentage,
+                    '--progress-color': getProgressColor(clampedPercentage),
+                }, children: _jsx("div", { className: b('inner') }) }), _jsx("div", { className: b('value'), children: clampedPercentage })] }));
+};

package/dist/src/components/atoms/ContextIndicator/utils.d.ts

@@ -0,0 +1 @@
+export declare const getProgressColor: (percentage: number) => "var(--g-aikit-ci-color-progress-1)" | "var(--g-aikit-ci-color-progress-2)" | "var(--g-aikit-ci-color-progress-3)";

package/dist/src/components/atoms/ContextIndicator/utils.js

@@ -0,0 +1,9 @@
+export const getProgressColor = (percentage) => {
+    if (percentage < 34) {
+        return 'var(--g-aikit-ci-color-progress-1)';
+    }
+    if (percentage < 66) {
+        return 'var(--g-aikit-ci-color-progress-2)';
+    }
+    return 'var(--g-aikit-ci-color-progress-3)';
+};

package/dist/src/components/atoms/ContextItem/__stories__/ContextItem.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { ContextItem } from '..';
+type ContextItemProps = React.ComponentProps<typeof ContextItem>;
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<ContextItemProps>;

package/dist/src/components/atoms/ContextItem/__stories__/ContextItem.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContextItem } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ContextItem',
+    component: ContextItem,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        content: {
+            control: 'text',
+            description: 'Content of label',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(ContextItem, Object.assign({}, args)) }));
+Playground.args = {
+    content: 'My context',
+    onClick: () => { },
+};

package/dist/src/components/atoms/ContextItem/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { QAProps } from '@gravity-ui/uikit';
+type ContextItemProps = QAProps & {
+    content: React.ReactNode;
+    onClick: () => void;
+    className?: string;
+};
+export declare const ContextItem: (props: ContextItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/ContextItem/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+const b = block('context-item');
+export const ContextItem = (props) => {
+    const { content, onClick, className, qa } = props;
+    return (_jsx(Label, { size: "s", theme: "clear", onCloseClick: onClick, type: "close", className: b(null, className), "data-qa": qa, children: content }));
+};

package/dist/src/components/atoms/DiffStat/__stories__/DiffStat.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { DiffStat } from '..';
+type DiffStatProps = React.ComponentProps<typeof DiffStat>;
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<DiffStatProps>;
+export declare const Lengths: StoryObj<typeof DiffStat>;

package/dist/src/components/atoms/DiffStat/__stories__/DiffStat.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DiffStat } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import { Showcase } from '../../../../demo/Showcase';
+import { ShowcaseItem } from '../../../../demo/ShowcaseItem';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/DiffStat',
+    component: DiffStat,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        added: {
+            control: 'number',
+            description: 'Number of added lines',
+        },
+        deleted: {
+            control: 'number',
+            description: 'Number of deleted lines',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Showcase, { children: _jsx(Story, {}) }) })),
+];
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(DiffStat, Object.assign({}, args)) }));
+Playground.args = {
+    added: 10,
+    deleted: 5,
+};
+export const Lengths = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Digits", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 1 })), _jsx(DiffStat, Object.assign({}, args, { added: 1, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 1, deleted: 1 })), _jsx(DiffStat, Object.assign({}, args, { added: 5, deleted: 3 })), _jsx(DiffStat, Object.assign({}, args, { added: 9, deleted: 9 }))] }) }), _jsx(ShowcaseItem, { title: "Tens", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 10, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 10 })), _jsx(DiffStat, Object.assign({}, args, { added: 10, deleted: 10 })), _jsx(DiffStat, Object.assign({}, args, { added: 25, deleted: 15 })), _jsx(DiffStat, Object.assign({}, args, { added: 50, deleted: 30 })), _jsx(DiffStat, Object.assign({}, args, { added: 99, deleted: 99 }))] }) }), _jsx(ShowcaseItem, { title: "Hundreds", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 100, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 100 })), _jsx(DiffStat, Object.assign({}, args, { added: 100, deleted: 100 })), _jsx(DiffStat, Object.assign({}, args, { added: 250, deleted: 150 })), _jsx(DiffStat, Object.assign({}, args, { added: 500, deleted: 300 })), _jsx(DiffStat, Object.assign({}, args, { added: 999, deleted: 999 }))] }) }), _jsx(ShowcaseItem, { title: "Thousands", children: _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(DiffStat, Object.assign({}, args, { added: 1000, deleted: 0 })), _jsx(DiffStat, Object.assign({}, args, { added: 0, deleted: 1000 })), _jsx(DiffStat, Object.assign({}, args, { added: 1000, deleted: 1000 })), _jsx(DiffStat, Object.assign({}, args, { added: 2500, deleted: 1500 })), _jsx(DiffStat, Object.assign({}, args, { added: 5000, deleted: 3000 })), _jsx(DiffStat, Object.assign({}, args, { added: 12345, deleted: 6789 }))] }) })] })),
+    decorators: defaultDecorators,
+};

package/dist/src/components/atoms/DiffStat/index.d.ts

@@ -0,0 +1,8 @@
+import { DOMProps, QAProps } from '@gravity-ui/uikit';
+import './DiffStat.scss';
+type DiffStatProps = DOMProps & QAProps & {
+    added: number;
+    deleted: number;
+};
+export declare const DiffStat: (props: DiffStatProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/DiffStat/index.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { block } from '../../../utils/cn';
+import './DiffStat.scss';
+const b = block('diff-stat');
+export const DiffStat = (props) => {
+    const { added, deleted, className, style, qa } = props;
+    return (_jsxs("div", { className: b(null, className), style: style, "data-qa": qa, children: [_jsx("div", { className: b('added', { allow_sign: Boolean(added) }), children: added }), _jsx("div", { className: b('deleted', { allow_sign: Boolean(deleted) }), children: deleted })] }));
+};

package/dist/src/components/atoms/Disclaimer/Disclaimer.d.ts

@@ -0,0 +1,19 @@
+import './Disclaimer.scss';
+/**
+ * Props for the Disclaimer component
+ */
+export type DisclaimerProps = React.PropsWithChildren<{
+    /** Additional CSS class */
+    className?: string;
+    /** Disclaimer text to display */
+    text?: string;
+    /** QA/test identifier */
+    qa?: string;
+}>;
+/**
+ * Disclaimer component displays informational or warning messages
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function Disclaimer(props: DisclaimerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/atoms/Disclaimer/Disclaimer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import './Disclaimer.scss';
+const b = block('disclaimer');
+/**
+ * Disclaimer component displays informational or warning messages
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export function Disclaimer(props) {
+    const { className, qa, children, text } = props;
+    return (_jsxs("div", { className: b('container', className), "data-qa": qa, children: [text && _jsx(Text, { color: "secondary", children: text }), children] }));
+}

package/dist/src/components/atoms/Disclaimer/__stories__/Disclaimer.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryFn } from '@storybook/react-webpack5';
+import { DisclaimerProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<DisclaimerProps>;
+export declare const WithText: StoryFn<DisclaimerProps>;
+export declare const WithChildren: StoryFn<DisclaimerProps>;
+export declare const WithTextAndChildren: StoryFn<DisclaimerProps>;

package/dist/src/components/atoms/Disclaimer/__stories__/Disclaimer.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Disclaimer } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/Disclaimer',
+    component: Disclaimer,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        text: {
+            control: 'text',
+            description: 'Disclaimer text',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS class',
+        },
+        qa: {
+            control: 'text',
+            description: 'QA/test identifier',
+        },
+    },
+};
+export const Playground = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args)) }));
+Playground.args = { text: 'This is a disclaimer text' };
+export const WithText = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "This is an important disclaimer message" })) }));
+export const WithChildren = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { children: _jsx("span", { children: "Custom content goes here" }) })) }));
+export const WithTextAndChildren = (args) => (_jsx(ContentWrapper, { children: _jsx(Disclaimer, Object.assign({}, args, { text: "Disclaimer text", children: _jsx("span", { children: "Additional content" }) })) }));

package/dist/src/components/atoms/Disclaimer/index.d.ts

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/src/components/atoms/Disclaimer/index.js

@@ -0,0 +1 @@
+export * from './Disclaimer';

package/dist/src/components/atoms/InlineCitation/index.d.ts

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

package/dist/src/components/atoms/InlineCitation/index.js

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

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

@@ -0,0 +1,9 @@
+import './Loader.scss';
+export type LoaderSize = 'xs' | 's' | 'm';
+export interface LoaderProps {
+    view?: 'streaming' | 'loading';
+    size?: LoaderSize;
+    className?: string;
+    qa?: string;
+}
+export declare function Loader({ view, size, className, qa }: LoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/atoms/Loader/Loader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spin } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import './Loader.scss';
+const b = block('loader');
+export function Loader({ view = 'streaming', size = 's', className, qa }) {
+    if (view === 'streaming') {
+        return (_jsxs("div", { className: b({ size }, className), "data-qa": qa, children: [_jsx("div", { className: b('left') }), _jsx("div", { className: b('center') }), _jsx("div", { className: b('right') })] }));
+    }
+    return _jsx(Spin, { size: size, "data-qa": qa, className: b({ view }, className) });
+}

package/dist/src/components/atoms/Loader/__stories__/Loader.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { LoaderProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<LoaderProps>;
+export declare const Loading: StoryFn<LoaderProps>;
+export declare const Streaming: StoryFn<LoaderProps>;
+export declare const Size: StoryObj<LoaderProps>;