iryx-ui 0.25.0 → 0.26.0

package/dist/components/CommandPalette.vue.d.ts

@@ -15,6 +15,16 @@ export interface CommandPaletteProps {
     hotkey?: string | null;
     /** Close once a command is chosen. */
     closeOnSelect?: boolean;
+    /**
+     * Remember recently chosen commands under this `localStorage` key and list
+     * them first while the search is empty. Unset (the default) remembers
+     * nothing. Use a different key per palette.
+     */
+    recentKey?: string;
+    /** How many recent commands to keep. */
+    recentLimit?: number;
+    /** Heading over the recent commands. Override for non-English apps. */
+    recentLabel?: string;
     /** Hint row along the bottom. Set `false` to drop it. */
     footer?: boolean;
     /** Skip built-in classes; you take over styling entirely. */
@@ -53,6 +63,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     emptyText: string;
     hotkey: string | null;
     closeOnSelect: boolean;
+    recentLimit: number;
+    recentLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/CommandPalette.vue_vue_type_script_setup_true_lang.js

@@ -1,15 +1,15 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { commandHaystack as n, matchesHotkey as r, toCommandGroups as i } from "../composables/command-palette.js";
-import { commandPaletteTheme as a } from "../theme/command-palette.js";
-import o from "./Kbd.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, onBeforeUnmount as v, onMounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, unref as T, useModel as E, watch as D, withCtx as O } from "vue";
-import { Search01Icon as k } from "@hugeicons/core-free-icons";
-import { DialogContent as ee, DialogOverlay as te, DialogPortal as ne, DialogRoot as A, DialogTitle as j, ListboxContent as M, ListboxFilter as N, ListboxGroup as P, ListboxGroupLabel as F, ListboxItem as I, ListboxRoot as L, VisuallyHidden as R, useFilter as z } from "reka-ui";
+import { commandHaystack as n, commandId as r, matchesHotkey as i, pushRecent as a, toCommandGroups as o } from "../composables/command-palette.js";
+import { commandPaletteTheme as s } from "../theme/command-palette.js";
+import c from "./Kbd.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, normalizeClass as y, onBeforeUnmount as b, onMounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
+import { Search01Icon as j } from "@hugeicons/core-free-icons";
+import { DialogContent as M, DialogOverlay as ee, DialogPortal as te, DialogRoot as ne, DialogTitle as re, ListboxContent as ie, ListboxFilter as ae, ListboxGroup as oe, ListboxGroupLabel as se, ListboxItem as N, ListboxRoot as P, VisuallyHidden as F, useFilter as I } from "reka-ui";
 //#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
-var B = /*@__PURE__*/ h({
+var L = /*@__PURE__*/ _({
 	__name: "CommandPalette",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ v({
 		items: {},
 		placeholder: { default: "Search commands…" },
 		emptyText: { default: "No matching commands." },
@@ -19,6 +19,9 @@ var B = /*@__PURE__*/ h({
 			type: Boolean,
 			default: !0
 		},
+		recentKey: {},
+		recentLimit: { default: 5 },
+		recentLabel: { default: "Recent" },
 		footer: {
 			type: Boolean,
 			default: !0
@@ -41,109 +44,143 @@ var B = /*@__PURE__*/ h({
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ g(["select"], ["update:open"]),
-	setup(h, { emit: g }) {
-		let B = h, V = g, H = E(h, "open"), U = x("");
-		D(H, (e) => {
-			e || (U.value = "");
+	emits: /*@__PURE__*/ v(["select"], ["update:open"]),
+	setup(_, { emit: v }) {
+		let L = _, R = v, z = O(_, "open"), B = C("");
+		k(z, (e) => {
+			e || (B.value = "");
 		});
-		let { contains: W } = z({ sensitivity: "base" }), G = c(() => i(B.items)), K = c(() => {
-			let e = U.value.trim();
-			return G.value.map((t) => ({
+		let { contains: V } = I({ sensitivity: "base" }), H = u(() => o(L.items)), U = C([]);
+		function W() {
+			if (L.recentKey) try {
+				let e = JSON.parse(window.localStorage.getItem(L.recentKey) ?? "[]");
+				U.value = Array.isArray(e) ? e.filter((e) => typeof e == "string") : [];
+			} catch {
+				U.value = [];
+			}
+		}
+		function G(e, t) {
+			if (L.recentKey) {
+				U.value = a(U.value, r(e, t), L.recentLimit);
+				try {
+					window.localStorage.setItem(L.recentKey, JSON.stringify(U.value));
+				} catch {}
+			}
+		}
+		x(W), k(() => L.recentKey, W);
+		let K = u(() => {
+			if (!L.recentKey || !U.value.length) return;
+			let e = /* @__PURE__ */ new Map();
+			for (let t of H.value) for (let n of t.items) e.set(r(n, t.label), {
+				item: n,
+				group: t.label
+			});
+			let t = U.value.slice(0, L.recentLimit).map((t) => e.get(t)).filter((e) => !!e && !e.item.disabled);
+			return t.length ? {
+				label: L.recentLabel,
+				items: t.map((e) => e.item),
+				sources: t.map((e) => e.group)
+			} : void 0;
+		}), q = u(() => {
+			let e = B.value.trim(), t = H.value.map((t) => ({
 				...t,
-				items: e ? t.items.filter((r) => W(n(r, t.label), e)) : t.items
+				items: e ? t.items.filter((r) => V(n(r, t.label), e)) : t.items
+			})).map((e) => ({
+				...e,
+				sources: e.items.map(() => e.label)
 			})).filter((e) => e.items.length > 0);
-		}), q = c(() => K.value.length === 0);
+			return !e && K.value ? [K.value, ...t] : t;
+		}), ce = u(() => q.value.length === 0);
 		function J(e, t) {
 			return `${e}:${t}`;
 		}
-		function Y(e) {
-			e.disabled || (V("select", e), e.onSelect?.(), B.closeOnSelect && (H.value = !1));
+		function le(e, t) {
+			e.disabled || (G(e, t), R("select", e), e.onSelect?.(), L.closeOnSelect && (z.value = !1));
 		}
-		function X(e) {
-			B.hotkey && r(e, B.hotkey) && (e.preventDefault(), H.value = !H.value);
+		function Y(e) {
+			L.hotkey && i(e, L.hotkey) && (e.preventDefault(), z.value = !z.value);
 		}
-		y(() => window.addEventListener("keydown", X)), v(() => window.removeEventListener("keydown", X));
-		let re = e(), Z = c(() => B.unstyled ?? re.unstyled), Q = c(() => a());
+		x(() => window.addEventListener("keydown", Y)), b(() => window.removeEventListener("keydown", Y));
+		let X = e(), Z = u(() => L.unstyled ?? X.unstyled), Q = u(() => s());
 		function $(e, t) {
-			let n = B.ui?.[e];
+			let n = L.ui?.[e];
 			return Z.value ? [n, t].filter(Boolean).join(" ") : Q.value[e]({ class: [n, t] });
 		}
-		function ie(e) {
+		function ue(e) {
 			return e.split(" ").filter(Boolean);
 		}
-		return (e, n) => (b(), l(T(A), {
-			open: H.value,
-			"onUpdate:open": n[1] ||= (e) => H.value = e
+		return (e, n) => (S(), d(D(ne), {
+			open: z.value,
+			"onUpdate:open": n[1] ||= (e) => z.value = e
 		}, {
-			default: O(() => [m(T(ne), null, {
-				default: O(() => [m(T(te), { class: _($("overlay")) }, null, 8, ["class"]), m(T(ee), {
-					class: _(Z.value ? [B.ui?.content, B.class] : Q.value.content({ class: [B.ui?.content, B.class] })),
-					"aria-label": B.label,
+			default: A(() => [g(D(te), null, {
+				default: A(() => [g(D(ee), { class: y($("overlay")) }, null, 8, ["class"]), g(D(M), {
+					class: y(Z.value ? [L.ui?.content, L.class] : Q.value.content({ class: [L.ui?.content, L.class] })),
+					"aria-label": L.label,
 					"aria-describedby": void 0
 				}, {
-					default: O(() => [
-						m(T(R), null, {
-							default: O(() => [m(T(j), null, {
-								default: O(() => [p(w(B.label), 1)]),
+					default: A(() => [
+						g(D(F), null, {
+							default: A(() => [g(D(re), null, {
+								default: A(() => [h(E(L.label), 1)]),
 								_: 1
 							})]),
 							_: 1
 						}),
-						m(T(L), {
+						g(D(P), {
 							"highlight-on-hover": "",
-							class: _($("list"))
+							class: y($("list"))
 						}, {
-							default: O(() => [f("div", { class: _($("header")) }, [f("span", { class: _($("icon")) }, [m(t, { icon: T(k) }, null, 8, ["icon"])], 2), m(T(N), {
-								modelValue: U.value,
-								"onUpdate:modelValue": n[0] ||= (e) => U.value = e,
+							default: A(() => [m("div", { class: y($("header")) }, [m("span", { class: y($("icon")) }, [g(t, { icon: D(j) }, null, 8, ["icon"])], 2), g(D(ae), {
+								modelValue: B.value,
+								"onUpdate:modelValue": n[0] ||= (e) => B.value = e,
 								"auto-focus": "",
-								placeholder: B.placeholder,
-								class: _($("input"))
+								placeholder: L.placeholder,
+								class: y($("input"))
 							}, null, 8, [
 								"modelValue",
 								"placeholder",
 								"class"
-							])], 2), m(T(M), { class: _($("viewport")) }, {
-								default: O(() => [q.value ? (b(), d("p", {
+							])], 2), g(D(ie), { class: y($("viewport")) }, {
+								default: A(() => [ce.value ? (S(), p("p", {
 									key: 0,
-									class: _($("empty"))
-								}, [C(e.$slots, "empty", { query: U.value }, () => [p(w(B.emptyText), 1)])], 2)) : u("", !0), (b(!0), d(s, null, S(K.value, (n, r) => (b(), l(T(P), {
+									class: y($("empty"))
+								}, [T(e.$slots, "empty", { query: B.value }, () => [h(E(L.emptyText), 1)])], 2)) : f("", !0), (S(!0), p(l, null, w(q.value, (n, r) => (S(), d(D(oe), {
 									key: n.label || r,
-									class: _($("group"))
+									class: y($("group"))
 								}, {
-									default: O(() => [n.label ? (b(), l(T(F), {
+									default: A(() => [n.label ? (S(), d(D(se), {
 										key: 0,
-										class: _($("groupLabel"))
+										class: y($("groupLabel"))
 									}, {
-										default: O(() => [p(w(n.label), 1)]),
+										default: A(() => [h(E(n.label), 1)]),
 										_: 2
-									}, 1032, ["class"])) : u("", !0), (b(!0), d(s, null, S(n.items, (n, i) => (b(), l(T(I), {
-										key: J(r, i),
-										value: J(r, i),
-										disabled: n.disabled,
-										"aria-disabled": n.disabled || void 0,
-										as: n.href ? "a" : "div",
-										href: n.href,
-										class: _($("item")),
-										onSelect: (e) => Y(n)
+									}, 1032, ["class"])) : f("", !0), (S(!0), p(l, null, w(n.items, (i, a) => (S(), d(D(N), {
+										key: J(r, a),
+										value: J(r, a),
+										disabled: i.disabled,
+										"aria-disabled": i.disabled || void 0,
+										as: i.href ? "a" : "div",
+										href: i.href,
+										class: y($("item")),
+										onSelect: (e) => le(i, n.sources[a] ?? n.label)
 									}, {
-										default: O(() => [C(e.$slots, "item", { item: n }, () => [
-											n.icon ? (b(), d("span", {
+										default: A(() => [T(e.$slots, "item", { item: i }, () => [
+											i.icon ? (S(), p("span", {
 												key: 0,
-												class: _($("itemIcon"))
-											}, [m(t, { icon: n.icon }, null, 8, ["icon"])], 2)) : u("", !0),
-											f("span", { class: _($("itemLabel")) }, w(n.label), 3),
-											n.shortcut ? (b(), l(o, {
+												class: y($("itemIcon"))
+											}, [g(t, { icon: i.icon }, null, 8, ["icon"])], 2)) : f("", !0),
+											m("span", { class: y($("itemLabel")) }, E(i.label), 3),
+											i.shortcut ? (S(), d(c, {
 												key: 1,
-												keys: ie(n.shortcut),
-												class: _($("shortcut")),
-												ui: { key: B.ui?.key }
+												keys: ue(i.shortcut),
+												class: y($("shortcut")),
+												ui: { key: L.ui?.key }
 											}, null, 8, [
 												"keys",
 												"class",
 												"ui"
-											])) : u("", !0)
+											])) : f("", !0)
 										])]),
 										_: 2
 									}, 1032, [
@@ -161,23 +198,23 @@ var B = /*@__PURE__*/ h({
 							}, 8, ["class"])]),
 							_: 3
 						}, 8, ["class"]),
-						B.footer ? (b(), d("div", {
+						L.footer ? (S(), p("div", {
 							key: 0,
-							class: _($("footer"))
-						}, [C(e.$slots, "footer", {}, () => [
-							f("span", null, [m(o, {
+							class: y($("footer"))
+						}, [T(e.$slots, "footer", {}, () => [
+							m("span", null, [g(c, {
 								keys: ["up", "down"],
-								ui: { key: B.ui?.key }
-							}, null, 8, ["ui"]), n[2] ||= p(" to navigate", -1)]),
-							f("span", null, [m(o, {
+								ui: { key: L.ui?.key }
+							}, null, 8, ["ui"]), n[2] ||= h(" to navigate", -1)]),
+							m("span", null, [g(c, {
 								keys: "enter",
-								ui: { key: B.ui?.key }
-							}, null, 8, ["ui"]), n[3] ||= p(" to select", -1)]),
-							f("span", null, [m(o, {
+								ui: { key: L.ui?.key }
+							}, null, 8, ["ui"]), n[3] ||= h(" to select", -1)]),
+							m("span", null, [g(c, {
 								keys: "escape",
-								ui: { key: B.ui?.key }
-							}, null, 8, ["ui"]), n[4] ||= p(" to close", -1)])
-						])], 2)) : u("", !0)
+								ui: { key: L.ui?.key }
+							}, null, 8, ["ui"]), n[4] ||= h(" to close", -1)])
+						])], 2)) : f("", !0)
 					]),
 					_: 3
 				}, 8, ["class", "aria-label"])]),
@@ -188,4 +225,4 @@ var B = /*@__PURE__*/ h({
 	}
 });
 //#endregion
-export { B as default };
+export { L as default };

package/dist/components/DateRangePicker.vue.d.ts

@@ -1,4 +1,5 @@
 import type { ClassValue } from '../class-value';
+import type { DateRangePreset } from '../composables/date';
 /** Both ends are ISO `YYYY-MM-DD` strings, and either may be absent. */
 export interface DateRange {
     start: string | null;
@@ -21,8 +22,18 @@ export interface DateRangePickerProps {
     format?: Intl.DateTimeFormatOptions;
     /** 0 is Sunday. Defaults to the locale's own convention. */
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    /** Months shown side by side. Two makes picking a span across a boundary sane. */
+    /**
+     * Months shown side by side. Two makes picking a span across a boundary
+     * sane. Narrow screens always get one.
+     */
     months?: number;
+    /**
+     * Shortcuts beside the calendar — "Last 7 days", "This month". Picking one
+     * fills the range and closes. `commonDateRangePresets()` builds the usual set.
+     */
+    presets?: DateRangePreset[];
+    /** Accessible name for the preset list — override for non-English apps. */
+    presetsLabel?: string;
     /** Offer a "clear" action in the footer. */
     clearable?: boolean;
     /** Separator between the two dates on the trigger. */
@@ -36,7 +47,7 @@ export interface DateRangePickerProps {
     /** Applied to the trigger, which is the element carrying the field chrome. */
     class?: ClassValue;
     /** Override classes per element, e.g. `{ content: 'p-4' }`. */
-    ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
+    ui?: Partial<Record<'trigger' | 'placeholder' | 'content' | 'panel' | 'presets' | 'preset' | 'header' | 'heading' | 'nav' | 'months' | 'grid' | 'headCell' | 'cell' | 'cellTrigger' | 'footer' | 'action', string>>;
 }
 type __VLS_Props = DateRangePickerProps;
 type __VLS_ModelProps = {
@@ -56,6 +67,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     nextLabel: string;
     invalid: boolean;
     clearLabel: string;
+    presetsLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -2,18 +2,22 @@ import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
 import { formatIsoDate as n, toCalendarDate as r, toIsoDate as i } from "../composables/date.js";
 import { calendarTheme as ee } from "../theme/calendar.js";
-import { useFormField as te } from "../composables/form.js";
-import { datePickerTheme as a } from "../theme/date-picker.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as C, watch as w, withCtx as T } from "vue";
-import { ArrowLeft01Icon as E, ArrowRight01Icon as ne, Calendar03Icon as re } from "@hugeicons/core-free-icons";
-import { PopoverContent as D, PopoverPortal as O, PopoverRoot as k, PopoverTrigger as A, RangeCalendarCell as j, RangeCalendarCellTrigger as M, RangeCalendarGrid as N, RangeCalendarGridBody as P, RangeCalendarGridHead as F, RangeCalendarGridRow as I, RangeCalendarHeadCell as L, RangeCalendarHeader as R, RangeCalendarHeading as z, RangeCalendarNext as B, RangeCalendarPrev as V, RangeCalendarRoot as ie } from "reka-ui";
+import { useFormField as a } from "../composables/form.js";
+import { datePickerTheme as o } from "../theme/date-picker.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as te, createVNode as p, defineComponent as m, mergeModels as h, normalizeClass as g, onBeforeUnmount as ne, onMounted as re, openBlock as _, ref as v, renderList as y, shallowRef as b, toDisplayString as x, unref as S, useModel as ie, watch as C, withCtx as w } from "vue";
+import { ArrowLeft01Icon as ae, ArrowRight01Icon as oe, Calendar03Icon as se } from "@hugeicons/core-free-icons";
+import { PopoverContent as ce, PopoverPortal as le, PopoverRoot as ue, PopoverTrigger as de, RangeCalendarCell as T, RangeCalendarCellTrigger as E, RangeCalendarGrid as D, RangeCalendarGridBody as O, RangeCalendarGridHead as k, RangeCalendarGridRow as A, RangeCalendarHeadCell as j, RangeCalendarHeader as M, RangeCalendarHeading as N, RangeCalendarNext as P, RangeCalendarPrev as F, RangeCalendarRoot as I } from "reka-ui";
 //#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
-var H = [
+var L = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ m({
+], R = { key: 0 }, z = ["aria-label"], B = [
+	"disabled",
+	"aria-pressed",
+	"onClick"
+], V = /*@__PURE__*/ m({
 	__name: "DateRangePicker",
 	props: /*@__PURE__*/ h({
 		size: {},
@@ -30,6 +34,8 @@ var H = [
 		format: {},
 		weekStartsOn: {},
 		months: { default: 2 },
+		presets: {},
+		presetsLabel: { default: "Presets" },
 		clearable: { type: Boolean },
 		separator: { default: " – " },
 		clearLabel: { default: "Clear" },
@@ -55,127 +61,162 @@ var H = [
 	}),
 	emits: ["update:modelValue"],
 	setup(m) {
-		let h = m, W = C(m, "modelValue"), G = v(!1), K = te(), q = s(() => h.id ?? K?.id.value);
-		K && h.id && (K.id.value = h.id);
-		let J = s(() => h.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = s(() => h.unstyled ?? Y.unstyled), X = b({
-			start: r(W.value?.start),
-			end: r(W.value?.end)
+		let h = m, V = ie(m, "modelValue"), H = v(!1), U = a(), fe = c(() => h.id ?? U?.id.value);
+		U && h.id && (U.id.value = h.id);
+		let W = c(() => h.invalid ?? U?.invalid.value ?? !1), pe = e(), me = c(() => h.unstyled ?? pe.unstyled), G = b({
+			start: r(V.value?.start),
+			end: r(V.value?.end)
 		});
-		function Z(e) {
-			return i(e.start) === (W.value?.start ?? null) && i(e.end) === (W.value?.end ?? null);
+		function K(e) {
+			return i(e.start) === (V.value?.start ?? null) && i(e.end) === (V.value?.end ?? null);
 		}
-		w(W, () => {
-			Z(X.value) || (X.value = {
-				start: r(W.value?.start),
-				end: r(W.value?.end)
+		C(V, () => {
+			K(G.value) || (G.value = {
+				start: r(V.value?.start),
+				end: r(V.value?.end)
 			});
-		}, { deep: !0 }), w(X, (e) => {
-			Z(e) || (W.value = {
+		}, { deep: !0 }), C(G, (e) => {
+			K(e) || (V.value = {
 				start: i(e.start),
 				end: i(e.end)
 			});
 		});
-		let oe = s(() => r(h.min)), se = s(() => r(h.max)), Q = s(() => {
-			let e = n(W.value?.start, h.locale, h.format), t = n(W.value?.end, h.locale, h.format);
+		let q = v(!1), J;
+		function Y(e) {
+			q.value = e.matches;
+		}
+		re(() => {
+			typeof window.matchMedia == "function" && (J = window.matchMedia("(max-width: 39.99rem)"), q.value = J.matches, J.addEventListener("change", Y));
+		}), ne(() => J?.removeEventListener("change", Y));
+		let he = c(() => q.value ? 1 : h.months), ge = c(() => r(h.min)), _e = c(() => r(h.max)), X = c(() => {
+			let e = n(V.value?.start, h.locale, h.format), t = n(V.value?.end, h.locale, h.format);
 			return !e && !t ? "" : t ? `${e}${h.separator}${t}` : e;
 		});
-		w(W, (e) => {
-			G.value && e?.start && e?.end && (G.value = !1);
+		C(V, (e) => {
+			H.value && e?.start && e?.end && (H.value = !1);
 		}, { deep: !0 });
-		function ce() {
-			W.value = {
+		let Z = c(() => (H.value, (h.presets ?? []).map((e) => ({
+			label: e.label,
+			range: typeof e.range == "function" ? e.range() : e.range
+		}))));
+		function Q(e) {
+			return (!h.min || !e.start || e.start >= h.min) && (!h.max || !e.end || e.end <= h.max);
+		}
+		function ve(e) {
+			return V.value?.start === e.start && V.value?.end === e.end;
+		}
+		function ye(e) {
+			V.value = {
+				start: e.start,
+				end: e.end
+			}, H.value = !1;
+		}
+		function be() {
+			V.value = {
 				start: null,
 				end: null
-			}, G.value = !1;
+			}, H.value = !1;
 		}
-		let le = s(() => ({
-			...a({
+		let xe = c(() => ({
+			...o({
 				size: h.size,
-				invalid: J.value
+				invalid: W.value
 			}),
 			...ee({ range: !0 })
 		}));
 		function $(e, t) {
 			let n = h.ui?.[e];
-			return ae.value ? [n, t] : le.value[e]({ class: [n, t] });
+			return me.value ? [n, t] : xe.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (_(), c(S(k), {
-			open: G.value,
-			"onUpdate:open": n[1] ||= (e) => G.value = e
+		return (e, n) => (_(), l(S(ue), {
+			open: H.value,
+			"onUpdate:open": n[1] ||= (e) => H.value = e
 		}, {
-			default: T(() => [p(S(A), { "as-child": "" }, {
-				default: T(() => [d("button", {
-					id: q.value,
+			default: w(() => [p(S(de), { "as-child": "" }, {
+				default: w(() => [f("button", {
+					id: fe.value,
 					type: "button",
 					disabled: h.disabled,
-					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
+					"aria-invalid": W.value || void 0,
+					"aria-describedby": S(U)?.describedBy.value,
 					class: g($("trigger", h.class))
-				}, [Q.value ? (_(), u("span", U, x(Q.value), 1)) : (_(), u("span", {
+				}, [X.value ? (_(), d("span", R, x(X.value), 1)) : (_(), d("span", {
 					key: 1,
 					class: g($("placeholder"))
-				}, x(h.placeholder), 3)), p(t, { icon: S(re) }, null, 8, ["icon"])], 10, H)]),
+				}, x(h.placeholder), 3)), p(t, { icon: S(se) }, null, 8, ["icon"])], 10, L)]),
 				_: 1
-			}), p(S(O), null, {
-				default: T(() => [p(S(D), {
+			}), p(S(le), null, {
+				default: w(() => [p(S(ce), {
 					class: g($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: T(() => [p(S(ie), {
-						modelValue: X.value,
-						"onUpdate:modelValue": n[0] ||= (e) => X.value = e,
-						"min-value": oe.value,
-						"max-value": se.value,
+					default: w(() => [f("div", { class: g($("panel")) }, [Z.value.length ? (_(), d("div", {
+						key: 0,
+						role: "group",
+						"aria-label": h.presetsLabel,
+						class: g($("presets"))
+					}, [(_(!0), d(s, null, y(Z.value, (e) => (_(), d("button", {
+						key: e.label,
+						type: "button",
+						disabled: !Q(e.range),
+						"aria-pressed": ve(e.range),
+						class: g($("preset")),
+						onClick: (t) => ye(e.range)
+					}, x(e.label), 11, B))), 128))], 10, z)) : u("", !0), p(S(I), {
+						modelValue: G.value,
+						"onUpdate:modelValue": n[0] ||= (e) => G.value = e,
+						"min-value": ge.value,
+						"max-value": _e.value,
 						locale: h.locale,
 						"week-starts-on": h.weekStartsOn,
-						"number-of-months": h.months,
+						"number-of-months": he.value,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: T(({ grid: e, weekDays: n }) => [p(S(R), { class: g($("header")) }, {
-							default: T(() => [
-								p(S(V), {
+						default: w(({ grid: e, weekDays: n }) => [p(S(M), { class: g($("header")) }, {
+							default: w(() => [
+								p(S(F), {
 									"aria-label": h.previousLabel,
 									class: g($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(E) }, null, 8, ["icon"])]),
+									default: w(() => [p(t, { icon: S(ae) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								p(S(z), { class: g($("heading")) }, null, 8, ["class"]),
-								p(S(B), {
+								p(S(N), { class: g($("heading")) }, null, 8, ["class"]),
+								p(S(P), {
 									"aria-label": h.nextLabel,
 									class: g($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(ne) }, null, 8, ["icon"])]),
+									default: w(() => [p(t, { icon: S(oe) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"])
 							]),
 							_: 1
-						}, 8, ["class"]), d("div", { class: g($("months")) }, [(_(!0), u(o, null, y(e, (e) => (_(), c(S(N), {
+						}, 8, ["class"]), f("div", { class: g($("months")) }, [(_(!0), d(s, null, y(e, (e) => (_(), l(S(D), {
 							key: e.value.toString(),
 							class: g($("grid"))
 						}, {
-							default: T(() => [p(S(F), null, {
-								default: T(() => [p(S(I), null, {
-									default: T(() => [(_(!0), u(o, null, y(n, (e) => (_(), c(S(L), {
+							default: w(() => [p(S(k), null, {
+								default: w(() => [p(S(A), null, {
+									default: w(() => [(_(!0), d(s, null, y(n, (e) => (_(), l(S(j), {
 										key: e,
 										class: g($("headCell"))
 									}, {
-										default: T(() => [f(x(e), 1)]),
+										default: w(() => [te(x(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), p(S(P), null, {
-								default: T(() => [(_(!0), u(o, null, y(e.rows, (t, n) => (_(), c(S(I), { key: `week-${n}` }, {
-									default: T(() => [(_(!0), u(o, null, y(t, (t) => (_(), c(S(j), {
+							}, 1024), p(S(O), null, {
+								default: w(() => [(_(!0), d(s, null, y(e.rows, (t, n) => (_(), l(S(A), { key: `week-${n}` }, {
+									default: w(() => [(_(!0), d(s, null, y(t, (t) => (_(), l(S(T), {
 										key: t.toString(),
 										date: t,
 										class: g($("cell"))
 									}, {
-										default: T(() => [p(S(M), {
+										default: w(() => [p(S(E), {
 											day: t,
 											month: e.value,
 											class: g($("cellTrigger"))
@@ -200,14 +241,14 @@ var H = [
 						"locale",
 						"week-starts-on",
 						"number-of-months"
-					]), h.clearable ? (_(), u("div", {
+					])], 2), h.clearable ? (_(), d("div", {
 						key: 0,
 						class: g($("footer"))
-					}, [d("button", {
+					}, [f("button", {
 						type: "button",
 						class: g($("action")),
-						onClick: ce
-					}, x(h.clearLabel), 3)], 2)) : l("", !0)]),
+						onClick: be
+					}, x(h.clearLabel), 3)], 2)) : u("", !0)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1
@@ -217,4 +258,4 @@ var H = [
 	}
 });
 //#endregion
-export { W as default };
+export { V as default };