@moises.ai/design-system 4.17.13 → 4.17.15

package/dist/primitives.js

@@ -1,7 +1,7 @@
 import * as a from "react";
 import j from "react";
-import { R as Vo, u as Te, C as _r, P as F, a as te, b as wr, T as Ir, c as se, d as Go, e as Pe, f as ne, g as B, h as Ee, i as N, A as Tr, j as Ar, k as Sr, G as xr, I as Nr, l as Pr, L as Fr, m as Or, n as ct, o as Dr, p as kr, q as Lr, S as Vr, r as Gr, s as Kr, t as $r, v as Fe, w as Br, x as pe, y as zr, z as Oe, B as Ao, D as jr, E as ie, F as Hr, H as Ur, J as Wr, K as Ko, M as $o, N as qr, O as Yr, Q as Zr, U as Bo } from "./index-Dwaw5zqT.js";
-import { V as Ni, W as Pi, X as Fi, Y as Oi, Z as Di, _ as ki, $ as Li, a0 as Vi, a1 as Gi, a2 as Ki, a3 as $i, a4 as Bi, a5 as zi, a6 as ji, a7 as Hi, a8 as Ui, a9 as Wi, aa as qi, ab as Yi, ac as Zi, ad as Xi, ae as Ji, af as Qi } from "./index-Dwaw5zqT.js";
+import { R as Vo, u as Te, C as _r, P as F, a as te, b as wr, T as Ir, c as se, d as Go, e as Pe, f as ne, g as B, h as Ee, i as N, A as Tr, j as Ar, k as Sr, G as xr, I as Nr, l as Pr, L as Fr, m as Or, n as ct, o as Dr, p as kr, q as Lr, S as Vr, r as Gr, s as Kr, t as $r, v as Fe, w as Br, x as pe, y as zr, z as Oe, B as Ao, D as jr, E as ie, F as Hr, H as Ur, J as Wr, K as Ko, M as $o, N as qr, O as Yr, Q as Zr, U as Bo } from "./index-O6YxrN1Z.js";
+import { V as Ni, W as Pi, X as Fi, Y as Oi, Z as Di, _ as ki, $ as Li, a0 as Vi, a1 as Gi, a2 as Ki, a3 as $i, a4 as Bi, a5 as zi, a6 as ji, a7 as Hi, a8 as Ui, a9 as Wi, aa as qi, ab as Yi, ac as Zi, ad as Xi, ae as Ji, af as Qi } from "./index-O6YxrN1Z.js";
 import { jsxs as je, Fragment as Ae, jsx as s } from "react/jsx-runtime";
 import Xr, { flushSync as de } from "react-dom";
 var Jr = "AccessibleIcon", lt = ({ children: e, label: t }) => {

package/package.json

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

package/src/components/SliderLibrary/SliderLibrary.jsx

@@ -75,6 +75,8 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
   const stateRef = useRef({ value, min, max, step, disabled, onValueChange })
   stateRef.current = { value, min, max, step, disabled, onValueChange }
 
+  const wheelRef = useRef({ accum: 0, axis: null, lastTime: 0 })
+
   useEffect(() => {
     const onKey = () => {
       lastInteractionRef.current = 'keyboard'
@@ -94,15 +96,50 @@ export const SliderLibrary = forwardRef(function SliderLibrary(
     const node = internalRef.current
     if (!node) return undefined
 
+    const WHEEL_STEP_THRESHOLD = 24
+    const WHEEL_GESTURE_GAP = 150
+     const MOUSE_NOTCH_MIN_DELTA = 50
+
     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),
-      )
+
+      const { deltaX, deltaY, deltaMode } = event
+      const w = wheelRef.current
+      const clamp = (v) => Math.min(state.max, Math.max(state.min, v))
+
+     const isMouseNotch =
+        deltaMode !== 0 ||
+        Math.max(Math.abs(deltaX), Math.abs(deltaY)) >= MOUSE_NOTCH_MIN_DELTA
+      if (isMouseNotch) {
+        w.accum = 0
+        w.axis = null
+        const primary =
+          Math.abs(deltaX) > Math.abs(deltaY) ? deltaX : -deltaY
+        if (primary === 0) return
+        const next = clamp(state.value + Math.sign(primary) * state.step)
+        if (next !== state.value) state.onValueChange?.(next)
+        return
+      }
+
+      if (event.timeStamp - w.lastTime > WHEEL_GESTURE_GAP) {
+        w.accum = 0
+        w.axis = null
+      }
+      w.lastTime = event.timeStamp
+
+      if (w.axis === null) {
+        if (deltaX === 0 && deltaY === 0) return
+        w.axis = Math.abs(deltaX) > Math.abs(deltaY) ? 'x' : 'y'
+      }
+      w.accum += w.axis === 'x' ? deltaX : -deltaY
+
+      const steps = Math.trunc(w.accum / WHEEL_STEP_THRESHOLD)
+      if (steps === 0) return
+      w.accum -= steps * WHEEL_STEP_THRESHOLD
+
+      const next = clamp(state.value + steps * state.step)
       if (next !== state.value) state.onValueChange?.(next)
     }
 

package/src/icons/Sections2Icon.jsx

@@ -0,0 +1,11 @@
+export const Sections2Icon = ({ 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="M1.3335 10.3337H14.6668M1.3335 14.3337H14.6668M10.6668 1.66699H2.66683C1.93045 1.66699 1.3335 2.26395 1.3335 3.00033V5.00033C1.3335 5.73671 1.93045 6.33366 2.66683 6.33366H10.6668C11.4032 6.33366 12.0002 5.73671 12.0002 5.00033V3.00033C12.0002 2.26395 11.4032 1.66699 10.6668 1.66699Z"
+      stroke="currentColor"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+Sections2Icon.displayName = 'Sections2Icon'

package/src/icons.jsx

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