colibri-ui 0.8.65 → 0.8.67

package/Card/Card.js

@@ -0,0 +1,70 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styles = require('./Card.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var cx = function cx() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+/** Root card container. */
+var Card = /*#__PURE__*/React.forwardRef(function CardRoot(_a, ref) {
+  var _a$size = _a.size,
+    size = _a$size === void 0 ? "m" : _a$size,
+    _a$view = _a.view,
+    view = _a$view === void 0 ? "default" : _a$view,
+    _a$orientation = _a.orientation,
+    orientation = _a$orientation === void 0 ? "horizontal" : _a$orientation,
+    _a$selected = _a.selected,
+    selected = _a$selected === void 0 ? false : _a$selected,
+    _a$backgroundType = _a.backgroundType,
+    backgroundType = _a$backgroundType === void 0 ? "none" : _a$backgroundType,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["size", "view", "orientation", "selected", "backgroundType", "className", "children"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: cx(styles__default.default.card, styles__default.default[size], styles__default.default[view], styles__default.default[orientation], selected && styles__default.default.selected, backgroundType === "solid" && styles__default.default.solid, className)
+  }), children);
+});
+/** Clipped card area that normally contains media and CardInnerContent. */
+var CardContent = /*#__PURE__*/React.forwardRef(function CardContentRoot(_a, ref) {
+  var aspectRatio = _a.aspectRatio,
+    _a$orientation2 = _a.orientation,
+    orientation = _a$orientation2 === void 0 ? "horizontal" : _a$orientation2,
+    className = _a.className,
+    style = _a.style,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["aspectRatio", "orientation", "className", "style", "children"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: cx(styles__default.default.content, styles__default.default[orientation], className),
+    style: Object.assign(Object.assign({}, style), {
+      aspectRatio: aspectRatio
+    })
+  }), children);
+});
+/** Content layer rendered over an image or another CardContent background. */
+var CardInnerContent = /*#__PURE__*/React.forwardRef(function CardInnerContentRoot(_a, ref) {
+  var _a$orientation3 = _a.orientation,
+    orientation = _a$orientation3 === void 0 ? "horizontal" : _a$orientation3,
+    className = _a.className,
+    children = _a.children,
+    rest = tslib.__rest(_a, ["orientation", "className", "children"]);
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+    ref: ref,
+    className: cx(styles__default.default["inner-content"], styles__default.default[orientation], className)
+  }), children);
+});
+
+exports.Card = Card;
+exports.CardContent = CardContent;
+exports.CardInnerContent = CardInnerContent;

package/Card/Card.module.css

@@ -0,0 +1,90 @@
+.card {
+  --card-outline-width: var(--space-2);
+  --card-border-radius: var(--component-card-radius);
+  --card-content-border-radius: var(--radius-xs);
+  box-sizing: border-box;
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+}
+
+.s {
+  --card-outline-width: var(--space-2);
+  --card-border-radius: var(--radius-md);
+  --card-content-border-radius: var(--radius-xs);
+}
+
+.m {
+  --card-outline-width: var(--space-3);
+  --card-border-radius: var(--component-card-radius);
+  --card-content-border-radius: var(--radius-xs);
+}
+
+.l {
+  --card-outline-width: var(--space-4);
+  --card-border-radius: var(--radius-lg);
+  --card-content-border-radius: var(--radius-sm);
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+.solid {
+  background: var(--component-card-bg);
+  border-radius: var(--card-border-radius);
+  padding: var(--card-outline-width);
+}
+
+.selected::after {
+  border: var(--border-width-hairline) solid var(--color-border-focus);
+  border-radius: var(--card-border-radius);
+  content: "";
+  inset: calc(-1 * var(--border-width-hairline));
+  pointer-events: none;
+  position: absolute;
+  z-index: -1;
+}
+
+.content {
+  border-radius: var(--card-content-border-radius);
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+.card:not(.solid) > .content {
+  border-radius: var(--card-border-radius);
+}
+
+.content.horizontal {
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.content.vertical {
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.inner-content {
+  display: flex;
+  inset: 0;
+  position: absolute;
+  z-index: 1;
+}
+
+.inner-content.horizontal {
+  flex-direction: row;
+}
+
+.inner-content.vertical {
+  flex-direction: column;
+}

package/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card, CardContent, CardInnerContent } from "./Card";
+export type { CardProps, CardContentProps, CardInnerContentProps, CardSize, CardOrientation, CardBackgroundType, } from "./Card";

package/Card/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var Card = require('./Card.js');
+
+
+
+exports.Card = Card.Card;
+exports.CardContent = Card.CardContent;
+exports.CardInnerContent = Card.CardInnerContent;

package/Card/package.json

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

package/Checkbox/Checkbox.module.css

@@ -6,42 +6,47 @@
 .label {
   cursor: pointer;
   display: inline-flex;
-  line-height: 18px;
+  line-height: var(--component-control-line-height);
   position: relative;
 }
 
 .text {
-  font-size: 16px;
-  margin-block-start: -1px;
-  margin-inline-start: 8px;
+  color: var(--component-control-text);
+  font-size: var(--component-control-font-size);
+  margin-block-start: calc(var(--border-width-hairline) * -1);
+  margin-inline-start: var(--space-2);
+}
+
+.hint_error {
+  color: var(--component-control-helper-error);
 }
 
 .fake-checkbox {
-  background-color: var(--palette-white);
-  block-size: 16px;
-  border: 1px solid var(--palette-bg-3);
-  border-radius: 4px;
+  background-color: var(--component-control-bg);
+  block-size: var(--component-control-size);
+  border: var(--border-width-hairline) solid var(--component-control-border);
+  border-radius: var(--radius-xs);
   box-sizing: border-box;
   direction: ltr;
   display: block;
   flex-shrink: 0;
-  inline-size: 16px;
+  inline-size: var(--component-control-size);
   position: relative;
   transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
 .checked {
-  background-color: var(--checkbox-bg-checked);
+  background-color: var(--component-control-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);
+  block-size: var(--component-checkbox-check-block-size);
+  border-block-end: var(--component-checkbox-check-border-width) solid var(--component-control-check);
+  border-inline-end: var(--component-checkbox-check-border-width) solid var(--component-control-check);
   box-sizing: content-box;
   content: "";
   display: block;
-  inline-size: 4px;
+  inline-size: var(--component-checkbox-check-inline-size);
   inset-block-start: 45%;
   inset-inline-start: 50%;
   position: absolute;
@@ -49,41 +54,46 @@
 }
 
 .variant_primary_error {
-  border-color: var(--palette-alert);
-  box-shadow: 0 0 0 2px var(--palette-alert);
+  border-color: var(--component-control-border-error);
 }
 .variant_primary_checked::after {
-  border-block-end: 2px solid var(--palette-black);
-  border-inline-end: 2px solid var(--palette-black);
+  border-block-end: var(--component-checkbox-check-border-width) solid var(--component-control-check);
+  border-inline-end: var(--component-checkbox-check-border-width) solid var(--component-control-check);
 }
 
 .control {
-  inset-inline-start: -9999px;
+  inset-inline-start: var(--component-control-visually-hidden-offset);
   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);
+  border-block-end: var(--component-checkbox-check-border-width) solid var(--component-control-text-disabled);
+  border-inline-end: var(--component-checkbox-check-border-width) solid var(--component-control-text-disabled);
 }
 .control:hover:not(:disabled) + .fake-checkbox {
-  border-color: var(--palette-bg-3);
+  border-color: var(--component-control-border-hover);
 }
 
 .control_variant_primary:focus:not(:disabled) + .fake-checkbox {
-  box-shadow: 0 0 0 2px var(--checkbox-box-shadow-focused);
+  border-color: var(--component-control-border-focus);
+  box-shadow: 0 0 0 var(--focus-ring-width) var(--component-control-focus-ring);
 }
 .control_variant_primary {
   /* stylelint-disable-next-line no-descending-specificity */
 }
 .control_variant_primary:disabled + .fake-checkbox {
-  background-color: var(--checkbox-bg-disabled);
+  background-color: var(--component-control-bg-disabled);
+  border: var(--border-width-hairline) solid var(--component-control-border-disabled);
+  border-color: var(--component-control-border-disabled);
   z-index: 1;
 }
 .control_variant_primary:hover:not(:disabled) + .fake-checkbox {
-  background-color: var(--checkbox-bg-hovered);
+  background-color: var(--component-control-bg-hover);
 }
 .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);
+  background-color: var(--component-control-bg-checked);
+  border-color: var(--component-control-border-checked);
+}
+.control_variant_primary:checked:hover:not(:disabled) + .fake-checkbox {
+  background-color: var(--component-control-bg-checked);
+  border-color: var(--component-control-border-checked);
 }

package/Checkbox/index.js

@@ -51,6 +51,7 @@ var Checkbox = function Checkbox(_ref) {
   }), /*#__PURE__*/React__default.default.createElement("span", {
     className: styles__default.default.text
   }, label)), hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clsx__default.default(_defineProperty__default.default({}, styles__default.default.hint_error, hasError)),
     variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/Chip/Chip.module.css

@@ -5,6 +5,7 @@
 
 .inner {
   box-sizing: border-box;
+  color: var(--component-chip-text);
   display: flex;
   font: inherit;
   min-width: 0;
@@ -14,53 +15,55 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: var(--palette-bg-1);
+  background: var(--component-chip-bg-active);
+  color: var(--component-chip-text-active, var(--component-chip-text));
 }
 .inner_inactive {
-  background: var(--palette-white);
-  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  background: var(--component-chip-bg);
+  box-shadow: var(--shadow-raised);
 }
 .inner_inactive:hover {
-  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
-  transform: translateY(-2px);
+  background: var(--component-chip-bg-hover);
+  box-shadow: var(--shadow-raised);
+  transform: translateY(calc(var(--focus-ring-width) * -1));
 }
 .inner_inactive:active {
-  background: rgba(0, 0, 0, 0.02);
-  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  background: var(--component-chip-bg-pressed);
+  box-shadow: var(--shadow-pressed);
   outline: 0;
   transition-duration: 0.15s;
 }
 @media (hover: none) {
   .inner_inactive:hover {
-    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+    box-shadow: var(--shadow-raised);
     transform: translateY(0);
   }
   .inner_inactive:active {
-    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+    box-shadow: var(--shadow-pressed);
   }
 }
 .inner[data-size=s] {
-  border-radius: 32px;
-  font-size: 0.875rem;
-  line-height: 2.2;
+  border-radius: var(--component-chip-radius);
+  font-size: var(--component-chip-font-size-s);
+  line-height: var(--component-chip-line-height-s);
 }
 .inner[data-size=m] {
-  border-radius: 36px;
-  font-size: 1rem;
-  line-height: 2.3;
+  border-radius: var(--component-chip-radius);
+  font-size: var(--component-chip-font-size-m);
+  line-height: var(--component-chip-line-height-m);
 }
 .inner[data-size=l] {
-  border-radius: 44px;
-  font-size: 1.15rem;
-  line-height: 2.4;
+  border-radius: var(--component-chip-radius);
+  font-size: var(--component-chip-font-size-l);
+  line-height: var(--component-chip-line-height-l);
 }
 
 .content {
   align-items: center;
   display: flex;
   justify-content: flex-start;
-  max-width: 200px;
-  padding: 0 1rem;
+  max-width: var(--component-tooltip-max-width);
+  padding: 0 var(--space-4);
   user-select: none;
 }
 
@@ -72,12 +75,19 @@
 
 .icon-right {
   align-items: center;
-  color: var(--palette-bg-5);
+  color: var(--component-chip-icon);
   display: flex;
   justify-content: center;
-  margin-left: -11px;
-  padding-right: 0.8rem;
+  margin-left: calc(var(--space-3) * -1);
+  padding-right: var(--space-3);
 }
 .icon-right:hover {
-  color: var(--palette-black);
+  color: var(--component-chip-icon-hover);
+}
+
+.inner_active .icon-right {
+  color: var(--component-chip-icon-active, currentcolor);
+}
+.inner_active .icon-right:hover {
+  color: var(--component-chip-icon-active-hover, currentcolor);
 }

package/CodeField/CodeField.d.ts

@@ -0,0 +1,29 @@
+import React, { type Dispatch, type InputHTMLAttributes, type MouseEventHandler, type ReactNode, type SetStateAction } from "react";
+export declare const ONLY_DIGITS_PATTERN = "^\\d+$";
+export declare const ONLY_CHARS_PATTERN = "^[a-zA-Z]+$";
+export declare const ONLY_DIGITS_AND_CHARS_PATTERN = "^[a-zA-Z0-9]+$";
+export type CodeFieldSize = "m" | "l" | "xl";
+export type CodeFieldShape = "default" | "segmented";
+export type ItemErrorBehavior = "remove-symbol" | "keep" | "forbid-enter";
+export type CodeErrorBehavior = "remove-code" | "keep";
+export interface CodeFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onClick" | "size" | "width" | "value"> {
+    value?: string;
+    placeholder?: string;
+    codeLength?: 4 | 5 | 6;
+    caption?: ReactNode;
+    captionAlign?: "left" | "center";
+    width?: string | number;
+    view?: string;
+    shape?: CodeFieldShape;
+    size?: CodeFieldSize;
+    disabled?: boolean;
+    isError?: boolean;
+    setIsError?: Dispatch<SetStateAction<boolean>>;
+    allowedSymbols?: string | RegExp;
+    itemErrorBehavior?: ItemErrorBehavior;
+    codeErrorBehavior?: CodeErrorBehavior;
+    onChange?: (value: string) => void;
+    onFullCodeEnter?: (code: string) => void;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+}
+export declare const CodeField: React.ForwardRefExoticComponent<CodeFieldProps & React.RefAttributes<HTMLInputElement>>;