@moises.ai/design-system 3.11.17 → 3.11.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.17",
+  "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

@@ -21,6 +21,7 @@ export const Slider = ({
   highContrast = false,
   markers = [],
   orientation = 'horizontal',
+  horizontalWidth = '100%',
   verticalHeight = 200,
   scrollWheel = false,
   ...props
@@ -69,10 +70,14 @@ export const Slider = ({
     typeof verticalHeight === 'number'
       ? `${verticalHeight}px`
       : verticalHeight
+  const horizontalWidthStyle =
+    typeof horizontalWidth === 'number'
+      ? `${horizontalWidth}px`
+      : horizontalWidth
 
   return (
     <Box
-      width="100%"
+      width={isVertical ? '100%' : horizontalWidthStyle}
       className={classNames(isVertical && styles.boxVertical)}
       style={
         isVertical

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

@@ -27,6 +27,7 @@ import { Slider } from '@moises.ai/design-system'
   disabled={false}
   size="2"
   orientation="horizontal"
+  horizontalWidth={320}
   scrollWheel={false}
 />
 
@@ -56,6 +57,7 @@ import { Slider } from '@moises.ai/design-system'
   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)
 }
@@ -129,6 +131,10 @@ import { Slider } from '@moises.ai/design-system'
       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)',
@@ -151,6 +157,7 @@ export const Default = {
     highContrast: false,
     size: '2',
     orientation: 'horizontal',
+    horizontalWidth: 300,
     verticalHeight: 200,
     scrollWheel: false,
   },