@moises.ai/design-system 3.11.10 → 3.11.11

package/package.json

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

@@ -1,8 +1,9 @@
 import { memo, useRef } from 'react'
 import styles from './PeakLevel.module.css'
 
-const PEAK_HOLD_THRESHOLD_HIGH = 0
-const PEAK_HOLD_THRESHOLD_MEDIUM = -1
+const THRESHOLD_CLIP = 0
+const THRESHOLD_RED = -6
+const THRESHOLD_YELLOW = -12
 
 function linearToPeakDb(linear) {
   if (!Array.isArray(linear)) return null
@@ -15,8 +16,9 @@ function linearToPeakDb(linear) {
 
 function getLevel(db) {
   if (db == null) return 'reset'
-  if (db >= PEAK_HOLD_THRESHOLD_HIGH) return 'high'
-  if (db >= PEAK_HOLD_THRESHOLD_MEDIUM) return 'medium'
+  if (db >= THRESHOLD_CLIP) return 'clip'
+  if (db >= THRESHOLD_RED) return 'high'
+  if (db >= THRESHOLD_YELLOW) return 'medium'
   return 'regular'
 }
 

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

@@ -32,6 +32,16 @@
   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);
 }
@@ -47,3 +57,7 @@
 .container:hover .high {
   color: #ff9592;
 }
+
+.container:hover .clip {
+  color: #ff9592;
+}

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

@@ -23,15 +23,19 @@ export const Reset = {
   render: () => <PeakLevel value={null} />,
 }
 
-export const RegularLevel = {
-  render: () => <PeakLevel value={-2} />,
+export const GreenLevel = {
+  render: () => <PeakLevel value={-18} />,
 }
 
-export const MediumLevel = {
-  render: () => <PeakLevel value={-0.2} />,
+export const YellowLevel = {
+  render: () => <PeakLevel value={-9} />,
 }
 
-export const HighLevel = {
+export const RedLevel = {
+  render: () => <PeakLevel value={-3} />,
+}
+
+export const ClipLevel = {
   render: () => <PeakLevel value={1.3} />,
 }
 
@@ -45,21 +49,27 @@ export const AllLevels = {
         </span>
       </div>
       <div style={{ textAlign: 'center' }}>
-        <PeakLevel value={-12} />
+        <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' }}>
-          Regular
+          Yellow (-12 to -6)
         </span>
       </div>
       <div style={{ textAlign: 'center' }}>
-        <PeakLevel value={-0.5} />
+        <PeakLevel value={-3} />
         <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
-          Medium
+          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' }}>
-          High
+          Clip (0+)
         </span>
       </div>
     </div>