@moises.ai/design-system 4.16.4 → 4.16.6

package/package.json

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

package/src/components/DropdownButton/DropdownButton.jsx

@@ -19,6 +19,8 @@ export const DropdownButton = ({
   ...props
 }) => {
   const [hover, setHover] = useState(false)
+  const [isTriggerButtonFocused, setIsTriggerButtonFocused] = useState(false)
+  const [isChevronFocused, setIsChevronFocused] = useState(false)
 
   const handleTriggerClick = (e) => {
     if (onTriggerClick) {
@@ -28,20 +30,38 @@ export const DropdownButton = ({
     }
   }
 
+  const handleTriggerButtonFocus = () => {
+    setIsTriggerButtonFocused(true)
+  }
+  const handleTriggerButtonBlur = () => {
+    setIsTriggerButtonFocused(false)
+  }
+  const handleChevronFocus = () => {
+    setIsChevronFocused(true)
+  }
+  const handleChevronBlur = () => {
+    setIsChevronFocused(false)
+  }
+
+  const ChevronTrigger = onTriggerClick ? 'button' : 'div'
+
   return (
     <Flex className={classNames(styles.container, className)} {...props}>
-      <Popover.Root open={open} onOpenChange={onOpenChange} modal={true}>
+      <Popover.Root open={open} onOpenChange={onOpenChange} modal={true} >
         {onTriggerClick && (
           <Flex
             as="button"
             className={classNames({
               [styles.triggerWithClick]: onTriggerClick,
+              [styles.triggerWithClickFocused]: isTriggerButtonFocused,
               [styles.hasLeftColor]: leftColor,
               [styles.freeWidthTrigger]: !withIconTrigger,
             })}
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
             onClick={handleTriggerClick}
+            onFocus={handleTriggerButtonFocus}
+            onBlur={handleTriggerButtonBlur}
           >
             <Button
               variant="ghost"
@@ -55,6 +75,7 @@ export const DropdownButton = ({
                 width: withIconTrigger ? '32px' : undefined,
                 backgroundColor: leftColor,
                 borderRadius: leftColor ? '3px' : '0px',
+                outline: 'none',
               }}
             >
               {trigger}
@@ -62,12 +83,14 @@ export const DropdownButton = ({
           </Flex>
         )}
         <Popover.Trigger asChild>
-          <div
+          <ChevronTrigger
+            type={onTriggerClick ? 'button' : undefined}
             className={classNames({
               [styles.hover]: hover,
               [styles.hasLeftColor]: leftColor,
               [styles.hasTriggerWithClick]: onTriggerClick,
               [styles.hasTriggerWithoutClick]: !onTriggerClick,
+              [styles.chevronFocused]: isChevronFocused,
             })}
             onMouseEnter={() => {
               setHover(true)
@@ -75,6 +98,8 @@ export const DropdownButton = ({
             onMouseLeave={() => {
               setHover(false)
             }}
+            onFocus={handleChevronFocus}
+            onBlur={handleChevronBlur}
           >
             {!onTriggerClick && (
               <Button
@@ -88,6 +113,7 @@ export const DropdownButton = ({
                       : '0 6px',
                   backgroundColor: leftColor,
                   borderRadius: leftColor ? '3px' : '0px',
+                  outline: 'none',
                 }}
               >
                 {trigger}
@@ -109,7 +135,7 @@ export const DropdownButton = ({
                 [styles.hover]: hover,
               })}
             />
-          </div>
+          </ChevronTrigger>
         </Popover.Trigger>
         <Popover.Content
           className={styles.content}

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

@@ -14,10 +14,16 @@
   &.triggerWithClick {
     cursor: pointer;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
 }
 
 .triggerWithClick {
-  border-width: 1px 0 1px 1px; /* top right bottom left */
+  border-width: 1px 0 1px 1px;
+  /* top right bottom left */
   border-style: solid;
   border-color: var(--neutral-alpha-3);
   display: flex;
@@ -36,18 +42,36 @@
   &:hover button {
     color: var(--neutral-alpha-12) !important;
   }
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
+}
+
+.triggerWithClickFocused,
+.chevronFocused {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
 }
 
 .triggerWithClick.freeWidthTrigger {
   width: auto;
 }
 
+/* quando tiver active no triggerWithClick */
+.triggerWithClick:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 .hasTriggerWithClick {
-  border-width: 1px 1px 1px 0; /* top right bottom left */
+  border-width: 1px 1px 1px 0;
+  /* top right bottom left */
   border-style: solid;
   border-color: var(--neutral-alpha-3);
   display: flex;
-  height: 30px;
+  height: 32px;
 
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
@@ -55,11 +79,22 @@
   justify-content: center !important;
   align-items: center;
   padding: 0 4px 0 0;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 2px solid var(--neutral-alpha-8);
+    outline-offset: 2px;
+  }
 }
 
 .hover {
   color: var(--neutral-alpha-12) !important;
   cursor: pointer;
+
 }
 
 .trigger.hover button {
@@ -94,7 +129,7 @@
 
   display: flex;
   width: fit-content;
-  padding: 12px 16px;
+  padding: 12px 16px 16px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
@@ -103,6 +138,7 @@
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform, opacity;
+
 }
 
 .content[data-side='top'] {
@@ -121,11 +157,17 @@
   animation-name: slideRightAndFade;
 }
 
+.content:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
 @keyframes slideUpAndFade {
   from {
     opacity: 0;
     transform: translateY(2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -137,6 +179,7 @@
     opacity: 0;
     transform: translateX(-2px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -148,6 +191,7 @@
     opacity: 0;
     transform: translateY(-2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -159,6 +203,7 @@
     opacity: 0;
     transform: translateX(2px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -167,4 +212,4 @@
 
 .chevron {
   color: var(--neutral-alpha-11);
-}
+}

package/src/components/PlayerSlider/PlayerSlider.module.css

@@ -46,6 +46,7 @@
   user-select: none;
   bottom: -7px;
   z-index: 12;
+  background: transparent;
 
   &:hover {
     .sliderTrack {
@@ -57,12 +58,18 @@
 
 .sliderTrack {
   position: relative;
-  /* z-index: 1; */
   flex: 1;
   height: 2px;
   overflow: visible;
   border-radius: 0px;
   background: var(--neutral-5);
+  transition: height 0.15s ease, border-radius 0.15s ease, background 0.15s ease;
+}
+
+.sliderRoot:hover .sliderTrack {
+  height: 4px;
+  border-radius: 9999px;
+  background: var(--neutral-6);
 }
 
 .bufferedRange {
@@ -105,7 +112,7 @@
   bottom: 8px;
   left: 0;
   height: 28px;
-  overflow: hidden;
+  overflow: clip;
   pointer-events: none;
   opacity: 0;
   transform: translateY(4px);

package/src/index.jsx

@@ -37,6 +37,7 @@ export {
   VisuallyHidden,
 } from '@radix-ui/themes'
 
+export { Slider as SliderPrimitive } from 'radix-ui'
 // Export our custom components
 
 export { AdditionalItems } from './components/AdditionalItems/AdditionalItems'