@gravity-ui/aikit 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 YANDEX LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,190 @@
+# @gravity-ui/aikit
+
+UI component library for AI chats built with Atomic Design principles.
+
+## Description
+
+**@gravity-ui/aikit** is a flexible and extensible React component library for building AI chats of any complexity. The library provides a set of ready-made components that can be used as-is or customized to fit your needs.
+
+### Key Features
+
+- 🎨 **Atomic Design** — clear component hierarchy from atoms to pages
+- 🔧 **SDK Agnostic** — independent of specific AI SDKs
+- 🎭 **Two-Level Approach** — ready-made components + hooks for customization
+- 🎨 **CSS Variables** — easy theming without component overrides
+- 📦 **TypeScript** — full type safety out of the box
+- 🔌 **Extensible** — custom message type registration system
+
+## Project Structure
+
+```
+src/
+├── components/
+│   ├── atoms/          # Basic indivisible UI elements
+│   ├── molecules/      # Simple groups of atoms
+│   ├── organisms/      # Complex components with logic
+│   ├── templates/      # Complete layouts
+│   └── pages/          # Full integrations with data
+├── hooks/              # General purpose hooks
+├── types/              # TypeScript types
+├── utils/              # Utilities
+└── themes/             # CSS themes and variables
+```
+
+## Installation
+
+```bash
+npm install @gravity-ui/aikit
+```
+
+## Quick Start
+
+```typescript
+import { ChatContainer } from '@gravity-ui/aikit';
+import type { ChatType, TChatMessage } from '@gravity-ui/aikit';
+
+function App() {
+    const [messages, setMessages] = useState<TChatMessage[]>([]);
+    const [chats, setChats] = useState<ChatType[]>([]);
+    const [activeChat, setActiveChat] = useState<ChatType | null>(null);
+
+    return (
+        <ChatContainer
+            chats={chats}
+            activeChat={activeChat}
+            messages={messages}
+            onSendMessage={async (data) => {
+                // Your sending logic
+                console.log('Message:', data.content);
+            }}
+            onSelectChat={setActiveChat}
+            onCreateChat={() => {
+                // Create new chat
+            }}
+            onDeleteChat={(chat) => {
+                // Delete chat
+            }}
+        />
+    );
+}
+```
+
+## Architecture
+
+The library is built on **Atomic Design** principles:
+
+### 🔹 Atoms
+
+Basic indivisible UI elements without business logic:
+
+- `ActionButton` — button with integrated tooltip
+- `Alert` — alert messages with variants
+- `ChatDate` — date formatting with relative dates
+- `ContextIndicator` — token context usage indicator
+- `ContextItem` — context label with remove action
+- `DiffStat` — code change statistics display
+- `Disclaimer` — disclaimer text component
+- `InlineCitation` — text citations
+- `Loader` — loading indicator
+- `MarkdownRenderer` — Yandex Flavored Markdown renderer
+- `MessageBalloon` — message wrapper
+- `Shimmer` — loading animation effect
+- `SubmitButton` — submit button with states
+- `ToolIndicator` — tool execution status indicator
+
+### 🔸 Molecules
+
+Simple combinations of atoms:
+
+- `BaseMessage` — base wrapper for all message types
+- `ButtonGroup` — button group with orientation support
+- `InputContext` — context management
+- `PromptInputBody` — textarea with auto-growing
+- `PromptInputFooter` — footer with action icons and submit button
+- `PromptInputHeader` — header with context items and indicator
+- `PromptInputPanel` — panel container for custom content
+- `Suggestions` — clickable suggestion buttons
+- `Tabs` — navigation tabs with delete functionality
+- `ToolFooter` — tool message footer with actions
+- `ToolHeader` — tool message header with icon and actions
+
+### 🔶 Organisms
+
+Complex components with internal logic:
+
+- `AssistantMessage` — AI assistant message
+- `Header` — chat header
+- `MessageList` — message list
+- `PromptInput` — message input field
+- `ThinkingMessage` — AI thinking process
+- `ToolMessage` — tool execution
+- `UserMessage` — user message
+
+### 📄 Templates
+
+Complete layouts:
+
+- `ChatContent` — main chat content
+- `EmptyContainer` — empty state
+- `History` — chat history
+
+### 📱 Pages
+
+Full integrations:
+
+- `ChatContainer` — fully assembled chat
+
+## Documentation
+
+- [Quick Start Guide](./docs/GETTING_STARTED.md)
+- [Architecture](./docs/ARCHITECTURE.md)
+- [Project Structure](./docs/PROJECT_STRUCTURE.md)
+- [Testing Guide](./docs/TESTING.md)
+- [Playwright Guide](./playwright/README.md)
+
+## Testing
+
+The project uses Playwright Component Testing for visual regression testing.
+
+### Run tests
+
+**Important**: All tests must be run via Docker to ensure consistent screenshots across different environments.
+
+```bash
+# Run all component tests in Docker (recommended)
+npm run playwright:docker
+
+# Update screenshot baselines in Docker
+npm run playwright:docker:update
+
+# Run specific test by grep pattern in Docker
+npm run playwright:docker -- --grep "@ComponentName"
+
+# Clear Docker cache if needed
+npm run playwright:docker:clear-cache
+```
+
+### Local testing (Linux only)
+
+If you're on Linux, you can run tests locally:
+
+```bash
+# Install Playwright browsers (run once)
+npm run playwright:install
+
+# Run all component tests
+npm run playwright
+
+# Update screenshot baselines
+npm run playwright:update
+```
+
+For detailed testing documentation, see [Playwright Guide](./playwright/README.md).
+
+## Development
+
+Development and contribution instructions are available in [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+## License
+
+MIT

package/dist/.storybook/theme.d.ts

@@ -0,0 +1,6 @@
+export declare const ThemeLight: import("storybook/theming").ThemeVars;
+export declare const ThemeDark: import("storybook/theming").ThemeVars;
+export declare const themes: {
+    light: import("storybook/theming").ThemeVars;
+    dark: import("storybook/theming").ThemeVars;
+};

package/dist/.storybook/theme.js

@@ -0,0 +1,28 @@
+import { create } from 'storybook/theming';
+import pkg from '../package.json';
+function renderBrandTitle(theme) {
+    const titleColor = theme === 'light' ? 'rgba(0, 0, 0, 0.85)' : 'rgba(255, 255, 255, 0.85)';
+    const descriptionColor = theme === 'light' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)';
+    const logo = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 125" width="32" height="32" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M103.064 103.055c23.649-23.649 23.649-61.991 0-85.64L86.058 34.421c13.898 14.429 13.84 37.285-.254 51.379s-36.95 14.152-51.38.254l-17 17.001c23.649 23.649 61.991 23.649 85.64 0" clip-rule="evenodd"/><mask id="b" width="125" height="126" x="0" y="-1" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#F37" fill-rule="evenodd" d="M17.74 17.736C-2.88 38.356-5.521 70.147 9.817 93.63c1.09 1.733 1.635 2.599 1.95 3.41.727 1.874.832 3.422.363 5.377-.203.846-.721 1.984-1.757 4.26-3.458 7.596-4.205 13.244-1.578 15.87 7.412 7.413 31.148-4.306 70.301-43.459s50.872-62.89 43.46-70.302c-2.627-2.626-8.274-1.879-15.869 1.578-2.286 1.04-3.429 1.56-4.278 1.763-1.946.465-3.484.362-5.35-.357-.805-.31-1.665-.848-3.366-1.916C70.206-5.529 38.378-2.902 17.74 17.736m50.165 50.161c14.261-14.26 23.878-27.765 17.263-34.38-14.396-14.396-37.626-14.505-51.887-.244-14.261 14.26-14.152 37.491.244 51.887 6.615 6.615 20.12-3.002 34.38-17.263" clip-rule="evenodd"/></mask><g mask="url(#b)"><path fill="#F37" fill-rule="evenodd" d="M17.74 17.736C-2.88 38.356-5.521 70.147 9.817 93.63c1.09 1.733 1.635 2.599 1.95 3.41.727 1.874.832 3.422.363 5.377-.203.846-.721 1.984-1.757 4.26-3.458 7.596-4.205 13.244-1.578 15.87 7.412 7.413 31.148-4.306 70.301-43.459s50.872-62.89 43.46-70.302c-2.627-2.626-8.274-1.879-15.869 1.578-2.286 1.04-3.429 1.56-4.278 1.763-1.946.465-3.484.362-5.35-.357-.805-.31-1.665-.848-3.366-1.916C70.206-5.529 38.378-2.902 17.74 17.736m50.165 50.161c14.261-14.26 23.878-27.765 17.263-34.38-14.396-14.396-37.626-14.505-51.887-.244-14.261 14.26-14.152 37.491.244 51.887 6.615 6.615 20.12-3.002 34.38-17.263" clip-rule="evenodd"/><g filter="url(#c)"><path fill="#FF0" d="M19.03 88C6.426 68.68 8.597 42.522 25.543 25.556 42.507 8.572 68.673 6.412 87.978 19.08c1.388.873 2.093 1.313 2.753 1.567 1.533.592 2.797.677 4.396.295.698-.167 1.638-.595 3.516-1.451 6.242-2.845 14.999-8.953 18.072-5.877 4.72 4.726-9.484 29.292-41.662 61.507s-56.716 47.351-61.436 42.626c-3.074-3.077 3.028-12.76 5.87-19.01.852-1.873 1.277-2.81 1.444-3.505.386-1.609.3-2.882-.298-4.425-.259-.667-.707-1.38-1.604-2.805z"/></g></g><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientTransform="rotate(45 -43.592 103.062)scale(59.7564)" gradientUnits="userSpaceOnUse"><stop offset=".646" stop-color="#FF0"/><stop offset="1" stop-color="#F37"/></radialGradient><filter id="c" width="144.672" height="145.669" x="-8.053" y="-8.056" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_1776_29897" stdDeviation="9.509"/></filter></defs></svg>';
+    return `
+<div style="display: flex; align-items: flex-start">
+    <div style="flex-shrink: 0; line-height: 0">${logo}</div>
+    <div style="margin-inline-start: 8px">
+        <div style="font-size: 26px; line-height: 32px; color: ${titleColor}; font-weight: 600;">Gravity&nbsp;UI</div>
+        <div style="font-size: 14px; color: ${descriptionColor}; font-weight: 400;">AIKit&nbsp;v${pkg.version}</div>
+    </div>
+</div>
+    `.trim();
+}
+const common = {
+    // Typography
+    fontBase: '"Helvetica Neue", Arial, Helvetica, sans-serif',
+    fontCode: '"SF Mono", "Menlo", "Monaco", "Consolas", "Ubuntu Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Courier", monospace',
+    brandUrl: 'https://gravity-ui.com/',
+};
+export const ThemeLight = create(Object.assign(Object.assign({ base: 'light' }, common), { brandTitle: renderBrandTitle('light') }));
+export const ThemeDark = create(Object.assign(Object.assign({ base: 'dark' }, common), { brandTitle: renderBrandTitle('dark') }));
+export const themes = {
+    light: ThemeLight,
+    dark: ThemeDark,
+};

package/dist/package.json

@@ -0,0 +1,111 @@
+{
+    "name": "@gravity-ui/aikit",
+    "version": "0.0.1",
+    "description": "",
+    "license": "MIT",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/gravity-ui/aikit.git"
+    },
+    "bugs": {
+        "url": "https://github.com/gravity-ui/aikit/issues"
+    },
+    "homepage": "https://github.com/gravity-ui/aikit#readme",
+    "scripts": {
+        "prepare": "husky",
+        "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
+        "lint:styles": "stylelint 'src/**/*.scss'",
+        "lint": "run-p lint:js lint:styles lint:prettier typecheck",
+        "typecheck": "tsc --noEmit",
+        "lint:fix": "run-s lint:js:fix lint:styles:fix lint:prettier:fix typecheck",
+        "lint:js:fix": "eslint '**/*.{js,jsx,ts,tsx}' --max-warnings=0 --quiet --fix",
+        "lint:styles:fix": "stylelint **/*.scss --fix",
+        "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
+        "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md,mdx}'",
+        "test": "jest --passWithNoTests",
+        "build": "tsc",
+        "start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev",
+        "prepublishOnly": "npm run build",
+        "playwright:install": "playwright install chromium webkit --with-deps",
+        "playwright": "playwright test --config=playwright-ct.config.ts",
+        "playwright:update": "npm run playwright -- -u all",
+        "playwright:clear-cache": "rm -rf ./playwright/.cache",
+        "playwright:docker": "./playwright/run-docker-command.sh npm run playwright --",
+        "playwright:docker:update": "./playwright/run-docker-command.sh npm run playwright:update --",
+        "playwright:docker:clear-cache": "./playwright/run-docker-command.sh clear-cache"
+    },
+    "devDependencies": {
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@commitlint/cli": "^19.0.3",
+        "@commitlint/config-conventional": "^19.0.3",
+        "@gravity-ui/eslint-config": "^3.1.1",
+        "@gravity-ui/prettier-config": "^1.1.0",
+        "@gravity-ui/stylelint-config": "^4.0.1",
+        "@gravity-ui/tsconfig": "^1.0.0",
+        "@playwright/experimental-ct-react": "^1.56.1",
+        "@playwright/test": "^1.56.1",
+        "@storybook/addon-docs": "^9.0.5",
+        "@storybook/addon-styling-webpack": "^2.0.0",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
+        "@storybook/preset-scss": "^1.0.3",
+        "@storybook/react-webpack5": "^9.0.5",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/jest-dom": "^6.9.1",
+        "@testing-library/react": "^16.3.0",
+        "@types/jest": "^29.5.12",
+        "@types/react": "^18.2.64",
+        "@types/react-dom": "^18.2.21",
+        "@types/uuid": "^11.0.0",
+        "eslint": "^8.57.0",
+        "eslint-plugin-storybook": "^9.0.5",
+        "husky": "^9.0.11",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^30.2.0",
+        "nano-staged": "^0.8.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.2.5",
+        "process": "^0.11.10",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.71.1",
+        "sass-loader": "^14.1.1",
+        "storybook": "^9.0.5",
+        "storybook-addon-mock-date": "^1.0.2",
+        "style-loader": "^3.3.4",
+        "stylelint": "^15.11.0",
+        "ts-jest": "^29.1.2",
+        "typescript": "^5.4.2"
+    },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "nano-staged": {
+        "*.{scss}": [
+            "stylelint --fix --quiet"
+        ],
+        "*.{js,jsx,ts,tsx}": [
+            "eslint --fix --quiet"
+        ],
+        "*.{md,mdx}": [
+            "prettier --write"
+        ]
+    },
+    "dependencies": {
+        "@bem-react/classname": "^1.7.0",
+        "@diplodoc/transform": "^4.63.3",
+        "@gravity-ui/i18n": "^1.8.0",
+        "@gravity-ui/icons": "^2.16.0",
+        "@gravity-ui/uikit": "^7.25.0",
+        "dayjs": "^1.11.19",
+        "highlight.js": "^11.11.1",
+        "react-window": "^2.2.1",
+        "uuid": "^13.0.0"
+    }
+}

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ActionTooltipProps, ButtonButtonProps } from '@gravity-ui/uikit';
+export interface ActionButtonProps extends Omit<ButtonButtonProps, 'className'> {
+    /**
+     * Button content (icon, text, or any ReactNode)
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class for the button
+     */
+    className?: string;
+    /**
+     * Tooltip title text
+     */
+    tooltipTitle?: ActionTooltipProps['title'];
+    /**
+     * Tooltip placement
+     */
+    tooltipPlacement?: ActionTooltipProps['placement'];
+    /**
+     * Tooltip disabled state
+     */
+    tooltipDisabled?: ActionTooltipProps['disabled'];
+    /**
+     * Tooltip open delay in ms
+     */
+    tooltipOpenDelay?: ActionTooltipProps['openDelay'];
+    /**
+     * Tooltip close delay in ms
+     */
+    tooltipCloseDelay?: ActionTooltipProps['closeDelay'];
+    /**
+     * Additional CSS class for the wrapper
+     */
+    wrapperClassName?: string;
+}
+/**
+ * ActionButton component combines Button with ActionTooltip
+ *
+ * This component wraps a Button inside an ActionTooltip, providing
+ * a convenient way to add tooltips to action buttons throughout the application.
+ *
+ * @param props - Component props
+ * @param ref - Forwarded ref to the button element
+ * @returns ActionButton component
+ */
+export declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { ActionTooltip, Button } from '@gravity-ui/uikit';
+/**
+ * ActionButton component combines Button with ActionTooltip
+ *
+ * This component wraps a Button inside an ActionTooltip, providing
+ * a convenient way to add tooltips to action buttons throughout the application.
+ *
+ * @param props - Component props
+ * @param ref - Forwarded ref to the button element
+ * @returns ActionButton component
+ */
+export const ActionButton = React.forwardRef((_a, ref) => {
+    var { tooltipTitle, tooltipPlacement, tooltipDisabled, tooltipOpenDelay, tooltipCloseDelay, wrapperClassName, className, children } = _a, buttonProps = __rest(_a, ["tooltipTitle", "tooltipPlacement", "tooltipDisabled", "tooltipOpenDelay", "tooltipCloseDelay", "wrapperClassName", "className", "children"]);
+    const button = (_jsx(Button, Object.assign({}, buttonProps, { ref: ref, className: className, children: children })));
+    // If no tooltip props provided, return button without tooltip
+    if (!tooltipTitle) {
+        return button;
+    }
+    return (_jsx(ActionTooltip, { title: tooltipTitle, placement: tooltipPlacement, disabled: tooltipDisabled, openDelay: tooltipOpenDelay, closeDelay: tooltipCloseDelay, className: wrapperClassName, children: button }));
+});
+ActionButton.displayName = 'ActionButton';

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { ActionButton } from '..';
+declare const _default: Meta;
+export default _default;
+type Story = StoryObj<typeof ActionButton>;
+export declare const Playground: Story;
+export declare const Default: Story;
+export declare const WithoutTooltip: Story;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy, Pencil } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { ActionButton } from '..';
+import { ContentWrapper } from '../../../../demo/ContentWrapper';
+import MDXDocs from './Docs.mdx';
+export default {
+    title: 'atoms/ActionButton',
+    component: ActionButton,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+};
+const defaultDecorators = [
+    (Story) => (_jsx(ContentWrapper, { children: _jsx(Story, {}) })),
+];
+const mockOnClick = () => {
+    // eslint-disable-next-line no-console
+    console.log('Button clicked');
+};
+export const Playground = {
+    args: {
+        tooltipTitle: 'Copy',
+        view: 'flat',
+        size: 'm',
+        children: _jsx(Icon, { data: Copy, size: 16 }),
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};
+export const Default = {
+    args: {
+        tooltipTitle: 'Edit',
+        children: _jsx(Icon, { data: Pencil, size: 16 }),
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};
+export const WithoutTooltip = {
+    args: {
+        children: _jsx(Icon, { data: Copy, size: 16 }),
+        view: 'outlined',
+        onClick: mockOnClick,
+    },
+    decorators: defaultDecorators,
+};

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

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

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

@@ -0,0 +1 @@
+export { ActionButton } from './ActionButton';

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

@@ -0,0 +1,9 @@
+import { Meta, StoryFn, StoryObj } from '@storybook/react-webpack5';
+import { AlertProps } from '..';
+declare const _default: Meta;
+export default _default;
+export declare const Playground: StoryFn<AlertProps>;
+export declare const Variant: StoryObj<AlertProps>;
+export declare const Action: StoryFn<AlertProps>;
+export declare const LongText: StoryFn<AlertProps>;
+export declare const CustomIcon: StoryFn<AlertProps>;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Arrows3RotateLeft } from '@gravity-ui/icons';
+import { Icon } from '@gravity-ui/uikit';
+import { Alert } 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/Alert',
+    component: Alert,
+    parameters: {
+        docs: {
+            page: MDXDocs,
+        },
+    },
+    argTypes: {
+        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(Alert, Object.assign({}, args)) }));
+Playground.args = {
+    text: 'Alert message',
+    variant: 'default',
+};
+export const Variant = {
+    render: (args) => (_jsxs(_Fragment, { children: [_jsx(ShowcaseItem, { title: "Default", children: _jsx(Alert, Object.assign({}, args, { variant: "default" })) }), _jsx(ShowcaseItem, { title: "Info", children: _jsx(Alert, Object.assign({}, args, { variant: "info" })) }), _jsx(ShowcaseItem, { title: "Warning", children: _jsx(Alert, Object.assign({}, args, { variant: "warning" })) }), _jsx(ShowcaseItem, { title: "Error", children: _jsx(Alert, Object.assign({}, args, { variant: "error" })) })] })),
+    decorators: defaultDecorators,
+    args: { text: 'Alert message' },
+};
+export const Action = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { button: { content: 'Retry', onClick: () => ({}) } })) }));
+Action.args = {
+    text: 'Alert message',
+    variant: 'default',
+};
+export const LongText = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { button: { content: 'Retry', onClick: () => ({}) } })) }));
+LongText.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+    variant: 'warning',
+};
+export const CustomIcon = (args) => (_jsx(ContentWrapper, { children: _jsx(Alert, Object.assign({}, args, { icon: _jsx(Icon, { data: Arrows3RotateLeft, size: 20 }) })) }));
+CustomIcon.args = {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
+    variant: 'default',
+    button: { content: 'Retry', onClick: () => ({}) },
+};

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

@@ -0,0 +1,13 @@
+import './Alert.scss';
+export interface AlertProps {
+    text: string;
+    variant?: 'default' | 'warning' | 'error' | 'info';
+    icon?: React.ReactNode;
+    button?: {
+        content: React.ReactNode;
+        onClick: () => void;
+    };
+    className?: string;
+    qa?: string;
+}
+export declare function Alert({ text, icon, button, variant, className, qa }: AlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CircleExclamationFill, CircleInfoFill, TriangleExclamationFill } from '@gravity-ui/icons';
+import { Button, Icon, Text } from '@gravity-ui/uikit';
+import { block } from '../../../utils/cn';
+import './Alert.scss';
+const b = block('alert');
+const statusIcons = {
+    info: CircleInfoFill,
+    warning: TriangleExclamationFill,
+    error: CircleExclamationFill,
+};
+export function Alert({ text, icon, button, variant = 'default', className, qa }) {
+    const statusIcon = useMemo(() => {
+        if (icon) {
+            return _jsx("div", { className: b('icon'), children: icon });
+        }
+        const iconData = variant ? statusIcons[variant] : null;
+        if (iconData) {
+            return _jsx(Icon, { data: iconData, size: 14, className: b('icon', { variant }) });
+        }
+        return null;
+    }, [icon, variant]);
+    return (_jsxs("div", { className: b(null, className), "data-qa": qa, children: [statusIcon, _jsx(Text, { variant: "body-1", children: text }), button ? (_jsx(Button, { onClick: button.onClick, size: "s", view: "outlined", className: b('action'), children: button.content })) : null] }));
+}

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

@@ -0,0 +1,19 @@
+import { DOMProps, QAProps } from '@gravity-ui/uikit';
+import './ChatDate.scss';
+export type ChatDateProps = QAProps & DOMProps & {
+    /** Date value in string, Date, or number (timestamp) format */
+    date: string | Date | number;
+    /** Show time along with date */
+    showTime?: boolean;
+    /** Custom format string (dayjs format) */
+    format?: string;
+    /** Display relative dates (today, yesterday, two days ago, etc.) */
+    relative?: boolean;
+};
+/**
+ * ChatDate component displays formatted dates with optional time
+ *
+ * @param props - Component props
+ * @returns React component
+ */
+export declare function ChatDate(props: ChatDateProps): string | import("react/jsx-runtime").JSX.Element;