@moises.ai/design-system 3.9.16 → 3.9.18

package/package.json

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

package/src/components/AdditionalItems/AdditionalItems.jsx

@@ -1,5 +1,6 @@
 import { Flex, Text } from '@radix-ui/themes'
 import styles from './AdditionalItems.module.css'
+import { Tooltip } from '../Tooltip/Tooltip'
 import classNames from 'classnames'
 import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
 
@@ -22,7 +23,7 @@ export const AdditionalItems = ({
           item.onClick?.()
           if (isMobile) close()
         }
-        return (
+        const navItem = (
           <Flex
             key={item.id || index}
             align="center"
@@ -52,6 +53,13 @@ export const AdditionalItems = ({
             </div>
           </Flex>
         )
+        return collapsed ? (
+          <Tooltip key={item.id || index} content={item.label} side="right">
+            {navItem}
+          </Tooltip>
+        ) : (
+          navItem
+        )
       })}
     </Flex>
   )

package/src/components/ProductsList/ProductsList.jsx

@@ -1,4 +1,5 @@
 import { Flex, Text, Badge } from '@radix-ui/themes'
+import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './ProductsList.module.css'
 import classNames from 'classnames'
 import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
@@ -20,7 +21,7 @@ export const ProductsList = ({
     <Flex direction="column">
       {products.map((product) => {
         const isSelected = selectedProductId === product.id
-        return (
+        const navItem = (
           <Flex
             key={product.id}
             align="center"
@@ -64,6 +65,13 @@ export const ProductsList = ({
             </div>
           </Flex>
         )
+        return collapsed ? (
+          <Tooltip key={product.id} content={product.label} side="right">
+            {navItem}
+          </Tooltip>
+        ) : (
+          navItem
+        )
       })}
     </Flex>
   )

package/src/components/ProfileMenu/ProfileMenu.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import React from 'react'
-import { Button } from '../Button/Button'
+import { Tooltip } from '../Tooltip/Tooltip'
 import { useIsMobileViewport } from '../../utils/useIsMobileViewport'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { MenuTrigger } from './MenuTrigger'
@@ -12,6 +12,7 @@ export const ProfileMenu = ({
   user,
   menuOptions = [],
   collapsed,
+  tooltip = 'Profile',
   onSelectionChange,
   ...props
 }) => {
@@ -23,10 +24,21 @@ export const ProfileMenu = ({
     if (isMobile) close()
   }
 
+  const trigger = <MenuTrigger user={user} collapsed={collapsed} />
   return (
     <DropdownMenu
       className={classNames(styles.profileMenu, className)}
-      trigger={<MenuTrigger user={user} collapsed={collapsed} />}
+      trigger={
+        collapsed && tooltip ? (
+          <div>
+            <Tooltip content={tooltip} side="right">
+              {trigger}
+            </Tooltip>
+          </div>
+        ) : (
+          trigger
+        )
+      }
       options={menuOptions}
       side={isMobileViewport ? 'top' : 'right'}
       {...props}

package/src/components/SetlistList/SetlistList.jsx

@@ -13,8 +13,8 @@ import { useMobileDrawerContext } from '../../contexts/MobileDrawerContext'
 
 const SetlistIconFallback = () => <SetlistIcon width={16} height={16} />
 
-function SetlistExpandButton({ onExpand, className, style, collapsed = false }) {
-  return (
+function SetlistExpandButton({ onExpand, className, style, collapsed = false, tooltip }) {
+  const button = (
     <button
       type="button"
       className={classNames(
@@ -39,9 +39,16 @@ function SetlistExpandButton({ onExpand, className, style, collapsed = false })
       </Flex>
     </button>
   )
+  return collapsed && tooltip ? (
+    <Tooltip content={tooltip} side="right">
+      {button}
+    </Tooltip>
+  ) : (
+    button
+  )
 }
 
-function NewSetlistButton({ onClick, className, collapsed = false, text = 'New Setlist' }) {
+function NewSetlistButton({ onClick, className, collapsed = false, text = 'New Setlist', }) {
   return (
     <SetlistItem
       isSelected={false}
@@ -239,6 +246,7 @@ export const SetlistList = ({
   onSetlistClick,
   onNewSetlistClick,
   newSetlistButtonText = 'New Setlist',
+  newSetlistButtonTooltip = 'Expand setlists',
   collapsed = false,
   isMobile = false,
 }) => {
@@ -394,6 +402,7 @@ export const SetlistList = ({
               <SetlistExpandButton
                 onExpand={handleSetlistIconClick}
                 collapsed={collapsed}
+                tooltip={newSetlistButtonTooltip}
                 className={styles.collapsedStackItem}
                 style={{
                   position: 'relative',

package/src/components/Shell/Shell.jsx

@@ -20,6 +20,10 @@ export const Shell = ({
   selectedSetlistId,
   onSetlistClick,
   onNewSetlistClick,
+  newSetlistButtonTooltip,
+  expandButtonTooltip,
+  profileMenuTooltip,
+  sidebarTooltip,
   children,
 }) => {
   const [collapsed, setCollapsed] = useState(false)
@@ -29,7 +33,11 @@ export const Shell = ({
 
   return (
     <>
-      <Sidebar isCollapsed={collapsed} onCollapsedChange={setCollapsed}>
+        <Sidebar
+          isCollapsed={collapsed}
+          onCollapsedChange={setCollapsed}
+          tooltip={sidebarTooltip}
+        >
         <Flex direction="column">
           <SidebarSection title="PRODUCTS" collapsed={effectiveCollapsed} />
           <ProductsList
@@ -49,6 +57,8 @@ export const Shell = ({
             selectedSetlistId={selectedSetlistId}
             onSetlistClick={onSetlistClick}
             onNewSetlistClick={onNewSetlistClick}
+            newSetlistButtonTooltip={newSetlistButtonTooltip}
+            expandButtonTooltip={expandButtonTooltip}
             collapsed={effectiveCollapsed}
             isMobile={isMobile}
           />
@@ -67,6 +77,7 @@ export const Shell = ({
             user={userProfileItems}
             menuOptions={userProfileItems?.menuOptions}
             collapsed={effectiveCollapsed}
+            tooltip={profileMenuTooltip}
           />
         </Flex>
       </Sidebar>

package/src/components/Sidebar/Sidebar.jsx

@@ -1,5 +1,6 @@
 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 classNames from 'classnames'
@@ -19,6 +20,7 @@ export const Sidebar = ({
   isCollapsed,
   onCollapsedChange,
   onLogoClick,
+  tooltip = 'Expand menu',
   ...props
 }) => {
   const { isMobile, isOpen: mobileOpen, open, close } = useMobileDrawer()
@@ -50,6 +52,40 @@ export const Sidebar = ({
     }
   }
 
+  const logoContent = (
+    <>
+      <div
+        className={classNames(styles.logoToggleContainer, {
+          [styles.logoToggleContainerCollapsed]: effectiveCollapsed,
+        })}
+      >
+        <MoisesLogoIcon
+          width={32}
+          height={17}
+          className={classNames(styles.logoInContainer, {
+            [styles.logoInContainerHidden]: effectiveCollapsed && isHovered,
+          })}
+        />
+        <Tooltip content={tooltip} side="right" sideOffset={15}>
+          <SidebarLeftIcon
+            width={16}
+            height={16}
+            className={classNames(styles.toggleInContainer, {
+              [styles.toggleInContainerVisible]:
+                effectiveCollapsed && isHovered,
+            })}
+          />
+        </Tooltip>
+      </div>
+      <MoisesIcon
+        height={12.269}
+        className={classNames(styles.moisesIcon, {
+          [styles.moisesIconHidden]: effectiveCollapsed,
+        })}
+      />
+    </>
+  )
+
   return (
     <MobileDrawerProvider value={{ close, isMobile }}>
       <div
@@ -58,120 +94,93 @@ export const Sidebar = ({
         })}
         {...props}
       >
-      <div className={styles.mobileTopBarWrapper}>
-        <Flex
-          align="center"
-          justify="between"
-          className={classNames(styles.mobileTopBar, {
-            [styles.mobileTopBarOpen]: isMobile && mobileOpen,
-          })}
-        >
+        <div className={styles.mobileTopBarWrapper}>
           <Flex
             align="center"
-            gap="2"
-            height="38px"
-            onClick={onLogoClick}
-            style={{ cursor: onLogoClick ? 'pointer' : 'default' }}
+            justify="between"
+            className={classNames(styles.mobileTopBar, {
+              [styles.mobileTopBarOpen]: isMobile && mobileOpen,
+            })}
           >
-            <MoisesLogoIcon width={32} height={17} />
-            <MoisesIcon height={12.269} />
-          </Flex>
+            <Flex
+              align="center"
+              gap="2"
+              height="38px"
+              onClick={onLogoClick}
+              style={{ cursor: onLogoClick ? 'pointer' : 'default' }}
+            >
+              <MoisesLogoIcon width={32} height={17} />
+              <MoisesIcon height={12.269} />
+            </Flex>
 
-          <IconButton
-            variant="ghost"
-            size="2"
-            onClick={mobileOpen ? close : open}
-            className={styles.mobileTopBarAction}
-            aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
-          >
-            {mobileOpen ? (
-              <CloseIcon width={20} height={20} />
-            ) : (
-              <HamburgerMenu3Icon width={20} height={20} />
-            )}
-          </IconButton>
-        </Flex>
-      </div>
+            <IconButton
+              variant="ghost"
+              size="2"
+              onClick={mobileOpen ? close : open}
+              className={styles.mobileTopBarAction}
+              aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+            >
+              {mobileOpen ? (
+                <CloseIcon width={20} height={20} />
+              ) : (
+                <HamburgerMenu3Icon width={20} height={20} />
+              )}
+            </IconButton>
+          </Flex>
+        </div>
 
-      <div
-        className={classNames(styles.mobileDrawer, {
-          [styles.mobileDrawerOpen]: isMobile && mobileOpen,
-        })}
-      >
-        <Flex
-          direction="column"
-          className={classNames(styles.mobileDrawerContent, {
-            [styles.mobileDrawerContentOpen]: isMobile && mobileOpen,
+        <div
+          className={classNames(styles.mobileDrawer, {
+            [styles.mobileDrawerOpen]: isMobile && mobileOpen,
           })}
         >
-          {children}
-        </Flex>
-      </div>
+          <Flex
+            direction="column"
+            className={classNames(styles.mobileDrawerContent, {
+              [styles.mobileDrawerContentOpen]: isMobile && mobileOpen,
+            })}
+          >
+            {children}
+          </Flex>
+        </div>
 
-      <Flex
-        direction="column"
-        className={styles.desktopSidebar}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
         <Flex
-          align="center"
-          justify="between"
-          className={classNames(styles.header, {
-            [styles.headerCollapsed]: effectiveCollapsed,
-          })}
+          direction="column"
+          className={styles.desktopSidebar}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
         >
           <Flex
             align="center"
-            gap="2"
-            onClick={handleLogoClick}
-            style={{ cursor: 'pointer' }}
+            justify="between"
+            className={classNames(styles.header, {
+              [styles.headerCollapsed]: effectiveCollapsed,
+            })}
           >
-            <div
-              className={classNames(styles.logoToggleContainer, {
-                [styles.logoToggleContainerCollapsed]: effectiveCollapsed,
-              })}
+            <Flex
+              align="center"
+              gap="2"
+              onClick={handleLogoClick}
+              style={{ cursor: 'pointer' }}
             >
-              <MoisesLogoIcon
-                width={32}
-                height={17}
-                className={classNames(styles.logoInContainer, {
-                  [styles.logoInContainerHidden]:
-                    effectiveCollapsed && isHovered,
-                })}
-              />
-              <SidebarLeftIcon
-                width={16}
-                height={16}
-                className={classNames(styles.toggleInContainer, {
-                  [styles.toggleInContainerVisible]:
-                    effectiveCollapsed && isHovered,
-                })}
-              />
-            </div>
-            <MoisesIcon
-              height={12.269}
-              className={classNames(styles.moisesIcon, {
-                [styles.moisesIconHidden]: effectiveCollapsed,
+              {logoContent}
+            </Flex>
+            <Flex
+              align="center"
+              justify="center"
+              onClick={handleToggleCollapse}
+              className={classNames(styles.toggleButton, {
+                [styles.toggleButtonHidden]: effectiveCollapsed,
               })}
-            />
+            >
+              <SidebarLeftIcon width={16} height={16} />
+            </Flex>
           </Flex>
-          <Flex
-            align="center"
-            justify="center"
-            onClick={handleToggleCollapse}
-            className={classNames(styles.toggleButton, {
-              [styles.toggleButtonHidden]: effectiveCollapsed,
-            })}
-          >
-            <SidebarLeftIcon width={16} height={16} />
+          <Flex direction="column" className={styles.content}>
+            {children}
           </Flex>
         </Flex>
-        <Flex direction="column" className={styles.content}>
-          {children}
-        </Flex>
-      </Flex>
-    </div>
+      </div>
     </MobileDrawerProvider>
   )
 }

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

@@ -1,3 +1,8 @@
+.tooltipTriggerWrapper {
+  display: block;
+  width: 100%;
+}
+
 .root {
   background-color: var(--neutral-1);
   width: 240px;