@moises.ai/design-system 4.16.0 → 4.16.2

package/package.json

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

package/src/components/InstrumentSelect/InstrumentSelect.jsx

@@ -58,8 +58,8 @@ function isItemSelected(value, itemValue) {
  * - Pass `value` to mark items as selected (string for single, string[] for multi).
  * - `onSelect(item)` fires for every click; the parent decides what to do.
  *
- * Layout: 2-column responsive grid by default with 4px gap. Cards have `min-width: 150px`
- * and the columns adapt to the parent's width.
+ * Layout: 2-column responsive grid by default with 4px gap. Cards have no minimum width
+ * and shrink to fit narrow containers (the parent owns the available width).
  *
  * @example
  * // Single select
@@ -115,7 +115,7 @@ export const InstrumentSelect = forwardRef(function InstrumentSelect(
   }, [columns])
 
   const gridStyle = useMemo(
-    () => ({ gridTemplateColumns: `repeat(${cols}, minmax(150px, 1fr))` }),
+    () => ({ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }),
     [cols],
   )
 

package/src/components/InstrumentSelect/InstrumentSelect.module.css

@@ -14,6 +14,7 @@
 }
 
 .title {
+  font-family: var(--default-font-family, 'Articulat', helvetica, arial, sans-serif);
   color: var(--neutral-alpha-12);
 }
 
@@ -34,7 +35,7 @@
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(150px, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4px;
   width: 100%;
 }
@@ -46,13 +47,13 @@
   display: flex;
   align-items: center;
   gap: var(--space-3, 12px);
-  min-width: 150px;
+  min-width: 0;
   padding: 10px 8px 10px 12px;
   border: 1px solid var(--neutral-alpha-4, rgba(211, 237, 248, 0.11));
   border-radius: var(--radius-3, 6px);
   background: transparent;
   color: var(--neutral-alpha-12);
-  font-family: inherit;
+  font-family: var(--default-font-family, 'Articulat', helvetica, arial, sans-serif);
   font-size: 14px;
   line-height: 20px;
   text-align: left;

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -0,0 +1,203 @@
+import classNames from 'classnames'
+import { Slider as SliderRadix } from 'radix-ui'
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import { Tooltip } from '../Tooltip/Tooltip'
+import styles from './SliderLibrary.module.css'
+
+/**
+ * @typedef {Object} SliderLibraryProps
+ * @property {number} value - Currently selected value (controlled).
+ * @property {(value: number) => void} [onValueChange] - Fires whenever the user drags,
+ * keys the thumb or scrolls over the slider. Receives a single number (not an array).
+ * @property {number} [min=0] - Minimum allowed value.
+ * @property {number} [max=100] - Maximum allowed value.
+ * @property {number} [step=1] - Increment step. Used by keyboard, drag and wheel.
+ * @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 {(value: number) => React.ReactNode} [formatValue] - Formats the value for
+ * display in the tooltip. Defaults to the raw number.
+ * @property {string} [aria-label] - Accessible label, recommended when no visual label exists.
+ * @property {string} [className] - Extra class on the root.
+ */
+
+/**
+ * Minimalist horizontal slider used in Library player surfaces.
+ *
+ * Visuals (from Figma):
+ * - 4px track with `--neutral-alpha-3` background.
+ * - Range fill in `--aqua-alpha-8` (cyan).
+ * - 18x10 white thumb with subtle border, rounded-full.
+ * - DS `Tooltip` anchored below the thumb shows the current value, following the thumb during drag.
+ *
+ * Behavior:
+ * - Drag: pointer/touch. Tooltip stays open and follows the thumb continuously.
+ * - Keyboard (via Radix Slider primitives): arrows/Home/End/PageUp/PageDown.
+ * - Wheel: scrolling over the slider increments/decrements by `step`.
+ * - Focus ring: appears only when the thumb is focused via keyboard, never on click/drag.
+ *
+ * @example
+ * const [volume, setVolume] = useState(50)
+ * <SliderLibrary
+ *   value={volume}
+ *   onValueChange={setVolume}
+ *   formatValue={(v) => `${v}%`}
+ *   aria-label="Volume"
+ * />
+ *
+ * @type {React.ForwardRefExoticComponent<SliderLibraryProps & React.RefAttributes<HTMLSpanElement>>}
+ */
+export const SliderLibrary = forwardRef(function SliderLibrary(
+  {
+    value,
+    onValueChange,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    showTooltip = true,
+    formatValue,
+    className,
+    ...props
+  },
+  ref,
+) {
+  const ariaLabel = props['aria-label']
+  const internalRef = useRef(null)
+  const lastInteractionRef = useRef(null)
+  const [keyboardFocus, setKeyboardFocus] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const stateRef = useRef({ value, min, max, step, disabled, onValueChange })
+  stateRef.current = { value, min, max, step, disabled, onValueChange }
+
+  useEffect(() => {
+    const onKey = () => {
+      lastInteractionRef.current = 'keyboard'
+    }
+    const onPointer = () => {
+      lastInteractionRef.current = 'pointer'
+    }
+    window.addEventListener('keydown', onKey, true)
+    window.addEventListener('pointerdown', onPointer, true)
+    return () => {
+      window.removeEventListener('keydown', onKey, true)
+      window.removeEventListener('pointerdown', onPointer, true)
+    }
+  }, [])
+
+  useEffect(() => {
+    const node = internalRef.current
+    if (!node) return undefined
+
+    const handleWheel = (event) => {
+      const state = stateRef.current
+      if (state.disabled) return
+      event.preventDefault()
+      const direction = event.deltaY < 0 ? 1 : -1
+      const next = Math.min(
+        state.max,
+        Math.max(state.min, state.value + direction * state.step),
+      )
+      if (next !== state.value) state.onValueChange?.(next)
+    }
+
+    node.addEventListener('wheel', handleWheel, { passive: false })
+    return () => node.removeEventListener('wheel', handleWheel)
+  }, [])
+
+  useEffect(() => {
+    if (!isDragging) return undefined
+    const onUp = () => setIsDragging(false)
+    window.addEventListener('pointerup', onUp)
+    window.addEventListener('pointercancel', onUp)
+    return () => {
+      window.removeEventListener('pointerup', onUp)
+      window.removeEventListener('pointercancel', onUp)
+    }
+  }, [isDragging])
+
+  useEffect(() => {
+    if (!isDragging) return undefined
+    const style = document.createElement('style')
+    style.textContent = '* { cursor: ew-resize !important; }'
+    document.head.appendChild(style)
+    return () => {
+      if (style.parentNode) style.parentNode.removeChild(style)
+    }
+  }, [isDragging])
+
+  const setRefs = useCallback(
+    (node) => {
+      internalRef.current = node
+      if (typeof ref === 'function') ref(node)
+      else if (ref) ref.current = node
+    },
+    [ref],
+  )
+
+  const handleRootPointerDown = () => {
+    if (!disabled) setIsDragging(true)
+  }
+
+  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 displayValue = formatValue ? formatValue(value) : value
+  const tooltipOpen =
+    !disabled && (isHovering || isDragging || keyboardFocus)
+
+  const thumb = (
+    <SliderRadix.Thumb
+      className={styles.thumb}
+      data-focus-visible={keyboardFocus || undefined}
+      aria-label={ariaLabel}
+      onFocus={handleThumbFocus}
+      onBlur={handleThumbBlur}
+      onPointerDown={handleThumbPointerDown}
+      onPointerEnter={handleThumbPointerEnter}
+      onPointerLeave={handleThumbPointerLeave}
+    />
+  )
+
+  return (
+    <SliderRadix.Root
+      ref={setRefs}
+      className={classNames(styles.root, className)}
+      value={[value]}
+      onValueChange={(next) => onValueChange?.(next[0])}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+      onPointerDown={handleRootPointerDown}
+      {...props}
+    >
+      <SliderRadix.Track className={styles.track}>
+        <SliderRadix.Range className={styles.range} />
+      </SliderRadix.Track>
+      {showTooltip ? (
+        <Tooltip
+          content={displayValue}
+          open={tooltipOpen}
+          delayDuration={0}
+          side="bottom"
+          sideOffset={8}
+          updatePositionStrategy="always"
+        >
+          {thumb}
+        </Tooltip>
+      ) : (
+        thumb
+      )}
+    </SliderRadix.Root>
+  )
+})
+
+SliderLibrary.displayName = 'SliderLibrary'

package/src/components/SliderLibrary/SliderLibrary.module.css

@@ -0,0 +1,53 @@
+.root {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 19px;
+  user-select: none;
+  touch-action: none;
+}
+
+.root[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.track {
+  position: relative;
+  flex-grow: 1;
+  height: 4px;
+  background: var(--neutral-alpha-3, rgba(221, 234, 248, 0.08));
+  border-radius: 99px;
+  overflow: hidden;
+}
+
+.range {
+  position: absolute;
+  height: 100%;
+  background: var(--aqua-alpha-8, rgba(0, 216, 230, 0.84));
+  border-radius: 99px;
+}
+
+.thumb {
+  position: relative;
+  display: block;
+  width: 18px;
+  height: 10px;
+  background: var(--white, #fff);
+  border: none;
+  border-radius: 99px;
+  box-shadow: 0 0 0 1px #2e31354d;
+  outline: none;
+  cursor: ew-resize;
+}
+
+.thumb[data-focus-visible] {
+  outline: 2px solid var(--neutral-alpha-8, rgba(217, 237, 255, 0.36));
+  outline-offset: 2px;
+}
+
+.root[data-disabled] .thumb {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,100 @@
+import { useState } from 'react'
+import { SliderLibrary } from './SliderLibrary'
+
+export default {
+  title: 'Components/SliderLibrary',
+  component: SliderLibrary,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: { control: { type: 'number' } },
+    min: { control: { type: 'number' } },
+    max: { control: { type: 'number' } },
+    step: { control: { type: 'number' } },
+    disabled: { control: { type: 'boolean' } },
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: 280,
+          padding: 24,
+          background: '#1d1d1d',
+          borderRadius: 8,
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Default = {
+  render: () => {
+    const [value, setValue] = useState(50)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        formatValue={(v) => `${v}%`}
+        aria-label="Volume"
+      />
+    )
+  },
+}
+
+export const Disabled = {
+  render: () => (
+    <SliderLibrary
+      value={75}
+      onValueChange={() => {}}
+      disabled
+      aria-label="Volume (disabled)"
+    />
+  ),
+}
+
+export const CustomRange = {
+  name: 'Custom range (-12 to 12 dB)',
+  render: () => {
+    const [value, setValue] = useState(0)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        min={-12}
+        max={12}
+        step={0.5}
+        formatValue={(v) => `${v.toFixed(1)} dB`}
+        aria-label="Gain"
+      />
+    )
+  },
+}
+
+export const WithoutTooltip = {
+  render: () => {
+    const [value, setValue] = useState(50)
+    return (
+      <SliderLibrary
+        value={value}
+        onValueChange={setValue}
+        showTooltip={false}
+        aria-label="Volume"
+      />
+    )
+  },
+}
+
+export const WithLabel = {
+  render: () => {
+    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} />
+      </label>
+    )
+  },
+}

package/src/components/SliderLibrary/index.js

@@ -0,0 +1 @@
+export { SliderLibrary } from './SliderLibrary'

package/src/index.jsx

@@ -130,6 +130,7 @@ export { Shell } from './components/Shell/Shell'
 export { Sidebar } from './components/Sidebar/Sidebar'
 export { SidebarSection } from './components/Sidebar/SidebarSection/SidebarSection'
 export { Slider } from './components/Slider/Slider'
+export { SliderLibrary } from './components/SliderLibrary/SliderLibrary'
 export { StemGenerationForm } from './components/StemGenerationForm/StemGenerationForm'
 export { GenerationStatus } from './components/StemSeparationForm/GenerationStatus/GenerationStatus'
 export { StemSeparationForm } from './components/StemSeparationForm/StemSeparationForm'