@moises.ai/design-system 4.16.2 → 4.16.3

package/package.json

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

package/src/components/DropdownButton/DropdownButton.jsx

@@ -1,14 +1,15 @@
 import { Flex } from '@radix-ui/themes'
-import styles from './DropdownButton.module.css'
 import classNames from 'classnames'
 import { Popover } from 'radix-ui'
-import { Button } from '../Button/Button'
-import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
 import { useState } from 'react'
+import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
+import { Button } from '../Button/Button'
+import styles from './DropdownButton.module.css'
 
 export const DropdownButton = ({
   children,
   trigger,
+  withIconTrigger = true,
   className,
   showSeparator = true,
   onTriggerClick,
@@ -36,13 +37,10 @@ export const DropdownButton = ({
             className={classNames({
               [styles.triggerWithClick]: onTriggerClick,
               [styles.hasLeftColor]: leftColor,
+              [styles.freeWidthTrigger]: !withIconTrigger,
             })}
-            onMouseEnter={() => {
-              setHover(true)
-            }}
-            onMouseLeave={() => {
-              setHover(false)
-            }}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
             onClick={handleTriggerClick}
           >
             <Button
@@ -52,9 +50,9 @@ export const DropdownButton = ({
                 padding: leftColor
                   ? '8px 10px'
                   : showSeparator
-                  ? '0px 8px 0 6px'
-                  : '0 6px',
-                width: '32px',
+                    ? '0px 8px 0 6px'
+                    : '0 6px',
+                width: withIconTrigger ? '32px' : undefined,
                 backgroundColor: leftColor,
                 borderRadius: leftColor ? '3px' : '0px',
               }}
@@ -86,8 +84,8 @@ export const DropdownButton = ({
                   padding: leftColor
                     ? '8px 10px'
                     : showSeparator
-                    ? '0px 8px 0 6px'
-                    : '0 6px',
+                      ? '0px 8px 0 6px'
+                      : '0 6px',
                   backgroundColor: leftColor,
                   borderRadius: leftColor ? '3px' : '0px',
                 }}
@@ -113,7 +111,11 @@ export const DropdownButton = ({
             />
           </div>
         </Popover.Trigger>
-        <Popover.Content className={styles.content} sideOffset={5}>
+        <Popover.Content
+          className={styles.content}
+          sideOffset={5}
+          onCloseAutoFocus={(event) => event.preventDefault()}
+        >
           {children}
         </Popover.Content>
       </Popover.Root>

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

@@ -5,7 +5,7 @@
   align-items: center;
   padding: 4px;
 
- border: 1px solid var(--neutral-alpha-3);
+  border: 1px solid var(--neutral-alpha-3);
 
   &.hasLeftColor {
     padding: 0px 4px 0px 0px;
@@ -13,12 +13,11 @@
 
   &.triggerWithClick {
     cursor: pointer;
-
-  }  
+  }
 }
 
 .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;
@@ -39,8 +38,12 @@
   }
 }
 
+.triggerWithClick.freeWidthTrigger {
+  width: auto;
+}
+
 .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;
@@ -52,7 +55,6 @@
   justify-content: center !important;
   align-items: center;
   padding: 0 4px 0 0;
-
 }
 
 .hover {
@@ -86,7 +88,9 @@
   border-radius: 8px;
   border: 1px solid var(--neutral-alpha-3);
   background: var(--panel-solid);
-  box-shadow: 0px 12px 32px -16px rgba(0, 0, 0, 0.30), 0px 12px 60px 0px rgba(0, 0, 0, 0.15);
+  box-shadow:
+    0px 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0px 12px 60px 0px rgba(0, 0, 0, 0.15);
 
   display: flex;
   width: fit-content;
@@ -163,4 +167,4 @@
 
 .chevron {
   color: var(--neutral-alpha-11);
-}
+}

package/src/components/PlayerBar/PlayerBar.jsx

@@ -0,0 +1,249 @@
+import classNames from 'classnames'
+import {
+  MusicNoteIcon,
+  PlayIcon,
+  More2Icon,
+  Volume2Icon,
+  RewindBarFillIcon,
+  ForwardBarFillIcon,
+  PauseFilledIcon,
+  PlayOnRepeatIcon,
+  KaraokeMicIcon,
+  ChordsDetectionIcon,
+  MetronomeIcon,
+  ChevronDownIcon,
+  Share2Icon,
+  Video2Icon,
+  ChevronUpIcon,
+} from '../../icons'
+import { Text, Flex, IconButton, DropdownMenu, DropdownButton, Separator, Popover } from '../../index'
+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)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`
+}
+
+export const PlayerBar = ({
+  title = 'Untitled track',
+  subtitle,
+  cover,
+  menuOptions,
+  showSlider = true,
+  color = 'gray', // can be 'gray' or 'dark'
+  className,
+  // playback time
+  currentTime = 0,
+  duration = 0,
+  // transport
+  onSeekBackward,
+  onSeekForward,
+  onPlayPause,
+  isPlaying = false,
+  // timeline
+  audio,
+  onSeek,
+  // version dropdown
+  versionTrigger,
+  versionContent,
+  // tempo and pitch dropdown
+  tempoPitchContent,
+  tempo,
+  pitch,
+  // metronome dropdown
+  metronomeContent,
+  metronomeEnabled,
+  onMetronomeToggle,
+  // volume popover
+  volumeContent,
+  onVolumeClick,
+  // lyrics
+  lyricsEnabled,
+  onLyricsToggle,
+  // chords detection
+  chordsEnabled = false,
+  onChordsToggle,
+  // loop
+  loopEnabled,
+  onLoopToggle,
+  // video and share
+  onVideoClick,
+  onShareClick,
+  // expand
+  expanded,
+  onExpandToggle,
+}) => {
+  return (
+    <section
+      aria-label="Player controls"
+      className={classNames(styles.playerBarContainer, className)}
+    >
+      {showSlider && (
+        <PlayerSlider
+          currentTime={currentTime}
+          duration={duration}
+          audio={audio}
+          onSeek={onSeek}
+        />
+      )}
+      <Flex
+        gap="6"
+        className={classNames(styles.playerBar, {
+          [styles.gray]: color === 'gray',
+          [styles.dark]: color === 'dark',
+        })}
+        align="start"
+      >
+        <Flex align="center" gap="3" className={styles.flex2}>
+          <Flex align="center" gap="4">
+            {cover ? (
+              <img src={cover} alt="Cover" className={styles.cover} />
+            ) : (
+              <div className={styles.cover}>
+                <MusicNoteIcon width={16} height={16} />
+              </div>
+            )}
+          </Flex>
+          <Flex gap="3" pt="5px" align="start">
+            <Flex direction="column" gap="0" className={styles.trackMeta}>
+              <Text size="2" weight="medium" className={classNames(styles.trackLabel, styles.neutral12)}>
+                {title}
+              </Text>
+              {subtitle ? (
+                <Text size="1" weight="regular" className={classNames(styles.trackLabel, styles.neutralAlpha10)}>
+                  {subtitle}
+                </Text>
+              ) : null}
+            </Flex>
+            <Flex align="center" gap="2">{menuOptions && (
+              <DropdownMenu
+                trigger={
+                  <IconButton variant="ghost" size="2" className={styles.menuOptionsTrigger}>
+                    <More2Icon width={16} height={16} />
+                  </IconButton>}
+                options={menuOptions}
+              />
+            )}
+              {versionContent && versionTrigger && (
+                <DropdownButton trigger={versionTrigger} showSeparator={false} className={styles.customDropdownButton}>
+                  {versionContent}
+                </DropdownButton>
+              )}
+            </Flex>
+          </Flex>
+
+        </Flex>
+
+        <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>
+            <Flex gap='0' >
+              <IconButton variant="ghost" size="4" onClick={onSeekBackward} className={styles.controlsIconButton}>
+                <RewindBarFillIcon width={30} height={30} />
+              </IconButton>
+              <IconButton variant="ghost" size="4" onClick={onPlayPause} className={styles.controlsIconButton}>
+                {isPlaying ? <PauseFilledIcon width={30} height={30} /> : <PlayIcon width={30} height={30} />}
+              </IconButton>
+              <IconButton variant="ghost" size="4" onClick={onSeekForward} className={styles.controlsIconButton}>
+                <ForwardBarFillIcon width={30} height={30} />
+              </IconButton>
+            </Flex>
+            <IconButton variant="ghost" size="2" onClick={onLoopToggle}>
+              <PlayOnRepeatIcon width={16} height={16}
+                className={classNames({
+                  [styles.actionIconActive]: !loopEnabled,
+                  [styles.actionIconDefault]: loopEnabled
+                })}
+              />
+            </IconButton>
+          </Flex>
+          <Text size="1" weight="regular" className={styles.neutralAlpha10}>
+            {formatTime(currentTime)} / {formatTime(duration)}
+          </Text>
+        </Flex>
+
+        <Flex align="center" gap="3" className={classNames(styles.flex2, styles.actionsContainer)}>
+          {tempoPitchContent && (
+            <DropdownButton trigger={
+              <Text className={styles.neutralAlpha11}>
+                {tempo} bpm
+                <Text className={styles.neutralAlpha6}> / </Text>
+                {pitch}
+              </Text>
+            } showSeparator={false} className={styles.customDropdownButton}>
+              {tempoPitchContent}
+            </DropdownButton>
+          )}
+          {metronomeContent && (
+            <DropdownButton
+              trigger={
+                <MetronomeIcon width={16} height={16}
+                  className={classNames({
+                    [styles.actionIconActive]: !metronomeEnabled,
+                    [styles.actionIconDefault]: metronomeEnabled
+                  })}
+                />
+              }
+              onTriggerClick={onMetronomeToggle}
+            >
+              {metronomeContent}
+            </DropdownButton>
+          )}
+          {onLyricsToggle && (
+            <IconButton variant="ghost" size="2" onClick={onLyricsToggle}>
+              <KaraokeMicIcon width={16} height={16}
+                className={classNames({
+                  [styles.actionIconActive]: !lyricsEnabled,
+                  [styles.actionIconDefault]: lyricsEnabled
+                })}
+              />
+            </IconButton>
+          )}
+          {onChordsToggle && (
+            <IconButton variant="ghost" size="2" onClick={onChordsToggle}>
+              <ChordsDetectionIcon width={16} height={16}
+                className={classNames({
+                  [styles.actionIconActive]: !chordsEnabled,
+                  [styles.actionIconDefault]: chordsEnabled
+                })} />
+            </IconButton>
+          )}
+          {onVideoClick && (
+            <IconButton variant="ghost" size="2" onClick={onVideoClick}>
+              <Video2Icon width={16} height={16} />
+            </IconButton>
+          )}
+
+          <Separator orientation="vertical" />
+
+          {onShareClick && (
+            <IconButton variant="ghost" size="2" onClick={onShareClick}>
+              <Share2Icon width={16} height={16} />
+            </IconButton>
+          )}
+
+          {onExpandToggle && (
+            <IconButton variant="soft" color={expanded ? 'accent' : 'neutral'} size="2" onClick={onExpandToggle}>
+              {expanded ? <ChevronDownIcon width={16} height={16} /> : <ChevronUpIcon width={16} height={16} />}
+            </IconButton>
+          )}
+        </Flex>
+      </Flex>
+    </section >
+  )
+}
+
+PlayerBar.displayName = 'PlayerBar'

package/src/components/PlayerBar/PlayerBar.module.css

@@ -0,0 +1,135 @@
+.playerBar {
+  width: 100%;
+  padding: 20px 20px 12px 20px;
+}
+
+.playerBarContainer {
+  position: relative;
+  width: 100%;
+}
+
+.playerBarContainer:has([data-interacting='true']) {
+  z-index: 1;
+}
+
+.playerBar.gray {
+  background: var(--neutral-2);
+}
+
+.playerBar.dark {
+  background: var(--neutral-1);
+}
+
+.cover {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  aspect-ratio: 1/1;
+  background: var(--neutral-alpha-3);
+  border-radius: 6px;
+}
+
+.trackMeta {
+  min-width: 0;
+}
+
+.trackLabel {
+  display: block;
+  max-width: 89px;
+  min-width: 89px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.neutral12 {
+  color: var(--neutral-12);
+}
+
+.neutralAlpha10 {
+  color: var(--neutral-alpha-10);
+}
+
+.neutralAlpha8 {
+  color: var(--neutral-alpha-8);
+}
+
+.neutralAlpha11 {
+  color: var(--neutral-alpha-11);
+}
+
+.neutralAlpha6 {
+  color: var(--neutral-alpha-6);
+}
+
+.menuOptionsTrigger {
+  svg {
+    color: var(--neutral-alpha-8);
+  }
+
+  &:hover {
+    svg {
+      color: var(--neutral-alpha-12);
+    }
+  }
+}
+
+.customDropdownButton> :first-child {
+  padding: 0px 4px !important;
+  box-shadow: inset 0 0 0 1px var(--neutral-alpha-3) !important;
+  border: 0 !important;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.flex2 {
+  flex: 2;
+}
+
+.controlsIconButton {
+  svg {
+    color: var(--neutral-12)
+  }
+
+
+  &:hover {
+    svg {
+      color: #fff !important;
+    }
+  }
+
+  &:active {
+    svg {
+      color: var(--neutral-10) !important;
+    }
+  }
+
+}
+
+.actionIconActive,
+.actionIconActive:active {
+  color: var(--neutral-11) !important;
+}
+
+.actionIconActive:hover {
+  color: var(--neutral-12) !important;
+}
+
+.actionIconDefault,
+.actionIconDefault:active {
+  color: #0AFFA7 !important;
+}
+
+.actionIconDefault:hover {
+  color: #07db8d !important;
+}
+
+.actionsContainer {
+  padding-top: 8px;
+  justify-content: flex-end;
+}