@povio/ui 3.4.0-rc.2 → 3.4.0-rc.20

package/dist/components/number-input.js

@@ -0,0 +1,242 @@
+import { t as UIConfig } from "../uiConfig.context-SBtRegKv.js";
+import { t as FormField } from "../FormField-DoGaUqFm.js";
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { m as $507fabe10e71c6fb$export$ffd9e5021c1fb2d6, z as $5dc95899b306f630$export$c9058316764c140e } from "../useHover-DwfnacVy.js";
+import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../context-CLFkoJMP.js";
+import { n as $81397a9303501bda$export$23f548e970bdf099, r as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, t as getStaticNumberDisplayValue } from "../numberStatic.utils-C9_kWMXJ.js";
+import { n as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../Input-TO1R-KsB.js";
+import { t as UIOverrides } from "../uiOverrides.context-Bfm2n-n8.js";
+import { t as FieldController } from "../form.binding-DyZ4fH8l.js";
+import { t as TooltipWrapper } from "../TooltipWrapper-CLMp_zj4.js";
+import { t as inputBaseDefinition } from "../input.cva-KYGD4Bdz.js";
+import { n as InputContent, t as useFieldAccessibility } from "../useFieldAccessibility-CmbhtqBy.js";
+import { n as InputFrame, t as useStaticInputHandoff } from "../useStaticInputHandoff-COJdSrME.js";
+import { t as IntlUtils } from "../intl.utils-zwAFoZ0U.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Input/NumberInput/NumberInput.tsx
+const NumberInputBase = (props) => {
+	"use no memo";
+	const ui = UIConfig.useConfig();
+	const inputBaseCva = UIOverrides.useCva("input.baseCva", inputBaseDefinition);
+	const hasControlledValue = "value" in props;
+	const inputRef = useRef(null);
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, isClearableIfDisabled, autoFocusOnMount, ...rest } = props;
+	const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const numberFieldRef = useRef(null);
+	const { isFocusVisible } = $507fabe10e71c6fb$export$ffd9e5021c1fb2d6();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const numberProps = {
+		...rest,
+		value: hasControlledValue ? value ?? NaN : void 0,
+		label,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		onChange: (nextValue) => onChange?.(Number.isNaN(nextValue) ? null : nextValue),
+		onBlur: (e) => onBlur?.({ target: e.target }),
+		locale,
+		formatOptions
+	};
+	const state = $de67e98908f0c6ee$export$7f629e9dc1ecf37c(numberProps);
+	const { labelProps, inputProps } = $81397a9303501bda$export$23f548e970bdf099(numberProps, state, numberFieldRef);
+	const { describedBy, errorMessageId, helperTextId } = useFieldAccessibility({
+		describedBy: inputProps["aria-describedby"],
+		error,
+		helperText
+	});
+	useEffect(() => {
+		if (!autoFocusOnMount || isDisabled) return;
+		requestAnimationFrame(() => inputRef.current?.focus());
+	}, [autoFocusOnMount, isDisabled]);
+	const formFieldProps = {
+		errorMessageId,
+		error,
+		label,
+		tooltipText,
+		helperText,
+		helperTextId,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const handleInputBlur = useCallback((e) => {
+		const target = numberFieldRef.current ?? e?.target;
+		onBlur?.({ target });
+	}, [onBlur]);
+	const inputContentProps = {
+		unit,
+		isLoading,
+		isDisabled,
+		action,
+		leadingIcon,
+		trailingIcon,
+		isClearable,
+		isClearableIfDisabled,
+		onChange: (nextValue) => {
+			if (nextValue === "") state.setInputValue("");
+			onChange?.(nextValue === "" ? null : Number(nextValue));
+		},
+		value: state.inputValue,
+		onBlur: handleInputBlur
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const dataIsDisabled = isDisabled || void 0;
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group w-full", className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				"data-is-empty": value === null || value === void 0 || void 0,
+				"data-is-required": isRequired || void 0,
+				"data-is-disabled": dataIsDisabled,
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, {
+						...inputProps,
+						"aria-describedby": describedBy,
+						"aria-errormessage": errorMessageId,
+						ref: $5dc95899b306f630$export$c9058316764c140e(ref, inputRef, numberFieldRef),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-empty": state.inputValue === "" || state.inputValue === void 0 || state.inputValue === null || void 0,
+						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
+						"data-is-disabled": dataIsDisabled,
+						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
+						className: "w-full bg-transparent outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
+				})
+			})
+		})
+	});
+};
+const NumberInputInner = ({ renderStaticInput, isFormControlDisabled, ...props }) => {
+	"use no memo";
+	const ui = UIConfig.useConfig();
+	const { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+	const [renderInput, setRenderInput] = useState(!(renderStaticInput ?? ui.renderStaticInput));
+	const inputRef = useRef(null);
+	const { shouldFocus, renderRealInput, replayStaticInputChange } = useStaticInputHandoff({
+		inputRef,
+		renderInput,
+		setRenderInput
+	});
+	if (!renderInput) {
+		const staticValue = props.value ?? props.defaultValue;
+		const formatOptions = props.formatOptions ?? ui.numberInput.formatOptions;
+		const displayValue = getStaticNumberDisplayValue(staticValue, IntlUtils.getNumberFormatter(locale, formatOptions)) ?? "";
+		const hasValue = displayValue !== "";
+		const as = props.as ?? ui.input.as;
+		let isDisabled = !!props.isDisabled;
+		if (isFormControlDisabled) isDisabled = true;
+		const dataAttributes = {
+			dataIsEmpty: !hasValue,
+			dataIsFilled: hasValue,
+			dataIsDirty: props.isDirty,
+			dataIsRequired: props.isRequired,
+			dataIsDisabled: isDisabled,
+			dataDisabled: isDisabled,
+			dataInvalid: !!props.error,
+			dataHasSelection: hasValue
+		};
+		return /* @__PURE__ */ jsx(InputFrame, {
+			...props,
+			isDisabled,
+			className: clsx("group w-full", as === "inline" && "h-full", props.className),
+			dataAttributes,
+			onStaticInteract: renderRealInput,
+			inputClassName: props.inputClassName,
+			contentClassName: clsx(as === "inline" && "h-full", "pr-0!"),
+			trailingClassName: "py-0! pl-0!",
+			wrapContentAndTrailing: true,
+			reserveTrailingContent: true,
+			children: (dataAttributeProps) => /* @__PURE__ */ jsx("input", {
+				type: "text",
+				ref: inputRef,
+				disabled: isDisabled,
+				inputMode: "numeric",
+				tabIndex: -1,
+				value: displayValue,
+				placeholder: as === "floating" ? "" : props.placeholder,
+				className: "w-full bg-transparent outline-none",
+				onChange: (event) => replayStaticInputChange(event.target.value),
+				...dataAttributeProps,
+				"data-rac": true
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberInputBase, {
+		...props,
+		ref: $5dc95899b306f630$export$c9058316764c140e(props.ref, inputRef),
+		autoFocusOnMount: shouldFocus
+	});
+};
+/** @internal Exported for production render benchmarks. */
+const NumberInputComponent = ({ renderStaticInput, ...props }) => {
+	"use no memo";
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(NumberInputInner, {
+				...innerProps,
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				isFormControlDisabled: !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message,
+				renderStaticInput
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(NumberInputInner, {
+		...props,
+		renderStaticInput
+	});
+};
+const NumberInput = memo(NumberInputComponent);
+//#endregion
+export { NumberInput, NumberInputComponent };

package/dist/components/number-range-input.d.ts

@@ -0,0 +1,2 @@
+import { i as NumberRangeValue, n as NumberRangeInput, r as NumberRangeInputProps, t as ControlledNumberRangeInputProps } from "../NumberRangeInput-DS6_DIEc.js";
+export { ControlledNumberRangeInputProps, NumberRangeInput, NumberRangeInputProps, type NumberRangeValue };

package/dist/components/number-range-input.js

@@ -0,0 +1,2 @@
+import { t as NumberRangeInput } from "../NumberRangeInput-BsATw2M1.js";
+export { NumberRangeInput };

package/dist/components/pagination-list.d.ts

@@ -0,0 +1,2 @@
+import { n as PaginationListProps, t as PaginationList } from "../PaginationList-71pjqcQ0.js";
+export { PaginationList, PaginationListProps };

package/dist/components/pagination-list.js

@@ -0,0 +1,2 @@
+import { t as PaginationList } from "../PaginationList-DJfUpGY9.js";
+export { PaginationList };

package/dist/components/pagination.d.ts

@@ -0,0 +1,2 @@
+import { n as PaginationProps, t as Pagination } from "../Pagination-YrWwwM_f.js";
+export { Pagination, PaginationProps };

package/dist/components/pagination.js

@@ -0,0 +1,131 @@
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { t as Typography } from "../Typography-AcUd9df8.js";
+import "../i18n-C2TBJvnh.js";
+import { NumberInput } from "./number-input.js";
+import { t as PaginationList } from "../PaginationList-DJfUpGY9.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/shared/pagination/Pagination.tsx
+const Pagination = (t0) => {
+	const $ = c(34);
+	const { size: t1, variant: t2, color: t3, page, totalItems, totalPages, pageSize, hideText: t4, hideFirstLast: t5, hidePrevNext: t6, hideNumbers: t7, className, onPageChange, onPageSizeChange } = t0;
+	const size = t1 === void 0 ? "s" : t1;
+	const variant = t2 === void 0 ? "subtle" : t2;
+	const color = t3 === void 0 ? "secondary" : t3;
+	const hideText = t4 === void 0 ? true : t4;
+	const hideFirstLast = t5 === void 0 ? true : t5;
+	const hidePrevNext = t6 === void 0 ? false : t6;
+	const hideNumbers = t7 === void 0 ? false : t7;
+	const { t } = useTranslation("ui");
+	let t8;
+	if ($[0] !== className) {
+		t8 = clsx("flex items-center gap-2", className);
+		$[0] = className;
+		$[1] = t8;
+	} else t8 = $[1];
+	let t9;
+	if ($[2] !== color || $[3] !== hideFirstLast || $[4] !== hideNumbers || $[5] !== hidePrevNext || $[6] !== hideText || $[7] !== onPageChange || $[8] !== page || $[9] !== pageSize || $[10] !== size || $[11] !== totalItems || $[12] !== totalPages || $[13] !== variant) {
+		t9 = totalItems > pageSize && /* @__PURE__ */ jsx(PaginationList, {
+			page,
+			size,
+			color,
+			variant,
+			hideText,
+			hideFirstLast,
+			hidePrevNext,
+			hideNumbers,
+			totalPages: totalPages ?? Math.ceil(totalItems / pageSize),
+			onPageChange
+		});
+		$[2] = color;
+		$[3] = hideFirstLast;
+		$[4] = hideNumbers;
+		$[5] = hidePrevNext;
+		$[6] = hideText;
+		$[7] = onPageChange;
+		$[8] = page;
+		$[9] = pageSize;
+		$[10] = size;
+		$[11] = totalItems;
+		$[12] = totalPages;
+		$[13] = variant;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== t) {
+		t10 = t(_temp);
+		$[15] = t;
+		$[16] = t10;
+	} else t10 = $[16];
+	let t11;
+	if ($[17] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Typography, {
+			variant: "default",
+			size: "label-2",
+			as: "span",
+			className: "whitespace-nowrap text-text-default-1",
+			children: t10
+		});
+		$[17] = t10;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== onPageSizeChange) {
+		t12 = (value) => onPageSizeChange?.(Number(value));
+		$[19] = onPageSizeChange;
+		$[20] = t12;
+	} else t12 = $[20];
+	let t13;
+	if ($[21] !== t) {
+		t13 = t(_temp2);
+		$[21] = t;
+		$[22] = t13;
+	} else t13 = $[22];
+	let t14;
+	if ($[23] !== pageSize || $[24] !== t12 || $[25] !== t13) {
+		t14 = /* @__PURE__ */ jsx(NumberInput, {
+			value: pageSize,
+			onChange: t12,
+			label: t13,
+			hideLabel: true,
+			className: "w-min",
+			inputClassName: "min-w-12 !px-3 !py-0-5"
+		});
+		$[23] = pageSize;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+	} else t14 = $[26];
+	let t15;
+	if ($[27] !== t11 || $[28] !== t14) {
+		t15 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [t11, t14]
+		});
+		$[27] = t11;
+		$[28] = t14;
+		$[29] = t15;
+	} else t15 = $[29];
+	let t16;
+	if ($[30] !== t15 || $[31] !== t8 || $[32] !== t9) {
+		t16 = /* @__PURE__ */ jsxs("nav", {
+			id: "pagination",
+			className: t8,
+			children: [t9, t15]
+		});
+		$[30] = t15;
+		$[31] = t8;
+		$[32] = t9;
+		$[33] = t16;
+	} else t16 = $[33];
+	return t16;
+};
+function _temp($) {
+	return $.ui.pagination.resultsPerPage;
+}
+function _temp2($_0) {
+	return $_0.ui.pagination.resultsPerPage;
+}
+//#endregion
+export { Pagination };

package/dist/components/password-input.d.ts

@@ -0,0 +1,2 @@
+import { n as PasswordInput, r as PasswordInputProps, t as ControlledPasswordInputProps } from "../PasswordInput-XI0n5I1s.js";
+export { ControlledPasswordInputProps, PasswordInput, PasswordInputProps };

package/dist/components/password-input.js

@@ -0,0 +1,2 @@
+import { t as PasswordInput } from "../PasswordInput-BUZPRoOL.js";
+export { PasswordInput };

package/dist/components/pill-button.d.ts

@@ -0,0 +1,2 @@
+import { n as PillButtonProps, t as PillButton } from "../PillButton-NdrR6uVR.js";
+export { PillButton, PillButtonProps };

package/dist/components/pill-button.js

@@ -0,0 +1,73 @@
+import { t as X } from "../x-BYOEO0gW.js";
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../Button-Cq7t4Xxl.js";
+import { t as $efde0372d7a700fe$export$d2b052e7b4be1756 } from "../ToggleButton-D94yRla8.js";
+import { t as UIOverrides } from "../uiOverrides.context-Bfm2n-n8.js";
+import { t as ButtonContent } from "../ButtonContent-17xvQXod.js";
+import { a as pillButtonTypography, i as pillButtonIconSize, r as pillButtonDefinition, t as pillButtonContent } from "../pillButton.cva-DbwzixcK.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/buttons/PillButton/PillButton.tsx
+const PillButton = (t0) => {
+	const $ = c(17);
+	const { children, dismissable, toggle, icon, iconPosition, contentRef, ...props } = t0;
+	const pillButtonCva = UIOverrides.useCva("pillButton.cva", pillButtonDefinition);
+	const pillButtonTypographyMap = UIOverrides.useMapper("pillButton.typography", pillButtonTypography);
+	const Component = toggle ? $efde0372d7a700fe$export$d2b052e7b4be1756 : $d2b4bc8c273e7be6$export$353f5b6fc5456de1;
+	let t1;
+	if ($[0] !== dismissable || $[1] !== icon || $[2] !== iconPosition) {
+		t1 = () => {
+			if (dismissable) return "right";
+			return icon ? iconPosition : "none";
+		};
+		$[0] = dismissable;
+		$[1] = icon;
+		$[2] = iconPosition;
+		$[3] = t1;
+	} else t1 = $[3];
+	const getIconPosition = t1;
+	const t2 = clsx(pillButtonCva({
+		...props,
+		className: props.className
+	}), pillButtonContent({ iconPosition: getIconPosition() }));
+	const T0 = ButtonContent;
+	const t3 = dismissable ? X : icon;
+	const t4 = dismissable ? "right" : iconPosition;
+	const t5 = pillButtonIconSize;
+	const t6 = pillButtonTypographyMap({ ...props });
+	let t7;
+	if ($[4] !== T0 || $[5] !== children || $[6] !== contentRef || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			ref: contentRef,
+			content: children,
+			icon: t3,
+			iconPosition: t4,
+			iconClassName: t5,
+			typography: t6
+		});
+		$[4] = T0;
+		$[5] = children;
+		$[6] = contentRef;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== Component || $[13] !== props || $[14] !== t2 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Component, {
+			...props,
+			className: t2,
+			children: t7
+		});
+		$[12] = Component;
+		$[13] = props;
+		$[14] = t2;
+		$[15] = t7;
+		$[16] = t8;
+	} else t8 = $[16];
+	return t8;
+};
+//#endregion
+export { PillButton };

package/dist/components/pill.d.ts

@@ -0,0 +1,2 @@
+import { n as PillProps, t as Pill } from "../Pill-DSt6f4Eq.js";
+export { Pill, PillProps };

package/dist/components/pill.js

@@ -0,0 +1,44 @@
+import { t as UIConfig } from "../uiConfig.context-SBtRegKv.js";
+import { t as X } from "../x-BYOEO0gW.js";
+import { t as clsx } from "../clsx-CnD0nOiA.js";
+import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../Button-Cq7t4Xxl.js";
+import { t as UIOverrides } from "../uiOverrides.context-Bfm2n-n8.js";
+import { t as Typography } from "../Typography-AcUd9df8.js";
+import { r as pillButtonDefinition } from "../pillButton.cva-DbwzixcK.js";
+import "../i18n-C2TBJvnh.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/text/Pill/Pill.tsx
+const Pill = ({ className, children, dismissable, isDisabled, onDismiss, contentRef, variant = "subtle", ...props }) => {
+	const uiConfig = UIConfig.useConfig();
+	const { textVariant = uiConfig.tag.textVariant, textSize = uiConfig.tag.textSize } = props;
+	const pillCva = UIOverrides.useCva("pillButton.cva", pillButtonDefinition);
+	const { t } = useTranslation("ui");
+	const buttonProps = {
+		isDisabled,
+		onPress: onDismiss,
+		label: t(($) => $.ui.tag.dismiss),
+		...props
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: pillCva({
+			...props,
+			variant,
+			className: clsx("pointer-events-none inline-flex gap-list-gap-icon-to-label overflow-hidden", className)
+		}),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			ref: contentRef,
+			variant: textVariant,
+			size: textSize,
+			as: "span",
+			className: "truncate",
+			children
+		}), dismissable && /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, {
+			...buttonProps,
+			className: "pointer-events-auto shrink-0",
+			children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+		})]
+	});
+};
+//#endregion
+export { Pill };

package/dist/components/progress-bar.d.ts

@@ -0,0 +1,2 @@
+import { t as ProgressBar } from "../ProgressBar-DG-ClG9v.js";
+export { ProgressBar };

package/dist/components/progress-bar.js

@@ -0,0 +1,2 @@
+import { t as ProgressBar } from "../ProgressBar-C8dtVA-1.js";
+export { ProgressBar };

package/dist/components/query-autocomplete.d.ts

@@ -0,0 +1,8 @@
+import { n as FieldValues } from "../form.binding-DWlFTecs.js";
+import { s as SelectItem } from "../SelectBase-C4lPY7Hc.js";
+import { n as QueryFn, t as QueryAutocompleteProps } from "../queryAutocomplete.types-3ezR8y7k.js";
+//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts
+declare const QueryAutocompleteComponent: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>(props: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+declare const QueryAutocomplete: typeof QueryAutocompleteComponent;
+//#endregion
+export { QueryAutocomplete };

package/dist/components/query-autocomplete.js

@@ -0,0 +1,104 @@
+import { t as UIConfig } from "../uiConfig.context-SBtRegKv.js";
+import { z as $5dc95899b306f630$export$c9058316764c140e } from "../useHover-DwfnacVy.js";
+import { t as FieldController } from "../form.binding-DyZ4fH8l.js";
+import { Autocomplete } from "./autocomplete.js";
+import { n as getQueryItems, r as getSelectionIdsToResolve, t as useQueryAutocomplete } from "../useQueryAutocomplete-CraXvRm_.js";
+import { memo, useCallback, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
+const LoadedQueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, isQueryEnabledInitially = false, leadingContent, ...props }) => {
+	"use no memo";
+	const ui = UIConfig.useConfig();
+	const [search, setSearch] = useState("");
+	const { onBlur, onChange } = props;
+	const value = "value" in props ? props.value : void 0;
+	const selectedIdsToResolve = getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	});
+	const shouldEnableInitialQuery = selectedIdsToResolve.count > 0;
+	const isInitialQueryDisabled = props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled;
+	const shouldDisableInitialQuery = !isQueryEnabledInitially && !shouldEnableInitialQuery && (selectedIdsToResolve.isResolvedByInitialSelection || isInitialQueryDisabled);
+	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
+		query,
+		queryParams,
+		queryOptions,
+		mapItems: useCallback((data) => getQueryItems(data, queryMap), [queryMap]),
+		resolveSelectedItemsWithIds: resolveSelectedItemsWithIds ?? ui.queryAutocomplete?.resolveSelectedItemsWithIds,
+		search,
+		initialQueryState: shouldDisableInitialQuery,
+		selectedIdsToResolve: selectedIdsToResolve.items
+	});
+	const handleChange = useCallback((value) => {
+		onChange?.(value);
+		onBlur?.({ target: { value: null } });
+	}, [onBlur, onChange]);
+	const autocompleteProps = useMemo(() => {
+		const { isInitialQueryDisabled: _, onChange: __, ...rest } = props;
+		return rest;
+	}, [props]);
+	const onSearchChange = useCallback((value) => {
+		setSearch(value);
+		handleEnableQuery();
+	}, [handleEnableQuery]);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...autocompleteProps,
+		items,
+		totalItems,
+		onSearchChange,
+		isClientSearchDisabled: true,
+		isLoading,
+		onChange: handleChange,
+		searchDebounceDelay: props.searchDebounceDelay ?? ui.queryAutocomplete?.searchDebounceDelay,
+		onMouseEnter: handleEnableQuery,
+		onFocusCapture: handleEnableQuery,
+		leadingContent,
+		hasLoadMore: hasNextPage,
+		onLoadMore: fetchNextPage
+	});
+};
+const QueryAutocompleteContent = (props) => {
+	const [isQueryMounted, setIsQueryMounted] = useState(false);
+	const value = "value" in props ? props.value : void 0;
+	if (!getSelectionIdsToResolve({
+		initialSelection: props.initialSelection,
+		value,
+		mapInitialToSelectItem: props.mapInitialToSelectItem
+	}).isResolvedByInitialSelection || isQueryMounted) return /* @__PURE__ */ jsx(LoadedQueryAutocompleteContent, {
+		...props,
+		isQueryEnabledInitially: isQueryMounted
+	});
+	const { query: _, queryParams: _queryParams, queryOptions: _queryOptions, queryMap: _queryMap, resolveSelectedItemsWithIds: _resolveSelectedItemsWithIds, isInitialQueryDisabled: _isInitialQueryDisabled, ...autocompleteProps } = props;
+	const mountQuery = () => setIsQueryMounted(true);
+	return /* @__PURE__ */ jsx(Autocomplete, {
+		...autocompleteProps,
+		items: [],
+		onMouseEnter: mountQuery,
+		onFocusCapture: mountQuery
+	});
+};
+const QueryAutocompleteComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		const controlWithOptions = field.form;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(QueryAutocompleteContent, {
+				...innerProps,
+				ref: $5dc95899b306f630$export$c9058316764c140e(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(QueryAutocompleteContent, { ...props });
+};
+const QueryAutocomplete = memo(QueryAutocompleteComponent);
+//#endregion
+export { QueryAutocomplete };

package/dist/components/query-select.d.ts

@@ -0,0 +1,2 @@
+import { n as QuerySelectProps, t as QuerySelect } from "../QuerySelect-W0euIrkL.js";
+export { QuerySelect, QuerySelectProps };