@dxtmisha/wiki 0.64.0 → 0.67.0

package/dist/{wikiDescriptions-n3cFkYRZ.js → wikiDescriptions-BxZP798_.js}

@@ -2025,6 +2025,177 @@ var e = [
 			description: "\nComprehensive navigational component that integrates a trigger (Control), a floating container (Window), and a structured dataset (List). Designed for multi-level menus, context-sensitive actions, and complex selection interfaces requiring icons or grouping.\nFeatures support for hierarchical data structures (nested submenus), real-time AJAX loading, and full keyboard accessibility. Includes sophisticated focus management, automatic positioning relative to the trigger, and a lite rendering mode for optimized performance with large lists.\nControlled via the list prop for items and v-model:selected for state tracking. Use for user profile menus, sidebar navigation, or advanced select-like UI patterns where standard dropdowns lack sufficient structural flexibility.\n    "
 		}
 	},
+	{
+		name: "MenuButton",
+		description: {
+			en: "Button-based dropdown selector combining Button, Menu, and Select for clean, compact selection interfaces",
+			ru: "Кнопочный выпадающий селектор, объединяющий Button, Menu и Select для компактных интерфейсов выбора"
+		},
+		possibilities: {
+			en: [
+				"button trigger interface instead of standard field outline",
+				"displays selected value names with a custom separator",
+				"supports hiding the value when an icon is present (hideValueIcon)",
+				"supports hiding the label when a value is selected (hideLabelValue)",
+				"built-in search and filtering inside the dropdown header",
+				"single or multiple value selection",
+				"standard form data integration via a hidden input element"
+			],
+			ru: [
+				"интерфейс кнопки-триггера вместо стандартной рамки поля",
+				"отображает имена выбранных значений с настраиваемым разделителем",
+				"поддержка скрытия значения при наличии иконки (hideValueIcon)",
+				"поддержка скрытия метки при выборе значения (hideLabelValue)",
+				"встроенный поиск и фильтрация внутри заголовка выпадающего меню",
+				"одиночный или множественный выбор значений",
+				"стандартная интеграция данных формы через скрытый элемент ввода input"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		render: "\n      <DesignComponent v-bind=\"args\" />\n    ",
+		stories: [
+			{
+				id: "MenuButtonBasic",
+				name: {
+					en: "Basic",
+					ru: "Базовые"
+				},
+				setup: "\n      const options = ref([\n        { label: 'English', value: 'en' },\n        { label: 'Russian', value: 'ru' },\n        { label: 'Vietnamese', value: 'vi' },\n        { label: 'Spanish', value: 'es' }\n      ])\n      const value1 = ref('en')\n      const value2 = ref('ru')\n      const value3 = ref('vi')\n\n      return { options, value1, value2, value3 }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex\">\n          <DesignComponent\n            v-model=\"value1\"\n            type=\"menuButton\"\n            label=\"Language\"\n            :option=\"options\"\n          />\n          <DesignComponent\n            v-model=\"value2\"\n            type=\"menuButton\"\n            label=\"With search\"\n            showSearch\n            :option=\"options\"\n          />\n          <DesignComponent\n            v-model=\"value3\"\n            type=\"menuButton\"\n            label=\"Hide value if icon\"\n            icon=\"settings\"\n            hideValueIcon\n            :option=\"options\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "MenuButtonVModel",
+				name: {
+					en: "Two-way binding (v-model)",
+					ru: "Двусторонняя привязка (v-model)"
+				},
+				setup: "\n      const valueSingle = ref('option2')\n      const valueMultiple = ref(['option1', 'option3'])\n      const options = [\n        { label: 'First option', value: 'option1' },\n        { label: 'Second option', value: 'option2' },\n        { label: 'Third option', value: 'option3' }\n      ]\n\n      return { valueSingle, valueMultiple, options }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex-column\">\n          <div class=\"wiki-storybook-flex-align-center\">\n            <span>Value: <strong>{{ valueSingle }}</strong></span>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option1'\">option 1</button>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option2'\">option 2</button>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option3'\">option 3</button>\n          </div>\n\n          <DesignComponent\n            v-model=\"valueSingle\"\n            type=\"menuButton\"\n            label=\"Single select\"\n            :option=\"options\"\n          />\n\n          <div class=\"wiki-storybook-flex-align-center\">\n            <span>Value: <strong>{{ valueMultiple }}</strong></span>\n            <button class=\"wiki-storybook-button\" @click=\"valueMultiple = ['option1', 'option2']\">option 1, 2</button>\n            <button class=\"wiki-storybook-button wiki-storybook-button--warning\" @click=\"valueMultiple = []\">Clear</button>\n          </div>\n\n          <DesignComponent\n            v-model=\"valueMultiple\"\n            type=\"menuButton\"\n            label=\"Multiple select\"\n            multiple\n            :option=\"options\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "MenuButtonSkeleton",
+				name: {
+					en: "Skeleton",
+					ru: "Скелетон"
+				},
+				components: ["Skeleton"],
+				template: "\n        <DesignSkeleton :active=\"true\" style=\"max-width:320px\">\n          <div class=\"wiki-storybook-flex-column\">\n            <DesignComponent\n              type=\"menuButton\"\n              label=\"Loading menu button\"\n              :option=\"[\n                { label: 'First option', value: 'option1' },\n                { label: 'Second option', value: 'option2' },\n                { label: 'Third option', value: 'option3' }\n              ]\"\n              :buttonAttrs=\"{isSkeleton: true}\"\n            />\n          </div>\n        </DesignSkeleton>\n      "
+			}
+		],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'MenuButton'} type={'menuButton'}/>\n<Canvas of={Component.MenuButtonBasic}/>\n\n<StorybookDescriptions componentName={'Value'} type={'value'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.MenuButtonVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.MenuButtonSkeleton}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'input'}/>\n<StorybookDescriptions componentName={'Event'} type={'change'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'selected'}/>\n<StorybookDescriptions componentName={'Expose'} type={'validation'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Slot'} type={'default'} />\n<StorybookDescriptions componentName={'Menu'} type={'slots'}/>\n    "
+		},
+		ai: { description: "\nButton-based dropdown selector combining a trigger Button and a dropdown Menu. Designed for space-saving select dropdowns where a standard text field outline is undesirable.\nDisplays selected values with configurable label separators (labelSeparator) and label hiding options (hideLabelValue, hideValueIcon).\nIntegrated hidden inputs provide standard form data carrying, while optional header search components (showSearch) allow filterable options lists.\n    " }
+	},
+	{
+		name: "MenuChip",
+		description: {
+			en: "Chip-based dropdown selector combining Chip, Menu, and Select for clean, compact selection interfaces",
+			ru: "Выпадающий селектор на основе чипа (Chip), объединяющий Chip, Menu и Select для компактных интерфейсов выбора"
+		},
+		possibilities: {
+			en: [
+				"chip trigger interface instead of standard field outline",
+				"displays selected value names with a custom separator",
+				"supports hiding the value when an icon is present (hideValueIcon)",
+				"supports hiding the label when a value is selected (hideLabelValue)",
+				"built-in search and filtering inside the dropdown header",
+				"single or multiple value selection",
+				"standard form data integration via a hidden input element"
+			],
+			ru: [
+				"интерфейс чипа-триггера вместо стандартной рамки поля",
+				"отображает имена выбранных значений с настраиваемым разделителем",
+				"поддержка скрытия значения при наличии иконки (hideValueIcon)",
+				"поддержка скрытия метки при выборе значения (hideLabelValue)",
+				"встроенный поиск и фильтрация внутри заголовка выпадающего меню",
+				"одиночный или множественный выбор значений",
+				"стандартная интеграция данных формы через скрытый элемент ввода input"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		stories: [
+			{
+				id: "MenuChipBasic",
+				name: {
+					en: "Basic",
+					ru: "Базовые"
+				},
+				setup: "\n      const options = ref([\n        { label: 'English', value: 'en' },\n        { label: 'Russian', value: 'ru' },\n        { label: 'Vietnamese', value: 'vi' },\n        { label: 'Spanish', value: 'es' }\n      ])\n      const value1 = ref('en')\n      const value2 = ref('ru')\n      const value3 = ref('vi')\n\n      return { options, value1, value2, value3 }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex\">\n          <DesignComponent\n            v-model=\"value1\"\n            type=\"menuChip\"\n            label=\"Language\"\n            :option=\"options\"\n          />\n          <DesignComponent\n            v-model=\"value2\"\n            type=\"menuChip\"\n            label=\"With search\"\n            showSearch\n            :option=\"options\"\n          />\n          <DesignComponent\n            v-model=\"value3\"\n            type=\"menuChip\"\n            label=\"Hide value if icon\"\n            icon=\"settings\"\n            hideValueIcon\n            :option=\"options\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "MenuChipVModel",
+				name: {
+					en: "Two-way binding (v-model)",
+					ru: "Двусторонняя привязка (v-model)"
+				},
+				setup: "\n      const valueSingle = ref('option2')\n      const valueMultiple = ref(['option1', 'option3'])\n      const options = [\n        { label: 'First option', value: 'option1' },\n        { label: 'Second option', value: 'option2' },\n        { label: 'Third option', value: 'option3' }\n      ]\n\n      return { valueSingle, valueMultiple, options }\n      ",
+				template: "\n        <div class=\"wiki-storybook-flex-column\">\n          <div class=\"wiki-storybook-flex-align-center\">\n            <span>Value: <strong>{{ valueSingle }}</strong></span>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option1'\">option 1</button>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option2'\">option 2</button>\n            <button class=\"wiki-storybook-button\" @click=\"valueSingle = 'option3'\">option 3</button>\n          </div>\n\n          <DesignComponent\n            v-model=\"valueSingle\"\n            type=\"menuChip\"\n            label=\"Single select\"\n            :option=\"options\"\n          />\n\n          <div class=\"wiki-storybook-flex-align-center\">\n            <span>Value: <strong>{{ valueMultiple }}</strong></span>\n            <button class=\"wiki-storybook-button\" @click=\"valueMultiple = ['option1', 'option2']\">option 1, 2</button>\n            <button class=\"wiki-storybook-button wiki-storybook-button--warning\" @click=\"valueMultiple = []\">Clear</button>\n          </div>\n\n          <DesignComponent\n            v-model=\"valueMultiple\"\n            type=\"menuChip\"\n            label=\"Multiple select\"\n            multiple\n            :option=\"options\"\n          />\n        </div>\n      "
+			},
+			{
+				id: "MenuChipSkeleton",
+				name: {
+					en: "Skeleton",
+					ru: "Скелетон"
+				},
+				components: ["Skeleton"],
+				template: "\n        <DesignSkeleton :active=\"true\" style=\"max-width:320px\">\n          <div class=\"wiki-storybook-flex-column\">\n            <DesignComponent\n              type=\"menuChip\"\n              label=\"Loading menu chip\"\n              :option=\"[\n                { label: 'First option', value: 'option1' },\n                { label: 'Second option', value: 'option2' },\n                { label: 'Third option', value: 'option3' }\n              ]\"\n              :chipAttrs=\"{isSkeleton: true}\"\n            />\n          </div>\n        </DesignSkeleton>\n      "
+			}
+		],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'MenuChip'} type={'menuChip'}/>\n<Canvas of={Component.MenuChipBasic}/>\n\n<StorybookDescriptions componentName={'Value'} type={'value'}/>\n<StorybookDescriptions componentName={'Value'} type={'v-model'}/>\n<Canvas of={Component.MenuChipVModel}/>\n\n<StorybookDescriptions componentName={'Style'} type={'isSkeleton'}/>\n<Canvas of={Component.MenuChipSkeleton}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'input'}/>\n<StorybookDescriptions componentName={'Event'} type={'change'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'selected'}/>\n<StorybookDescriptions componentName={'Expose'} type={'validation'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Slot'} type={'default'} />\n<StorybookDescriptions componentName={'Menu'} type={'slots'}/>\n    "
+		},
+		ai: { description: "\nChip-based dropdown selector combining a trigger Chip and a dropdown Menu. Designed for space-saving select dropdowns where a standard text field outline or large button trigger is undesirable.\nDisplays selected values with configurable label separators (labelSeparator) and label hiding options (hideLabelValue, hideValueIcon).\nIntegrated hidden inputs provide standard form data carrying, while optional header search components (showSearch) allow filterable options lists.\n    " }
+	},
+	{
+		name: "MenuCountry",
+		description: {
+			en: "Specialized menu for selecting countries with automatic flag and name loading",
+			ru: "Специализированное меню для выбора стран с автоматической загрузкой флагов и названий"
+		},
+		possibilities: {
+			en: [
+				"automatic generation of country list via GeoFlagRef",
+				"filtering by country codes via countryList prop",
+				"all features of the base Menu component",
+				"support for internationalized country names"
+			],
+			ru: [
+				"автоматическая генерация списка стран через GeoFlagRef",
+				"фильтрация по кодам стран через свойство countryList",
+				"все возможности базового компонента Menu",
+				"поддержка интернационализированных названий стран"
+			]
+		},
+		import: ["import { ref } from 'vue'"],
+		render: "\n    <DesignComponent v-bind=\"args\">\n      <template #control=\"{binds}\">\n        <button class=\"wiki-storybook-button\" v-bind=\"binds\">Select Country</button>\n      </template>\n    </DesignComponent>\n  ",
+		stories: [{
+			id: "MenuCountryFilter",
+			name: {
+				en: "Filtering countries",
+				ru: "Фильтрация стран"
+			},
+			setup: "\n      return {\n        selectedValue: ref('US'),\n        list: ['US', 'CA', 'MX', 'GB', 'FR', 'DE', 'IT', 'ES']\n      }\n      ",
+			template: "\n        <DesignComponent\n          v-model:selected=\"selectedValue\"\n          :country-list=\"list\"\n          is-selected-by-value\n        >\n          <template #control=\"{binds, selectedNames}\">\n            <button class=\"wiki-storybook-button\" v-bind=\"binds\">\n              Selected: {{ selectedNames.value[0] || 'None' }}\n            </button>\n          </template>\n        </DesignComponent>\n      "
+		}],
+		documentation: {
+			body: "\n<StorybookDescriptions componentName={'MenuCountry'} type={'menuCountry'}/>\n<Canvas of={Component.MenuCountryFilter}/>\n    ",
+			events: "\n<StorybookDescriptions componentName={'Event'} type={'click'}/>\n<StorybookDescriptions componentName={'Menu'} type={'event.updateValue'}/>\n    ",
+			expose: "\n<StorybookDescriptions componentName={'Expose'} type={'selected'}/>\n<StorybookDescriptions componentName={'Menu'} type={'expose.navigation'}/>\n    ",
+			slots: "\n<StorybookDescriptions componentName={'Menu'} type={'slotsControl'}/>\n<StorybookDescriptions componentName={'Menu'} type={'slots'}/>\n    "
+		},
+		ai: {
+			render: "\n<div :class=\"classDemo.item\">\n  <MenuCountry v-bind=\"args\">\n    <template #control=\"{ binds }\">\n      <button class=\"wiki-storybook-button\" v-bind=\"binds\">\n        Select Country\n      </button>\n    </template>\n  </MenuCountry>\n</div>\n    ",
+			description: "\nThe MenuCountry component is a specialized version of the Menu component, designed specifically for country selection.\nIt leverages the GeoFlagRef utility to automatically populate the menu with a list of countries, including their flags and localized names.\nIt supports all the standard Menu functionalities like Window-based popups, custom controls, and sophisticated focus management.\nUse the 'countryList' prop to restrict the selection to a specific subset of countries.\n    "
+		}
+	},
 	{
 		name: "Modal",
 		description: {
@@ -2502,7 +2673,7 @@ var e = [
 				"функция скрытия всех разделительных линий"
 			]
 		},
-		render: "\n      <D1Scrollbar\n        class=\"wiki-storybook-item--widescreen wiki-storybook-item--squared--sm\"\n        v-bind=\"args\"\n      >\n        <div class=\"wiki-storybook-scrollbar-content\">\n          <h3>Modern Web Interfaces and User Experience Design</h3>\n          <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>\n\n          <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>\n\n          <h4>Principles of Effective Design Implementation</h4>\n          <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>\n\n          <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>\n\n          <h4>Technical Implementation Considerations</h4>\n          <p>When developing scrollbar components, it's crucial to consider rendering performance, especially when working with large datasets or dynamically generated content. Content virtualization, lazy loading strategies, and DOM operation optimization help ensure smooth performance even on less powerful devices. Memory management becomes particularly important in single-page applications where components may be mounted and unmounted frequently.</p>\n\n          <p>Modern frameworks provide numerous tools for creating customizable scrollbars, but it's important to find the right balance between functionality and ease of use. The component should be easily integrable into existing projects while supporting various configuration options and customization possibilities. API design should be intuitive and follow established patterns within the framework ecosystem.</p>\n\n          <h4>Future Trends and Accessibility</h4>\n          <p>The future of web development is moving towards creating more inclusive and accessible interfaces, where every element, including scrollbars, contributes to improving the overall user experience. This includes support for screen readers, high contrast modes, and reduced motion preferences. Progressive enhancement ensures that the scrollbar functionality works across all user scenarios.</p>\n\n          <p>Emerging technologies like CSS container queries and new scrolling APIs continue to expand the possibilities for creating more sophisticated scrolling experiences. The integration of these technologies with existing design systems requires careful planning and consideration of backward compatibility.</p>\n        </div>\n      </D1Scrollbar>\n    ",
+		render: "\n      <DesignComponent\n        class=\"wiki-storybook-item--widescreen wiki-storybook-item--squared--sm\"\n        v-bind=\"args\"\n      >\n        <div class=\"wiki-storybook-scrollbar-content\">\n          <h3>Modern Web Interfaces and User Experience Design</h3>\n          <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>\n\n          <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>\n\n          <h4>Principles of Effective Design Implementation</h4>\n          <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>\n\n          <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>\n\n          <h4>Technical Implementation Considerations</h4>\n          <p>When developing scrollbar components, it's crucial to consider rendering performance, especially when working with large datasets or dynamically generated content. Content virtualization, lazy loading strategies, and DOM operation optimization help ensure smooth performance even on less powerful devices. Memory management becomes particularly important in single-page applications where components may be mounted and unmounted frequently.</p>\n\n          <p>Modern frameworks provide numerous tools for creating customizable scrollbars, but it's important to find the right balance between functionality and ease of use. The component should be easily integrable into existing projects while supporting various configuration options and customization possibilities. API design should be intuitive and follow established patterns within the framework ecosystem.</p>\n\n          <h4>Future Trends and Accessibility</h4>\n          <p>The future of web development is moving towards creating more inclusive and accessible interfaces, where every element, including scrollbars, contributes to improving the overall user experience. This includes support for screen readers, high contrast modes, and reduced motion preferences. Progressive enhancement ensures that the scrollbar functionality works across all user scenarios.</p>\n\n          <p>Emerging technologies like CSS container queries and new scrolling APIs continue to expand the possibilities for creating more sophisticated scrolling experiences. The integration of these technologies with existing design systems requires careful planning and consideration of backward compatibility.</p>\n        </div>\n      </DesignComponent>\n    ",
 		import: [],
 		stories: [],
 		documentation: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dxtmisha/wiki",
   "private": false,
-  "version": "0.64.0",
+  "version": "0.67.0",
   "type": "module",
   "description": "Wiki documentation and storybook utilities for DXT UI design system",
   "keywords": [

package/src/media/functional/functional-basic/functions/isTab/isTab.en.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/isTab - Check for Tab key press'/>
+
+# `isTab`
+
+Checks if the pressed key is `Tab`. This function is useful for handling keyboard events when you need to react to focus navigation or trap focus, while supporting accessibility (a11y) and older browsers.
+
+**Parameters:**
+- `event: KeyboardEvent` — the keyboard event object.
+
+**Returns:**
+`boolean` — `true` if the `Tab` key is pressed, otherwise `false`.
+
+**Supported event properties:**
+The function checks the following event properties for maximum compatibility:
+- `code`: `'Tab'`
+- `key`: `'Tab'`
+- `keyCode`: `9`
+
+```typescript
+import { isTab } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isTab(event)) {
+    console.log('Tab pressed')
+    // Perform action
+  }
+}
+```

package/src/media/functional/functional-basic/functions/isTab/isTab.ru.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/isTab - Проверка нажатия Tab'/>
+
+# `isTab`
+
+Проверяет, является ли нажатая клавиша `Tab`. Функция полезна для обработки событий клавиатуры, когда необходимо реагировать на навигацию по фокусу или захватывать фокус, поддерживая при этом доступность (a11y) и старые браузеры.
+
+**Параметры:**
+- `event: KeyboardEvent` — объект события клавиатуры.
+
+**Возвращает:**
+`boolean` — `true`, если нажата клавиша `Tab`, иначе `false`.
+
+**Поддерживаемые свойства события:**
+Функция проверяет следующие свойства события для максимальной совместимости:
+- `code`: `'Tab'`
+- `key`: `'Tab'`
+- `keyCode`: `9`
+
+```typescript
+import { isTab } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isTab(event)) {
+    console.log('Нажат Tab')
+    // Выполнить действие
+  }
+}
+```

package/src/media/functional/functional-basic/functions/isTab/isTab.vi.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/isTab - Kiểm tra nhấn phím Tab'/>
+
+# `isTab`
+
+Kiểm tra xem phím được nhấn có phải là `Tab` hay không. Hàm này hữu ích để xử lý các sự kiện bàn phím khi bạn cần phản ứng với việc điều hướng tiêu điểm (focus navigation) hoặc giữ tiêu điểm (trap focus), đồng thời hỗ trợ khả năng truy cập (a11y) và các trình duyệt cũ.
+
+**Tham số:**
+- `event: KeyboardEvent` — đối tượng sự kiện bàn phím.
+
+**Trả về:**
+`boolean` — `true` nếu phím `Tab` được nhấn, ngược lại là `false`.
+
+**Các thuộc tính sự kiện được hỗ trợ:**
+Hàm kiểm tra các thuộc tính sự kiện sau để đảm bảo khả năng tương thích tối đa:
+- `code`: `'Tab'`
+- `key`: `'Tab'`
+- `keyCode`: `9`
+
+```typescript
+import { isTab } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isTab(event)) {
+    console.log('Đã nhấn Tab')
+    // Thực hiện hành động
+  }
+}
+```

package/src/media/functional/scripts/bin/dxt-build-packages/build-packages.en.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/bin/dxt-build-packages - Build Packages'/>
+
+# dxt-build-packages
+
+The `dxt-build-packages` command provides automated building of changed npm packages across the workspace. It uses `BuildPackages` and `PackageFile` to scan for active library folders, track versions, and incrementally compile package structures when changes are detected.
+
+## Key Features
+
+- **Automated Monorepo Scanning**: Automatically detects active package directories under `/packages/` that contain a valid `package.json`.
+- **Incremental Version-Based Caching**: Avoids redundant builds by maintaining a local build cache in `./logs/ui-build.log.json`. It only triggers build operations if a package's version has changed compared to the cache.
+- **Intelligent Script Resolution**: Automatically executes `"build-recovery"` script if it is defined in the package's scripts, falling back to the standard `"build"` script.
+- **Test Package Exclusion**: Automatically skips packages marked as tests (`"ui-test": true` in `package.json`).
+
+## How does it work?
+
+The package compilation workflow automates checks and build dispatching:
+
+1. **Scan Directories**: The `BuildPackages` class scans the target packages directory (by default, `/packages/`) and reads the build cache log `./logs/ui-build.log.json`.
+2. **Filter & Validate**: For each directory, it instantiates a `PackageFile` wrapper to verify that it is a package, that it is not a test package, and that its current version differs from the version recorded in the build cache.
+3. **Execute Build**: If an update is required, it checks the package's `package.json` scripts:
+   - If `"build-recovery"` script exists, it executes `npm run build-recovery`.
+   - Otherwise, if `"build"` script exists, it executes `npm run build`.
+4. **Log Synchronization**: Upon successful compilation of a package, its version is updated in the in-memory cache.
+5. **Persist Logs**: If one or more packages were successfully built, the updated cache is saved back to `./logs/ui-build.log.json`.
+
+## Additional Information
+
+### Log Caching File (`ui-build.log.json`)
+
+The local cache is stored at:
+```
+./logs/ui-build.log.json
+```
+If you wish to force-rebuild all packages regardless of version consistency, you can delete this file or reset its contents to empty `{}`.
+
+### Excluding Test Packages
+
+If you want a package to be ignored by the builder, add the following property to its `package.json`:
+```json
+{
+  "ui-test": true
+}
+```

package/src/media/functional/scripts/bin/dxt-build-packages/build-packages.ru.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/bin/dxt-build-packages - Сборка пакетов'/>
+
+# dxt-build-packages
+
+Команда `dxt-build-packages` обеспечивает автоматическую сборку измененных npm-пакетов в рабочем пространстве. Инструмент использует `BuildPackages` и `PackageFile` для сканирования активных директорий библиотек, отслеживания версий и инкрементальной компиляции пакетов при обнаружении изменений.
+
+## Ключевые возможности
+
+- **Автоматическое сканирование монорепозитория**: Обнаруживает активные директории пакетов внутри папки `/packages/`, содержащие корректный файл `package.json`.
+- **Инкрементальное кэширование на основе версий**: Избегает избыточных сборок благодаря ведению локального кэша сборок в файле `./logs/ui-build.log.json`. Сборка пакета запускается только в том случае, если его текущая версия в `package.json` изменилась по сравнению с сохраненной в кэше.
+- **Интеллектуальный выбор скриптов**: Автоматически выполняет скрипт `"build-recovery"`, если он определен в скриптах пакета, с переходом на стандартный скрипт `"build"`, если первый отсутствует.
+- **Исключение тестовых пакетов**: Автоматически пропускает пакеты, помеченные как тестовые (содержащие `"ui-test": true` в `package.json`).
+
+## Как это работает?
+
+Процесс компиляции пакетов автоматизирует проверки и вызовы команд сборки:
+
+1. **Сканирование директорий**: Класс `BuildPackages` сканирует целевую директорию пакетов (по умолчанию `/packages/`) и считывает файл кэша сборок `./logs/ui-build.log.json`.
+2. **Фильтрация и валидация**: Для каждой папки создается обертка `PackageFile` для проверки того, что она является пакетом, не является тестовым пакетом, и что ее текущая версия отличается от версии, записанной в кэше.
+3. **Выполнение сборки**: Если требуется обновление, инструмент проверяет скрипты в `package.json`:
+   - Если существует скрипт `"build-recovery"`, выполняется `npm run build-recovery`.
+   - В противном случае, если существует скрипт `"build"`, выполняется `npm run build`.
+4. **Синхронизация логов**: После успешной компиляции пакета его версия обновляется в кэше в оперативной памяти.
+5. **Сохранение логов**: Если один или несколько пакетов были успешно собраны, обновленный кэш сохраняется обратно в `./logs/ui-build.log.json`.
+
+## Дополнительная информация
+
+### Файл кэширования логов (`ui-build.log.json`)
+
+Локальный кэш хранится по пути:
+```
+./logs/ui-build.log.json
+```
+Если вы хотите принудительно пересобрать все пакеты независимо от их версий, вы можете удалить этот файл или сбросить его содержимое до пустых скобок `{}`.
+
+### Исключение тестовых пакетов
+
+Если вы хотите, чтобы сборщик игнорировал конкретный пакет, добавьте следующее свойство в его файл `package.json`:
+```json
+{
+  "ui-test": true
+}
+```

package/src/media/functional/scripts/bin/dxt-build-packages/build-packages.vi.mdx

@@ -0,0 +1,45 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/bin/dxt-build-packages - Xây Dựng Gói'/>
+
+# dxt-build-packages
+
+Lệnh `dxt-build-packages` cung cấp khả năng tự động xây dựng (build) các gói npm đã thay đổi trong không gian làm việc. Công cụ này sử dụng `BuildPackages` và `PackageFile` để quét các thư mục thư viện hoạt động, theo dõi các phiên bản và biên dịch tăng dần các cấu trúc gói khi phát hiện thay đổi.
+
+## Các tính năng chính
+
+- **Tự động quét Monorepo**: Tự động phát hiện các thư mục gói đang hoạt động dưới `/packages/` có chứa tệp `package.json` hợp lệ.
+- **Bộ nhớ đệm tăng dần dựa trên Phiên bản**: Tránh các hoạt động xây dựng dư thừa bằng cách duy trì bộ nhớ đệm xây dựng cục bộ trong `./logs/ui-build.log.json`. Nó chỉ kích hoạt các hoạt động xây dựng nếu phiên bản hiện tại của gói trong `package.json` thay đổi so với phiên bản được lưu trong bộ nhớ đệm.
+- **Giải quyết Tập lệnh Thông minh**: Tự động thực thi tập lệnh `"build-recovery"` nếu nó được định nghĩa trong các tập lệnh của gói, và chuyển sang tập lệnh tiêu chuẩn `"build"` nếu không tìm thấy tập lệnh đầu tiên.
+- **Loại trừ Gói Thử nghiệm**: Tự động bỏ qua các gói được đánh dấu là thử nghiệm (chứa `"ui-test": true` trong tệp `package.json`).
+
+## Nó hoạt động như thế nào?
+
+Quy trình biên dịch gói tự động hóa việc kiểm tra và gửi lệnh xây dựng:
+
+1. **Quét Thư mục**: Lớp `BuildPackages` quét thư mục gói mục tiêu (mặc định là `/packages/`) và đọc tệp nhật ký bộ nhớ đệm xây dựng `./logs/ui-build.log.json`.
+2. **Lọc & Xác thực**: Đối với mỗi thư mục, nó khởi tạo một trình bao bọc `PackageFile` để xác minh rằng đó là một gói hợp lệ, không phải là gói thử nghiệm và phiên bản hiện tại của nó khác với phiên bản được ghi lại trong bộ nhớ đệm xây dựng.
+3. **Thực thi Xây dựng**: Nếu yêu cầu cập nhật, nó sẽ kiểm tra các tập lệnh trong tệp `package.json`:
+   - Nếu tồn tại tập lệnh `"build-recovery"`, nó sẽ thực thi `npm run build-recovery`.
+   - Ngược lại, nếu tồn tại tập lệnh `"build"`, nó sẽ thực thi `npm run build`.
+4. **Đồng bộ hóa Nhật ký**: Sau khi biên dịch thành công một gói, phiên bản của nó được cập nhật trong bộ nhớ đệm trong bộ nhớ tạm (in-memory cache).
+5. **Lưu trữ Nhật ký**: Nếu một hoặc nhiều gói được xây dựng thành công, bộ nhớ đệm cập nhật sẽ được lưu lại vào `./logs/ui-build.log.json`.
+
+## Thông tin chi tiết bổ sung
+
+### Tệp bộ nhớ đệm nhật ký (`ui-build.log.json`)
+
+Bộ nhớ đệm cục bộ được lưu trữ tại:
+```
+./logs/ui-build.log.json
+```
+Nếu bạn muốn buộc xây dựng lại tất cả các gói bất kể tính nhất quán của phiên bản, bạn có thể xóa tệp này hoặc đặt lại nội dung của nó thành dấu ngoặc nhọn trống `{}`.
+
+### Loại trừ các gói thử nghiệm
+
+Nếu bạn muốn một gói được bỏ qua bởi trình xây dựng, hãy thêm thuộc tính sau vào tệp `package.json` của gói đó:
+```json
+{
+  "ui-test": true
+}
+```

package/src/media/functional/scripts/bin/dxt-build-publish-packages/build-publish-packages.en.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/scripts/bin/dxt-build-publish-packages - Publish Packages'/>
+
+# dxt-build-publish-packages
+
+The `dxt-build-publish-packages` command provides automated publishing of npm packages across the workspace. It uses `BuildPublishPackages` and `PackageFile` to scan active library folders, track versions, and publish packages to npm when new versions are detected.
+
+## Key Features
+
+- **Automated Monorepo Scanning**: Automatically detects active package directories under `/packages/` that contain a valid `package.json`.
+- **Incremental Version-Based Caching**: Avoids redundant publications by maintaining a local publication cache in `./logs/ui-publish.log.json`. It only triggers publish operations if a package's version has changed compared to the cache.
+- **Intelligent Script Resolution**: Automatically executes the `"publish-to-npm"` script if it is defined in the package's scripts, falling back to standard `npm publish --access public`.
+- **Publish Exclusion**: Automatically skips packages marked as private (`"private": true`) or explicitly flagged to prevent publication (`"ui-no-publish": true`).
+
+## How does it work?
+
+The package publication workflow automates checks and publish dispatching:
+
+1. **Scan Directories**: The `BuildPublishPackages` class scans the target packages directory (by default, `/packages/`) and reads the publication cache log from `./logs/ui-publish.log.json`.
+2. **Filter & Validate**: For each directory, it instantiates a `PackageFile` wrapper to verify that it is a package and that it is not excluded from publishing.
+3. **Execute Publish**: If an update is required or the package is not yet logged:
+   - If `"publish-to-npm"` script exists, it executes `npm run publish-to-npm`.
+   - Otherwise, it falls back to executing `npm publish --access public`.
+4. **Log Synchronization**: Upon successful publication of a package, its version is updated in the in-memory cache.
+5. **Persist Logs**: If one or more packages were successfully published, the updated cache is saved back to `./logs/ui-publish.log.json`.
+
+## Additional Information
+
+### Log Caching File (`ui-publish.log.json`)
+
+The local publication cache is stored at:
+```
+./logs/ui-publish.log.json
+```
+If you wish to force-republish all packages regardless of version consistency, you can delete this file or reset its contents to empty `{}`.
+
+### Excluding Packages from Publishing
+
+If you want a package to be ignored by the publisher, add one of the following properties to its `package.json`:
+```json
+{
+  "private": true
+}
+```
+or:
+```json
+{
+  "ui-no-publish": true
+}
+```

package/src/media/functional/scripts/bin/dxt-build-publish-packages/build-publish-packages.ru.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/scripts/bin/dxt-build-publish-packages - Публикация пакетов'/>
+
+# dxt-build-publish-packages
+
+Команда `dxt-build-publish-packages` обеспечивает автоматическую публикацию npm-пакетов в рабочем пространстве. Инструмент использует `BuildPublishPackages` и `PackageFile` для сканирования активных директорий библиотек, отслеживания версий и публикации пакетов при обнаружении новой версии.
+
+## Ключевые возможности
+
+- **Автоматическое сканирование монорепозитория**: Обнаруживает активные директории пакетов внутри папки `/packages/`, содержащие корректный файл `package.json`.
+- **Инкрементальное кэширование на основе версий**: Избегает избыточных публикаций благодаря ведению локального кэша публикаций в файле `./logs/ui-publish.log.json`. Публикация пакета запускается только в том случае, если его текущая версия в `package.json` изменилась по сравнению с сохраненной в кэше.
+- **Интеллектуальный выбор скриптов**: Автоматически выполняет скрипт `"publish-to-npm"`, если он определен в скриптах пакета, с переходом на стандартную команду `npm publish --access public`, если первый отсутствует.
+- **Исключение из публикации**: Автоматически пропускает пакеты, помеченные как приватные (`"private": true` в `package.json`) или содержащие свойство `"ui-no-publish": true`.
+
+## Как это работает?
+
+Процесс публикации пакетов автоматизирует проверки и вызовы команд публикации:
+
+1. **Сканирование директорий**: Класс `BuildPublishPackages` сканирует целевую директорию пакетов (по умолчанию `/packages/`) и считывает файл кэша публикаций `./logs/ui-publish.log.json`.
+2. **Фильтрация и валидация**: Для каждой папки создается обертка `PackageFile` для проверки того, что она является пакетом и не исключена из публикации.
+3. **Выполнение публикации**: Если версия пакета не зарегистрирована или отличается от кэшированной версии:
+   - Если существует скрипт `"publish-to-npm"`, выполняется `npm run publish-to-npm`.
+   - В противном случае выполняется команда `npm publish --access public`.
+4. **Синхронизация логов**: После успешной публикации пакета его версия обновляется в кэше в оперативной памяти.
+5. **Сохранение логов**: Если один или несколько пакетов были успешно опубликованы, обновленный кэш сохраняется обратно в `./logs/ui-publish.log.json`.
+
+## Дополнительная информация
+
+### Файл кэширования логов (`ui-publish.log.json`)
+
+Локальный кэш хранится по пути:
+```
+./logs/ui-publish.log.json
+```
+Если вы хотите принудительно переопубликовать все пакеты независимо от их версий, вы можете удалить этот файл или сбросить его содержимое до пустых скобок `{}`.
+
+### Исключение из публикации
+
+Если вы хотите, чтобы публикатор игнорировал конкретный пакет, добавьте одно из следующих свойств в его файл `package.json`:
+```json
+{
+  "private": true
+}
+```
+или:
+```json
+{
+  "ui-no-publish": true
+}
+```

package/src/media/functional/scripts/bin/dxt-build-publish-packages/build-publish-packages.vi.mdx

@@ -0,0 +1,51 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/scripts/bin/dxt-build-publish-packages - Công Bố Gói'/>
+
+# dxt-build-publish-packages
+
+Lệnh `dxt-build-publish-packages` cung cấp khả năng tự động công bố (publish) các gói npm trong không gian làm việc. Công cụ này sử dụng `BuildPublishPackages` và `PackageFile` để quét các thư mục thư viện hoạt động, theo dõi các phiên bản và công bố gói lên npm khi phát hiện phiên bản mới.
+
+## Các tính năng chính
+
+- **Tự động quét Monorepo**: Tự động phát hiện các thư mục gói đang hoạt động dưới `/packages/` có chứa tệp `package.json` hợp lệ.
+- **Bộ nhớ đệm tăng dần dựa trên Phiên bản**: Tránh các hoạt động công bố dư thừa bằng cách duy trì bộ nhớ đệm công bố cục bộ trong `./logs/ui-publish.log.json`. Nó chỉ kích hoạt các hoạt động công bố nếu phiên bản hiện tại của gói trong `package.json` thay đổi so với phiên bản được lưu trong bộ nhớ đệm.
+- **Giải quyết Tập lệnh Thông minh**: Tự động thực thi tập lệnh `"publish-to-npm"` nếu nó được định nghĩa trong các tập lệnh của gói, và chuyển sang lệnh tiêu chuẩn `npm publish --access public` nếu không tìm thấy tập lệnh đầu tiên.
+- **Loại trừ Công bố**: Tự động bỏ qua các gói được đánh dấu là riêng tư (`"private": true`) hoặc có thuộc tính `"ui-no-publish": true` trong tệp `package.json`.
+
+## Nó hoạt động như thế nào?
+
+Quy trình công bố gói tự động hóa việc kiểm tra và gửi lệnh công bố:
+
+1. **Quét Thư mục**: Lớp `BuildPublishPackages` quét thư mục gói mục tiêu (mặc định là `/packages/`) và đọc tệp nhật ký bộ nhớ đệm công bố `./logs/ui-publish.log.json`.
+2. **Lọc & Xác thực**: Đối với mỗi thư mục, nó khởi tạo một trình bao bọc `PackageFile` để xác minh rằng đó là một gói hợp lệ và không bị loại trừ khỏi quy trình công bố.
+3. **Thực thi Công bố**: Nếu phát hiện phiên bản mới hoặc gói chưa được ghi nhận trong bộ nhớ đệm:
+   - Nếu tồn tại tập lệnh `"publish-to-npm"`, nó sẽ thực thi `npm run publish-to-npm`.
+   - Ngược lại, nó sẽ thực thi lệnh `npm publish --access public`.
+4. **Đồng bộ hóa Nhật ký**: Sau khi công bố thành công một gói, phiên bản của nó được cập nhật trong bộ nhớ đệm trong bộ nhớ tạm (in-memory cache).
+5. **Lưu trữ Nhật ký**: Nếu một hoặc nhiều gói được công bố thành công, bộ nhớ đệm cập nhật sẽ được lưu lại vào `./logs/ui-publish.log.json`.
+
+## Thông tin chi tiết bổ sung
+
+### Tệp bộ nhớ đệm nhật ký (`ui-publish.log.json`)
+
+Bộ nhớ đệm cục bộ được lưu trữ tại:
+```
+./logs/ui-publish.log.json
+```
+Nếu bạn muốn buộc công bố lại tất cả các gói bất kể tính nhất quán của phiên bản, bạn có thể xóa tệp này hoặc đặt lại nội dung của nó thành dấu ngoặc nhọn trống `{}`.
+
+### Loại trừ các gói khỏi quy trình công bố
+
+Nếu bạn muốn một gói được bỏ qua bởi trình công bố, hãy thêm một trong các thuộc tính sau vào tệp `package.json` của gói đó:
+```json
+{
+  "private": true
+}
+```
+hoặc:
+```json
+{
+  "ui-no-publish": true
+}
+```