@prom-ui/core 2.5.0 → 3.0.0-alpha.0

package/Box/index.d.ts

@@ -16,13 +16,63 @@ type BoxRound = EvokitMediaSufix<'none' | 'full' | 'xxs' | 'xs' | 's' | 'm' | 'l
 type BoxWidth = EvokitMediaSufix<'auto' | `1-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `2-${2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `3-${3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}` | `4-${4 | 5 | 6 | 7 | 8 | 9 | 10}` | `5-${5 | 6 | 7 | 8 | 9 | 10}` | `6-${6 | 7 | 8 | 9 | 10}` | `7-${7 | 8 | 9 | 10}` | `8-${8 | 9 | 10}` | `9-${9 | 10}` | `10-10`, BoxMediaSufix>;
 type BoxZIndex = EvokitMediaSufix<'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl', BoxMediaSufix>;
 export type BoxProps = {
+    /**
+     * Горизонтальне вирівнювання тексту та inline-елементів (`text-align`). Підтримує медіа-суфікси.
+     * @example 'center'
+     * @example 'left@small'
+     */
     'box-align'?: EvokitProp<BoxAlign>;
+    /**
+     * Колір фону. Підтримує медіа-суфікси.
+     * @example 'violet-50'
+     * @example 'white'
+     * @example 'black-100@small'
+     */
     'box-background'?: EvokitProp<BoxThemes>;
+    /**
+     * Ширина блоку у дробових частинах (1-10). Підтримує медіа-суфікси.
+     * @example '1-1'
+     * @example '1-2'
+     * @example {['1-1', '1-2@small']}
+     */
     'box-width'?: EvokitProp<BoxWidth>;
+    /**
+     * Додаткові CSS-модифікатори.
+     * - `'shadow-hover'` — анімована тінь при наведенні
+     * - `'product-tile'` — flex-колонка на всю висоту (для плиток товарів)
+     * @example 'shadow-hover'
+     * @example ['shadow-hover', 'product-tile']
+     */
     'box-blackhole'?: EvokitProp<'shadow-hover' | 'product-tile'>;
+    /**
+     * `display` блоку. `'none:empty'` — `display: none` коли елемент порожній. Підтримує медіа-суфікси.
+     * @example 'block'
+     * @example 'none@small'
+     * @example 'none:empty'
+     */
     'box-display'?: EvokitProp<BoxDisplay>;
+    /**
+     * Висота блоку. Підтримує медіа-суфікси.
+     * @example '1-1'
+     * @example 'auto@small'
+     */
     'box-height'?: EvokitProp<BoxHeight>;
+    /**
+     * Прозорість блоку (0–100). Підтримує медіа-суфікси.
+     * @example 50
+     * @example 0
+     * @example 100
+     */
     'box-opacity'?: EvokitProp<BoxOpacity>;
+    /**
+     * Рамка блоку. Шорткат: `'color width style'`. Підтримує медіа-суфікси.
+     * Одне значення → колір рамки для всіх сторін. Ширина: none | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * Щоб задати рамку лише для однієї сторони — використовуй `box-border-top`, `box-border-right` тощо.
+     * @example 'violet-300'
+     * @example 'violet-300 s'
+     * @example 'violet-300 s solid'
+     * @example 'violet-300@small'
+     */
     'box-border'?: EvokitProp<BoxThemes | `${BoxThemes} ${string}`>;
     /** @ignore */
     'box-border-top'?: EvokitProp<BoxThemes | `${BoxThemes} ${string}`>;
@@ -62,6 +112,14 @@ export type BoxProps = {
     'box-border-style-bottom'?: EvokitProp<BoxBorderStyle>;
     /** @ignore */
     'box-border-style-left'?: EvokitProp<BoxBorderStyle>;
+    /**
+     * Зовнішні відступи. Шорткат: `'top right bottom left'` або `'top-bottom right-left'`. Підтримує медіа-суфікси.
+     * Розміри: none | auto | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * @example 'l'
+     * @example 'm l'
+     * @example 'none auto l auto'
+     * @example 'none m@small'
+     */
     'box-margin'?: EvokitProp<BoxMargin | `${BoxMargin} ${string}`>;
     /** @ignore */
     'box-margin-top'?: EvokitProp<BoxMargin>;
@@ -71,6 +129,13 @@ export type BoxProps = {
     'box-margin-bottom'?: EvokitProp<BoxMargin>;
     /** @ignore */
     'box-margin-left'?: EvokitProp<BoxMargin>;
+    /**
+     * Внутрішні відступи. Шорткат: `'top right bottom left'` або `'top-bottom right-left'`. Підтримує медіа-суфікси.
+     * Розміри: none | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * @example 'l'
+     * @example 'm l'
+     * @example 's s@small'
+     */
     'box-padding'?: EvokitProp<BoxPadding | `${BoxPadding} ${string}`>;
     /** @ignore */
     'box-padding-top'?: EvokitProp<BoxPadding>;
@@ -80,14 +145,45 @@ export type BoxProps = {
     'box-padding-bottom'?: EvokitProp<BoxPadding>;
     /** @ignore */
     'box-padding-left'?: EvokitProp<BoxPadding>;
+    /**
+     * `overflow` блоку. Шорткат: `'x y'`. Підтримує медіа-суфікси.
+     * @example 'hidden'
+     * @example 'auto hidden'
+     * @example 'hidden@small'
+     */
     'box-overflow'?: EvokitProp<BoxOverflow | `${BoxOverflow} ${string}`>;
     /** @ignore */
     'box-overflow-x'?: EvokitProp<BoxOverflow>;
     /** @ignore */
     'box-overflow-y'?: EvokitProp<BoxOverflow>;
+    /**
+     * CSS `position`. Шорткат: `'position place zindex'`. Підтримує медіа-суфікси.
+     * @example 'relative'
+     * @example 'absolute'
+     * @example 'absolute center xl'
+     * @example 'absolute@small'
+     */
     'box-position'?: EvokitProp<BoxPosition | `${BoxPosition} ${string}`>;
+    /**
+     * Позиція абсолютно або фіксовано позиціонованого блоку. Потребує `box-position='absolute'` або `'fixed'`. Підтримує медіа-суфікси.
+     * @example 'center'
+     * @example 'top-left'
+     * @example 'bottom-right@small'
+     */
     'box-place'?: EvokitProp<BoxPlace>;
+    /**
+     * `z-index` блоку. Підтримує медіа-суфікси.
+     * @example 'm'
+     * @example 'xl@small'
+     */
     'box-zindex'?: EvokitProp<BoxZIndex>;
+    /**
+     * Заокруглення кутів. Шорткат: `'top-left top-right bottom-right bottom-left'` або `'top-left+bottom-right top-right+bottom-left'`. Підтримує медіа-суфікси.
+     * Розміри: none | full | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * @example 'full'
+     * @example 'm'
+     * @example 'full none@small'
+     */
     'box-round'?: EvokitProp<BoxRound | `${BoxRound} ${string}`>;
     /** @ignore */
     'box-round-top-left'?: EvokitProp<BoxRound>;
@@ -99,9 +195,20 @@ export type BoxProps = {
     'box-round-bottom-right'?: EvokitProp<BoxRound>;
 };
 /**
- * Компонент `Box` из библиотеки `evokit` является простым контейнером, который может
- * использоваться для размещения других элементов интерфейса.
- * Он может использоваться как самостоятельный элемент или в качестве родительского элемента для других компонентов.
+ * Простий контейнер для розміщення інших елементів інтерфейсу.
+ *
+ * Медіа-суфікси: `@small` | `@medium` | `@large` | `@wide` | `@huge`
+ *
+ * @example
+ * import { Box } from '@prom-ui/core/Box';
+ *
+ * <Box box-padding='m' box-background='violet-50' box-round='m'>
+ *     Вміст
+ * </Box>
+ *
+ * @example
+ * // Адаптивні відступи
+ * <Box box-padding='l s@small'>Вміст</Box>
  */
 export declare const Box: import("@prom-ui/core/evokit").CreateBlock<"div", "box", BoxProps>;
 export {};

package/Box/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prom-ui/core/Box",
-  "version": "2.5.0",
+  "version": "3.0.0-alpha.0",
   "main": "index.js",
   "types": "index.d.ts",
   "sideEffects": [

package/Button/cjs/index.development.js

@@ -39,6 +39,22 @@ var ButtonBlock = evokit.createBlock('button', 'button', ['blackhole', 'display'
   css: css
 });
 
+/**
+ * Кнопка з підтримкою тем, розмірів, відступів, заокруглень та стану завантаження.
+ *
+ * Медіа-суфікси: `@small` | `@medium` | `@large` | `@wide` | `@huge`
+ *
+ * @example
+ * import { Button } from '@prom-ui/core/Button';
+ *
+ * <Button button-theme='violet' button-round='full' button-size='default'>
+ *     Натисни мене
+ * </Button>
+ *
+ * @example
+ * // Адаптивна тема
+ * <Button button-theme={['violet', 'violet-second@small']}>Label</Button>
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var _ref$loading = _ref.loading,

package/Button/cjs/index.development.v2.js

@@ -39,6 +39,22 @@ var ButtonBlock = evokit.createBlock('button', 'button', ['blackhole', 'display'
   css: css
 });
 
+/**
+ * Кнопка з підтримкою тем, розмірів, відступів, заокруглень та стану завантаження.
+ *
+ * Медіа-суфікси: `@small` | `@medium` | `@large` | `@wide` | `@huge`
+ *
+ * @example
+ * import { Button } from '@prom-ui/core/Button';
+ *
+ * <Button button-theme='violet' button-round='full' button-size='default'>
+ *     Натисни мене
+ * </Button>
+ *
+ * @example
+ * // Адаптивна тема
+ * <Button button-theme={['violet', 'violet-second@small']}>Label</Button>
+ */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var Button = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var _ref$loading = _ref.loading,