colibri-ui 0.8.1 → 0.8.4

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

@@ -21,10 +21,9 @@
   inline-size: 100%;
   outline: none;
   padding: 0;
-
-  & svg {
-    flex: none;
-  }
+}
+.button svg {
+  flex: none;
 }
 
 .text {
@@ -39,10 +38,9 @@
 
 .chevron {
   transition: transform 0.2s ease-in-out;
-
-  &_open {
-    transform: rotate(180deg);
-  }
+}
+.chevron_open {
+  transform: rotate(180deg);
 }
 
 .line {
@@ -50,4 +48,4 @@
   block-size: 1px;
   flex: 1;
   margin-inline-start: 8px;
-}
+}

package/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import type { FC, ReactNode, PropsWithChildren } from "react";
+type Props = {
+    title: ReactNode;
+    className?: string;
+    boldTitle?: boolean;
+    tabIndex?: number;
+};
+declare const Accordion: FC<PropsWithChildren<Props>>;
+export default Accordion;

package/Accordion/index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+require('../Icons/index.js');
+var index = require('../Typography/index.js');
+var styles = require('./Accordion.module.css');
+var Chevron = require('../Icons/Chevron.js');
+
+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 Accordion = function Accordion(_a) {
+  var title = _a.title,
+    _b = _a.boldTitle,
+    boldTitle = _b === void 0 ? false : _b,
+    children = _a.children,
+    className = _a.className,
+    tabIndex = _a.tabIndex;
+  var _c = React.useState(false),
+    isOpen = _c[0],
+    setIsOpen = _c[1];
+  var contentRef = React.useRef(null);
+  var toggleAccordion = function toggleAccordion() {
+    return setIsOpen(!isOpen);
+  };
+  React.useEffect(function () {
+    if (contentRef.current) {
+      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0px";
+    }
+  }, [isOpen]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("root", className)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("header")
+  }, /*#__PURE__*/React__default.default.createElement("button", {
+    className: clx("button"),
+    onClick: toggleAccordion,
+    type: "button",
+    role: "button",
+    "aria-expanded": isOpen,
+    tabIndex: tabIndex,
+    "aria-label": "Toggle"
+  }, /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+    className: clx("chevron", {
+      chevron_open: isOpen
+    }),
+    width: 20,
+    height: 20
+  }), /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clx("text"),
+    fontWeight: boldTitle ? "bold" : "normal"
+  }, title), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("line")
+  }))), /*#__PURE__*/React__default.default.createElement("div", {
+    ref: contentRef,
+    className: clx("content")
+  }, children));
+};
+
+exports.default = Accordion;

package/Accordion/package.json

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

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

@@ -3,14 +3,14 @@
   cursor: pointer;
   box-sizing: border-box;
   transition: border-color 0.15s ease;
+  object-fit: cover;
 }
 
 .avatar_bordered {
   background-color: var(--palette-white);
   border: 3px solid var(--palette-bg-2);
   padding: 3px;
-
-  &:hover {
-    border-color: var(--palette-bg-4);
-  }
 }
+.avatar_bordered:hover {
+  border-color: var(--palette-bg-4);
+}

package/Avatar/assets/org-circle.svg.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _circle, _mask, _g;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgOrgCircle = function SvgOrgCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 42,
+    fill: "none"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "org-circle_svg__a",
+    width: 42,
+    height: 42,
+    x: 0,
+    y: 0,
+    maskUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 21,
+    cy: 21,
+    r: 21,
+    fill: "#eceef2"
+  }))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
+    mask: "url(#org-circle_svg__a)"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#bcc1cc",
+    fillRule: "evenodd",
+    d: "M19.103 27.36V34H9V12.062L22.567 6v21.36zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732zm0-4.042v1.732h6.64V16.68zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526z",
+    clipRule: "evenodd"
+  }))));
+};
+var orgCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20fill%3D%22none%22%20viewBox%3D%220%200%2042%2042%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3Cmask%20id%3D%22org-circle_svg__a%22%20width%3D%2242%22%20height%3D%2242%22%20x%3D%220%22%20y%3D%220%22%20maskUnits%3D%22userSpaceOnUse%22%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2221%22%20fill%3D%22%23eceef2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23org-circle_svg__a%29%22%3E%3Cpath%20fill%3D%22%23bcc1cc%22%20fill-rule%3D%22evenodd%22%20d%3D%22M19.103%2027.36V34H9V12.062L22.567%206v21.36h-3.464zm-6.64%200v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67%2027.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+exports.ReactComponent = SvgOrgCircle;
+exports.default = orgCircleUrl;

package/Avatar/assets/user-circle.svg.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopNamespace(e) {
+	if (e && e.__esModule) return e;
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SvgUserCircle = function SvgUserCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 42,
+    height: 39,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#ECEEF2",
+    d: "M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714-3.8-3.416-6-8.643-6-14.273C0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887"
+  })));
+};
+var userCircleUrl = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2239%22%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23ECEEF2%22%20fillRule%3D%22evenodd%22%20d%3D%22M33.6%2037.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9%200-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212%200-.1.303-.1.402%200%20.8.905%201.099%201.508%201.9%201.508h1.8c.7%200%203.1-2.111%204.099-4.725.2-.603.4-1.608.5-2.713%200-.1.1-.202.1-.1.1.501.3%201.105.4%201.105.3.201.7-.603%201.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91%200%200%200-.7.302c-.1%200-.2%200-.2-.1%200-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4%200%20.4%200l-.2-1.106c.6-.1%201.1-.603%201.1-.603s-1.6-.402-2.4-1.005c.7-.202%201.117-.957%201.117-.957S27%209.952%2026%209.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6%201.207-1.9%201.909-1.9%202.412-3.1%202.412%201%201.407.5%202.814.5%202.814l-.1%202.112.1.401s0%20.1.1.302c0%20.101%200%20.303.1.402l.3%201.61s-.1.1-.2%200a1.42%201.42%200%200%200-1.2-.604c-.3%200-.8.805-.4%201.91.3.804.6%201.306.9%202.412s.9%201.91%201.2%201.71q.15-.153.3-.906c0-.1.1%200%20.2.102.1%201.004.3%201.908.5%202.411.2.302.4.703.6%201.005-.2%201.709-.4%203.82-.8%205.428-2.6.704-6.6%201.91-10%202.714C2.2%2031.967%200%2026.74%200%2021.11%200%209.45%209.4%200%2021%200s21%209.45%2021%2021.11c0%206.936-3.3%2013.066-8.4%2016.887%22%20clipRule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E";
+
+exports.ReactComponent = SvgUserCircle;
+exports.default = userCircleUrl;

package/Avatar/constants.d.ts

@@ -0,0 +1,7 @@
+export declare enum AvatarSizes {
+    S = 30,
+    M = 34,
+    L = 42,
+    XL = 80,
+    XXL = 96
+}

package/Avatar/constants.js

@@ -0,0 +1,10 @@
+'use strict';
+
+exports.AvatarSizes = void 0;
+(function (AvatarSizes) {
+  AvatarSizes[AvatarSizes["S"] = 30] = "S";
+  AvatarSizes[AvatarSizes["M"] = 34] = "M";
+  AvatarSizes[AvatarSizes["L"] = 42] = "L";
+  AvatarSizes[AvatarSizes["XL"] = 80] = "XL";
+  AvatarSizes[AvatarSizes["XXL"] = 96] = "XXL";
+})(exports.AvatarSizes || (exports.AvatarSizes = {}));

package/Avatar/index.d.ts

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

package/Avatar/index.js

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var constants = require('./constants.js');
+var userCircle = require('./assets/user-circle.svg.js');
+var orgCircle = require('./assets/org-circle.svg.js');
+var styles = require('./Avatar.module.css');
+var index_props = require('./index.props.js');
+
+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 getStubImage = function getStubImage(type) {
+  return type === index_props.AccountType.Organization ? orgCircle.default : userCircle.default;
+};
+var Avatar = /*#__PURE__*/React.memo(function (props) {
+  var avatarURL = props.avatarURL,
+    style = props.style,
+    _a = props.size,
+    size = _a === void 0 ? constants.AvatarSizes.M : _a,
+    className = props.className,
+    bordered = props.bordered,
+    _b = props.alt,
+    alt = _b === void 0 ? "profile image" : _b,
+    _c = props.accountType,
+    accountType = _c === void 0 ? index_props.AccountType.Organization : _c,
+    rest = tslib.__rest(props, ["avatarURL", "style", "size", "className", "bordered", "alt", "accountType"]);
+  var stubImageURL = getStubImage(accountType);
+  return /*#__PURE__*/React__default.default.createElement("img", tslib.__assign({
+    alt: alt,
+    src: avatarURL || stubImageURL,
+    style: tslib.__assign(tslib.__assign({}, style), size ? {
+      width: size,
+      height: size
+    } : {}),
+    className: clx("avatar", {
+      avatar_bordered: !!bordered
+    }, [className])
+  }, rest));
+});
+
+exports.default = Avatar;

package/Avatar/index.props.d.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from "react";
+import type { AvatarSizes } from "./constants";
+export declare enum AccountType {
+    Person = "person",
+    Organization = "org"
+}
+export type AvatarProps = {
+    accountType?: AccountType;
+    style?: CSSProperties;
+    alt?: string;
+    size?: AvatarSizes | number;
+    avatarURL?: string;
+    bordered?: boolean;
+    className?: string;
+};

package/Avatar/index.props.js

@@ -0,0 +1,7 @@
+'use strict';
+
+exports.AccountType = void 0;
+(function (AccountType) {
+  AccountType["Person"] = "person";
+  AccountType["Organization"] = "org";
+})(exports.AccountType || (exports.AccountType = {}));

package/Avatar/package.json

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

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

@@ -14,20 +14,17 @@
   position: absolute;
   user-select: none;
   z-index: 1;
-
-  &_direction_right {
-    right: 0;
-    top: 0;
-    transform: scale(1) translate(60%, -50%);
-  }
-
-  &_direction_left {
-    left: 0;
-    top: 0;
-    transform: scale(1) translate(-60%, -50%);
-  }
-
-  &_invisible {
-    transform: scale(0) translate(50%, -50%);
-  }
 }
+.root_direction_right {
+  right: 0;
+  top: 0;
+  transform: scale(1) translate(60%, -50%);
+}
+.root_direction_left {
+  left: 0;
+  top: 0;
+  transform: scale(1) translate(-60%, -50%);
+}
+.root_invisible {
+  transform: scale(0) translate(50%, -50%);
+}

package/{src/components/Badge/Control/Control.module.scss → Badge/Control/Control.module.css}

@@ -3,4 +3,4 @@
   flex-shrink: 0;
   position: relative;
   vertical-align: middle;
-}
+}

package/Badge/Control/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from "react";
+import type { ControlProps } from "./index.props";
+export declare const BadgeControl: FC<PropsWithChildren<ControlProps>>;

package/Badge/Control/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var styles = require('./Control.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 BadgeControl = function BadgeControl(_a) {
+  var className = _a.className,
+    children = _a.children,
+    props = tslib.__rest(_a, ["className", "children"]);
+  return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
+    className: classNames__default.default(styles__default.default.root, className)
+  }, props), children);
+};
+
+exports.BadgeControl = BadgeControl;

package/{src/components/Badge/Control/index.props.ts → Badge/Control/index.props.d.ts}

@@ -1,3 +1,3 @@
 export interface ControlProps {
-  className?: string;
+    className?: string;
 }

package/Badge/index.d.ts

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

package/Badge/index.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('./Control/index.js');
+var styles = require('./Badge.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 Badge = function Badge(_a) {
+  var _b;
+  var background = _a.background,
+    children = _a.children,
+    className = _a.className,
+    color = _a.color,
+    content = _a.content,
+    _c = _a.direction,
+    direction = _c === void 0 ? "right" : _c,
+    invisibleProp = _a.invisible,
+    _d = _a.max,
+    max = _d === void 0 ? 99 : _d,
+    _e = _a.showZero,
+    showZero = _e === void 0 ? false : _e,
+    props = tslib.__rest(_a, ["background", "children", "className", "color", "content", "direction", "invisible", "max", "showZero"]);
+  var invisible = invisibleProp;
+  if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
+    invisible = true;
+  }
+  var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
+  return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, tslib.__assign({}, props), children, displayValue && (/*#__PURE__*/React__default.default.createElement("span", {
+    className: clx("root", (_b = {}, _b["root_direction_".concat(direction)] = !!direction, _b.root_invisible = invisible, _b), className),
+    "data-testid": "badge",
+    style: {
+      backgroundColor: background,
+      color: color
+    }
+  }, displayValue)));
+};
+
+exports.default = Badge;

package/Badge/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ControlProps } from "./Control/index.props";
+export interface Props extends ControlProps {
+    className?: string;
+    color?: string;
+    background?: string;
+    content?: number;
+    invisible?: boolean;
+    max?: number;
+    showZero?: boolean;
+    direction?: "right" | "left";
+}

package/Badge/package.json

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