import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/styles/ru/Dir'/>

# Dir

Набор SCSS функций и миксинов для управления направлением текста (LTR/RTL) с поддержкой CSS Custom Properties.

**Как это работает:** Система использует CSS custom properties для управления двунаправленным текстом. По умолчанию установлен LTR (слева направо). При применении `html[dir="rtl"]` или класса `.dir-rtl` все переменные направления автоматически инвертируются, обеспечивая поддержку RTL без дублирования кода.

## Миксины инициализации

### `initDir`

Инициализирует систему направлений с CSS custom properties для поддержки LTR и RTL.

**Параметры:** нет

**Возвращает:** `void`

```scss
@include initDir;
```

### `dirToRtl`

Применяет стили для RTL (справа налево) направления.

**Параметры:** нет

**Возвращает:** `void`

```scss
html[dir="rtl"] {
  @include dirToRtl;
}
```

## Функции валидации

### `isDir`

Возвращает множитель направления (1 для LTR, -1 для RTL).

**Параметры:** нет

**Возвращает:** `String`

```scss
$dir: isDir(); // var(--d-dir, 1)
```

### `isDirLeft`

Проверяет, является ли текущее направление выровненным по левому краю.

**Параметры:** нет

**Возвращает:** `String`

```scss
$isLeft: isDirLeft(); // var(--d-dir-left, 1)
```

### `isDirRight`

Проверяет, является ли текущее направление выровненным по правому краю.

**Параметры:** нет

**Возвращает:** `String`

```scss
$isRight: isDirRight(); // var(--d-dir-right, 0)
```

## Функции направления

### `dirLeft`

Возвращает значение выравнивания текста для левой стороны.

**Параметры:** нет

**Возвращает:** `String`

```scss
text-align: dirLeft(); // left (LTR) или right (RTL)
```

### `dirRight`

Возвращает значение выравнивания текста для правой стороны.

**Параметры:** нет

**Возвращает:** `String`

```scss
text-align: dirRight(); // right (LTR) или left (RTL)
```

### `dirLeftAuto`

Возвращает значение 'auto' для свойства left.

**Параметры:** нет

**Возвращает:** `String`

```scss
left: dirLeftAuto(); // auto (LTR) или unset (RTL)
```

### `dirRightAuto`

Возвращает значение 'auto' для свойства right.

**Параметры:** нет

**Возвращает:** `String`

```scss
right: dirRightAuto(); // unset (LTR) или auto (RTL)
```

### `dirFlexLeft`

Возвращает значение flex-выравнивания для левой стороны.

**Параметры:** нет

**Возвращает:** `String`

```scss
justify-content: dirFlexLeft(); // flex-start (LTR) или flex-end (RTL)
```

### `dirFlexRight`

Возвращает значение flex-выравнивания для правой стороны.

**Параметры:** нет

**Возвращает:** `String`

```scss
justify-content: dirFlexRight(); // flex-end (LTR) или flex-start (RTL)
```

## Функции позиционирования

### `dirToLeft`

Вычисляет значение позиции для свойства left в зависимости от направления.

**Параметры:**
- `$left` — переменная левой позиции
- `$right` — переменная правой позиции

**Возвращает:** `String`

```scss
left: dirToLeft(--pos-left, --pos-right);
```

### `dirToRight`

Вычисляет значение позиции для свойства right в зависимости от направления.

**Параметры:**
- `$left` — переменная левой позиции
- `$right` — переменная правой позиции

**Возвращает:** `String`

```scss
right: dirToRight(--pos-left, --pos-right);
```

### `dirOrder`

Вычисляет значение order на основе множителя направления.

**Параметры:**
- `$value` — значение order

**Возвращает:** `String`

```scss
order: dirOrder(2); // 3 (LTR) или 999997 (RTL)
```

