@povio/ui 2.3.0-rc.39 → 2.3.0-rc.40

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -12,7 +12,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Checkbox/Checkbox.tsx
 var CheckboxBase = (props) => {
-	const $ = c(46);
+	const $ = c(48);
 	const ui = UIConfig.useConfig();
 	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
 	const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
@@ -78,28 +78,29 @@ var CheckboxBase = (props) => {
 	} else t1 = $[17];
 	const handleChange = t1;
 	const t2 = !!error;
-	const t3 = error || void 0;
-	const t4 = props.isDirty || void 0;
-	const t5 = props.isRequired || void 0;
-	let t6;
+	const t3 = hideLabel && typeof children === "string" ? children : void 0;
+	const t4 = error || void 0;
+	const t5 = props.isDirty || void 0;
+	const t6 = props.isRequired || void 0;
+	let t7;
 	if ($[18] !== className) {
-		t6 = clsx("relative", checkboxIndicatorClass, className);
+		t7 = clsx("relative", checkboxIndicatorClass, className);
 		$[18] = className;
-		$[19] = t6;
-	} else t6 = $[19];
-	let t7;
+		$[19] = t7;
+	} else t7 = $[19];
+	let t8;
 	if ($[20] !== rest || $[21] !== variant) {
-		t7 = /* @__PURE__ */ jsx(CheckboxCheckmark, {
+		t8 = /* @__PURE__ */ jsx(CheckboxCheckmark, {
 			variant,
 			...rest
 		});
 		$[20] = rest;
 		$[21] = variant;
-		$[22] = t7;
-	} else t7 = $[22];
-	let t8;
+		$[22] = t8;
+	} else t8 = $[22];
+	let t9;
 	if ($[23] !== checkboxContentClassNameMap || $[24] !== checkboxTypographyMap || $[25] !== children || $[26] !== hideLabel || $[27] !== rest || $[28] !== variant) {
-		t8 = !hideLabel && /* @__PURE__ */ jsx(CheckContent, {
+		t9 = !hideLabel && /* @__PURE__ */ jsx(CheckContent, {
 			typography: checkboxTypographyMap({
 				variant,
 				...rest
@@ -116,47 +117,51 @@ var CheckboxBase = (props) => {
 		$[26] = hideLabel;
 		$[27] = rest;
 		$[28] = variant;
-		$[29] = t8;
-	} else t8 = $[29];
-	let t9;
-	if ($[30] !== handleChange || $[31] !== isDisabled || $[32] !== rest || $[33] !== t2 || $[34] !== t3 || $[35] !== t4 || $[36] !== t5 || $[37] !== t6 || $[38] !== t7 || $[39] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Checkbox, {
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== handleChange || $[31] !== isDisabled || $[32] !== onBlur || $[33] !== rest || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Checkbox, {
 			...rest,
 			isDisabled,
 			isInvalid: t2,
-			"aria-errormessage": t3,
-			"data-is-dirty": t4,
-			"data-is-required": t5,
+			"aria-label": t3,
+			"aria-errormessage": t4,
+			"data-is-dirty": t5,
+			"data-is-required": t6,
 			onChange: handleChange,
-			className: t6,
-			children: [t7, t8]
+			onBlur,
+			className: t7,
+			children: [t8, t9]
 		});
 		$[30] = handleChange;
 		$[31] = isDisabled;
-		$[32] = rest;
-		$[33] = t2;
-		$[34] = t3;
-		$[35] = t4;
-		$[36] = t5;
-		$[37] = t6;
-		$[38] = t7;
-		$[39] = t8;
-		$[40] = t9;
-	} else t9 = $[40];
-	let t10;
-	if ($[41] !== formFieldErrorProps) {
-		t10 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[41] = formFieldErrorProps;
+		$[32] = onBlur;
+		$[33] = rest;
+		$[34] = t2;
+		$[35] = t3;
+		$[36] = t4;
+		$[37] = t5;
+		$[38] = t6;
+		$[39] = t7;
+		$[40] = t8;
+		$[41] = t9;
 		$[42] = t10;
 	} else t10 = $[42];
 	let t11;
-	if ($[43] !== t10 || $[44] !== t9) {
-		t11 = /* @__PURE__ */ jsxs(Fragment, { children: [t9, t10] });
-		$[43] = t10;
-		$[44] = t9;
-		$[45] = t11;
-	} else t11 = $[45];
-	return t11;
+	if ($[43] !== formFieldErrorProps) {
+		t11 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
+		$[43] = formFieldErrorProps;
+		$[44] = t11;
+	} else t11 = $[44];
+	let t12;
+	if ($[45] !== t10 || $[46] !== t11) {
+		t12 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t11] });
+		$[45] = t10;
+		$[46] = t11;
+		$[47] = t12;
+	} else t12 = $[47];
+	return t12;
 };
 var Checkbox$1 = (props) => {
 	const $ = c(15);

package/dist/components/inputs/Checkbox/checkbox.cva.js

@@ -22,6 +22,8 @@ var checkbox = cva([
 		"group-selected:group-hover:border-interactive-contained-primary-hover",
 		"group-selected:group-pressed:bg-interactive-contained-primary-pressed",
 		"group-selected:group-pressed:border-interactive-contained-primary-pressed",
+		"group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+		"group-selected:group-disabled:border-interactive-contained-primary-disabled",
 		"group-indeterminate:border-interactive-contained-primary-idle",
 		"group-indeterminate:bg-interactive-contained-primary-idle",
 		"group-indeterminate:group-hover:bg-interactive-contained-primary-hover",

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -188,13 +188,19 @@ var DatePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: clsx("relative inline-flex w-full flex-col text-left", className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps,
+				fieldProps: {
+					...fieldProps,
+					onBlur: (event) => {
+						fieldProps.onBlur?.(event);
+						handleBlur(state.value);
+					}
+				},
 				fieldValue: normalizedValue,
 				isValueControlled: true,
 				hasValue: normalizedValue != null,
@@ -337,7 +343,11 @@ var DatePickerInner = (t0) => {
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize
+		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateSegments({
@@ -345,12 +355,15 @@ var DatePickerInner = (t0) => {
 			locale,
 			shouldForceLeadingZeros,
 			isDisabled,
-			hidePlaceholder: as === "floating" && !dateValue
+			hidePlaceholder: as === "floating" && !dateValue,
+			disableManualEntry,
+			placeholder: props.placeholder,
+			dateGranularity: granularity
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
@@ -369,10 +382,15 @@ var DatePickerInner = (t0) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: dateValue != null,
 			wrapContentAndTrailing: true,
 			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
-			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
+			action: showDropdown ? {
+				icon: ui.dateInput.calendarIcon,
+				onClick: _temp2,
+				altText: ""
+			} : void 0,
 			children: staticSegments
 		});
 	}
@@ -522,5 +540,6 @@ function _temp(input) {
 	const container = input.getContainer?.() ?? input;
 	return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 }
+function _temp2() {}
 //#endregion
 export { DatePicker };

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -494,14 +494,26 @@ var DateRangePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: clsx("relative inline-flex w-full flex-col text-left", className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: startFieldProps,
-				endFieldProps,
+				fieldProps: {
+					...startFieldProps,
+					onBlur: (event_0) => {
+						startFieldProps.onBlur?.(event_0);
+						handleBlur(state.value);
+					}
+				},
+				endFieldProps: {
+					...endFieldProps,
+					onBlur: (event_1) => {
+						endFieldProps.onBlur?.(event_1);
+						handleBlur(state.value);
+					}
+				},
 				fieldValue: normalizedValue?.start ?? null,
 				endFieldValue: normalizedValue?.end ?? null,
 				isValueControlled: true,
@@ -679,7 +691,11 @@ var DateRangePickerInner = (t0) => {
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize
+		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticDateRangeSegments({
@@ -688,12 +704,14 @@ var DateRangePickerInner = (t0) => {
 			locale,
 			shouldForceLeadingZeros,
 			isDisabled,
-			hidePlaceholder: as === "floating" && !hasProvidedRangeValue
+			hidePlaceholder: as === "floating" && !hasProvidedRangeValue,
+			disableManualEntry,
+			placeholder: props.placeholder
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
@@ -712,10 +730,15 @@ var DateRangePickerInner = (t0) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: hasProvidedRangeValue,
 			wrapContentAndTrailing: true,
 			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
-			trailingContent: showDropdown ? ui.dateInput.calendarIcon : void 0,
+			action: showDropdown ? {
+				icon: ui.dateInput.calendarIcon,
+				onClick: _temp2,
+				altText: ""
+			} : void 0,
 			children: staticSegments
 		});
 	}
@@ -855,5 +878,6 @@ function _temp(input) {
 	const container = input.getContainer?.() ?? input;
 	return container instanceof HTMLElement ? container.querySelector("input, button, [tabindex]:not([tabindex='-1'])") : null;
 }
+function _temp2() {}
 //#endregion
 export { DateRangePicker };

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -176,7 +176,7 @@ var DateTimePickerBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: "relative inline-flex w-full flex-col text-left",
+			className: "group relative inline-flex w-full flex-col text-left",
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: [/* @__PURE__ */ jsx(DatePickerInput, {
 				ref: mergeRefs(ref, datePickerInputRef),
@@ -186,6 +186,7 @@ var DateTimePickerBase = (props) => {
 					...fieldProps,
 					onBlur: (e_0) => {
 						fieldProps.onBlur?.(e_0);
+						handleBlur(state.value);
 						onInputBlur(e_0);
 					}
 				},
@@ -267,7 +268,11 @@ var DateTimePickerInner = (t0) => {
 		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
 		const todayIconButtonSize = props.todayIconButtonSize ?? ui.dateInput.todayIconButtonSize;
 		const todayIconPlacement = props.todayIconPlacement ?? ui.dateInput.todayIconPlacement;
-		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, todayIconButtonSize);
+		const staticTodayIcon = renderDatePickerTodayIcon(todayIcon, {
+			isDisabled,
+			renderStatic: true,
+			size: todayIconButtonSize
+		});
 		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
 		const showDropdown = !props.disableDropdown || disableManualEntry;
 		const staticSegments = getStaticCalendarDateTimeSegments({
@@ -275,12 +280,14 @@ var DateTimePickerInner = (t0) => {
 			locale,
 			shouldForceLeadingZeros,
 			isDisabled,
-			hidePlaceholder: as === "floating" && !dateTimeValue
+			hidePlaceholder: as === "floating" && !dateTimeValue,
+			disableManualEntry,
+			placeholder: props.placeholder
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			contentWrapperClassName: datePickerInputContentRowCva({ size }),
@@ -299,10 +306,15 @@ var DateTimePickerInner = (t0) => {
 			onStaticInteract: renderRealInput,
 			actionContent: staticTodayIcon,
 			actionContentPlacement: todayIconPlacement === "fieldLabel" ? "content-row" : "content-wrapper",
+			showClear: dateTimeValue != null,
 			wrapContentAndTrailing: true,
 			contentAndTrailingClassName: "gap-2!",
 			trailingClassName: "py-0! pl-0!",
-			trailingContent: showDropdown ? ui.dateInput.dateTimeIcon : void 0,
+			action: showDropdown ? {
+				icon: ui.dateInput.dateTimeIcon,
+				onClick: _temp4,
+				altText: ""
+			} : void 0,
 			children: staticSegments
 		});
 	}
@@ -434,5 +446,6 @@ function _temp3(isoString) {
 	if (isoString == null) return null;
 	return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString, "UTC");
 }
+function _temp4() {}
 //#endregion
 export { DateTimePicker };

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -22,7 +22,7 @@ import { DateTime } from "luxon";
 import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
-	const $ = c(136);
+	const $ = c(143);
 	const ui = UIConfig.useConfig();
 	let asProp;
 	let className;
@@ -318,7 +318,7 @@ var TimePickerBase = (props) => {
 	const t17 = as === "inline" ? -1 : void 0;
 	let t18;
 	if ($[90] !== className) {
-		t18 = clsx("relative inline-flex w-full flex-col text-left", className);
+		t18 = clsx("group relative inline-flex w-full flex-col text-left", className);
 		$[90] = className;
 		$[91] = t18;
 	} else t18 = $[91];
@@ -329,19 +329,40 @@ var TimePickerBase = (props) => {
 		$[92] = ref;
 		$[93] = t20;
 	} else t20 = $[93];
-	const t21 = !!error;
+	let t21;
+	if ($[94] !== fieldProps || $[95] !== handleBlur || $[96] !== state.value) {
+		t21 = (event) => {
+			fieldProps.onBlur?.(event);
+			handleBlur(state.value);
+		};
+		$[94] = fieldProps;
+		$[95] = handleBlur;
+		$[96] = state.value;
+		$[97] = t21;
+	} else t21 = $[97];
 	let t22;
-	if ($[94] !== as || $[95] !== disableDropdown || $[96] !== disableManualEntry || $[97] !== fieldProps || $[98] !== fireBlurOnChange || $[99] !== headerProps || $[100] !== inputClassName || $[101] !== isClearable || $[102] !== isDirty || $[103] !== isDisabled || $[104] !== isRequired || $[105] !== onInputClear || $[106] !== onOpen || $[107] !== placeholder || $[108] !== size || $[109] !== state || $[110] !== t20 || $[111] !== t21 || $[112] !== variant) {
-		t22 = /* @__PURE__ */ jsx(TimePickerInput, {
+	if ($[98] !== fieldProps || $[99] !== t21) {
+		t22 = {
+			...fieldProps,
+			onBlur: t21
+		};
+		$[98] = fieldProps;
+		$[99] = t21;
+		$[100] = t22;
+	} else t22 = $[100];
+	const t23 = !!error;
+	let t24;
+	if ($[101] !== as || $[102] !== disableDropdown || $[103] !== disableManualEntry || $[104] !== fireBlurOnChange || $[105] !== headerProps || $[106] !== inputClassName || $[107] !== isClearable || $[108] !== isDirty || $[109] !== isDisabled || $[110] !== isRequired || $[111] !== onInputClear || $[112] !== onOpen || $[113] !== placeholder || $[114] !== size || $[115] !== state || $[116] !== t20 || $[117] !== t22 || $[118] !== t23 || $[119] !== variant) {
+		t24 = /* @__PURE__ */ jsx(TimePickerInput, {
 			ref: t20,
 			as,
-			fieldProps,
+			fieldProps: t22,
 			state,
 			onPress: onOpen,
 			isDisabled,
 			isDirty,
 			isRequired,
-			isInvalid: t21,
+			isInvalid: t23,
 			disableDropdown,
 			variant,
 			size,
@@ -353,30 +374,30 @@ var TimePickerBase = (props) => {
 			onClear: onInputClear,
 			fireBlurOnChange
 		});
-		$[94] = as;
-		$[95] = disableDropdown;
-		$[96] = disableManualEntry;
-		$[97] = fieldProps;
-		$[98] = fireBlurOnChange;
-		$[99] = headerProps;
-		$[100] = inputClassName;
-		$[101] = isClearable;
-		$[102] = isDirty;
-		$[103] = isDisabled;
-		$[104] = isRequired;
-		$[105] = onInputClear;
-		$[106] = onOpen;
-		$[107] = placeholder;
-		$[108] = size;
-		$[109] = state;
-		$[110] = t20;
-		$[111] = t21;
-		$[112] = variant;
-		$[113] = t22;
-	} else t22 = $[113];
-	let t23;
-	if ($[114] !== dialogState || $[115] !== disableDropdown || $[116] !== disableManualEntry || $[117] !== isDisabled || $[118] !== isOpen || $[119] !== label || $[120] !== onApply || $[121] !== onOpenChange) {
-		t23 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+		$[101] = as;
+		$[102] = disableDropdown;
+		$[103] = disableManualEntry;
+		$[104] = fireBlurOnChange;
+		$[105] = headerProps;
+		$[106] = inputClassName;
+		$[107] = isClearable;
+		$[108] = isDirty;
+		$[109] = isDisabled;
+		$[110] = isRequired;
+		$[111] = onInputClear;
+		$[112] = onOpen;
+		$[113] = placeholder;
+		$[114] = size;
+		$[115] = state;
+		$[116] = t20;
+		$[117] = t22;
+		$[118] = t23;
+		$[119] = variant;
+		$[120] = t24;
+	} else t24 = $[120];
+	let t25;
+	if ($[121] !== dialogState || $[122] !== disableDropdown || $[123] !== disableManualEntry || $[124] !== isDisabled || $[125] !== isOpen || $[126] !== label || $[127] !== onApply || $[128] !== onOpenChange) {
+		t25 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
 			footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
 				isDisabled,
 				onApply,
@@ -388,50 +409,50 @@ var TimePickerBase = (props) => {
 			onOpenChange,
 			children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
 		});
-		$[114] = dialogState;
-		$[115] = disableDropdown;
-		$[116] = disableManualEntry;
-		$[117] = isDisabled;
-		$[118] = isOpen;
-		$[119] = label;
-		$[120] = onApply;
-		$[121] = onOpenChange;
-		$[122] = t23;
-	} else t23 = $[122];
-	let t24;
-	if ($[123] !== as || $[124] !== formFieldProps || $[125] !== labelProps || $[126] !== t18 || $[127] !== t19 || $[128] !== t22 || $[129] !== t23) {
-		t24 = /* @__PURE__ */ jsxs(FormField, {
+		$[121] = dialogState;
+		$[122] = disableDropdown;
+		$[123] = disableManualEntry;
+		$[124] = isDisabled;
+		$[125] = isOpen;
+		$[126] = label;
+		$[127] = onApply;
+		$[128] = onOpenChange;
+		$[129] = t25;
+	} else t25 = $[129];
+	let t26;
+	if ($[130] !== as || $[131] !== formFieldProps || $[132] !== labelProps || $[133] !== t18 || $[134] !== t19 || $[135] !== t24 || $[136] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(FormField, {
 			...formFieldProps,
 			as,
 			labelProps,
 			className: t18,
 			tabIndex: t19,
-			children: [t22, t23]
+			children: [t24, t25]
 		});
-		$[123] = as;
-		$[124] = formFieldProps;
-		$[125] = labelProps;
-		$[126] = t18;
-		$[127] = t19;
-		$[128] = t22;
-		$[129] = t23;
-		$[130] = t24;
-	} else t24 = $[130];
-	let t25;
-	if ($[131] !== as || $[132] !== error || $[133] !== t17 || $[134] !== t24) {
-		t25 = /* @__PURE__ */ jsx(TooltipWrapper, {
+		$[130] = as;
+		$[131] = formFieldProps;
+		$[132] = labelProps;
+		$[133] = t18;
+		$[134] = t19;
+		$[135] = t24;
+		$[136] = t25;
+		$[137] = t26;
+	} else t26 = $[137];
+	let t27;
+	if ($[138] !== as || $[139] !== error || $[140] !== t17 || $[141] !== t26) {
+		t27 = /* @__PURE__ */ jsx(TooltipWrapper, {
 			as,
 			error,
 			triggerTabIndex: t17,
-			children: t24
+			children: t26
 		});
-		$[131] = as;
-		$[132] = error;
-		$[133] = t17;
-		$[134] = t24;
-		$[135] = t25;
-	} else t25 = $[135];
-	return t25;
+		$[138] = as;
+		$[139] = error;
+		$[140] = t17;
+		$[141] = t26;
+		$[142] = t27;
+	} else t27 = $[142];
+	return t27;
 };
 var TimePickerInner = (t0) => {
 	const $ = c(9);
@@ -467,12 +488,14 @@ var TimePickerInner = (t0) => {
 			value: timeValue_0,
 			locale,
 			isDisabled,
-			hidePlaceholder: as === "floating" && !timeValue_0
+			hidePlaceholder: as === "floating" && !timeValue_0,
+			disableManualEntry,
+			placeholder: props.placeholder
 		});
 		return /* @__PURE__ */ jsx(InputFrame, {
 			...props,
 			isDisabled,
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
+			className: clsx("group relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
 			contentClassName: "pr-0!",
 			labelPlacement: "content-row",
@@ -488,9 +511,14 @@ var TimePickerInner = (t0) => {
 			},
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
+			showClear: timeValue_0 != null,
 			wrapContentAndTrailing: true,
 			trailingClassName: "py-0! pl-0!",
-			trailingContent: showDropdown ? ui.dateInput.timeIcon : void 0,
+			action: showDropdown ? {
+				icon: ui.dateInput.timeIcon,
+				onClick: _temp3,
+				altText: ""
+			} : void 0,
 			children: staticSegments
 		});
 	}
@@ -609,5 +637,6 @@ function _temp2(isoString) {
 	if (isoString == null) return null;
 	return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString, "UTC"));
 }
+function _temp3() {}
 //#endregion
 export { TimePicker };