@msviderok/base-ui-solid 1.0.0-beta.1

package/cjs/number-field/root/useNumberFieldButton.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNumberFieldButton = useNumberFieldButton;
+var _solidHelpers = require("../../solid-helpers");
+var _constants = require("../utils/constants");
+var _parse = require("../utils/parse");
+function useNumberFieldButton(params) {
+  const disabled = () => (0, _solidHelpers.access)(params.disabled);
+  const id = () => (0, _solidHelpers.access)(params.id);
+  const inputValue = () => (0, _solidHelpers.access)(params.inputValue);
+  const isIncrement = () => (0, _solidHelpers.access)(params.isIncrement);
+  const locale = () => (0, _solidHelpers.access)(params.locale);
+  const maxWithDefault = () => (0, _solidHelpers.access)(params.maxWithDefault);
+  const minWithDefault = () => (0, _solidHelpers.access)(params.minWithDefault);
+  const readOnly = () => (0, _solidHelpers.access)(params.readOnly);
+  const value = () => (0, _solidHelpers.access)(params.value);
+  let incrementDownCoordsRef = {
+    x: 0,
+    y: 0
+  };
+  let isTouchingButtonRef = false;
+  let ignoreClickRef = false;
+  let pointerTypeRef = '';
+  const isMin = () => value() != null && value() <= minWithDefault();
+  const isMax = () => value() != null && value() >= maxWithDefault();
+  const commitValue = nativeEvent => {
+    params.refs.allowInputSyncRef = true;
+
+    // The input may be dirty but not yet blurred, so the value won't have been committed.
+    const parsedValue = (0, _parse.parseNumber)(inputValue(), locale(), params.refs.formatOptionsRef);
+    if (parsedValue !== null) {
+      // The increment value function needs to know the current input value to increment it
+      // correctly.
+      params.refs.valueRef = parsedValue;
+      params.setValue(parsedValue, nativeEvent);
+    }
+  };
+  const props = {
+    // @ts-expect-error - disabled is not a valid attribute for HTMLProps
+    get disabled() {
+      return disabled() || (isIncrement() ? isMax() : isMin());
+    },
+    get 'aria-readonly'() {
+      return readOnly() || undefined;
+    },
+    get 'aria-label'() {
+      return isIncrement() ? 'Increase' : 'Decrease';
+    },
+    get 'aria-controls'() {
+      return id();
+    },
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    tabIndex: -1,
+    style: {
+      '--webkit-user-select': 'none',
+      'user-select': 'none'
+    },
+    onTouchStart() {
+      isTouchingButtonRef = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef = false;
+    },
+    onClick(event) {
+      const isDisabled = disabled() || readOnly() || (isIncrement() ? isMax() : isMin());
+      if (event.defaultPrevented || isDisabled || (
+      // If it's not a keyboard/virtual click, ignore.
+      pointerTypeRef === 'touch' ? ignoreClickRef : event.detail !== 0)) {
+        return;
+      }
+      commitValue(event);
+      const amount = params.getStepAmount(event) ?? _constants.DEFAULT_STEP;
+      params.incrementValue(amount, isIncrement() ? 1 : -1, undefined, event);
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      const isDisabled = disabled() || (isIncrement() ? isMax() : isMin());
+      if (event.defaultPrevented || readOnly() || !isMainButton || isDisabled) {
+        return;
+      }
+      pointerTypeRef = event.pointerType;
+      ignoreClickRef = false;
+      params.refs.isPressedRef = true;
+      incrementDownCoordsRef = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      commitValue(event);
+
+      // Note: "pen" is sometimes returned for mouse usage on Linux Chrome.
+      if (event.pointerType !== 'touch') {
+        event.preventDefault();
+        params.refs.inputRef?.focus();
+        params.startAutoChange(isIncrement(), event);
+      } else {
+        // We need to check if the pointerdown was intentional, and not the result of a scroll
+        // or pinch-zoom. In that case, we don't want to change the value.
+        params.intentionalTouchCheckTimeout.start(_constants.TOUCH_TIMEOUT, () => {
+          const moves = params.refs.movesAfterTouchRef;
+          params.refs.movesAfterTouchRef = 0;
+          if (moves != null && moves < _constants.MAX_POINTER_MOVES_AFTER_TOUCH) {
+            ignoreClickRef = true;
+            params.startAutoChange(isIncrement(), event);
+          } else {
+            params.stopAutoChange();
+          }
+        });
+      }
+    },
+    onPointerMove(event) {
+      const isDisabled = disabled() || readOnly() || (isIncrement() ? isMax() : isMin());
+      if (isDisabled || event.pointerType !== 'touch' || !params.refs.isPressedRef) {
+        return;
+      }
+      if (params.refs.movesAfterTouchRef != null) {
+        params.refs.movesAfterTouchRef += 1;
+      }
+      const {
+        x,
+        y
+      } = incrementDownCoordsRef;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+
+      // An alternative to this technique is to detect when the NumberField's parent container
+      // has been scrolled
+      if (dx ** 2 + dy ** 2 > _constants.SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
+        params.stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      const isDisabled = disabled() || readOnly() || (isIncrement() ? isMax() : isMin());
+      if (event.defaultPrevented || isDisabled || !params.refs.isPressedRef || isTouchingButtonRef) {
+        return;
+      }
+      params.startAutoChange(isIncrement(), event);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef) {
+        return;
+      }
+      params.stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef) {
+        return;
+      }
+      params.stopAutoChange();
+    }
+  };
+  return {
+    props
+  };
+}

package/cjs/number-field/scrub-area/NumberFieldScrubArea.d.ts

@@ -0,0 +1,30 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+/**
+ * An interactive area where the user can click and drag to change the field value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+export declare function NumberFieldScrubArea(componentProps: NumberFieldScrubArea.Props): import("solid-js").JSX.Element;
+export declare namespace NumberFieldScrubArea {
+  interface State extends NumberFieldRoot.State {}
+  interface Props extends BaseUIComponentProps<'span', State> {
+    /**
+     * Cursor movement direction in the scrub area.
+     * @default 'horizontal'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Determines how many pixels the cursor must move before the value changes.
+     * A higher value will make scrubbing less sensitive.
+     * @default 2
+     */
+    pixelSensitivity?: number;
+    /**
+     * If specified, determines the distance that the cursor may move from the center
+     * of the scrub area before it will loop back around.
+     */
+    teleportDistance?: number;
+  }
+}

package/cjs/number-field/scrub-area/NumberFieldScrubArea.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberFieldScrubArea = NumberFieldScrubArea;
+var _solidJs = require("solid-js");
+var _solidHelpers = require("../../solid-helpers");
+var _detectBrowser = require("../../utils/detectBrowser");
+var _owner = require("../../utils/owner");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
+var _constants = require("../utils/constants");
+var _getViewportRect = require("../utils/getViewportRect");
+var _styleHooks = require("../utils/styleHooks");
+var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewportResize");
+var _NumberFieldScrubAreaContext = require("./NumberFieldScrubAreaContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * An interactive area where the user can click and drag to change the field value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+function NumberFieldScrubArea(componentProps) {
+  const [, local, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, ['direction', 'pixelSensitivity', 'teleportDistance']);
+  const direction = () => local.direction ?? 'horizontal';
+  const pixelSensitivity = () => local.pixelSensitivity ?? 2;
+  const {
+    state
+  } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const {
+    isScrubbing,
+    setIsScrubbing,
+    disabled,
+    readOnly,
+    incrementValue,
+    getStepAmount,
+    refs: numberFieldRootRefs
+  } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const refs = {
+    scrubAreaCursorRef: null,
+    scrubAreaRef: null
+  };
+  let isScrubbingRef = false;
+  let virtualCursorCoords = {
+    x: 0,
+    y: 0
+  };
+  // TODO: this is needed to be a react-like ref due to it being mutated in the subscribeToVisualViewportResize
+  const visualScaleRef = {
+    current: 1
+  };
+  const [isTouchInput, setIsTouchInput] = (0, _solidJs.createSignal)(false);
+  const [isPointerLockDenied, setIsPointerLockDenied] = (0, _solidJs.createSignal)(false);
+  (0, _solidJs.createEffect)(() => {
+    if (!isScrubbing() || !refs.scrubAreaCursorRef) {
+      return;
+    }
+    (0, _subscribeToVisualViewportResize.subscribeToVisualViewportResize)(refs.scrubAreaCursorRef, visualScaleRef);
+  });
+  const updateCursorTransform = (x, y) => {
+    if (refs.scrubAreaCursorRef) {
+      refs.scrubAreaCursorRef.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
+    }
+  };
+  const onScrub = ({
+    movementX,
+    movementY
+  }) => {
+    const virtualCursor = refs.scrubAreaCursorRef;
+    const scrubAreaEl = refs.scrubAreaRef;
+    if (!virtualCursor || !scrubAreaEl) {
+      return;
+    }
+    const rect = (0, _getViewportRect.getViewportRect)(local.teleportDistance, scrubAreaEl);
+    const coords = virtualCursorCoords;
+    const newCoords = {
+      x: Math.round(coords.x + movementX),
+      y: Math.round(coords.y + movementY)
+    };
+    const cursorWidth = virtualCursor.offsetWidth;
+    const cursorHeight = virtualCursor.offsetHeight;
+    if (newCoords.x + cursorWidth / 2 < rect.x) {
+      newCoords.x = rect.width - cursorWidth / 2;
+    } else if (newCoords.x + cursorWidth / 2 > rect.width) {
+      newCoords.x = rect.x - cursorWidth / 2;
+    }
+    if (newCoords.y + cursorHeight / 2 < rect.y) {
+      newCoords.y = rect.height - cursorHeight / 2;
+    } else if (newCoords.y + cursorHeight / 2 > rect.height) {
+      newCoords.y = rect.y - cursorHeight / 2;
+    }
+    virtualCursorCoords = newCoords;
+    updateCursorTransform(newCoords.x, newCoords.y);
+  };
+  const onScrubbingChange = (scrubbingValue, {
+    clientX,
+    clientY
+  }) => {
+    setIsScrubbing(scrubbingValue);
+    const virtualCursor = refs.scrubAreaCursorRef;
+    if (!virtualCursor || !scrubbingValue) {
+      return;
+    }
+    const initialCoords = {
+      x: clientX - virtualCursor.offsetWidth / 2,
+      y: clientY - virtualCursor.offsetHeight / 2
+    };
+    virtualCursorCoords = initialCoords;
+    updateCursorTransform(initialCoords.x, initialCoords.y);
+  };
+  (0, _solidJs.createEffect)(function registerGlobalScrubbingEventListeners() {
+    if (!numberFieldRootRefs.inputRef || disabled() || readOnly()) {
+      return;
+    }
+    let cumulativeDelta = 0;
+    function handleScrubPointerUp(event) {
+      try {
+        // Avoid errors in testing environments.
+        (0, _owner.ownerDocument)(refs.scrubAreaRef).exitPointerLock();
+      } catch {
+        //
+      } finally {
+        isScrubbingRef = false;
+        onScrubbingChange(false, event);
+      }
+    }
+    function handleScrubPointerMove(event) {
+      if (!isScrubbingRef) {
+        return;
+      }
+
+      // Prevent text selection.
+      event.preventDefault();
+      onScrub(event);
+      const {
+        movementX,
+        movementY
+      } = event;
+      cumulativeDelta += direction() === 'vertical' ? movementY : movementX;
+      if (Math.abs(cumulativeDelta) >= pixelSensitivity()) {
+        cumulativeDelta = 0;
+        const dValue = direction() === 'vertical' ? -movementY : movementX;
+        incrementValue(dValue * (getStepAmount(event) ?? _constants.DEFAULT_STEP), 1);
+      }
+    }
+    const win = (0, _owner.ownerWindow)(numberFieldRootRefs.inputRef);
+    win.addEventListener('pointerup', handleScrubPointerUp, true);
+    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    (0, _solidJs.onCleanup)(() => {
+      win.removeEventListener('pointerup', handleScrubPointerUp, true);
+      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+    });
+  });
+
+  // Prevent scrolling using touch input when scrubbing.
+  (0, _solidJs.createEffect)(function registerScrubberTouchPreventListener() {
+    const element = refs.scrubAreaRef;
+    if (!element || disabled() || readOnly()) {
+      return;
+    }
+    function handleTouchStart(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+      }
+    }
+    element.addEventListener('touchstart', handleTouchStart);
+    (0, _solidJs.onCleanup)(() => {
+      element.removeEventListener('touchstart', handleTouchStart);
+    });
+  });
+  const defaultProps = {
+    role: 'presentation',
+    style: {
+      'touch-action': 'none',
+      '-webkit-user-select': 'none',
+      'user-select': 'none'
+    },
+    async onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly() || !isMainButton || disabled()) {
+        return;
+      }
+      const isTouch = event.pointerType === 'touch';
+      setIsTouchInput(isTouch);
+      if (event.pointerType === 'mouse') {
+        event.preventDefault();
+        numberFieldRootRefs.inputRef?.focus();
+      }
+      isScrubbingRef = true;
+      onScrubbingChange(true, event);
+
+      // WebKit causes significant layout shift with the native message, so we can't use it.
+      if (!isTouch && !_detectBrowser.isWebKit) {
+        try {
+          // Avoid non-deterministic errors in testing environments. This error sometimes
+          // appears:
+          // "The root document of this element is not valid for pointer lock."
+          await (0, _owner.ownerDocument)(refs.scrubAreaRef).body.requestPointerLock();
+          setIsPointerLockDenied(false);
+        } catch (error) {
+          setIsPointerLockDenied(true);
+        } finally {
+          onScrubbingChange(true, event);
+        }
+      }
+    }
+  };
+  const contextValue = {
+    isScrubbing,
+    isTouchInput,
+    isPointerLockDenied,
+    refs,
+    direction,
+    pixelSensitivity,
+    teleportDistance: () => local.teleportDistance
+  };
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    state,
+    ref: el => {
+      refs.scrubAreaRef = el;
+    },
+    props: [defaultProps, elementProps],
+    customStyleHookMapping: _styleHooks.styleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberFieldScrubAreaContext.NumberFieldScrubAreaContext.Provider, {
+    value: contextValue,
+    children: element()
+  });
+}

package/cjs/number-field/scrub-area/NumberFieldScrubAreaContext.d.ts

@@ -0,0 +1,15 @@
+import { type Accessor } from 'solid-js';
+export interface NumberFieldScrubAreaContext {
+  isScrubbing: Accessor<boolean>;
+  isTouchInput: Accessor<boolean>;
+  isPointerLockDenied: Accessor<boolean>;
+  refs: {
+    scrubAreaCursorRef: HTMLSpanElement | null | undefined;
+    scrubAreaRef: HTMLSpanElement | null | undefined;
+  };
+  direction: Accessor<'horizontal' | 'vertical'>;
+  pixelSensitivity: Accessor<number>;
+  teleportDistance: Accessor<number | undefined>;
+}
+export declare const NumberFieldScrubAreaContext: import("solid-js").Context<NumberFieldScrubAreaContext | undefined>;
+export declare function useNumberFieldScrubAreaContext(): NumberFieldScrubAreaContext;

package/cjs/number-field/scrub-area/NumberFieldScrubAreaContext.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberFieldScrubAreaContext = void 0;
+exports.useNumberFieldScrubAreaContext = useNumberFieldScrubAreaContext;
+var _solidJs = require("solid-js");
+const NumberFieldScrubAreaContext = exports.NumberFieldScrubAreaContext = (0, _solidJs.createContext)();
+function useNumberFieldScrubAreaContext() {
+  const context = (0, _solidJs.useContext)(NumberFieldScrubAreaContext);
+  if (context === undefined) {
+    throw new Error('Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.');
+  }
+  return context;
+}

package/cjs/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.d.ts

@@ -0,0 +1,42 @@
+export declare enum NumberFieldScrubAreaDataAttributes {
+  /**
+   * Present while scrubbing.
+   */
+  scrubbing = "data-scrubbing",
+  /**
+   * Present when the number field is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the number field is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Present when the number field is required.
+   */
+  required = "data-required",
+  /**
+   * Present when the number field is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the number field has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the number field's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the number field is filled (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the number field is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+}

package/cjs/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberFieldScrubAreaDataAttributes = void 0;
+let NumberFieldScrubAreaDataAttributes = exports.NumberFieldScrubAreaDataAttributes = /*#__PURE__*/function (NumberFieldScrubAreaDataAttributes) {
+  /**
+   * Present while scrubbing.
+   */
+  NumberFieldScrubAreaDataAttributes["scrubbing"] = "data-scrubbing";
+  /**
+   * Present when the number field is disabled.
+   */
+  NumberFieldScrubAreaDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the number field is readonly.
+   */
+  NumberFieldScrubAreaDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Present when the number field is required.
+   */
+  NumberFieldScrubAreaDataAttributes["required"] = "data-required";
+  /**
+   * Present when the number field is in valid state (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the number field has been touched (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the number field's value has changed (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the number field is filled (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the number field is focused (when wrapped in Field.Root).
+   */
+  NumberFieldScrubAreaDataAttributes["focused"] = "data-focused";
+  return NumberFieldScrubAreaDataAttributes;
+}({});

package/cjs/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -0,0 +1,16 @@
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+/**
+ * A custom element to display instead of the native cursor while using the scrub area.
+ * Renders a `<span>` element.
+ *
+ * This component uses the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API), which may prompt the browser to display a related notification. It is disabled
+ * in Safari to avoid a layout shift that this notification causes there.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+export declare function NumberFieldScrubAreaCursor(componentProps: NumberFieldScrubAreaCursor.Props): import("solid-js").JSX.Element;
+export declare namespace NumberFieldScrubAreaCursor {
+  interface State extends NumberFieldRoot.State {}
+  interface Props extends BaseUIComponentProps<'span', State> {}
+}

package/cjs/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberFieldScrubAreaCursor = NumberFieldScrubAreaCursor;
+var _solidJs = require("solid-js");
+var _web = require("solid-js/web");
+var _solidHelpers = require("../../solid-helpers");
+var _detectBrowser = require("../../utils/detectBrowser");
+var _owner = require("../../utils/owner");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
+var _NumberFieldScrubAreaContext = require("../scrub-area/NumberFieldScrubAreaContext");
+var _styleHooks = require("../utils/styleHooks");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A custom element to display instead of the native cursor while using the scrub area.
+ * Renders a `<span>` element.
+ *
+ * This component uses the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API), which may prompt the browser to display a related notification. It is disabled
+ * in Safari to avoid a layout shift that this notification causes there.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+function NumberFieldScrubAreaCursor(componentProps) {
+  const [,, elementProps] = (0, _solidHelpers.splitComponentProps)(componentProps, []);
+  const {
+    state
+  } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
+  const {
+    isScrubbing,
+    isTouchInput,
+    isPointerLockDenied,
+    refs
+  } = (0, _NumberFieldScrubAreaContext.useNumberFieldScrubAreaContext)();
+  const [domElement, setDomElement] = (0, _solidJs.createSignal)(null);
+  const shouldRender = () => isScrubbing() && !_detectBrowser.isWebKit && !isTouchInput() && !isPointerLockDenied();
+  const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
+    enabled: shouldRender,
+    state,
+    ref: el => {
+      refs.scrubAreaCursorRef = el;
+      setDomElement(el);
+    },
+    props: [{
+      role: 'presentation',
+      style: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        'pointer-events': 'none'
+      }
+    }, elementProps],
+    customStyleHookMapping: _styleHooks.styleHookMapping
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web.Portal, {
+    mount: (0, _owner.ownerDocument)(domElement()).body,
+    children: element()
+  });
+}

package/cjs/number-field/scrub-area-cursor/NumberFieldScrubAreaCursorDataAttributes.d.ts

@@ -0,0 +1,42 @@
+export declare enum NumberFieldScrubAreaCursorDataAttributes {
+  /**
+   * Present while scrubbing.
+   */
+  scrubbing = "data-scrubbing",
+  /**
+   * Present when the number field is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the number field is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Present when the number field is required.
+   */
+  required = "data-required",
+  /**
+   * Present when the number field is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the number field has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the number field's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the number field is filled (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the number field is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+}