@povio/ui 2.3.0-rc.4 → 2.3.0-rc.40

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

@@ -6,91 +6,229 @@ 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 { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 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, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, ...props }) => {
+var TimePickerInput = (t0) => {
+	const $ = c(67);
+	const { ref, as, fieldProps, state, isDisabled, isDirty, isRequired, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, className, onPress, onClear, fireBlurOnChange, ...props } = t0;
 	const uiConfig = UIConfig.useConfig();
 	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
-	const { hoverProps, isHovered } = useHover({ isDisabled });
+	let t1;
+	if ($[0] !== isDisabled) {
+		t1 = { isDisabled };
+		$[0] = isDisabled;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { hoverProps, isHovered } = useHover(t1);
 	const [isFocused, setIsFocused] = useState(false);
-	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { onFocusWithinChange: setIsFocused };
+		$[2] = t2;
+	} else t2 = $[2];
+	const { focusWithinProps } = useFocusWithin(t2);
 	const { isFocusVisible } = useFocusVisible();
 	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
-	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
-	return /* @__PURE__ */ jsxs("div", {
-		ref,
-		className: clsx(inputBaseCva({
-			variant,
+	let t3;
+	if ($[3] !== state.segments) {
+		t3 = state.segments.some(_temp);
+		$[3] = state.segments;
+		$[4] = t3;
+	} else t3 = $[4];
+	const canClear = t3;
+	const t4 = clsx(inputBaseCva({
+		variant,
+		as,
+		...props
+	}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", className);
+	const t5 = isHovered || void 0;
+	const t6 = isDisabled || void 0;
+	const t7 = isDisabled || void 0;
+	const t8 = isInvalid || void 0;
+	const t9 = state.value === null || void 0;
+	const t10 = isFocused || void 0;
+	const t11 = isFocused && isFocusVisible || void 0;
+	const t12 = state.value !== null || void 0;
+	const t13 = isDirty || void 0;
+	const t14 = isRequired || void 0;
+	const t15 = state.value !== null || void 0;
+	let t16;
+	if ($[5] !== as || $[6] !== inputSizeCva || $[7] !== size) {
+		t16 = clsx(inputSizeCva({
+			size,
+			as
+		}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!");
+		$[5] = as;
+		$[6] = inputSizeCva;
+		$[7] = size;
+		$[8] = t16;
+	} else t16 = $[8];
+	let t17;
+	if ($[9] !== disableManualEntry || $[10] !== onPress) {
+		t17 = disableManualEntry && /* @__PURE__ */ jsx(Button, {
+			onPress,
+			className: "absolute inset-0 z-0"
+		});
+		$[9] = disableManualEntry;
+		$[10] = onPress;
+		$[11] = t17;
+	} else t17 = $[11];
+	let t18;
+	if ($[12] !== as || $[13] !== headerProps) {
+		t18 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 			as,
-			...props
-		}), "group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements", 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": 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,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
-				size,
-				as
-			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			...headerProps
+		});
+		$[12] = as;
+		$[13] = headerProps;
+		$[14] = t18;
+	} else t18 = $[14];
+	let t19;
+	if ($[15] !== disableManualEntry || $[16] !== fieldProps || $[17] !== hidePlaceholder || $[18] !== isDisabled || $[19] !== placeholder || $[20] !== state) {
+		t19 = /* @__PURE__ */ jsx("div", { children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
+			size: "label-1",
+			className: "text-text-default-3",
+			children: placeholder
+		}) : /* @__PURE__ */ jsx(TimeField, {
+			fieldProps,
+			state,
+			isDisabled,
+			hidePlaceholder
+		}) });
+		$[15] = disableManualEntry;
+		$[16] = fieldProps;
+		$[17] = hidePlaceholder;
+		$[18] = isDisabled;
+		$[19] = placeholder;
+		$[20] = state;
+		$[21] = t19;
+	} else t19 = $[21];
+	let t20;
+	if ($[22] !== t16 || $[23] !== t17 || $[24] !== t18 || $[25] !== t19) {
+		t20 = /* @__PURE__ */ jsxs("div", {
+			className: t16,
 			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
-				}) : /* @__PURE__ */ jsx(TimeField, {
-					fieldProps,
-					state,
-					isDisabled,
-					hidePlaceholder
-				}) })
+				t17,
+				t18,
+				t19
 			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: clsx(inputSizeCva({
-				size,
-				as
-			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
-			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
-				onClear: () => {
-					state.setValue(null);
-					fieldProps.onBlur?.(null);
-				},
-				show: canClear
-			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
-				label: "",
-				color: "secondary",
-				onPress,
-				icon: uiConfig.dateInput.timeIcon,
-				isDisabled,
-				className: "border-0!"
-			})]
-		})]
-	});
+		});
+		$[22] = t16;
+		$[23] = t17;
+		$[24] = t18;
+		$[25] = t19;
+		$[26] = t20;
+	} else t20 = $[26];
+	let t21;
+	if ($[27] !== as || $[28] !== inputSizeCva || $[29] !== size) {
+		t21 = clsx(inputSizeCva({
+			size,
+			as
+		}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!");
+		$[27] = as;
+		$[28] = inputSizeCva;
+		$[29] = size;
+		$[30] = t21;
+	} else t21 = $[30];
+	let t22;
+	if ($[31] !== canClear || $[32] !== fieldProps || $[33] !== fireBlurOnChange || $[34] !== isClearable || $[35] !== onClear || $[36] !== state) {
+		t22 = isClearable && /* @__PURE__ */ jsx(InputClear, {
+			onClear: () => {
+				state.setValue(null);
+				onClear?.();
+				if (fireBlurOnChange) fieldProps.onBlur?.(null);
+			},
+			show: canClear
+		});
+		$[31] = canClear;
+		$[32] = fieldProps;
+		$[33] = fireBlurOnChange;
+		$[34] = isClearable;
+		$[35] = onClear;
+		$[36] = state;
+		$[37] = t22;
+	} else t22 = $[37];
+	let t23;
+	if ($[38] !== disableDropdown || $[39] !== disableManualEntry || $[40] !== isDisabled || $[41] !== onPress || $[42] !== uiConfig) {
+		t23 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+			label: "",
+			color: "secondary",
+			onPress,
+			icon: uiConfig.dateInput.timeIcon,
+			isDisabled,
+			className: "border-0!"
+		});
+		$[38] = disableDropdown;
+		$[39] = disableManualEntry;
+		$[40] = isDisabled;
+		$[41] = onPress;
+		$[42] = uiConfig;
+		$[43] = t23;
+	} else t23 = $[43];
+	let t24;
+	if ($[44] !== t21 || $[45] !== t22 || $[46] !== t23) {
+		t24 = /* @__PURE__ */ jsxs("div", {
+			className: t21,
+			children: [t22, t23]
+		});
+		$[44] = t21;
+		$[45] = t22;
+		$[46] = t23;
+		$[47] = t24;
+	} else t24 = $[47];
+	let t25;
+	if ($[48] !== fieldProps || $[49] !== focusWithinProps || $[50] !== hoverProps || $[51] !== ref || $[52] !== t10 || $[53] !== t11 || $[54] !== t12 || $[55] !== t13 || $[56] !== t14 || $[57] !== t15 || $[58] !== t20 || $[59] !== t24 || $[60] !== t4 || $[61] !== t5 || $[62] !== t6 || $[63] !== t7 || $[64] !== t8 || $[65] !== t9) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			ref,
+			className: t4,
+			"data-rac": "",
+			"data-datetime-input": "",
+			"data-hovered": t5,
+			"data-disabled": t6,
+			"data-is-disabled": t7,
+			"data-invalid": t8,
+			"data-is-empty": t9,
+			"data-focus-within": t10,
+			"data-focus-visible": t11,
+			"data-has-selection": t12,
+			"data-is-dirty": t13,
+			"data-is-required": t14,
+			"data-is-filled": t15,
+			...fieldProps,
+			...focusWithinProps,
+			...hoverProps,
+			children: [t20, t24]
+		});
+		$[48] = fieldProps;
+		$[49] = focusWithinProps;
+		$[50] = hoverProps;
+		$[51] = ref;
+		$[52] = t10;
+		$[53] = t11;
+		$[54] = t12;
+		$[55] = t13;
+		$[56] = t14;
+		$[57] = t15;
+		$[58] = t20;
+		$[59] = t24;
+		$[60] = t4;
+		$[61] = t5;
+		$[62] = t6;
+		$[63] = t7;
+		$[64] = t8;
+		$[65] = t9;
+		$[66] = t25;
+	} else t25 = $[66];
+	return t25;
 };
+function _temp(segment) {
+	return segment.type !== "literal" && segment.isPlaceholder === false;
+}
 //#endregion
 export { TimePickerInput };

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

@@ -1,19 +1,29 @@
 import { Typography } from "../../../text/Typography/Typography.js";
 import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
+import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useMemo, useRef } from "react";
+import { useRef } from "react";
 import { ListBox, ListBoxItem } from "react-aria-components";
 import { today } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/YearPicker.tsx
-var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDate }) => {
-	const formatter = useDateFormatter({
-		year: "numeric",
-		timeZone: state.timeZone
-	});
-	const years = useMemo(() => {
-		const arr = [];
+var YearPicker = (t0) => {
+	const $ = c(22);
+	const { state, onSelectionChange, onDateChange, onCommit, selectedDate } = t0;
+	let t1;
+	if ($[0] !== state.timeZone) {
+		t1 = {
+			year: "numeric",
+			timeZone: state.timeZone
+		};
+		$[0] = state.timeZone;
+		$[1] = t1;
+	} else t1 = $[1];
+	const formatter = useDateFormatter(t1);
+	let arr;
+	if ($[2] !== formatter || $[3] !== state.timeZone) {
+		arr = [];
 		for (let i = -100; i <= 100; i++) {
 			const date = today(state.timeZone).add({ years: i });
 			arr.push({
@@ -21,80 +31,121 @@ var YearPicker = ({ state, onSelectionChange, onDateChange, onCommit, selectedDa
 				formatted: formatter.format(date.toDate(state.timeZone))
 			});
 		}
-		return arr;
-	}, [state.timeZone, formatter]);
+		$[2] = formatter;
+		$[3] = state.timeZone;
+		$[4] = arr;
+	} else arr = $[4];
+	const years = arr;
 	const isYearDisabled = (year) => {
 		if (state.minValue && year < state.minValue.year) return true;
 		if (state.maxValue && year > state.maxValue.year) return true;
 		return false;
 	};
-	const getSelectedYearIndex = () => {
-		if (selectedDate) {
-			const selectedIndexFromValue = years.findIndex((year) => year.value === selectedDate.year);
-			if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
-		}
-		const focusedYearIndex = years.findIndex((year) => year.value === state.focusedDate.year);
-		if (focusedYearIndex < 0) return null;
-		return focusedYearIndex;
-	};
-	const selectedYearIndex = getSelectedYearIndex();
+	let t2;
+	if ($[5] !== selectedDate || $[6] !== state.focusedDate || $[7] !== years) {
+		t2 = () => {
+			if (selectedDate) {
+				const selectedIndexFromValue = years.findIndex((year_0) => year_0.value === selectedDate.year);
+				if (selectedIndexFromValue >= 0) return selectedIndexFromValue;
+			}
+			const focusedYearIndex = years.findIndex((year_1) => year_1.value === state.focusedDate.year);
+			if (focusedYearIndex < 0) return null;
+			return focusedYearIndex;
+		};
+		$[5] = selectedDate;
+		$[6] = state.focusedDate;
+		$[7] = years;
+		$[8] = t2;
+	} else t2 = $[8];
+	const selectedYearIndex = t2();
 	const lastPressedYearIndexRef = useRef(null);
-	const listBoxSelectionProps = {};
-	if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
-	const parseYearIndexFromKey = (key) => {
-		if (typeof key === "number") return key;
-		if (typeof key === "string") {
-			const parsedIndex = Number.parseInt(key, 10);
-			if (!Number.isNaN(parsedIndex)) return parsedIndex;
-		}
-		return null;
-	};
+	let listBoxSelectionProps;
+	if ($[9] !== selectedYearIndex) {
+		listBoxSelectionProps = {};
+		if (selectedYearIndex !== null) listBoxSelectionProps.selectedKeys = [selectedYearIndex];
+		$[9] = selectedYearIndex;
+		$[10] = listBoxSelectionProps;
+	} else listBoxSelectionProps = $[10];
+	const parseYearIndexFromKey = _temp;
 	const { ref } = useScrollableListBox();
-	return /* @__PURE__ */ jsx(ListBox, {
-		ref,
-		autoFocus: true,
-		"aria-label": "Year",
-		selectionMode: "single",
-		...listBoxSelectionProps,
-		onSelectionChange: (key) => {
-			if (key === "all") return;
-			const selectedKey = [...key][0];
+	const T0 = ListBox;
+	const t3 = true;
+	const t4 = "Year";
+	const t5 = "single";
+	let t6;
+	if ($[11] !== onDateChange || $[12] !== onSelectionChange || $[13] !== state || $[14] !== years) {
+		t6 = (key_0) => {
+			if (key_0 === "all") return;
+			const selectedKey = [...key_0][0];
 			const selectedYearIndexValue = parseYearIndexFromKey(selectedKey);
 			if (selectedYearIndexValue !== null && years[selectedYearIndexValue]) {
 				const nextSelectedDate = state.focusedDate.set({ year: years[selectedYearIndexValue].value });
 				state.setFocusedDate(nextSelectedDate);
 				onDateChange?.(nextSelectedDate);
 			}
-			onSelectionChange(key);
-		},
-		className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
-		children: years.map((year, index) => {
-			const isDisabled = isYearDisabled(year.value);
-			return /* @__PURE__ */ jsx(ListBoxItem, {
-				id: index,
-				textValue: year.formatted,
-				isDisabled,
-				onPress: () => {
-					const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
-					lastPressedYearIndexRef.current = index;
-					const nextSelectedDate = state.focusedDate.set({ year: year.value });
-					state.setFocusedDate(nextSelectedDate);
-					onDateChange?.(nextSelectedDate);
-					if (!isSecondConsecutivePress) return;
-					if (!selectedDate) return;
-					if (selectedYearIndex === null) return;
-					if (index !== selectedYearIndex) return;
-					onCommit?.();
-				},
-				className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
-				children: /* @__PURE__ */ jsx(Typography, {
-					as: "span",
-					size: "label-2",
-					children: year.formatted
-				})
-			}, index);
-		})
+			onSelectionChange(key_0);
+		};
+		$[11] = onDateChange;
+		$[12] = onSelectionChange;
+		$[13] = state;
+		$[14] = years;
+		$[15] = t6;
+	} else t6 = $[15];
+	const t7 = "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80";
+	const t8 = years.map((year_2, index) => {
+		const isDisabled = isYearDisabled(year_2.value);
+		return /* @__PURE__ */ jsx(ListBoxItem, {
+			id: index,
+			textValue: year_2.formatted,
+			isDisabled,
+			onPress: () => {
+				const isSecondConsecutivePress = lastPressedYearIndexRef.current === index;
+				lastPressedYearIndexRef.current = index;
+				const nextSelectedDate_0 = state.focusedDate.set({ year: year_2.value });
+				state.setFocusedDate(nextSelectedDate_0);
+				onDateChange?.(nextSelectedDate_0);
+				if (!isSecondConsecutivePress) return;
+				if (!selectedDate) return;
+				if (selectedYearIndex === null) return;
+				if (index !== selectedYearIndex) return;
+				onCommit?.();
+			},
+			className: clsx("flex px-4 py-2 text-interactive-text-secondary-idle outline-none", "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0", "hover:text-interactive-text-secondary-hover", "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted", "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted", isDisabled ? "cursor-default opacity-50" : "cursor-pointer"),
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				size: "label-2",
+				children: year_2.formatted
+			})
+		}, index);
 	});
+	let t9;
+	if ($[16] !== T0 || $[17] !== listBoxSelectionProps || $[18] !== ref || $[19] !== t6 || $[20] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			ref,
+			autoFocus: t3,
+			"aria-label": t4,
+			selectionMode: t5,
+			...listBoxSelectionProps,
+			onSelectionChange: t6,
+			className: t7,
+			children: t8
+		});
+		$[16] = T0;
+		$[17] = listBoxSelectionProps;
+		$[18] = ref;
+		$[19] = t6;
+		$[20] = t8;
+		$[21] = t9;
+	} else t9 = $[21];
+	return t9;
 };
+function _temp(key) {
+	if (typeof key === "number") return key;
+	if (typeof key === "string") {
+		const parsedIndex = Number.parseInt(key, 10);
+		if (!Number.isNaN(parsedIndex)) return parsedIndex;
+	}
+	return null;
+}
 //#endregion
 export { YearPicker };

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

@@ -1,6 +1,14 @@
 import { FC, ReactElement, SVGProps } from 'react';
+import { PressEvent } from 'react-aria-components';
 import { DatePickerTodayIcon, DatePickerTodayIconButtonSize } from './datePicker.types';
 type TodayIconComponent = FC<SVGProps<SVGSVGElement>> | ReactElement;
+type DatePickerTodayIconOptions = {
+    className?: string;
+    isDisabled?: boolean;
+    onPress?: (event: PressEvent) => void;
+    renderStatic?: boolean;
+    size?: DatePickerTodayIconButtonSize;
+};
 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 declare const renderDatePickerTodayIcon: (todayIcon: DatePickerTodayIcon | undefined, options?: DatePickerTodayIconOptions) => import("react/jsx-runtime").JSX.Element | undefined;
 export {};

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

@@ -1,21 +1,57 @@
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { button, buttonContent, buttonIconSize, buttonSize } from "../../../buttons/Button/button.cva.js";
+import { IconButton } from "../../../buttons/IconButton/IconButton.js";
 import { TodayIcon } from "../../../../assets/icons/Today.js";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { cloneElement, isValidElement } from "react";
 //#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
 var getDatePickerTodayIcon = (todayIcon) => {
 	if (!todayIcon) return null;
 	return todayIcon === true ? TodayIcon : todayIcon;
 };
-var renderDatePickerTodayIcon = (todayIcon, size = "none", className) => {
+var renderDatePickerTodayIcon = (todayIcon, options) => {
 	const icon = getDatePickerTodayIcon(todayIcon);
 	if (!icon) return;
-	return /* @__PURE__ */ jsx(InlineIconButton, {
+	const { className, isDisabled, onPress, renderStatic, size = "none" } = options ?? {};
+	const todayIconClassName = className ?? "relative z-1";
+	if (renderStatic) {
+		const iconClassName = buttonIconSize({
+			size,
+			className: "shrink-0"
+		});
+		const renderedIcon = (() => {
+			if (isValidElement(icon)) return cloneElement(icon, { className: clsx(iconClassName, icon.props.className) });
+			return /* @__PURE__ */ jsx(icon, { className: iconClassName });
+		})();
+		return /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-hidden": "true",
+			tabIndex: -1,
+			disabled: isDisabled,
+			className: clsx(button({
+				className: todayIconClassName,
+				color: "primary",
+				variant: "contained",
+				width: "hug"
+			}), buttonSize({
+				iconOnly: true,
+				size
+			}), buttonContent({
+				iconPosition: "left",
+				iconOnly: true,
+				size
+			})),
+			children: [renderedIcon, /* @__PURE__ */ jsx("span", { className: "sr-only" })]
+		});
+	}
+	return /* @__PURE__ */ jsx(IconButton, {
 		label: "",
 		icon,
 		size,
-		staticRender: true,
-		className: className ?? "relative z-1 !border-none"
+		isDisabled,
+		onPress,
+		className: todayIconClassName
 	});
 };
 //#endregion
-export { getDatePickerTodayIcon, renderDatePickerTodayIcon };
+export { renderDatePickerTodayIcon };

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

@@ -1,31 +1,39 @@
 import { CalendarDate } from '@internationalized/date';
+import { ReactNode } from 'react';
 import { DateValue, TimeValue } from 'react-aria';
 interface StaticSegmentProps {
     isDisabled?: boolean;
     hidePlaceholder?: boolean;
 }
-interface StaticCalendarDateSegmentsProps extends StaticSegmentProps {
+interface StaticManualEntryPlaceholderProps {
+    disableManualEntry?: boolean;
+    placeholder?: ReactNode;
+}
+type StaticDateGranularity = "day" | "month" | "year";
+interface StaticCalendarDateSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
     value?: CalendarDate | null;
     locale: string;
     shouldForceLeadingZeros?: boolean;
+    dateGranularity?: StaticDateGranularity;
 }
-interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps {
+interface StaticCalendarDateTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
     value?: DateValue | null;
     locale: string;
     shouldForceLeadingZeros?: boolean;
 }
-interface StaticDateRangeSegmentsProps extends StaticSegmentProps {
+interface StaticDateRangeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
     start?: CalendarDate | null;
     end?: CalendarDate | null;
     locale: string;
     shouldForceLeadingZeros?: boolean;
 }
-interface StaticTimeSegmentsProps extends StaticSegmentProps {
+interface StaticTimeSegmentsProps extends StaticSegmentProps, StaticManualEntryPlaceholderProps {
     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 declare const getStaticCalendarDateSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, dateGranularity, }: StaticCalendarDateSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticCalendarDateTimeSegments: ({ value, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticCalendarDateTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateRangeSegments: ({ start, end, locale, shouldForceLeadingZeros, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticDateRangeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticTimeSegments: ({ value, locale, isDisabled, hidePlaceholder, disableManualEntry, placeholder, }: StaticTimeSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const getStaticDateTimePlaceholder: (placeholder: ReactNode) => import("react/jsx-runtime").JSX.Element;
 export {};