@dxtmisha/wiki 0.24.2 → 0.24.3

package/src/media/styles/ru/rules.mdx

@@ -0,0 +1,117 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Rules'/>
+
+# Rules
+
+Набор SCSS функций для работы с мапами, селекторами и строками с поддержкой CSS Custom Properties.
+
+## Функции валидации
+
+### `isCustomVar`
+
+Проверяет, является ли значение CSS custom property.
+
+**Параметры:**
+- `$value` — значение для проверки
+
+**Возвращает:** `Boolean`
+
+```scss
+@if isCustomVar(var(--color)) { } // true
+@if isCustomVar(#ff0000) { } // false
+```
+
+## Функции для работы с мапами
+
+### `getMapItem`
+
+Возвращает значение из вложенной мапы по пути ключей.
+
+**Параметры:**
+- `$map` — входная мапа
+- `$index` — ключ или список ключей для обхода
+- `$default: null` — значение по умолчанию, если не найдено
+
+**Возвращает:** `*`
+
+```scss
+$value: getMapItem($map, 'key');
+$nested: getMapItem($map, ('level1', 'level2'));
+```
+
+### `getMapByIndex`
+
+Возвращает значение из мапы по одному ключу.
+
+**Параметры:**
+- `$map` — входная мапа
+- `$index` — ключ
+- `$default: null` — значение по умолчанию, если не найдено
+
+**Возвращает:** `*`
+
+```scss
+$value: getMapByIndex($map, 'key', 'default');
+```
+
+### `setMapItem`
+
+Обновляет значение в мапе по ключу.
+
+**Параметры:**
+- `$map` — входная мапа
+- `$index` — ключ
+- `$value` — значение для сохранения
+
+**Возвращает:** `Map`
+
+```scss
+$updated: setMapItem($map, 'key', 'new-value');
+```
+
+## Функции селекторов
+
+### `getFirstSelector`
+
+Возвращает название первого селектора.
+
+**Параметры:**
+- `$selector: &` — селектор (по умолчанию текущий селектор)
+
+**Возвращает:** `String`
+
+```scss
+$name: getFirstSelector(); // возвращает имя первого селектора
+```
+
+## Функции для работы со строками
+
+### `strToList`
+
+Разбивает строку на список по разделителю.
+
+**Параметры:**
+- `$value` — входная строка
+- `$separator: '.'` — разделитель
+
+**Возвращает:** `List`
+
+```scss
+$list: strToList('class.name', '.'); // ('class', 'name')
+```
+
+### `strReplace`
+
+Заменяет все вхождения строки поиска на строку замены.
+
+**Параметры:**
+- `$value` — строка, в которой производится поиск
+- `$pattern` — искомое значение
+- `$replacement` — значение замены
+
+**Возвращает:** `String`
+
+```scss
+$result: strReplace('hello-world', '-', '_'); // 'hello_world'
+```

package/src/media/styles/ru/scrollbar.mdx

@@ -0,0 +1,27 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Scrollbar'/>
+
+# Scrollbar
+
+Набор SCSS миксинов для управления внешним видом полос прокрутки с поддержкой CSS Custom Properties.
+
+## Миксины
+
+### `scrollbarHide`
+
+Скрывает полосу прокрутки, сохраняя функциональность прокрутки.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include scrollbarHide;
+  // scrollbar-width: none;
+  // scroll-behavior: auto;
+  // &::-webkit-scrollbar { width: 0; height: 0; }
+}
+```
+

package/src/media/styles/ru/selector.mdx

@@ -0,0 +1,153 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Selector'/>
+
+# Selector
+
+Набор SCSS миксинов для управления селекторами состояний элементов с поддержкой CSS Custom Properties.
+
+**Как это работает:** Система обеспечивает интеллектуальное управление состояниями интерактивных элементов. Миксин `enabled` автоматически добавляет селекторы `:not()` для исключения состояний disabled, readonly и loading. Миксины состояний, такие как `hover`, `active` и `focus`, оборачивают `enabled`, гарантируя работу взаимодействий только на активных элементах. Особая обработка для `focus` включает `:focus`, `:focus-within` и BEM-модификатор для программных состояний фокуса.
+
+## Базовые миксины
+
+### `selector`
+
+Создает псевдокласс селектор с особой обработкой состояния focus.
+
+**Параметры:**
+- `$name` — имя селектора (например, 'hover', 'active', 'focus')
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include selector('hover') {
+    background: blue;
+  }
+}
+```
+
+### `enabled`
+
+Применяет стили только к включенным (не disabled, не readonly, не loading) элементам.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include enabled {
+    cursor: pointer;
+  }
+}
+```
+
+### `enabledSelector`
+
+Комбинирует состояние enabled с псевдоклассом селектора.
+
+**Параметры:**
+- `$name` — имя селектора
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include enabledSelector('hover') {
+    background: blue;
+  }
+}
+```
+
+## Миксины состояний
+
+### `hover`
+
+Применяет стили при наведении только для активных элементов.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include hover {
+    background: blue;
+  }
+}
+```
+
+### `active`
+
+Применяет стили при активном состоянии только для активных элементов.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include active {
+    transform: scale(0.95);
+  }
+}
+```
+
+### `focus`
+
+Применяет стили при фокусе только для активных элементов. Включает :focus, :focus-within и BEM-модификатор.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include focus {
+    outline: 2px solid blue;
+  }
+}
+```
+
+### `disabled`
+
+Применяет стили к отключенным элементам.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.button {
+  @include disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+```
+
+### `readonly`
+
+Применяет стили к элементам только для чтения.
+
+**Параметры:**
+- `$parent: &` — родительский селектор
+
+**Возвращает:** `void`
+
+```scss
+.input {
+  @include readonly {
+    background: #f5f5f5;
+  }
+}
+```
+

package/src/media/styles/ru/transform.mdx

@@ -0,0 +1,114 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/styles/ru/Transform'/>
+
+# Transform
+
+Набор SCSS миксинов для управления CSS-трансформациями с поддержкой CSS Custom Properties.
+
+## Миксины
+
+### `initTransform`
+
+Инициализирует систему трансформаций с CSS custom properties.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+@include initTransform;
+// --sys-transform-translateX: 0px;
+// --sys-transform-translateY: 0px;
+// --sys-transform-scale: 1;
+// --sys-transform-rotate: 0;
+```
+
+### `translateX`
+
+Устанавливает горизонтальное смещение с поддержкой RTL.
+
+**Параметры:**
+- `$value` — значение смещения
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include translateX(10px);
+}
+```
+
+### `translateY`
+
+Устанавливает вертикальное смещение.
+
+**Параметры:**
+- `$value` — значение смещения
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include translateY(10px);
+}
+```
+
+### `scale`
+
+Устанавливает масштабирование элемента.
+
+**Параметры:**
+- `$value` — значение масштаба
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include scale(1.5);
+}
+```
+
+### `rotate`
+
+Устанавливает поворот элемента.
+
+**Параметры:**
+- `$value` — значение поворота
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include rotate(45deg);
+}
+```
+
+### `transformInit`
+
+Применяет все свойства трансформации через CSS custom properties с поддержкой RTL для translateX.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include transformInit;
+}
+```
+
+### `translateInit`
+
+Применяет свойство translate через CSS custom properties.
+
+**Параметры:** нет
+
+**Возвращает:** `void`
+
+```scss
+.element {
+  @include translateInit;
+}
+```
+

package/src/styles/storybookStyle.scss

@@ -67,6 +67,7 @@
       &--static {
         position: static;
         @include ui.padding(0);
+        width: 100%;
         background: transparent;
       }
     }

package/src/media/mdx/Bars/slot.actionBars.en.mdx

@@ -1,12 +0,0 @@
-### `actionBars`
-
-Slot for rendering the set of action buttons in action mode. It lets you fully redefine specialized actions that appear when selection mode is active.
-
-This slot lets you:
-- Define domain‑specific actions for selected items (e.g., share, move, delete)
-- Control ordering, grouping, and button state
-- Pass custom attributes to icons and buttons via scoped props
-- Implement responsive behavior and collapse secondary actions
-
-The `actionBars` area is shown instead of the regular `bars` when action mode is enabled and inherits sizing/spacing from the base Bars styles.
-

package/src/media/mdx/Bars/slot.actionBars.ru.mdx

@@ -1,11 +0,0 @@
-### `actionBars`
-
-Слот для рендеринга набора кнопок в режиме действий (action). Позволяет полностью переопределить специализированные действия, которые отображаются при активированном режиме выбора.
-
-Этот слот позволяет:
-- Определять доменно‑специфичные действия для выбранных элементов (например: поделиться, переместить, удалить)
-- Контролировать порядок, группировку и состояние кнопок
-- Передавать собственные атрибуты иконкам и кнопкам через scoped‑props
-- Реализовывать адаптивное поведение и сворачивание второстепенных действий
-
-Область `actionBars` отображается вместо обычного `bars`, когда включён режим action, и наследует размеры/отступы от базового стиля компонента Bars.

package/src/media/mdx/Bars/slot.bars.en.mdx

@@ -1,12 +0,0 @@
-### `bars`
-
-Slot for rendering the set of action buttons in the regular (non‑action) mode. It lets you fully customize the composition, order, and appearance of buttons aligned to the right of the label.
-
-This slot lets you:
-- Place any buttons/controls instead of the default set
-- Control ordering, grouping, and separators for actions
-- Pass custom attributes to icons and buttons via scoped props
-- Implement responsive behavior (collapse/hide actions on narrow screens)
-
-The `bars` area is typically right‑aligned and inherits sizing/spacing from the base Bars styles.
-

package/src/media/mdx/Bars/slot.bars.ru.mdx

@@ -1,11 +0,0 @@
-### `bars`
-
-Слот для рендеринга набора кнопок панели действий в обычном режиме. Позволяет полностью переопределить состав, порядок и внешний вид кнопок, которые располагаются справа от заголовка.
-
-Этот слот позволяет:
-- Размещать любые кнопки/элементы управления вместо стандартного набора
-- Управлять порядком, группировкой и разделителями для действий
-- Передавать собственные атрибуты иконкам и кнопкам через scoped‑props
-- Реализовывать адаптивное поведение (скрывать/сворачивать действия на узких экранах)
-
-Как правило, область `bars` выравнивается по правому краю панели и наследует размеры/отступы от базового стиля компонента Bars.

package/src/media/mdx/Cell/slot.body.en.mdx

@@ -1,7 +0,0 @@
-### `body`
-
-Slot for placing additional content at the bottom of the cell.
-
-- Adds information or controls below the main content
-- It Does not affect the main cell structure
-- Suitable for metadata, secondary actions, or details

package/src/media/mdx/Cell/slot.body.ru.mdx

@@ -1,7 +0,0 @@
-### `body`
-
-Слот для размещения дополнительного контента в нижней части ячейки.
-
-- Добавляет информацию или элементы управления под основным содержимым
-- Не влияет на основную структуру ячейки
-- Подходит для метаданных, вторичных действий или деталей

package/src/media/mdx/Cell/slot.trailing.en.mdx

@@ -1,7 +0,0 @@
-### `trailing`
-
-Slot for placing control elements or indicators at the end of the cell.
-
-- Adds interactive elements on the right (switches, buttons, icons)
-- Suitable for actions or status display
-- Content is aligned to the right edge of the cell

package/src/media/mdx/Cell/slot.trailing.ru.mdx

@@ -1,7 +0,0 @@
-### `trailing`
-
-Слот для размещения элементов управления или индикаторов в конце ячейки.
-
-- Добавляет интерактивные элементы справа (переключатели, кнопки, иконки)
-- Подходит для действий или отображения статуса
-- Контент выравнивается по правому краю

package/src/media/mdx/Field/slot.default.en.mdx

@@ -1,9 +0,0 @@
-### `default`
-
-Main input slot for Field – place the actual interactive control here.
-
-- Receives props: `{ id, className, classHidden }`
-- Always bind both `:id="id"` and `:class="className"` to keep accessibility + styling
-- `classHidden` can be used for a hidden mirror / measurement input if needed
-- Avoid extra wrapper elements to prevent layout / sizing breaks
-- Suitable for `<input>`, `<textarea>`, masked or custom input components

package/src/media/mdx/Field/slot.default.ru.mdx

@@ -1,9 +0,0 @@
-### `default`
-
-Основной слот ввода Field — сюда помещается реальный интерактивный контрол.
-
-- Props: `{ id, className, classHidden }`
-- Всегда привязывайте `:id="id"` и `:class="className"` (доступность + стили)
-- `classHidden` можно использовать для скрытого зеркального / измерительного input
-- Избегайте лишних обёрток, чтобы не ломать размеры и выравнивание
-- Подходит для `<input>`, `<textarea>`, маскированных или кастомных компонентов

package/src/media/mdx/Field/slot.leading.en.mdx

@@ -1,10 +0,0 @@
-### `leading`
-
-Slot for placing custom content at the start of the interactive field area (before the main input content flow).
-
-- Positioned at the logical beginning (left in LTR, right in RTL)
-- Suitable for small icons, state indicators, lightweight buttons or badges
-- Receives the same control props object (`{ id, className, classHidden }`) as the default slot
-- Should remain compact; avoid breaking vertical rhythm or padding
-- Does not replace `prefix` — use `prefix` for semantic prefix text and `leading` for functional/auxiliary UI
-

package/src/media/mdx/Field/slot.leading.ru.mdx

@@ -1,10 +0,0 @@
-### `leading`
-
-Слот для размещения пользовательского контента в начале интерактивной области поля (до основного потока ввода).
-
-- Располагается логически в начале (слева в LTR, справа в RTL)
-- Подходит для маленьких иконок, индикаторов состояния, лёгких кнопок или бейджей
-- Получает тот же объект props (`{ id, className, classHidden }`), что и слот `default`
-- Должен оставаться компактным; не нарушайте вертикальный ритм и отступы
-- Не заменяет `prefix` — используйте `prefix` для семантического текстового префикса, а `leading` — для функционального / вспомогательного UI
-

package/src/media/mdx/Field/slot.trailing.en.mdx

@@ -1,10 +0,0 @@
-### `trailing`
-
-Slot for placing custom content at the end of the interactive field area (after the main input content flow but before internal control icons).
-
-- Positioned at the logical end (right in LTR, left in RTL)
-- Good for action icons (clear, open, toggle), counters, lightweight status badges
-- Receives the same control props object (`{ id, className, classHidden }`) as the default slot
-- Keep it concise; avoid large buttons that disrupt layout
-- Does not replace `suffix` — use `suffix` for semantic ending text, `trailing` for functional / dynamic UI
-

package/src/media/mdx/Field/slot.trailing.ru.mdx

@@ -1,10 +0,0 @@
-### `trailing`
-
-Слот для размещения пользовательского контента в конце интерактивной области поля (после основного содержимого ввода, но до внутренних управляющих иконок).
-
-- Расположен логически в конце (справа в LTR, слева в RTL)
-- Подходит для иконок действий (очистка, открыть, переключить), счётчиков, небольших статусных бейджей
-- Получает тот же объект props (`{ id, className, classHidden }`), что и слот `default`
-- Должен быть компактным — избегайте крупных элементов, ломающих компоновку
-- Не заменяет `suffix` — используйте `suffix` для семантического завершающего текста, `trailing` — для функционального / динамического UI
-

package/src/media/mdx/FieldMessage/slot.helper.en.mdx

@@ -1,12 +0,0 @@
-### `helper`
-
-Slot for rendering a helper (hint) message below an input field. It lets you fully override the text, markup, and styling of the hint, and optionally inject additional content.
-
-This slot allows you to:
-- Render custom markup instead of the default helper text
-- Add icons/links/formatting inside the message
-- Control visibility and states via scoped props
-- Localize and swap the text depending on context
-
-Typically, the `helper` area is placed under the input and inherits base spacing/typography from the design system. If a validation message is present at the same time, it has priority over the helper.
-

package/src/media/mdx/FieldMessage/slot.helper.ru.mdx

@@ -1,12 +0,0 @@
-### `helper`
-
-Слот для рендеринга вспомогательного сообщения (подсказки) под полем ввода. Позволяет полностью переопределить текст, разметку и оформление подсказки, а также внедрять дополнительный контент при необходимости.
-
-Этот слот позволяет:
-- Выводить произвольную разметку вместо стандартного текста подсказки
-- Подключать иконки/ссылки/форматирование внутри сообщения
-- Управлять видимостью и состояниями сообщения через scoped‑props
-- Локализовать текст и подменять его в зависимости от контекста
-
-Как правило, область `helper` располагается ниже поля ввода и наследует базовые отступы/типографику дизайн‑системы. Если одновременно есть сообщение валидации, оно имеет приоритет над подсказкой.
-

package/src/media/mdx/FieldMessage/slot.validation.en.mdx

@@ -1,12 +0,0 @@
-### `validation`
-
-Slot for rendering a validation (error) message below an input field. It lets you fully override the text, markup, and styling of the error message, and optionally add custom content.
-
-This slot allows you to:
-- Render custom markup instead of the default error text
-- Add icons/links/formatting inside the message
-- Control visibility and states via scoped props (e.g., error type)
-- Localize and swap the text depending on context
-
-Typically, the `validation` area is placed under the input and has higher priority than `helper` — if a validation message is present, it’s displayed instead of the helper.
-

package/src/media/mdx/FieldMessage/slot.validation.ru.mdx

@@ -1,12 +0,0 @@
-### `validation`
-
-Слот для рендеринга сообщения валидации (ошибки) под полем ввода. Позволяет полностью переопределить текст, разметку и оформление сообщения об ошибке, а также дополнить его собственным контентом.
-
-Этот слот позволяет:
-- Выводить произвольную разметку вместо стандартного текста ошибки
-- Добавлять иконки/ссылки/форматирование внутри сообщения
-- Управлять видимостью и состояниями через scoped‑props (например, тип ошибки)
-- Локализовать и подменять текст в зависимости от контекста
-
-Как правило, область `validation` располагается ниже поля ввода и имеет более высокий приоритет по сравнению с `helper` — если присутствует сообщение об ошибке, оно отображается вместо подсказки.
-

package/src/media/mdx/Image/expose.data.en.mdx

@@ -1,13 +0,0 @@
-### `data`
-
-Information about the uploaded image, including its type and source.
-
-```ts
-export type ImageEventItem = ImageItem | string | undefined
-export type ImageItem = {
-  image: HTMLImageElement
-  src: string
-  width: number
-  height: number
-}
-```

package/src/media/mdx/Image/expose.data.ru.mdx

@@ -1,13 +0,0 @@
-### `data`
-
-Информация о загруженном изображении, включая его тип и источник.
-
-```ts
-export type ImageEventItem = ImageItem | string | undefined
-export type ImageItem = {
-  image: HTMLImageElement
-  src: string
-  width: number
-  height: number
-}
-```