@moises.ai/design-system 3.6.1 → 3.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.1",
+  "version": "3.6.3",
   "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

@@ -9,7 +9,8 @@ import {
   PlusIcon,
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
-import { useState, useEffect, useRef, useMemo } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
+import { useState, useEffect, useRef, useMemo, Fragment } from 'react'
 import { MoreButton } from '../MoreButton/MoreButton'
 
 export const SetlistItem = ({
@@ -154,6 +155,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,12 +184,29 @@ 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)
+  }
+
+  // Só centraliza os avatares depois que a sidebar terminou de colapsar (width 280ms + delay 100ms)
+  const collapseAnimationDuration = 400
   useEffect(() => {
     if (showCollapsedStack) {
       collapseCenterTimeoutRef.current = setTimeout(() => {
         setIsFullyCollapsed(true)
         collapseCenterTimeoutRef.current = null
-      }, 200)
+      }, collapseAnimationDuration)
     } else {
       setIsFullyCollapsed(false)
       if (collapseCenterTimeoutRef.current) {
@@ -274,9 +293,12 @@ export const SetlistList = ({
       })}
     >
       <div
+        ref={hoverRegionRef}
         className={styles.hoverRegion}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        onFocusCapture={handleFocus}
+        onBlurCapture={handleBlur}
       >
         <Flex
           direction="column"
@@ -317,9 +339,8 @@ export const SetlistList = ({
             ))}
           {visibleSetlists.map((setlist, index) => {
             const isSelected = selectedSetlistId === setlist.id
-            return (
+            const setlistItem = (
               <SetlistItem
-                key={setlist.id}
                 isSelected={isSelected}
                 onClick={() => onSetlistClick?.(setlist.id)}
                 dropdownMenuOpen={openSetlistMenuId === setlist.id}
@@ -349,6 +370,15 @@ export const SetlistList = ({
                 style={getCollapsedStackStyle(index, setlist)}
               />
             )
+            return collapsed && !showCollapsedStack ? (
+              <Tooltip key={setlist.id} content={setlist.label} side="right">
+                <div className={styles.tooltipTriggerWrapper}>
+                  {setlistItem}
+                </div>
+              </Tooltip>
+            ) : (
+              <Fragment key={setlist.id}>{setlistItem}</Fragment>
+            )
           })}
         </Flex>
       </div>

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

@@ -1,3 +1,8 @@
+.tooltipTriggerWrapper {
+  display: block;
+  width: 100%;
+}
+
 .newSetlistItem {
     cursor: pointer;
     margin: 0 12px;

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>

package/src/components/Tooltip/Tooltip.jsx

@@ -0,0 +1,67 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import styles from './Tooltip.module.css'
+import classNames from 'classnames'
+
+export const Tooltip = ({
+  children,
+  content,
+  shortcut,
+  color = 'gray',
+  delayDuration = 200,
+  skipDelayDuration,
+  disableHoverableContent,
+  ...props
+}) => {
+
+  const {
+    defaultOpen,
+    open,
+    onOpenChange,
+    ...restContentProps
+  } = props
+
+  const providerProps = {
+    delayDuration,
+    skipDelayDuration,
+    disableHoverableContent,
+  }
+
+  const rootProps = {
+    defaultOpen,
+    open,
+    onOpenChange,
+  }
+
+  return (
+    <TooltipPrimitive.Provider {...providerProps}>
+      <TooltipPrimitive.Root {...rootProps}>
+        <TooltipPrimitive.Trigger asChild>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            className={classNames(
+              styles.TooltipContent,
+              styles[`TooltipContent--${color}`]
+            )}
+            sideOffset={5}
+            {...restContentProps}
+          >
+            <span className={styles.TooltipText}>{content}</span>
+            {shortcut && (
+              <span className={classNames(
+                styles.TooltipShortcut,
+                styles[`TooltipShortcut--${color}`]
+              )}>
+                {shortcut}
+              </span>
+            )}
+            <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  )
+}
+
+Tooltip.displayName = 'Tooltip'

package/src/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,129 @@
+.TooltipContent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  text-align: center;
+  font-family: var(--Typography-Font-family-text, "Articulat CF");
+  font-size: var(--Typography-Font-size-1, 12px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--Typography-Line-height-1, 16px);
+  letter-spacing: var(--Typography-Letter-spacing-1, 0.04px);
+  z-index: 9999;
+  animation-duration: 0.15s;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.TooltipContent[data-state='delayed-open'][data-side='left'] {
+  animation-name: slideRightAndFade;
+}
+
+@keyframes slideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideRightAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideLeftAndFade {
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* White variant */
+.TooltipContent--white {
+  border-radius: var(--Radius-1, 3px);
+  background: var(--Colors-Neutral-Neutral-12, #EDEEF0);
+  color: var(--Colors-Neutral-Neutral-1, #111113);
+}
+
+/* Gray variant */
+.TooltipContent--gray {
+  border-radius: var(--Radius-1, 3px);
+  background: var(--Colors-Neutral-Neutral-4, #272A2D);
+  color: var(--Colors-Neutral-Neutral-Alpha-12, rgba(252, 253, 255, 0.94));
+}
+
+.TooltipText {
+  white-space: nowrap;
+}
+
+.TooltipShortcut {
+  font-family: var(--Typography-Font-family-text, "Articulat CF");
+  font-size: var(--Typography-Font-size-0, 11px);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--Typography-Line-height-0, 11px);
+  letter-spacing: var(--Typography-Letter-spacing-0, 0);
+  white-space: nowrap;
+}
+
+/* White shortcut */
+.TooltipShortcut--white {
+  color: var(--Colors-Neutral-Neutral-8, #5A6169);
+}
+
+/* Gray shortcut */
+.TooltipShortcut--gray {
+  color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
+}
+
+.TooltipArrow {
+  fill: var(--Colors-Neutral-Neutral-4, #272A2D);
+}
+
+.TooltipContent--white .TooltipArrow {
+  fill: var(--Colors-Neutral-Neutral-12, #EDEEF0);
+}
+
+.TooltipContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+}

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -0,0 +1,59 @@
+import { Tooltip } from './Tooltip'
+import { Button } from '../Button/Button'
+
+export default {
+  title: 'Components/Tooltip',
+  component: Tooltip,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['white', 'gray'],
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    content: 'Tooltip',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const GrayVariant = {
+  args: {
+    content: 'Tooltip',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WhiteVariant = {
+  args: {
+    content: 'Tooltip',
+    color: 'white',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WithShortcutGray = {
+  args: {
+    content: 'Tooltip',
+    shortcut: '⌘ C',
+    color: 'gray',
+    children: <Button>Hover me</Button>,
+  },
+}
+
+export const WithShortcutWhite = {
+  args: {
+    content: 'Tooltip',
+    shortcut: '⌘ C',
+    color: 'white',
+    children: <Button>Hover me</Button>,
+  },
+}

package/src/index.jsx

@@ -32,7 +32,6 @@ import {
   Switch,
   Table,
   Tabs,
-  Tooltip,
   VisuallyHidden,
   DataList,
 } from '@radix-ui/themes'
@@ -70,7 +69,6 @@ export {
   Switch,
   Table,
   Tabs,
-  Tooltip,
   VisuallyHidden,
   DataList,
 }
@@ -154,4 +152,5 @@ export { InstrumentSelector } from './components/InstrumentSelector/InstrumentSe
 export { Card as CardWidget } from './components/Card/Card'
 export { ProjectsList } from './components/ProjectsList/ProjectsList'
 
-export { MoreButton } from './components/MoreButton/MoreButton'
+export { MoreButton } from './components/MoreButton/MoreButton'
+export { Tooltip } from './components/Tooltip/Tooltip'