@dxtmisha/wiki 0.39.2 → 0.39.3

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

@@ -1,117 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Rules'/>
-
-# Rules
-
-A set of SCSS functions for working with maps, selectors, and strings with CSS Custom Properties support.
-
-## Validation Functions
-
-### `isCustomVar`
-
-Checks if a value is a CSS custom property.
-
-**Parameters:**
-- `$value` — value to check
-
-**Returns:** `Boolean`
-
-```scss
-@if isCustomVar(var(--color)) { } // true
-@if isCustomVar(#ff0000) { } // false
-```
-
-## Map Functions
-
-### `getMapItem`
-
-Returns value from nested map by key path.
-
-**Parameters:**
-- `$map` — input map
-- `$index` — key or list of keys for traversal
-- `$default: null` — default value if not found
-
-**Returns:** `*`
-
-```scss
-$value: getMapItem($map, 'key');
-$nested: getMapItem($map, ('level1', 'level2'));
-```
-
-### `getMapByIndex`
-
-Returns value from map by single key.
-
-**Parameters:**
-- `$map` — input map
-- `$index` — key
-- `$default: null` — default value if not found
-
-**Returns:** `*`
-
-```scss
-$value: getMapByIndex($map, 'key', 'default');
-```
-
-### `setMapItem`
-
-Updates value in map by key.
-
-**Parameters:**
-- `$map` — input map
-- `$index` — key
-- `$value` — value to save
-
-**Returns:** `Map`
-
-```scss
-$updated: setMapItem($map, 'key', 'new-value');
-```
-
-## Selector Functions
-
-### `getFirstSelector`
-
-Returns name of first selector.
-
-**Parameters:**
-- `$selector: &` — selector (defaults to current selector)
-
-**Returns:** `String`
-
-```scss
-$name: getFirstSelector(); // returns first selector name
-```
-
-## String Functions
-
-### `strToList`
-
-Splits string by separator into list.
-
-**Parameters:**
-- `$value` — input string
-- `$separator: '.'` — boundary string
-
-**Returns:** `List`
-
-```scss
-$list: strToList('class.name', '.'); // ('class', 'name')
-```
-
-### `strReplace`
-
-Replaces all occurrences of search string with replacement.
-
-**Parameters:**
-- `$value` — string being searched
-- `$pattern` — value being searched
-- `$replacement` — replacement value
-
-**Returns:** `String`
-
-```scss
-$result: strReplace('hello-world', '-', '_'); // 'hello_world'
-```

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

@@ -1,27 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Scrollbar'/>
-
-# Scrollbar
-
-A set of SCSS mixins for managing scrollbar appearance with CSS Custom Properties support.
-
-## Mixins
-
-### `scrollbarHide`
-
-Hides scrollbar while keeping scroll functionality.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include scrollbarHide;
-  // scrollbar-width: none;
-  // scroll-behavior: auto;
-  // &::-webkit-scrollbar { width: 0; height: 0; }
-}
-```
-

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

@@ -1,153 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Selector'/>
-
-# Selector
-
-A set of SCSS mixins for managing element state selectors with CSS Custom Properties support.
-
-**How it works:** The system provides intelligent state management for interactive elements. The `enabled` mixin automatically adds `:not()` selectors to exclude disabled, readonly, and loading states. State mixins like `hover`, `active`, and `focus` wrap `enabled` to ensure interactions only work on active elements. Special handling for `focus` includes `:focus`, `:focus-within`, and BEM modifier for programmatic focus states.
-
-## Basic Mixins
-
-### `selector`
-
-Creates pseudo-class selector with special handling for focus state.
-
-**Parameters:**
-- `$name` — selector name (e.g., 'hover', 'active', 'focus')
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include selector('hover') {
-    background: blue;
-  }
-}
-```
-
-### `enabled`
-
-Applies styles only to enabled (non-disabled, non-readonly, non-loading) elements.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include enabled {
-    cursor: pointer;
-  }
-}
-```
-
-### `enabledSelector`
-
-Combines enabled state with pseudo-class selector.
-
-**Parameters:**
-- `$name` — selector name
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include enabledSelector('hover') {
-    background: blue;
-  }
-}
-```
-
-## State Mixins
-
-### `hover`
-
-Applies styles on hover for enabled elements only.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include hover {
-    background: blue;
-  }
-}
-```
-
-### `active`
-
-Applies styles on active state for enabled elements only.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include active {
-    transform: scale(0.95);
-  }
-}
-```
-
-### `focus`
-
-Applies styles on focus state for enabled elements only. Includes :focus, :focus-within, and BEM modifier.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include focus {
-    outline: 2px solid blue;
-  }
-}
-```
-
-### `disabled`
-
-Applies styles to disabled elements.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.button {
-  @include disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-```
-
-### `readonly`
-
-Applies styles to readonly elements.
-
-**Parameters:**
-- `$parent: &` — parent selector
-
-**Returns:** `void`
-
-```scss
-.input {
-  @include readonly {
-    background: #f5f5f5;
-  }
-}
-```
-

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

@@ -1,114 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Transform'/>
-
-# Transform
-
-A set of SCSS mixins for managing CSS transforms with CSS Custom Properties support.
-
-## Mixins
-
-### `initTransform`
-
-Initializes transform system with CSS custom properties.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-@include initTransform;
-// --sys-transform-translateX: 0px;
-// --sys-transform-translateY: 0px;
-// --sys-transform-scale: 1;
-// --sys-transform-rotate: 0;
-```
-
-### `translateX`
-
-Sets horizontal translation with RTL support.
-
-**Parameters:**
-- `$value` — translation value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include translateX(10px);
-}
-```
-
-### `translateY`
-
-Sets vertical translation.
-
-**Parameters:**
-- `$value` — translation value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include translateY(10px);
-}
-```
-
-### `scale`
-
-Sets element scale.
-
-**Parameters:**
-- `$value` — scale value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include scale(1.5);
-}
-```
-
-### `rotate`
-
-Sets element rotation.
-
-**Parameters:**
-- `$value` — rotation value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include rotate(45deg);
-}
-```
-
-### `transformInit`
-
-Applies all transform properties using CSS custom properties with RTL support for translateX.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include transformInit;
-}
-```
-
-### `translateInit`
-
-Applies translate property using CSS custom properties.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include translateInit;
-}
-```
-

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

@@ -1,78 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/ru/About'/>
-
-# @dxtmisha/styles
-
-Библиотека SCSS утилит для экосистемы DXT UI. Содержит готовые миксины и функции для стилизации с поддержкой CSS Custom Properties, автоматической обработкой RTL и паттернами адаптивного дизайна.
-
-## Что входит в пакет
-
-### Управление цветом
-
-- **Функции цвета** — валидация, конвертация, управление палитрой, обработка прозрачности
-- **getColor** — извлечение значения цвета с поддержкой прозрачности
-- **getPalette** — управление цветами палитры
-- **toColorRbg** — конвертация цвета в формат RGB
-- **toGradient** — преобразование цвета в градиент
-
-### Раскладка и позиционирование
-
-- **Миксины Flexbox** — горизонтальные/вертикальные раскладки, центрирование, пресеты отступов
-- **Миксины позиционирования** — абсолютное/относительное позиционирование с автоматической поддержкой RTL через inset-inline
-- **Миксины размеров** — ширина, высота, соотношение сторон, viewport единицы (dvw/dvh)
-- **Margin и Padding** — утилиты отступов с поддержкой RTL через margin-inline/padding-inline
-
-### Типографика
-
-- **Миксины шрифтов** — размер шрифта, межстрочный интервал, отступы между параграфами с CSS переменными
-- **Выравнивание текста** — автоматическая инверсия выравнивания текста для RTL
-- **Переполнение текста** — обрезка, ограничение строк, обработка многоточия
-- **Преобразование текста** — утилиты uppercase, lowercase, capitalize
-
-### Направление и поддержка RTL
-
-- **Система Dir** — автоматическое управление направлением LTR/RTL через CSS переменные
-- **initDir** — инициализация с множителем --d-dir (1 для LTR, -1 для RTL)
-- **dirLeft/dirRight** — автоматическая инверсия значений для RTL
-- **dirFlexLeft/dirFlexRight** — flex-выравнивание с поддержкой RTL
-
-### Адаптивный дизайн
-
-- **Медиа-запросы** — контрольные точки min/max width из дизайн-системы
-- **Контейнерные запросы** — адаптивные компоненты на основе размера родительского контейнера
-- **mediaMinWidth/mediaMaxWidth** — удобные обёртки для медиа-запросов
-- **containerMinWidth/containerMaxWidth** — утилиты контейнерных запросов
-
-### Трансформации и анимация
-
-- **Миксины трансформаций** — translateX/Y, scale, rotate с CSS переменными
-- **transformInit** — применяет все трансформации с автоматическим RTL для translateX
-- **translateInit** — только translate-трансформации
-
-### Интерактивные состояния
-
-- **Миксины селекторов** — состояния hover, active, focus, disabled, readonly
-- **enabled** — автоматическое исключение состояний disabled/readonly/loading
-- **focus** — включает :focus, :focus-within и поддержку BEM-модификатора
-
-### Утилиты
-
-- **Content Visibility** — оптимизация производительности для контента вне экрана
-- **Scrollbar** — скрытие полосы прокрутки с сохранением функциональности
-- **Rules** — операции с мапами, манипуляции строками, утилиты селекторов
-- **Custom Properties** — управление CSS переменными и валидация
-
-## Ключевые возможности
-
-**Поддержка RTL:** Автоматическая поддержка раскладки справа налево через CSS Logical Properties (margin-inline, padding-inline, inset-inline) и интеграцию с системой направлений
-
-**CSS Custom Properties:** Все значения размеров, отступов и трансформаций хранятся как CSS переменные для динамического изменения темы
-
-**Интеграция с дизайн-системой:** Контрольные точки, цвета и значения отступов из централизованных дизайн-токенов
-
-**Производительность:** Оптимизации content visibility, эффективная генерация селекторов, минимальный вывод CSS
-
-**Типобезопасность:** Функции валидации для цветов, custom properties и типов данных
-
-**Совместимость с BEM:** Все миксины работают бесшовно с методологией BEM