@moises.ai/design-system 3.11.16 → 3.11.18

package/package.json

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

package/src/components/Slider/Slider.jsx

@@ -1,6 +1,6 @@
-import { Box, Flex, Text, Tooltip } from '@radix-ui/themes'
+import { useCallback } from 'react'
+import { Box, Flex, Text } from '@radix-ui/themes'
 import { Slider as SliderRadix } from 'radix-ui'
-import { InfoIcon } from '../../icons/InfoIcon'
 import styles from './Slider.module.css'
 import classNames from 'classnames'
 import { TooltipWithInfoIcon } from '../TooltipWithInfoIcon/TooltipWithInfoIcon'
@@ -20,18 +20,80 @@ export const Slider = ({
   disabled = false,
   highContrast = false,
   markers = [],
+  orientation = 'horizontal',
+  horizontalWidth = '100%',
+  verticalHeight = 200,
+  scrollWheel = false,
   ...props
 }) => {
+  const { onWheel: onWheelProp, ...rootProps } = props
+  const isVertical = orientation === 'vertical'
+
   // Calculate marker positions as percentages
   const getMarkerPosition = (markerValue) => {
     return ((markerValue - min) / (max - min)) * 100
   }
 
+  const handleWheel = useCallback(
+    (event) => {
+      onWheelProp?.(event)
+      if (disabled || !handleValueChange || event.defaultPrevented) return
+      const primary =
+        isVertical
+          ? event.deltaY
+          : Math.abs(event.deltaX) > Math.abs(event.deltaY)
+            ? event.deltaX
+            : event.deltaY
+      if (primary === 0) return
+      event.preventDefault()
+      const current = value?.[0] ?? min
+      const direction = primary < 0 ? 1 : -1
+      const next = Math.min(
+        max,
+        Math.max(min, current + direction * step),
+      )
+      if (next !== current) handleValueChange([next])
+    },
+    [
+      disabled,
+      handleValueChange,
+      isVertical,
+      max,
+      min,
+      onWheelProp,
+      step,
+      value,
+    ],
+  )
+
+  const verticalHeightStyle =
+    typeof verticalHeight === 'number'
+      ? `${verticalHeight}px`
+      : verticalHeight
+  const horizontalWidthStyle =
+    typeof horizontalWidth === 'number'
+      ? `${horizontalWidth}px`
+      : horizontalWidth
+
   return (
-    <Box width="100%">
+    <Box
+      width={isVertical ? '100%' : horizontalWidthStyle}
+      className={classNames(isVertical && styles.boxVertical)}
+      style={
+        isVertical
+          ? { ['--slider-vertical-height']: verticalHeightStyle }
+          : undefined
+      }
+    >
       {title && (
-        <Flex mb="2" justify="between" align="center">
-          <Flex align="center" gap="2">
+        <Flex
+          mb="2"
+          width="100%"
+          justify={isVertical ? 'center' : 'between'}
+          align="center"
+          gap="2"
+        >
+          <Flex align="center" gap="2" wrap="wrap" justify="center">
             <Text size="2" style={{ color: 'var(--white)' }}>
               {title}
             </Text>
@@ -40,8 +102,17 @@ export const Slider = ({
                 <TooltipWithInfoIcon content={tooltip} />
               </Flex>
             )}
+            {isVertical && info && (
+              <Text
+                size="2"
+                weight="regular"
+                style={{ color: 'var(--neutral-alpha-9)' }}
+              >
+                {info}
+              </Text>
+            )}
           </Flex>
-          {info && (
+          {!isVertical && info && (
             <Text
               size="2"
               weight="regular"
@@ -52,7 +123,7 @@ export const Slider = ({
           )}
         </Flex>
       )}
-      <Flex direction="column">
+      <Flex direction="column" align={isVertical ? 'center' : undefined}>
         <SliderRadix.Root
           min={min}
           max={max}
@@ -60,15 +131,27 @@ export const Slider = ({
           value={value}
           onValueChange={handleValueChange}
           disabled={disabled}
-          className={className}
-          {...props}
+          orientation={orientation}
+          className={classNames(styles.sliderRoot, className, {
+            [styles.sliderRootVertical]: isVertical,
+          })}
+          onWheel={scrollWheel ? handleWheel : onWheelProp}
+          {...rootProps}
         >
-          <Flex className={styles.sliderContainer}>
+          <Flex
+            className={classNames(styles.sliderContainer, {
+              [styles.sliderContainerVertical]: isVertical,
+            })}
+          >
             <SliderRadix.Track
               className={classNames(styles.sliderTrack, {
                 [styles.sliderTrackSize1]: size === '1',
                 [styles.sliderTrackSize2]: size === '2',
                 [styles.sliderTrackSize3]: size === '3',
+                [styles.sliderTrackVertical]: isVertical,
+                [styles.sliderTrackVerticalSize1]: isVertical && size === '1',
+                [styles.sliderTrackVerticalSize2]: isVertical && size === '2',
+                [styles.sliderTrackVerticalSize3]: isVertical && size === '3',
               })}
             >
               <SliderRadix.Range
@@ -96,10 +179,17 @@ export const Slider = ({
                     key={index}
                     className={classNames(styles.marker, {
                       [styles.markerSize3]: size === '3',
+                      [styles.markerVertical]: isVertical,
                     })}
-                    style={{
-                      left: `${getMarkerPosition(markerValue)}%`,
-                    }}
+                    style={
+                      isVertical
+                        ? {
+                          bottom: `${getMarkerPosition(markerValue)}%`,
+                        }
+                        : {
+                          left: `${getMarkerPosition(markerValue)}%`,
+                        }
+                    }
                   />
                 ))}
               </div>

package/src/components/Slider/Slider.module.css

@@ -18,6 +18,12 @@
     position: relative;
   }
 }
+.boxVertical {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .sliderRoot {
   position: relative;
   display: flex;
@@ -26,6 +32,15 @@
   touch-action: none;
 }
 
+.sliderRootVertical {
+  flex-direction: column;
+  align-items: center;
+  width: max-content;
+  max-width: 100%;
+  margin-inline: auto;
+  min-height: var(--slider-vertical-height, 200px);
+}
+
 .sliderTrack {
   position: relative;
   flex-grow: 1;
@@ -53,16 +68,47 @@
   cursor: default;
 }
 
+/* Radix thumb outer wrapper: só recebe `bottom`; centraliza no trilho vertical */
+.sliderTrack[data-orientation='vertical'] > span:not([data-orientation]) {
+  left: 50% !important;
+  transform: translate(-50%, 50%) !important;
+}
+
+.sliderTrackVertical {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  align-self: center;
+}
+
+.sliderTrackVerticalSize1 {
+  width: 4px;
+}
+
+.sliderTrackVerticalSize2 {
+  width: 6px;
+}
+
+.sliderTrackVerticalSize3 {
+  width: 10px;
+}
+
 .sliderRange {
   position: absolute;
-  height: 100%;
-  width: var(--radix-slider-range);
   border-radius: 9999px;
-  /* background-color: var(--aqua-alpha-8); */
   &:hover {
     cursor: pointer;
   }
 }
+
+.sliderRange[data-orientation='horizontal'] {
+  height: 100%;
+}
+
+.sliderRange[data-orientation='vertical'] {
+  width: 100%;
+}
 .sliderRangeAccent {
   background-color: var(--aqua-alpha-8);
 }
@@ -117,6 +163,13 @@
   top: 1px;
 }
 
+.sliderThumb[data-orientation='vertical'] {
+  left: 50%;
+  top: 50%;
+  right: auto;
+  transform: translate(-50%, -50%);
+}
+
 .sliderThumb[data-disabled] {
   border: 1px solid var(--neutral-7);
   background: var(--neutral-2);
@@ -133,6 +186,16 @@
   }
 }
 
+.sliderContainerVertical {
+  flex: 1;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  min-height: var(--slider-vertical-height, 200px);
+  width: max-content;
+  max-width: 100%;
+}
+
 .markersContainer {
   position: absolute;
   top: 0;
@@ -154,6 +217,17 @@
   z-index: 1;
 }
 
+.markerVertical {
+  width: 12px;
+  height: 1px;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
 .markerSize3 {
   height: 18px;
 }
+
+.markerVertical.markerSize3 {
+  width: 18px;
+}

package/src/components/Slider/Slider.stories.jsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Flex } from '@radix-ui/themes'
 import { Slider } from './Slider'
 
@@ -25,7 +26,17 @@ import { Slider } from '@moises.ai/design-system'
   step={1}
   disabled={false}
   size="2"
-/>  
+  orientation="horizontal"
+  horizontalWidth={320}
+  scrollWheel={false}
+/>
+
+<Slider
+  orientation="vertical"
+  verticalHeight={220}
+  value={[50]}
+  handleValueChange={(value) => console.log(value)}
+/>
 \`\`\`
 
 ## Component API
@@ -45,6 +56,10 @@ import { Slider } from '@moises.ai/design-system'
   highContrast: boolean, // Whether the slider is in high contrast mode
   size: '1' | '2' | '3', // Size of the slider (1: small, 2: medium, 3: large)
   markers: number[], // Array of values where visual markers should be displayed
+  orientation: 'horizontal' | 'vertical', // Slider axis; vertical uses verticalHeight for track
+  horizontalWidth: number | string, // Track width when horizontal (number = px, or CSS length)
+  verticalHeight: number | string, // Track height when vertical (number = px, or CSS length)
+  scrollWheel: boolean, // Wheel/trackpad adjusts value on hover/focus (use controlled value)
 }
 \`\`\`  
         `,
@@ -111,6 +126,24 @@ import { Slider } from '@moises.ai/design-system'
       control: 'object',
       description: 'Array of values where visual markers should be displayed',
     },
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Slider axis',
+    },
+    horizontalWidth: {
+      control: 'number',
+      description: 'Track width in px when orientation is horizontal (or pass a CSS length string)',
+    },
+    verticalHeight: {
+      control: 'number',
+      description: 'Track height in px when orientation is vertical (or pass a CSS length string)',
+    },
+    scrollWheel: {
+      control: 'boolean',
+      description:
+        'When true, wheel/trackpad adjusts value on hover/focus (use controlled value)',
+    },
   },
 }
 
@@ -123,6 +156,10 @@ export const Default = {
     color: 'accent',
     highContrast: false,
     size: '2',
+    orientation: 'horizontal',
+    horizontalWidth: 300,
+    verticalHeight: 200,
+    scrollWheel: false,
   },
   render: (args) => (
     <Flex width="300px">
@@ -197,3 +234,44 @@ export const WithMarkersDifferentSizes = {
     </Flex>
   ),
 }
+
+export const Vertical = {
+  render: () => {
+    const [v, setV] = useState([35])
+    return (
+      <Flex height="280px" align="center" justify="center">
+        <Slider
+          title="Vertical"
+          orientation="vertical"
+          verticalHeight={220}
+          value={v}
+          handleValueChange={setV}
+          info={`${v[0]}%`}
+          color="accent"
+          size="2"
+          markers={[0, 25, 50, 75, 100]}
+        />
+      </Flex>
+    )
+  },
+}
+
+export const ScrollWheel = {
+  render: () => {
+    const [v, setV] = useState([50])
+    return (
+      <Flex width="320px" direction="column" gap="2">
+        <Slider
+          title="Scroll wheel (hover + roll)"
+          value={v}
+          handleValueChange={setV}
+          info={`${v[0]}`}
+          scrollWheel
+          min={0}
+          max={100}
+          step={1}
+        />
+      </Flex>
+    )
+  },
+}