@moises.ai/design-system 3.11.6 → 3.11.8

package/package.json

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

@@ -136,7 +136,7 @@ export const TrackHeader = memo(
                           </IconButton>
                         }
                         options={instrumentOptions}
-                        onValueChange={onInstrumentChange}
+                        onSelectionChange={onInstrumentChange}
                         side="bottom"
                         align="start"
                       />

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,11 +123,10 @@ export const Default = {
     isAutoMuted: false,
     compact: false,
     menuOptions,
-    onVolumeChange: () => {},
-    onPanChange: () => {},
-    onMutedChange: () => {},
-    onSoloChange: () => {},
-    onInstrumentChange: () => {},
+    onVolumeChange: () => { },
+    onPanChange: () => { },
+    onMutedChange: () => { },
+    onSoloChange: () => { },
     instrumentOptions,
     instrumentSelected: instrumentOptions[0],
   },
@@ -136,10 +135,15 @@ export const Default = {
     const [isRecord, setIsRecord] = useState(false)
     const [isMuted, setIsMuted] = useState(args.isMuted)
     const [isSolo, setIsSolo] = useState(args.isSolo)
+    const [instrumentSelected, setInstrumentSelected] = useState(
+      args.instrumentSelected,
+    )
 
     return (
       <TrackHeader
         {...args}
+        instrumentSelected={instrumentSelected}
+        onInstrumentChange={setInstrumentSelected}
         deviceOptions={[
           { value: 'mic', label: 'Built-in Microphone' },
           { value: 'interface', label: 'Audio Interface' },
@@ -173,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
@@ -193,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"
@@ -208,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>
     )
@@ -232,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"
@@ -253,6 +273,9 @@ export const Takelanes = {
         showVolumeControls={false}
         isGrouped
         menuOptions={menuOptions}
+        instrumentOptions={args.instrumentOptions}
+        instrumentSelected={args.instrumentSelected}
+        onInstrumentChange={args.onInstrumentChange}
       />
     </TrackHeader>
   ),