@moises.ai/design-system 4.16.9 → 4.16.11

package/package.json

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

package/src/components/DropdownButton/DropdownButton.jsx

@@ -6,6 +6,13 @@ import { ChevronDownIcon } from '../../icons/ChevronDownIcon'
 import { Button } from '../Button/Button'
 import styles from './DropdownButton.module.css'
 
+/**
+ * @deprecated Use `ToolsDropdown` instead. `DropdownButton` will be removed in a
+ * future release. The new component is built on Radix DropdownMenu and supports the
+ * same trigger/chevron split, controlled open state, and custom panel content.
+ *
+ * @see ToolsDropdown
+ */
 export const DropdownButton = ({
   children,
   trigger,

package/src/components/DropdownButton/DropdownButton.stories.jsx

@@ -7,13 +7,16 @@ import { Stop2Icon } from '../../icons/Stop2Icon'
 import { RecordIcon } from '../../icons/RecordIcon'
 
 export default {
-  title: 'Components/DropdownButton',
+  title: 'Deprecated/DropdownButton',
   component: DropdownButton,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
         component: `
+> **Deprecated:** Use [\`ToolsDropdown\`](/docs/components-toolsdropdown--docs) instead.
+> \`DropdownButton\` will be removed in a future release.
+
 ## Usage
 
 The DropdownButton is a component that combines a trigger button with a dropdown chevron.

package/src/components/InstrumentSelector/InstrumentSelector.stories.jsx

@@ -9,10 +9,18 @@ import {
 } from '../../icons'
 
 export default {
-  title: 'Components/InstrumentSelector',
+  title: 'Deprecated/InstrumentSelector',
   component: InstrumentSelector,
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component: `
+> **Deprecated:** Use [\`InstrumentSelect\`](/docs/components-instrumentselect--docs) instead.
+> \`InstrumentSelector\` will be removed in a future release.
+        `,
+      },
+    },
   },
   tags: ['autodocs'],
 }

package/src/components/MessageWithAction/MessageWithAction.jsx

@@ -5,6 +5,13 @@ import React from 'react'
 import styles from './MessageWithAction.module.css'
 import classNames from 'classnames'
 
+/**
+ * @deprecated Use `Callout` instead. `MessageWithAction` will be removed in a
+ * future release. Map `message` to `text`, `type` to `color` (`error` → `error`,
+ * `warn` → `warning`), and `ctaLabel`/`onClick` to `buttonProps`.
+ *
+ * @see Callout
+ */
 export const MessageWithAction = ({
   type,
   message,

package/src/components/MessageWithAction/MessageWithAction.stories.jsx

@@ -4,13 +4,16 @@ import { Flex, Text, Tooltip } from '@radix-ui/themes'
 import { InfoIcon } from '../../icons'
 
 export default {
-  title: 'Components/MessageWithAction',
+  title: 'Deprecated/MessageWithAction',
   component: MessageWithAction,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
         component: `
+> **Deprecated:** Use [\`Callout\`](/docs/components-callout--docs) instead.
+> \`MessageWithAction\` will be removed in a future release.
+
 ## Basic Usage
 
 ### MessageWithAction

package/src/components/ToolsDropdown/ToolsDropdown.module.css

@@ -137,4 +137,16 @@
 
 .contentPanel {
   outline: none;
+}
+
+.triggerWithoutClick {
+  color: var(--neutral-alpha-11);
+
+  &:hover {
+    color: var(--neutral-alpha-12);
+  }
+
+  &:active {
+    color: var(--neutral-alpha-11);
+  }
 }

package/src/components/ToolsDropdown/ToolsDropdown.stories.jsx

@@ -120,7 +120,8 @@ export const ControlledOpen = {
         <ToolsDropdown
           open={isOpen}
           onOpenChange={setIsOpen}
-          trigger={<Text color='blue'>Controlled</Text>}
+          trigger={<Text>Controlled</Text>}
+          showSeparator={false}
         >
           <Text size="2">Controlled menu content</Text>
         </ToolsDropdown>

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -2,14 +2,18 @@ import { useState } from 'react'
 import { TrackControlsToggle } from './TrackControlsToggle'
 
 export default {
-  title: 'Components/TrackControlsToggle',
+  title: 'Deprecated/TrackControlsToggle',
   component: TrackControlsToggle,
   parameters: {
     layout: 'centered',
     docs: {
       description: {
-        component:
-          'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). For `type="autoMute"`, o Figma define um único visual (amarelo em fundo alpha-2); `selected` só afeta `aria-pressed`, não as cores.',
+        component: `
+> **Deprecated:** Use [\`TrackControlButton\`](/docs/components-trackcontrolbutton--docs) with \`variant={type}\` and \`isActive={selected}\` instead.
+> \`TrackControlsToggle\` will be removed in a future release.
+
+Toggle button for track controls (Record, Mute, Auto Mute, and Solo). For \`type="autoMute"\`, o Figma define um único visual (amarelo em fundo alpha-2); \`selected\` só afeta \`aria-pressed\`, não as cores.
+        `,
       },
     },
   },

package/src/icons/DynamicMicrophone2Icon.jsx

@@ -0,0 +1,13 @@
+export const DynamicMicrophone2Icon = ({ width = 16, height = 16, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" className={className} {...props}>
+    <path 
+      d="M10.5846 8.14349L3.4361 14.6667L1.33331 12.5639L7.8565 5.41543M7.30522 8.69477L6.37888 9.62111M13.6616 7.19124C12.3215 8.53131 10.1488 8.53131 8.80876 7.19124C7.46868 5.85116 7.46868 3.67847 8.80876 2.3384C10.1488 0.998325 12.3215 0.998325 13.6616 2.3384C15.0017 3.67847 15.0017 5.85116 13.6616 7.19124Z" 
+      stroke="currentColor" 
+      strokeWidth="0.666667" 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+DynamicMicrophone2Icon.displayName = 'DynamicMicrophone2Icon'

package/src/icons.jsx

@@ -437,3 +437,4 @@ export { RewindBarFillIcon } from './icons/RewindBarFillIcon'
 export { ForwardBarFillIcon } from './icons/ForwardBarFillIcon'
 export { ChordGrid3Icon } from './icons/ChordGrid3Icon'
 export { ChordDiagramGridIcon } from './icons/ChordDiagramGridIcon'
+export { DynamicMicrophone2Icon } from './icons/DynamicMicrophone2Icon'

package/src/index.jsx

@@ -51,6 +51,7 @@ export { CigarBar } from './components/CigarBar/CigarBar'
 export { ContextMenu } from './components/ContextMenu/ContextMenu'
 export { Countdown } from './components/Countdown/Countdown'
 export { DataTable } from './components/DataTable/DataTable'
+/** @deprecated Use `ToolsDropdown` instead. */
 export { DropdownButton } from './components/DropdownButton/DropdownButton'
 export { DropdownMenu } from './components/DropdownMenu/DropdownMenu'
 export { ToolsDropdown } from './components/ToolsDropdown/ToolsDropdown'
@@ -75,6 +76,7 @@ export { InstrumentSelectCard } from './components/InstrumentSelect/InstrumentSe
 export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSelector'
 export { Knob } from './components/Knob/Knob'
 export { ListCards } from './components/ListCards/ListCards'
+/** @deprecated Use `Callout` instead. */
 export { MessageWithAction } from './components/MessageWithAction/MessageWithAction'
 export { MetronomeForm } from './components/MetronomeForm/MetronomeForm'
 export { MoreButton } from './components/MoreButton/MoreButton'
@@ -82,8 +84,6 @@ export { MultiSelect } from './components/MultiSelect/MultiSelect'
 export { MultiSelectCards } from './components/MultiSelectCards/MultiSelectCards'
 export { PanControl } from './components/PanControl/PanControl'
 export { PeakLevel } from './components/PeakLevel/PeakLevel'
-export { PlayerBar } from './components/PlayerBar/PlayerBar'
-export { PlayerSlider } from './components/PlayerSlider/PlayerSlider'
 export { PreviewCard } from './components/PreviewCard/PreviewCard'
 export { ProductsBrandPattern } from './components/ProductsBrandPattern/ProductsBrandPattern'
 export { ProductsList } from './components/ProductsList/ProductsList'

package/src/components/PlayerBar/PlayerBar.jsx

@@ -1,250 +0,0 @@
-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">
-            {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} />
-              </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

@@ -1,135 +0,0 @@
-.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;
-}