@bridge-ui/vue 0.7.0 → 0.9.0

package/dist/Components/DatePicker/composables/useDatePicker.js

@@ -1,12 +1,11 @@
-import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
-import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-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";
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { FIELD_OVERLAY_INJECTION_KEY as r } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as i, inject as a, ref as o, toValue as s, useAttrs as c, watch as l } from "vue";
+import { get as u, isNil as d, omit as f } from "es-toolkit/compat";
+import { menuRoundedProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/DatePicker/composables/useDatePicker.ts
-var _ = [
+var g = [
 	"fill",
 	"color",
 	"error",
@@ -33,70 +32,68 @@ var _ = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function v(v, y, b) {
-	let x = l(), S = o(i, {
+function _(_, v, y) {
+	let b = c(), x = a(r, {
 		apply: () => void 0,
 		cancel: () => void 0
-	}), C = e(), w = a(() => g({
-		bridgeKeys: _,
+	}), S = i(() => h({
+		bridgeKeys: g,
 		props: {
-			...x,
-			...c(v)
+			...b,
+			...s(_)
 		}
-	})), { merged: T, entry: E } = n({
-		libDefaults: y,
+	})), { merged: C, entry: w } = t({
+		libDefaults: v,
 		componentName: "DatePicker",
-		props: () => w.value.componentProps
-	}), D = a(() => T.value.customProps), O = a(() => p(w.value.inheritedAttrs, [
+		props: () => S.value.componentProps
+	}), T = i(() => C.value.customProps), E = i(() => f(S.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);
+	])), D = n({
+		entry: w,
+		props: () => S.value.componentProps
+	}), O = i(() => s(_)), k = i(() => !d(O.value.value)), A = o(C.value.defaultValue ?? null), j = i(() => k.value ? O.value.value ?? null : A.value), M = o(j.value);
+	l(() => [j.value, C.value.showFooter], ([e, t]) => {
+		t && (M.value = e);
 	});
-	let F = a(() => T.value.showFooter ? P.value : N.value), I = (e) => {
-		j.value || (M.value = e), b("change", e);
+	let N = i(() => C.value.showFooter ? M.value : j.value), P = (e) => {
+		k.value || (A.value = e), y("change", e);
 	};
 	return {
-		merged: T,
-		rootBind: a(() => {
-			let e = d(m, T.value.rounded ?? "md");
-			return t(D.value?.root, O.value, h({
+		merged: C,
+		rootBind: i(() => {
+			let t = u(p, C.value.rounded ?? "md");
+			return e(T.value?.root, E.value, m({
 				"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
+				"w-full": C.value.fill,
+				"w-fit": !C.value.fill,
+				[t]: !0,
+				[D.value.root ?? ""]: !0
 			}));
 		}),
-		footerBind: a(() => t(D.value?.footer, {}, h({
+		footerBind: i(() => e(T.value?.footer, {}, m({
 			"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,
-			[k.value.footer ?? ""]: !0
+			[D.value.footer ?? ""]: !0
 		}))),
-		showFooter: a(() => !!T.value.showFooter),
+		showFooter: i(() => !!C.value.showFooter),
 		handleApply: () => {
-			I(P.value), b("apply"), S.apply();
+			P(M.value), y("apply"), x.apply();
 		},
-		displayValue: F,
+		displayValue: N,
 		handleCancel: () => {
-			P.value = N.value, b("cancel"), S.cancel();
+			M.value = j.value, y("cancel"), x.cancel();
 		},
 		handleCalendarChange: (e) => {
-			if (T.value.showFooter) {
-				P.value = e;
+			if (C.value.showFooter) {
+				M.value = e;
 				return;
 			}
-			I(e);
+			P(e);
 		},
-		applyLabel: a(() => C("Apply")),
-		cancelLabel: a(() => C("Cancel")),
-		applyButtonProps: a(() => D.value?.applyButton),
-		cancelButtonProps: a(() => D.value?.cancelButton)
+		applyButtonProps: i(() => T.value?.applyButton),
+		cancelButtonProps: i(() => T.value?.cancelButton)
 	};
 }
 //#endregion
-export { v as useDatePicker };
+export { _ as useDatePicker };

package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		classes: {},
 		clearable: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		customProps: {},
 		defaultValue: {},
@@ -57,6 +57,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: {
 			type: Boolean,
 			default: !0

package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts

@@ -7,7 +7,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
     fill: import('vue').ComputedRef<boolean>;
     overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
-    dateOnly: import('vue').ComputedRef<Pick<DateRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "editable">>;
+    dateOnly: import('vue').ComputedRef<Pick<DateRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "editable" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "defaultValue" | "clearable" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate">>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
@@ -435,7 +435,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -460,6 +460,8 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -684,7 +686,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;

package/dist/Components/DateRangeField/composables/useDateRangeField.js

@@ -41,7 +41,7 @@ function E(_, E, D) {
 			..._
 		},
 		bridgeKeys: w
-	})), F = u(() => P.value.componentProps), I = u(() => j(F.value.timeZone)), L = u(() => E.value ?? null), R = u(() => F.value.clearable !== !1), z = u(() => !h(L.value)), B = (e) => {
+	})), F = u(() => P.value.componentProps), I = u(() => j(F.value.timeZone)), L = u(() => E.value ?? null), R = u(() => F.value.clearable === !0), z = u(() => !h(L.value)), B = (e) => {
 		N.value = e instanceof HTMLElement ? e : null;
 	};
 	function V(e) {

package/dist/Components/DateRangeField/dateRangeField.types.d.ts

@@ -83,7 +83,7 @@ export interface DateRangeFieldOwnProps extends Omit<FormFieldOwnProps, "field"
     /**
      * Whether the value can be cleared.
      *
-     * @default true
+     * @default false
      */
     clearable?: boolean;
     /**

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

@@ -1,4 +1,4 @@
-import e from "../Button/Button.js";
+import e from "../ActionFooter/ActionFooter.js";
 import t from "../CalendarRange/CalendarRange.js";
 import { useDateRangePicker as n } from "./composables/useDateRangePicker.js";
 import { createCommentVNode as r, createElementBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeProps as u, openBlock as d, renderSlot as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
@@ -40,7 +40,7 @@ var g = /*@__PURE__*/ s({
 		"change"
 	],
 	setup(s, { emit: g }) {
-		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, applyButtonProps: E, cancelButtonProps: D, handleCalendarChange: O } = n(s, {
+		let { merged: _, rootBind: v, footerBind: y, showFooter: b, handleApply: x, displayValue: S, handleCancel: C, applyButtonProps: w, cancelButtonProps: T, handleCalendarChange: E } = n(s, {
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",
@@ -50,7 +50,7 @@ var g = /*@__PURE__*/ s({
 			fill: m(_).fill,
 			color: m(_).color,
 			error: m(_).error,
-			value: m(w),
+			value: m(S),
 			rounded: m(_).rounded,
 			"max-date": m(_).maxDate,
 			"min-date": m(_).minDate,
@@ -60,7 +60,7 @@ var g = /*@__PURE__*/ s({
 			"hide-years": m(_).hideYears,
 			"hide-months": m(_).hideMonths,
 			orientation: m(_).orientation,
-			onChange: m(O),
+			onChange: m(E),
 			"start-of-week": m(_).startOfWeek,
 			"disable-dates": m(_).disableDates,
 			"hide-weekdays": m(_).hideWeekdays,
@@ -92,19 +92,20 @@ var g = /*@__PURE__*/ s({
 			"disable-months",
 			"hide-outside-days"
 		]), 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)
-		}, m(D)), {
-			default: h(() => [a(p(m(C)), 1)]),
-			_: 1
-		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(E), { onClick: m(S) }), {
-			default: h(() => [a(p(m(x)), 1)]),
-			_: 1
-		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));
+			apply: m(x),
+			cancel: m(C)
+		}, () => [o(m(e), {
+			onApply: m(x),
+			onCancel: m(C),
+			"custom-props": {
+				applyButton: m(w),
+				cancelButton: m(T)
+			}
+		}, null, 8, [
+			"onApply",
+			"onCancel",
+			"custom-props"
+		])])], 16)) : r("", !0)], 16));
 	}
 });
 //#endregion

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

@@ -6,15 +6,13 @@ type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "col
 type DateRangePickerMerged = MergeLibDefaults<DateRangePickerOwnProps, DateRangePickerLibDefaults>;
 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/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>>>;
+    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" | "showFooter" | "customProps" | "disabled" | "rounded" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate">>>>;
     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;
     handleCalendarChange: (next: null | DateRangeValue) => void;
-    applyLabel: import('vue').ComputedRef<string>;
-    cancelLabel: import('vue').ComputedRef<string>;
     applyButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
     cancelButtonProps: import('vue').ComputedRef<Partial<import('../../Button').ButtonProps> | undefined>;
 };

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

@@ -1,12 +1,11 @@
-import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
-import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-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";
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { FIELD_OVERLAY_INJECTION_KEY as r } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as i, inject as a, ref as o, toValue as s, useAttrs as c, watch as l } from "vue";
+import { get as u, isNil as d, omit as f } from "es-toolkit/compat";
+import { menuRoundedProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/DateRangePicker/composables/useDateRangePicker.ts
-var _ = [
+var g = [
 	"fill",
 	"color",
 	"error",
@@ -31,70 +30,68 @@ var _ = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function v(v, y, b) {
-	let x = l(), S = o(i, {
+function _(_, v, y) {
+	let b = c(), x = a(r, {
 		apply: () => void 0,
 		cancel: () => void 0
-	}), C = e(), w = a(() => g({
-		bridgeKeys: _,
+	}), S = i(() => h({
+		bridgeKeys: g,
 		props: {
-			...x,
-			...c(v)
+			...b,
+			...s(_)
 		}
-	})), { merged: T, entry: E } = n({
-		libDefaults: y,
+	})), { merged: C, entry: w } = t({
+		libDefaults: v,
 		componentName: "DateRangePicker",
-		props: () => w.value.componentProps
-	}), D = a(() => T.value.customProps), O = a(() => p(w.value.inheritedAttrs, [
+		props: () => S.value.componentProps
+	}), T = i(() => C.value.customProps), E = i(() => f(S.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);
+	])), D = n({
+		entry: w,
+		props: () => S.value.componentProps
+	}), O = i(() => s(_)), k = i(() => !d(O.value.value)), A = o(C.value.defaultValue ?? null), j = i(() => k.value ? O.value.value ?? null : A.value), M = o(j.value);
+	l(() => [j.value, C.value.showFooter], ([e, t]) => {
+		t && (M.value = e);
 	});
-	let F = a(() => T.value.showFooter ? P.value : N.value), I = (e) => {
-		j.value || (M.value = e), b("change", e);
+	let N = i(() => C.value.showFooter ? M.value : j.value), P = (e) => {
+		k.value || (A.value = e), y("change", e);
 	};
 	return {
-		merged: T,
-		rootBind: a(() => {
-			let e = d(m, T.value.rounded ?? "md");
-			return t(D.value?.root, O.value, h({
+		merged: C,
+		rootBind: i(() => {
+			let t = u(p, C.value.rounded ?? "md");
+			return e(T.value?.root, E.value, m({
 				"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
+				"w-full": C.value.fill,
+				"w-fit": !C.value.fill,
+				[t]: !0,
+				[D.value.root ?? ""]: !0
 			}));
 		}),
-		footerBind: a(() => t(D.value?.footer, {}, h({
+		footerBind: i(() => e(T.value?.footer, {}, m({
 			"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,
-			[k.value.footer ?? ""]: !0
+			[D.value.footer ?? ""]: !0
 		}))),
-		showFooter: a(() => !!T.value.showFooter),
+		showFooter: i(() => !!C.value.showFooter),
 		handleApply: () => {
-			I(P.value), b("apply"), S.apply();
+			P(M.value), y("apply"), x.apply();
 		},
-		displayValue: F,
+		displayValue: N,
 		handleCancel: () => {
-			P.value = N.value, b("cancel"), S.cancel();
+			M.value = j.value, y("cancel"), x.cancel();
 		},
 		handleCalendarChange: (e) => {
-			if (T.value.showFooter) {
-				P.value = e;
+			if (C.value.showFooter) {
+				M.value = e;
 				return;
 			}
-			I(e);
+			P(e);
 		},
-		applyLabel: a(() => C("Apply")),
-		cancelLabel: a(() => C("Cancel")),
-		applyButtonProps: a(() => D.value?.applyButton),
-		cancelButtonProps: a(() => D.value?.cancelButton)
+		applyButtonProps: i(() => T.value?.applyButton),
+		cancelButtonProps: i(() => T.value?.cancelButton)
 	};
 }
 //#endregion
-export { v as useDateRangePicker };
+export { _ as useDateRangePicker };

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

@@ -17,7 +17,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		classes: {},
 		clearable: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		customProps: {},
 		defaultValue: {},
@@ -63,6 +63,7 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: {
 			type: Boolean,
 			default: !0

package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts

@@ -436,7 +436,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -461,6 +461,8 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -685,7 +687,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
+    }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "disabled" | "endIcon" | "rounded" | "startIcon" | "variant" | "label" | "start" | "required" | "corner" | "description" | "errorMessage" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon">>>, "class", {
         value: string;
         readonly: boolean;
         onFocus: (event: FocusEvent) => void;
@@ -703,7 +705,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
     pickerClass: import('vue').ComputedRef<string | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "editable" | "hideMonths" | "hideOutsideDays" | "hideWeekdays" | "hideYears" | "startOfWeek" | "timeZone" | "ampm" | "interval" | "showSeconds" | "defaultValue" | "clearable" | "disableDates" | "disableMonths" | "disableYears" | "maxDate" | "minDate" | "defaultView" | "disableTimes" | "maxTime" | "minTime">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateTimeField/composables/useDateTimeField.js

@@ -23,7 +23,7 @@ function C(C, w, T) {
 			...C
 		},
 		bridgeKeys: S
-	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
+	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable === !0), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
 		overlay: z,
 		componentName: "DateTimeField",
 		fill: () => P.value.fill

package/dist/Components/DateTimeField/dateTimeField.types.d.ts

@@ -89,7 +89,7 @@ export interface DateTimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" |
     /**
      * Whether the value can be cleared.
      *
-     * @default true
+     * @default false
      */
     clearable?: boolean;
     /**

package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import e from "../Button/Button.js";
+import e from "../ActionFooter/ActionFooter.js";
 import t from "../Calendar/Calendar.js";
 import { useDateTimePicker as n } from "./composables/useDateTimePicker.js";
 import { TIME_PANEL_COLUMN_WIDTH_CLASS as r } from "../TimePanel/composables/useTimePanel.js";
@@ -48,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"change"
 	],
 	setup(u, { emit: b }) {
-		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, handleApply: E, cancelLabel: D, contentBind: O, displayValue: k, handleCancel: A, calendarBind: j, timeFillBind: M, timeSizerBind: N, timePanelBind: P, applyButtonProps: F, cancelButtonProps: I, handlePanelChange: L, handleCalendarChange: R, timePanelCustomProps: z } = n(u, {
+		let { merged: x, rootBind: S, footerBind: C, showFooter: w, handleApply: T, contentBind: E, displayValue: D, handleCancel: O, calendarBind: k, timeFillBind: A, timeSizerBind: j, timePanelBind: M, applyButtonProps: N, cancelButtonProps: P, handlePanelChange: F, handleCalendarChange: I, timePanelCustomProps: L } = n(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -57,10 +57,10 @@ var b = /*@__PURE__*/ u({
 			showSeconds: !1,
 			defaultView: "date"
 		}, b);
-		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(O)) }, [s("div", { class: p(v(j)) }, [l(t, {
+		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(E)) }, [s("div", { class: p(v(k)) }, [l(t, {
 			fill: v(x).fill,
 			color: v(x).color,
-			value: v(k),
+			value: v(D),
 			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
@@ -70,7 +70,7 @@ var b = /*@__PURE__*/ u({
 			"time-zone": v(x).timeZone,
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
-			onChange: v(R),
+			onChange: v(I),
 			"default-view": v(x).defaultView,
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
@@ -102,9 +102,9 @@ var b = /*@__PURE__*/ u({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		])], 2), s("div", { class: p(v(P)) }, [s("div", {
+		])], 2), s("div", { class: p(v(M)) }, [s("div", {
 			"aria-hidden": "true",
-			class: p(v(N))
+			class: p(v(j))
 		}, [
 			s("div", { class: p(v(r)) }, null, 2),
 			s("div", { class: p(v(r)) }, null, 2),
@@ -116,11 +116,11 @@ var b = /*@__PURE__*/ u({
 				key: 1,
 				class: p(v(r))
 			}, null, 2)) : a("", !0)
-		], 2), s("div", { class: p(v(M)) }, [l(v(i), {
+		], 2), s("div", { class: p(v(A)) }, [l(v(i), {
 			ampm: v(x).ampm,
 			fill: v(x).fill,
 			color: v(x).color,
-			value: v(k),
+			value: v(D),
 			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
@@ -129,10 +129,10 @@ var b = /*@__PURE__*/ u({
 			interval: v(x).interval,
 			"read-only": v(x).readOnly,
 			"time-zone": v(x).timeZone,
-			onChange: v(L),
+			onChange: v(F),
 			"show-seconds": v(x).showSeconds,
 			"disable-times": v(x).disableTimes,
-			"custom-props": v(z)
+			"custom-props": v(L)
 		}, null, 8, [
 			"ampm",
 			"fill",
@@ -151,19 +151,20 @@ var b = /*@__PURE__*/ u({
 			"disable-times",
 			"custom-props"
 		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
-			apply: v(E),
-			cancel: v(A)
-		}, () => [l(v(e), f({
-			variant: "flat",
-			color: "secondary",
-			onClick: v(A)
-		}, v(I)), {
-			default: y(() => [c(_(v(D)), 1)]),
-			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(F), { onClick: v(E) }), {
-			default: y(() => [c(_(v(T)), 1)]),
-			_: 1
-		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));
+			apply: v(T),
+			cancel: v(O)
+		}, () => [l(v(e), {
+			onApply: v(T),
+			onCancel: v(O),
+			"custom-props": {
+				applyButton: v(N),
+				cancelButton: v(P)
+			}
+		}, null, 8, [
+			"onApply",
+			"onCancel",
+			"custom-props"
+		])])], 16)) : a("", !0)], 16));
 	}
 });
 //#endregion