@bridge-ui/vue 0.1.0 → 0.1.1

package/dist/Components/ColorPicker/composables/useColorPicker.js

@@ -0,0 +1,253 @@
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { FIELD_OVERLAY_INJECTION_KEY as i } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as a, inject as o, ref as s, toValue as c, useAttrs as ee, watch as te } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { DEFAULT_COLOR_FORMAT as d, DEFAULT_HSVA as f, colorStringsEqual as p, formatColor as m, hueToCssRgb as ne, parseColor as h, resolveColorAlpha as g, saturationValueFromPointer as _, toCssRgba as v, unitFromPointer as y } from "@bridge-ui/core/Domain";
+import { colorPickerRoundedProps as b, colorPickerSizeProps as re } from "@bridge-ui/core/Tokens";
+import { cn as x, mergeBridgeUILayeredClasses as S, splitComponentProps as ie } from "@bridge-ui/core/Utils";
+//#region src/Components/ColorPicker/composables/useColorPicker.ts
+var ae = [
+	"fill",
+	"alpha",
+	"value",
+	"format",
+	"classes",
+	"rounded",
+	"disabled",
+	"readOnly",
+	"swatches",
+	"showFooter",
+	"customProps",
+	"defaultValue"
+];
+function C(e) {
+	return h(e) ?? f;
+}
+function w(f, w, T) {
+	let oe = ee(), E = o(i, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), D = e(), O = a(() => ie({
+		bridgeKeys: ae,
+		props: {
+			...oe,
+			...c(f)
+		}
+	})), { merged: k, entry: A } = n({
+		libDefaults: w,
+		componentName: "ColorPicker",
+		props: () => O.value.componentProps
+	}), j = a(() => k.value.customProps), M = a(() => u(O.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), N = r({
+		entry: A,
+		props: () => O.value.componentProps
+	}), P = a(() => c(f)), F = a(() => P.value.value !== void 0), I = s(k.value.defaultValue ?? null), L = a(() => F.value ? P.value.value ?? null : I.value), R = a(() => k.value.format ?? d), z = s(C(L.value));
+	te(() => [L.value, k.value.showFooter], ([e, t]) => {
+		t && (z.value = C(e));
+	});
+	let B = a(() => k.value.showFooter ? z.value : C(L.value)), V = a(() => g(k.value.alpha, R.value)), H = a(() => m(B.value, R.value)), U = a(() => v(B.value)), W = a(() => ne(B.value.h)), G = a(() => v({
+		...B.value,
+		a: 1
+	})), K = a(() => {
+		let e = S(re, A.value?.tokens?.size);
+		return l(e, ["md", "swatch"]) ?? "";
+	}), q = a(() => {
+		let e = S(b, A.value?.tokens?.rounded);
+		return l(e, k.value.rounded ?? "md") ?? "";
+	}), J = a(() => (k.value.swatches ?? []).filter((e) => h(e))), Y = a(() => !k.value.disabled && !k.value.readOnly), X = (e) => {
+		F.value || (I.value = e), T("change", e);
+	}, Z = (e) => {
+		if (k.value.showFooter) {
+			z.value = e;
+			return;
+		}
+		X(m(e, R.value));
+	}, Q = (e) => {
+		Z({
+			...B.value,
+			...e
+		});
+	}, se = (e) => {
+		let t = h(e);
+		!t || !Y.value || Z(t);
+	}, ce = () => {
+		X(m(z.value, R.value)), T("apply"), E.apply();
+	}, le = () => {
+		z.value = C(L.value), T("cancel"), E.cancel();
+	}, ue = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = _(e.clientX, e.clientY, t);
+		Q(n);
+	}, de = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = y(e.clientX, t.left, t.width);
+		Q({ h: n * 360 });
+	}, fe = (e) => {
+		if (!Y.value) return;
+		let t = e.currentTarget.getBoundingClientRect(), n = y(e.clientX, t.left, t.width);
+		Q({ a: n });
+	}, $ = (e) => ({
+		onPointerdown: (t) => {
+			t.preventDefault(), t.currentTarget.setPointerCapture(t.pointerId), e(t);
+		},
+		onPointermove: (t) => {
+			t.currentTarget.hasPointerCapture(t.pointerId) && e(t);
+		}
+	}), pe = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? 10 : 1;
+		e.key === "ArrowLeft" ? (e.preventDefault(), Q({ s: B.value.s - t })) : e.key === "ArrowRight" ? (e.preventDefault(), Q({ s: B.value.s + t })) : e.key === "ArrowDown" ? (e.preventDefault(), Q({ v: B.value.v - t })) : e.key === "ArrowUp" && (e.preventDefault(), Q({ v: B.value.v + t }));
+	}, me = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? 10 : 1;
+		e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), Q({ h: B.value.h - t })) : (e.key === "ArrowRight" || e.key === "ArrowUp") && (e.preventDefault(), Q({ h: B.value.h + t }));
+	}, he = (e) => {
+		if (!Y.value) return;
+		let t = e.shiftKey ? .1 : .01;
+		e.key === "ArrowLeft" || e.key === "ArrowDown" ? (e.preventDefault(), Q({ a: B.value.a - t })) : (e.key === "ArrowRight" || e.key === "ArrowUp") && (e.preventDefault(), Q({ a: B.value.a + t }));
+	}, ge = a(() => t(j.value?.root, M.value, x({
+		"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+		"w-full": k.value.fill,
+		"w-72": !k.value.fill,
+		[q.value]: !0,
+		[N.value.root ?? ""]: !0
+	}))), _e = a(() => x({ "flex flex-col gap-3 p-3": !0 })), ve = a(() => t(j.value?.area, {
+		...$(ue),
+		role: "slider",
+		onKeydown: pe,
+		tabindex: Y.value ? 0 : -1,
+		style: { backgroundColor: W.value },
+		"aria-label": D("Saturation and brightness"),
+		"aria-valuetext": `Saturation ${Math.round(B.value.s)}%, Brightness ${Math.round(B.value.v)}%`
+	}, x({
+		"relative h-40 w-full cursor-crosshair overflow-hidden touch-none": !0,
+		[q.value]: !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.area ?? ""]: !0
+	}))), ye = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			left: `${B.value.s}%`,
+			top: `${100 - B.value.v}%`
+		},
+		class: "pointer-events-none absolute z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), be = a(() => t(j.value?.hue, {
+		...$(de),
+		role: "slider",
+		"aria-valuemin": 0,
+		"aria-valuemax": 360,
+		onKeydown: me,
+		"aria-label": D("Hue"),
+		tabindex: Y.value ? 0 : -1,
+		"aria-valuenow": Math.round(B.value.h),
+		style: { backgroundImage: "linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)" }
+	}, x({
+		"relative h-3 w-full cursor-pointer touch-none": !0,
+		"rounded-full": !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.hue ?? ""]: !0
+	}))), xe = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			backgroundColor: W.value,
+			left: `${B.value.h / 360 * 100}%`
+		},
+		class: "pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), Se = a(() => t(j.value?.alpha, {
+		...$(fe),
+		role: "slider",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		onKeydown: he,
+		tabindex: Y.value ? 0 : -1,
+		"aria-label": D("Alpha"),
+		"aria-valuenow": Math.round(B.value.a * 100)
+	}, x({
+		"relative h-3 w-full cursor-pointer overflow-hidden touch-none": !0,
+		"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+		"rounded-full": !0,
+		"cursor-not-allowed": !Y.value,
+		[N.value.alpha ?? ""]: !0
+	}))), Ce = a(() => ({
+		"aria-hidden": !0,
+		class: "pointer-events-none absolute inset-0",
+		style: { backgroundImage: `linear-gradient(to right, transparent, ${G.value})` }
+	})), we = a(() => ({
+		"aria-hidden": !0,
+		style: {
+			backgroundColor: U.value,
+			left: `${B.value.a * 100}%`
+		},
+		class: "pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
+	})), Te = a(() => t(j.value?.preview, {}, x({
+		"flex items-center gap-2": !0,
+		[N.value.preview ?? ""]: !0
+	}))), Ee = a(() => ({
+		"aria-hidden": !0,
+		class: x({
+			"relative shrink-0 overflow-hidden": !0,
+			"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+			[K.value]: !0,
+			[q.value]: !0
+		})
+	})), De = a(() => ({
+		class: "absolute inset-0",
+		style: { backgroundColor: U.value }
+	})), Oe = a(() => t(j.value?.swatches, {}, x({
+		"flex flex-wrap gap-2": !0,
+		[N.value.swatches ?? ""]: !0
+	})));
+	return {
+		merged: k,
+		hueBind: be,
+		rootBind: ge,
+		areaBind: ve,
+		cssColor: U,
+		alphaBind: Se,
+		showAlpha: V,
+		footerBind: a(() => t(j.value?.footer, {}, x({
+			"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,
+			[N.value.footer ?? ""]: !0
+		}))),
+		showFooter: a(() => !!k.value.showFooter),
+		previewBind: Te,
+		contentBind: _e,
+		handleApply: ce,
+		swatchesBind: Oe,
+		handleCancel: le,
+		hueThumbBind: xe,
+		areaThumbBind: ye,
+		alphaFillBind: Ce,
+		formattedValue: H,
+		alphaThumbBind: we,
+		presetSwatches: J,
+		previewSwatchBind: Ee,
+		handleSwatchClick: se,
+		swatchButtonClass: a(() => x({
+			"relative shrink-0 overflow-hidden": !0,
+			"bg-[image:repeating-conic-gradient(#d1d5db_0%_25%,#ffffff_0%_50%)] bg-[size:0.5rem_0.5rem] dark:bg-[image:repeating-conic-gradient(#4b5563_0%_25%,#1f2937_0%_50%)]": !0,
+			[K.value]: !0,
+			[q.value]: !0,
+			"border border-black/10 dark:border-white/15": !0,
+			"hover:ring-2 hover:ring-dark-300 hover:ring-offset-2 hover:ring-offset-white dark:hover:ring-dark-500 dark:hover:ring-offset-dark-900": Y.value,
+			"cursor-not-allowed opacity-50": !Y.value
+		})),
+		swatchSelectedClass: a(() => "ring-2 ring-dark-500 ring-offset-2 ring-offset-white dark:ring-dark-400 dark:ring-offset-dark-900"),
+		previewSwatchFillBind: De,
+		applyLabel: a(() => D("Apply")),
+		cancelLabel: a(() => D("Cancel")),
+		applyButtonProps: a(() => j.value?.applyButton),
+		cancelButtonProps: a(() => j.value?.cancelButton),
+		isSwatchSelected: (e) => p(e, H.value),
+		swatchCss: (e) => {
+			let t = h(e);
+			return t ? v(t) : void 0;
+		}
+	};
+}
+//#endregion
+export { w as useColorPicker };

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

@@ -0,0 +1,3 @@
+export type { ColorPickerClasses, ColorPickerCustomProps, ColorPickerEmits, ColorPickerOwnProps, ColorPickerProps, ColorPickerRoundedOverrides, ColorPickerSlots, } from './colorPicker.types';
+export { default as ColorPicker } from './ColorPicker.vue';
+export { useColorPicker } from './composables/useColorPicker';

package/dist/Components/ColorPicker/index.js

@@ -0,0 +1,3 @@
+import { useColorPicker as e } from "./composables/useColorPicker.js";
+import t from "./ColorPicker.js";
+export { t as ColorPicker, e as useColorPicker };

package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -34,7 +34,6 @@ var g = /*@__PURE__*/ s({
 		},
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -43,7 +42,7 @@ var g = /*@__PURE__*/ s({
 		"change"
 	],
 	setup(s, { emit: g }) {
-		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, calendarTokens: E, applyButtonProps: D, cancelButtonProps: O, handleCalendarChange: k } = n(s, {
+		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, applyButtonProps: E, cancelButtonProps: D, handleCalendarChange: O } = n(s, {
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary"
@@ -54,7 +53,6 @@ var g = /*@__PURE__*/ s({
 			error: m(_).error,
 			range: m(_).range,
 			value: m(w),
-			tokens: m(E),
 			rounded: m(_).rounded,
 			"max-date": m(_).maxDate,
 			"min-date": m(_).minDate,
@@ -64,7 +62,7 @@ var g = /*@__PURE__*/ s({
 			"time-zone": m(_).timeZone,
 			"hide-years": m(_).hideYears,
 			"hide-months": m(_).hideMonths,
-			onChange: m(k),
+			onChange: m(O),
 			"default-view": m(_).defaultView,
 			"start-of-week": m(_).startOfWeek,
 			"disable-dates": m(_).disableDates,
@@ -81,7 +79,6 @@ var g = /*@__PURE__*/ s({
 			"error",
 			"range",
 			"value",
-			"tokens",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -106,10 +103,10 @@ var g = /*@__PURE__*/ s({
 			variant: "flat",
 			color: "secondary",
 			onClick: m(T)
-		}, m(O)), {
+		}, m(D)), {
 			default: h(() => [a(p(m(C)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(D), { onClick: m(S) }), {
+		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(E), { onClick: m(S) }), {
 			default: h(() => [a(p(m(x)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));

package/dist/Components/DatePicker/composables/useDatePicker.d.ts

@@ -6,17 +6,12 @@ type DatePickerLibDefaults = LibDefaultsShape<DatePickerOwnProps, "color" | "rou
 type DatePickerMerged = MergeLibDefaults<DatePickerOwnProps, DatePickerLibDefaults>;
 export declare function useDatePicker(props: MaybeRefOrGetter<DatePickerOwnProps>, libDefaults: DatePickerLibDefaults, emit: SetupContext<DatePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DatePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DatePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DatePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;
     displayValue: import('vue').ComputedRef<DatePickerModel>;
     handleCancel: () => void;
-    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;
-    }>;
     handleCalendarChange: (next: DatePickerModel) => void;
     applyLabel: import('vue').ComputedRef<string>;
     cancelLabel: import('vue').ComputedRef<string>;

package/dist/Components/DatePicker/composables/useDatePicker.js

@@ -6,7 +6,33 @@ import { get as d, isNil as f, omit as p } from "es-toolkit/compat";
 import { menuRoundedProps as m } from "@bridge-ui/core/Tokens";
 import { cn as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/DatePicker/composables/useDatePicker.ts
-var _ = /* @__PURE__ */ "fill.color.error.range.value.tokens.classes.maxDate.minDate.rounded.disabled.multiple.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.defaultView.startOfWeek.defaultValue.disableDates.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+var _ = [
+	"fill",
+	"color",
+	"error",
+	"range",
+	"value",
+	"classes",
+	"maxDate",
+	"minDate",
+	"rounded",
+	"disabled",
+	"multiple",
+	"readOnly",
+	"timeZone",
+	"hideYears",
+	"hideMonths",
+	"showFooter",
+	"customProps",
+	"defaultView",
+	"startOfWeek",
+	"defaultValue",
+	"disableDates",
+	"disableYears",
+	"hideWeekdays",
+	"disableMonths",
+	"hideOutsideDays"
+];
 function v(v, y, b) {
 	let x = l(), S = o(i, {
 		apply: () => void 0,
@@ -32,11 +58,7 @@ function v(v, y, b) {
 	u(() => [N.value, T.value.showFooter], ([e, t]) => {
 		t && (P.value = e);
 	});
-	let F = a(() => T.value.showFooter ? P.value : N.value), I = a(() => ({
-		day: T.value.tokens?.calendar?.day ?? T.value.tokens?.day,
-		color: T.value.tokens?.calendar?.color ?? T.value.tokens?.color,
-		rounded: T.value.tokens?.calendar?.rounded ?? T.value.tokens?.rounded
-	})), L = (e) => {
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = (e) => {
 		j.value || (M.value = e), b("change", e);
 	};
 	return {
@@ -57,19 +79,18 @@ function v(v, y, b) {
 		}))),
 		showFooter: a(() => !!T.value.showFooter),
 		handleApply: () => {
-			L(P.value), b("apply"), S.apply();
+			I(P.value), b("apply"), S.apply();
 		},
 		displayValue: F,
 		handleCancel: () => {
 			P.value = N.value, b("cancel"), S.cancel();
 		},
-		calendarTokens: I,
 		handleCalendarChange: (e) => {
 			if (T.value.showFooter) {
 				P.value = e;
 				return;
 			}
-			L(e);
+			I(e);
 		},
 		applyLabel: a(() => C("Apply")),
 		cancelLabel: a(() => C("Cancel")),

package/dist/Components/DatePicker/datePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DatePickerModel, DisableDatesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded } 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';
@@ -210,12 +210,6 @@ export interface DatePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DatePickerTokens;
     /**
      * Controlled value.
      *
@@ -238,26 +232,4 @@ export interface DatePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DatePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides.
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-}
 export type DatePickerProps = MergeHtmlProps<DatePickerOwnProps, HTMLAttributes>;

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

@@ -1,3 +1,3 @@
 export { useDatePicker } from './composables/useDatePicker';
-export type { DatePickerClasses, DatePickerColorOverrides, DatePickerCustomProps, DatePickerEmits, DatePickerOwnProps, DatePickerProps, DatePickerRoundedOverrides, DatePickerSlots, DatePickerTokens, } from './datePicker.types';
+export type { DatePickerClasses, DatePickerColorOverrides, DatePickerCustomProps, DatePickerEmits, DatePickerOwnProps, DatePickerProps, DatePickerRoundedOverrides, DatePickerSlots, } from './datePicker.types';
 export { default as DatePicker } from './DatePicker.vue';

package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -32,7 +32,6 @@ var g = /*@__PURE__*/ s({
 		},
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -41,7 +40,7 @@ var g = /*@__PURE__*/ s({
 		"change"
 	],
 	setup(s, { emit: g }) {
-		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, calendarTokens: E, applyButtonProps: D, cancelButtonProps: O, handleCalendarChange: k } = n(s, {
+		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, applyButtonProps: E, cancelButtonProps: D, handleCalendarChange: O } = n(s, {
 			rounded: "md",
 			startOfWeek: 0,
 			color: "primary",
@@ -52,7 +51,6 @@ var g = /*@__PURE__*/ s({
 			color: m(_).color,
 			error: m(_).error,
 			value: m(w),
-			tokens: m(E),
 			rounded: m(_).rounded,
 			"max-date": m(_).maxDate,
 			"min-date": m(_).minDate,
@@ -62,7 +60,7 @@ var g = /*@__PURE__*/ s({
 			"hide-years": m(_).hideYears,
 			"hide-months": m(_).hideMonths,
 			orientation: m(_).orientation,
-			onChange: m(k),
+			onChange: m(O),
 			"start-of-week": m(_).startOfWeek,
 			"disable-dates": m(_).disableDates,
 			"hide-weekdays": m(_).hideWeekdays,
@@ -77,7 +75,6 @@ var g = /*@__PURE__*/ s({
 			"color",
 			"error",
 			"value",
-			"tokens",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -101,10 +98,10 @@ var g = /*@__PURE__*/ s({
 			variant: "flat",
 			color: "secondary",
 			onClick: m(T)
-		}, m(O)), {
+		}, m(D)), {
 			default: h(() => [a(p(m(C)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(D), { onClick: m(S) }), {
+		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(E), { onClick: m(S) }), {
 			default: h(() => [a(p(m(x)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));

package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts

@@ -6,17 +6,12 @@ type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "col
 type DateRangePickerMerged = MergeLibDefaults<DateRangePickerOwnProps, DateRangePickerLibDefaults>;
 export declare function useDateRangePicker(props: MaybeRefOrGetter<DateRangePickerOwnProps>, libDefaults: DateRangePickerLibDefaults, emit: SetupContext<DateRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;
     displayValue: import('vue').ComputedRef<[Date, Date] | null>;
     handleCancel: () => void;
-    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;
-    }>;
     handleCalendarChange: (next: null | DateRangeValue) => void;
     applyLabel: import('vue').ComputedRef<string>;
     cancelLabel: import('vue').ComputedRef<string>;

package/dist/Components/DateRangePicker/composables/useDateRangePicker.js

@@ -11,7 +11,6 @@ var _ = [
 	"color",
 	"error",
 	"value",
-	"tokens",
 	"classes",
 	"maxDate",
 	"minDate",
@@ -57,11 +56,7 @@ function v(v, y, b) {
 	u(() => [N.value, T.value.showFooter], ([e, t]) => {
 		t && (P.value = e);
 	});
-	let F = a(() => T.value.showFooter ? P.value : N.value), I = a(() => ({
-		day: T.value.tokens?.calendar?.day ?? T.value.tokens?.day,
-		color: T.value.tokens?.calendar?.color ?? T.value.tokens?.color,
-		rounded: T.value.tokens?.calendar?.rounded ?? T.value.tokens?.rounded
-	})), L = (e) => {
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = (e) => {
 		j.value || (M.value = e), b("change", e);
 	};
 	return {
@@ -82,19 +77,18 @@ function v(v, y, b) {
 		}))),
 		showFooter: a(() => !!T.value.showFooter),
 		handleApply: () => {
-			L(P.value), b("apply"), S.apply();
+			I(P.value), b("apply"), S.apply();
 		},
 		displayValue: F,
 		handleCancel: () => {
 			P.value = N.value, b("cancel"), S.cancel();
 		},
-		calendarTokens: I,
 		handleCalendarChange: (e) => {
 			if (T.value.showFooter) {
 				P.value = e;
 				return;
 			}
-			L(e);
+			I(e);
 		},
 		applyLabel: a(() => C("Apply")),
 		cancelLabel: a(() => C("Cancel")),

package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DateRangeValue, DisableDatesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded } 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';
@@ -195,12 +195,6 @@ export interface DateRangePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateRangePickerTokens;
     /**
      * Controlled value.
      *
@@ -223,26 +217,4 @@ export interface DateRangePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateRangePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides.
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-}
 export type DateRangePickerProps = MergeHtmlProps<DateRangePickerOwnProps, HTMLAttributes>;

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

@@ -1,3 +1,3 @@
 export { useDateRangePicker } from './composables/useDateRangePicker';
-export type { DateRangePickerClasses, DateRangePickerColorOverrides, DateRangePickerCustomProps, DateRangePickerEmits, DateRangePickerOwnProps, DateRangePickerProps, DateRangePickerRoundedOverrides, DateRangePickerSlots, DateRangePickerTokens, } from './dateRangePicker.types';
+export type { DateRangePickerClasses, DateRangePickerColorOverrides, DateRangePickerCustomProps, DateRangePickerEmits, DateRangePickerOwnProps, DateRangePickerProps, DateRangePickerRoundedOverrides, DateRangePickerSlots, } from './dateRangePicker.types';
 export { default as DateRangePicker } from './DateRangePicker.vue';