@zag-js/number-input 1.34.1 → 1.35.0

package/dist/number-input.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
+declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/number-input.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber">;
+declare const parts: Record<"root" | "label" | "input" | "control" | "valueText" | "incrementTrigger" | "decrementTrigger" | "scrubber", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/number-input.anatomy.js

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.anatomy.ts
+var number_input_anatomy_exports = {};
+__export(number_input_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(number_input_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("numberInput").parts(
+  "root",
+  "label",
+  "input",
+  "control",
+  "valueText",
+  "incrementTrigger",
+  "decrementTrigger",
+  "scrubber"
+);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/number-input.anatomy.mjs

@@ -0,0 +1,17 @@
+// src/number-input.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("numberInput").parts(
+  "root",
+  "label",
+  "input",
+  "control",
+  "valueText",
+  "incrementTrigger",
+  "decrementTrigger",
+  "scrubber"
+);
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/number-input.connect.d.mts

@@ -0,0 +1,8 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { NumberInputService, NumberInputApi } from './number-input.types.mjs';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: NumberInputService, normalize: NormalizeProps<T>): NumberInputApi<T>;
+
+export { connect };

package/dist/number-input.connect.d.ts

@@ -0,0 +1,8 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { NumberInputService, NumberInputApi } from './number-input.types.js';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: NumberInputService, normalize: NormalizeProps<T>): NumberInputApi<T>;
+
+export { connect };

package/dist/number-input.connect.js

@@ -0,0 +1,308 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.connect.ts
+var number_input_connect_exports = {};
+__export(number_input_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(number_input_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_cursor = require("./cursor.cjs");
+var import_number_input = require("./number-input.anatomy.cjs");
+var dom = __toESM(require("./number-input.dom.cjs"));
+function connect(service, normalize) {
+  const { state, send, prop, scope, computed } = service;
+  const focused = state.hasTag("focus");
+  const disabled = computed("isDisabled");
+  const readOnly = !!prop("readOnly");
+  const required = !!prop("required");
+  const scrubbing = state.matches("scrubbing");
+  const empty = computed("isValueEmpty");
+  const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
+  const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
+  const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
+  const translations = prop("translations");
+  return {
+    focused,
+    invalid,
+    empty,
+    value: computed("formattedValue"),
+    valueAsNumber: computed("valueAsNumber"),
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    clearValue() {
+      send({ type: "VALUE.CLEAR" });
+    },
+    increment() {
+      send({ type: "VALUE.INCREMENT" });
+    },
+    decrement() {
+      send({ type: "VALUE.DECREMENT" });
+    },
+    setToMax() {
+      send({ type: "VALUE.SET", value: prop("max") });
+    },
+    setToMin() {
+      send({ type: "VALUE.SET", value: prop("min") });
+    },
+    focus() {
+      dom.getInputEl(scope)?.focus();
+    },
+    getRootProps() {
+      return normalize.element({
+        id: dom.getRootId(scope),
+        ...import_number_input.parts.root.attrs,
+        dir: prop("dir"),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...import_number_input.parts.label.attrs,
+        dir: prop("dir"),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-required": (0, import_dom_query.dataAttr)(required),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        id: dom.getLabelId(scope),
+        htmlFor: dom.getInputId(scope),
+        onClick() {
+          (0, import_dom_query.raf)(() => {
+            (0, import_dom_query.setCaretToEnd)(dom.getInputEl(scope));
+          });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...import_number_input.parts.control.attrs,
+        dir: prop("dir"),
+        role: "group",
+        "aria-disabled": disabled,
+        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid)
+      });
+    },
+    getValueTextProps() {
+      return normalize.element({
+        ...import_number_input.parts.valueText.attrs,
+        dir: prop("dir"),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        "data-focus": (0, import_dom_query.dataAttr)(focused),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...import_number_input.parts.input.attrs,
+        dir: prop("dir"),
+        name: prop("name"),
+        form: prop("form"),
+        id: dom.getInputId(scope),
+        role: "spinbutton",
+        defaultValue: computed("formattedValue"),
+        pattern: prop("formatOptions") ? void 0 : prop("pattern"),
+        inputMode: prop("inputMode"),
+        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
+        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
+        disabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        readOnly,
+        required: prop("required"),
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false",
+        type: "text",
+        "aria-roledescription": "numberfield",
+        "aria-valuemin": prop("min"),
+        "aria-valuemax": prop("max"),
+        "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
+        "aria-valuetext": computed("valueText"),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        onFocus() {
+          send({ type: "INPUT.FOCUS" });
+        },
+        onBlur() {
+          send({ type: "INPUT.BLUR" });
+        },
+        onInput(event) {
+          const selection = (0, import_cursor.recordCursor)(event.currentTarget, scope);
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+        },
+        onBeforeInput(event) {
+          try {
+            const { selectionStart, selectionEnd, value } = event.currentTarget;
+            const nextValue = value.slice(0, selectionStart) + (event.data ?? "") + value.slice(selectionEnd);
+            const isValid = computed("parser").isValidPartialNumber(nextValue);
+            if (!isValid) {
+              event.preventDefault();
+            }
+          } catch {
+          }
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (readOnly) return;
+          if ((0, import_dom_query.isComposingEvent)(event)) return;
+          const step = (0, import_dom_query.getEventStep)(event) * prop("step");
+          const keyMap = {
+            ArrowUp() {
+              send({ type: "INPUT.ARROW_UP", step });
+              event.preventDefault();
+            },
+            ArrowDown() {
+              send({ type: "INPUT.ARROW_DOWN", step });
+              event.preventDefault();
+            },
+            Home() {
+              if ((0, import_dom_query.isModifierKey)(event)) return;
+              send({ type: "INPUT.HOME" });
+              event.preventDefault();
+            },
+            End() {
+              if ((0, import_dom_query.isModifierKey)(event)) return;
+              send({ type: "INPUT.END" });
+              event.preventDefault();
+            },
+            Enter(event2) {
+              const selection = (0, import_cursor.recordCursor)(event2.currentTarget, scope);
+              send({ type: "INPUT.ENTER", selection });
+            }
+          };
+          const exec = keyMap[event.key];
+          exec?.(event);
+        }
+      });
+    },
+    getDecrementTriggerProps() {
+      return normalize.button({
+        ...import_number_input.parts.decrementTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getDecrementTriggerId(scope),
+        disabled: isDecrementDisabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(isDecrementDisabled),
+        "aria-label": translations.decrementLabel,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": dom.getInputId(scope),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        onPointerDown(event) {
+          if (isDecrementDisabled) return;
+          if (!(0, import_dom_query.isLeftClick)(event)) return;
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          if (event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          if (event.pointerType === "touch") {
+            event.currentTarget?.focus({ preventScroll: true });
+          }
+        },
+        onPointerUp(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+        },
+        onPointerLeave() {
+          if (isDecrementDisabled) return;
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+        }
+      });
+    },
+    getIncrementTriggerProps() {
+      return normalize.button({
+        ...import_number_input.parts.incrementTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getIncrementTriggerId(scope),
+        disabled: isIncrementDisabled,
+        "data-disabled": (0, import_dom_query.dataAttr)(isIncrementDisabled),
+        "aria-label": translations.incrementLabel,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": dom.getInputId(scope),
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        onPointerDown(event) {
+          if (isIncrementDisabled || !(0, import_dom_query.isLeftClick)(event)) return;
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          if (event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          if (event.pointerType === "touch") {
+            event.currentTarget?.focus({ preventScroll: true });
+          }
+        },
+        onPointerUp(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+        },
+        onPointerLeave(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+        }
+      });
+    },
+    getScrubberProps() {
+      return normalize.element({
+        ...import_number_input.parts.scrubber.attrs,
+        dir: prop("dir"),
+        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
+        id: dom.getScrubberId(scope),
+        role: "presentation",
+        "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
+        onMouseDown(event) {
+          if (disabled) return;
+          if (!(0, import_dom_query.isLeftClick)(event)) return;
+          const point = (0, import_dom_query.getEventPoint)(event);
+          const win = (0, import_dom_query.getWindow)(event.currentTarget);
+          const dpr = win.devicePixelRatio;
+          point.x = point.x - (0, import_utils.roundToDpr)(7.5, dpr);
+          point.y = point.y - (0, import_utils.roundToDpr)(7.5, dpr);
+          send({ type: "SCRUBBER.PRESS_DOWN", point });
+          event.preventDefault();
+          (0, import_dom_query.raf)(() => {
+            (0, import_dom_query.setCaretToEnd)(dom.getInputEl(scope));
+          });
+        },
+        style: {
+          cursor: disabled ? void 0 : "ew-resize"
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/number-input.connect.mjs

@@ -0,0 +1,284 @@
+// src/number-input.connect.ts
+import {
+  ariaAttr,
+  dataAttr,
+  getEventPoint,
+  getEventStep,
+  getWindow,
+  isComposingEvent,
+  isLeftClick,
+  isModifierKey,
+  raf,
+  setCaretToEnd
+} from "@zag-js/dom-query";
+import { roundToDpr } from "@zag-js/utils";
+import { recordCursor } from "./cursor.mjs";
+import { parts } from "./number-input.anatomy.mjs";
+import * as dom from "./number-input.dom.mjs";
+function connect(service, normalize) {
+  const { state, send, prop, scope, computed } = service;
+  const focused = state.hasTag("focus");
+  const disabled = computed("isDisabled");
+  const readOnly = !!prop("readOnly");
+  const required = !!prop("required");
+  const scrubbing = state.matches("scrubbing");
+  const empty = computed("isValueEmpty");
+  const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
+  const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
+  const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
+  const translations = prop("translations");
+  return {
+    focused,
+    invalid,
+    empty,
+    value: computed("formattedValue"),
+    valueAsNumber: computed("valueAsNumber"),
+    setValue(value) {
+      send({ type: "VALUE.SET", value });
+    },
+    clearValue() {
+      send({ type: "VALUE.CLEAR" });
+    },
+    increment() {
+      send({ type: "VALUE.INCREMENT" });
+    },
+    decrement() {
+      send({ type: "VALUE.DECREMENT" });
+    },
+    setToMax() {
+      send({ type: "VALUE.SET", value: prop("max") });
+    },
+    setToMin() {
+      send({ type: "VALUE.SET", value: prop("min") });
+    },
+    focus() {
+      dom.getInputEl(scope)?.focus();
+    },
+    getRootProps() {
+      return normalize.element({
+        id: dom.getRootId(scope),
+        ...parts.root.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-focus": dataAttr(focused),
+        "data-invalid": dataAttr(invalid),
+        "data-scrubbing": dataAttr(scrubbing)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-focus": dataAttr(focused),
+        "data-invalid": dataAttr(invalid),
+        "data-required": dataAttr(required),
+        "data-scrubbing": dataAttr(scrubbing),
+        id: dom.getLabelId(scope),
+        htmlFor: dom.getInputId(scope),
+        onClick() {
+          raf(() => {
+            setCaretToEnd(dom.getInputEl(scope));
+          });
+        }
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: prop("dir"),
+        role: "group",
+        "aria-disabled": disabled,
+        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-scrubbing": dataAttr(scrubbing),
+        "aria-invalid": ariaAttr(invalid)
+      });
+    },
+    getValueTextProps() {
+      return normalize.element({
+        ...parts.valueText.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(invalid),
+        "data-focus": dataAttr(focused),
+        "data-scrubbing": dataAttr(scrubbing)
+      });
+    },
+    getInputProps() {
+      return normalize.input({
+        ...parts.input.attrs,
+        dir: prop("dir"),
+        name: prop("name"),
+        form: prop("form"),
+        id: dom.getInputId(scope),
+        role: "spinbutton",
+        defaultValue: computed("formattedValue"),
+        pattern: prop("formatOptions") ? void 0 : prop("pattern"),
+        inputMode: prop("inputMode"),
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        disabled,
+        "data-disabled": dataAttr(disabled),
+        readOnly,
+        required: prop("required"),
+        autoComplete: "off",
+        autoCorrect: "off",
+        spellCheck: "false",
+        type: "text",
+        "aria-roledescription": "numberfield",
+        "aria-valuemin": prop("min"),
+        "aria-valuemax": prop("max"),
+        "aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
+        "aria-valuetext": computed("valueText"),
+        "data-scrubbing": dataAttr(scrubbing),
+        onFocus() {
+          send({ type: "INPUT.FOCUS" });
+        },
+        onBlur() {
+          send({ type: "INPUT.BLUR" });
+        },
+        onInput(event) {
+          const selection = recordCursor(event.currentTarget, scope);
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+        },
+        onBeforeInput(event) {
+          try {
+            const { selectionStart, selectionEnd, value } = event.currentTarget;
+            const nextValue = value.slice(0, selectionStart) + (event.data ?? "") + value.slice(selectionEnd);
+            const isValid = computed("parser").isValidPartialNumber(nextValue);
+            if (!isValid) {
+              event.preventDefault();
+            }
+          } catch {
+          }
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (readOnly) return;
+          if (isComposingEvent(event)) return;
+          const step = getEventStep(event) * prop("step");
+          const keyMap = {
+            ArrowUp() {
+              send({ type: "INPUT.ARROW_UP", step });
+              event.preventDefault();
+            },
+            ArrowDown() {
+              send({ type: "INPUT.ARROW_DOWN", step });
+              event.preventDefault();
+            },
+            Home() {
+              if (isModifierKey(event)) return;
+              send({ type: "INPUT.HOME" });
+              event.preventDefault();
+            },
+            End() {
+              if (isModifierKey(event)) return;
+              send({ type: "INPUT.END" });
+              event.preventDefault();
+            },
+            Enter(event2) {
+              const selection = recordCursor(event2.currentTarget, scope);
+              send({ type: "INPUT.ENTER", selection });
+            }
+          };
+          const exec = keyMap[event.key];
+          exec?.(event);
+        }
+      });
+    },
+    getDecrementTriggerProps() {
+      return normalize.button({
+        ...parts.decrementTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getDecrementTriggerId(scope),
+        disabled: isDecrementDisabled,
+        "data-disabled": dataAttr(isDecrementDisabled),
+        "aria-label": translations.decrementLabel,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": dom.getInputId(scope),
+        "data-scrubbing": dataAttr(scrubbing),
+        onPointerDown(event) {
+          if (isDecrementDisabled) return;
+          if (!isLeftClick(event)) return;
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          if (event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          if (event.pointerType === "touch") {
+            event.currentTarget?.focus({ preventScroll: true });
+          }
+        },
+        onPointerUp(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+        },
+        onPointerLeave() {
+          if (isDecrementDisabled) return;
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+        }
+      });
+    },
+    getIncrementTriggerProps() {
+      return normalize.button({
+        ...parts.incrementTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getIncrementTriggerId(scope),
+        disabled: isIncrementDisabled,
+        "data-disabled": dataAttr(isIncrementDisabled),
+        "aria-label": translations.incrementLabel,
+        type: "button",
+        tabIndex: -1,
+        "aria-controls": dom.getInputId(scope),
+        "data-scrubbing": dataAttr(scrubbing),
+        onPointerDown(event) {
+          if (isIncrementDisabled || !isLeftClick(event)) return;
+          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          if (event.pointerType === "mouse") {
+            event.preventDefault();
+          }
+          if (event.pointerType === "touch") {
+            event.currentTarget?.focus({ preventScroll: true });
+          }
+        },
+        onPointerUp(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+        },
+        onPointerLeave(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+        }
+      });
+    },
+    getScrubberProps() {
+      return normalize.element({
+        ...parts.scrubber.attrs,
+        dir: prop("dir"),
+        "data-disabled": dataAttr(disabled),
+        id: dom.getScrubberId(scope),
+        role: "presentation",
+        "data-scrubbing": dataAttr(scrubbing),
+        onMouseDown(event) {
+          if (disabled) return;
+          if (!isLeftClick(event)) return;
+          const point = getEventPoint(event);
+          const win = getWindow(event.currentTarget);
+          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();
+          raf(() => {
+            setCaretToEnd(dom.getInputEl(scope));
+          });
+        },
+        style: {
+          cursor: disabled ? void 0 : "ew-resize"
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};