@povio/ui 2.2.8-rc → 2.2.9-rc.1

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,10 @@
 import { FC, SVGProps } from 'react';
 import { Key } from 'react-aria-components';
+import { LinkNavigationProps } from '../text/Link/Link';
 export interface BreadcrumbItem {
     id: Key;
     label: string;
-    href?: string;
+    link?: LinkNavigationProps;
     icon?: FC<SVGProps<SVGSVGElement>>;
 }
 export interface BreadcrumbsProps {

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -37,7 +37,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 	const lastItem = items[items.length - 1];
 	const LinkComponent = LinkContext.useLinkContext()?.LinkComponent ?? Link;
 	const renderBreadcrumbLink = (item, isCurrent, iconOnly) => /* @__PURE__ */ jsxs(LinkComponent, {
-		href: item.href,
+		...item.link,
 		className: breadcrumbItem$1({ isCurrent }),
 		children: [item.icon && /* @__PURE__ */ jsx(item.icon, {
 			className: breadcrumbIconCva({}),
@@ -52,7 +52,7 @@ var Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
 		const menuItems = hiddenItems.map((item) => ({
 			id: item.id,
 			label: item.label,
-			href: item.href
+			link: item.link
 		}));
 		const renderEllipsis = () => /* @__PURE__ */ jsx(MenuDesktop, {
 			trigger: /* @__PURE__ */ jsx(Tooltip$1, {

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

@@ -1,20 +1,17 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useCalendarState, useDatePickerState } from "react-stately";
@@ -154,18 +151,6 @@ var DatePickerBase = (props) => {
 	});
 };
 var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
-	const ui = UIConfig.useConfig();
-	const { locale } = useLocale();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const rawValue = watchedValue ?? props.value ?? null;
 	const formatCalendarDate = (calendarDate) => {
 		if (calendarDate === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
@@ -182,47 +167,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDatePlaceholder(locale);
-		const staticDateValue = rawValue ? parseCalendarDate(rawValue) : null;
-		const displayValue = staticDateValue ? DateTimeUtils.formatCalendarDateLocalized(staticDateValue, locale) : "";
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
-			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
-			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(CalendarIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -231,7 +175,7 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DatePickerBase, {
 				...innerProps,
 				...dateLimits,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: parseCalendarDate(field.value),
 				onChange: (value) => field.onChange(formatCalendarDate(value)),
 				onBlur: field.onBlur,
@@ -244,7 +188,6 @@ var DatePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	return /* @__PURE__ */ jsx(DatePickerBase, {
 		...props,
 		...dateLimits,
-		ref: mergeRefs(props.ref, inputRef),
 		value: parseCalendarDate(props.value),
 		onChange: (value) => props.onChange?.(formatCalendarDate(value))
 	});

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

@@ -1,24 +1,21 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import "../../../../config/i18n.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Button } from "react-aria-components";
 import { useDateRangePicker, useLocale as useLocale$1 } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { createCalendar, endOfMonth, endOfWeek, endOfYear, getLocalTimeZone, startOfMonth, startOfWeek, startOfYear, toCalendarDate, today } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
@@ -533,18 +530,6 @@ var DateRangePickerBase = (props) => {
 	});
 };
 var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
-	const ui = UIConfig.useConfig();
-	const { locale } = useLocale$1();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const rawValue = watchedValue ?? props.value ?? null;
 	const formatDateRange = (range) => {
 		if (!range?.start || !range?.end) return null;
 		if (fullIso) return {
@@ -583,76 +568,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 		minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
 		maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const defaultDatePlaceholder = DateTimeUtils.getDatePlaceholder(locale);
-		const staticPlaceholder = props.placeholder ?? /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
-			children: [
-				/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder }),
-				/* @__PURE__ */ jsx("span", {
-					className: "pointer-events-none select-none",
-					children: "–"
-				}),
-				/* @__PURE__ */ jsx("span", { children: defaultDatePlaceholder })
-			]
-		});
-		const formatStaticDate = (value) => {
-			if (!value) return "";
-			const parsedDate = parseCalendarDate(value);
-			if (!parsedDate) return "";
-			return DateTimeUtils.formatCalendarDateLocalized(parsedDate, locale);
-		};
-		const start = formatStaticDate(rawValue?.start ?? null);
-		const end = formatStaticDate(rawValue?.end ?? null);
-		const hasRangeValue = !!(start && end);
-		const displayValue = hasRangeValue ? /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex items-center gap-input-gap-input-text-to-elements",
-			children: [
-				/* @__PURE__ */ jsx("span", { children: start }),
-				/* @__PURE__ */ jsx("span", {
-					className: "pointer-events-none select-none",
-					children: "–"
-				}),
-				/* @__PURE__ */ jsx("span", { children: end })
-			]
-		}) : void 0;
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !hasRangeValue,
-			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
-			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(CalendarIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -661,7 +576,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateRangePickerBase, {
 				...innerProps,
 				...dateLimits,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: parseDateRange(field.value),
 				onChange: (value) => field.onChange(formatDateRange(value)),
 				onBlur: field.onBlur,
@@ -674,7 +589,6 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, ...props }) => {
 	return /* @__PURE__ */ jsx(DateRangePickerBase, {
 		...props,
 		...dateLimits,
-		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateRange(props.value),
 		onChange: (value) => props.onChange?.(formatDateRange(value))
 	});

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

@@ -1,19 +1,16 @@
-import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { Calendar } from "../shared/Calendar.js";
 import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { useDatePicker, useLocale } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { Time, createCalendar, getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
@@ -177,18 +174,6 @@ var DateTimePickerBase = (props) => {
 	});
 };
 var DateTimePicker = ({ fullIso = true, ...props }) => {
-	const ui = UIConfig.useConfig();
-	const { locale } = useLocale();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const rawValue = watchedValue ?? props.value ?? null;
 	const formatDateValue = (dateValue) => {
 		if (dateValue === null) return null;
 		if (fullIso) return DateTimeUtils.fromCalendarDateTimeToUTCISO(dateValue);
@@ -198,47 +183,6 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 		if (isoString == null) return isoString;
 		return DateTimeUtils.fromUTCISOToCalendarDateTime(isoString);
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			((inputRef.current?.getContainer?.() ?? inputRef.current)?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const todayIcon = props.todayIcon ?? ui.dateInput.todayIcon;
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getDateTimePlaceholder(locale);
-		const staticDateTimeValue = rawValue ? parseDateValue(rawValue) : null;
-		const displayValue = staticDateTimeValue && "hour" in staticDateTimeValue ? DateTimeUtils.formatCalendarDateTimeLocalized(staticDateTimeValue, locale) : "";
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: props.className ? `relative inline-flex w-full flex-col text-left ${props.className}` : "relative inline-flex w-full flex-col text-left",
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
-			leadingVisual: todayIcon ? /* @__PURE__ */ jsx(TodayIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0,
-			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
@@ -246,7 +190,7 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 			name: formControl.name,
 			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(DateTimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: parseDateValue(field.value),
 				onChange: (value) => field.onChange(formatDateValue(value)),
 				onBlur: field.onBlur,
@@ -258,7 +202,6 @@ var DateTimePicker = ({ fullIso = true, ...props }) => {
 	}
 	return /* @__PURE__ */ jsx(DateTimePickerBase, {
 		...props,
-		ref: mergeRefs(props.ref, inputRef),
 		value: parseDateValue(props.value),
 		onChange: (value) => props.onChange?.(formatDateValue(value))
 	});

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

@@ -1,10 +1,8 @@
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { TimePickerForm } from "../shared/TimePickerForm.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
-import { StaticInput } from "../../shared/StaticInput.js";
 import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
@@ -13,7 +11,7 @@ import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
 import { useLocale, useTimeField } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
-import { Controller, useWatch } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { getLocalTimeZone, now, toTime } from "@internationalized/date";
 import { DateTime } from "luxon";
 import { useTimeFieldState } from "react-stately";
@@ -103,6 +101,7 @@ var TimePickerBase = (props) => {
 				onPress: onOpen,
 				isDisabled,
 				isDirty,
+				isRequired,
 				isInvalid: !!error,
 				disableDropdown,
 				variant,
@@ -128,18 +127,6 @@ var TimePickerBase = (props) => {
 	});
 };
 var TimePicker = (props) => {
-	const ui = UIConfig.useConfig();
-	const { locale } = useLocale();
-	const [renderInput, setRenderInput] = useState(!ui.renderStaticInput);
-	const [shouldFocus, setShouldFocus] = useState(false);
-	const inputRef = useRef(null);
-	const watchedValue = "formControl" in props && props.formControl ? useWatch({
-		control: props.formControl.control,
-		name: props.formControl.name
-	}) : props.value;
-	let isFormControlDisabled = false;
-	if ("formControl" in props && props.formControl) isFormControlDisabled = !!props.formControl.control._options?.disabled;
-	const rawValue = watchedValue ?? props.value ?? null;
 	const formatTimeValue = (timeValue) => {
 		if (timeValue === null) return null;
 		const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
@@ -150,56 +137,18 @@ var TimePicker = (props) => {
 		if (isoString == null) return isoString;
 		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
 	};
-	useEffect(() => {
-		if (!renderInput || !shouldFocus) return;
-		requestAnimationFrame(() => {
-			(inputRef.current?.querySelector("input, button, [tabindex]:not([tabindex='-1'])"))?.focus();
-		});
-		setShouldFocus(false);
-	}, [renderInput, shouldFocus]);
-	if (!renderInput) {
-		const as = props.as ?? ui.input.as;
-		const size = props.size ?? ui.input.size;
-		const variant = props.variant ?? ui.input.variant;
-		const hideLabel = props.hideLabel ?? ui.input.hideLabel;
-		const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
-		let isDisabled = !!props.isDisabled;
-		if (isFormControlDisabled) isDisabled = true;
-		const disableManualEntry = props.disableManualEntry ?? ui.dateInput.disableManualEntry;
-		const showDropdown = !props.disableDropdown || disableManualEntry;
-		const staticPlaceholder = props.placeholder ?? DateTimeUtils.getTimePlaceholder(locale);
-		const staticTimeValue = rawValue ? parseTimeValue(rawValue) : null;
-		const displayValue = staticTimeValue ? DateTimeUtils.formatTimeLocalized(staticTimeValue, locale) : "";
-		return /* @__PURE__ */ jsx(StaticInput, {
-			...props,
-			onInteract: (focus) => {
-				setShouldFocus(focus);
-				setRenderInput(true);
-			},
-			className: clsx("relative inline-flex w-full flex-col text-left", props.className),
-			as,
-			size,
-			variant,
-			hideLabel,
-			isHeaderHidden,
-			isDisabled,
-			placeholder: staticPlaceholder,
-			displayValue,
-			isEmpty: !displayValue,
-			trailingVisual: showDropdown ? /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }) : void 0
-		});
-	}
 	if ("formControl" in props && props.formControl) {
 		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,
-			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(TimePickerBase, {
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TimePickerBase, {
 				...innerProps,
-				ref: mergeRefs(ref, field.ref, inputRef),
+				ref: mergeRefs(ref, field.ref),
 				value: parseTimeValue(field.value),
 				onChange: (value) => field.onChange(formatTimeValue(value)),
 				onBlur: field.onBlur,
+				isDirty,
 				isDisabled: field.disabled || props.isDisabled,
 				error: props.error ?? error?.message
 			})
@@ -207,7 +156,6 @@ var TimePicker = (props) => {
 	}
 	return /* @__PURE__ */ jsx(TimePickerBase, {
 		...props,
-		ref: mergeRefs(props.ref, inputRef),
 		value: parseTimeValue(props.value),
 		onChange: (value) => props.onChange?.(formatTimeValue(value))
 	});

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

@@ -82,6 +82,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		"data-has-selection": fieldProps.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-is-required": isRequired || void 0,
+		"data-is-filled": fieldProps.value !== null || void 0,
 		...groupProps,
 		...focusWithinProps,
 		...hoverProps,

package/dist/components/inputs/DateTime/shared/TimePickerInput.d.ts

@@ -9,6 +9,7 @@ interface DatePickerInputProps extends InputVariantProps {
     state: TimeFieldState;
     isDisabled?: boolean;
     isDirty?: boolean;
+    isRequired?: boolean;
     isInvalid?: boolean;
     disableDropdown?: boolean;
     headerProps?: FormFieldHeaderProps;
@@ -18,5 +19,5 @@ interface DatePickerInputProps extends InputVariantProps {
     className?: string;
     onPress: () => void;
 }
-export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimePickerInput: ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -12,7 +12,7 @@ import { useState } from "react";
 import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 //#region src/components/inputs/DateTime/shared/TimePickerInput.tsx
-var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -38,6 +38,8 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 		"data-focus-visible": isFocused && isFocusVisible || void 0,
 		"data-has-selection": state.value !== null || void 0,
 		"data-is-dirty": isDirty || void 0,
+		"data-is-required": isRequired || void 0,
+		"data-is-filled": state.value !== null || void 0,
 		...fieldProps,
 		...focusWithinProps,
 		...hoverProps,

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

@@ -9,7 +9,7 @@ import { useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/File/InputUpload.tsx
-var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, ...rest }) => {
+var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, size, ...rest }) => {
 	const ui = UIConfig.useConfig();
 	const [internalFiles, setInternalFiles] = useState(() => {
 		if (value !== void 0) {
@@ -77,7 +77,8 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 		children: files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
 			files,
 			onRemove: handleRemove,
-			isDisabled
+			isDisabled,
+			size
 		}) : /* @__PURE__ */ jsx(InputUploadContent, {
 			...rest,
 			label,
@@ -87,7 +88,8 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 			variant,
 			isDisabled,
 			onSelect: handleSelect,
-			onDrop: handleDrop
+			onDrop: handleDrop,
+			size
 		})
 	});
 };

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -4,6 +4,8 @@ import { FieldValues } from 'react-hook-form';
 import { FormFieldProps } from '../FormField/FormField';
 import { ControlProps } from '../shared/form.types';
 import { InputUploadButtonProps } from './shared/inputUploadButton.cva';
+import { InputSizeProps } from '../shared/input.cva';
+import { ButtonVariantProps } from '../../buttons/Button/button.cva.js';
 export interface SingleFileUploadProps {
     allowsMultiple?: false;
     value?: File | null;
@@ -30,5 +32,6 @@ export type InputUploadBaseProps = {
     className?: string;
     placeholder?: string;
     buttonText?: string;
-} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps;
+} & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps & Pick<InputSizeProps, "size">;
 export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps & GroupedFileUploadControlProps<TFieldValues>;
+export declare const inputButtonSizeMapping: Record<NonNullable<InputSizeProps["size"]>, ButtonVariantProps["size"]>;

package/dist/components/inputs/File/inputUpload.types.js

@@ -0,0 +1,9 @@
+//#region src/components/inputs/File/inputUpload.types.ts
+var inputButtonSizeMapping = {
+	"extra-small": "xs",
+	small: "s",
+	default: "m",
+	large: "l"
+};
+//#endregion
+export { inputButtonSizeMapping };

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

@@ -97,12 +97,14 @@ var FileUploadContentFilled = ({ variant, as, isDisabled, state, browseText, fil
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
-						icon: CloseIcon
+						icon: CloseIcon,
+						isDisabled
 					}) : /* @__PURE__ */ jsx(TextButton, {
 						color: "secondary",
 						onPress: () => {
 							onRemove(state.id ?? "");
 						},
+						isDisabled,
 						children: t(($) => $.ui.fileUpload.removeFile)
 					})]
 				})

package/dist/components/inputs/File/shared/InputUploadContent.d.ts

@@ -1,6 +1,7 @@
 import { DropZoneProps, FileTriggerProps } from 'react-aria-components';
 import { InputUploadBaseProps } from '../inputUpload.types';
-interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref"> {
+import { InputSizeProps } from '../../shared/input.cva';
+interface InputUploadContentProps extends Omit<InputUploadBaseProps, "ref">, Pick<InputSizeProps, "size"> {
     onSelect: FileTriggerProps["onSelect"];
     onDrop: DropZoneProps["onDrop"];
 }

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

@@ -5,6 +5,7 @@ import "../../../../config/i18n.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { inputSize } from "../../shared/input.cva.js";
 import { UploadIcon } from "../../../../assets/icons/Upload.js";
+import { inputButtonSizeMapping } from "../inputUpload.types.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -12,7 +13,7 @@ import { DropZone, FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 //#region src/components/inputs/File/shared/InputUploadContent.tsx
 var InputUploadContent = (props) => {
-	const { variant, isDisabled, error, placeholder, buttonText, ...rest } = props;
+	const { variant, isDisabled, error, placeholder, buttonText, size, ...rest } = props;
 	const { t } = useTranslation("ui");
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return /* @__PURE__ */ jsx(FileTrigger, {
@@ -28,7 +29,7 @@ var InputUploadContent = (props) => {
 			children: [/* @__PURE__ */ jsxs(DropZone, {
 				...rest,
 				isDisabled,
-				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size: "default" })),
+				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size })),
 				children: [/* @__PURE__ */ jsx(Typography, {
 					variant: "default",
 					size: "label-1",
@@ -41,7 +42,7 @@ var InputUploadContent = (props) => {
 					children: buttonText ?? t(($) => $.ui.fileUpload.upload)
 				})]
 			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
-				size: "m",
+				size: inputButtonSizeMapping[size ?? "default"],
 				width: "hug",
 				isDisabled,
 				className: "truncate",