@ecoma-io/loom 0.1.0 → 0.2.0

package/dist/primitives/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,562 @@
+import { cn } from "../../lib/cn.js";
+import { optional } from "../../lib/props.js";
+import { useLabels } from "../../lib/labels.js";
+import { getLocalTimeZone as $ad063034c8620db8$export$aa8b41735afcabd2, isSameDay as $ad063034c8620db8$export$ea39ec197993aef0, isToday as $ad063034c8620db8$export$629b0a497aa65267 } from "../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/queries.js";
+import { toCalendarDate as $d07e34cce18680fd$export$93522d1a439f3617, toCalendarDateTime as $d07e34cce18680fd$export$b21e0b124e224484 } from "../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/conversion.js";
+import { parseDateTime as $58246871e4652552$export$588937bcd60ade55 } from "../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/string.js";
+import { CALENDAR_PANEL_LABELS, DATE_SEGMENT_LABELS, RANGE_CELL_LABELS, TIME_SEGMENT_LABELS, emptySegmentValueText, isDateSegmentPart, isTimeSegmentPart } from "../../lib/date-labels.js";
+import { useSplitAttrs } from "../../lib/attrs.js";
+import { useFieldControl } from "../../lib/field-context.js";
+import { useAncestorDisabled } from "../../lib/ancestor-disabled.js";
+import { CalendarRange, ChevronLeft, ChevronRight } from "@lucide/vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, watch, withCtx } from "vue";
+import { DateRangePickerAnchor, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
+//#region src/primitives/DateTimeRangePicker/DateTimeRangePicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "px-1.5 text-muted-foreground"
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = {
+	role: "status",
+	class: "text-xs text-muted-foreground"
+};
+var _hoisted_4 = { class: "flex flex-col gap-3 sm:flex-row sm:gap-5" };
+var _hoisted_5 = {
+	key: 0,
+	"aria-hidden": "true",
+	class: "absolute bottom-1 h-1 w-1 rounded-full bg-primary group-data-[selection-start]:bg-primary-foreground group-data-[selection-end]:bg-primary-foreground"
+};
+var MINUTES_PER_HOUR = 60;
+var MINUTES_PER_DAY = 1440;
+/** A date and a time in the control's locale, at the precision the field is showing. */
+function formatInstant(locale, date, hour12, seconds) {
+	return new Intl.DateTimeFormat(locale, {
+		dateStyle: "long",
+		timeStyle: seconds ? "medium" : "short",
+		...optional({ hour12 })
+	}).format(date.toDate($ad063034c8620db8$export$aa8b41735afcabd2()));
+}
+/**
+* English's plural rule, in English's own bag, which is the only place a plural
+* rule belongs. It is not extracted, not shared, and applies to nothing a host
+* supplies: `status` hands over the minutes and receives a finished sentence,
+* so a language with one form or with six selects its own.
+*/
+function englishDuration(minutes) {
+	if (minutes === 0) return "no time at all";
+	const days = Math.floor(minutes / MINUTES_PER_DAY);
+	const hours = Math.floor(minutes % MINUTES_PER_DAY / MINUTES_PER_HOUR);
+	const rest = minutes % MINUTES_PER_HOUR;
+	return [
+		[days, "day"],
+		[hours, "hour"],
+		[rest, "minute"]
+	].filter(([count]) => count > 0).map(([count, name]) => `${String(count)} ${String(name)}${count === 1 ? "" : "s"}`).join(" ");
+}
+/**
+* Loom's English, co-located with the component so it tree-shakes with it, and
+* exported so a host can build a partial vocabulary against the real thing.
+*/
+var DATE_TIME_RANGE_LABELS = {
+	startDate: "Start date and time",
+	endDate: "End date and time",
+	status: ({ locale, start, end, minutes, hour12, seconds }) => {
+		const anchor = start ?? end;
+		if (!anchor) return "Nothing chosen. Choose the first day of the range.";
+		if (!start || !end || minutes === void 0) return `${formatInstant(locale, anchor, hour12, seconds)} chosen. Choose the last day of the range.`;
+		const span = `${formatInstant(locale, start, hour12, seconds)} to ${formatInstant(locale, end, hour12, seconds)}`;
+		if (minutes < 0) return `${span}. The end falls before the start.`;
+		return `${span}, ${englishDuration(minutes)}.`;
+	}
+};
+var DateTimeRangePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "DateTimeRangePicker",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		granularity: { default: "minute" },
+		hourCycle: {},
+		locale: { default: "en" },
+		months: { default: 2 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		name: {},
+		labels: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const SEGMENT_TYPES = ["start", "end"];
+		const dateText = useLabels("dateSegments", DATE_SEGMENT_LABELS, () => props.labels);
+		const timeText = useLabels("timeSegments", TIME_SEGMENT_LABELS, () => props.labels);
+		const panelText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS, () => props.labels);
+		const cellText = useLabels("rangeCell", RANGE_CELL_LABELS, () => props.labels);
+		const text = useLabels("dateTimeRange", DATE_TIME_RANGE_LABELS, () => props.labels);
+		function segmentLabel(part) {
+			if (isDateSegmentPart(part)) return dateText.value[part];
+			return isTimeSegmentPart(part) ? timeText.value[part] : void 0;
+		}
+		function segmentValueText(part, value, monthValue) {
+			const empty = isTimeSegmentPart(part) ? timeText.value.empty : dateText.value.empty;
+			const emptyResult = emptySegmentValueText(part, value, empty);
+			if (emptyResult["aria-valuetext"]) return emptyResult;
+			if (part === "month" && monthValue !== void 0) return { "aria-valuetext": dateText.value.filledMonth({
+				value: monthValue,
+				locale: props.locale
+			}) };
+			if (part === "dayPeriod") return { "aria-valuetext": timeText.value.filledDayPeriod({ dayPeriod: value }) };
+			return {};
+		}
+		const { attrs, rest: fieldAttrs } = useSplitAttrs();
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return $58246871e4652552$export$588937bcd60ade55(value);
+			} catch {
+				return;
+			}
+		}
+		function pad(value) {
+			return String(value).padStart(2, "0");
+		}
+		function toIso(date) {
+			const instant = $d07e34cce18680fd$export$b21e0b124e224484(date);
+			const stamp = `${$d07e34cce18680fd$export$93522d1a439f3617(instant).toString()}T${pad(instant.hour)}:${pad(instant.minute)}`;
+			return props.granularity === "second" ? `${stamp}:${pad(instant.second)}` : stamp;
+		}
+		function startOfDay(date) {
+			return date?.set({
+				hour: 0,
+				minute: 0,
+				second: 0,
+				millisecond: 0
+			});
+		}
+		function endOfDay(date) {
+			return date?.set({
+				hour: 23,
+				minute: 59,
+				second: 59,
+				millisecond: 999
+			});
+		}
+		const rootValue = computed(() => optional({
+			modelValue: props.modelValue ? {
+				start: fromIso(props.modelValue.start),
+				end: fromIso(props.modelValue.end)
+			} : void 0,
+			minValue: startOfDay(fromIso(props.min)),
+			maxValue: endOfDay(fromIso(props.max)),
+			hourCycle: props.hourCycle
+		}));
+		const outOfRange = computed(() => {
+			const lower = fromIso(props.min);
+			const upper = fromIso(props.max);
+			if (!lower && !upper) return false;
+			return SEGMENT_TYPES.some((type) => {
+				const value = fromIso(props.modelValue?.[type]);
+				if (!value) return false;
+				return !!lower && value.compare(lower) < 0 || !!upper && value.compare(upper) > 0;
+			});
+		});
+		const backwards = computed(() => {
+			const start = fromIso(props.modelValue?.start);
+			const end = fromIso(props.modelValue?.end);
+			return !!start && !!end && end.compare(start) < 0;
+		});
+		/**
+		* The segments are `<div role="spinbutton" tabindex="0">`, and
+		* `<fieldset disabled>` reaches only `<input>`, `<button>`, `<select>` and
+		* `<textarea>` — so the trigger button inside a disabled group went inert while
+		* the segments beside it still typed. Measured on this branch: an empty `mm`
+		* segment became `8` on an arrow key. Exactly the defect DatePicker carries,
+		* and fixed exactly the way DatePicker fixes it.
+		*
+		* Read off the DOM rather than taken from the Field context, which publishes no
+		* `disabled` on purpose — see `../../lib/ancestor-disabled.ts`.
+		*/
+		const anchor = useTemplateRef("anchor");
+		const groupDisabled = useAncestorDisabled(() => anchor.value?.$el);
+		const field = useFieldControl(() => ({
+			id: attrs.id,
+			describedBy: attrs["aria-describedby"],
+			ariaLabelledby: attrs["aria-labelledby"],
+			name: props.name,
+			disabled: groupDisabled.value ? true : props.disabled,
+			readonly: props.readonly,
+			invalid: props.invalid,
+			required: props.required
+		}));
+		const groupLabelledBy = computed(() => attrs["aria-label"] || attrs["aria-labelledby"] ? void 0 : field.labelledBy);
+		const errored = computed(() => field.invalid || outOfRange.value || backwards.value);
+		const open = ref(false);
+		/**
+		* The time each half last carried.
+		*
+		* Every calendar cell carries the placeholder's time, and the placeholder
+		* follows the *start*. That is the whole round trip in DateTimePicker and it is
+		* only half of one here: picking the end's day out of the calendar would give
+		* the end the start's time. Worse, Reka's two-click protocol drops the end
+		* outright on the click that begins a new range, so by the second click the
+		* end's own time is nowhere in the model to be read back.
+		*
+		* So it is remembered here, and deliberately not as a computed: a computed over
+		* `modelValue` is exactly the thing that has already gone. A half is forgotten
+		* only when it is cleared while the panel is **closed** — that is a reader
+		* emptying the field and meaning it, where a half missing mid-gesture is Reka's
+		* protocol and its time still has an owner.
+		*/
+		const heldTimes = {
+			start: void 0,
+			end: void 0
+		};
+		watch(() => [props.modelValue?.start, props.modelValue?.end], ([start, end]) => {
+			for (const [type, iso] of [["start", start], ["end", end]]) {
+				const value = fromIso(iso);
+				heldTimes[type] = value ? {
+					hour: value.hour,
+					minute: value.minute,
+					second: value.second
+				} : open.value ? heldTimes[type] : void 0;
+			}
+		}, { immediate: true });
+		function keepTime(type, picked, fromCalendar) {
+			if (!fromCalendar) return picked;
+			const current = fromIso(props.modelValue?.[type]);
+			if (current && $ad063034c8620db8$export$ea39ec197993aef0(current, picked)) return picked;
+			const held = heldTimes[type];
+			return held ? $d07e34cce18680fd$export$b21e0b124e224484(picked).set(held) : picked;
+		}
+		function onRangeChange(range) {
+			const fromCalendar = open.value;
+			if (range.start && range.end) open.value = false;
+			emit("update:modelValue", optional({
+				start: range.start ? toIso(keepTime("start", range.start, fromCalendar)) : void 0,
+				end: range.end ? toIso(keepTime("end", range.end, fromCalendar)) : void 0
+			}));
+		}
+		function isDateToday(date) {
+			return $ad063034c8620db8$export$629b0a497aa65267(date, $ad063034c8620db8$export$aa8b41735afcabd2());
+		}
+		const focusedSegment = ref();
+		function segmentKey(type, part) {
+			return `${type}:${part}`;
+		}
+		function segmentTabIndex(type, part, segments) {
+			if (field.disabled || part === "literal") return void 0;
+			const editable = SEGMENT_TYPES.flatMap((each) => segments[each].filter((segment) => segment.part !== "literal").map((segment) => segmentKey(each, segment.part)));
+			const active = focusedSegment.value !== void 0 && editable.includes(focusedSegment.value) ? focusedSegment.value : editable[0];
+			return segmentKey(type, part) === active ? 0 : -1;
+		}
+		const shape = computed(() => `${props.granularity}-${String(props.hourCycle)}`);
+		/**
+		* The same "13 PM" defect DateTimePicker and TimePicker document, in the same
+		* shared Reka segment code: the hour publishes `aria-valuenow` off the internal
+		* 24-hour value while declaring its range as 1–12. Rebuilt from what the
+		* segment is actually showing, and only under an explicit 12-hour cycle — left
+		* to the locale, Reka defers to the formatter and the pair already agrees. It
+		* takes one half's segments at a time, because the two hours are two segments
+		* showing two different numbers.
+		*/
+		function hourAnnouncement(segments) {
+			if (props.hourCycle !== 12) return void 0;
+			const shown = Number(segments.find((segment) => segment.part === "hour")?.value);
+			if (!Number.isInteger(shown)) return void 0;
+			const period = segments.find((segment) => segment.part === "dayPeriod")?.value;
+			return {
+				"aria-valuenow": shown,
+				"aria-valuetext": period ? `${shown} ${period}` : `${shown}`
+			};
+		}
+		const headingId = useId();
+		const monthFormat = computed(() => new Intl.DateTimeFormat(props.locale, {
+			month: "long",
+			year: "numeric"
+		}));
+		function format(formatter, date) {
+			return formatter.format(date.toDate($ad063034c8620db8$export$aa8b41735afcabd2()));
+		}
+		const MS_PER_MINUTE = 6e4;
+		/**
+		* How long the span is, as a signed count of minutes — a number handed over,
+		* never words. The `unit(count, name)` that used to append an `"s"` here was
+		* English's plural rule sitting in a control that renders in every language;
+		* it is deleted rather than extracted, and English's own copy of it lives in
+		* `DATE_TIME_RANGE_LABELS` where nothing else inherits it.
+		*
+		* DateRangePicker counts **days with both ends included**, because a booking of
+		* the 14th to the 20th is seven days. That rule is wrong here, and wrong in the
+		* direction that matters most: it reads a meeting from 09:00 to 10:00 as "1
+		* day". A span between two instants is the distance between them, so this
+		* measures that instead — and signs it, so an end before its start arrives as a
+		* negative rather than as a second boolean the label would have to be handed.
+		*
+		* Measured through UTC rather than the local zone: this value carries no
+		* timezone at all, so the honest answer is wall-clock. Converting through the
+		* reader's zone would add or drop an hour across a daylight-saving boundary for
+		* two instants that never claimed to be in it.
+		*/
+		function spanMinutes(start, end) {
+			const from = $d07e34cce18680fd$export$b21e0b124e224484(start).toDate("UTC").getTime();
+			const to = $d07e34cce18680fd$export$b21e0b124e224484(end).toDate("UTC").getTime();
+			return Math.round((to - from) / MS_PER_MINUTE);
+		}
+		function rangeStatus(range) {
+			return text.value.status({
+				locale: props.locale,
+				start: range.start,
+				end: range.end,
+				minutes: range.start && range.end ? spanMinutes(range.start, range.end) : void 0,
+				hour12: props.hourCycle === void 0 ? void 0 : props.hourCycle === 12,
+				seconds: props.granularity === "second"
+			});
+		}
+		/**
+		* A cell's part in the range, or nothing when it has none. DateRangePicker's,
+		* unchanged in substance: the first day, the last and the ones between are
+		* three states drawn as three shades of one colour, which survives neither a
+		* colour deficiency nor forced-colors mode, so the part is named in the cell's
+		* accessible name instead.
+		*
+		* The one-day case is the boundary that matters more here than there. A span
+		* from 09:00 to 17:00 on one day is an ordinary meeting rather than a
+		* degenerate range, and its single cell is genuinely both ends — announced once
+		* as that, not twice as two different things.
+		*/
+		function rangePart(day, range) {
+			const isStart = range.start !== void 0 && $ad063034c8620db8$export$ea39ec197993aef0(day, range.start);
+			const isEnd = range.end !== void 0 && $ad063034c8620db8$export$ea39ec197993aef0(day, range.end);
+			if (isStart && isEnd) return "both";
+			if (isStart) return "start";
+			if (isEnd) return "end";
+			if (range.start && range.end && day.compare(range.start) > 0 && day.compare(range.end) < 0) return "within";
+		}
+		function dayLabel(day, range) {
+			return cellText.value.cell({
+				locale: props.locale,
+				date: day,
+				part: rangePart(day, range)
+			});
+		}
+		const panel = ref(null);
+		function onOpenAutoFocus(event) {
+			const day = panel.value?.querySelector("[data-reka-calendar-cell-trigger][tabindex=\"0\"]");
+			if (!day) return;
+			event.preventDefault();
+			day.focus();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(DateRangePickerRoot), mergeProps({
+				open: open.value,
+				"onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event)
+			}, rootValue.value, {
+				locale: __props.locale,
+				disabled: unref(field).disabled,
+				readonly: unref(field).readonly,
+				"number-of-months": __props.months,
+				granularity: __props.granularity,
+				"prevent-deselect": "",
+				"onUpdate:modelValue": onRangeChange
+			}), {
+				default: withCtx(({ modelValue: range }) => [createVNode(unref(DateRangePickerAnchor), {
+					ref_key: "anchor",
+					ref: anchor,
+					"data-invalid": unref(field).invalid || void 0,
+					"data-out-of-range": outOfRange.value || void 0,
+					"data-backwards": backwards.value || void 0,
+					"data-readonly": unref(field).readonly || void 0,
+					class: normalizeClass(unref(cn)("block w-full", unref(attrs).class))
+				}, {
+					default: withCtx(() => [(openBlock(), createBlock(unref(DateRangePickerField), mergeProps({ key: shape.value }, {
+						...unref(fieldAttrs),
+						...unref(field).attrs
+					}, {
+						"aria-labelledby": groupLabelledBy.value,
+						"aria-invalid": errored.value || void 0,
+						class: unref(cn)("flex h-9 w-full items-center rounded-md border border-input bg-background px-3 text-sm text-foreground", "transition-[color,background-color,border-color,box-shadow] duration-fast ease-out", "focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ring", !errored.value && "focus-within:shadow-halo", unref(field).readonly && "bg-subtle", unref(field).disabled && "cursor-not-allowed border-border bg-muted text-muted-foreground", errored.value && "border-destructive focus-within:outline-destructive")
+					}), {
+						default: withCtx(({ segments }) => [(openBlock(), createElementBlock(Fragment, null, renderList(SEGMENT_TYPES, (type, typeIndex) => {
+							return openBlock(), createElementBlock(Fragment, { key: type }, [typeIndex > 0 ? (openBlock(), createElementBlock("span", _hoisted_1, "–")) : createCommentVNode("", true), createElementVNode("div", {
+								role: "group",
+								"aria-label": type === "start" ? unref(text).startDate : unref(text).endDate,
+								class: "flex items-center"
+							}, [(openBlock(true), createElementBlock(Fragment, null, renderList(segments[type], (item, index) => {
+								return openBlock(), createBlock(unref(DateRangePickerInput), mergeProps({
+									key: index,
+									part: item.part,
+									type,
+									tabindex: segmentTabIndex(type, item.part, segments),
+									"aria-label": segmentLabel(item.part)
+								}, { ref_for: true }, {
+									...segmentValueText(item.part, item.value, (type === "start" ? range.start : range.end)?.month),
+									...item.part === "hour" ? hourAnnouncement(segments[type]) : void 0
+								}, {
+									class: unref(cn)("tabular rounded-sm px-0.5 outline-none", "transition-colors duration-instant ease-out", "focus:bg-primary-muted focus:text-primary", "data-[placeholder]:text-muted-foreground", item.part === "literal" && "text-muted-foreground"),
+									onFocusin: ($event) => focusedSegment.value = segmentKey(type, item.part)
+								}), {
+									default: withCtx(() => [createTextVNode(toDisplayString(item.value), 1)]),
+									_: 2
+								}, 1040, [
+									"part",
+									"type",
+									"tabindex",
+									"aria-label",
+									"class",
+									"onFocusin"
+								]);
+							}), 128))], 8, _hoisted_2)], 64);
+						}), 64)), !unref(field).readonly ? (openBlock(), createBlock(unref(DateRangePickerTrigger), {
+							key: 0,
+							"aria-label": unref(panelText).openCalendar,
+							class: "ml-auto inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed"
+						}, {
+							default: withCtx(() => [createVNode(unref(CalendarRange), { class: "h-4 w-4" })]),
+							_: 1
+						}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+						_: 2
+					}, 1040, [
+						"aria-labelledby",
+						"aria-invalid",
+						"class"
+					]))]),
+					_: 2
+				}, 1032, [
+					"data-invalid",
+					"data-out-of-range",
+					"data-backwards",
+					"data-readonly",
+					"class"
+				]), createVNode(unref(DateRangePickerContent), {
+					align: "start",
+					"side-offset": 6,
+					class: normalizeClass(unref(cn)("z-50 rounded-md border border-border bg-popover p-3 text-popover-foreground shadow-md outline-none", "data-[state=open]:animate-fade-rise")),
+					onOpenAutoFocus
+				}, {
+					default: withCtx(() => [createElementVNode("div", {
+						ref_key: "panel",
+						ref: panel,
+						class: "flex flex-col gap-3"
+					}, [createVNode(unref(DateRangePickerCalendar), { "calendar-label": unref(panelText).calendar }, {
+						default: withCtx(({ grid, weekDays }) => [
+							createVNode(unref(DateRangePickerHeader), { class: "flex items-center justify-between gap-2" }, {
+								default: withCtx(() => [
+									createVNode(unref(DateRangePickerPrev), {
+										"aria-label": unref(panelText).previousMonth,
+										class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+									}, {
+										default: withCtx(() => [createVNode(unref(ChevronLeft), { class: "h-4 w-4" })]),
+										_: 1
+									}, 8, ["aria-label"]),
+									createVNode(unref(DateRangePickerHeading), {
+										id: unref(headingId),
+										"aria-live": "polite",
+										class: "text-sm font-medium text-foreground"
+									}, null, 8, ["id"]),
+									createVNode(unref(DateRangePickerNext), {
+										"aria-label": unref(panelText).nextMonth,
+										class: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-out hover:bg-subtle hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+									}, {
+										default: withCtx(() => [createVNode(unref(ChevronRight), { class: "h-4 w-4" })]),
+										_: 1
+									}, 8, ["aria-label"])
+								]),
+								_: 1
+							}),
+							createElementVNode("p", _hoisted_3, toDisplayString(rangeStatus(range)), 1),
+							createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(grid, (month) => {
+								return openBlock(), createBlock(unref(DateRangePickerGrid), {
+									key: month.value.toString(),
+									role: "grid",
+									"aria-label": format(monthFormat.value, month.value),
+									class: "border-collapse select-none"
+								}, {
+									default: withCtx(() => [createVNode(unref(DateRangePickerGridHead), null, {
+										default: withCtx(() => [createVNode(unref(DateRangePickerGridRow), null, {
+											default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(weekDays, (day, index) => {
+												return openBlock(), createBlock(unref(DateRangePickerHeadCell), {
+													key: index,
+													class: "w-9 text-xs font-normal text-muted-foreground"
+												}, {
+													default: withCtx(() => [createTextVNode(toDisplayString(day), 1)]),
+													_: 2
+												}, 1024);
+											}), 128))]),
+											_: 2
+										}, 1024)]),
+										_: 2
+									}, 1024), createVNode(unref(DateRangePickerGridBody), null, {
+										default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(month.rows, (week, weekIndex) => {
+											return openBlock(), createBlock(unref(DateRangePickerGridRow), { key: weekIndex }, {
+												default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(week, (day) => {
+													return openBlock(), createBlock(unref(DateRangePickerCell), {
+														key: day.toString(),
+														date: day,
+														class: "p-0 text-center"
+													}, {
+														default: withCtx(() => [createVNode(unref(DateRangePickerCellTrigger), {
+															day,
+															month: month.value,
+															"aria-label": dayLabel(day, range),
+															"aria-current": isDateToday(day) ? "date" : void 0,
+															class: normalizeClass(unref(cn)("group relative inline-flex h-9 w-9 items-center justify-center rounded-sm text-sm text-foreground", "transition-colors duration-fast ease-out hover:bg-subtle", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring focus-visible:shadow-halo", "data-[outside-view]:text-muted-foreground", "data-[disabled]:pointer-events-none data-[disabled]:line-through", "[&[data-disabled]:not([data-selected])]:text-muted-foreground", "data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground", "data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:bg-primary-muted", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:text-primary", "[&[data-highlighted]:not([data-selected])]:bg-subtle", "[&[data-selected]:not([data-selection-start]):not([data-selection-end])]:rounded-none", "[&[data-highlighted]:not([data-highlighted-start]):not([data-highlighted-end])]:rounded-none"))
+														}, {
+															default: withCtx(({ dayValue, today }) => [createTextVNode(toDisplayString(dayValue) + " ", 1), today ? (openBlock(), createElementBlock("span", _hoisted_5)) : createCommentVNode("", true)]),
+															_: 1
+														}, 8, [
+															"day",
+															"month",
+															"aria-label",
+															"aria-current",
+															"class"
+														])]),
+														_: 2
+													}, 1032, ["date"]);
+												}), 128))]),
+												_: 2
+											}, 1024);
+										}), 128))]),
+										_: 2
+									}, 1024)]),
+									_: 2
+								}, 1032, ["aria-label"]);
+							}), 128))])
+						]),
+						_: 2
+					}, 1032, ["calendar-label"])], 512)]),
+					_: 2
+				}, 1032, ["class"])]),
+				_: 1
+			}, 16, [
+				"open",
+				"locale",
+				"disabled",
+				"readonly",
+				"number-of-months",
+				"granularity"
+			]);
+		};
+	}
+});
+//#endregion
+export { DATE_TIME_RANGE_LABELS, DateTimeRangePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js.map