@moises.ai/design-system 4.15.9 → 4.15.10

package/package.json

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

package/src/components/ListCards/CardDetails.stories.jsx

@@ -21,6 +21,7 @@ The \`CardDetails\` component is the enhanced card variant for the ListCards com
 - **See details button** - Navigate to detailed views or trigger modals
 - **Clickable avatar** - Add interactive elements like play/pause to the avatar area
 - **Custom avatar content** - Display custom React nodes in the avatar area
+- **Avatar tooltip** - Show a tooltip on hover over the avatar (e.g. for status icons)
 - **Auto description** - Renders \`item.description\` (or the \`description\` prop) by default
 - **Rich formatting** - Override the description by passing \`children\` for separators, ellipsis, etc.
 
@@ -62,6 +63,17 @@ import { ListCards } from '@moises.ai/design-system'
 </ListCards>
 \`\`\`
 
+#### Avatar status icon with tooltip
+
+\`\`\`jsx
+<ListCards.CardDetails
+  item={item}
+  disabled={item.isFailed}
+  avatarContent={<AlertIcon />}
+  avatarTooltip="Voice training failed"
+/>
+\`\`\`
+
 #### Full-featured CardDetails
 
 \`\`\`jsx
@@ -95,6 +107,7 @@ import { ListCards } from '@moises.ai/design-system'
   
   onAvatarClick?: (event: React.MouseEvent) => void; // Called when avatar area is clicked
   avatarContent?: React.ReactNode; // Custom content to render in avatar area
+  avatarTooltip?: string; // Tooltip shown on hover over the avatar area (e.g. status icons)
   
   // Content
   children?: React.ReactNode; // Custom content for the description area (overrides description)

package/src/components/ListCards/ListCards.jsx

@@ -11,8 +11,18 @@ import classNames from 'classnames'
 import React from 'react'
 import { SparklesIcon } from '../../icons/SparklesIcon'
 import { ThumbnailPicker } from '../ThumbnailPicker/ThumbnailPicker'
+import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './ListCards.module.css'
 
+const withAvatarTooltip = (content, tooltip) => {
+  if (!tooltip) return content
+  return (
+    <Tooltip content={tooltip}>
+      <div className={styles.avatarTooltipTrigger}>{content}</div>
+    </Tooltip>
+  )
+}
+
 const Card = ({
   className,
   image,
@@ -139,6 +149,7 @@ const CardDetails = ({
   onSeeDetails,
   onAvatarClick,
   avatarContent,
+  avatarTooltip,
   seeDetailsText = 'Details',
   actions,
   loading,
@@ -194,15 +205,18 @@ const CardDetails = ({
           }}
         >
           {!onAvatarClick &&
-            (loading ? (
-              <div className={styles.listCardsAvatarIcon}>
-                <SparklesIcon className={styles.loadingIcon} />
-              </div>
-            ) : avatarContent ? (
-              <div className={styles.listCardsAvatarIcon}>{avatarContent}</div>
-            ) : (
-              <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
-            ))}
+            withAvatarTooltip(
+              loading ? (
+                <div className={styles.listCardsAvatarIcon}>
+                  <SparklesIcon className={styles.loadingIcon} />
+                </div>
+              ) : avatarContent ? (
+                <div className={styles.listCardsAvatarIcon}>{avatarContent}</div>
+              ) : (
+                <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
+              ),
+              avatarTooltip,
+            )}
           <Flex
             direction="column"
             justify="center"
@@ -254,10 +268,13 @@ const CardDetails = ({
                 : undefined
             }
           >
-            {avatarContent ? (
-              <div className={styles.avatarContent}>{avatarContent}</div>
-            ) : (
-              <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
+            {withAvatarTooltip(
+              avatarContent ? (
+                <div className={styles.avatarContent}>{avatarContent}</div>
+              ) : (
+                <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
+              ),
+              avatarTooltip,
             )}
           </div>
         </div>

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

@@ -58,12 +58,18 @@
   height: 80px;
 }
 
+.avatarTooltipTrigger {
+  pointer-events: auto;
+  display: flex;
+  flex-shrink: 0;
+}
+
 .listCardsAvatarIcon {
   width: 60px;
   height: 60px;
   min-width: 60px;
   border-radius: 6px;
-  
+
   background: var(--neutral-alpha-2);
   display: flex;
   align-items: center;

package/src/components/ListCards/ListCards.stories.jsx

@@ -141,6 +141,7 @@ import { ListCards } from '@moises.ai/design-system'
     seeDetailsText?: string; // Custom text for the details button (default: "Details")
     onAvatarClick?: (event: React.MouseEvent) => void; // Avatar click handler
     avatarContent?: React.ReactNode; // Custom avatar content (e.g., play/pause button)
+    avatarTooltip?: string; // Tooltip shown on hover over the avatar area
 }
 \`\`\`
         `,
@@ -396,6 +397,9 @@ export const WithCustomActions = {
                   />
                 ) : undefined
               }
+              avatarTooltip={
+                item.isFailed ? 'Voice training failed' : undefined
+              }
               actions={
                 item.isFailed ? (
                   <IconButton