@ayseaistudio/ui-components 2.2.2 → 2.2.4

package/dist/Badge/style.css

@@ -15,7 +15,6 @@
   
   .badge.galliano {
     background-color: #e6c629;
-    top: 180px;
   }
   
   .badge.large {
@@ -23,7 +22,6 @@
     display: flex;
     height: 32px;
     justify-content: center;
-    left: 12px;
     padding: 6px;
     width: 32px;
   }
@@ -33,20 +31,17 @@
     display: flex;
     height: 14px;
     justify-content: center;
-    left: 116px;
     padding: 4px;
     width: 14px;
   }
   
   .badge.XX-small {
     height: 6px;
-    left: 186px;
     width: 6px;
   }
   
   .badge.lime {
     background-color: #b1e635;
-    top: 68px;
   }
   
   .badge.medium {
@@ -54,30 +49,25 @@
     display: flex;
     height: 24px;
     justify-content: center;
-    left: 68px;
     padding: 4px;
     width: 24px;
   }
   
   .badge.grey {
     background-color: #3d3d3d;
-    top: 12px;
   }
   
   .badge.red {
     background-color: #ff6464;
-    top: 124px;
   }
   
   .badge.x-small {
     height: 8px;
-    left: 154px;
     width: 8px;
   }
   
   .badge.green {
     background-color: #6ed184;
-    top: 236px;
   }
   
   .badge.galliano .element {

package/dist/MultipleAvatar/MultipleAvatar.d.ts

@@ -0,0 +1,34 @@
+import PropTypes from "prop-types";
+import "./style.css";
+interface AvatarData {
+    letter: string;
+    color?: "grey" | "blue" | "green" | "red" | "mauve" | "lime" | "zest" | "orange" | "galliano";
+    status?: "active" | "default";
+    version?: "default" | "half";
+}
+interface Props {
+    avatars?: AvatarData[];
+    avatarSize?: "large" | "medium" | "small" | "x-small";
+    maxVisible?: number;
+    withPlusValue?: boolean;
+    plusValue?: string | number;
+    size: "large" | "medium" | "small";
+    className?: string;
+}
+export declare const MultipleAvatar: {
+    ({ avatars, maxVisible, withPlusValue, plusValue, size, className, }: Props): React.JSX.Element;
+    propTypes: {
+        avatars: PropTypes.Requireable<(PropTypes.InferProps<{
+            letter: PropTypes.Validator<string>;
+            color: PropTypes.Requireable<string>;
+            status: PropTypes.Requireable<string>;
+            version: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        maxVisible: PropTypes.Requireable<number>;
+        withPlusValue: PropTypes.Requireable<boolean>;
+        plusValue: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        size: PropTypes.Validator<string>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export {};

package/dist/MultipleAvatar/MultipleAvatar.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./style.css";
+import { Avatar } from "../Avatar";
+import { Label } from "../Label";
+export const MultipleAvatar = ({ avatars, maxVisible = 5, withPlusValue = true, plusValue, size, className = "", }) => {
+    const getAvatarSize = (index) => {
+        if (size === "small")
+            return "x-small";
+        if (size === "large")
+            return index === 0 ? "medium" : "small";
+        return index === 0 ? "small" : "small";
+    };
+    const defaultAvatars = [
+        { letter: "AB", color: "grey", status: "active", version: "default" },
+        { letter: "CD", color: "grey", status: "active", version: "default" },
+        { letter: "EF", color: "grey", status: "active", version: "default" },
+        { letter: "GH", color: "grey", status: "active", version: "default" },
+        { letter: "IJ", color: "grey", status: "active", version: "default" },
+    ];
+    const safeAvatars = avatars || defaultAvatars;
+    const visibleAvatars = safeAvatars.slice(0, maxVisible);
+    const remainingCount = safeAvatars.length - maxVisible;
+    const showPlusValue = withPlusValue && remainingCount > 0;
+    return (_jsxs("div", { className: `multiple-avatar size-2-${size} ${className}`, children: [_jsx("div", { className: "avatars", children: visibleAvatars.map((avatar, index) => (_jsx(Avatar, { className: index === 0 ? "avatar-instance" : "instance-node", color: avatar.color || "grey", letter: avatar.letter, size: getAvatarSize(index), status: avatar.status || "active", version: avatar.version || "default" }, index))) }), showPlusValue && (_jsx(Label, { bold: "on", className: `${size === "small" ? "class-4" : "class-5"}`, color: "black", divClassName: `${size === "small" && "class-3"}`, size: size === "large" ? "medium" : "small", spacing: "on", stroke: "off", text: plusValue ? `+${plusValue}` : `+${remainingCount}`, version: "secondary" }))] }));
+};
+MultipleAvatar.propTypes = {
+    avatars: PropTypes.arrayOf(PropTypes.shape({
+        letter: PropTypes.string.isRequired,
+        color: PropTypes.oneOf(["grey", "blue", "green", "red", "mauve", "lime", "zest", "orange", "galliano"]),
+        status: PropTypes.oneOf(["active", "default"]),
+        version: PropTypes.oneOf(["default", "half"]),
+    })),
+    maxVisible: PropTypes.number,
+    withPlusValue: PropTypes.bool,
+    plusValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    size: PropTypes.oneOf(["large", "medium", "small"]).isRequired,
+    className: PropTypes.string,
+};

package/dist/MultipleAvatar/index.d.ts

@@ -0,0 +1 @@
+export { MultipleAvatar } from "./MultipleAvatar";

package/dist/MultipleAvatar/index.js

@@ -0,0 +1 @@
+export { MultipleAvatar } from "./MultipleAvatar";

package/dist/MultipleAvatar/style.css

@@ -0,0 +1,50 @@
+.multiple-avatar {
+  align-items: center;
+  position: relative;
+}
+
+.multiple-avatar .avatars {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  position: relative;
+}
+
+.multiple-avatar .instance-node {
+  margin-left: -6px !important;
+}
+
+.multiple-avatar .class-3 {
+  margin-bottom: -1.00px !important;
+  margin-top: -3.00px !important;
+}
+
+.multiple-avatar .class-4 {
+  align-self: stretch !important;
+  flex: 0 0 auto !important;
+  left: unset !important;
+  margin-left: -2px !important;
+  top: unset !important;
+}
+
+.multiple-avatar .class-5 {
+  flex: 0 0 auto !important;
+  left: unset !important;
+  margin-left: -2px !important;
+  top: unset !important;
+}
+
+.multiple-avatar.size-2-large {
+  display: flex;
+  width: 173px;
+}
+
+.multiple-avatar.size-2-medium {
+  display: inline-flex;
+}
+
+.multiple-avatar.size-2-small {
+  display: inline-flex;
+  height: 24px;
+}
+

package/dist/ProfileButton/ProfileButton.d.ts

@@ -1,27 +1,34 @@
 import PropTypes from "prop-types";
 import "./style.css";
 interface Props {
-    text?: string;
+    text: string;
     subtext?: string;
     activity?: boolean;
-    size?: "large" | "x-small" | "medium" | "small";
+    size: "large" | "x-small" | "medium" | "small";
     status?: "pressing" | "default";
     className?: any;
-    avatarLetter?: string;
+    avatarSize?: string;
     avatarColor?: string;
+    avatarStatus?: string;
+    avatarSizeLargeColorClassName?: any;
+    avatarLetter?: string;
+    activitySize?: string;
     activityColor?: string;
 }
 export declare const ProfileButton: {
-    ({ text, subtext, activity, size, status, avatarLetter, avatarColor, className, activityColor, }: Props): React.JSX.Element;
+    ({ text, subtext, activity, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }: Props): React.JSX.Element;
     propTypes: {
         text: PropTypes.Requireable<string>;
-        withText: PropTypes.Requireable<boolean>;
         subtext: PropTypes.Requireable<string>;
-        withSubtext: PropTypes.Requireable<boolean>;
-        withAllText: PropTypes.Requireable<boolean>;
         activity: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
+        avatarSize: PropTypes.Requireable<string>;
+        avatarColor: PropTypes.Requireable<string>;
+        avatarStatus: PropTypes.Requireable<string>;
+        avatarLetter: PropTypes.Requireable<string>;
+        activitySize: PropTypes.Requireable<string>;
+        activityColor: PropTypes.Requireable<string>;
     };
 };
 export {};

package/dist/ProfileButton/ProfileButton.js

@@ -3,22 +3,19 @@ import PropTypes from "prop-types";
 import "./style.css";
 import { Avatar } from "../Avatar";
 import { Activity } from "../Activity";
-export const ProfileButton = ({ text, subtext, activity = false, size, status, avatarLetter = "AB", avatarColor = "grey", className, activityColor = "black", }) => {
-    return (_jsxs("div", { className: `profile-button size-0-${size} ${status} ${className}`, children: [_jsx(Avatar, { className: "avatar-instance", color: avatarColor, letter: avatarLetter, size: size === "medium"
-                    ? "medium"
-                    : size === "small"
-                        ? "small"
-                        : size === "x-small"
-                            ? "x-small"
-                            : "large", status: "default", version: "default" }), _jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }), activity && (_jsx(Activity, { className: `${size === "medium" ? "class" : (size === "small") ? "class-2" : size === "x-small" ? "class-3" : "class-4"}`, color: activityColor === "black" || activityColor === "green" || activityColor === "galliano" || activityColor === "red" ? activityColor : undefined, size: "x-small" }))] }));
+export const ProfileButton = ({ text, subtext, activity = false, size, status, className, avatarSize, avatarColor, avatarStatus, avatarSizeLargeColorClassName, avatarLetter, activitySize, activityColor, }) => {
+    return (_jsxs("div", { className: `profile-button size-0-${size} status-0-${status} ${className}`, children: [_jsx(Avatar, { className: avatarSizeLargeColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: avatarStatus, version: "default" }), ["medium", "small", "x-small"].includes(size) && (_jsx("div", { className: "div-wrapper", children: _jsx("div", { className: "text-wrapper", children: avatarLetter }) })), text && subtext && (_jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] })), activity && (_jsx(Activity, { className: `class`, color: activityColor, size: activitySize }))] }));
 };
 ProfileButton.propTypes = {
     text: PropTypes.string,
-    withText: PropTypes.bool,
     subtext: PropTypes.string,
-    withSubtext: PropTypes.bool,
-    withAllText: PropTypes.bool,
     activity: PropTypes.bool,
     size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
     status: PropTypes.oneOf(["pressing", "default"]),
+    avatarSize: PropTypes.string,
+    avatarColor: PropTypes.string,
+    avatarStatus: PropTypes.string,
+    avatarLetter: PropTypes.string,
+    activitySize: PropTypes.string,
+    activityColor: PropTypes.string,
 };

package/dist/ProfileButton/style.css

@@ -3,6 +3,28 @@
   display: inline-flex;
   padding: 4px;
   position: relative;
+  cursor: pointer;
+}
+
+.profile-button .div-wrapper {
+  align-items: center;
+  background-color: #d1d1d1;
+  box-shadow: inset 0px 0px 10px #ffffff40;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.profile-button .text-wrapper {
+  align-items: center;
+  color: #242424b2;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+  white-space: nowrap;
+  width: fit-content;
 }
 
 .profile-button .frame {
@@ -30,33 +52,12 @@
 }
 
 .profile-button .class {
-  left: 29px !important;
-  position: absolute !important;
-  top: 2px !important;
-}
-
-.profile-button .class-2 {
-  left: 24px !important;
   position: absolute !important;
-  top: 2px !important;
-}
-
-.profile-button .class-3 {
-  left: 20px !important;
-  position: absolute !important;
-  top: 2px !important;
-}
-
-.profile-button .class-4 {
-  left: 48px !important;
-  position: absolute !important;
-  top: 2px !important;
 }
 
 .profile-button.size-0-large {
   border-radius: 16px;
   gap: 8px;
-  top: 12px;
 }
 
 .profile-button.size-0-small {
@@ -64,6 +65,7 @@
   gap: 6px;
 }
 
+
 .profile-button.size-0-medium {
   border-radius: 12px;
   gap: 6px;
@@ -74,9 +76,70 @@
   gap: 6px;
 }
 
-.profile-button.pressing {
+.profile-button.status-0-pressing {
   background-color: #2424240d;
 }
+
+.profile-button.size-0-x-small .div-wrapper {
+  border-radius: 6px;
+  height: 24px;
+  width: 24px;
+}
+
+.profile-button.size-0-large .div-wrapper {
+  border-radius: 8px;
+  height: 36px;
+  width: 36px;
+}
+
+.profile-button.size-0-medium .div-wrapper {
+  border-radius: 8px;
+  height: 36px;
+  width: 36px;
+}
+
+.profile-button.size-0-small .div-wrapper {
+  border-radius: 8px;
+  height: 28px;
+  width: 28px;
+}
+
+.profile-button.size-0-x-small .text-wrapper {
+  font-family: var(--b3-bold-font-family);
+  font-size: var(--b3-bold-font-size);
+  font-style: var(--b3-bold-font-style);
+  font-weight: var(--b3-bold-font-weight);
+  letter-spacing: var(--b3-bold-letter-spacing);
+  line-height: var(--b3-bold-line-height);
+}
+
+.profile-button.size-0-large .text-wrapper {
+  font-family: var(--b1-black-font-family);
+  font-size: var(--b1-black-font-size);
+  font-style: var(--b1-black-font-style);
+  font-weight: var(--b1-black-font-weight);
+  letter-spacing: var(--b1-black-letter-spacing);
+  line-height: var(--b1-black-line-height);
+}
+
+.profile-button.size-0-medium .text-wrapper {
+  font-family: var(--b1-black-font-family);
+  font-size: var(--b1-black-font-size);
+  font-style: var(--b1-black-font-style);
+  font-weight: var(--b1-black-font-weight);
+  letter-spacing: var(--b1-black-letter-spacing);
+  line-height: var(--b1-black-line-height);
+}
+
+.profile-button.size-0-small .text-wrapper {
+  font-family: var(--b2-black-font-family);
+  font-size: var(--b2-black-font-size);
+  font-style: var(--b2-black-font-style);
+  font-weight: var(--b2-black-font-weight);
+  letter-spacing: var(--b2-black-letter-spacing);
+  line-height: var(--b2-black-line-height);
+}
+
 .profile-button.size-0-x-small .frame {
   height: 24px;
 }

package/dist/TertiaryButton/style.css

@@ -34,7 +34,6 @@
 .tertiary-button .button {
   align-items: center;
   justify-content: center;
-  margin-top: -1.00px;
   position: relative;
   text-align: center;
   white-space: nowrap;

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export { ProfileButton } from "./ProfileButton/ProfileButton";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { Badge } from "./Badge/Badge";
 export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
+export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";

package/dist/index.js

@@ -18,3 +18,4 @@ export { ProfileButton } from "./ProfileButton/ProfileButton";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { Badge } from "./Badge/Badge";
 export { CalendarYearDay } from "./CalendarYearDay/CalendarYearDay";
+export { MultipleAvatar } from "./MultipleAvatar/MultipleAvatar";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ayseaistudio/ui-components",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",