@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -15,6 +15,8 @@ var g = /*@__PURE__*/ s({
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -24,23 +26,31 @@ var g = /*@__PURE__*/ s({
 		orientation: {},
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		startOfWeek: {},
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
 	setup(s, { emit: g }) {
 		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, calendarTokens: E, applyButtonProps: D, cancelButtonProps: O, handleCalendarChange: k } = n(s, {
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",
-			showFooter: !1,
 			orientation: "horizontal"
 		}, g);
 		return (n, s) => (d(), i("div", u(c(m(v))), [o(t, {
+			fill: m(_).fill,
 			color: m(_).color,
+			error: m(_).error,
 			value: m(w),
 			tokens: m(E),
 			rounded: m(_).rounded,
@@ -63,7 +73,9 @@ var g = /*@__PURE__*/ s({
 			day: h((e) => [f(n.$slots, "day", u(c(e)), () => [a(p(e.label), 1)])]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
+			"error",
 			"value",
 			"tokens",
 			"rounded",
@@ -82,7 +94,10 @@ var g = /*@__PURE__*/ s({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		]), m(b) ? (d(), i("div", u(l({ key: 0 }, m(y))), [o(m(e), l({
+		]), m(b) ? (d(), i("div", u(l({ key: 0 }, m(y))), [f(n.$slots, "footer", {
+			apply: m(S),
+			cancel: m(T)
+		}, () => [o(m(e), l({
 			variant: "flat",
 			color: "secondary",
 			onClick: m(T)
@@ -92,7 +107,7 @@ var g = /*@__PURE__*/ s({
 		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(D), { onClick: m(S) }), {
 			default: h(() => [a(p(m(x)), 1)]),
 			_: 1
-		}, 16, ["onClick"])], 16)) : r("", !0)], 16));
+		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));
 	}
 });
 //#endregion

package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts

@@ -1,22 +1,20 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DateRangeValue, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
-import { DateRangePickerOwnProps } from '../dateRangePicker.types';
-type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "color" | "rounded" | "showFooter" | "orientation" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DateRangeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DateRangePickerEmits, DateRangePickerOwnProps } from '../dateRangePicker.types';
+type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "color" | "rounded" | "orientation" | "startOfWeek">;
 type DateRangePickerMerged = MergeLibDefaults<DateRangePickerOwnProps, DateRangePickerLibDefaults>;
-export declare function useDateRangePicker(props: MaybeRefOrGetter<DateRangePickerOwnProps>, libDefaults: DateRangePickerLibDefaults, emit: {
-    (event: "change", value: null | DateRangeValue): void;
-    (event: "cancel"): void;
-}): {
+export declare function useDateRangePicker(props: MaybeRefOrGetter<DateRangePickerOwnProps>, libDefaults: DateRangePickerLibDefaults, emit: SetupContext<DateRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;
     displayValue: import('vue').ComputedRef<[Date, Date] | null>;
     handleCancel: () => void;
     calendarTokens: import('vue').ComputedRef<{
-        day: Partial<import('@bridge-ui/core').CalendarDay> | undefined;
-        color: Record<string, Partial<import('@bridge-ui/core').CalendarColorItem>> | undefined;
+        day: Partial<import('@bridge-ui/core/Tokens').CalendarDay> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').CalendarColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handleCalendarChange: (next: null | DateRangeValue) => void;

package/dist/Components/DateRangePicker/composables/useDateRangePicker.js

@@ -1,11 +1,15 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-import { computed as i, ref as a, toValue as o, useAttrs as s, watch as c } from "vue";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
-import { isNil as d, omit as f } from "es-toolkit/compat";
+import { FIELD_OVERLAY_INJECTION_KEY as i } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as a, inject as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
+import { get as d, isNil as f, omit as p } from "es-toolkit/compat";
+import { menuRoundedProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/DateRangePicker/composables/useDateRangePicker.ts
-var p = [
+var _ = [
+	"fill",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -28,62 +32,75 @@ var p = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function m(m, h, g) {
-	let _ = s(), v = e(), y = i(() => u({
-		bridgeKeys: p,
+function v(v, y, b) {
+	let x = l(), S = o(i, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), C = e(), w = a(() => g({
+		bridgeKeys: _,
 		props: {
-			..._,
-			...o(m)
+			...x,
+			...c(v)
 		}
-	})), { merged: b, entry: x } = n({
-		libDefaults: h,
+	})), { merged: T, entry: E } = n({
+		libDefaults: y,
 		componentName: "DateRangePicker",
-		props: () => y.value.componentProps
-	}), S = i(() => b.value.customProps), C = i(() => f(y.value.inheritedAttrs, ["onChange", "onCancel"])), w = r({
-		entry: x,
-		props: () => y.value.componentProps
-	}), T = i(() => o(m)), E = i(() => !d(T.value.value)), D = a(b.value.defaultValue ?? null), O = i(() => E.value ? T.value.value ?? null : D.value), k = a(O.value);
-	c(() => [O.value, b.value.showFooter], ([e, t]) => {
-		t && (k.value = e);
+		props: () => w.value.componentProps
+	}), D = a(() => T.value.customProps), O = a(() => p(w.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), k = r({
+		entry: E,
+		props: () => w.value.componentProps
+	}), A = a(() => c(v)), j = a(() => !f(A.value.value)), M = s(T.value.defaultValue ?? null), N = a(() => j.value ? A.value.value ?? null : M.value), P = s(N.value);
+	u(() => [N.value, T.value.showFooter], ([e, t]) => {
+		t && (P.value = e);
 	});
-	let A = i(() => b.value.showFooter ? k.value : O.value), j = i(() => ({
-		day: b.value.tokens?.calendar?.day ?? b.value.tokens?.day,
-		color: b.value.tokens?.calendar?.color ?? b.value.tokens?.color,
-		rounded: b.value.tokens?.calendar?.rounded ?? b.value.tokens?.rounded
-	})), M = (e) => {
-		E.value || (D.value = e), g("change", e);
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = a(() => ({
+		day: T.value.tokens?.calendar?.day ?? T.value.tokens?.day,
+		color: T.value.tokens?.calendar?.color ?? T.value.tokens?.color,
+		rounded: T.value.tokens?.calendar?.rounded ?? T.value.tokens?.rounded
+	})), L = (e) => {
+		j.value || (M.value = e), b("change", e);
 	};
 	return {
-		merged: b,
-		rootBind: i(() => t(S.value?.root, C.value, l({
-			"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-			[w.value.root ?? ""]: !0
-		}))),
-		footerBind: i(() => t(S.value?.footer, {}, l({
+		merged: T,
+		rootBind: a(() => {
+			let e = d(m, T.value.rounded ?? "md");
+			return t(D.value?.root, O.value, h({
+				"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+				"w-full": T.value.fill,
+				"w-fit": !T.value.fill,
+				[e]: !0,
+				[k.value.root ?? ""]: !0
+			}));
+		}),
+		footerBind: a(() => t(D.value?.footer, {}, h({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[w.value.footer ?? ""]: !0
+			[k.value.footer ?? ""]: !0
 		}))),
-		showFooter: i(() => !!b.value.showFooter),
+		showFooter: a(() => !!T.value.showFooter),
 		handleApply: () => {
-			M(k.value);
+			L(P.value), b("apply"), S.apply();
 		},
-		displayValue: A,
+		displayValue: F,
 		handleCancel: () => {
-			k.value = O.value, g("cancel");
+			P.value = N.value, b("cancel"), S.cancel();
 		},
-		calendarTokens: j,
+		calendarTokens: I,
 		handleCalendarChange: (e) => {
-			if (b.value.showFooter) {
-				k.value = e;
+			if (T.value.showFooter) {
+				P.value = e;
 				return;
 			}
-			M(e);
+			L(e);
 		},
-		applyLabel: i(() => v("Apply")),
-		cancelLabel: i(() => v("Cancel")),
-		applyButtonProps: i(() => S.value?.applyButton),
-		cancelButtonProps: i(() => S.value?.cancelButton)
+		applyLabel: a(() => C("Apply")),
+		cancelLabel: a(() => C("Cancel")),
+		applyButtonProps: a(() => D.value?.applyButton),
+		cancelButtonProps: a(() => D.value?.cancelButton)
 	};
 }
 //#endregion
-export { m as useDateRangePicker };
+export { v as useDateRangePicker };

package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { DateRangeValue, DisableDatesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { CalendarRangeOrientation } from '../CalendarRange';
@@ -42,6 +44,10 @@ export interface DateRangePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface DateRangePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -100,6 +106,19 @@ export interface DateRangePickerOwnProps {
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * When `true`, fills the container width.
+     * When `false` or unset, stays at the minimum width.
+     *
+     * @default false
+     */
+    fill?: boolean;
     /**
      * Hides month navigation / panel.
      *
@@ -149,13 +168,17 @@ export interface DateRangePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of calendar tiles and chrome.
+     * Border radius of the picker shell, calendar tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Calendar tiles keep a true pill when `rounded` is `full`.
      *
      * @default "md"
      */
     rounded?: MergeProps<CalendarRounded, DateRangePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -192,6 +215,13 @@ export interface DateRangePickerSlots {
      * @default undefined
      */
     day?: Slot<CalendarDateDayCell>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
 }
 export interface DateRangePickerTokens {
     /**

package/dist/Components/DateTimeField/DateTimeField.vue.d.ts

@@ -7,17 +7,23 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clear: () => any;
+    apply: () => any;
+    cancel: () => any;
     change: (value: Date | null) => any;
     close: () => any;
     open: () => any;
     "update:modelValue": (value: Date | null | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Date | null | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
+    showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js

@@ -3,13 +3,13 @@ import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
 import i from "../FormField/FormField.js";
-import ee from "../FieldOverlay/FieldOverlay.js";
-import { useDateTimeField as a } from "./composables/useDateTimeField.js";
-import o from "../DateTimePicker/DateTimePicker.js";
-import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode as p, createVNode as m, defineComponent as h, guardReactiveProps as g, isRef as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
+import a from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeField as o } from "./composables/useDateTimeField.js";
+import s from "../DateTimePicker/DateTimePicker.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 import { isUndefined as M } from "es-toolkit/compat";
 //#region src/Components/DateTimeField/DateTimeField.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ h({
+var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateTimeField",
 	props: /*@__PURE__*/ v({
@@ -26,6 +26,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		disableMonths: {},
 		disableTimes: {},
 		disableYears: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -36,7 +41,10 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		minDate: {},
 		minTime: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
@@ -69,38 +77,41 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ v([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
+	setup(g, { emit: v }) {
+		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
 			set: (e) => {
 				F.value = e, z.value = e;
 			},
 			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = a(I, B, L);
-		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(U) }, f({
-			default: k(() => [d("div", N, [d("input", x(g(D(W))), null, 16), D(Q) ? (S(), u("span", y({ key: 0 }, D(G), {
-				onClick: a[0] ||= (...e) => D(K) && D(K)(...e),
+		}), { open: V, fill: ee, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = o(I, B, L);
+		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(U) }, p({
+			default: k(() => [f("div", N, [f("input", x(_(D(W))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: o[0] ||= (...e) => D(K) && D(K)(...e),
 				"aria-label": D(R)("Clear"),
-				onKeydown: [a[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
-			}), [m(D(n), y({
+				onKeydown: [o[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [h(D(n), y({
 				icon: "clear",
 				size: D(Z)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : l("", !0)])]),
+			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
 			_: 2
 		}, [w(D(t)(D(r), e.$slots), (t) => ({
 			name: t,
-			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
-		}))]), 1032, ["field"]), m(D(ee), {
-			modelValue: D(V),
-			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D($)],
+			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
+		}))]), 1032, ["field"]), h(D(a), {
 			overlay: D(H),
-			"custom-props": D(re)
+			"model-value": D(V),
+			"custom-props": D(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [m(D(o), {
+			default: k(() => [h(D(s), {
+				fill: D(ee),
 				value: D(q),
 				class: b(D(Y)),
 				ampm: D(X).ampm,
@@ -115,6 +126,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				interval: D(X).interval,
 				"time-zone": D(X).timeZone,
 				"hide-years": D(X).hideYears,
+				error: D(U).invalidated.value,
 				color: D(U).merged.value.color,
 				"hide-months": D(X).hideMonths,
 				disabled: D(U).isDisabled.value,
@@ -129,14 +141,18 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"disable-years": D(X).disableYears,
 				"disable-months": D(X).disableMonths,
 				"hide-outside-days": D(X).hideOutsideDays
-			}, {
-				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
-				_: 3
-			}, 8, /* @__PURE__ */ "value.class.ampm.show-footer.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
+			}, p({
+				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
+				_: 2
+			}, [e.$slots.footer ? {
+				name: "footer",
+				fn: k((t) => [T(e.$slots, "footer", x(_(t)))]),
+				key: "0"
+			} : void 0]), 1032, /* @__PURE__ */ "fill.value.class.ampm.show-footer.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.error.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));