colibri-ui 0.7.63 → 0.7.64

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/esm/Checkbox/Checkbox.module.css

@@ -35,7 +35,7 @@
 }
 
 .checked {
-  background-color: var(--checkbox-primary-background-color-checked);
+  background-color: var(--checkbox-background-color-checked);
   border: 0;
 }
 .checked::after {
@@ -73,17 +73,17 @@
   border-color: var(--palette-bg-3);
 }
 .control_variant_primary:focus:not(:disabled) + .fake-checkbox {
-  box-shadow: 0 0 0 2px var(--checkbox-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-hovered);
+  background-color: var(--checkbox-background-color-hovered);
 }
 .control_variant_primary:active:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-active);
-  border-color: var(--checkbox-primary-border-color-active);
-  box-shadow: var(--checkbox-primary-box-shadow-active);
+  background-color: var(--checkbox-background-color-active);
+  border-color: var(--checkbox-border-color-active);
+  box-shadow: var(--checkbox-box-shadow-active);
 }
 .control_variant_primary:disabled + .fake-checkbox {
-  background-color: var(--checkbox-primary-background-color-disabled);
+  background-color: var(--checkbox-background-color-disabled);
   z-index: 1;
 }

package/esm/Icons/Setting.js

@@ -0,0 +1,32 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { forwardRef } from 'react';
+
+var Setting = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = __rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.createElement("svg", __assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height
+  }, props, {
+    ref: ref,
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: fill,
+    d: "m8.428 3.287.88 1.198c.27.364.62.675 1.09.801a1.85 1.85 0 0 0 1.414-.188c.39-.226.667-.602.84-1.054l.542-1.385a.75.75 0 0 1 .894-.45l.5.134.5.133a.75.75 0 0 1 .548.84l-.226 1.467c-.072.482-.018.948.209 1.34.237.411.632.731 1.126.864.476.127.938.024 1.36-.158l1.343-.588a.75.75 0 0 1 .95.312l.26.447.26.451a.75.75 0 0 1-.206.98l-1.197.88c-.363.27-.674.619-.8 1.088a1.85 1.85 0 0 0 .188 1.413c.227.39.602.667 1.054.84l1.385.543a.75.75 0 0 1 .45.893l-.135.5-.133.5a.75.75 0 0 1-.837.55l-1.47-.224c-.48-.076-.947-.021-1.34.205-.41.238-.73.632-.863 1.127-.125.47-.03.928.15 1.344l.596 1.36a.75.75 0 0 1-.311.951l-.45.26-.45.26a.75.75 0 0 1-.98-.204l-.846-1.149c-.283-.38-.63-.72-1.12-.852a1.85 1.85 0 0 0-1.414.188c-.39.227-.668.603-.841 1.056l-.542 1.384a.75.75 0 0 1-.892.45l-.502-.134-.5-.134a.75.75 0 0 1-.548-.838l.225-1.467c.074-.483.02-.95-.208-1.344a1.85 1.85 0 0 0-1.126-.862c-.486-.13-.955-.014-1.386.173l-1.32.576a.75.75 0 0 1-.95-.314l-.258-.447-.26-.448a.75.75 0 0 1 .205-.982l1.198-.879v-.001c.363-.27.675-.62.8-1.09a1.85 1.85 0 0 0-.187-1.413c-.226-.39-.602-.667-1.054-.84l-1.385-.543a.75.75 0 0 1-.45-.894l.134-.498.133-.501a.75.75 0 0 1 .839-.549l1.468.225c.482.074.95.02 1.342-.208.41-.238.73-.632.862-1.126.127-.473.026-.933-.154-1.352L6.24 4.552a.75.75 0 0 1 .314-.952L7 3.343l.446-.26a.75.75 0 0 1 .98.204zM10.89 16.14a4.286 4.286 0 1 0 2.219-8.28 4.286 4.286 0 0 0-2.22 8.28"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h24v24H0z"
+  }))));
+});
+
+export { Setting as default };

package/esm/Icons/index.d.ts

@@ -9,5 +9,6 @@ export { default as Info } from "./Info";
 export { default as Minus } from "./Minus";
 export { default as More } from "./More";
 export { default as Plus } from "./Plus";
+export { default as Setting } from "./Setting";
 export { default as Trash } from "./Trash";
 export { default as User } from "./User";

package/esm/Icons/index.js

@@ -9,5 +9,6 @@ export { default as Info } from './Info.js';
 export { default as Minus } from './Minus.js';
 export { default as More } from './More.js';
 export { default as Plus } from './Plus.js';
+export { default as Setting } from './Setting.js';
 export { default as Trash } from './Trash.js';
 export { default as User } from './User.js';

package/esm/InputRadio/InputRadio.module.css

@@ -51,26 +51,26 @@
   position: absolute;
 }
 .input:not(.input_disabled, .input_error):hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error):focus + .icon {
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error):active + .icon {
-  background-color: var(--inputradio-primary-background-color-focused);
-  border-color: var(--inputradio-primary-border-color-focused);
-  box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
+  background-color: var(--input-radio-background-color-focused);
+  border-color: var(--input-radio-border-color-focused);
+  box-shadow: 0 0 0 2px var(--input-radio-box-shadow-focused);
 }
 .input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
-  border-color: var(--inputradio-primary-background-color-hovered);
+  border-color: var(--input-radio-background-color-hovered);
 }
 .input:not(.input_disabled, .input_error) .input_checked:active + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_checked + .icon {
   background-color: var(--palette-white);
-  border: 4px solid var(--inputradio-primary-background-color-checked);
+  border: 4px solid var(--input-radio-background-color-checked);
 }
 .input_disabled + .icon {
   border-radius: 50%;

package/esm/Switch/Switch.module.css

@@ -18,8 +18,8 @@
   width: 40px;
 }
 .wrapper_variant_primary {
-  background-color: var(--switch-primary-background-color);
-  border-color: var(--switch-primary-border-color);
+  background-color: var(--switch-background-color);
+  border-color: var(--switch-border-color);
 }
 
 .base-switch {
@@ -48,8 +48,8 @@
   z-index: 1;
 }
 .checkbox:checked + .wrapper {
-  background-color: var(--switch-primary-background-color-checked);
-  border-color: var(--switch-primary-border-color-checked);
+  background-color: var(--switch-background-color-checked);
+  border-color: var(--switch-border-color-checked);
 }
 .checkbox:checked + .wrapper .base-switch {
   transform: translateX(18px);

package/esm/Theme/index.d.ts

@@ -84,22 +84,25 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": 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;
+        "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;
     };
     BA: {
         "palette-black": string;
@@ -183,21 +186,24 @@ export declare const THEMES: {
         "input-primary-border-color-error": string;
         "input-primary-background-color-error": string;
         "input-primary-box-shadow-color-error": 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;
+        "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;
     };
 };

package/esm/Theme/themes/buenos_aires.d.ts

@@ -80,21 +80,24 @@ declare const _default: {
     "input-primary-border-color-error": string;
     "input-primary-background-color-error": string;
     "input-primary-box-shadow-color-error": 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;
+    "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/esm/Theme/themes/buenos_aires.js

@@ -82,22 +82,25 @@ var THEME_BA = {
   "input-primary-border-color-error": Color.ALERT,
   "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
-  "checkbox-primary-background-color-checked": Color.PRIMARY_BA_4,
-  "checkbox-primary-background-color-hovered": Color.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-focused": Color.PRIMARY_BA_1,
-  "checkbox-primary-background-color-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-border-color-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-box-shadow-active": Color.PRIMARY_BA_4,
-  "checkbox-primary-background-color-disabled": Color.PRIMARY_BA_1,
-  "inputradio-primary-background-color-checked": Color.PRIMARY_BA_4,
-  "inputradio-primary-background-color-hovered": Color.PRIMARY_BA_4,
-  "inputradio-primary-box-shadow-focused": Color.PRIMARY_BA_1,
-  "inputradio-primary-background-color-focused": Color.PRIMARY_BA_1,
-  "inputradio-primary-border-color-focused": Color.PRIMARY_BA_1,
-  "switch-primary-background-color": Color.BG_2,
-  "switch-primary-border-color": Color.BG_2,
-  "switch-primary-background-color-checked": Color.PRIMARY_BA_5,
-  "switch-primary-border-color-checked": Color.PRIMARY_BA_5
+  "checkbox-background-color-checked": Color.PRIMARY_BA_4,
+  "checkbox-background-color-hovered": Color.PRIMARY_BA_4,
+  "checkbox-box-shadow-focused": Color.PRIMARY_BA_1,
+  "checkbox-background-color-active": Color.PRIMARY_BA_4,
+  "checkbox-border-color-active": Color.PRIMARY_BA_4,
+  "checkbox-box-shadow-active": Color.PRIMARY_BA_4,
+  "checkbox-background-color-disabled": Color.PRIMARY_BA_1,
+  "input-radio-background-color-checked": Color.PRIMARY_BA_4,
+  "input-radio-background-color-hovered": Color.PRIMARY_BA_4,
+  "input-radio-box-shadow-focused": Color.PRIMARY_BA_1,
+  "input-radio-background-color-focused": Color.PRIMARY_BA_1,
+  "input-radio-border-color-focused": Color.PRIMARY_BA_1,
+  "switch-background-color": Color.BG_2,
+  "switch-border-color": Color.BG_2,
+  "switch-background-color-checked": Color.PRIMARY_BA_5,
+  "switch-border-color-checked": Color.PRIMARY_BA_5,
+  "tooltip-background-color": Color.SECONDARY_BA_3,
+  "tooltip-color": Color.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 export { THEME_BA as default };

package/esm/Theme/themes/default.d.ts

@@ -83,21 +83,24 @@ declare const _default: {
     "input-primary-border-color-error": string;
     "input-primary-background-color-error": string;
     "input-primary-box-shadow-color-error": 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;
+    "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/esm/Theme/themes/default.js

@@ -85,22 +85,25 @@ var THEME_DEFAULT = {
   "input-primary-border-color-error": Color.ALERT,
   "input-primary-background-color-error": Color.TRETIARY_DEFAULT_2,
   "input-primary-box-shadow-color-error": Color.TRETIARY_DEFAULT_2,
-  "checkbox-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "checkbox-primary-background-color-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-border-color-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-box-shadow-active": Color.PRIMARY_DEFAULT_4,
-  "checkbox-primary-background-color-disabled": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-checked": Color.PRIMARY_DEFAULT_4,
-  "inputradio-primary-background-color-hovered": Color.PRIMARY_DEFAULT_4,
-  "inputradio-primary-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-background-color-focused": Color.PRIMARY_DEFAULT_1,
-  "inputradio-primary-border-color-focused": Color.PRIMARY_DEFAULT_1,
-  "switch-primary-background-color": Color.BG_2,
-  "switch-primary-border-color": Color.BG_2,
-  "switch-primary-background-color-checked": Color.PRIMARY_DEFAULT_5,
-  "switch-primary-border-color-checked": Color.PRIMARY_DEFAULT_5
+  "checkbox-background-color-checked": Color.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
+  "checkbox-background-color-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-border-color-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-box-shadow-active": Color.PRIMARY_DEFAULT_4,
+  "checkbox-background-color-disabled": Color.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-checked": Color.PRIMARY_DEFAULT_4,
+  "input-radio-background-color-hovered": Color.PRIMARY_DEFAULT_4,
+  "input-radio-box-shadow-focused": Color.PRIMARY_DEFAULT_1,
+  "input-radio-background-color-focused": Color.PRIMARY_DEFAULT_1,
+  "input-radio-border-color-focused": Color.PRIMARY_DEFAULT_1,
+  "switch-background-color": Color.BG_2,
+  "switch-border-color": Color.BG_2,
+  "switch-background-color-checked": Color.PRIMARY_DEFAULT_5,
+  "switch-border-color-checked": Color.PRIMARY_DEFAULT_5,
+  "tooltip-background-color": Color.BLACK,
+  "tooltip-color": Color.WHITE,
+  "tooltip-border-radius": "4px"
 };
 
 export { THEME_DEFAULT as default };

package/esm/TimeSelect/Label/index.js

@@ -0,0 +1,15 @@
+import React__default, { useRef } from 'react';
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = useRef(null);
+  return /*#__PURE__*/React__default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+export { OptionLabel as default };

package/esm/TimeSelect/helpers.js

@@ -0,0 +1,24 @@
+import { format, addMinutes } from '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 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 = addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+
+export { DEFAULT_TIME, formatTime, generateSuggest };

package/esm/TimeSelect/index.js

@@ -0,0 +1,33 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { useMemo } from 'react';
+import Select from '../Select/index.js';
+import { generateSuggest } from './helpers.js';
+import OptionLabel from './Label/index.js';
+
+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 = __rest(_a, ["value", "label", "interval", "onChange"]);
+  var options = useMemo(function () {
+    return generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.createElement(OptionLabel, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  return /*#__PURE__*/React__default.createElement(Select, __assign({}, props, {
+    value: value,
+    label: label,
+    options: options,
+    onChange: onChange
+  }));
+};
+
+export { TimeSelect as default };