@moises.ai/design-system 4.14.8 → 4.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.14.8",
+  "version": "4.15.0",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/ListCards/ListCards.jsx

@@ -9,6 +9,7 @@ import {
 } from '@radix-ui/themes'
 import classNames from 'classnames'
 import React from 'react'
+import { SparklesIcon } from '../../icons/SparklesIcon'
 import { ThumbnailPicker } from '../ThumbnailPicker/ThumbnailPicker'
 import styles from './ListCards.module.css'
 
@@ -157,18 +158,20 @@ const CardDetails = ({
       : itemAvatar
 
   return (
-    <div className={classNames(
-      styles.cardWrapper,
-      loading && styles.cardWrapperLoading,
-      disabled && styles.cardWrapperDisabled,
-    )}>
+    <div
+      className={classNames(
+        styles.cardWrapper,
+        loading && styles.cardWrapperLoading,
+        (disabled || loading) && styles.cardWrapperDisabled,
+      )}
+    >
       <RadioCards.Item
         value={itemId}
         className={classNames(
           className,
           styles.listCardsItem,
           loading && styles.listCardsItemLoading,
-          disabled && styles.listCardsItemDisabled,
+          (disabled || loading) && styles.listCardsItemDisabled,
         )}
         style={{
           '--color-surface': 'transparent',
@@ -188,15 +191,16 @@ const CardDetails = ({
             overflow: 'hidden',
           }}
         >
-          {!onAvatarClick && (
-            avatarContent ? (
+          {!onAvatarClick &&
+            (loading ? (
               <div className={styles.listCardsAvatarIcon}>
-                {avatarContent}
+                <SparklesIcon className={styles.loadingIcon} />
               </div>
+            ) : avatarContent ? (
+              <div className={styles.listCardsAvatarIcon}>{avatarContent}</div>
             ) : (
               <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
-            )
-          )}
+            ))}
           <Flex direction="column" justify="center">
             <Text as="div" size="2" className={styles.listCardsItemText}>
               {itemName}

package/src/components/ListCards/ListCards.module.css

@@ -61,6 +61,7 @@
 .listCardsAvatarIcon {
   width: 60px;
   height: 60px;
+  min-width: 60px;
   border-radius: 6px;
   
   background: var(--neutral-alpha-2);
@@ -247,26 +248,57 @@
 }
 
 .listCardsItemLoading {
-  outline: none !important;
+  outline: 1px solid var(--neutral-alpha-4) !important;
+  outline-offset: -1px;
+  pointer-events: none;
+}
+
+.listCardsItemLoading:hover {
+  background-color: transparent !important;
+  outline: 1px solid var(--neutral-alpha-4) !important;
+  outline-offset: -1px;
+}
+
+.loadingIcon {
+  width: 21px;
+  height: 21px;
+  color: var(--neutral-alpha-6);
+  transform: scale(0.619);
+  will-change: transform, color;
+  animation: loadingIconPulse 5s ease-in-out infinite;
+}
+
+@keyframes loadingIconPulse {
+  0%, 100% {
+    transform: scale(0.619);
+    color: var(--neutral-alpha-6);
+  }
+  50% {
+    transform: scale(1);
+    color: var(--accent-10);
+  }
 }
 
 .cardWrapperLoading {
   position: relative;
+  cursor: default;
+  pointer-events: none;
+}
+
+.cardWrapperLoading .customActions {
+  pointer-events: auto;
 }
 
 .cardWrapperLoading::before {
   content: '';
   position: absolute;
-  inset: -1px;
-  border-radius: 9px;
+  inset: 0;
+  border-radius: 8px;
   padding: 1px;
-  background: conic-gradient(
-    from var(--loading-angle, 0deg),
-    transparent 0%,
-    transparent 60%,
-    rgba(25, 228, 241, 0.6) 80%,
-    rgba(25, 228, 241, 1) 90%,
-    transparent 100%
+  background: radial-gradient(
+    circle 200px at var(--loading-x, -50%) 50%,
+    rgba(25, 228, 241, 1) 0%,
+    rgba(25, 228, 241, 0) 100%
   );
   -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
@@ -276,23 +308,38 @@
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
   mask-composite: exclude;
-  animation: listCardsLoadingSweep 2s linear infinite;
+  animation: listCardsShimmer 5s linear infinite;
   pointer-events: none;
   z-index: 1;
 }
 
-@property --loading-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
+.cardWrapperLoading::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+  background: radial-gradient(
+    circle 200px at var(--loading-x, -50%) 50%,
+    rgba(25, 228, 241, 0.15) 0%,
+    rgba(25, 228, 241, 0) 100%
+  );
+  animation: listCardsShimmer 5s linear infinite;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@property --loading-x {
+  syntax: "<percentage>";
+  initial-value: -50%;
   inherits: false;
 }
 
-@keyframes listCardsLoadingSweep {
+@keyframes listCardsShimmer {
   0% {
-    --loading-angle: 0deg;
+    --loading-x: -80%;
   }
   100% {
-    --loading-angle: 360deg;
+    --loading-x: 180%;
   }
 }