@moises.ai/design-system 3.10.13 → 3.10.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.13",
+  "version": "3.10.15",
   "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/Button/Button.module.css

@@ -2,6 +2,11 @@
   box-shadow: none;
 }
 
+.button:focus-visible:not(.disabled):not(.loading) {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .size1 {
   border-radius: 4px;
 }

package/src/components/Checkbox/Checkbox.module.css

@@ -7,6 +7,11 @@
   position: relative;
 }
 
+.Checkbox:focus-visible:not([disabled]) {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .Checkbox[size="1"] {
   width: 14px;
   height: 14px;

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

@@ -124,6 +124,11 @@
   &:active {
     color: var(--neutral-11);
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
 }
 
 .sortButtonFirst {
@@ -318,9 +323,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/IconButton/IconButton.module.css

@@ -3,6 +3,11 @@
   box-sizing: border-box;
 }
 
+.iconButton:focus-visible:not(.disabled):not(.loading) {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 
 .ghost.mint {
   background-color: transparent;

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>
+      </>
+    )
+  },
+}