@dxtmisha/wiki 0.39.4 → 0.39.5

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,153 @@
+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

@@ -0,0 +1,114 @@
+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

@@ -0,0 +1,78 @@
+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