@moises.ai/design-system 3.5.3 → 3.5.5

package/src/components/ProjectsList/ProjectsList.stories.jsx

@@ -15,11 +15,13 @@ export const Default = {
   render: (args) => {
     return (
       <ProjectsList
-        {...args}
-      />
+        onClickTrack={args.onClickTrack}
+        onInsertAllTracks={args.onInsertAllTracks}
+      >
+        {projects.map((project) => (
+          <ProjectsList.Item key={project.id} {...project} />
+        ))}
+      </ProjectsList>
     )
   },
-  args: {
-    projects: projects,
-  },
 }

package/src/components/ProjectsList/utils-stories.js

@@ -5,6 +5,7 @@ export const projects = [
     "artist": "NPR Music: Tiny Desk Concert",
     "cover": null,
     "duration": 30.72,
+    "type": "studio",
     "tracks": [
       {
         "id": "q8pzli0h38ptcxq09h2al",
@@ -29,6 +30,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 19.924,
+    "type": "stems",
     "tracks": [
       {
         "id": "original",
@@ -143,6 +145,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 1062.0343,
+    "type": "master",
     "tracks": []
   },
   {
@@ -151,6 +154,7 @@ export const projects = [
     "artist": null,
     "cover": null,
     "duration": 227.0215,
+    "type": "voice",
     "tracks": [
       {
         "id": "bass",
@@ -170,6 +174,7 @@ export const projects = [
     "artist": "Led Zeppelin",
     "cover": "https://d1-stage.moises.ai/v3/download/moises-stage--tasks2/operations/FILEMETADATA_A/76477978-88b0-4dd1-b729-ad760b9f1b9c/cover.jpeg",
     "duration": 296.8065,
+    "type": "lyrics",
     "tracks": [
       {
         "id": "bass",
@@ -182,5 +187,24 @@ export const projects = [
         "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/e4325003-662f-4aeb-b75a-14797654828a/other.m4a"
       }
     ]
+  },
+  {
+    "id": "3612a6132234-b86c-408e-b23296-b9f0f22dbeb108",
+    "title": "Project without cover and type",
+    "artist": null,
+    "cover": null,
+    "duration": 227.0215,
+    "tracks": [
+      {
+        "id": "bass",
+        "title": "bass",
+        "audioUrl": "https://d2-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/bass.m4a"
+      },
+      {
+        "id": "other",
+        "title": "other",
+        "audioUrl": "https://d3-stage.moises.ai/v3/download/moises-stage--tasks2/operations/SEPARATE_CUSTOM/09239f2d-f93f-4924-86a0-2277e5ba35ea/other.m4a"
+      }
+    ]
   }
 ]

package/src/components/SetlistList/SetlistList.jsx

@@ -45,47 +45,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 +96,14 @@ export const SetlistItem = ({
               {text}
             </Text>
           )}
-          {constructIconToRender}
+          <Text
+            size="1"
+            weight="regular"
+            className={styles.textSubtitle}
+            truncate
+          >
+            {subtitle}
+          </Text>
         </Flex>
       </Flex>
       {dropdownMenuOptions &&
@@ -181,8 +147,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 +274,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

@@ -165,7 +165,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;

package/src/components/TextArea/TextArea.jsx

@@ -31,7 +31,6 @@ export const TextArea = ({
         <TextAreaRadix
           size={size}
           variant={variant}
-          radius="3"
           value={value}
           onChange={onChange}
           placeholder={placeholder}
@@ -41,6 +40,7 @@ export const TextArea = ({
             [styles.variantSoft]: variant === 'soft',
             [styles.disabled]: disabled,
             [styles.focusRing]: focusRing,
+            [styles[`size${size}`]]: size,
           })}
           resize={resize}
           {...props}

package/src/components/TextArea/TextArea.module.css

@@ -32,4 +32,20 @@
 .focusRing:where(:focus-within) {
   outline: 1px solid var(--accent-a8);
   outline-offset: -1px;
+}
+
+.size1 textarea {
+  border-radius: 4px;
+}
+
+.size2 textarea {
+  border-radius: 6px;
+}
+
+.size3 textarea {
+  border-radius: 8px;
+}
+
+.size4 textarea {
+  border-radius: 12px;
 }

package/src/components/TextField/TextField.jsx

@@ -2,7 +2,6 @@ import { Flex, TextField as TextFieldRadix, Text } from '@radix-ui/themes'
 import styles from './TextField.module.css'
 import classNames from 'classnames'
 import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
-import { IconButton as IconButtonComponent } from '../IconButton/IconButton'
 
 export const TextField = ({
   value,
@@ -18,6 +17,8 @@ export const TextField = ({
   focusRing = false,
   startSlot,
   endSlot,
+  error,
+  secondaryText,
   ...props
 }) => {
   // legacy Icon prop is kept for backwards compatibility.
@@ -43,7 +44,9 @@ export const TextField = ({
         className={classNames(styles.TextField, className, {
           [styles.Disabled]: disabled,
           [styles.ReadOnly]: readOnly,
-          [styles.focusRing]: focusRing,
+          [styles.focusRing]: focusRing || error,
+          [styles.errorText]: error,
+          [styles[`size${size}`]]: size,
         })}
         readOnly={readOnly}
         disabled={disabled}
@@ -52,9 +55,18 @@ export const TextField = ({
         {resolvedStartSlot && (
           <TextFieldRadix.Slot>{resolvedStartSlot}</TextFieldRadix.Slot>
         )}
-        {endSlot && <TextFieldRadix.Slot>{endSlot}</TextFieldRadix.Slot>}
+        {endSlot && <div className={styles.endSlot}>{endSlot}</div>}
       </TextFieldRadix.Root>
-    </Flex>
+      {secondaryText && (
+        <Text size='1' weight="regular"
+          className={classNames(styles.secondaryText, {
+            [styles.errorText]: error
+          })}>
+          {secondaryText}
+        </Text>
+      )
+      }
+    </Flex >
   )
 }
 

package/src/components/TextField/TextField.module.css

@@ -9,6 +9,30 @@
   &:where(:focus-within) {
     outline: none !important;
   }
+
+  &.size1 {
+    & input {
+     border-radius: 4px;
+    }
+  }
+
+  &.size2 {
+    & input {
+      border-radius: 6px;
+    }
+  }
+
+  &.size3 {
+    & input {
+      border-radius: 8px;
+    }
+  }
+
+  &.size4 {
+    & input {
+      border-radius: 12px;
+    }
+  }
 }
 
 .icon {
@@ -35,7 +59,27 @@
 }
 
 
-.focusRing:where(:focus-within):not(.ReadOnly):not(.Disabled) {
+.focusRing:where(:focus-within):not(.ReadOnly):not(.Disabled):not(.errorText) {
   outline: 1px solid var(--accent-a8) !important;
   outline-offset: -1px;
+}
+
+.focusRing.errorText {
+  outline: 1px solid var(--error-alpha-11) !important;
+  outline-offset: -1px;
+}
+
+.secondaryText {
+  color: var(--neutral-alpha-9);
+}
+
+.errorText {
+  color: var(--error-alpha-11);
+}
+
+.endSlot {
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/src/components/TextField/TextField.stories.jsx

@@ -123,6 +123,22 @@ const MyComponent = () => (
         defaultValue: { summary: 'false' },
       },
     },
+    error: {
+      control: 'boolean',
+      description: 'Whether the input has an error',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    secondaryText: {
+      control: 'text',
+      description: 'Secondary text to be displayed below the input',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
     startSlot: {
       control: false,
       description: 'Custom content rendered in the leading slot',
@@ -174,6 +190,22 @@ export const Active = {
   },
 }
 
+export const WithError = {
+  args: {
+    ...Default.args,
+    error: true,
+    secondaryText: 'This is an error message',
+  },
+}
+
+export const WithSecondaryText = {
+  args: {
+    ...Default.args,
+    error: false,
+    secondaryText: 'This is a secondary text',
+  },
+}
+
 export const Filled = {
   args: {
     ...Default.args,

package/src/icons/DotsVertical2Icon.jsx

@@ -11,32 +11,31 @@ export const DotsVertical2Icon = ({
     viewBox="0 0 3 11"
     fill="none"
     className={className}
-    {...props}
-  >
+    {...props}>
     <path
       d="M2.18285 1.34142C2.18285 1.80613 1.80613 2.18285 1.34142 2.18285C0.876718 2.18285 0.5 1.80613 0.5 1.34142C0.5 0.876718 0.876718 0.5 1.34142 0.5C1.80613 0.5 2.18285 0.876718 2.18285 1.34142Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 1.34142C1.84133 1.61757 1.61747 1.84142 1.34133 1.84142C1.06519 1.84142 0.841328 1.61757 0.841328 1.34142C0.841328 1.06528 1.06519 0.841423 1.34133 0.841423C1.61747 0.841423 1.84133 1.06528 1.84133 1.34142Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M2.18285 5.30221C2.18285 5.76691 1.80613 6.14363 1.34142 6.14363C0.876718 6.14363 0.5 5.76691 0.5 5.30221C0.5 4.8375 0.876718 4.46079 1.34142 4.46079C1.80613 4.46079 2.18285 4.8375 2.18285 5.30221Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 5.30221C1.84133 5.57835 1.61747 5.80221 1.34133 5.80221C1.06519 5.80221 0.841328 5.57835 0.841328 5.30221C0.841328 5.02607 1.06519 4.80221 1.34133 4.80221C1.61747 4.80221 1.84133 5.02607 1.84133 5.30221Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M2.18285 9.26299C2.18285 9.7277 1.80613 10.1044 1.34142 10.1044C0.876718 10.1044 0.5 9.7277 0.5 9.26299C0.5 8.79829 0.876718 8.42157 1.34142 8.42157C1.80613 8.42157 2.18285 8.79829 2.18285 9.26299Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
     <path
       d="M1.84133 9.26299C1.84133 9.53914 1.61747 9.76299 1.34133 9.76299C1.06519 9.76299 0.841328 9.53914 0.841328 9.26299C0.841328 8.98685 1.06519 8.76299 1.34133 8.76299C1.61747 8.76299 1.84133 8.98685 1.84133 9.26299Z"
       stroke="currentColor"
-    />
+      strokeOpacity="0.709804" />
   </svg>
 )
 

package/src/index.jsx

@@ -150,3 +150,5 @@ export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
 export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
 export { Card as CardWidget } from './components/Card/Card'
 export { ProjectsList } from './components/ProjectsList/ProjectsList'
+
+export { MoreButton } from './components/MoreButton/MoreButton'

package/src/lib/menu/Menu.module.css

@@ -204,20 +204,11 @@
 }
 
 .menuItem[data-state='open'],
-.menuTrigger[data-state='open'],
-.menuTrigger[data-highlighted] {
+.menuTrigger[data-state='open']:not(.showActiveTrigger),
+.menuTrigger[data-highlighted]:not(.showActiveTrigger) {
   background-color: transparent;
 }
 
-.showActiveTrigger {
-  background-color: var(--neutral-alpha-0-50) !important;
-  border-radius: 3px;
-
-  &:hover {
-    background-color: var(--neutral-alpha-2) !important;
-  }
-}
-
 .menuSubTrigger[data-highlighted],
 .menuItem[data-highlighted],
 .menuSubTrigger[data-state='open'] {