@dxtmisha/wiki 0.25.1 → 0.39.2

package/src/media/functional/scripts/classes/StylesToContainer/StylesToContainer.vi.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToContainer - Trình tạo Container Query'/>
+
+# Lớp StylesToContainer
+
+Lớp `StylesToContainer` chịu trách nhiệm tạo các truy vấn CSS `@container` từ các thuộc tính thiết kế. Nó triển khai logic để bao bọc các quy tắc style lồng nhau bên trong một khối container query.
+
+## Các tính năng chính
+
+- **Bao bọc Container Query** — Tự động bao bọc nội dung style được tạo bên trong một quy tắc `@container`.
+- **Phân giải truy vấn động** — Sử dụng giá trị thuộc tính thiết kế để định nghĩa điều kiện của container query.
+- **Quản lý thụt lề** — Xử lý chính xác thụt lề khối và các dòng trống dẫn đầu tùy chọn.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToContainer` với thuộc tính bắt buộc và một hàm gọi nội dung cho các quy tắc lồng nhau.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các quy tắc style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToContainer } from '@dxtmisha/scripts'
+
+// Sử dụng trong logic chuyển đổi
+const converter = new StylesToContainer(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.

package/src/media/functional/scripts/classes/StylesToMedia/StylesToMedia.en.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToMedia - Media Query Generator'/>
+
+# StylesToMedia Class
+
+The `StylesToMedia` class is responsible for generating CSS `@media` queries from design properties. It implements the logic to wrap nested style rules within a media query block.
+
+## Key Features
+
+- **Media Query Wrapping** — Automatically wraps the generated style content within a `@media screen and ...` rule.
+- **Dynamic Query Resolution** — Uses the design property name to define the media query condition.
+- **Indentation Management** — Correctly handles block indentation and optional leading empty lines.
+
+## Initialization
+
+Initialize the `StylesToMedia` converter with the required property and a content callable for the nested rules.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string (e.g., `"  "` or `"\t"`).
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
+- `first?: boolean` — indicates if this is the first element in the current level (optional, default: `true`).
+
+```typescript
+import { StylesToMedia } from '@dxtmisha/scripts'
+
+// Usage in conversion logic
+const converter = new StylesToMedia(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation and adds the required indentation to each line.

package/src/media/functional/scripts/classes/StylesToMedia/StylesToMedia.ru.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToMedia - Генератор медиа-запросов'/>
+
+# Класс StylesToMedia
+
+Класс `StylesToMedia` отвечает за создание CSS-запросов `@media` на основе свойств дизайна. Он реализует логику для обертывания вложенных правил стилей в блок медиа-запроса.
+
+## Ключевые возможности
+
+- **Обертка Медиа-запроса** — Автоматически оборачивает созданный контент стилей в правило `@media screen and ...`.
+- **Динамическое разрешение запроса** — Использует имя свойства дизайна для определения условия медиа-запроса.
+- **Управление отступами** — Корректно обрабатывает отступы блоков и необязательные начальные пустые строки.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToMedia` с помощью необходимого свойства и функции контента для вложенных правил.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая ветка дерева свойств, которая обрабатывается.
+- `space: string` — строка отступа (например, `"  "` или `"\t"`).
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние правила стиля.
+- `first?: boolean` — указывает, является ли этот элемент первым на текущем уровне (необязательно, по умолчанию: `true`).
+
+```typescript
+import { StylesToMedia } from '@dxtmisha/scripts'
+
+// Использование в логике преобразования
+const converter = new StylesToMedia(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование и добавляет необходимый отступ к каждой строке.

package/src/media/functional/scripts/classes/StylesToMedia/StylesToMedia.vi.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToMedia - Trình tạo truy vấn Media'/>
+
+# Lớp StylesToMedia
+
+Lớp `StylesToMedia` chịu trách nhiệm tạo các truy vấn CSS `@media` từ các thuộc tính thiết kế. Nó triển khai logic để bao bọc các quy tắc style lồng nhau bên trong một khối truy vấn media.
+
+## Các tính năng chính
+
+- **Bao bọc truy vấn Media** — Tự động bao bọc nội dung style được tạo bên trong một quy tắc `@media screen and ...`.
+- **Phân giải truy vấn động** — Sử dụng tên thuộc tính thiết kế để định nghĩa điều kiện của truy vấn media.
+- **Quản lý thụt lề** — Xử lý chính xác thụt lề khối và các dòng trống dẫn đầu tùy chọn.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToMedia` với thuộc tính bắt buộc và một hàm gọi nội dung cho các quy tắc lồng nhau.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề (ví dụ: `"  "` hoặc `"\t"`).
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các quy tắc style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên trong cấp độ hiện tại hay không (tùy chọn, mặc định: `true`).
+
+```typescript
+import { StylesToMedia } from '@dxtmisha/scripts'
+
+// Sử dụng trong logic chuyển đổi
+const converter = new StylesToMedia(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi và thêm thụt lề cần thiết vào mỗi dòng.

package/src/media/functional/scripts/classes/StylesToProperty/StylesToProperty.en.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToProperty - CSS Property Generator'/>
+
+# StylesToProperty Class
+
+The `StylesToProperty` class is responsible for converting design properties into standard CSS properties or SCSS mixin calls. It handles variable generation, special property formatting, and auxiliary values for things like opacity.
+
+## Key Features
+
+- **Standard CSS Properties** — Generates property-value pairs (e.g., `margin-top: 10px;`).
+- **SCSS Mixin Integration** — Automatically converts specific properties into mixin calls if they are registered in `styleTypes`.
+- **CSS Variable Generation** — Can generate custom CSS variables if the `varKey` flag is set on the property.
+- **Auxiliary Value Initialization** — Automatically includes initialization calls for opacity-related properties if the base property is missing.
+- **Sorting and Spacing** — Adds vertical spacing between properties if their sort index changes.
+
+## Initialization
+
+Initialize the `StylesToProperty` converter with the required property branch.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string.
+- `content?: () => string[]` — not typically used for properties as they are leaf nodes.
+- `first?: boolean` — indicates if this is the first element (optional).
+
+```typescript
+import { StylesToProperty } from '@dxtmisha/scripts'
+
+const converter = new StylesToProperty(property, '  ')
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the transformation, including variable generation and mixin resolution.

package/src/media/functional/scripts/classes/StylesToProperty/StylesToProperty.ru.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToProperty - Генератор CSS-свойств'/>
+
+# Класс StylesToProperty
+
+Класс `StylesToProperty` отвечает за преобразование свойств дизайна в стандартные CSS-свойства или вызовы SCSS-миксинов. Он управляет генерацией переменных, специальным форматированием свойств и вспомогательными значениями для таких параметров, как прозрачность.
+
+## Ключевые возможности
+
+- **Стандартные CSS-свойства** — Генерирует пары свойство-значение (например, `margin-top: 10px;`).
+- **Интеграция с SCSS-миксинами** — Автоматически преобразует определенные свойства в вызовы миксинов, если они зарегистрированы в `styleTypes`.
+- **Генерация CSS-переменных** — Может генерировать пользовательские CSS-переменные, если для свойства установлен флаг `varKey`.
+- **Инициализация вспомогательных значений** — Автоматически включает вызовы инициализации для свойств, связанных с прозрачностью, если базовое свойство отсутствует.
+- **Сортировка и отступы** — Добавляет вертикальные отступы между свойствами при изменении индекса сортировки.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToProperty` с текущей веткой свойств.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
+- `space: string` — строка отступа.
+- `content?: () => string[]` — обычно не используется для свойств, так как они являются конечными узлами.
+- `first?: boolean` — указывает, является ли элемент первым (необязательно).
+
+```typescript
+import { StylesToProperty } from '@dxtmisha/scripts'
+
+const converter = new StylesToProperty(property, '  ')
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует преобразование, включая генерацию переменных и разрешение миксинов.

package/src/media/functional/scripts/classes/StylesToProperty/StylesToProperty.vi.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToProperty - Trình tạo thuộc tính CSS'/>
+
+# Lớp StylesToProperty
+
+Lớp `StylesToProperty` chịu trách nhiệm chuyển đổi các thuộc tính thiết kế thành các thuộc tính CSS tiêu chuẩn hoặc các lệnh gọi SCSS mixin. Nó xử lý việc tạo biến, định dạng thuộc tính đặc biệt và các giá trị phụ trợ cho những thứ như độ mờ (opacity).
+
+## Các tính năng chính
+
+- **Thuộc tính CSS tiêu chuẩn** — Tạo các cặp thuộc tính-giá trị (ví dụ: `margin-top: 10px;`).
+- **Tích hợp SCSS Mixin** — Tự động chuyển đổi các thuộc tính cụ thể thành các lệnh gọi mixin nếu chúng được đăng ký trong `styleTypes`.
+- **Tạo biến CSS** — Có thể tạo các biến CSS tùy chỉnh nếu cờ `varKey` được đặt trên thuộc tính.
+- **Khởi tạo giá trị phụ trợ** — Tự động bao gồm các lệnh gọi khởi tạo cho các thuộc tính liên quan đến độ mờ nếu thuộc tính cơ sở bị thiếu.
+- **Sắp xếp và Khoảng cách** — Thêm khoảng cách dọc giữa các thuộc tính nếu chỉ số sắp xếp của chúng thay đổi.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToProperty` với nhánh thuộc tính bắt buộc.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề.
+- `content?: () => string[]` — thường không được sử dụng cho các thuộc tính vì chúng là các nút lá.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên hay không (tùy chọn).
+
+```typescript
+import { StylesToProperty } from '@dxtmisha/scripts'
+
+const converter = new StylesToProperty(property, '  ')
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc chuyển đổi, bao gồm việc tạo biến và phân giải mixin.

package/src/media/functional/scripts/classes/StylesToRoot/StylesToRoot.en.mdx

@@ -0,0 +1,36 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToRoot - At-Root Block Generator'/>
+
+# StylesToRoot Class
+
+The `StylesToRoot` class is used to wrap a block of nested rules within a CSS `@at-root` directive. This is useful for lifting rules out of their current scope to the root of the stylesheet.
+
+## Key Features
+
+- **At-Root Wrapping** — Automatically wraps the generated content within an `@at-root` block.
+- **Dynamic Selector Inclusion** — Appends the property name (acting as a selector extension) to the `@at-root` directive.
+- **Indentation Management** — Handles standard block indentation and leading empty lines.
+
+## Initialization
+
+Initialize the `StylesToRoot` converter with the required property and content callable.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string.
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
+- `first?: boolean` — indicates if this is the first element (optional).
+
+```typescript
+import { StylesToRoot } from '@dxtmisha/scripts'
+
+const converter = new StylesToRoot(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the process of wrapping the content in the `@at-root` structure.

package/src/media/functional/scripts/classes/StylesToRoot/StylesToRoot.ru.mdx

@@ -0,0 +1,36 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToRoot - Генератор блоков At-Root'/>
+
+# Класс StylesToRoot
+
+Класс `StylesToRoot` используется для обертывания блока вложенных правил в директиву CSS `@at-root`. Это полезно для выноса правил из их текущей области видимости в корень таблицы стилей.
+
+## Ключевые возможности
+
+- **Обертка At-Root** — Автоматически оборачивает созданный контент в блок `@at-root`.
+- **Динамическое включение селектора** — Добавляет имя свойства (выступающее как расширение селектора) к директиве `@at-root`.
+- **Управление отступами** — Обрабатывает стандартные отступы блоков и начальные пустые строки.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToRoot` с помощью необходимого свойства и функции контента.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
+- `space: string` — строка отступа.
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние правила стиля.
+- `first?: boolean` — указывает, является ли элемент первым (необязательно).
+
+```typescript
+import { StylesToRoot } from '@dxtmisha/scripts'
+
+const converter = new StylesToRoot(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует процесс обертывания контента в структуру `@at-root`.

package/src/media/functional/scripts/classes/StylesToRoot/StylesToRoot.vi.mdx

@@ -0,0 +1,36 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToRoot - Trình tạo khối At-Root'/>
+
+# Lớp StylesToRoot
+
+Lớp `StylesToRoot` được sử dụng để bao bọc một khối các quy tắc lồng nhau bên trong một chỉ thị CSS `@at-root`. Điều này hữu ích cho việc đưa các quy tắc ra khỏi phạm vi hiện tại của chúng vào gốc của bảng kiểu.
+
+## Các tính năng chính
+
+- **Bao bọc At-Root** — Tự động bao bọc nội dung được tạo bên trong một khối `@at-root`.
+- **Bao gồm Selector động** — Thêm tên thuộc tính (đóng vai trò là phần mở rộng của selector) vào chỉ thị `@at-root`.
+- **Quản lý thụt lề** — Xử lý thụt lề khối tiêu chuẩn và các dòng trống dẫn đầu.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToRoot` với thuộc tính bắt buộc và hàm gọi nội dung.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề.
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các quy tắc style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên hay không (tùy chọn).
+
+```typescript
+import { StylesToRoot } from '@dxtmisha/scripts'
+
+const converter = new StylesToRoot(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối quá trình bao bọc nội dung trong cấu trúc `@at-root`.

package/src/media/functional/scripts/classes/StylesToSelector/StylesToSelector.en.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToSelector - CSS Selector Generator'/>
+
+# StylesToSelector Class
+
+The `StylesToSelector` class is responsible for generating CSS selectors for sub-properties, such as pseudo-classes (`:hover`, `:active`) or targeted component states. It intelligently determines whether to use a direct pseudo-class or a mixin.
+
+## Key Features
+
+- **Dynamic Selector Generation** — Automatically converts property names into appropriate CSS selectors.
+- **Mixin Integration** — Recognizes specific states like `hover`, `active`, `focus`, `disabled`, and `readonly`, and uses corresponding SCSS mixins.
+- **Context-Aware Class Resolution** — Detects if the sub-property belongs to the main component class to optimize the mixin parameters.
+- **Indentation Management** — Ensures correct block structure and vertical spacing.
+
+## Initialization
+
+Initialize the `StylesToSelector` converter with the required property and content callable.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string.
+- `content?: () => string[]` — a callable function that returns an array of strings representing the internal style rules.
+- `first?: boolean` — indicates if this is the first element (optional).
+
+```typescript
+import { StylesToSelector } from '@dxtmisha/scripts'
+
+const converter = new StylesToSelector(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates selector resolution and block wrapping. Only generates output if internal content exists.

package/src/media/functional/scripts/classes/StylesToSelector/StylesToSelector.ru.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToSelector - Генератор CSS-селекторов'/>
+
+# Класс StylesToSelector
+
+Класс `StylesToSelector` отвечает за создание CSS-селекторов для под-свойств, таких как псевдоклассы (`:hover`, `:active`) или целевые состояния компонентов. Он интеллектуально определяет, использовать ли прямой псевдокласс или миксин.
+
+## Ключевые возможности
+
+- **Динамическая генерация селекторов** — Автоматически преобразует имена свойств в соответствующие CSS-селекторы.
+- **Интеграция с миксинами** — Распознает определенные состояния, такие как `hover`, `active`, `focus`, `disabled` и `readonly`, и использует соответствующие SCSS-миксины.
+- **Контекстно-зависимое разрешение классов** — Определяет, принадлежит ли под-свойство основному классу компонента, для оптимизации параметров миксина.
+- **Управление отступами** — Обеспечивает правильную структуру блоков и вертикальные отступы.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToSelector` с помощью необходимого свойства и функции контента.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
+- `space: string` — строка отступа.
+- `content?: () => string[]` — вызываемая функция, которая возвращает массив строк, представляющих внутренние правила стиля.
+- `first?: boolean` — указывает, является ли элемент первым (необязательно).
+
+```typescript
+import { StylesToSelector } from '@dxtmisha/scripts'
+
+const converter = new StylesToSelector(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует разрешение селектора и обертку блоков. Генерирует вывод только при наличии внутреннего контента.

package/src/media/functional/scripts/classes/StylesToSelector/StylesToSelector.vi.mdx

@@ -0,0 +1,37 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToSelector - Trình tạo CSS Selector'/>
+
+# Lớp StylesToSelector
+
+Lớp `StylesToSelector` chịu trách nhiệm tạo các bộ chọn (selectors) CSS cho các thuộc tính phụ, chẳng hạn như pseudo-classes (`:hover`, `:active`) hoặc các trạng thái đích của component. Nó xác định một cách thông minh nên sử dụng pseudo-class trực tiếp hay mixin.
+
+## Các tính năng chính
+
+- **Tạo Selector động** — Tự động chuyển đổi tên thuộc tính thành các bộ chọn CSS phù hợp.
+- **Tích hợp Mixin** — Nhận dạng các trạng thái cụ thể như `hover`, `active`, `focus`, `disabled`, và `readonly`, và sử dụng các SCSS mixin tương ứng.
+- **Phân giải Class theo ngữ cảnh** — Phát hiện xem thuộc tính phụ có thuộc về class component chính hay không để tối ưu hóa các tham số của mixin.
+- **Quản lý thụt lề** — Đảm bảo cấu trúc khối chính xác và khoảng cách theo chiều dọc.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToSelector` với thuộc tính bắt buộc và hàm gọi nội dung.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề.
+- `content?: () => string[]` — một hàm có thể gọi trả về một mảng các chuỗi đại diện cho các quy tắc style nội bộ.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên hay không (tùy chọn).
+
+```typescript
+import { StylesToSelector } from '@dxtmisha/scripts'
+
+const converter = new StylesToSelector(property, '  ', contentCallable)
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc phân giải selector và bao bọc khối. Chỉ tạo đầu ra nếu có nội dung bên trong.

package/src/media/functional/scripts/classes/StylesToVar/StylesToVar.en.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/Classes/StylesToVar - CSS Variable Converter'/>
+
+# StylesToVar Class
+
+The `StylesToVar` class is used to convert design properties into CSS variables. It can handle individual variables or process all nested variables within a branch.
+
+## Key Features
+
+- **Batch Variable Processing** — Can iterate through a branch and generate CSS variable declarations for all sub-properties marked as variables.
+- **Individual Variable Generation** — Can also be used to generate a single variable for the current property.
+- **Color-to-RGB Transformation** — Automatically converts color values into RGB format (wrapped in `ui.toColorRbg`) for better compatibility with opacity management.
+- **Opacity Support** — Generates additional `-opacity` variables if the property has opacity data.
+- **Value Normalization** — Ensures values are correctly escaped and defaults to `unset` if the value is missing.
+
+## Initialization
+
+Initialize the `StylesToVar` converter with the required property branch.
+
+**Parameters:**
+- `property: PropertyItemsItem` — the current branch of the property tree being processed.
+- `space: string` — the indentation string.
+- `content?: () => string[]` — not typically used for variable blocks.
+- `first?: boolean` — indicates if this is the first element (optional).
+
+```typescript
+import { StylesToVar } from '@dxtmisha/scripts'
+
+const converter = new StylesToVar(property, '  ')
+const result = converter.make()
+```
+
+## Methods
+
+### Control
+
+- `make(): string[]` — The main entry point. Orchestrates the generation of one or multiple CSS variables based on the property structure.

package/src/media/functional/scripts/classes/StylesToVar/StylesToVar.ru.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/Classes/StylesToVar - Преобразователь CSS-переменных'/>
+
+# Класс StylesToVar
+
+Класс `StylesToVar` используется для преобразования свойств дизайна в переменные CSS. Он может обрабатывать отдельные переменные или обрабатывать все вложенные переменные внутри ветки.
+
+## Ключевые возможности
+
+- **Пакетная обработка переменных** — Может перебирать ветку и генерировать объявления CSS-переменных для всех под-свойств, помеченных как переменные.
+- **Генерация отдельных переменных** — Также может использоваться для генерации одной переменной для текущего свойства.
+- **Преобразование цвета в RGB** — Автоматически преобразует значения цветов в формат RGB (обернутый в `ui.toColorRbg`) для лучшей совместимости с управлением прозрачностью.
+- **Поддержка прозрачности** — Генерирует дополнительные переменные `-opacity`, если свойство содержит данные о прозрачности.
+- **Нормализация значений** — Обеспечивает правильное экранирование значений и по умолчанию устанавливает `unset`, если значение отсутствует.
+
+## Инициализация
+
+Инициализируйте преобразователь `StylesToVar` с помощью необходимой ветки свойств.
+
+**Параметры:**
+- `property: PropertyItemsItem` — текущая обрабатываемая ветвь дерева свойств.
+- `space: string` — строка отступа.
+- `content?: () => string[]` — обычно не используется для блоков переменных.
+- `first?: boolean` — указывает, является ли элемент первым (необязательно).
+
+```typescript
+import { StylesToVar } from '@dxtmisha/scripts'
+
+const converter = new StylesToVar(property, '  ')
+const result = converter.make()
+```
+
+## Методы
+
+### Управление
+
+- `make(): string[]` — Основная точка входа. Организует генерацию одной или нескольких CSS-переменных на основе структуры свойства.

package/src/media/functional/scripts/classes/StylesToVar/StylesToVar.vi.mdx

@@ -0,0 +1,38 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/Classes/StylesToVar - Trình chuyển đổi biến CSS'/>
+
+# Lớp StylesToVar
+
+Lớp `StylesToVar` được sử dụng để chuyển đổi các thuộc tính thiết kế thành các biến CSS. Nó có thể xử lý các biến riêng lẻ hoặc xử lý tất cả các biến lồng nhau trong một nhánh.
+
+## Các tính năng chính
+
+- **Xử lý biến theo lô** — Có thể lặp qua một nhánh và tạo các khai báo biến CSS cho tất cả các thuộc tính phụ được đánh dấu là biến.
+- **Tạo biến riêng lẻ** — Cũng có thể được sử dụng để tạo một biến duy nhất cho thuộc tính hiện tại.
+- **Chuyển đổi Color sang RGB** — Tự động chuyển đổi các giá trị màu sang định dạng RGB (được bao bọc trong `ui.toColorRbg`) để tương thích tốt hơn với việc quản lý độ mờ.
+- **Hỗ trợ độ mờ (Opacity)** — Tạo thêm các biến `-opacity` nếu thuộc tính có dữ liệu về độ mờ.
+- **Chuẩn hóa giá trị** — Đảm bảo các giá trị được thoát (escape) chính xác và mặc định là `unset` nếu giá trị bị thiếu.
+
+## Khởi tạo
+
+Khởi tạo trình chuyển đổi `StylesToVar` với nhánh thuộc tính bắt buộc.
+
+**Tham số:**
+- `property: PropertyItemsItem` — nhánh hiện tại của cây thuộc tính đang được xử lý.
+- `space: string` — chuỗi thụt lề.
+- `content?: () => string[]` — thường không được sử dụng cho các khối biến.
+- `first?: boolean` — cho biết đây có phải là phần tử đầu tiên hay không (tùy chọn).
+
+```typescript
+import { StylesToVar } from '@dxtmisha/scripts'
+
+const converter = new StylesToVar(property, '  ')
+const result = converter.make()
+```
+
+## Các phương thức
+
+### Điều khiển
+
+- `make(): string[]` — Điểm bắt đầu chính. Điều phối việc tạo một hoặc nhiều biến CSS dựa trên cấu trúc thuộc tính.