@povio/ui 2.2.9-rc.9 → 2.2.11

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -2,6 +2,7 @@ import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { IconButton } from "../../../buttons/IconButton/IconButton.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
@@ -15,7 +16,9 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, autoFixYear, isTimeOptional = false, format, ...props }) => {
+	let effectiveTimeZone = getLocalTimeZone();
+	if (timeZone) effectiveTimeZone = timeZone;
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
@@ -40,7 +43,6 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			if (endFieldProps) endFieldProps.onChange?.(null);
 			setCanClear(false);
 			fieldProps.onBlur?.(null);
-			endFieldProps?.onBlur?.(null);
 		},
 		getContainer: () => containerRef.current
 	}));
@@ -51,25 +53,19 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		dateFieldRef.current?.clearField();
 		fieldProps.onChange?.(null);
 		endDateFieldRef.current?.clearField();
-		endFieldProps?.onChange?.(null);
 		setCanClear(false);
-		fieldProps.onBlur?.(null);
-		endFieldProps?.onBlur?.(null);
 	};
 	const onToday = () => {
 		if (isDateTime) {
-			const calendarDateTime = toCalendarDateTime(now(getLocalTimeZone()));
+			const calendarDateTime = toCalendarDateTime(now(effectiveTimeZone));
 			fieldProps.onChange?.(calendarDateTime);
 			if (endFieldProps) endFieldProps.onChange?.(calendarDateTime);
 		} else {
-			fieldProps.onChange?.(today(getLocalTimeZone()));
-			if (endFieldProps) endFieldProps.onChange?.(today(getLocalTimeZone()));
+			fieldProps.onChange?.(today(effectiveTimeZone));
+			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
-		fieldProps.onBlur?.(null);
-		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
-	const todayIconComponent = todayIcon === true ? TodayIcon : todayIcon || null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
 		className: clsx(inputBaseCva({
@@ -88,7 +84,6 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		"data-has-selection": fieldProps.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-is-required": isRequired || void 0,
-		"data-is-filled": fieldProps.value !== null || void 0,
 		...groupProps,
 		...focusWithinProps,
 		...hoverProps,
@@ -108,12 +103,12 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						className: "absolute inset-0 z-0",
 						isDisabled
 					}),
-					todayIconComponent && /* @__PURE__ */ jsx(InlineIconButton, {
+					todayIcon && /* @__PURE__ */ jsx(IconButton, {
 						label: "",
-						icon: todayIconComponent,
-						size: todayIconButtonSize,
+						icon: TodayIcon,
+						size: "none",
 						onPress: onToday,
-						className: "relative z-1 !border-none"
+						className: "relative z-1"
 					}),
 					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 						size: "label-1",
@@ -126,7 +121,11 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						isInvalid,
 						onClearChange,
 						hidePlaceholder,
-						disableManualEntry
+						disableManualEntry,
+						dateGranularity,
+						isTimeOptional,
+						format,
+						timeZone: effectiveTimeZone
 					}), endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
 						className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
 						children: "–"
@@ -137,7 +136,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						isInvalid,
 						onClearChange,
 						hidePlaceholder,
-						disableManualEntry
+						disableManualEntry,
+						isTimeOptional,
+						format,
+						timeZone: effectiveTimeZone
 					})] })] })
 				]
 			})]

package/dist/components/inputs/DateTime/shared/MonthPicker.d.ts

@@ -1,7 +1,11 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 export interface MonthPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
+    onCommit?: () => void;
+    selectedDate?: CalendarDate | null;
 }
-export declare const MonthPicker: ({ state, onSelectionChange }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonthPicker: ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }: MonthPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DateTime/shared/MonthPicker.js

@@ -1,10 +1,11 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/MonthPicker.tsx
-var MonthPicker = ({ state, onSelectionChange }) => {
+var MonthPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		month: "long",
 		timeZone: state.timeZone
@@ -23,34 +24,65 @@ var MonthPicker = ({ state, onSelectionChange }) => {
 		if (state.maxValue && state.focusedDate.set({ month }) > state.maxValue) return true;
 		return false;
 	};
+	const getSelectedMonth = () => {
+		if (!selectedDate) return null;
+		return selectedDate.month;
+	};
+	const selectedMonth = getSelectedMonth();
+	const lastPressedMonthRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedMonth !== null) listBoxSelectionProps.selectedKeys = [selectedMonth];
+	const parseMonthFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedMonth = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedMonth)) return parsedMonth;
+		}
+		return null;
+	};
 	return /* @__PURE__ */ jsx(ListBox, {
 		autoFocus: true,
 		"aria-label": "Month",
 		selectionMode: "single",
 		layout: "grid",
-		selectedKeys: [state.focusedDate.month],
+		...listBoxSelectionProps,
 		onSelectionChange: (key) => {
 			if (key === "all") return;
-			if (typeof [...key][0] === "number") {
-				const date = state.focusedDate.set({ month: [...key][0] });
-				state.setFocusedDate(date);
+			const selectedKey = [...key][0];
+			const selectedMonthValue = parseMonthFromKey(selectedKey);
+			if (selectedMonthValue !== null) {
+				const nextSelectedDate = state.focusedDate.set({ month: selectedMonthValue });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
 			}
 			onSelectionChange(key);
 		},
 		className: "grid size-full min-h-72 grid-cols-3 grid-rows-4 gap-2 p-3 md:w-80",
 		children: getMonths().map((month, index) => {
-			const isDisabled = isMonthDisabled(index + 1);
+			const monthNumber = index + 1;
+			const isDisabled = isMonthDisabled(monthNumber);
 			return /* @__PURE__ */ jsx(ListBoxItem, {
-				id: index + 1,
+				id: monthNumber,
 				textValue: month,
 				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedMonthRef.current === monthNumber;
+					lastPressedMonthRef.current = monthNumber;
+					const nextSelectedDate = state.focusedDate.set({ month: monthNumber });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (selectedMonth === null) return;
+					if (monthNumber !== selectedMonth) return;
+					onCommit?.();
+				},
 				className: clsx("flex items-center justify-center text-interactive-text-secondary-idle", "rounded-button-rounding-m border border-elevation-outline-default-1 border-solid bg-elevation-fill-default-1", "hover:text-interactive-text-secondary-hover", "selected:border-interactive-contained-primary-idle selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",
 					size: "label-2",
 					children: month
 				})
-			}, month);
+			}, monthNumber);
 		})
 	});
 };

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -9,7 +9,6 @@ interface DatePickerInputProps extends InputVariantProps {
     state: TimeFieldState;
     isDisabled?: boolean;
     isDirty?: boolean;
-    isRequired?: boolean;
     isInvalid?: boolean;
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
@@ -19,5 +18,5 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onPress: () => void;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -38,8 +38,6 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 		"data-focus-visible": isFocused && isFocusVisible || void 0,
 		"data-has-selection": state.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
-		"data-is-required": isRequired || void 0,
-		"data-is-filled": state.value !== null || void 0,
 		...fieldProps,
 		...focusWithinProps,
 		...hoverProps,
@@ -74,10 +72,7 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequ
 				as
 			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
 			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => {
-					state.setValue(null);
-					fieldProps.onBlur?.(null);
-				},
+				onClear: () => state.setValue(null),
 				show: canClear
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",

package/dist/components/inputs/DateTime/shared/YearPicker.d.ts

@@ -1,8 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
 import { CalendarState, RangeCalendarState } from '@react-stately/calendar';
 import { Key } from 'react-aria-components';
 interface YearPickerProps {
     state: CalendarState | RangeCalendarState;
     onSelectionChange: (key: Set<Key>) => void;
+    onDateChange?: (selectedDate: CalendarDate) => void;
+    onCommit?: () => void;
+    selectedDate?: CalendarDate | null;
 }
-export declare const YearPicker: ({ state, onSelectionChange }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPicker: ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }: YearPickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/DateTime/shared/YearPicker.js

@@ -2,12 +2,12 @@ import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx
-var YearPicker = ({ state, onSelectionChange }) => {
+var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
 	const formatter = useDateFormatter({
 		year: "numeric",
 		timeZone: state.timeZone
@@ -28,20 +28,42 @@ var YearPicker = ({ state, onSelectionChange }) => {
 		if (state.maxValue && year > state.maxValue.year) return true;
 		return false;
 	};
-	const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
+	const getSelectedYearIndex = () => {
+		if (selectedDate) {
+			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
+			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+		}
+		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
+		if (focusedYearIndex < 0) return null;
+		return focusedYearIndex;
+	};
+	const selectedYearIndex = getSelectedYearIndex();
+	const lastPressedYearIndexRef = useRef(null);
+	const listBoxSelectionProps = {};
+	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+	const parseYearIndexFromKey = (key) => {
+		if (typeof key === "number") return key;
+		if (typeof key === "string") {
+			const parsedIndex = Number.parseInt(key, 10);
+			if (!Number.isNaN(parsedIndex)) return parsedIndex;
+		}
+		return null;
+	};
 	const { ref } = useScrollableListBox();
 	return /* @__PURE__ */ jsx(ListBox, {
 		ref,
 		autoFocus: true,
 		"aria-label": "Year",
 		selectionMode: "single",
-		selectedKeys: [selectedYear],
+		...listBoxSelectionProps,
 		onSelectionChange: (key) => {
 			if (key === "all") return;
-			const index = [...key][0];
-			if (typeof index === "number") {
-				const date = state.focusedDate.set({ year: years[index].value });
-				state.setFocusedDate(date);
+			const selectedKey = [...key][0];
+			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
+			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
+				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
+				state.setFocusedDate(nextSelectedDate);
+				onDateChange?.(nextSelectedDate);
 			}
 			onSelectionChange(key);
 		},
@@ -52,6 +74,18 @@ var YearPicker = ({ state, onSelectionChange }) => {
 				id: index,
 				textValue: year.formatted,
 				isDisabled,
+				onPress: () => {
+					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+					lastPressedYearIndexRef.current = index;
+					const nextSelectedDate = state.focusedDate.set({ year: year.value });
+					state.setFocusedDate(nextSelectedDate);
+					onDateChange?.(nextSelectedDate);
+					if (!isSecondConsecutivePress) return;
+					if (!selectedDate) return;
+					if (selectedYearIndex === null) return;
+					if (index !== selectedYearIndex) return;
+					onCommit?.();
+				},
 				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
 				children: /* @__PURE__ */ jsx(Typography, {
 					as: "span",

package/dist/components/inputs/FormField/FormFieldHeader.js

@@ -1,16 +1,14 @@
 import { InfoIcon } from "../../../assets/icons/Info.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
-import { formFieldHeader } from "./formFieldHeader.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Focusable } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldHeader.tsx
 var FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(UIStyle.useCva("formField.headerCva", formFieldHeader)({ visible: !isHeaderHidden }), className),
+		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -101,7 +101,6 @@ var NumberInputBase = (props) => {
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-empty": value === null || value === void 0 || void 0,
-						"data-is-filled": !("" + value === "" || value === null || value === void 0) || void 0,
 						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -75,8 +75,6 @@ var TextInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", as === "inline" && "h-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
-			"data-is-empty": value === "" || value === null || value === void 0 || void 0,
-			"data-is-required": isRequired || void 0,
 			children: /* @__PURE__ */ jsx("div", {
 				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
 					variant,
@@ -93,7 +91,6 @@ var TextInputBase = (props) => {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
 						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
-						"data-is-filled": !(value === "" || value === null || value === void 0) || void 0,
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,

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

@@ -1,8 +1,6 @@
 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;
@@ -12,16 +10,24 @@ declare const componentRegistry: {
     readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(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: 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>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => 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<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => 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 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, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => 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 textEditor: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../../../text-editor.js').ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
     readonly unknown: null;
 };
 export type InputComponentRegistry = typeof componentRegistry;
@@ -50,8 +56,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?: string;
-    placeholder?: string;
+    label?: never;
+    placeholder?: never;
     props?: never;
     inputWrapper?: never;
     render: (formControl: {

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

@@ -13,8 +13,6 @@ 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 { TextEditor } from "../TextEditor/TextEditor.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/inputs/Inputs/InputItem.tsx
 var componentRegistry = {
@@ -26,7 +24,6 @@ var componentRegistry = {
 	passwordInput: PasswordInput,
 	textArea: TextArea,
 	select: Select,
-	querySelect: QuerySelect,
 	autocomplete: Autocomplete,
 	queryAutocomplete: QueryAutocomplete,
 	segment: Segment,
@@ -34,7 +31,6 @@ var componentRegistry = {
 	dateTimePicker: DateTimePicker,
 	timePicker: TimePicker,
 	dateRangePicker: DateRangePicker,
-	textEditor: TextEditor,
 	unknown: null
 };
 function InputItem({ form, inputDef }) {

package/dist/components/inputs/RadioGroup/RadioGroup.js

@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { FormField } from "../FormField/FormField.js";
-import { radio, radioContentClassName, radioIndicatorClass, radioTypography } from "./radio.cva.js";
+import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Radio, RadioGroup } from "react-aria-components";
@@ -13,7 +13,6 @@ var RadioGroupBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const radioCva = UIStyle.useCva("radio.cva", radio);
 	const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
-	const radioContentClassNameMap = UIStyle.useMapper("radio.contentClassName", radioContentClassName);
 	const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel, ...rest } = props;
 	const formFieldProps = {
 		className,
@@ -50,10 +49,6 @@ var RadioGroupBase = (props) => {
 							variant,
 							...rest
 						}),
-						contentClassName: radioContentClassNameMap({
-							variant,
-							...rest
-						}),
 						className: labelClassName,
 						children: option.label
 					})]

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

@@ -9,6 +9,3 @@ export declare const radioIndicatorClass = "group flex items-center gap-2";
 export declare const radioTypography: (props: {
     variant?: "default" | null | undefined;
 }) => TypographyVariantProps | undefined;
-export declare const radioContentClassName: (props: {
-    variant?: "default" | null | undefined;
-}) => string | undefined;

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -31,6 +31,5 @@ var radioTypography = compoundMapper({ default: {
 	sizeMobile: "label-1",
 	variant: "default"
 } });
-var radioContentClassName = compoundMapper({ default: "text-text-default-2" });
 //#endregion
-export { radio, radioContentClassName, radioIndicatorClass, radioTypography };
+export { radio, radioIndicatorClass, radioTypography };

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts

@@ -1,4 +1,3 @@
-import { ReactElement } from 'react';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
 import { SelectBaseProps } from '../shared/SelectBase';
@@ -6,5 +5,4 @@ import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps
 import { OmitDiscriminatedUnion } from '../../../../types/common';
 export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
 export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
-export declare function Autocomplete<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
-export declare function Autocomplete<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;
+export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -3,19 +3,18 @@ import { jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
-function Autocomplete(props) {
+var Autocomplete = (props) => {
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(SelectBase, {
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(SelectBase, {
 				...innerProps,
 				ref: mergeRefs(ref, field.ref),
 				value: field.value,
 				onChange: field.onChange,
 				onBlur: field.onBlur,
-				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message,
 				isSearchable: true
@@ -26,6 +25,6 @@ function Autocomplete(props) {
 		...props,
 		isSearchable: true
 	});
-}
+};
 //#endregion
 export { Autocomplete };

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -1,4 +1,19 @@
+import { UseQueryResult } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
-import { SelectItem } from '../shared/select.types';
-export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+import { AutocompleteProps } from './Autocomplete';
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
+type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
+type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
+    id: infer InferredKey extends Key;
+} ? InferredKey : never;
+type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>> = OmitDiscriminatedUnion<AutocompleteProps<TKey<TQueryFn>>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey<TQueryFn>> & {
+    query: Parameters<TQueryFn>[0] extends {
+        search?: string;
+    } ? TQueryFn : never;
+    queryParams?: Omit<Parameters<TQueryFn>[0], "search">;
+    queryOptions?: Parameters<TQueryFn>[1];
+};
+export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn<TSelectItem>>({ query, queryParams, queryOptions, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -1,35 +1,19 @@
-import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { Autocomplete } from "./Autocomplete.js";
-import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
-	const ui = UIConfig.useConfig();
+var QueryAutocomplete = ({ query, queryParams, queryOptions, ...props }) => {
 	const [search, setSearch] = useState("");
-	const mapItems = (data) => {
-		const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
-		return queryMap?.(extractedData) ?? extractedData;
-	};
-	const { items, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
-		query,
-		queryParams,
-		queryOptions,
-		mapItems: (data) => mapItems(data),
+	const { data: items, isLoading } = query({
 		search,
-		initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
-	});
-	const { isInitialQueryDisabled: _, ...restProps } = props;
+		...queryParams
+	}, queryOptions);
 	return /* @__PURE__ */ jsx(Autocomplete, {
-		...restProps,
-		items,
+		...props,
+		items: items ?? [],
 		onSearchChange: setSearch,
 		isClientSearchDisabled: true,
-		isLoading,
-		onMouseEnter: handleEnableQuery,
-		onFocusCapture: handleEnableQuery,
-		hasLoadMore: hasNextPage,
-		onLoadMore: fetchNextPage ? () => void fetchNextPage() : void 0
+		isLoading
 	});
 };
 //#endregion