@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js

@@ -0,0 +1,155 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
+import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
+import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
+import { cn as f, isDateRangeValue as p, isFieldOverlayDialog as m, resolveFieldOverlay as h, resolveFieldShowFooter as g, resolveRangePickerOrientation as _, splitComponentProps as v } from "@bridge-ui/core";
+import { get as y, isNil as b, omit as x } from "es-toolkit/compat";
+import { colorProps as S } from "@bridge-ui/core/Tokens/Listbox";
+//#region src/Components/DateTimeRangeField/composables/useDateTimeRangeField.ts
+var C = [
+	"ampm",
+	"classes",
+	"maxDate",
+	"maxTime",
+	"minDate",
+	"minTime",
+	"overlay",
+	"interval",
+	"timeZone",
+	"clearable",
+	"hideYears",
+	"hideMonths",
+	"showFooter",
+	"customProps",
+	"orientation",
+	"showSeconds",
+	"startOfWeek",
+	"defaultValue",
+	"disableDates",
+	"disableTimes",
+	"disableYears",
+	"hideWeekdays",
+	"disableMonths",
+	"hideOutsideDays"
+];
+function w(e, t, n, r, i) {
+	return b(e) || !p(e) ? "" : `${`${t.format(e[0], n)} ${t.formatTime(e[0], n, {
+		ampm: r,
+		showSeconds: i
+	})}`.trim()} – ${`${t.format(e[1], n)} ${t.formatTime(e[1], n, {
+		ampm: r,
+		showSeconds: i
+	})}`.trim()}`;
+}
+function T(p, T, E) {
+	let D = u(), O = d(), k = e(), A = r(), j = t(), M = l(!1), N = l(null), P = c(() => v({
+		props: {
+			...D,
+			...p
+		},
+		bridgeKeys: C
+	})), F = c(() => P.value.componentProps), I = c(() => j(F.value.timeZone)), L = c(() => T.value ?? null), R = c(() => F.value.clearable !== !1), z = c(() => !b(L.value)), B = (e) => {
+		N.value = e instanceof HTMLElement ? e : null;
+	};
+	function V(e) {
+		M.value = e, E(e ? "open" : "close");
+	}
+	let H = c(() => x(P.value.inheritedAttrs, ["class"])), ee = c(() => {
+		let e = v({
+			bridgeKeys: o,
+			props: H.value
+		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimeRangePicker: s, ...c } = F.value.customProps ?? {};
+		return {
+			...e,
+			endIcon: t,
+			classes: F.value.classes,
+			customProps: {
+				...c,
+				container: i(c.container, {}, {
+					ref: B,
+					class: f({ "cursor-pointer": !p.disabled && !p.readonly }),
+					onClick: (e) => {
+						p.disabled || p.readonly || e.target.closest("[data-field-clear]") || V(!0);
+					}
+				})
+			}
+		};
+	}), U = s(() => ee.value, {
+		size: "md",
+		rounded: "md",
+		color: "primary",
+		variant: "outline",
+		showErrorIcon: !0
+	}, { componentName: "DateTimeRangeField" }), W = c(() => z.value && R.value && !p.readonly && !U.isDisabled.value), G = c(() => w(L.value, k.value, I.value, F.value.ampm, F.value.showSeconds));
+	function K(e) {
+		T.value = e, E("change", e);
+	}
+	let q = c(() => h(F.value.overlay, A.mobile)), J = c(() => _(F.value.orientation, q.value, A.mobile)), Y = c(() => g(F.value.showFooter, A.mobile));
+	function X(e) {
+		K(e), Y.value && V(!1);
+	}
+	function Z() {
+		V(!1);
+	}
+	function Q(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(p.disabled || p.readonly) && (K(null), E("clear"), V(!1));
+	}
+	function $(e) {
+		e.preventDefault();
+	}
+	let te = c(() => i({
+		readonly: !0,
+		value: G.value,
+		onFocus: (e) => {
+			U.inputBind.value.onFocus?.(e), V(!0);
+		},
+		onKeydown: (e) => {
+			U.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
+		}
+	}, void 0, U.inputBind.value)), ne = c(() => F.value.overlay), re = c(() => ({
+		modal: F.value.customProps?.modal,
+		drawer: F.value.customProps?.drawer,
+		menu: {
+			anchorEl: N.value,
+			placement: "bottom-start",
+			...F.value.customProps?.menu
+		}
+	})), ie = c(() => F.value.customProps?.dateTimeRangePicker), ae = c(() => m(q.value) ? "w-full shadow-none" : void 0), oe = c(() => a(U.merged.value.size)), se = c(() => y(S, [U.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	return {
+		open: M,
+		overlay: ne,
+		hasValue: z,
+		formField: U,
+		inputBind: te,
+		clearable: R,
+		clearBind: c(() => i({}, {}, {
+			tabindex: 0,
+			role: "button",
+			"data-field-clear": !0,
+			onMousedown: $,
+			class: f({
+				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
+				[se.value]: !0,
+				[F.value.classes?.clear ?? ""]: !0
+			})
+		})),
+		clearValue: Q,
+		modelValue: L,
+		showFooter: Y,
+		orientation: J,
+		pickerClass: ae,
+		dateTimeOnly: F,
+		containerRef: N,
+		clearIconSize: oe,
+		showClearIcon: W,
+		handleOpenChange: V,
+		handlePickerChange: X,
+		handlePickerCancel: Z,
+		overlayCustomProps: re,
+		dateTimeRangePickerCustomProps: ie
+	};
+}
+//#endregion
+export { T as useDateTimeRangeField };

package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts

@@ -0,0 +1,231 @@
+import { InputHTMLAttributes, Slot } from 'vue';
+import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayMode, MergeHtmlProps, StartOfWeek } from '@bridge-ui/core';
+import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
+import { CalendarRangeOrientation } from '../CalendarRange';
+import { DateTimeRangePickerCustomProps } from '../DateTimeRangePicker/dateTimeRangePicker.types';
+import { DrawerOwnProps } from '../Drawer/drawer.types';
+import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
+import { IconProps } from '../Icon';
+import { MenuOwnProps } from '../Menu/menu.types';
+import { ModalOwnProps } from '../Modal/modal.types';
+export interface DateTimeRangeFieldClasses extends FormFieldClasses {
+    /**
+     * Classes merged onto the clear control.
+     */
+    clear?: string;
+}
+export interface DateTimeRangeFieldCustomProps extends FormFieldCustomProps {
+    /**
+     * Props forwarded to the clear `Icon` (`icon` is set by `DateTimeRangeField`).
+     *
+     * @default undefined
+     */
+    clearIcon?: Partial<Omit<IconProps, "icon">>;
+    /**
+     * Props forwarded to the nested `DateTimeRangePicker`.
+     *
+     * @default undefined
+     */
+    dateTimeRangePicker?: DateTimeRangePickerCustomProps;
+    /**
+     * Props forwarded to the nested `Drawer` when overlay resolves to drawer.
+     *
+     * @default undefined
+     */
+    drawer?: Partial<Pick<DrawerOwnProps, "blur" | "size" | "classes" | "placement" | "transition" | "customProps">>;
+    /**
+     * Props forwarded to the floating `Menu` when overlay resolves to menu.
+     *
+     * @default undefined
+     */
+    menu?: Partial<Pick<MenuOwnProps, "shadow" | "classes" | "rounded" | "placement" | "customProps">>;
+    /**
+     * Props forwarded to the nested `Modal` when overlay resolves to modal.
+     *
+     * @default undefined
+     */
+    modal?: Partial<Pick<ModalOwnProps, "blur" | "size" | "align" | "classes" | "transition" | "customProps">>;
+}
+export interface DateTimeRangeFieldEmits {
+    /**
+     * Emitted when the range selection changes.
+     */
+    change: [value: null | DateRangeValue];
+    /**
+     * Emitted when the value is cleared.
+     */
+    clear: [];
+    /**
+     * Emitted when the menu closes.
+     */
+    close: [];
+    /**
+     * Emitted when the menu opens.
+     */
+    open: [];
+}
+export interface DateTimeRangeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "classes" | "customProps"> {
+    /**
+     * Uses a 12-hour clock with an AM/PM column.
+     *
+     * @default false
+     */
+    ampm?: boolean;
+    /**
+     * Classes for field / input regions.
+     *
+     * @default undefined
+     */
+    classes?: DateTimeRangeFieldClasses;
+    /**
+     * Whether the value can be cleared.
+     *
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: DateTimeRangeFieldCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | DateRangeValue;
+    /**
+     * Dates that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableDates?: DisableDatesInput;
+    /**
+     * Month indexes that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableMonths?: number[];
+    /**
+     * Times that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableTimes?: DisableTimesInput;
+    /**
+     * Years that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableYears?: number[];
+    /**
+     * Hides month navigation / panel.
+     *
+     * @default false
+     */
+    hideMonths?: boolean;
+    /**
+     * Hides days that fall outside the displayed month.
+     *
+     * @default false
+     */
+    hideOutsideDays?: boolean;
+    /**
+     * Hides weekday labels.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Hides year navigation / panel.
+     *
+     * @default false
+     */
+    hideYears?: boolean;
+    /**
+     * Minute step between time options.
+     *
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * Latest selectable date.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Latest selectable time.
+     *
+     * @default undefined
+     */
+    maxTime?: Date;
+    /**
+     * Earliest selectable date.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Earliest selectable time.
+     *
+     * @default undefined
+     */
+    minTime?: Date;
+    /**
+     * Dual calendar arrangement forwarded to `DateTimeRangePicker`.
+     * On mobile, `drawer` / `modal` overlays default to `vertical` when unset.
+     *
+     * @default "horizontal"
+     */
+    orientation?: CalendarRangeOrientation;
+    /**
+     * Which overlay shell opens the picker. `auto` uses `menu` on desktop and
+     * `drawer` (bottom) on mobile.
+     *
+     * @default "auto"
+     */
+    overlay?: FieldOverlayMode;
+    /**
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
+     * on mobile.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * Shows seconds in the panel and formatted value.
+     *
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * First day of the week.
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+}
+export interface DateTimeRangeFieldSlots extends FormFieldSlots {
+    /**
+     * Custom content inside each day button on the nested calendar.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+}
+export type DateTimeRangeFieldProps = MergeHtmlProps<DateTimeRangeFieldOwnProps, InputHTMLAttributes> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     *
+     * @default undefined
+     */
+    modelValue?: null | DateRangeValue;
+};

package/dist/Components/DateTimeRangeField/index.d.ts

@@ -0,0 +1,3 @@
+export { useDateTimeRangeField } from './composables/useDateTimeRangeField';
+export type { DateTimeRangeFieldClasses, DateTimeRangeFieldCustomProps, DateTimeRangeFieldEmits, DateTimeRangeFieldOwnProps, DateTimeRangeFieldProps, DateTimeRangeFieldSlots, } from './dateTimeRangeField.types';
+export { default as DateTimeRangeField } from './DateTimeRangeField.vue';

package/dist/Components/DateTimeRangeField/index.js

@@ -0,0 +1,3 @@
+import { useDateTimeRangeField as e } from "./composables/useDateTimeRangeField.js";
+import t from "./DateTimeRangeField.js";
+export { t as DateTimeRangeField, e as useDateTimeRangeField };

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,5 @@
+import e from "./DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/DateTimeRangePicker/DateTimeRangePicker.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue.d.ts

@@ -0,0 +1,17 @@
+import { DateTimeRangePickerOwnProps, DateTimeRangePickerSlots } from './dateTimeRangePicker.types';
+type __VLS_Slots = DateTimeRangePickerSlots;
+declare const __VLS_base: import('vue').DefineComponent<DateTimeRangePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: () => any;
+    change: (value: import('@bridge-ui/core').DateRangeValue | null) => any;
+}, string, import('vue').PublicProps, Readonly<DateTimeRangePickerOwnProps> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onChange?: ((value: import('@bridge-ui/core').DateRangeValue | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,209 @@
+import e from "../Button/Button.js";
+import t from "../CalendarRange/CalendarRange.js";
+import { TIME_PANEL_COLUMN_WIDTH_CLASS as n } from "../TimePanel/composables/useTimePanel.js";
+import r from "../TimePanel/TimePanel.js";
+import { useDateTimeRangePicker as i } from "./composables/useDateTimeRangePicker.js";
+import { createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeProps as f, normalizeClass as p, normalizeProps as m, openBlock as h, renderSlot as g, toDisplayString as _, unref as v, withCtx as y } from "vue";
+//#region src/Components/DateTimeRangePicker/DateTimeRangePicker.vue?vue&type=script&setup=true&lang.ts
+var b = /*@__PURE__*/ u({
+	inheritAttrs: !1,
+	__name: "DateTimeRangePicker",
+	props: {
+		ampm: { type: Boolean },
+		classes: {},
+		color: {},
+		customProps: {},
+		defaultValue: {},
+		disabled: { type: Boolean },
+		disableDates: {},
+		disableMonths: {},
+		disableTimes: {},
+		disableYears: {},
+		hideMonths: { type: Boolean },
+		hideOutsideDays: { type: Boolean },
+		hideWeekdays: { type: Boolean },
+		hideYears: { type: Boolean },
+		interval: {},
+		maxDate: {},
+		maxTime: {},
+		minDate: {},
+		minTime: {},
+		orientation: {},
+		readOnly: { type: Boolean },
+		rounded: {},
+		showFooter: { type: Boolean },
+		showSeconds: { type: Boolean },
+		startOfWeek: {},
+		timeZone: {},
+		tokens: {},
+		value: {}
+	},
+	emits: ["cancel", "change"],
+	setup(u, { emit: b }) {
+		let { merged: x, rootBind: S, timeBind: C, footerBind: w, showFooter: T, applyLabel: E, timeTokens: D, handleApply: O, cancelLabel: k, contentBind: A, displayValue: j, handleCancel: M, calendarBind: N, timeFillBind: P, endTimeValue: F, timeSizerBind: I, calendarTokens: L, startTimeValue: R, applyButtonProps: z, cancelButtonProps: B, handleCalendarChange: V, handleEndPanelChange: H, timePanelCustomProps: U, handleStartPanelChange: W } = i(u, {
+			ampm: !1,
+			interval: 1,
+			rounded: "md",
+			startOfWeek: 0,
+			color: "primary",
+			showFooter: !1,
+			showSeconds: !1,
+			orientation: "horizontal"
+		}, b);
+		return (i, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(A)) }, [s("div", { class: p(v(N)) }, [l(t, {
+			color: v(x).color,
+			value: v(j),
+			tokens: v(L),
+			rounded: v(x).rounded,
+			"max-date": v(x).maxDate,
+			"min-date": v(x).minDate,
+			disabled: v(x).disabled,
+			"read-only": v(x).readOnly,
+			"time-zone": v(x).timeZone,
+			"hide-years": v(x).hideYears,
+			"hide-months": v(x).hideMonths,
+			orientation: v(x).orientation,
+			onChange: v(V),
+			"start-of-week": v(x).startOfWeek,
+			"disable-dates": v(x).disableDates,
+			"hide-weekdays": v(x).hideWeekdays,
+			"disable-years": v(x).disableYears,
+			"disable-months": v(x).disableMonths,
+			"hide-outside-days": v(x).hideOutsideDays,
+			"custom-props": {
+				end: { class: "pr-2.5" },
+				start: { class: "pr-2.5" },
+				panels: { class: "gap-0" }
+			}
+		}, {
+			day: y((e) => [g(i.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
+			startAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
+				"aria-hidden": "true",
+				class: p(v(I))
+			}, [
+				s("div", { class: p(v(n)) }, null, 2),
+				s("div", { class: p(v(n)) }, null, 2),
+				v(x).showSeconds ? (h(), o("div", {
+					key: 0,
+					class: p(v(n))
+				}, null, 2)) : a("", !0),
+				v(x).ampm ? (h(), o("div", {
+					key: 1,
+					class: p(v(n))
+				}, null, 2)) : a("", !0)
+			], 2), s("div", { class: p(v(P)) }, [l(v(r), {
+				ampm: v(x).ampm,
+				tokens: v(D),
+				color: v(x).color,
+				value: v(R),
+				rounded: v(x).rounded,
+				"max-time": v(x).maxTime,
+				"min-time": v(x).minTime,
+				disabled: v(x).disabled,
+				interval: v(x).interval,
+				"read-only": v(x).readOnly,
+				"time-zone": v(x).timeZone,
+				"show-seconds": v(x).showSeconds,
+				onChange: v(W),
+				"disable-times": v(x).disableTimes,
+				"custom-props": v(U)
+			}, null, 8, [
+				"ampm",
+				"tokens",
+				"color",
+				"value",
+				"rounded",
+				"max-time",
+				"min-time",
+				"disabled",
+				"interval",
+				"read-only",
+				"time-zone",
+				"show-seconds",
+				"onChange",
+				"disable-times",
+				"custom-props"
+			])], 2)], 2)]),
+			endAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
+				"aria-hidden": "true",
+				class: p(v(I))
+			}, [
+				s("div", { class: p(v(n)) }, null, 2),
+				s("div", { class: p(v(n)) }, null, 2),
+				v(x).showSeconds ? (h(), o("div", {
+					key: 0,
+					class: p(v(n))
+				}, null, 2)) : a("", !0),
+				v(x).ampm ? (h(), o("div", {
+					key: 1,
+					class: p(v(n))
+				}, null, 2)) : a("", !0)
+			], 2), s("div", { class: p(v(P)) }, [l(v(r), {
+				ampm: v(x).ampm,
+				tokens: v(D),
+				color: v(x).color,
+				value: v(F),
+				rounded: v(x).rounded,
+				"max-time": v(x).maxTime,
+				"min-time": v(x).minTime,
+				disabled: v(x).disabled,
+				interval: v(x).interval,
+				"read-only": v(x).readOnly,
+				"time-zone": v(x).timeZone,
+				"show-seconds": v(x).showSeconds,
+				onChange: v(H),
+				"disable-times": v(x).disableTimes,
+				"custom-props": v(U)
+			}, null, 8, [
+				"ampm",
+				"tokens",
+				"color",
+				"value",
+				"rounded",
+				"max-time",
+				"min-time",
+				"disabled",
+				"interval",
+				"read-only",
+				"time-zone",
+				"show-seconds",
+				"onChange",
+				"disable-times",
+				"custom-props"
+			])], 2)], 2)]),
+			_: 3
+		}, 8, [
+			"color",
+			"value",
+			"tokens",
+			"rounded",
+			"max-date",
+			"min-date",
+			"disabled",
+			"read-only",
+			"time-zone",
+			"hide-years",
+			"hide-months",
+			"orientation",
+			"onChange",
+			"start-of-week",
+			"disable-dates",
+			"hide-weekdays",
+			"disable-years",
+			"disable-months",
+			"hide-outside-days"
+		])], 2)], 2), v(T) ? (h(), o("div", m(f({ key: 0 }, v(w))), [l(v(e), f({
+			variant: "flat",
+			color: "secondary",
+			onClick: v(M)
+		}, v(B)), {
+			default: y(() => [c(_(v(k)), 1)]),
+			_: 1
+		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(z), { onClick: v(O) }), {
+			default: y(() => [c(_(v(E)), 1)]),
+			_: 1
+		}, 16, ["onClick"])], 16)) : a("", !0)], 16));
+	}
+});
+//#endregion
+export { b as default };

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts

@@ -0,0 +1,49 @@
+import { MaybeRefOrGetter } from 'vue';
+import { DateRangeValue, LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
+import { DateTimeRangePickerOwnProps } from '../dateTimeRangePicker.types';
+type DateTimeRangePickerLibDefaults = LibDefaultsShape<DateTimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "orientation" | "showSeconds" | "startOfWeek">;
+type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, DateTimeRangePickerLibDefaults>;
+/**
+ * Owns controlled/uncontrolled datetime range value, optional footer draft, and binds.
+ */
+export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: {
+    (event: "change", value: null | DateRangeValue): void;
+    (event: "cancel"): void;
+}): {
+    merged: import('vue').ComputedRef<DateTimeRangePickerMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    timeBind: import('vue').ComputedRef<string>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    showFooter: import('vue').ComputedRef<boolean>;
+    timeTokens: import('vue').ComputedRef<{
+        color: Record<string, Partial<import('@bridge-ui/core').TimeColorItem>> | undefined;
+        rounded: Record<string, string> | undefined;
+    }>;
+    handleApply: () => void;
+    contentBind: import('vue').ComputedRef<string>;
+    displayValue: import('vue').ComputedRef<[Date, Date] | null>;
+    handleCancel: () => void;
+    calendarBind: import('vue').ComputedRef<string>;
+    timeFillBind: import('vue').ComputedRef<string>;
+    endTimeValue: import('vue').ComputedRef<Date | null>;
+    timeSizerBind: import('vue').ComputedRef<string>;
+    calendarTokens: import('vue').ComputedRef<{
+        day: Partial<import('@bridge-ui/core').CalendarDay> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core').CalendarColorItem>> | undefined;
+        rounded: Record<string, string> | undefined;
+    }>;
+    startTimeValue: import('vue').ComputedRef<Date | null>;
+    handleCalendarChange: (next: null | DateRangeValue) => void;
+    handleEndPanelChange: (next: null | TimeValue) => void;
+    timePanelCustomProps: import('vue').ComputedRef<{
+        root: {
+            class: string;
+        };
+    }>;
+    handleStartPanelChange: (next: null | TimeValue) => void;
+    applyLabel: import('vue').ComputedRef<string>;
+    cancelLabel: import('vue').ComputedRef<string>;
+    applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+    cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
+};
+export {};