@moises.ai/design-system 3.10.12 → 3.10.14

package/package.json

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

package/src/components/AdditionalItems/AdditionalItems.module.css

@@ -16,7 +16,7 @@
 
 .upgradeItem:focus-visible {
   outline: 2px solid var(--neutral-alpha-8);
-  outline-offset: -3px;
+  outline-offset: 2px;
 }
 
 .upgradeItem:hover {

package/src/components/DataTable/DataTable.module.css

@@ -318,9 +318,8 @@
 }
 
 .rowActionButton:focus-visible {
-  outline: 2px solid var(--accent-8);
-  outline-offset: -2px;
-  border-radius: 6px;
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
 }
 
 .DataTable :global(.rt-TableRow:hover) .projectCell:not(.dropdownColumn) :not(.artistText) {

package/src/components/InstrumentSelector/InstrumentSelector.module.css

@@ -33,7 +33,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--neutral-alpha-6);
+    outline: 2px solid var(--neutral-alpha-8);
     outline-offset: 2px;
   }
 

package/src/components/ProductsList/ProductsList.module.css

@@ -65,7 +65,7 @@
 
 .navItem:focus-visible {
     outline: 2px solid var(--neutral-alpha-8);
-    outline-offset: -3px;
+    outline-offset: 2px;
 }
 
 .navItemSelected {

package/src/components/ProfileMenu/ProfileMenu.module.css

@@ -13,7 +13,7 @@
 
 .userProfile:focus-visible {
   outline: 2px solid var(--neutral-alpha-8);
-  outline-offset: -3px;
+  outline-offset: 2px;
 }
 
 .userProfileInner {

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

@@ -16,7 +16,7 @@
 
   &:focus-visible {
     outline: 2px solid var(--neutral-alpha-8);
-    outline-offset: -1px;
+    outline-offset: 2px;
   }
 
   &:hover,
@@ -289,7 +289,7 @@ sectionTitle {
 
 .setlistExpandButton:focus-visible {
   outline: 2px solid var(--neutral-alpha-8);
-  outline-offset: -1px;
+  outline-offset: 2px;
 }
 
 .collapsedMask {

package/src/components/Shell/Shell.jsx

@@ -27,14 +27,19 @@ export const Shell = ({
   children,
 }) => {
   const [collapsed, setCollapsed] = useState(false)
+  const [isTemporarilyExpandedByDrag, setIsTemporarilyExpandedByDrag] =
+    useState(false)
   const { isMobile } = useMobileDrawer()
 
-  const effectiveCollapsed = isMobile ? false : collapsed
+  const effectiveCollapsed =
+    isMobile ? false : collapsed && !isTemporarilyExpandedByDrag
 
   return (
     <>
         <Sidebar
           isCollapsed={collapsed}
+          isTemporarilyExpandedByDrag={isTemporarilyExpandedByDrag}
+          onTemporarilyExpandedByDragChange={setIsTemporarilyExpandedByDrag}
           onCollapsedChange={setCollapsed}
           tooltip={sidebarTooltip}
         >

package/src/components/Sidebar/Sidebar.jsx

@@ -2,7 +2,7 @@ import { Flex } from '@radix-ui/themes'
 import { IconButton } from '../IconButton/IconButton'
 import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './Sidebar.module.css'
-import { useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import classNames from 'classnames'
 import {
   MoisesIcon,
@@ -18,6 +18,8 @@ export const Sidebar = ({
   className,
   children,
   isCollapsed,
+  isTemporarilyExpandedByDrag,
+  onTemporarilyExpandedByDragChange,
   onCollapsedChange,
   onLogoClick,
   tooltip = 'Expand menu',
@@ -25,12 +27,29 @@ export const Sidebar = ({
 }) => {
   const { isMobile, isOpen: mobileOpen, open, close } = useMobileDrawer()
   const [isHovered, setIsHovered] = useState(false)
+  const [internalTemporarilyExpandedByDrag, setInternalTemporarilyExpandedByDrag] =
+    useState(false)
 
-  const effectiveCollapsed = isMobile ? false : isCollapsed
+  const dragExpanded =
+    isTemporarilyExpandedByDrag ?? internalTemporarilyExpandedByDrag
+
+  const setDragExpanded = useCallback(
+    (value) => {
+      if (isTemporarilyExpandedByDrag == null) {
+        setInternalTemporarilyExpandedByDrag(value)
+      }
+      onTemporarilyExpandedByDragChange?.(value)
+    },
+    [isTemporarilyExpandedByDrag, onTemporarilyExpandedByDragChange],
+  )
+
+  const effectiveCollapsed =
+    isMobile ? false : isCollapsed && !dragExpanded
 
   const handleToggleCollapse = () => {
     if (isMobile) return
     setIsHovered(false)
+    setDragExpanded(false)
     onCollapsedChange((prev) => !prev)
   }
 
@@ -52,9 +71,57 @@ export const Sidebar = ({
     }
   }
 
+  const expandForDragHover = () => {
+    if (isMobile || !isCollapsed) return
+    setDragExpanded(true)
+  }
+
+  const collapseAfterDrag = () => {
+    setDragExpanded(false)
+  }
+
+  const handleSidebarPointerEnter = (e) => {
+    handleMouseEnter()
+    if (e.buttons > 0) {
+      expandForDragHover()
+    }
+  }
+
+  const handleSidebarDragEnter = () => {
+    expandForDragHover()
+  }
+
+  const handleSidebarDragOver = (e) => {
+    if (isMobile || !isCollapsed) return
+    e.preventDefault()
+    expandForDragHover()
+  }
+
   const desktopLogoAriaLabel = effectiveCollapsed ? 'Expand menu' : 'Moises'
   const mobileLogoAriaLabel = 'Moises'
 
+  useEffect(() => {
+    if (!dragExpanded) return undefined
+
+    const handlePointerUp = () => {
+      collapseAfterDrag()
+    }
+
+    const handleDragEnd = () => {
+      collapseAfterDrag()
+    }
+
+    window.addEventListener('pointerup', handlePointerUp)
+    window.addEventListener('dragend', handleDragEnd)
+    window.addEventListener('drop', handleDragEnd)
+
+    return () => {
+      window.removeEventListener('pointerup', handlePointerUp)
+      window.removeEventListener('dragend', handleDragEnd)
+      window.removeEventListener('drop', handleDragEnd)
+    }
+  }, [dragExpanded])
+
   const logoContent = (
     <>
       <div
@@ -156,8 +223,11 @@ export const Sidebar = ({
         <Flex
           direction="column"
           className={styles.desktopSidebar}
-          onMouseEnter={handleMouseEnter}
+          onMouseEnter={handleSidebarPointerEnter}
           onMouseLeave={handleMouseLeave}
+          onDragEnter={handleSidebarDragEnter}
+          onDragOver={handleSidebarDragOver}
+          onDrop={collapseAfterDrag}
         >
           {effectiveCollapsed ? (
             <div className={styles.headerWrapper}>

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

@@ -292,9 +292,8 @@
 
 .logoButton:focus-visible,
 .toggleButton:focus-visible {
-  outline: 2px solid var(--accent-8);
-  outline-offset: 4px;
-  border-radius: 6px;
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
 }
 
 .headerCollapsed {

package/src/components/Sidebar/Sidebar.stories.jsx

@@ -1,5 +1,9 @@
 import { useState } from 'react'
 import { Sidebar } from './Sidebar'
+import { SidebarSection } from './SidebarSection/SidebarSection'
+import { ProductsList } from '../ProductsList/ProductsList'
+import { SetlistList } from '../SetlistList/SetlistList'
+import { Flex, Text } from '../../index'
 import {
   MoisesLogoIcon,
   SparkBarsIcon,
@@ -246,3 +250,145 @@ export const Default = {
     )
   },
 }
+
+export const DragHoverExpand = {
+  render: () => {
+    const [isCollapsed, setIsCollapsed] = useState(true)
+    const [isTemporarilyExpandedByDrag, setIsTemporarilyExpandedByDrag] =
+      useState(false)
+    const [selectedProduct, setSelectedProduct] = useState('library')
+    const [selectedSetlist, setSelectedSetlist] = useState('setlist-1')
+    const [isDraggingFile, setIsDraggingFile] = useState(false)
+    const effectiveCollapsed = isCollapsed && !isTemporarilyExpandedByDrag
+
+    const products = [
+      {
+        id: 'library',
+        label: 'Library',
+        icon: <LibraryIcon width={16} height={16} />,
+      },
+      {
+        id: 'ai-studio',
+        label: 'AI Studio',
+        icon: <SparkBarsIcon width={16} height={16} />,
+      },
+      {
+        id: 'mastering',
+        label: 'Mastering',
+        icon: <MasteringIcon width={16} height={16} />,
+      },
+    ]
+
+    const setlists = [
+      {
+        id: 'setlist-1',
+        label: 'Piano Exercises',
+        subtitle: 'By Berklee',
+      },
+      {
+        id: 'setlist-2',
+        label: 'Band Rehearsal',
+        subtitle: 'By Nickyz',
+      },
+      {
+        id: 'setlist-3',
+        label: 'Gig Dec 21th',
+      },
+    ]
+
+    return (
+      <>
+        <style>{`
+          .SidebarDragHoverStoryLayout {
+            display: flex;
+            min-height: 100vh;
+            min-height: 100dvh;
+            background: var(--neutral-2);
+          }
+
+          .SidebarDragHoverStoryMain {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+            background: linear-gradient(180deg, var(--neutral-2) 0%, var(--neutral-1) 100%);
+          }
+
+          .SidebarDragHoverFile {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            width: 280px;
+            padding: 16px;
+            border-radius: 12px;
+            border: 1px solid var(--neutral-alpha-4);
+            background: var(--neutral-1);
+            box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.45);
+            cursor: grab;
+            user-select: none;
+          }
+
+          .SidebarDragHoverFile[data-dragging='true'] {
+            opacity: 0.6;
+            cursor: grabbing;
+          }
+        `}</style>
+
+        <div className="SidebarDragHoverStoryLayout">
+          <Sidebar
+            isCollapsed={isCollapsed}
+            isTemporarilyExpandedByDrag={isTemporarilyExpandedByDrag}
+            onTemporarilyExpandedByDragChange={setIsTemporarilyExpandedByDrag}
+            onCollapsedChange={setIsCollapsed}
+          >
+            <Flex direction="column">
+              <SidebarSection title="PRODUCTS" collapsed={effectiveCollapsed} />
+              <ProductsList
+                products={products}
+                selectedProductId={selectedProduct}
+                onProductClick={setSelectedProduct}
+                collapsed={effectiveCollapsed}
+              />
+            </Flex>
+
+            <Flex
+              direction="column"
+              style={{ overflow: 'hidden', flex: 1, minHeight: 0 }}
+            >
+              <SidebarSection title="SETLISTS" collapsed={effectiveCollapsed} />
+              <SetlistList
+                setlists={setlists}
+                selectedSetlistId={selectedSetlist}
+                onSetlistClick={setSelectedSetlist}
+                onNewSetlistClick={() => console.log('New setlist clicked')}
+                collapsed={effectiveCollapsed}
+              />
+            </Flex>
+          </Sidebar>
+
+          <div className="SidebarDragHoverStoryMain">
+            <div
+              draggable
+              data-dragging={isDraggingFile}
+              className="SidebarDragHoverFile"
+              onDragStart={() => setIsDraggingFile(true)}
+              onDragEnd={() => {
+                setIsDraggingFile(false)
+                setIsTemporarilyExpandedByDrag(false)
+              }}
+            >
+              <Text size="2" weight="bold">
+                Drag this file to the sidebar
+              </Text>
+              <Text size="1" style={{ color: 'var(--neutral-alpha-11)' }}>
+                With the sidebar collapsed, drag this card over it. The sidebar should
+                expand on hover and collapse again when you release.
+              </Text>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  },
+}

package/src/components/ToastProvider/ToastProvider.jsx

@@ -1,4 +1,12 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Toast } from 'radix-ui'
 import { Callout } from '../Callout/Callout'
 import styles from './ToastProvider.module.css'
@@ -30,9 +38,31 @@ export const ToastProvider = ({
     return 'neutral'
   }, [])
 
+  const getCalloutStyle = useCallback((variant) => {
+    if (variant === 'success') {
+      return {
+        backgroundColor: '#113B29',
+        color: '#BBFFD7',
+      }
+    }
+    if (variant === 'error') {
+      return {
+        backgroundColor: '#201314',
+        color: '#FF9592',
+      }
+    }
+    return undefined
+  }, [])
+
   const [toasts, setToasts] = useState([])
+  const timeoutIdsRef = useRef(new Map())
 
   const dismiss = useCallback((id) => {
+    const timeoutId = timeoutIdsRef.current.get(id)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutIdsRef.current.delete(id)
+    }
     setToasts((prev) => prev.filter((toastItem) => toastItem.id !== id))
   }, [])
 
@@ -43,10 +73,32 @@ export const ToastProvider = ({
         ...normalized,
         id: `${Date.now()}-${toastId++}`,
       }
-      setToasts((prev) => [...prev.slice(-(maxToasts - 1)), nextToast])
+
+      const toastDuration = nextToast.duration ?? duration
+      const timeoutId = setTimeout(() => {
+        dismiss(nextToast.id)
+      }, toastDuration)
+
+      timeoutIdsRef.current.set(nextToast.id, timeoutId)
+      setToasts((prev) => {
+        const nextToasts = [...prev.slice(-(maxToasts - 1)), nextToast]
+        const nextToastIds = new Set(nextToasts.map((toastItem) => toastItem.id))
+
+        prev.forEach((toastItem) => {
+          if (!nextToastIds.has(toastItem.id)) {
+            const staleTimeoutId = timeoutIdsRef.current.get(toastItem.id)
+            if (staleTimeoutId) {
+              clearTimeout(staleTimeoutId)
+              timeoutIdsRef.current.delete(toastItem.id)
+            }
+          }
+        })
+
+        return nextToasts
+      })
       return nextToast.id
     },
-    [maxToasts],
+    [dismiss, duration, maxToasts],
   )
 
   const success = useCallback(
@@ -73,6 +125,13 @@ export const ToastProvider = ({
     [show, success, error, dismiss],
   )
 
+  useEffect(() => {
+    return () => {
+      timeoutIdsRef.current.forEach((timeoutId) => clearTimeout(timeoutId))
+      timeoutIdsRef.current.clear()
+    }
+  }, [])
+
   return (
     <ToastContext.Provider value={value}>
       <Toast.Provider
@@ -98,6 +157,7 @@ export const ToastProvider = ({
                   title={toastItem.title}
                   text={toastItem.description}
                   className={styles.toastCallout}
+                  style={getCalloutStyle(toastItem.variant)}
                 />
               </div>
             </Toast.Description>