@povio/ui 2.3.0 → 2.3.2

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

@@ -152,7 +152,7 @@ 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),

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

@@ -458,7 +458,7 @@ 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),

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

@@ -142,7 +142,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),

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

@@ -91,7 +91,7 @@ var TimePickerBase = (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(TimePickerInput, {
 				ref: mergeRefs(ref, timeFieldRef),

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

@@ -108,7 +108,8 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 						icon: TodayIcon,
 						size: "none",
 						onPress: onToday,
-						className: "relative z-1"
+						className: "relative z-1",
+						isDisabled
 					}),
 					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 						size: "label-1",

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

@@ -19,7 +19,7 @@ var DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceho
 	return /* @__PURE__ */ jsx("div", {
 		...segmentProps,
 		ref,
-		className: clsx("box-content rounded-input-rounding-default", isDisabled && "text-interactive-text-secondary-disabled", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
+		className: clsx("box-content rounded-input-rounding-default", isDisabled && isInputEmpty && "text-interactive-text-secondary-disabled", isDisabled && !isInputEmpty && "text-text-default-3", !isDisabled && isInputEmpty && "text-text-default-3 group-focus-within:text-text-default-1", !isDisabled && !isInputEmpty && "text-text-default-1", "focus-within:outline-1 focus-within:outline-interactive-contained-primary-idle focus-within:outline-offset-1", ["hour", "dayPeriod"].includes(segment.type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",

package/dist/components/inputs/File/InputUpload.js

@@ -73,7 +73,7 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 	return /* @__PURE__ */ jsx(FormField, {
 		...formFieldProps,
 		labelProps,
-		className: clsx("w-full", className),
+		className: clsx("group w-full", className),
 		children: files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
 			files,
 			onRemove: handleRemove,

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -13,7 +13,7 @@ var InputUploadFilled = ({ files, onRemove, isDisabled, size }) => {
 			variant: "default",
 			size: "label-1",
 			as: "span",
-			className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+			className: "flex-fill select-none truncate text-ellipsis text-text-default-1 input-disabled:text-text-default-3",
 			children: files.map((file) => file.name).join(", ")
 		}), /* @__PURE__ */ jsx(InlineIconButton, {
 			label: "Remove files",

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

@@ -33,7 +33,8 @@ var NumberInputBase = (props) => {
 		locale,
 		formatOptions
 	};
-	const { labelProps, inputProps } = useNumberField(numberProps, useNumberFieldState(numberProps), numberFieldRef);
+	const state = useNumberFieldState(numberProps);
+	const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
 	const formFieldProps = {
 		error,
 		label,
@@ -47,6 +48,10 @@ var NumberInputBase = (props) => {
 		headerClassName,
 		errorClassName
 	};
+	const handleInputBlur = useCallback((e) => {
+		const target = numberFieldRef.current ?? e?.target;
+		onBlur?.({ target });
+	}, [onBlur]);
 	const inputContentProps = {
 		unit,
 		isLoading,
@@ -55,12 +60,12 @@ var NumberInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
-		onChange: (val) => onChange?.(val === "" ? null : Number(val)),
-		onBlur: useCallback((e) => {
-			const target = numberFieldRef.current ?? e?.target;
-			onBlur?.({ target });
-		}, [onBlur])
+		onChange: (val) => {
+			if (val === "") state.setInputValue("");
+			onChange?.(val === "" ? null : Number(val));
+		},
+		value: state.inputValue,
+		onBlur: handleInputBlur
 	};
 	const headerProps = {
 		label,
@@ -97,10 +102,10 @@ var NumberInputBase = (props) => {
 					size,
 					children: /* @__PURE__ */ jsx(Input, {
 						...inputProps,
-						ref: mergeRefs(ref, inputRef),
+						ref: mergeRefs(ref, inputRef, numberFieldRef),
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
-						"data-is-empty": value === null || value === void 0 || void 0,
+						"data-is-empty": state.inputValue === "" || state.inputValue === void 0 || state.inputValue === null || void 0,
 						placeholder: as === "floating" ? "\xA0" : inputProps.placeholder,
 						className: "w-full outline-none",
 						onFocus: (e) => {

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

@@ -63,7 +63,7 @@ var TextAreaBase = (props) => {
 			...formFieldProps,
 			as,
 			labelProps,
-			className: clsx("w-full", className),
+			className: clsx("group w-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "group/text-area relative h-full",

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

@@ -19,13 +19,14 @@ var TextInputBase = (props) => {
 	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
+	const inputValue = value ?? "";
 	const { labelProps, inputProps } = useTextField({
 		...rest,
 		label,
 		isDisabled,
 		isInvalid: !!error,
 		isRequired,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	}, textFieldRef);
@@ -50,7 +51,7 @@ var TextInputBase = (props) => {
 		leadingIcon,
 		trailingIcon,
 		isClearable,
-		value,
+		value: inputValue,
 		onChange,
 		onBlur
 	};
@@ -90,7 +91,7 @@ var TextInputBase = (props) => {
 					children: /* @__PURE__ */ jsx(Input, {
 						...inputProps,
 						ref: mergeRefs(ref, inputRef),
-						"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+						"data-is-empty": inputValue === "" || void 0,
 						"data-is-dirty": isDirty || void 0,
 						"data-is-required": isRequired || void 0,
 						"data-is-disabled": isDisabled || void 0,

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

@@ -34,6 +34,7 @@ var RadioGroupBase = (props) => {
 		isInvalid: !!error,
 		"data-is-dirty": isDirty || void 0,
 		"data-is-required": isRequired || void 0,
+		className: "group",
 		children: /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			children: /* @__PURE__ */ jsx("div", {

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -83,7 +83,7 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 		isDisabled,
 		isInvalid: !!error,
 		menuTrigger: "focus",
-		className: clsx("w-full", containerClassName)
+		className: clsx("group w-full", containerClassName)
 	};
 	const headerProps = {
 		label,
@@ -110,7 +110,7 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
 				...formFieldProps,
 				...!isSearchable && {
 					labelProps,
-					className: clsx("w-full", containerClassName)
+					className: clsx("group w-full", containerClassName)
 				},
 				as,
 				ref: wrapperRef,

package/dist/components/inputs/Selection/shared/SelectInput.js

@@ -27,7 +27,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 	const { fieldState, isOpen, setIsOpen, listItems, selectedItems, onChange, onClear, onRemove, isMultiple, isLoading } = SelectContext.useSelect();
 	const isEmpty = selectedItems.length === 0;
 	const showTags = isMultiple && !isEmpty;
-	const showClearButton = isClearable && isHovered && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
+	const showClearButton = isClearable && (selectedItems.length > 0 || isSearchable && fieldState.inputValue !== "");
 	const labelProps = useMemo(() => {
 		const { labelProps: headerLabelProps } = headerProps ?? {};
 		if (!(as && ["filter", "floating"].includes(as)) || isSearchable) return headerLabelProps;
@@ -104,7 +104,7 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 							ref: inputRef,
 							placeholder: as === "floating" ? void 0 : placeholder,
 							onBlur,
-							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", inputClassName),
+							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3", "disabled:text-text-default-3 disabled:placeholder:text-interactive-text-secondary-disabled", inputClassName),
 							onKeyDown,
 							...fieldProps
 						})]
@@ -114,11 +114,11 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
 						onPress: () => setIsOpen(!isOpen),
 						onBlur,
 						"data-type": "select-trigger",
-						className: clsx("w-full truncate text-start outline-none disabled:text-interactive-text-secondary-disabled", showTags && "absolute inset-0 z-0"),
+						className: clsx("group/select-trigger w-full truncate text-start outline-none disabled:text-text-default-3", showTags && "absolute inset-0 z-0"),
 						...fieldProps,
 						children: [(as === "floating" && isEmpty || isMultiple && !isEmpty) && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }), (isEmpty || !isMultiple) && (as !== "floating" || !isEmpty) && /* @__PURE__ */ jsxs(Typography, {
 							size: "label-1",
-							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3"),
+							className: clsx("truncate empty:before:inline-block empty:before:content-['']", isEmpty && "text-text-default-3 group-disabled/select-trigger:text-interactive-text-secondary-disabled"),
 							children: [isEmpty && placeholder, !isEmpty && (showSelectionContent ? selectedItems[0].content : selectedItems[0].label)]
 						})]
 					})

package/dist/components/inputs/Selection/shared/SelectMobile.js

@@ -56,7 +56,7 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 		...formFieldProps,
 		as,
 		labelProps,
-		className: clsx("w-full", containerClassName),
+		className: clsx("group w-full", containerClassName),
 		children: /* @__PURE__ */ jsxs(DialogTrigger, {
 			...dialogTriggerProps,
 			children: [customTrigger ? /* @__PURE__ */ jsx("div", {
@@ -103,7 +103,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
 						inputClassName,
 						className: "mb-list-height-title-bottom px-list-side-title",
 						leadingIcon: !hideSearchIcon ? /* @__PURE__ */ jsx(SearchIcon, { className: "size-6" }) : void 0,
-						size: "default"
+						size: "default",
+						isClearable
 					}), /* @__PURE__ */ jsx(SelectListBox, {
 						...props,
 						autoFocus: !isSearchable,

package/dist/components/inputs/Slider/Slider.js

@@ -39,6 +39,7 @@ var SliderBase = (props) => {
 		minValue,
 		maxValue,
 		isDisabled,
+		className: clsx("group", rest.className),
 		children: /* @__PURE__ */ jsx(FormField, {
 			...formFieldProps,
 			children: /* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -99,7 +99,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 		ref,
 		as,
 		labelProps,
-		className: clsx("w-full", className),
+		className: clsx("group w-full", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: clsx("group/text-editor relative", "h-full w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1", uiOutlineClass, "focus-within:border focus-within:border-input-outlined-outline-active", "focus-visible:outline-interactive-contained-primary-focus", "hover:border hover:border-input-outlined-outline-hover"),
 			"data-text-editor": true,

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

@@ -17,7 +17,8 @@ var toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect
 		"group-disabled:before:bg-interactive-contained-secondary-on-disabled",
 		"group-selected:before:bg-interactive-contained-primary-on-idle",
 		"group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
-		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed"
+		"group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed",
+		"group-selected:group-disabled:bg-interactive-contained-primary-disabled"
 	] } },
 	defaultVariants: { variant: "default" }
 });

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

@@ -1,4 +1,5 @@
 import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
 import "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
@@ -7,12 +8,14 @@ import { useTranslation } from "react-i18next";
 //#region src/components/inputs/shared/InputClear.tsx
 var InputClear = ({ onClear, className, style, show }) => {
 	const { t } = useTranslation("ui");
+	const alwaysShowClear = UIConfig.useConfig().input.alwaysShowClear;
 	return /* @__PURE__ */ jsx(InlineIconButton, {
 		color: "secondary",
-		className: clsx("invisible relative z-1 flex items-center", "group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
+		className: clsx("relative z-1 flex items-center", !alwaysShowClear && "md:invisible group-focus-within:visible group-hover/date-picker-content:visible group-hover/select-content:visible group-hover/text-area:visible group-hover:visible", "border-0!", !show && "invisible!", className),
 		label: t(($) => $.ui.clearAlt),
 		icon: CloseIcon,
 		onPress: onClear,
+		onMouseDown: (e) => e.preventDefault(),
 		excludeFromTabOrder: true,
 		style
 	});

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

@@ -35,9 +35,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -51,9 +53,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
 				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
-				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
-				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-3",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -67,9 +71,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -83,9 +89,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
 				"invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
 				"has-invalid:border-input-filled-outline-error has-invalid:border-solid has-invalid:bg-input-filled-error has-invalid:text-text-default-1",
-				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
-				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
+				"disabled:bg-input-filled-disabled disabled:text-text-default-3",
+				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -99,9 +107,11 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
 				"invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
 				"has-invalid:border-input-outlined-outline-error has-invalid:border-solid has-invalid:bg-input-outlined-error has-invalid:text-text-default-1",
-				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
-				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-1",
+				"disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-3",
+				"has-disabled:border-input-outlined-outline-disabled has-disabled:border-solid has-disabled:bg-input-outlined-disabled has-disabled:text-text-default-3",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]
@@ -118,6 +128,8 @@ var inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 				"disabled:bg-input-filled-disabled disabled:text-text-default-1",
 				"has-disabled:bg-input-filled-disabled has-disabled:text-text-default-1",
 				"placeholder:text-text-default-3",
+				"disabled:placeholder:text-interactive-text-secondary-disabled",
+				"has-disabled:placeholder:text-interactive-text-secondary-disabled",
 				"focus-visible:outline-interactive-contained-primary-focus",
 				"has-focus-visible:outline-interactive-contained-primary-focus"
 			]

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

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 //#region src/components/inputs/shared/label.cva.ts
 var labelBase = cva("", {
 	variants: { as: {
-		default: ["flex items-start gap-1 text-text-default-1"],
-		filter: ["text-text-default-1"],
+		default: ["flex items-start gap-1 text-text-default-1 input-disabled:text-text-default-3"],
+		filter: ["text-text-default-1 input-disabled:text-text-default-3"],
 		inline: ["flex items-start gap-1 text-text-default-1"],
 		floating: [
 			"pointer-events-none",

package/dist/components/overlays/BottomSheet/BottomSheet.js

@@ -26,6 +26,7 @@ var staticTransition = {
 		1
 	]
 };
+var KEYBOARD_INSET_THRESHOLD = 48;
 var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = true, isScrollable = true, height = "full", label, portalContainerRef, children, footer, hideHeader, hideThumb: hideThumbProp, sheetMarginTop = 96, sheetMarginBottom = 128, closeDragThreshold: closeDragThresholdProp, closeVelocityThreshold: closeVelocityThresholdProp, shouldCloseOnInteractOutside, containerClassName, overlayClassName, headerTypography: headerTypographyProp }) => {
 	const uiConfig = UIConfig.useConfig();
 	const closeDragThreshold = closeDragThresholdProp ?? uiConfig.bottomSheet.closeDragThreshold;
@@ -48,6 +49,27 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 	const focusTrapRef = useRef(null);
 	const [footerElement, footerRef, setFooterElement] = useStateAndRef(null);
 	const [footerHeight, setFooterHeight] = useState(0);
+	const [keyboardInset, setKeyboardInset] = useState(0);
+	useEffect(() => {
+		if (!isOpen) {
+			setKeyboardInset(0);
+			return;
+		}
+		const vv = window.visualViewport;
+		if (!vv) return;
+		const update = () => {
+			const naturalHeight = vv.height * Math.max(vv.scale, 1);
+			const next = Math.max(0, window.innerHeight - naturalHeight);
+			setKeyboardInset(next > KEYBOARD_INSET_THRESHOLD ? Math.round(next) : 0);
+		};
+		update();
+		vv.addEventListener("resize", update);
+		vv.addEventListener("scroll", update);
+		return () => {
+			vv.removeEventListener("resize", update);
+			vv.removeEventListener("scroll", update);
+		};
+	}, [isOpen]);
 	useEffect(() => {
 		if (!footerElement) return;
 		const onResize = () => {
@@ -77,6 +99,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 		isOpen: true,
 		UNSTABLE_portalContainer: portalContainerRef?.current,
 		className: clsx("fixed top-0 left-0 z-10 w-screen h-dvh", containerClassName),
+		style: { "--bottom-sheet-keyboard-inset": `${keyboardInset}px` },
 		onOpenChange,
 		isDismissable,
 		ref: overlayRef,
@@ -110,7 +133,8 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 			transition: staticTransition,
 			style: {
 				y,
-				minHeight: "100%"
+				height: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))",
+				minHeight: "calc(100dvh - var(--bottom-sheet-keyboard-inset, 0px))"
 			},
 			drag: "y",
 			dragListener: false,
@@ -188,7 +212,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = tr
 						initial: { opacity: 0 },
 						exit: { opacity: 0 },
 						ref: setFooterElement,
-						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[100dvh] left-0 translate-y-[calc(-100%-var(--scroll-position,0px))]"),
+						className: clsx("pointer-events-auto absolute z-50 w-full bg-elevation-fill-default-2", "top-[calc(100dvh-var(--bottom-sheet-keyboard-inset,0))] left-0 translate-y-[calc(-100%-var(--scroll-position,0))]"),
 						children: footer
 					})
 				] })

package/dist/config/uiConfig.context.d.ts

@@ -19,7 +19,9 @@ export declare namespace UIConfig {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
     };
     export interface Options {
-        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size">;
+        input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
+            alwaysShowClear?: boolean;
+        };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
         radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;

package/dist/config/uiConfig.context.js

@@ -11,7 +11,8 @@ var UIConfig;
 			as: "default",
 			size: "default",
 			isClearable: false,
-			hideLabel: false
+			hideLabel: false,
+			alwaysShowClear: false
 		},
 		button: {
 			variant: "contained",

package/dist/tw-ui-plugin.js

@@ -12,11 +12,16 @@ var uiPlugin = plugin(({ addVariant }) => {
 	].join(", "));
 	addVariant("input-disabled", [
 		"&:is(:where(.group\\/input-content):has(*:is(input:disabled)) *)",
+		"&:is(:where(.group):has(*:is(input:disabled)) *)",
 		"&:is(:where(.group\\/select-content)[data-disabled] *)",
 		"&:is(:where(.group\\/select-content):has(*:is(input:disabled)) *)",
+		"&:is(:where(.group):has([data-disabled]) *)",
 		"&:is(:where(.group\\/text-area):has(*:is(textarea:disabled)) *)",
+		"&:is(:where(.group):has(*:is(textarea:disabled)) *)",
 		"&:is(:where(.group\\/text-editor):where([data-rac])[data-disabled] *)",
-		"&:is(:where(.group\\/date-picker-content):where([data-rac])[data-disabled] *)"
+		"&:is(:where(.group):where([data-rac])[data-disabled] *)",
+		"&:is(:where(.group\\/date-picker-content):where([data-rac])[data-disabled] *)",
+		"&:is(:where(.group):where([data-rac])[data-disabled] *)"
 	].join(", "));
 });
 //#endregion

package/dist/utils/dom.utils.js

@@ -9,7 +9,7 @@ var DomUtils;
 		"image"
 	]);
 	_DomUtils.isKeyboardInput = (elem) => {
-		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.hasAttribute("contenteditable");
+		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.tagName === "TEXTAREA" || elem.hasAttribute("contenteditable");
 	};
 	_DomUtils.isKeyboardEvent = (event) => {
 		return event.nativeEvent instanceof KeyboardEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",