iryx-ui 0.16.0 → 0.17.0

package/dist/components/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 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";
+import { formatIsoDate as n, isoToday as r } from "../composables/date.js";
+import i from "./Calendar.js";
+import { useFormField as a } from "../composables/form.js";
+import { datePickerTheme as o } from "../theme/date-picker.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, ref as _, toDisplayString as v, unref as y, useModel as b, withCtx as x } from "vue";
+import { Calendar03Icon as S } from "@hugeicons/core-free-icons";
+import { PopoverContent as C, PopoverPortal as w, PopoverRoot as T, PopoverTrigger as E } from "reka-ui";
 //#region src/components/DatePicker.vue?vue&type=script&setup=true&lang.ts
-var H = [
+var D = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ h({
+], O = { key: 0 }, k = /*@__PURE__*/ p({
 	__name: "DatePicker",
-	props: /*@__PURE__*/ g({
+	props: /*@__PURE__*/ m({
 		size: {},
 		placeholder: { default: "Pick a date" },
 		disabled: { type: Boolean },
@@ -28,6 +29,7 @@ var H = [
 		locale: {},
 		format: {},
 		weekStartsOn: {},
+		isUnavailable: {},
 		clearable: { type: Boolean },
 		todayLabel: { default: "Today" },
 		clearLabel: { default: "Clear" },
@@ -44,136 +46,83 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	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 = o(e);
-			}
-		}), re = l(() => a(g.min)), ie = l(() => a(g.max)), Q = l(() => r(W.value, g.locale, g.format));
-		function ae() {
-			W.value = i(), G.value = !1;
+	setup(p) {
+		let m = p, k = b(p, "modelValue"), A = _(!1), j = a(), M = s(() => m.id ?? j?.id.value), N = s(() => m.invalid ?? j?.invalid.value ?? !1), P = e(), F = s(() => m.unstyled ?? P.unstyled), I = s(() => n(k.value, m.locale, m.format));
+		function L() {
+			k.value = r(), A.value = !1;
 		}
-		function oe() {
-			W.value = null, G.value = !1;
+		function R() {
+			k.value = null, A.value = !1;
 		}
-		let se = l(() => s({
-			size: g.size,
-			invalid: J.value
+		let z = s(() => o({
+			size: m.size,
+			invalid: N.value
 		}));
-		function $(e, t) {
-			let n = g.ui?.[e];
-			return X.value ? [n, t] : se.value[e]({ class: [n, t] });
+		function B(e, t) {
+			let n = m.ui?.[e];
+			return F.value ? [n, t] : z.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (v(), u(S(ne), {
-			open: G.value,
-			"onUpdate:open": n[2] ||= (e) => G.value = e
+		let V = s(() => {
+			let { trigger: e, placeholder: t, content: n, footer: r, action: i, ...a } = m.ui ?? {};
+			return a;
+		});
+		return (e, n) => (g(), c(y(T), {
+			open: A.value,
+			"onUpdate:open": n[2] ||= (e) => A.value = e
 		}, {
-			default: w(() => [m(S(V), { "as-child": "" }, {
-				default: w(() => [f("button", {
-					id: q.value,
+			default: x(() => [f(y(E), { "as-child": "" }, {
+				default: x(() => [d("button", {
+					id: M.value,
 					type: "button",
-					disabled: g.disabled,
-					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
-					class: _($("trigger", g.class))
-				}, [Q.value ? (v(), d("span", U, x(Q.value), 1)) : (v(), d("span", {
+					disabled: m.disabled,
+					"aria-invalid": N.value || void 0,
+					"aria-describedby": y(j)?.describedBy.value,
+					class: h(B("trigger", m.class))
+				}, [I.value ? (g(), u("span", O, v(I.value), 1)) : (g(), u("span", {
 					key: 1,
-					class: _($("placeholder"))
-				}, x(g.placeholder), 3)), m(t, { icon: S(E) }, null, 8, ["icon"])], 10, H)]),
+					class: h(B("placeholder"))
+				}, v(m.placeholder), 3)), f(t, { icon: y(S) }, null, 8, ["icon"])], 10, D)]),
 				_: 1
-			}), m(S(B), null, {
-				default: w(() => [m(S(z), {
-					class: _($("content")),
+			}), f(y(w), null, {
+				default: x(() => [f(y(C), {
+					class: h(B("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: w(() => [m(S(R), {
-						modelValue: Z.value,
-						"onUpdate:modelValue": [n[0] ||= (e) => Z.value = e, n[1] ||= (e) => G.value = !1],
-						"min-value": re.value,
-						"max-value": ie.value,
-						locale: g.locale,
-						"week-starts-on": g.weekStartsOn,
-						"fixed-weeks": "",
-						"initial-focus": ""
-					}, {
-						default: w(({ grid: e, weekDays: n }) => [m(S(P), { class: _($("header")) }, {
-							default: w(() => [
-								m(S(L), {
-									"aria-label": g.previousLabel,
-									class: _($("nav"))
-								}, {
-									default: w(() => [m(t, { icon: S(T) }, null, 8, ["icon"])]),
-									_: 1
-								}, 8, ["aria-label", "class"]),
-								m(S(F), { class: _($("heading")) }, null, 8, ["class"]),
-								m(S(I), {
-									"aria-label": g.nextLabel,
-									class: _($("nav"))
-								}, {
-									default: w(() => [m(t, { icon: S(te) }, null, 8, ["icon"])]),
-									_: 1
-								}, 8, ["aria-label", "class"])
-							]),
-							_: 1
-						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(c, null, b(e, (e) => (v(), u(S(k), {
-							key: e.value.toString(),
-							class: _($("grid"))
-						}, {
-							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: _($("headCell"))
-									}, {
-										default: w(() => [p(x(e), 1)]),
-										_: 2
-									}, 1032, ["class"]))), 128))]),
-									_: 2
-								}, 1024)]),
-								_: 2
-							}, 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: _($("cell"))
-									}, {
-										default: w(() => [m(S(O), {
-											day: t,
-											month: e.value,
-											class: _($("cellTrigger"))
-										}, null, 8, [
-											"day",
-											"month",
-											"class"
-										])]),
-										_: 2
-									}, 1032, ["date", "class"]))), 128))]),
-									_: 2
-								}, 1024))), 128))]),
-								_: 2
-							}, 1024)]),
-							_: 2
-						}, 1032, ["class"]))), 128))], 2)]),
-						_: 1
-					}, 8, [
+					default: x(() => [f(i, {
+						modelValue: k.value,
+						"onUpdate:modelValue": [n[0] ||= (e) => k.value = e, n[1] ||= (e) => A.value = !1],
+						min: m.min,
+						max: m.max,
+						locale: m.locale,
+						"week-starts-on": m.weekStartsOn,
+						"is-unavailable": m.isUnavailable,
+						"previous-label": m.previousLabel,
+						"next-label": m.nextLabel,
+						"initial-focus": "",
+						unstyled: m.unstyled,
+						ui: V.value
+					}, null, 8, [
 						"modelValue",
-						"min-value",
-						"max-value",
+						"min",
+						"max",
 						"locale",
-						"week-starts-on"
-					]), f("div", { class: _($("footer")) }, [f("button", {
+						"week-starts-on",
+						"is-unavailable",
+						"previous-label",
+						"next-label",
+						"unstyled",
+						"ui"
+					]), d("div", { class: h(B("footer")) }, [d("button", {
 						type: "button",
-						class: _($("action")),
-						onClick: ae
-					}, x(g.todayLabel), 3), g.clearable ? (v(), d("button", {
+						class: h(B("action")),
+						onClick: L
+					}, v(m.todayLabel), 3), m.clearable ? (g(), u("button", {
 						key: 0,
 						type: "button",
-						class: _($("action")),
-						onClick: oe
-					}, x(g.clearLabel), 3)) : ee("", !0)], 2)]),
+						class: h(B("action")),
+						onClick: R
+					}, v(m.clearLabel), 3)) : l("", !0)], 2)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1
@@ -183,4 +132,4 @@ var H = [
 	}
 });
 //#endregion
-export { W as default };
+export { k as default };

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

@@ -50,11 +50,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     unstyled: boolean;
     placeholder: string;
     separator: string;
-    invalid: boolean;
-    clearLabel: string;
     months: number;
     previousLabel: string;
     nextLabel: string;
+    invalid: boolean;
+    clearLabel: 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

@@ -1,20 +1,21 @@
 import { useIryxUiConfig as e } from "../config.js";
 import t from "./Icon.js";
-import { useFormField as n } from "../composables/form.js";
-import { formatIsoDate as r, toCalendarDate as i, toIsoDate as a } from "../composables/date.js";
-import { datePickerTheme as ee } 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 D, Calendar03Icon as te } from "@hugeicons/core-free-icons";
-import { PopoverContent as ne, PopoverPortal as re, PopoverRoot as O, PopoverTrigger as k, RangeCalendarCell as A, RangeCalendarCellTrigger as j, RangeCalendarGrid as M, RangeCalendarGridBody as N, RangeCalendarGridHead as P, RangeCalendarGridRow as F, RangeCalendarHeadCell as I, RangeCalendarHeader as L, RangeCalendarHeading as R, RangeCalendarNext as z, RangeCalendarPrev as B, RangeCalendarRoot as V } from "reka-ui";
+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 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 p, createVNode as m, defineComponent as h, mergeModels as g, normalizeClass as _, openBlock as v, ref as y, renderList as b, shallowRef as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E } from "vue";
+import { ArrowLeft01Icon as te, 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";
 //#region src/components/DateRangePicker.vue?vue&type=script&setup=true&lang.ts
 var H = [
 	"id",
 	"disabled",
 	"aria-invalid",
 	"aria-describedby"
-], U = { key: 0 }, W = /*@__PURE__*/ m({
+], U = { key: 0 }, W = /*@__PURE__*/ h({
 	__name: "DateRangePicker",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ g({
 		size: {},
 		placeholder: { default: "Pick a date range" },
 		disabled: { type: Boolean },
@@ -48,127 +49,129 @@ var H = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(m) {
-		let h = m, W = C(m, "modelValue"), G = v(!1), K = n(), q = s(() => h.id ?? K?.id.value), J = s(() => h.invalid ?? K?.invalid.value ?? !1), Y = e(), ie = s(() => h.unstyled ?? Y.unstyled), X = b({
-			start: i(W.value?.start),
-			end: i(W.value?.end)
+	setup(h) {
+		let g = h, W = w(h, "modelValue"), G = y(!1), K = a(), q = c(() => g.id ?? K?.id.value), J = c(() => g.invalid ?? K?.invalid.value ?? !1), Y = e(), ae = c(() => g.unstyled ?? Y.unstyled), X = x({
+			start: r(W.value?.start),
+			end: r(W.value?.end)
 		});
 		function Z(e) {
-			return a(e.start) === (W.value?.start ?? null) && a(e.end) === (W.value?.end ?? null);
+			return i(e.start) === (W.value?.start ?? null) && i(e.end) === (W.value?.end ?? null);
 		}
-		w(W, () => {
+		T(W, () => {
 			Z(X.value) || (X.value = {
-				start: i(W.value?.start),
-				end: i(W.value?.end)
+				start: r(W.value?.start),
+				end: r(W.value?.end)
 			});
-		}, { deep: !0 }), w(X, (e) => {
+		}, { deep: !0 }), T(X, (e) => {
 			Z(e) || (W.value = {
-				start: a(e.start),
-				end: a(e.end)
+				start: i(e.start),
+				end: i(e.end)
 			});
 		});
-		let ae = s(() => i(h.min)), oe = s(() => i(h.max)), Q = s(() => {
-			let e = r(W.value?.start, h.locale, h.format), t = r(W.value?.end, h.locale, h.format);
-			return !e && !t ? "" : t ? `${e}${h.separator}${t}` : e;
+		let oe = c(() => r(g.min)), se = c(() => r(g.max)), Q = c(() => {
+			let e = n(W.value?.start, g.locale, g.format), t = n(W.value?.end, g.locale, g.format);
+			return !e && !t ? "" : t ? `${e}${g.separator}${t}` : e;
 		});
-		w(W, (e) => {
+		T(W, (e) => {
 			G.value && e?.start && e?.end && (G.value = !1);
 		}, { deep: !0 });
-		function se() {
+		function ce() {
 			W.value = {
 				start: null,
 				end: null
 			}, G.value = !1;
 		}
-		let ce = s(() => ee({
-			size: h.size,
-			invalid: J.value,
-			range: !0
+		let le = c(() => ({
+			...o({
+				size: g.size,
+				invalid: J.value
+			}),
+			...ee({ range: !0 })
 		}));
 		function $(e, t) {
-			let n = h.ui?.[e];
-			return ie.value ? [n, t] : ce.value[e]({ class: [n, t] });
+			let n = g.ui?.[e];
+			return ae.value ? [n, t] : le.value[e]({ class: [n, t] });
 		}
-		return (e, n) => (_(), c(S(O), {
+		return (e, n) => (v(), l(C(k), {
 			open: G.value,
 			"onUpdate:open": n[1] ||= (e) => G.value = e
 		}, {
-			default: T(() => [p(S(k), { "as-child": "" }, {
-				default: T(() => [d("button", {
+			default: E(() => [m(C(A), { "as-child": "" }, {
+				default: E(() => [f("button", {
 					id: q.value,
 					type: "button",
-					disabled: h.disabled,
+					disabled: g.disabled,
 					"aria-invalid": J.value || void 0,
-					"aria-describedby": S(K)?.describedBy.value,
-					class: g($("trigger", h.class))
-				}, [Q.value ? (_(), u("span", U, x(Q.value), 1)) : (_(), u("span", {
+					"aria-describedby": C(K)?.describedBy.value,
+					class: _($("trigger", g.class))
+				}, [Q.value ? (v(), d("span", U, S(Q.value), 1)) : (v(), d("span", {
 					key: 1,
-					class: g($("placeholder"))
-				}, x(h.placeholder), 3)), p(t, { icon: S(te) }, null, 8, ["icon"])], 10, H)]),
+					class: _($("placeholder"))
+				}, S(g.placeholder), 3)), m(t, { icon: C(re) }, null, 8, ["icon"])], 10, H)]),
 				_: 1
-			}), p(S(re), null, {
-				default: T(() => [p(S(ne), {
-					class: g($("content")),
+			}), m(C(O), null, {
+				default: E(() => [m(C(D), {
+					class: _($("content")),
 					"side-offset": 4,
 					align: "start"
 				}, {
-					default: T(() => [p(S(V), {
+					default: E(() => [m(C(ie), {
 						modelValue: X.value,
 						"onUpdate:modelValue": n[0] ||= (e) => X.value = e,
-						"min-value": ae.value,
-						"max-value": oe.value,
-						locale: h.locale,
-						"week-starts-on": h.weekStartsOn,
-						"number-of-months": h.months,
+						"min-value": oe.value,
+						"max-value": se.value,
+						locale: g.locale,
+						"week-starts-on": g.weekStartsOn,
+						"number-of-months": g.months,
 						"fixed-weeks": "",
 						"initial-focus": ""
 					}, {
-						default: T(({ grid: e, weekDays: n }) => [p(S(L), { class: g($("header")) }, {
-							default: T(() => [
-								p(S(B), {
-									"aria-label": h.previousLabel,
-									class: g($("nav"))
+						default: E(({ grid: e, weekDays: n }) => [m(C(R), { class: _($("header")) }, {
+							default: E(() => [
+								m(C(V), {
+									"aria-label": g.previousLabel,
+									class: _($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(E) }, null, 8, ["icon"])]),
+									default: E(() => [m(t, { icon: C(te) }, null, 8, ["icon"])]),
 									_: 1
 								}, 8, ["aria-label", "class"]),
-								p(S(R), { class: g($("heading")) }, null, 8, ["class"]),
-								p(S(z), {
-									"aria-label": h.nextLabel,
-									class: g($("nav"))
+								m(C(z), { class: _($("heading")) }, null, 8, ["class"]),
+								m(C(B), {
+									"aria-label": g.nextLabel,
+									class: _($("nav"))
 								}, {
-									default: T(() => [p(t, { icon: S(D) }, null, 8, ["icon"])]),
+									default: E(() => [m(t, { icon: C(ne) }, 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(M), {
+						}, 8, ["class"]), f("div", { class: _($("months")) }, [(v(!0), d(s, null, b(e, (e) => (v(), l(C(N), {
 							key: e.value.toString(),
-							class: g($("grid"))
+							class: _($("grid"))
 						}, {
-							default: T(() => [p(S(P), null, {
-								default: T(() => [p(S(F), null, {
-									default: T(() => [(_(!0), u(o, null, y(n, (e) => (_(), c(S(I), {
+							default: E(() => [m(C(F), null, {
+								default: E(() => [m(C(I), null, {
+									default: E(() => [(v(!0), d(s, null, b(n, (e) => (v(), l(C(L), {
 										key: e,
-										class: g($("headCell"))
+										class: _($("headCell"))
 									}, {
-										default: T(() => [f(x(e), 1)]),
+										default: E(() => [p(S(e), 1)]),
 										_: 2
 									}, 1032, ["class"]))), 128))]),
 									_: 2
 								}, 1024)]),
 								_: 2
-							}, 1024), p(S(N), null, {
-								default: T(() => [(_(!0), u(o, null, y(e.rows, (t, n) => (_(), c(S(F), { key: `week-${n}` }, {
-									default: T(() => [(_(!0), u(o, null, y(t, (t) => (_(), c(S(A), {
+							}, 1024), m(C(P), null, {
+								default: E(() => [(v(!0), d(s, null, b(e.rows, (t, n) => (v(), l(C(I), { key: `week-${n}` }, {
+									default: E(() => [(v(!0), d(s, null, b(t, (t) => (v(), l(C(j), {
 										key: t.toString(),
 										date: t,
-										class: g($("cell"))
+										class: _($("cell"))
 									}, {
-										default: T(() => [p(S(j), {
+										default: E(() => [m(C(M), {
 											day: t,
 											month: e.value,
-											class: g($("cellTrigger"))
+											class: _($("cellTrigger"))
 										}, null, 8, [
 											"day",
 											"month",
@@ -190,14 +193,14 @@ var H = [
 						"locale",
 						"week-starts-on",
 						"number-of-months"
-					]), h.clearable ? (_(), u("div", {
+					]), g.clearable ? (v(), d("div", {
 						key: 0,
-						class: g($("footer"))
-					}, [d("button", {
+						class: _($("footer"))
+					}, [f("button", {
 						type: "button",
-						class: g($("action")),
-						onClick: se
-					}, x(h.clearLabel), 3)], 2)) : l("", !0)]),
+						class: _($("action")),
+						onClick: ce
+					}, S(g.clearLabel), 3)], 2)) : u("", !0)]),
 					_: 1
 				}, 8, ["class"])]),
 				_: 1

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

@@ -4,6 +4,7 @@ export interface DropdownMenuProps {
     items?: DropdownMenuEntry[];
     /** Which edge of the trigger to align to. */
     align?: 'start' | 'center' | 'end';
+    alignOffset?: number;
     side?: 'top' | 'right' | 'bottom' | 'left';
     sideOffset?: number;
     /** Skip built-in classes; you take over styling entirely. */
@@ -12,6 +13,7 @@ export interface DropdownMenuProps {
     /** Override classes per slot, e.g. `{ item: 'py-2' }`. */
     ui?: {
         content?: string;
+        header?: string;
         item?: string;
         label?: string;
         separator?: string;
@@ -20,16 +22,21 @@ export interface DropdownMenuProps {
     };
 }
 type __VLS_Props = DropdownMenuProps;
+type __VLS_Slots = {
+    /** What opens the menu. */
+    trigger?: () => unknown;
+    /**
+     * A block above the items — an account's name and address, a workspace, a
+     * plan. Not a menu row: it is not focusable and nothing selects it.
+     */
+    header?: () => unknown;
+    /** Replaces the items entirely. */
+    default?: () => unknown;
+};
 type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_14: {}, __VLS_28: {};
-type __VLS_Slots = {} & {
-    trigger?: (props: typeof __VLS_14) => any;
-} & {
-    default?: (props: typeof __VLS_28) => any;
-};
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{

package/dist/components/DropdownMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,15 @@
 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, mergeModels as s, normalizeClass as c, openBlock as l, renderSlot as u, unref as d, useModel as f, withCtx as p } from "vue";
-import { DropdownMenuContent as m, DropdownMenuPortal as h, DropdownMenuRoot as g, DropdownMenuTrigger as _ } from "reka-ui";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, normalizeClass as u, openBlock as d, renderSlot as f, unref as p, useModel as m, withCtx as h } from "vue";
+import { DropdownMenuContent as g, DropdownMenuPortal as _, DropdownMenuRoot as v, DropdownMenuTrigger as y } from "reka-ui";
 //#region src/components/DropdownMenu.vue?vue&type=script&setup=true&lang.ts
-var v = /*@__PURE__*/ o({
+var b = /*@__PURE__*/ c({
 	__name: "DropdownMenu",
-	props: /*@__PURE__*/ s({
+	props: /*@__PURE__*/ l({
 		items: {},
 		align: { default: "start" },
+		alignOffset: {},
 		side: {},
 		sideOffset: { default: 4 },
 		unstyled: {
@@ -25,26 +26,30 @@ var v = /*@__PURE__*/ o({
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(o) {
-		let s = o, v = f(o, "open"), y = e(), b = r(() => s.unstyled ?? y.unstyled), x = r(() => s.items ?? []), S = r(() => b.value ? [s.ui?.content, s.class] : t().content({ class: [s.ui?.content, s.class] }));
-		return (e, t) => (l(), i(d(g), {
-			open: v.value,
-			"onUpdate:open": t[0] ||= (e) => v.value = e
+	setup(c) {
+		let l = c, b = m(c, "open"), x = e(), S = r(() => l.unstyled ?? x.unstyled), C = r(() => l.items ?? []), w = r(() => S.value ? l.ui?.header : t().header({ class: l.ui?.header })), T = r(() => S.value ? [l.ui?.content, l.class] : t().content({ class: [l.ui?.content, l.class] }));
+		return (e, t) => (d(), i(p(v), {
+			open: b.value,
+			"onUpdate:open": t[0] ||= (e) => b.value = e
 		}, {
-			default: p(() => [a(d(_), { "as-child": "" }, {
-				default: p(() => [u(e.$slots, "trigger")]),
+			default: h(() => [s(p(y), { "as-child": "" }, {
+				default: h(() => [f(e.$slots, "trigger")]),
 				_: 3
-			}), a(d(h), null, {
-				default: p(() => [a(d(m), {
-					align: s.align,
-					side: s.side,
-					"side-offset": s.sideOffset,
-					class: c(S.value)
+			}), s(p(_), null, {
+				default: h(() => [s(p(g), {
+					align: l.align,
+					"align-offset": l.alignOffset,
+					side: l.side,
+					"side-offset": l.sideOffset,
+					class: u(T.value)
 				}, {
-					default: p(() => [u(e.$slots, "default", {}, () => [a(n, {
-						entries: x.value,
-						unstyled: b.value,
-						ui: s.ui
+					default: h(() => [e.$slots.header ? (d(), o("div", {
+						key: 0,
+						class: u(w.value)
+					}, [f(e.$slots, "header")], 2)) : a("", !0), f(e.$slots, "default", {}, () => [s(n, {
+						entries: C.value,
+						unstyled: S.value,
+						ui: l.ui
 					}, null, 8, [
 						"entries",
 						"unstyled",
@@ -53,6 +58,7 @@ var v = /*@__PURE__*/ o({
 					_: 3
 				}, 8, [
 					"align",
+					"align-offset",
 					"side",
 					"side-offset",
 					"class"
@@ -64,4 +70,4 @@ var v = /*@__PURE__*/ o({
 	}
 });
 //#endregion
-export { v as default };
+export { b as default };

package/dist/components/Editable.js

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