@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/TimeRangePicker/TimeRangePicker.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 { useTimeRangePicker as n } from "./composables/useTimeRangePicker.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/TimeRangePicker/TimeRangePicker.vue?vue&type=script&setup=true&lang.ts
-var _ = /*@__PURE__*/ c({
+var v = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "TimeRangePicker",
 	props: {
@@ -15,49 +15,61 @@ var _ = /*@__PURE__*/ c({
 		disabled: { type: Boolean },
 		disableTimes: {},
 		endTitle: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		interval: {},
 		maxTime: {},
 		minTime: {},
 		orientation: {},
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		startTitle: {},
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
-	setup(c, { emit: _ }) {
-		let { merged: v, endBind: y, rootBind: b, endTitle: x, startBind: S, startTitle: C, footerBind: w, panelsBind: T, showFooter: E, applyLabel: D, timeTokens: O, handleApply: k, cancelLabel: A, endTitleBind: j, handleCancel: M, startTitleBind: N, endDisplayValue: P, handleEndChange: F, applyButtonProps: I, startDisplayValue: L, cancelButtonProps: R, handleStartChange: z } = n(c, {
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
+	setup(c, { emit: v }) {
+		let { merged: y, endBind: b, rootBind: x, endTitle: S, startBind: C, startTitle: w, footerBind: T, panelsBind: E, showFooter: D, applyLabel: O, timeTokens: k, handleApply: A, cancelLabel: j, endTitleBind: M, handleCancel: N, startTitleBind: P, endDisplayValue: F, handleEndChange: I, applyButtonProps: L, startDisplayValue: R, cancelButtonProps: z, handleStartChange: B } = n(c, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
 			color: "primary",
-			showFooter: !1,
 			showSeconds: !1,
 			orientation: "horizontal"
-		}, _);
-		return (n, c) => (p(), i("div", f(l(h(b))), [a("div", f(l(h(T))), [a("div", f(l(h(S))), [a("p", { class: d(h(N)) }, m(h(C)), 3), s(h(t), {
-			ampm: h(v).ampm,
-			tokens: h(O),
-			color: h(v).color,
-			rounded: h(v).rounded,
-			value: h(L),
-			"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(z),
-			"show-seconds": h(v).showSeconds,
-			"disable-times": h(v).disableTimes
+		}, v);
+		return (n, c) => (p(), i("div", f(l(g(x))), [a("div", f(l(g(E))), [a("div", f(l(g(C))), [a("p", { class: d(g(P)) }, h(g(w)), 3), s(g(t), {
+			ampm: g(y).ampm,
+			fill: g(y).fill,
+			tokens: g(k),
+			color: g(y).color,
+			error: g(y).error,
+			rounded: g(y).rounded,
+			value: g(R),
+			"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(B),
+			"show-seconds": g(y).showSeconds,
+			"disable-times": g(y).disableTimes
 		}, null, 8, [
 			"ampm",
+			"fill",
 			"tokens",
 			"color",
+			"error",
 			"rounded",
 			"value",
 			"max-time",
@@ -69,25 +81,29 @@ var _ = /*@__PURE__*/ c({
 			"onChange",
 			"show-seconds",
 			"disable-times"
-		])], 16), a("div", f(l(h(y))), [a("p", { class: d(h(j)) }, m(h(x)), 3), s(h(t), {
-			ampm: h(v).ampm,
-			tokens: h(O),
-			color: h(v).color,
-			value: h(P),
-			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(F),
-			"show-seconds": h(v).showSeconds,
-			"disable-times": h(v).disableTimes
+		])], 16), a("div", f(l(g(b))), [a("p", { class: d(g(M)) }, h(g(S)), 3), s(g(t), {
+			ampm: g(y).ampm,
+			fill: g(y).fill,
+			tokens: g(k),
+			color: g(y).color,
+			error: g(y).error,
+			value: g(F),
+			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(I),
+			"show-seconds": g(y).showSeconds,
+			"disable-times": g(y).disableTimes
 		}, null, 8, [
 			"ampm",
+			"fill",
 			"tokens",
 			"color",
+			"error",
 			"value",
 			"rounded",
 			"max-time",
@@ -99,18 +115,21 @@ var _ = /*@__PURE__*/ c({
 			"onChange",
 			"show-seconds",
 			"disable-times"
-		])], 16)], 16), h(E) ? (p(), i("div", f(u({ key: 0 }, h(w))), [s(h(e), u({
+		])], 16)], 16), g(D) ? (p(), i("div", f(u({ key: 0 }, g(T))), [m(n.$slots, "footer", {
+			apply: g(A),
+			cancel: g(N)
+		}, () => [s(g(e), u({
 			variant: "flat",
 			color: "secondary",
-			onClick: h(M)
-		}, h(R)), {
-			default: g(() => [o(m(h(A)), 1)]),
+			onClick: g(N)
+		}, g(z)), {
+			default: _(() => [o(h(g(j)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), s(h(e), u({ color: "primary" }, h(I), { onClick: h(k) }), {
-			default: g(() => [o(m(h(D)), 1)]),
+		}, 16, ["onClick"]), s(g(e), u({ color: "primary" }, g(L), { onClick: g(A) }), {
+			default: _(() => [o(h(g(O)), 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/TimeRangePicker/composables/useTimeRangePicker.d.ts

@@ -1,24 +1,22 @@
-import { MaybeRefOrGetter } from 'vue';
-import { LibDefaultsShape, MergeLibDefaults, TimeRangeValue, TimeValue } from '@bridge-ui/core';
-import { TimeRangePickerOwnProps } from '../timeRangePicker.types';
-type TimeRangePickerLibDefaults = LibDefaultsShape<TimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "showFooter" | "orientation" | "showSeconds">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { TimeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { TimeRangePickerEmits, TimeRangePickerOwnProps } from '../timeRangePicker.types';
+type TimeRangePickerLibDefaults = LibDefaultsShape<TimeRangePickerOwnProps, "ampm" | "color" | "rounded" | "interval" | "orientation" | "showSeconds">;
 type TimeRangePickerMerged = MergeLibDefaults<TimeRangePickerOwnProps, TimeRangePickerLibDefaults>;
 /**
  * Owns controlled/uncontrolled range value, optional footer draft, and dual panel binds.
  */
-export declare function useTimeRangePicker(props: MaybeRefOrGetter<TimeRangePickerOwnProps>, libDefaults: TimeRangePickerLibDefaults, emit: {
-    (event: "change", value: null | TimeRangeValue): void;
-    (event: "cancel"): void;
-}): {
+export declare function useTimeRangePicker(props: MaybeRefOrGetter<TimeRangePickerOwnProps>, libDefaults: TimeRangePickerLibDefaults, emit: SetupContext<TimeRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<TimeRangePickerMerged>;
-    endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimeRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds" | "endTitle" | "startTitle">>>>;
-    startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-    panelsBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    endBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimeRangePickerOwnProps, "error" | "color" | "fill" | "orientation" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds" | "endTitle" | "startTitle">>>>;
+    startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    panelsBind: 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;

package/dist/Components/TimeRangePicker/composables/useTimeRangePicker.js

@@ -1,13 +1,18 @@
 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, sortTimeRangeValue 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 ee } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as o, inject as s, ref as c, toValue as l, useAttrs as u, watch as d } from "vue";
+import { get as f, isNil as p, omit as m } from "es-toolkit/compat";
+import { sortTimeRangeValue as h } from "@bridge-ui/core/Domain";
+import { menuRoundedProps as g } from "@bridge-ui/core/Tokens";
+import { cn as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/TimeRangePicker/composables/useTimeRangePicker.ts
-var g = [
+var y = [
 	"ampm",
+	"fill",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -27,97 +32,110 @@ var g = [
 	"defaultValue",
 	"disableTimes"
 ];
-function _(_, v, y) {
-	let b = l(), x = e(), S = t(), C = n(), w = o(() => p({
-		bridgeKeys: g,
+function b(b, x, S) {
+	let C = u(), w = s(ee, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), T = e(), E = t(), D = n(), O = o(() => v({
+		bridgeKeys: y,
 		props: {
-			...b,
-			...c(_)
+			...C,
+			...l(b)
 		}
-	})), { merged: T, entry: E } = i({
-		libDefaults: v,
+	})), { merged: k, entry: A } = i({
+		libDefaults: x,
 		componentName: "TimeRangePicker",
-		props: () => w.value.componentProps
-	}), D = o(() => T.value.customProps), O = o(() => h(w.value.inheritedAttrs, ["onChange", "onCancel"])), k = a({
-		entry: E,
-		props: () => w.value.componentProps
-	}), A = o(() => c(_)), j = o(() => S(T.value.timeZone)), M = o(() => !m(A.value.value)), N = s(T.value.defaultValue ?? null), P = o(() => M.value ? A.value.value ?? null : N.value), F = s(P.value);
-	u(() => [P.value, T.value.showFooter], ([e, t]) => {
-		t && (F.value = e);
+		props: () => O.value.componentProps
+	}), j = o(() => k.value.customProps), M = o(() => m(O.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), N = a({
+		entry: A,
+		props: () => O.value.componentProps
+	}), P = o(() => l(b)), F = o(() => E(k.value.timeZone)), I = o(() => !p(P.value.value)), L = c(k.value.defaultValue ?? null), R = o(() => I.value ? P.value.value ?? null : L.value), z = c(R.value);
+	d(() => [R.value, k.value.showFooter], ([e, t]) => {
+		t && (z.value = e);
 	});
-	let I = o(() => T.value.showFooter ? F.value : P.value), L = o(() => I.value?.[0] ?? x.value.now(j.value)), R = o(() => I.value?.[1] ?? x.value.now(j.value)), z = o(() => ({
-		color: T.value.tokens?.time?.color ?? T.value.tokens?.color,
-		rounded: T.value.tokens?.time?.rounded ?? T.value.tokens?.rounded
-	})), B = (e) => {
-		M.value || (N.value = e), y("change", e);
-	}, V = (e) => {
-		let t = f(e, x.value, j.value);
-		if (T.value.showFooter) {
-			F.value = t;
+	let B = o(() => k.value.showFooter ? z.value : R.value), V = o(() => B.value?.[0] ?? T.value.now(F.value)), H = o(() => B.value?.[1] ?? T.value.now(F.value)), U = o(() => ({
+		color: k.value.tokens?.time?.color ?? k.value.tokens?.color,
+		rounded: k.value.tokens?.time?.rounded ?? k.value.tokens?.rounded
+	})), W = (e) => {
+		I.value || (L.value = e), S("change", e);
+	}, G = (e) => {
+		let t = h(e, T.value, F.value);
+		if (k.value.showFooter) {
+			z.value = t;
 			return;
 		}
-		B(t);
-	}, H = (e) => {
-		if (m(e)) return;
-		let t = I.value?.[1] ?? x.value.now(j.value);
-		V([e, t]);
-	}, U = (e) => {
-		if (m(e)) return;
-		let t = I.value?.[0] ?? x.value.now(j.value);
-		V([t, e]);
-	}, W = () => {
-		B(F.value);
-	}, G = () => {
-		F.value = P.value, y("cancel");
-	}, K = o(() => r(D.value?.root, O.value, d({
-		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-		[k.value.root ?? ""]: !0
-	}))), q = o(() => T.value.orientation === "vertical"), J = o(() => r(D.value?.panels, {}, d({
+		W(t);
+	}, K = (e) => {
+		if (p(e)) return;
+		let t = B.value?.[1] ?? T.value.now(F.value);
+		G([e, t]);
+	}, q = (e) => {
+		if (p(e)) return;
+		let t = B.value?.[0] ?? T.value.now(F.value);
+		G([t, e]);
+	}, J = () => {
+		W(z.value), S("apply"), w.apply();
+	}, Y = () => {
+		z.value = R.value, S("cancel"), w.cancel();
+	}, X = o(() => {
+		let e = f(g, k.value.rounded ?? "md");
+		return r(j.value?.root, M.value, _({
+			"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"w-full": k.value.fill,
+			"w-fit": !k.value.fill,
+			[e]: !0,
+			[N.value.root ?? ""]: !0
+		}));
+	}), Z = o(() => k.value.orientation === "vertical"), Q = o(() => r(j.value?.panels, {}, _({
 		"flex w-full gap-2 px-2.5": !0,
-		"flex-row": !q.value,
-		"flex-col": q.value,
-		[k.value.panels ?? ""]: !0
-	}))), Y = o(() => r(D.value?.start, {}, d({
+		"flex-row": !Z.value,
+		"flex-col": Z.value,
+		[N.value.panels ?? ""]: !0
+	}))), te = o(() => r(j.value?.start, {}, _({
 		"flex min-w-0 flex-1 flex-col gap-1": !0,
-		[k.value.start ?? ""]: !0
-	}))), X = o(() => r(D.value?.end, {}, d({
+		[N.value.start ?? ""]: !0
+	}))), ne = o(() => r(j.value?.end, {}, _({
 		"flex min-w-0 flex-1 flex-col gap-1": !0,
-		[k.value.end ?? ""]: !0
-	}))), Z = o(() => d({ "px-2 py-2 text-center text-xs font-medium tracking-wide text-dark-500 uppercase dark:text-dark-400": !0 })), Q = o(() => d({
-		[Z.value]: !0,
-		[k.value.startTitle ?? ""]: !0
-	})), $ = o(() => d({
-		[Z.value]: !0,
-		[k.value.endTitle ?? ""]: !0
+		[N.value.end ?? ""]: !0
+	}))), $ = o(() => _({ "px-2 py-2 text-center text-xs font-medium tracking-wide text-dark-500 uppercase dark:text-dark-400": !0 })), re = o(() => _({
+		[$.value]: !0,
+		[N.value.startTitle ?? ""]: !0
+	})), ie = o(() => _({
+		[$.value]: !0,
+		[N.value.endTitle ?? ""]: !0
 	}));
 	return {
-		merged: T,
-		endBind: X,
-		rootBind: K,
-		startBind: Y,
-		footerBind: o(() => r(D.value?.footer, {}, d({
+		merged: k,
+		endBind: ne,
+		rootBind: X,
+		startBind: te,
+		footerBind: o(() => r(j.value?.footer, {}, _({
 			"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,
-			[k.value.footer ?? ""]: !0
+			[N.value.footer ?? ""]: !0
 		}))),
-		panelsBind: J,
-		showFooter: o(() => !!T.value.showFooter),
-		timeTokens: z,
-		handleApply: W,
-		displayValue: I,
-		handleCancel: G,
-		endTitleBind: $,
-		startTitleBind: Q,
-		endDisplayValue: R,
-		handleEndChange: U,
-		startDisplayValue: L,
-		handleStartChange: H,
-		applyLabel: o(() => C("Apply")),
-		cancelLabel: o(() => C("Cancel")),
-		applyButtonProps: o(() => D.value?.applyButton),
-		cancelButtonProps: o(() => D.value?.cancelButton),
-		endTitle: o(() => T.value.endTitle ?? C("End time")),
-		startTitle: o(() => T.value.startTitle ?? C("Start time"))
+		panelsBind: Q,
+		showFooter: o(() => !!k.value.showFooter),
+		timeTokens: U,
+		handleApply: J,
+		displayValue: B,
+		handleCancel: Y,
+		endTitleBind: ie,
+		startTitleBind: re,
+		endDisplayValue: H,
+		handleEndChange: q,
+		startDisplayValue: V,
+		handleStartChange: K,
+		applyLabel: o(() => D("Apply")),
+		cancelLabel: o(() => D("Cancel")),
+		applyButtonProps: o(() => j.value?.applyButton),
+		cancelButtonProps: o(() => j.value?.cancelButton),
+		endTitle: o(() => k.value.endTitle ?? D("End time")),
+		startTitle: o(() => k.value.startTitle ?? D("Start time"))
 	};
 }
 //#endregion
-export { _ as useTimeRangePicker };
+export { b as useTimeRangePicker };

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

@@ -1,3 +1,3 @@
 export { useTimeRangePicker } from './composables/useTimeRangePicker';
-export type { TimeRangePickerClasses, TimeRangePickerColorOverrides, TimeRangePickerCustomProps, TimeRangePickerEmits, TimeRangePickerOwnProps, TimeRangePickerProps, TimeRangePickerRoundedOverrides, TimeRangePickerTokens, } from './timeRangePicker.types';
+export type { TimeRangePickerClasses, TimeRangePickerColorOverrides, TimeRangePickerCustomProps, TimeRangePickerEmits, TimeRangePickerOwnProps, TimeRangePickerProps, TimeRangePickerRoundedOverrides, TimeRangePickerSlots, TimeRangePickerTokens, } from './timeRangePicker.types';
 export { default as TimeRangePicker } from './TimeRangePicker.vue';

package/dist/Components/TimeRangePicker/timeRangePicker.types.d.ts

@@ -1,5 +1,7 @@
-import { HTMLAttributes } from 'vue';
-import { DisableTimesInput, MergeHtmlProps, MergeProps, RangePickerOrientation, TimeColor, TimeColorItem, TimeRangeValue, TimeRounded } from '@bridge-ui/core';
+import { HTMLAttributes, Slot } from 'vue';
+import { DisableTimesInput, FieldOverlayFooterSlotProps, RangePickerOrientation, TimeRangeValue } 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 TimeRangePickerColorOverrides {}
 export interface TimeRangePickerRoundedOverrides {}
@@ -78,6 +80,10 @@ export interface TimeRangePickerCustomProps {
     start?: HTMLAttributes;
 }
 export interface TimeRangePickerEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
     /**
      * Emitted when Cancel is pressed.
      */
@@ -136,6 +142,19 @@ export interface TimeRangePickerOwnProps {
      * @default "End time"
      */
     endTitle?: string;
+    /**
+     * 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;
     /**
      * Minute step between options.
      *
@@ -167,7 +186,10 @@ export interface TimeRangePickerOwnProps {
      */
     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`.
      *
      * `TimeRangeField` always forwards its own `rounded` here so the picker matches
      * the field, independent of `TimeRangePicker.defaultProps`.
@@ -177,6 +199,7 @@ export interface TimeRangePickerOwnProps {
     rounded?: MergeProps<TimeRounded, TimeRangePickerRoundedOverrides>;
     /**
      * Shows Cancel / Apply footer. Selection is draft until Apply.
+     * Nested fields forward their own `showFooter` (dialog overlays default to `true`).
      *
      * @default false
      */
@@ -212,6 +235,15 @@ export interface TimeRangePickerOwnProps {
      */
     value?: null | TimeRangeValue;
 }
+export interface TimeRangePickerSlots {
+    /**
+     * 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 TimeRangePickerTokens {
     /**
      * Color token map overrides.

package/dist/Components/ToggleGroup/ToggleGroup.js

@@ -0,0 +1,5 @@
+import e from "./ToggleGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/Components/ToggleGroup/ToggleGroup.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,27 @@
+import { ToggleGroupValue } from '@bridge-ui/core/Domain';
+import { ToggleGroupOwnProps, ToggleGroupSlots } from './toggleGroup.types';
+type __VLS_Slots = ToggleGroupSlots;
+type __VLS_Props = ToggleGroupOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: ToggleGroupValue;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: ToggleGroupValue) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((value: ToggleGroupValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    full: boolean;
+    disabled: boolean;
+    multiple: 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/ToggleGroup/ToggleGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,47 @@
+import { useToggleGroup as e } from "./composables/useToggleGroup.js";
+import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, mergeModels as i, normalizeProps as a, openBlock as o, renderSlot as s, unref as c, useModel as l } from "vue";
+//#region src/Components/ToggleGroup/ToggleGroup.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ n({
+	inheritAttrs: !1,
+	__name: "ToggleGroup",
+	props: /*@__PURE__*/ i({
+		classes: {},
+		color: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		full: {
+			type: Boolean,
+			default: !1
+		},
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: {},
+		rounded: {},
+		size: {},
+		variant: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ i(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(n, { emit: i }) {
+		let u = i, d = n, f = l(n, "modelValue"), { rootBind: p } = e(d, {
+			size: "md",
+			full: !1,
+			rounded: "md",
+			disabled: !1,
+			multiple: !1,
+			variant: "solid",
+			color: "primary",
+			orientation: "horizontal"
+		}, f, u);
+		return (e, n) => (o(), t("div", a(r(c(p))), [s(e.$slots, "default")], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/Components/ToggleGroup/composables/useToggleGroup.d.ts

@@ -0,0 +1,23 @@
+import { Ref, SetupContext } from 'vue';
+import { ToggleGroupValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { ToggleGroupEmits, ToggleGroupOwnProps, ToggleGroupProps } from '../toggleGroup.types';
+import { ToggleGroupContextValue } from '../toggleGroupInjectionKey';
+type ToggleGroupLibDefaults = LibDefaultsShape<ToggleGroupOwnProps, "full" | "size" | "color" | "rounded" | "variant" | "disabled" | "multiple" | "orientation">;
+type ToggleGroupMerged = MergeLibDefaults<ToggleGroupOwnProps, ToggleGroupLibDefaults>;
+/**
+ * Builds a stable DOM id for a toggle segment.
+ */
+declare function getToggleItemId(groupId: string, value: string): string;
+export declare function useToggleGroup(props: ToggleGroupOwnProps, libDefaults: ToggleGroupLibDefaults, model: Ref<undefined | ToggleGroupValue>, emit: SetupContext<ToggleGroupEmits>["emit"]): {
+    merged: import('vue').ComputedRef<ToggleGroupMerged>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
+        onKeydown: (event: KeyboardEvent) => void;
+        "aria-orientation": "horizontal" | "vertical";
+        role: string;
+        "aria-disabled": true | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ToggleGroupProps, "color" | "orientation" | "size" | "classes" | "customProps" | "full" | "rounded" | "variant" | "disabled" | "multiple">>>;
+    contextValue: import('vue').ComputedRef<ToggleGroupContextValue>;
+};
+export { getToggleItemId };