@moises.ai/design-system 4.18.12 → 4.18.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "4.18.12",
+  "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/SegmentedControl/SegmentedControl.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Flex,
   SegmentedControl as SegmentedControlRadix,
@@ -15,6 +14,9 @@ export const SegmentedControl = ({
   iconProps = {},
   ...props
 }) => {
+  const hasIconWithLabel = items.some((item) => item.icon && item.label)
+  const isIconOnly = items.length > 0 && items.every((item) => item.icon && !item.label)
+
   return (
     <Flex padding="1" width="100%">
       <SegmentedControlRadix.Root
@@ -24,22 +26,31 @@ export const SegmentedControl = ({
         variant="surface"
         radius="medium"
         className={classNames('customSegmentedControl', className, {
-          hasIconSegmentedControl: items.some((item) => item.icon),
+          hasIconSegmentedControl: hasIconWithLabel,
+          isIconOnlySegmentedControl: isIconOnly,
         })}
         {...props}
       >
-        {items.map((item) => (
-          <SegmentedControlRadix.Item
-            key={item.value}
-            value={item.value}
-            className={classNames('customSegmentedControlItem', {
-              hasIcon: item.icon,
-            })}
-          >
-            {item.icon && <item.icon {...iconProps} />}
-            {item.label}
-          </SegmentedControlRadix.Item>
-        ))}
+        {items.map((item) => {
+          const isItemIconOnly = Boolean(item.icon && !item.label)
+
+          return (
+            <SegmentedControlRadix.Item
+              key={item.value}
+              value={item.value}
+              aria-label={
+                isItemIconOnly ? item.ariaLabel || item.value : undefined
+              }
+              className={classNames('customSegmentedControlItem', {
+                hasIcon: item.icon && item.label,
+                isIconOnly: isItemIconOnly,
+              })}
+            >
+              {item.icon && <item.icon {...iconProps} />}
+              {item.label}
+            </SegmentedControlRadix.Item>
+          )
+        })}
       </SegmentedControlRadix.Root>
     </Flex>
   )

package/src/components/SegmentedControl/SegmentedControl.stories.jsx

@@ -2,7 +2,13 @@ import { Flex } from '@radix-ui/themes'
 import { SegmentedControl } from './SegmentedControl'
 import { useState } from 'react'
 
-import { BassIcon, DrumsIcon, ElectricGuitarIcon, PianoIcon } from '../../icons'
+import {
+  AcousticGuitarIcon,
+  BassIcon,
+  DrumsIcon,
+  ElectricGuitarIcon,
+  PianoIcon,
+} from '../../icons'
 
 export default {
   title: 'Components/SegmentedControl',
@@ -30,7 +36,7 @@ import { SegmentedControl } from '@moises.ai/design-system'
   size="2"
 />
 
-// With icons and custom icon props
+// With icons and labels
 <SegmentedControl
   items={[
     { value: 'bass', label: 'Bass', icon: BassIcon },
@@ -40,6 +46,18 @@ import { SegmentedControl } from '@moises.ai/design-system'
   handleTypeChange={handleTypeChange}
   iconProps={{ width: 20, height: 20 }}
 />
+
+// Icon-only (omit label; optionally pass ariaLabel for accessibility)
+<SegmentedControl
+  items={[
+    { value: 'guitar', icon: ElectricGuitarIcon, ariaLabel: 'Electric guitar' },
+    { value: 'piano', icon: PianoIcon, ariaLabel: 'Piano' },
+    { value: 'acoustic', icon: AcousticGuitarIcon, ariaLabel: 'Acoustic guitar' },
+  ]}
+  selectedType={selectedType}
+  handleTypeChange={handleTypeChange}
+  iconProps={{ width: 18, height: 18 }}
+/>
 \`\`\`
 
 ## Component API
@@ -49,8 +67,9 @@ import { SegmentedControl } from '@moises.ai/design-system'
   items: [
     { 
       value: string, // The value of the item
-      label: string, // The label of the item
-      icon?: React.ComponentType // The icon component (optional)
+      label?: string, // The label of the item (omit for icon-only)
+      icon?: React.ComponentType, // The icon component (optional)
+      ariaLabel?: string // Accessible name when using icon-only (falls back to value)
     }
   ],
   selectedType: string, // The value of the selected item
@@ -60,6 +79,8 @@ import { SegmentedControl } from '@moises.ai/design-system'
   iconProps?: object, // Props to pass to all icons (e.g., { width: 20, height: 20 })
 }
 \`\`\`
+
+When every item has an \`icon\` and no \`label\`, the control switches to icon-only layout automatically.
         `,
       },
     },
@@ -131,3 +152,45 @@ export const WithIcons = {
     )
   },
 }
+
+export const IconOnly = {
+  args: {
+    items: [
+      {
+        value: 'guitar',
+        icon: ElectricGuitarIcon,
+        ariaLabel: 'Electric guitar',
+      },
+      { value: 'piano', icon: PianoIcon, ariaLabel: 'Piano' },
+      {
+        value: 'acoustic',
+        icon: AcousticGuitarIcon,
+        ariaLabel: 'Acoustic guitar',
+      },
+    ],
+    iconProps: { width: 18, height: 18 },
+    initialSelectedType: 'guitar',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Omit `label` on every item to enable the icon-only layout. Prefer `ariaLabel` for screen readers.',
+      },
+    },
+  },
+  render: (args) => {
+    const [selectedType, setSelectedType] = useState(args.initialSelectedType)
+    return (
+      <Flex width="200px">
+        <SegmentedControl
+          {...args}
+          selectedType={selectedType}
+          handleTypeChange={(value) => {
+            setSelectedType(value)
+          }}
+        />
+      </Flex>
+    )
+  },
+}

package/src/components/SegmentedControl/SegmentedControl.styles.css

@@ -12,6 +12,10 @@
   height: auto !important;
 }
 
+.isIconOnlySegmentedControl {
+  height: auto !important;
+}
+
 .rt-SegmentedControlIndicator {
   &::before {
     border-radius: 4px !important;
@@ -53,3 +57,17 @@
     padding-top: 16px;
   }
 }
+
+.isIconOnly {
+  .rt-SegmentedControlItemLabel {
+    flex-direction: row;
+    gap: 0;
+    min-width: 0;
+    padding: 8px 12px;
+  }
+
+  svg {
+    display: block;
+    flex-shrink: 0;
+  }
+}

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,