@moises.ai/design-system 4.16.2 → 4.16.4

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/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'
@@ -131,6 +99,7 @@ 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'
@@ -150,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'

package/src/lib/menu/renderItem.jsx

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