@moises.ai/design-system 3.11.21 → 3.12.0

package/package.json

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

package/src/components/InputLevelMeter/InputLevelMeter.jsx

@@ -6,6 +6,7 @@ const SEGMENT_MIN = 5
 const SEGMENT_RANGE = 25
 const UNITY_GAIN_POS = 0.667
 const MAX_BOOST_DB = 6
+const FADER_KEYBOARD_STEP = 0.02
 
 function linearToMeterLevel(linear) {
   const peakDb = 20 * Math.log10(Math.max(linear, 1e-6))
@@ -101,6 +102,9 @@ export const InputLevelMeter = memo(function InputLevelMeter({
   const [peakHoldPct, setPeakHoldPct] = useState(0)
   const [peakRising, setPeakRising] = useState(false)
 
+  const [thumbFocused, setThumbFocused] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
+
   useEffect(() => {
     peakHoldRef.current = 0
     setPeakHoldPct(0)
@@ -184,6 +188,49 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     document.body.style.cursor = ''
   }, [])
 
+  const handleThumbKeyDown = useCallback(
+    (e) => {
+      if (!onVolumeChange) return
+      const pos = gainToFaderPosition(volume)
+      let nextPos = pos
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+          e.preventDefault()
+          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'ArrowLeft':
+        case 'ArrowDown':
+          e.preventDefault()
+          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'Home':
+          e.preventDefault()
+          onVolumeChange([faderPositionToGain(0)])
+          break
+        case 'End':
+          e.preventDefault()
+          onVolumeChange([faderPositionToGain(1)])
+          break
+        case 'PageUp':
+          e.preventDefault()
+          nextPos = Math.min(1, pos + FADER_KEYBOARD_STEP * 4)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        case 'PageDown':
+          e.preventDefault()
+          nextPos = Math.max(0, pos - FADER_KEYBOARD_STEP * 4)
+          onVolumeChange([faderPositionToGain(nextPos)])
+          break
+        default:
+          break
+      }
+    },
+    [onVolumeChange, volume],
+  )
+
   const hasHandler = onVolumeChange && showHandler
 
   const meterClassName = [
@@ -194,6 +241,11 @@ export const InputLevelMeter = memo(function InputLevelMeter({
     .filter(Boolean)
     .join(' ')
 
+  const tooltipOpen = isPressed || thumbFocused || hoverOpen
+
+  const gainDbForAria =
+    volume <= 0 ? -96 : 20 * Math.log10(Math.max(volume, 1e-6))
+
   return (
     <div
       className={styles.container}
@@ -211,15 +263,26 @@ export const InputLevelMeter = memo(function InputLevelMeter({
         {hasHandler && (
           <Tooltip
             content={formatGainDb(volume)}
-            open={isPressed}
+            open={tooltipOpen}
+            onOpenChange={setHoverOpen}
             side="bottom"
             align="center"
-            sideOffset={8}
+            sideOffset={3}
             delayDuration={0}
           >
             <div
+              role="slider"
+              tabIndex={0}
+              aria-label="Input gain"
+              aria-valuemin={-96}
+              aria-valuemax={MAX_BOOST_DB}
+              aria-valuenow={Math.round(gainDbForAria * 10) / 10}
+              aria-valuetext={formatGainDb(volume)}
               className={`${styles.thumb} ${isPressed ? styles.pressed : hover ? styles.hovered : ''}`}
               style={{ left: `${faderPercent}%` }}
+              onFocus={() => setThumbFocused(true)}
+              onBlur={() => setThumbFocused(false)}
+              onKeyDown={handleThumbKeyDown}
             />
           </Tooltip>
         )}

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

@@ -78,6 +78,11 @@
   background: white;
 }
 
+.thumb:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .peakDot {
   position: absolute;
   width: 1px;

package/src/components/PanControl/PanControl.jsx

@@ -2,13 +2,14 @@ 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 '../../index'
+import { Tooltip } from '../Tooltip/Tooltip'
 
 const KNOB_CENTER_X = 10
 const KNOB_CENTER_Y = 10
 const KNOB_RADIUS = 9.5
 const START_ANGLE = -Math.PI / 2
 const STEP_SIZE = 0.01
+const KEYBOARD_STEP = STEP_SIZE * 12
 
 const clampNorm = (v) => Math.max(-1, Math.min(1, v))
 const denormalize = (normalized, minValue, maxValue) =>
@@ -30,6 +31,16 @@ export const PanControl = ({
   const pendingNormRef = useRef(value)
   const rafRef = useRef(0)
 
+  const [knobFocused, setKnobFocused] = useState(false)
+  const [hoverOpen, setHoverOpen] = useState(false)
+
+  useEffect(() => {
+    if (disabled) {
+      setHoverOpen(false)
+      setKnobFocused(false)
+    }
+  }, [disabled])
+
   useEffect(() => {
     if (isDragging) {
       const style = document.createElement('style')
@@ -111,6 +122,38 @@ export const PanControl = ({
     [scheduleEmit],
   )
 
+  const handleKnobKeyDown = useCallback(
+    (e) => {
+      if (disabled) return
+      let next = value
+      switch (e.key) {
+        case 'ArrowUp':
+        case 'ArrowRight':
+          e.preventDefault()
+          next = value + KEYBOARD_STEP
+          scheduleEmit(next)
+          break
+        case 'ArrowDown':
+        case 'ArrowLeft':
+          e.preventDefault()
+          next = value - KEYBOARD_STEP
+          scheduleEmit(next)
+          break
+        case 'Home':
+          e.preventDefault()
+          scheduleEmit(-1)
+          break
+        case 'End':
+          e.preventDefault()
+          scheduleEmit(1)
+          break
+        default:
+          break
+      }
+    },
+    [disabled, value, scheduleEmit],
+  )
+
   const { arcPath, pointerRotation, arcColor, pointerColor } = useMemo(() => {
     const actual = denormalize(value, minValue, maxValue)
     const displayNorm = clampNorm(actual)
@@ -138,6 +181,12 @@ export const PanControl = ({
     return `Pan: ${Math.abs(pct) < 1 ? 0 : pct}`
   }, [value, minValue, maxValue])
 
+  const displayNorm = clampNorm(denormalize(value, minValue, maxValue))
+  const ariaPanPct = Math.round(displayNorm * 100)
+
+  const tooltipOpen =
+    !disabled && (isDragging || knobFocused || hoverOpen)
+
   return (
     <div
       ref={containerRef}
@@ -148,13 +197,24 @@ export const PanControl = ({
     >
       <Tooltip
         content={panValueText}
-        open={isDragging}
+        open={tooltipOpen}
+        onOpenChange={(next) => {
+          if (!disabled) setHoverOpen(next)
+        }}
         side="bottom"
         align="center"
-        sideOffset={10}
+        sideOffset={3}
         delayDuration={0}
       >
         <div
+          role="slider"
+          tabIndex={disabled ? -1 : 0}
+          aria-label="Pan"
+          aria-valuemin={-100}
+          aria-valuemax={100}
+          aria-valuenow={ariaPanPct}
+          aria-valuetext={panValueText}
+          aria-disabled={disabled}
           className={classNames(
             styles.pan,
             isDragging && styles.active,
@@ -164,6 +224,9 @@ export const PanControl = ({
           onPointerMove={onPointerMove}
           onPointerUp={onPointerUp}
           onPointerCancel={onPointerUp}
+          onFocus={() => setKnobFocused(true)}
+          onBlur={() => setKnobFocused(false)}
+          onKeyDown={handleKnobKeyDown}
         >
           <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
             <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />

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

@@ -37,4 +37,9 @@
     fill: #DDEAF8;
     fill-opacity: 0.0784314;
   }
-  
+
+  .pan:focus-visible:not(.disabled) {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+    border-radius: 50%;
+  }

package/src/components/TrackControlButton/TrackControlButton.module.css

@@ -2,8 +2,8 @@
   box-sizing: border-box;
   width: 20px;
   min-width: 20px;
+  height: 20px;
   min-height: 20px;
-  height: 100%;
   margin: 0;
   padding: 2px;
   border: none;

package/src/icons/MinusIcon.jsx

@@ -7,7 +7,7 @@ export const MinusIcon = ({ width = 16, height = 16, className, ...props }) => (
     fill="none"
     className={className} {...props}>
     <g >
-      <path d="M3.33325 8H12.6666" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
+      <path d="M3.33325 8H12.6666" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
     </g>
   </svg>
 )

package/src/icons/Share2Icon.jsx

@@ -11,12 +11,12 @@ export const Share2Icon = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g clip-path="url(#clip0_6624_4145)">
+    <g clipPath="url(#clip0_6624_4145)">
       <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-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </g>
     <defs>