@agility/plenum-ui 1.1.6 → 1.1.61

package/lib/index.js

@@ -12227,6 +12227,61 @@ var TreeView = function (_a, ref) {
 };
 var _TreeView = React.forwardRef(TreeView);
 
+/**
+ * Avatar component that shows profile image or name initials of the user
+ */
+var Avatar = function (_a) {
+    var src = _a.src, status = _a.status, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.alt, alt = _c === void 0 ? 'Avatar image' : _c, initials = _a.initials;
+    var imageStyles = cn$1('rounded-full', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var initialsStyles = cn$1('inline-flex items-center justify-center rounded-full bg-gray-500', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var fontStyles = cn$1('font-medium leading-none text-white uppercase', {
+        'text-xs': size === 'xxs' || size === 'xs',
+        'text-sm': size === 'sm',
+        'text-base': size === 'md',
+        'text-lg': size === 'lg',
+        'text-xl': size === 'xl'
+    });
+    var defaultAvatarStyles = cn$1('inline-block rounded-full overflow-hidden bg-gray-100', {
+        'h-6 w-6': size === 'xxs',
+        'h-8 w-8': size === 'xs',
+        'h-10 w-10': size === 'sm',
+        'h-12 w-12': size === 'md',
+        'h-14 w-14': size === 'lg',
+        'h-16 w-16': size === 'xl'
+    });
+    var statusStyles = cn$1('absolute top-0 right-0 block rounded-full ring-2 ring-white', {
+        'h-1.5 w-1.5': size === 'xxs',
+        'h-2 w-2': size === 'xs',
+        'h-2.5 w-2.5': size === 'sm',
+        'h-3 w-3': size === 'md',
+        'h-3.5 w-3.5': size === 'lg',
+        'h-4 w-4': size === 'xl',
+        'bg-gray-300': status === 'offline',
+        'bg-red-400': status === 'busy',
+        'bg-green-400': status === 'online'
+    });
+    return (React__default["default"].createElement("span", { className: "inline-block relative" },
+        src ? (React__default["default"].createElement("img", { className: imageStyles, src: src, alt: alt })) : initials ? (React__default["default"].createElement("span", { className: initialsStyles },
+            React__default["default"].createElement("span", { className: fontStyles }, initials))) : (React__default["default"].createElement("span", { className: defaultAvatarStyles },
+            React__default["default"].createElement("svg", { className: "h-full w-full text-gray-300", fill: "currentColor", viewBox: "0 0 24 24" },
+                React__default["default"].createElement("path", { d: "M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" })))),
+        status && React__default["default"].createElement("span", { className: statusStyles })));
+};
+
 /** Primary UI component for user interaction */
 var InputCounter = function (_a) {
     var _b = _a.current, current = _b === void 0 ? 0 : _b, limit = _a.limit;
@@ -12548,6 +12603,7 @@ var Checkbox = function (_a) {
             message && (React__default["default"].createElement("p", { id: "".concat(id, "-description"), className: "text-gray-500" }, message)))));
 };
 
+exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Combobox = Combobox;