@ecoma-io/loom 0.1.1 → 0.3.0

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.vue.d.ts

@@ -0,0 +1,130 @@
+import { type LabelOverrides } from "@ecoma-io/loom-labels";
+import type { DateRangeLabels } from "@ecoma-io/loom-labels";
+import type { CalendarPanelLabels, DateSegmentLabels, RangeCellLabels } from "@ecoma-io/loom-labels";
+/**
+ * A span of days as the outside world holds it: two plain ISO `YYYY-MM-DD`
+ * strings, both optional.
+ *
+ * An object rather than a `[start, end]` tuple, and both halves optional
+ * rather than one string with a separator in it, because **a half-made range
+ * has to be representable**. Between the first click and the second there is a
+ * range with a start and no end, and that state lives on screen for as long as
+ * it takes a reader to decide — a tuple has to fill the second slot with
+ * something, and a single string has to invent a spelling for "not yet". Both
+ * end up lying about a state the control is genuinely in. `{ start }` says it.
+ *
+ * It reads at a call site, too: `range.start` needs no comment, `range[0]`
+ * needs one.
+ */
+export interface DateRange {
+    /** The first day of the span, ISO `YYYY-MM-DD`. Absent while nothing has been chosen. */
+    start?: string | undefined;
+    /** The last day of the span, ISO `YYYY-MM-DD`, and part of it. Absent while only the start has been chosen. */
+    end?: string | undefined;
+}
+/**
+ * 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.
+ *
+ * The `day`/`days` choice below is English's plural rule sitting in English's
+ * own bag, which is the only place a plural rule belongs. It is not extracted,
+ * shared or applied to anything a host supplies: `status` hands over the number
+ * and receives a finished sentence, so a language with one form or with six
+ * selects its own.
+ */
+export declare const DATE_RANGE_LABELS: DateRangeLabels;
+/**
+ * Everything this control can be asked to say: the three shared slices, plus
+ * its own. Annotate a bag with
+ * `LabelOverrides<DateRangePickerLabels>` and never with this, which is total.
+ */
+export type DateRangePickerLabels = DateSegmentLabels & CalendarPanelLabels & RangeCellLabels & DateRangeLabels;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    /**
+     * The chosen span, as `{ start, end }` ISO `YYYY-MM-DD` strings. Either
+     * half may be absent: `{}` is nothing chosen, `{ start }` is a range
+     * half made. The explicit `| undefined` is what lets `v-model` bind a ref
+     * that clears.
+     */
+    modelValue?: DateRange | undefined;
+    /** The earliest choosable day, ISO `YYYY-MM-DD`. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable day, ISO `YYYY-MM-DD`. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the order of the field's segments, the month and weekday names, and which day a week starts on. */
+    locale?: string;
+    /** How many months the calendar shows at once. Two is the default because a range is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */
+    months?: 1 | 2;
+    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `DateRangePickerLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: six of the thirteen names replace English literals Reka UI
+     * writes of its own accord, and a language is set once with
+     * `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<DateRangePickerLabels>;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * The chosen span, as `{ start, end }` ISO `YYYY-MM-DD` strings. Either
+     * half may be absent: `{}` is nothing chosen, `{ start }` is a range
+     * half made. The explicit `| undefined` is what lets `v-model` bind a ref
+     * that clears.
+     */
+    modelValue?: DateRange | undefined;
+    /** The earliest choosable day, ISO `YYYY-MM-DD`. Days before it are announced disabled and skipped by the keyboard. */
+    min?: string;
+    /** The latest choosable day, ISO `YYYY-MM-DD`. Days after it are announced disabled and skipped by the keyboard. */
+    max?: string;
+    /** BCP 47 tag driving the order of the field's segments, the month and weekday names, and which day a week starts on. */
+    locale?: string;
+    /** How many months the calendar shows at once. Two is the default because a range is usually read across a month boundary; one is for a host that knows it is rendering into a narrow shell. */
+    months?: 1 | 2;
+    /** Unavailable: dims the control, refuses the calendar, and takes the field out of the tab order. Unset defers to a wrapping Field. */
+    disabled?: boolean | undefined;
+    /** Shows the span without allowing an edit: the field stays a Tab stop and stays submitted, and the calendar button is dropped because nothing in the calendar could be chosen. Unset defers to a wrapping Field. */
+    readonly?: boolean | undefined;
+    /** Error state: paints the destructive border and ring, and sets `aria-invalid`. Unset defers to a wrapping Field's `error`. */
+    invalid?: boolean | undefined;
+    /** Marks the field mandatory to assistive tech (`aria-required` on the group holding both halves). Unset defers to a wrapping Field. */
+    required?: boolean | undefined;
+    /** The field name for a native form post or `FormData`. Reka submits the whole span through one hidden input, as `start - end`. Unset defers to a wrapping Field. */
+    name?: string;
+    /**
+     * Names for everything this control says out loud, as any subset of
+     * `DateRangePickerLabels` — the rest stay as the host's `provideLoomLabels`
+     * vocabulary left them, and then as Loom's English.
+     *
+     * This is the per-instance correction, not the place to localise an
+     * application: six of the thirteen names replace English literals Reka UI
+     * writes of its own accord, and a language is set once with
+     * `provideLoomLabels`.
+     */
+    labels?: LabelOverrides<DateRangePickerLabels>;
+}> & Readonly<{
+    "onUpdate:modelValue"?: (value: DateRange) => any;
+}>, {
+    locale: string;
+    disabled: boolean | undefined;
+    invalid: boolean | undefined;
+    readonly: boolean | undefined;
+    required: boolean | undefined;
+    months: 1 | 2;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=DateRangePicker.vue.d.ts.map

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.vue.d.ts","sourceRoot":"","sources":["../../../../../packages/primitives/date-range-picker/src/DateRangePicker.vue"],"names":[],"mappings":"AAyzBA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAWvE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EAChB,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,SAAS;IACxB,yFAAyF;IACzF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,+GAA+G;IAC/G,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC1B;AAaD;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB,EAAE,eAW/B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,GACnD,mBAAmB,GACnB,eAAe,GACf,eAAe,CAAC;wBACG,OAAO,YAAY;AAAxC,wBAAyC;AACzC,QAAA,MAAM,YAAY;IAkDd;;;;;OAKG;iBACU,SAAS,GAAG,SAAS;IAClC,uHAAuH;UACjH,MAAM;IACZ,oHAAoH;UAC9G,MAAM;IACZ,yHAAyH;aAChH,MAAM;IACf,gMAAgM;aACvL,CAAC,GAAG,CAAC;IACd,uIAAuI;eAC5H,OAAO,GAAG,SAAS;IAC9B,qNAAqN;eAC1M,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,wIAAwI;eAC7H,OAAO,GAAG,SAAS;IAC9B,qKAAqK;WAC9J,MAAM;IACb;;;;;;;;;OASG;aACM,cAAc,CAAC,qBAAqB,CAAC;;;;IAnC9C;;;;;OAKG;iBACU,SAAS,GAAG,SAAS;IAClC,uHAAuH;UACjH,MAAM;IACZ,oHAAoH;UAC9G,MAAM;IACZ,yHAAyH;aAChH,MAAM;IACf,gMAAgM;aACvL,CAAC,GAAG,CAAC;IACd,uIAAuI;eAC5H,OAAO,GAAG,SAAS;IAC9B,qNAAqN;eAC1M,OAAO,GAAG,SAAS;IAC9B,gIAAgI;cACtH,OAAO,GAAG,SAAS;IAC7B,wIAAwI;eAC7H,OAAO,GAAG,SAAS;IAC9B,qKAAqK;WAC9J,MAAM;IACb;;;;;;;;;OASG;aACM,cAAc,CAAC,qBAAqB,CAAC;;;;YAvBrC,MAAM;cAIJ,OAAO,GAAG,SAAS;aAIpB,OAAO,GAAG,SAAS;cAFlB,OAAO,GAAG,SAAS;cAInB,OAAO,GAAG,SAAS;YARrB,CAAC,GAAG,CAAC;6EA2oCd,CAAC"}

package/dist/packages/primitives/date-range-picker/src/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,416 @@
+import { cn } from "../../../core/src/cn.js";
+import { optional } from "../../../core/src/props.js";
+import { useSplitAttrs } from "../../../core/src/attrs.js";
+import "../../../core/src/index.js";
+import { useLabels } from "../../../labels/src/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 } from "../../../../node_modules/.pnpm/@internationalized_date@3.12.3/node_modules/@internationalized/date/dist/private/conversion.js";
+import { parseDate as $58246871e4652552$export$6b862160d295c8e } 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, emptySegmentValueText, isDateSegmentPart } from "../../../labels/src/date-labels.js";
+import { useFieldControl } from "../../../labels/src/field-context.js";
+import { useAncestorDisabled } from "../../../labels/src/ancestor-disabled.js";
+import "../../../labels/src/index.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, renderList, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
+import { CalendarRange, ChevronLeft, ChevronRight } from "@lucide/vue";
+import { DateRangePickerAnchor, DateRangePickerCalendar, DateRangePickerCell, DateRangePickerCellTrigger, DateRangePickerContent, DateRangePickerField, DateRangePickerGrid, DateRangePickerGridBody, DateRangePickerGridHead, DateRangePickerGridRow, DateRangePickerHeadCell, DateRangePickerHeader, DateRangePickerHeading, DateRangePickerInput, DateRangePickerNext, DateRangePickerPrev, DateRangePickerRoot, DateRangePickerTrigger } from "reka-ui";
+//#region packages/primitives/date-range-picker/src/DateRangePicker.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"
+};
+/**
+
+/** A day, month and year in the control's locale — the status line's own shape, without the weekday a cell's name carries. */
+function formatDay(locale, date) {
+	return new Intl.DateTimeFormat(locale, {
+		day: "numeric",
+		month: "long",
+		year: "numeric"
+	}).format(date.toDate($ad063034c8620db8$export$aa8b41735afcabd2()));
+}
+/**
+* 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.
+*
+* The `day`/`days` choice below is English's plural rule sitting in English's
+* own bag, which is the only place a plural rule belongs. It is not extracted,
+* shared or applied to anything a host supplies: `status` hands over the number
+* and receives a finished sentence, so a language with one form or with six
+* selects its own.
+*/
+var DATE_RANGE_LABELS = {
+	startDate: "Start date",
+	endDate: "End date",
+	status: ({ locale, start, end, days }) => {
+		const anchor = start ?? end;
+		if (!anchor) return "No dates chosen. Choose the first day of the range.";
+		if (!start || !end || days === void 0) return `${formatDay(locale, anchor)} chosen. Choose the last day of the range.`;
+		return `${formatDay(locale, start)} to ${formatDay(locale, end)}, ${String(days)} ${days === 1 ? "day" : "days"}.`;
+	}
+};
+var DateRangePicker_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "DateRangePicker",
+	props: {
+		modelValue: {},
+		min: {},
+		max: {},
+		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 panelText = useLabels("calendarPanel", CALENDAR_PANEL_LABELS, () => props.labels);
+		const cellText = useLabels("rangeCell", RANGE_CELL_LABELS, () => props.labels);
+		const text = useLabels("dateRange", DATE_RANGE_LABELS, () => props.labels);
+		function segmentLabel(part) {
+			return isDateSegmentPart(part) ? dateText.value[part] : void 0;
+		}
+		function segmentValueText(part, value, monthValue) {
+			const empty = emptySegmentValueText(part, value, dateText.value.empty);
+			if (empty["aria-valuetext"]) return empty;
+			if (part === "month" && monthValue !== void 0) return { "aria-valuetext": dateText.value.filledMonth({
+				value: monthValue,
+				locale: props.locale
+			}) };
+			return {};
+		}
+		const { attrs, rest: fieldAttrs } = useSplitAttrs();
+		/**
+		* 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);
+		function fromIso(value) {
+			if (!value) return void 0;
+			try {
+				return $58246871e4652552$export$6b862160d295c8e(value);
+			} catch {
+				return;
+			}
+		}
+		function toIso(date) {
+			return $d07e34cce18680fd$export$93522d1a439f3617(date).toString();
+		}
+		const rootValue = computed(() => optional({
+			modelValue: props.modelValue ? {
+				start: fromIso(props.modelValue.start),
+				end: fromIso(props.modelValue.end)
+			} : void 0,
+			minValue: fromIso(props.min),
+			maxValue: fromIso(props.max)
+		}));
+		const open = ref(false);
+		function onRangeChange(range) {
+			if (range.start && range.end) open.value = false;
+			emit("update:modelValue", optional({
+				start: range.start ? toIso(range.start) : void 0,
+				end: range.end ? toIso(range.end) : 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 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_DAY = 864e5;
+		/** Days in the span counting both ends, which is how a reader counts a booking. */
+		function spanLength(start, end) {
+			const from = $d07e34cce18680fd$export$93522d1a439f3617(start).toDate("UTC").getTime();
+			const to = $d07e34cce18680fd$export$93522d1a439f3617(end).toDate("UTC").getTime();
+			return Math.round((to - from) / MS_PER_DAY) + 1;
+		}
+		function rangeStatus(range) {
+			return text.value.status({
+				locale: props.locale,
+				start: range.start,
+				end: range.end,
+				days: range.start && range.end ? spanLength(range.start, range.end) : void 0
+			});
+		}
+		/**
+		* A cell's part in the range, or nothing when it has none.
+		*
+		* The first, the last and every day between are three different states, and
+		* the fills that carry them are three shades of one colour — which is a
+		* distinction that survives neither a colour deficiency nor forced-colors
+		* mode. Reka's own `aria-pressed` separates "in the range" from "outside it"
+		* and stops there, so the three read identically to a screen reader. Naming
+		* the part in the cell's accessible name is what tells them apart, and it is
+		* also what makes the boundary case — a one-day range, where the first day is
+		* also the last — say so rather than being announced twice as two 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: "day",
+				"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-readonly": unref(field).readonly || void 0,
+					class: normalizeClass(unref(cn)("block w-full", unref(attrs).class))
+				}, {
+					default: withCtx(() => [createVNode(unref(DateRangePickerField), mergeProps({
+						...unref(fieldAttrs),
+						...unref(field).attrs
+					}, {
+						"aria-labelledby": groupLabelledBy.value,
+						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", !unref(field).invalid && "focus-within:shadow-halo", unref(field).readonly && "bg-subtle", unref(field).disabled && "cursor-not-allowed border-border bg-muted text-muted-foreground", unref(field).invalid && "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), {
+									class: unref(cn)("tabular rounded-sm px-0.5 outline-none", "transition-colors duration-instant ease-out", "focus:bg-primary-muted focus:text-primary-text", "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", "class"])]),
+					_: 2
+				}, 1032, [
+					"data-invalid",
+					"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-text", "[&[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"
+			]);
+		};
+	}
+});
+//#endregion
+export { DATE_RANGE_LABELS, DateRangePicker_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=DateRangePicker.vue_vue_type_script_setup_true_lang.js.map