@moises.ai/design-system 3.11.7 → 3.11.8

package/package.json

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

package/src/components/TrackHeader/TrackHeader.module.css

@@ -173,13 +173,19 @@ background-color: rgba(17, 17, 19);
 
     .trackContent {
       padding-left: 0;
-    background-color: var(--neutral-alpha-2);
+      background-color: var(--neutral-alpha-2);
+      border-left-style: solid;
+      border-left-color: var(--neutral-alpha-3);
+      border-left-width: 1px;
       .toggleOpenButton {
         display: none;
       }
+      .line {
+        padding-left: var(--space-4);
+      }
     
       .name {
-        padding-left: var(--space-4);
+        /* padding-left: var(--space-4); */
         background: linear-gradient(
           90deg,
           var(--neutral-alpha-11) 95%,

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

@@ -123,10 +123,10 @@ export const Default = {
     isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => {},
-    onPanChange: () => {},
-    onMutedChange: () => {},
-    onSoloChange: () => {},
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
@@ -177,17 +177,20 @@ export const Group = {
     isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => {},
-    onPanChange: () => {},
-    onMutedChange: () => {},
-    onSoloChange: () => {},
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
+    instrumentOptions,
+    instrumentSelected: instrumentOptions[0],
+    onInstrumentChange: () => { },
   },
   render: (args) => {
     const [isOpen, setIsOpen] = useState(true)
     const [pan, setPan] = useState(-0.3)
     const [pan2, setPan2] = useState(-0.3)
     return (
-      <TrackHeader {...args} isOpen={isOpen} onOpenChange={setIsOpen}>
+      <TrackHeader {...args} isOpen={isOpen} onOpenChange={setIsOpen} instrumentSelected={args.instrumentSelected} onInstrumentChange={args.onInstrumentChange}>
         <TrackHeader
           title="Grouped Track"
           isGrouped
@@ -197,11 +200,14 @@ export const Group = {
           pan={pan}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => {}}
+          onVolumeChange={() => { }}
           onPanChange={setPan}
-          onMutedChange={() => {}}
-          onSoloChange={() => {}}
+          onMutedChange={() => { }}
+          onSoloChange={() => { }}
           menuOptions={menuOptions}
+          instrumentOptions={args.instrumentOptions}
+          instrumentSelected={args.instrumentSelected}
+          onInstrumentChange={args.onInstrumentChange}
         />
         <TrackHeader
           title="Grouped Track"
@@ -212,11 +218,14 @@ export const Group = {
           pan={pan2}
           isMuted={false}
           isSolo={false}
-          onVolumeChange={() => {}}
+          onVolumeChange={() => { }}
           onPanChange={setPan2}
-          onMutedChange={() => {}}
-          onSoloChange={() => {}}
+          onMutedChange={() => { }}
+          onSoloChange={() => { }}
           menuOptions={menuOptions}
+          instrumentOptions={args.instrumentOptions}
+          instrumentSelected={args.instrumentSelected}
+          onInstrumentChange={args.onInstrumentChange}
         />
       </TrackHeader>
     )
@@ -236,20 +245,27 @@ export const Takelanes = {
     isSolo: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => {},
-    onPanChange: () => {},
-    onMutedChange: () => {},
-    onSoloChange: () => {},
-    onOpenChange: () => {},
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
+    onOpenChange: () => { },
+    instrumentOptions,
+    instrumentSelected: instrumentOptions[0],
+    onInstrumentChange: () => { },
+
   },
   render: (args) => (
-    <TrackHeader {...args}>
+    <TrackHeader {...args} instrumentSelected={args.instrumentSelected} onInstrumentChange={args.onInstrumentChange}>
       <TrackHeader
         title="Take Lane 1"
         showPan={false}
         showVolumeControls={false}
         isGrouped
         menuOptions={menuOptions}
+        instrumentOptions={args.instrumentOptions}
+        instrumentSelected={args.instrumentSelected}
+        onInstrumentChange={args.onInstrumentChange}
       />
       <TrackHeader
         title="Take Lane 1"
@@ -257,6 +273,9 @@ export const Takelanes = {
         showVolumeControls={false}
         isGrouped
         menuOptions={menuOptions}
+        instrumentOptions={args.instrumentOptions}
+        instrumentSelected={args.instrumentSelected}
+        onInstrumentChange={args.onInstrumentChange}
       />
     </TrackHeader>
   ),