@dxtmisha/wiki 0.24.2 → 0.25.1

package/src/media/mdx/Image/image.ru.mdx

@@ -0,0 +1,47 @@
+Универсальный компонент для отображения изображений, иконок и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
+
+Image предоставляет гибкий API для работы с различными типами визуального контента: от простых иконок до сложных изображений с кадрированием и адаптивным масштабированием. Компонент автоматически определяет тип источника, поддерживает координатное позиционирование, адаптивное изменение размеров и различные режимы заполнения.
+
+**Основные возможности:**
+
+- Поддержка множества типов источников (иконки, URL, File, PDF)
+- Адаптивное масштабирование с сохранением пропорций
+- Координатное кадрирование и точное позиционирование
+- Режимы заполнения: auto, contain, cover
+- Автоматическое определение типа контента
+- Работа с CSS-переменными для гибкой стилизации
+- События загрузки с полной информацией о типе и данных
+
+**Типичные сценарии использования:**
+
+- Отображение пользовательских аватаров и загруженных изображений
+- Работа с иконками в интерфейсе
+- Превью PDF-документов
+- Адаптивные галереи изображений
+- Фоновые изображения с кадрированием
+
+```html
+<script setup>
+import { ref } from 'vue'
+import { Image } from '@dxtmisha/constructor'
+
+const imageUrl = ref('https://example.com/image.jpg')
+
+function handleLoad(data) {
+  console.log('Image loaded:', data.type, data.image)
+}
+</script>
+
+<template>
+  <Image
+    :value="imageUrl"
+    size="cover"
+    adaptive
+    :coordinator="[0, 0, 100, 100]"
+    @load="handleLoad"
+  />
+</template>
+```
+
+> Компонент автоматически управляет типом контента и оптимизирует отображение в зависимости от источника.
+

package/src/media/mdx/Image/img-tag.en.mdx

@@ -0,0 +1,105 @@
+## Using the img tag
+
+The `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` and `fetchPriority` properties are designed to control the image display mode using the HTML `<img>` tag instead of a background image.
+
+**Properties:**
+
+- `tagImg` — use the `<img>` tag instead of a background image
+- `srcset` — set of image sources for different screen resolutions
+- `picture` — sources for different display conditions using the `<picture>` tag
+- `alt` — alternative text for the image
+- `lazy` — enables lazy loading of the image
+- `preloadOffset` — offset for image preloading (default `1024px`)
+- `fetchPriority` — image loading priority (`low`, `high`, `auto`)
+
+The properties work together: if `tagImg` is not set or equals `false`, the image is displayed as a CSS background via `background-image`. When `tagImg` is activated (value `true`), the component uses the semantic HTML `<img>` tag, providing better accessibility and SEO optimization. The `alt` property defines alternative text that is displayed when the image is unavailable and is used by screen readers for people with disabilities.
+
+The `srcset` property allows you to provide multiple versions of an image for different pixel densities and screen sizes. It accepts a string in the standard `srcset` attribute format or an object where keys are width descriptors (numbers or strings like `'2x'`) and values are image URLs. When using numeric keys, the `w` suffix (width descriptor) is automatically added. The browser automatically selects the optimal image based on screen size and pixel density.
+
+The `picture` property enables the use of the HTML `<picture>` tag for art direction — when you need to load different images depending on screen size or other media query conditions. It accepts an object where keys are media conditions (such as screen width in pixels) and values are image URLs, or an array of objects with `<source>` attributes. When using an object, media queries like `(width >= 768px)` are automatically generated. The `<picture>` tag provides more flexible control over image selection compared to `srcset`, allowing you to load images with different aspect ratios or content for various viewing conditions.
+
+The `lazy` property activates native browser lazy loading via the `loading="lazy"` attribute. Images with this attribute are loaded only when approaching the visible screen area, which significantly speeds up initial page load and reduces traffic consumption. It is especially effective for pages with a large number of images or long lists.
+
+The `preloadOffset` property defines the pixel offset for preloading images when using lazy loading. The default value is `1024px`, which means the image starts loading 1024 pixels before it enters the visible area. This ensures smooth image loading without delays during scrolling. You can specify either a numeric value or a string with a unit of measurement.
+
+The `fetchPriority` property allows you to control the browser's image loading priority. It accepts three values: `high` — high priority for critical images (such as hero images or main banners), `low` — low priority for secondary images, `auto` — the browser determines the priority automatically (default value). Proper use of this property helps optimize page loading by ensuring fast loading of important content.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const productImage = ref('/images/product.jpg')
+</script>
+
+<template>
+  <!-- Basic usage -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product description"
+  />
+
+  <!-- With lazy loading -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Product"
+    lazy
+  />
+
+  <!-- With srcset object -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg'
+    }"
+  />
+
+  <!-- With picture for different screen sizes -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive image for different devices"
+    :picture="{
+      768: '/images/product-tablet.jpg',
+      1024: '/images/product-desktop.jpg'
+    }"
+  />
+
+  <!-- With preload offset configuration -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Image with early preload"
+    lazy
+    preload-offset="2048px"
+  />
+
+  <!-- With high loading priority -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Main page image"
+    fetch-priority="high"
+  />
+
+  <!-- Complex example -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Responsive product image"
+    lazy
+    preload-offset="1536px"
+    fetch-priority="low"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg',
+      '3x': '/images/product@3x.jpg'
+    }"
+  />
+</template>
+```
+

package/src/media/mdx/Image/img-tag.ru.mdx

@@ -0,0 +1,105 @@
+## Использование тега img
+
+Свойства `tagImg`, `srcset`, `picture`, `alt`, `lazy`, `preloadOffset` и `fetchPriority` предназначены для управления режимом отображения изображения через HTML-тег `<img>` вместо фонового изображения.
+
+**Свойства:**
+
+- `tagImg` — использовать тег `<img>` вместо фонового изображения
+- `srcset` — набор источников изображения для разных разрешений экрана
+- `picture` — источники для разных условий отображения с использованием тега `<picture>`
+- `alt` — альтернативный текст для изображения
+- `lazy` — включает ленивую загрузку изображения
+- `preloadOffset` — смещение для предзагрузки изображения (по умолчанию `1024px`)
+- `fetchPriority` — приоритет загрузки изображения (`low`, `high`, `auto`)
+
+Свойства работают совместно: если `tagImg` не задан или равен `false`, изображение отображается как CSS-фон через `background-image`. При активации `tagImg` (значение `true`), компонент использует семантический HTML-тег `<img>`, обеспечивая лучшую доступность и SEO-оптимизацию. Свойство `alt` определяет альтернативный текст, который отображается при недоступности изображения и используется программами чтения с экрана для людей с ограниченными возможностями.
+
+Свойство `srcset` позволяет предоставить несколько версий изображения для разных плотностей пикселей и размеров экрана. Принимает строку в формате стандартного атрибута `srcset` или объект, где ключи — это дескрипторы ширины (числа или строки вроде `'2x'`), а значения — URL изображений. При использовании числовых ключей автоматически добавляется суффикс `w` (width descriptor). Браузер самостоятельно выбирает оптимальное изображение на основе размера экрана и плотности пикселей.
+
+Свойство `picture` позволяет использовать HTML-тег `<picture>` для art direction — когда требуется загружать разные изображения в зависимости от размера экрана или других условий медиа-запросов. Принимает объект, где ключи — это медиа-условия (например, ширина экрана в пикселях), а значения — URL изображений, или массив объектов с атрибутами `<source>`. При использовании объекта автоматически генерируются медиа-запросы вида `(width >= 768px)`. Тег `<picture>` обеспечивает более гибкий контроль над выбором изображения по сравнению с `srcset`, позволяя загружать изображения разных пропорций или содержания для различных условий просмотра.
+
+Свойство `lazy` активирует нативную ленивую загрузку браузера через атрибут `loading="lazy"`. Изображения с этим атрибутом загружаются только при приближении к видимой области экрана, что значительно ускоряет начальную загрузку страницы и снижает потребление трафика. Особенно эффективно для страниц с большим количеством изображений или длинных списков.
+
+Свойство `preloadOffset` определяет смещение в пикселях для предварительной загрузки изображений при использовании ленивой загрузки. По умолчанию установлено значение `1024px`, что означает начало загрузки изображения за 1024 пикселя до того, как оно попадет в видимую область. Это обеспечивает плавную загрузку изображений без задержек при прокрутке. Можно указать как числовое значение, так и строку с единицей измерения.
+
+Свойство `fetchPriority` позволяет управлять приоритетом загрузки изображения браузером. Принимает три значения: `high` — высокий приоритет для критически важных изображений (например, главный баннер или hero-изображение), `low` — низкий приоритет для второстепенных изображений, `auto` — браузер самостоятельно определяет приоритет (значение по умолчанию). Правильное использование этого свойства помогает оптимизировать загрузку страницы, обеспечивая быструю загрузку важного контента.
+
+```html
+<script setup>
+import { ref } from 'vue'
+
+const productImage = ref('/images/product.jpg')
+</script>
+
+<template>
+  <!-- Базовое использование -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Описание продукта"
+  />
+
+  <!-- С ленивой загрузкой -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Товар"
+    lazy
+  />
+
+  <!-- С srcset объектом -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg'
+    }"
+  />
+
+  <!-- С picture для разных размеров экрана -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение для разных устройств"
+    :picture="{
+      768: '/images/product-tablet.jpg',
+      1024: '/images/product-desktop.jpg'
+    }"
+  />
+
+  <!-- С настройкой предзагрузки -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Изображение с ранней предзагрузкой"
+    lazy
+    preload-offset="2048px"
+  />
+
+  <!-- С высоким приоритетом загрузки -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Главное изображение страницы"
+    fetch-priority="high"
+  />
+
+  <!-- Комплексный пример -->
+  <Image
+    :value="productImage"
+    tag-img
+    alt="Адаптивное изображение товара"
+    lazy
+    preload-offset="1536px"
+    fetch-priority="low"
+    :srcset="{
+      '1x': '/images/product.jpg',
+      '2x': '/images/product@2x.jpg',
+      '3x': '/images/product@3x.jpg'
+    }"
+  />
+</template>
+```
+

package/src/media/mdx/Image/size.en.mdx

@@ -1,32 +1,32 @@
 ## Image display control
 
-### Description
+The `size`, `coordinator`, `x`, and `y` properties allow you to precisely control image scaling, visible area, and positioning within the container.
 
-The `size`, `coordinator`, `x`, and `y` properties allow you to precisely control image scaling, visible area, and positioning within the container. Each parameter is responsible for its own aspect of display and can be used individually or together to achieve the desired visual effect.
+**Properties:**
 
-### Properties
+- `size` — scaling and fill mode of the image (`auto`, `contain`, `cover`)
+- `coordinator` — array of coordinates for cropping the display area `[left, top, right, bottom]` in percentages
+- `x` — horizontal offset of the image (pixels, percentages)
+- `y` — vertical offset of the image (pixels, percentages)
 
-- **size** — Defines the scaling and fill mode of the image inside the container. Possible values: `auto` (default), `contain` (fit completely), `cover` (fill the container, possibly cropping the image).
-- **coordinator** — An array of four values that defines the visible area of the image: cropping from the left, top, right, and bottom, specified as percentages relative to the original image. Format: `[left, top, right, bottom]`.
-- **x** — Horizontal offset (X axis) of the image relative to the container or selected area. Can be set in pixels, percentages, or other supported units.
-- **y** — Vertical offset (Y axis) of the image relative to the container or selected area. Can be set in pixels, percentages, or other supported units.
-
-### Recommendations
-
-- Use `size` to select the appropriate image display mode for your layout and task.
-- The `coordinator` property is convenient for cropping or highlighting the desired part of the image.
-- Use the `x` and `y` parameters for precise image positioning within the container.
-- Combine parameters to achieve complex display effects.
-
-### Usage example
+Properties work together or individually. The `size` value defines the scaling mode: `auto` uses the original size, `contain` fits the image completely, `cover` fills the container with possible cropping. The `coordinator` property sets the visible area by cropping the image at specified coordinates. The `x` and `y` parameters shift the image relative to the container for precise positioning.
 
 ```html
-<!-- Image with content mode -->
+<!-- Scaling mode -->
 <Image value="image.png" size="contain" />
 
-<!-- Cropping the image by coordinates -->
+<!-- Cropping by coordinates -->
 <Image value="image.png" :coordinator="[10, 20, 100, 80]" />
 
-<!-- Shifting the image by X and Y -->
+<!-- Position offset -->
 <Image value="image.png" x="15" y="-10" />
+
+<!-- Combined parameters -->
+<Image
+  value="image.png"
+  size="cover"
+  :coordinator="[0, 0, 100, 50]"
+  x="10"
+  y="5"
+/>
 ```

package/src/media/mdx/Image/size.ru.mdx

@@ -1,36 +1,32 @@
 ## Управление отображением изображения
 
-### Описание
+Свойства `size`, `coordinator`, `x` и `y` позволяют детально управлять масштабированием, областью видимости и позиционированием изображения внутри контейнера.
 
-Свойства `size`, `coordinator`, `x` и `y` позволяют детально управлять масштабированием,
-областью видимости и позиционированием изображения внутри контейнера.
-Каждый параметр отвечает за свой аспект отображения и может использоваться как по отдельности,
-так и совместно для достижения нужного визуального эффекта.
+**Свойства:**
 
-### Свойства
+- `size` — режим масштабирования и заполнения изображения (`auto`, `contain`, `cover`)
+- `coordinator` — массив координат для обрезки области отображения `[left, top, right, bottom]` в процентах
+- `x` — смещение изображения по горизонтали (пиксели, проценты)
+- `y` — смещение изображения по вертикали (пиксели, проценты)
 
-- **size** — Определяет режим масштабирования и заполнения изображения внутри контейнера.
-Возможные значения: `auto` (по умолчанию), `contain` (вписать полностью), `cover` (заполнить контейнер с возможной обрезкой).
-- **coordinator** — Массив из четырёх значений, определяющий область изображения для отображения: обрезка слева, сверху, справа и снизу, задаётся в процентах относительно исходного изображения. Формат: `[left, top, right, bottom]`.
-- **x** — Смещение изображения по горизонтали (ось X) относительно контейнера или выбранной области. Может быть задано в пикселях, процентах или других поддерживаемых единицах.
-- **y** — Смещение изображения по вертикали (ось Y) относительно контейнера или выбранной области. Может быть задано в пикселях, процентах или других поддерживаемых единицах.
-
-### Рекомендации
-
-- Используйте `size` для выбора подходящего режима отображения изображения в зависимости от задачи и макета.
-- Свойство `coordinator` удобно для реализации обрезки или выделения нужной части изображения.
-- Параметры `x` и `y` применяйте для точного позиционирования изображения внутри контейнера.
-- Комбинируйте параметры для достижения сложных эффектов отображения.
-
-### Пример использования
+Свойства работают совместно или по отдельности. Значение `size` определяет режим масштабирования: `auto` использует исходный размер, `contain` вписывает изображение полностью, `cover` заполняет контейнер с возможной обрезкой. Свойство `coordinator` задаёт видимую область, обрезая изображение по указанным координатам. Параметры `x` и `y` смещают изображение относительно контейнера для точного позиционирования.
 
 ```html
-<!-- Изображение с режимом contain -->
+<!-- Режим масштабирования -->
 <Image value="image.png" size="contain" />
 
-<!-- Обрезка изображения по координатам -->
+<!-- Обрезка по координатам -->
 <Image value="image.png" :coordinator="[10, 20, 100, 80]" />
 
-<!-- Смещение изображения по X и Y -->
+<!-- Смещение позиции -->
 <Image value="image.png" x="15" y="-10" />
+
+<!-- Комбинация параметров -->
+<Image
+  value="image.png"
+  size="cover"
+  :coordinator="[0, 0, 100, 50]"
+  x="10"
+  y="5"
+/>
 ```

package/src/media/mdx/Image/value.en.mdx

@@ -1,28 +1,15 @@
-## Property value
+## Main value
 
-The `value` property is responsible for the main content. It is a universal property that supports multiple types of values, making it as flexible as possible for various use cases.
+The `value` property defines the image content. This universal property supports multiple source types for maximum flexibility.
 
-### Supported value types
+**Supported types:**
 
-- **Icon name** — The name of a built-in or custom icon (if supported by the system).
-- **String (URL)** — A direct link to an image file (e.g., PNG, JPG, SVG, GIF, WebP, etc.).
-- **File object** — A JavaScript `File` object, for example, obtained from `<input type="file">`.
-- **PDF link** — A direct link to a PDF file (the PDF document itself will be displayed inside).
+- **Icon name** — built-in or custom icon from the design system
+- **Image URL** — direct link to file (PNG, JPG, SVG, GIF, WebP, etc.)
+- **File object** — JavaScript File object obtained from `<input type="file">`
+- **PDF document** — direct link to PDF file with automatic display
 
-### Description
-
-- The `value` property is **optional**. If not set, nothing will be displayed.
-- When a `File` object is passed, the component will try to read and display the image or file preview.
-- If a PDF link is provided, the PDF document itself will be displayed inside (for example, with page navigation).
-- If an icon name is provided, the corresponding icon will be displayed.
-- The property is reactive and can be updated dynamically.
-
-### Recommendations
-
-- For the best performance, use optimized image formats (WebP, SVG, etc.).
-- Always validate the file type when accepting user uploads.
-
-### Usage example
+The component automatically detects the source type and selects the optimal display method. When passing a File object, the content is read and previewed. The property is reactive and supports dynamic updates.
 
 ```html
 <!-- Icon by name -->
@@ -31,10 +18,6 @@ The `value` property is responsible for the main content. It is a universal prop
 <!-- Image by URL -->
 <Image value="https://example.com/image.png" />
 
-<!-- Image from a File object -->
-<input type="file" @change="onFileChange" />
-<Image :value="selectedFile" />
-
-<!-- PDF by link -->
-<Image value="https://example.com/file.pdf" />
+<!-- User file -->
+<Image :value="fileFromInput" />
 ```

package/src/media/mdx/Image/value.ru.mdx

@@ -1,30 +1,15 @@
-## Свойство value
+## Основное значение
 
-Свойство `value` отвечает за основной контент. Это универсальное свойство,
-поддерживающее несколько типов значений, что делает его максимально гибким
-для различных сценариев использования.
+Свойство `value` определяет контент изображения. Это универсальное свойство, поддерживающее несколько типов источников для максимальной гибкости.
 
-### Поддерживаемые типы значений
+**Поддерживаемые типы:**
 
-- **Имя иконки** — Имя встроенной или пользовательской иконки (если поддерживается системой).
-- **Строка (URL)** — Прямая ссылка на файл изображения (например, PNG, JPG, SVG, GIF, WebP и др.).
-- **Объект File** — JavaScript-объект `File`, например, полученный из `<input type="file">`.
-- **Ссылка на PDF** — Прямая ссылка на PDF-файл (будет отображён сам PDF-документ внутри).
+- **Имя иконки** — встроенная или пользовательская иконка из системы дизайна
+- **URL изображения** — прямая ссылка на файл (PNG, JPG, SVG, GIF, WebP и др.)
+- **Объект File** — JavaScript-объект File, полученный из `<input type="file">`
+- **PDF-документ** — прямая ссылка на PDF-файл с автоматическим отображением
 
-### Описание
-
-- Свойство `value` **необязательное**. Если оно не задано, изображение не будет отображено.
-- При передаче объекта `File` будет предпринята попытка прочитать и отобразить изображение или предпросмотр файла.
-- Если передана ссылка на PDF, будет отображён сам PDF-документ внутри (например, с возможностью просмотра страниц).
-- Если передано имя иконки, будет отображена соответствующая иконка.
-- Свойство реактивно и может динамически обновляться.
-
-### Рекомендации
-
-- Для лучшей производительности используйте оптимизированные форматы изображений (WebP, SVG и др.).
-- Всегда проверяйте тип файла при загрузке от пользователя.
-
-### Пример использования
+Компонент автоматически определяет тип источника и выбирает оптимальный способ отображения. При передаче объекта File происходит чтение и предпросмотр содержимого. Свойство реактивно и поддерживает динамическое обновление.
 
 ```html
 <!-- Иконка по имени -->
@@ -33,10 +18,6 @@
 <!-- Изображение по URL -->
 <Image value="https://example.com/image.png" />
 
-<!-- Изображение из объекта File -->
-<input type="file" @change="onFileChange" />
-<Image :value="selectedFile" />
-
-<!-- PDF по ссылке -->
-<Image value="https://example.com/file.pdf" />
+<!-- Файл от пользователя -->
+<Image :value="fileFromInput" />
 ```

package/src/media/mdx/Image/wikiMdxImage.ts

@@ -1,23 +1,29 @@
 import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
 
+import imageEn from './image.en.mdx'
+import imageRu from './image.ru.mdx'
 import valueEn from './value.en.mdx'
 import valueRu from './value.ru.mdx'
 import sizeEn from './size.en.mdx'
 import sizeRu from './size.ru.mdx'
 import adaptiveEn from './adaptive.en.mdx'
 import adaptiveRu from './adaptive.ru.mdx'
+import imgTagEn from './img-tag.en.mdx'
+import imgTagRu from './img-tag.ru.mdx'
 
 import eventLoadEn from './event.load.en.mdx'
 import eventLoadRu from './event.load.ru.mdx'
 
-import exposeTypeEn from './expose.type.en.mdx'
-import exposeTypeRu from './expose.type.ru.mdx'
-import exposeDataEn from './expose.data.en.mdx'
-import exposeDataRu from './expose.data.ru.mdx'
+import exposeEn from './expose.en.mdx'
+import exposeRu from './expose.ru.mdx'
 
 export const wikiMdxImage: StorybookComponentsMdxItem = {
   name: 'Image',
   descriptions: {
+    'image': {
+      en: imageEn,
+      ru: imageRu
+    },
     'value': {
       en: valueEn,
       ru: valueRu
@@ -30,17 +36,17 @@ export const wikiMdxImage: StorybookComponentsMdxItem = {
       en: adaptiveEn,
       ru: adaptiveRu
     },
+    'img-tag': {
+      en: imgTagEn,
+      ru: imgTagRu
+    },
     'event.load': {
       en: eventLoadEn,
       ru: eventLoadRu
     },
-    'expose.type': {
-      en: exposeTypeEn,
-      ru: exposeTypeRu
-    },
-    'expose.data': {
-      en: exposeDataEn,
-      ru: exposeDataRu
+    'expose': {
+      en: exposeEn,
+      ru: exposeRu
     }
   }
 }

package/src/media/mdx/Input/currency.en.mdx

@@ -0,0 +1,38 @@
+## Currency Formatting
+
+Properties `type`, `currency`, `currencyHide`, `language`, and `fraction` are designed to manage currency value formatting with automatic currency symbol insertion and localization.
+
+**Properties:**
+
+- `type` — input type (set to `currency`)
+- `currency` — currency code (e.g., `USD`, `EUR`, `RUB`)
+- `currencyHide` — hides currency symbol in the input field
+- `language` — locale code for formatting (e.g., `ru-RU`, `en-US`)
+- `fraction` — number of decimal places (default `2`)
+
+Properties work together: `type="currency"` automatically activates currency formatting mode with two decimal places. `currency` defines the symbol appended to the formatted number (`$`, `€`, `₽`). When `currencyHide` is set, currency symbol is not displayed, but number formatting is preserved. Property `language` affects thousand separators, decimal separator, and currency symbol position. Number of decimal places can be changed via `fraction`, overriding the default value.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234.56')
+</script>
+
+<template>
+  <!-- Standard currency input -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Price" />
+
+  <!-- Currency with Russian locale -->
+  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Salary" />
+
+  <!-- Currency without symbol -->
+  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Amount" />
+
+  <!-- Currency with three decimals -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Precise Amount" />
+
+  <!-- Number formatting only -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Number" />
+</template>
+```
+

package/src/media/mdx/Input/currency.ru.mdx

@@ -0,0 +1,38 @@
+## Работа с валютой
+
+Свойства `type`, `currency`, `currencyHide`, `language` и `fraction` предназначены для управления форматированием денежных значений с автоматической подстановкой символа валюты и локализацией.
+
+**Свойства:**
+
+- `type` — тип инпута (устанавливается значение `currency`)
+- `currency` — код валюты (например, `USD`, `EUR`, `RUB`)
+- `currencyHide` — скрывает символ валюты в поле ввода
+- `language` — код локали для форматирования (например, `ru-RU`, `en-US`)
+- `fraction` — количество знаков после запятой (по умолчанию `2`)
+
+Свойства работают совместно: `type="currency"` автоматически активирует режим валютного форматирования с двумя знаками после запятой. `currency` определяет символ, который добавляется к отформатированному числу (`$`, `€`, `₽`). При установке `currencyHide` символ валюты не отображается, но форматирование числа сохраняется. Свойство `language` влияет на разделители тысяч, десятичный разделитель и позицию символа валюты. Количество десятичных знаков можно изменить через `fraction`, перезаписав значение по умолчанию.
+
+```html
+<script setup>
+import { ref } from 'vue'
+const value = ref('1234.56')
+</script>
+
+<template>
+  <!-- Стандартный валютный инпут -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" label="Цена" />
+
+  <!-- Валюта с русской локалью -->
+  <Input v-model="value" type="currency" currency="RUB" language="ru-RU" label="Зарплата" />
+
+  <!-- Валюта без символа -->
+  <Input v-model="value" type="currency" currency="EUR" currency-hide language="de-DE" label="Сумма" />
+
+  <!-- Валюта с тремя знаками -->
+  <Input v-model="value" type="currency" currency="USD" language="en-US" :fraction="3" label="Точная сумма" />
+
+  <!-- Только числовое форматирование -->
+  <Input v-model="value" type="number-format" language="ru-RU" label="Число" />
+</template>
+```
+