@bridge-ui/vue 0.0.11 → 0.1.0

package/dist/Components/CalendarMonth/composables/useCalendarMonth.js

@@ -4,11 +4,12 @@ import { computed as a, toValue as o, useAttrs as s } from "vue";
 import { get as c, isNil as l, omit as u } from "es-toolkit/compat";
 import { isMonthDisabled as d, resolveCalendarDayInteractionState as f } from "@bridge-ui/core/Domain";
 import { calendarColorProps as p, calendarRoundedProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { cn as h, getColorToken as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarMonth/composables/useCalendarMonth.ts
-var v = [
+var y = [
 	"year",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -21,70 +22,77 @@ var v = [
 	"customProps",
 	"disableMonths"
 ];
-function y(y, b, x) {
-	let S = s(), C = e(), w = t(), T = a(() => _({
-		bridgeKeys: v,
+function b(b, x, S) {
+	let C = s(), w = e(), T = t(), E = a(() => v({
+		bridgeKeys: y,
 		props: {
-			...S,
-			...o(y)
+			...C,
+			...o(b)
 		}
-	})), { merged: E } = r({
-		libDefaults: b,
-		props: () => T.value.componentProps
-	}), D = a(() => E.value.customProps), O = a(() => u(T.value.inheritedAttrs, ["onChange"])), k = i({
-		props: () => T.value.componentProps,
+	})), { merged: D } = r({
+		libDefaults: x,
+		props: () => E.value.componentProps
+	}), O = a(() => D.value.customProps), k = a(() => u(E.value.inheritedAttrs, ["onChange"])), A = i({
+		props: () => E.value.componentProps,
 		entry: a(() => {})
-	}), A = a(() => w(E.value.timeZone)), j = a(() => E.value.year ?? C.value.getYear(C.value.now(A.value), A.value)), M = a(() => g(p, E.value.tokens?.color)), N = a(() => {
-		let e = g(m, E.value.tokens?.rounded);
-		return c(e, E.value.rounded);
-	}), P = a(() => c(M.value, E.value.color)), F = a(() => C.value.getMonthNames(A.value).map((e, t) => {
-		let n = !!E.value.disabled || d({
+	}), j = a(() => T(D.value.timeZone)), M = a(() => D.value.year ?? w.value.getYear(w.value.now(j.value), j.value)), N = a(() => {
+		let e = _(m, D.value.tokens?.rounded);
+		return c(e, D.value.rounded);
+	}), P = a(() => {
+		let e = _(p, D.value.tokens?.color);
+		return g({
+			tokens: e,
+			color: D.value.color,
+			invalid: D.value.error
+		});
+	}), F = a(() => w.value.getMonthNames(j.value).map((e, t) => {
+		let n = !!D.value.disabled || d({
 			month: t,
-			year: j.value,
-			adapter: C.value,
-			context: A.value,
-			maxDate: E.value.maxDate,
-			minDate: E.value.minDate,
-			disableMonths: E.value.disableMonths
-		}), r = !l(E.value.value) && E.value.value === t;
+			year: M.value,
+			adapter: w.value,
+			context: j.value,
+			maxDate: D.value.maxDate,
+			minDate: D.value.minDate,
+			disableMonths: D.value.disableMonths
+		}), r = !l(D.value.value) && D.value.value === t;
 		return {
 			label: e,
 			month: t,
 			state: f({
 				disabled: n,
 				selected: r,
-				readOnly: E.value.readOnly
+				readOnly: D.value.readOnly
 			}),
 			selected: r,
-			disabled: n || !!E.value.readOnly
+			disabled: n || !!D.value.readOnly
 		};
 	})), I = (e) => {
-		E.value.disabled || E.value.readOnly || d({
+		D.value.disabled || D.value.readOnly || d({
 			month: e,
-			year: j.value,
-			adapter: C.value,
-			context: A.value,
-			maxDate: E.value.maxDate,
-			minDate: E.value.minDate,
-			disableMonths: E.value.disableMonths
-		}) || x("change", e);
+			year: M.value,
+			adapter: w.value,
+			context: j.value,
+			maxDate: D.value.maxDate,
+			minDate: D.value.minDate,
+			disableMonths: D.value.disableMonths
+		}) || S("change", e);
 	};
 	return {
-		year: j,
-		merged: E,
+		year: M,
+		merged: D,
 		months: F,
-		rootBind: a(() => n(D.value?.root, O.value, h({
+		rootBind: a(() => n(O.value?.root, k.value, h({
 			"flex flex-col": !0,
-			[k.value.root ?? ""]: !0
+			[A.value.root ?? ""]: !0
 		}))),
-		gridBind: a(() => n(D.value?.grid, { role: "grid" }, h({
+		gridBind: a(() => n(O.value?.grid, { role: "grid" }, h({
 			"grid grid-cols-3 gap-2": !0,
-			[k.value.grid ?? ""]: !0
+			[A.value.grid ?? ""]: !0
 		}))),
 		selectMonth: I,
 		getMonthBind: (e) => {
 			let t = P.value;
-			return n(D.value?.month, {
+			return n(O.value?.month, {
 				type: "button",
 				disabled: e.disabled,
 				"aria-pressed": e.selected,
@@ -96,10 +104,10 @@ function y(y, b, x) {
 				[t?.hover ?? ""]: e.state === "base",
 				[t?.selected ?? ""]: e.state === "selected",
 				[t?.disabled ?? ""]: e.state === "disabled",
-				[k.value.month ?? ""]: !0
+				[A.value.month ?? ""]: !0
 			}));
 		}
 	};
 }
 //#endregion
-export { y as useCalendarMonth };
+export { b as useCalendarMonth };

package/dist/Components/CalendarRange/CalendarRange.vue_vue_type_script_setup_true_lang.js

@@ -7,7 +7,7 @@ import { createBlock as ne, createCommentVNode as r, createElementBlock as i, cr
 import { isString as ie } from "es-toolkit/compat";
 import { cn as v } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarRange/CalendarRange.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "flex min-w-0 flex-1 items-center justify-start" }, b = { class: "flex min-w-0 flex-1 items-center justify-end" }, x = { class: "flex shrink-0 items-center" }, S = { class: "flex w-full min-w-0 items-stretch" }, C = { class: "flex w-full min-w-0 items-stretch" }, w = /*@__PURE__*/ c({
+var y = { class: "flex shrink-0 items-center justify-start" }, b = { class: "flex shrink-0 items-center justify-end" }, x = { class: "flex shrink-0 items-center" }, S = { class: "flex min-w-max flex-1 items-stretch" }, C = { class: "flex min-w-max flex-1 items-stretch" }, w = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "CalendarRange",
 	props: {
@@ -19,6 +19,8 @@ var y = { class: "flex min-w-0 flex-1 items-center justify-start" }, b = { class
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -41,7 +43,7 @@ var y = { class: "flex min-w-0 flex-1 items-center justify-start" }, b = { class
 		"viewDateChange"
 	],
 	setup(c, { emit: w }) {
-		let { view: T, value: E, shared: D, merged: O, endBind: ae, rootBind: k, bodyBind: A, viewDate: j, viewYear: M, startBind: N, yearLabel: P, monthLabel: F, headerBind: I, monthsBind: L, panelsBind: R, isVertical: z, endViewDate: B, previewDate: V, navIconBind: H, monthTarget: U, handleChange: W, yearPageSize: oe, endMonthLabel: G, yearPageStart: K, endHeaderBind: q, nextButtonBind: se, pickerFillBind: J, monthPanelYear: ce, todayButtonBind: le, monthPanelValue: ue, yearSelectorBind: de, handleYearSelect: fe, showYearSelector: pe, monthSelectorBind: me, handleMonthSelect: he, showMonthSelector: Y, previousButtonBind: ge, endMonthSelectorBind: X, handleEndViewDateChange: _e, handlePreviewDateChange: Z, handleStartViewDateChange: Q } = n(c, {
+		let { view: T, value: E, shared: D, merged: O, endBind: ae, rootBind: k, bodyBind: A, viewDate: j, viewYear: M, startBind: N, yearLabel: P, monthLabel: F, headerBind: I, monthsBind: L, panelsBind: R, isVertical: z, endViewDate: B, previewDate: V, navIconBind: H, monthTarget: U, handleChange: W, yearPageSize: oe, endMonthLabel: G, yearPageStart: K, endHeaderBind: q, monthYearBind: J, nextButtonBind: se, monthPanelYear: ce, todayButtonBind: le, monthPanelValue: ue, yearSelectorBind: de, handleYearSelect: fe, showYearSelector: pe, monthSelectorBind: me, handleMonthSelect: he, showMonthSelector: Y, previousButtonBind: ge, endMonthSelectorBind: X, handleEndViewDateChange: _e, handlePreviewDateChange: Z, handleStartViewDateChange: Q } = n(c, {
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",

package/dist/Components/CalendarRange/calendarRange.types.d.ts

@@ -216,6 +216,19 @@ export interface CalendarRangeOwnProps {
      * @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 the shared month selector and month panel.
      *

package/dist/Components/CalendarRange/composables/useCalendarRange.d.ts

@@ -13,6 +13,7 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
     value: import('vue').ComputedRef<DateRangeValue | null>;
     shared: import('vue').ComputedRef<{
         color: NonNullable<keyof import('@bridge-ui/core/Tokens').CalendarColor | undefined>;
+        error: boolean | undefined;
         tokens: import('../calendarRange.types').CalendarRangeTokens | undefined;
         rounded: NonNullable<keyof import('@bridge-ui/core/Tokens').CalendarRounded | undefined>;
         maxDate: Date | undefined;
@@ -24,7 +25,7 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
     merged: import('vue').ComputedRef<CalendarRangeMerged>;
     showNav: import('vue').ComputedRef<boolean>;
     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, Partial<Omit<CalendarRangeOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate" | "hideMonths" | "hideYears">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarRangeOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "previewDate" | "startOfWeek" | "timeZone" | "viewDate" | "hideMonths" | "hideYears">>>>;
     bodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     viewDate: import('vue').ComputedRef<Date>;
     viewYear: import('vue').ComputedRef<number>;
@@ -45,6 +46,7 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
     yearPageSize: number;
     endMonthLabel: import('vue').ComputedRef<string>;
     endHeaderBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    monthYearBind: import('vue').ComputedRef<string>;
     nextButtonBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         onClick: () => void;
         type: "button";
@@ -251,7 +253,6 @@ export declare function useCalendarRange(props: MaybeRefOrGetter<CalendarRangeOw
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }>>;
-    pickerFillBind: import('vue').ComputedRef<string>;
     monthPanelYear: import('vue').ComputedRef<number>;
     todayButtonBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         onClick: () => void;

package/dist/Components/CalendarRange/composables/useCalendarRange.js

@@ -8,7 +8,9 @@ import { calendarRoundedProps as f } from "@bridge-ui/core/Tokens";
 import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarRange/composables/useCalendarRange.ts
 var ie = [
+	"fill",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -106,6 +108,7 @@ function g(d, g, _) {
 		J("date");
 	}, xe = a(() => F.value === "end" ? v.value.getYear(z.value, T.value) : W.value), Se = a(() => F.value === "end" ? v.value.getMonth(z.value, T.value) : G.value), Ce = a(() => ({
 		color: x.value.color,
+		error: x.value.error,
 		tokens: x.value.tokens,
 		rounded: x.value.rounded,
 		maxDate: x.value.maxDate,
@@ -114,15 +117,18 @@ function g(d, g, _) {
 		readOnly: x.value.readOnly,
 		timeZone: x.value.timeZone
 	})), X = a(() => x.value.orientation === "vertical"), we = a(() => r(S.value?.root, C.value, p({
-		"flex w-full flex-col overflow-hidden": !0,
-		"min-w-[38rem]": !X.value,
-		"min-w-72": X.value,
+		"flex flex-col overflow-hidden": !0,
+		"w-full": x.value.fill,
+		"min-w-max": !0,
+		"w-fit": !x.value.fill && X.value,
 		[w.value.root ?? ""]: !0
 	}))), Te = a(() => r(S.value?.header, {}, p({
-		"flex items-center p-2.5": !0,
+		"flex w-full items-center p-2.5": !0,
 		[w.value.header ?? ""]: !0
 	}))), Ee = a(() => r(S.value?.months, {}, p({
-		"flex shrink-0 items-center gap-x-10": !0,
+		"flex min-w-0 flex-1 items-center": !0,
+		"justify-between": !X.value,
+		"justify-start": X.value,
 		[w.value.months ?? ""]: !0
 	}))), De = a(() => r(S.value?.endHeader, {}, p({
 		"flex items-center justify-center px-2.5 pb-1 pt-2": !0,
@@ -136,14 +142,10 @@ function g(d, g, _) {
 		"flex-col": X.value,
 		[w.value.panels ?? ""]: !0
 	}))), Ae = a(() => r(S.value?.start, {}, p({
-		"flex flex-col": !0,
-		"min-w-0 flex-1": X.value,
-		"w-72 shrink-0": !X.value,
+		"flex min-w-72 flex-1 flex-col": !0,
 		[w.value.start ?? ""]: !0
 	}))), je = a(() => r(S.value?.end, {}, p({
-		"flex flex-col": !0,
-		"min-w-0 flex-1": X.value,
-		"w-72 shrink-0": !X.value,
+		"flex min-w-72 flex-1 flex-col": !0,
 		[w.value.end ?? ""]: !0
 	}))), Me = a(() => p({ "flex min-h-64 flex-1 flex-col": !0 })), Z = a(() => r(S.value?.selector, {
 		type: "button",
@@ -231,8 +233,8 @@ function g(d, g, _) {
 		yearPageSize: 15,
 		endMonthLabel: U,
 		endHeaderBind: De,
+		monthYearBind: Me,
 		nextButtonBind: Ie,
-		pickerFillBind: Me,
 		monthPanelYear: xe,
 		todayButtonBind: Le,
 		monthPanelValue: Se,

package/dist/Components/CalendarYear/CalendarYear.vue_vue_type_script_setup_true_lang.js

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

package/dist/Components/CalendarYear/calendarYear.types.d.ts

@@ -84,6 +84,12 @@ export interface CalendarYearOwnProps {
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
     /**
      * Latest selectable date (bounds year availability).
      *

package/dist/Components/CalendarYear/composables/useCalendarYear.d.ts

@@ -14,7 +14,7 @@ export type CalendarYearCell = {
 export declare function useCalendarYear(props: MaybeRefOrGetter<CalendarYearOwnProps>, libDefaults: CalendarYearLibDefaults, emit: (event: "change", year: number) => void): {
     years: import('vue').ComputedRef<CalendarYearCell[]>;
     merged: import('vue').ComputedRef<CalendarYearMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarYearOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "disableYears" | "maxDate" | "minDate" | "timeZone" | "pageSize" | "startYear">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<CalendarYearOwnProps, "error" | "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "disableYears" | "maxDate" | "minDate" | "timeZone" | "pageSize" | "startYear">>>>;
     gridBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         role: string;
     }>>;

package/dist/Components/CalendarYear/composables/useCalendarYear.js

@@ -4,10 +4,11 @@ import { computed as a, toValue as o, useAttrs as s } from "vue";
 import { get as c, isNil as l, omit as u } from "es-toolkit/compat";
 import { isYearDisabled as d, resolveCalendarDayInteractionState as f } from "@bridge-ui/core/Domain";
 import { calendarColorProps as p, calendarRoundedProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { cn as h, getColorToken as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/CalendarYear/composables/useCalendarYear.ts
-var v = 15, y = [
+var y = 15, b = [
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -22,73 +23,80 @@ var v = 15, y = [
 	"customProps",
 	"disableYears"
 ];
-function b(b, x, S) {
-	let C = s(), w = e(), T = t(), E = a(() => _({
-		bridgeKeys: y,
+function x(x, S, C) {
+	let w = s(), T = e(), E = t(), D = a(() => v({
+		bridgeKeys: b,
 		props: {
-			...C,
-			...o(b)
+			...w,
+			...o(x)
 		}
-	})), { merged: D } = r({
-		libDefaults: x,
-		props: () => E.value.componentProps
-	}), O = a(() => D.value.customProps), k = a(() => u(E.value.inheritedAttrs, ["onChange"])), A = i({
-		props: () => E.value.componentProps,
+	})), { merged: O } = r({
+		libDefaults: S,
+		props: () => D.value.componentProps
+	}), k = a(() => O.value.customProps), A = a(() => u(D.value.inheritedAttrs, ["onChange"])), j = i({
+		props: () => D.value.componentProps,
 		entry: a(() => {})
-	}), j = a(() => T(D.value.timeZone)), M = a(() => D.value.pageSize ?? v), N = a(() => {
-		if (!l(D.value.startYear)) return D.value.startYear;
-		let e = D.value.value ?? w.value.getYear(w.value.now(j.value), j.value), t = Math.floor(M.value / 2);
+	}), M = a(() => E(O.value.timeZone)), N = a(() => O.value.pageSize ?? y), P = a(() => {
+		if (!l(O.value.startYear)) return O.value.startYear;
+		let e = O.value.value ?? T.value.getYear(T.value.now(M.value), M.value), t = Math.floor(N.value / 2);
 		return Math.max(1, e - t);
-	}), P = a(() => g(p, D.value.tokens?.color)), F = a(() => {
-		let e = g(m, D.value.tokens?.rounded);
-		return c(e, D.value.rounded);
-	}), I = a(() => c(P.value, D.value.color)), L = a(() => Array.from({ length: M.value }, (e, t) => {
-		let n = N.value + t, r = !!D.value.disabled || d({
+	}), F = a(() => {
+		let e = _(m, O.value.tokens?.rounded);
+		return c(e, O.value.rounded);
+	}), I = a(() => {
+		let e = _(p, O.value.tokens?.color);
+		return g({
+			tokens: e,
+			color: O.value.color,
+			invalid: O.value.error
+		});
+	}), L = a(() => Array.from({ length: N.value }, (e, t) => {
+		let n = P.value + t, r = !!O.value.disabled || d({
 			year: n,
-			adapter: w.value,
-			context: j.value,
-			maxDate: D.value.maxDate,
-			minDate: D.value.minDate,
-			disableYears: D.value.disableYears
-		}), i = !l(D.value.value) && D.value.value === n;
+			adapter: T.value,
+			context: M.value,
+			maxDate: O.value.maxDate,
+			minDate: O.value.minDate,
+			disableYears: O.value.disableYears
+		}), i = !l(O.value.value) && O.value.value === n;
 		return {
 			year: n,
 			state: f({
 				disabled: r,
 				selected: i,
-				readOnly: D.value.readOnly
+				readOnly: O.value.readOnly
 			}),
 			selected: i,
 			label: String(n),
-			disabled: r || !!D.value.readOnly
+			disabled: r || !!O.value.readOnly
 		};
 	})), R = (e) => {
-		D.value.disabled || D.value.readOnly || d({
+		O.value.disabled || O.value.readOnly || d({
 			year: e,
-			adapter: w.value,
-			context: j.value,
-			maxDate: D.value.maxDate,
-			minDate: D.value.minDate,
-			disableYears: D.value.disableYears
-		}) || S("change", e);
+			adapter: T.value,
+			context: M.value,
+			maxDate: O.value.maxDate,
+			minDate: O.value.minDate,
+			disableYears: O.value.disableYears
+		}) || C("change", e);
 	};
 	return {
 		years: L,
-		merged: D,
-		rootBind: a(() => n(O.value?.root, k.value, h({
+		merged: O,
+		rootBind: a(() => n(k.value?.root, A.value, h({
 			"flex flex-col": !0,
-			[A.value.root ?? ""]: !0
+			[j.value.root ?? ""]: !0
 		}))),
-		gridBind: a(() => n(O.value?.grid, { role: "grid" }, h({
+		gridBind: a(() => n(k.value?.grid, { role: "grid" }, h({
 			"grid grid-cols-3 gap-2": !0,
-			[A.value.grid ?? ""]: !0
+			[j.value.grid ?? ""]: !0
 		}))),
-		pageSize: M,
-		startYear: N,
+		pageSize: N,
+		startYear: P,
 		selectYear: R,
 		getYearBind: (e) => {
 			let t = I.value;
-			return n(O.value?.year, {
+			return n(k.value?.year, {
 				type: "button",
 				disabled: e.disabled,
 				"aria-pressed": e.selected,
@@ -100,10 +108,10 @@ function b(b, x, S) {
 				[t?.hover ?? ""]: e.state === "base",
 				[t?.selected ?? ""]: e.state === "selected",
 				[t?.disabled ?? ""]: e.state === "disabled",
-				[A.value.year ?? ""]: !0
+				[j.value.year ?? ""]: !0
 			}));
 		}
 	};
 }
 //#endregion
-export { b as useCalendarYear };
+export { x as useCalendarYear };

package/dist/Components/Checkbox/composables/useCheckbox.js

@@ -2,8 +2,8 @@ import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistr
 import { useFormControl as r } from "../../FormControl/composables/useFormControl.js";
 import { computed as i, ref as a, toValue as o, useAttrs as s, watchEffect as c } from "vue";
 import { get as l, omit as u } from "es-toolkit/compat";
-import { checkboxColorProps as d, checkboxInvalidatedProps as f, checkboxRoundedProps as p, checkboxSizeProps as m } from "@bridge-ui/core/Tokens";
-import { cn as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
+import { checkboxColorProps as d, checkboxRoundedProps as f, checkboxSizeProps as p } from "@bridge-ui/core/Tokens";
+import { cn as m, getColorToken as h, mergeBridgeUILayeredClasses as g, splitComponentProps as _ } from "@bridge-ui/core/Utils";
 //#region src/Components/Checkbox/composables/useCheckbox.ts
 var v = [
 	"size",
@@ -37,49 +37,53 @@ function y(y, b, x) {
 		props: () => T.value.componentProps
 	}), A = i(() => !!o(x)), j = i(() => {
 		let e = g(d, D.value?.tokens?.color);
-		return l(e, E.value.color ?? "primary");
-	}), M = i(() => g(f, D.value?.tokens?.invalidated)), N = i(() => w.invalidated.value ? M.value : j.value), P = i(() => {
-		let e = g(m, D.value?.tokens?.size);
+		return h({
+			tokens: e,
+			color: E.value.color,
+			invalid: w.invalidated.value
+		});
+	}), M = i(() => {
+		let e = g(p, D.value?.tokens?.size);
 		return l(e, E.value.size ?? "sm");
-	}), F = i(() => {
-		let e = g(p, D.value?.tokens?.rounded);
+	}), N = i(() => {
+		let e = g(f, D.value?.tokens?.rounded);
 		return l(e, E.value.rounded ?? "sm");
 	});
 	c(() => {
 		C.value && (C.value.indeterminate = !!E.value.indeterminate);
 	});
-	let I = i(() => e({
+	let P = i(() => e({
 		...O.value?.input,
 		...w.controlBind.value,
 		type: "checkbox"
-	}, u(T.value.inheritedAttrs, ["class"]), h({
+	}, u(T.value.inheritedAttrs, ["class"]), m({
 		"sr-only": !0,
 		[k.value.input ?? ""]: !0
-	}))), L = i(() => e(O.value?.control, { "aria-hidden": !0 }, h({
+	}))), F = i(() => e(O.value?.control, { "aria-hidden": !0 }, m({
 		"inline-flex shrink-0 items-center justify-center border shadow-sm transition ease-in-out duration-100": !0,
 		"pointer-events-none": !0,
-		[P.value ?? ""]: !0,
-		[F.value ?? ""]: !0,
-		[N.value?.base ?? ""]: !A.value,
-		[N.value?.checked ?? ""]: A.value,
+		[M.value ?? ""]: !0,
+		[N.value ?? ""]: !0,
+		[j.value?.base ?? ""]: !A.value,
+		[j.value?.checked ?? ""]: A.value,
 		[k.value.control ?? ""]: !0
 	})));
 	return {
 		merged: E,
-		iconBind: i(() => e(O.value?.icon, {}, h({
+		iconBind: i(() => e(O.value?.icon, {}, m({
 			"text-white": !0,
 			[k.value.icon ?? ""]: !0
 		}))),
 		inputRef: C,
-		fieldBind: i(() => e({}, {}, h({
+		fieldBind: i(() => e({}, {}, m({
 			"relative inline-flex shrink-0 cursor-pointer items-center": !0,
 			"has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-offset-2": !0,
-			[N.value?.focus ?? ""]: !0
+			[j.value?.focus ?? ""]: !0
 		}))),
-		inputBind: I,
+		inputBind: P,
 		isChecked: A,
 		formControl: w,
-		controlBind: L
+		controlBind: F
 	};
 }
 //#endregion

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

@@ -23,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: DatePickerModel | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
     showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;