solid-baseui 0.1.0-alpha.0 → 0.1.0-alpha.2

package/dist/lib/server/number-field/index.js

@@ -1,15 +1,16 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { D as scrub, P as wheel, _ as inputPaste, b as keyboard, f as incrementPress, g as inputClear, h as inputChange, m as inputBlur, o as decrementPress } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { fieldValidityMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
 import { mergeStyles } from "../internals/mergeStyles.js";
-import { Dynamic, Portal, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { Portal, escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/number-field/utils/parse.ts
 var HAN_NUMERALS = "零〇一二三四五六七八九";
@@ -299,7 +300,7 @@ function NumberFieldRoot(props) {
 	let allowInputSync = true;
 	let lastChangedValue = null;
 	let hasPendingCommit = false;
-	const others = omit(allProps, "allowOutOfRange", "allowWheelScrub", "as", "class", "defaultValue", "disabled", "form", "format", "id", "inputRef", "largeStep", "locale", "max", "min", "name", "onChange", "onValueChange", "onValueCommitted", "readOnly", "ref", "required", "smallStep", "snapOnStep", "step", "style", "value");
+	const others = omit(allProps, "allowOutOfRange", "allowWheelScrub", "render", "class", "defaultValue", "disabled", "form", "format", "id", "inputRef", "largeStep", "locale", "max", "min", "name", "onChange", "onValueChange", "onValueCommitted", "readOnly", "ref", "required", "smallStep", "snapOnStep", "step", "style", "value");
 	const value = createMemo(() => controlled ? internalProps.value ?? null : uncontrolledValue());
 	const id = createMemo(() => internalProps.id ?? fallbackId);
 	const min = createMemo(() => internalProps.min);
@@ -324,6 +325,7 @@ function NumberFieldRoot(props) {
 		scrubbing: isScrubbing()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
 	function setInputValue(nextValue) {
@@ -383,13 +385,22 @@ function NumberFieldRoot(props) {
 		hasPendingCommit = false;
 		internalProps.onValueCommitted?.(nextValue, details);
 	}
+	function focusInput() {
+		const input = inputElement();
+		if (!input) return;
+		input.setSelectionRange(input.value.length, input.value.length);
+		input.focus();
+	}
 	function handleWheel(event) {
 		const input = inputElement();
 		if (event.ctrlKey || !input || input.ownerDocument.activeElement !== input) return;
+		const horizontal = Math.abs(event.deltaX) > Math.abs(event.deltaY);
+		const delta = event.shiftKey && horizontal ? event.deltaX : event.deltaY;
+		if (delta === 0 || !event.shiftKey && horizontal) return;
 		event.preventDefault();
 		allowInputSync = true;
 		if (incrementValue(getStepAmount(event), {
-			direction: event.deltaY > 0 ? -1 : 1,
+			direction: delta > 0 ? -1 : 1,
 			event,
 			reason: "wheel"
 		})) onValueCommitted(lastChangedValue, createGenericEventDetails(wheel, event));
@@ -434,6 +445,7 @@ function NumberFieldRoot(props) {
 			getStepAmount,
 			incrementValue,
 			inputElement,
+			focusInput,
 			setInputElement: (element) => setInputElementSignal(element),
 			allowInputSync: () => allowInputSync,
 			setAllowInputSync: (nextValue) => {
@@ -463,10 +475,7 @@ function NumberFieldRoot(props) {
 			onValueCommitted
 		},
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return [Render(mergeProps({
 				ref: [internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -497,15 +506,13 @@ function NumberFieldRoot(props) {
 /** Groups the input with the increment and decrement buttons. */
 function NumberFieldGroup(props) {
 	const context = useNumberFieldRootContext();
-	const others = omit(props, "as", "class", "style");
+	const others = omit(props, "render", "class", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "div";
-		},
+	return Render(mergeProps({
 		get ["class"]() {
 			return classValue();
 		},
@@ -662,6 +669,14 @@ function createPressAndHold(params) {
 		if (isTouchLikePointerType(pointerType)) return ignoreClick;
 		return event.detail !== 0;
 	}
+	createEffect(params.disabled, (disabled) => {
+		if (disabled) {
+			isPressed = false;
+			isTouchingButton = false;
+			pointerType = "";
+			stopAutoChange();
+		}
+	});
 	onCleanup(() => {
 		stopAutoChange();
 		unsubscribeFromGlobalPointerUp();
@@ -683,7 +698,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 	const allProps = props;
 	let firstTickCurrentValue = null;
 	let hasFirstTickCurrentValue = false;
-	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchEnd", "onTouchStart", "ref", "style");
+	const others = omit(allProps, "render", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchEnd", "onTouchStart", "ref", "style");
 	const state = context.state;
 	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
 	const disabled = createMemo(() => {
@@ -697,6 +712,7 @@ function NumberFieldStepperButton(props, isIncrement) {
 		disabled: disabled()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, buttonState()));
+	const Render = useRender(props, () => buttonState(), (props) => ssrElement("button", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, buttonState());
 		if (typeof external === "string") return `-webkit-user-select:none;user-select:none;${external}`;
@@ -757,26 +773,23 @@ function NumberFieldStepperButton(props, isIncrement) {
 		firstTickCurrentValue = commitInputValue(event);
 		hasFirstTickCurrentValue = true;
 		context.setLastChangedValue(null);
-		if (!isTouchLikePointerType(event.pointerType)) context.inputElement()?.focus();
+		if (!isTouchLikePointerType(event.pointerType)) context.focusInput();
 		pressAndHold.pointerHandlers.onPointerDown(event);
 	}
-	const onClick = composeEventHandlers(() => untrack(buttonDisabled) ? preventInteraction : void 0, () => internalProps.onClick, () => handleClick);
-	const onPointerDown = composeEventHandlers(() => untrack(buttonDisabled) ? preventInteraction : void 0, () => internalProps.onPointerDown, () => handlePointerDown);
-	const onMouseDown = composeEventHandlers(() => untrack(buttonDisabled) ? stopInteraction : void 0, () => internalProps.onMouseDown);
-	const onKeyDown = composeEventHandlers(() => untrack(buttonDisabled) ? preventFocusableDisabledKeyDown : void 0, () => internalProps.onKeyDown, () => untrack(nativeButton) ? void 0 : handleNonNativeKeyDown);
-	const onKeyUp = composeEventHandlers(() => untrack(buttonDisabled) ? stopInteraction : void 0, () => internalProps.onKeyUp, () => untrack(nativeButton) ? void 0 : handleNonNativeKeyUp);
-	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => pressAndHold.pointerHandlers.onPointerUp);
-	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => pressAndHold.pointerHandlers.onPointerMove);
-	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => pressAndHold.pointerHandlers.onTouchStart);
-	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => pressAndHold.pointerHandlers.onTouchEnd);
-	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => pressAndHold.pointerHandlers.onMouseEnter);
-	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => pressAndHold.pointerHandlers.onMouseLeave);
-	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => pressAndHold.pointerHandlers.onMouseUp);
+	const onClick = composeEventHandlers(liveEventHandler(() => untrack(buttonDisabled) ? preventInteraction : void 0), liveEventHandler(() => internalProps.onClick), handleClick);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => untrack(buttonDisabled) ? preventInteraction : void 0), liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => untrack(buttonDisabled) ? stopInteraction : void 0), liveEventHandler(() => internalProps.onMouseDown));
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => untrack(buttonDisabled) ? preventFocusableDisabledKeyDown : void 0), liveEventHandler(() => internalProps.onKeyDown), liveEventHandler(() => untrack(nativeButton) ? void 0 : handleNonNativeKeyDown));
+	const onKeyUp = composeEventHandlers(liveEventHandler(() => untrack(buttonDisabled) ? stopInteraction : void 0), liveEventHandler(() => internalProps.onKeyUp), liveEventHandler(() => untrack(nativeButton) ? void 0 : handleNonNativeKeyUp));
+	const onPointerUp = composeEventHandlers(liveEventHandler(() => internalProps.onPointerUp), liveEventHandler(() => pressAndHold.pointerHandlers.onPointerUp));
+	const onPointerMove = composeEventHandlers(liveEventHandler(() => internalProps.onPointerMove), liveEventHandler(() => pressAndHold.pointerHandlers.onPointerMove));
+	const onTouchStart = composeEventHandlers(liveEventHandler(() => internalProps.onTouchStart), liveEventHandler(() => pressAndHold.pointerHandlers.onTouchStart));
+	const onTouchEnd = composeEventHandlers(liveEventHandler(() => internalProps.onTouchEnd), liveEventHandler(() => pressAndHold.pointerHandlers.onTouchEnd));
+	const onMouseEnter = composeEventHandlers(liveEventHandler(() => internalProps.onMouseEnter), liveEventHandler(() => pressAndHold.pointerHandlers.onMouseEnter));
+	const onMouseLeave = composeEventHandlers(liveEventHandler(() => internalProps.onMouseLeave), liveEventHandler(() => pressAndHold.pointerHandlers.onMouseLeave));
+	const onMouseUp = composeEventHandlers(liveEventHandler(() => internalProps.onMouseUp), liveEventHandler(() => pressAndHold.pointerHandlers.onMouseUp));
 	onSettled(() => {});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "button";
-		},
+	return Render(mergeProps({
 		ref: [((value) => value), internalProps.ref],
 		get ["class"]() {
 			return classValue();
@@ -900,13 +913,13 @@ function NumberFieldInput(props) {
 	const internalProps = props;
 	const allProps = props;
 	const [element, setElement] = createSignal();
-	let hasTouchedInput = false;
 	let blockRevalidation = false;
 	let pendingCaret = null;
 	let previousValue = untrack(context.value);
-	const others = omit(allProps, "as", "aria-describedby", "aria-labelledby", "aria-roledescription", "class", "onBlur", "onFocus", "onInput", "onKeyDown", "onPaste", "ref", "style");
+	const others = omit(allProps, "render", "aria-describedby", "aria-labelledby", "aria-roledescription", "class", "onBlur", "onFocus", "onInput", "onKeyDown", "onPaste", "ref", "style");
 	const state = context.state;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("input", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId());
@@ -920,10 +933,6 @@ function NumberFieldInput(props) {
 	function handleFocus(event) {
 		if (event.defaultPrevented || state().disabled) return;
 		field.setFocused(true);
-		if (hasTouchedInput) return;
-		hasTouchedInput = true;
-		const length = event.currentTarget.value.length;
-		event.currentTarget.setSelectionRange(length, length);
 	}
 	function handleBlur(event) {
 		const currentState = state();
@@ -1062,11 +1071,11 @@ function NumberFieldInput(props) {
 			context.setInputValue(nextText);
 		}
 	}
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPaste = composeEventHandlers(() => internalProps.onPaste, () => handlePaste);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onInput = composeEventHandlers(liveEventHandler(() => internalProps.onInput), handleInput);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPaste = composeEventHandlers(liveEventHandler(() => internalProps.onPaste), handlePaste);
 	createEffect(() => ({
 		element: element(),
 		inputValue: context.inputValue()
@@ -1106,10 +1115,7 @@ function NumberFieldInput(props) {
 		field.registerFieldControl(context.controlSource, void 0);
 		labelable.registerControlId(context.controlSource, void 0);
 	});
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
+	return Render(mergeProps({
 		ref: [((input) => {
 			setElement(input);
 			context.setInputElement(input);
@@ -1155,7 +1161,7 @@ function NumberFieldInput(props) {
 			return ariaDescribedBy();
 		},
 		onFocus,
-		onBlur,
+		onBlur: (event) => untrack(() => onBlur.call(event.currentTarget, event)),
 		onInput,
 		onKeyDown,
 		onPaste
@@ -1217,8 +1223,9 @@ function NumberFieldScrubArea(props) {
 	const disabled = createMemo(() => root.state().disabled);
 	const readOnly = createMemo(() => root.state().readOnly);
 	const state = root.state;
-	const others = omit(allProps, "as", "class", "direction", "onPointerDown", "pixelSensitivity", "ref", "style", "teleportDistance");
+	const others = omit(allProps, "render", "class", "direction", "onPointerDown", "pixelSensitivity", "ref", "style", "teleportDistance");
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, state());
 		if (typeof external === "string") return `touch-action:none;-webkit-user-select:none;user-select:none;${external}`;
@@ -1365,7 +1372,7 @@ function NumberFieldScrubArea(props) {
 		setIsTouchInput(touchInput);
 		if (event.pointerType === "mouse") {
 			event.preventDefault();
-			root.inputElement()?.focus();
+			root.focusInput();
 		}
 		isPointerDown = true;
 		didMove = false;
@@ -1383,7 +1390,7 @@ function NumberFieldScrubArea(props) {
 			}
 		}
 	}
-	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	const onPointerDown = composeEventHandlers(liveEventHandler(() => internalProps.onPointerDown), handlePointerDown);
 	onCleanup(() => {
 		clearExitPointerLockTimer();
 		setCursorElement(void 0);
@@ -1405,10 +1412,7 @@ function NumberFieldScrubArea(props) {
 			setScrubAreaCursorElement: setCursorElement
 		},
 		get children() {
-			return Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "span";
-				},
+			return Render(mergeProps({
 				ref: [((scrubArea) => setElement(scrubArea)), internalProps.ref],
 				role: "presentation",
 				get ["class"]() {
@@ -1438,11 +1442,12 @@ function NumberFieldScrubAreaCursor(props) {
 	const root = useNumberFieldRootContext();
 	const scrubArea = useNumberFieldScrubAreaContext();
 	const internalProps = props;
-	const others = omit(props, "as", "class", "ref", "style");
+	const others = omit(props, "render", "class", "ref", "style");
 	const state = root.state;
 	const shouldRender = createMemo(() => scrubArea.isScrubbing() && !isWebKit() && !scrubArea.isTouchInput() && !scrubArea.isPointerLockDenied());
 	const ownerBody = () => scrubArea.scrubAreaElement()?.ownerDocument.body;
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, state, (props) => ssrElement("span", props, void 0, true));
 	const styleValue = createMemo(() => {
 		const external = resolveStyle(props.style, state());
 		if (typeof external === "string") return `position:fixed;top:0;left:0;pointer-events:none;${external}`;
@@ -1465,10 +1470,7 @@ function NumberFieldScrubAreaCursor(props) {
 		children: (body) => Portal({
 			mount: body,
 			get children() {
-				return Dynamic(mergeProps({
-					get component() {
-						return props.as ?? "span";
-					},
+				return Render(mergeProps({
 					ref: [((cursor) => scrubArea.setScrubAreaCursorElement(cursor)), internalProps.ref],
 					role: "presentation",
 					get ["class"]() {

package/dist/lib/server/otp-field/index.js

@@ -1,16 +1,17 @@
 import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { t as useRender } from "../useRender-CryVdCjs.js";
 import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
 import { _ as inputPaste, b as keyboard, g as inputClear, h as inputChange } from "../internals/reasons.js";
 import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
-import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { composeEventHandlers, liveEventHandler } from "../internals/composeEventHandlers.js";
 import { n as useDirection } from "../DirectionContext-YORWLF08.js";
 import { fieldValidityMapping } from "../internals/field-constants.js";
-import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
-import { n as useFormContext } from "../FormContext-pvESt85v.js";
-import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
-import { t as Separator } from "../Separator-vhhYxWGr.js";
-import { Dynamic, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { r as useFieldRootContext } from "../FieldRootContext-Bfpna6gA.js";
+import { n as useFormContext } from "../FormContext-CYwo_ZnB.js";
+import { r as useLabelableContext } from "../LabelableContext-BTeF0IWb.js";
+import { t as Separator } from "../Separator-DTvtnxzP.js";
+import { escape, memo, mergeProps, ssr, ssrAttribute, ssrElement, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
 import { createContext, createEffect, createMemo, createSignal, createUniqueId, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
 //#region src/otp-field/utils/otp.ts
 var OTP_VALIDATION_CONFIG = {
@@ -166,7 +167,7 @@ function OTPFieldRoot(props) {
 	let disposed = false;
 	let slotChangeQueued = false;
 	let valueEffectVersion = 0;
-	const others = omit(allProps, "aria-describedby", "aria-labelledby", "as", "autoComplete", "autoSubmit", "class", "defaultValue", "disabled", "form", "id", "inputMode", "length", "mask", "name", "normalizeValue", "onChange", "onValueChange", "onValueComplete", "onValueInvalid", "readOnly", "ref", "required", "style", "validationType", "value");
+	const others = omit(allProps, "aria-describedby", "aria-labelledby", "render", "autoComplete", "autoSubmit", "class", "defaultValue", "disabled", "form", "id", "inputMode", "length", "mask", "name", "normalizeValue", "onChange", "onValueChange", "onValueComplete", "onValueInvalid", "readOnly", "ref", "required", "style", "validationType", "value");
 	const length = createMemo(() => internalProps.length);
 	const validationType = createMemo(() => internalProps.validationType ?? "numeric");
 	const normalizeValue = () => internalProps.normalizeValue;
@@ -201,6 +202,7 @@ function OTPFieldRoot(props) {
 		value: value()
 	}));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("div", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), rootStateAttributesMapping));
 	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId() ?? fallbackAriaLabelledBy());
@@ -506,10 +508,7 @@ function OTPFieldRoot(props) {
 	return OTPFieldRootContext({
 		value: context,
 		get children() {
-			return [Dynamic(mergeProps({
-				get component() {
-					return props.as ?? "div";
-				},
+			return [Render(mergeProps({
 				ref: [((element) => setRootElement(element)), internalProps.ref],
 				get ["class"]() {
 					return classValue();
@@ -583,22 +582,23 @@ function OTPFieldInput(props) {
 	const direction = useDirection();
 	const registration = root.registerInput();
 	const internalProps = props;
-	const others = omit(props, "aria-label", "aria-labelledby", "as", "class", "defaultChecked", "defaultValue", "index", "onBlur", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPaste", "ref", "style");
+	const others = omit(props, "aria-label", "aria-labelledby", "render", "class", "defaultChecked", "defaultValue", "index", "onBlur", "onFocus", "onInput", "onKeyDown", "onMouseDown", "onPaste", "ref", "style");
 	const index = registration.index;
 	const slotValue = createMemo(() => root.value()[index()] ?? "");
 	const state = createMemo(() => getOTPFieldInputState(root.state(), slotValue(), index()));
 	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const Render = useRender(props, () => state(), (props) => ssrElement("input", props, void 0, true));
 	const styleValue = createMemo(() => resolveStyle(props.style, state()));
 	const stateAttributes = createMemo(() => getStateAttributesProps(state(), inputStateAttributesMapping));
 	const ariaLabel = createMemo(() => index() === 0 ? void 0 : internalProps["aria-label"]);
 	const inheritedLabel = createMemo(() => internalProps["aria-labelledby"] ?? root.inputAriaLabelledBy());
 	const [inputElement, setInputElement] = createSignal();
-	const onMouseDown = composeEventHandlers(() => internalProps.onMouseDown, () => handleMouseDown);
-	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
-	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
-	const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
-	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
-	const onPaste = composeEventHandlers(() => internalProps.onPaste, () => handlePaste);
+	const onMouseDown = composeEventHandlers(liveEventHandler(() => internalProps.onMouseDown), handleMouseDown);
+	const onFocus = composeEventHandlers(liveEventHandler(() => internalProps.onFocus), handleFocus);
+	const onBlur = composeEventHandlers(liveEventHandler(() => internalProps.onBlur), handleBlur);
+	const onInput = composeEventHandlers(liveEventHandler(() => internalProps.onInput), handleInput);
+	const onKeyDown = composeEventHandlers(liveEventHandler(() => internalProps.onKeyDown), handleKeyDown);
+	const onPaste = composeEventHandlers(liveEventHandler(() => internalProps.onPaste), handlePaste);
 	function handleMouseDown(event) {
 		if (event.defaultPrevented || root.disabled()) return;
 		event.preventDefault();
@@ -715,10 +715,7 @@ function OTPFieldInput(props) {
 		if (isDevelopment() && current.element && current.index === 0 && current.label != null && !current.element.labels?.length) console.warn("<OTPField.Input> ignores `aria-label` on the first input. Use a `<label>` or `<Field.Label>` to label the OTP field.");
 	});
 	onCleanup(registration.unregister);
-	return Dynamic(mergeProps({
-		get component() {
-			return props.as ?? "input";
-		},
+	return Render(mergeProps({
 		ref: [((element) => {
 			setInputElement(element);
 			registration.setElement(element);