@moises.ai/design-system 4.15.9 → 4.15.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.15.9",
+  "version": "4.15.11",
   "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

package/src/components/PreviewCard/PreviewCard.jsx

@@ -37,6 +37,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
   const waveSurferRef = useRef(null)
   const skipTimeSyncRef = useRef(false)
   const pendingSeekTimeRef = useRef(null)
+  const pendingPlayHandoffRef = useRef(null)
 
   const showSkeleton = loading || !isReady
 
@@ -50,48 +51,92 @@ export const PreviewCard = forwardRef(function PreviewCard(
     waveSurferRef.current?.pause()
   }, [])
 
+  const resetHiddenProgress = useCallback(
+    (ws) => {
+      if (!hiddenProgress) return
+
+      ws?.setOptions({ progressColor: waveColor })
+    },
+    [hiddenProgress, waveColor],
+  )
+
+  const handoffFromPreviousActive = useCallback(
+    (
+      currentWave,
+      { seekTime, syncTime = false, skipPauseFor = null } = {},
+    ) => {
+      const previousActive = wavegroup?.state?.active
+      const isHandoff = previousActive && previousActive !== currentWave
+
+      if (!isHandoff) {
+        if (typeof seekTime === 'number') {
+          currentWave?.setTime(seekTime)
+        }
+
+        return {
+          isHandoff: false,
+          previousActive: null,
+          previousWasPlaying: false,
+          wasPlaying: Boolean(wavegroup?.state?.isPlaying),
+        }
+      }
+
+      const previousTime = previousActive.getCurrentTime?.()
+      const previousWasPlaying = Boolean(previousActive?.isPlaying?.())
+      const wasPlaying =
+        previousWasPlaying || Boolean(wavegroup?.state?.isPlaying)
+
+      if (previousActive !== skipPauseFor) {
+        previousActive.pause()
+        resetHiddenProgress(previousActive)
+      }
+
+      if (typeof seekTime === 'number') {
+        currentWave.setTime(seekTime)
+      } else if (syncTime && typeof previousTime === 'number') {
+        currentWave.setTime(previousTime)
+      }
+
+      return {
+        isHandoff: true,
+        previousActive,
+        previousWasPlaying,
+        wasPlaying,
+      }
+    },
+    [resetHiddenProgress, wavegroup],
+  )
+
   const play = useCallback(() => {
-    if (!waveSurferRef.current) return
+    const currentWave = waveSurferRef.current
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current
-    ) {
-      wavegroup.state.active.pause()
-    }
+    if (!currentWave) return
 
     if (!isSafari) {
-      waveSurferRef.current.setOptions({ progressColor })
+      currentWave.setOptions({ progressColor })
     }
-    waveSurferRef.current.play()
-  }, [isSafari, progressColor, wavegroup])
+    currentWave.play()
+  }, [isSafari, progressColor])
 
   const startPlay = useCallback(() => {
-    if (showSkeleton || !waveSurferRef.current) return
+    const currentWave = waveSurferRef.current
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current
-    ) {
-      wavegroup.state.active.pause()
+    if (showSkeleton || !currentWave) return
 
-      wavegroup.setter((prev) => ({
-        ...prev,
-        isPlaying: false,
-        active: null,
-      }))
-    }
+    const previousActive = wavegroup?.state?.active
+    const isHandoff = previousActive && previousActive !== currentWave
 
-    if (
-      wavegroup?.state?.active &&
-      wavegroup.state.active !== waveSurferRef.current &&
-      wavegroup.state.active.getCurrentTime
-    ) {
-      waveSurferRef.current.setTime(wavegroup.state.active.getCurrentTime())
+    if (isHandoff) {
+      const handoff = handoffFromPreviousActive(currentWave, {
+        syncTime: true,
+      })
+      pendingPlayHandoffRef.current = handoff.previousActive
+    } else {
+      pendingPlayHandoffRef.current = null
     }
 
     play()
-  }, [showSkeleton, play, wavegroup])
+  }, [showSkeleton, play, handoffFromPreviousActive, wavegroup])
 
   useImperativeHandle(
     ref,
@@ -120,6 +165,8 @@ export const PreviewCard = forwardRef(function PreviewCard(
   const onPlay = useCallback(
     (ws) => {
       const isSeekHandoff = skipTimeSyncRef.current
+      const pendingPlayHandoff = pendingPlayHandoffRef.current
+      const pendingSeekTime = pendingSeekTimeRef.current
 
       setIsPlaying(true)
       onPlayStateChange?.(true)
@@ -128,21 +175,15 @@ export const PreviewCard = forwardRef(function PreviewCard(
       }
 
       if (wavegroup) {
-        const previousActive = wavegroup.state.active
-
-        if (previousActive && previousActive !== ws) {
-          const currentTime = previousActive.getCurrentTime()
-          previousActive.pause()
-
-          if (!skipTimeSyncRef.current) {
-            ws.setTime(currentTime)
-          } else if (pendingSeekTimeRef.current != null) {
-            ws.setTime(pendingSeekTimeRef.current)
-            pendingSeekTimeRef.current = null
-          }
-        }
+        handoffFromPreviousActive(ws, {
+          seekTime: isSeekHandoff ? pendingSeekTime : undefined,
+          syncTime: !isSeekHandoff && !pendingPlayHandoff,
+          skipPauseFor: pendingPlayHandoff,
+        })
 
         skipTimeSyncRef.current = false
+        pendingSeekTimeRef.current = null
+        pendingPlayHandoffRef.current = null
 
         wavegroup.setter((prev) => ({
           ...prev,
@@ -152,7 +193,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         }))
       }
     },
-    [onPlayStateChange, onSelect, wavegroup],
+    [handoffFromPreviousActive, onPlayStateChange, onSelect, wavegroup],
   )
 
   const onPause = useCallback(() => {
@@ -161,29 +202,40 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
     if (wavegroup) {
       if (wavegroup.state.active !== waveSurferRef.current) {
-        if (hiddenProgress) {
-          waveSurferRef.current?.setOptions({ progressColor: waveColor })
-        }
-        return
+        resetHiddenProgress(waveSurferRef.current)
       }
 
-      wavegroup.setter((prev) => ({
-        ...prev,
-        isPlaying: false,
-      }))
+      wavegroup.setter((prev) => {
+        if (prev.active !== waveSurferRef.current) {
+          return prev
+        }
+
+        return {
+          ...prev,
+          isPlaying: false,
+        }
+      })
     }
-  }, [onPlayStateChange, wavegroup, hiddenProgress, waveColor])
+  }, [onPlayStateChange, wavegroup, resetHiddenProgress])
 
   const onSeeking = useCallback(
     (ws) => {
       if (!wavegroup) return
 
+      const previousActive = wavegroup.state.active
+      const isHandoff = previousActive && previousActive !== ws
+
+      if (isHandoff) {
+        resetHiddenProgress(previousActive)
+        return
+      }
+
       wavegroup.setter((prev) => ({
         ...prev,
         active: ws,
       }))
     },
-    [wavegroup],
+    [resetHiddenProgress, wavegroup],
   )
 
   const handleInteraction = useCallback(
@@ -208,20 +260,15 @@ export const PreviewCard = forwardRef(function PreviewCard(
 
       const seekTime =
         typeof newTime === 'number' ? newTime : (ws.getCurrentTime?.() ?? 0)
-      const previousWasPlaying = Boolean(previousActive?.isPlaying?.())
-      const wasPlaying = previousWasPlaying || wavegroup.state.isPlaying
+
+      const handoff = handoffFromPreviousActive(ws, {
+        seekTime,
+      })
 
       pendingSeekTimeRef.current = seekTime
       skipTimeSyncRef.current = true
 
-      wavegroup.state.active = ws
-      wavegroup.state.lastPlayed = ws
-      wavegroup.state.isPlaying = wasPlaying
-
-      ws.setTime(seekTime)
-      previousActive.pause()
-
-      if (!previousWasPlaying) {
+      if (!handoff.previousWasPlaying) {
         previousActive.emit?.('pause')
       }
 
@@ -229,7 +276,7 @@ export const PreviewCard = forwardRef(function PreviewCard(
         ws.setOptions({ progressColor })
       }
 
-      if (wasPlaying) {
+      if (handoff.wasPlaying) {
         ws.play()
       }
 
@@ -237,10 +284,17 @@ export const PreviewCard = forwardRef(function PreviewCard(
         ...prev,
         active: ws,
         lastPlayed: ws,
-        isPlaying: wasPlaying,
+        isPlaying: handoff.wasPlaying,
       }))
     },
-    [wavegroup, isSafari, progressColor, showSkeleton, onSelect],
+    [
+      wavegroup,
+      isSafari,
+      progressColor,
+      handoffFromPreviousActive,
+      showSkeleton,
+      onSelect,
+    ],
   )
 
   const onFinish = useCallback(() => {

package/src/components/PreviewCard/PreviewCard.stories.jsx

@@ -89,7 +89,7 @@ function PreviewCardGroupStory() {
     <Flex direction="column" gap="3" width="344px">
       <Text size="1" color="gray">
         Click the card (outside waveform/play) to select. Play on another card
-        continues from the same position.
+        continues from the same position with hidden progress and auto-repeat.
       </Text>
       {PREVIEW_ITEMS.map((item) => (
         <PreviewCard
@@ -98,6 +98,7 @@ function PreviewCardGroupStory() {
           selected={selectedId === item.id}
           wavegroup={wavegroup}
           hiddenProgress={true}
+          autoRepeat={true}
           onSelect={() => setSelectedId(item.id)}
           actions={<MoreButton aria-label={`More options for ${item.label}`} />}
         />