@moises.ai/design-system 4.18.1 → 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)}