iryx-ui 0.11.0 → 0.13.0

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

@@ -0,0 +1,63 @@
+import type { CommandEntry, CommandItem } from '../composables/command-palette';
+export interface CommandPaletteProps {
+    /** Commands, optionally grouped. An entry with `items` is a group. */
+    items?: CommandEntry[];
+    placeholder?: string;
+    /** Shown when the query matches nothing. Override for non-English apps. */
+    emptyText?: string;
+    /** Accessible name for the dialog, since a palette has no visible title. */
+    label?: string;
+    /**
+     * Global shortcut that opens it. `mod` is Command on Apple platforms and
+     * Control elsewhere. Pass `null` to bind nothing and drive `open` yourself.
+     */
+    hotkey?: string | null;
+    /** Close once a command is chosen. */
+    closeOnSelect?: boolean;
+    /** Hint row along the bottom. Set `false` to drop it. */
+    footer?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'overlay' | 'content' | 'header' | 'icon' | 'input' | 'viewport' | 'group' | 'groupLabel' | 'item' | 'itemIcon' | 'itemLabel' | 'shortcut' | 'key' | 'empty' | 'footer' | 'list', string>>;
+}
+type __VLS_Props = CommandPaletteProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_59: {
+    query: string;
+}, __VLS_81: {
+    item: CommandItem;
+}, __VLS_93: {};
+type __VLS_Slots = {} & {
+    empty?: (props: typeof __VLS_59) => any;
+} & {
+    item?: (props: typeof __VLS_81) => any;
+} & {
+    footer?: (props: typeof __VLS_93) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (item: CommandItem) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: CommandItem) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+    label: string;
+    placeholder: string;
+    footer: boolean;
+    emptyText: string;
+    hotkey: string | null;
+    closeOnSelect: boolean;
+}, {}, {}, {}, 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/CommandPalette.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,185 @@
+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";
+//#region src/components/CommandPalette.vue?vue&type=script&setup=true&lang.ts
+var B = /*@__PURE__*/ h({
+	__name: "CommandPalette",
+	props: /*@__PURE__*/ g({
+		items: {},
+		placeholder: { default: "Search commands…" },
+		emptyText: { default: "No matching commands." },
+		label: { default: "Command palette" },
+		hotkey: { default: "mod+k" },
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		footer: {
+			type: Boolean,
+			default: !0
+		},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		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 = "");
+		});
+		let { contains: W } = z({ sensitivity: "base" }), G = c(() => i(B.items)), K = c(() => {
+			let e = U.value.trim();
+			return G.value.map((t) => ({
+				...t,
+				items: e ? t.items.filter((r) => W(n(r, t.label), e)) : t.items
+			})).filter((e) => e.items.length > 0);
+		}), q = c(() => K.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 X(e) {
+			B.hotkey && r(e, B.hotkey) && (e.preventDefault(), H.value = !H.value);
+		}
+		y(() => window.addEventListener("keydown", X)), v(() => window.removeEventListener("keydown", X));
+		let re = e(), Z = c(() => B.unstyled ?? re.unstyled), Q = c(() => a());
+		function $(e, t) {
+			let n = B.ui?.[e];
+			return Z.value ? [n, t].filter(Boolean).join(" ") : Q.value[e]({ class: [n, t] });
+		}
+		function ie(e) {
+			return e.split(" ").filter(Boolean);
+		}
+		return (e, n) => (b(), l(T(A), {
+			open: H.value,
+			"onUpdate:open": n[1] ||= (e) => H.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: O(() => [
+						m(T(R), null, {
+							default: O(() => [m(T(j), null, {
+								default: O(() => [p(w(B.label), 1)]),
+								_: 1
+							})]),
+							_: 1
+						}),
+						m(T(L), {
+							"highlight-on-hover": "",
+							class: _($("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,
+								"auto-focus": "",
+								placeholder: B.placeholder,
+								class: _($("input"))
+							}, null, 8, [
+								"modelValue",
+								"placeholder",
+								"class"
+							])], 2), m(T(M), { class: _($("viewport")) }, {
+								default: O(() => [q.value ? (b(), d("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), {
+									key: n.label || r,
+									class: _($("group"))
+								}, {
+									default: O(() => [n.label ? (b(), l(T(F), {
+										key: 0,
+										class: _($("groupLabel"))
+									}, {
+										default: O(() => [p(w(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)
+									}, {
+										default: O(() => [C(e.$slots, "item", { item: n }, () => [
+											n.icon ? (b(), d("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, {
+												key: 1,
+												keys: ie(n.shortcut),
+												class: _($("shortcut")),
+												ui: { key: B.ui?.key }
+											}, null, 8, [
+												"keys",
+												"class",
+												"ui"
+											])) : u("", !0)
+										])]),
+										_: 2
+									}, 1032, [
+										"value",
+										"disabled",
+										"aria-disabled",
+										"as",
+										"href",
+										"class",
+										"onSelect"
+									]))), 128))]),
+									_: 2
+								}, 1032, ["class"]))), 128))]),
+								_: 3
+							}, 8, ["class"])]),
+							_: 3
+						}, 8, ["class"]),
+						B.footer ? (b(), d("div", {
+							key: 0,
+							class: _($("footer"))
+						}, [C(e.$slots, "footer", {}, () => [
+							f("span", null, [m(o, {
+								keys: ["up", "down"],
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[2] ||= p(" to navigate", -1)]),
+							f("span", null, [m(o, {
+								keys: "enter",
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[3] ||= p(" to select", -1)]),
+							f("span", null, [m(o, {
+								keys: "escape",
+								ui: { key: B.ui?.key }
+							}, null, 8, ["ui"]), n[4] ||= p(" to close", -1)])
+						])], 2)) : u("", !0)
+					]),
+					_: 3
+				}, 8, ["class", "aria-label"])]),
+				_: 3
+			})]),
+			_: 3
+		}, 8, ["open"]));
+	}
+});
+//#endregion
+export { B as default };

package/dist/components/Container.js

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

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

@@ -0,0 +1,33 @@
+export interface ContainerProps {
+    /** Render as a different element or component. */
+    as?: string;
+    /** Merge props onto the immediate child instead of rendering an element. */
+    asChild?: boolean;
+    /** Maximum content width. `full` removes the cap but keeps the gutter. */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Horizontal gutter. `none` leaves it to you. */
+    gutter?: 'none' | 'sm' | 'md' | 'lg';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ root: 'py-10' }`. */
+    ui?: {
+        root?: string;
+    };
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ContainerProps> & Readonly<{}>, {
+    unstyled: boolean;
+    as: string;
+}, {}, {}, {}, 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/Container.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,40 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { containerTheme as t } from "../theme/container.js";
+import { computed as n, createBlock as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, unref as c, withCtx as l } from "vue";
+import { Primitive as u } from "reka-ui";
+//#region src/components/Container.vue?vue&type=script&setup=true&lang.ts
+var d = /*@__PURE__*/ i({
+	__name: "Container",
+	props: {
+		as: { default: "div" },
+		asChild: { type: Boolean },
+		size: {},
+		gutter: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(i) {
+		let d = i, f = e(), p = n(() => d.unstyled ?? f.unstyled), m = n(() => t({
+			size: d.size,
+			gutter: d.gutter
+		})), h = n(() => p.value ? [d.ui?.root, d.class] : m.value.root({ class: [d.ui?.root, d.class] }));
+		return (e, t) => (o(), r(c(u), {
+			as: d.as,
+			"as-child": d.asChild,
+			class: a(h.value)
+		}, {
+			default: l(() => [s(e.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"as",
+			"as-child",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { d as default };

package/dist/components/ContextMenu.js

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

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

@@ -0,0 +1,42 @@
+import type { DropdownMenuEntry } from '../composables/dropdown-menu';
+export interface ContextMenuProps {
+    /** Entries to render. Nest by giving an entry its own `items`. */
+    items?: DropdownMenuEntry[];
+    /**
+     * How far the menu is kept from the viewport edge when it would overflow.
+     */
+    collisionPadding?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ item: 'py-2' }`. */
+    ui?: {
+        content?: string;
+        item?: string;
+        label?: string;
+        separator?: string;
+        subTrigger?: string;
+        subContent?: string;
+    };
+}
+declare var __VLS_16: {}, __VLS_30: {};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_16) => any;
+} & {
+    default?: (props: typeof __VLS_30) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ContextMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ContextMenuProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unstyled: boolean;
+}, {}, {}, {}, 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/ContextMenu.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,49 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { dropdownMenuTheme as t } from "../theme/dropdown-menu.js";
+import n from "./DropdownMenuItems.js";
+import { computed as r, createBlock as i, createVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, unref as u, withCtx as d } from "vue";
+import { ContextMenuContent as f, ContextMenuPortal as p, ContextMenuRoot as m, ContextMenuTrigger as h } from "reka-ui";
+//#region src/components/ContextMenu.vue?vue&type=script&setup=true&lang.ts
+var g = /*@__PURE__*/ o({
+	__name: "ContextMenu",
+	props: {
+		items: {},
+		collisionPadding: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	emits: ["update:open"],
+	setup(o, { emit: g }) {
+		let _ = o, v = g, y = e(), b = r(() => _.unstyled ?? y.unstyled), x = r(() => _.items ?? []), S = r(() => b.value ? [_.ui?.content, _.class] : t().content({ class: [_.ui?.content, _.class] }));
+		return (e, t) => (c(), i(u(m), { "onUpdate:open": t[0] ||= (e) => v("update:open", e) }, {
+			default: d(() => [a(u(h), { "as-child": "" }, {
+				default: d(() => [l(e.$slots, "trigger")]),
+				_: 3
+			}), a(u(p), null, {
+				default: d(() => [a(u(f), {
+					"collision-padding": _.collisionPadding,
+					class: s(S.value)
+				}, {
+					default: d(() => [l(e.$slots, "default", {}, () => [a(n, {
+						entries: x.value,
+						unstyled: b.value,
+						ui: _.ui
+					}, null, 8, [
+						"entries",
+						"unstyled",
+						"ui"
+					])])]),
+					_: 3
+				}, 8, ["collision-padding", "class"])]),
+				_: 3
+			})]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { g as default };

package/dist/components/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,20 @@
-import { ArrowLeft01Icon as e, ArrowRight01Icon as t, Calendar03Icon as n } from "../node_modules/.pnpm/@hugeicons_core-free-icons@4.2.3/node_modules/@hugeicons/core-free-icons/dist/esm/index.js";
-import { useIryxUiConfig as r } from "../config.js";
-import i from "./Icon.js";
-import { useFormField as a } from "../composables/form.js";
-import { formatIsoDate as o, isoToday as ee, toCalendarDate as s, toIsoDate as c } from "../composables/date.js";
-import { datePickerTheme as l } from "../theme/date-picker.js";
-import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, defineComponent as v, mergeModels as y, normalizeClass as b, openBlock as x, ref as S, renderList as C, toDisplayString as w, unref as T, useModel as E, withCtx as D } from "vue";
-import { CalendarCell as te, CalendarCellTrigger as ne, CalendarGrid as O, CalendarGridBody as k, CalendarGridHead as A, CalendarGridRow as j, CalendarHeadCell as M, CalendarHeader as N, CalendarHeading as P, CalendarNext as F, CalendarPrev as I, CalendarRoot as L, PopoverContent as R, PopoverPortal as z, PopoverRoot as B, PopoverTrigger as V } from "reka-ui";
+import { useIryxUiConfig as e } from "../config.js";
+import t from "./Icon.js";
+import { useFormField as n } from "../composables/form.js";
+import { formatIsoDate as r, isoToday as i, toCalendarDate as a, toIsoDate as o } from "../composables/date.js";
+import { datePickerTheme as s } from "../theme/date-picker.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as ee, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useModel as C, withCtx as w } from "vue";
+import { ArrowLeft01Icon as T, ArrowRight01Icon as te, Calendar03Icon as E } from "@hugeicons/core-free-icons";
+import { CalendarCell as D, CalendarCellTrigger as O, CalendarGrid as k, CalendarGridBody as A, CalendarGridHead as j, CalendarGridRow as M, CalendarHeadCell as N, CalendarHeader as P, CalendarHeading as F, CalendarNext as I, CalendarPrev as L, CalendarRoot as R, PopoverContent as z, PopoverPortal as B, PopoverRoot as ne, PopoverTrigger as V } from "reka-ui";
 //#region src/components/DatePicker.vue?vue&type=script&setup=true&lang.ts
 var H = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ v({
+], U = { key: 0 }, W = /*@__PURE__*/ h({
 	__name: "DatePicker",
-	props: /*@__PURE__*/ y({
+	props: /*@__PURE__*/ g({
 		size: {},
 		placeholder: { default: "Pick a date" },
 		disabled: { type: Boolean },
@@ -44,106 +44,106 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(v) {
-		let y = v, W = E(v, "modelValue"), G = S(!1), K = a(), q = d(() => y.id ?? K?.id.value), J = d(() => y.invalid ?? K?.invalid.value ?? !1), Y = r(), X = d(() => y.unstyled ?? Y.unstyled), Z = d({
-			get: () => s(W.value),
+	setup(h) {
+		let g = h, W = C(h, "modelValue"), G = y(!1), K = n(), q = l(() => g.id ?? K?.id.value), J = l(() => g.invalid ?? K?.invalid.value ?? !1), Y = e(), X = l(() => g.unstyled ?? Y.unstyled), Z = l({
+			get: () => a(W.value),
 			set: (e) => {
-				W.value = c(e);
+				W.value = o(e);
 			}
-		}), re = d(() => s(y.min)), ie = d(() => s(y.max)), Q = d(() => o(W.value, y.locale, y.format));
+		}), re = l(() => a(g.min)), ie = l(() => a(g.max)), Q = l(() => r(W.value, g.locale, g.format));
 		function ae() {
-			W.value = ee(), G.value = !1;
+			W.value = i(), G.value = !1;
 		}
 		function oe() {
 			W.value = null, G.value = !1;
 		}
-		let se = d(() => l({
-			size: y.size,
+		let se = l(() => s({
+			size: g.size,
 			invalid: J.value
 		}));
 		function $(e, t) {
-			let n = y.ui?.[e];
+			let n = g.ui?.[e];
 			return X.value ? [n, t] : se.value[e]({ class: [n, t] });
 		}
-		return (r, a) => (x(), f(T(B), {
+		return (e, n) => (v(), u(S(ne), {
 			open: G.value,
-			"onUpdate:open": a[2] ||= (e) => G.value = e
+			"onUpdate:open": n[2] ||= (e) => G.value = e
 		}, {
-			default: D(() => [_(T(V), { "as-child": "" }, {
-				default: D(() => [h("button", {
+			default: w(() => [m(S(V), { "as-child": "" }, {
+				default: w(() => [f("button", {
 					id: q.value,
 					type: "button",
-					disabled: y.disabled,
+					disabled: g.disabled,
 					"aria-invalid": J.value || void 0,
-					"aria-describedby": T(K)?.describedBy.value,
-					class: b($("trigger", y.class))
-				}, [Q.value ? (x(), m("span", U, w(Q.value), 1)) : (x(), m("span", {
+					"aria-describedby": S(K)?.describedBy.value,
+					class: _($("trigger", g.class))
+				}, [Q.value ? (v(), d("span", U, x(Q.value), 1)) : (v(), d("span", {
 					key: 1,
-					class: b($("placeholder"))
-				}, w(y.placeholder), 3)), _(i, { icon: T(n) }, null, 8, ["icon"])], 10, H)]),
+					class: _($("placeholder"))
+				}, x(g.placeholder), 3)), m(t, { icon: S(E) }, null, 8, ["icon"])], 10, H)]),
 				_: 1
-			}), _(T(z), null, {
-				default: D(() => [_(T(R), {
-					class: b($("content")),
+			}), m(S(B), null, {
+				default: w(() => [m(S(z), {
+					class: _($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: D(() => [_(T(L), {
+					default: w(() => [m(S(R), {
 						modelValue: Z.value,
-						"onUpdate:modelValue": [a[0] ||= (e) => Z.value = e, a[1] ||= (e) => G.value = !1],
+						"onUpdate:modelValue": [n[0] ||= (e) => Z.value = e, n[1] ||= (e) => G.value = !1],
 						"min-value": re.value,
 						"max-value": ie.value,
-						locale: y.locale,
-						"week-starts-on": y.weekStartsOn,
+						locale: g.locale,
+						"week-starts-on": g.weekStartsOn,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: D(({ grid: n, weekDays: r }) => [_(T(N), { class: b($("header")) }, {
-							default: D(() => [
-								_(T(I), {
-									"aria-label": y.previousLabel,
-									class: b($("nav"))
+						default: w(({ grid: e, weekDays: n }) => [m(S(P), { class: _($("header")) }, {
+							default: w(() => [
+								m(S(L), {
+									"aria-label": g.previousLabel,
+									class: _($("nav"))
 								}, {
-									default: D(() => [_(i, { icon: T(e) }, null, 8, ["icon"])]),
+									default: w(() => [m(t, { icon: S(T) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								_(T(P), { class: b($("heading")) }, null, 8, ["class"]),
-								_(T(F), {
-									"aria-label": y.nextLabel,
-									class: b($("nav"))
+								m(S(F), { class: _($("heading")) }, null, 8, ["class"]),
+								m(S(I), {
+									"aria-label": g.nextLabel,
+									class: _($("nav"))
 								}, {
-									default: D(() => [_(i, { icon: T(t) }, null, 8, ["icon"])]),
+									default: w(() => [m(t, { icon: S(te) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"])
 							]),
 							_: 1
-						}, 8, ["class"]), h("div", { class: b($("months")) }, [(x(!0), m(u, null, C(n, (e) => (x(), f(T(O), {
+						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(c, null, b(e, (e) => (v(), u(S(k), {
 							key: e.value.toString(),
-							class: b($("grid"))
+							class: _($("grid"))
 						}, {
-							default: D(() => [_(T(A), null, {
-								default: D(() => [_(T(j), null, {
-									default: D(() => [(x(!0), m(u, null, C(r, (e) => (x(), f(T(M), {
+							default: w(() => [m(S(j), null, {
+								default: w(() => [m(S(M), null, {
+									default: w(() => [(v(!0), d(c, null, b(n, (e) => (v(), u(S(N), {
 										key: e,
-										class: b($("headCell"))
+										class: _($("headCell"))
 									}, {
-										default: D(() => [g(w(e), 1)]),
+										default: w(() => [p(x(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), _(T(k), null, {
-								default: D(() => [(x(!0), m(u, null, C(e.rows, (t, n) => (x(), f(T(j), { key: `week-${n}` }, {
-									default: D(() => [(x(!0), m(u, null, C(t, (t) => (x(), f(T(te), {
+							}, 1024), m(S(A), null, {
+								default: w(() => [(v(!0), d(c, null, b(e.rows, (t, n) => (v(), u(S(M), { key: `week-${n}` }, {
+									default: w(() => [(v(!0), d(c, null, b(t, (t) => (v(), u(S(D), {
 										key: t.toString(),
 										date: t,
-										class: b($("cell"))
+										class: _($("cell"))
 									}, {
-										default: D(() => [_(T(ne), {
+										default: w(() => [m(S(O), {
 											day: t,
 											month: e.value,
-											class: b($("cellTrigger"))
+											class: _($("cellTrigger"))
 										}, null, 8, [
 											"day",
 											"month",
@@ -164,16 +164,16 @@ var H = [
 						"max-value",
 						"locale",
 						"week-starts-on"
-					]), h("div", { class: b($("footer")) }, [h("button", {
+					]), f("div", { class: _($("footer")) }, [f("button", {
 						type: "button",
-						class: b($("action")),
+						class: _($("action")),
 						onClick: ae
-					}, w(y.todayLabel), 3), y.clearable ? (x(), m("button", {
+					}, x(g.todayLabel), 3), g.clearable ? (v(), d("button", {
 						key: 0,
 						type: "button",
-						class: b($("action")),
+						class: _($("action")),
 						onClick: oe
-					}, w(y.clearLabel), 3)) : p("", !0)], 2)]),
+					}, x(g.clearLabel), 3)) : ee("", !0)], 2)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1

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

@@ -48,8 +48,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
 }>, {
     unstyled: boolean;
-    separator: string;
     placeholder: string;
+    separator: string;
     invalid: boolean;
     months: number;
     clearLabel: string;