@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/TimePanel/composables/useTimePanel.d.ts

@@ -1,5 +1,6 @@
 import { MaybeRefOrGetter } from 'vue';
-import { resolveCalendarDayInteractionState, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { resolveCalendarDayInteractionState } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
 import { TimePanelOwnProps } from '../timePanel.types';
 type TimePanelLibDefaults = LibDefaultsShape<TimePanelOwnProps, "ampm" | "color" | "rounded" | "interval" | "showSeconds">;
 type TimePanelMerged = MergeLibDefaults<TimePanelOwnProps, TimePanelLibDefaults>;
@@ -21,10 +22,10 @@ export type TimePanelItem = {
  */
 export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>, libDefaults: TimePanelLibDefaults, emit: (event: "change", value: Date | null) => void): {
     merged: import('vue').ComputedRef<TimePanelMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePanelOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
     hourItems: import('vue').ComputedRef<TimePanelItem[]>;
-    columnBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    getHourBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+    columnBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    getHourBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
         disabled: boolean;
         "aria-pressed": boolean;
@@ -35,20 +36,20 @@ export declare function useTimePanel(props: MaybeRefOrGetter<TimePanelOwnProps>,
     displayDate: import('vue').ComputedRef<Date>;
     showSeconds: import('vue').ComputedRef<boolean>;
     showMeridiem: import('vue').ComputedRef<boolean>;
-    getMinuteBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+    getMinuteBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
     }>;
-    getSecondBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+    getSecondBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
         disabled: boolean;
         "aria-pressed": boolean;
         onClick: () => void;
     }>;
     meridiemItems: import('vue').ComputedRef<TimePanelItem[]>;
-    getMeridiemBind: (item: TimePanelItem) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
+    getMeridiemBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {
         type: "button";
         disabled: boolean;
         "aria-pressed": boolean;

package/dist/Components/TimePanel/composables/useTimePanel.js

@@ -1,9 +1,10 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
 import { computed as a, toValue as o, useAttrs as s } from "vue";
-import { buildHourOptions as c, buildMinuteOptions as l, buildSecondOptions as u, cn as d, isTimeDisabled as f, mergeBridgeUILayeredClasses as p, resolveCalendarDayInteractionState as m, snapMinutes as ee, splitComponentProps as h, to12Hour as g, to24Hour as _, toMeridiem as v } from "@bridge-ui/core";
-import { get as y, omit as b } from "es-toolkit/compat";
-import { colorProps as x, roundedProps as S } from "@bridge-ui/core/Tokens/Time";
+import { get as c, omit as l } from "es-toolkit/compat";
+import { buildHourOptions as u, buildMinuteOptions as d, buildSecondOptions as f, isTimeDisabled as p, resolveCalendarDayInteractionState as m, snapMinutes as h, to12Hour as g, to24Hour as _, toMeridiem as v } from "@bridge-ui/core/Domain";
+import { timeColorProps as ee, timeRoundedProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, mergeBridgeUILayeredClasses as x, splitComponentProps as S } from "@bridge-ui/core/Utils";
 //#region src/Components/TimePanel/composables/useTimePanel.ts
 var C = [
 	"ampm",
@@ -23,7 +24,7 @@ var C = [
 	"disableTimes"
 ], w = "w-[3.75rem]", T = "min-w-[3.75rem]";
 function E(w, E, D) {
-	let O = s(), k = e(), A = t(), j = a(() => h({
+	let O = s(), k = e(), A = t(), j = a(() => S({
 		bridgeKeys: C,
 		props: {
 			...O,
@@ -32,16 +33,16 @@ function E(w, E, D) {
 	})), { merged: M } = r({
 		libDefaults: E,
 		props: () => j.value.componentProps
-	}), N = a(() => M.value.customProps), P = a(() => b(j.value.inheritedAttrs, ["onChange"])), F = i({
+	}), N = a(() => M.value.customProps), P = a(() => l(j.value.inheritedAttrs, ["onChange"])), F = i({
 		props: () => j.value.componentProps,
 		entry: a(() => {})
-	}), I = a(() => A(M.value.timeZone)), L = a(() => p(x, M.value.tokens?.color)), R = a(() => {
-		let e = p(S, M.value.tokens?.rounded);
-		return y(e, M.value.rounded);
-	}), z = a(() => y(L.value, M.value.color)), B = a(() => {
-		let e = M.value.value ?? k.value.now(I.value), t = ee(k.value.getMinutes(e, I.value), M.value.interval), n = M.value.showSeconds ? k.value.getSeconds(e, I.value) : 0, r = k.value.setHours(e, k.value.getHours(e, I.value), I.value);
+	}), I = a(() => A(M.value.timeZone)), L = a(() => x(ee, M.value.tokens?.color)), R = a(() => {
+		let e = x(y, M.value.tokens?.rounded);
+		return c(e, M.value.rounded);
+	}), z = a(() => c(L.value, M.value.color)), B = a(() => {
+		let e = M.value.value ?? k.value.now(I.value), t = h(k.value.getMinutes(e, I.value), M.value.interval), n = M.value.showSeconds ? k.value.getSeconds(e, I.value) : 0, r = k.value.setHours(e, k.value.getHours(e, I.value), I.value);
 		return r = k.value.setMinutes(r, t, I.value), r = k.value.setSeconds(r, n, I.value), r;
-	}), V = a(() => c({ ampm: M.value.ampm })), te = a(() => l({ interval: M.value.interval })), H = a(() => u()), U = a(() => v(k.value.getHours(B.value, I.value))), W = (e) => !!M.value.disabled || f(e, {
+	}), V = a(() => u({ ampm: M.value.ampm })), te = a(() => d({ interval: M.value.interval })), H = a(() => f()), U = a(() => v(k.value.getHours(B.value, I.value))), W = (e) => !!M.value.disabled || p(e, {
 		adapter: k.value,
 		context: I.value,
 		maxTime: M.value.maxTime,
@@ -127,10 +128,10 @@ function E(w, E, D) {
 			value: e,
 			disabled: i || !!M.value.readOnly
 		};
-	}) : []), re = a(() => n(N.value?.root, P.value, d({
+	}) : []), re = a(() => n(N.value?.root, P.value, b({
 		"flex h-72 w-full min-w-fit flex-row gap-2": !0,
 		[F.value.root ?? ""]: !0
-	}))), ie = a(() => n(N.value?.column, {}, d({
+	}))), ie = a(() => n(N.value?.column, {}, b({
 		"box-border flex h-full min-w-0 flex-1 flex-col items-stretch gap-1 overflow-x-hidden overflow-y-auto [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-button]:hidden [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-dark-300 dark:[&::-webkit-scrollbar-thumb]:bg-dark-600": !0,
 		[T]: !0,
 		[F.value.column ?? ""]: !0
@@ -141,7 +142,7 @@ function E(w, E, D) {
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
-		}, d({
+		}, b({
 			"w-full cursor-pointer px-3 py-2 text-sm transition-all duration-150 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed": !0,
 			[R.value ?? ""]: !0,
 			[r?.base ?? ""]: e.state === "base" || e.state === "hover",

package/dist/Components/TimePanel/timePanel.types.d.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
-import { DisableTimesInput, MergeHtmlProps, MergeProps, TimeColor, TimeColorItem, TimeRounded, TimeValue } from '@bridge-ui/core';
+import { DisableTimesInput, TimeValue } from '@bridge-ui/core/Domain';
+import { TimeColor, TimeColorItem, TimeRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface TimePanelColorOverrides {}
 export interface TimePanelRoundedOverrides {}
 export interface TimePanelClasses {

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

@@ -1,10 +1,21 @@
-import { TimePickerOwnProps } from './timePicker.types';
-declare const __VLS_export: import('vue').DefineComponent<TimePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+import { TimePickerOwnProps, TimePickerSlots } from './timePicker.types';
+type __VLS_Slots = TimePickerSlots;
+declare const __VLS_base: import('vue').DefineComponent<TimePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
     cancel: () => any;
     change: (value: Date | null) => any;
 }, string, import('vue').PublicProps, Readonly<TimePickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
     onChange?: ((value: Date | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {
+    showFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/TimePicker/TimePicker.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import e from "../Button/Button.js";
 import t from "../TimePanel/TimePanel.js";
 import { useTimePicker as n } from "./composables/useTimePicker.js";
-import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, guardReactiveProps as l, mergeProps as u, normalizeClass as d, normalizeProps as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
 //#region src/Components/TimePicker/TimePicker.vue?vue&type=script&setup=true&lang.ts
-var _ = /*@__PURE__*/ c({
+var v = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "TimePicker",
 	props: {
@@ -19,37 +19,43 @@ var _ = /*@__PURE__*/ c({
 		minTime: {},
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
-	setup(c, { emit: _ }) {
-		let { merged: v, rootBind: y, footerBind: b, showFooter: x, applyLabel: S, timeTokens: C, contentBind: w, handleApply: T, cancelLabel: E, displayValue: D, handleCancel: O, applyButtonProps: k, cancelButtonProps: A, handlePanelChange: j } = n(c, {
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
+	setup(c, { emit: v }) {
+		let { merged: y, rootBind: b, footerBind: x, showFooter: S, applyLabel: C, timeTokens: w, contentBind: T, handleApply: E, cancelLabel: D, displayValue: O, handleCancel: k, applyButtonProps: A, cancelButtonProps: j, handlePanelChange: M } = n(c, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
 			color: "primary",
-			showFooter: !1,
 			showSeconds: !1
-		}, _);
-		return (n, c) => (p(), i("div", f(l(h(y))), [a("div", { class: d(h(w)) }, [s(h(t), {
-			ampm: h(v).ampm,
-			tokens: h(C),
-			color: h(v).color,
-			value: h(D),
-			rounded: h(v).rounded,
-			"max-time": h(v).maxTime,
-			"min-time": h(v).minTime,
-			disabled: h(v).disabled,
-			interval: h(v).interval,
-			"read-only": h(v).readOnly,
-			"time-zone": h(v).timeZone,
-			onChange: h(j),
-			"show-seconds": h(v).showSeconds,
-			"disable-times": h(v).disableTimes
+		}, v);
+		return (n, c) => (p(), i("div", f(l(g(b))), [a("div", { class: d(g(T)) }, [s(g(t), {
+			ampm: g(y).ampm,
+			tokens: g(w),
+			color: g(y).color,
+			value: g(O),
+			rounded: g(y).rounded,
+			"max-time": g(y).maxTime,
+			"min-time": g(y).minTime,
+			disabled: g(y).disabled,
+			interval: g(y).interval,
+			"read-only": g(y).readOnly,
+			"time-zone": g(y).timeZone,
+			onChange: g(M),
+			"show-seconds": g(y).showSeconds,
+			"disable-times": g(y).disableTimes
 		}, null, 8, [
 			"ampm",
 			"tokens",
@@ -65,18 +71,21 @@ var _ = /*@__PURE__*/ c({
 			"onChange",
 			"show-seconds",
 			"disable-times"
-		])], 2), h(x) ? (p(), i("div", f(u({ key: 0 }, h(b))), [s(h(e), u({
+		])], 2), g(S) ? (p(), i("div", f(u({ key: 0 }, g(x))), [m(n.$slots, "footer", {
+			apply: g(E),
+			cancel: g(k)
+		}, () => [s(g(e), u({
 			variant: "flat",
 			color: "secondary",
-			onClick: h(O)
-		}, h(A)), {
-			default: g(() => [o(m(h(E)), 1)]),
+			onClick: g(k)
+		}, g(j)), {
+			default: _(() => [o(h(g(D)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), s(h(e), u({ color: "primary" }, h(k), { onClick: h(T) }), {
-			default: g(() => [o(m(h(S)), 1)]),
+		}, 16, ["onClick"]), s(g(e), u({ color: "primary" }, g(A), { onClick: g(E) }), {
+			default: _(() => [o(h(g(C)), 1)]),
 			_: 1
-		}, 16, ["onClick"])], 16)) : r("", !0)], 16));
+		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));
 	}
 });
 //#endregion
-export { _ as default };
+export { v as default };

package/dist/Components/TimePicker/composables/useTimePicker.d.ts

@@ -1,21 +1,19 @@
-import { MaybeRefOrGetter } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults, TimeValue } from '@bridge-ui/core';
-import { TimePickerOwnProps } from '../timePicker.types';
-type TimePickerLibDefaults = LibDefaultsShape<TimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "showSeconds">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { TimeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { TimePickerEmits, TimePickerOwnProps } from '../timePicker.types';
+type TimePickerLibDefaults = LibDefaultsShape<TimePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showSeconds">;
 type TimePickerMerged = MergeLibDefaults<TimePickerOwnProps, TimePickerLibDefaults>;
 /**
  * Owns controlled/uncontrolled value, optional footer draft, and panel binds.
  */
-export declare function useTimePicker(props: MaybeRefOrGetter<TimePickerOwnProps>, libDefaults: TimePickerLibDefaults, emit: {
-    (event: "change", value: null | TimeValue): void;
-    (event: "cancel"): void;
-}): {
+export declare function useTimePicker(props: MaybeRefOrGetter<TimePickerOwnProps>, libDefaults: TimePickerLibDefaults, emit: SetupContext<TimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<TimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "timeZone" | "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').TimeColorItem>> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').TimeColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     contentBind: import('vue').ComputedRef<string>;

package/dist/Components/TimePicker/composables/useTimePicker.js

@@ -1,10 +1,12 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-import { computed as i, ref as a, toValue as o, useAttrs as s, watch as c } from "vue";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
-import { isNil as d, omit as f } from "es-toolkit/compat";
+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 l, watch as u } from "vue";
+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/TimePicker/composables/useTimePicker.ts
-var p = [
+var _ = [
 	"ampm",
 	"color",
 	"value",
@@ -23,62 +25,73 @@ var p = [
 	"defaultValue",
 	"disableTimes"
 ];
-function m(m, h, g) {
-	let _ = s(), v = e(), y = i(() => u({
-		bridgeKeys: p,
+function v(v, y, b) {
+	let x = l(), S = o(i, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), C = e(), w = a(() => g({
+		bridgeKeys: _,
 		props: {
-			..._,
-			...o(m)
+			...x,
+			...c(v)
 		}
-	})), { merged: b, entry: x } = n({
-		libDefaults: h,
+	})), { merged: T, entry: E } = n({
+		libDefaults: y,
 		componentName: "TimePicker",
-		props: () => y.value.componentProps
-	}), S = i(() => b.value.customProps), C = i(() => f(y.value.inheritedAttrs, ["onChange", "onCancel"])), w = r({
-		entry: x,
-		props: () => y.value.componentProps
-	}), T = i(() => o(m)), E = i(() => !d(T.value.value)), D = a(b.value.defaultValue ?? null), O = i(() => E.value ? T.value.value ?? null : D.value), k = a(O.value);
-	c(() => [O.value, b.value.showFooter], ([e, t]) => {
-		t && (k.value = e);
+		props: () => w.value.componentProps
+	}), D = a(() => T.value.customProps), O = a(() => p(w.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), k = r({
+		entry: E,
+		props: () => w.value.componentProps
+	}), A = a(() => c(v)), j = a(() => !f(A.value.value)), M = s(T.value.defaultValue ?? null), N = a(() => j.value ? A.value.value ?? null : M.value), P = s(N.value);
+	u(() => [N.value, T.value.showFooter], ([e, t]) => {
+		t && (P.value = e);
 	});
-	let A = i(() => b.value.showFooter ? k.value : O.value), j = i(() => ({
-		color: b.value.tokens?.time?.color ?? b.value.tokens?.color,
-		rounded: b.value.tokens?.time?.rounded ?? b.value.tokens?.rounded
-	})), M = (e) => {
-		E.value || (D.value = e), g("change", e);
-	}, N = (e) => {
-		if (b.value.showFooter) {
-			k.value = e;
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = a(() => ({
+		color: T.value.tokens?.time?.color ?? T.value.tokens?.color,
+		rounded: T.value.tokens?.time?.rounded ?? T.value.tokens?.rounded
+	})), L = (e) => {
+		j.value || (M.value = e), b("change", e);
+	}, R = (e) => {
+		if (T.value.showFooter) {
+			P.value = e;
 			return;
 		}
-		M(e);
-	}, P = () => {
-		M(k.value);
-	}, F = () => {
-		k.value = O.value, g("cancel");
-	}, I = i(() => t(S.value?.root, C.value, l({
-		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-		[w.value.root ?? ""]: !0
-	}))), L = i(() => l({ "px-2.5": !0 }));
+		L(e);
+	}, z = () => {
+		L(P.value), b("apply"), S.apply();
+	}, B = () => {
+		P.value = N.value, b("cancel"), S.cancel();
+	}, V = a(() => {
+		let e = d(m, T.value.rounded ?? "md");
+		return t(D.value?.root, O.value, h({
+			"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			[e]: !0,
+			[k.value.root ?? ""]: !0
+		}));
+	}), H = a(() => h({ "px-2.5": !0 }));
 	return {
-		merged: b,
-		rootBind: I,
-		footerBind: i(() => t(S.value?.footer, {}, l({
+		merged: T,
+		rootBind: V,
+		footerBind: a(() => t(D.value?.footer, {}, h({
 			"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,
-			[w.value.footer ?? ""]: !0
+			[k.value.footer ?? ""]: !0
 		}))),
-		showFooter: i(() => !!b.value.showFooter),
-		timeTokens: j,
-		contentBind: L,
-		handleApply: P,
-		displayValue: A,
-		handleCancel: F,
-		handlePanelChange: N,
-		applyLabel: i(() => v("Apply")),
-		cancelLabel: i(() => v("Cancel")),
-		applyButtonProps: i(() => S.value?.applyButton),
-		cancelButtonProps: i(() => S.value?.cancelButton)
+		showFooter: a(() => !!T.value.showFooter),
+		timeTokens: I,
+		contentBind: H,
+		handleApply: z,
+		displayValue: F,
+		handleCancel: B,
+		handlePanelChange: R,
+		applyLabel: a(() => C("Apply")),
+		cancelLabel: a(() => C("Cancel")),
+		applyButtonProps: a(() => D.value?.applyButton),
+		cancelButtonProps: a(() => D.value?.cancelButton)
 	};
 }
 //#endregion
-export { m as useTimePicker };
+export { v as useTimePicker };

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

@@ -1,3 +1,3 @@
 export { useTimePicker } from './composables/useTimePicker';
-export type { TimePickerClasses, TimePickerColorOverrides, TimePickerCustomProps, TimePickerEmits, TimePickerOwnProps, TimePickerProps, TimePickerRoundedOverrides, TimePickerTokens, } from './timePicker.types';
+export type { TimePickerClasses, TimePickerColorOverrides, TimePickerCustomProps, TimePickerEmits, TimePickerOwnProps, TimePickerProps, TimePickerRoundedOverrides, TimePickerSlots, TimePickerTokens, } from './timePicker.types';
 export { default as TimePicker } from './TimePicker.vue';

package/dist/Components/TimePicker/timePicker.types.d.ts

@@ -1,5 +1,7 @@
-import { HTMLAttributes } from 'vue';
-import { DisableTimesInput, MergeHtmlProps, MergeProps, TimeColor, TimeColorItem, TimeRounded, TimeValue } from '@bridge-ui/core';
+import { HTMLAttributes, Slot } from 'vue';
+import { DisableTimesInput, FieldOverlayFooterSlotProps, TimeValue } from '@bridge-ui/core/Domain';
+import { TimeColor, TimeColorItem, TimeRounded } from '@bridge-ui/core/Tokens';
+import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 export interface TimePickerColorOverrides {}
 export interface TimePickerRoundedOverrides {}
@@ -40,6 +42,10 @@ export interface TimePickerCustomProps {
     root?: HTMLAttributes;
 }
 export interface TimePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -49,23 +55,6 @@ export interface TimePickerEmits {
      */
     change: [value: null | TimeValue];
 }
-export interface TimePickerTokens {
-    /**
-     * Color token map overrides.
-     */
-    color?: Record<string, Partial<TimeColorItem>>;
-    /**
-     * 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 TimePickerOwnProps {
     /**
      * Uses a 12-hour clock with an AM/PM column.
@@ -134,7 +123,10 @@ export interface TimePickerOwnProps {
      */
     readOnly?: boolean;
     /**
-     * Border radius of time tiles and chrome.
+     * Border radius of the picker shell, time tiles, and chrome.
+     *
+     * The shell uses the Menu panel scale (`full` caps at `rounded-panel-full`).
+     * Time tiles keep a true pill when `rounded` is `full`.
      *
      * `TimeField` always forwards its own `rounded` here so the picker matches the
      * field, independent of `TimePicker.defaultProps`.
@@ -144,6 +136,7 @@ export interface TimePickerOwnProps {
     rounded?: MergeProps<TimeRounded, TimePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -173,4 +166,30 @@ export interface TimePickerOwnProps {
      */
     value?: null | TimeValue;
 }
+export interface TimePickerSlots {
+    /**
+     * 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 TimePickerTokens {
+    /**
+     * Color token map overrides.
+     */
+    color?: Record<string, Partial<TimeColorItem>>;
+    /**
+     * 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 TimePickerProps = MergeHtmlProps<TimePickerOwnProps, HTMLAttributes>;

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

@@ -1,4 +1,4 @@
-import { TimeRangeValue } from '@bridge-ui/core';
+import { TimeRangeValue } from '@bridge-ui/core/Domain';
 import { TimeRangeFieldOwnProps, TimeRangeFieldSlots } from './timeRangeField.types';
 type __VLS_Slots = TimeRangeFieldSlots;
 type __VLS_Props = TimeRangeFieldOwnProps;
@@ -8,17 +8,22 @@ type __VLS_ModelProps = {
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     clear: () => any;
+    apply: () => any;
+    cancel: () => any;
     change: (value: TimeRangeValue | null) => any;
     close: () => any;
     open: () => any;
     "update:modelValue": (value: TimeRangeValue | null | undefined) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onClear?: (() => any) | undefined;
+    onApply?: (() => any) | undefined;
+    onCancel?: (() => any) | undefined;
     onChange?: ((value: TimeRangeValue | null) => any) | undefined;
     onClose?: (() => any) | undefined;
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: TimeRangeValue | null | undefined) => any) | undefined;
 }>, {
+    showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;