@moises.ai/design-system 3.12.1 → 3.12.3

package/package.json

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

package/src/components/DropdownMenu/DropdownMenu.jsx

@@ -20,6 +20,7 @@ export const DropdownMenu = memo(
     closeOnSelect = true,
     sideOffset = 5,
     matchTriggerWidth = false,
+    showSelectedItemBackground = true,
     wrapCloseMenu,
     ...props
   }) => {
@@ -87,6 +88,7 @@ export const DropdownMenu = memo(
                           onSelectionChange,
                           closeOnSelect,
                           closeMenu,
+                          showSelectedItemBackground,
                         ),
                       )}
                     </ScrollArea>
@@ -116,6 +118,7 @@ export const DropdownMenu = memo(
                         onSelectionChange,
                         closeOnSelect,
                         closeMenu,
+                        showSelectedItemBackground,
                       ),
                     )}
                   </DropdownMenuRadix.Content>

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -231,6 +231,58 @@ The \`options\` prop accepts an array of objects with the following types:
         defaultValue: { summary: 'false' },
       },
     },
+    maxHeight: {
+      control: { type: 'number' },
+      description:
+        'Maximum content height. When provided, wraps menu content in a vertical ScrollArea',
+      table: {
+        type: { summary: 'number | string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    sideOffset: {
+      control: { type: 'number' },
+      description: 'Distance in pixels between trigger and menu content',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: '5' },
+      },
+    },
+    showSelectedItemBackground: {
+      control: { type: 'boolean' },
+      description:
+        'When true, checked checkbox items get the selected background style',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    open: {
+      control: { type: 'boolean' },
+      description:
+        'Controlled open state. When defined, menu visibility is controlled externally',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onOpenChange: {
+      control: false,
+      description: 'Callback fired whenever open state changes',
+      table: {
+        type: { summary: '(open: boolean) => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    wrapCloseMenu: {
+      control: false,
+      description:
+        'Allows wrapping internal close behavior and receiving a close callback',
+      table: {
+        type: { summary: '(close: () => void) => () => void' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
   },
 }
 
@@ -416,6 +468,40 @@ export const MatchTriggerWidth = {
   ),
 }
 
+export const CheckboxWithoutSelectedBackground = {
+  args: {
+    showSelectedItemBackground: false,
+    side: 'bottom',
+    align: 'end',
+    trigger: (
+      <IconButton>
+        <DotsVerticalIcon />
+      </IconButton>
+    ),
+    options: [
+      {
+        type: 'checkbox',
+        key: 'option-1',
+        label: 'Voice',
+        checked: true,
+        onChange: (checked) => console.log('Voice:', checked),
+      },
+      {
+        type: 'checkbox',
+        key: 'option-2',
+        label: 'Instrumental',
+        checked: false,
+        onChange: (checked) => console.log('Instrumental:', checked),
+      },
+    ],
+  },
+  render: (args) => (
+    <Flex justify="center" align="start" height="300px">
+      <DropdownMenu {...args} />
+    </Flex>
+  ),
+}
+
 export const CustomWithSwitch = {
   render: () => {
     const [access, setAccess] = useState('private')

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

@@ -38,17 +38,17 @@
   opacity: 0.5;
 }
 
-.button.autoMute:not(.active) {
+.button.autoMute {
   background: var(--Colors-Neutral-Neutral-Alpha-2, rgba(216, 244, 246, 0.04));
-  color: var(--warning-alpha-12);
+  color: var(--colors-semantic-warning-alpha-9);
 }
 
-.button.autoMute:not(.active):hover:not(:disabled) {
+.button.autoMute:hover:not(:disabled) {
   background: var(--Colors-Neutral-Neutral-Alpha-3, rgba(221, 234, 248, 0.08));
-  color: color-mix(in srgb, var(--warning-alpha-12) 88%, var(--colors-semantic-warning-alpha-9));
+  color: var(--colors-semantic-warning-alpha-9);
 }
 
-.button.autoMute:not(.active):active:not(:disabled) {
+.button.autoMute:active:not(:disabled) {
   background: var(--Colors-Neutral-Neutral-Alpha-4, rgba(211, 237, 248, 0.11));
 }
 
@@ -76,21 +76,6 @@
   filter: brightness(0.92);
 }
 
-.button.active.autoMute {
-  background-color: var(--warning-alpha-12);
-  color: var(--colors-neutral-neutral-1);
-}
-
-.button.active.autoMute:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--warning-alpha-12) 78%, var(--colors-semantic-warning-alpha-9));
-  color: var(--colors-neutral-neutral-1);
-}
-
-.button.active.autoMute:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--warning-alpha-12) 62%, 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);

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -8,7 +8,8 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: 'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). Use `selected` to represent active state and `tooltipContent` to show context and keyboard shortcut.',
+        component:
+          'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). For `type="autoMute"`, o Figma define um único visual (amarelo em fundo alpha-2); `selected` só afeta `aria-pressed`, não as cores.',
       },
     },
   },
@@ -98,7 +99,7 @@ export const MuteSelected = {
   },
 }
 
-export const AutoMuteSelected = {
+export const AutoMute = {
   args: {
     type: 'autoMute',
     selected: true,
@@ -109,22 +110,12 @@ export const AutoMuteSelected = {
   },
 }
 
-export const AutoMuteInactive = {
-  args: {
-    type: 'autoMute',
-    selected: false,
-    tooltipContent: {
-      text: 'Muted by solo (inactive)',
-      shortcut: 'M',
-    },
-  },
-}
-
 export const AllStates = {
   parameters: {
     docs: {
       description: {
-        story: 'Shows all states with and without tooltip. Click any toggle to switch between inactive and active.',
+        story:
+          'Shows all states with and without tooltip. Click any toggle to switch `aria-pressed`; `autoMute` mantém o mesmo visual do Figma.',
       },
     },
   },
@@ -151,7 +142,15 @@ export const AllStates = {
               {...args}
               type={type}
               selected={states[type]}
-              tooltipContent={withTooltip ? { text: `${type}`, shortcut: type.slice(0, 1).toUpperCase() } : undefined}
+              tooltipContent={
+                withTooltip
+                  ? {
+                      text: `${type}`,
+                      shortcut:
+                        type === 'record' ? 'R' : type === 'solo' ? 'S' : 'M',
+                    }
+                  : undefined
+              }
               onClick={() => {
                 args.onClick?.()
                 toggleState(type)

package/src/lib/menu/renderItem.jsx

@@ -15,6 +15,7 @@ export const createRenderItem = (MenuPrimitives) => {
     onSelectionChange,
     closeOnSelect = true,
     closeMenu,
+    showSelectedItemBackground = true,
   ) => {
     switch (opt.type) {
       case 'custom':
@@ -81,7 +82,14 @@ export const createRenderItem = (MenuPrimitives) => {
 
             <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
-                renderItem(child, size, onSelectionChange, closeOnSelect, closeMenu),
+                renderItem(
+                  child,
+                  size,
+                  onSelectionChange,
+                  closeOnSelect,
+                  closeMenu,
+                  showSelectedItemBackground,
+                ),
               )}
             </MenuPrimitives.SubContent>
           </MenuPrimitives.Sub>
@@ -151,7 +159,8 @@ export const createRenderItem = (MenuPrimitives) => {
               styles.menuItem,
               styles.menuCheckboxItem,
               {
-                [styles.menuItemSelected]: opt.checked,
+                [styles.menuItemSelected]:
+                  opt.checked && showSelectedItemBackground,
                 [styles[`menuItem-size-${size}`]]: size,
                 [styles.red]: opt.color === 'red' && !opt.disabled,
                 [styles.cyan]: opt.color === 'cyan' && !opt.disabled,