@moises.ai/design-system 4.15.0 → 4.15.1

package/package.json

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

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

@@ -21,7 +21,8 @@ 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
-- **Rich formatting** - Support for formatted descriptions with separators
+- **Auto description** - Renders \`item.description\` (or the \`description\` prop) by default
+- **Rich formatting** - Override the description by passing \`children\` for separators, ellipsis, etc.
 
 ### Usage Examples
 
@@ -83,6 +84,7 @@ import { ListCards } from '@moises.ai/design-system'
   id?: string;             // Unique identifier
   name?: string;           // Display name
   avatar?: string;         // Avatar image URL
+  description?: string;    // Description text (rendered when no children are provided)
   
   // Interactive features
   favorite?: boolean;      // Whether item is favorited (shows/hides favorite icon)
@@ -95,7 +97,7 @@ import { ListCards } from '@moises.ai/design-system'
   avatarContent?: React.ReactNode; // Custom content to render in avatar area
   
   // Content
-  children?: React.ReactNode; // Custom content for the description area
+  children?: React.ReactNode; // Custom content for the description area (overrides description)
 }
 \`\`\`
 `,
@@ -151,6 +153,96 @@ const CardDetailsExample = ({ title, children }) => (
   </Flex>
 )
 
+export const WithDescriptionFromItem = {
+  render: () => (
+    <CardDetailsExample title="Description rendered automatically from item.description">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails key={item.id} item={item} />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'When no `children` are provided, `CardDetails` automatically renders `item.description` (or the `description` prop) with text-overflow ellipsis. Pass `children` to fully customize the description area.',
+      },
+    },
+  },
+}
+
+const longDescriptionItems = [
+  {
+    id: '1',
+    name: 'Vintage Tube Amp',
+    description:
+      'Warm tube saturation, expressive dynamics, and gritty lead breakup',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/ana-avatar.jpg',
+  },
+  {
+    id: '2',
+    name: 'Modern Lead',
+    description:
+      'Warm tube saturation, expressive dynamics, and gritty lead breakup ... and a lot more text to make it really long',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/carrie-avatar.jpg',
+  },
+  {
+    id: '3',
+    name: 'Crunch',
+    description: 'Short one',
+    avatar:
+      'https://storage.googleapis.com/moises-api-assets/voice/chris-avatar.jpg',
+  },
+]
+
+export const WithLongDescription = {
+  render: () => (
+    <CardDetailsExample title="Long description (truncated with ellipsis)">
+      {longDescriptionItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          item={item}
+        // onSeeDetails={() => console.log('See details clicked for', item.name)}
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Long descriptions are clipped to a single line with `text-overflow: ellipsis` so the card height stays consistent (68px).',
+      },
+    },
+  },
+}
+
+export const WithDescriptionProp = {
+  render: () => (
+    <CardDetailsExample title="Description rendered from the description prop">
+      {sampleItems.map((item) => (
+        <ListCards.CardDetails
+          key={item.id}
+          id={item.id}
+          name={item.name}
+          avatar={item.avatar}
+          description={item.description}
+        />
+      ))}
+    </CardDetailsExample>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'You can also pass `description` directly as a prop instead of using the `item` object.',
+      },
+    },
+  },
+}
+
 export const WithFavoriteButton = {
   render: () => {
     const [favoriteItems, setFavoriteItems] = useState(['1'])

package/src/components/ListCards/ListCards.jsx

@@ -131,6 +131,7 @@ const CardDetails = ({
   className,
   avatar,
   name,
+  description,
   id,
   item,
   favorite,
@@ -150,6 +151,7 @@ const CardDetails = ({
   const itemId = item?.id || id
   const itemName = item?.name || name
   const itemAvatar = item?.avatar || avatar
+  const itemDescription = item?.description || description
 
   // Extract the avatar URL from the pattern data URL
   const avatarUrl =
@@ -176,7 +178,7 @@ const CardDetails = ({
         style={{
           '--color-surface': 'transparent',
           width: '100%',
-          height: '68px',
+          minHeight: '68px',
           ...style,
         }}
         {...props}
@@ -201,23 +203,38 @@ const CardDetails = ({
             ) : (
               <Avatar src={avatarUrl} className={styles.listCardsAvatar} />
             ))}
-          <Flex direction="column" justify="center">
+          <Flex
+            direction="column"
+            justify="center"
+            style={{ flex: 1, minWidth: 0 }}
+          >
             <Text as="div" size="2" className={styles.listCardsItemText}>
               {itemName}
             </Text>
-            <Flex
-              direction="row"
-              gap="1"
-              align="center"
-              style={{
-                flexWrap: 'nowrap',
-                overflow: 'hidden',
-                width: '100%',
-                whiteSpace: 'nowrap',
-              }}
-            >
-              {children}
-            </Flex>
+            {children ? (
+              <Flex
+                direction="row"
+                gap="1"
+                align="center"
+                style={{
+                  flexWrap: 'nowrap',
+                  overflow: 'hidden',
+                  width: '100%',
+                  whiteSpace: 'nowrap',
+                  minWidth: 0,
+                }}
+              >
+                {children}
+              </Flex>
+            ) : (
+              <Text
+                as="div"
+                size="1"
+                className={styles.listCardsItemDescriptionWrappable}
+              >
+                {itemDescription}
+              </Text>
+            )}
           </Flex>
         </Flex>
       </RadioCards.Item>
@@ -230,10 +247,10 @@ const CardDetails = ({
             onClick={
               onAvatarClick
                 ? (e) => {
-                    e.stopPropagation()
-                    e.preventDefault()
-                    onAvatarClick(e)
-                  }
+                  e.stopPropagation()
+                  e.preventDefault()
+                  onAvatarClick(e)
+                }
                 : undefined
             }
           >

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

@@ -150,6 +150,7 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 12px;
 }
 
 .listCardsDetailDescription {