@moises.ai/design-system 3.10.17 → 3.11.0

package/package.json

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

package/src/components/SetlistList/SetlistList.jsx

@@ -77,10 +77,7 @@ function NewSetlistButton({
         </div>
       }
       text={text}
-      className={classNames(
-        styles.newSetlistItemButton,
-        className,
-      )}
+      className={classNames(styles.newSetlistItemButton, className)}
       collapsed={collapsed}
       style={style}
     />
@@ -323,11 +320,15 @@ export const SetlistList = ({
   const collapsedVisibleOffset = 4
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
-  const showCollapsedStack = collapsed && !isHoveredWhenCollapsed && !isCollapseTransitioning
+  const showCollapsedStack =
+    collapsed && !isHoveredWhenCollapsed && !isCollapseTransitioning
   const visibleSetlists = setlists
 
   const totalAnimatedItems = setlists.length + (onNewSetlistClick ? 1 : 0)
-  const staggerTotalDuration = staggerItemDuration + totalAnimatedItems * staggerBaseDelay
+  const slideItemCount = Math.min(4, totalAnimatedItems)
+  const slideTotalDuration =
+    staggerItemDuration + Math.max(0, slideItemCount - 1) * staggerBaseDelay
+  const staggerTotalDuration = slideTotalDuration
 
   const expandItems = () => {
     if (shrinkTimeoutRef.current) {
@@ -460,6 +461,13 @@ export const SetlistList = ({
       '0 3.401px 13.603px -6.801px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.551px 10.202px -3.401px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.701px 2.551px -1.701px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
     ]
 
+    const narrowingPerLevel = 1
+    const scale =
+      stackPosition === 0
+        ? 1
+        : (collapsedItemHeight - stackPosition * narrowingPerLevel * 2) /
+          collapsedItemHeight
+
     return {
       position: 'relative',
       marginTop:
@@ -468,27 +476,59 @@ export const SetlistList = ({
           : -(collapsedItemHeight - collapsedVisibleOffset),
       zIndex,
       boxShadow: boxShadows[index],
+      transform: scale < 1 ? `scaleX(${scale})` : undefined,
     }
   }
 
-  const isStaggerActive = (collapsed && !showCollapsedStack) || isCollapseTransitioning
+  const isStaggerActive =
+    (collapsed && !showCollapsedStack) || isCollapseTransitioning
   const itemCollapsed = collapsed || isCollapseTransitioning
 
   const getStaggerStyle = (itemIndex) => {
     if (!isStaggerActive) return undefined
+    const isSlideItem = itemIndex < slideItemCount
+
     if (isShrinking) {
-      const outY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      if (isSlideItem) {
+        const outY = -(
+          itemIndex *
+          (collapsedItemHeight - collapsedVisibleOffset)
+        )
+        const outScale =
+          itemIndex === 0
+            ? 1
+            : (collapsedItemHeight - itemIndex * 2) / collapsedItemHeight
+        return {
+          animationDelay: `${itemIndex * staggerBaseDelay}ms`,
+          '--stagger-out-y': `${outY}px`,
+          '--stagger-out-scale': outScale,
+          zIndex: totalAnimatedItems - itemIndex,
+        }
+      }
       return {
-        animationDelay: `${itemIndex * staggerBaseDelay}ms`,
-        '--stagger-out-y': `${outY}px`,
+        '--fade-duration': `${slideTotalDuration}ms`,
         zIndex: totalAnimatedItems - itemIndex,
       }
     }
     if (isExpanding) {
-      const inY = -(itemIndex * (collapsedItemHeight - collapsedVisibleOffset))
+      if (isSlideItem) {
+        const inY = -(
+          itemIndex *
+          (collapsedItemHeight - collapsedVisibleOffset)
+        )
+        const inScale =
+          itemIndex === 0
+            ? 1
+            : (collapsedItemHeight - itemIndex * 2) / collapsedItemHeight
+        return {
+          animationDelay: `${(slideItemCount - 1 - itemIndex) * staggerBaseDelay}ms`,
+          '--stagger-in-y': `${inY}px`,
+          '--stagger-in-scale': inScale,
+          zIndex: totalAnimatedItems - itemIndex,
+        }
+      }
       return {
-        animationDelay: `${(totalAnimatedItems - 1 - itemIndex) * staggerBaseDelay}ms`,
-        '--stagger-in-y': `${inY}px`,
+        '--fade-duration': `${slideTotalDuration}ms`,
         zIndex: totalAnimatedItems - itemIndex,
       }
     }
@@ -547,6 +587,8 @@ export const SetlistList = ({
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
+            const itemStaggerIndex = index + collapsedNewItemOffset
+            const isSlideItem = itemStaggerIndex < slideItemCount
             const setlistItem = (
               <SetlistItem
                 isSelected={isSelected}
@@ -555,9 +597,7 @@ export const SetlistList = ({
                 droppable={droppable}
                 isDropTarget={activeDropSetlistId === setlist.id}
                 dndDroppableId={
-                  enableDndDropTargets
-                    ? `setlist:${setlist.id}`
-                    : undefined
+                  enableDndDropTargets ? `setlist:${setlist.id}` : undefined
                 }
                 onDragOver={(event) => {
                   onSetlistDragOver?.(setlist.id, event)
@@ -587,12 +627,23 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed && showCollapsedStack,
                   [styles.staggerItem]: isStaggerActive,
-                  [styles.staggerAnimateIn]: isStaggerActive && isExpanding,
-                  [styles.staggerAnimateOut]: isStaggerActive && isShrinking,
+                  [styles.staggerAnimateIn]:
+                    isStaggerActive && isExpanding && isSlideItem,
+                  [styles.staggerAnimateOut]:
+                    isStaggerActive && isShrinking && isSlideItem,
+                  [styles.fadeAnimateIn]:
+                    isStaggerActive && isExpanding && !isSlideItem,
+                  [styles.fadeAnimateOut]:
+                    isStaggerActive && isShrinking && !isSlideItem,
+                  [styles.fadeHidden]:
+                    !isSlideItem &&
+                    collapsed &&
+                    !isHoveredWhenCollapsed &&
+                    !isCollapseTransitioning,
                 })}
                 style={{
                   ...getCollapsedStackStyle(index),
-                  ...getStaggerStyle(index + collapsedNewItemOffset),
+                  ...getStaggerStyle(itemStaggerIndex),
                 }}
               />
             )

package/src/components/SetlistList/SetlistList.module.css

@@ -157,7 +157,7 @@
   background: var(--neutral-alpha-3);
 
   &.collapsed {
-    /* background: transparent; */
+    background: transparent;
 
     .avatarSetlist {
       background: var(--neutral-2);
@@ -165,8 +165,6 @@
 
     &:hover,
     &.menuOpen {
-      background: transparent !important;
-
       .avatarSetlist {
         background: var(--neutral-2) !important;
       }
@@ -265,6 +263,21 @@ sectionTitle {
   position: relative;
 }
 
+.collapsedStack .collapsedStackItem:not(:first-child) {
+  background: transparent !important;
+  pointer-events: none;
+}
+
+.collapsedStack .collapsedStackItem:not(:first-child) .avatarSetlist::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: #11111399;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 2;
+}
+
 .setlistExpandButton {
   display: flex;
   align-items: center;
@@ -313,16 +326,19 @@ sectionTitle {
 
 @keyframes staggerIn {
   from {
-    transform: translateY(var(--stagger-in-y, 0));
+    transform: translateY(var(--stagger-in-y, 0)) scaleX(var(--stagger-in-scale, 1));
   }
   to {
-    transform: translateY(0);
+    transform: translateY(0) scaleX(1);
   }
 }
 
 @keyframes staggerOut {
+  from {
+    transform: translateY(0) scaleX(1);
+  }
   to {
-    transform: translateY(var(--stagger-out-y, 0));
+    transform: translateY(var(--stagger-out-y, 0)) scaleX(var(--stagger-out-scale, 1));
   }
 }
 
@@ -340,6 +356,37 @@ sectionTitle {
   animation: staggerOut 200ms ease-out both;
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeAnimateIn {
+  animation: fadeIn var(--fade-duration, 300ms) ease-out both;
+}
+
+.fadeAnimateOut {
+  animation: fadeOut var(--fade-duration, 300ms) ease-out both;
+}
+
+.fadeHidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
 .contentInner {
   gap: 12px;
   flex: 1;

package/src/components/TrackControlsToggle/TrackControlsToggle.jsx

@@ -0,0 +1,55 @@
+import styles from './TrackControlsToggle.module.css'
+import classNames from 'classnames'
+import { Text, Tooltip, Flex } from '../../index'
+
+export const TrackControlsToggle = ({ children, className, type, selected, onClick, tooltipContent, ...props }) => {
+  const toggleType = {
+    record: 'R',
+    mute: 'M',
+    autoMute: 'M',
+    solo: 'S',
+  }
+
+  const content = () => {
+    return (
+      <Flex className={classNames(styles.TrackControlsToggle, className, {
+        [styles.selected]: selected,
+        [styles.record]: type === 'record',
+        [styles.mute]: type === 'mute',
+        [styles.autoMute]: type === 'autoMute',
+        [styles.solo]: type === 'solo',
+      })}
+        onClick={onClick}
+        role="button"
+        tabIndex={0}
+        aria-pressed={selected}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault()
+            onClick?.()
+          }
+        }}
+        {...props}>
+        <Text size="1" weight="regular">{toggleType[type]}</Text>
+      </Flex>
+    )
+
+  }
+
+  return (
+    <>
+      {tooltipContent && (
+        <Tooltip content={tooltipContent?.text} color='gray' shortcut={tooltipContent?.shortcut}>
+          {content()}
+        </Tooltip>
+      )}
+      {!tooltipContent && (
+        <>
+          {content()}
+        </>
+      )}
+    </>
+  )
+}
+
+TrackControlsToggle.displayName = 'TrackControlsToggle'

package/src/components/TrackControlsToggle/TrackControlsToggle.module.css

@@ -0,0 +1,49 @@
+.TrackControlsToggle {
+  border-radius: 4px;
+  background: var(--neutral-alpha-2);
+  display: inline-flex;
+  padding: 2px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  color: var(--neutral-alpha-10);
+
+  width: 20px;
+  height: 20px;
+
+  &:focus-visible:not(.disabled){
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
+}
+
+.TrackControlsToggle:hover {
+  background: var(--neutral-alpha-3);
+  cursor: pointer;
+}
+
+.selected.record {
+  background: rgba(255, 100, 101, 0.92);
+  color: var(--neutral-1);
+}
+
+.selected.mute {
+  background: #FFC53D;
+  color: var(--neutral-1);
+}
+
+.selected.autoMute {
+  background: var(--neutral-alpha-2);
+  color: #FFC53D;
+}
+
+.selected.autoMute:hover {
+  background: var(--neutral-alpha-3);
+  cursor: pointer;
+}
+
+.selected.solo {
+  background: var(--aqua-10);
+  color: var(--neutral-1);
+}

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -0,0 +1,156 @@
+import { useState } from 'react'
+import { TrackControlsToggle } from './TrackControlsToggle'
+
+export default {
+  title: 'Components/TrackControlsToggle',
+  component: TrackControlsToggle,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). Use `selected` to represent active state and `tooltipContent` to show context and keyboard shortcut.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['record', 'mute', 'autoMute', 'solo'],
+      description: 'Defines the control type and the displayed label (R, M, or S).',
+      table: {
+        type: { summary: "'record' | 'mute' | 'autoMute' | 'solo'" },
+        defaultValue: { summary: "'solo'" },
+      },
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Controls the visual active/inactive state of the toggle.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Triggered when clicking (or pressing Enter/Space) on the toggle.',
+      table: {
+        type: { summary: '() => void' },
+      },
+    },
+    tooltipContent: {
+      control: 'object',
+      description: 'Tooltip data in the `{ text, shortcut }` format.',
+      table: {
+        type: { summary: '{ text?: string; shortcut?: string }' },
+      },
+    },
+    children: {
+      control: false,
+      table: {
+        disable: true,
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    type: 'solo',
+    selected: true,
+    tooltipContent: {
+      text: 'Tooltip Content',
+      shortcut: '⌘ C',
+    },
+  },
+}
+
+export const Inactive = {
+  args: {
+    type: 'solo',
+    selected: false,
+    tooltipContent: {
+      text: 'Solo',
+      shortcut: 'S',
+    },
+  },
+}
+
+export const RecordSelected = {
+  args: {
+    type: 'record',
+    selected: true,
+    tooltipContent: {
+      text: 'Record',
+      shortcut: 'R',
+    },
+  },
+}
+
+export const MuteSelected = {
+  args: {
+    type: 'mute',
+    selected: true,
+    tooltipContent: {
+      text: 'Mute',
+      shortcut: 'M',
+    },
+  },
+}
+
+export const AllStates = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Shows all states with and without tooltip. Click any toggle to switch between inactive and active.',
+      },
+    },
+  },
+  render: (args) => {
+    const InteractiveGroup = ({ withTooltip }) => {
+      const [states, setStates] = useState({
+        record: false,
+        mute: false,
+        autoMute: false,
+        solo: false,
+      })
+
+      const types = ['record', 'mute', 'autoMute', 'solo']
+
+      const toggleState = (type) => {
+        setStates((prev) => ({ ...prev, [type]: !prev[type] }))
+      }
+
+      return (
+        <div style={{ display: 'flex', gap: 8 }}>
+          {types.map((type) => (
+            <TrackControlsToggle
+              key={`${withTooltip ? 'with' : 'without'}-${type}`}
+              {...args}
+              type={type}
+              selected={states[type]}
+              tooltipContent={withTooltip ? { text: `${type}`, shortcut: type.slice(0, 1).toUpperCase() } : undefined}
+              onClick={() => {
+                args.onClick?.()
+                toggleState(type)
+              }}
+            />
+          ))}
+        </div>
+      )
+    }
+
+    return (
+      <div style={{ display: 'grid', gap: 14 }}>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <span style={{ color: '#9da3b4', fontSize: 12 }}>With tooltip</span>
+          <InteractiveGroup withTooltip />
+        </div>
+        <div style={{ display: 'grid', gap: 8 }}>
+          <span style={{ color: '#9da3b4', fontSize: 12 }}>Without tooltip</span>
+          <InteractiveGroup withTooltip={false} />
+        </div>
+      </div>
+    )
+  },
+}