@moises.ai/design-system 4.14.7 → 4.14.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.14.7",
+  "version": "4.14.9",
   "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'
 
@@ -138,6 +139,9 @@ const CardDetails = ({
   onAvatarClick,
   avatarContent,
   seeDetailsText = 'Details',
+  actions,
+  loading,
+  disabled,
   children,
   style,
   ...props
@@ -154,10 +158,21 @@ const CardDetails = ({
       : itemAvatar
 
   return (
-    <div className={styles.cardWrapper}>
+    <div
+      className={classNames(
+        styles.cardWrapper,
+        loading && styles.cardWrapperLoading,
+        (disabled || loading) && styles.cardWrapperDisabled,
+      )}
+    >
       <RadioCards.Item
         value={itemId}
-        className={classNames(className, styles.listCardsItem)}
+        className={classNames(
+          className,
+          styles.listCardsItem,
+          loading && styles.listCardsItemLoading,
+          (disabled || loading) && styles.listCardsItemDisabled,
+        )}
         style={{
           '--color-surface': 'transparent',
           width: '100%',
@@ -170,14 +185,22 @@ const CardDetails = ({
           gap="2"
           width="100%"
           style={{
-            paddingRight: onSeeDetails || onAvatarClick ? '90px' : '0',
+            paddingRight:
+              actions || onSeeDetails || onAvatarClick ? '90px' : '0',
             paddingLeft: onAvatarClick ? '68px' : '0',
             overflow: 'hidden',
           }}
         >
-          {!onAvatarClick && (
-            <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
-          )}
+          {!onAvatarClick &&
+            (loading ? (
+              <div className={styles.listCardsAvatarIcon}>
+                <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}
@@ -224,45 +247,56 @@ const CardDetails = ({
       )}
 
       <div className={styles.cardActions}>
-        <Flex
-          direction="column"
-          align="end"
-          gap="2"
-          height="100%"
-          justify={onFavorite ? 'between' : 'end'}
-        >
-          {onFavorite && (
-            <div
-              className={classNames(
-                styles.favoriteButton,
-                styles.seeDetailsButton,
-              )}
-              onClick={(e) => {
-                e.stopPropagation()
-                e.preventDefault()
-                onFavorite(e)
-              }}
-            >
-              {favorite ? <StarFilledIcon /> : <StarIcon />}
-            </div>
-          )}
+        {actions ? (
+          <Flex
+            align="start"
+            justify="start"
+            height="100%"
+            className={styles.customActions}
+          >
+            {actions}
+          </Flex>
+        ) : (
+          <Flex
+            direction="column"
+            align="end"
+            gap="2"
+            height="100%"
+            justify={onFavorite ? 'between' : 'end'}
+          >
+            {onFavorite && (
+              <div
+                className={classNames(
+                  styles.favoriteButton,
+                  !favorite && styles.seeDetailsButton,
+                )}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onFavorite(e)
+                }}
+              >
+                {favorite ? <StarFilledIcon /> : <StarIcon />}
+              </div>
+            )}
 
-          {onSeeDetails && (
-            <div
-              className={classNames(
-                styles.buttonGhost,
-                styles.seeDetailsButton,
-              )}
-              onClick={(e) => {
-                e.stopPropagation()
-                e.preventDefault()
-                onSeeDetails(e)
-              }}
-            >
-              {seeDetailsText}
-            </div>
-          )}
-        </Flex>
+            {onSeeDetails && (
+              <div
+                className={classNames(
+                  styles.buttonGhost,
+                  styles.seeDetailsButton,
+                )}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onSeeDetails(e)
+                }}
+              >
+                {seeDetailsText}
+              </div>
+            )}
+          </Flex>
+        )}
       </div>
     </div>
   )

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);
@@ -226,6 +227,119 @@
   outline: 1px solid var(--neutral-alpha-6);
   outline-offset: -1px;
 }
+.listCardsItemDisabled {
+  pointer-events: none;
+}
+
+.listCardsItemDisabled:hover {
+  background-color: transparent !important;
+  outline: 1px solid var(--neutral-alpha-4);
+  outline-offset: -1px;
+}
+
+.cardWrapperDisabled {
+  cursor: default;
+}
+
+.cardWrapperDisabled:hover .listCardsItem {
+  background-color: transparent !important;
+  outline: 1px solid var(--neutral-alpha-4) !important;
+  outline-offset: -1px;
+}
+
+.listCardsItemLoading {
+  outline: 1px solid var(--neutral-alpha-4) !important;
+  outline-offset: -1px;
+}
+
+.cardWrapperLoading:hover .listCardsItem {
+  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;
+}
+
+.cardWrapperLoading::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 8px;
+  padding: 1px;
+  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,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  animation: listCardsShimmer 5s linear infinite;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.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 listCardsShimmer {
+  0% {
+    --loading-x: -80%;
+  }
+  100% {
+    --loading-x: 180%;
+  }
+}
+
+.customActions {
+  pointer-events: auto;
+}
+
 .gridContainer {
   display: grid;
   gap: 8px;

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

@@ -1,7 +1,16 @@
 import React, { useState } from 'react'
 import { ListCards } from './ListCards'
-import { Flex, Avatar } from '@radix-ui/themes'
-import { MusicIcon, DrumsIcon, PianoIcon } from '../../icons'
+import { Flex, Avatar, Text } from '@radix-ui/themes'
+import {
+  MusicIcon,
+  DrumsIcon,
+  PianoIcon,
+  AlertIcon,
+  TrashIcon,
+} from '../../icons'
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
+import { IconButton } from '../IconButton/IconButton'
+import { MoreButton } from '../MoreButton/MoreButton'
 
 export default {
   title: 'Components/ListCards',
@@ -309,6 +318,121 @@ const sampleItemsForSizes = [
   },
 ]
 
+const voiceItems = [
+  {
+    id: '1',
+    name: 'Ana',
+    description: 'Training: 100 rounds completed...',
+    isLoading: true,
+  },
+  {
+    id: '2',
+    name: 'Carlos',
+    description: 'Training: 50 rounds completed...',
+    isLoading: true,
+  },
+  {
+    id: '3',
+    name: 'Maria',
+    description: 'Ready to use',
+    isLoading: false,
+  },
+  {
+    id: '4',
+    name: 'Ana',
+    description: 'Failed',
+    isLoading: false,
+    isFailed: true,
+  },
+]
+
+const menuOptions = [
+  {
+    type: 'item',
+    key: 'rename',
+    label: 'Rename',
+    onClick: () => console.log('Rename clicked'),
+  },
+  {
+    type: 'item',
+    key: 'duplicate',
+    label: 'Duplicate',
+    onClick: () => console.log('Duplicate clicked'),
+  },
+  { type: 'separator', key: 'sep1' },
+  {
+    type: 'item',
+    key: 'delete',
+    label: 'Delete',
+    onClick: () => console.log('Delete clicked'),
+  },
+]
+
+export const WithCustomActions = {
+  render: (args) => {
+    const [selectedId, setSelectedId] = useState('1')
+
+    const handleSelect = (id) => {
+      setSelectedId(id)
+    }
+
+    return (
+      <Flex height="400px" width="328px">
+        <ListCards>
+          {voiceItems.map((item) => (
+            <ListCards.CardDetails
+              key={item.id}
+              item={item}
+              loading={item.isLoading}
+              disabled={item.isFailed}
+              checked={item.isFailed ? false : item.id === selectedId}
+              onClick={item.isFailed ? undefined : () => handleSelect(item.id)}
+              avatarContent={
+                item.isFailed ? (
+                  <AlertIcon
+                    width={18}
+                    height={18}
+                    style={{ color: '#FF9592' }}
+                  />
+                ) : undefined
+              }
+              actions={
+                item.isFailed ? (
+                  <IconButton
+                    variant="ghost"
+                    size="1"
+                    color="neutral"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      console.log('Delete clicked for', item.name)
+                    }}
+                  >
+                    <TrashIcon width={16} height={16} />
+                  </IconButton>
+                ) : (
+                  <DropdownMenu
+                    trigger={<MoreButton />}
+                    options={menuOptions}
+                  />
+                )
+              }
+            >
+              <Text
+                as="div"
+                size="1"
+                style={item.isFailed ? { color: '#FF9592' } : undefined}
+                color={item.isFailed ? undefined : 'gray'}
+              >
+                {item.description}
+              </Text>
+            </ListCards.CardDetails>
+          ))}
+        </ListCards>
+      </Flex>
+    )
+  },
+}
+
 export const WithSizes = {
   render: (args) => {
     const [selectedId1, setSelectedId1] = useState(null)

package/src/components/MoreButton/MoreButton.module.css

@@ -9,10 +9,8 @@
   background: transparent;
   border-radius: 9999px;
   cursor: pointer;
-  color: var(--neutral-alpha-7);
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
+  color: var(--neutral-11);
+  transition: color 0.15s ease;
 }
 
 @media (pointer: coarse) {
@@ -27,8 +25,7 @@
 
 .MoreButton:hover,
 .MoreButton.hovered {
-  background-color: var(--neutral-alpha-3);
-  color: var(--neutral-alpha-11);
+  color: var(--neutral-12);
 }
 
 .MoreButton:focus-visible {