@moises.ai/design-system 3.9.4 → 3.9.6

package/package.json

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

package/src/components/Countdown/Countdown.jsx

@@ -16,7 +16,20 @@ export const Countdown = ({
   variant = 'lg',
   className,
   showDays = true,
+  labels = {},
 }) => {
+  const {
+    days: daysLabel,
+    hours: hoursLabel,
+    minutes: minutesLabel,
+    seconds: secondsLabel,
+  } = {
+    days: labels.days ?? i18n._('Days'),
+    hours: labels.hours ?? i18n._('Hours'),
+    minutes: labels.minutes ?? i18n._('Minutes'),
+    seconds: labels.seconds ?? i18n._('Sec'),
+  }
+
   if (!show || ended) {
     return null
   }
@@ -51,7 +64,7 @@ export const Countdown = ({
               {padZero(days)}
             </p>
             <p className={classNames(styles.labelSmall, themeClass)}>
-              {i18n._('Days')}
+              {daysLabel}
             </p>
           </div>
           <p className={classNames(styles.colon, themeClass)}>:</p>
@@ -63,7 +76,7 @@ export const Countdown = ({
           {padZero(hours)}
         </p>
         <p className={classNames(styles.labelSmall, themeClass)}>
-          {i18n._('Hours')}
+          {hoursLabel}
         </p>
       </div>
       <p className={classNames(styles.colon, themeClass)}>:</p>
@@ -73,7 +86,7 @@ export const Countdown = ({
           {padZero(minutes)}
         </p>
         <p className={classNames(styles.labelSmall, themeClass)}>
-          {i18n._('Minutes')}
+          {minutesLabel}
         </p>
       </div>
       {(days <= 0 || !showDays) && (
@@ -86,7 +99,7 @@ export const Countdown = ({
             {padZero(seconds)}
           </p>
           <p className={classNames(styles.labelSmall, themeClass)}>
-            {i18n._('Sec')}
+            {secondsLabel}
           </p>
         </div>
       )}

package/src/components/Countdown/Countdown.stories.jsx

@@ -23,6 +23,10 @@ export default {
       options: ['sm', 'md', 'lg'],
     },
     showDays: { control: 'boolean' },
+    labels: {
+      control: 'object',
+      description: 'Labels for days, hours, minutes and seconds',
+    },
   },
 }
 
@@ -104,5 +108,11 @@ export const Default = {
     theme: 'default',
     variant: 'lg',
     showDays: true,
+    labels: {
+      days: 'Dias',
+      hours: 'Horas',
+      minutes: 'minutos',
+      seconds: 'segundos',
+    },
   },
 }

package/src/components/SetlistList/SetlistList.jsx

@@ -375,7 +375,7 @@ export const SetlistList = ({
     >
       <div
         ref={hoverRegionRef}
-        className={styles.hoverRegion}
+        className={classNames(styles.hoverRegion, styles.scrollShadow)}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         onFocusCapture={handleFocus}

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

@@ -4,44 +4,43 @@
 }
 
 .newSetlistItem {
-    cursor: pointer;
-    margin: 0 12px;
-    padding: 2px;
-    border-radius: 6px;
-
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: calc(100% - 24px);
-  
-    &:focus-visible {
-      outline: 2px solid var(--neutral-alpha-8);
-      outline-offset: -1px;
-    }
+  cursor: pointer;
+  margin: 0 12px;
+  padding: 2px;
+  border-radius: 6px;
 
-    &:hover,
-    &.menuOpen {
-      background: #212225 !important;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 24px);
 
-      .avatarSetlist {
-        background: var(--neutral-alpha-3);
-      }
-      .dropdownMenuTrigger {
-        color: var(--neutral-alpha-7);
-      }
-      .dropdownTriggerWrapper {
-        opacity: 1;
-        pointer-events: auto;
-      }
-    }
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: -1px;
   }
 
-  .collapsed {
-    width: fit-content;
-    padding: 2px;
-    margin: 0 10px;
- 
+  &:hover,
+  &.menuOpen {
+    background: #212225 !important;
+
+    .avatarSetlist {
+      background: var(--neutral-alpha-3);
+    }
+    .dropdownMenuTrigger {
+      color: var(--neutral-alpha-7);
+    }
+    .dropdownTriggerWrapper {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
+}
+
+.collapsed {
+  width: fit-content;
+  padding: 2px;
+  margin: 0 10px;
+}
 
 .dropdownTriggerWrapper {
   display: flex;
@@ -54,19 +53,19 @@
   margin-left: auto;
 }
 
-  /* .dropdownTriggerWrapperMobile {
+/* .dropdownTriggerWrapperMobile {
     padding: 8px;
   } */
 
-  .collapsed .dropdownTriggerWrapper {
-    opacity: 0;
-  }
+.collapsed .dropdownTriggerWrapper {
+  opacity: 0;
+}
 
-  .dropdownMenuTrigger {
-    color: var(--neutral-alpha-7);
-  }
-  
-  /* .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
+.dropdownMenuTrigger {
+  color: var(--neutral-alpha-7);
+}
+
+/* .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
   .menuOpen .dropdownTriggerWrapper .dropdownMenuTrigger {
     color: var(--neutral-alpha-11);
     background-color: rgba(255, 255, 255, 0.07);
@@ -75,158 +74,178 @@
     height: 24px;
   }
    */
-  .avatarSetlist {
-    display: flex;
-    width: 40px;
-    height: 40px;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    aspect-ratio: 1/1;  
-    border-radius:4px;
-    background: var(--neutral-2);
-    color: var(--neutral-alpha-8);
-    flex-shrink: 0;
+.avatarSetlist {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  aspect-ratio: 1/1;
+  border-radius: 4px;
+  background: var(--neutral-2);
+  color: var(--neutral-alpha-8);
+  flex-shrink: 0;
   position: relative;
   z-index: 1;
-  }
+}
 
-  .avatarClickable {
-    cursor: pointer;
-  }
+.avatarClickable {
+  cursor: pointer;
+}
 
-  .iconGrid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    width: 100%;
-    height: 100%;
-    border-radius: 4px;
-    overflow: hidden;
-    background: var(--neutral-2);
-  }
+.iconGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  overflow: hidden;
+  background: var(--neutral-2);
+}
 
-  .iconGridCell {
-    position: relative;
-    overflow: hidden;
-  }
+.iconGridCell {
+  position: relative;
+  overflow: hidden;
+}
 
-  .iconGridCell img {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+.iconGridCell img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
 
-  .textNewSetlist {
-    max-width: 115px;
-    opacity: 1;
+.textNewSetlist {
+  max-width: 115px;
+  opacity: 1;
   transition: opacity 360ms ease-in-out;
-    white-space: nowrap;
-  }
+  white-space: nowrap;
+}
 
-  .collapsed .textNewSetlist {
-    opacity: 0;
-  }
+.collapsed .textNewSetlist {
+  opacity: 0;
+}
 
-  .textSubtitle {
-    max-width: 95px;
-    color: var(--neutral-alpha-10);
-    opacity: 1;
+.textSubtitle {
+  max-width: 95px;
+  color: var(--neutral-alpha-10);
+  opacity: 1;
   transition: opacity 360ms ease-in-out;
-    white-space: nowrap;
-  }
+  white-space: nowrap;
+}
 
-  .collapsed .textSubtitle {
-    opacity: 0;
-  }
+.collapsed .textSubtitle {
+  opacity: 0;
+}
 
-  .textSubtitleIcon {
-    color: var(--neutral-alpha-10);
-    opacity: 1;
+.textSubtitleIcon {
+  color: var(--neutral-alpha-10);
+  opacity: 1;
   transition: opacity 360ms ease-in-out;
-  }
-
-  .collapsed .textSubtitleIcon {
-    opacity: 0;
-  }
-
-  
-  .navItemSelected {
-    border-radius: var(--Radius-3-max, 6px);
-    background: var(--neutral-alpha-3);
+}
 
-    &.collapsed {
-      /* background: transparent; */
+.collapsed .textSubtitleIcon {
+  opacity: 0;
+}
 
-      .avatarSetlist {
-        background: var(--neutral-2);
-      }
+.navItemSelected {
+  border-radius: var(--Radius-3-max, 6px);
+  background: var(--neutral-alpha-3);
 
-      &:hover,
-      &.menuOpen {
-        background: transparent !important;
+  &.collapsed {
+    /* background: transparent; */
 
-        .avatarSetlist {
-          background: var(--neutral-2) !important;
-        }
-      }
+    .avatarSetlist {
+      background: var(--neutral-2);
     }
 
     &:hover,
     &.menuOpen {
-      border-radius: var(--Radius-3-max, 6px);
-      background: var(--neutral-alpha-3) !important;
+      background: transparent !important;
 
       .avatarSetlist {
-        background: var(--neutral-alpha-4) !important;
+        background: var(--neutral-2) !important;
       }
     }
-    .avatarSetlist {
-      background: var(--neutral-alpha-4);
-    }
-    .dropdownMenuTrigger {
-      color: var(--neutral-alpha-7);
-    }
-  
   }
 
-  @media (max-width: 768px) {
-    .dropdownTriggerWrapper {
-      opacity: 1;
-      pointer-events: auto;
+  &:hover,
+  &.menuOpen {
+    border-radius: var(--Radius-3-max, 6px);
+    background: var(--neutral-alpha-3) !important;
+
+    .avatarSetlist {
+      background: var(--neutral-alpha-4) !important;
     }
   }
-  .setlistsSection {
-    flex: 1;
-    min-height: 0;
-    overflow: hidden;
+  .avatarSetlist {
+    background: var(--neutral-alpha-4);
   }
-  
-  .setlistsScrollArea {
-    height: 100%;
-  padding-right: 6px;
+  .dropdownMenuTrigger {
+    color: var(--neutral-alpha-7);
   }
+}
 
-  sectionTitle {
-    color: var(--neutral-alpha-7);
-    text-transform: uppercase;
-    letter-spacing: 1.5px;
-    padding: 0 0  8px 4px;
+@media (max-width: 768px) {
+  .dropdownTriggerWrapper {
     opacity: 1;
-    transition: opacity 0.2s ease-in-out;
+    pointer-events: auto;
   }
+}
+.setlistsSection {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
 
-  .collapsed .sectionTitle {
-    opacity: 0;
-  }
-  
+.setlistsScrollArea {
+  height: 100%;
+  padding-right: 6px;
+}
+
+sectionTitle {
+  color: var(--neutral-alpha-7);
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  padding: 0 0 8px 4px;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.collapsed .sectionTitle {
+  opacity: 0;
+}
+
+.setlistsContent {
+  /* gap: 4px; */
+  margin: 1px 0;
+}
+
+.scrollShadow {
+  position: relative;
+}
+
+.scrollShadow::after {
+  content: '';
+  position: sticky;
+  bottom: -2px;
+  left: 0;
+  right: 0;
+  display: block;
+  height: 18px;
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(
+    to top,
+    var(--color-background) 0%,
+    transparent 100%
+  );
+  opacity: 0.35;
+}
 
-  .setlistsContent {
-    /* gap: 4px; */
-    margin: 1px 0;
-  }
 .collapsedStack {
   gap: 0;
 }
@@ -265,7 +284,6 @@
 .collapsedMask {
   position: relative;
   overflow: hidden;
-  padding-top: 2px;
   display: flex;
   max-height: 80vh;
   transition: max-height 260ms ease-in-out;
@@ -348,10 +366,9 @@
 .iconHidden {
   opacity: 0;
 }
-  .newSetlistItemButton {
-    color: var(--aqua-dark-alpha-11) !important;
-  }
-  .plusIcon {
-    color: var(--aqua-dark-alpha-11);
-  }
-  
+.newSetlistItemButton {
+  color: var(--aqua-dark-alpha-11) !important;
+}
+.plusIcon {
+  color: var(--aqua-dark-alpha-11);
+}