@ayseaistudio/ui-components 3.5.2 → 3.5.3

package/README.md

@@ -10,7 +10,7 @@ Includes ready-to-use components like buttons and other UI elements.
 Install the package in your React project:
 
 ```bash
-npm install @ayseaistudio/ui-components
+npm install @ayseaistudio/ui-components@latest
 ```
 
 If you encounter a React version conflict, use:

package/dist/Avatar/Avatar.d.ts

@@ -2,6 +2,7 @@ import PropTypes from "prop-types";
 import "./style.css";
 interface Props {
     letter?: string;
+    image?: string;
     size?: "large" | "xx-small" | "x-small" | "medium" | "small";
     color?: "mauve" | "lime" | "zest" | "grey" | "blue" | "green" | "galliano" | "orange" | "red";
     status?: "active" | "default";
@@ -9,9 +10,10 @@ interface Props {
     className?: any;
 }
 export declare const Avatar: {
-    ({ letter, size, color, status, version, className, }: Props): React.JSX.Element;
+    ({ letter, image, size, color, status, version, className, }: Props): React.JSX.Element;
     propTypes: {
         letter: PropTypes.Requireable<string>;
+        image: PropTypes.Requireable<string>;
         size: PropTypes.Requireable<string>;
         color: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;

package/dist/Avatar/Avatar.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./style.css";
-export const Avatar = ({ letter = "AB", size, color, status, version, className, }) => {
-    return (_jsxs("div", { className: `avatar ${size} ${status} ${version} ${color} ${className}`, children: [version === "half" && _jsx("div", { className: "rectangle" }), _jsx("div", { className: "AB", children: letter })] }));
+export const Avatar = ({ letter = "AB", image, size, color, status, version, className, }) => {
+    return (_jsxs("div", { className: `avatar ${size} ${status} ${version} ${color} ${className}`, style: image ? { backgroundImage: `url(${image})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}, children: [version === "half" && _jsx("div", { className: "rectangle" }), image ? null : _jsx("div", { className: "AB", children: letter })] }));
 };
 Avatar.propTypes = {
     letter: PropTypes.string,
+    image: PropTypes.string,
     size: PropTypes.oneOf(["large", "xx-small", "x-small", "medium", "small"]),
     color: PropTypes.oneOf([
         "mauve",

package/dist/ChatMessage/ChatMessage.d.ts

@@ -8,16 +8,18 @@ interface Props {
     avatarColor?: "grey" | "lime" | "mauve" | "zest" | "blue" | "green" | "galliano" | "orange" | "red";
     timestamp?: string;
     avatarLetter?: string;
+    avatarImage?: string;
     highlighted?: boolean;
     avatarPosition?: "left" | "right";
     showAvatar?: boolean;
 }
 export declare const ChatMessage: {
-    ({ className, divClassName, text, frameClassName, avatarColor, timestamp, avatarLetter, highlighted, avatarPosition, showAvatar, }: Props): React.JSX.Element;
+    ({ className, divClassName, text, frameClassName, avatarColor, timestamp, avatarLetter, avatarImage, highlighted, avatarPosition, showAvatar, }: Props): React.JSX.Element;
     propTypes: {
         hasDiv: PropTypes.Requireable<boolean>;
         text: PropTypes.Requireable<string>;
         avatarColor: PropTypes.Requireable<string>;
+        avatarImage: PropTypes.Requireable<string>;
         showAvatar: PropTypes.Requireable<boolean>;
         avatarPosition: PropTypes.Requireable<string>;
     };

package/dist/ChatMessage/ChatMessage.js

@@ -3,14 +3,16 @@ import PropTypes from "prop-types";
 import "./style.css";
 import { Avatar } from "../Avatar/Avatar";
 import { Label } from "../Label/Label";
-export const ChatMessage = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, highlighted, avatarPosition = "right", showAvatar = true, }) => {
-    const frameElement = (_jsxs("div", { className: `frame-22 ${frameClassName}`, children: [showAvatar && (_jsx(Avatar, { color: avatarColor, letter: avatarLetter, size: "medium", status: "default", version: "default" })), _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" })] }));
-    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [avatarPosition === "left" && frameElement, _jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), avatarPosition === "right" && frameElement] }));
+export const ChatMessage = ({ className, divClassName, text, frameClassName, avatarColor = "lime", timestamp, avatarLetter, avatarImage, highlighted, avatarPosition = "right", showAvatar = true, }) => {
+    const avatarElement = showAvatar && (_jsx("div", { className: `frame-22 ${frameClassName}`, children: _jsx(Avatar, { color: avatarColor, letter: avatarLetter, image: avatarImage, size: "medium", status: "default", version: "default" }) }));
+    const timestampElement = (_jsx("div", { className: `frame-22 ${frameClassName}`, children: _jsx(Label, { bold: "off", className: "label-9", color: "black", size: "small", spacing: "off", stroke: "off", text: timestamp, version: "secondary" }) }));
+    return (_jsxs("div", { className: `chat-message-right ${highlighted ? "highlighted" : ""} ${className}`, children: [avatarPosition === "left" && avatarElement, _jsx("div", { className: "message-baloon", children: _jsx("p", { className: `p ${divClassName}`, children: text }) }), avatarPosition === "right" && avatarElement, timestampElement] }));
 };
 ChatMessage.propTypes = {
     hasDiv: PropTypes.bool,
     text: PropTypes.string,
     avatarColor: PropTypes.string,
+    avatarImage: PropTypes.string,
     showAvatar: PropTypes.bool,
     avatarPosition: PropTypes.oneOf(["left", "right"]),
 };

package/package.json

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