bianic-ui 2.6.0-beta.0 → 2.6.0-beta.4

package/dist/cjs/types/components/Avatar/Avatar.d.ts

@@ -2,9 +2,12 @@ import React, { ComponentPropsWithoutRef } from 'react';
 export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     variant?: 'image' | 'picture' | 'initial';
+    imageSrc: string;
     name?: string;
+    bgColor?: string;
+    outlineColor?: string;
 }
-declare function Avatar({ size, variant, name, }: AvatarProps): React.JSX.Element | null;
+declare function Avatar({ size, variant, name, bgColor, outlineColor, className, }: AvatarProps): React.JSX.Element | null;
 declare namespace Avatar {
     var defaultProps: {
         name: string;

package/dist/esm/index.js

@@ -559,30 +559,30 @@ Button.defaultProps = {
 
 var AvatarConfig = {
     sm: {
-        picture: 'w-[24px] h-[24px] rounded-[12px] border-[1px] border-bia-coolgrey-light-90',
+        picture: 'w-[24px] h-[24px] rounded-[12px] border-[1px] ',
         'no picture': 'font-semibold text-[12px] leading-[15.96px] text-primary-white flex items-center',
     },
     md: {
-        picture: 'w-[36px] h-[36px] rounded-[18px] border-[1px] border-bia-coolgrey-light-90',
+        picture: 'w-[36px] h-[36px] rounded-[18px] border-[1px] ',
         'no picture': 'font-semibold text-[14px] leading-[18.62px] text-primary-white flex items-center',
     },
     lg: {
-        picture: 'w-[52px] h-[52px] rounded-[26px] border-[2px] border-bia-coolgrey-light-90',
+        picture: 'w-[52px] h-[52px] rounded-[26px] border-[2px]',
         'no picture': 'font-semibold text-[24px] leading-[31.92px] text-primary-white flex items-center',
     },
     xl: {
-        picture: 'w-[92px] h-[92px] rounded-[46px] border-[3px] border-bia-coolgrey-light-90',
+        picture: 'w-[92px] h-[92px] rounded-[46px] border-[3px]',
         'no picture': 'font-semibold text-[36px] leading-[47.88px] text-primary-white flex items-center',
     },
     xxl: {
-        picture: 'w-[160px] h-[160px] rounded-[80px] border-[5px] border-bia-coolgrey-light-90',
+        picture: 'w-[160px] h-[160px] rounded-[80px] border-[5px]',
         'no picture': 'font-semibold text-[64px] leading-[85.13px] text-primary-white flex items-center',
     },
 };
 
 function Avatar(_a) {
     var _b, _c, _d, _e;
-    var _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.variant, variant = _g === void 0 ? 'initial' : _g, _h = _a.name, name = _h === void 0 ? 'Test' : _h;
+    var _f = _a.size, size = _f === void 0 ? 'md' : _f, _g = _a.variant, variant = _g === void 0 ? 'initial' : _g, _h = _a.name, name = _h === void 0 ? 'Test' : _h, _j = _a.bgColor, bgColor = _j === void 0 ? 'bia-sky-dark-40' : _j, _k = _a.outlineColor, outlineColor = _k === void 0 ? 'bia-coolgrey' : _k, className = _a.className;
     var getInitials = function (initial) {
         if (!initial)
             return '';
@@ -597,14 +597,14 @@ function Avatar(_a) {
     var avatarResult = null;
     switch (usedVariant) {
         case 'picture':
-            avatarResult = (React.createElement("img", { src: "https://img.freepik.com/free-psd/girl-avatar-emoji-3d-icon_23-2150579870.jpg", alt: "avatar", className: "".concat((_b = AvatarConfig[usedSize]) === null || _b === void 0 ? void 0 : _b.picture) }));
+            avatarResult = (React.createElement("img", { src: "https://img.freepik.com/free-psd/girl-avatar-emoji-3d-icon_23-2150579870.jpg", alt: "avatar", className: "".concat((_b = AvatarConfig[usedSize]) === null || _b === void 0 ? void 0 : _b.picture, " ").concat(className) }));
             break;
         case 'initial':
-            avatarResult = (React.createElement("div", { className: "".concat((_c = AvatarConfig[usedSize]) === null || _c === void 0 ? void 0 : _c.picture, " flex items-center justify-center bg-bia-sky") },
+            avatarResult = (React.createElement("div", { className: "".concat((_c = AvatarConfig[usedSize]) === null || _c === void 0 ? void 0 : _c.picture, " flex items-center justify-center border-").concat(outlineColor, " bg-").concat(bgColor, " ").concat(className) },
                 React.createElement("div", { className: "".concat((_d = AvatarConfig[usedSize]) === null || _d === void 0 ? void 0 : _d['no picture']) }, getInitials(name))));
             break;
         case 'image':
-            avatarResult = (React.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", className: "".concat((_e = AvatarConfig[usedSize]) === null || _e === void 0 ? void 0 : _e.picture, " flex items-center justify-center") },
+            avatarResult = (React.createElement("svg", { width: "160", height: "160", viewBox: "0 0 160 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", className: "".concat((_e = AvatarConfig[usedSize]) === null || _e === void 0 ? void 0 : _e.picture, " flex items-center justify-center ").concat(className) },
                 React.createElement("rect", { width: "160", height: "160", fill: "url(#pattern0_9212_4625)" }),
                 React.createElement("defs", null,
                     React.createElement("pattern", { id: "pattern0_9212_4625", patternContentUnits: "objectBoundingBox", width: "1", height: "1" },
@@ -1534,7 +1534,7 @@ var colorConfig$2 = {
 var ButtonApp = function (_a) {
     _a.icon; _a.isNotified; var _c = _a.isActive, isActive = _c === void 0 ? false : _c, disabled = _a.disabled, _d = _a.color, color = _d === void 0 ? 'green' : _d, label = _a.label, extended = _a.extended, rest = __rest(_a, ["icon", "isNotified", "isActive", "disabled", "color", "label", "extended"]);
     var buttonState = isActive ? 'active' : 'default';
-    return (React.createElement("button", __assign({ className: "button-app flex items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$2[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
+    return (React.createElement("button", __assign({ className: "button-app flex max-h-[30px] items-center justify-center px-[10px] pb-[8.3px] pt-[8.5px] font-arial text-size-tiny ".concat(colorConfig$2[color][buttonState], " ").concat(extended), type: "button", disabled: disabled }, rest), label));
 };
 
 var textColorConfig = {