@povio/ui 3.3.0 → 3.4.0-rc.10

package/dist/components/inputs/Toggle/Toggle.js

@@ -1,17 +1,17 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FieldController } from "../shared/form.binding.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { toggleContentClassName, toggleDefinition, toggleTypography } from "./toggle.cva.js";
-import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
-	const $ = c(50);
+	const $ = c(48);
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
 	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
@@ -31,10 +31,9 @@ var ToggleBase = (props) => {
 	let t8;
 	let t9;
 	if ($[0] !== props || $[1] !== toggleContentClassNameMap || $[2] !== toggleCva || $[3] !== toggleTypographyMap || $[4] !== ui) {
-		const { className, children: t10, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
+		const { className, children: t10, isDisabled, error, variant: variantProp, onChange, onBlur, ...rest } = props;
 		children = t10;
 		const variant = variantProp ?? ui.toggle.variant;
-		const fireBlurOnChange = fireBlurOnChangeProp ?? ui.toggle.fireBlurOnChange;
 		let t11;
 		if ($[19] !== error || $[20] !== isDisabled) {
 			t11 = {
@@ -47,16 +46,13 @@ var ToggleBase = (props) => {
 		} else t11 = $[21];
 		formFieldErrorProps = t11;
 		let t12;
-		if ($[22] !== fireBlurOnChange || $[23] !== onBlur || $[24] !== onChange) {
+		if ($[22] !== onChange) {
 			t12 = (isSelected) => {
 				onChange?.(isSelected);
-				if (fireBlurOnChange) onBlur?.({});
 			};
-			$[22] = fireBlurOnChange;
-			$[23] = onBlur;
-			$[24] = onChange;
-			$[25] = t12;
-		} else t12 = $[25];
+			$[22] = onChange;
+			$[23] = t12;
+		} else t12 = $[23];
 		const handleChange = t12;
 		T1 = Switch;
 		t2 = rest;
@@ -66,12 +62,12 @@ var ToggleBase = (props) => {
 		t6 = handleChange;
 		t7 = onBlur;
 		const t13 = !isDisabled && "cursor-pointer";
-		if ($[26] !== className || $[27] !== t13) {
+		if ($[24] !== className || $[25] !== t13) {
 			t8 = clsx("group flex items-center gap-2", t13, className);
-			$[26] = className;
-			$[27] = t13;
-			$[28] = t8;
-		} else t8 = $[28];
+			$[24] = className;
+			$[25] = t13;
+			$[26] = t8;
+		} else t8 = $[26];
 		t9 = /* @__PURE__ */ jsx("div", { className: toggleCva({
 			variant,
 			...rest
@@ -121,20 +117,20 @@ var ToggleBase = (props) => {
 		t9 = $[18];
 	}
 	let t10;
-	if ($[29] !== T0 || $[30] !== children || $[31] !== t0 || $[32] !== t1) {
+	if ($[27] !== T0 || $[28] !== children || $[29] !== t0 || $[30] !== t1) {
 		t10 = /* @__PURE__ */ jsx(T0, {
 			typography: t0,
 			contentClassName: t1,
 			children
 		});
-		$[29] = T0;
-		$[30] = children;
-		$[31] = t0;
-		$[32] = t1;
-		$[33] = t10;
-	} else t10 = $[33];
+		$[27] = T0;
+		$[28] = children;
+		$[29] = t0;
+		$[30] = t1;
+		$[31] = t10;
+	} else t10 = $[31];
 	let t11;
-	if ($[34] !== T1 || $[35] !== t10 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+	if ($[32] !== T1 || $[33] !== t10 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(T1, {
 			...t2,
 			"data-is-dirty": t3,
@@ -145,64 +141,64 @@ var ToggleBase = (props) => {
 			className: t8,
 			children: [t9, t10]
 		});
-		$[34] = T1;
-		$[35] = t10;
-		$[36] = t2;
-		$[37] = t3;
-		$[38] = t4;
-		$[39] = t5;
-		$[40] = t6;
-		$[41] = t7;
-		$[42] = t8;
-		$[43] = t9;
-		$[44] = t11;
-	} else t11 = $[44];
+		$[32] = T1;
+		$[33] = t10;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+		$[40] = t8;
+		$[41] = t9;
+		$[42] = t11;
+	} else t11 = $[42];
 	let t12;
-	if ($[45] !== formFieldErrorProps) {
+	if ($[43] !== formFieldErrorProps) {
 		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[45] = formFieldErrorProps;
-		$[46] = t12;
-	} else t12 = $[46];
+		$[43] = formFieldErrorProps;
+		$[44] = t12;
+	} else t12 = $[44];
 	let t13;
-	if ($[47] !== t11 || $[48] !== t12) {
+	if ($[45] !== t11 || $[46] !== t12) {
 		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
-		$[47] = t11;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
+		$[45] = t11;
+		$[46] = t12;
+		$[47] = t13;
+	} else t13 = $[47];
 	return t13;
 };
 var Toggle = (props) => {
 	const $ = c(15);
-	if ("formControl" in props && props.formControl) {
-		let formControl;
+	if ("field" in props && props.field) {
+		let field;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({formControl, ref, ...innerProps} = props);
+			({field, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = formControl;
+			$[1] = field;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			formControl = $[1];
+			field = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field, fieldState: t2 } = t1;
+				const { field: field_0, fieldState: t2 } = t1;
 				const { error, isDirty } = t2;
 				return /* @__PURE__ */ jsx(ToggleBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field.ref),
-					isSelected: field.value,
-					onChange: field.onChange,
-					onBlur: field.onBlur,
-					name: field.name,
+					ref: mergeRefs(ref, field_0.ref),
+					isSelected: field_0.value,
+					onChange: field_0.onChange,
+					onBlur: field_0.onBlur,
+					name: field_0.name,
 					isDirty,
-					isDisabled: field.disabled || props.isDisabled,
+					isDisabled: field_0.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -213,14 +209,14 @@ var Toggle = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(Controller, {
-				control: formControl.control,
-				name: formControl.name,
+		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(FieldController, {
+				control: field.form,
+				name: field.name,
 				render: t0
 			});
-			$[9] = formControl.control;
-			$[10] = formControl.name;
+			$[9] = field.form;
+			$[10] = field.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/inputs/shared/CheckContent.js

@@ -1,8 +1,8 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { typographyDefinition } from "../../text/Typography/typography.cva.js";
+import clsx$1 from "clsx";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import clsx$1 from "clsx";
 //#region src/components/inputs/shared/CheckContent.tsx
 var CheckContent = (t0) => {
 	const $ = c(3);

package/dist/components/inputs/shared/InputClear.js

@@ -1,63 +1,77 @@
-import { CloseIcon } from "../../../assets/icons/Close.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
+import { X } from "lucide-react";
+import { clsx } from "clsx";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = (t0) => {
-	const $ = c(12);
+	const $ = c(17);
 	const { onClear, className, style, show, renderStatic } = t0;
-	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
+	const ui = UIConfig.useConfig();
+	const { t } = useTranslation("ui");
+	const alwaysShowClear = ui.input.alwaysShowClear;
 	let clearClassName;
 	let t1;
-	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== renderStatic || $[3] !== show || $[4] !== style) {
+	if ($[0] !== alwaysShowClear || $[1] !== className || $[2] !== onClear || $[3] !== renderStatic || $[4] !== show || $[5] !== style || $[6] !== t) {
 		t1 = Symbol.for("react.early_return_sentinel");
 		bb0: {
 			clearClassName = clsx("relative z-raised flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className);
 			if (renderStatic) {
 				let t2;
-				if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-					t2 = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6 shrink-0" });
-					$[7] = t2;
-				} else t2 = $[7];
+				if ($[9] !== show || $[10] !== t) {
+					t2 = show ? t(_temp) : void 0;
+					$[9] = show;
+					$[10] = t;
+					$[11] = t2;
+				} else t2 = $[11];
+				let t3;
+				if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+					t3 = /* @__PURE__ */ jsx(X, { className: "h-6 w-6 shrink-0" });
+					$[12] = t3;
+				} else t3 = $[12];
 				t1 = /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-hidden": "true",
+					"aria-hidden": !show,
+					"aria-label": t2,
+					"data-static-clear-action": true,
 					tabIndex: -1,
+					onClick: onClear,
 					className: clsx("group inline-flex items-center justify-center border border-solid border-support-transparent-outline", "rounded-button-rounding-s p-0 text-interactive-text-secondary-idle", clearClassName),
 					style,
-					children: t2
+					children: t3
 				});
 				break bb0;
 			}
 		}
 		$[0] = alwaysShowClear;
 		$[1] = className;
-		$[2] = renderStatic;
-		$[3] = show;
-		$[4] = style;
-		$[5] = clearClassName;
-		$[6] = t1;
+		$[2] = onClear;
+		$[3] = renderStatic;
+		$[4] = show;
+		$[5] = style;
+		$[6] = t;
+		$[7] = clearClassName;
+		$[8] = t1;
 	} else {
-		clearClassName = $[5];
-		t1 = $[6];
+		clearClassName = $[7];
+		t1 = $[8];
 	}
 	if (t1 !== Symbol.for("react.early_return_sentinel")) return t1;
 	let t2;
-	if ($[8] !== clearClassName || $[9] !== onClear || $[10] !== style) {
+	if ($[13] !== clearClassName || $[14] !== onClear || $[15] !== style) {
 		t2 = /* @__PURE__ */ jsx(InputClearButton, {
 			onClear,
 			className: clearClassName,
 			style
 		});
-		$[8] = clearClassName;
-		$[9] = onClear;
-		$[10] = style;
-		$[11] = t2;
-	} else t2 = $[11];
+		$[13] = clearClassName;
+		$[14] = onClear;
+		$[15] = style;
+		$[16] = t2;
+	} else t2 = $[16];
 	return t2;
 };
 var InputClearButton = (t0) => {
@@ -66,7 +80,7 @@ var InputClearButton = (t0) => {
 	const { t } = useTranslation("ui");
 	let t1;
 	if ($[0] !== t) {
-		t1 = t(_temp);
+		t1 = t(_temp2);
 		$[0] = t;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -76,9 +90,9 @@ var InputClearButton = (t0) => {
 			color: "secondary",
 			className,
 			label: t1,
-			icon: CloseIcon,
+			icon: X,
 			onPress: onClear,
-			onMouseDown: _temp2,
+			onMouseDown: _temp3,
 			excludeFromTabOrder: true,
 			style
 		});
@@ -93,7 +107,10 @@ var InputClearButton = (t0) => {
 function _temp($) {
 	return $.ui.clearAlt;
 }
-function _temp2(e) {
+function _temp2($) {
+	return $.ui.clearAlt;
+}
+function _temp3(e) {
 	return e.preventDefault();
 }
 //#endregion

package/dist/components/inputs/shared/TooltipWrapper.d.ts

@@ -6,5 +6,5 @@ interface TooltipWrapperProps {
     triggerClassName?: string;
     triggerTabIndex?: number;
 }
-export declare const TooltipWrapper: (props: TooltipWrapperProps) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | null | undefined;
+export declare const TooltipWrapper: (props: TooltipWrapperProps) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/components/inputs/shared/form.binding.d.ts

@@ -0,0 +1,27 @@
+import { DeepKeys, DeepValue, UIForm } from '../../../hooks/useForm';
+export type FieldValues = Record<string, any>;
+export type FieldPath<TFieldValues extends FieldValues> = DeepKeys<TFieldValues>;
+export type FieldPathValue<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = DeepValue<TFieldValues, TName>;
+export type FormInstance<TFieldValues extends FieldValues> = UIForm<TFieldValues>;
+interface FieldControllerProps<TFieldValues extends FieldValues> {
+    control: UIForm<TFieldValues>;
+    name: DeepKeys<TFieldValues>;
+    render: (props: {
+        field: {
+            disabled: boolean;
+            name: string;
+            onBlur: () => void;
+            onChange: (value: any) => void;
+            ref: () => void;
+            value: any;
+        };
+        fieldState: {
+            error?: {
+                message: string;
+            };
+            isDirty: boolean;
+        };
+    }) => React.ReactNode;
+}
+export declare function FieldController<TFieldValues extends FieldValues>({ control: form, name, render, }: FieldControllerProps<TFieldValues>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/shared/form.binding.js

@@ -0,0 +1,57 @@
+import { getFieldError } from "./form.types.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/shared/form.binding.tsx
+function FieldController(t0) {
+	const $ = c(12);
+	const { control: form, name, render } = t0;
+	const T0 = form.Field;
+	let t1;
+	if ($[0] !== form || $[1] !== name) {
+		t1 = form.getFieldValidators(name);
+		$[0] = form;
+		$[1] = name;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== form || $[4] !== name || $[5] !== render) {
+		t2 = (field) => render({
+			field: {
+				disabled: form.disabled,
+				name: field.name,
+				onBlur: () => {
+					field.handleBlur();
+					form.notifyBlur(name);
+				},
+				onChange: field.handleChange,
+				ref: _temp,
+				value: field.state.value
+			},
+			fieldState: {
+				error: getFieldError(field.state.meta.errors) ? { message: getFieldError(field.state.meta.errors) } : void 0,
+				isDirty: field.state.meta.isDirty
+			}
+		});
+		$[3] = form;
+		$[4] = name;
+		$[5] = render;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== form.Field || $[8] !== name || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			name,
+			validators: t1,
+			children: t2
+		});
+		$[7] = form.Field;
+		$[8] = name;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+}
+function _temp() {}
+//#endregion
+export { FieldController };

package/dist/components/inputs/shared/form.types.d.ts

@@ -1,12 +1,13 @@
-import { Control, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+import { DeepKeys, DeepValue, UIForm } from '../../../hooks/useForm';
 export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = TValueProp | "onChange" | "onBlur";
-export interface FormControl<TFieldValues extends FieldValues, TType> {
-    control: Control<TFieldValues>;
+export interface FormControl<TFieldValues extends Record<string, unknown>, TType> {
+    form: UIForm<TFieldValues>;
     name: {
-        [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
-    }[FieldPath<TFieldValues>];
+        [K in DeepKeys<TFieldValues>]: DeepValue<TFieldValues, K> extends TType ? K : never;
+    }[DeepKeys<TFieldValues>];
 }
-export type FormControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
-    formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
+export type FormControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
+    field: FormControl<TFieldValues, TProps[TValueProp] | null>;
 } & Omit<TProps, ControlKeys<TProps, TValueProp>> & Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
-export type ControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;
+export type ControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;
+export declare const getFieldError: (errors: unknown[]) => string | undefined;

package/dist/components/inputs/shared/form.types.js

@@ -0,0 +1,8 @@
+//#region src/components/inputs/shared/form.types.ts
+var getFieldError = (errors) => errors.flatMap((error) => {
+	if (typeof error === "string") return [error];
+	if (error && typeof error === "object" && "message" in error) return [String(error.message)];
+	return [];
+}).at(0);
+//#endregion
+export { getFieldError };

package/dist/components/inputs/shared/input.cva.js

@@ -1,7 +1,7 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { uiOutlineClass } from "../../outline.clsx.js";
-import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
+import { c } from "react/compiler-runtime";
 //#region src/components/inputs/shared/input.cva.ts
 var inputBaseDefinition = UIOverrides.defineConfig({
 	base: [uiOutlineClass, "flex w-full not-[textarea]:truncate"],

package/dist/components/inputs/shared/useStaticInputHandoff.js

@@ -1,18 +1,33 @@
-import { c } from "react/compiler-runtime";
 import { useLayoutEffect, useRef, useState } from "react";
+import { c } from "react/compiler-runtime";
 //#region src/components/inputs/shared/useStaticInputHandoff.ts
 var useStaticInputHandoff = (t0) => {
-	const $ = c(16);
+	const $ = c(18);
 	const { inputRef, renderInput, setRenderInput, getFocusTarget, getPressTarget } = t0;
 	const [shouldFocus, setShouldFocus] = useState(false);
 	const pendingStaticChangeRef = useRef(null);
 	const pendingStaticFocusTargetRef = useRef(null);
 	const resolvedFocusTargetRef = useRef(null);
 	const shouldReplayStaticPressRef = useRef(false);
+	const hoverHandoffFrameRef = useRef(null);
 	let t1;
 	let t2;
-	if ($[0] !== getFocusTarget || $[1] !== getPressTarget || $[2] !== inputRef || $[3] !== renderInput || $[4] !== shouldFocus) {
-		t1 = () => {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => () => {
+			if (hoverHandoffFrameRef.current !== null) cancelAnimationFrame(hoverHandoffFrameRef.current);
+		};
+		t2 = [];
+		$[0] = t1;
+		$[1] = t2;
+	} else {
+		t1 = $[0];
+		t2 = $[1];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[2] !== getFocusTarget || $[3] !== getPressTarget || $[4] !== inputRef || $[5] !== renderInput || $[6] !== shouldFocus) {
+		t3 = () => {
 			if (!renderInput || !shouldFocus) return;
 			const focusRealInput = (replayPendingInteraction) => {
 				const input = inputRef.current;
@@ -45,68 +60,79 @@ var useStaticInputHandoff = (t0) => {
 				cancelAnimationFrame(frame);
 			};
 		};
-		t2 = [
+		t4 = [
 			getFocusTarget,
 			getPressTarget,
 			inputRef,
 			renderInput,
 			shouldFocus
 		];
-		$[0] = getFocusTarget;
-		$[1] = getPressTarget;
-		$[2] = inputRef;
-		$[3] = renderInput;
-		$[4] = shouldFocus;
-		$[5] = t1;
-		$[6] = t2;
+		$[2] = getFocusTarget;
+		$[3] = getPressTarget;
+		$[4] = inputRef;
+		$[5] = renderInput;
+		$[6] = shouldFocus;
+		$[7] = t3;
+		$[8] = t4;
 	} else {
-		t1 = $[5];
-		t2 = $[6];
+		t3 = $[7];
+		t4 = $[8];
 	}
-	useLayoutEffect(t1, t2);
-	let t3;
-	let t4;
+	useLayoutEffect(t3, t4);
 	let t5;
-	if ($[7] !== setRenderInput) {
-		t3 = (focus, target) => {
+	let t6;
+	let t7;
+	if ($[9] !== setRenderInput) {
+		t5 = (focus, target) => {
 			pendingStaticFocusTargetRef.current = target ?? null;
 			setShouldFocus(focus);
-			setRenderInput(true);
+			if (focus) {
+				if (hoverHandoffFrameRef.current !== null) {
+					cancelAnimationFrame(hoverHandoffFrameRef.current);
+					hoverHandoffFrameRef.current = null;
+				}
+				setRenderInput(true);
+				return;
+			}
+			hoverHandoffFrameRef.current = requestAnimationFrame(() => {
+				hoverHandoffFrameRef.current = null;
+				setRenderInput(true);
+			});
 		};
-		t4 = (value) => {
+		t6 = (value) => {
 			pendingStaticChangeRef.current = value;
 			setShouldFocus(true);
 			setRenderInput(true);
 		};
-		t5 = () => {
+		t7 = () => {
 			shouldReplayStaticPressRef.current = true;
 			setShouldFocus(true);
 			setRenderInput(true);
 		};
-		$[7] = setRenderInput;
-		$[8] = t3;
-		$[9] = t4;
+		$[9] = setRenderInput;
 		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
 	} else {
-		t3 = $[8];
-		t4 = $[9];
 		t5 = $[10];
+		t6 = $[11];
+		t7 = $[12];
 	}
-	let t6;
-	if ($[11] !== shouldFocus || $[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
-		t6 = {
+	let t8;
+	if ($[13] !== shouldFocus || $[14] !== t5 || $[15] !== t6 || $[16] !== t7) {
+		t8 = {
 			shouldFocus,
-			renderRealInput: t3,
-			replayStaticInputChange: t4,
-			replayStaticInputPress: t5
+			renderRealInput: t5,
+			replayStaticInputChange: t6,
+			replayStaticInputPress: t7
 		};
-		$[11] = shouldFocus;
-		$[12] = t3;
-		$[13] = t4;
+		$[13] = shouldFocus;
 		$[14] = t5;
 		$[15] = t6;
-	} else t6 = $[15];
-	return t6;
+		$[16] = t7;
+		$[17] = t8;
+	} else t8 = $[17];
+	return t8;
 };
 //#endregion
 export { useStaticInputHandoff };

package/dist/components/navigation/Accordion/Accordion.js

@@ -1,9 +1,9 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { accordionDefinition } from "./accordion.cva.js";
 import { AccordionItem } from "./AccordionItem.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { DisclosureGroup } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/navigation/Accordion/Accordion.tsx
 var Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
 	return /* @__PURE__ */ jsx(DisclosureGroup, {