@povio/ui 3.4.0-rc.24 → 3.4.0-rc.26

package/dist/{Autocomplete-Ce3ygKxG.d.ts → Autocomplete-0tckACUz.d.ts}

@@ -1,6 +1,6 @@
 import { E as Key } from "./types-BSiv-Igp.js";
 import { n as FieldValues } from "./form.binding-DWlFTecs.js";
-import { i as GroupedSelectProps, n as DefaultInitialSelectItem, r as GroupedSelectControlProps, t as SelectBaseProps } from "./SelectBase-Ds3nqzVg.js";
+import { i as GroupedSelectProps, n as DefaultInitialSelectItem, r as GroupedSelectControlProps, t as SelectBaseProps } from "./SelectBase-aSvWd7Cx.js";
 import { s as OmitDiscriminatedUnion } from "./common-UBFya8WY.js";
 import { ReactElement } from "react";
 //#region src/components/inputs/Selection/Autocomplete/Autocomplete.d.ts

package/dist/{BottomSheet-BWKej2PR.d.ts → BottomSheet-BZXBtOHF.d.ts}

@@ -29,6 +29,5 @@ interface BottomSheetBaseProps {
 interface BottomSheetProps extends BottomSheetBaseProps {
   trigger?: ReactNode;
 }
-declare const BottomSheet: ({ isOpen, portalContainerRef, onOpenChange, trigger, children, ...rest }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { BottomSheetProps as n, BottomSheet as t };
+export { BottomSheetProps as t };

package/dist/{BottomSheet-DNnVqMw9.js → BottomSheet-CEyxZ2Nd.js}

@@ -1,17 +1,18 @@
-import { o as ObjectUtils, t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { t as X } from "./x-BYOEO0gW.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { n as $de32f1b87079253c$export$3ddf2d174ce01153, t as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "./Dialog-DpLXaUXz.js";
+import { n as $de32f1b87079253c$export$3ddf2d174ce01153, t as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "./Dialog-CXVxCqvL.js";
 import { f as $9daab02d461809db$export$683480f191c0e3ea } from "./OverlayArrow-Bz_8bYjT.js";
-import { n as $f3f84453ead64de5$export$8948f78d83984c69, r as $5df64b3807dc15ee$export$d699905dd57c73ca, t as $f3f84453ead64de5$export$2b77a92f1a5ad772 } from "./Modal-HBOqpsZ3.js";
+import { n as $f3f84453ead64de5$export$8948f78d83984c69, r as $5df64b3807dc15ee$export$d699905dd57c73ca, t as $f3f84453ead64de5$export$2b77a92f1a5ad772 } from "./Modal-CAAJgOQb.js";
 import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-oSE-CM83.js";
 import { t as Typography } from "./Typography-AcUd9df8.js";
 import "./i18n-C2TBJvnh.js";
+import { n as useStateAndRef, t as DomUtils } from "./dom.utils-CeVnXH-T.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 import { useTranslation } from "react-i18next";
+import { AnimatePresence, animate, motion, useDragControls, useMotionValue } from "motion/react";
 //#region src/components/overlays/BottomSheet/BottomSheetHeader.tsx
 const BottomSheetHeader = (t0) => {
 	const $ = c(17);
@@ -81,51 +82,6 @@ function _temp($) {
 	return $.ui.closeAlt;
 }
 //#endregion
-//#region src/hooks/useStateAndRef.ts
-const useStateAndRef = (initialState) => {
-	const $ = c(3);
-	const [state, setState] = useState(initialState);
-	const ref = useRef(state);
-	let t0;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = (value) => {
-			ref.current = ObjectUtils.isFunction(value) ? value(ref.current) : value;
-			setState(ref.current);
-		};
-		$[0] = t0;
-	} else t0 = $[0];
-	const updateValue = t0;
-	let t1;
-	if ($[1] !== state) {
-		t1 = [
-			state,
-			ref,
-			updateValue
-		];
-		$[1] = state;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-};
-//#endregion
-//#region src/utils/dom.utils.ts
-let DomUtils;
-(function(_DomUtils) {
-	const KEYBOARD_INPUTS = /* @__PURE__ */ new Set([
-		"button",
-		"submit",
-		"checkbox",
-		"file",
-		"image"
-	]);
-	_DomUtils.isKeyboardInput = (elem) => {
-		return elem.tagName === "INPUT" && !KEYBOARD_INPUTS.has(elem.type) || elem.tagName === "TEXTAREA" || elem.hasAttribute("contenteditable");
-	};
-	_DomUtils.isKeyboardEvent = (event) => {
-		return event.nativeEvent instanceof KeyboardEvent;
-	};
-})(DomUtils || (DomUtils = {}));
-//#endregion
 //#region src/components/overlays/BottomSheet/BottomSheet.tsx
 const MotionModal = motion.create($f3f84453ead64de5$export$2b77a92f1a5ad772);
 const MotionModalOverlay = motion.create($f3f84453ead64de5$export$8948f78d83984c69);
@@ -445,4 +401,4 @@ const BottomSheet = (t0) => {
 	return t3;
 };
 //#endregion
-export { DomUtils as n, useStateAndRef as r, BottomSheet as t };
+export { BottomSheet };

package/dist/BottomSheet.lazy-DT02808T.d.ts

@@ -0,0 +1,5 @@
+import { t as BottomSheetProps } from "./BottomSheet-BZXBtOHF.js";
+//#region src/components/overlays/BottomSheet/BottomSheet.lazy.d.ts
+declare const BottomSheet: ({ isOpen, onOpenChange, trigger, ...props }: BottomSheetProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { BottomSheet as t };

package/dist/{Breadcrumbs-DentRJc_.js → Breadcrumbs-Cbl2-M7J.js}

@@ -1,9 +1,9 @@
-import { t as MenuDesktop } from "./MenuDesktop-CEftscnb.js";
+import { t as MenuDesktop } from "./MenuDesktop-AnvU8TNb.js";
 import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
 import { t as Tooltip } from "./Tooltip-CVBOnHy-.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { d as $64fa3d84918910a7$export$df3a06d6289f983e, g as $3ef42575df84b30b$export$9d1611c77c2fe928, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, o as $64fa3d84918910a7$export$29f1550f4b0d4415, p as $64fa3d84918910a7$export$fabf2dc03a41866e, s as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "./import-CuNJ25EP.js";
-import { _ as $e1995378a142960e$export$18af5c7a9e9b3664, h as $7135fc7d473fd974$export$4feb769f8ddf26c5, v as $e1995378a142960e$export$bf788dd355e3a401, x as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, y as $e1995378a142960e$export$fb8073518f34e6ec } from "./Dialog-DpLXaUXz.js";
+import { _ as $e1995378a142960e$export$18af5c7a9e9b3664, h as $7135fc7d473fd974$export$4feb769f8ddf26c5, v as $e1995378a142960e$export$bf788dd355e3a401, x as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, y as $e1995378a142960e$export$fb8073518f34e6ec } from "./Dialog-CXVxCqvL.js";
 import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-oSE-CM83.js";
 import { n as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-D9TmTRN_.js";
 import { n as $4f118338184dc1d9$export$e2509388b49734e7, t as $4f118338184dc1d9$export$a6c7ac8248d6e38a } from "./Link-iPOFlrxY.js";

package/dist/{Button-B8T7AjGP.js → Button-CtPMeT8f.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-oSE-CM83.js";
 import { t as $4f118338184dc1d9$export$a6c7ac8248d6e38a } from "./Link-iPOFlrxY.js";

package/dist/{Calendar-B7OLjVV9.js → Calendar-Dc1UbbAq.js}

@@ -2,22 +2,22 @@ import { t as ChevronDown } from "./chevron-down-Ciz9yP9R.js";
 import { t as ChevronLeft } from "./chevron-left-VO8YZrXZ.js";
 import { t as ChevronRight } from "./chevron-right-C_M98bh3.js";
 import { t as ChevronUp } from "./chevron-up-CHRnDSA3.js";
-import { i as CalendarGrid } from "./DatePickerInput-BLL4-Sqj.js";
+import { i as CalendarGrid } from "./DatePickerInput-D3kmFpMZ.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { b as $bdb11010cef70236$export$f680877a34711e37, g as $3ef42575df84b30b$export$9d1611c77c2fe928, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./import-CuNJ25EP.js";
 import { n as $d4ee10de306f2510$export$4282f70798064fe0, t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-HV79Qf_F.js";
 import { o as $9bf71ea28793e738$export$c5251b9e124bf29 } from "./SelectionIndicator-BiAHPBz2.js";
 import { t as $ef06256079686ba0$export$f8aeda7b10753fa1 } from "./useDescription-D8raJPFb.js";
-import { C as $dfb4eba373ed9493$exports, S as $3dfb0f96be0d6a08$export$4a931266a3838b86, v as $16f0b7bb276bc17e$export$300019f83c56d282, w as $896ba0a80a8f4d36$export$85fd5fdf27bacc79 } from "./staticDateTimeSegments-C8AOKnEO.js";
-import { i as $eed445e0843c11d0$export$a11e76429ed99b4, t as $eed445e0843c11d0$export$41f133550aa26f48 } from "./ListBox-BCW74bzR.js";
+import { C as $dfb4eba373ed9493$exports, S as $3dfb0f96be0d6a08$export$4a931266a3838b86, v as $16f0b7bb276bc17e$export$300019f83c56d282, w as $896ba0a80a8f4d36$export$85fd5fdf27bacc79 } from "./staticDateTimeSegments-BOFCK9Ub.js";
+import { i as $eed445e0843c11d0$export$a11e76429ed99b4, t as $eed445e0843c11d0$export$41f133550aa26f48 } from "./ListBox-lSDt9Q4j.js";
 import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-oSE-CM83.js";
 import { n as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-D9TmTRN_.js";
 import { n as $e5be200c675c3b3a$export$a763b9476acd3eb } from "./useFormValidationState-Bpry7Uk5.js";
 import { n as $84b7d8702d4ff4a8$export$40258cc1d95ff477 } from "./ToggleButton-DYVFkuEk.js";
 import { t as Typography } from "./Typography-AcUd9df8.js";
 import { PillButton } from "./components/pill-button.js";
-import { t as useBreakpoint } from "./useBreakpoint-D0s71F97.js";
-import { n as TimePickerForm } from "./datePickerValue.utils-BqdbvGFL.js";
+import { t as useBreakpoint } from "./useBreakpoint-YuMYUdpG.js";
+import { n as TimePickerForm } from "./datePickerValue.utils-469FeRCl.js";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { CalendarDateTime, Time, today } from "@internationalized/date";

package/dist/{Checkbox-B7f8NgnO.js → Checkbox-Feyideqw.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { c as checkboxIndicatorClass, l as checkboxTypography, n as checkboxContentClassName, t as CheckboxCheckmark } from "./CheckboxCheckmark-C7Oq15ms.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { n as $4e85f108e88277b8$export$b085522c77523c51 } from "./RSPContexts-DHQi1l7F.js";

package/dist/{DatePicker-p5zEtFfc.js → DatePicker-BdRp_rG7.js}

@@ -1,16 +1,16 @@
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { t as FormField } from "./FormField-ChDNTHr4.js";
-import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-BLL4-Sqj.js";
+import { n as renderDatePickerTodayIcon, r as datePickerInputContentRowDefinition, t as DatePickerInput } from "./DatePickerInput-D3kmFpMZ.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { _ as $5dc95899b306f630$export$c9058316764c140e } from "./import-CuNJ25EP.js";
 import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-HV79Qf_F.js";
-import { d as useCalendarState, i as getStaticDateTimeFocusTarget, o as DateTimeDialogFooter, p as useDatePickerState, s as DateTimeDialog, t as getStaticCalendarDateSegments } from "./staticDateTimeSegments-C8AOKnEO.js";
-import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-B7OLjVV9.js";
+import { d as useCalendarState, i as getStaticDateTimeFocusTarget, o as DateTimeDialogFooter, p as useDatePickerState, s as DateTimeDialog, t as getStaticCalendarDateSegments } from "./staticDateTimeSegments-BOFCK9Ub.js";
+import { r as $6057a3d2a53a12fd$export$42df105a73306d51, t as Calendar } from "./Calendar-Dc1UbbAq.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as FieldController } from "./form.binding-DyZ4fH8l.js";
-import { t as TooltipWrapper } from "./TooltipWrapper-D8gfa-pC.js";
-import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-pnEcfX_d.js";
-import { t as normalizeDatePickerValue } from "./datePickerValue.utils-BqdbvGFL.js";
+import { t as TooltipWrapper } from "./TooltipWrapper-eCF5-eNP.js";
+import { n as InputFrame, t as useStaticInputHandoff } from "./useStaticInputHandoff-ClwANfo-.js";
+import { t as normalizeDatePickerValue } from "./datePickerValue.utils-469FeRCl.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { createCalendar, getLocalTimeZone, toCalendarDate, today } from "@internationalized/date";

package/dist/{DatePickerInput-BLL4-Sqj.js → DatePickerInput-D3kmFpMZ.js}

@@ -1,17 +1,17 @@
 import { t as createLucideIcon } from "./createLucideIcon-CskCrR9z.js";
-import { t as UIConfig } from "./uiConfig.context-SBtRegKv.js";
+import { t as UIConfig } from "./uiConfig.context-B_wBkrQZ.js";
 import { r as FormFieldLabel } from "./FormField-ChDNTHr4.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { g as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "./import-CuNJ25EP.js";
 import { t as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-HV79Qf_F.js";
-import { b as $16f0b7bb276bc17e$export$5591b0b878c1a989, c as useFirefoxDateSegmentSelectionGuard, f as useDateFieldState, l as DateSegmentItem } from "./staticDateTimeSegments-C8AOKnEO.js";
+import { b as $16f0b7bb276bc17e$export$5591b0b878c1a989, c as useFirefoxDateSegmentSelectionGuard, f as useDateFieldState, l as DateSegmentItem } from "./staticDateTimeSegments-BOFCK9Ub.js";
 import { n as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-oSE-CM83.js";
 import { t as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-Cd0lBvKO.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
 import { t as Typography } from "./Typography-AcUd9df8.js";
 import { IconButton } from "./components/icon-button.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { r as InputClear } from "./TooltipWrapper-D8gfa-pC.js";
+import { r as InputClear } from "./TooltipWrapper-eCF5-eNP.js";
 import { a as inputSizeDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
 import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
 import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
@@ -187,7 +187,7 @@ const WEEK_INDICES = [
 	5
 ];
 const NO_CALENDAR_OFFSET = {};
-const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = NO_CALENDAR_OFFSET, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
+const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = NO_CALENDAR_OFFSET, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, isSelectionDisabled, ...props }) => {
 	const { gridProps, headerProps, weekDays } = useCalendarGrid({
 		...props,
 		weekdayStyle: "short"
@@ -198,6 +198,8 @@ const CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSel
 	};
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx("h-72 w-full px-3 py-1 md:w-80", className),
+		inert: isSelectionDisabled || void 0,
+		"aria-disabled": isSelectionDisabled || void 0,
 		children: /* @__PURE__ */ jsxs("table", {
 			...gridProps,
 			cellPadding: "0",
@@ -419,7 +421,7 @@ const renderDatePickerTodayIcon = (todayIcon, options) => {
 };
 //#endregion
 //#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
-const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
+const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, isClearableIfDisabled, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, displayValue, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, onClear: onClearProp, ...props }) => {
 	const uiConfig = UIConfig.useConfig();
 	const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
 	let effectiveTimeZone = getLocalTimeZone();
@@ -474,6 +476,7 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, field
 		setCanClear(canClearInput);
 	}, []);
 	const showClear = (!isDisabled || isClearableIfDisabled === true) && (canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null);
+	const hasDisplayedValue = !!hasValue || normalizedFieldProps.value != null;
 	const isTodayIconDisabled = isDisabled || buttonProps.isDisabled;
 	const onToday = () => {
 		if (isTodayIconDisabled) return;
@@ -511,13 +514,13 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, field
 		"data-disabled": isDisabled || void 0,
 		"data-is-disabled": isDisabled || void 0,
 		"data-invalid": isInvalid || void 0,
-		"data-is-empty": normalizedFieldProps.value == null || void 0,
+		"data-is-empty": !hasDisplayedValue || void 0,
 		"data-focus-within": isFocused || void 0,
 		"data-focus-visible": isFocused && isFocusVisible || void 0,
-		"data-has-selection": normalizedFieldProps.value != null || void 0,
+		"data-has-selection": hasDisplayedValue || void 0,
 		"data-is-dirty": isDirty || void 0,
 		"data-is-required": isRequired || void 0,
-		"data-is-filled": normalizedFieldProps.value != null || void 0,
+		"data-is-filled": hasDisplayedValue || void 0,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: clsx("flex items-center gap-input-gap-input-text-to-elements pr-0!", shouldShrinkInput ? "min-w-0 flex-1 w-full" : "w-full", inputSizeCva({
 				size,
@@ -538,7 +541,11 @@ const DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, field
 							isDisabled
 						}),
 						!shouldRenderTodayIconWithFieldLabel && todayIconButton,
-						disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
+						displayValue ? /* @__PURE__ */ jsx(Typography, {
+							size: "label-1",
+							className: "truncate",
+							children: displayValue
+						}) : disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
 							size: "label-1",
 							className: "text-text-default-3",
 							children: placeholder

package/dist/{DateRangePicker-CjOo8S9R.d.ts → DateRangePicker-CMWUdyh1.d.ts}

@@ -25,23 +25,36 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
   inputClassName?: string;
   onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
   allowPartialRange?: boolean;
+  mode?: "absolute" | "relative";
+  relativeValue?: string | null;
+  relativeOptions?: DateRangeRelativeOption[];
+  onRelativeChange?: (value: string | null) => void;
 }
-interface DateRangePickerProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-  value?: {
-    start: string | null;
-    end: string | null;
-  } | null;
-  onChange?: (value: {
-    start: string | null;
-    end: string | null;
-  } | null) => void;
+interface DateRangeRelativeOption {
+  /** Stable value emitted by DateRangePicker when mode is `relative`. */
+  value: string;
+  /** Human-readable value shown in the input and options list. */
+  label: string;
+  isDisabled?: boolean;
+}
+interface DateRangePickerSharedProps extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
   fullIso?: boolean;
   minValue?: DateValue$1 | string;
   maxValue?: DateValue$1 | string;
   renderStaticInput?: boolean;
 }
-type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<DateRangePickerProps, TFieldValues>;
-declare const DateRangePickerComponent: <TFieldValues extends FieldValues>({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+type DateRangePickerValue = {
+  start: string | null;
+  end: string | null;
+} | string | null;
+type DateRangePickerProps<TMode extends "absolute" | "relative" = "absolute"> = DateRangePickerSharedProps & {
+  /** `relative` returns and displays an option key instead of a concrete range. */
+  mode?: TMode;
+  value?: TMode extends "relative" ? string | null : Exclude<DateRangePickerValue, string>;
+  onChange?: (value: TMode extends "relative" ? string | null : Exclude<DateRangePickerValue, string>) => void;
+};
+type ControlledDateRangePickerProps<TFieldValues extends FieldValues, TMode extends "absolute" | "relative" = "absolute"> = ControlProps<DateRangePickerProps<TMode>, TFieldValues>;
+declare const DateRangePickerComponent: <TFieldValues extends FieldValues, TMode extends "absolute" | "relative" = "absolute">({ fullIso, minValue, maxValue, renderStaticInput, ...props }: ControlledDateRangePickerProps<TFieldValues, TMode>) => import("react/jsx-runtime").JSX.Element;
 declare const DateRangePicker: typeof DateRangePickerComponent;
 //#endregion
-export { DateRangePicker as n, DateRangePickerProps as r, ControlledDateRangePickerProps as t };
+export { DateRangeRelativeOption as i, DateRangePicker as n, DateRangePickerProps as r, ControlledDateRangePickerProps as t };