@povio/ui 3.1.0 → 3.2.0

package/dist/components/inputs/Input/shared/InputContent.js

@@ -4,74 +4,208 @@ import { Loader } from "../../../status/Loader/Loader.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
-import { inputSizeDefinition } from "../../shared/input.cva.js";
+import { inputContentWrapperDefinition, inputSizeDefinition } from "../../shared/input.cva.js";
+import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/inputs/Input/shared/InputContent.tsx
-var InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
+var InputContent = (t0) => {
+	const $ = c(64);
+	const { leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size } = t0;
 	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
 	const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
-	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
-	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
+	const inputContentWrapperCva = UIOverrides.useCva("input.contentWrapperCva", inputContentWrapperDefinition);
+	let t1;
+	if ($[0] !== LeadingIcon) {
+		t1 = LeadingIcon && isValidElement(LeadingIcon);
+		$[0] = LeadingIcon;
+		$[1] = t1;
+	} else t1 = $[1];
+	const isLeadingIconElement = t1;
+	let t2;
+	if ($[2] !== TrailingIcon) {
+		t2 = TrailingIcon && isValidElement(TrailingIcon);
+		$[2] = TrailingIcon;
+		$[3] = t2;
+	} else t2 = $[3];
+	const isTrailingIconElement = t2;
 	const showClear = value != null && value !== "" && !isDisabled;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-input-gap-input-text-to-elements",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
-				size,
-				as
-			}), "group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", as === "inline" && "h-full"),
-			children: [LeadingIcon && /* @__PURE__ */ jsx("div", {
-				className: clsx(!isLeadingIconElement && "pointer-events-none"),
-				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-			}), /* @__PURE__ */ jsxs("div", {
-				className: clsx("flex w-full", as === "floating" && "flex-col", as === "filter" && "gap-input-gap-input-text-to-elements"),
-				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-					as,
-					size,
-					...headerProps
-				}), children]
-			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
-				size,
-				as
-			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!", !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none"),
+	const t3 = as === "inline" && "h-full";
+	let t4;
+	if ($[4] !== as || $[5] !== inputSizeCva || $[6] !== size || $[7] !== t3) {
+		t4 = clsx("group/input-content flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", t3, inputSizeCva({
+			size,
+			as
+		}));
+		$[4] = as;
+		$[5] = inputSizeCva;
+		$[6] = size;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== LeadingIcon || $[10] !== isLeadingIconElement) {
+		t5 = LeadingIcon && /* @__PURE__ */ jsx("div", {
+			className: clsx(!isLeadingIconElement && "pointer-events-none"),
+			children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+		});
+		$[9] = LeadingIcon;
+		$[10] = isLeadingIconElement;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== as || $[13] !== inputContentWrapperCva) {
+		t6 = inputContentWrapperCva({ as });
+		$[12] = as;
+		$[13] = inputContentWrapperCva;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== as || $[16] !== headerProps || $[17] !== size) {
+		t7 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+			as,
+			size,
+			...headerProps
+		});
+		$[15] = as;
+		$[16] = headerProps;
+		$[17] = size;
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== children || $[20] !== t6 || $[21] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: t6,
+			children: [t7, children]
+		});
+		$[19] = children;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
+	if ($[23] !== t4 || $[24] !== t5 || $[25] !== t8) {
+		t9 = /* @__PURE__ */ jsxs("div", {
+			className: t4,
+			children: [t5, t8]
+		});
+		$[23] = t4;
+		$[24] = t5;
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
+	let t10;
+	if ($[27] !== action || $[28] !== as || $[29] !== inputSizeCva || $[30] !== isClearable || $[31] !== isTrailingIconElement || $[32] !== showClear || $[33] !== size) {
+		t10 = clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
+			size,
+			as
+		}), !isTrailingIconElement && !action && !(isClearable && showClear) && "pointer-events-none");
+		$[27] = action;
+		$[28] = as;
+		$[29] = inputSizeCva;
+		$[30] = isClearable;
+		$[31] = isTrailingIconElement;
+		$[32] = showClear;
+		$[33] = size;
+		$[34] = t10;
+	} else t10 = $[34];
+	let t11;
+	if ($[35] !== isClearable || $[36] !== onBlur || $[37] !== onChange || $[38] !== showClear) {
+		t11 = isClearable && /* @__PURE__ */ jsx(InputClear, {
+			onClear: () => {
+				onChange?.("");
+				onBlur?.({ target: { value: "" } });
+			},
+			show: showClear
+		});
+		$[35] = isClearable;
+		$[36] = onBlur;
+		$[37] = onChange;
+		$[38] = showClear;
+		$[39] = t11;
+	} else t11 = $[39];
+	let t12;
+	if ($[40] !== typographyCva || $[41] !== unit) {
+		t12 = unit && /* @__PURE__ */ jsx("span", {
+			className: typographyCva({
+				size: "label-2",
+				sizeMobile: "label-2",
+				variant: "prominent-1",
+				className: "text-text-default-3"
+			}),
+			children: unit
+		});
+		$[40] = typographyCva;
+		$[41] = unit;
+		$[42] = t12;
+	} else t12 = $[42];
+	let t13;
+	if ($[43] !== isLoading) {
+		t13 = isLoading && /* @__PURE__ */ jsx("div", {
+			className: "inline-flex",
+			children: /* @__PURE__ */ jsx(Loader, {})
+		});
+		$[43] = isLoading;
+		$[44] = t13;
+	} else t13 = $[44];
+	let t14;
+	if ($[45] !== action || $[46] !== isDisabled || $[47] !== isLoading) {
+		t14 = !isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			icon: action.icon,
+			isDisabled,
+			onPress: action.onClick,
+			excludeFromTabOrder: true,
+			label: action.altText,
+			className: clsx("border-0!", action.className),
+			"data-static-press-action": ""
+		});
+		$[45] = action;
+		$[46] = isDisabled;
+		$[47] = isLoading;
+		$[48] = t14;
+	} else t14 = $[48];
+	let t15;
+	if ($[49] !== TrailingIcon || $[50] !== action || $[51] !== isLoading || $[52] !== isTrailingIconElement) {
+		t15 = !isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }));
+		$[49] = TrailingIcon;
+		$[50] = action;
+		$[51] = isLoading;
+		$[52] = isTrailingIconElement;
+		$[53] = t15;
+	} else t15 = $[53];
+	let t16;
+	if ($[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15) {
+		t16 = /* @__PURE__ */ jsxs("div", {
+			className: t10,
 			children: [
-				isClearable && /* @__PURE__ */ jsx(InputClear, {
-					onClear: () => {
-						onChange?.("");
-						onBlur?.({ target: { value: "" } });
-					},
-					show: showClear
-				}),
-				unit && /* @__PURE__ */ jsx("span", {
-					className: typographyCva({
-						size: "label-2",
-						sizeMobile: "label-2",
-						variant: "prominent-1",
-						className: "text-text-default-3"
-					}),
-					children: unit
-				}),
-				isLoading && /* @__PURE__ */ jsx("div", {
-					className: "inline-flex",
-					children: /* @__PURE__ */ jsx(Loader, {})
-				}),
-				!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
-					color: "secondary",
-					icon: action.icon,
-					isDisabled,
-					onPress: action.onClick,
-					excludeFromTabOrder: true,
-					label: action.altText,
-					className: clsx("border-0!", action.className)
-				}),
-				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+				t11,
+				t12,
+				t13,
+				t14,
+				t15
 			]
-		})]
-	});
+		});
+		$[54] = t10;
+		$[55] = t11;
+		$[56] = t12;
+		$[57] = t13;
+		$[58] = t14;
+		$[59] = t15;
+		$[60] = t16;
+	} else t16 = $[60];
+	let t17;
+	if ($[61] !== t16 || $[62] !== t9) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-input-gap-input-text-to-elements",
+			children: [t9, t16]
+		});
+		$[61] = t16;
+		$[62] = t9;
+		$[63] = t17;
+	} else t17 = $[63];
+	return t17;
 };
 //#endregion
 export { InputContent };

package/dist/components/inputs/Input/shared/numberStatic.utils.d.ts

@@ -0,0 +1 @@
+export declare const getStaticNumberDisplayValue: (value: unknown, formatter: Intl.NumberFormat) => string | null;

package/dist/components/inputs/Input/shared/numberStatic.utils.js

@@ -0,0 +1,7 @@
+//#region src/components/inputs/Input/shared/numberStatic.utils.ts
+var getStaticNumberDisplayValue = (value, formatter) => {
+	if (typeof value !== "number" || !Number.isFinite(value)) return null;
+	return formatter.format(value);
+};
+//#endregion
+export { getStaticNumberDisplayValue };

package/dist/components/inputs/Inputs/Form.js

@@ -2,8 +2,8 @@ import { InputItem } from "./InputItem.js";
 import { StringUtils } from "../../../utils/string.utils.js";
 import { ZodUtils } from "../../../utils/zod.utils.js";
 import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
 import { z } from "zod";
 //#region src/components/inputs/Inputs/Form.tsx
 var createFieldComponent = (field, schemaKeyType, form) => {
@@ -23,22 +23,51 @@ var createFieldComponent = (field, schemaKeyType, form) => {
 		});
 	};
 };
-function Form({ form, schema, onSubmit, onError, className, children }) {
-	const components = useMemo(() => {
-		const fieldComponents = {};
+function Form(t0) {
+	const $ = c(14);
+	const { form, schema, onSubmit, onError, className, children } = t0;
+	let fieldComponents;
+	if ($[0] !== form || $[1] !== schema.shape) {
+		fieldComponents = {};
 		const fields = Object.keys(schema.shape);
 		for (const field of fields) {
 			const componentName = StringUtils.capitalize(String(field));
 			const schemaKeyType = schema.shape[field];
 			fieldComponents[componentName] = createFieldComponent(field, schemaKeyType, form);
 		}
-		return fieldComponents;
-	}, [schema.shape, form]);
-	return /* @__PURE__ */ jsx("form", {
-		onSubmit: form.handleSubmit(onSubmit, onError),
-		className,
-		children: children(components)
-	});
+		$[0] = form;
+		$[1] = schema.shape;
+		$[2] = fieldComponents;
+	} else fieldComponents = $[2];
+	const components = fieldComponents;
+	let t1;
+	if ($[3] !== form || $[4] !== onError || $[5] !== onSubmit) {
+		t1 = form.handleSubmit(onSubmit, onError);
+		$[3] = form;
+		$[4] = onError;
+		$[5] = onSubmit;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== components) {
+		t2 = children(components);
+		$[7] = children;
+		$[8] = components;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== className || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx("form", {
+			onSubmit: t1,
+			className,
+			children: t2
+		});
+		$[10] = className;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 }
 //#endregion
 export { Form };

package/dist/components/inputs/Inputs/InputItem.d.ts

@@ -1,33 +1,27 @@
 import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
 import { Control, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
+import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
+import { Select } from '../Selection/Select/Select';
 import { HasRequiredProperty } from '../../../types/common';
 declare const componentRegistry: {
     readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly checkbox: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Checkbox/Checkbox').ControlledCheckboxProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberInput/NumberInput').ControlledNumberInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly numberRangeInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/NumberRangeInput/NumberRangeInput').ControlledNumberRangeInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly slider: <TFieldValues extends import('react-hook-form').FieldValues, IsRange extends boolean = false>(props: import('../Slider/Slider').ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
-    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly select: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/Select').ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly autocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../Selection/shared/select.types').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Autocomplete/Autocomplete').ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
-    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../Selection/shared/select.types').SelectItem<any>, TQueryFn extends (...args: any) => import('@tanstack/react-query').UseQueryResult<TSelectItem[]>>({ query, queryParams, queryOptions, ...props }: import('../../../types/common').OmitDiscriminatedUnion<import('../Selection/Autocomplete/Autocomplete').AutocompleteProps<Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never>, "onChange" | "value" | "items" | "selectionMode" | "isLoading" | "showSelectionBar" | "showSelectAllOption" | "initialSelection" | "showSelectionContent" | "onSearchChange"> & (import('../Selection/shared/select.types').GroupedSelectControlProps<TFieldValues, Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
-        id: infer InferredKey extends import('react-aria').Key;
-    } ? InferredKey : never> & {
-        query: Parameters<TQueryFn>[0] extends {
-            search?: string;
-        } ? TQueryFn : never;
-        queryParams?: Omit<Parameters<TQueryFn>[0], "search"> | undefined;
-        queryOptions?: Parameters<TQueryFn>[1] | undefined;
-    })) => import("react/jsx-runtime").JSX.Element;
+    readonly select: typeof Select;
+    readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
+    readonly autocomplete: typeof Autocomplete;
+    readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
     readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
-    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
-    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly timePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ renderStaticInput, ...props }: import('../DateTime/TimePicker/TimePicker').ControlledTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+    readonly dateRangePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DateRangePicker/DateRangePicker').ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;
@@ -56,8 +50,8 @@ type TypeBasedInputDef<TSchemaType extends Record<string, any>, T extends InputC
 interface RenderBasedInputDef<TSchemaType extends Record<string, any>, K extends keyof TSchemaType> {
     type?: never;
     name: K;
-    label?: never;
-    placeholder?: never;
+    label?: string;
+    placeholder?: string;
     props?: never;
     inputWrapper?: never;
     render: (formControl: {

package/dist/components/inputs/Inputs/InputItem.js

@@ -6,6 +6,7 @@ import { DateRangePicker } from "../DateTime/DateRangePicker/DateRangePicker.js"
 import { DateTimePicker } from "../DateTime/DateTimePicker/DateTimePicker.js";
 import { TimePicker } from "../DateTime/TimePicker/TimePicker.js";
 import { NumberInput } from "../Input/NumberInput/NumberInput.js";
+import { NumberRangeInput } from "../Input/NumberRangeInput/NumberRangeInput.js";
 import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
 import { TextArea } from "../Input/TextArea/TextArea.js";
 import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
@@ -13,17 +14,21 @@ import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.j
 import { Slider } from "../Slider/Slider.js";
 import { Toggle } from "../Toggle/Toggle.js";
 import { Segment } from "../../segment/Segment.js";
+import { QuerySelect } from "../Selection/Select/QuerySelect.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
 	toggle: Toggle,
 	checkbox: Checkbox,
 	numberInput: NumberInput,
+	numberRangeInput: NumberRangeInput,
 	slider: Slider,
 	textInput: TextInput,
 	passwordInput: PasswordInput,
 	textArea: TextArea,
 	select: Select,
+	querySelect: QuerySelect,
 	autocomplete: Autocomplete,
 	queryAutocomplete: QueryAutocomplete,
 	segment: Segment,
@@ -33,24 +38,74 @@ var componentRegistry = {
 	dateRangePicker: DateRangePicker,
 	unknown: null
 };
-function InputItem({ form, inputDef }) {
+function InputItem(t0) {
+	const $ = c(18);
+	const { form, inputDef } = t0;
 	const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
-	const formControl = {
-		control: form.control,
-		name
-	};
-	if (render) return render(formControl, form);
+	const t1 = form.control;
+	let formControl;
+	let t2;
+	if ($[0] !== form || $[1] !== name || $[2] !== render) {
+		t2 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			formControl = {
+				control: t1,
+				name
+			};
+			if (render) {
+				t2 = render(formControl, form);
+				break bb0;
+			}
+		}
+		$[0] = form;
+		$[1] = name;
+		$[2] = render;
+		$[3] = formControl;
+		$[4] = t2;
+	} else {
+		formControl = $[3];
+		t2 = $[4];
+	}
+	if (t2 !== Symbol.for("react.early_return_sentinel")) return t2;
 	if (!type) return null;
 	const Component = componentRegistry[type];
 	const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
-	const inputComponent = /* @__PURE__ */ jsx(Component, {
-		...props ?? {},
-		label: usesChildrenAsLabel ? void 0 : label,
-		placeholder,
-		formControl,
-		children: usesChildrenAsLabel ? label : void 0
-	});
-	return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+	let t3;
+	if ($[5] !== props) {
+		t3 = props ?? {};
+		$[5] = props;
+		$[6] = t3;
+	} else t3 = $[6];
+	const inputProps = t3;
+	const t4 = usesChildrenAsLabel ? void 0 : label;
+	const t5 = usesChildrenAsLabel ? label : void 0;
+	let t6;
+	if ($[7] !== Component || $[8] !== formControl || $[9] !== inputProps || $[10] !== placeholder || $[11] !== t4 || $[12] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Component, {
+			...inputProps,
+			label: t4,
+			placeholder,
+			formControl,
+			children: t5
+		});
+		$[7] = Component;
+		$[8] = formControl;
+		$[9] = inputProps;
+		$[10] = placeholder;
+		$[11] = t4;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const inputComponent = t6;
+	let t7;
+	if ($[14] !== inputComponent || $[15] !== inputWrapper || $[16] !== label) {
+		t7 = inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+		$[14] = inputComponent;
+		$[15] = inputWrapper;
+		$[16] = label;
+		$[17] = t7;
+	} else t7 = $[17];
+	return t7;
 }
 //#endregion
 export { InputItem };

package/dist/components/inputs/Inputs/Inputs.js

@@ -1,17 +1,43 @@
 import { InputItem } from "./InputItem.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/Inputs.tsx
-function Inputs({ form, inputDefs, children }) {
-	if (!children) return inputDefs.map((inputDef) => /* @__PURE__ */ jsx(InputItem, {
-		form,
-		inputDef
-	}, String(inputDef.name)));
-	const childrenParams = {};
-	for (const inputDef of inputDefs) childrenParams[inputDef.name] = /* @__PURE__ */ jsx(InputItem, {
-		form,
-		inputDef
-	});
-	return children(childrenParams);
+function Inputs(t0) {
+	const $ = c(9);
+	const { form, inputDefs, children } = t0;
+	if (!children) {
+		let t1;
+		if ($[0] !== form || $[1] !== inputDefs) {
+			let t2;
+			if ($[3] !== form) {
+				t2 = (inputDef) => /* @__PURE__ */ jsx(InputItem, {
+					form,
+					inputDef
+				}, String(inputDef.name));
+				$[3] = form;
+				$[4] = t2;
+			} else t2 = $[4];
+			t1 = inputDefs.map(t2);
+			$[0] = form;
+			$[1] = inputDefs;
+			$[2] = t1;
+		} else t1 = $[2];
+		return t1;
+	}
+	let t1;
+	if ($[5] !== children || $[6] !== form || $[7] !== inputDefs) {
+		const childrenParams = {};
+		for (const inputDef_0 of inputDefs) childrenParams[inputDef_0.name] = /* @__PURE__ */ jsx(InputItem, {
+			form,
+			inputDef: inputDef_0
+		});
+		t1 = children(childrenParams);
+		$[5] = children;
+		$[6] = form;
+		$[7] = inputDefs;
+		$[8] = t1;
+	} else t1 = $[8];
+	return t1;
 }
 //#endregion
 export { Inputs };

package/dist/components/inputs/RadioGroup/RadioGroup.d.ts

@@ -4,7 +4,8 @@ import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
 import { RadioVariantProps } from './radio.cva';
 import { ControlProps } from '../shared/form.types';
-interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<AriaRadioGroupProps, "className"> {
+import { InputVariantProps } from '../shared/input.cva';
+interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVariantProps, Omit<InputVariantProps, "variant">, Omit<AriaRadioGroupProps, "className"> {
     ref?: Ref<HTMLDivElement>;
     options: {
         label: string | ReactElement;
@@ -13,6 +14,7 @@ interface RadioGroupBaseProps extends Omit<FormFieldProps, "variant">, RadioVari
     isDirty?: boolean;
     inputClassName?: string;
     labelClassName?: string;
+    fireBlurOnChange?: boolean;
 }
 export interface RadioGroupProps extends RadioGroupBaseProps {
 }