@moises.ai/design-system 3.11.11 → 3.11.12

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -212,7 +212,8 @@ export const InputLevelMeter = memo(function InputLevelMeter({
           <Tooltip
             content={formatGainDb(volume)}
             open={isPressed}
-            side="top"
+            side="bottom"
+            align="center"
             sideOffset={8}
             delayDuration={0}
           >

package/src/components/PanControl/PanControl.jsx

@@ -2,7 +2,7 @@ import styles from './PanControl.module.css'
 import classNames from 'classnames'
 import { useRef, useCallback, useMemo, useState, useEffect } from 'react'
 import { useEventListener } from '../../utils/useEventListener'
-import { Tooltip } from 'radix-ui'
+import { Tooltip } from '../../index'
 
 const KNOB_CENTER_X = 10
 const KNOB_CENTER_Y = 10
@@ -23,8 +23,6 @@ export const PanControl = ({
   maxValue = 0.65,
 }) => {
   const containerRef = useRef(null)
-  const [open, setOpen] = useState(false)
-  const timeoutRef = useRef()
   const [isDragging, setIsDragging] = useState(false)
   const styleRef = useRef(null)
 
@@ -32,39 +30,26 @@ export const PanControl = ({
   const pendingNormRef = useRef(value)
   const rafRef = useRef(0)
 
-  const showTooltip = useCallback(() => {
-    clearTimeout(timeoutRef.current)
-    setOpen(true)
-  }, [])
-
-  const hideTooltip = useCallback(() => {
-    if (isDragging) return
-    timeoutRef.current = setTimeout(() => setOpen(false), 300)
-  }, [isDragging])
-
   useEffect(() => {
     if (isDragging) {
       const style = document.createElement('style')
       style.textContent = '* { cursor: ns-resize !important; }'
       document.head.appendChild(style)
       styleRef.current = style
-      showTooltip()
     } else {
       if (styleRef.current) {
         document.head.removeChild(styleRef.current)
         styleRef.current = null
       }
-      hideTooltip()
     }
     return () => {
       if (styleRef.current) {
         document.head.removeChild(styleRef.current)
         styleRef.current = null
       }
-      hideTooltip()
       if (rafRef.current) cancelAnimationFrame(rafRef.current)
     }
-  }, [isDragging, showTooltip, hideTooltip])
+  }, [isDragging])
 
   const scheduleEmit = useCallback(
     (nextNormalized) => {
@@ -161,65 +146,56 @@ export const PanControl = ({
       onClick={handleClick}
       style={{ cursor: disabled ? 'default' : 'ns-resize' }}
     >
-      <Tooltip.Provider delayDuration={200}>
-        <Tooltip.Root open={open}>
-          <Tooltip.Trigger asChild>
-            <div
-              className={classNames(
-                styles.pan,
-                isDragging && styles.active,
-                disabled && styles.disabled,
-              )}
-              onPointerDown={onPointerDown}
-              onPointerMove={onPointerMove}
-              onPointerUp={onPointerUp}
-              onPointerCancel={onPointerUp}
+      <Tooltip
+        content={panValueText}
+        open={isDragging}
+        side="bottom"
+        align="center"
+        sideOffset={10}
+        delayDuration={0}
+      >
+        <div
+          className={classNames(
+            styles.pan,
+            isDragging && styles.active,
+            disabled && styles.disabled,
+          )}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+        >
+          <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
+            <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />
+            <circle
+              cx={KNOB_CENTER_X}
+              cy={KNOB_CENTER_Y}
+              r={KNOB_RADIUS}
+              stroke="#D3EDF8"
+              strokeOpacity={0.113725}
+            />
+            {value !== 0 && (
+              <path
+                d={arcPath}
+                stroke={arcColor}
+                strokeLinecap="round"
+                strokeWidth={1}
+                fill="none"
+              />
+            )}
+            <g
+              transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
             >
-              <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
-                <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />
-                <circle
-                  cx={KNOB_CENTER_X}
-                  cy={KNOB_CENTER_Y}
-                  r={KNOB_RADIUS}
-                  stroke="#D3EDF8"
-                  strokeOpacity={0.113725}
-                />
-                {value !== 0 && (
-                  <path
-                    d={arcPath}
-                    stroke={arcColor}
-                    strokeLinecap="round"
-                    strokeWidth={1}
-                    fill="none"
-                  />
-                )}
-                <g
-                  transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
-                >
-                  <path
-                    d="M10 0.5 L10 6"
-                    stroke={pointerColor}
-                    strokeLinecap="round"
-                    strokeWidth={1}
-                  />
-                </g>
-              </svg>
-            </div>
-          </Tooltip.Trigger>
-
-          <Tooltip.Content
-            className={styles.tooltipContent}
-            side="bottom"
-            align="center"
-            sideOffset={10}
-          >
-            <>
-              {panValueText}
-              <Tooltip.Arrow className={styles.tooltipArrow} />
-            </>
-          </Tooltip.Content>
-        </Tooltip.Root>
-      </Tooltip.Provider>
+              <path
+                d="M10 0.5 L10 6"
+                stroke={pointerColor}
+                strokeLinecap="round"
+                strokeWidth={1}
+              />
+            </g>
+          </svg>
+        </div>
+      </Tooltip>
     </div>
   )
 }

package/src/components/PanControl/PanControl.module.css

@@ -37,35 +37,4 @@
     fill: #DDEAF8;
     fill-opacity: 0.0784314;
   }
-  
-  .tooltipContent {
-    background-color: var(--neutral-12);
-    color: var(--neutral-2);
-    font-size: 12px;
-    padding: 6px 10px;
-    border-radius: 8px;
-    z-index: 999;
-    white-space: nowrap;
-    animation: fadeIn 0.2s ease;
-    display: flex;
-    align-items: center;
-    width: 70px;
-    justify-content: center;
-    gap: 4px;
-  }
-  
-  .tooltipArrow {
-    fill: var(--neutral-12);
-  }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(2px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }