@moises.ai/design-system 4.16.10 → 4.17.0

package/package.json

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

@@ -9,6 +9,9 @@ export const Tooltip = ({
   content,
   shortcut,
   color = 'gray',
+  variant = 'default',
+  title,
+  headerActions,
   delayDuration = 200,
   skipDelayDuration,
   disableHoverableContent,
@@ -22,6 +25,8 @@ export const Tooltip = ({
     ...restContentProps
   } = props
 
+  const isDiagram = variant === 'diagram'
+
   const providerProps = {
     delayDuration,
     skipDelayDuration,
@@ -45,19 +50,40 @@ export const Tooltip = ({
             <TooltipPrimitive.Content
               className={classNames(
                 styles.TooltipContent,
-                styles[`TooltipContent--${color}`]
+                !isDiagram && styles[`TooltipContent--${color}`],
+                isDiagram && styles.TooltipDiagram
               )}
               sideOffset={5}
               {...restContentProps}
             >
-              <Text size='1' className={styles.TooltipText}>{content}</Text>
-              {shortcut && (
-                <Text size='0' className={classNames(
-                  styles.TooltipShortcut,
-                  styles[`TooltipShortcut--${color}`]
-                )}>
-                  {shortcut}
-                </Text>
+              {isDiagram ? (
+                <>
+                  <div className={styles.TooltipDiagramHeader}>
+                    {title && (
+                      <Text size='2' className={styles.TooltipDiagramTitle}>
+                        {title}
+                      </Text>
+                    )}
+                    {headerActions && (
+                      <div className={styles.TooltipDiagramActions}>
+                        {headerActions}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles.TooltipDiagramBody}>{content}</div>
+                </>
+              ) : (
+                <>
+                  <Text size='1' className={styles.TooltipText}>{content}</Text>
+                  {shortcut && (
+                    <Text size='0' className={classNames(
+                      styles.TooltipShortcut,
+                      styles[`TooltipShortcut--${color}`]
+                    )}>
+                      {shortcut}
+                    </Text>
+                  )}
+                </>
               )}
               <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
             </TooltipPrimitive.Content>

package/src/components/Tooltip/Tooltip.module.css

@@ -85,6 +85,54 @@
   color: rgba(252, 253, 255, 0.94);
 }
 
+/* Diagram variant (matches the "tooltip diagram" surface from Figma) */
+.TooltipDiagram {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-1, 4px);
+  max-width: none;
+  padding: var(--spacing-1, 4px) var(--spacing-2, 8px) var(--spacing-2, 8px);
+  border-radius: var(--radius-4, 8px);
+  background: var(--panel-solid, #18191b);
+  color: var(--neutral-alpha-12, rgba(252, 253, 255, 0.94));
+  box-shadow:
+    0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.TooltipDiagram .TooltipArrow {
+  fill: var(--panel-solid, #18191b);
+}
+
+.TooltipDiagramHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+}
+
+.TooltipDiagramTitle {
+  color: var(--neutral-alpha-9, rgba(223, 235, 253, 0.43));
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.TooltipDiagramActions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.TooltipDiagramBody {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1, 4px);
+  width: 100%;
+}
+
 .TooltipText {
   white-space: normal;
   overflow-wrap: anywhere;

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -13,6 +13,10 @@ export default {
       control: 'select',
       options: ['white', 'gray'],
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'diagram'],
+    },
   },
 }
 
@@ -58,4 +62,42 @@ export const WithShortcutWhite = {
     color: 'white',
     children: <Button>Hover me</Button>,
   },
+}
+
+export const Diagram = {
+  args: {
+    variant: 'diagram',
+    title: 'Diagram',
+    side: 'top',
+    open: true,
+    headerActions: (
+      <button
+        type="button"
+        aria-label="More"
+        style={{
+          width: 12,
+          height: 24,
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'rgba(223, 235, 253, 0.43)',
+          cursor: 'pointer',
+          lineHeight: 0,
+        }}
+      >
+        ⋮
+      </button>
+    ),
+    content: (
+      <div
+        style={{
+          width: 100,
+          height: 155,
+          borderRadius: 8,
+          background: '#edeef0',
+        }}
+      />
+    ),
+    children: <Button>Hover me</Button>,
+  },
 }

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/lib/menu/renderItem.jsx

@@ -80,9 +80,7 @@ export const createRenderItem = (MenuPrimitives) => {
               </div>
             </MenuPrimitives.SubTrigger>
 
-            <MenuPrimitives.SubContent
-              className={classNames(styles.menuSubContent, opt.subContentClassName)}
-            >
+            <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
                 renderItem(
                   child,

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'