@bridge-ui/vue 0.0.11 → 0.1.1

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.js

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

package/dist/Components/DateTimeRangeField/dateTimeRangeField.types.d.ts

@@ -128,6 +128,22 @@ export interface DateTimeRangeFieldOwnProps extends Omit<FormFieldOwnProps, "fie
      * @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.
      *

package/dist/Components/DateTimeRangePicker/DateTimeRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -19,6 +19,8 @@ var b = /*@__PURE__*/ u({
 		disableMonths: {},
 		disableTimes: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -38,7 +40,6 @@ var b = /*@__PURE__*/ u({
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -47,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"change"
 	],
 	setup(u, { emit: b }) {
-		let { merged: x, rootBind: S, timeBind: C, footerBind: w, showFooter: T, applyLabel: E, timeTokens: D, handleApply: O, cancelLabel: k, contentBind: A, displayValue: j, handleCancel: M, calendarBind: N, timeFillBind: P, endTimeValue: F, timeSizerBind: I, calendarTokens: L, startTimeValue: R, applyButtonProps: z, cancelButtonProps: B, handleCalendarChange: V, handleEndPanelChange: H, timePanelCustomProps: U, handleStartPanelChange: W } = i(u, {
+		let { merged: x, rootBind: S, timeBind: C, footerBind: w, showFooter: T, applyLabel: E, handleApply: D, cancelLabel: O, contentBind: k, displayValue: A, handleCancel: j, calendarBind: M, timeFillBind: N, endTimeValue: P, timeSizerBind: F, startTimeValue: I, applyButtonProps: L, cancelButtonProps: R, handleCalendarChange: z, handleEndPanelChange: B, timePanelCustomProps: V, handleStartPanelChange: H } = i(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -56,10 +57,11 @@ var b = /*@__PURE__*/ u({
 			showSeconds: !1,
 			orientation: "horizontal"
 		}, b);
-		return (i, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(A)) }, [s("div", { class: p(v(N)) }, [l(t, {
+		return (i, 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(j),
-			tokens: v(L),
+			error: v(x).error,
+			value: v(A),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
 			"min-date": v(x).minDate,
@@ -69,7 +71,7 @@ var b = /*@__PURE__*/ u({
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
 			orientation: v(x).orientation,
-			onChange: v(V),
+			onChange: v(z),
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
 			"hide-weekdays": v(x).hideWeekdays,
@@ -85,7 +87,7 @@ var b = /*@__PURE__*/ u({
 			day: y((e) => [g(i.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			startAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
 				"aria-hidden": "true",
-				class: p(v(I))
+				class: p(v(F))
 			}, [
 				s("div", { class: p(v(n)) }, null, 2),
 				s("div", { class: p(v(n)) }, null, 2),
@@ -97,11 +99,12 @@ var b = /*@__PURE__*/ u({
 					key: 1,
 					class: p(v(n))
 				}, null, 2)) : a("", !0)
-			], 2), s("div", { class: p(v(P)) }, [l(v(r), {
+			], 2), s("div", { class: p(v(N)) }, [l(v(r), {
 				ampm: v(x).ampm,
-				tokens: v(D),
+				fill: v(x).fill,
 				color: v(x).color,
-				value: v(R),
+				error: v(x).error,
+				value: v(I),
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
 				"min-time": v(x).minTime,
@@ -110,13 +113,14 @@ var b = /*@__PURE__*/ u({
 				"read-only": v(x).readOnly,
 				"time-zone": v(x).timeZone,
 				"show-seconds": v(x).showSeconds,
-				onChange: v(W),
+				onChange: v(H),
 				"disable-times": v(x).disableTimes,
-				"custom-props": v(U)
+				"custom-props": v(V)
 			}, null, 8, [
 				"ampm",
-				"tokens",
+				"fill",
 				"color",
+				"error",
 				"value",
 				"rounded",
 				"max-time",
@@ -132,7 +136,7 @@ var b = /*@__PURE__*/ u({
 			])], 2)], 2)]),
 			endAside: y(() => [s("div", { class: p(v(C)) }, [s("div", {
 				"aria-hidden": "true",
-				class: p(v(I))
+				class: p(v(F))
 			}, [
 				s("div", { class: p(v(n)) }, null, 2),
 				s("div", { class: p(v(n)) }, null, 2),
@@ -144,11 +148,12 @@ var b = /*@__PURE__*/ u({
 					key: 1,
 					class: p(v(n))
 				}, null, 2)) : a("", !0)
-			], 2), s("div", { class: p(v(P)) }, [l(v(r), {
+			], 2), s("div", { class: p(v(N)) }, [l(v(r), {
 				ampm: v(x).ampm,
-				tokens: v(D),
+				fill: v(x).fill,
 				color: v(x).color,
-				value: v(F),
+				value: v(P),
+				error: v(x).error,
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
 				"min-time": v(x).minTime,
@@ -157,14 +162,15 @@ var b = /*@__PURE__*/ u({
 				"read-only": v(x).readOnly,
 				"time-zone": v(x).timeZone,
 				"show-seconds": v(x).showSeconds,
-				onChange: v(H),
+				onChange: v(B),
 				"disable-times": v(x).disableTimes,
-				"custom-props": v(U)
+				"custom-props": v(V)
 			}, null, 8, [
 				"ampm",
-				"tokens",
+				"fill",
 				"color",
 				"value",
+				"error",
 				"rounded",
 				"max-time",
 				"min-time",
@@ -179,9 +185,10 @@ var b = /*@__PURE__*/ u({
 			])], 2)], 2)]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
+			"error",
 			"value",
-			"tokens",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -199,16 +206,16 @@ var b = /*@__PURE__*/ u({
 			"disable-months",
 			"hide-outside-days"
 		])], 2)], 2), v(T) ? (h(), o("div", m(f({ key: 0 }, v(w))), [g(i.$slots, "footer", {
-			apply: v(O),
-			cancel: v(M)
+			apply: v(D),
+			cancel: v(j)
 		}, () => [l(v(e), f({
 			variant: "flat",
 			color: "secondary",
-			onClick: v(M)
-		}, v(B)), {
-			default: y(() => [c(_(v(k)), 1)]),
+			onClick: v(j)
+		}, v(R)), {
+			default: y(() => [c(_(v(O)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(z), { onClick: v(O) }), {
+		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
 			default: y(() => [c(_(v(E)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.d.ts

@@ -9,14 +9,10 @@ type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, D
  */
 export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: SetupContext<DateTimeRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimeRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
     timeBind: import('vue').ComputedRef<string>;
     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/Tokens').TimeColorItem>> | undefined;
-        rounded: Record<string, string> | undefined;
-    }>;
     handleApply: () => void;
     contentBind: import('vue').ComputedRef<string>;
     displayValue: import('vue').ComputedRef<[Date, Date] | null>;
@@ -25,11 +21,6 @@ export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeR
     timeFillBind: import('vue').ComputedRef<string>;
     endTimeValue: import('vue').ComputedRef<Date | null>;
     timeSizerBind: import('vue').ComputedRef<string>;
-    calendarTokens: import('vue').ComputedRef<{
-        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;
-    }>;
     startTimeValue: import('vue').ComputedRef<Date | null>;
     handleCalendarChange: (next: null | DateRangeValue) => void;
     handleEndPanelChange: (next: null | TimeValue) => void;

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js

@@ -8,7 +8,7 @@ import { combineDateAndTime as g } from "@bridge-ui/core/Domain";
 import { menuRoundedProps as _ } from "@bridge-ui/core/Tokens";
 import { cn as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.ts
-var b = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+var b = /* @__PURE__ */ "ampm.fill.color.error.value.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
 function x(e, t, n) {
 	let [r, i] = e;
 	return t.isAfter(r, i, n) ? [i, r] : e;
@@ -38,84 +38,78 @@ function S(S, C, w) {
 	f(() => [B.value, j.value.showFooter], ([e, t]) => {
 		t && (V.value = e);
 	});
-	let H = s(() => j.value.showFooter ? V.value : B.value), U = s(() => ({
-		day: j.value.tokens?.calendar?.day ?? j.value.tokens?.day,
-		color: j.value.tokens?.calendar?.color ?? j.value.tokens?.color,
-		rounded: j.value.tokens?.calendar?.rounded ?? j.value.tokens?.rounded
-	})), W = s(() => ({
-		color: j.value.tokens?.time?.color ?? j.value.tokens?.color,
-		rounded: j.value.tokens?.time?.rounded ?? j.value.tokens?.rounded
-	})), G = s(() => H.value?.[0] ?? null), K = s(() => H.value?.[1] ?? null), q = (e) => {
+	let H = s(() => j.value.showFooter ? V.value : B.value), U = s(() => H.value?.[0] ?? null), W = s(() => H.value?.[1] ?? null), G = (e) => {
 		R.value || (z.value = e), w("change", e);
-	}, J = (e) => {
+	}, K = (e) => {
 		if (j.value.showFooter) {
 			V.value = e;
 			return;
 		}
-		q(e);
-	}, Y = (e) => {
+		G(e);
+	}, q = (e) => {
 		if (m(e)) {
-			J(null);
+			K(null);
 			return;
 		}
 		let t = D.value.now(L.value), n = g(e[0], H.value?.[0] ?? t, D.value, L.value), r = g(e[1], H.value?.[1] ?? t, D.value, L.value);
-		J(x([n, r], D.value, L.value));
-	}, X = (e) => {
+		K(x([n, r], D.value, L.value));
+	}, J = (e) => {
 		if (m(e)) {
-			J(null);
+			K(null);
 			return;
 		}
 		let t = D.value.now(L.value), n = g(H.value?.[0] ?? t, e, D.value, L.value), r = H.value?.[1] ?? t;
-		J(x([n, r], D.value, L.value));
-	}, Z = (e) => {
+		K(x([n, r], D.value, L.value));
+	}, Y = (e) => {
 		if (m(e)) {
-			J(null);
+			K(null);
 			return;
 		}
 		let t = D.value.now(L.value), n = H.value?.[0] ?? t, r = g(H.value?.[1] ?? t, e, D.value, L.value);
-		J(x([n, r], D.value, L.value));
-	}, Q = () => {
-		q(V.value), w("apply"), E.apply();
-	}, $ = () => {
+		K(x([n, r], D.value, L.value));
+	}, X = () => {
+		G(V.value), w("apply"), E.apply();
+	}, Z = () => {
 		V.value = B.value, w("cancel"), E.cancel();
-	}, ee = s(() => {
+	}, Q = s(() => {
 		let e = p(_, j.value.rounded ?? "md");
 		return r(N.value?.root, P.value, v({
-			"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"w-full": j.value.fill,
+			"w-fit": !j.value.fill,
 			[e]: !0,
 			[F.value.root ?? ""]: !0
 		}));
-	}), te = s(() => v({ "flex min-w-0 flex-col": !0 })), ne = s(() => v({
-		"min-w-0": !0,
+	}), $ = s(() => v({ "flex w-full min-w-max flex-col": !0 })), ee = s(() => v({
+		"min-w-max": !0,
+		"w-full": j.value.fill,
 		[F.value.calendar ?? ""]: !0
-	})), re = s(() => v({
+	})), te = s(() => v({
 		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
 		[F.value.time ?? ""]: !0
-	})), ie = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ae = s(() => v({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), oe = s(() => v({ "absolute inset-0 flex w-full px-2.5": !0 }));
+	})), ne = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), re = s(() => v({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), ie = s(() => v({ "absolute inset-0 flex w-full px-2.5": !0 }));
 	return {
 		merged: j,
-		rootBind: ee,
-		timeBind: re,
+		rootBind: Q,
+		timeBind: te,
 		footerBind: s(() => r(N.value?.footer, {}, v({
 			"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,
 			[F.value.footer ?? ""]: !0
 		}))),
 		showFooter: s(() => !!j.value.showFooter),
-		timeTokens: W,
-		handleApply: Q,
-		contentBind: te,
+		handleApply: X,
+		contentBind: $,
 		displayValue: H,
-		handleCancel: $,
-		calendarBind: ne,
-		timeFillBind: oe,
-		endTimeValue: K,
-		timeSizerBind: ae,
-		calendarTokens: U,
-		startTimeValue: G,
-		handleCalendarChange: Y,
-		handleEndPanelChange: Z,
-		timePanelCustomProps: ie,
-		handleStartPanelChange: X,
+		handleCancel: Z,
+		calendarBind: ee,
+		timeFillBind: ie,
+		endTimeValue: W,
+		timeSizerBind: re,
+		startTimeValue: U,
+		handleCalendarChange: q,
+		handleEndPanelChange: Y,
+		timePanelCustomProps: ne,
+		handleStartPanelChange: J,
 		applyLabel: s(() => O("Apply")),
 		cancelLabel: s(() => O("Cancel")),
 		applyButtonProps: s(() => N.value?.applyButton),

package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } from '@bridge-ui/core/Tokens';
+import { CalendarColor, 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';
@@ -126,6 +126,19 @@ export interface DateTimeRangePickerOwnProps {
      * @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.
      *
@@ -229,12 +242,6 @@ export interface DateTimeRangePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateTimeRangePickerTokens;
     /**
      * Controlled value.
      *
@@ -257,33 +264,4 @@ export interface DateTimeRangePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateTimeRangePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export type DateTimeRangePickerProps = MergeHtmlProps<DateTimeRangePickerOwnProps, HTMLAttributes>;

package/dist/Components/DateTimeRangePicker/index.d.ts

@@ -1,3 +1,3 @@
 export { useDateTimeRangePicker } from './composables/useDateTimeRangePicker';
-export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, DateTimeRangePickerTokens, } from './dateTimeRangePicker.types';
+export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, } from './dateTimeRangePicker.types';
 export { default as DateTimeRangePicker } from './DateTimeRangePicker.vue';

package/dist/Components/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js

@@ -82,13 +82,14 @@ var g = /*@__PURE__*/ s({
 		});
 		l({ stackId: n(() => v.stackId ?? D.value) });
 		let O = n(() => b.value.teleportTo === !1), k = n(() => b.value.teleportTo === !1 ? "body" : b.value.teleportTo), A = n(() => v.hideBackdrop !== !0 && b.value.hideBackdrop !== !0);
-		return (e, n) => (f(), r(t, {
+		return (e, n) => m(x) ? (f(), r(t, {
+			key: 0,
 			to: k.value,
 			disabled: O.value
-		}, [m(x) ? (f(), a("div", d(u({ key: 0 }, m(S))), [A.value ? (f(), a("div", u({
+		}, [o("div", d(c(m(S))), [A.value ? (f(), a("div", u({
 			key: 0,
 			"aria-hidden": "true"
-		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)) : i("", !0)], 8, ["to", "disabled"]));
+		}, m(w)), null, 16)) : i("", !0), o("div", d(c(m(T))), [o("div", u({ ref: m(E) }, m(C)), [p(e.$slots, "default")], 16)], 16)], 16)], 8, ["to", "disabled"])) : i("", !0);
 	}
 });
 //#endregion