endfield-vision 0.0.0-stage → 2.1.0

package/LICENSE

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

@@ -1,3 +1,206 @@
-# Temporary Holding Version
+# endfield-vision
 
-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** | [Русский](https://github.com/RetentionSoftware/endfield-vision/blob/main/packages/vision/README.ru.md)
+
+A design system for React 19 and Next.js (App Router). Tokens on CSS variables, a dark theme by default plus light and "follow the system", two styles, accent presets, and accessible components with no third-party UI kit underneath (the only dependency is `lucide-react` for icons).
+
+The live catalog is the **ENDFIELD Vision** section of the playground in the [repository](https://github.com/RetentionSoftware/endfield-vision) (`npm run dev`, then open `/vision`).
+
+## Installation
+
+```bash
+npm i endfield-vision
+```
+
+While the package is on its way to npm, install it from the GitHub release (same build, same imports):
+
+```bash
+npm i https://github.com/RetentionSoftware/endfield-vision/releases/download/v2.1.0/endfield-vision-2.1.0.tgz
+```
+
+Requires `react` and `react-dom` 19.
+
+## Setup (Next.js App Router)
+
+```tsx
+// app/layout.tsx
+import 'endfield-vision/styles.css'
+import { ThemeScript } from 'endfield-vision'
+import { Inter, JetBrains_Mono } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin', 'cyrillic'], variable: '--font-inter' })
+const mono = JetBrains_Mono({ subsets: ['latin', 'cyrillic'], variable: '--font-jetbrains-mono' })
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en" data-theme="dark" className={`${inter.variable} ${mono.variable}`} suppressHydrationWarning>
+      <head>
+        <ThemeScript /> {/* theme and accent before the first paint, no flash */}
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+```tsx
+// app/providers.tsx
+'use client'
+import { LinkProvider, ModalsProvider, Toaster, type LinkComponent } from 'endfield-vision'
+import NextLink from 'next/link'
+
+const AppLink: LinkComponent = ({ href, ...rest }) => <NextLink href={href} {...rest} />
+
+export function Providers({ children }) {
+  return (
+    <LinkProvider component={AppLink}>
+      <ModalsProvider>
+        {children}
+        <Toaster />
+      </ModalsProvider>
+    </LinkProvider>
+  )
+}
+```
+
+The library does not depend on Next.js: without `LinkProvider` links are plain `<a>` elements, and everything else works in any React app (Vite and others). Components are marked `'use client'` file by file, so you can render them from Server Components, and utilities (`cx`, `formatIsoDate`, masks, `themeBootstrap`) can be imported on the server too.
+
+## Language
+
+Built-in texts (button labels, aria-labels, empty states, pagination, the calendar) ship in English and Russian. Without a provider the library speaks English.
+
+```tsx
+import { LocaleProvider } from 'endfield-vision'
+
+<LocaleProvider locale="ru">{children}</LocaleProvider>
+
+// Your own wording on top of the dictionary - any branch, any string:
+<LocaleProvider locale="en" messages={{ table: { empty: 'Nothing here yet' }, common: { retry: 'Reload' } }}>
+```
+
+- `useMessages()` returns the current dictionary (for your own components in the same style), `useLocale()` returns `'ru' | 'en'`, `useNumberFormat()` formats numbers by the language rules.
+- Providers can be nested: part of a page can use another language.
+- The dictionaries are exported (`ru`, `en`): use one as the base for a third language, and the `Messages` type will list every key.
+- Date fields use `dd.mm.yyyy` in both languages; weeks start on Monday.
+
+Fonts come from the app (`--font-inter`, `--font-jetbrains-mono`); without them the system fonts are used.
+
+## Theme, style and accent
+
+Three independent settings on `<html>`:
+
+- **Theme** - `data-theme="dark|light"`.
+- **Style** - `data-style="slim"` (no attribute means `default`). A style changes how elements look, not their size: control heights, spacing and type scale stay the same, so switching never breaks a layout.
+  - `default` - contrasting, accent-colored selection, viewfinder corners, uppercase section labels.
+  - `slim` - flat and calm: warm neutrals, nothing glows, selection is a neutral tone, outlined secondary and danger buttons, sentence-case labels, a crisp focus line instead of a soft halo.
+- **Accent** - `data-accent="amber|emerald|cyan|rose|violet|ink"` (no attribute means indigo). `ink` is a neutral accent: the primary button is ink-colored and color stays in statuses only. Each preset has its own values for each style and theme; contrast is checked by tests.
+
+`ThemeScript` sets all three before rendering. Options: `defaultTheme` (`'dark' | 'light' | 'system'`), `defaultStyle`, `defaultAccent`, `themeKey`, `styleKey`, `accentKey`, `nonce` (for CSP).
+
+```tsx
+<ThemeScript defaultTheme="system" defaultStyle="slim" defaultAccent="ink" />
+
+// client code
+const { theme, preference, style, accent, setTheme, setStyle, setAccent } = useTheme()
+```
+
+`STYLES` and `ACCENTS` list the available values; `setTheme`, `setStyle` and `setAccent` also work outside React.
+
+Your own accent: override the tokens in your app styles (unlayered styles always win):
+
+```css
+:root {
+  --ev-accent-rgb: 255, 122, 69;
+  --ev-accent-text: #ff9a70;
+  --ev-accent-strong: #d9480f; /* primary button fill */
+  --ev-accent-strong-hover: #e8590c;
+  --ev-text-on-accent: #ffffff;
+}
+```
+
+## Entrance motion
+
+Numbers count up and charts draw themselves the first time an element scrolls into view. Off by default.
+
+```tsx
+import { MotionProvider, StatTile, BarChart } from 'endfield-vision'
+
+<MotionProvider>{children}</MotionProvider>                  // for the whole app (duration in ms)
+<StatTile label="Stock" value="$12,845,000" animate />        // or for a single component
+<BarChart animate={false} ... />                              // the prop wins over the provider
+```
+
+- Supported by `StatTile` (the number is found inside the value string and its format is kept), `AnimatedNumber`, `Progress`, `BarChart`, `LineChart`, `AreaChart`, `Sparkline`, `DonutChart`, `Heatmap`, `HeatmapMatrix`, `RingProgress`, `Gauge`, `UptimeBar`. Use `animationDuration` for a custom duration.
+- The animation plays once; when data updates, numbers glide to the new value and charts are not redrawn from scratch.
+- `prefers-reduced-motion` turns it off. Server markup is the final state, and screen readers always get the final values.
+- For your own components: `useEntranceMotion(ref, animate)` (phases `static` / `idle` / `run`, plus a `data-ev-motion` attribute for CSS), `useMotionProgress`, `useCountUp`.
+
+## Layers and prefixes
+
+- All library styles live in cascade layers `@layer ev.reset, ev.tokens, ev.base, ev.components, ev.shell, ev.styles, ev.utilities`. `ev.styles` holds the component rules of styles such as `slim`. Your unlayered styles always win, no specificity battles needed.
+- Classes use `ev-*` and variables use `--ev-*`, so they never collide with Tailwind or your app styles. With Tailwind v4, set the order with one line before the imports: `@layer theme, base, ev, components, utilities;`.
+- Tokens only: `endfield-vision/tokens.css` (+ `accents.css`) brings the variables without components or the reset.
+
+## Rules
+
+- For dropdowns use `Select` / `MultiSelect`, not `<select>`; for hints use `Tooltip` (built into `IconButton` through `label`), not the `title=` attribute.
+- Colors, spacing, radii, shadows and layers come only from `var(--ev-...)`.
+- An empty value in tables and cards is `EMPTY_VALUE` (a hyphen); `DataTable` and `KeyValueList` insert it themselves.
+- Cards, panels, tiles and tables have no border: the surface separates them, plus `--ev-shadow-card` in the light theme. A block inside a card, dialog or drawer sits on `--ev-surface-nested`. Borders belong to inputs and controls.
+- To mark a panel's tone, use **viewfinder corners** instead of a colored edge stripe: `<div className="ev-corners" data-corners="diagonal" data-tone="warning">`. `data-corners` variants: no value (top-left corner), `diagonal`, `frame` (all four corners), `off`. Size, width and inset are the `--ev-corner-size`, `--ev-corner-width` and `--ev-corner-inset` tokens; the color is the element tone or `--ev-corner-color`. The `slim` style hides the corners, so also give the element a toned or selected background.
+- Selected or current items (a menu item, tab, page, row, option) use the `--ev-selected-*` tokens, not the accent directly: in `default` they are accent-colored, in `slim` they are neutral.
+- `Card flush` renders a table edge to edge; other direct children of the body (filters, notices, pagination) get the card padding on their own.
+
+## Tokens
+
+| Group | Tokens |
+|---|---|
+| Surfaces | `--ev-bg`, `--ev-surface-1` (cards), `--ev-surface-2` (popovers, table header), `--ev-surface-3` (buttons), `--ev-surface-nested`, `--ev-surface-input`, `--ev-hover`, `--ev-active`, `--ev-tint-1..4` |
+| Shadows | `--ev-shadow-card`, `--ev-shadow-sm`, `--ev-shadow`, `--ev-shadow-pop`, `--ev-shadow-modal`, `--ev-shadow-primary` |
+| Borders | `--ev-border-soft`, `--ev-border`, `--ev-border-strong`, `--ev-border-control` (inputs, 3:1), `--ev-border-hover` |
+| Text | `--ev-text`, `--ev-text-secondary`, `--ev-text-muted` (>= 4.5:1), `--ev-text-disabled`, `--ev-text-on-accent` |
+| Accent | `--ev-accent`, `--ev-accent-text`, `--ev-accent-strong`, `--ev-accent-soft`, `--ev-accent-edge`, `--ev-accent-rgb`, `--ev-accent-swatch-<preset>` |
+| Selection | `--ev-selected-bg`, `--ev-selected-bg-subtle`, `--ev-selected-edge`, `--ev-selected-text`, `--ev-selected-indicator` |
+| Focus | `--ev-focus-ring` (buttons and other controls), `--ev-focus-ring-inset` (borderless items: menu rows, tabs), `--ev-focus-field` and `--ev-focus-field-invalid` (bordered fields; in `slim` the border only changes color) |
+| Semantic | `--ev-success`, `--ev-warning`, `--ev-danger`, `--ev-info`, `--ev-violet` (+ `-soft`, `-edge`, `-strong`), independent of the accent |
+| Charts | `--ev-chart-1..8`, `--ev-chart-grid`, `--ev-chart-axis` |
+| Geometry | `--ev-radius-xs..xl`, `--ev-space-0..11` (2..56px), `--ev-control-h-sm/-h/-h-lg` (28/34/40) |
+| Typography | `--ev-fs-2xs..3xl` (11..30px, 14px base), `--ev-fw-*`, `--ev-fw-title`, `--ev-lh`; section labels: `--ev-caps-transform`, `--ev-caps-size`, `--ev-caps-weight`, `--ev-tracking-caps` |
+| Layers | `--ev-z-sticky` < `--ev-z-topbar` < `--ev-z-drawer` < `--ev-z-modal` < `--ev-z-dropdown` < `--ev-z-toast` < `--ev-z-tooltip` |
+| Motion | `--ev-dur-fast/-dur/-dur-slow`, `--ev-ease`, `--ev-ease-out`; `prefers-reduced-motion` is handled globally |
+
+Component tone (`Badge`, `StatusPill`, `Callout`, `StatTile`, `Avatar`, `Progress`) is the `tone` prop: `neutral | accent | success | warning | danger | info | violet`.
+
+## Components
+
+- **Actions:** `Button` (`primary | secondary | ghost | danger | danger-ghost | link`, `sm | md | lg`, `loading`, `icon`, `iconRight`, `block`), `LinkButton`, `IconButton` (required `label` = aria-label + tooltip), `Menu`, `Popover`.
+- **Forms:** `Field` (label, hint, error; wires up `id`, `aria-invalid` and `aria-describedby` itself), `FormSection`, `Input`, `SearchInput`, `PasswordInput`, `Textarea` (`autoResize`), `NumberInput` (`min/max/step`, `decimals`, `unit`, `stepper`), `MoneyInput` (value in minor units), `PhoneInput` (22 countries with a picker, country code detection on paste, E.164), `SnilsInput`, `PlateInput`, `DigitsInput`, `MaskedDigitsInput`, `TimeInput` (`HH:MM`, `min/max`), `ColorField`.
+- **Choice:** `Select` (search with more than 7 options, groups, `clearable`, server search via `onSearch`), `MultiSelect`, `DateField` (`YYYY-MM-DD`), `DateRangePicker`, `Calendar`, `Checkbox` (`indeterminate`), `Switch`, `RadioGroup` (`variant="card"`), `SegmentedControl`, `Tabs` (buttons or `href` links), `TabPanel`.
+- **Data:** `DataTable` (column config, sorting, row selection, `loading`, `fetching`, `error` + `onRetry`, `empty`, `maxHeight`, cards on narrow screens), `Pagination`, `FilterBar`, `KeyValueList`, `StatTile`, `Badge`, `StatusPill`, `Avatar` (initials or photo), `Progress` (including overrun), `Timeline` (event feed, upcoming steps, "show more"), `UptimeBar` (daily availability with tooltips), `CopyButton`, `CopyValue`.
+- **Charts:** `BarChart` (grouped or `stacked`), `LineChart`, `AreaChart`, `Sparkline`, `DonutChart` (shares, "Other", legend), `Heatmap` (activity calendar) and `HeatmapMatrix` ("row x column" matrix), `RingProgress` (ring, segments, overrun), `Gauge` (half-circle scale with zones). Tooltips on hover and arrow keys, a legend for 2+ series, a hidden table for screen readers.
+- **Feedback and overlays:** `Callout`, `EmptyState`, `ErrorState`, `Skeleton`, `SkeletonText`, `Spinner`, `LoadingBlock`, `Modal`, `useModals()` (`open`, `confirm`, `alert`), `Drawer`, `toast.*` / `useToast()` (callable outside React too), `FileDrop`.
+- **Navigation and structure:** `CommandPalette` (Ctrl+K, groups, word search), `Steps` (wizard steps, horizontal and vertical), `Accordion` and `Disclosure`, `TreeView` (single or multiple selection with a partial state, WAI-ARIA keyboard).
+- **More inputs:** `Slider` (value and range, marks), `TagInput` (tags, suggestions, limit, validation), `Chip` and `ChipGroup` (filters and tags), `OtpInput` (verification code, paste as a whole), `InlineEdit` (edit in place with async save).
+- **Content:** `Banner` (full-width announcement, dismissal is remembered), `CodeBlock` and `InlineCode` (line numbers, line and syntax highlighting with no dependencies, collapsing), `Highlight` (search matches), `RelativeTime` ("5 minutes ago" in both languages), `ExpandableText` ("Show more").
+- **App shell:** `AppShell` (`statusBar` slot), `Topbar`, `Sidebar`, `SidebarSection`, `SidebarItem`, `SidebarCollapseButton`, `useAppShell()`, `PageHeader`, `Breadcrumbs`, `SectionTitle`, `Card`, `Panel`, `Divider`, `Kbd`, `StatusBar` (`StatusBarItem`, `StatusBarClock`), `WorkspaceSwitcher`, `ScreenOverlay` (maintenance, new version), `ContextMenu` and `ContextMenuProvider` (right click, registry by `data-ctx-kind`).
+- **CRM, record card:** `RecordHeader` (header with avatar, copyable identifiers, metrics, actions), `RecordLayout` (main and side columns), `EditablePanel` (section with an edit mode and async save), `CompletenessBadge` (what is missing and what expires), `BadgeStack` and `AvatarGroup` (+N), presence on `Avatar` (`status`, `lastSeen`), `missing` on `KeyValueList` rows.
+- **CRM, workflows:** `KanbanBoard` and `KanbanCard` (columns with counters and "show more", drag and drop plus keyboard moves), `SlaTimer` (elapsed / remaining, tones by threshold, `formatDuration`), `PermissionMatrix` (sections x roles, modes, changes against the saved state), `SettingsList`, `SettingRow`, `SaveBar`, `useDirtyState`.
+- **CRM, communication:** `NotificationCenter` and `NotificationList` (history, read state, actions), `toast` with several actions, `ChatThread`, `ChatMessage`, `Composer` (attachments, pasted screenshots, drag and drop), `Lightbox`, `ConnectionStatus`.
+- **Filters in the URL:** `useUrlFilters` syncs filters with the address and remembers them per scope.
+- **Language:** `LocaleProvider`, `useMessages`, `useLocale`, `useNumberFormat`, dictionaries `ru`, `en`.
+- **Theme:** `ThemeScript` (`nonce` for CSP), `themeBootstrap`, `useTheme`, `setTheme`, `setAccent`, `ACCENTS`.
+- **Utilities:** `cx`, `normalizeSearch`, `formatPhone`, `isCompletePhone`, `normalizePlate`, `normalizeHexColor`, `useMediaQuery`, `useDebouncedValue`, `useControllable`, `LinkProvider`. Layout classes: `ev-stack`, `ev-row`, `ev-grid` (`--ev-gap`, `--ev-grid-min`), `ev-mono`, `ev-num`, `ev-muted`, `ev-truncate`, `ev-link`, `ev-visually-hidden`.
+
+## Making it yours
+
+The package publishes both the build (`dist/`) and the source (`src/`). Three levels of customization:
+
+1. **Tokens.** Override `--ev-*` in your styles: colors, radii, density (`--ev-control-h`), fonts.
+2. **Component styles.** The `ev-*` classes and data attributes (`data-variant`, `data-size`, `data-tone`) are stable; your unlayered rules override the library.
+3. **Code.** Copy a component from `node_modules/endfield-vision/src/components` into your project and edit it as your own.
+
+## License
+
+[MIT](LICENSE)

package/README.ru.md

@@ -0,0 +1,206 @@
+# endfield-vision
+
+[English](https://github.com/RetentionSoftware/endfield-vision/blob/main/packages/vision/README.md) | **Русский**
+
+Дизайн-система для React 19 и Next.js (App Router). Токены на CSS-переменных, тёмная тема по умолчанию, светлая и «как в системе», два стиля оформления, пресеты акцента, доступные компоненты без сторонних UI-библиотек (зависимость одна - `lucide-react` для иконок).
+
+Живой каталог - раздел **ENDFIELD Vision** в плейграунде [репозитория](https://github.com/RetentionSoftware/endfield-vision) (`npm run dev`, затем `/vision`).
+
+## Установка
+
+```bash
+npm i endfield-vision
+```
+
+Пока пакет готовится к публикации в npm, ставьте его из релиза на GitHub (та же сборка, те же импорты):
+
+```bash
+npm i https://github.com/RetentionSoftware/endfield-vision/releases/download/v2.1.0/endfield-vision-2.1.0.tgz
+```
+
+Нужны `react` и `react-dom` 19.
+
+## Подключение (Next.js App Router)
+
+```tsx
+// app/layout.tsx
+import 'endfield-vision/styles.css'
+import { ThemeScript } from 'endfield-vision'
+import { Inter, JetBrains_Mono } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin', 'cyrillic'], variable: '--font-inter' })
+const mono = JetBrains_Mono({ subsets: ['latin', 'cyrillic'], variable: '--font-jetbrains-mono' })
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="ru" data-theme="dark" className={`${inter.variable} ${mono.variable}`} suppressHydrationWarning>
+      <head>
+        <ThemeScript /> {/* тема и акцент до первой отрисовки, без вспышки */}
+      </head>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+```tsx
+// app/providers.tsx
+'use client'
+import { LinkProvider, ModalsProvider, Toaster, type LinkComponent } from 'endfield-vision'
+import NextLink from 'next/link'
+
+const AppLink: LinkComponent = ({ href, ...rest }) => <NextLink href={href} {...rest} />
+
+export function Providers({ children }) {
+  return (
+    <LinkProvider component={AppLink}>
+      <ModalsProvider>
+        {children}
+        <Toaster />
+      </ModalsProvider>
+    </LinkProvider>
+  )
+}
+```
+
+Библиотека не зависит от Next.js: без `LinkProvider` ссылки - обычные `<a>`, остальное работает в любом React-приложении (Vite и т. п.). Компоненты помечены `'use client'` пофайлово: их можно рендерить из серверных компонентов, а утилиты (`cx`, `formatIsoDate`, маски, `themeBootstrap`) импортируются и на сервере.
+
+## Язык
+
+Встроенные тексты (подписи кнопок, aria-label, пустые состояния, пагинация, календарь) есть на английском и русском. Без провайдера - английский.
+
+```tsx
+import { LocaleProvider } from 'endfield-vision'
+
+<LocaleProvider locale="ru">{children}</LocaleProvider>
+
+// Свои формулировки поверх словаря - любые ветки и строки:
+<LocaleProvider locale="en" messages={{ table: { empty: 'Nothing here yet' }, common: { retry: 'Reload' } }}>
+```
+
+- `useMessages()` - словарь текущего языка (для своих компонентов в том же стиле), `useLocale()` - `'ru' | 'en'`, `useNumberFormat()` - числа по правилам языка.
+- Провайдеры можно вкладывать: часть страницы на другом языке.
+- Словари экспортируются (`ru`, `en`): их можно взять за основу третьего языка - тип `Messages` подскажет все ключи.
+- Формат дат в полях - `дд.мм.гггг` на обоих языках, неделя начинается с понедельника.
+
+Шрифты задаёт приложение (`--font-inter`, `--font-jetbrains-mono`); без них - системные.
+
+## Тема, стиль и акцент
+
+Три независимые настройки на `<html>`:
+
+- **Тема** - `data-theme="dark|light"`.
+- **Стиль** - `data-style="slim"` (без атрибута - `default`). Стиль меняет подачу элементов, а не размеры: высоты контролов, отступы и кегль те же, поэтому переключение не ломает раскладку.
+  - `default` («Стандартный») - контрастный, выделение акцентом, уголки видоискателя, подписи разделов капсом.
+  - `slim` («Утончённый») - плоский и спокойный: тёплые нейтрали, ничего не светится, выбранное - нейтральным тоном, вторичная и опасная кнопки контуром, подписи без капса, фокус - чёткая линия вместо мягкого ореола.
+- **Акцент** - `data-accent="amber|emerald|cyan|rose|violet|ink"` (без атрибута - indigo). `ink` («Чернила») - нейтральный акцент: основная кнопка чернильная, цвет остаётся только в статусах. У каждого пресета свои значения для каждого стиля и темы; контраст проверяют тесты.
+
+`ThemeScript` ставит все три до отрисовки. Опции: `defaultTheme` (`'dark' | 'light' | 'system'`), `defaultStyle`, `defaultAccent`, `themeKey`, `styleKey`, `accentKey`, `nonce` (для CSP).
+
+```tsx
+<ThemeScript defaultTheme="system" defaultStyle="slim" defaultAccent="ink" />
+
+// в клиентском коде
+const { theme, preference, style, accent, setTheme, setStyle, setAccent } = useTheme()
+```
+
+`STYLES` и `ACCENTS` - списки доступных значений; `setTheme`, `setStyle` и `setAccent` работают и вне React.
+
+Свой акцент - переопределите токены в стилях приложения (вне слоёв они сильнее):
+
+```css
+:root {
+  --ev-accent-rgb: 255, 122, 69;
+  --ev-accent-text: #ff9a70;
+  --ev-accent-strong: #d9480f; /* заливка primary-кнопки */
+  --ev-accent-strong-hover: #e8590c;
+  --ev-text-on-accent: #ffffff;
+}
+```
+
+## Анимация появления
+
+Числа набираются, графики строятся, когда элемент впервые попадает в видимую область. По умолчанию выключено.
+
+```tsx
+import { MotionProvider, StatTile, BarChart } from 'endfield-vision'
+
+<MotionProvider>{children}</MotionProvider>                  // для всего приложения (duration - длительность, мс)
+<StatTile label="Запасы" value="12 845 000 ₽" animate />      // или на отдельном компоненте
+<BarChart animate={false} ... />                              // проп сильнее провайдера
+```
+
+- Поддерживают: `StatTile` (число ищется в строке значения, формат сохраняется), `AnimatedNumber`, `Progress`, `BarChart`, `LineChart`, `AreaChart`, `Sparkline`, `DonutChart`, `Heatmap`, `HeatmapMatrix`, `RingProgress`, `Gauge`, `UptimeBar`. Проп `animationDuration` - своя длительность.
+- Анимация проигрывается один раз; при обновлении данных числа плавно переходят к новому значению, графики не перерисовываются заново.
+- `prefers-reduced-motion` выключает анимацию. Серверная разметка - итоговое состояние; скринридер всегда получает итоговые значения.
+- Для своих компонентов: `useEntranceMotion(ref, animate)` (фазы `static` / `idle` / `run`, атрибут `data-ev-motion` для CSS), `useMotionProgress`, `useCountUp`.
+
+## Слои и префиксы
+
+- Все стили библиотеки - в каскадных слоях `@layer ev.reset, ev.tokens, ev.base, ev.components, ev.shell, ev.styles, ev.utilities`. В `ev.styles` - правила компонентов для стилей вроде `slim`. Стили приложения вне слоёв всегда сильнее, специфичность бороться не нужно.
+- Классы - `ev-*`, переменные - `--ev-*`: не пересекаются с Tailwind и стилями приложения. С Tailwind v4 порядок задаётся одной строкой до импортов: `@layer theme, base, ev, components, utilities;`.
+- Только токены: `endfield-vision/tokens.css` (+ `accents.css`) подключает переменные без компонентов и сброса.
+
+## Правила
+
+- Выпадающий список - `Select`/`MultiSelect`, не `<select>`; подсказка - `Tooltip` (у `IconButton` встроена через `label`), не атрибут `title=`.
+- Цвета, отступы, радиусы, тени, слои - только `var(--ev-...)`.
+- Пустое значение в таблицах и карточках - `EMPTY_VALUE` (дефис), `DataTable` и `KeyValueList` подставляют его сами.
+- Карточки, панели, плитки, таблицы - без рамки: их отделяет поверхность, в светлой теме ещё `--ev-shadow-card`. Блок внутри карточки, окна или шторки - на `--ev-surface-nested`. Рамка - у полей ввода и контролов.
+- Акцент тона на панели - **уголки видоискателя**, а не цветная полоса по краю: `<div className="ev-corners" data-corners="diagonal" data-tone="warning">`. Варианты `data-corners`: без значения (уголок сверху слева), `diagonal`, `frame` (четыре уголка), `off`. Размер, толщина и отступ - токены `--ev-corner-size`, `--ev-corner-width`, `--ev-corner-inset`, цвет - тон элемента или `--ev-corner-color`. Стиль `slim` уголки скрывает, поэтому выделяйте элемент ещё и тоном фона.
+- Выбранное и текущее (пункт меню, вкладка, страница, строка, опция) - через токены `--ev-selected-*`, а не напрямую акцентом: в `default` они акцентные, в `slim` - нейтральные.
+- `Card flush` - таблица от края до края; остальные прямые дети тела (фильтры, плашки, пагинация) получают отступ карточки сами.
+
+## Токены (главное)
+
+| Группа | Токены |
+|---|---|
+| Поверхности | `--ev-bg`, `--ev-surface-1` (карточки), `--ev-surface-2` (поповеры, шапка таблицы), `--ev-surface-3` (кнопки), `--ev-surface-nested`, `--ev-surface-input`, `--ev-hover`, `--ev-active`, `--ev-tint-1..4` |
+| Тени | `--ev-shadow-card`, `--ev-shadow-sm`, `--ev-shadow`, `--ev-shadow-pop`, `--ev-shadow-modal`, `--ev-shadow-primary` |
+| Рамки | `--ev-border-soft`, `--ev-border`, `--ev-border-strong`, `--ev-border-control` (поля, 3:1), `--ev-border-hover` |
+| Текст | `--ev-text`, `--ev-text-secondary`, `--ev-text-muted` (>= 4.5:1), `--ev-text-disabled`, `--ev-text-on-accent` |
+| Акцент | `--ev-accent`, `--ev-accent-text`, `--ev-accent-strong`, `--ev-accent-soft`, `--ev-accent-edge`, `--ev-accent-rgb`, `--ev-accent-swatch-<пресет>` |
+| Выделение | `--ev-selected-bg`, `--ev-selected-bg-subtle`, `--ev-selected-edge`, `--ev-selected-text`, `--ev-selected-indicator` |
+| Фокус | `--ev-focus-ring` (кнопки и другие контролы), `--ev-focus-ring-inset` (элементы без рамки: пункты меню, вкладки), `--ev-focus-field` и `--ev-focus-field-invalid` (поля с рамкой; в `slim` рамка только меняет цвет) |
+| Семантика | `--ev-success`, `--ev-warning`, `--ev-danger`, `--ev-info`, `--ev-violet` (+ `-soft`, `-edge`, `-strong`) - не зависят от акцента |
+| Графики | `--ev-chart-1..8`, `--ev-chart-grid`, `--ev-chart-axis` |
+| Геометрия | `--ev-radius-xs..xl`, `--ev-space-0..11` (2..56px), `--ev-control-h-sm/-h/-h-lg` (28/34/40) |
+| Типографика | `--ev-fs-2xs..3xl` (11..30px, база 14px), `--ev-fw-*`, `--ev-fw-title`, `--ev-lh`; подписи разделов: `--ev-caps-transform`, `--ev-caps-size`, `--ev-caps-weight`, `--ev-tracking-caps` |
+| Слои | `--ev-z-sticky` < `--ev-z-topbar` < `--ev-z-drawer` < `--ev-z-modal` < `--ev-z-dropdown` < `--ev-z-toast` < `--ev-z-tooltip` |
+| Движение | `--ev-dur-fast/-dur/-dur-slow`, `--ev-ease`, `--ev-ease-out`; `prefers-reduced-motion` учтён глобально |
+
+Тон компонента (`Badge`, `StatusPill`, `Callout`, `StatTile`, `Avatar`, `Progress`) - проп `tone`: `neutral | accent | success | warning | danger | info | violet`.
+
+## Компоненты
+
+- **Действия:** `Button` (`primary | secondary | ghost | danger | danger-ghost | link`, `sm | md | lg`, `loading`, `icon`, `iconRight`, `block`), `LinkButton`, `IconButton` (обязательный `label` = aria-label + подсказка), `Menu`, `Popover`.
+- **Формы:** `Field` (подпись, подсказка, ошибка; сам связывает `id`, `aria-invalid`, `aria-describedby`), `FormSection`, `Input`, `SearchInput`, `PasswordInput`, `Textarea` (`autoResize`), `NumberInput` (`min/max/step`, `decimals`, `unit`, `stepper`), `MoneyInput` (значение в копейках), `PhoneInput` (22 страны с выбором из списка, распознавание кода при вставке, E.164), `SnilsInput`, `PlateInput`, `DigitsInput`, `MaskedDigitsInput`, `TimeInput` (`ЧЧ:ММ`, `min/max`), `ColorField`.
+- **Выбор:** `Select` (поиск при > 7 опций, группы, `clearable`, серверный поиск `onSearch`), `MultiSelect`, `DateField` (`YYYY-MM-DD`), `DateRangePicker`, `Calendar`, `Checkbox` (`indeterminate`), `Switch`, `RadioGroup` (`variant="card"`), `SegmentedControl`, `Tabs` (кнопки или ссылки `href`), `TabPanel`.
+- **Данные:** `DataTable` (колонки конфигом, сортировка, выбор строк, `loading`, `fetching`, `error` + `onRetry`, `empty`, `maxHeight`, на узком экране - карточки), `Pagination`, `FilterBar`, `KeyValueList`, `StatTile`, `Badge`, `StatusPill`, `Avatar` (инициалы или фото), `Progress` (в том числе перерасход), `Timeline` (лента событий, будущие шаги, «показать ещё»), `UptimeBar` (доступность по дням с подсказками), `CopyButton`, `CopyValue`.
+- **Графики:** `BarChart` (рядом или `stacked`), `LineChart`, `AreaChart`, `Sparkline`, `DonutChart` (доли, «Прочее», легенда), `Heatmap` (календарь активности) и `HeatmapMatrix` (матрица «строка x столбец»), `RingProgress` (кольцо, секции, перерасход), `Gauge` (шкала-полукруг с зонами). Подсказка по наведению и стрелками, легенда при 2+ сериях, скрытая таблица для скринридера.
+- **Состояния и окна:** `Callout`, `EmptyState`, `ErrorState`, `Skeleton`, `SkeletonText`, `Spinner`, `LoadingBlock`, `Modal`, `useModals()` (`open`, `confirm`, `alert`), `Drawer`, `toast.*` / `useToast()` (вызов и вне React), `FileDrop`.
+- **Навигация и структура:** `CommandPalette` (Ctrl+K, группы, поиск по словам), `Steps` (шаги мастера, горизонтально и вертикально), `Accordion` и `Disclosure`, `TreeView` (выбор одного или нескольких с частичным состоянием, клавиатура WAI-ARIA).
+- **Ввод (дополнительно):** `Slider` (значение и диапазон, метки), `TagInput` (метки, подсказки, лимит, проверка), `Chip` и `ChipGroup` (фильтры и метки), `OtpInput` (код подтверждения, вставка целиком), `InlineEdit` (правка на месте с асинхронным сохранением).
+- **Контент:** `Banner` (объявление на всю ширину, скрытие запоминается), `CodeBlock` и `InlineCode` (номера строк, подсветка строк и синтаксиса без зависимостей, сворачивание), `Highlight` (совпадения поиска, ё = е), `RelativeTime` («5 минут назад» на обоих языках), `ExpandableText` («Показать полностью»).
+- **Каркас:** `AppShell` (слот `statusBar`), `Topbar`, `Sidebar`, `SidebarSection`, `SidebarItem`, `SidebarCollapseButton`, `useAppShell()`, `PageHeader`, `Breadcrumbs`, `SectionTitle`, `Card`, `Panel`, `Divider`, `Kbd`, `StatusBar` (`StatusBarItem`, `StatusBarClock`), `WorkspaceSwitcher`, `ScreenOverlay` (техработы, новая версия), `ContextMenu` и `ContextMenuProvider` (правый клик, реестр по `data-ctx-kind`).
+- **CRM - карточка записи:** `RecordHeader` (шапка: аватар, идентификаторы с копированием, показатели, действия), `RecordLayout` (основная и боковая колонки), `EditablePanel` (секция с режимом правки и асинхронным сохранением), `CompletenessBadge` (что не заполнено и что истекает), `BadgeStack` и `AvatarGroup` (+N), присутствие у `Avatar` (`status`, `lastSeen`), `missing` у строк `KeyValueList`.
+- **CRM - процессы:** `KanbanBoard` и `KanbanCard` (колонки со счётчиками и «показать ещё», перетаскивание и перенос с клавиатуры), `SlaTimer` (прошло / осталось, тоны по порогам, `formatDuration`), `PermissionMatrix` (разделы × роли, режимы, изменения против сохранённого), `SettingsList`, `SettingRow`, `SaveBar`, `useDirtyState`.
+- **CRM - коммуникации:** `NotificationCenter` и `NotificationList` (история, прочитано, действия), `toast` с несколькими действиями, `ChatThread`, `ChatMessage`, `Composer` (вложения, вставка скриншотов, перетаскивание), `Lightbox`, `ConnectionStatus`.
+- **Фильтры в адресе:** `useUrlFilters` - синхронизация с URL и память по области.
+- **Язык:** `LocaleProvider`, `useMessages`, `useLocale`, `useNumberFormat`, словари `ru`, `en`.
+- **Тема:** `ThemeScript` (`nonce` для CSP), `themeBootstrap`, `useTheme`, `setTheme`, `setAccent`, `ACCENTS`.
+- **Утилиты:** `cx`, `normalizeSearch`, `formatPhone`, `isCompletePhone`, `normalizePlate`, `normalizeHexColor`, `useMediaQuery`, `useDebouncedValue`, `useControllable`, `LinkProvider`. Классы раскладки: `ev-stack`, `ev-row`, `ev-grid` (`--ev-gap`, `--ev-grid-min`), `ev-mono`, `ev-num`, `ev-muted`, `ev-truncate`, `ev-link`, `ev-visually-hidden`.
+
+## Доработка под себя
+
+Пакет публикует и сборку (`dist/`), и исходники (`src/`). Три уровня настройки:
+
+1. **Токены** - переопределите `--ev-*` в своих стилях: цвета, радиусы, плотность (`--ev-control-h`), шрифты.
+2. **Стили компонентов** - классы `ev-*` и data-атрибуты (`data-variant`, `data-size`, `data-tone`) стабильны; ваши правила вне слоёв перекрывают библиотеку.
+3. **Код** - скопируйте нужный компонент из `node_modules/endfield-vision/src/components` в проект и правьте как свой.
+
+## Лицензия
+
+[MIT](LICENSE)

package/dist/components/Accordion.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+export interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    icon?: ReactNode;
+    /** Справа в заголовке: счётчик, статус, дата. */
+    meta?: ReactNode;
+    disabled?: boolean;
+}
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Несколько открытых секций одновременно. По умолчанию открыта не больше одной. */
+    multiple?: boolean;
+    /** Открытые секции (id), контролируемый режим. */
+    value?: string[];
+    /** Открытые секции при первом рендере. */
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+    /** separated - отдельные карточки на поверхности, flush - список с разделителями. */
+    variant?: 'separated' | 'flush';
+    /** Кнопка «Развернуть все / Свернуть все» над списком (только при multiple). */
+    showExpandAll?: boolean;
+    /** Уровень заголовков секций в структуре страницы. По умолчанию - 3. */
+    headingLevel?: HeadingLevel;
+    className?: string;
+}
+/** Новое множество открытых секций после щелчка по секции id. */
+export declare function toggleAccordionValue(value: string[], id: string, multiple: boolean): string[];
+/** id секций, которые можно открыть (без отключённых). */
+export declare function expandableIds(items: Pick<AccordionItem, 'id' | 'disabled'>[]): string[];
+export declare function Accordion({ items, multiple, value, defaultValue, onValueChange, variant, showExpandAll, headingLevel, className, }: AccordionProps): import("react").JSX.Element;
+export interface DisclosureProps {
+    /** Подпись кнопки-переключателя. */
+    title: ReactNode;
+    children: ReactNode;
+    /** Открыт (контролируемый режим). */
+    open?: boolean;
+    /** Открыт при первом рендере. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+/** Одиночный раскрывающийся блок: подробности, дополнительные параметры формы. */
+export declare function Disclosure({ title, children, open, defaultOpen, onOpenChange, disabled, className }: DisclosureProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAazE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAErC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,qFAAqF;IACrF,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAA;IAC/B,gFAAgF;IAChF,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,wEAAwE;IACxE,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,iEAAiE;AACjE,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,CAI7F;AAED,0DAA0D;AAC1D,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,UAAU,CAAC,EAAE,GAAG,MAAM,EAAE,CAEvF;AA4BD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAgB,EAChB,KAAK,EACL,YAAY,EACZ,aAAa,EACb,OAAqB,EACrB,aAAqB,EACrB,YAAgB,EAChB,SAAS,GACV,EAAE,cAAc,+BAwDhB;AAED,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAmB,EAAE,YAAY,EAAE,QAAgB,EAAE,SAAS,EAAE,EAAE,eAAe,+BAsBpI"}

package/dist/components/Accordion.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from 'lucide-react';
+import { useId, useRef } from 'react';
+import { cx } from '../lib/cx.js';
+import { useControllable } from '../lib/hooks.js';
+import { useMessages } from '../lib/i18n.js';
+import { Button } from './Button.js';
+/** Новое множество открытых секций после щелчка по секции id. */
+export function toggleAccordionValue(value, id, multiple) {
+    const open = value.includes(id);
+    if (multiple)
+        return open ? value.filter((v) => v !== id) : [...value, id];
+    return open ? [] : [id];
+}
+/** id секций, которые можно открыть (без отключённых). */
+export function expandableIds(items) {
+    return items.filter((it) => !it.disabled).map((it) => it.id);
+}
+/** Перевод фокуса между заголовками стрелками, Home и End. */
+function onHeadersKey(e, root) {
+    if (!root || !['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key))
+        return;
+    const target = e.target;
+    if (!target.hasAttribute('data-ev-accordion-trigger'))
+        return;
+    const triggers = Array.from(root.querySelectorAll('[data-ev-accordion-trigger]')).filter((b) => !b.disabled && b.closest('.ev-accordion') === root);
+    const i = triggers.indexOf(target);
+    if (i < 0)
+        return;
+    const n = triggers.length;
+    const next = e.key === 'Home' ? 0 : e.key === 'End' ? n - 1 : e.key === 'ArrowDown' ? (i + 1) % n : (i - 1 + n) % n;
+    e.preventDefault();
+    triggers[next]?.focus();
+}
+/** Панель с анимацией высоты. */
+function Collapse({ open, id, children, ...rest }) {
+    return (_jsx("div", { ...rest, id: id, className: cx('ev-collapse', rest.className), "data-open": open || undefined, children: _jsx("div", { className: "ev-collapse-inner", children: children }) }));
+}
+export function Accordion({ items, multiple = false, value, defaultValue, onValueChange, variant = 'separated', showExpandAll = false, headingLevel = 3, className, }) {
+    const t = useMessages();
+    const base = useId();
+    const rootRef = useRef(null);
+    const [openIds, setOpenIds] = useControllable(value, defaultValue ?? [], onValueChange);
+    const Heading = `h${headingLevel}`;
+    const enabled = expandableIds(items);
+    const allOpen = enabled.length > 0 && enabled.every((id) => openIds.includes(id));
+    return (_jsxs("div", { className: cx('ev-accordion-wrap', className), children: [multiple && showExpandAll && enabled.length > 0 ? (_jsx("div", { className: "ev-accordion-toolbar", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setOpenIds(allOpen ? [] : enabled), children: allOpen ? t.accordion.collapseAll : t.accordion.expandAll }) })) : null, _jsx("div", { ref: rootRef, className: "ev-accordion", "data-variant": variant, onKeyDown: (e) => onHeadersKey(e, rootRef.current), children: items.map((it, i) => {
+                    const open = openIds.includes(it.id) && !it.disabled;
+                    // id в DOM - по индексу: id секции может содержать пробелы, а aria-controls - список через пробел.
+                    const triggerId = `${base}-t${i}`;
+                    const panelId = `${base}-p${i}`;
+                    return (_jsxs("div", { className: "ev-accordion-item", "data-open": open || undefined, "data-disabled": it.disabled || undefined, children: [_jsx(Heading, { className: "ev-accordion-heading", children: _jsxs("button", { type: "button", id: triggerId, className: "ev-accordion-trigger", "aria-expanded": open, "aria-controls": panelId, disabled: it.disabled, "data-ev-accordion-trigger": "", onClick: () => setOpenIds(toggleAccordionValue(openIds, it.id, multiple)), children: [it.icon ? (_jsx("span", { className: "ev-accordion-icon", "aria-hidden": "true", children: it.icon })) : null, _jsx("span", { className: "ev-accordion-title", children: it.title }), it.meta ? _jsx("span", { className: "ev-accordion-meta", children: it.meta }) : null, _jsx(ChevronDown, { size: 16, className: "ev-accordion-chevron", "aria-hidden": "true" })] }) }), _jsx(Collapse, { open: open, id: panelId, role: "region", "aria-labelledby": triggerId, children: _jsx("div", { className: "ev-accordion-content", children: it.content }) })] }, it.id));
+                }) })] }));
+}
+/** Одиночный раскрывающийся блок: подробности, дополнительные параметры формы. */
+export function Disclosure({ title, children, open, defaultOpen = false, onOpenChange, disabled = false, className }) {
+    const panelId = useId();
+    const [isOpen, setOpen] = useControllable(open, defaultOpen, onOpenChange);
+    const shown = isOpen && !disabled;
+    return (_jsxs("div", { className: cx('ev-disclosure', className), "data-open": shown || undefined, children: [_jsxs("button", { type: "button", className: "ev-disclosure-trigger", "aria-expanded": shown, "aria-controls": panelId, disabled: disabled, onClick: () => setOpen(!isOpen), children: [_jsx(ChevronDown, { size: 16, className: "ev-disclosure-chevron", "aria-hidden": "true" }), _jsx("span", { children: title })] }), _jsx(Collapse, { open: shown, id: panelId, children: _jsx("div", { className: "ev-disclosure-content", children: children }) })] }));
+}
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../src/components/Accordion.tsx"],"names":[],"mappings":"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"}

package/dist/components/AnimatedNumber.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export interface AnimatedNumberProps {
+    value: number;
+    /** Формат вывода; по умолчанию - число по правилам языка с decimals знаками. */
+    format?: (value: number) => string;
+    /** Знаков после запятой при формате по умолчанию. */
+    decimals?: number;
+    /** Анимировать (по умолчанию - из MotionProvider). */
+    animate?: boolean;
+    /** Длительность, мс (по умолчанию - из MotionProvider). */
+    duration?: number;
+    className?: string;
+}
+export declare function AnimatedNumber({ value, format, decimals, animate, duration, className }: AnimatedNumberProps): import("react").JSX.Element;
+/**
+ * Число внутри готовой строки («12 845 000 ₽», «96,4%»): набирается с
+ * сохранением формата, префикса и суффикса. Строка без числа или узел -
+ * выводится как есть.
+ */
+export declare function AnimatedText({ children, animate, duration }: {
+    children: ReactNode;
+    animate?: boolean;
+    duration?: number;
+}): import("react").JSX.Element;
+//# sourceMappingURL=AnimatedNumber.d.ts.map

package/dist/components/AnimatedNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimatedNumber.d.ts","sourceRoot":"","sources":["../../src/components/AnimatedNumber.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAW9C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,gFAAgF;IAChF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAClC,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,sDAAsD;IACtD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,mBAAmB,+BAoBhH;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,+BAoB1H"}