refactor: streamline number utils

examples/lit-ts/package.json

@@ -51,8 +51,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/next-ts/package.json

@@ -51,8 +51,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/nuxt-ts/package.json

@@ -48,8 +48,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/preact-ts/package.json

@@ -47,8 +47,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/react-19/package.json

@@ -48,8 +48,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/solid-ts/package.json

@@ -51,8 +51,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/svelte-ts/package.json

@@ -49,8 +49,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

examples/vanilla-ts/package.json

@@ -52,8 +52,6 @@
     "@zag-js/live-region": "workspace:*",
     "@zag-js/menu": "workspace:*",
     "@zag-js/number-input": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/pagination": "workspace:*",
     "@zag-js/pin-input": "workspace:*",
     "@zag-js/popover": "workspace:*",

packages/machines/angle-slider/package.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/core": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",

packages/machines/angle-slider/src/angle-slider.machine.ts

@@ -1,9 +1,8 @@
 import { createMachine } from "@zag-js/core"
 import { raf, trackPointerMove } from "@zag-js/dom-query"
-import { snapValueToStep } from "@zag-js/numeric-range"
 import { createRect, getPointAngle } from "@zag-js/rect-utils"
 import type { Point } from "@zag-js/types"
-import { compact } from "@zag-js/utils"
+import { compact, snapValueToStep } from "@zag-js/utils"
 import { dom } from "./angle-slider.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./angle-slider.types"
 

packages/machines/floating-panel/package.json

@@ -40,7 +40,6 @@
     "@zag-js/store": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/rect-utils": "workspace:*",
     "@zag-js/popper": "workspace:*",
     "@zag-js/types": "workspace:*"

packages/machines/number-input/package.json

@@ -31,7 +31,6 @@
     "@zag-js/core": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/utils": "workspace:*"
   },

packages/machines/number-input/src/number-input.connect.ts

@@ -3,12 +3,13 @@ import {
   dataAttr,
   getEventPoint,
   getEventStep,
+  getWindow,
   isComposingEvent,
   isLeftClick,
   isModifierKey,
 } from "@zag-js/dom-query"
-import { roundToDevicePixel } from "@zag-js/number-utils"
 import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
+import { roundToDpr } from "@zag-js/utils"
 import { parts } from "./number-input.anatomy"
 import { dom } from "./number-input.dom"
 import type { MachineApi, Send, State } from "./number-input.types"
@@ -258,9 +259,11 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
           if (disabled) return
 
           const point = getEventPoint(event)
+          const win = getWindow(event.currentTarget)
 
-          point.x = point.x - roundToDevicePixel(7.5)
-          point.y = point.y - roundToDevicePixel(7.5)
+          const dpr = win.devicePixelRatio
+          point.x = point.x - roundToDpr(7.5, dpr)
+          point.y = point.y - roundToDpr(7.5, dpr)
 
           send({ type: "SCRUBBER.PRESS_DOWN", point })
           event.preventDefault()

packages/machines/number-input/src/number-input.dom.ts

@@ -1,5 +1,5 @@
 import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query"
-import { roundToDevicePixel, wrap } from "@zag-js/number-utils"
+import { roundToDpr, wrap } from "@zag-js/utils"
 import type { MachineContext as Ctx } from "./number-input.types"
 
 export const dom = createScope({
@@ -59,8 +59,9 @@ export const dom = createScope({
   },
 
   getMousemoveValue(ctx: Ctx, event: MouseEvent) {
-    const x = roundToDevicePixel(event.movementX)
-    const y = roundToDevicePixel(event.movementY)
+    const win = dom.getWin(ctx)
+    const x = roundToDpr(event.movementX, win.devicePixelRatio)
+    const y = roundToDpr(event.movementY, win.devicePixelRatio)
 
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null
 
@@ -72,9 +73,8 @@ export const dom = createScope({
       y: ctx.scrubberCursorPoint!.y + y,
     }
 
-    const win = dom.getWin(ctx)
     const width = win.innerWidth
-    const half = roundToDevicePixel(7.5)
+    const half = roundToDpr(7.5, win.devicePixelRatio)
     point.x = wrap(point.x + half, width) - half
 
     return { hint, point }

packages/machines/number-input/src/number-input.machine.ts

@@ -1,8 +1,17 @@
 import { choose, createMachine, guards } from "@zag-js/core"
 import { addDomEvent, isSafari, observeAttributes, raf, requestPointerLock } from "@zag-js/dom-query"
 import { setElementValue, trackFormControl } from "@zag-js/form-utils"
-import { clamp, decrement, increment, isAtMax, isAtMin, isWithinRange } from "@zag-js/number-utils"
-import { callAll, compact, isEqual } from "@zag-js/utils"
+import {
+  callAll,
+  clampValue,
+  compact,
+  decrementValue,
+  incrementValue,
+  isEqual,
+  isValueAtMax,
+  isValueAtMin,
+  isValueWithinRange,
+} from "@zag-js/utils"
 import { recordCursor, restoreCursor } from "./cursor"
 import { dom } from "./number-input.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types"
@@ -49,9 +58,9 @@ export function machine(userContext: UserDefinedContext) {
         isRtl: (ctx) => ctx.dir === "rtl",
         valueAsNumber: (ctx) => parseValue(ctx, ctx.value),
         formattedValue: (ctx) => formatValue(ctx, ctx.valueAsNumber),
-        isAtMin: (ctx) => isAtMin(ctx.valueAsNumber, ctx),
-        isAtMax: (ctx) => isAtMax(ctx.valueAsNumber, ctx),
-        isOutOfRange: (ctx) => !isWithinRange(ctx.valueAsNumber, ctx),
+        isAtMin: (ctx) => isValueAtMin(ctx.valueAsNumber, ctx.min),
+        isAtMax: (ctx) => isValueAtMax(ctx.valueAsNumber, ctx.max),
+        isOutOfRange: (ctx) => !isValueWithinRange(ctx.valueAsNumber, ctx.min, ctx.max),
         isValueEmpty: (ctx) => ctx.value === "",
         isDisabled: (ctx) => !!ctx.disabled || ctx.fieldsetDisabled,
         canIncrement: (ctx) => ctx.allowOverflow || !ctx.isAtMax,
@@ -312,22 +321,22 @@ export function machine(userContext: UserDefinedContext) {
           raf(() => inputEl?.focus({ preventScroll: true }))
         },
         increment(ctx, evt) {
-          const nextValue = increment(ctx.valueAsNumber, evt.step ?? ctx.step)
-          const value = formatValue(ctx, clamp(nextValue, ctx))
+          const nextValue = incrementValue(ctx.valueAsNumber, evt.step ?? ctx.step)
+          const value = formatValue(ctx, clampValue(nextValue, ctx.min, ctx.max))
           set.value(ctx, value)
         },
         decrement(ctx, evt) {
-          const nextValue = decrement(ctx.valueAsNumber, evt.step ?? ctx.step)
-          const value = formatValue(ctx, clamp(nextValue, ctx))
+          const nextValue = decrementValue(ctx.valueAsNumber, evt.step ?? ctx.step)
+          const value = formatValue(ctx, clampValue(nextValue, ctx.min, ctx.max))
           set.value(ctx, value)
         },
         setClampedValue(ctx) {
-          const nextValue = clamp(ctx.valueAsNumber, ctx)
+          const nextValue = clampValue(ctx.valueAsNumber, ctx.min, ctx.max)
           set.value(ctx, formatValue(ctx, nextValue))
         },
         setRawValue(ctx, evt) {
           const parsedValue = parseValue(ctx, evt.value)
-          const value = formatValue(ctx, clamp(parsedValue, ctx))
+          const value = formatValue(ctx, clampValue(parsedValue, ctx.min, ctx.max))
           set.value(ctx, value)
         },
         setValue(ctx, evt) {

packages/machines/slider/package.json

@@ -32,7 +32,6 @@
     "@zag-js/form-utils": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "@zag-js/numeric-range": "workspace:*",
     "@zag-js/element-size": "workspace:*",
     "@zag-js/types": "workspace:*"
   },

packages/machines/slider/src/slider.connect.ts

@@ -7,8 +7,8 @@ import {
   isLeftClick,
   isModifierKey,
 } from "@zag-js/dom-query"
-import { getPercentValue, getValuePercent } from "@zag-js/numeric-range"
 import type { EventKeyMap, NormalizeProps, PropTypes } from "@zag-js/types"
+import { getPercentValue, getValuePercent } from "@zag-js/utils"
 import { parts } from "./slider.anatomy"
 import { dom } from "./slider.dom"
 import type { MachineApi, Send, State } from "./slider.types"

packages/machines/slider/src/slider.dom.ts

@@ -1,7 +1,7 @@
 import { createScope, getRelativePoint, queryAll } from "@zag-js/dom-query"
 import { dispatchInputValueEvent } from "@zag-js/form-utils"
-import { getPercentValue } from "@zag-js/numeric-range"
 import type { Point } from "@zag-js/types"
+import { getPercentValue } from "@zag-js/utils"
 import { styleGetterFns } from "./slider.style"
 import type { MachineContext as Ctx } from "./slider.types"
 

packages/machines/slider/src/slider.machine.ts

@@ -2,8 +2,7 @@ import { createMachine } from "@zag-js/core"
 import { raf, trackPointerMove } from "@zag-js/dom-query"
 import { trackElementsSize, type ElementSize } from "@zag-js/element-size"
 import { trackFormControl } from "@zag-js/form-utils"
-import { getValuePercent } from "@zag-js/numeric-range"
-import { compact, isEqual } from "@zag-js/utils"
+import { compact, getValuePercent, isEqual } from "@zag-js/utils"
 import { dom } from "./slider.dom"
 import type { MachineContext, MachineState, UserDefinedContext } from "./slider.types"
 import {

packages/machines/slider/src/slider.style.ts

@@ -1,5 +1,5 @@
-import { getValuePercent, getValueTransformer } from "@zag-js/numeric-range"
 import type { Style } from "@zag-js/types"
+import { getValuePercent, getValueTransformer } from "@zag-js/utils"
 import type { MachineContext as Ctx, SharedContext } from "./slider.types"
 
 /* -----------------------------------------------------------------------------

packages/machines/slider/src/slider.utils.ts

@@ -5,7 +5,7 @@ import {
   getPreviousStepValue,
   getValueRanges,
   snapValueToStep,
-} from "@zag-js/numeric-range"
+} from "@zag-js/utils"
 import type { MachineContext as Ctx } from "./slider.types"
 
 export function normalizeValues(ctx: Ctx, nextValues: number[]) {
@@ -14,10 +14,6 @@ export function normalizeValues(ctx: Ctx, nextValues: number[]) {
   })
 }
 
-export function clampPercent(percent: number) {
-  return clampValue(percent, 0, 1)
-}
-
 export function getRangeAtIndex(ctx: Ctx, index: number) {
   return getValueRanges(ctx.value, ctx.min, ctx.max, ctx.minStepsBetweenThumbs)[index]
 }

packages/machines/splitter/package.json

@@ -31,7 +31,6 @@
     "@zag-js/core": "workspace:*",
     "@zag-js/types": "workspace:*",
     "@zag-js/dom-query": "workspace:*",
-    "@zag-js/number-utils": "workspace:*",
     "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {

packages/utilities/color-utils/package.json

@@ -31,7 +31,7 @@
   },
   "clean-package": "../../../clean-package.config.json",
   "dependencies": {
-    "@zag-js/numeric-range": "workspace:*"
+    "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

packages/utilities/color-utils/src/color.ts

@@ -1,4 +1,4 @@
-import { clampValue, getPercentValue, getValuePercent, snapValueToStep } from "@zag-js/numeric-range"
+import { clampValue, getPercentValue, getValuePercent, snapValueToStep } from "@zag-js/utils"
 import type {
   Color2DAxes,
   ColorAxes,

packages/utilities/color-utils/src/hsb-color.ts

@@ -1,4 +1,4 @@
-import { clampValue, mod, toFixedNumber } from "@zag-js/numeric-range"
+import { clampValue, mod, toFixedNumber } from "@zag-js/utils"
 import { Color } from "./color"
 import { HSLColor } from "./hsl-color"
 import { RGBColor } from "./rgb-color"

packages/utilities/color-utils/src/hsl-color.ts

@@ -1,4 +1,4 @@
-import { clampValue, mod, toFixedNumber } from "@zag-js/numeric-range"
+import { clampValue, mod, toFixedNumber } from "@zag-js/utils"
 import { Color } from "./color"
 import { HSBColor } from "./hsb-color"
 import { RGBColor } from "./rgb-color"

packages/utilities/color-utils/src/rgb-color.ts

@@ -1,4 +1,4 @@
-import { clampValue, toFixedNumber } from "@zag-js/numeric-range"
+import { clampValue, toFixedNumber } from "@zag-js/utils"
 import { Color } from "./color"
 import { HSBColor } from "./hsb-color"
 import { HSLColor } from "./hsl-color"

packages/utilities/core/src/guard.ts

@@ -1,11 +1,13 @@
+type AnyFunction = (...args: any[]) => any
+
 export const isDev = () => process.env.NODE_ENV !== "production"
 export const isArray = (v: any): v is any[] => Array.isArray(v)
 export const isBoolean = (v: any): v is boolean => v === true || v === false
 export const isObjectLike = (v: any): v is Record<string, any> => v != null && typeof v === "object"
 export const isObject = (v: any): v is Record<string, any> => isObjectLike(v) && !isArray(v)
 export const isNumber = (v: any): v is number => typeof v === "number" && !Number.isNaN(v)
 export const isString = (v: any): v is string => typeof v === "string"
-export const isFunction = (v: any): v is Function => typeof v === "function"
+export const isFunction = (v: any): v is AnyFunction => typeof v === "function"
 export const isNull = (v: any): v is null | undefined => v == null
 
 export const hasProp = <T extends string>(obj: any, prop: T): obj is Record<T, any> =>

packages/utilities/core/src/index.ts

@@ -2,6 +2,6 @@ export * from "./array"
 export * from "./equal"
 export * from "./functions"
 export * from "./guard"
+export * from "./number"
 export * from "./object"
-export * from "./split-props"
 export * from "./warning"