@moises.ai/design-system 3.11.17 → 3.11.19

package/package.json

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

package/src/colors/custom-styles.css

@@ -85,7 +85,26 @@
 
   /* Neutral */
 
-  --neutral-1: rgba(17, 17, 19, 1);
+  /* Figma paths: colors/neutral/…, colors/semantic/…, colors/accent/… (AI Studio file) */
+  --colors-neutral-neutral-1: #111113;
+  --colors-neutral-neutral-alpha-2: rgba(216, 244, 246, 0.04);
+  --colors-neutral-neutral-alpha-3: rgba(221, 234, 248, 0.08);
+  --colors-neutral-neutral-alpha-4: rgba(211, 237, 248, 0.11);
+  --colors-neutral-neutral-alpha-5: rgba(217, 237, 254, 0.15);
+  --colors-neutral-neutral-alpha-10: rgba(229, 237, 253, 0.48);
+  --colors-semantic-warning-alpha-9: #ffc53d;
+  --colors-accent-accent-10: #19e4f1;
+  --colors-red-alpha-10: rgba(255, 100, 101, 0.92);
+
+  /* Figma Dev Mode (PascalCase) — mesmo valor que colors/neutral/neutral-alpha/… */
+  --Colors-Neutral-Neutral-Alpha-2: var(--colors-neutral-neutral-alpha-2);
+  --Colors-Neutral-Neutral-Alpha-3: var(--colors-neutral-neutral-alpha-3);
+  --Colors-Neutral-Neutral-Alpha-4: var(--colors-neutral-neutral-alpha-4);
+  --Colors-Neutral-Neutral-Alpha-5: var(--colors-neutral-neutral-alpha-5);
+  --Colors-Neutral-Neutral-Alpha-10: var(--colors-neutral-neutral-alpha-10);
+  --Colors-Neutral-Neutral-1: var(--colors-neutral-neutral-1);
+
+  --neutral-1: var(--colors-neutral-neutral-1);
   --neutral-2: rgba(24, 25, 27, 1);
   --neutral-3: rgba(33, 34, 37, 1);
   --neutral-4: rgba(39, 42, 45, 1);
@@ -99,15 +118,15 @@
   --neutral-12: rgba(237, 238, 240, 1);
 
   --neutral-alpha-1: rgba(0, 0, 0, 0);
-  --neutral-alpha-2: rgba(216, 244, 246, 0.04);
-  --neutral-alpha-3: rgba(221, 234, 248, 0.08);
-  --neutral-alpha-4: rgba(211, 237, 248, 0.11);
-  --neutral-alpha-5: rgba(217, 237, 254, 0.15);
+  --neutral-alpha-2: var(--colors-neutral-neutral-alpha-2);
+  --neutral-alpha-3: var(--colors-neutral-neutral-alpha-3);
+  --neutral-alpha-4: var(--colors-neutral-neutral-alpha-4);
+  --neutral-alpha-5: var(--colors-neutral-neutral-alpha-5);
   --neutral-alpha-6: rgba(214, 235, 253, 0.19);
   --neutral-alpha-7: rgba(217, 237, 255, 0.25);
   --neutral-alpha-8: rgba(217, 237, 255, 0.36);
   --neutral-alpha-9: rgba(223, 235, 253, 0.43);
-  --neutral-alpha-10: rgba(229, 237, 253, 0.48);
+  --neutral-alpha-10: var(--colors-neutral-neutral-alpha-10);
   --neutral-alpha-11: rgba(241, 247, 254, 0.71);
   --neutral-alpha-12: rgba(252, 253, 255, 0.94);
 
@@ -118,6 +137,7 @@
   /* Red */
   --red-alpha-2: rgba(242, 47, 62, 0.07);
   --red-alpha-3: rgba(255, 23, 63, 0.18);
+  --red-alpha-10: var(--colors-red-alpha-10);
 
   /* Success */
   --success-alpha-2: rgba(41, 249, 157, 0.04);
@@ -128,6 +148,7 @@
 
   /* Warning */
   --warning-alpha-2: rgba(253, 155, 0, 0.05);
+  --warning-alpha-9: var(--colors-semantic-warning-alpha-9);
   --warning-alpha-12: #FFE7B3;
 
   /* Error */
@@ -140,7 +161,6 @@
   --info-alpha-3: rgba(0, 249, 121, 0.11);
   --info-alpha-12: rgba(166, 255, 206, 1);
 
-
   .radix-themes {
     --cursor-button: pointer;
     --cursor-checkbox: pointer;
@@ -221,7 +241,7 @@
     --cyan-7: var(--aqua-7);
     --cyan-8: var(--aqua-8);
     --cyan-9: var(--aqua-9);
-    --cyan-10: var(--aqua-10);
+    --cyan-10: var(--colors-accent-accent-10);
     --cyan-11: var(--aqua-11);
     --cyan-12: var(--aqua-12);
     --cyan-a1: var(--aqua-alpha-1);

package/src/components/InputLevelMeter/InputLevelMeter.module.css

@@ -63,7 +63,7 @@
   height: 19px;
   border-radius: 9999px;
   background: #777b84;
-  border: 1px solid rgba(46, 49, 53, 0.3);
+  box-shadow: 0 0 0 1px rgba(46, 49, 53, 0.3);
   cursor: ew-resize;
   z-index: 2;
   touch-action: none;

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,
   },

package/src/components/TrackControlButton/TrackControlButton.jsx

@@ -1,27 +1,67 @@
 import classNames from 'classnames'
 import { memo } from 'react'
-import { Button } from '../../index'
+import { Tooltip } from '../Tooltip/Tooltip'
 import styles from './TrackControlButton.module.css'
 
+const LABELS = {
+  record: 'R',
+  mute: 'M',
+  autoMute: 'M',
+  solo: 'S',
+}
+
 export const TrackControlButton = memo(
-  ({ variant = 'mute', isActive, className, onChange }) => {
-    const isMute = variant === 'mute'
-    const label = isMute ? 'M' : 'S'
+  ({
+    variant = 'mute',
+    isActive,
+    selected,
+    className,
+    onChange,
+    onClick,
+    disabled,
+    tooltipContent,
+    ...props
+  }) => {
+    const pressed = isActive ?? selected ?? false
+    const label = LABELS[variant] ?? LABELS.mute
+
+    const handleClick = (event) => {
+      onClick?.(event)
+      onChange?.(!pressed)
+    }
 
-    return (
-      <Button
+    const button = (
+      <button
+        type="button"
+        disabled={disabled}
         className={classNames(styles.button, className, {
-          [styles.mute]: isMute,
-          [styles.solo]: !isMute,
-          [styles.active]: isActive,
+          [styles.active]: pressed,
+          [styles.record]: variant === 'record',
+          [styles.mute]: variant === 'mute',
+          [styles.autoMute]: variant === 'autoMute',
+          [styles.solo]: variant === 'solo',
         })}
-        variant="ghost"
-        color="gray"
-        onClick={() => onChange?.(!isActive)}
+        aria-pressed={pressed}
+        onClick={handleClick}
+        {...props}
       >
         {label}
-      </Button>
+      </button>
     )
+
+    if (tooltipContent) {
+      return (
+        <Tooltip
+          content={tooltipContent?.text}
+          color="gray"
+          shortcut={tooltipContent?.shortcut}
+        >
+          {button}
+        </Tooltip>
+      )
+    }
+
+    return button
   },
 )
 

package/src/components/TrackControlButton/TrackControlButton.module.css

@@ -1,32 +1,82 @@
 .button {
-  width: 40px !important;
-  height: 100% !important;
-  font-size: 12px !important;
-  background-color: transparent;
-
-  &:not(.active) {
-    color: var(--neutral-10) !important;
-
-    &:hover {
-      color: var(--neutral-12) !important;
-    }
-  }
-
-  &.active {
-    &.mute {
-      color: var(--yellow-9) !important;
-
-      &:hover {
-        color: var(--yellow-10) !important;
-      }
-    }
-
-    &.solo {
-      color: var(--aqua-9) !important;
-
-      &:hover {
-        color: var(--aqua-10) !important;
-      }
-    }
-  }
+  box-sizing: border-box;
+  width: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  height: 100%;
+  margin: 0;
+  padding: 2px;
+  border: none;
+  border-radius: var(--radius-2, 4px);
+  font-family: var(--default-font-family, inherit);
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.04px;
+  font-weight: 400;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+
+  background: var(--Colors-Neutral-Neutral-Alpha-4, rgba(211, 237, 248, 0.11));
+  color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
+}
+
+.button:hover:not(:disabled) {
+  background: var(--Colors-Neutral-Neutral-Alpha-5, rgba(217, 237, 254, 0.15));
+  color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--neutral-alpha-8);
+  outline-offset: 2px;
+}
+
+.button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+/* Auto Mute inativo — Figma */
+.button.autoMute:not(.active) {
+  background: var(--Colors-Neutral-Neutral-Alpha-2, rgba(216, 244, 246, 0.04));
+  color: var(--colors-semantic-warning-alpha-9);
+}
+
+.button.autoMute:not(.active):hover:not(:disabled) {
+  background: var(--Colors-Neutral-Neutral-Alpha-3, rgba(221, 234, 248, 0.08));
+  color: var(--colors-semantic-warning-alpha-9);
+}
+
+.button.active.record {
+  background-color: var(--colors-red-alpha-10);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.record:hover:not(:disabled) {
+  background-color: var(--colors-red-alpha-10);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.mute,
+.button.active.autoMute {
+  background-color: var(--colors-semantic-warning-alpha-9);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.mute:hover:not(:disabled),
+.button.active.autoMute:hover:not(:disabled) {
+  background-color: var(--colors-semantic-warning-alpha-9);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.solo {
+  background-color: var(--colors-accent-accent-10);
+  color: var(--colors-neutral-neutral-1);
+}
+
+.button.active.solo:hover:not(:disabled) {
+  background-color: var(--colors-accent-accent-10);
+  color: var(--colors-neutral-neutral-1);
 }

package/src/components/TrackControlButton/TrackControlButton.stories.jsx

@@ -8,18 +8,28 @@ export default {
   argTypes: {
     variant: {
       control: 'select',
-      options: ['mute', 'solo'],
-      description: 'Type of control (mute or solo)',
-      defaultValue: 'mute',
+      options: ['mute', 'solo', 'record', 'autoMute'],
+      description: 'Tipo de controle (R, M ou S)',
     },
     isActive: {
       control: 'boolean',
-      description: 'Whether the control is active',
-      defaultValue: false,
+      description: 'Estado ativo (pressionado)',
+    },
+    selected: {
+      control: 'boolean',
+      description: 'Alias de `isActive` (compatível com TrackControlsToggle)',
     },
     onChange: {
       action: 'changed',
-      description: 'Callback called when the state changes',
+      description: 'Recebe o próximo boolean ao clicar',
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Handler nativo do clique (disparado junto com onChange quando ambos existem)',
+    },
+    tooltipContent: {
+      control: 'object',
+      description: 'Opcional: `{ text, shortcut }`',
     },
   },
 }
@@ -45,3 +55,12 @@ export const Interactive = {
     )
   },
 }
+
+export const WithTooltip = {
+  args: {
+    variant: 'solo',
+    isActive: false,
+    tooltipContent: { text: 'Solo', shortcut: 'S' },
+    onClick: () => {},
+  },
+}

package/src/components/TrackControlsToggle/TrackControlsToggle.jsx

@@ -1,55 +1,27 @@
-import styles from './TrackControlsToggle.module.css'
-import classNames from 'classnames'
-import { Text, Tooltip, Flex } from '../../index'
+import { TrackControlButton } from '../TrackControlButton/TrackControlButton'
 
-export const TrackControlsToggle = ({ children, className, type, selected, onClick, tooltipContent, ...props }) => {
-  const toggleType = {
-    record: 'R',
-    mute: 'M',
-    autoMute: 'M',
-    solo: 'S',
-  }
-
-  const content = () => {
-    return (
-      <Flex className={classNames(styles.TrackControlsToggle, className, {
-        [styles.selected]: selected,
-        [styles.record]: type === 'record',
-        [styles.mute]: type === 'mute',
-        [styles.autoMute]: type === 'autoMute',
-        [styles.solo]: type === 'solo',
-      })}
-        onClick={onClick}
-        role="button"
-        tabIndex={0}
-        aria-pressed={selected}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter') {
-            e.preventDefault()
-            onClick?.()
-          }
-        }}
-        {...props}>
-        <Text size="1" weight="regular">{toggleType[type]}</Text>
-      </Flex>
-    )
-
-  }
-
-  return (
-    <>
-      {tooltipContent && (
-        <Tooltip content={tooltipContent?.text} color='gray' shortcut={tooltipContent?.shortcut}>
-          {content()}
-        </Tooltip>
-      )}
-      {!tooltipContent && (
-        <>
-          {content()}
-        </>
-      )}
-    </>
-  )
-}
+/**
+ * @deprecated Use `TrackControlButton` with `variant={type}` and `isActive={selected}`.
+ * Maintained for backward compatibility.
+ */
+export const TrackControlsToggle = ({
+  type,
+  selected,
+  className,
+  onClick,
+  tooltipContent,
+  disabled,
+  ...props
+}) => (
+  <TrackControlButton
+    variant={type}
+    isActive={selected}
+    className={className}
+    onClick={onClick}
+    tooltipContent={tooltipContent}
+    disabled={disabled}
+    {...props}
+  />
+)
 
 TrackControlsToggle.displayName = 'TrackControlsToggle'

package/src/components/TrackControlsToggle/TrackControlsToggle.module.css

@@ -1,44 +0,0 @@
-.TrackControlsToggle {
-  border-radius: 4px;
-  background: var(--neutral-alpha-2);
-  display: inline-flex;
-  padding: 2px;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-
-  color: var(--neutral-alpha-10);
-
-  width: 20px;
-  height: 20px;
-
-  &:focus-visible:not(.disabled) {
-    outline: 2px solid var(--neutral-alpha-8);
-    outline-offset: 2px;
-  }
-}
-
-.TrackControlsToggle:hover {
-  background: var(--neutral-alpha-3);
-  cursor: pointer;
-}
-
-.selected.record {
-  background: rgba(255, 100, 101, 0.92);
-  color: var(--neutral-1);
-}
-
-.selected.mute {
-  background: #ffc53d;
-  color: var(--neutral-1);
-}
-
-.selected.autoMute {
-  background: var(--neutral-alpha-2);
-  color: #ffc53d;
-}
-
-.selected.solo {
-  background: var(--aqua-10);
-  color: var(--neutral-1);
-}