@moises.ai/design-system 4.18.13 → 4.18.14

package/package.json

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

package/src/components/ProjectsList/ProjectTrackVoice/ProjectTrackVoice.jsx

@@ -3,12 +3,12 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { ArrowLeftIcon } from '../../../icons'
 import { ProjectsListContext } from '../context'
 import { NumberPicker } from '../../NumberPicker/NumberPicker'
-import { UserIcon } from '../../../icons'
+import { UserVoiceIcon } from '../../../icons'
 import { Button } from '../../Button/Button'
 import styles from './ProjectTrackVoice.module.css'
 
 const ProjectTrackVoice = ({ ...props }) => {
-  const { onClickTrack, onChangeTransfer, projects, labels = {} } = useContext(ProjectsListContext)
+  const { onClickTrack, onChangeTransfer, projects, labels = {}, showCover = true } = useContext(ProjectsListContext)
   const { projectId, id, title, cover, transfers, audioUrl, loading: _loading } = props
 
   const hasTransfers = useMemo(() => transfers && transfers.length > 0, [transfers])
@@ -82,9 +82,9 @@ const ProjectTrackVoice = ({ ...props }) => {
       >
         <div className={styles.cover}>
           <Flex className={styles.coverImage}>
-            {cover
+            {cover && showCover
               ? <img src={cover} alt={title} width={48} height={48} />
-              : <UserIcon width={16} height={16} />
+              : <UserVoiceIcon width={16} height={16} />
             }
           </Flex>
           <ArrowLeftIcon width={16} height={16} className={styles.iconArrowLeft} />

package/src/components/ProjectsList/ProjectsList.jsx

@@ -12,7 +12,8 @@ export const ProjectsList = ({
   onInsertAllTracks,
   onProjectClick,
   onChangeTransfer,
-  labels = {}
+  labels = {},
+  showCover = true
 }) => {
   const [openedItem, setOpenedItem] = useState(null)
 
@@ -27,6 +28,7 @@ export const ProjectsList = ({
         openedItem,
         setOpenedItem,
         labels,
+        showCover,
       }}
     >
       <Flex direction="column" width="100%">

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

@@ -251,6 +251,37 @@ export const WithTrackVoice = {
   },
 }
 
+export const WithTrackVoiceHiddenCover = {
+  args: {
+    ...WithTrackVoice.args,
+    showCover: false,
+  },
+  render: (args) => {
+    return (
+      <Flex width="300px">
+        <ProjectsList
+          projects={args.projects}
+          onClickTrack={args.onClickTrack}
+          onInsertAllTracks={args.onInsertAllTracks}
+          onProjectClick={args.onProjectClick}
+          onChangeTransfer={args.onChangeTransfer}
+          showCover={args.showCover}
+        >
+          {({ projectId, tracks }) =>
+            tracks.map((track) => (
+              <ProjectsList.TrackVoice
+                projectId={projectId}
+                key={track.id}
+                {...track}
+              />
+            ))
+          }
+        </ProjectsList>
+      </Flex>
+    )
+  },
+}
+
 export const WithTrackVoiceStates = {
   args: {
     projects: [{

package/src/components/ProjectsList/context.js

@@ -9,4 +9,5 @@ export const ProjectsListContext = createContext({
   openedItem: null,
   setOpenedItem: () => { },
   labels: {},
+  showCover: true,
 })

package/src/components/Select/Select.jsx

@@ -16,6 +16,7 @@ export const Select = ({
   title,
   onChange,
   defaultValue,
+  value,
   items,
   info,
   size = '2',
@@ -28,6 +29,10 @@ export const Select = ({
   placeholder = null,
   ...props
 }) => {
+  const resolvedValue = value === null ? '' : value
+  const resolvedDefaultValue =
+    defaultValue === null ? undefined : defaultValue
+
   return (
     <Box width="100%">
       {title && (
@@ -45,7 +50,8 @@ export const Select = ({
       <Flex direction="column" maxWidth={maxWidth}>
         <SelectRadix.Root
           onValueChange={onChange}
-          defaultValue={defaultValue}
+          defaultValue={resolvedDefaultValue}
+          value={resolvedValue}
           className={classNames(className)}
           disabled={disabled || readOnly}
           {...props}
@@ -54,21 +60,12 @@ export const Select = ({
             variant={variant}
             color="gray"
             size={size}
+            placeholder={placeholder}
             className={classNames(styles.selectTrigger, {
               [styles.ghost]: variant === 'ghost',
               [styles.soft]: variant === 'soft',
             })}
-          >
-            {defaultValue === null ? (
-              <Text
-                size={size}
-                ml="1"
-                style={{ color: 'var(--neutral-alpha-9)' }}
-              >
-                {placeholder}
-              </Text>
-            ) : undefined}
-          </SelectRadix.Trigger>
+          />
           <SelectRadix.Content
             position="popper"
             className={styles.selectContent}

package/src/components/Select/Select.module.css

@@ -83,6 +83,11 @@
   background-color: var(--neutral-alpha-4);
 }
 
+.selectTrigger.soft[data-placeholder],
+.selectTrigger.ghost[data-placeholder] {
+  color: var(--neutral-alpha-9);
+}
+
 /* Ghost variant */
 .selectTrigger.ghost {
   background-color: transparent;

package/src/components/Select/Select.stories.jsx

@@ -46,7 +46,9 @@ import { Select } from '@moises.ai/design-system'
   }[], // List of items to display in the select
   info?: string, // Optional info text displayed as a tooltip
   onChange: (value: string) => void, // Function called when selection changes
-  defaultValue?: string, // Initial selected value
+  defaultValue?: string, // Initial selected value (uncontrolled)
+  value?: string, // Selected value (controlled). Omit or pass undefined when empty
+  placeholder?: string, // Shown when no value is selected
   size?: '1' | '2' | '3', // Size variant of the select (default: '2')
   variant?: 'soft' | 'ghost', // Visual style variant (default: 'soft')
   disabled?: boolean, // Whether the select is disabled (default: false)
@@ -255,12 +257,12 @@ export const WithAIDetected = {
 }
 
 const SelectWithPlaceholderModule = () => {
-  const [selected, setSelected] = useState(null)
+  const [selected, setSelected] = useState('')
   return (
     <Select
       title="Instrument"
       size="2"
-      defaultValue={selected}
+      value={selected}
       items={[
         { value: 'bass', label: 'Bass' },
         { value: 'guitar', label: 'Guitar' },

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

@@ -16,7 +16,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--neutral-alpha-8);
-    outline-offset: 2px;
+    outline-offset: -2px;
   }
 
   &:hover,