@povio/ui 2.3.1 → 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/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/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/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

@@ -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/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/config/uiConfig.context.d.ts

@@ -20,7 +20,7 @@ export declare namespace UIConfig {
     };
     export interface Options {
         input: Pick<TextInputProps, "variant" | "isClearable" | "hideLabel" | "as" | "size"> & {
-            alwaysShowClear: boolean;
+            alwaysShowClear?: boolean;
         };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;

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/package.json

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