@bridge-ui/vue 0.1.0 → 0.2.0

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

@@ -40,7 +40,6 @@ var b = /*@__PURE__*/ u({
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -49,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"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, {
+		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, handleApply: E, cancelLabel: D, contentBind: O, displayValue: k, handleCancel: A, calendarBind: j, timeFillBind: M, timeSizerBind: N, timePanelBind: P, applyButtonProps: F, cancelButtonProps: I, handlePanelChange: L, handleCalendarChange: R, timePanelCustomProps: z } = n(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -58,12 +57,11 @@ var b = /*@__PURE__*/ u({
 			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, {
+		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(O)) }, [s("div", { class: p(v(j)) }, [l(t, {
 			fill: v(x).fill,
 			color: v(x).color,
-			value: v(A),
+			value: v(k),
 			error: v(x).error,
-			tokens: v(I),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
 			"min-date": v(x).minDate,
@@ -72,7 +70,7 @@ var b = /*@__PURE__*/ u({
 			"time-zone": v(x).timeZone,
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
-			onChange: v(B),
+			onChange: v(R),
 			"default-view": v(x).defaultView,
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
@@ -88,7 +86,6 @@ var b = /*@__PURE__*/ u({
 			"color",
 			"value",
 			"error",
-			"tokens",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -105,9 +102,9 @@ var b = /*@__PURE__*/ u({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		])], 2), s("div", { class: p(v(F)) }, [s("div", {
+		])], 2), s("div", { class: p(v(P)) }, [s("div", {
 			"aria-hidden": "true",
-			class: p(v(P))
+			class: p(v(N))
 		}, [
 			s("div", { class: p(v(r)) }, null, 2),
 			s("div", { class: p(v(r)) }, null, 2),
@@ -119,12 +116,11 @@ var b = /*@__PURE__*/ u({
 				key: 1,
 				class: p(v(r))
 			}, null, 2)) : a("", !0)
-		], 2), s("div", { class: p(v(N)) }, [l(v(i), {
+		], 2), s("div", { class: p(v(M)) }, [l(v(i), {
 			ampm: v(x).ampm,
 			fill: v(x).fill,
-			tokens: v(E),
 			color: v(x).color,
-			value: v(A),
+			value: v(k),
 			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
@@ -133,14 +129,13 @@ var b = /*@__PURE__*/ u({
 			interval: v(x).interval,
 			"read-only": v(x).readOnly,
 			"time-zone": v(x).timeZone,
-			onChange: v(z),
+			onChange: v(L),
 			"show-seconds": v(x).showSeconds,
 			"disable-times": v(x).disableTimes,
-			"custom-props": v(V)
+			"custom-props": v(z)
 		}, null, 8, [
 			"ampm",
 			"fill",
-			"tokens",
 			"color",
 			"value",
 			"error",
@@ -156,16 +151,16 @@ var b = /*@__PURE__*/ u({
 			"disable-times",
 			"custom-props"
 		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
-			apply: v(D),
-			cancel: v(j)
+			apply: v(E),
+			cancel: v(A)
 		}, () => [l(v(e), f({
 			variant: "flat",
 			color: "secondary",
-			onClick: v(j)
-		}, v(R)), {
-			default: y(() => [c(_(v(O)), 1)]),
+			onClick: v(A)
+		}, v(I)), {
+			default: y(() => [c(_(v(D)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
+		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(F), { onClick: v(E) }), {
 			default: y(() => [c(_(v(T)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));

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

@@ -9,13 +9,9 @@ type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePic
  */
 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/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">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "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/Tokens').TimeColorItem>> | undefined;
-        rounded: Record<string, string> | undefined;
-    }>;
     handleApply: () => void;
     contentBind: import('vue').ComputedRef<string>;
     displayValue: import('vue').ComputedRef<Date | null>;
@@ -24,11 +20,6 @@ export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePicker
     timeFillBind: import('vue').ComputedRef<string>;
     timeSizerBind: import('vue').ComputedRef<string>;
     timePanelBind: 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;
-    }>;
     handlePanelChange: (next: null | TimeValue) => void;
     handleCalendarChange: (next: DatePickerModel) => void;
     timePanelCustomProps: import('vue').ComputedRef<{

package/dist/Components/DateTimePicker/composables/useDateTimePicker.js

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

package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { 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 { CalendarView } from '../Calendar/calendar.types';
@@ -242,12 +242,6 @@ export interface DateTimePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateTimePickerTokens;
     /**
      * Controlled value.
      *
@@ -270,33 +264,4 @@ export interface DateTimePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateTimePickerTokens {
-    /**
-     * 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 DateTimePickerProps = MergeHtmlProps<DateTimePickerOwnProps, HTMLAttributes>;

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

@@ -1,3 +1,3 @@
 export { useDateTimePicker } from './composables/useDateTimePicker';
-export type { DateTimePickerClasses, DateTimePickerColorOverrides, DateTimePickerCustomProps, DateTimePickerEmits, DateTimePickerOwnProps, DateTimePickerProps, DateTimePickerRoundedOverrides, DateTimePickerSlots, DateTimePickerTokens, } from './dateTimePicker.types';
+export type { DateTimePickerClasses, DateTimePickerColorOverrides, DateTimePickerCustomProps, DateTimePickerEmits, DateTimePickerOwnProps, DateTimePickerProps, DateTimePickerRoundedOverrides, DateTimePickerSlots, } from './dateTimePicker.types';
 export { default as DateTimePicker } from './DateTimePicker.vue';

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

@@ -40,7 +40,6 @@ var b = /*@__PURE__*/ u({
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -49,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",
@@ -58,12 +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,
 			error: v(x).error,
-			value: v(j),
-			tokens: v(L),
+			value: v(A),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
 			"min-date": v(x).minDate,
@@ -73,23 +71,18 @@ 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,
 			"disable-years": v(x).disableYears,
 			"disable-months": v(x).disableMonths,
-			"hide-outside-days": v(x).hideOutsideDays,
-			"custom-props": {
-				end: { class: "pr-2.5" },
-				start: { class: "pr-2.5" },
-				panels: { class: "gap-0" }
-			}
+			"hide-outside-days": v(x).hideOutsideDays
 		}, {
 			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),
@@ -101,13 +94,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,
 				fill: v(x).fill,
-				tokens: v(D),
 				color: v(x).color,
 				error: v(x).error,
-				value: v(R),
+				value: v(I),
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
 				"min-time": v(x).minTime,
@@ -116,13 +108,12 @@ 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",
 				"fill",
-				"tokens",
 				"color",
 				"error",
 				"value",
@@ -140,7 +131,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),
@@ -152,12 +143,11 @@ 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,
 				fill: v(x).fill,
-				tokens: v(D),
 				color: v(x).color,
-				value: v(F),
+				value: v(P),
 				error: v(x).error,
 				rounded: v(x).rounded,
 				"max-time": v(x).maxTime,
@@ -167,13 +157,12 @@ 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",
 				"fill",
-				"tokens",
 				"color",
 				"value",
 				"error",
@@ -195,7 +184,6 @@ var b = /*@__PURE__*/ u({
 			"color",
 			"error",
 			"value",
-			"tokens",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -213,16 +201,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, "error" | "color" | "fill" | "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.fill.color.error.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,47 +38,40 @@ 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 flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
@@ -87,38 +80,36 @@ function S(S, C, w) {
 			[e]: !0,
 			[F.value.root ?? ""]: !0
 		}));
-	}), te = s(() => v({ "flex w-full min-w-max flex-col": !0 })), ne = s(() => v({
+	}), $ = 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),