@moises.ai/design-system 4.16.1 → 4.16.3

package/src/components/PlayerSlider/PlayerSliderWaveform.jsx

@@ -0,0 +1,70 @@
+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/SliderLibrary/SliderLibrary.jsx

@@ -0,0 +1,203 @@
+import classNames from 'classnames'
+import { Slider as SliderRadix } from 'radix-ui'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
+import styles from './SliderLibrary.module.css'
+
+/**
+ * @typedef {Object} SliderLibraryProps
+ * @property {number} value - Currently selected value (controlled).
+ * @property {(value: number) => void} [onValueChange] - Fires whenever the user drags,
+ * keys the thumb or scrolls over the slider. Receives a single number (not an array).
+ * @property {number} [min=0] - Minimum allowed value.
+ * @property {number} [max=100] - Maximum allowed value.
+ * @property {number} [step=1] - Increment step. Used by keyboard, drag and wheel.
+ * @property {boolean} [disabled=false] - Disables interaction and dims the slider.
+ * @property {boolean} [showTooltip=true] - Renders the DS Tooltip below the thumb on
+ * hover/focus/drag with the current value.
+ * @property {(value: number) => React.ReactNode} [formatValue] - Formats the value for
+ * display in the tooltip. Defaults to the raw number.
+ * @property {string} [aria-label] - Accessible label, recommended when no visual label exists.
+ * @property {string} [className] - Extra class on the root.
+ */
+
+/**
+ * Minimalist horizontal slider used in Library player surfaces.
+ *
+ * Visuals (from Figma):
+ * - 4px track with `--neutral-alpha-3` background.
+ * - Range fill in `--aqua-alpha-8` (cyan).
+ * - 18x10 white thumb with subtle border, rounded-full.
+ * - DS `Tooltip` anchored below the thumb shows the current value, following the thumb during drag.
+ *
+ * Behavior:
+ * - Drag: pointer/touch. Tooltip stays open and follows the thumb continuously.
+ * - Keyboard (via Radix Slider primitives): arrows/Home/End/PageUp/PageDown.
+ * - Wheel: scrolling over the slider increments/decrements by `step`.
+ * - Focus ring: appears only when the thumb is focused via keyboard, never on click/drag.
+ *
+ * @example
+ * const [volume, setVolume] = useState(50)
+ * <SliderLibrary
+ *   value={volume}
+ *   onValueChange={setVolume}
+ *   formatValue={(v) => `${v}%`}
+ *   aria-label="Volume"
+ * />
+ *
+ * @type {React.ForwardRefExoticComponent<SliderLibraryProps & React.RefAttributes<HTMLSpanElement>>}
+ */
+export const SliderLibrary = forwardRef(function SliderLibrary(
+  {
+    value,
+    onValueChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showTooltip = true,
+    formatValue,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const ariaLabel = props['aria-label']
+  const internalRef = useRef(null)
+  const lastInteractionRef = useRef(null)
+  const [keyboardFocus, setKeyboardFocus] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const stateRef = useRef({ value, min, max, step, disabled, onValueChange })
+  stateRef.current = { value, min, max, step, disabled, onValueChange }
+
+  useEffect(() => {
+    const onKey = () => {
+      lastInteractionRef.current = 'keyboard'
+    }
+    const onPointer = () => {
+      lastInteractionRef.current = 'pointer'
+    }
+    window.addEventListener('keydown', onKey, true)
+    window.addEventListener('pointerdown', onPointer, true)
+    return () => {
+      window.removeEventListener('keydown', onKey, true)
+      window.removeEventListener('pointerdown', onPointer, true)
+    }
+  }, [])
+
+  useEffect(() => {
+    const node = internalRef.current
+    if (!node) return undefined
+
+    const handleWheel = (event) => {
+      const state = stateRef.current
+      if (state.disabled) return
+      event.preventDefault()
+      const direction = event.deltaY < 0 ? 1 : -1
+      const next = Math.min(
+        state.max,
+        Math.max(state.min, state.value + direction * state.step),
+      )
+      if (next !== state.value) state.onValueChange?.(next)
+    }
+
+    node.addEventListener('wheel', handleWheel, { passive: false })
+    return () => node.removeEventListener('wheel', handleWheel)
+  }, [])
+
+  useEffect(() => {
+    if (!isDragging) return undefined
+    const onUp = () => setIsDragging(false)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onUp)
+    return () => {
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onUp)
+    }
+  }, [isDragging])
+
+  useEffect(() => {
+    if (!isDragging) return undefined
+    const style = document.createElement('style')
+    style.textContent = '* { cursor: ew-resize !important; }'
+    document.head.appendChild(style)
+    return () => {
+      if (style.parentNode) style.parentNode.removeChild(style)
+    }
+  }, [isDragging])
+
+  const setRefs = useCallback(
+    (node) => {
+      internalRef.current = node
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref],
+  )
+
+  const handleRootPointerDown = () => {
+    if (!disabled) setIsDragging(true)
+  }
+
+  const handleThumbFocus = () => {
+    if (lastInteractionRef.current === 'keyboard') setKeyboardFocus(true)
+  }
+  const handleThumbBlur = () => setKeyboardFocus(false)
+  const handleThumbPointerDown = () => setKeyboardFocus(false)
+  const handleThumbPointerEnter = () => setIsHovering(true)
+  const handleThumbPointerLeave = () => setIsHovering(false)
+
+  const displayValue = formatValue ? formatValue(value) : value
+  const tooltipOpen =
+    !disabled && (isHovering || isDragging || keyboardFocus)
+
+  const thumb = (
+    <SliderRadix.Thumb
+      className={styles.thumb}
+      data-focus-visible={keyboardFocus || undefined}
+      aria-label={ariaLabel}
+      onFocus={handleThumbFocus}
+      onBlur={handleThumbBlur}
+      onPointerDown={handleThumbPointerDown}
+      onPointerEnter={handleThumbPointerEnter}
+      onPointerLeave={handleThumbPointerLeave}
+    />
+  )
+
+  return (
+    <SliderRadix.Root
+      ref={setRefs}
+      className={classNames(styles.root, className)}
+      value={[value]}
+      onValueChange={(next) => onValueChange?.(next[0])}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      onPointerDown={handleRootPointerDown}
+      {...props}
+    >
+      <SliderRadix.Track className={styles.track}>
+        <SliderRadix.Range className={styles.range} />
+      </SliderRadix.Track>
+      {showTooltip ? (
+        <Tooltip
+          content={displayValue}
+          open={tooltipOpen}
+          delayDuration={0}
+          side="bottom"
+          sideOffset={8}
+          updatePositionStrategy="always"
+        >
+          {thumb}
+        </Tooltip>
+      ) : (
+        thumb
+      )}
+    </SliderRadix.Root>
+  )
+})
+
+SliderLibrary.displayName = 'SliderLibrary'

package/src/components/SliderLibrary/SliderLibrary.module.css

@@ -0,0 +1,53 @@
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 19px;
+  user-select: none;
+  touch-action: none;
+}
+
+.root[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.track {
+  position: relative;
+  flex-grow: 1;
+  height: 4px;
+  background: var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  border-radius: 99px;
+  overflow: hidden;
+}
+
+.range {
+  position: absolute;
+  height: 100%;
+  background: var(--aqua-alpha-8, rgba(0, 216, 230, 0.84));
+  border-radius: 99px;
+}
+
+.thumb {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 10px;
+  background: var(--white, #fff);
+  border: none;
+  border-radius: 99px;
+  box-shadow: 0 0 0 1px #2e31354d;
+  outline: none;
+  cursor: ew-resize;
+}
+
+.thumb[data-focus-visible] {
+  outline: 2px solid var(--neutral-alpha-8, rgba(217, 237, 255, 0.36));
+  outline-offset: 2px;
+}
+
+.root[data-disabled] .thumb {
+  cursor: not-allowed;
+}

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { SliderLibrary } from './SliderLibrary'
+
+export default {
+  title: 'Components/SliderLibrary',
+  component: SliderLibrary,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: { control: { type: 'number' } },
+    min: { control: { type: 'number' } },
+    max: { control: { type: 'number' } },
+    step: { control: { type: 'number' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: 280,
+          padding: 24,
+          background: '#1d1d1d',
+          borderRadius: 8,
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  render: () => {
+    const [value, setValue] = useState(50)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        formatValue={(v) => `${v}%`}
+        aria-label="Volume"
+      />
+    )
+  },
+}
+
+export const Disabled = {
+  render: () => (
+    <SliderLibrary
+      value={75}
+      onValueChange={() => {}}
+      disabled
+      aria-label="Volume (disabled)"
+    />
+  ),
+}
+
+export const CustomRange = {
+  name: 'Custom range (-12 to 12 dB)',
+  render: () => {
+    const [value, setValue] = useState(0)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        min={-12}
+        max={12}
+        step={0.5}
+        formatValue={(v) => `${v.toFixed(1)} dB`}
+        aria-label="Gain"
+      />
+    )
+  },
+}
+
+export const WithoutTooltip = {
+  render: () => {
+    const [value, setValue] = useState(50)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        showTooltip={false}
+        aria-label="Volume"
+      />
+    )
+  },
+}
+
+export const WithLabel = {
+  render: () => {
+    const [value, setValue] = useState(30)
+    return (
+      <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+        <span style={{ color: '#fff', fontSize: 14 }}>Volume</span>
+        <SliderLibrary value={value} onValueChange={setValue} />
+      </label>
+    )
+  },
+}

package/src/components/SliderLibrary/index.js

@@ -0,0 +1 @@
+export { SliderLibrary } from './SliderLibrary'

package/src/icons/ForwardBarFillIcon.jsx

@@ -0,0 +1,9 @@
+export const ForwardBarFillIcon = ({ width = 24, height = 24, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path
+      d="M10.6187 10.6107V6.50075C10.6187 6.11585 11.0353 5.87529 11.3687 6.06774L19.2414 10.6131V6.57478C19.2414 6.29864 19.4652 6.07479 19.7414 6.07479H20.5007C20.7768 6.07479 21.0007 6.29864 21.0007 6.57479V17.0102C21.0007 17.2864 20.7768 17.5102 20.5007 17.5102H19.7414C19.4652 17.5102 19.2414 17.2864 19.2414 17.0102V12.9715L11.3687 17.5168C11.0353 17.7093 10.6187 17.4687 10.6187 17.0838V12.9738L2.75 17.5168C2.41667 17.7093 2 17.4687 2 17.0838L2 6.50075C2 6.11585 2.41667 5.87528 2.75 6.06773L10.6187 10.6107Z"
+      fill="currentColor" />
+  </svg>
+)
+
+ForwardBarFillIcon.displayName = 'ForwardBarFillIcon'

package/src/icons/RewindBarFillIcon.jsx

@@ -0,0 +1,7 @@
+export const RewindBarFillIcon = ({ width = 24, height = 24, className, ...props }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" fill="none" className={className} {...props}>
+    <path d="M12.382 10.6107V6.50075C12.382 6.11585 11.9654 5.87529 11.632 6.06774L3.75931 10.6131V6.57478C3.75931 6.29864 3.53545 6.07479 3.25931 6.07479H2.50001C2.22387 6.07479 2.00001 6.29864 2.00001 6.57479V17.0102C2.00001 17.2864 2.22387 17.5102 2.50001 17.5102H3.25931C3.53545 17.5102 3.75931 17.2864 3.75931 17.0102V12.9715L11.632 17.5168C11.9654 17.7093 12.382 17.4687 12.382 17.0838V12.9738L20.2507 17.5168C20.584 17.7093 21.0007 17.4687 21.0007 17.0838L21.0007 6.50075C21.0007 6.11585 20.584 5.87528 20.2507 6.06773L12.382 10.6107Z" fill="currentColor" />
+  </svg>
+)
+
+RewindBarFillIcon.displayName = 'RewindBarFillIcon'

package/src/icons/Share2Icon.jsx

@@ -10,10 +10,12 @@ export const Share2Icon = ({
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...props}
   >
     <path
       d="M10.1875 2.89583L8.00001 0.708328M8.00001 0.708328L5.81251 2.89583M8.00001 0.708328V10.1875M10.9167 5.08333C12.5275 5.08333 13.8333 6.38916 13.8333 7.99999V12.2917C13.8333 13.9485 12.4902 15.2917 10.8333 15.2917H5.16656C3.50968 15.2917 2.16653 13.9485 2.16656 12.2916L2.16663 7.99999C2.16666 6.38915 3.47251 5.08333 5.08335 5.08333"
-      stroke="#B0B4BA"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
     />

package/src/icons.jsx

@@ -433,3 +433,5 @@ export { ChartIcon } from './icons/ChartIcon'
 export { ThumbsUpIcon } from './icons/ThumbsUpIcon'
 export { ThumbsDownIcon } from './icons/ThumbsDownIcon'
 export { LightBulbIcon } from './icons/LightBulbIcon'
+export { RewindBarFillIcon } from './icons/RewindBarFillIcon'
+export { ForwardBarFillIcon } from './icons/ForwardBarFillIcon'

package/src/index.jsx

@@ -1,40 +1,4 @@
-// Import and re-export components from Radix UI Themes
-import {
-  AlertDialog,
-  AspectRatio,
-  Avatar,
-  Badge,
-  Blockquote,
-  Box,
-  Card,
-  Code,
-  Container,
-  DataList,
-  Dialog,
-  Em,
-  Flex,
-  Grid,
-  Heading,
-  HoverCard,
-  Inset,
-  Kbd,
-  Link,
-  Popover,
-  Progress,
-  Quote,
-  Radio,
-  RadioGroup,
-  ScrollArea,
-  Section,
-  Separator,
-  Skeleton,
-  Spinner,
-  Strong,
-  Switch,
-  Table,
-  Tabs,
-  VisuallyHidden,
-} from '@radix-ui/themes'
+// Export components from Radix UI Themes
 
 export {
   AlertDialog,
@@ -71,9 +35,10 @@ export {
   Table,
   Tabs,
   VisuallyHidden,
-}
+} from '@radix-ui/themes'
 
 // Export our custom components
+
 export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'
 export { BannerAnnouncement } from './components/BannerAnnouncement/BannerAnnouncement'
 export { Button } from './components/Button/Button'
@@ -115,6 +80,9 @@ 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'
 export { ProfileMenu } from './components/ProfileMenu/ProfileMenu'
@@ -130,6 +98,8 @@ export { Shell } from './components/Shell/Shell'
 export { Sidebar } from './components/Sidebar/Sidebar'
 export { SidebarSection } from './components/Sidebar/SidebarSection/SidebarSection'
 export { Slider } from './components/Slider/Slider'
+export { SliderLibrary } from './components/SliderLibrary/SliderLibrary'
+export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'
 export { StemGenerationForm } from './components/StemGenerationForm/StemGenerationForm'
 export { GenerationStatus } from './components/StemSeparationForm/GenerationStatus/GenerationStatus'
 export { StemSeparationForm } from './components/StemSeparationForm/StemSeparationForm'
@@ -149,9 +119,6 @@ export { TrackControlButton } from './components/TrackControlButton'
 export { TrackControlsToggle } from './components/TrackControlsToggle/TrackControlsToggle'
 export { TrackHeader } from './components/TrackHeader/TrackHeader'
 export { useForm } from './components/useForm/useForm'
+export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'
 export { VoiceConversionForm } from './components/VoiceConversionForm/VoiceConversionForm'
 export { Waveform } from './components/VoiceConversionForm/Waveform/Waveform'
-export { PreviewCard } from './components/PreviewCard/PreviewCard'
-export { SpecialDialog } from './components/SpecialDialog/SpecialDialog'
-
-export { VerticalSegmentControl } from './components/VerticalSegmentControl/VerticalSegmentControl'