@moises.ai/design-system 3.5.3 → 3.5.5

package/src/components/IconButton/IconButton.module.css

@@ -109,7 +109,8 @@
 
 .ghost.cyan.highContrast:active:not(.disabled),
 .ghost.cyan.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.ghost.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
+.ghost.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.ghost.cyan.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
   background-color: transparent;
   color: var(--aqua-dark-alpha-10) !important;
 }
@@ -146,6 +147,7 @@
   width: 24px;
   height: 24px;
   padding: 0 !important;
+  border-radius: 4px;
 }
 
 /* size 2 → 32×32px */
@@ -154,6 +156,7 @@
   width: 32px ;
   height: 32px ;
   padding: 0 !important;
+  border-radius: 6px;
 }
 
 /* size 3 → 40×40px */
@@ -162,6 +165,7 @@
   width: 40px ;
   height: 40px ;
   padding: 0 !important;
+  border-radius: 8px;
 }
 
 /* size 4 → 48×48px */
@@ -170,6 +174,23 @@
   width: 48px;
   height: 48px;
   padding: 0 !important;
+  border-radius: 12px;
+}
+
+.size1 {
+  border-radius: 4px;
+}
+
+.size2 {
+  border-radius: 6px;
+}
+
+.size3 {
+  border-radius: 8px;
+}
+
+.size4 {
+  border-radius: 12px;
 } 
 
 .solid.cyan {
@@ -192,7 +213,8 @@
 
 .solid.cyan.highContrast:active:not(.disabled):not(.loading),
 .solid.cyan.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.solid.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
+.solid.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.solid.cyan.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
   opacity: 0.82;
 }
 
@@ -228,7 +250,8 @@
 
 .solid.red.highContrast:active:not(.disabled):not(.loading),
 .solid.red.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.solid.red.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled)  {
+.solid.red.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.solid.red.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
   background-color: var(--red-12);
   opacity: 0.82;
 }
@@ -242,10 +265,23 @@
   background-color: var(--neutral-alpha-4);
 }
 
+
+/* 
+quando é um trigger é assim que o botao ta ficando 
+<button data-accent-color="gray" type="button" id="radix-«r0»" 
+aria-haspopup="menu" aria-expanded="true" data-state="open" 
+class="rt-reset rt-BaseButton rt-r-size-1 rt-variant-soft 
+rt-IconButton _iconButton_1c4cc_1 _gray_1c4cc_61 _size1_1c4cc_144 _soft_1c4cc_256 
+_menuTrigger_17nux_207 _showActiveTrigger_17nux_207" aria-controls="radix-«r1»">conteudo do botao</button>
+
+
+*/
 .soft.gray:active:not(.disabled):not(.loading), 
 .soft.gray[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.soft.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
-  background-color: var(--neutral-alpha-5);
+.soft.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.soft.gray[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"]
+{
+  background-color: var(--neutral-alpha-5) !important;
   opacity: 0.92;
 }
 
@@ -261,7 +297,8 @@
 
 .soft.gray.highContrast:active:not(.disabled):not(.loading),
 .soft.gray.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.soft.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
+.soft.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.soft.gray.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
   background-color: var(--neutral-alpha-5);
   opacity: 0.82;
 }
@@ -277,7 +314,8 @@
 
 .surface.gray:active:not(.disabled):not(.loading),
 .surface.gray[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.surface.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
+.surface.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.surface.gray[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
   background-color: var(--neutral-alpha-3);
   border: 1px solid var(--neutral-alpha-8);
   opacity: 0.92;
@@ -295,7 +333,8 @@
 
 .surface.gray.highContrast:active:not(.disabled):not(.loading),
 .surface.gray.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
-.surface.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
+.surface.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
+.surface.gray.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
   background-color: var(--neutral-alpha-3);
   border: 1px solid var(--neutral-alpha-8);
   opacity: 0.82;

package/src/components/MoreButton/MoreButton.jsx

@@ -0,0 +1,25 @@
+import styles from './MoreButton.module.css'
+import classNames from 'classnames'
+import { DotsVertical2Icon } from '../../icons'
+
+export const MoreButton = ({
+  className,
+  'aria-label': ariaLabel = 'More options',
+  hovered = false,
+  ...props
+}) => {
+  return (
+    <button
+      type="button"
+      className={classNames(styles.MoreButton, className, {
+        [styles.hovered]: hovered,
+      })}
+      aria-label={ariaLabel}
+      {...props}
+    >
+      <DotsVertical2Icon className={styles.icon} />
+    </button >
+  )
+}
+
+MoreButton.displayName = 'MoreButton'

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

@@ -0,0 +1,43 @@
+.MoreButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  border-radius: 9999px;
+  cursor: pointer;
+  color: var(--neutral-alpha-7);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+@media (pointer: coarse) {
+  .MoreButton {
+    width: auto;
+    height: auto;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 4px 10px;
+  }
+}
+
+.MoreButton:hover,
+.MoreButton.hovered {
+  background-color: var(--neutral-alpha-3);
+  color: var(--neutral-alpha-11);
+}
+
+.MoreButton:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
+.icon {
+  width: 4px;
+  height: 14px;
+  flex-shrink: 0;
+}

package/src/components/MoreButton/MoreButton.stories.jsx

@@ -0,0 +1,30 @@
+import { Box } from '@radix-ui/themes'
+import { MoreButton } from './MoreButton'
+
+export default {
+  title: 'Components/MoreButton',
+  component: MoreButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <Box
+        style={{
+          padding: 24,
+          background: 'var(--neutral-2)',
+          borderRadius: 8,
+        }}
+      >
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export const Default = {
+  args: {
+    'aria-label': 'More options',
+  },
+}

package/src/components/ProductsBrandPattern/ProductsBrandPattern.jsx

@@ -1,32 +1,34 @@
-import { Flex } from '@radix-ui/themes'
 import classNames from 'classnames'
-import aiStudio from './Patterns/aiStudio.png'
-import mastering from './Patterns/mastering.png'
-import product from './Patterns/product.png'
-import stemSeparation from './Patterns/stemSeparation.png'
-import voiceStudio from './Patterns/voiceStudio.png'
+import lyrics from './Patterns/thumb-song-lyrics.jpg'
+import mastering from './Patterns/thumb-song-master.jpg'
+import stems from './Patterns/thumb-song-stems.jpg'
+import studio from './Patterns/thumb-song-studio.jpg'
+import voice from './Patterns/thumb-song-voice.jpg'
 
 export const ProductsBrandPattern = ({
   className,
-  type = 'stem-separation',
   size = '40px',
+  type = 'lyrics',
+  cover,
   ...props
 }) => {
   const patterns = {
-    'stem-separation': stemSeparation,
-    'voice-studio': voiceStudio,
-    'ai-studio': aiStudio,
-    mastering,
-    product,
+    'stems': stems,
+    'voice': voice,
+    'studio': studio,
+    'master': mastering,
+    'lyrics': lyrics,
   }
 
-  const pattern = patterns[type]
+
+  const pattern = cover || patterns[type]
   return (
     <img
       src={pattern}
       alt={`${type} pattern`}
       width={size}
       height={size}
+      draggable={false}
       className={classNames(className)}
       {...props}
     />

package/src/components/ProductsBrandPattern/ProductsBrandPattern.stories.jsx

@@ -1,12 +1,7 @@
 import { ProductsBrandPattern } from './ProductsBrandPattern'
+import { projects } from '../ProjectsList/utils-stories'
 
-const patternTypes = [
-  'stem-separation',
-  'voice-studio',
-  'ai-studio',
-  'mastering',
-  'product',
-]
+const patternTypes = ['stems', 'voice', 'studio', 'master', 'lyrics']
 
 export default {
   title: 'Components/ProductsBrandPattern',
@@ -25,23 +20,74 @@ export default {
     type: {
       control: 'select',
       options: patternTypes,
-      description: 'Which product pattern to render.',
+      description: 'Product type for the pattern image.',
     },
     size: {
       control: 'text',
-      description:
-        'Width/height of the pattern image. Accepts px, rem, or number.',
-    },
-    className: {
-      control: false,
-      description: 'Custom class applied to the wrapper Flex.',
+      description: 'Width/height of the pattern image. Accepts px, rem, or number.',
     },
   },
+  args: {
+    type: 'lyrics',
+  },
 }
 
 export const Default = {
   args: {
-    type: 'stem-separation',
+    type: 'lyrics',
+  },
+}
+
+export const Stems = {
+  args: {
+    type: 'stems',
+  },
+}
+
+export const Voice = {
+  args: {
+    type: 'voice',
+  },
+}
+
+export const Studio = {
+  args: {
+    type: 'studio',
+  },
+}
+
+export const Master = {
+  args: {
+    type: 'master',
+  },
+}
+
+export const Lyrics = {
+  args: {
+    type: 'lyrics',
+  },
+}
+
+export const WithCustomCover = {
+  args: {
+    type: 'lyrics',
+    cover: projects.find((p) => p.cover)?.cover,
     size: '40px',
   },
 }
+
+export const AllPatterns = {
+  render: ({ type: _type, ...args }) => (
+    <div style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
+      {patternTypes.map((type) => (
+        <div key={type} style={{ textAlign: 'center' }}>
+          <ProductsBrandPattern type={type} {...args} />
+          <div style={{ fontSize: 12, marginTop: 4, textTransform: 'capitalize' }}>{type}</div>
+        </div>
+      ))}
+    </div>
+  ),
+  args: {
+    size: '48px',
+  },
+}

package/src/components/ProfileMenu/MenuTrigger.jsx

@@ -1,12 +1,23 @@
 import classNames from 'classnames'
-import React from 'react'
-import { DotsVerticalIcon } from '../../icons'
+import React, { useState } from 'react'
 import { Avatar, Flex, Text } from '../../index'
 import styles from './ProfileMenu.module.css'
+import { MoreButton } from '../MoreButton/MoreButton'
 
 export function MenuTrigger({ className, user, collapsed, ...props }) {
+  const [hover, setHover] = useState(false)
+
+  const handleMouseEnter = () => {
+    setHover(true)
+  }
+
+  const handleMouseLeave = () => {
+    setHover(false)
+  }
   return (
     <Flex
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       className={classNames(styles.userProfile, { [styles.collapsed]: collapsed }, className)}
       align="center"
       justify="between"
@@ -32,13 +43,7 @@ export function MenuTrigger({ className, user, collapsed, ...props }) {
       </div>
 
       <div className={styles.userMenuWrapper}>
-        <Flex padding="4px 5px" className={styles.dropdownTriggerWrapper}>
-          <DotsVerticalIcon
-            className={styles.dropdownMenuTrigger}
-            width={16}
-            height={16}
-          />
-        </Flex>
+        <MoreButton hovered={hover} />
       </div>
     </Flex>
   )

package/src/components/ProjectsList/ProjectsList.jsx

@@ -1,25 +1,60 @@
 import { Flex, Text, Separator } from '@radix-ui/themes'
 import styles from './ProjectsList.module.css'
-import { useState } from 'react'
+import { useState, createContext, useContext } from 'react'
 import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
 import { getIconFromTrackId } from './utils'
 import { Button } from '../Button/Button'
+import { ProductsBrandPattern } from '../ProductsBrandPattern/ProductsBrandPattern'
+
+const ProjectsListContext = createContext({
+  onClickTrack: null,
+  onInsertAllTracks: null,
+  openedItem: null,
+  setOpenedItem: () => { },
+})
 
 export const ProjectsList = ({
-  projects = [],
+  children,
   onClickTrack,
   onInsertAllTracks,
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
+
+  return (
+    <ProjectsListContext.Provider
+      value={{
+        onClickTrack,
+        onInsertAllTracks,
+        openedItem,
+        setOpenedItem,
+      }}
+    >
+      <Flex direction="column" width="100%">
+        {children}
+      </Flex>
+    </ProjectsListContext.Provider>
+  )
+}
+
+const ProjectsListItem = ({
+  id,
+  title,
+  artist,
+  cover,
+  type,
+  tracks = [],
+  ...props
+}) => {
+  const { onClickTrack, onInsertAllTracks, openedItem, setOpenedItem } = useContext(ProjectsListContext)
   const [showAllTracks, setShowAllTracks] = useState(false)
 
-  const handleClickProject = (projectId) => {
+  const handleClickProject = () => {
     setShowAllTracks(false)
 
-    if (openedItem === projectId) {
+    if (openedItem === id) {
       setOpenedItem(null)
     } else {
-      setOpenedItem(projectId)
+      setOpenedItem(id)
     }
   }
 
@@ -29,105 +64,98 @@ export const ProjectsList = ({
     setShowAllTracks(!showAllTracks)
   }
 
+
   return (
-    <Flex direction="column" width="100%">
-      {projects.map((project, index) => (
-        <Flex
-          key={project.id}
-          direction="column"
-          gap="2"
-          p="1"
-          className={`${styles.item} ${openedItem === project.id ? styles.opened : ''}`}
-          onClick={() => handleClickProject(project.id)}
-        >
-          <Flex direction="row" gap="3">
-            <Flex className={styles.projectCover}>
-              <img
-                src={project.cover || `https://picsum.photos/48?random=${index}`}
-                alt={project.title}
-                draggable={false}
-                className={styles.projectCoverImage}
-              />
-            </Flex>
+    <Flex
+      direction="column"
+      gap="2"
+      p="1"
+      className={`${styles.item} ${openedItem === id ? styles.opened : ''}`}
+      onClick={handleClickProject}
+      {...props}
+    >
+      <Flex direction="row" gap="3">
+        <Flex className={styles.projectCover}>
+          <ProductsBrandPattern type={type} cover={cover} size="48px" />
+        </Flex>
 
-            <Flex direction="column" gap="1" align="start" justify="center">
-              <Text size="2" className={styles.projectTitle}>
-                {project.title}
-              </Text>
+        <Flex direction="column" gap="1" align="start" justify="center">
+          <Text size="2" className={styles.projectTitle}>
+            {title}
+          </Text>
 
-              {project.artist && (
-                <Text size="1" className={styles.projectArtist}>
-                  {project.artist}
-                </Text>
-              )}
+          {artist && (
+            <Text size="1" className={styles.projectArtist}>
+              {artist}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+
+      {openedItem === id && (
+        <Flex direction="column">
+          {tracks.length === 0 && (
+            <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
+              <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
+              <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
             </Flex>
-          </Flex>
-
-          {openedItem === project.id && (
-            <Flex direction="column">
-              {project.tracks.length === 0 && (
-                <Flex direction="row" gap="3" p="5" pt="2" align="center" justify="center">
-                  <NoMusicIcon width={16} height={16} style={{ color: 'var(--neutral-alpha-10)' }} />
-                  <Text size="2" style={{ color: 'var(--neutral-alpha-10)' }}>This file has no tracks</Text>
-                </Flex>
-              )}
-
-              {project.tracks.length > 0 && (
-                <Flex direction="column" gap="1">
-                  {project.tracks.slice(0, showAllTracks ? project.tracks.length : 6).map((track) => (
-                    <Flex
-                      key={track.id}
-                      direction="row"
-                      gap="3"
-                      className={styles.itemTrack}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onClickTrack?.(track)
-                      }}
-                    >
-                      <div className={styles.icon}>
-                        <Flex className={styles.iconTrack}>
-                          {getIconFromTrackId(track.id)}
-                        </Flex>
-                        <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
-                      </div>
-
-                      <Flex direction="column" gap="1" align="start" justify="center">
-                        <Text size="2" className={styles.trackTitle}>
-                          {track.title}
-                        </Text>
-                      </Flex>
-                    </Flex>
-                  ))}
-
-                  <Flex direction="row" gap="3" p="2" align="center" justify="center">
-                    <Button variant="ghost" color="neutral" style={{ flex: '1' }}
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        onInsertAllTracks?.(project.tracks)
-                      }}
-                    >
-                      <ArrowLeftIcon width={16} height={16} /> Insert all
-                    </Button>
+          )}
 
-                    {project.tracks.length > 6 && (
-                      <>
-                        <Separator orientation="vertical" />
+          {tracks.length > 0 && (
+            <Flex direction="column" gap="1">
+              {tracks.slice(0, showAllTracks ? tracks.length : 6).map((track) => (
+                <Flex
+                  key={track.id}
+                  direction="row"
+                  gap="3"
+                  className={styles.itemTrack}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onClickTrack?.(track)
+                  }}
+                >
+                  <div className={styles.icon}>
+                    <Flex className={styles.iconTrack}>
+                      {getIconFromTrackId(track.id)}
+                    </Flex>
+                    <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />
+                  </div>
 
-                        <Button variant="ghost" color="gray" style={{ flex: '1' }} onClick={handleClickShowAllTracks}>
-                          {showAllTracks ? 'Show less' : 'Show more'}
-                          {showAllTracks ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
-                        </Button>
-                      </>
-                    )}
+                  <Flex direction="column" gap="1" align="start" justify="center">
+                    <Text size="2" className={styles.trackTitle}>
+                      {track.title}
+                    </Text>
                   </Flex>
                 </Flex>
-              )}
+              ))}
+
+              <Flex direction="row" gap="3" p="2" align="center" justify="center">
+                <Button variant="ghost" color="neutral" style={{ flex: '1' }}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onInsertAllTracks?.(tracks)
+                  }}
+                >
+                  <ArrowLeftIcon width={16} height={16} /> Insert all
+                </Button>
+
+                {tracks.length > 6 && (
+                  <>
+                    <Separator orientation="vertical" />
+
+                    <Button variant="ghost" color="gray" style={{ flex: '1' }} onClick={handleClickShowAllTracks}>
+                      {showAllTracks ? 'Show less' : 'Show more'}
+                      {showAllTracks ? <ChevronUpIcon width={16} height={16} /> : <ChevronDownIcon width={16} height={16} />}
+                    </Button>
+                  </>
+                )}
+              </Flex>
             </Flex>
           )}
         </Flex>
-      ))
-      }
-    </Flex >
+      )}
+    </Flex>
   )
 }
+
+ProjectsList.Item = ProjectsListItem