@povio/ui 2.2.12 → 2.3.0-rc.2

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

@@ -1,11 +1,10 @@
-import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
-import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
-import { IconButton } from "../../../buttons/IconButton/IconButton.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TodayIcon } from "../../../../assets/icons/Today.js";
 import { DateField } from "./DateField.js";
+import { datePickerInputContentRow } from "./datePickerInput.cva.js";
+import { getDatePickerTodayIcon } from "./datePickerTodayIcon.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
 import { inputBase, inputSize } from "../../shared/input.cva.js";
@@ -16,11 +15,13 @@ import { Button } from "react-aria-components";
 import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
 import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, autoFixYear, isTimeOptional = false, format, ...props }) => {
+var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone, isTimeOptional = false, format, ...props }) => {
+	const uiConfig = UIConfig.useConfig();
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const datePickerInputContentRowCva = UIStyle.useCva("datePickerInput.contentRowCva", datePickerInputContentRow);
 	const [canClear, setCanClear] = useState(false);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
 	const [isFocused, setIsFocused] = useState(false);
@@ -43,6 +44,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			if (endFieldProps) endFieldProps.onChange?.(null);
 			setCanClear(false);
 			fieldProps.onBlur?.(null);
+			endFieldProps?.onBlur?.(null);
 		},
 		getContainer: () => containerRef.current
 	}));
@@ -53,7 +55,10 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 		dateFieldRef.current?.clearField();
 		fieldProps.onChange?.(null);
 		endDateFieldRef.current?.clearField();
+		endFieldProps?.onChange?.(null);
 		setCanClear(false);
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const onToday = () => {
 		if (isDateTime) {
@@ -64,19 +69,32 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 			fieldProps.onChange?.(today(effectiveTimeZone));
 			if (endFieldProps) endFieldProps.onChange?.(today(effectiveTimeZone));
 		}
+		fieldProps.onBlur?.(null);
+		endFieldProps?.onBlur?.(null);
 	};
 	const hidePlaceholder = as === "floating" && !fieldProps.value && !isFocused;
+	const todayIconComponent = getDatePickerTodayIcon(todayIcon);
+	const todayIconButton = todayIconComponent ? /* @__PURE__ */ jsx(InlineIconButton, {
+		label: "",
+		icon: todayIconComponent,
+		size: todayIconButtonSize,
+		onPress: onToday,
+		className: "relative z-1 !border-none"
+	}) : null;
+	const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
+	const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
-		className: clsx(inputBaseCva({
+		className: clsx("group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", inputBaseCva({
 			variant,
 			as,
 			...props
-		}), "group/date-picker-content relative flex min-w-input-width-min-width items-center justify-between gap-2", className),
+		}), className),
 		"data-rac": "",
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": fieldProps.value === null || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -84,65 +102,64 @@ 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,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
+			className: clsx("flex w-full items-center gap-input-gap-input-text-to-elements pr-0!", 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,
-						dateGranularity,
-						isTimeOptional,
-						format,
-						timeZone: effectiveTimeZone
-					}), 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,
-						isTimeOptional,
-						format,
-						timeZone: effectiveTimeZone
-					})] })] })
-				]
-			})]
+			})),
+			children: [
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				shouldRenderTodayIconWithFieldLabel && todayIconButton,
+				/* @__PURE__ */ jsxs("div", {
+					className: datePickerInputContentRowCva({ size }),
+					children: [
+						disableManualEntry && /* @__PURE__ */ jsx(Button, {
+							onPress: onOpenDropdown,
+							className: "absolute inset-0 z-0",
+							isDisabled
+						}),
+						!shouldRenderTodayIconWithFieldLabel && todayIconButton,
+						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,
+							dateGranularity,
+							isTimeOptional,
+							format,
+							timeZone: effectiveTimeZone
+						}), 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,
+							isTimeOptional,
+							format,
+							timeZone: effectiveTimeZone
+						})] })] })
+					]
+				})
+			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: clsx(inputSizeCva({
 				size,
@@ -155,7 +172,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
 				label: "",
 				color: "secondary",
 				...buttonProps,
-				icon: isDateTime ? DateTimeIcon : CalendarIcon,
+				icon: pickerIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

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

@@ -1,4 +1,5 @@
 import { DateFieldState, DateSegment } from '@react-stately/datepicker';
+import { HTMLAttributes, ReactNode, Ref } from 'react';
 interface DateSegmentProps {
     state: DateFieldState;
     segment: DateSegment;
@@ -8,4 +9,17 @@ interface DateSegmentProps {
 }
 export declare const getPlaceholder: (segment: DateSegment) => string | null;
 export declare const DateSegmentItem: ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }: DateSegmentProps) => import("react/jsx-runtime").JSX.Element;
+interface DateSegmentItemViewProps {
+    ref?: Ref<HTMLDivElement>;
+    segmentProps?: HTMLAttributes<HTMLDivElement>;
+    type?: DateSegment["type"];
+    text: ReactNode;
+    placeholder?: ReactNode;
+    isPlaceholder?: boolean;
+    isInputEmpty?: boolean;
+    isDisabled?: boolean;
+    timePickerOnly?: boolean;
+    hidePlaceholder?: boolean;
+}
+export declare const DateSegmentItemView: ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder, }: DateSegmentItemViewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -15,17 +15,30 @@ var getPlaceholder = (segment) => {
 var DateSegmentItem = ({ segment, state, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	const ref = useRef(null);
 	const { segmentProps } = useDateSegment(segment, state, ref);
-	const isInputEmpty = !state.value;
+	return /* @__PURE__ */ jsx(DateSegmentItemView, {
+		ref,
+		segmentProps,
+		type: segment.type,
+		text: segment.text,
+		placeholder: getPlaceholder(segment),
+		isPlaceholder: segment.isPlaceholder,
+		isInputEmpty: !state.value,
+		isDisabled,
+		timePickerOnly,
+		hidePlaceholder
+	});
+};
+var DateSegmentItemView = ({ ref, segmentProps, type, text, placeholder, isPlaceholder, isInputEmpty, isDisabled, timePickerOnly, hidePlaceholder }) => {
 	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"),
-		children: /* @__PURE__ */ jsxs(Fragment, { children: [segment.isPlaceholder && /* @__PURE__ */ jsx("span", {
+		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", type && ["hour", "dayPeriod"].includes(type) && !timePickerOnly && "ml-1", hidePlaceholder && "opacity-0"),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [isPlaceholder && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "pointer-events-none",
-			children: getPlaceholder(segment)
-		}), segment.isPlaceholder ? "" : segment.text] })
+			children: placeholder
+		}), isPlaceholder ? "" : text] })
 	});
 };
 //#endregion
-export { DateSegmentItem, getPlaceholder };
+export { DateSegmentItem, DateSegmentItemView, getPlaceholder };

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

@@ -1,6 +1,6 @@
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
 import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
 import { InputClear } from "../../shared/InputClear.js";
@@ -12,7 +12,8 @@ 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 uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const { hoverProps, isHovered } = useHover({ isDisabled });
@@ -32,12 +33,15 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 		"data-datetime-input": "",
 		"data-hovered": isHovered || void 0,
 		"data-disabled": isDisabled || void 0,
+		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
 		"data-is-empty": state.value === null || void 0,
 		"data-focus-within": isFocused || void 0,
 		"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,
@@ -72,13 +76,16 @@ var TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInva
 				as
 			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
 			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => state.setValue(null),
+				onClear: () => {
+					state.setValue(null);
+					fieldProps.onBlur?.(null);
+				},
 				show: canClear
 			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
 				label: "",
 				color: "secondary",
 				onPress,
-				icon: ClockIcon,
+				icon: uiConfig.dateInput.timeIcon,
 				isDisabled,
 				className: "border-0!"
 			})]

package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts

@@ -0,0 +1,4 @@
+import { IconButtonProps } from '../../../buttons/IconButton/IconButton';
+export type DatePickerTodayIcon = boolean | IconButtonProps["icon"];
+export type DatePickerTodayIconButtonSize = IconButtonProps["size"];
+export type DatePickerTodayIconPlacement = "content" | "fieldLabel";

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts

@@ -0,0 +1,7 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputSizeProps } from '../../shared/input.cva';
+export declare const datePickerInputContentRow: (props?: ({
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DatePickerInputContentRowProps extends VariantProps<typeof datePickerInputContentRow>, InputSizeProps {
+}

package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/DateTime/shared/datePickerInput.cva.ts
+var datePickerInputContentRow = cva("flex items-center gap-input-gap-input-text-to-elements", {
+	variants: { size: {
+		"extra-small": "",
+		small: "",
+		default: "",
+		large: ""
+	} },
+	defaultVariants: { size: "default" }
+});
+//#endregion
+export { datePickerInputContentRow };

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

@@ -0,0 +1,6 @@
+import { FC, ReactElement, SVGProps } from 'react';
+import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
+type TodayIconComponent = FC<SVGProps<SVGSVGElement>> | ReactElement;
+export declare const getDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined) => TodayIconComponent | null;
+export declare const renderDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined, size?: DatePickerTodayIconButtonSize, className?: string) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

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

@@ -0,0 +1,21 @@
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TodayIcon } from "../../../../assets/icons/Today.js";
+import { jsx } from "react/jsx-runtime";
+//#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 icon = getDatePickerTodayIcon(todayIcon);
+	if (!icon) return;
+	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/dateSegment.utils.d.ts

@@ -0,0 +1,2 @@
+import { DateSegment } from '@react-stately/datepicker';
+export declare const getTimeSegmentValue: (segment: DateSegment | undefined, fallbackValue?: number) => number;

package/dist/components/inputs/DateTime/shared/dateSegment.utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+import { CalendarDate } from '@internationalized/date';
+import { DateValue, TimeValue } from 'react-aria';
+interface StaticSegmentProps {
+    isDisabled?: boolean;
+    hidePlaceholder?: boolean;
+}
+interface StaticCalendarDateSegmentsProps extends StaticSegmentProps {
+    value?: CalendarDate | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps {
+    value?: DateValue | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticDateRangeSegmentsProps extends StaticSegmentProps {
+    start?: CalendarDate | null;
+    end?: CalendarDate | null;
+    locale: string;
+    shouldForceLeadingZeros?: boolean;
+}
+interface StaticTimeSegmentsProps extends StaticSegmentProps {
+    value?: TimeValue | null;
+    locale: string;
+}
+export declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, isDisabled, hidePlaceholder }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,80 @@
+import { DateSegmentItemView } from "./DateSegmentItem.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/inputs/DateTime/shared/staticDateTimeSegments.tsx
+var getStaticCalendarDateSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatCalendarDateLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticCalendarDateTimeSegments = ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!(value && "hour" in value);
+	return renderStaticSegments(hasValue ? DateTimeUtils.formatCalendarDateTimeLocalized(value, locale, { shouldForceLeadingZeros }) : DateTimeUtils.getDateTimePlaceholder(locale, { shouldForceLeadingZeros }), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder
+	});
+};
+var getStaticDateRangeSegments = ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder }) => {
+	const defaultPlaceholder = DateTimeUtils.getDatePlaceholder(locale, { shouldForceLeadingZeros });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		renderStaticSegments(start ? DateTimeUtils.formatCalendarDateLocalized(start, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !start,
+			isInputEmpty: !start,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !start
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: isDisabled ? "pointer-events-none select-none text-interactive-text-secondary-disabled" : "pointer-events-none select-none",
+			children: "–"
+		}),
+		renderStaticSegments(end ? DateTimeUtils.formatCalendarDateLocalized(end, locale, { shouldForceLeadingZeros }) : defaultPlaceholder, {
+			isPlaceholder: !end,
+			isInputEmpty: !end,
+			isDisabled,
+			hidePlaceholder: hidePlaceholder && !end
+		})
+	] });
+};
+var getStaticTimeSegments = ({ value, locale, isDisabled, hidePlaceholder }) => {
+	const hasValue = !!value;
+	return renderStaticSegments(value ? DateTimeUtils.formatTimeLocalized(value, locale) : DateTimeUtils.getTimePlaceholder(locale), {
+		isPlaceholder: !hasValue,
+		isInputEmpty: !hasValue,
+		isDisabled,
+		hidePlaceholder,
+		timePickerOnly: true
+	});
+};
+var renderStaticSegments = (value, options) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex",
+		children: tokenizeStaticSegmentText(value).map((token, index) => /* @__PURE__ */ jsx(DateSegmentItemView, {
+			type: token.type,
+			text: getStaticSegmentText(token),
+			placeholder: getStaticSegmentText(token),
+			isPlaceholder: options.isPlaceholder && token.type !== "literal",
+			isInputEmpty: options.isInputEmpty,
+			isDisabled: options.isDisabled,
+			timePickerOnly: options.timePickerOnly,
+			hidePlaceholder: options.hidePlaceholder
+		}, index))
+	});
+};
+var tokenizeStaticSegmentText = (value) => {
+	return (value.match(/(\p{Letter}+|\p{Number}+|[^\p{Letter}\p{Number}]+)/gu) ?? [value]).map((text) => ({
+		text,
+		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/DateTime/shared/staticDateTimeSegments.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -128,6 +128,7 @@ var FileUploadBase = (props) => {
 				...rest,
 				"data-rac": "",
 				"data-disabled": isDisabled || void 0,
+				"data-is-disabled": isDisabled || void 0,
 				"data-invalid": !!error || void 0,
 				"data-multiple": allowsMultiple || void 0,
 				"data-has-files": uploadState.length > 0 || void 0,

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

@@ -21,6 +21,7 @@ var InputUploadContent = (props) => {
 		children: /* @__PURE__ */ jsxs("div", {
 			"data-rac": "",
 			"data-disabled": isDisabled || void 0,
+			"data-is-disabled": isDisabled || void 0,
 			"data-invalid": !!error || void 0,
 			className: inputUploadButton({
 				variant,

package/dist/components/inputs/FormField/FormField.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, Ref } from 'react';
+import { FocusEventHandler, MouseEventHandler, PropsWithChildren, Ref } from 'react';
 import { FormFieldErrorProps } from './FormFieldError';
 import { FormFieldHeaderProps } from './FormFieldHeader';
 import { TextInputProps } from '../Input/TextInput/TextInput';
@@ -13,8 +13,8 @@ interface FormFieldComponentProps extends PropsWithChildren<FormFieldProps> {
     labelProps?: FormFieldHeaderProps["labelProps"];
     as?: TextInputProps["as"];
     tabIndex?: number;
-    onMouseEnter?: () => void;
-    onFocusCapture?: () => void;
+    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+    onFocusCapture?: FocusEventHandler<HTMLDivElement>;
 }
 export declare const FormField: ({ ref, as, label, tooltipText, helperText, isRequired, rightContent, isDisabled, error, hideLabel, headerClassName, errorClassName, children, className, labelProps, isHeaderHidden, tabIndex, onMouseEnter, onFocusCapture, }: FormFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/FormField/FormFieldHeader.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { ReactNode } from 'react';
+import { LabelHTMLAttributes, ReactNode } from 'react';
 export interface FormFieldHeaderProps {
     label: string;
     tooltipText?: string;
@@ -9,6 +9,6 @@ export interface FormFieldHeaderProps {
     isHeaderHidden?: boolean;
     isDisabled?: boolean;
     className?: string;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
 }
 export declare const FormFieldHeader: ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps, }: FormFieldHeaderProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,16 @@
 import { InfoIcon } from "../../../assets/icons/Info.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 import { Typography } from "../../text/Typography/Typography.js";
 import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
+import { formFieldHeader } from "./formFieldHeader.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Focusable } from "react-aria-components";
 //#region src/components/inputs/FormField/FormFieldHeader.tsx
 var FormFieldHeader = ({ label, tooltipText, helperText, isRequired, rightContent, isHeaderHidden, isDisabled, className, labelProps }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className),
+		className: clsx(UIStyle.useCva("formField.headerCva", formFieldHeader)({ visible: !isHeaderHidden }), className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex items-start justify-between",
 			children: [/* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -1,5 +1,5 @@
 import { DOMAttributes } from '@react-types/shared';
-import { RefCallback } from 'react';
+import { LabelHTMLAttributes, RefCallback } from 'react';
 import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
@@ -7,7 +7,7 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
-    labelProps?: DOMAttributes<HTMLLabelElement>;
+    labelProps?: DOMAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>;
     className?: string;
 }
 export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts

@@ -0,0 +1,6 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const formFieldHeader: (props?: ({
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FormFieldHeaderVariantProps extends VariantProps<typeof formFieldHeader> {
+}

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

@@ -0,0 +1,11 @@
+import { cva } from "class-variance-authority";
+//#region src/components/inputs/FormField/formFieldHeader.cva.ts
+var formFieldHeader = cva("", {
+	variants: { visible: {
+		true: "mb-1",
+		false: "sr-only"
+	} },
+	defaultVariants: { visible: true }
+});
+//#endregion
+export { formFieldHeader };