@moises.ai/design-system 4.16.5 → 4.16.7

package/package.json

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

package/src/colors/custom-styles.css

@@ -155,6 +155,7 @@
 
   /* Error */
   --error-alpha-5: rgba(255, 32, 71, 0.34);
+  --error-alpha-10: #EC5D5E;
   --error-alpha-11: #FF9592;
   --error-alpha-12: #FFD1D9;
 

package/src/components/DropdownButton/DropdownButton.jsx

@@ -19,6 +19,8 @@ export const DropdownButton = ({
   ...props
 }) => {
   const [hover, setHover] = useState(false)
+  const [isTriggerButtonFocused, setIsTriggerButtonFocused] = useState(false)
+  const [isChevronFocused, setIsChevronFocused] = useState(false)
 
   const handleTriggerClick = (e) => {
     if (onTriggerClick) {
@@ -28,20 +30,38 @@ export const DropdownButton = ({
     }
   }
 
+  const handleTriggerButtonFocus = () => {
+    setIsTriggerButtonFocused(true)
+  }
+  const handleTriggerButtonBlur = () => {
+    setIsTriggerButtonFocused(false)
+  }
+  const handleChevronFocus = () => {
+    setIsChevronFocused(true)
+  }
+  const handleChevronBlur = () => {
+    setIsChevronFocused(false)
+  }
+
+  const ChevronTrigger = onTriggerClick ? 'button' : 'div'
+
   return (
     <Flex className={classNames(styles.container, className)} {...props}>
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={true}>
+      <Popover.Root open={open} onOpenChange={onOpenChange} modal={true} >
         {onTriggerClick && (
           <Flex
             as="button"
             className={classNames({
               [styles.triggerWithClick]: onTriggerClick,
+              [styles.triggerWithClickFocused]: isTriggerButtonFocused,
               [styles.hasLeftColor]: leftColor,
               [styles.freeWidthTrigger]: !withIconTrigger,
             })}
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
             onClick={handleTriggerClick}
+            onFocus={handleTriggerButtonFocus}
+            onBlur={handleTriggerButtonBlur}
           >
             <Button
               variant="ghost"
@@ -55,6 +75,7 @@ export const DropdownButton = ({
                 width: withIconTrigger ? '32px' : undefined,
                 backgroundColor: leftColor,
                 borderRadius: leftColor ? '3px' : '0px',
+                outline: 'none',
               }}
             >
               {trigger}
@@ -62,12 +83,14 @@ export const DropdownButton = ({
           </Flex>
         )}
         <Popover.Trigger asChild>
-          <div
+          <ChevronTrigger
+            type={onTriggerClick ? 'button' : undefined}
             className={classNames({
               [styles.hover]: hover,
               [styles.hasLeftColor]: leftColor,
               [styles.hasTriggerWithClick]: onTriggerClick,
               [styles.hasTriggerWithoutClick]: !onTriggerClick,
+              [styles.chevronFocused]: isChevronFocused,
             })}
             onMouseEnter={() => {
               setHover(true)
@@ -75,6 +98,8 @@ export const DropdownButton = ({
             onMouseLeave={() => {
               setHover(false)
             }}
+            onFocus={handleChevronFocus}
+            onBlur={handleChevronBlur}
           >
             {!onTriggerClick && (
               <Button
@@ -88,6 +113,7 @@ export const DropdownButton = ({
                       : '0 6px',
                   backgroundColor: leftColor,
                   borderRadius: leftColor ? '3px' : '0px',
+                  outline: 'none',
                 }}
               >
                 {trigger}
@@ -109,7 +135,7 @@ export const DropdownButton = ({
                 [styles.hover]: hover,
               })}
             />
-          </div>
+          </ChevronTrigger>
         </Popover.Trigger>
         <Popover.Content
           className={styles.content}

package/src/components/DropdownButton/DropdownButton.module.css

@@ -14,10 +14,16 @@
   &.triggerWithClick {
     cursor: pointer;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
 }
 
 .triggerWithClick {
-  border-width: 1px 0 1px 1px; /* top right bottom left */
+  border-width: 1px 0 1px 1px;
+  /* top right bottom left */
   border-style: solid;
   border-color: var(--neutral-alpha-3);
   display: flex;
@@ -36,18 +42,36 @@
   &:hover button {
     color: var(--neutral-alpha-12) !important;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
+}
+
+.triggerWithClickFocused,
+.chevronFocused {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
 }
 
 .triggerWithClick.freeWidthTrigger {
   width: auto;
 }
 
+/* quando tiver active no triggerWithClick */
+.triggerWithClick:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .hasTriggerWithClick {
-  border-width: 1px 1px 1px 0; /* top right bottom left */
+  border-width: 1px 1px 1px 0;
+  /* top right bottom left */
   border-style: solid;
   border-color: var(--neutral-alpha-3);
   display: flex;
-  height: 30px;
+  height: 32px;
 
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -55,11 +79,22 @@
   justify-content: center !important;
   align-items: center;
   padding: 0 4px 0 0;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
 }
 
 .hover {
   color: var(--neutral-alpha-12) !important;
   cursor: pointer;
+
 }
 
 .trigger.hover button {
@@ -94,7 +129,7 @@
 
   display: flex;
   width: fit-content;
-  padding: 12px 16px;
+  padding: 12px 16px 16px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -103,6 +138,7 @@
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
+
 }
 
 .content[data-side='top'] {
@@ -121,11 +157,17 @@
   animation-name: slideRightAndFade;
 }
 
+.content:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
     transform: translateY(2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -137,6 +179,7 @@
     opacity: 0;
     transform: translateX(-2px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -148,6 +191,7 @@
     opacity: 0;
     transform: translateY(-2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -159,6 +203,7 @@
     opacity: 0;
     transform: translateX(2px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -167,4 +212,4 @@
 
 .chevron {
   color: var(--neutral-alpha-11);
-}
+}

package/src/components/PlayerBar/PlayerBar.jsx

@@ -20,7 +20,6 @@ import { Text, Flex, IconButton, DropdownMenu, DropdownButton, Separator, Popove
 import styles from './PlayerBar.module.css'
 import { PlayerSlider } from '../PlayerSlider/PlayerSlider'
 
-
 const formatTime = (time) => {
   const totalSeconds = Math.floor(time)
   const minutes = Math.floor(totalSeconds / 60)
@@ -140,16 +139,18 @@ export const PlayerBar = ({
 
         <Flex className={styles.flex1} direction="column" gap="0" align="center">
           <Flex align="center" gap="3">
-            <Popover.Root>
-              <Popover.Trigger>
-                <IconButton variant="ghost" size="2" onClick={onVolumeClick}>
-                  <Volume2Icon width={16} height={16} />
-                </IconButton>
-              </Popover.Trigger>
-              <Popover.Content>
-                {volumeContent}
-              </Popover.Content>
-            </Popover.Root>
+            {volumeContent && (
+              <Popover.Root>
+                <Popover.Trigger>
+                  <IconButton variant="ghost" size="2" onClick={onVolumeClick}>
+                    <Volume2Icon width={16} height={16} />
+                  </IconButton>
+                </Popover.Trigger>
+                <Popover.Content>
+                  {volumeContent}
+                </Popover.Content>
+              </Popover.Root>
+            )}
             <Flex gap='0' >
               <IconButton variant="ghost" size="4" onClick={onSeekBackward} className={styles.controlsIconButton}>
                 <RewindBarFillIcon width={30} height={30} />

package/src/components/PlayerBar/PlayerBar.stories.jsx

@@ -2,6 +2,9 @@ import { useState } from 'react'
 import { Flex } from '@radix-ui/themes'
 import { Text } from '../../index'
 import { PlayerBar } from './PlayerBar'
+import { PlayerMasterVolume } from '../PlayerMasterVolume/PlayerMasterVolume'
+import { PlayerTempoPitch } from '../PlayerTempoPitch/PlayerTempoPitch'
+import { PlayerSmartMetronome } from '../PlayerSmartMetronome/PlayerSmartMetronome'
 
 const SAMPLE_AUDIO =
   'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a'
@@ -17,6 +20,22 @@ function StatefulPlayerBar(args) {
   const [lyrics, setLyrics] = useState(args.lyricsEnabled ?? false)
   const [metronome, setMetronome] = useState(args.metronomeEnabled ?? false)
   const [expanded, setExpanded] = useState(args.expanded ?? false)
+  const [volume, setVolume] = useState(args.volume ?? 1)
+  const [tempo, setTempo] = useState(args.tempo ?? 120)
+  const [pitch, setPitch] = useState(args.pitch ?? 'C#')
+  const [tuning, setTuning] = useState(args.tuning ?? 440)
+  const [subDivision, setSubDivision] = useState(args.subDivision ?? '1x')
+  const [metronomeVolume, setMetronomeVolume] = useState(args.metronomeVolume ?? 50)
+  const [countIn, setCountIn] = useState(args.countIn ?? 'off')
+  const [panValue, setPanValue] = useState(args.panValue ?? 0)
+  const [stems, setStems] = useState(
+    args.stems ?? [
+      { name: 'Vocals', volume: 80 },
+      { name: 'Drums', volume: 65 },
+      { name: 'Bass', volume: 70 },
+      { name: 'Others', volume: 55 },
+    ],
+  )
 
   const seekBy = (delta) => {
     setCurrentTime((time) =>
@@ -36,6 +55,82 @@ function StatefulPlayerBar(args) {
       lyricsEnabled={lyrics}
       metronomeEnabled={metronome}
       expanded={expanded}
+      tempo={tempo}
+      pitch={pitch}
+      volumeContent={
+        <PlayerMasterVolume
+          volume={volume}
+          stems={stems}
+          onVolumeChange={([value]) => {
+            setVolume(value)
+            args.onVolumeChange?.([value])
+          }}
+          onStemVolumeChange={(name, value) => {
+            setStems((prev) =>
+              prev.map((stem) =>
+                stem.name === name ? { ...stem, volume: value } : stem,
+              ),
+            )
+            args.onStemVolumeChange?.(name, value)
+          }}
+        />
+      }
+      tempoPitchContent={
+        <PlayerTempoPitch
+          tempo={tempo}
+          pitch={pitch}
+          tuning={tuning}
+          onTempoChange={(value) => {
+            setTempo(value)
+            args.onTempoChange?.(value)
+          }}
+          onPitchChange={(value) => {
+            setPitch(value)
+            args.onPitchChange?.(value)
+          }}
+          onTuningChange={(value) => {
+            setTuning(value)
+            args.onTuningChange?.(value)
+          }}
+          onRefresh={() => {
+            setTempo(120)
+            setPitch('C#')
+            setTuning(440)
+            args.onTempoPitchRefresh?.()
+          }}
+        />
+      }
+      metronomeContent={
+        <PlayerSmartMetronome
+          subDivision={subDivision}
+          volume={metronomeVolume}
+          countIn={countIn}
+          panValue={panValue}
+          onSubDivisionChange={(value) => {
+            setSubDivision(value)
+            args.onSubDivisionChange?.(value)
+          }}
+          onVolumeChange={(value) => {
+            setMetronomeVolume(value)
+            args.onMetronomeVolumeChange?.(value)
+          }}
+          onCountInChange={(value) => {
+            setCountIn(value)
+            args.onCountInChange?.(value)
+          }}
+          onPanChange={(value) => {
+            setPanValue(value)
+            args.onPanChange?.(value)
+          }}
+          onRefresh={() => {
+            setSubDivision('1x')
+            setMetronomeVolume(50)
+            setCountIn('off')
+            setPanValue(0)
+            args.onMetronomeRefresh?.()
+          }}
+        />
+      }
       onPlayPause={() => setIsPlaying((value) => !value)}
       onSeek={setCurrentTime}
       onSeekBackward={() => seekBy(-10)}
@@ -145,13 +240,51 @@ Use it as a controlled component: pass playback state through props and update i
     tempo: {
       description: 'Tempo value shown in the tempo/pitch dropdown trigger.',
       table: { type: { summary: 'number | string' } },
-      control: 'text',
+      control: 'number',
     },
     pitch: {
       description: 'Pitch value shown in the tempo/pitch dropdown trigger.',
       table: { type: { summary: 'string' } },
       control: 'text',
     },
+    tuning: {
+      description: 'Reference tuning in Hz for PlayerTempoPitch.',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 440 } },
+      control: 'select',
+      options: [440, 442, 444, 446],
+    },
+    volume: {
+      description: 'Master gain passed to PlayerMasterVolume.',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 1 } },
+      control: { type: 'range', min: 0, max: 2, step: 0.01 },
+    },
+    subDivision: {
+      description: 'Metronome sub-division for PlayerSmartMetronome.',
+      table: { type: { summary: "'0.5x' | '1x' | '2x'" }, defaultValue: { summary: '1x' } },
+      control: 'select',
+      options: ['0.5x', '1x', '2x'],
+    },
+    metronomeVolume: {
+      description: 'Metronome volume percentage (0–100).',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 50 } },
+      control: { type: 'range', min: 0, max: 100, step: 1 },
+    },
+    countIn: {
+      description: 'Metronome count-in setting.',
+      table: { type: { summary: "'off' | '1 bar' | '2 bars'" }, defaultValue: { summary: 'off' } },
+      control: 'select',
+      options: ['off', '1 bar', '2 bars'],
+    },
+    panValue: {
+      description: 'Metronome pan position.',
+      table: { type: { summary: 'number' }, defaultValue: { summary: 0 } },
+      control: { type: 'range', min: -1, max: 1, step: 0.01 },
+    },
+    stems: {
+      description: 'Stem rows for PlayerMasterVolume.',
+      table: { type: { summary: '{ name: string, volume: number }[]' } },
+      control: false,
+    },
     loopEnabled: {
       description: 'Whether the loop control is active.',
       table: { type: { summary: 'boolean' } },
@@ -195,6 +328,11 @@ Use it as a controlled component: pass playback state through props and update i
       table: { type: { summary: 'ReactNode' } },
       control: false,
     },
+    volumeContent: {
+      description: 'Content rendered inside the volume popover.',
+      table: { type: { summary: 'ReactNode' } },
+      control: false,
+    },
     tempoPitchContent: {
       description: 'Content rendered inside the tempo/pitch dropdown.',
       table: { type: { summary: 'ReactNode' } },
@@ -205,10 +343,60 @@ Use it as a controlled component: pass playback state through props and update i
       table: { type: { summary: 'ReactNode' } },
       control: false,
     },
-    volumeContent: {
-      description: 'Content rendered inside the volume popover.',
-      table: { type: { summary: 'ReactNode' } },
-      control: false,
+    onVolumeChange: {
+      description: 'Called with `[gain]` when the master fader moves.',
+      table: { type: { summary: '([gain: number]) => void' } },
+      action: 'volume changed',
+    },
+    onStemVolumeChange: {
+      description: 'Called when a stem slider changes.',
+      table: { type: { summary: '(name: string, value: number) => void' } },
+      action: 'stem volume changed',
+    },
+    onTempoChange: {
+      description: 'Called when tempo changes in PlayerTempoPitch.',
+      table: { type: { summary: '(tempo: number | "") => void' } },
+      action: 'tempo changed',
+    },
+    onPitchChange: {
+      description: 'Called when pitch changes in PlayerTempoPitch.',
+      table: { type: { summary: '(pitch: string) => void' } },
+      action: 'pitch changed',
+    },
+    onTuningChange: {
+      description: 'Called when tuning changes in PlayerTempoPitch.',
+      table: { type: { summary: '(tuning: number) => void' } },
+      action: 'tuning changed',
+    },
+    onTempoPitchRefresh: {
+      description: 'Called when PlayerTempoPitch refresh is clicked.',
+      table: { type: { summary: '() => void' } },
+      action: 'tempo/pitch refreshed',
+    },
+    onSubDivisionChange: {
+      description: 'Called when metronome sub-division changes.',
+      table: { type: { summary: '(value: string) => void' } },
+      action: 'sub-division changed',
+    },
+    onMetronomeVolumeChange: {
+      description: 'Called when metronome volume changes.',
+      table: { type: { summary: '(value: number) => void' } },
+      action: 'metronome volume changed',
+    },
+    onCountInChange: {
+      description: 'Called when metronome count-in changes.',
+      table: { type: { summary: '(value: string) => void' } },
+      action: 'count-in changed',
+    },
+    onPanChange: {
+      description: 'Called when metronome pan changes.',
+      table: { type: { summary: '(value: number) => void' } },
+      action: 'pan changed',
+    },
+    onMetronomeRefresh: {
+      description: 'Called when PlayerSmartMetronome refresh is clicked.',
+      table: { type: { summary: '() => void' } },
+      action: 'metronome refreshed',
     },
     onPlayPause: {
       description: 'Called when the main play/pause button is clicked.',
@@ -295,9 +483,6 @@ const defaultArgs = {
   ],
   versionTrigger: <Text>v6</Text>,
   versionContent: <Text>Version 6</Text>,
-  tempoPitchContent: <Text>120 bpm / 4/4</Text>,
-  metronomeContent: <Text>Metronome</Text>,
-  volumeContent: <Text>Volume</Text>,
   onVolumeClick: () => { },
   onVideoClick: () => { },
   onShareClick: () => { },

package/src/components/PlayerMasterVolume/PlayerMasterVolume.jsx

@@ -0,0 +1,54 @@
+import styles from './PlayerMasterVolume.module.css'
+import classNames from 'classnames'
+import { Text, Flex, InputLevelMeter, Button, Separator, SliderLibrary } from '../../index'
+import { ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons'
+import { useState } from 'react'
+
+export const PlayerMasterVolume = ({
+  onVolumeChange,
+  onStemVolumeChange,
+  volume = 1,
+  stems,
+
+}) => {
+  const [stemsOpen, setStemsOpen] = useState(false)
+
+  return (
+    <Flex className={styles.PlayerMasterVolume} direction="column">
+      <Flex direction="column" gap="4">
+        <Text size="3" weight="medium" className={styles.white}>
+          Master Volume
+        </Text>
+        <Flex gap="4" align="center">
+          <InputLevelMeter
+            linear={[0, 0]}
+            volume={volume}
+            onVolumeChange={onVolumeChange}
+          />
+          <Button variant="soft" size="1">−∞dB</Button>
+        </Flex>
+        {stems?.length > 0 && <Separator size='4' />}
+      </Flex>
+      {stems?.length > 0 && (
+        <>
+          <Flex width='100%' justify='between' mt="2" as="button" align="center" onClick={() => setStemsOpen(!stemsOpen)} className={styles.accordionButton}>
+            <Text size="2" className={styles.neutralAlpha11}>Stems</Text>
+            {stemsOpen ? <ChevronUpIcon className={styles.neutralAlpha9} width={16} height={16} /> : <ChevronDownIcon className={styles.neutralAlpha9} width={16} height={16} />}
+          </Flex>
+          {stemsOpen && (
+            <Flex direction="column" gap="3" className={styles.accordionContent}>
+              {stems.map((stem) => (
+                <Flex width='100%' gap="3" key={stem.name}>
+                  <Text size="2" className={classNames(styles.neutralAlpha11, styles.flex1)}>{stem.name}</Text>
+                  <SliderLibrary value={stem.volume} onValueChange={(value) => onStemVolumeChange?.(stem.name, value)} className={styles.flex2} />
+                </Flex>
+              ))}
+            </Flex>
+          )}
+        </>
+      )}
+    </Flex>
+  )
+}
+
+PlayerMasterVolume.displayName = 'PlayerMasterVolume'

package/src/components/PlayerMasterVolume/PlayerMasterVolume.module.css

@@ -0,0 +1,31 @@
+.PlayerMasterVolume {
+  min-width: 286px;
+}
+
+.neutralAlpha11 {
+  color: var(--neutral-alpha-11);
+}
+
+.accordionButton {
+  padding: 6px 0;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.neutralAlpha9 {
+  color: var(--neutral-alpha-9);
+}
+
+.accordionContent {
+  padding: 12px 0 0 0;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.flex2 {
+  flex: 2;
+}