@moises.ai/design-system 4.16.11 → 4.17.1

package/package.json

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

package/src/components/ToolsDropdown/ToolsDropdown.jsx

@@ -1,4 +1,3 @@
-
 import classNames from 'classnames'
 import { DropdownMenu as DropdownMenuRadix } from 'radix-ui'
 import { memo, useCallback, useState } from 'react'
@@ -8,9 +7,6 @@ import { Theme } from '../theme/Theme'
 import styles from './ToolsDropdown.module.css'
 import { Flex, ScrollArea, Separator } from '../../index'
 
-const FOCUSABLE_SELECTOR =
-  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [role="switch"]:not([disabled]), [tabindex]:not([tabindex="-1"])'
-
 export const ToolsDropdown = memo(
   ({
     trigger,
@@ -66,19 +62,16 @@ export const ToolsDropdown = memo(
     }, [])
 
     const handleOpenAutoFocus = useCallback((event) => {
-      const panel = event.currentTarget.querySelector('[data-tools-dropdown-panel]')
-      const focusable = panel?.querySelector(FOCUSABLE_SELECTOR)
-
-      if (!focusable) return
-
       event.preventDefault()
-      focusable.focus({ preventScroll: true })
+      const panel = event.currentTarget.querySelector('[data-tools-dropdown-panel]')
+      panel?.focus({ preventScroll: true })
     }, [])
 
     const renderPanel = () => (
       <div
         className={styles.contentPanel}
         data-tools-dropdown-panel
+        tabIndex={-1}
         onKeyDown={handlePanelKeyDown}
       >
         {typeof children === 'function' ? children(closeMenu) : children}
@@ -159,4 +152,4 @@ export const ToolsDropdown = memo(
   },
 )
 
-ToolsDropdown.displayName = 'ToolsDropdown'
+ToolsDropdown.displayName = 'ToolsDropdown'

package/src/components/ToolsDropdown/ToolsDropdown.stories.jsx

@@ -2,6 +2,7 @@ import { Flex, Switch, Text } from '@radix-ui/themes'
 import { useState } from 'react'
 import { MetronomeIcon } from '../../icons/MetronomeIcon'
 import { ToolsDropdown } from './ToolsDropdown'
+import { IconButton } from '../IconButton/IconButton'
 export default {
   title: 'Components/ToolsDropdown',
   component: ToolsDropdown,
@@ -79,6 +80,9 @@ export const WithRenderProp = {
         {(closeMenu) => (
           <>
             <Flex direction="column" gap="3" width="220px">
+            <IconButton >
+              <MetronomeIcon width={16} height={16} />
+            </IconButton>
               <Text size="2">Show chord diagrams</Text>
               <Switch
                 size="2"

package/src/components/Tooltip/Tooltip.jsx

@@ -9,6 +9,9 @@ export const Tooltip = ({
   content,
   shortcut,
   color = 'gray',
+  variant = 'default',
+  title,
+  headerActions,
   delayDuration = 200,
   skipDelayDuration,
   disableHoverableContent,
@@ -22,6 +25,8 @@ export const Tooltip = ({
     ...restContentProps
   } = props
 
+  const isDiagram = variant === 'diagram'
+
   const providerProps = {
     delayDuration,
     skipDelayDuration,
@@ -45,19 +50,40 @@ export const Tooltip = ({
             <TooltipPrimitive.Content
               className={classNames(
                 styles.TooltipContent,
-                styles[`TooltipContent--${color}`]
+                !isDiagram && styles[`TooltipContent--${color}`],
+                isDiagram && styles.TooltipDiagram
               )}
               sideOffset={5}
               {...restContentProps}
             >
-              <Text size='1' className={styles.TooltipText}>{content}</Text>
-              {shortcut && (
-                <Text size='0' className={classNames(
-                  styles.TooltipShortcut,
-                  styles[`TooltipShortcut--${color}`]
-                )}>
-                  {shortcut}
-                </Text>
+              {isDiagram ? (
+                <>
+                  <div className={styles.TooltipDiagramHeader}>
+                    {title && (
+                      <Text size='2' className={styles.TooltipDiagramTitle}>
+                        {title}
+                      </Text>
+                    )}
+                    {headerActions && (
+                      <div className={styles.TooltipDiagramActions}>
+                        {headerActions}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles.TooltipDiagramBody}>{content}</div>
+                </>
+              ) : (
+                <>
+                  <Text size='1' className={styles.TooltipText}>{content}</Text>
+                  {shortcut && (
+                    <Text size='0' className={classNames(
+                      styles.TooltipShortcut,
+                      styles[`TooltipShortcut--${color}`]
+                    )}>
+                      {shortcut}
+                    </Text>
+                  )}
+                </>
               )}
               <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
             </TooltipPrimitive.Content>

package/src/components/Tooltip/Tooltip.module.css

@@ -85,6 +85,55 @@
   color: rgba(252, 253, 255, 0.94);
 }
 
+/* Diagram variant (matches the "tooltip diagram" surface from Figma) */
+.TooltipDiagram {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-1, 4px);
+  max-width: none;
+  padding: var(--spacing-1, 4px) var(--spacing-2, 8px) var(--spacing-2, 8px);
+  border-radius: var(--radius-4, 8px);
+  border: 1px solid var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  background: var(--panel-solid, #18191b);
+  color: var(--neutral-alpha-12, rgba(252, 253, 255, 0.94));
+  box-shadow:
+    0 12px 32px -16px rgba(0, 0, 0, 0.3),
+    0 12px 60px 0 rgba(0, 0, 0, 0.15);
+}
+
+.TooltipDiagram .TooltipArrow {
+  fill: var(--panel-solid, #18191b);
+}
+
+.TooltipDiagramHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2, 8px);
+  width: 100%;
+}
+
+.TooltipDiagramTitle {
+  color: var(--neutral-alpha-9, rgba(223, 235, 253, 0.43));
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.TooltipDiagramActions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.TooltipDiagramBody {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-1, 4px);
+  width: 100%;
+}
+
 .TooltipText {
   white-space: normal;
   overflow-wrap: anywhere;

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -13,6 +13,10 @@ export default {
       control: 'select',
       options: ['white', 'gray'],
     },
+    variant: {
+      control: 'select',
+      options: ['default', 'diagram'],
+    },
   },
 }
 
@@ -58,4 +62,42 @@ export const WithShortcutWhite = {
     color: 'white',
     children: <Button>Hover me</Button>,
   },
+}
+
+export const Diagram = {
+  args: {
+    variant: 'diagram',
+    title: 'Diagram',
+    side: 'top',
+    open: true,
+    headerActions: (
+      <button
+        type="button"
+        aria-label="More"
+        style={{
+          width: 12,
+          height: 24,
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          color: 'rgba(223, 235, 253, 0.43)',
+          cursor: 'pointer',
+          lineHeight: 0,
+        }}
+      >
+        ⋮
+      </button>
+    ),
+    content: (
+      <div
+        style={{
+          width: 100,
+          height: 155,
+          borderRadius: 8,
+          background: '#edeef0',
+        }}
+      />
+    ),
+    children: <Button>Hover me</Button>,
+  },
 }

package/src/lib/menu/renderItem.jsx

@@ -80,9 +80,7 @@ export const createRenderItem = (MenuPrimitives) => {
               </div>
             </MenuPrimitives.SubTrigger>
 
-            <MenuPrimitives.SubContent
-              className={classNames(styles.menuSubContent, opt.subContentClassName)}
-            >
+            <MenuPrimitives.SubContent className={styles.menuSubContent}>
               {opt?.children?.map((child) =>
                 renderItem(
                   child,