@moises.ai/design-system 3.11.20 → 3.12.0

package/package.json

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

@@ -14,6 +14,26 @@ import {
 import { useMobileDrawer } from '../../utils/useMobileDrawer'
 import { MobileDrawerProvider } from '../../contexts/MobileDrawerContext'
 
+const DEFAULT_MOBILE_BREAKPOINT = 768
+
+const getMobileMediaQuery = (mobileBreakpoint) => {
+  if (mobileBreakpoint == null) {
+    return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+  }
+
+  if (typeof mobileBreakpoint === 'number') {
+    return `(max-width: ${mobileBreakpoint}px)`
+  }
+
+  if (typeof mobileBreakpoint === 'string') {
+    const trimmed = mobileBreakpoint.trim()
+    if (!trimmed) return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+    return trimmed.startsWith('(') ? trimmed : `(max-width: ${trimmed})`
+  }
+
+  return `(max-width: ${DEFAULT_MOBILE_BREAKPOINT}px)`
+}
+
 export const Sidebar = ({
   className,
   children,
@@ -23,9 +43,12 @@ export const Sidebar = ({
   onCollapsedChange,
   onLogoClick,
   tooltip = 'Expand menu',
+  mobileBreakpoint = DEFAULT_MOBILE_BREAKPOINT,
   ...props
 }) => {
-  const { isMobile, isOpen: mobileOpen, open, close } = useMobileDrawer()
+  const mobileMediaQuery = getMobileMediaQuery(mobileBreakpoint)
+  const { isMobile, isOpen: mobileOpen, open, close } =
+    useMobileDrawer(mobileMediaQuery)
   const [isHovered, setIsHovered] = useState(false)
   const [internalTemporarilyExpandedByDrag, setInternalTemporarilyExpandedByDrag] =
     useState(false)
@@ -159,6 +182,7 @@ export const Sidebar = ({
       <div
         className={classNames(styles.root, {
           [styles.rootCollapsed]: effectiveCollapsed,
+          [styles.rootMobile]: isMobile,
         })}
         {...props}
       >
@@ -184,8 +208,8 @@ export const Sidebar = ({
                   cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
                 }}
               >
-              <MoisesLogoIcon width={32} height={17} />
-              <MoisesIcon height={12.269} />
+                <MoisesLogoIcon width={32} height={17} />
+                <MoisesIcon height={12.269} />
               </Flex>
             </button>
 
@@ -240,35 +264,35 @@ export const Sidebar = ({
                       [styles.headerCollapsed]: effectiveCollapsed,
                     })}
                   >
-                  <button
-                    type="button"
-                    className={styles.logoButton}
-                    onClick={handleLogoClick}
-                    aria-label={desktopLogoAriaLabel}
-                  >
-                    <Flex
-                      align="center"
-                      gap="2"
-                      style={{
-                        cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
-                      }}
+                    <button
+                      type="button"
+                      className={styles.logoButton}
+                      onClick={handleLogoClick}
+                      aria-label={desktopLogoAriaLabel}
                     >
-                      {logoContent}
-                    </Flex>
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleToggleCollapse}
-                    className={classNames(styles.toggleButton, {
-                      [styles.toggleButtonHidden]: effectiveCollapsed,
-                    })}
-                    aria-label="Collapse menu"
-                  >
-                    <SidebarLeftIcon width={16} height={16} />
-                  </button>
-                </Flex>
-              </div>
-            </Tooltip>
+                      <Flex
+                        align="center"
+                        gap="2"
+                        style={{
+                          cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                        }}
+                      >
+                        {logoContent}
+                      </Flex>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={handleToggleCollapse}
+                      className={classNames(styles.toggleButton, {
+                        [styles.toggleButtonHidden]: effectiveCollapsed,
+                      })}
+                      aria-label="Collapse menu"
+                    >
+                      <SidebarLeftIcon width={16} height={16} />
+                    </button>
+                  </Flex>
+                </div>
+              </Tooltip>
             </div>
           ) : (
             <div className={styles.headerWrapper}>
@@ -279,33 +303,33 @@ export const Sidebar = ({
                   [styles.headerCollapsed]: effectiveCollapsed,
                 })}
               >
-              <button
-                type="button"
-                className={styles.logoButton}
-                onClick={handleLogoClick}
-                aria-label={desktopLogoAriaLabel}
-              >
-                <Flex
-                  align="center"
-                  gap="2"
-                  style={{
-                    cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
-                  }}
+                <button
+                  type="button"
+                  className={styles.logoButton}
+                  onClick={handleLogoClick}
+                  aria-label={desktopLogoAriaLabel}
                 >
-                  {logoContent}
-                </Flex>
-              </button>
-              <button
-                type="button"
-                onClick={handleToggleCollapse}
-                className={classNames(styles.toggleButton, {
-                  [styles.toggleButtonHidden]: effectiveCollapsed,
-                })}
-                aria-label="Collapse menu"
-              >
-                <SidebarLeftIcon width={16} height={16} />
-              </button>
-            </Flex>
+                  <Flex
+                    align="center"
+                    gap="2"
+                    style={{
+                      cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                    }}
+                  >
+                    {logoContent}
+                  </Flex>
+                </button>
+                <button
+                  type="button"
+                  onClick={handleToggleCollapse}
+                  className={classNames(styles.toggleButton, {
+                    [styles.toggleButtonHidden]: effectiveCollapsed,
+                  })}
+                  aria-label="Collapse menu"
+                >
+                  <SidebarLeftIcon width={16} height={16} />
+                </button>
+              </Flex>
             </div>
           )}
           <Flex direction="column" className={styles.content}>

package/src/components/Sidebar/Sidebar.module.css

@@ -148,6 +148,106 @@
   color: var(--neutral-alpha-12);
 }
 
+.rootMobile {
+  position: absolute;
+  width: 0;
+  height: 0;
+  overflow: visible;
+  background: transparent;
+  border: none;
+}
+
+.rootMobile.rootCollapsed {
+  width: 0;
+  height: 0;
+}
+
+.rootMobile .desktopSidebar {
+  display: none;
+}
+
+.rootMobile .mobileTopBarWrapper {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+  z-index: 1002;
+  background-color: var(--neutral-1);
+  border-bottom: 1px solid var(--neutral-3);
+}
+
+.rootMobile .mobileTopBar {
+  display: flex;
+  width: 100%;
+  border-bottom: none;
+}
+
+.rootMobile .mobileOverlay {
+  display: block;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 160ms ease-out;
+}
+
+.rootMobile .mobileOverlayOpen {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.rootMobile .mobileDrawer {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  top: 64px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1001;
+  width: 100%;
+  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
+  padding: 16px;
+  background-color: var(--neutral-1);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.rootMobile .mobileDrawerOpen {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 200ms ease-out, visibility 0s linear 0s;
+}
+
+.rootMobile .mobileDrawerContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  transform: translateY(-12px);
+  opacity: 0;
+  transition: transform 240ms ease-out, opacity 240ms ease-out;
+  will-change: transform, opacity;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
+}
+
+.rootMobile .mobileDrawerContentOpen {
+  transform: translateY(0);
+  opacity: 1;
+}
+
 @media (max-width: 768px) {
   .root {
     position: absolute;

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>