@ayseaistudio/ui-components 3.2.0 → 3.2.2

package/dist/MultipleAvatar/MultipleAvatar.d.ts

@@ -12,7 +12,7 @@ interface Props {
     maxVisible?: number;
     withPlusValue?: boolean;
     plusValue?: string | number;
-    size: "large" | "medium" | "small";
+    size: "large" | "medium" | "small" | "x-small";
     className?: string;
 }
 export declare const MultipleAvatar: {

package/dist/PrimaryButton/PrimaryButton.js

@@ -10,13 +10,16 @@ export const PrimaryButton = ({ text, size, color, status, className, leftIcon,
     });
     return (_jsxs("div", { className: `primary-button ${state.size} ${state.status} ${state.color} ${className}`, "data-primitives-mode": ["black", "blue", "lime", "mauve", "olive"].includes(state.color)
             ? "value"
-            : undefined, onClick: onClick, onMouseLeave: () => {
+            : undefined, onClick: state.status === "disabled" ? undefined : onClick, onMouseLeave: () => {
             dispatch("mouse_leave");
         }, onMouseEnter: () => {
             dispatch("mouse_enter");
         }, children: [leftIcon && (_jsx("span", { className: `${state.size === "small" ? "class icon" : "class-2 icon"}`, children: leftIcon })), text && _jsx("div", { className: "button", children: text }), rightIcon && (_jsx("span", { className: `${state.size === "small" ? "class icon" : "class-2 icon"}`, children: rightIcon }))] }));
 };
 function reducer(state, action) {
+    if (state.status === "disabled") {
+        return state;
+    }
     switch (action) {
         case "mouse_enter":
             return {

package/dist/Profile/Profile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./style.css";
 import { Avatar } from "../Avatar";
-export const Profile = ({ text, subtext, size, className, avatarSize = "medium", avatarColor = "grey", avatarSizeMediumColorClassName, avatarLetter = "AB", }) => {
+export const Profile = ({ text, subtext, size, className, avatarSize, avatarColor = "grey", avatarSizeMediumColorClassName, avatarLetter = "AB", }) => {
     return (_jsxs("div", { className: `profile size-0-${size} ${className}`, children: [_jsx(Avatar, { className: avatarSizeMediumColorClassName, color: avatarColor, letter: avatarLetter, size: avatarSize, status: "default", version: "default" }), text && (_jsxs("div", { className: "texts", children: [_jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }))] }));
 };
 Profile.propTypes = {

package/dist/Profile/style.css

@@ -195,12 +195,12 @@
 
 .profile.size-0-medium .text {
   -webkit-line-clamp: 1;
-  font-family: var(--b1-bold-font-family);
-  font-size: var(--b1-bold-font-size);
-  font-style: var(--b1-bold-font-style);
-  font-weight: var(--b1-bold-font-weight);
-  letter-spacing: var(--b1-bold-letter-spacing);
-  line-height: var(--b1-bold-line-height);
+  font-family: var(--b2-bold-font-family);
+  font-size: var(--b2-bold-font-size);
+  font-style: var(--b2-bold-font-style);
+  font-weight: var(--b2-bold-font-weight);
+  letter-spacing: var(--b2-bold-letter-spacing);
+  line-height: var(--b2-bold-line-height);
   cursor: default;
 }
 
@@ -246,12 +246,12 @@
 }
 
 .profile.size-0-medium .subtext {
-  font-family: var(--b2-medium-font-family);
-  font-size: var(--b2-medium-font-size);
-  font-style: var(--b2-medium-font-style);
-  font-weight: var(--b2-medium-font-weight);
-  letter-spacing: var(--b2-medium-letter-spacing);
-  line-height: var(--b2-medium-line-height);
+  font-family: var(--b3-medium-font-family);
+  font-size: var(--b3-medium-font-size);
+  font-style: var(--b3-medium-font-style);
+  font-weight: var(--b3-medium-font-weight);
+  letter-spacing: var(--b3-medium-letter-spacing);
+  line-height: var(--b3-medium-line-height);
   cursor: default;
 }
 

package/dist/ProfileSelector/ProfileSelector.d.ts

@@ -16,7 +16,7 @@ interface Props {
     subtext?: string;
     avatarLetter?: string;
     avatars?: AvatarData[];
-    multipleAvatarSize?: "large" | "medium" | "small";
+    avatarSize?: "large" | "medium" | "small" | "x-small";
     multipleAvatarClassName?: any;
     multipleAvatarWithPlus?: boolean;
     multipleAvatarPlusValue?: string | number;
@@ -36,7 +36,7 @@ interface Props {
     onClick?: () => void;
 }
 export declare const ProfileSelector: {
-    ({ icon, size, version, className, text, subtext, avatarLetter, avatars, multipleAvatarSize, multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, onClick, }: Props): React.JSX.Element;
+    ({ icon, size, version, className, text, subtext, avatarLetter, avatars, avatarSize, multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, onClick, }: Props): React.JSX.Element;
     propTypes: {
         icon: PropTypes.Requireable<boolean>;
         status: PropTypes.Requireable<string>;

package/dist/ProfileSelector/ProfileSelector.js

@@ -5,7 +5,7 @@ import "./style.css";
 import { IconSelector } from "@tabler/icons-react";
 import { MultipleAvatar } from "../MultipleAvatar";
 import { Profile } from "../Profile/Profile";
-export const ProfileSelector = ({ icon, size, version, className, text, subtext, avatarLetter, avatars, multipleAvatarSize = "large", multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, onClick, }) => {
+export const ProfileSelector = ({ icon, size, version, className, text, subtext, avatarLetter, avatars, avatarSize, multipleAvatarClassName, multipleAvatarWithPlus, multipleAvatarPlusValue, multipleAvatarAvatarColor, multipleAvatarAvatarColor1, multipleAvatarAvatarColor2, multipleAvatarAvatarColor3, multipleAvatarAvatarColor4, multipleAvatarAvatarLetter, multipleAvatarAvatarLetter1, multipleAvatarAvatarLetter2, multipleAvatarAvatarLetter3, multipleAvatarAvatarLetter4, multipleAvatarSizeLargeClassName, multipleAvatarLabelText, multipleAvatarWithFifth, onClick, }) => {
     const [state, dispatch] = useReducer(reducer, {
         status: "default",
         size: size || "large",
@@ -15,14 +15,14 @@ export const ProfileSelector = ({ icon, size, version, className, text, subtext,
             dispatch("mouse_leave");
         }, onMouseEnter: () => {
             dispatch("mouse_enter");
-        }, onClick: onClick, children: [state.version === "single" && (_jsx(Profile, { className: "profile-instance", size: size, subtext: subtext || "Subtext", text: text || "Text", avatarLetter: avatarLetter || "AB", avatarSize: state.size })), state.version === "multiple" && (_jsx(MultipleAvatar, { avatars: avatars ||
+        }, onClick: onClick, children: [state.version === "single" && (_jsx(Profile, { className: "profile-instance", size: avatarSize, subtext: subtext || "Subtext", text: text || "Text", avatarLetter: avatarLetter || "AB", avatarSize: avatarSize })), state.version === "multiple" && (_jsx(MultipleAvatar, { avatars: avatars ||
                     [
                         ...(multipleAvatarAvatarLetter1 && multipleAvatarAvatarColor1 ? [{ letter: multipleAvatarAvatarLetter1, color: multipleAvatarAvatarColor1 }] : []),
                         ...(multipleAvatarAvatarLetter2 && multipleAvatarAvatarColor2 ? [{ letter: multipleAvatarAvatarLetter2, color: multipleAvatarAvatarColor2 }] : []),
                         ...(multipleAvatarAvatarLetter3 && multipleAvatarAvatarColor3 ? [{ letter: multipleAvatarAvatarLetter3, color: multipleAvatarAvatarColor3 }] : []),
                         ...(multipleAvatarAvatarLetter && multipleAvatarAvatarColor ? [{ letter: multipleAvatarAvatarLetter, color: multipleAvatarAvatarColor }] : []),
                         ...(multipleAvatarAvatarLetter4 && multipleAvatarAvatarColor4 ? [{ letter: multipleAvatarAvatarLetter4, color: multipleAvatarAvatarColor4 }] : []),
-                    ], size: multipleAvatarSize, className: multipleAvatarClassName || multipleAvatarSizeLargeClassName, withPlusValue: multipleAvatarWithPlus ?? multipleAvatarWithFifth, plusValue: multipleAvatarPlusValue || multipleAvatarLabelText })), icon && (_jsx(IconSelector, { className: `${state.size === "medium" ? "class-3" : "class-4"}` }))] }));
+                    ], size: avatarSize, className: multipleAvatarClassName || multipleAvatarSizeLargeClassName, withPlusValue: multipleAvatarWithPlus ?? multipleAvatarWithFifth, plusValue: multipleAvatarPlusValue || multipleAvatarLabelText })), icon && (_jsx(IconSelector, { className: `${state.size === "medium" ? "class-3" : "class-4"}` }))] }));
 };
 function reducer(state, action) {
     switch (action) {

package/dist/TabButton/style.css

@@ -123,6 +123,8 @@
 .tab-button.default.left-align .button {
   white-space: nowrap;
   width: fit-content;
+  display: flex;
+  justify-content: flex-start;
 }
 
 .tab-button.large.selected .button {

package/package.json

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