@moises.ai/design-system 3.6.1 → 3.6.2

package/package.json

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

package/src/components/ProfileMenu/MenuTrigger.jsx

@@ -22,7 +22,7 @@ export function MenuTrigger({ className, user, collapsed, ...props }) {
       onMouseLeave={handleMouseLeave}
       className={classNames(styles.userProfile, { [styles.collapsed]: collapsed }, className)}
       align="center"
-      justify="between"
+      justify={collapsed ? 'center' : 'between'}
       {...props}
     >
       <div className={styles.userProfileInner}>

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -1,34 +1,11 @@
 import classNames from 'classnames'
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Button } from '../Button/Button'
 import { useIsMobileViewport } from '../../utils/useIsMobileViewport'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { MenuTrigger } from './MenuTrigger'
 import styles from './ProfileMenu.module.css'
 
-const renderUserMenuOption = (opt) => (
-  <div key={opt.key} className={styles.creditsHeader}>
-    <div className={styles.creditsInfo}>
-      <span className={styles.creditsLabel}>Credits: </span>
-      <span className={styles.creditsValue}>{opt.current}</span>/{opt.total}
-    </div>
-    {opt.onUpgrade && (
-      <Button
-        variant="solid"
-        color="cyan"
-        size="2"
-        onClick={(e) => {
-          e.stopPropagation()
-          opt.onUpgrade()
-        }}
-        className={styles.upgradeButton}
-      >
-        Upgrade
-      </Button>
-    )}
-  </div>
-)
-
 export const ProfileMenu = ({
   className,
   user,
@@ -38,27 +15,12 @@ export const ProfileMenu = ({
 }) => {
   const isMobile = useIsMobileViewport()
 
-  const processedItems = useMemo(() => {
-    const creditsItem = menuOptions.find((item) => item.type === 'credits')
-    const otherItems = menuOptions.filter((item) => item.type !== 'credits')
-
-    return creditsItem
-      ? [
-        {
-          type: 'custom',
-          key: 'credits-header',
-          customRender: () => renderUserMenuOption(creditsItem),
-        },
-        ...otherItems,
-      ]
-      : otherItems
-  }, [menuOptions])
 
   return (
     <DropdownMenu
       className={classNames(styles.profileMenu, className)}
       trigger={<MenuTrigger user={user} collapsed={collapsed} />}
-      options={processedItems}
+      options={menuOptions}
       side={isMobile ? 'left' : 'right'}
       {...props}
     />

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

@@ -1,6 +1,14 @@
 .userProfile {
   cursor: pointer;
   width: 100%;
+  min-width: 0;
+  transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.collapsed .userProfile {
+  width: auto;
+  min-width: 0;
+  flex-shrink: 0;
 }
 
 .userProfile:focus-visible {
@@ -13,11 +21,13 @@
   align-items: center;
   flex: 1;
   gap: 13px;
+  min-width: 0;
   transition: gap 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .collapsed .userProfileInner {
   gap: 0;
+  flex: 0;
 }
 
 .userAvatar {
@@ -42,6 +52,9 @@
   opacity: 0;
   transform: translateX(-8px);
   flex: 0;
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
   transition-delay: 50ms;
 }
 
@@ -78,6 +91,10 @@
   opacity: 0;
   transform: translateX(-8px);
   pointer-events: none;
+  width: 0;
+  min-width: 0;
+  flex: 0;
+  overflow: hidden;
   transition-delay: 50ms;
 }
 
@@ -86,6 +103,34 @@
   width: 100%;
 }
 
+.creditsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+}
+
+.creditsInfo {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.creditsLabel {
+  color: var(--neutral-alpha-11);
+  font-size: 14px;
+}
+
+.creditsValue {
+  color: var(--neutral-alpha-12);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.upgradeButton {
+  flex-shrink: 0;
+}
 
 .dropdownTriggerWrapper {
   display: flex;

package/src/components/SetlistList/SetlistList.jsx

@@ -154,6 +154,7 @@ export const SetlistList = ({
   const [isFullyCollapsed, setIsFullyCollapsed] = useState(false)
   const hoverTimeoutRef = useRef(null)
   const collapseCenterTimeoutRef = useRef(null)
+  const hoverRegionRef = useRef(null)
   const collapsedItemHeight = 44
   const collapsedVisibleOffset = 8
   const maxCollapsedItems = 4
@@ -182,6 +183,21 @@ export const SetlistList = ({
     }, 180)
   }
 
+  const handleFocus = () => {
+    if (collapsed) setIsHoveredWhenCollapsed(true)
+  }
+
+  const handleBlur = () => {
+    if (!collapsed) return
+    const el = hoverRegionRef.current
+    if (!el) return
+    setTimeout(() => {
+      if (!el.contains(document.activeElement)) {
+        setIsHoveredWhenCollapsed(false)
+      }
+    }, 0)
+  }
+
   useEffect(() => {
     if (showCollapsedStack) {
       collapseCenterTimeoutRef.current = setTimeout(() => {
@@ -274,9 +290,12 @@ export const SetlistList = ({
       })}
     >
       <div
+        ref={hoverRegionRef}
         className={styles.hoverRegion}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onFocusCapture={handleFocus}
+        onBlurCapture={handleBlur}
       >
         <Flex
           direction="column"

package/src/components/Shell/Shell.jsx

@@ -64,7 +64,8 @@ export const Shell = ({
             selectedAdditionalItemId={selectedAdditionalItemId}
           />
           <ProfileMenu
-            userProfileItems={userProfileItems}
+            user={userProfileItems}
+            menuOptions={userProfileItems?.menuOptions}
             collapsed={effectiveCollapsed}
           />
         </Flex>