@moises.ai/design-system 3.5.5 → 3.5.7

package/package.json

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

package/src/components/AdditionalItems/AdditionalItems.jsx

@@ -19,11 +19,19 @@ export const AdditionalItems = ({
           <Flex
             key={item.id || index}
             align="center"
+            role="button"
+            tabIndex={0}
             className={classNames(styles.upgradeItem, {
               [styles.upgradeItemCollapsed]: collapsed,
               [styles.upgradeItemSelected]: isSelected,
             })}
             onClick={item.onClick}
+            onKeyDown={(e) => {
+              if ((e.key === 'Enter' || e.key === ' ') && item.onClick) {
+                e.preventDefault()
+                item.onClick()
+              }
+            }}
           >
             {item.icon && <div className={styles.upgradeIcon}>{item.icon}</div>}
             <div

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

@@ -14,6 +14,11 @@
   transition-delay: 100ms;
 }
 
+.upgradeItem:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: -3px;
+}
+
 .upgradeItem:hover {
   background-color: var(--neutral-alpha-2);
 }

package/src/components/DropdownButton/DropdownButton.module.css

@@ -95,6 +95,70 @@
   justify-content: center;
   align-items: center;
   gap: 8px;
+
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.content[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.content[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.content[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.content[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);
+  }
 }
 
 .chevron {

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -290,6 +290,7 @@ export const ShowActiveTrigger = {
         key: 'item3',
         label: 'Delete',
         onClick: () => console.log('Delete clicked'),
+        color: 'red',
       },
     ],
   },

package/src/components/MoreButton/MoreButton.module.css

@@ -37,7 +37,7 @@
 }
 
 .icon {
-  width: 4px;
-  height: 14px;
+  width: 3px;
+  height: 11px;
   flex-shrink: 0;
 }

package/src/components/ProductsList/ProductsList.jsx

@@ -18,11 +18,19 @@ export const ProductsList = ({
             align="center"
             px="3"
             py="2"
+            role="button"
+            tabIndex={0}
             className={classNames(styles.navItem, {
               [styles.navItemSelected]: isSelected,
               [styles.collapsed]: collapsed,
             })}
             onClick={() => onProductClick?.(product.id, product)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onProductClick?.(product.id, product)
+              }
+            }}
           >
             {product.icon && (
               <div className={styles.navItemIcon}>{product.icon}</div>

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

@@ -63,6 +63,11 @@
     color: var(--neutral-alpha-12);
 }
 
+.navItem:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: -3px;
+}
+
 .navItemSelected {
     background-color: var(--neutral-alpha-3);
 }

package/src/components/ProfileMenu/MenuTrigger.jsx

@@ -16,6 +16,8 @@ export function MenuTrigger({ className, user, collapsed, ...props }) {
   }
   return (
     <Flex
+      role="button"
+      tabIndex={0}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       className={classNames(styles.userProfile, { [styles.collapsed]: collapsed }, className)}

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

@@ -3,6 +3,11 @@
   width: 100%;
 }
 
+.userProfile:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: -3px;
+}
+
 .userProfileInner {
   display: flex;
   align-items: center;

package/src/components/Select/Select.jsx

@@ -69,7 +69,11 @@ export const Select = ({
               </Text>
             ) : undefined}
           </SelectRadix.Trigger>
-          <SelectRadix.Content position="popper" style={{ height: maxHeight }}>
+          <SelectRadix.Content
+            position="popper"
+            className={styles.selectContent}
+            style={{ height: maxHeight }}
+          >
             <SelectRadix.Group>
               {items.map((item) =>
                 item.type === 'separator' ? (

package/src/components/Select/Select.module.css

@@ -1,3 +1,70 @@
+/* Select content popover animation */
+.selectContent {
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.selectContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.selectContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.selectContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.selectContent[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);
+  }
+}
+
 .selectTrigger.soft:focus-visible,
 .selectTrigger.ghost:focus-visible {
   outline: none;

package/src/components/SetlistList/SetlistList.jsx

@@ -10,12 +10,14 @@ import {
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { MoreButton } from '../MoreButton/MoreButton'
 
 export const SetlistItem = ({
   isSelected,
   onClick,
   className,
   style,
+  avatarStyle,
   avatar,
   text,
   subtitle,
@@ -49,6 +51,8 @@ export const SetlistItem = ({
     <Flex
       gap="3"
       align="center"
+      role="button"
+      tabIndex={0}
       onClick={onClick}
       className={classNames(styles.newSetlistItem, className, {
         [styles.navItemSelected]: isSelected,
@@ -57,6 +61,12 @@ export const SetlistItem = ({
       })}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onClick?.()
+        }
+      }}
       style={style}
     >
       <Flex
@@ -67,13 +77,14 @@ export const SetlistItem = ({
         })}
       >
         {avatar && (
-          <div className={styles.avatarSetlist}>
+          <div className={styles.avatarSetlist} style={avatarStyle}>
             {typeof avatar === 'string' ? (
               <Avatar
                 src={avatar}
                 fallback={<SetlistIcon width={16} height={16} />}
-                size="3"
+                // size="3"
                 radius="small"
+                style={avatarStyle}
               />
             ) : (
               avatar
@@ -120,11 +131,7 @@ export const SetlistItem = ({
                 onPointerDown={handleDropdownTriggerPointerDown}
                 onClick={handleDropdownTriggerClick}
               >
-                <DotsVerticalIcon
-                  className={styles.dropdownMenuTrigger}
-                  width={16}
-                  height={16}
-                />
+                <MoreButton hovered={dropdownMenuOpen} />
               </Flex>
             }
             options={dropdownMenuOptions}
@@ -146,7 +153,7 @@ export const SetlistList = ({
   const [isHoveredWhenCollapsed, setIsHoveredWhenCollapsed] = useState(false)
   const hoverTimeoutRef = useRef(null)
   const collapsedItemHeight = 44
-  const collapsedVisibleOffset = 4
+  const collapsedVisibleOffset = 8
   const maxCollapsedItems = 4
   const collapsedNewItemOffset = collapsed && onNewSetlistClick ? 1 : 0
   const showCollapsedStack = collapsed && !isHoveredWhenCollapsed
@@ -203,7 +210,9 @@ export const SetlistList = ({
     </div>
   )
 
-  const getCollapsedStackStyle = (index) => {
+  const collapsedStackAvatarSizes = ['38px', '37px', '36px', '35px']
+
+  const getCollapsedStackStyle = (index, setlist) => {
     if (!collapsed) return undefined
     if (!showCollapsedStack) {
       return {
@@ -214,6 +223,14 @@ export const SetlistList = ({
     }
     const stackPosition = index + collapsedNewItemOffset
     const zIndex = setlists.length + collapsedNewItemOffset - stackPosition
+
+    const boxShadows = [
+      '0 3.84px 15.36px -7.68px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.88px 11.52px -3.84px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.92px 2.88px -1.92px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.686px 14.746px -7.373px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.765px 11.059px -3.686px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.843px 2.765px -1.843px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.539px 14.156px -7.078px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.654px 10.617px -3.539px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.769px 2.654px -1.769px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+      '0 3.401px 13.603px -6.801px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 2.551px 10.202px -3.401px var(--Overlays-Black-Alpha-2, rgba(0, 0, 0, 0.10)), 0 1.701px 2.551px -1.701px var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15))',
+    ]
+
     return {
       position: 'relative',
       marginTop:
@@ -221,6 +238,7 @@ export const SetlistList = ({
           ? 0
           : -(collapsedItemHeight - collapsedVisibleOffset),
       zIndex,
+      boxShadow: boxShadows[index],
     }
   }
 
@@ -286,6 +304,14 @@ export const SetlistList = ({
                   setOpenSetlistMenuId(nextOpen ? setlist.id : null)
                 }}
                 avatar={setlist.icon || <SetlistIcon width={16} height={16} />}
+                avatarStyle={
+                  showCollapsedStack
+                    ? {
+                      width: collapsedStackAvatarSizes[index],
+                      height: collapsedStackAvatarSizes[index],
+                    }
+                    : undefined
+                }
                 group={setlist.group}
                 moises={setlist.moises}
                 text={setlist.label}
@@ -297,7 +323,7 @@ export const SetlistList = ({
                   [styles.collapsedStackItem]: showCollapsedStack,
                   [styles.collapsedTransition]: collapsed,
                 })}
-                style={getCollapsedStackStyle(index)}
+                style={getCollapsedStackStyle(index, setlist)}
               />
             )
           })}

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

@@ -9,6 +9,11 @@
     align-items: center;
     width: calc(100% - 24px);
   
+    &:focus-visible {
+      outline: 2px solid var(--neutral-alpha-8);
+      outline-offset: -1px;
+    }
+
     &:hover,
     &.menuOpen {
       background: var(--neutral-alpha-2);
@@ -28,6 +33,8 @@
   .collapsed {
     width: fit-content;
     padding: 2px;
+    margin: 0 10px;
+ 
   }
 
 .dropdownTriggerWrapper {
@@ -41,9 +48,9 @@
   margin-left: auto;
 }
 
-  .dropdownTriggerWrapperMobile {
+  /* .dropdownTriggerWrapperMobile {
     padding: 8px;
-  }
+  } */
 
   .collapsed .dropdownTriggerWrapper {
     opacity: 0;
@@ -53,7 +60,7 @@
     color: var(--neutral-alpha-7);
   }
   
-  .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
+  /* .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
   .menuOpen .dropdownTriggerWrapper .dropdownMenuTrigger {
     color: var(--neutral-alpha-11);
     background-color: rgba(255, 255, 255, 0.07);
@@ -61,7 +68,7 @@
     width: 16px;
     height: 24px;
   }
-  
+   */
   .avatarSetlist {
     display: flex;
     width: 40px;
@@ -115,6 +122,23 @@
     border-radius: var(--Radius-3-max, 6px);
     background: var(--neutral-alpha-3);
 
+    &.collapsed {
+      background: transparent;
+
+      .avatarSetlist {
+        background: var(--neutral-2);
+      }
+
+      &:hover,
+      &.menuOpen {
+        background: transparent !important;
+
+        .avatarSetlist {
+          background: var(--neutral-2) !important;
+        }
+      }
+    }
+
     &:hover,
     &.menuOpen {
       border-radius: var(--Radius-3-max, 6px);
@@ -166,12 +190,15 @@
 
   .setlistsContent {
     /* gap: 4px; */
+    margin: 1px 0;
   }
 .collapsedStack {
   gap: 0;
+  align-items: center;
 }
 .collapsedStackItem {
   position: relative;
+  justify-content: flex-start;
 }
 
 .collapsedMask {
@@ -180,6 +207,10 @@
   padding-top: 2px;
 }
 
+.collapsedStack.collapsedMask {
+  padding-top: 12px;
+}
+
 .collapsedTransition {
   transition: margin-top 360ms ease-in-out;
 }

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

@@ -246,7 +246,7 @@
 }
 
 .headerCollapsed {
-  padding-left: 17px;
+  padding-left: 16px;
 }
 
 .separator {

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

@@ -16,5 +16,5 @@
 
 .separator {
     background: var(--neutral-alpha-4) !important;
-    margin: 0 4px 23px 4px;
+    margin: 0 3px 23px 3px;
 }

package/src/lib/menu/Menu.module.css

@@ -1,4 +1,5 @@
-.menuContent, .menuSubContent {
+.menuContent,
+.menuSubContent {
   border-radius: 8px;
   width: fit-content;
   min-width: 151px;
@@ -7,6 +8,73 @@
   box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.30), 0 12px 60px 0 rgba(0, 0, 0, 0.15);
   z-index: 9999;
   border: 1px solid var(--neutral-alpha-3);
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+}
+
+.menuContent[data-side='top'],
+.menuSubContent[data-side='top'] {
+  animation-name: slideDownAndFade;
+}
+
+.menuContent[data-side='right'],
+.menuSubContent[data-side='right'] {
+  animation-name: slideLeftAndFade;
+}
+
+.menuContent[data-side='bottom'],
+.menuSubContent[data-side='bottom'] {
+  animation-name: slideUpAndFade;
+}
+
+.menuContent[data-side='left'],
+.menuSubContent[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);
+  }
 }
 
 [data-radix-popper-content-wrapper] {
@@ -218,9 +286,6 @@
 
 .menuSubContent {
   min-width: 242px;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
 }
 
 .menuLabel {
@@ -249,7 +314,7 @@
 .menuItemSelected {
   background-color: var(--neutral-alpha-3);
   border-radius: 6px;
-  cursor: default;
+  cursor: pointer;
   font-weight: 400;
 
   &[data-disabled] {
@@ -312,19 +377,19 @@
 }
 
 .red {
-  color: color(display-p3 1 .57 .55);
+  color: rgba(255, 149, 146, 1);
 
   & .label,
   & .leftIcon,
   & .rightIcon,
   & .checkboxIndicatorSlot {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 
   & .leftIcon > svg,
   & .rightIcon > svg,
   & .menuCheckboxIndicator > svg {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 }