@moises.ai/design-system 3.11.1 → 3.11.2

package/package.json

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

package/src/components/TrackHeader/RecordSettingsPopover.jsx

@@ -0,0 +1,83 @@
+import { Flex, Text } from '@radix-ui/themes'
+import { Popover } from 'radix-ui'
+import { useCallback, useState } from 'react'
+import { Select } from '../Select/Select'
+import { Slider } from '../Slider/Slider'
+import styles from './RecordSettingsPopover.module.css'
+
+export function RecordSettingsPopover({
+  isRecord,
+  device,
+  deviceOptions,
+  onDeviceChange,
+  channel,
+  channelOptions,
+  onChannelChange,
+  inputLevel,
+  children,
+}) {
+  const [opened, setOpened] = useState(false)
+
+  const handleOpenChange = useCallback((open) => {
+    if (!open || !isRecord) {
+      setOpened(open)
+    }
+  }, [])
+
+  const handleContextMenu = useCallback(() => {
+    e.preventDefault()
+    setOpened(true)
+  }, [])
+
+  return (
+    <Popover.Root open={opened} onOpenChange={handleOpenChange}>
+      <Popover.Trigger asChild onContextMenu={handleContextMenu}>
+        {children}
+      </Popover.Trigger>
+
+      <Popover.Content width="360px">
+        <Flex className={styles.root} direction="column" gap="4">
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Source
+            </Text>
+
+            {deviceOptions?.length ? (
+              <Select
+                items={deviceOptions}
+                defaultValue={device}
+                onChange={onDeviceChange}
+                size="1"
+              />
+            ) : (
+              <Text size="1">No device options.</Text>
+            )}
+
+            {channelOptions?.length && (
+              <Select
+                items={channelOptions}
+                defaultValue={channel}
+                onChange={onChannelChange}
+                size="1"
+              />
+            )}
+          </Flex>
+
+          <Flex direction="column" gap="1">
+            <Text size="1" weight="medium">
+              Input Level
+            </Text>
+
+            {opened && (
+              <Slider
+                value={inputLevel}
+                max={30}
+                style={{ paddingTop: '8px', paddingBottom: '8px' }}
+              />
+            )}
+          </Flex>
+        </Flex>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}

package/src/components/TrackHeader/RecordSettingsPopover.module.css

@@ -0,0 +1,13 @@
+.root {
+  width: 200px;
+  padding: var(--space-3);
+  border-radius: var(--radius-4, 8px);
+  border: 1px solid
+    var(--colors-neutral-neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--panel-solid, #18191b);
+
+  /* Shadows/shadow-5 */
+  box-shadow:
+    0 12px 32px -16px var(--overlays-black-alpha-5, rgba(0, 0, 0, 0.3)),
+    0 12px 60px 0 var(--overlays-black-alpha-3, rgba(0, 0, 0, 0.15));
+}

package/src/components/TrackHeader/TrackHeader.jsx

@@ -16,22 +16,30 @@ import {
   Tooltip,
   TrackControlsToggle,
 } from '../../index'
+import { RecordSettingsPopover } from './RecordSettingsPopover'
 import styles from './TrackHeader.module.css'
 
+const DND_PROTECTION = {
+  onPointerDown: (e) => e.stopPropagation(),
+  onMouseDown: (e) => e.stopPropagation(),
+  onTouchStart: (e) => e.stopPropagation(),
+}
+
 export const TrackHeader = memo(
   ({
     // Config
     title,
     menuOptions,
-    instrumentOptions,
-    onInstrumentChange,
-    instrumentSelected,
     showPan = true,
     showVolumeControls = true,
     isGrouped = false,
     height = 81,
     compact = false,
     isActive = false,
+    instrumentOptions,
+    deviceOptions,
+    channelOptions,
+    inputLevel,
 
     // State
     volume,
@@ -41,6 +49,9 @@ export const TrackHeader = memo(
     isAutoMuted,
     isSolo,
     isOpen,
+    instrumentSelected,
+    device,
+    channel,
 
     // State change listeners
     onVolumeChange,
@@ -49,6 +60,9 @@ export const TrackHeader = memo(
     onRecordChange,
     onSoloChange,
     onOpenChange,
+    onInstrumentChange,
+    onDeviceChange,
+    onChannelChange,
 
     // Children (having content means group/takelanes)
     children,
@@ -94,9 +108,7 @@ export const TrackHeader = memo(
                   style={{ minWidth: 0, overflow: 'hidden' }}
                 >
                   <IconButton
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}
+                    {...DND_PROTECTION}
                     variant="ghost"
                     size="1"
                     onClick={handleToggleOpen}
@@ -142,39 +154,41 @@ export const TrackHeader = memo(
                 </Flex>
 
                 <Flex
+                  {...DND_PROTECTION}
                   direction="row"
-                  gap="3"
+                  gap="2px"
                   align="center"
-                  onPointerDown={(e) => e.stopPropagation()}
-                  onMouseDown={(e) => e.stopPropagation()}
-                  onTouchStart={(e) => e.stopPropagation()}
                 >
-                  <Flex gap="2px">
+                  <RecordSettingsPopover
+                    isRecord={isRecord}
+                    deviceOptions={deviceOptions}
+                    device={device}
+                    onDeviceChange={onDeviceChange}
+                    channelOptions={channelOptions}
+                    channel={channel}
+                    onChannelChange={onChannelChange}
+                    inputLevel={inputLevel}
+                  >
                     <TrackControlsToggle
                       type="record"
                       selected={isRecord}
-                      onClick={onRecordChange}
+                      onClick={() => onRecordChange?.()}
                     />
-                    <TrackControlsToggle
-                      type={
-                        isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'
-                      }
-                      selected={isMuted || (!isSolo && isAutoMuted)}
-                      onClick={onMutedChange}
-                    />
-                    <TrackControlsToggle
-                      type="solo"
-                      selected={isSolo}
-                      onClick={onSoloChange}
-                    />
-                  </Flex>
+                  </RecordSettingsPopover>
+                  <TrackControlsToggle
+                    type={isMuted ? 'mute' : isAutoMuted ? 'autoMute' : 'mute'}
+                    selected={isMuted || (!isSolo && isAutoMuted)}
+                    onClick={onMutedChange}
+                  />
+                  <TrackControlsToggle
+                    type="solo"
+                    selected={isSolo}
+                    onClick={onSoloChange}
+                  />
                 </Flex>
 
                 {menuOptions && (
-                  <Box
-                    onPointerDown={(e) => e.stopPropagation()}
-                    onMouseDown={(e) => e.stopPropagation()}
-                    onTouchStart={(e) => e.stopPropagation()}>
+                  <Box {...DND_PROTECTION}>
                     <DropdownMenu
                       trigger={
                         <IconButton
@@ -193,16 +207,10 @@ export const TrackHeader = memo(
                     />
                   </Box>
                 )}
-
               </Flex>
             </div>
 
-            <div
-              className={styles.trackControls}
-              onPointerDown={(e) => e.stopPropagation()}
-              onMouseDown={(e) => e.stopPropagation()}
-              onTouchStart={(e) => e.stopPropagation()}
-            >
+            <div {...DND_PROTECTION} className={styles.trackControls}>
               {!compact && showVolumeControls && (
                 <>
                   <HorizontalVolume