@react-querybuilder/datetime 8.20.1-alpha.0 → 8.20.2

package/dist/react-querybuilder_datetime.ui.d.mts

@@ -0,0 +1,228 @@
+import { _ as RelativeDateTimeAnchor, b as RelativeDateTimeValue, i as RQBDateTimeLibraryAPI, y as RelativeDateTimeUnit } from "./types-Di8kFIXV.mjs";
+import { FullOption } from "@react-querybuilder/core";
+import * as React from "react";
+import { ComponentType, ReactNode } from "react";
+import { FullOperator, FullOption as FullOption$1, QueryBuilderContextProvider, ValueEditorProps } from "react-querybuilder";
+
+//#region src/ui/types.d.ts
+/**
+* Customizable content/labels for the absolute/relative mode toggle rendered by
+* {@link toggleModeController}. The default glyphs come from CSS pseudo-elements, so
+* `absoluteContent`/`relativeContent` are only needed to override them (e.g. to render
+* an icon component or localized text).
+*/
+interface RelativeDateTimeToggleLabels {
+  /** Accessible label (`aria-label`) for the toggle button. */
+  label?: string;
+  /** Tooltip shown while in absolute mode (clicking switches to relative). */
+  absoluteTitle?: string;
+  /** Tooltip shown while in relative mode (clicking switches to absolute). */
+  relativeTitle?: string;
+  /** Custom content rendered while in absolute mode. Defaults to a CSS glyph. */
+  absoluteContent?: ReactNode;
+  /** Custom content rendered while in relative mode. Defaults to a CSS glyph. */
+  relativeContent?: ReactNode;
+}
+/**
+* Props passed to a {@link RelativeDateTimeModeController}'s `ModeControl` component —
+* the affordance (e.g. a toggle button) that switches a rule between absolute and
+* relative date/time entry.
+*/
+interface RelativeDateTimeModeControlProps {
+  /** Whether the rule is currently in relative mode. */
+  isRelative: boolean;
+  /** Switches the rule between absolute and relative mode. */
+  setMode: (mode: "absolute" | "relative") => void;
+  /** The value editor's schema (for theme-aware rendering). */
+  schema: ValueEditorProps["schema"];
+  /** Whether the control is disabled. */
+  disabled?: boolean;
+  /** Class name applied to the control. */
+  className?: string;
+  /** Title/tooltip from the value editor (fallback when labels omit titles). */
+  title?: string;
+  /** Test ID from the value editor. */
+  testID?: string;
+  /** Resolved toggle labels (merged with defaults). */
+  labels: Required<RelativeDateTimeToggleLabels>;
+}
+/**
+* A pluggable strategy that governs how a user switches between absolute and relative
+* date/time entry in the {@link RelativeDateTimeValueEditor}. The stored value shape is
+* unaffected — a controller only decides the current mode and (optionally) renders an
+* affordance to change it.
+*
+* Ships with {@link toggleModeController} (the zero-config default); build an
+* operator-driven controller with {@link createOperatorModeController}, or supply a custom
+* object to fully control the UX.
+*/
+interface RelativeDateTimeModeController {
+  /** Derives the current mode from the rule (its operator and/or value). */
+  isRelative: (props: ValueEditorProps) => boolean;
+  /**
+  * Optional affordance rendered inside the editor to switch modes. Omit it (as the
+  * operator-driven controller does) when the mode is selected elsewhere, e.g. via the
+  * operator selector.
+  */
+  ModeControl?: ComponentType<RelativeDateTimeModeControlProps>;
+}
+/**
+* Configuration for the {@link RelativeDateTimeValueEditor}, supplied as props to
+* {@link QueryBuilderDateTime} (or via the relative date/time config context). Every
+* field is optional; omitting all of them yields the zero-config toggle experience.
+*/
+interface RelativeDateTimeEditorConfig {
+  /** Strategy for switching between absolute and relative modes. Defaults to {@link toggleModeController}. */
+  modeController?: RelativeDateTimeModeController;
+  /** Anchor (reference-point) options. Defaults to {@link defaultRelativeDateTimeAnchors}. */
+  anchors?: FullOption$1<RelativeDateTimeAnchor>[];
+  /** Unit options. Defaults to {@link defaultRelativeDateTimeUnits}. */
+  units?: FullOption$1<RelativeDateTimeUnit>[];
+  /** Content/labels for the absolute/relative toggle. */
+  toggleLabels?: RelativeDateTimeToggleLabels;
+  /**
+  * Date/time library adapter used by the value editor to parse/validate the rule value
+  * for the native date input. Defaults to the plain JavaScript adapter. Pass the adapter
+  * matching your chosen entry point (e.g. from `@react-querybuilder/datetime/luxon`) so the
+  * editor interprets values consistently with the rule processors.
+  */
+  dateTimeAPI?: RQBDateTimeLibraryAPI;
+}
+/**
+* Maps operator names that are used only to _signal_ relative mode (see
+* {@link createOperatorModeController}) to the real comparison operator that should be used
+* when exporting via `formatQuery`. Supplied through `context.relativeOperatorMap`. Operators
+* not present in the map are exported unchanged.
+*
+* @example
+* ```ts
+* formatQuery(query, {
+*   format: 'sql',
+*   ruleProcessor: datetimeRuleProcessorSQL,
+*   context: { relativeOperatorMap: { relativeEq: '=' } },
+* });
+* ```
+*/
+type RelativeOperatorMap = Record<string, string>;
+//#endregion
+//#region src/ui/QueryBuilderDateTime.d.ts
+declare const DateTimeValueEditor: (props: ValueEditorProps) => React.JSX.Element;
+declare const QueryBuilderDateTimeContext: QueryBuilderContextProvider;
+/** Props for {@link QueryBuilderDateTime}: {@link RelativeDateTimeEditorConfig} plus children. */
+interface QueryBuilderDateTimeProps extends RelativeDateTimeEditorConfig {
+  children?: React.ReactNode;
+}
+/**
+* Context provider enabling date/time features for a wrapped
+* {@link react-querybuilder!QueryBuilder QueryBuilder}: renders the relative-capable
+* {@link RelativeDateTimeValueEditor} for date/time fields, and accepts optional
+* {@link RelativeDateTimeEditorConfig} props (mode controller, anchor/unit options, and
+* toggle labels). With no props it provides the zero-config toggle experience.
+*
+* @group Components
+*/
+declare const QueryBuilderDateTime: ({
+  children,
+  modeController,
+  anchors,
+  units,
+  toggleLabels,
+  dateTimeAPI
+}: QueryBuilderDateTimeProps) => React.JSX.Element;
+//#endregion
+//#region src/ui/RelativeDateTimeConfigContext.d.ts
+/** Fully-resolved relative date/time editor config (no optional fields). */
+interface ResolvedRelativeDateTimeConfig {
+  modeController: RelativeDateTimeModeController;
+  anchors: FullOption$1<RelativeDateTimeAnchor>[];
+  units: FullOption$1<RelativeDateTimeUnit>[];
+  toggleLabels: Required<RelativeDateTimeToggleLabels>;
+  dateTimeAPI: RQBDateTimeLibraryAPI;
+}
+/**
+* Carries {@link RelativeDateTimeEditorConfig} to the {@link RelativeDateTimeValueEditor}.
+* Provided by {@link QueryBuilderDateTime}; defaults apply when no provider is present.
+*/
+declare const RelativeDateTimeConfigContext: React.Context<RelativeDateTimeEditorConfig>;
+/** Reads the relative date/time editor config from context, merged with defaults. */
+declare const useRelativeDateTimeConfig: () => ResolvedRelativeDateTimeConfig;
+//#endregion
+//#region src/ui/RelativeDateTimeValueEditor.d.ts
+/**
+* Value editor with support for {@link RelativeDateTimeValue relative date/time values}
+* (e.g. "three months ago" or "the beginning of this year"). How the user switches
+* between absolute and relative modes is delegated to a pluggable
+* {@link RelativeDateTimeModeController} (default: a compact toggle), supplied via
+* {@link QueryBuilderDateTime}. In relative mode it renders anchor + signed offset + unit
+* selectors; the unit selector is hidden when the offset is `0`.
+*
+* For the `between`/`notBetween` operators it renders two independent value editors (each
+* with its own mode affordance) and stores the bounds as a two-element array, so the from
+* and to bounds can independently be absolute or relative.
+*
+* @group Components
+*/
+declare const RelativeDateTimeValueEditor: (props: ValueEditorProps) => React.JSX.Element;
+//#endregion
+//#region src/ui/relativeDateTimeConstants.d.ts
+/**
+* Class name applied to the absolute/relative mode toggle button. Package-local (not part
+* of the core `standardClassnames`) to avoid coupling core to this extension.
+*/
+declare const relativeDateTimeToggleClassName = "rule-value-dateTimeRelative-toggle";
+/** Default value applied when switching a rule to relative mode. */
+declare const defaultRelativeDateTimeValue: RelativeDateTimeValue;
+/** Default anchor (reference-point) options for the relative date/time editor. */
+declare const defaultRelativeDateTimeAnchors: FullOption<RelativeDateTimeAnchor>[];
+/** Default unit options for the relative date/time editor. */
+declare const defaultRelativeDateTimeUnits: FullOption<RelativeDateTimeUnit>[];
+/** Default labels/content for the absolute/relative mode toggle. */
+declare const defaultRelativeDateTimeToggleLabels: Required<RelativeDateTimeToggleLabels>;
+//#endregion
+//#region src/ui/relativeDateTimeModeControllers.d.ts
+/**
+* Compact absolute/relative toggle rendered by {@link toggleModeController}. A
+* `role="switch"` button whose default glyph is supplied by CSS (keyed on
+* `aria-checked`); override via the `toggleLabels` config.
+*
+* @group Components
+*/
+declare const RelativeDateTimeModeToggle: ({
+  isRelative,
+  setMode,
+  disabled,
+  className,
+  labels
+}: RelativeDateTimeModeControlProps) => React.JSX.Element;
+/**
+* Zero-config default {@link RelativeDateTimeModeController}: derives the mode from the
+* value shape and renders a compact toggle button to switch between absolute and
+* relative entry.
+*/
+declare const toggleModeController: RelativeDateTimeModeController;
+/**
+* Builds an operator-driven {@link RelativeDateTimeModeController} that derives the mode
+* from the rule's operator. Pass the operator name(s) (or a predicate) that should put the
+* editor in relative mode. No toggle is rendered — the operator selector is the mode
+* affordance.
+*
+* NOTE: the chosen operators only signal _mode_; the rule's value remains a
+* {@link RelativeDateTimeValue}. For these operators to export correctly, map each one to a
+* real comparison operator via `context.relativeOperatorMap` when calling `formatQuery`
+* (e.g. `{ relativeEq: '=' }`). See the documentation.
+*/
+declare const createOperatorModeController: (relativeOperators: string[] | ((operator: string) => boolean)) => RelativeDateTimeModeController;
+interface FieldWithOperators {
+  operators?: FullOperator[];
+  [key: string]: unknown;
+}
+/**
+* Appends the given `operators` to each field's `operators` list, so the operator-driven
+* controller (see {@link createOperatorModeController}) has an operator to switch into
+* relative mode. Fields without an explicit `operators` list fall back to the core
+* `defaultOperators`.
+*/
+declare const withRelativeOperators: <F extends FieldWithOperators>(fields: F[], operators: FullOperator[]) => F[];
+//#endregion
+export { DateTimeValueEditor, QueryBuilderDateTime, QueryBuilderDateTimeContext, QueryBuilderDateTimeProps, RelativeDateTimeConfigContext, RelativeDateTimeEditorConfig, RelativeDateTimeModeControlProps, RelativeDateTimeModeController, RelativeDateTimeModeToggle, RelativeDateTimeToggleLabels, RelativeDateTimeValueEditor, RelativeOperatorMap, ResolvedRelativeDateTimeConfig, createOperatorModeController, defaultRelativeDateTimeAnchors, defaultRelativeDateTimeToggleLabels, defaultRelativeDateTimeUnits, defaultRelativeDateTimeValue, relativeDateTimeToggleClassName, toggleModeController, useRelativeDateTimeConfig, withRelativeOperators };
+//# sourceMappingURL=react-querybuilder_datetime.ui.d.mts.map

package/dist/react-querybuilder_datetime.ui.mjs

@@ -0,0 +1,448 @@
+import { r as isRelativeDateTimeValue } from "./utils-BC2SALFm.mjs";
+import { t as rqbDateTimeLibraryAPI } from "./rqbDateTimeLibraryAPI.jsdate-D66yJ1hK.mjs";
+import * as React from "react";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { QueryBuilderContext, ValueEditor, clsx, defaultOperators, getCompatContextProvider, parseNumber, standardClassnames, toArray, useValueEditor } from "react-querybuilder";
+//#region src/ui/InheritedValueEditorContext.ts
+/**
+* Holds the value editor inherited from an outer (compat package) context provider,
+* captured _before_ {@link QueryBuilderDateTime} overrides it. Lets the date/time value
+* editor delegate non-date fields (and absolute date inputs) to the compat editor instead
+* of the bare default {@link react-querybuilder!ValueEditor ValueEditor}. `null` = none
+* inherited (fall back to default).
+*/
+const InheritedValueEditorContext = createContext(null);
+/** Inherited (compat) value editor, or `null` if none. See {@link InheritedValueEditorContext}. */
+const useInheritedValueEditor = () => useContext(InheritedValueEditorContext);
+//#endregion
+//#region src/ui/relativeDateTimeConstants.ts
+/**
+* Class name applied to the absolute/relative mode toggle button. Package-local (not part
+* of the core `standardClassnames`) to avoid coupling core to this extension.
+*/
+const relativeDateTimeToggleClassName = "rule-value-dateTimeRelative-toggle";
+/** Default value applied when switching a rule to relative mode. */
+const defaultRelativeDateTimeValue = {
+	mode: "relative",
+	anchor: "now",
+	offset: 0,
+	unit: "day"
+};
+/** Default anchor (reference-point) options for the relative date/time editor. */
+const defaultRelativeDateTimeAnchors = [
+	{
+		name: "now",
+		value: "now",
+		label: "now"
+	},
+	{
+		name: "startOfDay",
+		value: "startOfDay",
+		label: "start of day"
+	},
+	{
+		name: "endOfDay",
+		value: "endOfDay",
+		label: "end of day"
+	},
+	{
+		name: "startOfWeek",
+		value: "startOfWeek",
+		label: "start of week"
+	},
+	{
+		name: "endOfWeek",
+		value: "endOfWeek",
+		label: "end of week"
+	},
+	{
+		name: "startOfMonth",
+		value: "startOfMonth",
+		label: "start of month"
+	},
+	{
+		name: "endOfMonth",
+		value: "endOfMonth",
+		label: "end of month"
+	},
+	{
+		name: "startOfYear",
+		value: "startOfYear",
+		label: "start of year"
+	},
+	{
+		name: "endOfYear",
+		value: "endOfYear",
+		label: "end of year"
+	}
+];
+/** Default unit options for the relative date/time editor. */
+const defaultRelativeDateTimeUnits = [
+	{
+		name: "minute",
+		value: "minute",
+		label: "minute(s)"
+	},
+	{
+		name: "hour",
+		value: "hour",
+		label: "hour(s)"
+	},
+	{
+		name: "day",
+		value: "day",
+		label: "day(s)"
+	},
+	{
+		name: "week",
+		value: "week",
+		label: "week(s)"
+	},
+	{
+		name: "month",
+		value: "month",
+		label: "month(s)"
+	},
+	{
+		name: "year",
+		value: "year",
+		label: "year(s)"
+	}
+];
+/** Default labels/content for the absolute/relative mode toggle. */
+const defaultRelativeDateTimeToggleLabels = {
+	label: "Toggle relative date/time",
+	absoluteTitle: "Absolute date/time (click for relative)",
+	relativeTitle: "Relative date/time (click for absolute)",
+	absoluteContent: "",
+	relativeContent: ""
+};
+//#endregion
+//#region src/ui/relativeDateTimeModeControllers.tsx
+/**
+* Compact absolute/relative toggle rendered by {@link toggleModeController}. A
+* `role="switch"` button whose default glyph is supplied by CSS (keyed on
+* `aria-checked`); override via the `toggleLabels` config.
+*
+* @group Components
+*/
+const RelativeDateTimeModeToggle = ({ isRelative, setMode, disabled, className, labels }) => {
+	const onClick = React.useCallback(() => setMode(isRelative ? "absolute" : "relative"), [setMode, isRelative]);
+	return /* @__PURE__ */ React.createElement("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": isRelative,
+		"aria-label": labels.label,
+		title: isRelative ? labels.relativeTitle : labels.absoluteTitle,
+		disabled,
+		className: clsx(relativeDateTimeToggleClassName, className),
+		onClick
+	}, isRelative ? labels.relativeContent : labels.absoluteContent);
+};
+/**
+* Zero-config default {@link RelativeDateTimeModeController}: derives the mode from the
+* value shape and renders a compact toggle button to switch between absolute and
+* relative entry.
+*/
+const toggleModeController = {
+	isRelative: (props) => isRelativeDateTimeValue(props.value),
+	ModeControl: RelativeDateTimeModeToggle
+};
+/**
+* Builds an operator-driven {@link RelativeDateTimeModeController} that derives the mode
+* from the rule's operator. Pass the operator name(s) (or a predicate) that should put the
+* editor in relative mode. No toggle is rendered — the operator selector is the mode
+* affordance.
+*
+* NOTE: the chosen operators only signal _mode_; the rule's value remains a
+* {@link RelativeDateTimeValue}. For these operators to export correctly, map each one to a
+* real comparison operator via `context.relativeOperatorMap` when calling `formatQuery`
+* (e.g. `{ relativeEq: '=' }`). See the documentation.
+*/
+const createOperatorModeController = (relativeOperators) => ({ isRelative: (props) => typeof relativeOperators === "function" ? relativeOperators(props.operator) : relativeOperators.includes(props.operator) });
+/**
+* Appends the given `operators` to each field's `operators` list, so the operator-driven
+* controller (see {@link createOperatorModeController}) has an operator to switch into
+* relative mode. Fields without an explicit `operators` list fall back to the core
+* `defaultOperators`.
+*/
+const withRelativeOperators = (fields, operators) => fields.map((field) => ({
+	...field,
+	operators: [...field.operators ?? defaultOperators, ...operators]
+}));
+//#endregion
+//#region src/ui/RelativeDateTimeConfigContext.tsx
+/**
+* Carries {@link RelativeDateTimeEditorConfig} to the {@link RelativeDateTimeValueEditor}.
+* Provided by {@link QueryBuilderDateTime}; defaults apply when no provider is present.
+*/
+const RelativeDateTimeConfigContext = createContext({});
+/** Reads the relative date/time editor config from context, merged with defaults. */
+const useRelativeDateTimeConfig = () => {
+	const config = useContext(RelativeDateTimeConfigContext);
+	return useMemo(() => ({
+		modeController: config.modeController ?? toggleModeController,
+		anchors: config.anchors ?? defaultRelativeDateTimeAnchors,
+		units: config.units ?? defaultRelativeDateTimeUnits,
+		toggleLabels: {
+			...defaultRelativeDateTimeToggleLabels,
+			...config.toggleLabels
+		},
+		dateTimeAPI: config.dateTimeAPI ?? rqbDateTimeLibraryAPI
+	}), [config]);
+};
+//#endregion
+//#region src/ui/RelativeDateTimeValueEditor.tsx
+const dummyPath = [];
+const dummyFieldData = {
+	name: "",
+	value: "",
+	label: ""
+};
+/** Splits a value into the from/to pair used by between/notBetween, object-safe. */
+const toBetweenArray = (value) => Array.isArray(value) ? value : isRelativeDateTimeValue(value) ? [value] : toArray(value);
+/**
+* Renders a single absolute-or-relative date/time value: a mode affordance (per the
+* controller) plus either an absolute date input or anchor + signed offset + unit
+* selectors. Reused once per slot so between/notBetween can mix bounds (e.g. an absolute
+* "from" and a relative "to").
+*/
+const RelativeDateTimeSingleValueEditor = ({ baseProps, value, onChange, absoluteOperator, config, SelectorComponent, NumericEditorComponent, valueListItemClassName, numericSchema }) => {
+	const { schema, disabled, title, testID } = baseProps;
+	const { modeController, anchors, units, toggleLabels } = config;
+	const isRelative = modeController.isRelative({
+		...baseProps,
+		value
+	});
+	const relValue = isRelativeDateTimeValue(value) ? value : defaultRelativeDateTimeValue;
+	const handleSetMode = useCallback((mode) => onChange(mode === "relative" ? defaultRelativeDateTimeValue : ""), [onChange]);
+	const handleChangeAnchor = useCallback((anchor) => onChange({
+		...relValue,
+		anchor
+	}), [onChange, relValue]);
+	const handleChangeOffset = useCallback((offset) => onChange({
+		...relValue,
+		offset: parseNumber(offset, { parseNumbers: true }) || 0
+	}), [onChange, relValue]);
+	const handleChangeUnit = useCallback((unit) => onChange({
+		...relValue,
+		unit
+	}), [onChange, relValue]);
+	const { ModeControl } = modeController;
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, ModeControl && /* @__PURE__ */ React.createElement(ModeControl, {
+		isRelative,
+		setMode: handleSetMode,
+		schema,
+		disabled,
+		className: valueListItemClassName,
+		title,
+		testID,
+		labels: toggleLabels
+	}), isRelative ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SelectorComponent, {
+		schema,
+		testID,
+		title,
+		className: valueListItemClassName,
+		handleOnChange: handleChangeAnchor,
+		disabled,
+		value: relValue.anchor,
+		options: anchors,
+		multiple: false,
+		listsAsArrays: false,
+		path: dummyPath,
+		level: 0
+	}), /* @__PURE__ */ React.createElement(NumericEditorComponent, {
+		skipHook: true,
+		testID,
+		inputType: "number",
+		title,
+		className: valueListItemClassName,
+		disabled,
+		handleOnChange: handleChangeOffset,
+		field: "",
+		operator: "",
+		value: relValue.offset,
+		valueSource: "value",
+		fieldData: dummyFieldData,
+		schema: numericSchema,
+		path: dummyPath,
+		level: 0,
+		rule: {
+			field: "",
+			operator: "=",
+			value: relValue.offset
+		}
+	}), relValue.offset !== 0 && /* @__PURE__ */ React.createElement(SelectorComponent, {
+		schema,
+		testID,
+		title,
+		className: valueListItemClassName,
+		handleOnChange: handleChangeUnit,
+		disabled,
+		value: relValue.unit,
+		options: units,
+		multiple: false,
+		listsAsArrays: false,
+		path: dummyPath,
+		level: 0
+	})) : /* @__PURE__ */ React.createElement(DateTimeValueEditor, {
+		...baseProps,
+		operator: absoluteOperator,
+		value,
+		handleOnChange: onChange,
+		className: standardClassnames.value
+	}));
+};
+/**
+* Value editor with support for {@link RelativeDateTimeValue relative date/time values}
+* (e.g. "three months ago" or "the beginning of this year"). How the user switches
+* between absolute and relative modes is delegated to a pluggable
+* {@link RelativeDateTimeModeController} (default: a compact toggle), supplied via
+* {@link QueryBuilderDateTime}. In relative mode it renders anchor + signed offset + unit
+* selectors; the unit selector is hidden when the offset is `0`.
+*
+* For the `between`/`notBetween` operators it renders two independent value editors (each
+* with its own mode affordance) and stores the bounds as a two-element array, so the from
+* and to bounds can independently be absolute or relative.
+*
+* @group Components
+*/
+const RelativeDateTimeValueEditor = (props) => {
+	const { valueListItemClassName } = useValueEditor(props);
+	const { className, value, handleOnChange, schema, operator, separator } = props;
+	const { suppressStandardClassnames } = schema;
+	const SelectorComponent = props.selectorComponent ?? schema.controls.valueSelector;
+	const NumericEditorComponent = useInheritedValueEditor() ?? ValueEditor;
+	const config = useRelativeDateTimeConfig();
+	const numericSchema = useMemo(() => ({
+		...schema,
+		parseNumbers: true
+	}), [schema]);
+	const outerClassname = useMemo(() => clsx(suppressStandardClassnames || standardClassnames.valueDateTimeRelative, className), [suppressStandardClassnames, className]);
+	const isBetween = operator === "between" || operator === "notBetween";
+	const valueAsArray = useMemo(() => toBetweenArray(value), [value]);
+	const handleChangeBound = useCallback((index) => (boundValue) => {
+		const next = [valueAsArray[0], valueAsArray[1]];
+		next[index] = boundValue;
+		handleOnChange(next);
+	}, [valueAsArray, handleOnChange]);
+	if (isBetween) return /* @__PURE__ */ React.createElement("span", { className: outerClassname }, /* @__PURE__ */ React.createElement(RelativeDateTimeSingleValueEditor, {
+		baseProps: props,
+		value: valueAsArray[0],
+		onChange: handleChangeBound(0),
+		absoluteOperator: "=",
+		config,
+		SelectorComponent,
+		NumericEditorComponent,
+		valueListItemClassName,
+		numericSchema
+	}), separator, /* @__PURE__ */ React.createElement(RelativeDateTimeSingleValueEditor, {
+		baseProps: props,
+		value: valueAsArray[1],
+		onChange: handleChangeBound(1),
+		absoluteOperator: "=",
+		config,
+		SelectorComponent,
+		NumericEditorComponent,
+		valueListItemClassName,
+		numericSchema
+	}));
+	return /* @__PURE__ */ React.createElement("span", { className: outerClassname }, /* @__PURE__ */ React.createElement(RelativeDateTimeSingleValueEditor, {
+		baseProps: props,
+		value,
+		onChange: handleOnChange,
+		absoluteOperator: operator,
+		config,
+		SelectorComponent,
+		NumericEditorComponent,
+		valueListItemClassName,
+		numericSchema
+	}));
+};
+//#endregion
+//#region src/ui/QueryBuilderDateTime.tsx
+/**
+* Whether a rule should use a date/time editor, based on either the coerced input
+* type (`date`/`datetime-local`) or a date-like `datatype` (`date`/`datetime`/`timestamp`).
+*/
+const isDateTimeEditor = (props, inputTypeCoerced) => props.type === "text" && (inputTypeCoerced === "date" || inputTypeCoerced === "datetime-local") || /^(?:date|datetime|timestamp)\b/i.test(props.fieldData?.datatype);
+const pad2 = (n) => `${n}`.padStart(2, "0");
+/**
+* Formats a `Date` into the local value expected by a native `date`/`datetime-local`
+* input (library-agnostic; the date library only handles parsing/validation).
+*/
+const formatDateInputValue = (d, withTime) => {
+	const datePart = `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+	return withTime ? `${datePart}T${pad2(d.getHours())}:${pad2(d.getMinutes())}` : datePart;
+};
+/**
+* Renders the inherited (compat) editor when one is provided, otherwise the default
+* {@link react-querybuilder!ValueEditor ValueEditor}. The editor is received as a prop (rather
+* than read from context here) so the JSX element type stays prop-sourced and stable.
+*/
+const FallbackValueEditor = ({ editor: Editor, ...props }) => Editor ? /* @__PURE__ */ React.createElement(Editor, props) : /* @__PURE__ */ React.createElement(ValueEditor, {
+	...props,
+	skipHook: true
+});
+const DateTimeValueEditor = (props) => {
+	const uVE = useValueEditor(props);
+	const InheritedEditor = useInheritedValueEditor();
+	const { dateTimeAPI } = useRelativeDateTimeConfig();
+	const fallback = (p) => /* @__PURE__ */ React.createElement(FallbackValueEditor, {
+		editor: InheritedEditor,
+		...p
+	});
+	if (!isDateTimeEditor(props, uVE.inputTypeCoerced)) return fallback(props);
+	if (dateTimeAPI.isValid(props.value)) {
+		const value = formatDateInputValue(dateTimeAPI.toDate(props.value), uVE.inputTypeCoerced !== "date");
+		return fallback({
+			...props,
+			value
+		});
+	}
+	return fallback(props);
+};
+/**
+* Provider value editor: renders the relative-capable {@link RelativeDateTimeValueEditor}
+* for date/time fields and falls back to the inherited (compat) editor for everything else.
+*/
+const QueryBuilderDateTimeValueEditor = (props) => {
+	const uVE = useValueEditor(props);
+	const InheritedEditor = useInheritedValueEditor();
+	if (isDateTimeEditor(props, uVE.inputTypeCoerced)) return /* @__PURE__ */ React.createElement(RelativeDateTimeValueEditor, props);
+	return /* @__PURE__ */ React.createElement(FallbackValueEditor, {
+		editor: InheritedEditor,
+		...props
+	});
+};
+const QueryBuilderDateTimeContext = getCompatContextProvider({ controlElements: { valueEditor: QueryBuilderDateTimeValueEditor } });
+/**
+* Context provider enabling date/time features for a wrapped
+* {@link react-querybuilder!QueryBuilder QueryBuilder}: renders the relative-capable
+* {@link RelativeDateTimeValueEditor} for date/time fields, and accepts optional
+* {@link RelativeDateTimeEditorConfig} props (mode controller, anchor/unit options, and
+* toggle labels). With no props it provides the zero-config toggle experience.
+*
+* @group Components
+*/
+const QueryBuilderDateTime = ({ children, modeController, anchors, units, toggleLabels, dateTimeAPI }) => {
+	const config = useMemo(() => ({
+		modeController,
+		anchors,
+		units,
+		toggleLabels,
+		dateTimeAPI
+	}), [
+		modeController,
+		anchors,
+		units,
+		toggleLabels,
+		dateTimeAPI
+	]);
+	const inheritedValueEditor = useContext(QueryBuilderContext).controlElements?.valueEditor ?? null;
+	return /* @__PURE__ */ React.createElement(RelativeDateTimeConfigContext.Provider, { value: config }, /* @__PURE__ */ React.createElement(InheritedValueEditorContext.Provider, { value: inheritedValueEditor }, /* @__PURE__ */ React.createElement(QueryBuilderDateTimeContext, null, children)));
+};
+//#endregion
+export { DateTimeValueEditor, QueryBuilderDateTime, QueryBuilderDateTimeContext, RelativeDateTimeConfigContext, RelativeDateTimeModeToggle, RelativeDateTimeValueEditor, createOperatorModeController, defaultRelativeDateTimeAnchors, defaultRelativeDateTimeToggleLabels, defaultRelativeDateTimeUnits, defaultRelativeDateTimeValue, relativeDateTimeToggleClassName, toggleModeController, useRelativeDateTimeConfig, withRelativeOperators };
+
+//# sourceMappingURL=react-querybuilder_datetime.ui.mjs.map