@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/Calendar/composables/useCalendar.js

@@ -1,150 +1,154 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
-import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { computed as o, getCurrentInstance as s, ref as c, toValue as l, useAttrs as u } from "vue";
-import { cn as d, isDateRangeValue as f, mergeBridgeUILayeredClasses as ee, resolveDatePickerMode as te, splitComponentProps as ne } from "@bridge-ui/core";
-import { get as re, isArray as p, isFunction as m, isNil as h, omit as g } from "es-toolkit/compat";
-import { roundedProps as _ } from "@bridge-ui/core/Tokens/Calendar";
+import { mergePartBind as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, getCurrentInstance as o, ref as s, toValue as c, useAttrs as l } from "vue";
+import { get as u, isArray as d, isFunction as f, isNil as p, omit as te } from "es-toolkit/compat";
+import { isDateRangeValue as m, resolveDatePickerMode as ne } from "@bridge-ui/core/Domain";
+import { calendarRoundedProps as h } from "@bridge-ui/core/Tokens";
+import { cn as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/Calendar/composables/useCalendar.ts
-var v = /* @__PURE__ */ "view.color.range.value.tokens.classes.maxDate.minDate.rounded.disabled.multiple.readOnly.timeZone.viewDate.hideYears.hideMonths.customProps.defaultView.previewDate.startOfWeek.defaultValue.disableDates.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
-function y(e, t, n) {
-	return h(e) ? t.now(n) : f(e) ? e[0] : p(e) ? e[0] ?? t.now(n) : e;
+var y = /* @__PURE__ */ "fill.view.color.error.range.value.tokens.classes.maxDate.minDate.rounded.disabled.multiple.readOnly.timeZone.viewDate.hideYears.hideMonths.customProps.defaultView.previewDate.startOfWeek.defaultValue.disableDates.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function b(e, t, n) {
+	return p(e) ? t.now(n) : m(e) ? e[0] : d(e) ? e[0] ?? t.now(n) : e;
 }
-function b(f, p, b) {
-	let x = u(), S = e(), C = n(), w = t(), T = o(() => ne({
-		bridgeKeys: v,
+function x(d, m, x) {
+	let S = l(), C = e(), w = n(), T = t(), E = a(() => v({
+		bridgeKeys: y,
 		props: {
-			...x,
-			...l(f)
+			...S,
+			...c(d)
 		}
-	})), { merged: E } = i({
-		libDefaults: p,
-		props: () => T.value.componentProps
-	}), D = o(() => E.value.customProps), O = o(() => g(T.value.inheritedAttrs, [
+	})), { merged: D } = ee({
+		libDefaults: m,
+		props: () => E.value.componentProps
+	}), O = a(() => D.value.customProps), re = a(() => te(E.value.inheritedAttrs, [
 		"onChange",
 		"onViewChange",
 		"onViewDateChange",
 		"onPreviewDateChange"
-	])), k = a({
-		props: () => T.value.componentProps,
-		entry: o(() => {})
-	}), A = o(() => w(E.value.timeZone)), j = o(() => te({
-		range: E.value.range,
-		multiple: E.value.multiple
-	})), M = o(() => l(f)), N = o(() => !h(M.value.value)), P = o(() => {
-		let e = s()?.vnode.props ?? {}, t = m(e.onViewChange) || m(e["onUpdate:view"]);
-		return !h(M.value.view) && t;
-	}), F = o(() => {
-		let e = s()?.vnode.props ?? {}, t = m(e.onViewDateChange) || m(e["onUpdate:viewDate"]);
-		return !h(M.value.viewDate) && t;
-	}), I = c(E.value.defaultValue ?? null), L = c(M.value.view ?? E.value.defaultView ?? "date"), R = c(S.value.startOfMonth(h(M.value.viewDate) ? y(M.value.value ?? E.value.defaultValue ?? null, S.value, A.value) : M.value.viewDate, A.value)), z = c(null), B = o(() => N.value ? M.value.value ?? null : I.value), V = o(() => {
+	])), k = i({
+		props: () => E.value.componentProps,
+		entry: a(() => {})
+	}), A = a(() => T(D.value.timeZone)), j = a(() => ne({
+		range: D.value.range,
+		multiple: D.value.multiple
+	})), M = a(() => c(d)), N = a(() => !p(M.value.value)), P = a(() => {
+		let e = o()?.vnode.props ?? {}, t = f(e.onViewChange) || f(e["onUpdate:view"]);
+		return !p(M.value.view) && t;
+	}), F = a(() => {
+		let e = o()?.vnode.props ?? {}, t = f(e.onViewDateChange) || f(e["onUpdate:viewDate"]);
+		return !p(M.value.viewDate) && t;
+	}), I = s(D.value.defaultValue ?? null), L = s(M.value.view ?? D.value.defaultView ?? "date"), R = s(C.value.startOfMonth(p(M.value.viewDate) ? b(M.value.value ?? D.value.defaultValue ?? null, C.value, A.value) : M.value.viewDate, A.value)), z = s(null), B = a(() => N.value ? M.value.value ?? null : I.value), V = a(() => {
 		let e = P.value ? M.value.view ?? "date" : L.value;
-		return e === "year" && E.value.hideYears || e === "month" && E.value.hideMonths ? "date" : e;
-	}), H = o(() => F.value ? M.value.viewDate : R.value), U = o(() => String(S.value.getYear(H.value, A.value))), W = o(() => S.value.getMonthNames(A.value)[S.value.getMonth(H.value, A.value)] ?? ""), G = o(() => S.value.getYear(H.value, A.value)), K = o(() => S.value.getMonth(H.value, A.value)), q = o(() => h(z.value) ? Math.max(1, G.value - 7) : z.value), J = o(() => {
-		let e = ee(_, E.value.tokens?.rounded);
-		return re(e, E.value.rounded);
+		return e === "year" && D.value.hideYears || e === "month" && D.value.hideMonths ? "date" : e;
+	}), H = a(() => F.value ? M.value.viewDate : R.value), U = a(() => String(C.value.getYear(H.value, A.value))), W = a(() => C.value.getMonthNames(A.value)[C.value.getMonth(H.value, A.value)] ?? ""), G = a(() => C.value.getYear(H.value, A.value)), K = a(() => C.value.getMonth(H.value, A.value)), q = a(() => p(z.value) ? Math.max(1, G.value - 7) : z.value), J = a(() => {
+		let e = _(h, D.value.tokens?.rounded);
+		return u(e, D.value.rounded);
 	}), Y = (e) => {
-		P.value || (L.value = e), b("viewChange", e);
+		P.value || (L.value = e), x("viewChange", e);
 	}, X = () => {
 		z.value = Math.max(1, G.value - 7), Y("year");
 	}, Z = (e) => {
-		let t = S.value.startOfMonth(e, A.value);
-		F.value || (R.value = t), b("viewDateChange", t);
+		let t = C.value.startOfMonth(e, A.value);
+		F.value || (R.value = t), x("viewDateChange", t);
 	}, ie = (e) => {
-		N.value || (I.value = e), b("change", e);
+		N.value || (I.value = e), x("change", e);
 	}, ae = () => {
 		if (V.value === "year") {
 			z.value = Math.max(1, q.value - 15);
 			return;
 		}
-		Z(S.value.addMonths(H.value, -1, A.value));
+		Z(C.value.addMonths(H.value, -1, A.value));
 	}, oe = () => {
 		if (V.value === "year") {
 			z.value = q.value + 15;
 			return;
 		}
-		Z(S.value.addMonths(H.value, 1, A.value));
+		Z(C.value.addMonths(H.value, 1, A.value));
 	}, se = () => {
-		let e = S.value.startOfMonth(S.value.now(A.value), A.value);
+		let e = C.value.startOfMonth(C.value.now(A.value), A.value);
 		z.value = null, Z(e), Y("date");
 	}, ce = (e) => {
-		z.value = null, Z(S.value.setYear(H.value, e, A.value)), Y(E.value.hideMonths ? "date" : "month");
+		z.value = null, Z(C.value.setYear(H.value, e, A.value)), Y(D.value.hideMonths ? "date" : "month");
 	}, le = (e) => {
-		Z(S.value.setMonth(H.value, e, A.value)), Y("date");
-	}, ue = o(() => ({
-		color: E.value.color,
-		tokens: E.value.tokens,
-		rounded: E.value.rounded,
-		maxDate: E.value.maxDate,
-		minDate: E.value.minDate,
-		disabled: E.value.disabled,
-		readOnly: E.value.readOnly,
-		timeZone: E.value.timeZone
-	})), de = o(() => r(D.value?.root, O.value, d({
-		"flex w-full min-w-72 flex-col overflow-hidden": !0,
+		Z(C.value.setMonth(H.value, e, A.value)), Y("date");
+	}, ue = a(() => ({
+		color: D.value.color,
+		error: D.value.error,
+		tokens: D.value.tokens,
+		rounded: D.value.rounded,
+		maxDate: D.value.maxDate,
+		minDate: D.value.minDate,
+		disabled: D.value.disabled,
+		readOnly: D.value.readOnly,
+		timeZone: D.value.timeZone
+	})), de = a(() => r(O.value?.root, re.value, g({
+		"flex flex-col overflow-hidden": !0,
+		"w-full min-w-72": D.value.fill,
+		"w-72": !D.value.fill,
 		[k.value.root ?? ""]: !0
-	}))), fe = o(() => r(D.value?.header, {}, d({
+	}))), fe = a(() => r(O.value?.header, {}, g({
 		"flex items-center justify-between p-2.5": !0,
 		[k.value.header ?? ""]: !0
-	}))), pe = o(() => r(D.value?.body, {}, d({
+	}))), pe = a(() => r(O.value?.body, {}, g({
 		"flex flex-col p-2.5": !0,
 		[k.value.body ?? ""]: !0
-	}))), Q = o(() => r(D.value?.selector, {
+	}))), Q = a(() => r(O.value?.selector, {
 		type: "button",
-		disabled: E.value.disabled
-	}, d({
+		disabled: D.value.disabled
+	}, g({
 		"inline-flex cursor-pointer items-center gap-x-2 px-1.5 py-1 text-sm font-medium text-dark-600 hover:bg-dark-100 focus:outline-none disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
 		[J.value ?? ""]: !0,
 		[k.value.selector ?? ""]: !0
-	}))), $ = o(() => r(D.value?.navButton, {
+	}))), $ = a(() => r(O.value?.navButton, {
 		type: "button",
-		disabled: E.value.disabled
-	}, d({
+		disabled: D.value.disabled
+	}, g({
 		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center text-dark-600 hover:bg-dark-100 disabled:cursor-not-allowed dark:text-dark-300 dark:hover:bg-dark-800": !0,
 		[J.value ?? ""]: !0,
 		[k.value.navButton ?? ""]: !0
-	}))), me = o(() => V.value === "year" ? C("Previous years") : C("Previous month")), he = o(() => V.value === "year" ? C("Next years") : C("Next month")), ge = o(() => r(D.value?.previousButton, {
+	}))), me = a(() => V.value === "year" ? w("Previous years") : w("Previous month")), he = a(() => V.value === "year" ? w("Next years") : w("Next month")), ge = a(() => r(O.value?.previousButton, {
 		...$.value,
 		onClick: ae,
 		type: "button",
-		disabled: E.value.disabled,
+		disabled: D.value.disabled,
 		"aria-label": me.value
-	}, d({ [k.value.navButton ?? ""]: !0 }))), _e = o(() => r(D.value?.nextButton, {
+	}, g({ [k.value.navButton ?? ""]: !0 }))), _e = a(() => r(O.value?.nextButton, {
 		...$.value,
 		onClick: oe,
 		type: "button",
-		disabled: E.value.disabled,
+		disabled: D.value.disabled,
 		"aria-label": he.value
-	}, d({ [k.value.navButton ?? ""]: !0 }))), ve = o(() => r(D.value?.todayButton, {
+	}, g({ [k.value.navButton ?? ""]: !0 }))), ve = a(() => r(O.value?.todayButton, {
 		onClick: se,
 		type: "button",
-		disabled: E.value.disabled,
-		"aria-label": C("Today")
-	}, d({
+		disabled: D.value.disabled,
+		"aria-label": w("Today")
+	}, g({
 		"inline-flex size-8 shrink-0 cursor-pointer items-center justify-center hover:bg-dark-100 disabled:cursor-not-allowed dark:hover:bg-dark-800": !0,
 		[J.value ?? ""]: !0,
 		[k.value.navButton ?? ""]: !0
-	}))), ye = o(() => r(D.value?.selector, void 0, {
+	}))), ye = a(() => r(O.value?.selector, void 0, {
 		...Q.value,
 		onClick: X,
 		type: "button",
-		"aria-label": C("Select year"),
-		disabled: E.value.disabled || E.value.hideYears
-	})), be = o(() => r(D.value?.selector, void 0, {
+		"aria-label": w("Select year"),
+		disabled: D.value.disabled || D.value.hideYears
+	})), be = a(() => r(O.value?.selector, void 0, {
 		...Q.value,
 		type: "button",
 		onClick: () => Y("month"),
-		"aria-label": C("Select month"),
-		disabled: E.value.disabled || E.value.hideMonths
-	})), xe = o(() => !E.value.hideYears), Se = o(() => !E.value.hideMonths);
+		"aria-label": w("Select month"),
+		disabled: D.value.disabled || D.value.hideMonths
+	})), xe = a(() => !D.value.hideYears), Se = a(() => !D.value.hideMonths);
 	return {
 		view: V,
 		mode: j,
 		value: B,
-		merged: E,
+		merged: D,
 		shared: ue,
 		context: A,
-		showNav: o(() => !0),
+		showNav: a(() => !0),
 		rootBind: de,
 		viewDate: H,
 		viewYear: G,
@@ -154,7 +158,7 @@ function b(f, p, b) {
 		monthLabel: W,
 		headerBind: fe,
 		setViewDate: Z,
-		navIconBind: o(() => D.value?.navIcon),
+		navIconBind: a(() => O.value?.navIcon),
 		handleChange: ie,
 		yearPageSize: 15,
 		nextButtonBind: _e,
@@ -170,4 +174,4 @@ function b(f, p, b) {
 	};
 }
 //#endregion
-export { b as useCalendar };
+export { x as useCalendar };

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

@@ -1,11 +1,11 @@
 import { CalendarDateOwnProps, CalendarDateSlots } from './calendarDate.types';
 type __VLS_Slots = CalendarDateSlots;
 declare const __VLS_base: import('vue').DefineComponent<CalendarDateOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    change: (value: import('@bridge-ui/core').DatePickerModel) => any;
+    change: (value: import('@bridge-ui/core/Domain').DatePickerModel) => any;
     viewDateChange: (date: Date) => any;
     previewDateChange: (date: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<CalendarDateOwnProps> & Readonly<{
-    onChange?: ((value: import('@bridge-ui/core').DatePickerModel) => any) | undefined;
+    onChange?: ((value: import('@bridge-ui/core/Domain').DatePickerModel) => any) | undefined;
     onViewDateChange?: ((date: Date) => any) | undefined;
     onPreviewDateChange?: ((date: Date | null) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/CalendarDate/CalendarDate.vue_vue_type_script_setup_true_lang.js

@@ -17,6 +17,7 @@ var h = {
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		error: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
 		maxDate: {},

package/dist/Components/CalendarDate/calendarDate.types.d.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarDayInteractionState, CalendarRounded, DatePickerModel, DisableDatesInput, MergeHtmlProps, MergeProps, StartOfWeek } from '@bridge-ui/core';
+import { CalendarDayInteractionState, DatePickerModel, DisableDatesInput, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface CalendarDateColorOverrides {}
 export interface CalendarDateRoundedOverrides {}
 export interface CalendarDateClasses {
@@ -168,6 +170,12 @@ export interface CalendarDateOwnProps {
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
     /**
      * Hides days that fall outside the displayed month.
      *

package/dist/Components/CalendarDate/composables/useCalendarDate.d.ts

@@ -1,5 +1,7 @@
 import { MaybeRefOrGetter } from 'vue';
-import { DateAdapterContext, DatePickerModel, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { DateAdapterContext } from '@bridge-ui/core/Adapters';
+import { DatePickerModel } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { CalendarDateDayCell, CalendarDateEmits, CalendarDateOwnProps } from '../calendarDate.types';
 type CalendarDateLibDefaults = LibDefaultsShape<CalendarDateOwnProps, "color" | "rounded" | "startOfWeek">;
 type CalendarDateMerged = MergeLibDefaults<CalendarDateOwnProps, CalendarDateLibDefaults>;
@@ -9,19 +11,19 @@ export declare function useCalendarDate(props: MaybeRefOrGetter<CalendarDateOwnP
     (event: "previewDateChange", date: Date | null): void;
 }): {
     days: import('vue').ComputedRef<CalendarDateDayCell[]>;
-    mode: import('vue').ComputedRef<import('@bridge-ui/core').DatePickerMode>;
+    mode: import('vue').ComputedRef<import('@bridge-ui/core/Domain').DatePickerMode>;
     value: import('vue').ComputedRef<DatePickerModel>;
     merged: import('vue').ComputedRef<CalendarDateMerged>;
     context: import('vue').ComputedRef<DateAdapterContext>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarDateOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate">>>>;
-    gridBind: 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<CalendarDateOwnProps, "error" | "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate">>>>;
+    gridBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         role: string;
         onMouseleave: () => void;
     }>>;
     weekdays: import('vue').ComputedRef<string[]>;
     viewDate: import('vue').ComputedRef<Date>;
     selectDay: (date: Date) => void;
-    getDayBind: (cell: CalendarDateDayCell) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+    getDayBind: (cell: CalendarDateDayCell) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
         disabled: boolean;
         "aria-pressed": boolean;
@@ -32,7 +34,7 @@ export declare function useCalendarDate(props: MaybeRefOrGetter<CalendarDateOwnP
     }>;
     previewDate: import('vue').ComputedRef<Date | null | undefined>;
     hideWeekdays: import('vue').ComputedRef<boolean>;
-    getWeekdayBind: (_label: string) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
+    getWeekdayBind: (_label: string) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
     hideOutsideDays: import('vue').ComputedRef<boolean>;
 };
 export type UseCalendarDateEmit = CalendarDateEmits;

package/dist/Components/CalendarDate/composables/useCalendarDate.js

@@ -1,12 +1,14 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
 import { computed as a, getCurrentInstance as o, ref as s, toValue as c, useAttrs as l } from "vue";
-import { applyDateSelection as ee, cn as u, isDateDisabled as d, isDateInRangePreview as f, isDateRangeValue as p, isDateSelected as te, mergeBridgeUILayeredClasses as m, resolveCalendarDayInteractionState as h, resolveDatePickerMode as g, resolveStartOfWeek as _, splitComponentProps as v } from "@bridge-ui/core";
-import { get as y, isFunction as b, isNil as x, omit as S } from "es-toolkit/compat";
-import { colorProps as C, dayProps as ne, roundedProps as w } from "@bridge-ui/core/Tokens/Calendar";
+import { get as ee, isFunction as u, isNil as d, omit as f } from "es-toolkit/compat";
+import { applyDateSelection as te, isDateDisabled as p, isDateInRangePreview as m, isDateRangeValue as h, isDateSelected as g, resolveCalendarDayInteractionState as _, resolveDatePickerMode as v, resolveStartOfWeek as y } from "@bridge-ui/core/Domain";
+import { calendarColorProps as b, calendarDayProps as x, calendarRoundedProps as S } from "@bridge-ui/core/Tokens";
+import { cn as C, getColorToken as w, mergeBridgeUILayeredClasses as T, splitComponentProps as E } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarDate/composables/useCalendarDate.ts
-var T = [
+var D = [
 	"color",
+	"error",
 	"range",
 	"value",
 	"tokens",
@@ -29,124 +31,131 @@ var T = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function E(E, D, O) {
-	let k = l(), A = e(), re = t(), j = a(() => v({
-		bridgeKeys: T,
+function O(O, k, A) {
+	let ne = l(), j = e(), re = t(), M = a(() => E({
+		bridgeKeys: D,
 		props: {
-			...k,
-			...c(E)
+			...ne,
+			...c(O)
 		}
-	})), { merged: M } = r({
-		libDefaults: D,
-		props: () => j.value.componentProps
-	}), N = a(() => M.value.customProps), P = a(() => S(j.value.inheritedAttrs, [
+	})), { merged: N } = r({
+		libDefaults: k,
+		props: () => M.value.componentProps
+	}), P = a(() => N.value.customProps), F = a(() => f(M.value.inheritedAttrs, [
 		"onChange",
 		"onViewDateChange",
 		"onPreviewDateChange"
-	])), F = i({
-		props: () => j.value.componentProps,
+	])), I = i({
+		props: () => M.value.componentProps,
 		entry: a(() => {})
-	}), I = a(() => re(M.value.timeZone)), L = a(() => g({
-		range: M.value.range,
-		multiple: M.value.multiple
-	})), R = a(() => c(E)), z = a(() => !x(R.value.value)), B = a(() => !x(R.value.previewDate)), V = a(() => {
-		let e = o()?.vnode.props ?? {}, t = b(e.onViewDateChange) || b(e["onUpdate:viewDate"]);
-		return !x(R.value.viewDate) && t;
-	}), H = s(M.value.defaultValue ?? null), U = s(null), W = s(R.value.viewDate ?? M.value.viewDate ?? A.value.startOfMonth(A.value.now(I.value), I.value)), G = a(() => z.value ? R.value.value ?? null : H.value), K = a(() => B.value ? R.value.previewDate : U.value), q = a(() => V.value ? R.value.viewDate : W.value), J = a(() => _(M.value.startOfWeek)), Y = a(() => m(C, M.value.tokens?.color)), X = a(() => m(ne, M.value.tokens?.day)), ie = a(() => {
-		let e = m(w, M.value.tokens?.rounded);
-		return y(e, M.value.rounded);
-	}), ae = a(() => y(Y.value, M.value.color)), oe = a(() => {
-		let e = A.value.getWeekdayNames(I.value), t = J.value;
+	}), L = a(() => re(N.value.timeZone)), R = a(() => v({
+		range: N.value.range,
+		multiple: N.value.multiple
+	})), z = a(() => c(O)), B = a(() => !d(z.value.value)), V = a(() => !d(z.value.previewDate)), H = a(() => {
+		let e = o()?.vnode.props ?? {}, t = u(e.onViewDateChange) || u(e["onUpdate:viewDate"]);
+		return !d(z.value.viewDate) && t;
+	}), U = s(N.value.defaultValue ?? null), W = s(null), G = s(z.value.viewDate ?? N.value.viewDate ?? j.value.startOfMonth(j.value.now(L.value), L.value)), K = a(() => B.value ? z.value.value ?? null : U.value), q = a(() => V.value ? z.value.previewDate : W.value), J = a(() => H.value ? z.value.viewDate : G.value), Y = a(() => y(N.value.startOfWeek)), X = a(() => T(x, N.value.tokens?.day)), ie = a(() => {
+		let e = T(S, N.value.tokens?.rounded);
+		return ee(e, N.value.rounded);
+	}), ae = a(() => {
+		let e = T(b, N.value.tokens?.color);
+		return w({
+			tokens: e,
+			color: N.value.color,
+			invalid: N.value.error
+		});
+	}), oe = a(() => {
+		let e = j.value.getWeekdayNames(L.value), t = Y.value;
 		return Array.from({ length: 7 }, (n, r) => e[(t + r) % 7] ?? "");
 	}), se = a(() => {
-		let e = A.value.getCalendarDays(q.value, J.value, I.value), t = A.value.now(I.value);
+		let e = j.value.getCalendarDays(J.value, Y.value, L.value), t = j.value.now(L.value);
 		return e.map((e) => {
-			let n = !!M.value.disabled || d(e, {
-				adapter: A.value,
-				context: I.value,
-				maxDate: M.value.maxDate,
-				minDate: M.value.minDate,
-				disableDates: M.value.disableDates,
-				disableYears: M.value.disableYears,
-				disableMonths: M.value.disableMonths
-			}), r = te({
+			let n = !!N.value.disabled || p(e, {
+				adapter: j.value,
+				context: L.value,
+				maxDate: N.value.maxDate,
+				minDate: N.value.minDate,
+				disableDates: N.value.disableDates,
+				disableYears: N.value.disableYears,
+				disableMonths: N.value.disableMonths
+			}), r = g({
 				date: e,
-				mode: L.value,
-				value: G.value,
-				adapter: A.value,
-				context: I.value
-			}), i = L.value === "range" && f({
+				mode: R.value,
+				value: K.value,
+				adapter: j.value,
+				context: L.value
+			}), i = R.value === "range" && m({
 				date: e,
-				value: G.value,
-				adapter: A.value,
-				context: I.value,
-				previewDate: K.value
+				value: K.value,
+				adapter: j.value,
+				context: L.value,
+				previewDate: q.value
 			});
 			return {
 				date: e,
-				state: h({
+				state: _({
 					disabled: n,
 					selected: r,
-					readOnly: M.value.readOnly
+					readOnly: N.value.readOnly
 				}),
 				preview: i,
 				selected: r,
-				disabled: n || !!M.value.readOnly,
-				label: String(A.value.getDate(e, I.value)),
-				today: A.value.isSameDay(e, t, I.value),
-				outside: !A.value.isSameMonth(e, q.value, I.value)
+				disabled: n || !!N.value.readOnly,
+				label: String(j.value.getDate(e, L.value)),
+				today: j.value.isSameDay(e, t, L.value),
+				outside: !j.value.isSameMonth(e, J.value, L.value)
 			};
 		});
 	}), Z = (e) => {
-		if (M.value.disabled || M.value.readOnly || d(e, {
-			adapter: A.value,
-			context: I.value,
-			maxDate: M.value.maxDate,
-			minDate: M.value.minDate,
-			disableDates: M.value.disableDates,
-			disableYears: M.value.disableYears,
-			disableMonths: M.value.disableMonths
+		if (N.value.disabled || N.value.readOnly || p(e, {
+			adapter: j.value,
+			context: L.value,
+			maxDate: N.value.maxDate,
+			minDate: N.value.minDate,
+			disableDates: N.value.disableDates,
+			disableYears: N.value.disableYears,
+			disableMonths: N.value.disableMonths
 		})) return;
-		let t = ee({
+		let t = te({
 			next: e,
-			mode: L.value,
-			value: G.value,
-			adapter: A.value,
-			context: I.value
+			mode: R.value,
+			value: K.value,
+			adapter: j.value,
+			context: L.value
 		});
-		z.value || (H.value = t), O("change", t), L.value === "range" && Q(null);
+		B.value || (U.value = t), A("change", t), R.value === "range" && Q(null);
 	}, Q = (e) => {
-		B.value || (U.value = e), O("previewDateChange", e);
+		V.value || (W.value = e), A("previewDateChange", e);
 	}, $ = a(() => {
-		if (L.value !== "range" || !p(G.value)) return !1;
-		let [e, t] = G.value;
-		return A.value.isSameDay(e, t, I.value);
+		if (R.value !== "range" || !h(K.value)) return !1;
+		let [e, t] = K.value;
+		return j.value.isSameDay(e, t, L.value);
 	});
 	return {
 		days: se,
-		mode: L,
-		value: G,
-		merged: M,
-		context: I,
-		rootBind: a(() => n(N.value?.root, P.value, u({
+		mode: R,
+		value: K,
+		merged: N,
+		context: L,
+		rootBind: a(() => n(P.value?.root, F.value, C({
 			"flex flex-col": !0,
-			[F.value.root ?? ""]: !0
+			[I.value.root ?? ""]: !0
 		}))),
-		gridBind: a(() => n(N.value?.grid, {
+		gridBind: a(() => n(P.value?.grid, {
 			role: "grid",
 			onMouseleave: () => {
 				$.value && Q(null);
 			}
-		}, u({
+		}, C({
 			"grid grid-cols-7 gap-1": !0,
-			[F.value.grid ?? ""]: !0
+			[I.value.grid ?? ""]: !0
 		}))),
 		weekdays: oe,
-		viewDate: q,
+		viewDate: J,
 		selectDay: Z,
 		getDayBind: (e) => {
 			let t = ae.value;
-			return n(N.value?.day, {
+			return n(P.value?.day, {
 				type: "button",
 				disabled: e.disabled,
 				"aria-pressed": e.selected,
@@ -156,7 +165,7 @@ function E(E, D, O) {
 				onMouseenter: () => {
 					$.value && !e.disabled && Q(e.date);
 				}
-			}, u({
+			}, C({
 				"relative flex h-8 w-full cursor-pointer items-center justify-center text-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50": !0,
 				[ie.value ?? ""]: !0,
 				[t?.base ?? ""]: e.state === "base",
@@ -165,17 +174,17 @@ function E(E, D, O) {
 				[t?.disabled ?? ""]: e.state === "disabled",
 				[X.value.outside ?? ""]: e.outside && e.state !== "selected",
 				[X.value.today ?? ""]: e.today && e.state !== "selected" && e.state !== "disabled",
-				[F.value.day ?? ""]: !0
+				[I.value.day ?? ""]: !0
 			}));
 		},
-		previewDate: K,
-		hideWeekdays: a(() => !!M.value.hideWeekdays),
-		getWeekdayBind: (e) => n(N.value?.weekday, {}, u({
+		previewDate: q,
+		hideWeekdays: a(() => !!N.value.hideWeekdays),
+		getWeekdayBind: (e) => n(P.value?.weekday, {}, C({
 			[X.value.weekday ?? ""]: !0,
-			[F.value.weekday ?? ""]: !0
+			[I.value.weekday ?? ""]: !0
 		})),
-		hideOutsideDays: a(() => !!M.value.hideOutsideDays)
+		hideOutsideDays: a(() => !!N.value.hideOutsideDays)
 	};
 }
 //#endregion
-export { E as useCalendarDate };
+export { O as useCalendarDate };

package/dist/Components/CalendarMonth/CalendarMonth.vue_vue_type_script_setup_true_lang.js

@@ -10,6 +10,7 @@ var f = /*@__PURE__*/ i({
 		customProps: {},
 		disabled: { type: Boolean },
 		disableMonths: {},
+		error: { type: Boolean },
 		maxDate: {},
 		minDate: {},
 		readOnly: { type: Boolean },

package/dist/Components/CalendarMonth/calendarMonth.types.d.ts

@@ -1,5 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarRounded, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { CalendarColor, CalendarColorItem, CalendarRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface CalendarMonthColorOverrides {}
 export interface CalendarMonthRoundedOverrides {}
 export interface CalendarMonthClasses {
@@ -83,6 +84,12 @@ export interface CalendarMonthOwnProps {
      * @default undefined
      */
     disableMonths?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
     /**
      * Latest selectable date (bounds month availability for `year`).
      *