@povio/ui 2.2.1 → 2.2.2

package/README.md

@@ -32,13 +32,20 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
 ```css
-@source "../../../../node_modules/@povio/ui/dist";
+@source "../../node_modules/@povio/ui/dist";
 ```
 
 ### React Aria
 
 We are using `react-aria-components` for our UI components including their plugin for Tailwind that makes classes for modifiers a bit shorter. As such, make sure to install and setup [`tailwindcss-react-aria-components`](https://www.npmjs.com/package/tailwindcss-react-aria-components)
 
+### Custom Tailwind plugin
+
+We also use a custom tailwind plugin to shorten some selectors inside the @povio/ui package. Install it by adding the following line to your `base.css`.
+```css
+@plugin "@povio/ui/tw-ui-plugin";
+```
+
 ### Translations
 
 We're using `i18next` for translations. Make sure the package versions match in your project. Out of sync major version might cause issues.

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -10,12 +10,11 @@ import { clsx } from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
 const Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
-	const uiStyle = UIStyle.useConfig();
-	const breadcrumbsCva$1 = uiStyle?.breadcrumbs?.cva ?? breadcrumbsCva;
-	const breadcrumbItem$1 = uiStyle?.breadcrumbs?.itemCva ?? breadcrumbItem;
-	const breadcrumbSegmentCva = uiStyle?.breadcrumbs?.segmentCva ?? breadcrumbSegment;
-	const breadcrumbChevronCva = uiStyle?.breadcrumbs?.chevronCva ?? breadcrumbChevron;
-	const breadcrumbIconCva = uiStyle?.breadcrumbs?.iconCva ?? breadcrumbIcon;
+	const breadcrumbsCva$1 = UIStyle.useCva("breadcrumbs.cva", breadcrumbsCva);
+	const breadcrumbItem$1 = UIStyle.useCva("breadcrumbs.itemCva", breadcrumbItem);
+	const breadcrumbSegmentCva = UIStyle.useCva("breadcrumbs.segmentCva", breadcrumbSegment);
+	const breadcrumbChevronCva = UIStyle.useCva("breadcrumbs.chevronCva", breadcrumbChevron);
+	const breadcrumbIconCva = UIStyle.useCva("breadcrumbs.iconCva", breadcrumbIcon);
 	const containerRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
 	useLayoutEffect(() => {

package/dist/components/Menu/MenuItem.js

@@ -6,7 +6,7 @@ import { clsx } from "clsx";
 import { MenuItem } from "react-aria-components";
 const MenuItem$1 = ({ label, content, children, className, ...item }) => {
 	const hasSubmenu = !!children && children?.length > 0;
-	const menuItemCva$1 = UIStyle.useConfig()?.menu?.itemCva ?? menuItemCva;
+	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		...item,
 		textValue: label,

package/dist/components/Menu/MenuMobile.js

@@ -8,9 +8,8 @@ import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { Button, Menu } from "react-aria-components";
 const MenuMobile = ({ trigger, items, onAction, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
-	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
+	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
 	const activeItemRef = useRef(null);
 	const activeItemParentsRef = useRef([]);
 	const lastEventRef = useRef(null);

package/dist/components/Menu/MenuPopover.js

@@ -2,20 +2,21 @@ import { menuCva, menuPopoverCva, menuPopoverWrapperCva } from "./menu.cva.js";
 import { UIStyle } from "../../config/uiStyle.context.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRef } from "react";
 import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
 const MenuPopover = ({ items, className, onAction, ...props }) => {
 	const lastEventRef = useRef(null);
-	const uiStyle = UIStyle.useConfig();
-	const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
-	const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
-	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	const menuPopoverCva$1 = UIStyle.useCva("menu.popoverCva", menuPopoverCva);
+	const menuPopoverWrapperCva$1 = UIStyle.useCva("menu.popoverWrapperCva", menuPopoverWrapperCva);
+	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
-		className: clsx(menuPopoverCva$1({ ...props }), className),
+		className: menuPopoverCva$1({
+			...props,
+			className
+		}),
 		children: /* @__PURE__ */ jsx("div", {
-			className: menuPopoverWrapperCva$1({ ...props }),
+			className: menuPopoverWrapperCva$1({}),
 			children: /* @__PURE__ */ jsx("div", {
 				onClickCapture: (e) => {
 					lastEventRef.current = e;

package/dist/components/buttons/Button/Button.js

@@ -1,18 +1,20 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { LinkContext } from "../../../config/link.context.js";
 import { ButtonContent } from "../shared/ButtonContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { button, buttonContent, buttonIconSize, buttonSize, buttonTypography } from "./button.cva.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, Link, ToggleButton } from "react-aria-components";
 const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }) => {
 	const linkContext = LinkContext.useLinkContext();
-	const uiStyle = UIStyle.useConfig();
-	const buttonCva = uiStyle?.button?.cva ?? button;
-	const buttonSizeCva = uiStyle?.button?.sizeCva ?? buttonSize;
-	const buttonContentCva = uiStyle?.button?.contentCva ?? buttonContent;
-	const buttonIconSizeCva = uiStyle?.button?.iconSize ?? buttonIconSize;
-	const typographyMap = uiStyle?.button?.typography ?? buttonTypography;
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
+	const buttonCva = UIStyle.useCva("button.cva", button);
+	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
+	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
+	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
+	const typographyMap = UIStyle.useMapper("button.typography", buttonTypography);
 	const Component = (() => {
 		if (link) return linkContext?.LinkComponent ?? Link;
 		if (props.toggle != null) return ToggleButton;
@@ -25,9 +27,17 @@ const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, li
 		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
 		className: clsx(buttonCva({
 			...props,
+			variant,
+			size,
 			className
-		}), buttonSizeCva({ ...props }), buttonContentCva({
+		}), buttonSizeCva({
 			...props,
+			variant,
+			size
+		}), buttonContentCva({
+			...props,
+			variant,
+			size,
 			iconPosition: !Icon ? "none" : iconPosition
 		})),
 		children: /* @__PURE__ */ jsx(ButtonContent, {
@@ -39,9 +49,15 @@ const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, li
 			iconPosition,
 			iconClassName: buttonIconSizeCva({
 				...props,
+				variant,
+				size,
 				className: iconClassName
 			}),
-			typography: typographyMap({ ...props })
+			typography: typographyMap({
+				...props,
+				variant,
+				size
+			})
 		})
 	});
 };

package/dist/components/buttons/PillButton/PillButton.js

@@ -6,9 +6,8 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButton } from "react-aria-components";
 const PillButton = ({ children, dismissable, toggle, icon, iconPosition, contentRef, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const pillButtonCva = uiStyle?.pillButton?.cva ?? pillButton;
-	const pillButtonTypographyMap = uiStyle?.pillButton?.typography ?? pillButtonTypography;
+	const pillButtonCva = UIStyle.useCva("pillButton.cva", pillButton);
+	const pillButtonTypographyMap = UIStyle.useMapper("pillButton.typography", pillButtonTypography);
 	const Component = toggle ? ToggleButton : Button;
 	const getIconPosition = () => {
 		if (dismissable) return "right";

package/dist/components/buttons/shared/ButtonContent.js

@@ -6,7 +6,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
 const ButtonContent = ({ ref, text, isLoading, icon: Icon, iconClassName, hideText, iconPosition = "left", typography: typographyOverrides }) => {
-	const typographyCva = UIStyle.useConfig()?.typography?.cva ?? typography;
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
 	let iconOrLoader = null;
 	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
 	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;

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

@@ -1,8 +1,8 @@
 import { UIStyle } from "../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
 import { CheckboxCheckmark } from "./CheckboxCheckmark.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -11,7 +11,7 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const checkboxTypographyMap = UIStyle.useConfig()?.checkbox?.typography ?? checkboxTypography;
+	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
 	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
 	const formFieldErrorProps = {
 		error,

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

@@ -4,9 +4,8 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
 import { checkbox, checkboxIcon } from "./checkbox.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 const CheckboxCheckmark = ({ variant, className, selectedIcon: SelectedIcon = CheckboxCheckmarkIcon, indeterminateIcon: IndeterminateIcon = CheckboxIndeterminateIcon, ...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const checkboxCva = uiStyle?.checkbox?.cva ?? checkbox;
-	const checkboxIconCva = uiStyle?.checkbox?.iconCva ?? checkboxIcon;
+	const checkboxCva = UIStyle.useCva("checkbox.cva", checkbox);
+	const checkboxIconCva = UIStyle.useCva("checkbox.iconCva", checkboxIcon);
 	return /* @__PURE__ */ jsxs("div", {
 		className: checkboxCva({
 			variant,

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

@@ -12,10 +12,9 @@ import { useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDate, createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
+import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
-var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, className, placeholder, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
@@ -114,10 +113,7 @@ var DatePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...fieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
+				fieldProps,
 				buttonProps,
 				isDirty,
 				isDisabled,

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

@@ -15,11 +15,10 @@ import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDate, createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
+import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 import { useTranslation } from "react-i18next";
-var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
@@ -464,14 +463,8 @@ var DateRangePickerBase = (props) => {
 				ref: mergeRefs(ref, datePickerInputRef),
 				as,
 				groupProps,
-				fieldProps: {
-					...startFieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
-				endFieldProps: {
-					...endFieldProps,
-					placeholderValue: PLACEHOLDER_VALUE
-				},
+				fieldProps: startFieldProps,
+				endFieldProps,
 				buttonProps,
 				isDisabled,
 				isInvalid: !!error,

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

@@ -11,9 +11,8 @@ import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-import { CalendarDateTime, Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
+import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import { useCalendarState, useDatePickerState } from "react-stately";
-var PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, isTimeOptional, placeholder, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
@@ -129,7 +128,6 @@ var DateTimePickerBase = (props) => {
 				groupProps,
 				fieldProps: {
 					...fieldProps,
-					placeholderValue: PLACEHOLDER_VALUE,
 					onBlur: (e) => {
 						fieldProps.onBlur?.(e);
 						onInputBlur(e);

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

@@ -6,19 +6,18 @@ 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";
-import { inputSide, useInputCva } from "../../shared/input.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
-import useMeasure from "react-use-measure";
 const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, onOpenDropdown, ...props }) => {
-	const inputCva = useInputCva();
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -33,8 +32,6 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 	const dateFieldRef = useRef(null);
 	const endDateFieldRef = useRef(null);
 	const containerRef = useRef(null);
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
 	useImperativeHandle(ref, () => ({
 		clear: () => {
 			dateFieldRef.current?.clearField();
@@ -66,30 +63,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 		}
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
-	const style = useMemo(() => {
-		return {
-			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${labelWidth}px)` : "0px",
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px)`
-		};
-	}, [
-		labelWidth,
-		trailingWidth,
-		as,
-		size,
-		inputSideCva
-	]);
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: inputCva({
+		className: inputBaseCva({
 			variant,
 			as,
-			size,
 			...props,
 			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
 		}),
@@ -107,63 +85,70 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, butto
 		...groupProps,
 		...focusWithinProps,
 		...hoverProps,
-		children: [/* @__PURE__ */ jsxs("div", { children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-			ref: labelContentRef,
-			as,
-			...headerProps
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+				as,
+				...headerProps
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-input-gap-input-text-to-elements",
+				children: [
+					disableManualEntry && /* @__PURE__ */ jsx(Button, {
+						onPress: onOpenDropdown,
+						className: "absolute inset-0 z-0",
+						isDisabled
+					}),
+					todayIcon && /* @__PURE__ */ jsx(IconButton, {
+						label: "",
+						icon: TodayIcon,
+						size: "none",
+						onPress: onToday,
+						className: "relative z-1"
+					}),
+					disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+						size: "label-1",
+						className: "text-text-default-3",
+						children: placeholder
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
+						ref: dateFieldRef,
+						...fieldProps,
+						isDisabled,
+						isInvalid,
+						onClearChange,
+						hidePlaceholder,
+						disableManualEntry
+					}), 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: "–"
+					}), /* @__PURE__ */ jsx(DateField, {
+						ref: endDateFieldRef,
+						...endFieldProps,
+						isDisabled,
+						isInvalid,
+						onClearChange,
+						hidePlaceholder,
+						disableManualEntry
+					})] })] })
+				]
+			})]
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			style,
-			children: [
-				disableManualEntry && /* @__PURE__ */ jsx(Button, {
-					onPress: onOpenDropdown,
-					className: "absolute inset-0 z-0",
-					isDisabled
-				}),
-				todayIcon && /* @__PURE__ */ jsx(IconButton, {
-					label: "",
-					icon: TodayIcon,
-					size: "none",
-					onPress: onToday,
-					className: "relative z-1"
-				}),
-				disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
-					size: "label-1",
-					className: "text-text-default-3",
-					children: placeholder
-				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
-					ref: dateFieldRef,
-					...fieldProps,
-					isDisabled,
-					isInvalid,
-					onClearChange,
-					hidePlaceholder,
-					disableManualEntry
-				}), 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: "–"
-				}), /* @__PURE__ */ jsx(DateField, {
-					ref: endDateFieldRef,
-					...endFieldProps,
-					isDisabled,
-					isInvalid,
-					onClearChange,
-					hidePlaceholder,
-					disableManualEntry
-				})] })] })
-			]
-		})] }), /* @__PURE__ */ jsxs("div", {
-			ref: trailingContentRef,
-			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
+			className: clsx(inputSizeCva({
 				size,
-				type: "right"
-			})),
-			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear,
+				show: canClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",
 				...buttonProps,
 				icon: isDateTime ? DateTimeIcon : CalendarIcon,
-				isDisabled
+				isDisabled,
+				className: "border-0!"
 			})]
 		})]
 	});

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

@@ -2,53 +2,31 @@ import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { inputSide, useInputCva } from "../../shared/input.cva.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
 import { TimeField } from "./TimeField.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
-import useMeasure from "react-use-measure";
 const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }) => {
-	const inputCva = useInputCva();
-	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
 	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
 	const { isFocusVisible } = useFocusVisible();
-	const [labelContentRef, { width: labelWidth }] = useMeasure();
-	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
 	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
-	const style = useMemo(() => {
-		return {
-			paddingLeft: as === "filter" ? `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${labelWidth}px)` : "0px",
-			paddingRight: `calc(var(${inputSideCva({
-				size,
-				type: "var"
-			})}) + ${trailingWidth}px)`
-		};
-	}, [
-		labelWidth,
-		trailingWidth,
-		as,
-		size,
-		inputSideCva
-	]);
 	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: inputCva({
+		className: inputBaseCva({
 			variant,
 			as,
-			size,
 			...props,
-			className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2")
+			className: clsx("group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements")
 		}),
 		"data-rac": "",
 		"data-datetime-input": "",
@@ -63,19 +41,21 @@ const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isIn
 		...fieldProps,
 		...focusWithinProps,
 		...hoverProps,
-		children: [/* @__PURE__ */ jsxs("div", { children: [
-			disableManualEntry && /* @__PURE__ */ jsx(Button, {
-				onPress,
-				className: "absolute inset-0 z-0"
-			}),
-			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
-				ref: labelContentRef,
-				as,
-				...headerProps
-			}),
-			/* @__PURE__ */ jsx("div", {
-				style,
-				children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			children: [
+				disableManualEntry && /* @__PURE__ */ jsx(Button, {
+					onPress,
+					className: "absolute inset-0 z-0"
+				}),
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				/* @__PURE__ */ jsx("div", { children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
 					size: "label-1",
 					className: "text-text-default-3",
 					children: placeholder
@@ -84,20 +64,23 @@ const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isIn
 					state,
 					isDisabled,
 					hidePlaceholder
-				})
-			})
-		] }), /* @__PURE__ */ jsxs("div", {
-			ref: trailingContentRef,
-			className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", inputSideCva({
+				}) })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
 				size,
-				type: "right"
-			})),
-			children: [isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => state.setValue(null),
+				show: canClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",
 				onPress,
 				icon: ClockIcon,
-				isDisabled
+				isDisabled,
+				className: "border-0!"
 			})]
 		})]
 	});

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

@@ -2,8 +2,8 @@ import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { Button as Button$1 } from "../../../buttons/Button/Button.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
-import { inputSize } from "../../shared/input.cva.js";
 import { ns } from "../../../../config/i18n.js";
+import { inputSize } from "../../shared/input.cva.js";
 import { UploadIcon } from "../../../../assets/icons/Upload.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -13,7 +13,7 @@ import { useTranslation } from "react-i18next";
 const InputUploadContent = (props) => {
 	const { variant, isDisabled, error, placeholder, buttonText, ...rest } = props;
 	const { t } = useTranslation("ui");
-	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return /* @__PURE__ */ jsx(FileTrigger, {
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {

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

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", (UIStyle.useConfig()?.input?.sizeCva ?? inputSize)({ size: "default" })),
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size: "default" })),
 		children: [/* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",

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

@@ -16,7 +16,7 @@ const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightC
 	const errorProps = {
 		error,
 		isDisabled,
-		isHidden: isHeaderHidden,
+		isHidden: ["filter", "inline"].includes(as ?? ""),
 		className: errorClassName
 	};
 	return /* @__PURE__ */ jsxs("div", {