@bridge-ui/vue 0.0.10 → 0.1.0

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

@@ -6,23 +6,24 @@ import { FormFieldOwnProps } from '../../FormField/formField.types';
  */
 export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Ref<Date | null | undefined>, emit: SetupContext<DateTimeFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
-    overlay: import('vue').ComputedRef<import('@bridge-ui/core').FieldOverlayMode | undefined>;
+    fill: import('vue').ComputedRef<boolean>;
+    overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
         }>;
         merged: import('vue').ComputedRef<Omit<FormFieldOwnProps, "color" | "size" | "rounded" | "variant" | "errorIcon" | "showErrorIcon"> & {
-            color: NonNullable<keyof import('@bridge-ui/core').FormFieldColor | undefined>;
-            size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
-            rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
-            variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
+            color: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldColor | undefined>;
+            size: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldSize | undefined>;
+            rounded: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
+            variant: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             errorIcon: NonNullable<import('../../..').IconSource | undefined>;
             showErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
-        endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        endBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             onCopy?: ((payload: ClipboardEvent) => void) | undefined;
             onCut?: ((payload: ClipboardEvent) => void) | undefined;
             onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -142,7 +143,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             'aria-expanded'?: (boolean | "true" | "false") | undefined;
             'aria-flowto'?: string | undefined | undefined;
             'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-            'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-haspopup'?: "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | "dialog" | undefined;
             'aria-hidden'?: (boolean | "true" | "false") | undefined;
             'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
             'aria-keyshortcuts'?: string | undefined | undefined;
@@ -178,7 +179,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -212,9 +213,9 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             class: string;
         }>>;
         controlId: import('vue').ComputedRef<string>;
-        errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        errorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         errorIcon: import('vue').ComputedRef<NonNullable<import('../../..').IconSource | undefined>>;
-        inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
+        inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
             readonly: boolean;
@@ -438,31 +439,31 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         }, 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">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
-        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>>;
-        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>>;
+        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
+        containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
-        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
-        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
-        insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        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", {}, {}>>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
-    inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<import('@bridge-ui/core').MergePartBind<object, "class", {
+    inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
         id: string;
         disabled: boolean;
         readonly: boolean;
@@ -684,13 +685,13 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         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", {
-        readonly: boolean;
         value: string;
+        readonly: boolean;
         onFocus: (event: FocusEvent) => void;
         onKeydown: (event: KeyboardEvent) => void;
     }, undefined>>;
     clearable: import('vue').ComputedRef<boolean>;
-    clearBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    clearBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         tabindex: number;
         role: string;
         "data-field-clear": boolean;
@@ -700,10 +701,10 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "classes" | "customProps" | "overlay" | "showFooter" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    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">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
-    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
+    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;
     handleOpenChange: (next: boolean) => void;
     handlePickerChange: (next: Date | null) => void;
@@ -724,9 +725,9 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;
             placement: import('@floating-ui/utils').Placement;
-            rounded?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
-            shadow?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('../../Menu').MenuShadowOverrides>;
-            strategy?: import('@bridge-ui/core').PositionStrategy;
+            rounded?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
+            shadow?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuShadow, import('../../Menu').MenuShadowOverrides>;
+            strategy?: import('@bridge-ui/core/Runtime').PositionStrategy;
             teleportTo?: false | string;
         };
     }>;

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

@@ -1,111 +1,99 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
-import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
-import { cn as f, isFieldOverlayDialog as p, resolveFieldOverlay as m, resolveFieldShowFooter as h, splitComponentProps as g } from "@bridge-ui/core";
-import { get as _, isNil as v, omit as y } from "es-toolkit/compat";
-import { colorProps as b } from "@bridge-ui/core/Tokens/Listbox";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o, usePickerFill as s } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as c, useFormField as l } from "../../FormField/composables/useFormField.js";
+import { computed as u, ref as d, useAttrs as f, useSlots as p } from "vue";
+import { get as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { resolveFieldOverlay as _, resolveFieldPickerClassName as v } from "@bridge-ui/core/Domain";
+import { listboxColorProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimeField/composables/useDateTimeField.ts
-var x = [
-	"ampm",
-	"classes",
-	"maxDate",
-	"maxTime",
-	"minDate",
-	"minTime",
-	"overlay",
-	"interval",
-	"timeZone",
-	"clearable",
-	"hideYears",
-	"hideMonths",
-	"showFooter",
-	"customProps",
-	"defaultView",
-	"showSeconds",
-	"startOfWeek",
-	"defaultValue",
-	"disableDates",
-	"disableTimes",
-	"disableYears",
-	"hideWeekdays",
-	"disableMonths",
-	"hideOutsideDays"
-];
-function S(e, t, n, r, i) {
-	return v(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
+var S = /* @__PURE__ */ "ampm.fill.classes.maxDate.maxTime.minDate.minTime.overlay.editable.interval.timeZone.clearable.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function ee(e, t, n, r, i) {
+	return h(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
 		ampm: r,
 		showSeconds: i
 	})}`.trim();
 }
 function C(C, w, T) {
-	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => g({
+	let E = f(), D = p(), O = e(), k = r(), A = t(), j = d(!1), M = d(null), N = u(() => x({
 		props: {
 			...E,
 			...C
 		},
-		bridgeKeys: x
-	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !v(I.value)), z = c(() => m(P.value.overlay, k.mobile)), B = c(() => p(z.value) ? "w-full shadow-none" : void 0), ee = (e) => {
+		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({
+		overlay: z,
+		componentName: "DateTimeField",
+		fill: () => P.value.fill
+	}), V = u(() => v(B.value, z.value)), H = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
-	function V(e) {
-		j.value = e, T(e ? "open" : "close");
+	function U(e) {
+		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let H = c(() => y(N.value.inheritedAttrs, ["class"])), U = c(() => {
-		let e = g({
-			bridgeKeys: o,
-			props: H.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: s, ...c } = P.value.customProps ?? {};
+	let W = u(() => g(N.value.inheritedAttrs, ["class"])), G = u(() => {
+		let e = x({
+			bridgeKeys: c,
+			props: W.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: o, ...s } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
 			classes: P.value.classes,
 			customProps: {
-				...c,
-				container: i(c.container, {}, {
-					ref: ee,
-					class: f({ "cursor-pointer": !C.disabled && !C.readonly }),
+				...s,
+				container: i(s.container, {}, {
+					ref: H,
+					class: b({ "cursor-pointer": !C.disabled && !C.readonly }),
 					onClick: (e) => {
-						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
 					}
 				})
 			}
 		};
-	}), W = s(() => U.value, {
+	}), K = l(() => G.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateTimeField" }), G = c(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = c(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
-	function q(e) {
+	}, { componentName: "DateTimeField" }), q = u(() => R.value && L.value && !C.readonly && !K.isDisabled.value), J = u(() => ee(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function Y(e) {
 		w.value = e, T("change", e);
 	}
-	let J = c(() => h(P.value.showFooter, k.mobile));
-	function Y(e) {
-		q(e), V(!1);
+	let X = o({
+		overlay: z,
+		componentName: "DateTimeField",
+		showFooter: () => P.value.showFooter
+	});
+	function Z(e) {
+		if (Y(e), X.value) {
+			T("apply");
+			return;
+		}
+		U(!1);
 	}
-	function X() {
-		V(!1);
+	function Q() {
+		T("cancel");
 	}
-	function Z(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), V(!1));
+	function $(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (Y(null), T("clear"), U(!1));
 	}
-	function Q(e) {
+	function te(e) {
 		e.preventDefault();
 	}
-	let $ = c(() => i({
-		readonly: !0,
-		value: K.value,
+	let ne = u(() => i({
+		value: J.value,
+		readonly: !P.value.editable || K.inputBind.value.readonly,
 		onFocus: (e) => {
-			W.inputBind.value.onFocus?.(e), V(!0);
+			K.inputBind.value.onFocus?.(e), U(!0);
 		},
 		onKeydown: (e) => {
-			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
+			K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
 		}
-	}, void 0, W.inputBind.value)), te = c(() => P.value.overlay), ne = c(() => ({
+	}, void 0, K.inputBind.value)), re = u(() => P.value.overlay), ie = u(() => ({
 		modal: P.value.customProps?.modal,
 		drawer: P.value.customProps?.drawer,
 		menu: {
@@ -113,38 +101,39 @@ function C(C, w, T) {
 			placement: "bottom-start",
 			...P.value.customProps?.menu
 		}
-	})), re = c(() => P.value.customProps?.dateTimePicker), ie = c(() => a(W.merged.value.size)), ae = c(() => _(b, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), ae = u(() => P.value.customProps?.dateTimePicker), oe = u(() => a(K.merged.value.size)), se = u(() => m(y, [K.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: j,
-		overlay: te,
+		fill: B,
+		overlay: re,
 		hasValue: R,
-		formField: W,
-		inputBind: $,
+		formField: K,
+		inputBind: ne,
 		clearable: L,
-		clearBind: c(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: Q,
-			class: f({
+			onMousedown: te,
+			class: b({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[ae.value]: !0,
+				[se.value]: !0,
 				[P.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: Z,
+		clearValue: $,
 		modelValue: I,
-		showFooter: J,
-		pickerClass: B,
+		showFooter: X,
+		pickerClass: V,
 		dateTimeOnly: P,
 		containerRef: M,
-		clearIconSize: ie,
-		showClearIcon: G,
-		handleOpenChange: V,
-		handlePickerChange: Y,
-		handlePickerCancel: X,
-		overlayCustomProps: ne,
-		dateTimePickerCustomProps: re
+		clearIconSize: oe,
+		showClearIcon: q,
+		handleOpenChange: U,
+		handlePickerChange: Z,
+		handlePickerCancel: Q,
+		overlayCustomProps: ie,
+		dateTimePickerCustomProps: ae
 	};
 }
 //#endregion

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

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, Slot } from 'vue';
-import { DisableDatesInput, DisableTimesInput, FieldOverlayMode, MergeHtmlProps, StartOfWeek } from '@bridge-ui/core';
+import { DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, StartOfWeek } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { CalendarView } from '../Calendar/calendar.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { DateTimePickerCustomProps } from '../DateTimePicker/dateTimePicker.types';
@@ -47,6 +48,14 @@ export interface DateTimeFieldCustomProps extends FormFieldCustomProps {
     modal?: Partial<ModalOwnProps>;
 }
 export interface DateTimeFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selected date-time changes.
      */
@@ -125,6 +134,22 @@ export interface DateTimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" |
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * Unlocks the input for typing. The field does not parse or commit typed
+     * text; use the picker (or your own component) to update the value. When
+     * unset, the input is read-only.
+     *
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * When `true`, the picker fills the overlay width.
+     * When `false`, it stays at its minimum width.
+     * Unset: `true` for `drawer`, `false` for `menu` and `modal`.
+     *
+     * @default undefined
+     */
+    fill?: boolean;
     /**
      * Hides month navigation / panel.
      *
@@ -187,10 +212,10 @@ export interface DateTimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" |
      */
     overlay?: FieldOverlayMode;
     /**
-     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
-     * on mobile.
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
     /**
@@ -219,6 +244,13 @@ export interface DateTimeFieldSlots extends FormFieldSlots {
      * @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 type DateTimeFieldProps = MergeHtmlProps<DateTimeFieldOwnProps, InputHTMLAttributes> & {
     /**

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

@@ -1,12 +1,16 @@
 import { DateTimePickerOwnProps, DateTimePickerSlots } from './dateTimePicker.types';
 type __VLS_Slots = DateTimePickerSlots;
 declare const __VLS_base: import('vue').DefineComponent<DateTimePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
     cancel: () => any;
     change: (value: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<DateTimePickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    showFooter: 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;

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

@@ -20,6 +20,8 @@ var b = /*@__PURE__*/ u({
 		disableMonths: {},
 		disableTimes: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -31,14 +33,21 @@ var b = /*@__PURE__*/ u({
 		minTime: {},
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
 	setup(u, { emit: b }) {
 		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, timeTokens: E, handleApply: D, cancelLabel: O, contentBind: k, displayValue: A, handleCancel: j, calendarBind: M, timeFillBind: N, timeSizerBind: P, timePanelBind: F, calendarTokens: I, applyButtonProps: L, cancelButtonProps: R, handlePanelChange: z, handleCalendarChange: B, timePanelCustomProps: V } = n(u, {
 			ampm: !1,
@@ -46,13 +55,14 @@ var b = /*@__PURE__*/ u({
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",
-			showFooter: !1,
 			showSeconds: !1,
 			defaultView: "date"
 		}, b);
 		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(k)) }, [s("div", { class: p(v(M)) }, [l(t, {
+			fill: v(x).fill,
 			color: v(x).color,
 			value: v(A),
+			error: v(x).error,
 			tokens: v(I),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
@@ -74,8 +84,10 @@ var b = /*@__PURE__*/ u({
 			day: y((e) => [g(n.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
 			"value",
+			"error",
 			"tokens",
 			"rounded",
 			"max-date",
@@ -109,9 +121,11 @@ var b = /*@__PURE__*/ u({
 			}, null, 2)) : a("", !0)
 		], 2), s("div", { class: p(v(N)) }, [l(v(i), {
 			ampm: v(x).ampm,
+			fill: v(x).fill,
 			tokens: v(E),
 			color: v(x).color,
 			value: v(A),
+			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
 			"min-time": v(x).minTime,
@@ -125,9 +139,11 @@ var b = /*@__PURE__*/ u({
 			"custom-props": v(V)
 		}, null, 8, [
 			"ampm",
+			"fill",
 			"tokens",
 			"color",
 			"value",
+			"error",
 			"rounded",
 			"max-time",
 			"min-time",
@@ -139,7 +155,10 @@ var b = /*@__PURE__*/ u({
 			"show-seconds",
 			"disable-times",
 			"custom-props"
-		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [l(v(e), f({
+		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
+			apply: v(D),
+			cancel: v(j)
+		}, () => [l(v(e), f({
 			variant: "flat",
 			color: "secondary",
 			onClick: v(j)
@@ -149,7 +168,7 @@ var b = /*@__PURE__*/ u({
 		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
 			default: y(() => [c(_(v(T)), 1)]),
 			_: 1
-		}, 16, ["onClick"])], 16)) : a("", !0)], 16));
+		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));
 	}
 });
 //#endregion

package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts

@@ -1,21 +1,19 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DatePickerModel, LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
-import { DateTimePickerOwnProps } from '../dateTimePicker.types';
-type DateTimePickerLibDefaults = LibDefaultsShape<DateTimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "defaultView" | "showSeconds" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DatePickerModel, TimeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DateTimePickerEmits, DateTimePickerOwnProps } from '../dateTimePicker.types';
+type DateTimePickerLibDefaults = LibDefaultsShape<DateTimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "defaultView" | "showSeconds" | "startOfWeek">;
 type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePickerLibDefaults>;
 /**
  * Owns controlled/uncontrolled datetime value, optional footer draft, and binds.
  */
-export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: {
-    (event: "change", value: Date | null): void;
-    (event: "cancel"): void;
-}): {
+export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: SetupContext<DateTimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
-    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<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     timeTokens: import('vue').ComputedRef<{
-        color: Record<string, Partial<import('@bridge-ui/core').TimeColorItem>> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').TimeColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handleApply: () => void;
@@ -27,8 +25,8 @@ export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePicker
     timeSizerBind: import('vue').ComputedRef<string>;
     timePanelBind: import('vue').ComputedRef<string>;
     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;
     }>;
     handlePanelChange: (next: null | TimeValue) => void;