@bridge-ui/vue 0.0.10 → 0.1.0

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

@@ -1,22 +1,20 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DateRangeValue, LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
-import { DateTimeRangePickerOwnProps } from '../dateTimeRangePicker.types';
-type DateTimeRangePickerLibDefaults = LibDefaultsShape<DateTimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "orientation" | "showSeconds" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DateRangeValue, TimeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DateTimeRangePickerEmits, DateTimeRangePickerOwnProps } from '../dateTimeRangePicker.types';
+type DateTimeRangePickerLibDefaults = LibDefaultsShape<DateTimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "orientation" | "showSeconds" | "startOfWeek">;
 type DateTimeRangePickerMerged = MergeLibDefaults<DateTimeRangePickerOwnProps, DateTimeRangePickerLibDefaults>;
 /**
  * Owns controlled/uncontrolled datetime range value, optional footer draft, and binds.
  */
-export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeRangePickerOwnProps>, libDefaults: DateTimeRangePickerLibDefaults, emit: {
-    (event: "change", value: null | DateRangeValue): void;
-    (event: "cancel"): void;
-}): {
+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').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimeRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "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" | "tokens" | "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').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    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').TimeColorItem>> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').TimeColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handleApply: () => void;
@@ -28,8 +26,8 @@ export declare function useDateTimeRangePicker(props: MaybeRefOrGetter<DateTimeR
     endTimeValue: import('vue').ComputedRef<Date | null>;
     timeSizerBind: import('vue').ComputedRef<string>;
     calendarTokens: import('vue').ComputedRef<{
-        day: Partial<import('@bridge-ui/core').CalendarDay> | undefined;
-        color: Record<string, Partial<import('@bridge-ui/core').CalendarColorItem>> | undefined;
+        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>;

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

@@ -1,112 +1,129 @@
 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, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
-import { cn as d, combineDateAndTime as f, splitComponentProps as p } from "@bridge-ui/core";
-import { isNil as m, omit as h } from "es-toolkit/compat";
+import { FIELD_OVERLAY_INJECTION_KEY as o } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as s, inject as c, ref as l, toValue as u, useAttrs as d, watch as f } from "vue";
+import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
+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 g = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
-function _(e, t, n) {
+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(".");
+function x(e, t, n) {
 	let [r, i] = e;
 	return t.isAfter(r, i, n) ? [i, r] : e;
 }
-function v(v, y, b) {
-	let x = l(), S = e(), C = n(), w = t(), T = o(() => p({
+function S(S, C, w) {
+	let T = d(), E = c(o, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), D = e(), O = n(), k = t(), A = s(() => y({
 		props: {
-			...x,
-			...c(v)
+			...T,
+			...u(S)
 		},
-		bridgeKeys: g
-	})), { merged: E, entry: D } = i({
-		libDefaults: y,
+		bridgeKeys: b
+	})), { merged: j, entry: M } = i({
+		libDefaults: C,
 		componentName: "DateTimeRangePicker",
-		props: () => T.value.componentProps
-	}), O = o(() => E.value.customProps), k = o(() => h(T.value.inheritedAttrs, ["onChange", "onCancel"])), A = a({
-		entry: D,
-		props: () => T.value.componentProps
-	}), j = o(() => c(v)), M = o(() => w(E.value.timeZone)), N = o(() => !m(j.value.value)), P = s(E.value.defaultValue ?? null), F = o(() => N.value ? j.value.value ?? null : P.value), I = s(F.value);
-	u(() => [F.value, E.value.showFooter], ([e, t]) => {
-		t && (I.value = e);
+		props: () => A.value.componentProps
+	}), N = s(() => j.value.customProps), P = s(() => h(A.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), F = a({
+		entry: M,
+		props: () => A.value.componentProps
+	}), I = s(() => u(S)), L = s(() => k(j.value.timeZone)), R = s(() => !m(I.value.value)), z = l(j.value.defaultValue ?? null), B = s(() => R.value ? I.value.value ?? null : z.value), V = l(B.value);
+	f(() => [B.value, j.value.showFooter], ([e, t]) => {
+		t && (V.value = e);
 	});
-	let L = o(() => E.value.showFooter ? I.value : F.value), R = o(() => ({
-		day: E.value.tokens?.calendar?.day ?? E.value.tokens?.day,
-		color: E.value.tokens?.calendar?.color ?? E.value.tokens?.color,
-		rounded: E.value.tokens?.calendar?.rounded ?? E.value.tokens?.rounded
-	})), z = o(() => ({
-		color: E.value.tokens?.time?.color ?? E.value.tokens?.color,
-		rounded: E.value.tokens?.time?.rounded ?? E.value.tokens?.rounded
-	})), B = o(() => L.value?.[0] ?? null), V = o(() => L.value?.[1] ?? null), H = (e) => {
-		N.value || (P.value = e), b("change", e);
-	}, U = (e) => {
-		if (E.value.showFooter) {
-			I.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) => {
+		R.value || (z.value = e), w("change", e);
+	}, J = (e) => {
+		if (j.value.showFooter) {
+			V.value = e;
 			return;
 		}
-		H(e);
-	}, W = (e) => {
+		q(e);
+	}, Y = (e) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = f(e[0], L.value?.[0] ?? t, S.value, M.value), r = f(e[1], L.value?.[1] ?? t, S.value, M.value);
-		U(_([n, r], S.value, M.value));
-	}, G = (e) => {
+		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) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = f(L.value?.[0] ?? t, e, S.value, M.value), r = L.value?.[1] ?? t;
-		U(_([n, r], S.value, M.value));
-	}, K = (e) => {
+		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) => {
 		if (m(e)) {
-			U(null);
+			J(null);
 			return;
 		}
-		let t = S.value.now(M.value), n = L.value?.[0] ?? t, r = f(L.value?.[1] ?? t, e, S.value, M.value);
-		U(_([n, r], S.value, M.value));
-	}, q = () => {
-		H(I.value);
-	}, J = () => {
-		I.value = F.value, b("cancel");
-	}, Y = o(() => r(O.value?.root, k.value, d({
-		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-		[A.value.root ?? ""]: !0
-	}))), X = o(() => d({ "flex min-w-0 flex-col": !0 })), Z = o(() => d({
-		"min-w-0": !0,
-		[A.value.calendar ?? ""]: !0
-	})), Q = o(() => d({
+		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();
+	}, $ = () => {
+		V.value = B.value, w("cancel"), E.cancel();
+	}, ee = 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,
+			"w-full": j.value.fill,
+			"w-fit": !j.value.fill,
+			[e]: !0,
+			[F.value.root ?? ""]: !0
+		}));
+	}), te = s(() => v({ "flex w-full min-w-max flex-col": !0 })), ne = s(() => v({
+		"min-w-max": !0,
+		"w-full": j.value.fill,
+		[F.value.calendar ?? ""]: !0
+	})), re = s(() => v({
 		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
-		[A.value.time ?? ""]: !0
-	})), $ = o(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ee = o(() => d({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), te = o(() => d({ "absolute inset-0 flex w-full px-2.5": !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 }));
 	return {
-		merged: E,
-		rootBind: Y,
-		timeBind: Q,
-		footerBind: o(() => r(O.value?.footer, {}, d({
+		merged: j,
+		rootBind: ee,
+		timeBind: re,
+		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,
-			[A.value.footer ?? ""]: !0
+			[F.value.footer ?? ""]: !0
 		}))),
-		showFooter: o(() => !!E.value.showFooter),
-		timeTokens: z,
-		handleApply: q,
-		contentBind: X,
-		displayValue: L,
-		handleCancel: J,
-		calendarBind: Z,
-		timeFillBind: te,
-		endTimeValue: V,
-		timeSizerBind: ee,
-		calendarTokens: R,
-		startTimeValue: B,
-		handleCalendarChange: W,
-		handleEndPanelChange: K,
-		timePanelCustomProps: $,
-		handleStartPanelChange: G,
-		applyLabel: o(() => C("Apply")),
-		cancelLabel: o(() => C("Cancel")),
-		applyButtonProps: o(() => O.value?.applyButton),
-		cancelButtonProps: o(() => O.value?.cancelButton)
+		showFooter: s(() => !!j.value.showFooter),
+		timeTokens: W,
+		handleApply: Q,
+		contentBind: te,
+		displayValue: H,
+		handleCancel: $,
+		calendarBind: ne,
+		timeFillBind: oe,
+		endTimeValue: K,
+		timeSizerBind: ae,
+		calendarTokens: U,
+		startTimeValue: G,
+		handleCalendarChange: Y,
+		handleEndPanelChange: Z,
+		timePanelCustomProps: ie,
+		handleStartPanelChange: X,
+		applyLabel: s(() => O("Apply")),
+		cancelLabel: s(() => O("Cancel")),
+		applyButtonProps: s(() => N.value?.applyButton),
+		cancelButtonProps: s(() => N.value?.cancelButton)
 	};
 }
 //#endregion
-export { v as useDateTimeRangePicker };
+export { S as useDateTimeRangePicker };

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

@@ -1,5 +1,7 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, DisableTimesInput, MergeHtmlProps, MergeProps, StartOfWeek, TimeColorItem } from '@bridge-ui/core';
+import { DateRangeValue, DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } 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';
 import { CalendarRangeOrientation } from '../CalendarRange';
@@ -50,6 +52,10 @@ export interface DateTimeRangePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface DateTimeRangePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -59,43 +65,6 @@ export interface DateTimeRangePickerEmits {
      */
     change: [value: null | DateRangeValue];
 }
-export interface DateTimeRangePickerSlots {
-    /**
-     * Custom content inside each day button on the nested calendar.
-     *
-     * @default undefined
-     */
-    day?: Slot<CalendarDateDayCell>;
-}
-export interface DateTimeRangePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export interface DateTimeRangePickerOwnProps {
     /**
      * Uses a 12-hour clock with an AM/PM column.
@@ -157,6 +126,19 @@ export interface DateTimeRangePickerOwnProps {
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * When `true`, fills the container width.
+     * When `false` or unset, stays at the minimum width.
+     *
+     * @default false
+     */
+    fill?: boolean;
     /**
      * Hides month navigation / panel.
      *
@@ -224,7 +206,10 @@ export interface DateTimeRangePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of calendar / time tiles and chrome.
+     * Border radius of the picker shell, calendar / time tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Tiles keep a true pill when `rounded` is `full`.
      *
      * `DateTimeRangeField` always forwards its own `rounded` here so the picker
      * matches the field, independent of `DateTimeRangePicker.defaultProps`.
@@ -234,6 +219,7 @@ export interface DateTimeRangePickerOwnProps {
     rounded?: MergeProps<CalendarRounded, DateTimeRangePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -269,4 +255,48 @@ export interface DateTimeRangePickerOwnProps {
      */
     value?: null | DateRangeValue;
 }
+export interface DateTimeRangePickerSlots {
+    /**
+     * Custom content inside each day button on the nested calendar.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
+export interface DateTimeRangePickerTokens {
+    /**
+     * Nested calendar token overrides.
+     */
+    calendar?: {
+        color?: Record<string, Partial<CalendarColorItem>>;
+        day?: Partial<CalendarDay>;
+        rounded?: Record<string, string>;
+    };
+    /**
+     * Color token map overrides for the calendar (and time when `time` is unset).
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Day chrome overrides.
+     */
+    day?: Partial<CalendarDay>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+    /**
+     * Nested time panel token overrides.
+     */
+    time?: {
+        color?: Record<string, Partial<TimeColorItem>>;
+        rounded?: Record<string, string>;
+    };
+}
 export type DateTimeRangePickerProps = MergeHtmlProps<DateTimeRangePickerOwnProps, HTMLAttributes>;

package/dist/Components/Divider/composables/useDivider.d.ts

@@ -1,12 +1,12 @@
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DividerOwnProps, DividerProps } from '../divider.types';
 type DividerLibDefaults = LibDefaultsShape<DividerOwnProps, "color" | "orientation">;
 type DividerMerged = MergeLibDefaults<DividerOwnProps, DividerLibDefaults>;
 export declare function useDivider(props: DividerOwnProps, libDefaults: DividerLibDefaults): {
     merged: import('vue').ComputedRef<DividerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         role: string;
-        "aria-orientation": NonNullable<keyof import('@bridge-ui/core').DividerOrientation | undefined>;
+        "aria-orientation": NonNullable<keyof import('@bridge-ui/core/Tokens').DividerOrientation | undefined>;
         class: string;
     }, "class", {}, Omit<DividerProps, "color" | "orientation" | "classes">>>;
 };

package/dist/Components/Divider/composables/useDivider.js

@@ -1,8 +1,8 @@
 import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
 import { computed as r, useAttrs as i } from "vue";
-import { cn as a, mergeBridgeUILayeredClasses as o, splitComponentProps as s } from "@bridge-ui/core";
-import { get as c } from "es-toolkit/compat";
-import { colorProps as l, orientationProps as u } from "@bridge-ui/core/Tokens/Divider";
+import { get as a } from "es-toolkit/compat";
+import { dividerColorProps as o, dividerOrientationProps as s } from "@bridge-ui/core/Tokens";
+import { cn as c, mergeBridgeUILayeredClasses as l, splitComponentProps as u } from "@bridge-ui/core/Utils";
 //#region src/Components/Divider/composables/useDivider.ts
 var d = [
 	"color",
@@ -10,7 +10,7 @@ var d = [
 	"orientation"
 ];
 function f(f, p) {
-	let m = i(), h = r(() => s({
+	let m = i(), h = r(() => u({
 		props: {
 			...m,
 			...f
@@ -24,18 +24,18 @@ function f(f, p) {
 		entry: _,
 		props: () => h.value.componentProps
 	}), y = r(() => {
-		let e = o(l, _.value?.tokens?.color);
-		return c(e, g.value.color);
+		let e = l(o, _.value?.tokens?.color);
+		return a(e, g.value.color);
 	}), b = r(() => {
-		let e = o(u, _.value?.tokens?.orientation);
-		return c(e, g.value.orientation);
+		let e = l(s, _.value?.tokens?.orientation);
+		return a(e, g.value.orientation);
 	});
 	return {
 		merged: g,
 		rootBind: r(() => e({}, h.value.inheritedAttrs, {
 			role: "separator",
 			"aria-orientation": g.value.orientation,
-			class: a({
+			class: c({
 				"m-0 shrink-0 border-0": !0,
 				[y.value ?? ""]: !0,
 				[b.value ?? ""]: !0,

package/dist/Components/Divider/divider.types.d.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'vue';
-import { DividerColor, DividerOrientation, MergeHtmlProps, MergeProps } from '@bridge-ui/core';
+import { DividerColor, DividerOrientation } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface DividerColorOverrides {}
 export interface DividerOrientationOverrides {}
 export interface DividerClasses {

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

@@ -25,8 +25,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     hideBackdrop: boolean;
     keepMounted: boolean;
     persistent: boolean;
-    placement: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerPlacement, import('./drawer.types').DrawerPlacementOverrides>;
-    scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerScroll, import('./drawer.types').DrawerScrollOverrides>;
+    placement: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').DrawerPlacement, import('./drawer.types').DrawerPlacementOverrides>;
+    scroll: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').DrawerScroll, import('./drawer.types').DrawerScrollOverrides>;
     teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

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

package/dist/Components/Drawer/composables/useDrawer.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, Ref } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { DrawerOwnProps, DrawerProps } from '../drawer.types';
 type DrawerLibDefaults = LibDefaultsShape<DrawerOwnProps, "blur" | "size" | "scroll" | "autoFocus" | "placement" | "teleportTo" | "transition" | "closeOnEscape" | "closeOnOverlay">;
 type DrawerMerged = MergeLibDefaults<DrawerOwnProps, DrawerLibDefaults>;
@@ -27,7 +27,7 @@ export type DrawerOptions = {
 export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibDefaults, options?: DrawerOptions): {
     merged: import('vue').ComputedRef<DrawerMerged>;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onTransitionend: (event: TransitionEvent) => void;
         style: {
             zIndex: number;
@@ -35,7 +35,7 @@ export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibD
         "aria-hidden": boolean | undefined;
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, Omit<DrawerProps, "size" | "classes" | "customProps" | "ariaLabel" | "ariaLabelledBy" | "autoFocus" | "blur" | "closeOnEscape" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "persistent" | "placement" | "scroll" | "stackId" | "teleportTo" | "transition">>>;
-    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-drawer-part": string;
         "data-state": "open" | "closed";
         class: string;
@@ -45,14 +45,14 @@ export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibD
         "aria-label": string | undefined;
         "aria-labelledby": string | undefined;
     }>>;
-    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    overlayBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         "data-drawer-part": string;
         "data-state": "open" | "closed";
         class: string;
     }, "class", import('vue').HTMLAttributes | undefined, {
         onClick: () => void;
     }>>;
-    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+    wrapperBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
         onClick: (event: MouseEvent) => void;
     }>>;
     setPanelRef: (element: null | Element | ComponentPublicInstance) => void;