colibri-ui 0.8.66 → 0.8.68

package/Accordion/Accordion.module.css

@@ -1,6 +1,7 @@
 .root {
+  color: var(--component-accordion-text);
   overflow: hidden;
-  padding: 14px;
+  padding: var(--space-3);
 }
 
 .content {
@@ -13,11 +14,11 @@
   align-items: center;
   background: none;
   border: none;
-  color: initial;
+  color: inherit;
   cursor: pointer;
   display: flex;
   font: inherit;
-  gap: 8px;
+  gap: var(--space-2);
   inline-size: 100%;
   outline: none;
   padding: 0;
@@ -33,7 +34,7 @@
 }
 
 .header {
-  margin-block-end: 14px;
+  margin-block-end: var(--space-3);
 }
 
 .chevron {
@@ -44,8 +45,8 @@
 }
 
 .line {
-  background-color: var(--palette-bg-3);
-  block-size: 1px;
+  background-color: var(--component-accordion-line);
+  block-size: var(--border-width-hairline);
   flex: 1;
-  margin-inline-start: 8px;
+  margin-inline-start: var(--space-2);
 }

package/Accordion/index.js

@@ -36,7 +36,7 @@ var Accordion = function Accordion(_ref) {
   };
   React.useEffect(function () {
     if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
+      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0";
     }
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {

package/Avatar/Avatar.module.css

@@ -1,5 +1,5 @@
 .avatar {
-  border-radius: 100%;
+  border-radius: var(--radius-full);
   box-sizing: border-box;
   display: block;
   height: 100%;
@@ -10,12 +10,12 @@
 }
 
 .avatar-bordered {
-  background-color: var(--palette-white);
-  border: 3px solid var(--palette-bg-2);
-  padding: 3px;
+  background-color: var(--component-avatar-border-bg);
+  border: var(--component-avatar-border-width) solid var(--component-avatar-border);
+  padding: var(--component-avatar-border-padding);
 }
 .avatar-bordered:hover {
-  border-color: var(--palette-bg-4);
+  border-color: var(--component-avatar-border-hover);
 }
 
 .size-s,
@@ -28,78 +28,95 @@
 }
 
 .size-s {
-  height: 32px;
-  width: 32px;
+  height: var(--component-avatar-size-s);
+  width: var(--component-avatar-size-s);
 }
 
 .size-m {
-  height: 48px;
-  width: 48px;
+  height: var(--component-avatar-size-m);
+  width: var(--component-avatar-size-m);
 }
 
 .size-l {
-  height: 80px;
-  width: 80px;
+  height: var(--component-avatar-size-l);
+  width: var(--component-avatar-size-l);
 }
 
 .size-xl {
-  height: 120px;
-  width: 120px;
+  height: var(--component-avatar-size-xl);
+  width: var(--component-avatar-size-xl);
 }
 
 .size-xxl {
-  height: 196px;
-  width: 196px;
+  height: var(--component-avatar-size-xxl);
+  width: var(--component-avatar-size-xxl);
 }
 
 .size-xxxl {
-  height: 280px;
-  width: 280px;
+  height: var(--component-avatar-size-xxxl);
+  width: var(--component-avatar-size-xxxl);
 }
 
 .text-s {
-  font-size: 1rem;
+  font-size: var(--component-avatar-font-size-s);
   font-weight: 500;
 }
 
 .text-m {
-  font-size: 1.5rem;
+  font-size: var(--component-avatar-font-size-m);
   font-weight: 500;
 }
 
 .text-l {
-  font-size: 2.5rem;
+  font-size: var(--component-avatar-font-size-l);
   font-weight: 400;
 }
 
 .text-xl {
-  font-size: 3.75rem;
+  font-size: var(--component-avatar-font-size-xl);
   font-weight: 400;
 }
 
 .text-xxl {
-  font-size: 6rem;
+  font-size: var(--component-avatar-font-size-xxl);
   font-weight: 400;
 }
 
 .text-xxxl {
-  font-size: 9rem;
+  font-size: var(--component-avatar-font-size-xxxl);
   font-weight: 400;
 }
 
 .avatar-initials {
   align-items: center;
-  background-color: var(--palette-bg-4);
-  border-radius: 50%;
+  background-color: var(--component-avatar-initials-bg);
+  border-radius: var(--radius-full);
   display: inline-flex;
   justify-content: center;
 }
 
 .initials-text {
-  color: white;
+  color: var(--component-avatar-initials-text);
   text-transform: uppercase;
 }
 
+.avatar-stub {
+  align-items: center;
+  background-color: var(--component-avatar-initials-bg);
+  border-radius: var(--radius-full);
+  box-sizing: border-box;
+  color: var(--component-avatar-initials-text);
+  display: inline-flex;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.avatar-stub-icon {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
 .avatar-wrapper {
   display: inline-block;
   position: relative;
@@ -107,16 +124,16 @@
 
 .avatar-loader::before {
   animation: spin 1s linear infinite;
-  border: 4px solid transparent;
-  border-radius: 50%;
-  border-top-color: #0087bf;
+  border: var(--component-avatar-loader-border-width) solid transparent;
+  border-radius: var(--radius-full);
+  border-top-color: var(--component-avatar-loader);
   box-sizing: border-box;
   content: "";
-  height: calc(100% + 6px);
-  left: -3px;
+  height: calc(100% + var(--component-avatar-loader-size-offset));
+  left: calc(var(--component-avatar-loader-offset) * -1);
   position: absolute;
-  top: -3px;
-  width: calc(100% + 6px);
+  top: calc(var(--component-avatar-loader-offset) * -1);
+  width: calc(100% + var(--component-avatar-loader-size-offset));
 }
 
 @keyframes spin {

package/Avatar/index.js

@@ -7,8 +7,6 @@ var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
 var constants = require('./constants.js');
-var userCircle = require('./assets/user-circle.svg.js');
-var orgCircle = require('./assets/org-circle.svg.js');
 var styles = require('./Avatar.module.css');
 var index_props = require('./index.props.js');
 
@@ -19,11 +17,36 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var getStubImage = function getStubImage(type) {
-  return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
-};
 var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["size-s"]), constants.AvatarSize.M, styles__default.default["size-m"]), constants.AvatarSize.L, styles__default.default["size-l"]), constants.AvatarSize.XL, styles__default.default["size-xl"]), constants.AvatarSize.XXL, styles__default.default["size-xxl"]), constants.AvatarSize.XXXL, styles__default.default["size-xxxl"]);
 var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["text-s"]), constants.AvatarSize.M, styles__default.default["text-m"]), constants.AvatarSize.L, styles__default.default["text-l"]), constants.AvatarSize.XL, styles__default.default["text-xl"]), constants.AvatarSize.XXL, styles__default.default["text-xxl"]), constants.AvatarSize.XXXL, styles__default.default["text-xxxl"]);
+var UserStubIcon = function UserStubIcon() {
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    className: styles__default.default["avatar-stub-icon"],
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 42 39",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714C2.2 31.967 0 26.74 0 21.11 0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887",
+    clipRule: "evenodd"
+  }));
+};
+var OrgStubIcon = function OrgStubIcon() {
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    className: styles__default.default["avatar-stub-icon"],
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 42 42",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M19.103 27.36V34H9V12.062L22.567 6v21.36h-3.464zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z",
+    clipRule: "evenodd"
+  }));
+};
 var Avatar = /*#__PURE__*/React.memo(function (props) {
   var src = props.src,
     _props$size = props.size,
@@ -40,40 +63,54 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     ariaLabel = props.ariaLabel,
     ref = props.ref,
     rest = tslib.__rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loading", "ariaLabel", "ref"]);
-  var stubSrc = getStubImage(accountType);
-  // Приоритет: переданное изображение (src) > инициалы > дефолтное изображение
   var hasInitials = initials && initials.trim().length > 0;
   var hasCustomImage = Boolean(src);
-  // Показываем изображение если есть src ИЛИ (нет инициалов И есть дефолтное изображение)
-  var shouldShowImage = hasCustomImage || !hasInitials && stubSrc;
-  var finalSrc = src || stubSrc;
-  return shouldShowImage ? (
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  React__default.default.createElement("div", {
-    className: clsx__default.default(styles__default.default["avatar-wrapper"], _defineProperty__default.default({}, styles__default.default["avatar-loader"], Boolean(loading))),
-    onClick: onClick,
-    role: "button",
-    "aria-label": ariaLabel || "Avatar"
-  }, /*#__PURE__*/React__default.default.createElement("img", Object.assign({
-    ref: ref,
-    "data-testid": "avatar",
-    alt: alt,
-    src: finalSrc,
-    className: clsx__default.default(styles__default.default.avatar, _defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), SIZE_CLASSES[size], className)
-  }, rest)))) : (
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-  React__default.default.createElement("span", Object.assign({
-    ref: ref,
-    "data-testid": "avatar",
-    role: "button",
-    "aria-label": ariaLabel || "Avatar",
-    onClick: onClick,
-    className: clsx__default.default(styles__default.default["avatar-initials"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
-  }, rest), /*#__PURE__*/React__default.default.createElement("span", {
-    className: clsx__default.default(styles__default.default["initials-text"], TEXT_CLASSES[size])
-  }, (initials === null || initials === void 0 ? void 0 : initials.trim().slice(0, 2)) || "")));
+  if (hasCustomImage) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      React__default.default.createElement("div", {
+        className: clsx__default.default(styles__default.default["avatar-wrapper"], _defineProperty__default.default({}, styles__default.default["avatar-loader"], Boolean(loading))),
+        onClick: onClick,
+        role: "button",
+        "aria-label": ariaLabel || "Avatar"
+      }, /*#__PURE__*/React__default.default.createElement("img", Object.assign({
+        ref: ref,
+        "data-testid": "avatar",
+        alt: alt,
+        src: src,
+        className: clsx__default.default(styles__default.default.avatar, _defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), SIZE_CLASSES[size], className)
+      }, rest)))
+    );
+  }
+  if (hasInitials) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+      React__default.default.createElement("span", Object.assign({
+        ref: ref,
+        "data-testid": "avatar",
+        role: "button",
+        "aria-label": ariaLabel || "Avatar",
+        onClick: onClick,
+        className: clsx__default.default(styles__default.default["avatar-initials"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
+      }, rest), /*#__PURE__*/React__default.default.createElement("span", {
+        className: clsx__default.default(styles__default.default["initials-text"], TEXT_CLASSES[size])
+      }, initials.trim().slice(0, 2)))
+    );
+  }
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    React__default.default.createElement("span", Object.assign({
+      ref: ref,
+      "data-testid": "avatar",
+      role: "button",
+      "aria-label": ariaLabel || "Avatar",
+      onClick: onClick,
+      className: clsx__default.default(styles__default.default["avatar-stub"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
+    }, rest), accountType === index_props.AccountType.Organization ? (/*#__PURE__*/React__default.default.createElement(OrgStubIcon, null)) : (/*#__PURE__*/React__default.default.createElement(UserStubIcon, null)))
+  );
 });
 
 exports.default = Avatar;

package/Badge/Badge.module.css

@@ -1,15 +1,15 @@
 .root {
   align-items: center;
-  background-color: var(--palette-brand-default-1);
-  border-radius: 10px;
+  background-color: var(--component-badge-bg);
+  border-radius: var(--radius-full);
   box-sizing: border-box;
-  color: var(--palette-white);
+  color: var(--component-badge-text);
   display: flex;
   flex-flow: row wrap;
-  font-size: 12px;
-  height: 20px;
-  min-width: 20px;
-  padding: 0 4px;
+  font-size: var(--font-size-text-xs);
+  height: var(--space-5);
+  min-width: var(--space-5);
+  padding: 0 var(--space-1);
   place-content: center center;
   position: absolute;
   user-select: none;

package/Badge/index.js

@@ -17,10 +17,8 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var Badge = function Badge(_a) {
-  var background = _a.background,
-    children = _a.children,
+  var children = _a.children,
     className = _a.className,
-    color = _a.color,
     content = _a.content,
     _a$direction = _a.direction,
     direction = _a$direction === void 0 ? "right" : _a$direction,
@@ -29,7 +27,7 @@ var Badge = function Badge(_a) {
     max = _a$max === void 0 ? 99 : _a$max,
     _a$showZero = _a.showZero,
     showZero = _a$showZero === void 0 ? false : _a$showZero,
-    props = tslib.__rest(_a, ["background", "children", "className", "color", "content", "direction", "invisible", "max", "showZero"]);
+    props = tslib.__rest(_a, ["children", "className", "content", "direction", "invisible", "max", "showZero"]);
   var invisible = invisibleProp;
   if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
     invisible = true;
@@ -37,11 +35,7 @@ var Badge = function Badge(_a) {
   var displayValue = content == null ? undefined : content > max ? "".concat(max, "+") : content;
   return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, Object.assign({}, props), children, displayValue !== undefined && (/*#__PURE__*/React__default.default.createElement("span", {
     className: clsx__default.default(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["root_direction_".concat(direction)], Boolean(direction)), styles__default.default["root_invisible"], Boolean(invisible)), className),
-    "data-testid": "badge",
-    style: {
-      backgroundColor: background,
-      color: color
-    }
+    "data-testid": "badge"
   }, displayValue)));
 };
 

package/Badge/index.props.d.ts

@@ -1,8 +1,6 @@
 import type { ControlProps } from "./Control/index.props";
 export interface Props extends ControlProps {
     className?: string;
-    color?: string;
-    background?: string;
     content?: number;
     invisible?: boolean;
     max?: number;