colibri-ui 0.7.62 → 0.7.64

package/Theme/themes/default.d.ts

@@ -75,23 +75,32 @@ declare const _default: {
     "button-clear-color": string;
     "button-clear-color-hovered": string;
     "button-clear-color-active": string;
+    "button-clear-color-disabled": string;
+    "button-clear-background-color-disabled": string;
+    "button-clear-border-color-disabled": string;
     "input-primary-border-color": string;
     "input-primary-plaseholder-color": string;
-    "checkbox-primary-background-color-checked": string;
-    "checkbox-primary-background-color-hovered": string;
-    "checkbox-primary-box-shadow-focused": string;
-    "checkbox-primary-background-color-active": string;
-    "checkbox-primary-border-color-active": string;
-    "checkbox-primary-box-shadow-active": string;
-    "checkbox-primary-background-color-disabled": string;
-    "inputradio-primary-background-color-checked": string;
-    "inputradio-primary-background-color-hovered": string;
-    "inputradio-primary-box-shadow-focused": string;
-    "inputradio-primary-background-color-focused": string;
-    "inputradio-primary-border-color-focused": string;
-    "switch-primary-background-color": string;
-    "switch-primary-border-color": string;
-    "switch-primary-background-color-checked": string;
-    "switch-primary-border-color-checked": string;
+    "input-primary-border-color-error": string;
+    "input-primary-background-color-error": string;
+    "input-primary-box-shadow-color-error": string;
+    "checkbox-background-color-checked": string;
+    "checkbox-background-color-hovered": string;
+    "checkbox-box-shadow-focused": string;
+    "checkbox-background-color-active": string;
+    "checkbox-border-color-active": string;
+    "checkbox-box-shadow-active": string;
+    "checkbox-background-color-disabled": string;
+    "input-radio-background-color-checked": string;
+    "input-radio-background-color-hovered": string;
+    "input-radio-box-shadow-focused": string;
+    "input-radio-background-color-focused": string;
+    "input-radio-border-color-focused": string;
+    "switch-background-color": string;
+    "switch-border-color": string;
+    "switch-background-color-checked": string;
+    "switch-border-color-checked": string;
+    "tooltip-background-color": string;
+    "tooltip-color": string;
+    "tooltip-border-radius": string;
 };
 export default _default;

package/Theme/themes/default.js

@@ -29,7 +29,7 @@ var THEME_DEFAULT = {
   "typography-alert": index.default.ALERT,
   "typography-success": index.default.SUCCESS,
   "typography-secondary": index.default.BG_3,
-  "button-border-radius": "26px",
+  "button-border-radius": "18px",
   "button-primary-color": index.default.WHITE,
   "button-primary-background-color": index.default.PRIMARY_DEFAULT_4,
   "button-primary-border-color": index.default.PRIMARY_DEFAULT_4,
@@ -39,7 +39,7 @@ var THEME_DEFAULT = {
   "button-primary-color-active": index.default.WHITE,
   "button-primary-background-color-active": index.default.PRIMARY_DEFAULT_5,
   "button-primary-border-color-active": index.default.PRIMARY_DEFAULT_5,
-  "button-primary-color-disabled": index.default.PRIMARY_DEFAULT_2,
+  "button-primary-color-disabled": index.default.BG_4,
   "button-primary-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
   "button-primary-border-color-disabled": index.default.PRIMARY_DEFAULT_1,
   "button-secondary-color": index.default.WHITE,
@@ -51,21 +51,21 @@ var THEME_DEFAULT = {
   "button-secondary-color-active": index.default.WHITE,
   "button-secondary-background-color-active": index.default.SECONDARY_DEFAULT_5,
   "button-secondary-border-color-active": index.default.SECONDARY_DEFAULT_5,
-  "button-secondary-color-disabled": index.default.SECONDARY_DEFAULT_2,
+  "button-secondary-color-disabled": index.default.BG_4,
   "button-secondary-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
   "button-secondary-border-color-disabled": index.default.SECONDARY_DEFAULT_1,
-  "button-pseudo-color": index.default.TRETIARY_DEFAULT_5,
-  "button-pseudo-background-color": index.default.WHITE,
-  "button-pseudo-border-color": index.default.WHITE,
-  "button-pseudo-color-hovered": index.default.TRETIARY_DEFAULT_5,
-  "button-pseudo-background-color-hovered": index.default.TRETIARY_DEFAULT_2,
-  "button-pseudo-border-color-hovered": index.default.TRETIARY_DEFAULT_2,
-  "button-pseudo-color-active": index.default.TRETIARY_DEFAULT_5,
+  "button-pseudo-color": index.default.BLACK,
+  "button-pseudo-background-color": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-color-hovered": index.default.BLACK,
+  "button-pseudo-background-color-hovered": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color-hovered": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-color-active": index.default.BLACK,
   "button-pseudo-background-color-active": index.default.TRETIARY_DEFAULT_2,
   "button-pseudo-border-color-active": index.default.TRETIARY_DEFAULT_2,
-  "button-pseudo-color-disabled": index.default.SECONDARY_DEFAULT_2,
-  "button-pseudo-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
-  "button-pseudo-border-color-disabled": index.default.SECONDARY_DEFAULT_1,
+  "button-pseudo-color-disabled": index.default.BG_4,
+  "button-pseudo-background-color-disabled": index.default.TRETIARY_DEFAULT_1,
+  "button-pseudo-border-color-disabled": index.default.TRETIARY_DEFAULT_1,
   "button-outline-color": index.default.BLACK,
   "button-outline-background-color": index.default.WHITE,
   "button-outline-border-color": index.default.BG_3,
@@ -75,30 +75,39 @@ var THEME_DEFAULT = {
   "button-outline-color-active": index.default.BLACK,
   "button-outline-background-color-active": index.default.BG_2,
   "button-outline-border-color-active": index.default.BG_3,
-  "button-outline-color-disabled": index.default.SECONDARY_DEFAULT_2,
-  "button-outline-background-color-disabled": index.default.SECONDARY_DEFAULT_1,
+  "button-outline-color-disabled": index.default.BG_4,
+  "button-outline-background-color-disabled": index.default.WHITE,
   "button-outline-border-color-disabled": index.default.BG_2,
   "button-clear-color": index.default.PRIMARY_DEFAULT_4,
-  "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_5,
+  "button-clear-color-hovered": index.default.PRIMARY_DEFAULT_4,
   "button-clear-color-active": index.default.PRIMARY_DEFAULT_5,
+  "button-clear-color-disabled": index.default.BG_4,
+  "button-clear-background-color-disabled": index.default.WHITE,
+  "button-clear-border-color-disabled": index.default.WHITE,
   "input-primary-border-color": index.default.BG_3,
   "input-primary-plaseholder-color": index.default.BG_2,
-  "checkbox-primary-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "checkbox-primary-background-color-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-border-color-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-active": index.default.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-checked": index.default.PRIMARY_DEFAULT_4,
-  "inputradio-primary-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
-  "inputradio-primary-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-focused": index.default.PRIMARY_DEFAULT_1,
-  "inputradio-primary-border-color-focused": index.default.PRIMARY_DEFAULT_1,
-  "switch-primary-background-color": index.default.BG_2,
-  "switch-primary-border-color": index.default.BG_2,
-  "switch-primary-background-color-checked": index.default.PRIMARY_DEFAULT_5,
-  "switch-primary-border-color-checked": index.default.PRIMARY_DEFAULT_5
+  "input-primary-border-color-error": index.default.ALERT,
+  "input-primary-background-color-error": index.default.TRETIARY_DEFAULT_2,
+  "input-primary-box-shadow-color-error": index.default.TRETIARY_DEFAULT_2,
+  "checkbox-background-color-checked": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
+  "checkbox-background-color-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-border-color-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-active": index.default.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-disabled": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-checked": index.default.PRIMARY_DEFAULT_4,
+  "input-radio-background-color-hovered": index.default.PRIMARY_DEFAULT_4,
+  "input-radio-box-shadow-focused": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-focused": index.default.PRIMARY_DEFAULT_1,
+  "input-radio-border-color-focused": index.default.PRIMARY_DEFAULT_1,
+  "switch-background-color": index.default.BG_2,
+  "switch-border-color": index.default.BG_2,
+  "switch-background-color-checked": index.default.PRIMARY_DEFAULT_5,
+  "switch-border-color-checked": index.default.PRIMARY_DEFAULT_5,
+  "tooltip-background-color": index.default.BLACK,
+  "tooltip-color": index.default.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 exports.default = THEME_DEFAULT;

package/TimeSelect/Label/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = React.useRef(null);
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+exports.default = OptionLabel;

package/TimeSelect/helpers.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var dateFns = require('date-fns');
+
+var day = new Date();
+day.setHours(24, 0, 0, 0);
+var DEFAULT_TIME = {
+  index: 24,
+  time: "12:00"
+};
+var formatTime = function formatTime(date) {
+  return dateFns.format(date, "HH:mm");
+};
+var generateSuggest = function generateSuggest(interval) {
+  if (interval === void 0) {
+    interval = 15;
+  }
+  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
+    var date = dateFns.addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+
+exports.DEFAULT_TIME = DEFAULT_TIME;
+exports.formatTime = formatTime;
+exports.generateSuggest = generateSuggest;

package/TimeSelect/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var index$1 = require('../Select/index.js');
+var helpers = require('./helpers.js');
+var index = require('./Label/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var TimeSelect = function TimeSelect(_a) {
+  var value = _a.value,
+    _b = _a.label,
+    label = _b === void 0 ? "Start time" : _b,
+    _c = _a.interval,
+    interval = _c === void 0 ? 15 : _c,
+    onChange = _a.onChange,
+    props = tslib.__rest(_a, ["value", "label", "interval", "onChange"]);
+  var options = React.useMemo(function () {
+    return helpers.generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.default.createElement(index.default, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  return /*#__PURE__*/React__default.default.createElement(index$1.default, tslib.__assign({}, props, {
+    value: value,
+    label: label,
+    options: options,
+    onChange: onChange
+  }));
+};
+
+exports.default = TimeSelect;

package/Tooltip/Tooltip.module.css

@@ -0,0 +1,122 @@
+.root[data-popper-placement=bottom-start] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-start]::before {
+  left: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom-end] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom-end]::before {
+  right: 6px;
+  top: 0;
+}
+.root[data-popper-placement=bottom] {
+  padding-top: 4px;
+}
+.root[data-popper-placement=bottom]::before {
+  left: 50%;
+  top: 0;
+  transform: translate(-50%, 0);
+}
+.root[data-popper-placement=right] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right]::before {
+  left: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(-90deg);
+}
+.root[data-popper-placement=right-start] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-start]::before {
+  left: -6px;
+  top: 6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=right-end] {
+  padding-left: 4px;
+}
+.root[data-popper-placement=right-end]::before {
+  bottom: 6px;
+  left: -6px;
+  transform: rotate(-90deg);
+}
+.root[data-popper-placement=left] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left]::before {
+  right: -6px;
+  top: 50%;
+  transform: translate(0, -50%) rotate(90deg);
+}
+.root[data-popper-placement=left-start] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-start]::before {
+  right: -6px;
+  top: 6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=left-end] {
+  padding-right: 4px;
+}
+.root[data-popper-placement=left-end]::before {
+  bottom: 6px;
+  right: -6px;
+  transform: rotate(90deg);
+}
+.root[data-popper-placement=top] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top]::before {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0) rotate(180deg);
+}
+.root[data-popper-placement=top-start] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-start]::before {
+  bottom: 0;
+  left: 6px;
+  transform: rotate(180deg);
+}
+.root[data-popper-placement=top-end] {
+  padding-bottom: 4px;
+}
+.root[data-popper-placement=top-end]::before {
+  bottom: 0;
+  right: 6px;
+  transform: rotate(180deg);
+}
+
+.tail {
+  position: relative;
+}
+.tail::before {
+  border-bottom: 5px solid var(--tooltip-background-color);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: "";
+  height: 0;
+  position: absolute;
+  width: 0;
+  z-index: 3000;
+}
+
+.overlay {
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  max-width: 200px;
+  overflow: hidden;
+  padding: 4px 10px;
+  position: relative;
+}

package/Tooltip/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ITooltipProps } from "./index.props";
+declare const Tooltip: React.FC<ITooltipProps>;
+export default Tooltip;

package/Tooltip/index.js

@@ -0,0 +1,111 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var reactPopper = require('react-popper');
+var classNames = require('classnames/bind');
+var index = require('../Portal/index.js');
+var on = require('../helpers/on.js');
+var index$1 = require('../ClickOutside/index.js');
+var styles = require('./Tooltip.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Tooltip = function Tooltip(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    content = _a.content,
+    _b = _a.withTail,
+    withTail = _b === void 0 ? false : _b,
+    _c = _a.placement,
+    placement = _c === void 0 ? "bottom" : _c,
+    _d = _a.strategy,
+    strategy = _d === void 0 ? "absolute" : _d;
+  var _e = React.useState(null),
+    controlElement = _e[0],
+    setControlElement = _e[1];
+  var _f = React.useState(null),
+    popperElement = _f[0],
+    setPopperElement = _f[1];
+  var _g = React.useState(false),
+    visible = _g[0],
+    setVisible = _g[1];
+  var _h = reactPopper.usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: true
+      }, {
+        name: "preventOverflow",
+        enabled: true
+      }]
+    }),
+    styles = _h.styles,
+    attributes = _h.attributes,
+    update = _h.update;
+  var isNotComponent = typeof children === "string";
+  var reference = React.useMemo(function () {
+    return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
+  }, [children, isNotComponent]);
+  var onToggle = React.useCallback(function (e) {
+    e.stopPropagation();
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = React.useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = React.useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = React.useCallback(function (e) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = React.useCallback(function (e) {
+    e.stopPropagation();
+    onHide();
+  }, [onHide]);
+  React.useEffect(function () {
+    var unsubscribes = [];
+    unsubscribes.push(on.on(controlElement, "mouseenter", onShow, false));
+    unsubscribes.push(on.on(controlElement, "mouseleave", onHide, false));
+    unsubscribes.push(on.on(popperElement, "mouseenter", onShow, false));
+    unsubscribes.push(on.on(popperElement, "mouseleave", onHide, false));
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  React.useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(reference.type, tslib.__assign({
+    ref: setControlElement
+  }, reference.props)), visible && ( /*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({
+    className: clx("root", {
+      tail: !!withTail
+    }),
+    ref: setPopperElement,
+    style: tslib.__assign(tslib.__assign({}, styles.popper), {
+      zIndex: zIndex
+    })
+  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("overlay"),
+    onClick: onClickOverlay
+  }, content))))));
+};
+
+exports.default = Tooltip;

package/Tooltip/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Trigger = "hover";
+export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
+export interface ITooltipProps {
+    children: ReactNode;
+    content: ReactNode;
+    zIndex?: number;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    withTail?: boolean;
+}

package/Tooltip/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Tooltip/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Typography/index.d.ts

@@ -1,4 +1,4 @@
-import { FC } from "react";
 import { type Props } from "./index.props";
+import type { FC } from "react";
 declare const Typography: FC<Props>;
 export default Typography;

package/base/InputRoot/InputRoot.module.css

@@ -52,17 +52,17 @@
   pointer-events: none;
 }
 .variant_primary_error {
-  background-color: var(--palette-tretiary-2);
-  border-color: var(--palette-alert);
+  background-color: var(--input-primary-background-color-error);
+  border-color: var(--input-primary-border-color-error);
 }
 .variant_primary_error:hover {
   background-color: var(--palette-white);
-  border-color: var(--palette-alert);
-  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
+  border-color: var(--input-primary-border-color-error);
+  box-shadow: 0 0 0 2px var(--input-primary-box-shadow-color-error);
 }
 .variant_primary_error:focus, .variant_primary_error:focus-within {
   background-color: var(--palette-white);
-  border-color: var(--palette-alert);
+  border-color: var(--input-primary-border-color-error);
 }
 
 .size_s {

package/esm/Button/Button.module.css

@@ -41,13 +41,6 @@
 .root_fullWidth {
   width: 100%;
 }
-.root_disabled {
-  background-color: var(--button-primary-background-color-disabled);
-  border-color: var(--button-primary-border-color-disabled);
-  color: var(--button-primary-color-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
 
 .icon {
   display: flex;
@@ -89,6 +82,13 @@
   border-color: var(--button-primary-border-color-active);
   color: var(--button-primary-color-active);
 }
+.variant_primary_disabled {
+  background-color: var(--button-primary-background-color-disabled);
+  border-color: var(--button-primary-border-color-disabled);
+  color: var(--button-primary-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .variant_secondary {
   background-color: var(--button-secondary-background-color);
   border-color: var(--button-secondary-border-color);
@@ -104,6 +104,13 @@
   border-color: var(--button-secondary-border-color-active);
   color: var(--button-secondary-color-active);
 }
+.variant_secondary_disabled {
+  background-color: var(--button-secondary-background-color-disabled);
+  border-color: var(--button-secondary-border-color-disabled);
+  color: var(--button-secondary-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .variant_pseudo {
   background-color: var(--button-pseudo-background-color);
   border-color: var(--button-pseudo-border-color);
@@ -119,6 +126,13 @@
   border-color: var(--button-pseudo-border-color-active);
   color: var(--button-pseudo-color-active);
 }
+.variant_pseudo_disabled {
+  background-color: var(--button-pseudo-background-color-disabled);
+  border-color: var(--button-pseudo-border-color-disabled);
+  color: var(--button-pseudo-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .variant_outline {
   background-color: var(--button-outline-background-color);
   border-color: var(--button-outline-border-color);
@@ -134,6 +148,13 @@
   border-color: var(--button-outline-border-color-active);
   color: var(--button-outline-color-active);
 }
+.variant_outline_disabled {
+  background-color: var(--button-outline-background-color-disabled);
+  border-color: var(--button-outline-border-color-disabled);
+  color: var(--button-outline-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .variant_clear {
   background-color: transparent;
   border-color: transparent;
@@ -144,4 +165,11 @@
 }
 .variant_clear:active {
   color: var(--button-clear-color-active);
+}
+.variant_clear_disabled {
+  background-color: var(--button-clear-background-color-disabled);
+  border-color: var(--button-clear-border-color-disabled);
+  color: var(--button-clear-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }

package/esm/Button/index.js

@@ -24,9 +24,8 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     ref: ref,
     className: clx(styles.root, (_b = {
       root_icon: !!icon,
-      root_disabled: disabled ? 1 : 0,
-      root_fullWidth: fullWidth ? 1 : 0
-    }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className),
+      root_fullWidth: !!fullWidth
+    }, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b["variant_".concat(variant, "_disabled")] = !!disabled, _b), className),
     disabled: disabled,
     "data-cy": "button"
   }, props), icon && /*#__PURE__*/React__default.createElement("span", {