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

package/Avatar/cjs/index.development.js

@@ -59,6 +59,14 @@ function stringAvatar(name) {
 var css = {"root":"Avatar__root___ap8QD","image":"Avatar__image___52SeG","text":"Avatar__text___-Fg0p","icon":"Avatar__icon___-JCN2","theme_white":"Avatar__theme_white___VDWp7","theme_black-100":"Avatar__theme_black-100___AQ1tT","theme_violet-300":"Avatar__theme_violet-300___yK-3d","theme_yellow-500":"Avatar__theme_yellow-500___O2My9","theme_multicolor":"Avatar__theme_multicolor___xV5U3","objectFit_fill":"Avatar__objectFit_fill___MyUzF","objectFit_contain":"Avatar__objectFit_contain___Us7n4","objectFit_cover":"Avatar__objectFit_cover___fwC58","objectFit_scale-down":"Avatar__objectFit_scale-down___s0abY","objectFit_none":"Avatar__objectFit_none___uABHG"};
 
 var _excluded = ["image", "name", "size", "loading", "theme", "objectFit", "className"];
+/**
+ * Аватар користувача. Відображає фото, скорочене ім'я або іконку-заглушку.
+ * Тема `'multicolor'` автоматично генерує колір фону з імені.
+ * @example
+ * import { Avatar } from '@prom-ui/core/Avatar'
+ * <Avatar name='Іван Іваненко' size={40} />
+ * <Avatar image='https://example.com/photo.jpg' />
+ */
 var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var image = _ref.image,
     name = _ref.name,

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

@@ -59,6 +59,14 @@ function stringAvatar(name) {
 var css = {"root":"Avatar__root___G2c2y","image":"Avatar__image___A7F5c","text":"Avatar__text___ZWoLT","icon":"Avatar__icon___sQ5M9","theme_white":"Avatar__theme_white___alKXP","theme_black-100":"Avatar__theme_black-100___mN0Ch","theme_violet-300":"Avatar__theme_violet-300___MEUSj","theme_yellow-500":"Avatar__theme_yellow-500___lfsbh","theme_multicolor":"Avatar__theme_multicolor___zMJTY","objectFit_fill":"Avatar__objectFit_fill___SpfXf","objectFit_contain":"Avatar__objectFit_contain___XuTkK","objectFit_cover":"Avatar__objectFit_cover___aNZ54","objectFit_scale-down":"Avatar__objectFit_scale-down___FacDj","objectFit_none":"Avatar__objectFit_none___maThn"};
 
 var _excluded = ["image", "name", "size", "loading", "theme", "objectFit", "className"];
+/**
+ * Аватар користувача. Відображає фото, скорочене ім'я або іконку-заглушку.
+ * Тема `'multicolor'` автоматично генерує колір фону з імені.
+ * @example
+ * import { Avatar } from '@prom-ui/core/Avatar'
+ * <Avatar name='Іван Іваненко' size={40} />
+ * <Avatar image='https://example.com/photo.jpg' />
+ */
 var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var image = _ref.image,
     name = _ref.name,

package/Avatar/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),a=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("react"),i=require("clsx"),o=require("@prom-ui/core/Icon"),n=require("@prom-ui/icons/User");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var u=c(e),s=c(t),d=c(a),m=l(r),f=c(i);var v={root:"ap8QD",image:"_52SeG",text:"-Fg0p",icon:"-JCN2",theme_white:"VDWp7","theme_black-100":"AQ1tT","theme_violet-300":"yK-3d","theme_yellow-500":"O2My9",theme_multicolor:"xV5U3",objectFit_fill:"MyUzF",objectFit_contain:"Us7n4",objectFit_cover:"fwC58","objectFit_scale-down":"s0abY",objectFit_none:"uABHG"},b=["image","name","size","loading","theme","objectFit","className"],_=m.forwardRef((function(e,t){var a=e.image,r=e.name,i=e.size,c=void 0===i?40:i,l=e.loading,_=void 0===l?"eager":l,h=e.theme,p=void 0===h?"violet-300":h,g=e.objectFit,j=void 0===g?"cover":g,y=e.className,q=d.default(e,b),F=!!a,w=void 0,N=null;if(!F){var O=r?r.trim():"";"multicolor"===p&&(w=function(e){var t,a=0;for(t=0;t<e.length;t+=1)a=e.charCodeAt(t)+((a<<5)-a);var r="#";for(t=0;t<3;t+=1)r+="00".concat((a>>8*t&255).toString(16)).slice(-2);return r}(O)),N=function(e){return e.split(" ").slice(0,2).map((function(e){return e[0]})).join("")}(O)}return m.createElement("div",u.default({className:f.default(v.root,y,s.default(s.default({},v["theme_".concat(p)],!F),v["objectFit_".concat(j)],!0)),"data-qaid":"avatar","data-testid":"avatar"},q,{style:{background:w,width:c,height:c,fontSize:c/2.2},ref:t}),F?m.createElement("img",{className:v.image,src:a,alt:r,width:c,height:c,loading:_,"data-qaid":"avatar_image","data-testid":"avatar_image"}):m.createElement(m.Fragment,null,N?m.createElement("span",{className:v.text,"data-qaid":"avatar_short_name","data-testid":"avatar_short_name"},N):m.createElement(o.Icon,{className:v.icon,"icon-as":n.SvgUser,"data-qaid":"avatar_user_icon","data-testid":"avatar_user_icon"})))}));_.displayName="Avatar",exports.Avatar=_,require("./style.production.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),a=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("react"),i=require("clsx"),o=require("@prom-ui/core/Icon"),n=require("@prom-ui/icons/User");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var u=c(e),s=c(t),d=c(a),m=l(r),f=c(i);var v={root:"ap8QD",image:"_52SeG",text:"-Fg0p",icon:"-JCN2",theme_white:"VDWp7","theme_black-100":"AQ1tT","theme_violet-300":"yK-3d","theme_yellow-500":"O2My9",theme_multicolor:"xV5U3",objectFit_fill:"MyUzF",objectFit_contain:"Us7n4",objectFit_cover:"fwC58","objectFit_scale-down":"s0abY",objectFit_none:"uABHG"},b=["image","name","size","loading","theme","objectFit","className"],_=m.forwardRef(function(e,t){var a=e.image,r=e.name,i=e.size,c=void 0===i?40:i,l=e.loading,_=void 0===l?"eager":l,h=e.theme,p=void 0===h?"violet-300":h,g=e.objectFit,j=void 0===g?"cover":g,y=e.className,q=d.default(e,b),F=!!a,w=void 0,N=null;if(!F){var O=r?r.trim():"";"multicolor"===p&&(w=function(e){var t,a=0;for(t=0;t<e.length;t+=1)a=e.charCodeAt(t)+((a<<5)-a);var r="#";for(t=0;t<3;t+=1)r+="00".concat((a>>8*t&255).toString(16)).slice(-2);return r}(O)),N=function(e){return e.split(" ").slice(0,2).map(function(e){return e[0]}).join("")}(O)}return m.createElement("div",u.default({className:f.default(v.root,y,s.default(s.default({},v["theme_".concat(p)],!F),v["objectFit_".concat(j)],!0)),"data-qaid":"avatar","data-testid":"avatar"},q,{style:{background:w,width:c,height:c,fontSize:c/2.2},ref:t}),F?m.createElement("img",{className:v.image,src:a,alt:r,width:c,height:c,loading:_,"data-qaid":"avatar_image","data-testid":"avatar_image"}):m.createElement(m.Fragment,null,N?m.createElement("span",{className:v.text,"data-qaid":"avatar_short_name","data-testid":"avatar_short_name"},N):m.createElement(o.Icon,{className:v.icon,"icon-as":n.SvgUser,"data-qaid":"avatar_user_icon","data-testid":"avatar_user_icon"})))});_.displayName="Avatar",exports.Avatar=_,require("./style.production.css");

package/Avatar/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),a=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("react"),i=require("clsx"),o=require("@prom-ui/core/Icon"),n=require("@prom-ui/icons/User");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}var u=c(e),s=c(t),d=c(a),m=l(r),f=c(i);var v={root:"G2c2y",image:"A7F5c",text:"ZWoLT",icon:"sQ5M9",theme_white:"alKXP","theme_black-100":"mN0Ch","theme_violet-300":"MEUSj","theme_yellow-500":"lfsbh",theme_multicolor:"zMJTY",objectFit_fill:"SpfXf",objectFit_contain:"XuTkK",objectFit_cover:"aNZ54","objectFit_scale-down":"FacDj",objectFit_none:"maThn"},b=["image","name","size","loading","theme","objectFit","className"],h=m.forwardRef((function(e,t){var a=e.image,r=e.name,i=e.size,c=void 0===i?40:i,l=e.loading,h=void 0===l?"eager":l,_=e.theme,g=void 0===_?"violet-300":_,p=e.objectFit,j=void 0===p?"cover":p,q=e.className,y=d.default(e,b),F=!!a,N=void 0,w=null;if(!F){var E=r?r.trim():"";"multicolor"===g&&(N=function(e){var t,a=0;for(t=0;t<e.length;t+=1)a=e.charCodeAt(t)+((a<<5)-a);var r="#";for(t=0;t<3;t+=1)r+="00".concat((a>>8*t&255).toString(16)).slice(-2);return r}(E)),w=function(e){return e.split(" ").slice(0,2).map((function(e){return e[0]})).join("")}(E)}return m.createElement("div",u.default({className:f.default(v.root,q,s.default(s.default({},v["theme_".concat(g)],!F),v["objectFit_".concat(j)],!0)),"data-qaid":"avatar","data-testid":"avatar"},y,{style:{background:N,width:c,height:c,fontSize:c/2.2},ref:t}),F?m.createElement("img",{className:v.image,src:a,alt:r,width:c,height:c,loading:h,"data-qaid":"avatar_image","data-testid":"avatar_image"}):m.createElement(m.Fragment,null,w?m.createElement("span",{className:v.text,"data-qaid":"avatar_short_name","data-testid":"avatar_short_name"},w):m.createElement(o.Icon,{className:v.icon,"icon-as":n.SvgUser,"data-qaid":"avatar_user_icon","data-testid":"avatar_user_icon"})))}));h.displayName="Avatar",exports.Avatar=h,require("./style.production.v2.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),a=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("react"),i=require("clsx"),o=require("@prom-ui/core/Icon"),n=require("@prom-ui/icons/User");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function l(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}}),t.default=e,Object.freeze(t)}var u=c(e),s=c(t),d=c(a),m=l(r),f=c(i);var v={root:"G2c2y",image:"A7F5c",text:"ZWoLT",icon:"sQ5M9",theme_white:"alKXP","theme_black-100":"mN0Ch","theme_violet-300":"MEUSj","theme_yellow-500":"lfsbh",theme_multicolor:"zMJTY",objectFit_fill:"SpfXf",objectFit_contain:"XuTkK",objectFit_cover:"aNZ54","objectFit_scale-down":"FacDj",objectFit_none:"maThn"},b=["image","name","size","loading","theme","objectFit","className"],h=m.forwardRef(function(e,t){var a=e.image,r=e.name,i=e.size,c=void 0===i?40:i,l=e.loading,h=void 0===l?"eager":l,_=e.theme,g=void 0===_?"violet-300":_,p=e.objectFit,j=void 0===p?"cover":p,q=e.className,y=d.default(e,b),F=!!a,N=void 0,w=null;if(!F){var E=r?r.trim():"";"multicolor"===g&&(N=function(e){var t,a=0;for(t=0;t<e.length;t+=1)a=e.charCodeAt(t)+((a<<5)-a);var r="#";for(t=0;t<3;t+=1)r+="00".concat((a>>8*t&255).toString(16)).slice(-2);return r}(E)),w=function(e){return e.split(" ").slice(0,2).map(function(e){return e[0]}).join("")}(E)}return m.createElement("div",u.default({className:f.default(v.root,q,s.default(s.default({},v["theme_".concat(g)],!F),v["objectFit_".concat(j)],!0)),"data-qaid":"avatar","data-testid":"avatar"},y,{style:{background:N,width:c,height:c,fontSize:c/2.2},ref:t}),F?m.createElement("img",{className:v.image,src:a,alt:r,width:c,height:c,loading:h,"data-qaid":"avatar_image","data-testid":"avatar_image"}):m.createElement(m.Fragment,null,w?m.createElement("span",{className:v.text,"data-qaid":"avatar_short_name","data-testid":"avatar_short_name"},w):m.createElement(o.Icon,{className:v.icon,"icon-as":n.SvgUser,"data-qaid":"avatar_user_icon","data-testid":"avatar_user_icon"})))});h.displayName="Avatar",exports.Avatar=h,require("./style.production.v2.css");

package/Avatar/index.d.ts

@@ -1,16 +1,24 @@
 import * as React from 'react';
 export type AvatarProps = React.ComponentPropsWithRef<'div'> & {
-    /** Фото пользователя */
+    /** Фото користувача */
     image?: string;
-    /** Имя пользователя */
+    /** Ім'я користувача */
     name?: string;
-    /** Размер в px */
+    /** Розмір у px */
     size?: number;
     /** Тема */
     theme?: 'white' | 'black-100' | 'violet-300' | 'yellow-500' | 'multicolor';
-    /** Отложенная загрузка изображения */
+    /** Відкладене завантаження зображення */
     loading?: 'lazy' | 'eager';
-    /** Определяет, как изображение должно заполнять контейнер относительно его высоты и ширины. */
+    /** Визначає, як зображення має заповнювати контейнер відносно його висоти та ширини. */
     objectFit?: 'fill' | 'contain' | 'cover' | 'scale-down' | 'none';
 };
+/**
+ * Аватар користувача. Відображає фото, скорочене ім'я або іконку-заглушку.
+ * Тема `'multicolor'` автоматично генерує колір фону з імені.
+ * @example
+ * import { Avatar } from '@prom-ui/core/Avatar'
+ * <Avatar name='Іван Іваненко' size={40} />
+ * <Avatar image='https://example.com/photo.jpg' />
+ */
 export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Avatar/package.json

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

package/Backdrop/cjs/index.development.js

@@ -44,9 +44,11 @@ var _excluded = ["isOpen", "isRenderPortal", "isAnimated", "isBodyScrollLock", "
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Компонент служит для создания темного фона, который может использоваться в качестве
- * подложки для модальных окон или других всплывающих элементов интерфейса.
- * Он занимает всю доступную область экрана.
+ * Темний фон (підложка) для модальних вікон та інших спливаючих елементів.
+ * Займає весь екран. Підтримує анімацію, блокування прокрутки та рендер у Portal.
+ * @example
+ * import { Backdrop } from '@prom-ui/core/Backdrop'
+ * <Backdrop isOpen={isOpen} onClick={() => setOpen(false)} />
  */
 var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var _ref$isOpen = _ref.isOpen,

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

@@ -44,9 +44,11 @@ var _excluded = ["isOpen", "isRenderPortal", "isAnimated", "isBodyScrollLock", "
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Компонент служит для создания темного фона, который может использоваться в качестве
- * подложки для модальных окон или других всплывающих элементов интерфейса.
- * Он занимает всю доступную область экрана.
+ * Темний фон (підложка) для модальних вікон та інших спливаючих елементів.
+ * Займає весь екран. Підтримує анімацію, блокування прокрутки та рендер у Portal.
+ * @example
+ * import { Backdrop } from '@prom-ui/core/Backdrop'
+ * <Backdrop isOpen={isOpen} onClick={() => setOpen(false)} />
  */
 var Backdrop = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var _ref$isOpen = _ref.isOpen,

package/Backdrop/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),i=require("react-transition-group"),n=require("clsx"),c=require("@prom-ui/core/Portal"),a=require("@prom-ui/core/BodyScrollLock"),l=require("@prom-ui/core/useForwardRef");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var d=u(e),p=u(r),f=u(t),b=s(o),y=u(n),O={root:"ew14A",backdrop:"RtyKW",enterActive:"FuHNM",exitActive:"qwiIx",enter:"Ww68r",exit:"MBjXR"},m=["isOpen","isRenderPortal","isAnimated","isBodyScrollLock","style","zIndex","children","className","onClick"];function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?v(Object(t),!0).forEach((function(r){p.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var P=b.forwardRef((function(e,r){var t=e.isOpen,o=void 0!==t&&t,n=e.isRenderPortal,u=void 0===n||n,s=e.isAnimated,p=void 0===s||s,v=e.isBodyScrollLock,P=void 0!==v&&v,k=e.style,w=void 0===k?{}:k,h=e.zIndex,q=void 0===h?1e3:h,g=e.children,x=e.className,E=e.onClick,R=f.default(e,m),S=l.useForwardRef(r,null);return b.createElement(i.CSSTransition,{nodeRef:S,in:o,timeout:p?225:0,classNames:O,unmountOnExit:!0},b.createElement(c.Portal,{isActive:u},b.createElement(a.BodyScrollLock,{isActive:P}),b.createElement("div",d.default({ref:S,className:y.default(O.root,x),style:j({zIndex:q},w),"aria-hidden":!0,"data-testid":"backdrop","data-qaid":"backdrop"},R),b.createElement("div",{className:O.backdrop,onClick:E}),g)))}));P.displayName="Backdrop",exports.Backdrop=P,require("./style.production.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),i=require("react-transition-group"),n=require("clsx"),c=require("@prom-ui/core/Portal"),a=require("@prom-ui/core/BodyScrollLock"),l=require("@prom-ui/core/useForwardRef");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,Object.freeze(r)}var d=u(e),p=u(r),f=u(t),b=s(o),y=u(n),O={root:"ew14A",backdrop:"RtyKW",enterActive:"FuHNM",exitActive:"qwiIx",enter:"Ww68r",exit:"MBjXR"},m=["isOpen","isRenderPortal","isAnimated","isBodyScrollLock","style","zIndex","children","className","onClick"];function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?v(Object(t),!0).forEach(function(r){p.default(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var P=b.forwardRef(function(e,r){var t=e.isOpen,o=void 0!==t&&t,n=e.isRenderPortal,u=void 0===n||n,s=e.isAnimated,p=void 0===s||s,v=e.isBodyScrollLock,P=void 0!==v&&v,k=e.style,w=void 0===k?{}:k,h=e.zIndex,q=void 0===h?1e3:h,g=e.children,x=e.className,E=e.onClick,R=f.default(e,m),S=l.useForwardRef(r,null);return b.createElement(i.CSSTransition,{nodeRef:S,in:o,timeout:p?225:0,classNames:O,unmountOnExit:!0},b.createElement(c.Portal,{isActive:u},b.createElement(a.BodyScrollLock,{isActive:P}),b.createElement("div",d.default({ref:S,className:y.default(O.root,x),style:j({zIndex:q},w),"aria-hidden":!0,"data-testid":"backdrop","data-qaid":"backdrop"},R),b.createElement("div",{className:O.backdrop,onClick:E}),g)))});P.displayName="Backdrop",exports.Backdrop=P,require("./style.production.css");

package/Backdrop/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),i=require("react-transition-group"),n=require("clsx"),c=require("@prom-ui/core/Portal"),a=require("@prom-ui/core/BodyScrollLock"),l=require("@prom-ui/core/useForwardRef");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var d=u(e),p=u(r),f=u(t),b=s(o),y=u(n),O={root:"ae3g4",backdrop:"VmMsa",enterActive:"qi0ln",exitActive:"n-Gir",enter:"_3-uXH",exit:"BhuZN"},m=["isOpen","isRenderPortal","isAnimated","isBodyScrollLock","style","zIndex","children","className","onClick"];function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?v(Object(t),!0).forEach((function(r){p.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var P=b.forwardRef((function(e,r){var t=e.isOpen,o=void 0!==t&&t,n=e.isRenderPortal,u=void 0===n||n,s=e.isAnimated,p=void 0===s||s,v=e.isBodyScrollLock,P=void 0!==v&&v,k=e.style,h=void 0===k?{}:k,g=e.zIndex,q=void 0===g?1e3:g,w=e.children,x=e.className,E=e.onClick,S=f.default(e,m),B=l.useForwardRef(r,null);return b.createElement(i.CSSTransition,{nodeRef:B,in:o,timeout:p?225:0,classNames:O,unmountOnExit:!0},b.createElement(c.Portal,{isActive:u},b.createElement(a.BodyScrollLock,{isActive:P}),b.createElement("div",d.default({ref:B,className:y.default(O.root,x),style:j({zIndex:q},h),"aria-hidden":!0,"data-testid":"backdrop","data-qaid":"backdrop"},S),b.createElement("div",{className:O.backdrop,onClick:E}),w)))}));P.displayName="Backdrop",exports.Backdrop=P,require("./style.production.v2.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("react"),i=require("react-transition-group"),n=require("clsx"),c=require("@prom-ui/core/Portal"),a=require("@prom-ui/core/BodyScrollLock"),l=require("@prom-ui/core/useForwardRef");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&"object"==typeof e&&"default"in e)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,Object.freeze(r)}var d=u(e),p=u(r),f=u(t),b=s(o),y=u(n),O={root:"ae3g4",backdrop:"VmMsa",enterActive:"qi0ln",exitActive:"n-Gir",enter:"_3-uXH",exit:"BhuZN"},m=["isOpen","isRenderPortal","isAnimated","isBodyScrollLock","style","zIndex","children","className","onClick"];function v(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function j(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?v(Object(t),!0).forEach(function(r){p.default(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):v(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}var P=b.forwardRef(function(e,r){var t=e.isOpen,o=void 0!==t&&t,n=e.isRenderPortal,u=void 0===n||n,s=e.isAnimated,p=void 0===s||s,v=e.isBodyScrollLock,P=void 0!==v&&v,k=e.style,h=void 0===k?{}:k,g=e.zIndex,q=void 0===g?1e3:g,w=e.children,x=e.className,E=e.onClick,S=f.default(e,m),B=l.useForwardRef(r,null);return b.createElement(i.CSSTransition,{nodeRef:B,in:o,timeout:p?225:0,classNames:O,unmountOnExit:!0},b.createElement(c.Portal,{isActive:u},b.createElement(a.BodyScrollLock,{isActive:P}),b.createElement("div",d.default({ref:B,className:y.default(O.root,x),style:j({zIndex:q},h),"aria-hidden":!0,"data-testid":"backdrop","data-qaid":"backdrop"},S),b.createElement("div",{className:O.backdrop,onClick:E}),w)))});P.displayName="Backdrop",exports.Backdrop=P,require("./style.production.v2.css");

package/Backdrop/index.d.ts

@@ -1,16 +1,16 @@
 import * as React from 'react';
 export type BackdropProps = React.ComponentPropsWithRef<'div'> & {
-    /** Позволяет передавать дочерние элементы в компонент. */
+    /** Дозволяє передавати дочірні елементи до компонента. */
     children?: React.ReactNode;
-    /** Определяет, должен ли компонент отображаться `true` или скрыться `false`. */
+    /** Визначає, чи має компонент відображатись `true` або приховатись `false`. */
     isOpen?: boolean;
-    /** Рендер в конец `<body>` */
+    /** Рендер у кінець `<body>` */
     isRenderPortal?: boolean;
-    /** Включает/отключает анимацию */
+    /** Вмикає/вимикає анімацію */
     isAnimated?: boolean;
-    /** Запрещает прокрутку `<body>` */
+    /** Забороняє прокрутку `<body>` */
     isBodyScrollLock?: boolean;
-    /** Cвойство CSS, которое устанавливает уровень вложенности элемента.  */
+    /** Властивість CSS, що встановлює рівень вкладеності елемента. */
     zIndex?: number;
     /** @ignore */
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -20,8 +20,10 @@ export type BackdropProps = React.ComponentPropsWithRef<'div'> & {
     style?: React.CSSProperties;
 };
 /**
- * Компонент служит для создания темного фона, который может использоваться в качестве
- * подложки для модальных окон или других всплывающих элементов интерфейса.
- * Он занимает всю доступную область экрана.
+ * Темний фон (підложка) для модальних вікон та інших спливаючих елементів.
+ * Займає весь екран. Підтримує анімацію, блокування прокрутки та рендер у Portal.
+ * @example
+ * import { Backdrop } from '@prom-ui/core/Backdrop'
+ * <Backdrop isOpen={isOpen} onClick={() => setOpen(false)} />
  */
 export declare const Backdrop: React.ForwardRefExoticComponent<Omit<BackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/Backdrop/package.json

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

package/Badge/cjs/index.development.js

@@ -38,7 +38,13 @@ var css = {"root":"Badge__root___QNSvz","root_variant_dot":"Badge__root_variant_
 
 var _excluded = ["value", "isShowZero", "max", "position", "variant", "children", "className"];
 /**
- * Небольшой значок в правом верхнем углу своего дочернего элемента
+ * Невеликий значок у правому верхньому куті дочірнього елемента.
+ * @example
+ * import { Badge } from '@prom-ui/core/Badge'
+ * <Badge value={5}>
+ *   <button>Повідомлення</button>
+ * </Badge>
+ * <Badge value={99} max={9} variant='dot' />
  */
 var Badge = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var value = _ref.value,

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

@@ -38,7 +38,13 @@ var css = {"root":"Badge__root___-2hEg","root_variant_dot":"Badge__root_variant_
 
 var _excluded = ["value", "isShowZero", "max", "position", "variant", "children", "className"];
 /**
- * Небольшой значок в правом верхнем углу своего дочернего элемента
+ * Невеликий значок у правому верхньому куті дочірнього елемента.
+ * @example
+ * import { Badge } from '@prom-ui/core/Badge'
+ * <Badge value={5}>
+ *   <button>Повідомлення</button>
+ * </Badge>
+ * <Badge value={99} max={9} variant='dot' />
  */
 var Badge = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var value = _ref.value,

package/Badge/cjs/index.production.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),a=require("react"),o=require("clsx");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),p=i(t),l=i(r),s=n(a),d=i(o),c={root:"QNSvz",root_variant_dot:"LQAyB",wrapper:"uSbS1","wrapper_position_top-left":"XQbSE","wrapper_position_top-right":"RHHgB","wrapper_position_bottom-left":"UCIFU","wrapper_position_bottom-right":"MA0aH"},f=["value","isShowZero","max","position","variant","children","className"],b=s.forwardRef((function(e,t){var r=e.value,a=e.isShowZero,o=void 0!==a&&a,i=e.max,n=void 0===i?9:i,b=e.position,m=void 0===b?"top-right":b,v=e.variant,_=e.children,g=e.className,h=l.default(e,f),w=m||"top-right",y=r,j=null;return Number.isInteger(n)&&Number(r)>n&&(y="".concat(n,"+")),(y||0===y&&o)&&(j=s.createElement("span",u.default({className:d.default(c.root,p.default({},c.root_variant_dot,"dot"===v),g),ref:t,"data-qaid":"badge","data-testid":"badge"},h),y)),_?s.createElement("div",{className:d.default(c.wrapper,c["wrapper_position_".concat(w)])},_,j):j}));b.displayName="Badge",exports.Badge=b,require("./style.production.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),a=require("react"),o=require("clsx");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var u=i(e),p=i(t),l=i(r),s=n(a),d=i(o),c={root:"QNSvz",root_variant_dot:"LQAyB",wrapper:"uSbS1","wrapper_position_top-left":"XQbSE","wrapper_position_top-right":"RHHgB","wrapper_position_bottom-left":"UCIFU","wrapper_position_bottom-right":"MA0aH"},f=["value","isShowZero","max","position","variant","children","className"],b=s.forwardRef(function(e,t){var r=e.value,a=e.isShowZero,o=void 0!==a&&a,i=e.max,n=void 0===i?9:i,b=e.position,m=void 0===b?"top-right":b,v=e.variant,_=e.children,g=e.className,h=l.default(e,f),w=m||"top-right",y=r,j=null;return Number.isInteger(n)&&Number(r)>n&&(y="".concat(n,"+")),(y||0===y&&o)&&(j=s.createElement("span",u.default({className:d.default(c.root,p.default({},c.root_variant_dot,"dot"===v),g),ref:t,"data-qaid":"badge","data-testid":"badge"},h),y)),_?s.createElement("div",{className:d.default(c.wrapper,c["wrapper_position_".concat(w)])},_,j):j});b.displayName="Badge",exports.Badge=b,require("./style.production.css");

package/Badge/cjs/index.production.v2.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),a=require("react"),o=require("clsx");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=i(e),p=i(t),l=i(r),s=n(a),c=i(o),d={root:"_-2hEg",root_variant_dot:"_4qcc0",wrapper:"_7bkFh","wrapper_position_top-left":"k-olF","wrapper_position_top-right":"MTPK-","wrapper_position_bottom-left":"WZaNZ","wrapper_position_bottom-right":"blz1u"},f=["value","isShowZero","max","position","variant","children","className"],b=s.forwardRef((function(e,t){var r=e.value,a=e.isShowZero,o=void 0!==a&&a,i=e.max,n=void 0===i?9:i,b=e.position,_=void 0===b?"top-right":b,m=e.variant,v=e.children,h=e.className,g=l.default(e,f),w=_||"top-right",j=r,y=null;return Number.isInteger(n)&&Number(r)>n&&(j="".concat(n,"+")),(j||0===j&&o)&&(y=s.createElement("span",u.default({className:c.default(d.root,p.default({},d.root_variant_dot,"dot"===m),h),ref:t,"data-qaid":"badge","data-testid":"badge"},g),j)),v?s.createElement("div",{className:c.default(d.wrapper,d["wrapper_position_".concat(w)])},v,y):y}));b.displayName="Badge",exports.Badge=b,require("./style.production.v2.css");
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),a=require("react"),o=require("clsx");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function n(e){if(e&&"object"==typeof e&&"default"in e)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:function(){return e[r]}})}}),t.default=e,Object.freeze(t)}var u=i(e),p=i(t),l=i(r),s=n(a),c=i(o),d={root:"_-2hEg",root_variant_dot:"_4qcc0",wrapper:"_7bkFh","wrapper_position_top-left":"k-olF","wrapper_position_top-right":"MTPK-","wrapper_position_bottom-left":"WZaNZ","wrapper_position_bottom-right":"blz1u"},f=["value","isShowZero","max","position","variant","children","className"],b=s.forwardRef(function(e,t){var r=e.value,a=e.isShowZero,o=void 0!==a&&a,i=e.max,n=void 0===i?9:i,b=e.position,_=void 0===b?"top-right":b,m=e.variant,v=e.children,h=e.className,g=l.default(e,f),w=_||"top-right",j=r,y=null;return Number.isInteger(n)&&Number(r)>n&&(j="".concat(n,"+")),(j||0===j&&o)&&(y=s.createElement("span",u.default({className:c.default(d.root,p.default({},d.root_variant_dot,"dot"===m),h),ref:t,"data-qaid":"badge","data-testid":"badge"},g),j)),v?s.createElement("div",{className:c.default(d.wrapper,d["wrapper_position_".concat(w)])},v,y):y});b.displayName="Badge",exports.Badge=b,require("./style.production.v2.css");

package/Badge/index.d.ts

@@ -1,27 +1,35 @@
 import * as React from 'react';
 export type BadgeProps = React.ComponentPropsWithoutRef<'span'> & React.PropsWithChildren<{
+    /** Вміст значка. `null` або `undefined` — значок не рендериться */
     value: string | number | undefined | null;
-    /** Автоматически скрывается когда `content={0}` */
+    /** Автоматично приховується, коли `content={0}` */
     isShowZero?: boolean;
-    /** Максимальное значение контента */
+    /** Максимальне значення контенту */
     max?: number;
-    /** Реквизит `variant='dot'` превращает значок в маленькую точку. */
+    /** Проп `variant='dot'` перетворює значок на маленьку точку. */
     variant?: 'dot';
-    /** Переместить значок в любой угол  */
+    /** Перемістити значок у будь-який кут */
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }>;
 /**
- * Небольшой значок в правом верхнем углу своего дочернего элемента
+ * Невеликий значок у правому верхньому куті дочірнього елемента.
+ * @example
+ * import { Badge } from '@prom-ui/core/Badge'
+ * <Badge value={5}>
+ *   <button>Повідомлення</button>
+ * </Badge>
+ * <Badge value={99} max={9} variant='dot' />
  */
 export declare const Badge: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    /** Вміст значка. `null` або `undefined` — значок не рендериться */
     value: string | number | undefined | null;
-    /** Автоматически скрывается когда `content={0}` */
+    /** Автоматично приховується, коли `content={0}` */
     isShowZero?: boolean;
-    /** Максимальное значение контента */
+    /** Максимальне значення контенту */
     max?: number;
-    /** Реквизит `variant='dot'` превращает значок в маленькую точку. */
+    /** Проп `variant='dot'` перетворює значок на маленьку точку. */
     variant?: "dot";
-    /** Переместить значок в любой угол  */
+    /** Перемістити значок у будь-який кут */
     position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
 } & {
     children?: React.ReactNode | undefined;

package/Badge/package.json

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

package/Body/cjs/index.development.js

@@ -4,10 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var evokit = require('@prom-ui/core/evokit');
 
+/**
+ * Секція всередині `<Body>`. Використовується як `<Body.Section>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * <Body.Section body-section-height='1-1'>Основний вміст</Body.Section>
+ */
 var BodySection = evokit.createBlock('div', 'body__section', ['display', 'height'], {
   css: undefined
 });
 BodySection.displayName = 'BodySection';
+
+/**
+ * Кореневий компонент макету — обгортка над `<body>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * import { Body } from '@prom-ui/core/Body';
+ *
+ * <Body body-background='white' body-indent='xxl' body-overflow='hidden auto'>
+ *     <Body.Section>Шапка</Body.Section>
+ *     <Body.Section body-section-height='1-1'>Контент</Body.Section>
+ * </Body>
+ */
 var Body = evokit.createBlock('body', 'body', ['background', 'color', 'display', 'indent', 'overflow-anchor', ['overflow', ['overflow-x', 'overflow-y']], ['width', ['width-min', 'width-max']]], {
   css: undefined
 });

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

@@ -4,10 +4,32 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var evokit = require('@prom-ui/core/evokit');
 
+/**
+ * Секція всередині `<Body>`. Використовується як `<Body.Section>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * <Body.Section body-section-height='1-1'>Основний вміст</Body.Section>
+ */
 var BodySection = evokit.createBlock('div', 'body__section', ['display', 'height'], {
   css: undefined
 });
 BodySection.displayName = 'BodySection';
+
+/**
+ * Кореневий компонент макету — обгортка над `<body>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * import { Body } from '@prom-ui/core/Body';
+ *
+ * <Body body-background='white' body-indent='xxl' body-overflow='hidden auto'>
+ *     <Body.Section>Шапка</Body.Section>
+ *     <Body.Section body-section-height='1-1'>Контент</Body.Section>
+ * </Body>
+ */
 var Body = evokit.createBlock('body', 'body', ['background', 'color', 'display', 'indent', 'overflow-anchor', ['overflow', ['overflow-x', 'overflow-y']], ['width', ['width-min', 'width-max']]], {
   css: undefined
 });

package/Body/index.d.ts

@@ -4,7 +4,17 @@ type BodyMediaSufix = 'large';
 type BodySectionDisplay = EvokitMediaSufix<'block' | 'none', BodyMediaSufix>;
 type BodySectionHeight = EvokitMediaSufix<'auto' | 'inherit' | '1-1', BodyMediaSufix>;
 export type BodySectionProps = {
+    /**
+     * `display` секції тіла сторінки. Підтримує медіа-суфікси.
+     * @example 'block'
+     * @example 'none@large'
+     */
     'body-section-display'?: EvokitProp<BodySectionDisplay>;
+    /**
+     * Висота секції. Підтримує медіа-суфікси.
+     * @example '1-1'
+     * @example 'auto@large'
+     */
     'body-section-height'?: EvokitProp<BodySectionHeight>;
 };
 type BodyThemes = EvokitMediaSufix<'black-100' | 'black-900' | 'white', BodyMediaSufix>;
@@ -14,23 +24,81 @@ type BodyOverflowAnchor = EvokitMediaSufix<'auto' | 'none', BodyMediaSufix>;
 type BodyOverflow = EvokitMediaSufix<'auto' | 'hidden' | 'scroll' | 'visible', BodyMediaSufix>;
 type BodyWidth = EvokitMediaSufix<'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | '3xl' | '4xl' | '5xl', BodyMediaSufix>;
 export type BodyProps = {
+    /**
+     * Колір фону сторінки. Підтримує медіа-суфікси.
+     * @example 'white'
+     * @example 'black-100'
+     */
     'body-background'?: EvokitProp<BodyThemes>;
+    /**
+     * Колір тексту сторінки за замовчуванням. Підтримує медіа-суфікси.
+     * @example 'black-900'
+     */
     'body-color'?: EvokitProp<BodyThemes>;
+    /**
+     * `display` body. Підтримує медіа-суфікси.
+     * @example 'block'
+     * @example 'none@large'
+     */
     'body-display'?: EvokitProp<BodyDisplay>;
+    /**
+     * Максимальна ширина вмісту сторінки (відступи по боках через `padding-inline`). Підтримує медіа-суфікси.
+     * Розміри: none | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * @example 'xxl'
+     * @example '3xl'
+     */
     'body-indent'?: EvokitProp<BodyIndent>;
+    /**
+     * Прив'язка скролу (`overflow-anchor`). Підтримує медіа-суфікси.
+     * @example 'none'
+     * @example 'auto'
+     */
     'body-overflow-anchor'?: EvokitProp<BodyOverflowAnchor>;
+    /**
+     * `overflow` body. Шорткат: `'x y'`. Підтримує медіа-суфікси.
+     * @example 'hidden'
+     * @example 'auto hidden'
+     * @example 'hidden@large'
+     */
     'body-overflow'?: EvokitProp<BodyOverflow | `${BodyOverflow} ${string}`>;
     /** @ignore */
     'body-overflow-x'?: EvokitProp<BodyOverflow>;
     /** @ignore */
     'body-overflow-y'?: EvokitProp<BodyOverflow>;
+    /**
+     * Ширина body. Шорткат: `'min max'`. Підтримує медіа-суфікси.
+     * Розміри: none | xxs | xs | s | m | l | xl | xxl | 3xl | 4xl | 5xl
+     * @example 'xxl'
+     * @example 's xxl'
+     */
     'body-width'?: EvokitProp<BodyWidth | `${BodyWidth} ${string}`>;
     /** @ignore */
     'body-width-min'?: EvokitProp<BodyWidth>;
     /** @ignore */
     'body-width-max'?: EvokitProp<BodyWidth>;
 };
+/**
+ * Секція всередині `<Body>`. Використовується як `<Body.Section>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * <Body.Section body-section-height='1-1'>Основний вміст</Body.Section>
+ */
 declare const BodySection: import("@prom-ui/core/evokit").CreateBlock<"div", "body__section", BodySectionProps>;
+/**
+ * Кореневий компонент макету — обгортка над `<body>`.
+ *
+ * Медіа-суфікси: `@large`
+ *
+ * @example
+ * import { Body } from '@prom-ui/core/Body';
+ *
+ * <Body body-background='white' body-indent='xxl' body-overflow='hidden auto'>
+ *     <Body.Section>Шапка</Body.Section>
+ *     <Body.Section body-section-height='1-1'>Контент</Body.Section>
+ * </Body>
+ */
 export declare const Body: import("@prom-ui/core/evokit").CreateBlock<"body", "body", BodyProps> & {
     Section: typeof BodySection;
 };

package/Body/package.json

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