@moises.ai/design-system 4.18.0 → 4.18.2

package/src/components/PanControl/PanControl.jsx

@@ -22,6 +22,9 @@ export const PanControl = ({
   disabled,
   minValue = -0.65,
   maxValue = 0.65,
+  showTooltip = true,
+  tooltipDelayDuration = 0,
+  tooltipCloseDelay = 500,
 }) => {
   const containerRef = useRef(null)
   const [isDragging, setIsDragging] = useState(false)
@@ -30,17 +33,31 @@ export const PanControl = ({
   const startYRef = useRef(0)
   const pendingNormRef = useRef(value)
   const rafRef = useRef(0)
+  const openTimeoutRef = useRef(null)
+  const closeTimeoutRef = useRef(null)
+  const tooltipTimingRef = useRef({
+    tooltipDelayDuration,
+    tooltipCloseDelay,
+  })
+  tooltipTimingRef.current = { tooltipDelayDuration, tooltipCloseDelay }
 
   const [knobFocused, setKnobFocused] = useState(false)
-  const [hoverOpen, setHoverOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
 
   useEffect(() => {
     if (disabled) {
-      setHoverOpen(false)
+      setIsHovering(false)
       setKnobFocused(false)
     }
   }, [disabled])
 
+  useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current != null) clearTimeout(openTimeoutRef.current)
+      if (closeTimeoutRef.current != null) clearTimeout(closeTimeoutRef.current)
+    }
+  }, [])
+
   useEffect(() => {
     if (isDragging) {
       const style = document.createElement('style')
@@ -187,8 +204,107 @@ export const PanControl = ({
   const displayNorm = clampNorm(denormalize(value, minValue, maxValue))
   const ariaPanPct = Math.round(displayNorm * 100)
 
+  const clearOpenTimeout = () => {
+    if (openTimeoutRef.current != null) {
+      clearTimeout(openTimeoutRef.current)
+      openTimeoutRef.current = null
+    }
+  }
+
+  const clearCloseTimeout = () => {
+    if (closeTimeoutRef.current != null) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }
+
+  const handlePointerEnter = () => {
+    if (disabled) return
+    clearCloseTimeout()
+    clearOpenTimeout()
+    const { tooltipDelayDuration: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(true)
+      return
+    }
+    openTimeoutRef.current = setTimeout(() => {
+      openTimeoutRef.current = null
+      setIsHovering(true)
+    }, delay)
+  }
+
+  const handlePointerLeave = () => {
+    clearOpenTimeout()
+    const { tooltipCloseDelay: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(false)
+      return
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeTimeoutRef.current = null
+      setIsHovering(false)
+    }, delay)
+  }
+
   const tooltipOpen =
-    !disabled && (isDragging || knobFocused || hoverOpen)
+    !disabled && (isDragging || knobFocused || isHovering)
+
+  const pan = (
+    <div
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-label="Pan"
+      aria-valuemin={-100}
+      aria-valuemax={100}
+      aria-valuenow={ariaPanPct}
+      aria-valuetext={panValueText}
+      aria-disabled={disabled}
+      className={classNames(
+        styles.pan,
+        isDragging && styles.active,
+        disabled && styles.disabled,
+      )}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerUp}
+      onPointerEnter={handlePointerEnter}
+      onPointerLeave={handlePointerLeave}
+      onFocus={() => setKnobFocused(true)}
+      onBlur={() => setKnobFocused(false)}
+      onKeyDown={handleKnobKeyDown}
+    >
+      <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
+        <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />
+        <circle
+          cx={KNOB_CENTER_X}
+          cy={KNOB_CENTER_Y}
+          r={KNOB_RADIUS}
+          stroke="#D3EDF8"
+          strokeOpacity={0.113725}
+        />
+        {value !== 0 && (
+          <path
+            d={arcPath}
+            stroke={arcColor}
+            strokeLinecap="round"
+            strokeWidth={1}
+            fill="none"
+          />
+        )}
+        <g
+          transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
+        >
+          <path
+            d="M10 0.5 L10 6"
+            stroke={pointerColor}
+            strokeLinecap="round"
+            strokeWidth={1}
+          />
+        </g>
+      </svg>
+    </div>
+  )
 
   return (
     <div
@@ -198,70 +314,20 @@ export const PanControl = ({
       onClick={handleClick}
       style={{ cursor: disabled ? 'default' : 'ns-resize' }}
     >
-      <Tooltip
-        content={panValueText}
-        open={tooltipOpen}
-        onOpenChange={(next) => {
-          if (!disabled) setHoverOpen(next)
-        }}
-        side="bottom"
-        align="center"
-        sideOffset={3}
-        delayDuration={0}
-      >
-        <div
-          role="slider"
-          tabIndex={disabled ? -1 : 0}
-          aria-label="Pan"
-          aria-valuemin={-100}
-          aria-valuemax={100}
-          aria-valuenow={ariaPanPct}
-          aria-valuetext={panValueText}
-          aria-disabled={disabled}
-          className={classNames(
-            styles.pan,
-            isDragging && styles.active,
-            disabled && styles.disabled,
-          )}
-          onPointerDown={onPointerDown}
-          onPointerMove={onPointerMove}
-          onPointerUp={onPointerUp}
-          onPointerCancel={onPointerUp}
-          onFocus={() => setKnobFocused(true)}
-          onBlur={() => setKnobFocused(false)}
-          onKeyDown={handleKnobKeyDown}
+      {showTooltip ? (
+        <Tooltip
+          content={panValueText}
+          open={tooltipOpen}
+          delayDuration={tooltipDelayDuration}
+          side="bottom"
+          align="center"
+          sideOffset={3}
         >
-          <svg width={20} height={20} viewBox="0 0 20 20" fill="none">
-            <circle cx={KNOB_CENTER_X} cy={KNOB_CENTER_Y} r={10} />
-            <circle
-              cx={KNOB_CENTER_X}
-              cy={KNOB_CENTER_Y}
-              r={KNOB_RADIUS}
-              stroke="#D3EDF8"
-              strokeOpacity={0.113725}
-            />
-            {value !== 0 && (
-              <path
-                d={arcPath}
-                stroke={arcColor}
-                strokeLinecap="round"
-                strokeWidth={1}
-                fill="none"
-              />
-            )}
-            <g
-              transform={`rotate(${pointerRotation} ${KNOB_CENTER_X} ${KNOB_CENTER_Y})`}
-            >
-              <path
-                d="M10 0.5 L10 6"
-                stroke={pointerColor}
-                strokeLinecap="round"
-                strokeWidth={1}
-              />
-            </g>
-          </svg>
-        </div>
-      </Tooltip>
+          {pan}
+        </Tooltip>
+      ) : (
+        pan
+      )}
     </div>
   )
 }

package/src/components/PanControl/PanControl.stories.jsx

@@ -1,6 +1,6 @@
 import { PanControl } from './PanControl'
 import { useState } from 'react'
-import { Flex } from '@radix-ui/themes'
+import { Flex, Text } from '@radix-ui/themes'
 
 export default {
   title: 'Components/PanControl',
@@ -20,13 +20,24 @@ export default {
           '    <PanControl\n' +
           '      value={panValue}\n' +
           '      onChange={setPanValue}\n' +
+          '      tooltipDelayDuration={0}\n' +
+          '      tooltipCloseDelay={500}\n' +
           '    />\n' +
           '  )\n' +
           '}\n' +
-          '```',
+          '```\n\n' +
+          '## Tooltip\n\n' +
+          'Shows the current pan value on hover/focus/drag. Use `tooltipDelayDuration` and `tooltipCloseDelay` to control open/close timing, or `showTooltip={false}` to hide it.',
       },
     },
   },
+  args: {
+    showTooltip: true,
+    tooltipDelayDuration: 0,
+    tooltipCloseDelay: 500,
+    minValue: -0.65,
+    maxValue: 0.65,
+  },
   argTypes: {
     value: {
       description:
@@ -75,15 +86,35 @@ export default {
         defaultValue: { summary: 0.65 },
       },
     },
+    showTooltip: {
+      control: 'boolean',
+      description: 'Shows the pan value tooltip on hover/focus/drag',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: true },
+      },
+    },
+    tooltipDelayDuration: {
+      control: 'number',
+      description: 'Ms before the tooltip opens on hover',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 0 },
+      },
+    },
+    tooltipCloseDelay: {
+      control: 'number',
+      description: 'Ms the tooltip stays open after the pointer leaves',
+      table: {
+        type: { summary: 'number' },
+        defaultValue: { summary: 500 },
+      },
+    },
   },
   tags: ['autodocs'],
 }
 
 export const Default = {
-  args: {
-    minValue: -0.65,
-    maxValue: 0.65,
-  },
   render: (args) => {
     const [value, setValue] = useState(0)
     return <PanControl {...args} value={value} onChange={setValue} />
@@ -98,3 +129,41 @@ export const Disabled = {
     )
   },
 }
+
+export const WithoutTooltip = {
+  args: {
+    showTooltip: false,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0)
+    return <PanControl {...args} value={value} onChange={setValue} />
+  },
+}
+
+export const TooltipTiming = {
+  name: 'Tooltip timing',
+  args: {
+    tooltipDelayDuration: 200,
+    tooltipCloseDelay: 500,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(0)
+    return (
+      <Flex direction="column" align="center" gap="2">
+        <PanControl {...args} value={value} onChange={setValue} />
+        <Text size="1" color="gray">
+          Opens after {args.tooltipDelayDuration}ms · closes{' '}
+          {args.tooltipCloseDelay}ms after leave
+        </Text>
+      </Flex>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Adjust `tooltipDelayDuration` (open) and `tooltipCloseDelay` (close grace) via controls.',
+      },
+    },
+  },
+}

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -15,6 +15,10 @@ import styles from './SliderLibrary.module.css'
  * @property {boolean} [disabled=false] - Disables interaction and dims the slider.
  * @property {boolean} [showTooltip=true] - Renders the DS Tooltip below the thumb on
  * hover/focus/drag with the current value.
+ * @property {number} [tooltipDelayDuration=0] - Time in ms from hover enter until the
+ * tooltip opens. Drag and keyboard focus open immediately.
+ * @property {number} [tooltipCloseDelay=500] - Time in ms the tooltip stays open after
+ * the pointer leaves the thumb (or re-enters within this window).
  * @property {(value: number) => React.ReactNode} [formatValue] - Formats the value for
  * display in the tooltip. Defaults to the raw number.
  * @property {(value: number) => void} [onThumbDoubleClick] - Fires when the thumb is
@@ -58,6 +62,8 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     step = 1,
     disabled = false,
     showTooltip = true,
+    tooltipDelayDuration = 0,
+    tooltipCloseDelay = 500,
     formatValue,
     onThumbDoubleClick,
     className,
@@ -68,6 +74,8 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const ariaLabel = props['aria-label']
   const internalRef = useRef(null)
   const lastInteractionRef = useRef(null)
+  const openTimeoutRef = useRef(null)
+  const closeTimeoutRef = useRef(null)
   const [keyboardFocus, setKeyboardFocus] = useState(false)
   const [isHovering, setIsHovering] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
@@ -75,8 +83,21 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const stateRef = useRef({ value, min, max, step, disabled, onValueChange })
   stateRef.current = { value, min, max, step, disabled, onValueChange }
 
+  const tooltipTimingRef = useRef({
+    tooltipDelayDuration,
+    tooltipCloseDelay,
+  })
+  tooltipTimingRef.current = { tooltipDelayDuration, tooltipCloseDelay }
+
   const wheelRef = useRef({ accum: 0, axis: null, lastTime: 0 })
 
+  useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current != null) clearTimeout(openTimeoutRef.current)
+      if (closeTimeoutRef.current != null) clearTimeout(closeTimeoutRef.current)
+    }
+  }, [])
+
   useEffect(() => {
     const onKey = () => {
       lastInteractionRef.current = 'keyboard'
@@ -181,13 +202,50 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     if (!disabled) setIsDragging(true)
   }
 
+  const clearOpenTimeout = () => {
+    if (openTimeoutRef.current != null) {
+      clearTimeout(openTimeoutRef.current)
+      openTimeoutRef.current = null
+    }
+  }
+
+  const clearCloseTimeout = () => {
+    if (closeTimeoutRef.current != null) {
+      clearTimeout(closeTimeoutRef.current)
+      closeTimeoutRef.current = null
+    }
+  }
+
   const handleThumbFocus = () => {
     if (lastInteractionRef.current === 'keyboard') setKeyboardFocus(true)
   }
   const handleThumbBlur = () => setKeyboardFocus(false)
   const handleThumbPointerDown = () => setKeyboardFocus(false)
-  const handleThumbPointerEnter = () => setIsHovering(true)
-  const handleThumbPointerLeave = () => setIsHovering(false)
+  const handleThumbPointerEnter = () => {
+    clearCloseTimeout()
+    clearOpenTimeout()
+    const { tooltipDelayDuration: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(true)
+      return
+    }
+    openTimeoutRef.current = setTimeout(() => {
+      openTimeoutRef.current = null
+      setIsHovering(true)
+    }, delay)
+  }
+  const handleThumbPointerLeave = () => {
+    clearOpenTimeout()
+    const { tooltipCloseDelay: delay } = tooltipTimingRef.current
+    if (delay <= 0) {
+      setIsHovering(false)
+      return
+    }
+    closeTimeoutRef.current = setTimeout(() => {
+      closeTimeoutRef.current = null
+      setIsHovering(false)
+    }, delay)
+  }
   const handleThumbDoubleClick = () => {
     if (!disabled) onThumbDoubleClick?.(value)
   }
@@ -230,7 +288,7 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
         <Tooltip
           content={displayValue}
           open={tooltipOpen}
-          delayDuration={0}
+          delayDuration={tooltipDelayDuration}
           side="bottom"
           sideOffset={8}
           updatePositionStrategy="always"

package/src/components/SliderLibrary/SliderLibrary.stories.jsx

@@ -7,12 +7,36 @@ export default {
   parameters: {
     layout: 'centered',
   },
+  args: {
+    tooltipDelayDuration: 0,
+    tooltipCloseDelay: 500,
+    showTooltip: true,
+  },
   argTypes: {
     value: { control: { type: 'number' } },
     min: { control: { type: 'number' } },
     max: { control: { type: 'number' } },
     step: { control: { type: 'number' } },
     disabled: { control: { type: 'boolean' } },
+    showTooltip: {
+      control: { type: 'boolean' },
+      description: 'Shows the value tooltip on hover/focus/drag.',
+    },
+    tooltipDelayDuration: {
+      control: { type: 'number' },
+      description: 'Ms before the tooltip opens on hover.',
+      table: {
+        defaultValue: { summary: 0 },
+      },
+    },
+    tooltipCloseDelay: {
+      control: { type: 'number' },
+      description:
+        'Ms the tooltip stays open after the pointer leaves the thumb.',
+      table: {
+        defaultValue: { summary: 500 },
+      },
+    },
   },
   decorators: [
     (Story) => (
@@ -31,10 +55,11 @@ export default {
 }
 
 export const Default = {
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(50)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
         formatValue={(v) => `${v}%`}
@@ -45,8 +70,9 @@ export const Default = {
 }
 
 export const Disabled = {
-  render: () => (
+  render: (args) => (
     <SliderLibrary
+      {...args}
       value={75}
       onValueChange={() => {}}
       disabled
@@ -57,10 +83,11 @@ export const Disabled = {
 
 export const CustomRange = {
   name: 'Custom range (-12 to 12 dB)',
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(0)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
         min={-12}
@@ -74,26 +101,63 @@ export const CustomRange = {
 }
 
 export const WithoutTooltip = {
-  render: () => {
+  args: {
+    showTooltip: false,
+  },
+  render: (args) => {
     const [value, setValue] = useState(50)
     return (
       <SliderLibrary
+        {...args}
         value={value}
         onValueChange={setValue}
-        showTooltip={false}
         aria-label="Volume"
       />
     )
   },
 }
 
+export const TooltipTiming = {
+  name: 'Tooltip timing',
+  args: {
+    tooltipDelayDuration: 200,
+    tooltipCloseDelay: 500,
+  },
+  render: (args) => {
+    const [value, setValue] = useState(50)
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <SliderLibrary
+          {...args}
+          value={value}
+          onValueChange={setValue}
+          formatValue={(v) => `${v}%`}
+          aria-label="Volume"
+        />
+        <span style={{ color: '#a1a1a1', fontSize: 12 }}>
+          Opens after {args.tooltipDelayDuration}ms · closes {args.tooltipCloseDelay}ms
+          after leave
+        </span>
+      </div>
+    )
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Adjust `tooltipDelayDuration` (open) and `tooltipCloseDelay` (close grace) via controls.',
+      },
+    },
+  },
+}
+
 export const WithLabel = {
-  render: () => {
+  render: (args) => {
     const [value, setValue] = useState(30)
     return (
       <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <span style={{ color: '#fff', fontSize: 14 }}>Volume</span>
-        <SliderLibrary value={value} onValueChange={setValue} />
+        <SliderLibrary {...args} value={value} onValueChange={setValue} />
       </label>
     )
   },
@@ -101,12 +165,13 @@ export const WithLabel = {
 
 export const ThumbDoubleClick = {
   name: 'Thumb double-click',
-  render: () => {
+  render: (args) => {
     const defaultValue = 0
     const [value, setValue] = useState(35)
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
         <SliderLibrary
+          {...args}
           value={value}
           onValueChange={setValue}
           onThumbDoubleClick={() => setValue(defaultValue)}

package/src/icons/ChordGrid4Icon.jsx

@@ -0,0 +1,10 @@
+export const ChordGrid4Icon = ({ width = 16, height = 16, className, ...props }) => (
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 16 16" fill="none" className={className} {...props}>
+  <path 
+  d="M6.00016 2.33337V6.66671M10.0002 2.33337V6.66671M6.00016 9.33337V13.6666M10.0002 9.33337V13.6666M3.3335 6.66671H12.6668C13.2191 6.66671 13.6668 6.21899 13.6668 5.66671V3.33337C13.6668 2.78109 13.2191 2.33337 12.6668 2.33337H3.3335C2.78121 2.33337 2.3335 2.78109 2.3335 3.33337V5.66671C2.3335 6.21899 2.78121 6.66671 3.3335 6.66671ZM3.3335 13.6666H12.6668C13.2191 13.6666 13.6668 13.2189 13.6668 12.6666V10.3334C13.6668 9.78109 13.2191 9.33337 12.6668 9.33337H3.3335C2.78121 9.33337 2.3335 9.78109 2.3335 10.3334V12.6666C2.3335 13.2189 2.78121 13.6666 3.3335 13.6666Z"
+   stroke="currentColor" 
+   strokeMiterlimit="10"/>
+</svg>
+)
+
+ChordGrid4Icon.displayName = 'ChordGrid4Icon'

package/src/icons.jsx

@@ -447,3 +447,4 @@ export { ChordGrid3Icon } from './icons/ChordGrid3Icon'
 export { ChordDiagramGridIcon } from './icons/ChordDiagramGridIcon'
 export { DynamicMicrophone2Icon } from './icons/DynamicMicrophone2Icon'
 export { Sections2Icon } from './icons/Sections2Icon'
+export { ChordGrid4Icon } from './icons/ChordGrid4Icon'