colibri-ui 0.7.57 → 0.7.59

package/Theme/themes/default.js

@@ -2,91 +2,103 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var color = require('../color.js');
+var index = require('../colors/index.js');
 
 var THEME_DEFAULT = {
-  "palette-black": color.Color.BLACK,
-  "palette-white": color.Color.WHITE,
-  "palette-bg-1": color.Color.BG_1,
-  "palette-bg-2": color.Color.BG_2,
-  "palette-bg-3": color.Color.BG_3,
-  "palette-bg-4": color.Color.BG_4,
-  "palette-bg-5": color.Color.BG_5,
-  "palette-brand-default-1": color.Color.BRAND_DEFAULT_1,
-  "palette-brand-default-2": color.Color.BRAND_DEFAULT_2,
-  "palette-brand-default-3": color.Color.BRAND_DEFAULT_3,
-  "palette-primary-1": color.Color.PRIMARY_1,
-  "palette-primary-2": color.Color.PRIMARY_2,
-  "palette-primary-3": color.Color.PRIMARY_3,
-  "palette-primary-4": color.Color.PRIMARY_4,
-  "palette-primary-5": color.Color.PRIMARY_5,
-  "palette-tretiary-1": color.Color.TRETIARY_1,
-  "palette-tretiary-2": color.Color.TRETIARY_2,
-  "palette-tretiary-3": color.Color.TRETIARY_3,
-  "palette-tretiary-4": color.Color.TRETIARY_4,
-  "palette-tretiary-5": color.Color.TRETIARY_5,
-  "palette-alert": color.Color.ALERT,
-  "typography-alert": color.Color.ALERT,
-  "typography-success": color.Color.SUCCESS,
-  "typography-secondary": color.Color.BG_3,
+  "palette-black": index.default.BLACK,
+  "palette-white": index.default.WHITE,
+  "palette-bg-1": index.default.BG_1,
+  "palette-bg-2": index.default.BG_2,
+  "palette-bg-3": index.default.BG_3,
+  "palette-bg-4": index.default.BG_4,
+  "palette-bg-5": index.default.BG_5,
+  "palette-brand-default-1": index.default.BRAND_DEFAULT_1,
+  "palette-brand-default-2": index.default.BRAND_DEFAULT_2,
+  "palette-brand-default-3": index.default.BRAND_DEFAULT_3,
+  "palette-primary-1": index.default.PRIMARY_1,
+  "palette-primary-2": index.default.PRIMARY_2,
+  "palette-primary-3": index.default.PRIMARY_3,
+  "palette-primary-4": index.default.PRIMARY_4,
+  "palette-primary-5": index.default.PRIMARY_5,
+  "palette-tretiary-1": index.default.TRETIARY_1,
+  "palette-tretiary-2": index.default.TRETIARY_2,
+  "palette-tretiary-3": index.default.TRETIARY_3,
+  "palette-tretiary-4": index.default.TRETIARY_4,
+  "palette-tretiary-5": index.default.TRETIARY_5,
+  "palette-alert": index.default.ALERT,
+  "typography-alert": index.default.ALERT,
+  "typography-success": index.default.SUCCESS,
+  "typography-secondary": index.default.BG_3,
   "button-border-radius": "26px",
-  "button-primary-color": color.Color.WHITE,
-  "button-primary-background-color": color.Color.PRIMARY_4,
-  "button-primary-border-color": color.Color.PRIMARY_4,
-  "button-primary-color-hovered": color.Color.WHITE,
-  "button-primary-background-color-hovered": color.Color.PRIMARY_5,
-  "button-primary-border-color-hovered": color.Color.PRIMARY_5,
-  "button-primary-color-active": color.Color.WHITE,
-  "button-primary-background-color-active": color.Color.PRIMARY_5,
-  "button-primary-border-color-active": color.Color.PRIMARY_5,
-  "button-primary-color-disabled": color.Color.PRIMARY_2,
-  "button-primary-background-color-disabled": color.Color.PRIMARY_1,
-  "button-primary-border-color-disabled": color.Color.PRIMARY_1,
-  "button-secondary-color": color.Color.WHITE,
-  "button-secondary-background-color": color.Color.SECONDARY_4,
-  "button-secondary-border-color": color.Color.SECONDARY_4,
-  "button-secondary-color-hovered": color.Color.WHITE,
-  "button-secondary-background-color-hovered": color.Color.SECONDARY_5,
-  "button-secondary-border-color-hovered": color.Color.SECONDARY_5,
-  "button-secondary-color-active": color.Color.WHITE,
-  "button-secondary-background-color-active": color.Color.SECONDARY_5,
-  "button-secondary-border-color-active": color.Color.SECONDARY_5,
-  "button-secondary-color-disabled": color.Color.SECONDARY_2,
-  "button-secondary-background-color-disabled": color.Color.SECONDARY_1,
-  "button-secondary-border-color-disabled": color.Color.SECONDARY_1,
-  "button-pseudo-color": color.Color.TRETIARY_5,
-  "button-pseudo-background-color": color.Color.WHITE,
-  "button-pseudo-border-color": color.Color.WHITE,
-  "button-pseudo-color-hovered": color.Color.TRETIARY_5,
-  "button-pseudo-background-color-hovered": color.Color.TRETIARY_2,
-  "button-pseudo-border-color-hovered": color.Color.TRETIARY_2,
-  "button-pseudo-color-active": color.Color.TRETIARY_5,
-  "button-pseudo-background-color-active": color.Color.TRETIARY_2,
-  "button-pseudo-border-color-active": color.Color.TRETIARY_2,
-  "button-pseudo-color-disabled": color.Color.SECONDARY_2,
-  "button-pseudo-background-color-disabled": color.Color.SECONDARY_1,
-  "button-pseudo-border-color-disabled": color.Color.SECONDARY_1,
-  "button-clear-color": color.Color.PRIMARY_4,
-  "button-clear-color-hovered": color.Color.PRIMARY_5,
-  "button-clear-color-active": color.Color.PRIMARY_5,
-  "input-primary-border-color": color.Color.BG_3,
-  "input-primary-plaseholder-color": color.Color.BG_2,
-  "checkbox-primary-background-color-checked": color.Color.PRIMARY_4,
-  "checkbox-primary-background-color-hovered": color.Color.PRIMARY_4,
-  "checkbox-primary-box-shadow-focused": color.Color.PRIMARY_1,
-  "checkbox-primary-background-color-active": color.Color.PRIMARY_4,
-  "checkbox-primary-border-color-active": color.Color.PRIMARY_4,
-  "checkbox-primary-box-shadow-active": color.Color.PRIMARY_4,
-  "checkbox-primary-background-color-disabled": color.Color.PRIMARY_1,
-  "inputradio-primary-background-color-checked": color.Color.PRIMARY_4,
-  "inputradio-primary-background-color-hovered": color.Color.PRIMARY_4,
-  "inputradio-primary-box-shadow-focused": color.Color.PRIMARY_1,
-  "inputradio-primary-background-color-focused": color.Color.PRIMARY_1,
-  "inputradio-primary-border-color-focused": color.Color.PRIMARY_1,
-  "switch-primary-background-color": color.Color.BG_2,
-  "switch-primary-border-color": color.Color.BG_2,
-  "switch-primary-background-color-checked": color.Color.PRIMARY_5,
-  "switch-primary-border-color-checked": color.Color.PRIMARY_5
+  "button-primary-color": index.default.WHITE,
+  "button-primary-background-color": index.default.PRIMARY_4,
+  "button-primary-border-color": index.default.PRIMARY_4,
+  "button-primary-color-hovered": index.default.WHITE,
+  "button-primary-background-color-hovered": index.default.PRIMARY_5,
+  "button-primary-border-color-hovered": index.default.PRIMARY_5,
+  "button-primary-color-active": index.default.WHITE,
+  "button-primary-background-color-active": index.default.PRIMARY_5,
+  "button-primary-border-color-active": index.default.PRIMARY_5,
+  "button-primary-color-disabled": index.default.PRIMARY_2,
+  "button-primary-background-color-disabled": index.default.PRIMARY_1,
+  "button-primary-border-color-disabled": index.default.PRIMARY_1,
+  "button-secondary-color": index.default.WHITE,
+  "button-secondary-background-color": index.default.SECONDARY_4,
+  "button-secondary-border-color": index.default.SECONDARY_4,
+  "button-secondary-color-hovered": index.default.WHITE,
+  "button-secondary-background-color-hovered": index.default.SECONDARY_5,
+  "button-secondary-border-color-hovered": index.default.SECONDARY_5,
+  "button-secondary-color-active": index.default.WHITE,
+  "button-secondary-background-color-active": index.default.SECONDARY_5,
+  "button-secondary-border-color-active": index.default.SECONDARY_5,
+  "button-secondary-color-disabled": index.default.SECONDARY_2,
+  "button-secondary-background-color-disabled": index.default.SECONDARY_1,
+  "button-secondary-border-color-disabled": index.default.SECONDARY_1,
+  "button-pseudo-color": index.default.TRETIARY_5,
+  "button-pseudo-background-color": index.default.WHITE,
+  "button-pseudo-border-color": index.default.WHITE,
+  "button-pseudo-color-hovered": index.default.TRETIARY_5,
+  "button-pseudo-background-color-hovered": index.default.TRETIARY_2,
+  "button-pseudo-border-color-hovered": index.default.TRETIARY_2,
+  "button-pseudo-color-active": index.default.TRETIARY_5,
+  "button-pseudo-background-color-active": index.default.TRETIARY_2,
+  "button-pseudo-border-color-active": index.default.TRETIARY_2,
+  "button-pseudo-color-disabled": index.default.SECONDARY_2,
+  "button-pseudo-background-color-disabled": index.default.SECONDARY_1,
+  "button-pseudo-border-color-disabled": index.default.SECONDARY_1,
+  "button-outline-color": index.default.BLACK,
+  "button-outline-background-color": index.default.WHITE,
+  "button-outline-border-color": index.default.BG_3,
+  "button-outline-color-hovered": index.default.BLACK,
+  "button-outline-background-color-hovered": index.default.BG_1,
+  "button-outline-border-color-hovered": index.default.BG_3,
+  "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_2,
+  "button-outline-background-color-disabled": index.default.SECONDARY_1,
+  "button-outline-border-color-disabled": index.default.BG_2,
+  "button-clear-color": index.default.PRIMARY_4,
+  "button-clear-color-hovered": index.default.PRIMARY_5,
+  "button-clear-color-active": index.default.PRIMARY_5,
+  "input-primary-border-color": index.default.BG_3,
+  "input-primary-plaseholder-color": index.default.BG_2,
+  "checkbox-primary-background-color-checked": index.default.PRIMARY_4,
+  "checkbox-primary-background-color-hovered": index.default.PRIMARY_4,
+  "checkbox-primary-box-shadow-focused": index.default.PRIMARY_1,
+  "checkbox-primary-background-color-active": index.default.PRIMARY_4,
+  "checkbox-primary-border-color-active": index.default.PRIMARY_4,
+  "checkbox-primary-box-shadow-active": index.default.PRIMARY_4,
+  "checkbox-primary-background-color-disabled": index.default.PRIMARY_1,
+  "inputradio-primary-background-color-checked": index.default.PRIMARY_4,
+  "inputradio-primary-background-color-hovered": index.default.PRIMARY_4,
+  "inputradio-primary-box-shadow-focused": index.default.PRIMARY_1,
+  "inputradio-primary-background-color-focused": index.default.PRIMARY_1,
+  "inputradio-primary-border-color-focused": index.default.PRIMARY_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_5,
+  "switch-primary-border-color-checked": index.default.PRIMARY_5
 };
 
 exports.default = THEME_DEFAULT;

package/TimeSelect/Label/index.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+type OptionLabelProps = {
+    time: string;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+};
+declare const OptionLabel: FC<OptionLabelProps>;
+export default OptionLabel;

package/TimeSelect/helpers.d.ts

@@ -0,0 +1,7 @@
+import type { Timestamp } from "./index.props";
+export declare const DEFAULT_TIME: {
+    index: number;
+    time: string;
+};
+export declare const formatTime: (date: Date) => string;
+export declare const generateSuggest: (interval?: number) => Timestamp[];

package/TimeSelect/index.d.ts

@@ -0,0 +1,7 @@
+import type { SelectProps } from "../Select/index.props";
+import type { FC } from "react";
+interface TimeSelectProps extends SelectProps<string> {
+    interval?: 5 | 10 | 15 | 30;
+}
+declare const TimeSelect: FC<TimeSelectProps>;
+export default TimeSelect;

package/TimeSelect/index.props.d.ts

@@ -0,0 +1,4 @@
+export type Timestamp = {
+    time: string;
+    disabled?: boolean;
+};

package/TimeSelect/package.json

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

package/Typography/Typography.module.css

@@ -43,13 +43,13 @@
   line-height: 16px;
 }
 
-.fontWeight_normal {
+.font-weight_normal {
   font-weight: 400;
 }
-.fontWeight_medium {
+.font-weight_medium {
   font-weight: 500;
 }
-.fontWeight_bold {
+.font-weight_bold {
   font-weight: 700;
 }
 

package/Typography/index.d.ts

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

package/Typography/index.js

@@ -14,7 +14,7 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var Typography = function Typography(_a) {
+var Typography = /*#__PURE__*/React.forwardRef(function (_a) {
   var _b;
   var _c = _a.tag,
     Element = _c === void 0 ? "span" : _c,
@@ -29,8 +29,8 @@ var Typography = function Typography(_a) {
     style: style,
     className: clx((_b = {
       root: true
-    }, _b["size_".concat(size)] = !!size, _b["fontWeight_".concat(fontWeight)] = !!fontWeight, _b["variant_".concat(variant)] = !!variant, _b), className)
+    }, _b["size_".concat(size)] = !!size, _b["font-weight_".concat(fontWeight)] = !!fontWeight, _b["variant_".concat(variant)] = !!variant, _b), className)
   }), children);
-};
+});
 
 exports.default = Typography;

package/Typography/index.props.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 export type TypographyVariant = "alert" | "success" | "secondary";
 export type TypographyFontWeight = "normal" | "medium" | "bold";
 export type TypographySize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
@@ -10,4 +10,5 @@ export type Props = {
     size?: TypographySize;
     fontWeight?: TypographyFontWeight;
     style?: CSSProperties;
+    children?: ReactNode;
 };

package/base/BaseInput/BaseInput.module.css

@@ -1,12 +1,12 @@
-.baseInput {
-  margin: 7px 0;
+.base-input {
   background: transparent;
   border: none;
-  outline: none;
   flex: 1;
+  margin: 7px 0;
+  outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.baseInput ::placeholder {
+.base-input ::placeholder {
   color: var(--palette-bg-2);
 }

package/base/BaseInput/index.js

@@ -21,7 +21,7 @@ var BaseInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
-    className: classNames__default.default(styles__default.default.baseInput, className),
+    className: classNames__default.default(styles__default.default["base-input"], className),
     onChange: onChangeHandler,
     ref: ref
   }, props));

package/base/InputRoot/InputRoot.module.css

@@ -1,40 +1,42 @@
-.baseIcon {
-  display: inline-flex;
+.base-icon {
   align-items: center;
-  font-size: 16px;
   color: inherit;
+  display: inline-flex;
+  font-size: 16px;
 }
 
-.baseDisableWrapper {
-  position: absolute;
+.base-disable-wrapper {
+  cursor: not-allowed;
+  height: 100%;
   left: 0;
+  position: absolute;
   right: 0;
   width: 100%;
-  height: 100%;
-  cursor: not-allowed;
 }
 
 .root {
+  align-items: center;
   background-color: var(--palette-white);
-  color: var(--palette-black);
-  position: relative;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
   box-sizing: border-box;
-  overflow: hidden;
+  color: var(--palette-black);
   display: inline-flex;
-  align-items: center;
   gap: 8px;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
+  overflow: hidden;
   padding: 5px 10px;
+  position: relative;
 }
 
 .variant_primary {
   border-color: var(--input-primary-border-color);
+  box-shadow: none;
+  transition: box-shadow 0.2s ease-in, box-shadow 0.1s ease-out;
 }
 .variant_primary:hover {
   border-color: var(--palette-primary-3);
-  box-shadow: 0px 0px 0px 2px var(--palette-primary-2);
+  box-shadow: 0 0 0 2px var(--palette-primary-2);
 }
 .variant_primary:active {
   border-color: var(--palette-primary-4);
@@ -43,11 +45,11 @@
   border-color: var(--palette-primary-4);
 }
 .variant_primary_disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-  color: var(--palette-bg-3);
   background-color: var(--palette-bg-1);
   border-color: var(--palette-bg-3);
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 .variant_primary_error {
   background-color: var(--palette-tretiary-2);
@@ -56,11 +58,11 @@
 .variant_primary_error:hover {
   background-color: var(--palette-white);
   border-color: var(--palette-alert);
-  box-shadow: 0px 0px 0px 2px var(--palette-tretiary-2);
+  box-shadow: 0 0 0 2px var(--palette-tretiary-2);
 }
 .variant_primary_error:focus, .variant_primary_error:focus-within {
-  border-color: var(--palette-alert);
   background-color: var(--palette-white);
+  border-color: var(--palette-alert);
 }
 
 .size_s {

package/base/InputRoot/index.js

@@ -27,12 +27,12 @@ var InputRoot = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: ref,
     className: clx(styles__default.default.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
-  }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.baseIcon)
-  }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.baseIcon)
+  }, startIcon && ( /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default["base-icon"])
+  }, startIcon)), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default["base-icon"])
   }, endIcon), disabled && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.baseDisableWrapper)
+    className: clx(styles__default.default["base-disable-wrapper"])
   }));
 });
 

package/esm/Badge/Badge.module.css

@@ -1,30 +1,28 @@
 .root {
-  position: absolute;
-  z-index: 1;
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
   align-items: center;
+  background-color: var(--palette-brand-default-1);
+  border-radius: 10px;
   box-sizing: border-box;
-  min-width: 20px;
+  color: var(--palette-white);
+  display: flex;
+  flex-flow: row wrap;
+  font-size: 12px;
   height: 20px;
+  min-width: 20px;
   padding: 0 4px;
-  font-size: 12px;
-  border-radius: 10px;
-  background-color: var(--palette-brand-default-1);
-  color: var(--palette-white);
+  place-content: center center;
+  position: absolute;
+  user-select: none;
+  z-index: 1;
 }
 .root_direction_right {
-  top: 0;
   right: 0;
+  top: 0;
   transform: scale(1) translate(60%, -50%);
 }
 .root_direction_left {
-  top: 0;
   left: 0;
+  top: 0;
   transform: scale(1) translate(-60%, -50%);
 }
 .root_invisible {

package/esm/Badge/Control/Control.module.css

@@ -1,6 +1,6 @@
 .root {
-  position: relative;
   display: inline-flex;
   flex-shrink: 0;
+  position: relative;
   vertical-align: middle;
 }

package/esm/Badge/Control/index.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames';
 import styles from './Control.module.css';
 
@@ -7,7 +7,7 @@ var BadgeControl = function BadgeControl(_a) {
   var className = _a.className,
     children = _a.children,
     props = __rest(_a, ["className", "children"]);
-  return /*#__PURE__*/React.createElement("span", __assign({
+  return /*#__PURE__*/React__default.createElement("span", __assign({
     className: classNames(styles.root, className)
   }, props), children);
 };

package/esm/Badge/index.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames/bind';
 import { BadgeControl } from './Control/index.js';
 import styles from './Badge.module.css';
@@ -28,7 +28,7 @@ var Badge = function Badge(_a) {
   if (content) {
     displayValue = content > max ? "".concat(max, "+") : content;
   }
-  return /*#__PURE__*/React.createElement(BadgeControl, __assign({}, props), children, /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React__default.createElement(BadgeControl, __assign({}, props), children, /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: color,
       backgroundColor: background