@ayseaistudio/ui-components 3.5.2 → 3.5.4

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/dist/Player/Player.d.ts

@@ -6,18 +6,20 @@ interface Props {
     status: "play" | "pause";
     direction: "horizontal";
     isPlaying?: boolean;
+    isLoading?: boolean;
     togglePlayPause?: () => void;
     className: any;
     audioUrl?: string;
     audioReference: React.Ref<HTMLAudioElement | null>;
 }
 export declare const Player: {
-    ({ withButton, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
+    ({ withButton, size, status, direction, className, isPlaying, isLoading, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
     propTypes: {
         withButton: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;
         status: PropTypes.Requireable<string>;
         direction: PropTypes.Requireable<string>;
+        isLoading: PropTypes.Requireable<boolean>;
         audioUrl: PropTypes.Requireable<string>;
     };
 };

package/dist/Player/Player.js

@@ -4,8 +4,9 @@ import { SingleSlider } from "../SingleSlider";
 import "./style.css";
 import { IconPlayerPlayFilled, IconPlayerPauseFilled } from "@tabler/icons-react";
 import { PrimaryButton } from "../PrimaryButton/PrimaryButton";
+import { Loader } from "../Loader/Loader";
 import { useState, useEffect, useRef } from "react";
-export const Player = ({ withButton = true, size, status, direction, className, isPlaying, togglePlayPause, audioUrl, audioReference }) => {
+export const Player = ({ withButton = true, size, status, direction, className, isPlaying, isLoading = false, togglePlayPause, audioUrl, audioReference }) => {
     const [volume, setVolume] = useState(100);
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(0);
@@ -59,14 +60,13 @@ export const Player = ({ withButton = true, size, status, direction, className,
             setAudioInstance(null);
         };
     }, [audioUrl]);
-    return (_jsxs("div", { className: `player ${className}`, children: [withButton && (_jsx(PrimaryButton, { className: "primary-button", leftIcon: isPlaying ?
-                    _jsx(IconPlayerPauseFilled, { size: 20, color: "#F1F1F1" }) :
-                    _jsx(IconPlayerPlayFilled, { size: 20, color: "#F1F1F1" }), color: "black", onClick: togglePlayPause })), _jsx("div", { className: "player-controls", children: _jsx(SingleSlider, { className: "seek-slider", size: "large", status: "zero", value: currentTime, min: 0, max: duration, onChange: handleSeekChange, rightLabel: _jsxs("span", { className: "slider-time", children: [_jsx("span", { className: "current-time", children: formatTime(currentTime) }), _jsx("span", { children: " / " }), _jsx("span", { className: "total-time", children: formatTime(duration || 0) })] }) }) })] }));
+    return (_jsxs("div", { className: `player ${className}`, children: [withButton && (_jsx(PrimaryButton, { className: "primary-button", leftIcon: isLoading ? (_jsx(Loader, { size: 20 })) : isPlaying ? (_jsx(IconPlayerPauseFilled, { size: 20, color: "#F1F1F1" })) : (_jsx(IconPlayerPlayFilled, { size: 20, color: "#F1F1F1" })), color: "black", onClick: togglePlayPause })), _jsx("div", { className: "player-controls", children: _jsx(SingleSlider, { className: "seek-slider", size: "large", status: "zero", value: currentTime, min: 0, max: duration, onChange: handleSeekChange, rightLabel: _jsxs("span", { className: "slider-time", children: [_jsx("span", { className: "current-time", children: formatTime(currentTime) }), _jsx("span", { children: " / " }), _jsx("span", { className: "total-time", children: formatTime(duration || 0) })] }) }) })] }));
 };
 Player.propTypes = {
     withButton: PropTypes.bool,
     size: PropTypes.oneOf(["large"]),
     status: PropTypes.oneOf(["play"]),
     direction: PropTypes.oneOf(["horizontal"]),
+    isLoading: PropTypes.bool,
     audioUrl: PropTypes.string,
 };

package/package.json

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