@povio/ui 2.2.9-rc.27 → 2.2.9-rc.28

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

@@ -235,7 +235,8 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput, ...pr
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateValue === null,
 				dataIsFilled: dateValue !== null,

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

@@ -636,7 +636,8 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: !hasProvidedRangeValue,
 				dataIsFilled: hasProvidedRangeValue,

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

@@ -249,7 +249,8 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
-			contentClassName: datePickerInputContentRowCva({ size }),
+			contentWrapperClassName: datePickerInputContentRowCva({ size }),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: dateTimeValue === null,
 				dataIsFilled: dateTimeValue !== null,

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

@@ -192,6 +192,7 @@ var TimePicker = ({ renderStaticInput, ...props }) => {
 			isDisabled,
 			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
 			inputClassName: clsx("min-w-input-width-min-width", props.inputClassName),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: timeValue === null,
 				dataIsFilled: timeValue !== null,

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

@@ -1,20 +1,21 @@
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-import { buttonIconSize } from "../../../buttons/Button/button.cva.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { isValidElement } from "react";
 //#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
 var getDatePickerTodayIcon = (todayIcon) => {
 	if (!todayIcon) return null;
 	return todayIcon === true ? TodayIcon : todayIcon;
 };
 var renderDatePickerTodayIcon = (todayIcon, size = "none", className) => {
-	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
 	const icon = getDatePickerTodayIcon(todayIcon);
 	if (!icon) return;
-	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: clsx(buttonIconSizeCva({ size }), "text-interactive-text-secondary-idle", className) });
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon,
+		size,
+		staticRender: true,
+		className: className ?? "relative z-1 !border-none"
+	});
 };
 //#endregion
 export { getDatePickerTodayIcon, renderDatePickerTodayIcon };

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

@@ -56,8 +56,8 @@ var renderStaticSegments = (value, options) => {
 		className: "flex",
 		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
 			type: token.type,
-			text: token.text,
-			placeholder: token.text,
+			text: getStaticSegmentText(token),
+			placeholder: getStaticSegmentText(token),
 			isPlaceholder: options.isPlaceholder && token.type !== "literal",
 			isInputEmpty: options.isInputEmpty,
 			isDisabled: options.isDisabled,
@@ -72,5 +72,9 @@ var tokenizeStaticSegmentText = (value) => {
 		type: /^[^\p{Letter}\p{Number}]+$/u.test(text) ? "literal" : "day"
 	}));
 };
+var getStaticSegmentText = (token) => {
+	if (token.type !== "literal") return token.text;
+	return token.text.replaceAll(" ", "\xA0");
+};
 //#endregion
 export { getStaticCalendarDateSegments, getStaticCalendarDateTimeSegments, getStaticDateRangeSegments, getStaticTimeSegments };

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

@@ -79,6 +79,7 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,

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

@@ -77,6 +77,7 @@ function Select({ renderStaticInput, ...props }) {
 			className: clsx("w-full", props.containerClassName),
 			inputClassName: clsx(props.className, props.inputClassName),
 			typographySize: "label-1",
+			labelPlacement: "content-row",
 			dataAttributes: {
 				dataIsEmpty: isEmpty,
 				dataIsFilled: !isEmpty,

package/dist/components/inputs/Skeleton/InputFrame.d.ts

@@ -22,6 +22,7 @@ interface InputFrameDataAttributes {
     dataIsFilled?: boolean;
     dataIsRequired?: boolean;
 }
+type InputFrameLabelPlacement = "content-wrapper" | "content-row";
 export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
     ref?: Ref<HTMLDivElement>;
     children: ReactNode;
@@ -48,7 +49,8 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
     inputClassName?: string;
     contentClassName?: string;
     contentWrapperClassName?: string;
+    labelPlacement?: InputFrameLabelPlacement;
     trailingClassName?: string;
 }
-export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputFrame: ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement, trailingClassName, variant, as, size, }: InputFrameProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Skeleton/InputFrame.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 //#region src/components/inputs/Skeleton/InputFrame.tsx
-var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, trailingClassName, variant, as, size }) => {
+var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isHeaderHidden, hideLabel, headerClassName, errorClassName, className, leadingContent, leadingIcon, actionContent, trailingContent, trailingIcon, trailingAction, unit, isLoading, action, isClearable, showClear, renderStatic, onStaticInteract, clearClassName, onClear, dataAttributes, typographySize, inputClassName, contentClassName, contentWrapperClassName, labelPlacement = "content-wrapper", trailingClassName, variant, as, size }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputContentWrapperCva = UIStyle.useCva("input.contentWrapperCva", inputContentWrapper);
@@ -47,6 +47,11 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 		className: headerClassName,
 		labelProps
 	};
+	const labelContent = as && ["filter", "floating"].includes(as) ? /* @__PURE__ */ jsx(FormFieldLabel, {
+		as,
+		size,
+		...resolvedHeaderProps
+	}) : null;
 	return /* @__PURE__ */ jsx(TooltipWrapper, {
 		as,
 		error,
@@ -92,15 +97,13 @@ var InputFrame = ({ ref, children, formFieldRef, labelProps, headerProps, error,
 							className: clsx(!isLeadingIconElement && "pointer-events-none"),
 							children: renderIconVisual(leadingIcon)
 						}),
+						labelPlacement === "content-row" && labelContent,
+						labelPlacement === "content-row" && actionContent,
 						/* @__PURE__ */ jsxs("div", {
 							className: clsx(inputContentWrapperCva({ as }), contentWrapperClassName),
 							children: [
-								as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
-									as,
-									size,
-									...resolvedHeaderProps
-								}),
-								actionContent,
+								labelPlacement === "content-wrapper" && labelContent,
+								labelPlacement === "content-wrapper" && actionContent,
 								children
 							]
 						})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.2.9-rc.27",
+  "version": "2.2.9-rc.28",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",