@ayseaistudio/ui-components 3.5.13 → 3.5.15

package/dist/Player/Player.d.ts

@@ -11,9 +11,10 @@ interface Props {
     className: any;
     audioUrl?: string;
     audioReference: React.Ref<HTMLAudioElement | null>;
+    disabled?: boolean;
 }
 export declare const Player: {
-    ({ withButton, size, status, direction, className, isPlaying, isLoading, togglePlayPause, audioUrl, audioReference }: Props): React.JSX.Element;
+    ({ withButton, size, status, direction, className, isPlaying, isLoading, togglePlayPause, audioUrl, audioReference, disabled }: Props): React.JSX.Element;
     propTypes: {
         withButton: PropTypes.Requireable<boolean>;
         size: PropTypes.Requireable<string>;

package/dist/Player/Player.js

@@ -6,7 +6,7 @@ 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, isLoading = false, togglePlayPause, audioUrl, audioReference }) => {
+export const Player = ({ withButton = true, size, status, direction, className, isPlaying, isLoading = false, togglePlayPause, audioUrl, audioReference, disabled = false }) => {
     const [volume, setVolume] = useState(100);
     const [currentTime, setCurrentTime] = useState(0);
     const [duration, setDuration] = useState(0);
@@ -60,7 +60,7 @@ 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: 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) })] }) }) })] }));
+    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, status: disabled ? "disabled" : "default" })), _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,

package/dist/TertiaryButton/TertiaryButton.js

@@ -8,11 +8,15 @@ export const TertiaryButton = ({ text, leftIcon, rightIcon, size, color, status,
         color: color || "black",
         status: status || "default",
     });
-    return (_jsxs("div", { className: `tertiary-button ${state.size} ${state.color} ${state.status} ${className}`, onClick: onClick, onMouseLeave: () => {
-            dispatch("mouse_leave");
-        }, onMouseEnter: () => {
-            dispatch("mouse_enter");
-        }, children: [leftIcon && _jsx("span", { className: "icon left-icon", children: leftIcon }), text && _jsx("div", { className: "button", children: text }), rightIcon && _jsx("span", { className: "icon right-icon", children: rightIcon })] }));
+    return (_jsxs("div", { className: `tertiary-button ${state.size} ${state.color} ${state.status} ${className}`, onClick: state.status === "disabled" ? undefined : onClick, onMouseLeave: state.status === "disabled"
+            ? undefined
+            : () => {
+                dispatch("mouse_leave");
+            }, onMouseEnter: state.status === "disabled"
+            ? undefined
+            : () => {
+                dispatch("mouse_enter");
+            }, children: [leftIcon && _jsx("span", { className: "icon left-icon", children: leftIcon }), text && _jsx("div", { className: "button", children: text }), rightIcon && _jsx("span", { className: "icon right-icon", children: rightIcon })] }));
 };
 function reducer(state, action) {
     switch (action) {

package/dist/TertiaryButton/style.css

@@ -127,6 +127,14 @@
   color: #b0b0b0;
 }
 
+.tertiary-button.disabled {
+  cursor: default;
+}
+
+.tertiary-button.disabled .icon {
+  color: #b0b0b0;
+}
+
 .tertiary-button.black .button {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1;

package/package.json

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