@moises.ai/design-system 4.16.10 → 4.17.0

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

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

package/src/components/PlayerMasterVolume/PlayerMasterVolume.stories.jsx

@@ -1,182 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { PlayerMasterVolume } from './PlayerMasterVolume'
-
-const DEFAULT_STEMS = [
-  { name: 'Vocals', volume: 80 },
-  { name: 'Drums', volume: 65 },
-  { name: 'Bass', volume: 70 },
-  { name: 'Others', volume: 55 },
-]
-
-function StatefulPlayerMasterVolume({
-  initialVolume = 1,
-  initialStems = DEFAULT_STEMS,
-  onVolumeChange,
-  onStemVolumeChange,
-}) {
-  const [volume, setVolume] = useState(initialVolume)
-  const [stems, setStems] = useState(initialStems)
-
-  useEffect(() => {
-    setVolume(initialVolume)
-  }, [initialVolume])
-
-  useEffect(() => {
-    setStems(initialStems)
-  }, [initialStems])
-
-  const handleVolumeChange = useCallback(
-    ([value]) => {
-      setVolume(value)
-      onVolumeChange?.([value])
-    },
-    [onVolumeChange],
-  )
-
-  const handleStemVolumeChange = useCallback(
-    (name, value) => {
-      setStems((prev) =>
-        prev.map((stem) =>
-          stem.name === name ? { ...stem, volume: value } : stem,
-        ),
-      )
-      onStemVolumeChange?.(name, value)
-    },
-    [onStemVolumeChange],
-  )
-
-  return (
-    <PlayerMasterVolume
-      volume={volume}
-      stems={stems}
-      onVolumeChange={handleVolumeChange}
-      onStemVolumeChange={handleStemVolumeChange}
-    />
-  )
-}
-
-export default {
-  title: 'New Mixer/PlayerMasterVolume',
-  component: PlayerMasterVolume,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-Master volume popover for New Mixer. Pass \`volume\` and update it from \`onVolumeChange\` (receives a gain array from \`InputLevelMeter\`). Stem sliders are controlled via \`stems\` and \`onStemVolumeChange\`.
-        `,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: 286,
-          padding: 16,
-          background: '#1d1d1d',
-          borderRadius: 8,
-          boxSizing: 'border-box',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    volume: {
-      description: 'Master gain passed to InputLevelMeter (0 = mute, 1 = unity).',
-      table: { type: { summary: 'number' }, defaultValue: { summary: 1 } },
-      control: { type: 'range', min: 0, max: 2, step: 0.01 },
-    },
-    stems: {
-      description: 'Stem rows rendered when the accordion is open.',
-      table: { type: { summary: '{ name: string, volume: number }[]' } },
-      control: false,
-    },
-    onVolumeChange: {
-      description: 'Called with `[gain]` when the master fader moves.',
-      table: { type: { summary: '([gain: number]) => void' } },
-      action: 'volume changed',
-    },
-    onStemVolumeChange: {
-      description: 'Called with stem name and slider value (0–100).',
-      table: { type: { summary: '(name: string, value: number) => void' } },
-      action: 'stem volume changed',
-    },
-  },
-}
-
-export const Default = {
-  args: {
-    volume: 1,
-    initialStems: DEFAULT_STEMS,
-  },
-  render: (args) => (
-    <StatefulPlayerMasterVolume
-      initialVolume={args.volume}
-      initialStems={args.initialStems}
-      onVolumeChange={args.onVolumeChange}
-      onStemVolumeChange={args.onStemVolumeChange}
-    />
-  ),
-}
-
-export const VolumeAtZero = {
-  args: {
-    volume: 0,
-  },
-  render: (args) => (
-    <StatefulPlayerMasterVolume
-      initialVolume={args.volume}
-      onVolumeChange={args.onVolumeChange}
-      onStemVolumeChange={args.onStemVolumeChange}
-    />
-  ),
-}
-
-export const VolumeBoosted = {
-  args: {
-    volume: 1.5,
-  },
-  render: (args) => (
-    <StatefulPlayerMasterVolume
-      initialVolume={args.volume}
-      onVolumeChange={args.onVolumeChange}
-      onStemVolumeChange={args.onStemVolumeChange}
-    />
-  ),
-}
-
-export const CustomStems = {
-  args: {
-    volume: 1,
-    initialStems: [
-      { name: 'Vocals', volume: 100 },
-      { name: 'Guitar', volume: 40 },
-      { name: 'Keys', volume: 60 },
-    ],
-  },
-  render: (args) => (
-    <StatefulPlayerMasterVolume
-      initialVolume={args.volume}
-      initialStems={args.initialStems}
-      onVolumeChange={args.onVolumeChange}
-      onStemVolumeChange={args.onStemVolumeChange}
-    />
-  ),
-}
-
-export const Playground = {
-  args: {
-    volume: 1,
-  },
-  render: (args) => (
-    <StatefulPlayerMasterVolume
-      initialVolume={args.volume}
-      onVolumeChange={args.onVolumeChange}
-      onStemVolumeChange={args.onStemVolumeChange}
-    />
-  ),
-}

package/src/components/PlayerSlider/PlayerSlider.jsx

@@ -1,80 +0,0 @@
-import { useState } from 'react'
-import { Slider } from 'radix-ui'
-import { PlayerSliderWaveform } from './PlayerSliderWaveform'
-import styles from './PlayerSlider.module.css'
-import classNames from 'classnames'
-
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
-
-const getProgress = ({ currentTime, duration }) => {
-  if (!Number.isFinite(duration) || duration <= 0) return 0
-  if (!Number.isFinite(currentTime)) return 0
-
-  return clamp((currentTime / duration) * 100, 0, 100)
-}
-
-export const PlayerSlider = ({
-  currentTime = 0,
-  duration = 0,
-  audio,
-  onSeek,
-  className,
-}) => {
-  const [isInteracting, setIsInteracting] = useState(false)
-  const progressValue = getProgress({ currentTime, duration })
-
-  const handleSeek = ([value]) => {
-    onSeek((value / 100) * duration)
-  }
-
-  const handleInteractionStart = () => {
-    setIsInteracting(true)
-  }
-
-  const handleInteractionEnd = () => {
-    setIsInteracting(false)
-  }
-
-  return (
-    <div
-      className={classNames(styles.playerSlider, className)}
-      data-interacting={isInteracting ? 'true' : undefined}
-    >
-      <Slider.Root
-        className={styles.sliderRoot}
-        data-interacting={isInteracting ? 'true' : undefined}
-        min={0}
-        max={100}
-        step={0.1}
-        value={[progressValue]}
-        onValueChange={handleSeek}
-        onValueCommit={handleInteractionEnd}
-        onPointerDown={handleInteractionStart}
-        onPointerUp={handleInteractionEnd}
-        onPointerCancel={handleInteractionEnd}
-        onBlur={handleInteractionEnd}
-        aria-label="Playback position"
-      >
-        {audio && (
-          <div className={styles.waveformPreview} aria-hidden="true">
-            <PlayerSliderWaveform
-              audio={audio}
-              currentTime={currentTime}
-              duration={duration}
-              progress={progressValue}
-            />
-          </div>
-        )}
-        <Slider.Track className={styles.sliderTrack}>
-          <Slider.Range className={styles.sliderRange} />
-        </Slider.Track>
-        <Slider.Thumb
-          className={styles.sliderThumb}
-          onPointerUp={(e) => e.currentTarget.blur()}
-        />
-      </Slider.Root>
-    </div>
-  )
-}
-
-PlayerSlider.displayName = 'PlayerSlider'

package/src/components/PlayerSlider/PlayerSlider.module.css

@@ -1,180 +0,0 @@
-.playerSlider {
-  position: relative;
-  width: 100%;
-  height: 0;
-  overflow: visible;
-}
-
-.playerSlider[data-interacting='true']::before,
-.playerSlider:has(.sliderRoot:focus-within)::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 94px;
-  background: linear-gradient(180deg, rgba(15, 15, 17, 0.00) 0%, rgba(15, 15, 17, 0.95) 80.29%);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.withoutTime {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.disabled {
-  opacity: 0.56;
-}
-
-.time {
-  color: var(--neutral-alpha-10);
-  font-size: 11px;
-  font-variant-numeric: tabular-nums;
-  line-height: 16px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.sliderRoot {
-  position: absolute;
-  isolation: isolate;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 16px;
-  touch-action: none;
-  user-select: none;
-  bottom: -7px;
-  z-index: 12;
-  background: transparent;
-
-  &:hover {
-    .sliderTrack {
-      height: 4px;
-      border-radius: 9999px;
-    }
-  }
-}
-
-.sliderTrack {
-  position: relative;
-  flex: 1;
-  height: 2px;
-  overflow: visible;
-  border-radius: 0px;
-  background: var(--neutral-5);
-  transition: height 0.15s ease, border-radius 0.15s ease, background 0.15s ease;
-}
-
-.sliderRoot:hover .sliderTrack {
-  height: 4px;
-  border-radius: 9999px;
-  background: var(--neutral-6);
-}
-
-.bufferedRange {
-  position: absolute;
-  inset-block: 0;
-  left: 0;
-  max-width: 100%;
-  border-radius: inherit;
-  background: var(--neutral-alpha-6);
-  pointer-events: none;
-}
-
-.sliderRange {
-  position: absolute;
-  height: 100%;
-  /* border-radius: inherit; */
-  background: var(--aqua-8);
-  border-top-right-radius: 9999px;
-  border-bottom-right-radius: 9999px;
-}
-
-.sliderThumb {
-  position: relative;
-  display: block;
-  z-index: 10;
-  width: 10px;
-  height: 10px;
-  border: 1px solid var(--neutral-alpha-5);
-  border-radius: 9999px;
-  background: var(--white);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-
-.waveformPreview {
-  position: absolute;
-  z-index: -1;
-  right: 0;
-  bottom: 8px;
-  left: 0;
-  height: 28px;
-  overflow: clip;
-  pointer-events: none;
-  opacity: 0;
-  transform: translateY(4px);
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
-}
-
-.waveformPreview>div {
-  width: 100%;
-  height: 56px;
-}
-
-.sliderRoot[data-interacting='true'] .waveformPreview {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.sliderRoot:hover .sliderThumb,
-.sliderRoot:focus-within .sliderThumb {
-  opacity: 1;
-}
-
-.sliderRoot:not([data-disabled]),
-.sliderRoot:not([data-disabled]) .sliderTrack {
-  cursor: pointer;
-}
-
-.sliderThumb:focus-visible {
-  outline: 2px solid var(--neutral-alpha-8);
-  outline-offset: 2px;
-}
-
-.sliderRoot[data-disabled] {
-  cursor: default;
-}
-
-.sliderRoot[data-disabled] .sliderRange {
-  background: var(--neutral-alpha-6);
-}
-
-.sliderRoot[data-disabled] .bufferedRange {
-  background: var(--neutral-alpha-4);
-}
-
-.sliderRoot[data-disabled] .sliderThumb {
-  cursor: default;
-}
-
-.sliderRoot[data-interacting='true'] .waveformPreview,
-.sliderRoot:focus-within .waveformPreview {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-@media (max-width: 480px) {
-  .playerSlider {
-    grid-template-columns: 36px minmax(0, 1fr) 36px;
-    gap: 8px;
-  }
-}
-
-.sliderThumb:focus {
-  outline: none;
-}

package/src/components/PlayerSlider/PlayerSlider.stories.jsx

@@ -1,97 +0,0 @@
-import { useState } from 'react'
-import { Flex } from '@radix-ui/themes'
-import { PlayerSlider } from './PlayerSlider'
-
-const SAMPLE_AUDIO =
-  'https://storage.googleapis.com/moises-api-assets/voice/demo_zuri.m4a'
-
-function StatefulPlayerSlider(args) {
-  const [currentTime, setCurrentTime] = useState(args.currentTime)
-
-  return (
-    <PlayerSlider
-      {...args}
-      currentTime={currentTime}
-      onSeek={setCurrentTime}
-    />
-  )
-}
-
-export default {
-  title: 'New Mixer/PlayerSlider',
-  component: PlayerSlider,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-Seekable playback slider for New Mixer. Pass \`currentTime\` and \`duration\`, then update \`currentTime\` from \`onSeek\`. Progress is derived automatically from those values.
-
-When \`audio\` is provided, a waveform appears while the user presses or drags the thumb.
-        `,
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <Flex
-        align="end"
-        justify="center"
-        width="640px"
-        maxWidth="100%"
-        p="6"
-        style={{ background: 'var(--neutral-8)', boxSizing: 'border-box' }}
-      >
-        <Flex width="100%">
-          <Story />
-        </Flex>
-      </Flex>
-    ),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    currentTime: {
-      description: 'Current playback time in seconds.',
-      table: { type: { summary: 'number' } },
-      control: 'number',
-    },
-    duration: {
-      description: 'Total playback duration in seconds.',
-      table: { type: { summary: 'number' } },
-      control: 'number',
-    },
-    audio: {
-      description:
-        'Audio URL used to render the waveform while interacting with the slider.',
-      table: { type: { summary: 'string' } },
-      control: 'text',
-    },
-    className: {
-      description: 'Optional class name applied to the root element.',
-      table: { type: { summary: 'string' } },
-      control: 'text',
-    },
-    onSeek: {
-      description: 'Called with the next playback time in seconds.',
-      table: { type: { summary: '(time: number) => void' } },
-      action: 'seek changed',
-    },
-  },
-}
-
-export const Default = {
-  args: {
-    currentTime: 82,
-    duration: 215,
-    audio: SAMPLE_AUDIO,
-  },
-  render: (args) => <StatefulPlayerSlider {...args} />,
-}
-
-export const WithoutWaveform = {
-  args: {
-    currentTime: 82,
-    duration: 215,
-  },
-  render: (args) => <StatefulPlayerSlider {...args} />,
-}

package/src/components/PlayerSlider/PlayerSliderWaveform.jsx

@@ -1,70 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import WavesurferPlayer from '@wavesurfer/react'
-
-const clamp = (value, min, max) => Math.min(Math.max(value, min), max)
-
-export function PlayerSliderWaveform({
-  audio,
-  progress = 0,
-  currentTime = 0,
-  duration = 0,
-}) {
-  const [isSafari, setIsSafari] = useState(false)
-  const waveSurferRef = useRef(null)
-
-  useEffect(() => {
-    if (typeof navigator !== 'undefined') {
-      setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent))
-    }
-  }, [])
-
-  const syncProgress = useCallback(
-    (ws = waveSurferRef.current) => {
-      if (!ws) return
-
-      const safeProgress = clamp(progress, 0, 100)
-      const waveformDuration = ws.getDuration?.()
-      const targetTime =
-        Number.isFinite(waveformDuration) && waveformDuration > 0
-          ? (safeProgress / 100) * waveformDuration
-          : currentTime
-
-      if (!Number.isFinite(targetTime)) return
-
-      ws.setTime(targetTime)
-    },
-    [currentTime, progress],
-  )
-
-  const handleReady = useCallback(
-    (ws) => {
-      waveSurferRef.current = ws
-      syncProgress(ws)
-    },
-    [syncProgress],
-  )
-
-  useEffect(() => {
-    syncProgress()
-  }, [duration, syncProgress])
-
-  if (!audio) return null
-
-  return (
-    <WavesurferPlayer
-      url={audio}
-      waveColor="rgba(255, 255, 255, 0.22)"
-      progressColor="rgba(0, 227, 254, 1)"
-      normalize
-      barWidth={2}
-      barHeight={1}
-      cursorWidth={0}
-      height={56}
-      interact={false}
-      onReady={handleReady}
-      backend={isSafari ? 'WebAudio' : 'MediaElement'}
-    />
-  )
-}
-
-PlayerSliderWaveform.displayName = 'PlayerSliderWaveform'

package/src/components/PlayerSmartMetronome/PlayerSmartMetronome.jsx

@@ -1,79 +0,0 @@
-import styles from './PlayerSmartMetronome.module.css'
-import { Flex, Text, SliderLibrary, Separator, IconButton, PanControl } from '../../index'
-import { RefreshBackIcon } from '../../icons'
-import { SegmentedField } from './SegmentedField'
-
-export const PlayerSmartMetronome = ({
-  subDivision = '1x',
-  volume = 50,
-  countIn = 'off',
-  panValue = 0,
-  onSubDivisionChange,
-  onVolumeChange,
-  onCountInChange,
-  onRefresh,
-  onPanChange,
-}) => {
-  return (
-    <Flex className={styles.PlayerSmartMetronome} direction="column" gap="4">
-      <Flex align="center" gap="2" justify="between">
-        <Text size="3" weight="medium" className={styles.white}>
-          Smart Metronome
-        </Text>
-
-        <IconButton variant="ghost" size="1" onClick={onRefresh}>
-          <RefreshBackIcon width={16} height={16} />
-        </IconButton>
-      </Flex>
-
-      <SegmentedField
-        label="Sub-division"
-        items={[
-          { value: '0.5x', label: '0.5x' },
-          { value: '1x', label: '1x' },
-          { value: '2x', label: '2x' },
-        ]}
-        value={subDivision}
-        onChange={onSubDivisionChange}
-      />
-      <Flex gap="3" align="end" justify="between">
-        <Flex className={styles.flex1} direction="column" gap="1">
-          <Flex width="100%" justify="between" align="center">
-            <Text size="2" className={styles.neutral12}>
-              Metronome volume
-            </Text>
-
-            <Text size="2" className={styles.neutralAlpha9}>
-              {volume}%
-            </Text>
-          </Flex>
-          <SliderLibrary
-            value={volume}
-            onValueChange={onVolumeChange}
-            formatValue={(v) => `${v}%`}
-            aria-label="Volume"
-          />
-        </Flex>
-
-        <PanControl value={panValue} onChange={onPanChange} />
-      </Flex>
-
-      <Flex justify="center" width="100%">
-        <Separator size="1" className={styles.neutralAlpha4} />
-      </Flex>
-
-      <SegmentedField
-        label="Count-in"
-        items={[
-          { value: 'off', label: 'Off' },
-          { value: '1 bar', label: '1 bar' },
-          { value: '2 bars', label: '2 bars' },
-        ]}
-        value={countIn}
-        onChange={onCountInChange}
-      />
-    </Flex>
-  )
-}
-
-PlayerSmartMetronome.displayName = 'PlayerSmartMetronome'