@moises.ai/design-system 3.11.0 → 3.11.1

package/package.json

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

package/src/components/TrackControlsToggle/TrackControlsToggle.module.css

@@ -12,7 +12,7 @@
   width: 20px;
   height: 20px;
 
-  &:focus-visible:not(.disabled){
+  &:focus-visible:not(.disabled) {
     outline: 2px solid var(--neutral-alpha-8);
     outline-offset: 2px;
   }
@@ -29,21 +29,16 @@
 }
 
 .selected.mute {
-  background: #FFC53D;
+  background: #ffc53d;
   color: var(--neutral-1);
 }
 
 .selected.autoMute {
   background: var(--neutral-alpha-2);
-  color: #FFC53D;
-}
-
-.selected.autoMute:hover {
-  background: var(--neutral-alpha-3);
-  cursor: pointer;
+  color: #ffc53d;
 }
 
 .selected.solo {
   background: var(--aqua-10);
   color: var(--neutral-1);
-}
+}

package/src/components/TrackHeader/TrackHeader.jsx

@@ -6,6 +6,7 @@ import {
   More2Icon,
 } from '../../icons'
 import {
+  Box,
   DropdownMenu,
   Flex,
   HorizontalVolume,
@@ -158,7 +159,7 @@ export const TrackHeader = memo(
                       type={
                         isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'
                       }
-                      selected={isMuted}
+                      selected={isMuted || (!isSolo && isAutoMuted)}
                       onClick={onMutedChange}
                     />
                     <TrackControlsToggle
@@ -170,23 +171,29 @@ export const TrackHeader = memo(
                 </Flex>
 
                 {menuOptions && (
-                  <DropdownMenu
-                    trigger={
-                      <IconButton
-                        variant="ghost"
-                        size="1"
-                        className={styles.menuOptionsTrigger}
-                      >
-                        <More2Icon
-                          width={16}
-                          height={16}
-                          className={styles.menuOptionsIcon}
-                        />
-                      </IconButton>
-                    }
-                    options={menuOptions}
-                  />
+                  <Box
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onMouseDown={(e) => e.stopPropagation()}
+                    onTouchStart={(e) => e.stopPropagation()}>
+                    <DropdownMenu
+                      trigger={
+                        <IconButton
+                          variant="ghost"
+                          size="1"
+                          className={styles.menuOptionsTrigger}
+                        >
+                          <More2Icon
+                            width={16}
+                            height={16}
+                            className={styles.menuOptionsIcon}
+                          />
+                        </IconButton>
+                      }
+                      options={menuOptions}
+                    />
+                  </Box>
                 )}
+
               </Flex>
             </div>
 

package/src/components/TrackHeader/TrackHeader.stories.jsx

@@ -1,6 +1,6 @@
-import { TrackHeader } from './TrackHeader'
 import { useState } from 'react'
-import { BassIcon, ElectricGuitarIcon, KeysIcon, DrumsIcon } from '../../icons'
+import { BassIcon, DrumsIcon, ElectricGuitarIcon, KeysIcon } from '../../icons'
+import { TrackHeader } from './TrackHeader'
 export default {
   title: 'Components/TrackHeader',
   component: TrackHeader,
@@ -89,15 +89,24 @@ import { TrackHeader } from '@moises.ai/design-system'
 }
 
 const menuOptions = [
-  { type: 'item', key: 'delete', label: 'Delete', onClick: () => console.log('Delete clicked') },
+  {
+    type: 'item',
+    key: 'delete',
+    label: 'Delete',
+    onClick: () => console.log('Delete clicked'),
+  },
 ]
 
 const instrumentOptions = [
   { type: 'item', key: 'bass', label: 'Bass', icon: <BassIcon /> },
-  { type: 'item', key: 'guitar', label: 'Guitar', icon: <ElectricGuitarIcon /> },
+  {
+    type: 'item',
+    key: 'guitar',
+    label: 'Guitar',
+    icon: <ElectricGuitarIcon />,
+  },
   { type: 'item', key: 'piano', label: 'Piano', icon: <KeysIcon /> },
   { type: 'item', key: 'drums', label: 'Drums', icon: <DrumsIcon /> },
-
 ]
 export const Default = {
   args: {
@@ -110,13 +119,14 @@ export const Default = {
     pan: 0,
     isMuted: false,
     isSolo: false,
+    isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
-    onInstrumentChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
+    onInstrumentChange: () => {},
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
@@ -133,12 +143,13 @@ export const Group = {
     pan: 0,
     isMuted: false,
     isSolo: false,
+    isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(true)
@@ -155,10 +166,10 @@ export const Group = {
           pan={pan}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
         />
         <TrackHeader
@@ -170,10 +181,10 @@ export const Group = {
           pan={pan2}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => { }}
+          onVolumeChange={() => {}}
           onPanChange={setPan2}
-          onMutedChange={() => { }}
-          onSoloChange={() => { }}
+          onMutedChange={() => {}}
+          onSoloChange={() => {}}
           menuOptions={menuOptions}
         />
       </TrackHeader>
@@ -194,11 +205,11 @@ export const Takelanes = {
     isSolo: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => { },
-    onPanChange: () => { },
-    onMutedChange: () => { },
-    onSoloChange: () => { },
-    onOpenChange: () => { },
+    onVolumeChange: () => {},
+    onPanChange: () => {},
+    onMutedChange: () => {},
+    onSoloChange: () => {},
+    onOpenChange: () => {},
   },
   render: (args) => (
     <TrackHeader {...args}>