@moises.ai/design-system 3.5.4 → 3.5.6

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: 3px;
+  height: 11px;
+  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

@@ -2,8 +2,9 @@ import { Flex, Text, Separator } from '@radix-ui/themes'
 import styles from './ProjectsList.module.css'
 import { useState, createContext, useContext } from 'react'
 import { ArrowLeftIcon, NoMusicIcon, ChevronDownIcon, ChevronUpIcon } from '../../icons'
-import { getIconFromTrackId, getProjectCover } from './utils'
+import { getIconFromTrackId } from './utils'
 import { Button } from '../Button/Button'
+import { ProductsBrandPattern } from '../ProductsBrandPattern/ProductsBrandPattern'
 
 const ProjectsListContext = createContext({
   onClickTrack: null,
@@ -63,7 +64,6 @@ const ProjectsListItem = ({
     setShowAllTracks(!showAllTracks)
   }
 
-  const project = { id, title, artist, cover, type, tracks }
 
   return (
     <Flex
@@ -76,12 +76,7 @@ const ProjectsListItem = ({
     >
       <Flex direction="row" gap="3">
         <Flex className={styles.projectCover}>
-          <img
-            src={getProjectCover(project)}
-            alt={title}
-            draggable={false}
-            className={styles.projectCoverImage}
-          />
+          <ProductsBrandPattern type={type} cover={cover} size="48px" />
         </Flex>
 
         <Flex direction="column" gap="1" align="start" justify="center">

package/src/components/ProjectsList/utils.jsx

@@ -19,11 +19,6 @@ import {
     MusicIcon,
     SparkBarsIcon,
 } from '../../icons'
-import thumbCoverLyrics from './assets/images/thumb-song-lyrics.jpg'
-import thumbCoverMaster from './assets/images/thumb-song-master.jpg'
-import thumbCoverStems from './assets/images/thumb-song-stems.jpg'
-import thumbCoverStudio from './assets/images/thumb-song-studio.jpg'
-import thumbCoverVoice from './assets/images/thumb-song-voice.jpg'
 
 export const getIconFromTrackId = (trackId) => {
     switch (trackId) {
@@ -73,24 +68,3 @@ export const getIconFromTrackId = (trackId) => {
             return <SparkBarsIcon width={16} height={16} />
     }
 }
-
-export const getProjectCover = (project) => {
-    if (project?.cover) {
-        return project.cover
-    }
-
-    switch (project?.type) {
-        case 'studio':
-            return thumbCoverStudio
-        case 'stems':
-            return thumbCoverStems
-        case 'voice':
-            return thumbCoverVoice
-        case 'master':
-            return thumbCoverMaster
-        case 'lyrics':
-            return thumbCoverLyrics
-        default:
-            return thumbCoverLyrics
-    }
-}

package/src/components/SetlistList/SetlistList.jsx

@@ -10,6 +10,7 @@ import {
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { MoreButton } from '../MoreButton/MoreButton'
 
 export const SetlistItem = ({
   isSelected,
@@ -45,47 +46,6 @@ export const SetlistItem = ({
     e.stopPropagation()
   }
 
-  const constructIconToRender = useMemo(() => {
-    if (moises) {
-      return (
-        <Flex gap="1" align="center">
-          <GlobeIcon
-            width={12}
-            height={12}
-            className={styles.textSubtitleIcon}
-          />
-          <Text
-            size="1"
-            weight="regular"
-            className={styles.textSubtitle}
-            truncate
-          >
-            {subtitle}
-          </Text>
-        </Flex>
-      )
-    }
-    if (group) {
-      return (
-        <Flex gap="1" align="center">
-          <UserGroupIcon
-            width={12}
-            height={12}
-            className={styles.textSubtitleIcon}
-          />
-          <Text
-            size="1"
-            weight="regular"
-            className={styles.textSubtitle}
-            truncate
-          >
-            {subtitle}
-          </Text>
-        </Flex>
-      )
-    }
-  })
-
   return (
     <Flex
       gap="3"
@@ -137,7 +97,14 @@ export const SetlistItem = ({
               {text}
             </Text>
           )}
-          {constructIconToRender}
+          <Text
+            size="1"
+            weight="regular"
+            className={styles.textSubtitle}
+            truncate
+          >
+            {subtitle}
+          </Text>
         </Flex>
       </Flex>
       {dropdownMenuOptions &&
@@ -154,11 +121,7 @@ export const SetlistItem = ({
                 onPointerDown={handleDropdownTriggerPointerDown}
                 onClick={handleDropdownTriggerClick}
               >
-                <DotsVerticalIcon
-                  className={styles.dropdownMenuTrigger}
-                  width={16}
-                  height={16}
-                />
+                <MoreButton hovered={dropdownMenuOpen} />
               </Flex>
             }
             options={dropdownMenuOptions}
@@ -181,8 +144,12 @@ export const SetlistList = ({
   const hoverTimeoutRef = useRef(null)
   const collapsedItemHeight = 44
   const collapsedVisibleOffset = 4
+  const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
   const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
+  const visibleSetlists = showCollapsedStack
+    ? setlists.slice(0, maxCollapsedItems)
+    : setlists
 
   const handleMouseEnter = () => {
     if (!collapsed) return
@@ -304,7 +271,7 @@ export const SetlistList = ({
                 collapsed={collapsed}
               />
             ))}
-          {setlists.map((setlist, index) => {
+          {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
             return (
               <SetlistItem

package/src/components/SetlistList/SetlistList.module.css

@@ -28,6 +28,8 @@
   .collapsed {
     width: fit-content;
     padding: 2px;
+    margin: 0 10px;
+ 
   }
 
 .dropdownTriggerWrapper {
@@ -41,9 +43,9 @@
   margin-left: auto;
 }
 
-  .dropdownTriggerWrapperMobile {
+  /* .dropdownTriggerWrapperMobile {
     padding: 8px;
-  }
+  } */
 
   .collapsed .dropdownTriggerWrapper {
     opacity: 0;
@@ -53,7 +55,7 @@
     color: var(--neutral-alpha-7);
   }
   
-  .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
+  /* .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
   .menuOpen .dropdownTriggerWrapper .dropdownMenuTrigger {
     color: var(--neutral-alpha-11);
     background-color: rgba(255, 255, 255, 0.07);
@@ -61,7 +63,7 @@
     width: 16px;
     height: 24px;
   }
-  
+   */
   .avatarSetlist {
     display: flex;
     width: 40px;
@@ -165,7 +167,7 @@
   
 
   .setlistsContent {
-    gap: 4px;
+    /* gap: 4px; */
   }
 .collapsedStack {
   gap: 0;

package/src/components/Sidebar/Sidebar.jsx

@@ -106,7 +106,12 @@ export const Sidebar = ({
         </Flex>
       </div>
 
-      <Flex direction="column" className={styles.desktopSidebar}>
+      <Flex
+        direction="column"
+        className={styles.desktopSidebar}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
         <Flex
           align="center"
           justify="between"
@@ -124,8 +129,6 @@ export const Sidebar = ({
               className={classNames(styles.logoToggleContainer, {
                 [styles.logoToggleContainerCollapsed]: effectiveCollapsed,
               })}
-              onMouseEnter={effectiveCollapsed ? handleMouseEnter : undefined}
-              onMouseLeave={effectiveCollapsed ? handleMouseLeave : undefined}
             >
               <MoisesLogoIcon
                 width={32}

package/src/components/Sidebar/Sidebar.module.css

@@ -240,7 +240,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 24px;
-  margin-top: 24px;
+  margin-top: 18px;
   height: 48px;
   transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }

package/src/components/Sidebar/SidebarSection/SidebarSection.module.css

@@ -1,5 +1,5 @@
 .sectionTitle {
-    color: var(--neutral-alpha-7);
+    color: var(--neutral-alpha-8);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     padding: 0 0 8px 4px;