@olddevs/ui 0.0.0-stage → 4.0.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @olddevs/ui
+
+## 4.0.1
+
+### Patch Changes
+
+- The first release built in GitHub Actions, with npm provenance: the package page links the build to the commit and the workflow that produced it. Releases are staged by the workflow and approved by the maintainer on npmjs.com. No changes to the code or the API.
+
+## 4.0.0
+
+### Major Changes
+
+- First public release: the package is published to npmjs.com under the MIT License, and the source is on GitHub.
+
+  - **License:** MIT, previously `UNLICENSED`. Third-party notices stay in `NOTICE`.
+  - **Registry:** install from npmjs.com with `npm i @olddevs/ui`. If your `.npmrc` binds the `@olddevs` scope to another registry, remove that line and regenerate the lock file.
+  - **Versioning:** strict semver from this release on. Breaking changes ship only in a major version, and a public API rename keeps the old name as a deprecated alias for one major version.
+  - **No API changes:** code that works with 3.49 works with 4.0.0 as is. See `docs/api/migration-notes.md`, entry 4.0.0.
+  - This changelog starts with this release.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ivan Kiselev
+
+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/NOTICE

@@ -0,0 +1,100 @@
+@olddevs/ui — third-party notices
+
+The package itself is distributed under the MIT License (see LICENSE). Parts of
+the editor entry `@olddevs/ui/editor` (src/editor/) are adapted from the
+open-source projects below. Each adapted file names its origin in its header;
+the published `dist` is built without comments, so the notices are kept here, in
+the package root.
+
+--------------------------------------------------------------------------------
+minimal-tiptap — https://github.com/Aslam97/minimal-tiptap
+Used in: src/editor/RichTextEditor.tsx, src/editor/core/extensions.ts,
+src/editor/hooks/useChangeThrottle.ts, src/editor/styles/prose.ts
+--------------------------------------------------------------------------------
+
+MIT License
+
+Copyright (c) 2024 Aslam
+
+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.
+
+--------------------------------------------------------------------------------
+Tiptap — https://github.com/ueberdosis/tiptap
+Used in: src/editor/core/maxLength.ts (adapted from @tiptap/extensions, CharacterCount),
+src/editor/features/code/codeBlock.ts (input rules and Markdown parsing adapted from
+@tiptap/extension-code-block)
+--------------------------------------------------------------------------------
+
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+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.
+
+--------------------------------------------------------------------------------
+highlight.js — https://github.com/highlightjs/highlight.js
+Used in: src/editor/styles/codeTheme.ts (colour values and the mapping of hljs-* scopes
+taken from styles/github.css and styles/github-dark.css)
+--------------------------------------------------------------------------------
+
+BSD 3-Clause License
+
+Copyright (c) 2006, Ivan Sagalaev.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,3 +1,146 @@
-# Temporary Holding Version
+# @olddevs/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+English · [Русский](README.ru.md)
+
+[![npm version](https://img.shields.io/npm/v/@olddevs/ui)](https://www.npmjs.com/package/@olddevs/ui)
+[![license](https://img.shields.io/npm/l/@olddevs/ui)](LICENSE)
+
+Olddevs UI is a design system for React: design tokens, themes and accessible components, built for admin interfaces and other data-heavy products. Behavior comes from [React Aria Components](https://react-aria.adobe.com/) and [Radix UI](https://www.radix-ui.com/); styling is [Tailwind CSS](https://tailwindcss.com/) 4. Your app's Tailwind build compiles the component classes.
+
+Documentation: **[ui.olddevs.ru](https://ui.olddevs.ru)**
+
+## Requirements
+
+- React 19
+- Tailwind CSS 4, already set up in your app
+
+## Installation
+
+```bash
+npm install @olddevs/ui react clsx tailwind-merge lucide-react sonner \
+  react-aria-components @internationalized/date \
+  @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip \
+  @radix-ui/react-context-menu @radix-ui/react-slot
+```
+
+All the packages after `@olddevs/ui` are peer dependencies, and none of them is optional:
+
+| Package                                                                    | Used for                                                       |
+| -------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `react`                                                                    | The renderer                                                   |
+| `react-aria-components`                                                    | Behavior and accessibility of most controls                    |
+| `@radix-ui/react-dialog`, `-popover`, `-tooltip`, `-context-menu`, `-slot` | Dialogs, drawers, popovers, tooltips, context menus, `asChild` |
+| `lucide-react`                                                             | The icon set behind `@olddevs/ui/icons`                        |
+| `sonner`                                                                   | `Toaster` and `toast`                                          |
+| `clsx`, `tailwind-merge`                                                   | Class composition                                              |
+| `@internationalized/date`                                                  | Types for the date and time components                         |
+
+The rich text engine (Tiptap) is not on the list. Only an app that imports `@olddevs/ui/editor` installs it; the command is on the [Rich text editor page](docs/components/inputs/rich-text-editor.en.md#installation).
+
+## Adding the styles
+
+Your app's CSS needs all three lines:
+
+```css
+@import "tailwindcss";
+@import "@olddevs/ui/styles.css";
+@source "./node_modules/@olddevs/ui/dist";
+```
+
+`@import "tailwindcss"` belongs to your app, not to the package: do not import Tailwind twice. `@source` is required. Tailwind 4 does not scan `node_modules` on its own, so without that line the build still succeeds, but the component classes are missing from the final CSS.
+
+If you do not use the rich text editor, add a fourth line so its classes stay out of your CSS:
+
+```css
+@source not "./node_modules/@olddevs/ui/dist/editor";
+```
+
+In a Next.js App Router app, also add this to `next.config.mjs`, or a single `Button` import pulls the whole kit into the client bundle:
+
+```js
+export default { experimental: { optimizePackageImports: ["@olddevs/ui"] } };
+```
+
+Details are in [docs/getting-started.en.md](docs/getting-started.en.md).
+
+## Usage
+
+Import components from the package root and icons from `@olddevs/ui/icons`. Use only the public entry points listed in the `exports` field of `package.json` and in the [glossary](docs/glossary.en.md); never import from `src/`.
+
+```tsx
+import { useState } from "react";
+import { Button, Form, FormField, Select, TextControl, type SelectId } from "@olddevs/ui";
+
+export function CreateProject() {
+  const [name, setName] = useState("");
+  const [status, setStatus] = useState<SelectId | null>(null);
+
+  return (
+    <Form onSubmit={() => save({ name, status })}>
+      <FormField label="Name" htmlFor="name" required>
+        <TextControl id="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormField>
+      <Select
+        aria-label="Status"
+        placeholder="Status"
+        items={[
+          { id: "draft", label: "Draft" },
+          { id: "live", label: "Live" },
+        ]}
+        value={status}
+        onChange={setStatus}
+        clearable
+      />
+      <Button type="submit" tone="accent" variant="solid">
+        Create
+      </Button>
+    </Form>
+  );
+}
+```
+
+Appearance across the kit is set by three shared axes: `size` (`sm`, `md`, `lg`), `tone` (`neutral`, `accent`, `success`, `warning`, `danger`) and `variant` (`solid`, `soft`, `outline`, `ghost`).
+
+### Theme and language
+
+The theme is an attribute on `<html>`: `data-theme` accepts `dark` (the default), `light` or `dim`, and `data-accent` accepts `blue` (the default) or `violet`.
+
+```html
+<html data-theme="light" data-accent="violet"></html>
+```
+
+The interface language defaults to English. Russian labels are added with one provider:
+
+```tsx
+import { UiProvider } from "@olddevs/ui";
+import ru from "@olddevs/ui/locales/ru";
+
+<UiProvider locale="ru-RU" messages={ru}>
+  <App />
+</UiProvider>;
+```
+
+See [Themes, tokens and brands](docs/theming.en.md) and [Localization](docs/i18n.en.md).
+
+## Documentation
+
+- [ui.olddevs.ru](https://ui.olddevs.ru): the documentation site
+- [docs/index.md](docs/index.md) (in Russian): the Reference, the `docs/` folder in the package, with one page per component and "When to use" and "When not to use" sections
+- [docs/components/index.en.md](docs/components/index.en.md): the component catalog
+- [docs/accessibility.en.md](docs/accessibility.en.md): the accessibility contract
+
+The Reference is written in Russian. Most pages have an English translation next to them, as `*.en.md`.
+
+The package ships `docs/` and an `llms.txt` index, so the Reference matching your installed version is in `node_modules/@olddevs/ui/`. Point AI coding tools at `llms.txt` (in Russian) first.
+
+## Contributing and support
+
+- [CONTRIBUTING.md](CONTRIBUTING.md): how to propose and make changes
+- [SECURITY.md](SECURITY.md): how to report a vulnerability
+- [CHANGELOG.md](CHANGELOG.md): release notes
+- [Issues](https://github.com/ivan1911/olddevs_ui/issues): bugs and ideas
+- [Discussions](https://github.com/ivan1911/olddevs_ui/discussions): questions
+
+## License
+
+[MIT](LICENSE)

package/README.ru.md

@@ -0,0 +1,146 @@
+# @olddevs/ui
+
+[English](README.md) · Русский
+
+[![npm version](https://img.shields.io/npm/v/@olddevs/ui)](https://www.npmjs.com/package/@olddevs/ui)
+[![license](https://img.shields.io/npm/l/@olddevs/ui)](LICENSE)
+
+Olddevs UI — дизайн-система для React: токены, темы и доступные компоненты для админок и других продуктов с большим объёмом данных. Поведение берётся из [React Aria Components](https://react-aria.adobe.com/) и [Radix UI](https://www.radix-ui.com/), оформление — на [Tailwind CSS](https://tailwindcss.com/) 4. Классы компонентов компилирует Tailwind вашего приложения.
+
+Документация: **[ui.olddevs.ru](https://ui.olddevs.ru)**
+
+## Требования
+
+- React 19
+- Tailwind CSS 4, уже подключённый в приложении
+
+## Установка
+
+```bash
+npm install @olddevs/ui react clsx tailwind-merge lucide-react sonner \
+  react-aria-components @internationalized/date \
+  @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip \
+  @radix-ui/react-context-menu @radix-ui/react-slot
+```
+
+Все пакеты после `@olddevs/ui` — peer-зависимости, и необязательных среди них нет:
+
+| Пакет                                                                      | Для чего                                                       |
+| -------------------------------------------------------------------------- | -------------------------------------------------------------- |
+| `react`                                                                    | Рендерер                                                       |
+| `react-aria-components`                                                    | Поведение и доступность большинства контролов                  |
+| `@radix-ui/react-dialog`, `-popover`, `-tooltip`, `-context-menu`, `-slot` | Окна, панели, поповеры, подсказки, контекстные меню, `asChild` |
+| `lucide-react`                                                             | Набор иконок за `@olddevs/ui/icons`                            |
+| `sonner`                                                                   | `Toaster` и `toast`                                            |
+| `clsx`, `tailwind-merge`                                                   | Сборка классов                                                 |
+| `@internationalized/date`                                                  | Типы компонентов даты и времени                                |
+
+Движка Редактора (Tiptap) в списке нет: его ставит только приложение, которое импортирует `@olddevs/ui/editor`. Команда — на [странице Редактора](docs/components/inputs/rich-text-editor.md#установка).
+
+## Подключение стилей
+
+В CSS приложения нужны все три строки:
+
+```css
+@import "tailwindcss";
+@import "@olddevs/ui/styles.css";
+@source "./node_modules/@olddevs/ui/dist";
+```
+
+`@import "tailwindcss"` принадлежит приложению, а не пакету: не импортируйте Tailwind второй раз. `@source` обязателен. Tailwind 4 сам не сканирует `node_modules`, поэтому без этой строки сборка проходит, но классов компонентов в итоговом CSS нет.
+
+Если Редактор не используется, добавьте четвёртую строку, чтобы его классы не попали в CSS:
+
+```css
+@source not "./node_modules/@olddevs/ui/dist/editor";
+```
+
+В приложении Next.js (App Router) добавьте в `next.config.mjs` ещё и это: иначе импорт одной `Button` тянет в клиентский бандл весь кит.
+
+```js
+export default { experimental: { optimizePackageImports: ["@olddevs/ui"] } };
+```
+
+Подробности — в [docs/getting-started.md](docs/getting-started.md).
+
+## Использование
+
+Компоненты импортируются из корня пакета, иконки — из `@olddevs/ui/icons`. Используйте только публичные входы из `exports` в `package.json` и [словаре](docs/glossary.md); из `src/` не импортируйте.
+
+```tsx
+import { useState } from "react";
+import { Button, Form, FormField, Select, TextControl, type SelectId } from "@olddevs/ui";
+
+export function CreateProject() {
+  const [name, setName] = useState("");
+  const [status, setStatus] = useState<SelectId | null>(null);
+
+  return (
+    <Form onSubmit={() => save({ name, status })}>
+      <FormField label="Название" htmlFor="name" required>
+        <TextControl id="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormField>
+      <Select
+        aria-label="Статус"
+        placeholder="Статус"
+        items={[
+          { id: "draft", label: "Черновик" },
+          { id: "live", label: "Опубликован" },
+        ]}
+        value={status}
+        onChange={setStatus}
+        clearable
+      />
+      <Button type="submit" tone="accent" variant="solid">
+        Создать
+      </Button>
+    </Form>
+  );
+}
+```
+
+Внешний вид во всём ките задают три общие оси: `size` (`sm`, `md`, `lg`), `tone` (`neutral`, `accent`, `success`, `warning`, `danger`) и `variant` (`solid`, `soft`, `outline`, `ghost`).
+
+### Тема и язык
+
+Тема — атрибут на `<html>`: `data-theme` принимает `dark` (по умолчанию), `light` или `dim`, `data-accent` — `blue` (по умолчанию) или `violet`.
+
+```html
+<html data-theme="light" data-accent="violet"></html>
+```
+
+Язык интерфейса по умолчанию — английский. Русские подписи подключаются одним провайдером:
+
+```tsx
+import { UiProvider } from "@olddevs/ui";
+import ru from "@olddevs/ui/locales/ru";
+
+<UiProvider locale="ru-RU" messages={ru}>
+  <App />
+</UiProvider>;
+```
+
+См. [«Темы, токены и бренды»](docs/theming.md) и [«Локализацию»](docs/i18n.md).
+
+## Документация
+
+- [ui.olddevs.ru](https://ui.olddevs.ru) — сайт документации
+- [docs/index.md](docs/index.md) — Справочник: страница на каждый компонент с разделами «Когда использовать» и «Когда не использовать»
+- [docs/components/index.md](docs/components/index.md) — каталог компонентов
+- [docs/accessibility.md](docs/accessibility.md) — контракт доступности
+
+Справочник написан по-русски; у большинства страниц рядом лежит английский перевод `*.en.md`.
+
+Вместе с пакетом едут `docs/` и указатель `llms.txt`, поэтому Справочник нужной версии лежит в `node_modules/@olddevs/ui/`. Направьте ИИ-ассистента по коду на `llms.txt`.
+
+## Участие и поддержка
+
+- [CONTRIBUTING.md](CONTRIBUTING.md) — как предложить и внести изменение
+- [SECURITY.md](SECURITY.md) — как сообщить об уязвимости
+- [CHANGELOG.md](CHANGELOG.md) — история выпусков
+- [Issues](https://github.com/ivan1911/olddevs_ui/issues) — ошибки и идеи
+- [Discussions](https://github.com/ivan1911/olddevs_ui/discussions) — вопросы
+
+## Лицензия
+
+[MIT](LICENSE)

package/dist/color.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Отдельный вход для цвета: `@olddevs/ui/color`.
+ *
+ * ПОЧЕМУ МИМО BARREL. Цветовая подсистема `react-aria-components` — семь
+ * компонентов, которых кит не использовал больше нигде, — стоит **61 кБ gzip**
+ * (замер волны 25, метод `scripts/bundle-size.mjs` с невнешним RAC). Для
+ * сравнения: весь кит целиком укладывается в 62 кБ.
+ *
+ * Собственный бюджет кита этого не видит: в `npm run size` RAC объявлен
+ * внешним вместе с остальными peer-зависимостями, а страница фикстуры цвет не
+ * импортирует. Гейт, зелёный независимо от решения, — не гейт.
+ *
+ * Отдельный вход делает шестьдесят килобайт видимыми в самой строке импорта, а
+ * не только в замере, который их не меряет. Прецедент в ките заведён ровно по
+ * этой причине: каталоги локалей живут как `@olddevs/ui/locales/ru`, «чтобы не
+ * тянуться в бандл без импорта».
+ *
+ * Решение и числа — ADR-0038.
+ */
+export { ColorPicker } from "./components/inputs/ColorPicker.js";
+export type { ColorPickerProps } from "./components/inputs/ColorPicker.js";
+//# sourceMappingURL=color.d.ts.map

package/dist/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/color.js

@@ -0,0 +1,2 @@
+export { ColorPicker } from "./components/inputs/ColorPicker.js";
+//# sourceMappingURL=color.js.map

package/dist/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sourceRoot":"","sources":["../src/color.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC"}

package/dist/components/actions/Alert.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type Tone, type Variant } from "../../lib/variants.js";
+export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    /**
+     * Тон сообщения: задаёт цвет, иконку по умолчанию и роль для скринридера. По умолчанию `accent`.
+     *
+     * `danger` получает `role="alert"`, остальные тона — `role="status"`.
+     */
+    tone?: Tone;
+    /**
+     * Подача: `soft` — с подложкой, `outline` — только рамка. По умолчанию `soft`.
+     *
+     * Только `soft` и `outline`, и это ограничение типа, а не забывчивость.
+     *
+     * `solid` на всю ширину блока — плашка, перебивающая содержимое страницы;
+     * `ghost` без рамки и подложки перестаёт читаться как сообщение вовсе. Обе
+     * подачи существуют у кнопки, где размер другой, и туда же не годятся здесь.
+     */
+    variant?: Extract<Variant, "soft" | "outline">;
+    /** Заголовок сообщения: жирная строка над текстом. Необязателен: без него выводится только текст. */
+    title?: ReactNode;
+    /** Текст сообщения под заголовком. */
+    children?: ReactNode;
+    /** Иконка слева. По умолчанию выбирается по тону. */
+    icon?: ReactNode;
+    /** Кнопка закрытия. Без обработчика не рисуется вовсе. */
+    onDismiss?: () => void;
+    /** Действие справа — обычно `Button size="sm"`. */
+    action?: ReactNode;
+    /** Доступное имя кнопки закрытия. По умолчанию берётся из словаря сообщений кита. */
+    closeLabel?: string;
+}
+/**
+ * Сообщение на месте — в отличие от тоста, который всплывает и уходит.
+ *
+ * Когда что: тост сообщает о СОБЫТИИ («сохранено»), а `Alert` описывает
+ * СОСТОЯНИЕ («канал не подключён, публикации не пойдут»). Состояние не должно
+ * исчезать по таймеру, а событие не должно занимать место на экране навсегда.
+ *
+ * РОЛЬ ВЫБИРАЕТСЯ ПО ТОНУ, и это не косметика. `danger` получает `role="alert"`
+ * — скринридер перебивает им текущую речь; остальные тона получают
+ * `role="status"`, который дожидается паузы. Путать их означает либо потерять
+ * сообщение об ошибке, либо орать про успешное сохранение.
+ */
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/components/actions/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/actions/Alert.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlF,OAAO,EAAe,KAAK,IAAI,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChF;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;IAC/C,qGAAqG;IACrG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAWD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,KAAK,uGA4DhB,CAAC"}

package/dist/components/actions/Alert.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../../icons.js";
+import { cn } from "../../lib/cn.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { TONE_TOKENS } from "../../lib/variants.js";
+const TONE_ICONS = {
+    neutral: _jsx(InfoIcon, { size: 16 }),
+    accent: _jsx(InfoIcon, { size: 16 }),
+    success: _jsx(SuccessIcon, { size: 16 }),
+    warning: _jsx(WarningIcon, { size: 16 }),
+    danger: _jsx(ErrorIcon, { size: 16 }),
+};
+export const Alert = forwardRef(function Alert({ tone = "accent", variant = "soft", title, children, icon, onDismiss, action, closeLabel, className, ...rest }, ref) {
+    const messages = useMessages();
+    const t = TONE_TOKENS[tone];
+    return (_jsxs("div", { ref: ref, role: tone === "danger" ? "alert" : "status", className: cn("flex items-start gap-2.5 rounded-md border px-3 py-2.5 text-[13px]", t.border, variant === "soft" ? cn(t.bg, t.softFg) : cn("bg-transparent", t.fg), className), ...rest, children: [_jsx("span", { className: "flex shrink-0 items-center pt-px", children: icon ?? TONE_ICONS[tone] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [title != null && _jsx("div", { className: "font-semibold", children: title }), children != null && _jsx("div", { children: children })] }), action != null && _jsx("div", { className: "shrink-0 pl-1", children: action }), onDismiss != null && (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": closeLabel ?? messages.alert.close, className: "hover:bg-bg-3 -mr-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs opacity-70 transition-colors hover:opacity-100", children: _jsx(CloseIcon, { size: 14 }) }))] }));
+});
+//# sourceMappingURL=Alert.js.map

package/dist/components/actions/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/components/actions/Alert.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,UAAU,EAAiD,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAA2B,MAAM,uBAAuB,CAAC;AAkC7E,MAAM,UAAU,GAA4B;IAC1C,OAAO,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI;IAC/B,MAAM,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI;IAC9B,OAAO,EAAE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI;IAClC,OAAO,EAAE,KAAC,WAAW,IAAC,IAAI,EAAE,EAAE,GAAI;IAClC,MAAM,EAAE,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI;CAChC,CAAC;AAcF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACxE,EACE,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,MAAM,EACN,UAAU,EACV,SAAS,EACT,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IAE5B,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,SAAS,EAAE,EAAE,CACX,oEAAoE,EAMpE,CAAC,CAAC,MAAM,EACR,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,gBAAgB,EAAE,CAAC,CAAC,EAAE,CAAC,EACpE,SAAS,CACV,KACG,IAAI,aAER,eAAM,SAAS,EAAC,kCAAkC,YAAE,IAAI,IAAI,UAAU,CAAC,IAAI,CAAC,GAAQ,EACpF,eAAK,SAAS,EAAC,oCAAoC,aAChD,KAAK,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,KAAK,GAAO,EAQ7D,QAAQ,IAAI,IAAI,IAAI,wBAAM,QAAQ,GAAO,IACtC,EACL,MAAM,IAAI,IAAI,IAAI,cAAK,SAAS,EAAC,eAAe,YAAE,MAAM,GAAO,EAC/D,SAAS,IAAI,IAAI,IAAI,CACpB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,SAAS,gBACN,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,EAC9C,SAAS,EAAC,+IAA+I,YAEzJ,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GAChB,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/actions/Banner.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type Tone } from "../../lib/variants.js";
+export interface BannerProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    /**
+     * Тон баннера: задаёт цвет, иконку по умолчанию и роль для скринридера. По умолчанию `accent`.
+     *
+     * `danger` получает `role="alert"`, остальные тона — `role="status"`.
+     */
+    tone?: Tone;
+    /** Заголовок баннера: жирный фрагмент в начале строки. Необязателен: без него в строке остаётся только текст. */
+    title?: ReactNode;
+    /** Текст баннера после заголовка, в той же строке. */
+    children?: ReactNode;
+    /** Иконка слева. По умолчанию выбирается по тону. */
+    icon?: ReactNode;
+    /** Кнопка закрытия. Без обработчика не рисуется вовсе. */
+    onDismiss?: () => void;
+    /** Действие справа — обычно `Button size="sm"`. */
+    action?: ReactNode;
+    /** Доступное имя кнопки закрытия. По умолчанию берётся из словаря сообщений кита. */
+    closeLabel?: string;
+}
+/**
+ * Сообщение уровня ПРИЛОЖЕНИЯ: деградация сервиса, работы на сервере, истёкшая
+ * подписка.
+ *
+ * ГРАНИЦА ИЗ ТРЁХ СТРОК, и её стоит держать в голове:
+ *
+ *   `toast`  — СОБЫТИЕ: «сохранено». Всплывает и уходит по таймеру.
+ *   `Alert`  — СОСТОЯНИЕ МЕСТА: «у этой кампании нет канала». Живёт внутри
+ *              содержимого, рядом с тем, о чём говорит.
+ *   `Banner` — СОСТОЯНИЕ ПРИЛОЖЕНИЯ: «публикации не идут, идут работы». Стоит
+ *              над содержимым, переживает навигацию и не относится ни к какому
+ *              блоку страницы.
+ *
+ * Отсюда и отдельный компонент, а не ось у `Alert` (ADR-0027): разница не в
+ * виде, а в месте и времени жизни. Сообщение, умеющее и то и другое, тащило бы
+ * в разметку нерабочее.
+ *
+ * РОЛЬ ВЫБИРАЕТСЯ ПО ТОНУ — тем же правилом, что в `Alert`: `danger` получает
+ * `role="alert"` и перебивает речь скринридера, остальные тона `role="status"`
+ * и дожидаются паузы. Одно правило на кит, а не два похожих.
+ *
+ * ВО ВСЮ ШИРИНУ И БЕЗ СКРУГЛЕНИЙ: баннер — полоса поперёк приложения, а не
+ * карточка внутри страницы. Скруглённые углы читались бы как блок содержимого —
+ * то есть как `Alert`.
+ *
+ * НЕ ЛИПКИЙ. Контракт `--topbar-h` (ADR-0016) и его публикация шапкой
+ * (ADR-0019) не трогаются: шапка остаётся на `top: 0`. Постоянство сообщения
+ * держится на том, что баннер не исчезает из разметки, а не на том, что он
+ * всегда в кадре.
+ *
+ * СТОПКА — ОБЫЧНЫЙ СПИСОК соседних баннеров: каждый закрывается своей кнопкой,
+ * порядок задаёт потребитель. Своей очереди у компонента нет — она была бы
+ * состоянием, а состояние в ките не живёт.
+ */
+export declare const Banner: import("react").ForwardRefExoticComponent<BannerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Banner.d.ts.map

package/dist/components/actions/Banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../src/components/actions/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlF,OAAO,EAAe,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACjF;;;;OAIG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,iHAAiH;IACjH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qDAAqD;IACrD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mDAAmD;IACnD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qFAAqF;IACrF,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,MAAM,wGA+CjB,CAAC"}

package/dist/components/actions/Banner.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { CloseIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "../../icons.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import { cn } from "../../lib/cn.js";
+import { TONE_TOKENS } from "../../lib/variants.js";
+const TONE_ICONS = {
+    neutral: _jsx(InfoIcon, { size: 16 }),
+    accent: _jsx(InfoIcon, { size: 16 }),
+    success: _jsx(SuccessIcon, { size: 16 }),
+    warning: _jsx(WarningIcon, { size: 16 }),
+    danger: _jsx(ErrorIcon, { size: 16 }),
+};
+export const Banner = forwardRef(function Banner({ tone = "accent", title, children, icon, onDismiss, action, closeLabel, className, ...rest }, ref) {
+    const messages = useMessages();
+    const t = TONE_TOKENS[tone];
+    return (_jsxs("div", { ref: ref, role: tone === "danger" ? "alert" : "status", className: cn("flex w-full items-center gap-2.5 border-b px-4 py-2.5 text-[13px]", t.border, t.bg, t.softFg, className), ...rest, children: [_jsx("span", { className: "flex shrink-0 items-center", children: icon ?? TONE_ICONS[tone] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-2", children: [title != null && _jsx("span", { className: "font-semibold", children: title }), children != null && _jsx("span", { className: "min-w-0", children: children })] }), action != null && _jsx("div", { className: "shrink-0", children: action }), onDismiss != null && (_jsx("button", { type: "button", onClick: onDismiss, "aria-label": closeLabel ?? messages.banner.close, className: "hover:bg-bg-3 -mr-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-xs opacity-70 transition-colors hover:opacity-100", children: _jsx(CloseIcon, { size: 14 }) }))] }));
+});
+//# sourceMappingURL=Banner.js.map