colibri-ui 0.8.1 → 0.8.3

package/Checkbox/Checkbox.module.css

@@ -0,0 +1,89 @@
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  cursor: pointer;
+  display: inline-flex;
+  line-height: 18px;
+  position: relative;
+}
+
+.text {
+  font-size: 16px;
+  margin-block-start: -1px;
+  margin-inline-start: 8px;
+}
+
+.fake-checkbox {
+  background-color: var(--palette-white);
+  block-size: 16px;
+  border: 1px solid var(--palette-bg-3);
+  border-radius: 4px;
+  box-sizing: border-box;
+  direction: ltr;
+  display: block;
+  flex-shrink: 0;
+  inline-size: 16px;
+  position: relative;
+  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.checked {
+  background-color: var(--checkbox-bg-checked);
+  border: 0;
+}
+.checked::after {
+  block-size: 8px;
+  border-block-end: 2px solid var(--palette-black);
+  border-inline-end: 2px solid var(--palette-black);
+  box-sizing: content-box;
+  content: "";
+  display: block;
+  inline-size: 4px;
+  inset-block-start: 45%;
+  inset-inline-start: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.variant_primary_error {
+  border-color: var(--palette-alert);
+  box-shadow: 0 0 0 2px var(--palette-alert);
+}
+.variant_primary_checked::after {
+  border-block-end: 2px solid var(--palette-black);
+  border-inline-end: 2px solid var(--palette-black);
+}
+
+.control {
+  inset-inline-start: -9999px;
+  position: absolute;
+}
+.control:disabled + .fake-checkbox::after {
+  border-block-end: 2px solid var(--palette-bg-4);
+  border-inline-end: 2px solid var(--palette-bg-4);
+}
+.control:hover:not(:disabled) + .fake-checkbox {
+  border-color: var(--palette-bg-3);
+}
+
+.control_variant_primary {
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.control_variant_primary:focus:not(:disabled) + .fake-checkbox {
+  box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
+}
+.control_variant_primary:disabled + .fake-checkbox {
+  background-color: var(--checkbox-bg-disabled);
+  z-index: 1;
+}
+.control_variant_primary:hover:not(:disabled) + .fake-checkbox {
+  background-color: var(--checkbox-bg-hovered);
+}
+.control_variant_primary:active:not(:disabled) + .fake-checkbox {
+  background-color: var(--checkbox-bg-active);
+  border-color: var(--checkbox-border-color-active);
+  box-shadow: var(--checkbox-box-shadow-active);
+}

package/Checkbox/index.d.ts

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

package/Checkbox/index.js

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../Typography/index.js');
+var styles = require('./Checkbox.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 Checkbox = function Checkbox(_a) {
+  var _b;
+  var id = _a.id,
+    name = _a.name,
+    value = _a.value,
+    label = _a.label,
+    hint = _a.hint,
+    checked = _a.checked,
+    onChange = _a.onChange,
+    onFocus = _a.onFocus,
+    onBlur = _a.onBlur,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
+    className = _a.className,
+    disabled = _a.disabled,
+    hasError = _a.hasError;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root)
+  }, /*#__PURE__*/React__default.default.createElement("label", {
+    className: clx(styles__default.default.label),
+    htmlFor: id
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clx(styles__default.default.control, styles__default.default["control_variant_".concat(variant)], className),
+    type: "checkbox",
+    id: id,
+    name: name,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default["fake-checkbox"], styles__default.default["variant_".concat(variant)], (_b = {}, _b[styles__default.default["variant_".concat(variant, "_disabled")]] = disabled, _b[styles__default.default["variant_".concat(variant, "_error")]] = hasError, _b[styles__default.default["variant_".concat(variant, "_checked")]] = checked, _b[styles__default.default.checked] = checked, _b))
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.text)
+  }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: hasError ? "alert" : "secondary",
+    tag: "span"
+  }, hint)));
+};
+
+exports.default = Checkbox;

package/Checkbox/index.props.d.ts

@@ -0,0 +1,17 @@
+import type { FocusEvent, ChangeEvent, ReactNode } from "react";
+export interface CheckboxProps {
+    checked?: boolean;
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    hint?: ReactNode;
+    id?: string;
+    label?: ReactNode;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    size?: "s" | "m" | "l";
+    value?: string | number;
+    variant?: "primary";
+}

package/Checkbox/package.json

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

package/Chip/Chip.module.css

@@ -0,0 +1,83 @@
+.chip {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.inner {
+  box-sizing: border-box;
+  display: flex;
+  font: inherit;
+  min-width: 0;
+  place-items: stretch flex-start;
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+}
+.inner_active {
+  background: var(--palette-bg-1);
+}
+.inner_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.inner_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  transform: translateY(-2px);
+}
+.inner_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .inner_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+    transform: translateY(0);
+  }
+  .inner_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.inner[data-size=s] {
+  border-radius: 32px;
+  font-size: 0.875rem;
+  line-height: 2.2;
+}
+.inner[data-size=m] {
+  border-radius: 36px;
+  font-size: 1rem;
+  line-height: 2.3;
+}
+.inner[data-size=l] {
+  border-radius: 44px;
+  font-size: 1.15rem;
+  line-height: 2.4;
+}
+
+.content {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  max-width: 200px;
+  padding: 0 1rem;
+  user-select: none;
+}
+
+.content-inner {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.icon-right {
+  align-items: center;
+  color: var(--palette-bg-5);
+  display: flex;
+  justify-content: center;
+  margin-left: -11px;
+  padding-right: 0.8rem;
+}
+.icon-right:hover {
+  color: var(--palette-black);
+}

package/Chip/index.d.ts

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

package/Chip/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Chip.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 Chip = function Chip(_a) {
+  var children = _a.children,
+    iconEnd = _a.iconEnd,
+    isActive = _a.isActive,
+    onClick = _a.onClick,
+    onClickIcon = _a.onClickIcon,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    _c = _a.testID,
+    testID = _c === void 0 ? "chip" : _c,
+    props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
+  return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
+    className: clx("chip"),
+    "data-testid": testID
+  }, props), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("inner", {
+      inner_active: iconEnd || isActive,
+      inner_inactive: !iconEnd && !isActive
+    }),
+    "data-size": size
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("content"),
+    "aria-pressed": isActive,
+    role: "button",
+    tabIndex: 0,
+    onClick: onClick
+  }, /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("content-inner")
+  }, children)), iconEnd && (
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React__default.default.createElement("span", {
+    className: clx("icon-right"),
+    role: "button",
+    tabIndex: 0,
+    onClick: onClickIcon
+  }, iconEnd))));
+};
+
+exports.default = Chip;

package/Chip/index.props.d.ts

@@ -0,0 +1,10 @@
+type Size = "s" | "m" | "l";
+export type ChipProps = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconEnd?: React.ReactNode;
+    onClick?: () => void;
+    onClickIcon?: () => void;
+};
+export {};

package/Chip/package.json

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

package/ClickOutside/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC, PropsWithChildren } from "react";
+declare const ClickOutside: FC<PropsWithChildren<{
+    onClick: (e: MouseEvent | TouchEvent) => void;
+}>>;
+export default ClickOutside;

package/ClickOutside/index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _typeof = require('@babel/runtime/helpers/typeof');
+var React = require('react');
+var index = require('../hooks/useOnClickOutside/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _typeof__default = /*#__PURE__*/_interopDefault(_typeof);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var ClickOutside = function ClickOutside(_a) {
+  var children = _a.children,
+    onClick = _a.onClick;
+  var childRef = React.useRef();
+  index.default(childRef, onClick);
+  if (! /*#__PURE__*/React__default.default.isValidElement(children)) return null;
+  var combinedRef = function combinedRef(node) {
+    childRef.current = node;
+    if (/*#__PURE__*/React__default.default.isValidElement(children) && "ref" in children.props) {
+      var childRefProp = children.props.ref;
+      if (typeof childRefProp === "function") {
+        childRefProp(node);
+      } else if (childRefProp && _typeof__default.default(childRefProp) === "object") {
+        childRefProp.current = node;
+      }
+    }
+  };
+  return /*#__PURE__*/React.cloneElement(children, {
+    ref: combinedRef
+  });
+};
+
+exports.default = ClickOutside;

package/ClickOutside/package.json

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

package/{src/components/Counter/Counter.module.scss → Counter/Counter.module.css}

@@ -9,10 +9,9 @@
   min-inline-size: 96px;
   overflow: hidden;
   position: relative;
-
-  &_fullWidth {
-    inline-size: 100%;
-  }
+}
+.root_fullWidth {
+  inline-size: 100%;
 }
 
 .control {
@@ -21,10 +20,9 @@
   display: flex;
   gap: 4px;
   justify-content: space-between;
-
-  &_fullWidth {
-    inline-size: 100%;
-  }
+}
+.control_fullWidth {
+  inline-size: 100%;
 }
 
 .value {
@@ -33,4 +31,4 @@
   inline-size: 24px;
   text-align: center;
   user-select: none;
-}
+}

package/Counter/index.d.ts

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

package/Counter/index.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../Button/index.js');
+var Minus = require('../Icons/Minus.js');
+var Plus = require('../Icons/Plus.js');
+var styles = require('./Counter.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 Counter = function Counter(_a) {
+  var _b = _a.value,
+    value = _b === void 0 ? 1 : _b,
+    max = _a.max,
+    _c = _a.min,
+    min = _c === void 0 ? 0 : _c,
+    fullWidth = _a.fullWidth,
+    onChange = _a.onChange,
+    disabled = _a.disabled,
+    className = _a.className;
+  var lastNumValue = React.useRef(value);
+  var minusDisabled = disabled || value <= min;
+  var plusDisabled = disabled || value >= max;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root, {
+      root_fullWidth: fullWidth ? 1 : 0
+    }, className)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.control, {
+      control_fullWidth: fullWidth ? 1 : 0
+    })
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    icon: /*#__PURE__*/React__default.default.createElement(Minus.default, {
+      width: 16,
+      height: 16
+    }),
+    disabled: minusDisabled,
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onChange(value - 1);
+      lastNumValue.current = value - 1;
+    },
+    "aria-label": "decrease"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.value)
+  }, value), /*#__PURE__*/React__default.default.createElement(index.default, {
+    icon: /*#__PURE__*/React__default.default.createElement(Plus.default, {
+      width: 16,
+      height: 16
+    }),
+    disabled: plusDisabled,
+    type: "button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onChange(value + 1);
+      lastNumValue.current = value + 1;
+    },
+    "aria-label": "increase"
+  })));
+};
+
+exports.default = Counter;

package/Counter/index.props.d.ts

@@ -0,0 +1,9 @@
+export type CounterProps = {
+    value: number;
+    max: number;
+    min: number;
+    fullWidth?: boolean;
+    onChange: (value: number) => void;
+    disabled?: boolean;
+    className?: string;
+};

package/Counter/package.json

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

package/{src/components/Datepicker/Datepicker.module.scss → Datepicker/Datepicker.module.css}

@@ -1,4 +1,4 @@
 .root {
   display: flex;
   font-size: 14px;
-}
+}

package/Datepicker/components/DatePicker/index.d.ts

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

package/Datepicker/components/DatePicker/index.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Dropdown/index.js');
+var index$1 = require('../../../Calendar/index.js');
+var index$2 = require('../../../helpers/date/index.js');
+var styles = require('./index.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 CalendarIcon = function CalendarIcon() {
+  return /*#__PURE__*/React__default.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: clx("calendar-icon"),
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
+  }));
+};
+var DatePicker = function DatePicker(_a) {
+  var className = _a.className,
+    _b = _a.selectedDate,
+    selectedDate = _b === void 0 ? "" : _b,
+    onChangeDate = _a.onChangeDate;
+  var _c = React.useState(selectedDate),
+    date = _c[0],
+    setDate = _c[1];
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  var handleDateChange = function handleDateChange(_a) {
+    var date = _a.date;
+    setDate(date);
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(date);
+  };
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    placement: "bottom",
+    fontSize: 14,
+    trigger: ["click"],
+    overlay: /*#__PURE__*/React__default.default.createElement(index$1.default, {
+      minWidth: 260,
+      className: clx("calendar", className),
+      today: index$2.toISODate(new Date()),
+      titleSize: "h5",
+      selectedDate: date,
+      onChange: handleDateChange
+    })
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("input-container", "input-date", className)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clx("input-field"),
+    tabIndex: 0,
+    "aria-expanded": "false",
+    "aria-haspopup": "true",
+    "aria-invalid": "false",
+    autoComplete: "off",
+    maxLength: 7,
+    readOnly: true,
+    value: index$2.toDMYDate(date)
+  }), /*#__PURE__*/React__default.default.createElement(CalendarIcon, null)));
+};
+
+exports.default = DatePicker;

package/{src/components/Datepicker/components/DatePicker/index.module.scss → Datepicker/components/DatePicker/index.module.css}

@@ -4,7 +4,6 @@
   justify-content: center;
   height: 36px;
   box-sizing: border-box;
-
   border: 1px solid var(--palette-bg-3);
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -16,7 +15,6 @@
   height: 100%;
   padding: 4px;
   text-align: center;
-
   background: transparent;
   border: none;
   outline: none;

package/Datepicker/components/DatePicker/index.props.d.ts

@@ -0,0 +1,5 @@
+export type DatePickerProps = {
+    className?: string;
+    selectedDate?: string;
+    onChangeDate?: (date: string) => void;
+};

package/Datepicker/components/TimePicker/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/Datepicker/components/TimePicker/Label/index.js

@@ -0,0 +1,27 @@
+'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__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.default.createElement("span", {
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      ref: ref
+    }, time)
+  );
+};
+
+exports.default = OptionLabel;