@moises.ai/design-system 3.11.9 → 3.11.11

package/package.json

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

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useRef, useState } from 'react'
+import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './InputLevelMeter.module.css'
 
@@ -86,6 +86,8 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   onVolumeChange,
   showHandler = true,
   showMeter = true,
+  hover = false,
+  resetPeakHold,
 }) {
   const [linearL, linearR] = linear
   const leftLevel = clampLevel(linearToMeterLevel(linearL ?? 0))
@@ -95,6 +97,18 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const isPressedRef = useRef(false)
   const meterRef = useRef(null)
   const peakHoldRef = useRef(0)
+  const peakTimerRef = useRef(null)
+  const [peakHoldPct, setPeakHoldPct] = useState(0)
+  const [peakRising, setPeakRising] = useState(false)
+
+  useEffect(() => {
+    peakHoldRef.current = 0
+    setPeakHoldPct(0)
+  }, [resetPeakHold])
+
+  useEffect(() => {
+    return () => clearTimeout(peakTimerRef.current)
+  }, [])
 
   const faderPercent = Math.max(
     0,
@@ -105,14 +119,28 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const rightNormalized = getNormalizedLevel(rightLevel)
   const currentPeakPct = Math.max(leftNormalized, rightNormalized)
 
-  if (currentPeakPct > peakHoldRef.current) {
-    peakHoldRef.current = currentPeakPct
-  }
-  if (currentPeakPct <= 0) {
-    peakHoldRef.current = 0
-  }
+  useEffect(() => {
+    if (currentPeakPct > peakHoldRef.current) {
+      peakHoldRef.current = currentPeakPct
+      setPeakHoldPct(currentPeakPct)
+      setPeakRising(true)
+      clearTimeout(peakTimerRef.current)
+      peakTimerRef.current = setTimeout(() => {
+        setPeakRising(false)
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            peakHoldRef.current = 0
+            setPeakHoldPct(0)
+          })
+        })
+      }, 400)
+    }
+    if (currentPeakPct <= 0) {
+      peakHoldRef.current = 0
+      setPeakHoldPct(0)
+    }
+  }, [currentPeakPct])
 
-  const peakHoldPct = peakHoldRef.current
   const peakHoldColor = getPeakHoldColor(peakHoldPct)
   const showPeakHold = peakHoldPct > 0
 
@@ -189,30 +217,28 @@ export const InputLevelMeter = memo(function InputLevelMeter({
             delayDuration={0}
           >
             <div
-              className={`${styles.thumb} ${isPressed ? styles.pressed : ''}`}
+              className={`${styles.thumb} ${isPressed ? styles.pressed : hover ? styles.hovered : ''}`}
               style={{ left: `${faderPercent}%` }}
             />
           </Tooltip>
         )}
 
-        {showPeakHold && (
-          <>
-            <div
-              className={styles.peakDotTop}
-              style={{
-                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
-                background: peakHoldColor,
-              }}
-            />
-            <div
-              className={styles.peakDotBottom}
-              style={{
-                left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
-                background: peakHoldColor,
-              }}
-            />
-          </>
-        )}
+        <div
+          className={`${styles.peakDotTop} ${peakRising ? styles.peakRising : ''}`}
+          style={{
+            left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+            background: peakHoldColor,
+            opacity: showPeakHold ? 1 : 0,
+          }}
+        />
+        <div
+          className={`${styles.peakDotBottom} ${peakRising ? styles.peakRising : ''}`}
+          style={{
+            left: `min(calc(${peakHoldPct}% + 3px), calc(100% - 3px))`,
+            background: peakHoldColor,
+            opacity: showPeakHold ? 1 : 0,
+          }}
+        />
       </div>
 
       {showMeter && (

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -15,7 +15,7 @@
   padding: 2px;
   border-radius: 3px;
   width: 100%;
-  background: rgba(216, 244, 246, 0.04);
+  background: rgba(211, 237, 248, 0.11);
   transition: background-color 0.1s ease;
 }
 
@@ -23,10 +23,6 @@
   cursor: ew-resize;
 }
 
-.bars.pressed {
-  background: rgba(221, 234, 248, 0.08);
-}
-
 .barRow {
   display: inline-grid;
   grid-template-rows: max-content;
@@ -66,12 +62,18 @@
   width: 8px;
   height: 19px;
   border-radius: 9999px;
-  background: #edeef0;
+  background: #777b84;
+  border: 1px solid rgba(46, 49, 53, 0.3);
   cursor: ew-resize;
   z-index: 2;
   touch-action: none;
 }
 
+.thumb.hovered,
+.container:hover .thumb {
+  background: white;
+}
+
 .thumb.pressed {
   background: white;
 }
@@ -83,6 +85,11 @@
   border-radius: 9999px;
   z-index: 1;
   pointer-events: none;
+  transition: left 0.5s ease-out, opacity 0.5s ease-out;
+}
+
+.peakDot.peakRising {
+  transition: opacity 0.3s ease-out;
 }
 
 .peakDotTop {

package/src/components/InputLevelMeter/InputLevelMeter.stories.jsx

@@ -23,6 +23,7 @@ export default {
     },
     showHandler: { control: 'boolean' },
     showMeter: { control: 'boolean' },
+    hover: { control: 'boolean' },
     onVolumeChange: { action: 'volumeChanged' },
   },
 }
@@ -147,6 +148,25 @@ export const AsymmetricLevels = {
   },
 }
 
+export const HoverState = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div>
+        <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', display: 'block', marginBottom: '4px' }}>
+          Default
+        </span>
+        <AnimatedMeter />
+      </div>
+      <div>
+        <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', display: 'block', marginBottom: '4px' }}>
+          hover=true (parent hovered)
+        </span>
+        <AnimatedMeter hover />
+      </div>
+    </div>
+  ),
+}
+
 export const WithoutHandler = {
   render: () => <AnimatedMeter showHandler={false} />,
 }
@@ -289,6 +309,7 @@ export const Playground = {
     volume: 1,
     showHandler: true,
     showMeter: true,
+    hover: false,
   },
   render: (args) => {
     function PlaygroundMeter() {
@@ -306,6 +327,7 @@ export const Playground = {
           onVolumeChange={([v]) => setVolume(v)}
           showHandler={args.showHandler}
           showMeter={args.showMeter}
+          hover={args.hover}
         />
       )
     }

package/src/components/PeakLevel/PeakLevel.jsx

@@ -0,0 +1,73 @@
+import { memo, useRef } from 'react'
+import styles from './PeakLevel.module.css'
+
+const THRESHOLD_CLIP = 0
+const THRESHOLD_RED = -6
+const THRESHOLD_YELLOW = -12
+
+function linearToPeakDb(linear) {
+  if (!Array.isArray(linear)) return null
+  const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+  if (peak <= 0) return null
+  const db = 20 * Math.log10(peak)
+  if (db <= -96) return null
+  return db
+}
+
+function getLevel(db) {
+  if (db == null) return 'reset'
+  if (db >= THRESHOLD_CLIP) return 'clip'
+  if (db >= THRESHOLD_RED) return 'high'
+  if (db >= THRESHOLD_YELLOW) return 'medium'
+  return 'regular'
+}
+
+function formatPeakDb(db) {
+  if (db == null) return '--'
+  return db.toFixed(1)
+}
+
+export const PeakLevel = memo(function PeakLevel({
+  linear,
+  value,
+  onClick,
+}) {
+  const peakHoldRef = useRef(null)
+
+  let displayDb = value ?? null
+
+  if (linear !== undefined) {
+    const currentDb = linearToPeakDb(linear)
+
+    if (currentDb != null) {
+      if (peakHoldRef.current == null || currentDb > peakHoldRef.current) {
+        peakHoldRef.current = currentDb
+      }
+    }
+
+    if (linear[0] <= 0 && linear[1] <= 0) {
+      peakHoldRef.current = null
+    }
+
+    displayDb = peakHoldRef.current
+  }
+
+  const level = getLevel(displayDb)
+  const text = formatPeakDb(displayDb)
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      style={onClick ? { cursor: 'pointer' } : undefined}
+    >
+      <span className={`${styles.value} ${styles[level]}`}>
+        {text}
+      </span>
+    </div>
+  )
+})
+
+PeakLevel.displayName = 'PeakLevel'

package/src/components/PeakLevel/PeakLevel.module.css

@@ -0,0 +1,63 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 2px 0;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.value {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.04px;
+  white-space: nowrap;
+}
+
+.reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.regular {
+  color: #00dae8;
+}
+
+.medium {
+  color: #ffc53d;
+}
+
+.high {
+  color: #ec5d5e;
+}
+
+.clip {
+  color: #ec5d5e;
+  animation: blink 0.6s steps(1) infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.container:hover .reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.container:hover .regular {
+  color: #75ebf5;
+}
+
+.container:hover .medium {
+  color: #ffe7b3;
+}
+
+.container:hover .high {
+  color: #ff9592;
+}
+
+.container:hover .clip {
+  color: #ff9592;
+}

package/src/components/PeakLevel/PeakLevel.stories.jsx

@@ -0,0 +1,202 @@
+import { useState, useEffect, useRef } from 'react'
+import { PeakLevel } from './PeakLevel'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
+
+export default {
+  title: 'Components/PeakLevel',
+  component: PeakLevel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Reset = {
+  render: () => <PeakLevel value={null} />,
+}
+
+export const GreenLevel = {
+  render: () => <PeakLevel value={-18} />,
+}
+
+export const YellowLevel = {
+  render: () => <PeakLevel value={-9} />,
+}
+
+export const RedLevel = {
+  render: () => <PeakLevel value={-3} />,
+}
+
+export const ClipLevel = {
+  render: () => <PeakLevel value={1.3} />,
+}
+
+export const AllLevels = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={null} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Reset
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-18} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Green (&lt;-12)
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-9} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Yellow (-12 to -6)
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-3} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Red (&gt;-6)
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={1.3} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Clip (0+)
+        </span>
+      </div>
+    </div>
+  ),
+}
+
+export const WithLinearInput = {
+  render: () => {
+    function LivePeak() {
+      const linear = useSimulatedInputLevel()
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter linear={linear} />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <LivePeak />
+  },
+}
+
+export const WithClickToReset = {
+  render: () => {
+    function ResettablePeak() {
+      const linear = useSimulatedInputLevel()
+      const [peakDb, setPeakDb] = useState(null)
+      const peakRef = useRef(null)
+
+      useEffect(() => {
+        const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+        if (peak > 0) {
+          const db = 20 * Math.log10(peak)
+          if (db > -96) {
+            if (peakRef.current == null || db > peakRef.current) {
+              peakRef.current = db
+              setPeakDb(db)
+            }
+          }
+        }
+      }, [linear])
+
+      const handleReset = () => {
+        peakRef.current = null
+        setPeakDb(null)
+      }
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{ width: '200px' }}>
+              <InputLevelMeter linear={linear} />
+            </div>
+            <PeakLevel value={peakDb} onClick={handleReset} />
+          </div>
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '10px', fontFamily: 'monospace' }}>
+            Click the peak value to reset
+          </span>
+        </div>
+      )
+    }
+    return <ResettablePeak />
+  },
+}
+
+export const WithVolumeFader = {
+  render: () => {
+    function FaderWithPeak() {
+      const linear = useSimulatedInputLevel()
+      const [volume, setVolume] = useState(1)
+
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter
+              linear={linear}
+              volume={volume}
+              onVolumeChange={([v]) => setVolume(v)}
+            />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <FaderWithPeak />
+  },
+}
+
+export const BoundaryValues = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      {[-96, -60, -24, -6, -1, -0.1, 0, 0.1, 1, 3, 6].map((db) => (
+        <div key={db} style={{ textAlign: 'center' }}>
+          <PeakLevel value={db} />
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', fontFamily: 'monospace', display: 'block', marginTop: '4px' }}>
+            {db} dB
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const MultipleChannels = {
+  render: () => {
+    function MultiChannel() {
+      const linear = useSimulatedInputLevel()
+      const labels = ['Master', 'Vocals', 'Guitar', 'Drums']
+      const multipliers = [1, 0.7, 0.4, 0.15]
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {labels.map((label, i) => (
+            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', width: '48px' }}>
+                {label}
+              </span>
+              <div style={{ width: '160px' }}>
+                <InputLevelMeter linear={linear.map((l) => l * multipliers[i])} />
+              </div>
+              <PeakLevel linear={linear.map((l) => l * multipliers[i])} />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return <MultiChannel />
+  },
+}

package/src/icons/TrackPreviousIcon.jsx

@@ -0,0 +1,18 @@
+export function TrackPreviousIcon({ width = 32, height = 32 }) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.1797 9.6884C21.4546 9.86496 21.625 10.1751 21.625 10.5188L21.625 21.4812C21.625 21.8248 21.4546 22.135 21.1797 22.3116C20.9021 22.4898 20.5259 22.5208 20.2018 22.3202L11.8333 17.4237L11.8333 20.7917C11.8333 21.367 11.367 21.8333 10.7917 21.8333C10.2164 21.8333 9.75 21.367 9.75 20.7917V11.2083C9.75 10.633 10.2164 10.1667 10.7917 10.1667C11.367 10.1667 11.8333 10.633 11.8333 11.2083L11.8333 14.5762L20.2018 9.67975C20.5259 9.47916 20.9021 9.51013 21.1797 9.6884Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+TrackPreviousIcon.displayName = 'TrackPreviousIcon'

package/src/icons.jsx

@@ -350,3 +350,4 @@ export { Play1Icon } from './icons/Play1Icon'
 export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
 export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'
 export { Share2Icon } from './icons/Share2Icon'
+export { TrackPreviousIcon } from './icons/TrackPreviousIcon'

package/src/index.jsx

@@ -111,6 +111,7 @@ export { MoreButton } from './components/MoreButton/MoreButton'
 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 { ProductsBrandPattern } from './components/ProductsBrandPattern/ProductsBrandPattern'
 export { ProductsList } from './components/ProductsList/ProductsList'
 export { ProfileMenu } from './components/ProfileMenu/ProfileMenu'