@mantine-vue/core 2.4.0 → 3.0.0

package/esm/index.mjs

@@ -3748,6 +3748,10 @@ var AngleSlider = withBoxProps(defineComponent({
 			type: Number,
 			default: void 0
 		},
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
 			default: void 0
@@ -3825,14 +3829,18 @@ var AngleSlider = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("AngleSlider", defaultProps$52, rawProps);
 		const rootRef = ref(null);
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: 0,
-			onChange: props.onChange
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const update = (nextValue) => {
 			if (!rootRef.value || props.disabled) return;
@@ -11122,9 +11130,17 @@ var FileButton = defineComponent({
 	name: "FileButton",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: [
+				Object,
+				Array,
+				null
+			],
+			default: void 0
+		},
 		onChange: {
 			type: Function,
-			required: true
+			default: void 0
 		},
 		multiple: {
 			type: Boolean,
@@ -11163,7 +11179,8 @@ var FileButton = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const inputRef = ref(null);
 		const reset = () => {
 			if (inputRef.value) inputRef.value.value = "";
@@ -11188,10 +11205,14 @@ var FileButton = defineComponent({
 			onChange: (event) => {
 				const files = event.currentTarget.files;
 				if (files === null) {
-					props.onChange(props.multiple ? [] : null);
+					const nextValue = props.multiple ? [] : null;
+					emit("update:modelValue", nextValue);
+					emit("change", nextValue);
 					return;
 				}
-				props.onChange(props.multiple ? Array.from(files) : files[0] || null);
+				const nextValue = props.multiple ? Array.from(files) : files[0] || null;
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
 			}
 		}), slots.default?.({
 			onClick,
@@ -11832,6 +11853,22 @@ var InputBase$1 = defineComponent({
 			],
 			default: "input"
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
+		value: {
+			type: null,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		__staticSelector: {
 			type: String,
 			default: void 0
@@ -12001,7 +12038,21 @@ var InputBase$1 = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: void 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
+		const callHandler = (handler, event) => {
+			if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
+			else if (typeof handler === "function") handler(event);
+		};
 		const wrapperCtx = useInputWrapperContext();
 		const stylesCtx = reactive({
 			offsetBottom: false,
@@ -12071,6 +12122,14 @@ var InputBase$1 = defineComponent({
 				h(Box, {
 					...attrs,
 					...ariaAttributes,
+					value: props.component === "button" || props.component === "div" ? void 0 : value.value,
+					onInput: (event) => {
+						callHandler(attrs.onInput, event);
+						if (props.component !== "select") setValue(event.currentTarget.value);
+					},
+					onChange: (event) => {
+						if (props.component === "select") setValue(event.currentTarget.value);
+					},
 					component: props.component,
 					required: props.required,
 					disabled: props.disabled,
@@ -12126,6 +12185,22 @@ var InputBase = withBoxProps(defineComponent({
 			],
 			default: "input"
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
+		value: {
+			type: null,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		__staticSelector: {
 			type: String,
 			default: "InputBase"
@@ -12331,7 +12406,17 @@ var InputBase = withBoxProps(defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: void 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		return () => h(Input.Wrapper, {
 			...props.wrapperProps,
 			id: props.id,
@@ -12359,6 +12444,8 @@ var InputBase = withBoxProps(defineComponent({
 			error: slots.error,
 			default: () => h(Input, {
 				...attrs,
+				modelValue: value.value,
+				"onUpdate:modelValue": setValue,
 				component: props.component,
 				__staticSelector: props.__staticSelector,
 				__stylesApiProps: props.__stylesApiProps ?? props,
@@ -12422,6 +12509,14 @@ var FileInput = defineComponent({
 			type: String,
 			default: "button"
 		},
+		modelValue: {
+			type: [
+				Object,
+				Array,
+				null
+			],
+			default: void 0
+		},
 		onChange: {
 			type: Function,
 			default: void 0
@@ -12543,13 +12638,17 @@ var FileInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const resetRef = ref(null);
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const hasValue = computed(() => Array.isArray(value.value) ? value.value.length !== 0 : value.value !== null);
 		const reset = () => {
@@ -13009,6 +13108,14 @@ var NumberInput = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: [
+				String,
+				Number,
+				BigInt
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -13198,15 +13305,19 @@ var NumberInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const inputRef = ref(null);
 		const isEditing = ref(false);
-		const isBigIntMode = computed(() => typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
+		const isBigIntMode = computed(() => typeof props.modelValue === "bigint" || typeof props.value === "bigint" || typeof props.defaultValue === "bigint");
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "NumberInput",
@@ -13603,6 +13714,10 @@ var PinInput = withBoxProps(defineComponent({
 			type: Boolean,
 			default: false
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -13708,7 +13823,8 @@ var PinInput = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("PinInput", defaultProps$21, rawProps);
 		const uuid = useId(props.id);
 		const focusedIndex = ref(-1);
@@ -13728,12 +13844,13 @@ var PinInput = withBoxProps(defineComponent({
 			varsResolver: varsResolver$38
 		});
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value !== void 0 ? createPinArray(currentLength.value, props.value) : void 0,
+			value: () => props.modelValue !== void 0 || props.value !== void 0 ? createPinArray(currentLength.value, props.modelValue ?? props.value ?? "") : void 0,
 			defaultValue: props.defaultValue?.split("").slice(0, currentLength.value),
 			finalValue: createPinArray(currentLength.value, ""),
 			onChange: (nextValue) => {
 				const stringValue = nextValue.join("").trim();
-				props.onChange?.(stringValue);
+				emit("update:modelValue", stringValue);
+				emit("change", stringValue);
 				if (stringValue.length === currentLength.value && !completed.value) {
 					completed.value = true;
 					props.onComplete?.(stringValue);
@@ -13867,7 +13984,6 @@ var PinInput = withBoxProps(defineComponent({
 				id: `${uuid.value}-${index + 1}`,
 				inputMode: props.inputMode || (props.type === "number" ? "numeric" : "text"),
 				onInput: (event) => handleInput(event, index),
-				onChange: (event) => handleInput(event, index),
 				onKeydown: (event) => handleKeyDown(event, index),
 				onFocus: (event) => {
 					event.target.select();
@@ -14033,6 +14149,10 @@ var NativeSelect = defineComponent({
 			type: String,
 			default: void 0
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -14070,7 +14190,8 @@ var NativeSelect = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("NativeSelect", defaultProps$20, rawProps);
 		return () => {
 			const parsedOptions = getParsedNativeSelectData(props.data).map((item, index) => h(NativeSelectOption, {
@@ -14094,9 +14215,11 @@ var NativeSelect = defineComponent({
 				id: props.id,
 				name: props.name,
 				form: props.form,
-				...props.value !== void 0 ? { value: props.value } : null,
-				...props.defaultValue !== void 0 ? { value: props.defaultValue } : null,
-				onChange: props.onChange,
+				modelValue: props.modelValue,
+				value: props.value,
+				defaultValue: props.defaultValue,
+				"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+				onChange: (value) => emit("change", value),
 				variant: props.variant,
 				radius: props.radius,
 				classNames: props.classNames,
@@ -14144,7 +14267,7 @@ var varsResolver$37 = createVarsResolver((theme, { variant, color, childrenOffse
 function renderContent(content) {
 	return typeof content === "function" ? content() : content;
 }
-function callHandler$8(handler, event) {
+function callHandler$5(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -14297,11 +14420,11 @@ var NavLink = withBoxProps(defineComponent({
 					expanded: opened.value
 				}, props.mod],
 				onClick: (event) => {
-					callHandler$8(attrs.onClick, event);
+					callHandler$5(attrs.onClick, event);
 					toggle(event);
 				},
 				onKeydown: (event) => {
-					callHandler$8(attrs.onKeydown ?? attrs.onKeyDown, event);
+					callHandler$5(attrs.onKeydown ?? attrs.onKeyDown, event);
 					if (event.code === "Space" && withChildren) toggle(event);
 				}
 			}, () => [
@@ -14866,6 +14989,10 @@ var Rating = withBoxProps(defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		defaultValue: {
 			type: Number,
 			default: void 0
@@ -14947,7 +15074,8 @@ var Rating = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Rating", defaultProps$16, rawProps);
 		const rootRef = ref(null);
 		const hovered = ref(-1);
@@ -14956,10 +15084,13 @@ var Rating = withBoxProps(defineComponent({
 		const name = useId(props.name);
 		const id = useId(props.id);
 		const [currentValue, setCurrentValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: 0,
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const getStyles = useStyles({
 			name: "Rating",
@@ -15296,6 +15427,14 @@ var SegmentedControl = defineComponent({
 			type: Array,
 			required: true
 		},
+		modelValue: {
+			type: [
+				String,
+				Number,
+				Boolean
+			],
+			default: void 0
+		},
 		value: {
 			type: [
 				String,
@@ -15389,7 +15528,8 @@ var SegmentedControl = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const theme = useMantineTheme();
 		const uuid = useId(props.name);
 		const mounted = useMounted();
@@ -15397,10 +15537,13 @@ var SegmentedControl = defineComponent({
 		const itemRefs = reactive({});
 		const normalizedData = computed(() => normalizeData(props.data));
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: normalizedData.value.find((item) => !item.disabled)?.value ?? normalizedData.value[0]?.value,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "SegmentedControl",
@@ -16670,6 +16813,18 @@ var Textarea = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
 		autosize: {
 			type: Boolean,
 			default: false
@@ -16704,7 +16859,8 @@ var Textarea = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		return () => {
 			const shouldAutosize = props.autosize;
 			const autosizeProps = shouldAutosize ? {
@@ -16713,6 +16869,11 @@ var Textarea = defineComponent({
 			} : { rows: props.minRows };
 			return h(InputBase, {
 				...attrs,
+				modelValue: props.modelValue,
+				value: props.value,
+				defaultValue: props.defaultValue,
+				"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+				onChange: (value) => emit("change", value),
 				component: shouldAutosize ? TextareaAutosize : "textarea",
 				__staticSelector: props.__staticSelector || "Textarea",
 				multiline: true,
@@ -16739,7 +16900,7 @@ function validateJson(value, deserialize) {
 }
 //#endregion
 //#region src/components/JsonInput/JsonInput.ts
-function callHandler$7(handler, event) {
+function callHandler$4(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -16747,6 +16908,10 @@ var JsonInput = defineComponent({
 	name: "JsonInput",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -16800,12 +16965,16 @@ var JsonInput = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const valid = ref(validateJson(value.value, props.deserialize));
 		return () => h(Textarea, {
@@ -16817,15 +16986,15 @@ var JsonInput = defineComponent({
 			error: valid.value ? props.error : props.validationError || true,
 			"data-monospace": true,
 			onInput: (event) => {
-				callHandler$7(attrs.onInput, event);
+				callHandler$4(attrs.onInput, event);
 				setValue(event.currentTarget.value);
 			},
 			onFocus: (event) => {
-				callHandler$7(attrs.onFocus, event);
+				callHandler$4(attrs.onFocus, event);
 				valid.value = true;
 			},
 			onBlur: (event) => {
-				callHandler$7(attrs.onBlur, event);
+				callHandler$4(attrs.onBlur, event);
 				const target = event.currentTarget;
 				const isValid = validateJson(target.value, props.deserialize);
 				if (props.formatOnBlur && !props.readOnly && isValid && target.value.trim() !== "") setValue(props.serialize(props.deserialize(target.value), null, props.indentSpaces));
@@ -16840,9 +17009,29 @@ Object.assign(JsonInput, { classes: InputBase.classes });
 var TextInput = defineComponent({
 	name: "TextInput",
 	inheritAttrs: false,
-	setup(_, { attrs, slots }) {
+	props: {
+		modelValue: {
+			type: [String, Number],
+			default: void 0
+		},
+		value: {
+			type: [String, Number],
+			default: void 0
+		},
+		defaultValue: {
+			type: [String, Number],
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		return () => h(InputBase, {
 			...attrs,
+			modelValue: props.modelValue,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			component: "input",
 			__staticSelector: "TextInput",
 			__stylesApiProps: attrs
@@ -16934,6 +17123,22 @@ var PasswordInput = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		visibilityToggleIcon: {
 			type: [Object, Function],
 			default: void 0
@@ -17071,7 +17276,8 @@ var PasswordInput = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = useId(props.id);
 		const fallbackId = ref(`password-input-${Math.random().toString(36).slice(2)}`);
 		const [visible, setVisible] = useUncontrolled({
@@ -17080,6 +17286,15 @@ var PasswordInput = defineComponent({
 			finalValue: false,
 			onChange: (value) => props.onVisibilityChange?.(value)
 		});
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const getStyles = useStyles({
 			name: "PasswordInput",
 			props,
@@ -17200,6 +17415,7 @@ var PasswordInput = defineComponent({
 					default: () => h("input", {
 						...attrs,
 						...getStyles("innerInput"),
+						value: value.value,
 						required: props.required,
 						"data-invalid": props.error || slots.error ? true : void 0,
 						"data-with-left-section": props.leftSection !== void 0 || slots.leftSection ? true : void 0,
@@ -17207,7 +17423,12 @@ var PasswordInput = defineComponent({
 						id,
 						"aria-describedby": describedBy,
 						autocomplete: attrs.autocomplete || "off",
-						type: visible.value ? "text" : "password"
+						type: visible.value ? "text" : "password",
+						onInput: (event) => {
+							const handler = attrs.onInput;
+							handler?.(event);
+							setValue(event.currentTarget.value);
+						}
 					}),
 					leftSection: slots.leftSection,
 					rightSection: slots.rightSection
@@ -17453,6 +17674,10 @@ var CheckboxGroup = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -17526,12 +17751,16 @@ var CheckboxGroup = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [],
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
@@ -17594,6 +17823,10 @@ var CheckboxCard = withBoxProps(defineComponent({
 	name: "CheckboxCard",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -17639,13 +17872,22 @@ var CheckboxCard = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const groupContext = useCheckboxGroupContext();
 		const [checked, setChecked] = useUncontrolled({
-			value: () => typeof props.checked === "boolean" ? props.checked : groupContext ? groupContext.value.includes(props.value || "") : void 0,
+			value: () => typeof props.modelValue === "boolean" ? props.modelValue : typeof props.checked === "boolean" ? props.checked : groupContext ? groupContext.value.includes(props.value || "") : void 0,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("update:checked", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "CheckboxCard",
@@ -17836,7 +18078,7 @@ var varsResolver$25 = createVarsResolver((theme, { radius, color, size, iconColo
 		autoContrast
 	}) : void 0
 } }));
-function callHandler$6(handler, event) {
+function callHandler$3(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -17905,10 +18147,22 @@ var CheckboxBase = defineComponent({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: false
@@ -17942,9 +18196,24 @@ var CheckboxBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = useId(props.id);
 		const groupContext = useCheckboxGroupContext();
+		const [localChecked, setLocalChecked] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "Checkbox",
 			props,
@@ -17974,7 +18243,7 @@ var CheckboxBase = defineComponent({
 			};
 			const Icon = props.icon || CheckboxIcon;
 			const value = String(attrs.value ?? "");
-			const checked = groupContext ? groupContext.value.includes(value) : props.checked;
+			const checked = groupContext ? groupContext.value.includes(value) : localChecked.value;
 			const disabled = groupContext?.isDisabled?.(value) || props.disabled;
 			const size = groupContext?.size ?? props.size;
 			return h(InlineInput, {
@@ -18019,13 +18288,14 @@ var CheckboxBase = defineComponent({
 				},
 				variant: props.variant,
 				onClick: (event) => {
-					callHandler$6(attrs.onClick, event);
-					if (props.readOnly && checked === void 0) event.preventDefault();
+					callHandler$3(attrs.onClick, event);
+					if (props.readOnly) event.preventDefault();
 				},
 				onChange: (event) => {
 					if (props.readOnly) return;
-					callHandler$6(attrs.onChange, event);
+					const nextChecked = event.currentTarget.checked;
 					groupContext?.onChange(event);
+					setLocalChecked(nextChecked);
 				}
 			}), slots.icon ? slots.icon(iconSlotProps) : h(Icon, {
 				indeterminate: props.indeterminate,
@@ -18054,6 +18324,10 @@ var ChipGroup = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		modelValue: {
+			type: [String, Array],
+			default: void 0
+		},
 		value: {
 			type: [String, Array],
 			default: void 0
@@ -18067,12 +18341,16 @@ var ChipGroup = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { slots, emit }) {
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const isChipSelected = (chipValue) => Array.isArray(value.value) ? value.value.includes(chipValue) : value.value === chipValue;
 		const handleChange = (event) => {
@@ -18120,10 +18398,6 @@ var varsResolver$24 = createVarsResolver((theme, { size, radius, variant, color,
 		"--chip-spacing": getSize(size, "chip-spacing")
 	} };
 });
-function callHandler$5(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var ChipBase = defineComponent({
 	name: "Chip",
 	inheritAttrs: false,
@@ -18144,6 +18418,10 @@ var ChipBase = defineComponent({
 			type: String,
 			default: "checkbox"
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -18215,15 +18493,24 @@ var ChipBase = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Chip", null, rawProps);
 		const groupContext = useChipGroupContext();
 		const uuid = useId(props.id);
 		const [value, setValue] = useUncontrolled({
-			value: () => props.checked,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("update:checked", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const getStyles = useStyles({
 			name: "Chip",
@@ -18244,7 +18531,7 @@ var ChipBase = defineComponent({
 			const inputType = groupContext ? groupContext.multiple ? "checkbox" : "radio" : props.type;
 			const icon = props.icon ?? slots.icon;
 			const showIcon = checked && icon !== null && icon !== false;
-			const { class: _class, style: _style, onChange: attrsOnChange, value: _attrsValue, ...inputAttrs } = attrs;
+			const { class: _class, style: _style, value: _attrsValue, ...inputAttrs } = attrs;
 			const renderIcon = () => {
 				const iconProps = getStyles("checkIcon");
 				if (icon === void 0) return h(CheckIcon, iconProps);
@@ -18269,11 +18556,9 @@ var ChipBase = defineComponent({
 				disabled: props.disabled,
 				value: chipValue,
 				onChange: (event) => {
-					callHandler$5(attrsOnChange, event);
-					if (groupContext) {
-						groupContext.onChange(event);
-						props.onChange?.(event.currentTarget.checked);
-					} else setValue(event.currentTarget.checked);
+					const nextChecked = event.currentTarget.checked;
+					if (groupContext) groupContext.onChange(event);
+					setValue(nextChecked);
 				}
 			}), h(Box, {
 				component: "label",
@@ -18397,7 +18682,7 @@ var varsResolver$22 = createVarsResolver((_, { radius }, ctx) => ({ root: {
 	"--pill-height": getSize(ctx.size, "pill-height"),
 	"--pill-radius": radius === void 0 ? void 0 : getRadius(radius)
 } }));
-function callHandler$4(handler, event) {
+function callHandler$2(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -18506,12 +18791,12 @@ var PillBase = defineComponent({
 				onMousedown: (event) => {
 					event.preventDefault();
 					event.stopPropagation();
-					callHandler$4(removeButtonProps.onMousedown ?? removeButtonProps.onMousedown ?? removeButtonProps.onMouseDown, event);
+					callHandler$2(removeButtonProps.onMousedown ?? removeButtonProps.onMousedown ?? removeButtonProps.onMouseDown, event);
 				},
 				onClick: (event) => {
 					event.stopPropagation();
 					props.onRemove?.();
-					callHandler$4(removeButtonProps.onClick, event);
+					callHandler$2(removeButtonProps.onClick, event);
 				}
 			}) : null]);
 		};
@@ -18529,6 +18814,22 @@ var PillsInputField = withBoxProps(defineComponent({
 	name: "PillsInputField",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		type: {
 			type: String,
 			default: "visible"
@@ -18570,8 +18871,18 @@ var PillsInputField = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("PillsInputField", null, rawProps);
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const context = usePillsInputContext();
 		const inputWrapperContext = useInputWrapperContext();
 		const getStyles = useStyles({
@@ -18593,6 +18904,7 @@ var PillsInputField = withBoxProps(defineComponent({
 					style: attrs.style
 				}),
 				component: "input",
+				value: value.value,
 				ref: (node) => {
 					const input = node?.$el ?? node ?? null;
 					if (context) context.fieldRef.value = input;
@@ -18608,6 +18920,11 @@ var PillsInputField = withBoxProps(defineComponent({
 				"aria-invalid": context?.hasError || void 0,
 				"aria-describedby": inputWrapperContext.describedBy,
 				type: "text",
+				onInput: (event) => {
+					const handler = attrs.onInput;
+					handler?.(event);
+					setValue(event.currentTarget.value);
+				},
 				onMousedown: (event) => {
 					if (!props.pointer) event.stopPropagation();
 				}
@@ -18774,6 +19091,10 @@ var RadioGroup = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -18835,13 +19156,17 @@ var RadioGroup = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const name = useId(props.name);
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "",
-			onChange: (nextValue) => props.onChange?.(String(nextValue ?? ""))
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
 		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
@@ -18887,7 +19212,7 @@ function useRadioCardContext() {
 	return inject(RadioCardContextKey, null);
 }
 var varsResolver$21 = createVarsResolver((_, { radius }) => ({ card: { "--card-radius": getRadius(radius) } }));
-function callHandler$3(handler, event) {
+function callHandler$1(handler, event) {
 	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
 	else handler?.(event);
 }
@@ -18895,10 +19220,22 @@ var RadioCard = withBoxProps(defineComponent({
 	name: "RadioCard",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		withBorder: {
 			type: Boolean,
 			default: true
@@ -18936,8 +19273,23 @@ var RadioCard = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const groupContext = useRadioGroupContext();
+		const [localChecked, setLocalChecked] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "RadioCard",
 			props,
@@ -18950,7 +19302,7 @@ var RadioCard = withBoxProps(defineComponent({
 			vars: props.vars,
 			varsResolver: varsResolver$21
 		});
-		const isChecked = () => typeof props.checked === "boolean" ? props.checked : groupContext?.value === props.value || false;
+		const isChecked = () => groupContext ? groupContext.value === props.value : localChecked.value;
 		provide(RadioCardContextKey, { get checked() {
 			return isChecked();
 		} });
@@ -18972,8 +19324,9 @@ var RadioCard = withBoxProps(defineComponent({
 				name,
 				"aria-checked": checked,
 				onClick: (event) => {
-					callHandler$3(attrs.onClick, event);
+					callHandler$1(attrs.onClick, event);
 					groupContext?.onChange(props.value || "");
+					setLocalChecked(true);
 				}
 			}, () => slots.default?.());
 		};
@@ -19143,10 +19496,6 @@ var varsResolver$19 = createVarsResolver((theme, { size, radius, color, iconColo
 	}) : void 0,
 	"--radio-icon-size": getSize(size, "radio-icon-size")
 } }));
-function callHandler$2(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var RadioBase = defineComponent({
 	name: "Radio",
 	inheritAttrs: false,
@@ -19208,14 +19557,30 @@ var RadioBase = defineComponent({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
 		},
+		defaultChecked: {
+			type: Boolean,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		disabled: {
 			type: Boolean,
 			default: false
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		variant: {
 			type: String,
 			default: "filled"
@@ -19241,9 +19606,24 @@ var RadioBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = useId(props.id);
 		const groupContext = useRadioGroupContext();
+		const [localChecked, setLocalChecked] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
+			defaultValue: props.defaultChecked,
+			finalValue: false,
+			onChange: (checked) => {
+				emit("update:modelValue", checked);
+				emit("update:checked", checked);
+				emit("change", checked);
+			}
+		});
 		const getStyles = useStyles({
 			name: "Radio",
 			props,
@@ -19269,7 +19649,7 @@ var RadioBase = defineComponent({
 			const iconStyles = getStyles("icon");
 			const Icon = props.icon || RadioIcon;
 			const value = String(attrs.value ?? "");
-			const checked = groupContext ? groupContext.value === value : props.checked;
+			const checked = groupContext ? groupContext.value === value : localChecked.value;
 			const disabled = groupContext?.disabled || props.disabled;
 			const size = groupContext?.size ?? props.size;
 			const name = groupContext?.name ?? attrs.name;
@@ -19305,6 +19685,7 @@ var RadioBase = defineComponent({
 				id,
 				checked,
 				disabled,
+				readonly: props.readOnly,
 				name,
 				type: "radio",
 				"aria-describedby": describedBy,
@@ -19314,8 +19695,12 @@ var RadioBase = defineComponent({
 				},
 				variant: props.variant,
 				onChange: (event) => {
-					callHandler$2(attrs.onChange, event);
+					if (props.readOnly) {
+						event.currentTarget.checked = Boolean(checked);
+						return;
+					}
 					groupContext?.onChange(event);
+					setLocalChecked(event.currentTarget.checked);
 				}
 			}), slots.icon ? slots.icon(iconStyles) : h(Icon, iconStyles)]));
 		};
@@ -19339,6 +19724,10 @@ var SwitchGroup = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -19412,16 +19801,20 @@ var SwitchGroup = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const [value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [],
-			onChange: (nextValue) => props.onChange?.(nextValue)
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
 		});
-		const handleChange = (event) => {
+		const handleChange = (eventOrValue) => {
 			if (props.readOnly) return;
-			const itemValue = String(event.currentTarget?.value ?? "");
+			const itemValue = typeof eventOrValue === "string" ? eventOrValue : String(eventOrValue.currentTarget?.value ?? "");
 			const isCurrentlySelected = value.value.includes(itemValue);
 			if (!isCurrentlySelected && props.maxSelectedValues && value.value.length >= props.maxSelectedValues) return;
 			setValue(isCurrentlySelected ? value.value.filter((item) => item !== itemValue) : [...value.value, itemValue]);
@@ -19487,10 +19880,6 @@ var varsResolver$18 = createVarsResolver((theme, { radius, color, size }) => ({
 	"--switch-track-label-padding": getSize(size, "switch-track-label-padding"),
 	"--switch-color": color ? getThemeColor(color, theme) : void 0
 } }));
-function callHandler$1(handler, event) {
-	if (Array.isArray(handler)) handler.forEach((item) => item?.(event));
-	else handler?.(event);
-}
 var SwitchBase = defineComponent({
 	name: "Switch",
 	inheritAttrs: false,
@@ -19552,6 +19941,10 @@ var SwitchBase = defineComponent({
 			type: Boolean,
 			default: true
 		},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
 		checked: {
 			type: Boolean,
 			default: void 0
@@ -19568,6 +19961,10 @@ var SwitchBase = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
 		variant: {
 			type: String,
 			default: void 0
@@ -19593,16 +19990,22 @@ var SwitchBase = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: [
+		"update:modelValue",
+		"update:checked",
+		"change"
+	],
+	setup(props, { attrs, slots, emit }) {
 		const uuid = useId(props.id);
 		const groupContext = useSwitchGroupContext();
-		const internalChecked = ref(false);
 		const [checked, setChecked] = useUncontrolled({
-			value: () => props.checked,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.checked,
 			defaultValue: props.defaultChecked,
 			finalValue: false,
 			onChange: (value) => {
-				internalChecked.value = value;
+				emit("update:modelValue", value);
+				emit("update:checked", value);
+				emit("change", value);
 			}
 		});
 		const getStyles = useStyles({
@@ -19663,15 +20066,19 @@ var SwitchBase = defineComponent({
 				...getStyles("input"),
 				disabled,
 				checked: currentChecked,
+				readonly: props.readOnly,
 				id,
 				type: "checkbox",
 				role: "switch",
 				"aria-describedby": describedBy,
 				onChange: (event) => {
-					callHandler$1(attrs.onChange, event);
-					props.onChange?.(event);
+					if (props.readOnly) {
+						event.currentTarget.checked = currentChecked;
+						return;
+					}
+					const nextChecked = event.currentTarget.checked;
 					if (groupContext) groupContext.onChange(event);
-					else setChecked(event.currentTarget.checked);
+					setChecked(nextChecked);
 				}
 			}), h(Box, {
 				component: "span",
@@ -21518,6 +21925,10 @@ var Slider = withBoxProps(defineComponent({
 			type: Number,
 			default: void 0
 		},
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
 			default: void 0
@@ -21633,16 +22044,23 @@ var Slider = withBoxProps(defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("Slider", defaultProps$6, rawProps);
 		const direction = useDirection();
 		const hovered = ref(false);
 		const thumb = ref(null);
 		const [current, setCurrent] = useUncontrolled({
-			value: () => props.value === void 0 ? void 0 : clamp$1(props.value, props.min, props.max),
+			value: () => {
+				const controlledValue = props.modelValue !== void 0 ? props.modelValue : props.value;
+				return controlledValue === void 0 ? void 0 : clamp$1(controlledValue, props.min, props.max);
+			},
 			defaultValue: props.defaultValue === void 0 ? void 0 : clamp$1(props.defaultValue, props.min, props.max),
 			finalValue: clamp$1(0, props.min, props.max),
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const valueRef = ref(current.value);
 		watch(current, (value) => {
@@ -21780,6 +22198,10 @@ var RangeSlider = defineComponent({
 	inheritAttrs: false,
 	slots: Object,
 	props: {
+		modelValue: {
+			type: Array,
+			default: void 0
+		},
 		value: {
 			type: Array,
 			default: void 0
@@ -21926,17 +22348,21 @@ var RangeSlider = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = useProps("RangeSlider", defaults$5, rawProps);
 		const direction = useDirection();
 		const activeThumb = ref(0);
 		const focused = ref(0);
 		const hovered = ref(false);
 		const [current, setCurrent] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: [props.min, props.max],
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const valueRef = ref([...current.value]);
 		watch(current, (value) => valueRef.value = [...value]);
@@ -22103,9 +22529,17 @@ var ColorSlider = defineComponent({
 	name: "ColorSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		onChange: {
 			type: Function,
@@ -22164,11 +22598,21 @@ var ColorSlider = defineComponent({
 			default: false
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useColorPickerContext();
 		const theme = useMantineTheme();
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: 0,
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const position = ref({
-			x: props.value / props.maxValue,
+			x: value.value / props.maxValue,
 			y: 0
 		});
 		const positionRef = ref(position.value);
@@ -22193,7 +22637,7 @@ var ColorSlider = defineComponent({
 				x,
 				y: 0
 			};
-			props.onChange?.(changeValue(x));
+			setValue(changeValue(x));
 		}, {
 			onScrubStart: props.onScrubStart,
 			onScrubEnd: () => {
@@ -22201,7 +22645,7 @@ var ColorSlider = defineComponent({
 				props.onScrubEnd?.();
 			}
 		});
-		watch(() => props.value, (value) => position.value = {
+		watch(value, (value) => position.value = {
 			x: value / props.maxValue,
 			y: 0
 		});
@@ -22212,7 +22656,7 @@ var ColorSlider = defineComponent({
 				x: position.value.x + (event.key === "ArrowRight" ? .05 : -.05),
 				y: 0
 			}).x);
-			props.onChange?.(value);
+			setValue(value);
 			props.onChangeEnd?.(value);
 		};
 		return () => h(Box, {
@@ -22223,7 +22667,7 @@ var ColorSlider = defineComponent({
 				style: attrs.style
 			}),
 			role: "slider",
-			"aria-valuenow": props.value,
+			"aria-valuenow": value.value,
 			"aria-valuemax": props.maxValue,
 			"aria-valuemin": 0,
 			tabindex: props.focusable ? 0 : -1,
@@ -22458,9 +22902,17 @@ var AlphaSlider = defineComponent({
 	name: "AlphaSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		color: {
 			type: String,
@@ -22491,7 +22943,8 @@ var AlphaSlider = defineComponent({
 			default: true
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => h(ColorSlider, {
 			...attrs,
 			...props,
@@ -22499,7 +22952,8 @@ var AlphaSlider = defineComponent({
 			maxValue: 1,
 			round: false,
 			"data-alpha": "",
-			onChange: (value) => props.onChange?.(round(value, 2)),
+			"onUpdate:modelValue": (value) => emit("update:modelValue", round(value, 2)),
+			onChange: (value) => emit("change", round(value, 2)),
 			onChangeEnd: (value) => props.onChangeEnd?.(round(value, 2)),
 			overlays: [
 				{
@@ -22519,9 +22973,17 @@ var HueSlider = defineComponent({
 	name: "HueSlider",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: Number,
+			default: void 0
+		},
 		value: {
 			type: Number,
-			required: true
+			default: void 0
+		},
+		defaultValue: {
+			type: Number,
+			default: void 0
 		},
 		onChange: {
 			type: Function,
@@ -22548,13 +23010,16 @@ var HueSlider = defineComponent({
 			default: true
 		}
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		return () => h(ColorSlider, {
 			...attrs,
 			...props,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			__staticSelector: "HueSlider",
 			maxValue: 360,
-			thumbColor: `hsl(${props.value}, 100%, 50%)`,
+			thumbColor: `hsl(${props.modelValue ?? props.value ?? props.defaultValue ?? 0}, 100%, 50%)`,
 			round: true,
 			"data-hue": "",
 			overlays: [{ backgroundImage: "linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))" }, { boxShadow: `rgba(0,0,0,.1) 0 0 0 ${rem(1)} inset, rgba(0,0,0,.15) 0 0 ${rem(4)} inset` }]
@@ -22752,6 +23217,10 @@ var ColorPicker = defineComponent({
 	name: "ColorPicker",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
 		value: {
 			type: String,
 			default: void 0
@@ -22845,13 +23314,17 @@ var ColorPicker = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, emit }) {
 		const props = useProps("ColorPicker", defaults$4, rawProps);
 		const [current, setCurrent, controlled] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: "#FFFFFF",
-			onChange: (value) => props.onChange?.(value)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const parsed = ref(parseColor(current.value));
 		let scrubbing = false;
@@ -23615,6 +24088,22 @@ var MaskInput = defineComponent({
 			type: [String, Array],
 			required: true
 		},
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
 		tokens: {
 			type: Object,
 			default: void 0
@@ -23664,7 +24153,8 @@ var MaskInput = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, slots, emit }) {
 		const input = ref(null);
 		const processed = ref("");
 		const rawValue = ref("");
@@ -23725,6 +24215,8 @@ var MaskInput = defineComponent({
 			}
 			const complete = isComplete(reprocessed, resolved.slots);
 			if (notify) {
+				emit("update:modelValue", nextDisplay);
+				emit("change", nextDisplay);
 				props.onChangeRaw?.(resolvedRaw, nextDisplay);
 				if (complete && !wasComplete.value) props.onComplete?.(nextDisplay, resolvedRaw);
 			}
@@ -23737,11 +24229,13 @@ var MaskInput = defineComponent({
 			const resolved = resolveMaskOptions(options(), "");
 			displayValue.value = props.alwaysShowMask ? buildDisplayValue("", resolved.slots, resolved.slotChar, true) : "";
 			if (input.value) input.value.value = displayValue.value;
+			emit("update:modelValue", "");
+			emit("change", "");
 			props.onChangeRaw?.("", "");
 		};
 		assignRef(props.resetRef, reset);
 		watch(() => props.resetRef, (value) => assignRef(value, reset));
-		watch(() => attrs.value, (value) => {
+		watch(() => props.modelValue !== void 0 ? props.modelValue : props.value, (value) => {
 			if (input.value && value !== void 0 && String(value) !== displayValue.value) commit(String(value), void 0, false, String(value));
 		});
 		onBeforeUnmount(() => assignRef(props.resetRef, null));
@@ -23750,7 +24244,7 @@ var MaskInput = defineComponent({
 			input.value = element instanceof HTMLInputElement ? element : null;
 			assignRef(attrs.rootRef, root?.$el ?? root ?? null);
 			if (!input.value) return;
-			const initial = attrs.value ?? attrs.defaultValue ?? input.value.value;
+			const initial = props.modelValue ?? props.value ?? props.defaultValue ?? input.value.value;
 			if (initial) commit(String(initial), void 0, false, String(initial));
 			else if (props.alwaysShowMask) {
 				const resolved = resolveMaskOptions(options(), "");
@@ -23861,6 +24355,7 @@ var MaskInput = defineComponent({
 				type: forwarded.type ?? "text",
 				__staticSelector: "MaskInput",
 				__stylesApiProps: attrs,
+				value: displayValue.value,
 				rootRef: attach,
 				onInput: handleInput,
 				onFocus: handleFocus,
@@ -28350,19 +28845,44 @@ var MenuDivider = defineComponent({
 var MenuSearch = defineComponent({
 	name: "MenuSearch",
 	inheritAttrs: false,
-	props: { clearSearchOnClose: {
-		type: Boolean,
-		default: true
-	} },
-	setup(props, { attrs }) {
+	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			default: void 0
+		},
+		clearSearchOnClose: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useMenuContext();
+		const [value, setValue] = useUncontrolled({
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
+			defaultValue: props.defaultValue,
+			finalValue: "",
+			onChange: (nextValue) => {
+				emit("update:modelValue", nextValue);
+				emit("change", nextValue);
+			}
+		});
 		const unregister = ctx.registerSearch();
 		ctx.setSearchExitClear(props.clearSearchOnClose ? () => {
 			clearActive(document.querySelector("[data-menu-dropdown]"));
-			attrs.onChange?.({
-				currentTarget: { value: "" },
-				target: { value: "" }
-			});
+			setValue("");
 		} : null);
 		onUnmounted(() => {
 			unregister();
@@ -28386,6 +28906,7 @@ var MenuSearch = defineComponent({
 			const inputStyles = attrs.styles;
 			return h(Input, {
 				...forwarded,
+				value: value.value,
 				type: "search",
 				"data-autofocus": "",
 				"data-mantine-stop-propagation": "",
@@ -28403,11 +28924,7 @@ var MenuSearch = defineComponent({
 				},
 				onInput: (event) => {
 					call$1(attrs.onInput, event);
-					call$1(attrs.onChange, event);
-					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
-				},
-				onChange: (event) => {
-					call$1(attrs.onChange, event);
+					setValue(event.currentTarget.value);
 					clearActive(event.currentTarget.closest("[data-menu-dropdown]"));
 				},
 				onKeydown: (event) => {
@@ -29808,6 +30325,18 @@ var ComboboxSearch = defineComponent({
 	name: "ComboboxSearch",
 	inheritAttrs: false,
 	props: {
+		modelValue: {
+			type: String,
+			default: void 0
+		},
+		value: {
+			type: String,
+			default: void 0
+		},
+		defaultValue: {
+			type: String,
+			default: void 0
+		},
 		withAriaAttributes: {
 			type: Boolean,
 			default: true
@@ -29818,7 +30347,8 @@ var ComboboxSearch = defineComponent({
 		},
 		size: String
 	},
-	setup(props, { attrs }) {
+	emits: ["update:modelValue", "change"],
+	setup(props, { attrs, emit }) {
 		const ctx = useComboboxContext();
 		const targetProps = useComboboxTargetProps({
 			targetType: "input",
@@ -29831,6 +30361,11 @@ var ComboboxSearch = defineComponent({
 		});
 		return () => h(Input, {
 			...attrs,
+			modelValue: props.modelValue,
+			value: props.value,
+			defaultValue: props.defaultValue,
+			"onUpdate:modelValue": (value) => emit("update:modelValue", value),
+			onChange: (value) => emit("change", value),
 			...targetProps,
 			ref: (node) => {
 				const element = node?.$el?.querySelector?.("input") ?? node?.$el ?? node;
@@ -30369,6 +30904,10 @@ var ComboboxPopoverBase = defineComponent({
 			type: Boolean,
 			default: void 0
 		},
+		modelValue: {
+			type: null,
+			default: void 0
+		},
 		value: {
 			type: null,
 			default: void 0
@@ -30506,7 +31045,8 @@ var ComboboxPopoverBase = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs, slots }) {
+	emits: ["update:modelValue", "change"],
+	setup(rawProps, { attrs, slots, emit }) {
 		const props = new Proxy(rawProps, { get(target, key) {
 			const value = target[key];
 			return value === void 0 && key in defaultProps$2 ? defaultProps$2[key] : value;
@@ -30514,10 +31054,13 @@ var ComboboxPopoverBase = defineComponent({
 		const parsedData = computed(() => getParsedComboboxData(props.data));
 		const optionsLockup = computed(() => getOptionsLockup(parsedData.value));
 		const [_value, setValue] = useUncontrolled({
-			value: () => props.value,
+			value: () => props.modelValue !== void 0 ? props.modelValue : props.value,
 			defaultValue: props.defaultValue,
 			finalValue: props.multiple ? [] : null,
-			onChange: (val) => props.onChange?.(val)
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
 		});
 		const [_searchValue, setSearchValue] = useUncontrolled({
 			value: () => props.searchValue,
@@ -31268,7 +31811,11 @@ var Select = defineComponent({
 			default: void 0
 		}
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
@@ -31288,8 +31835,8 @@ var Select = defineComponent({
 		};
 		const changeValue = (value, option) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value, option);
 			emit("update:modelValue", value);
+			emit("change", value, option);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -31477,15 +32024,18 @@ var Autocomplete = defineComponent({
 			default: true
 		}
 	},
-	emits: { "update:modelValue": (value) => typeof value === "string" },
+	emits: {
+		"update:modelValue": (value) => typeof value === "string",
+		change: (value) => typeof value === "string"
+	},
 	setup(props, { attrs, emit, slots }) {
 		const internal = ref(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
 		const controlled = () => props.modelValue !== void 0 || props.value !== void 0;
 		const change = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 			combobox.resetSelectedOption();
 		};
 		const parsed = computed(() => getParsedComboboxData(props.data));
@@ -31672,7 +32222,11 @@ var MultiSelect = defineComponent({
 		},
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
@@ -31690,8 +32244,8 @@ var MultiSelect = defineComponent({
 		};
 		const setValue = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -31931,7 +32485,11 @@ var TagsInput = defineComponent({
 		},
 		selectFirstOptionOnDropdownOpen: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const parsed = computed(() => getParsedComboboxData(props.data));
 		const lockup = computed(() => getOptionsLockup(parsed.value));
@@ -31948,8 +32506,8 @@ var TagsInput = defineComponent({
 		};
 		const setValue = (value) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const combobox = useCombobox({
 			opened: () => props.dropdownOpened,
@@ -32223,7 +32781,7 @@ var ColorInput = defineComponent({
 			default: 7
 		}
 	},
-	emits: ["update:modelValue"],
+	emits: ["update:modelValue", "change"],
 	setup(props, { attrs, emit, slots }) {
 		const internal = ref(props.defaultValue);
 		const current = () => props.modelValue ?? props.value ?? internal.value;
@@ -32232,8 +32790,8 @@ var ColorInput = defineComponent({
 		const lastValid = ref(isColorValid(current()) ? current() : "");
 		const setValue = (value, end = false) => {
 			if (!controlled()) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 			if (isColorValid(value)) {
 				lastValid.value = value;
 				if (end) props.onChangeEnd?.(convertHsvaTo(props.format, parseColor(value)));
@@ -32641,15 +33199,19 @@ var TreeSelect = defineComponent({
 		},
 		chevronAriaLabels: Object
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const isMulti = () => props.mode !== "single";
 		const internal = ref(props.defaultValue !== void 0 ? props.defaultValue : isMulti() ? [] : null);
-		const current = () => props.modelValue ?? props.value ?? internal.value;
+		const current = () => props.modelValue !== void 0 ? props.modelValue : props.value !== void 0 ? props.value : internal.value;
 		const setValue = (value) => {
 			if (props.modelValue === void 0 && props.value === void 0) internal.value = value;
-			props.onChange?.(value);
 			emit("update:modelValue", value);
+			emit("change", value);
 		};
 		const expandedInternal = ref(props.defaultExpandAll ? allValues(props.data) : props.defaultExpandedValues ?? []);
 		const expanded = () => props.expandedValues ?? expandedInternal.value;
@@ -33068,11 +33630,15 @@ var Cascader = defineComponent({
 		styles: [Object, Function],
 		unstyled: Boolean
 	},
-	emits: ["update:modelValue", "update:searchValue"],
+	emits: [
+		"update:modelValue",
+		"update:searchValue",
+		"change"
+	],
 	setup(props, { attrs, emit, slots }) {
 		const id = useId(attrs.id);
 		const internalValue = ref(props.defaultValue ?? null);
-		const currentValue = computed(() => props.modelValue ?? props.value ?? internalValue.value);
+		const currentValue = computed(() => props.modelValue !== void 0 ? props.modelValue : props.value !== void 0 ? props.value : internalValue.value);
 		const pathOptions = computed(() => getCascaderPathOptions(props.data, currentValue.value));
 		const separatorString = computed(() => typeof props.separator === "string" || typeof props.separator === "number" ? String(props.separator) : "/");
 		const separatorContent = () => resolveNode(props.separator, slots.separator) ?? "/";
@@ -33100,8 +33666,9 @@ var Cascader = defineComponent({
 		};
 		const setValue = (value) => {
 			if (props.modelValue === void 0 && props.value === void 0) internalValue.value = value;
-			props.onChange?.(value, getCascaderPathOptions(props.data, value));
+			const selectedOptions = getCascaderPathOptions(props.data, value);
 			emit("update:modelValue", value);
+			emit("change", value, selectedOptions);
 		};
 		const resetActivePath = () => {
 			activePath.value = currentValue.value ? [...currentValue.value] : [];