@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/TimeField/composables/useTimeField.js

@@ -1,19 +1,22 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
-import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
-import { cn as f, isFieldOverlayDialog as p, resolveFieldOverlay as m, resolveFieldShowFooter as h, splitComponentProps as g } from "@bridge-ui/core";
-import { get as _, isNil as v, omit as y } from "es-toolkit/compat";
-import { colorProps as b } from "@bridge-ui/core/Tokens/Listbox";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o, usePickerFill as s } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as c, useFormField as l } from "../../FormField/composables/useFormField.js";
+import { computed as u, ref as d, useAttrs as f, useSlots as p } from "vue";
+import { get as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { resolveFieldOverlay as _, resolveFieldPickerClassName as v } from "@bridge-ui/core/Domain";
+import { listboxColorProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/TimeField/composables/useTimeField.ts
-var x = [
+var S = [
 	"ampm",
+	"fill",
 	"classes",
 	"maxTime",
 	"minTime",
 	"overlay",
+	"editable",
 	"interval",
 	"timeZone",
 	"clearable",
@@ -23,78 +26,90 @@ var x = [
 	"defaultValue",
 	"disableTimes"
 ];
-function S(e, t, n, r, i) {
-	return v(e) ? "" : t.formatTime(e, n, {
+function ee(e, t, n, r, i) {
+	return h(e) ? "" : t.formatTime(e, n, {
 		ampm: r,
 		showSeconds: i
 	});
 }
 function C(C, w, T) {
-	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => g({
+	let E = f(), D = p(), O = e(), k = r(), A = t(), j = d(!1), M = d(null), N = u(() => x({
 		props: {
 			...E,
 			...C
 		},
-		bridgeKeys: x
-	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !v(I.value)), z = c(() => m(P.value.overlay, k.mobile)), B = c(() => p(z.value) ? "w-full shadow-none" : void 0), ee = (e) => {
+		bridgeKeys: S
+	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
+		overlay: z,
+		componentName: "TimeField",
+		fill: () => P.value.fill
+	}), V = u(() => v(B.value, z.value)), H = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
-	function V(e) {
-		j.value = e, T(e ? "open" : "close");
+	function U(e) {
+		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let H = c(() => y(N.value.inheritedAttrs, ["class"])), U = c(() => {
-		let e = g({
-			bridgeKeys: o,
-			props: H.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: s, ...c } = P.value.customProps ?? {};
+	let W = u(() => g(N.value.inheritedAttrs, ["class"])), G = u(() => {
+		let e = x({
+			bridgeKeys: c,
+			props: W.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: o, ...s } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
 			classes: P.value.classes,
 			customProps: {
-				...c,
-				container: i(c.container, {}, {
-					ref: ee,
-					class: f({ "cursor-pointer": !C.disabled && !C.readonly }),
+				...s,
+				container: i(s.container, {}, {
+					ref: H,
+					class: b({ "cursor-pointer": !C.disabled && !C.readonly }),
 					onClick: (e) => {
-						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
 					}
 				})
 			}
 		};
-	}), W = s(() => U.value, {
+	}), K = l(() => G.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "TimeField" }), G = c(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = c(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
-	function q(e) {
+	}, { componentName: "TimeField" }), q = u(() => R.value && L.value && !C.readonly && !K.isDisabled.value), J = u(() => ee(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function Y(e) {
 		w.value = e, T("change", e);
 	}
-	let J = c(() => h(P.value.showFooter, k.mobile));
-	function Y(e) {
-		q(e), V(!1);
+	let X = o({
+		overlay: z,
+		componentName: "TimeField",
+		showFooter: () => P.value.showFooter
+	});
+	function Z(e) {
+		if (Y(e), X.value) {
+			T("apply");
+			return;
+		}
+		U(!1);
 	}
-	function X() {
-		V(!1);
+	function Q() {
+		T("cancel");
 	}
-	function Z(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), V(!1));
+	function $(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (Y(null), T("clear"), U(!1));
 	}
-	function Q(e) {
+	function te(e) {
 		e.preventDefault();
 	}
-	let $ = c(() => i({
-		readonly: !0,
-		value: K.value,
+	let ne = u(() => i({
+		value: J.value,
+		readonly: !P.value.editable || K.inputBind.value.readonly,
 		onFocus: (e) => {
-			W.inputBind.value.onFocus?.(e), V(!0);
+			K.inputBind.value.onFocus?.(e), U(!0);
 		},
 		onKeydown: (e) => {
-			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
+			K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
 		}
-	}, void 0, W.inputBind.value)), te = c(() => P.value.overlay), ne = c(() => {
+	}, void 0, K.inputBind.value)), re = u(() => P.value.overlay), ie = u(() => {
 		let e = P.value.customProps?.menu;
 		return {
 			modal: P.value.customProps?.modal,
@@ -105,42 +120,43 @@ function C(C, w, T) {
 				...e,
 				classes: {
 					...e?.classes,
-					content: f("min-w-0", e?.classes?.content)
+					content: b("min-w-0", e?.classes?.content)
 				}
 			}
 		};
-	}), re = c(() => P.value.customProps?.timePicker), ie = c(() => a(W.merged.value.size)), ae = c(() => _(b, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	}), ae = u(() => P.value.customProps?.timePicker), oe = u(() => a(K.merged.value.size)), se = u(() => m(y, [K.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: j,
-		overlay: te,
+		fill: B,
+		overlay: re,
 		hasValue: R,
 		timeOnly: P,
-		formField: W,
-		inputBind: $,
+		formField: K,
+		inputBind: ne,
 		clearable: L,
-		clearBind: c(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: Q,
-			class: f({
+			onMousedown: te,
+			class: b({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[ae.value]: !0,
+				[se.value]: !0,
 				[P.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: Z,
+		clearValue: $,
 		modelValue: I,
-		showFooter: J,
-		pickerClass: B,
+		showFooter: X,
+		pickerClass: V,
 		containerRef: M,
-		clearIconSize: ie,
-		showClearIcon: G,
-		handleOpenChange: V,
-		handlePickerChange: Y,
-		handlePickerCancel: X,
-		overlayCustomProps: ne,
-		timePickerCustomProps: re
+		clearIconSize: oe,
+		showClearIcon: q,
+		handleOpenChange: U,
+		handlePickerChange: Z,
+		handlePickerCancel: Q,
+		overlayCustomProps: ie,
+		timePickerCustomProps: ae
 	};
 }
 //#endregion

package/dist/Components/TimeField/timeField.types.d.ts

@@ -1,5 +1,6 @@
-import { InputHTMLAttributes } from 'vue';
-import { DisableTimesInput, FieldOverlayMode, MergeHtmlProps, TimeValue } from '@bridge-ui/core';
+import { InputHTMLAttributes, Slot } from 'vue';
+import { DisableTimesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, TimeValue } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
@@ -45,6 +46,14 @@ export interface TimeFieldCustomProps extends FormFieldCustomProps {
     timePicker?: TimePickerCustomProps;
 }
 export interface TimeFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selected time changes.
      */
@@ -99,6 +108,22 @@ export interface TimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "cl
      * @default undefined
      */
     disableTimes?: DisableTimesInput;
+    /**
+     * Unlocks the input for typing. The field does not parse or commit typed
+     * text; use the picker (or your own component) to update the value. When
+     * unset, the input is read-only.
+     *
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * When `true`, the picker fills the overlay width.
+     * When `false`, it stays at its minimum width.
+     * Unset: `true` for `drawer`, `false` for `menu` and `modal`.
+     *
+     * @default undefined
+     */
+    fill?: boolean;
     /**
      * Minute step between options.
      *
@@ -125,10 +150,10 @@ export interface TimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "cl
      */
     overlay?: FieldOverlayMode;
     /**
-     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
-     * on mobile.
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
     /**
@@ -144,7 +169,15 @@ export interface TimeFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "cl
      */
     timeZone?: string;
 }
-export interface TimeFieldSlots extends FormFieldSlots {}
+export interface TimeFieldSlots extends FormFieldSlots {
+    /**
+     * 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 type TimeFieldProps = MergeHtmlProps<TimeFieldOwnProps, InputHTMLAttributes> & {
     /**
      * Bound with `v-model` on the component (`defineModel` internally).

package/dist/Components/TimePanel/TimePanel.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useTimePanel as e } from "./composables/useTimePanel.js";
 import { Fragment as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, guardReactiveProps as o, mergeProps as s, nextTick as c, normalizeProps as l, onBeforeUnmount as u, onMounted as d, openBlock as f, ref as p, renderList as m, toDisplayString as h, unref as g, watch as _ } from "vue";
-import { observeTimePanelSelectedScroll as v } from "@bridge-ui/core";
+import { observeTimePanelSelectedScroll as v } from "@bridge-ui/core/Domain";
 //#region src/Components/TimePanel/TimePanel.vue?vue&type=script&setup=true&lang.ts
 var y = /*@__PURE__*/ a({
 	inheritAttrs: !1,
@@ -12,6 +12,8 @@ var y = /*@__PURE__*/ a({
 		customProps: {},
 		disabled: { type: Boolean },
 		disableTimes: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		interval: {},
 		maxTime: {},
 		minTime: {},

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, "error" | "color" | "fill" | "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,13 +1,16 @@
 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 y, timeRoundedProps as b } from "@bridge-ui/core/Tokens";
+import { cn as x, getColorToken as S, mergeBridgeUILayeredClasses as C, splitComponentProps as ee } from "@bridge-ui/core/Utils";
 //#region src/Components/TimePanel/composables/useTimePanel.ts
-var C = [
+var te = [
 	"ampm",
+	"fill",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -23,8 +26,8 @@ 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({
-		bridgeKeys: C,
+	let O = s(), k = e(), A = t(), j = a(() => ee({
+		bridgeKeys: te,
 		props: {
 			...O,
 			...o(w)
@@ -32,41 +35,48 @@ 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(() => {
+		let e = C(b, M.value.tokens?.rounded);
+		return c(e, M.value.rounded);
+	}), R = a(() => {
+		let e = C(y, M.value.tokens?.color);
+		return S({
+			tokens: e,
+			color: M.value.color,
+			invalid: M.value.error
+		});
+	}), z = 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, {
+	}), ne = a(() => u({ ampm: M.value.ampm })), B = a(() => d({ interval: M.value.interval })), V = a(() => f()), H = a(() => v(k.value.getHours(z.value, I.value))), U = (e) => !!M.value.disabled || p(e, {
 		adapter: k.value,
 		context: I.value,
 		maxTime: M.value.maxTime,
 		minTime: M.value.minTime,
 		disableTimes: M.value.disableTimes
-	}), G = (e) => {
-		M.value.disabled || M.value.readOnly || W(e) || D("change", e);
+	}), W = (e) => {
+		M.value.disabled || M.value.readOnly || U(e) || D("change", e);
+	}, G = (e) => {
+		let t = M.value.ampm ? _(e, H.value) : e, n = k.value.setHours(z.value, t, I.value);
+		n = k.value.setMinutes(n, k.value.getMinutes(z.value, I.value), I.value), W(n);
 	}, K = (e) => {
-		let t = M.value.ampm ? _(e, U.value) : e, n = k.value.setHours(B.value, t, I.value);
-		n = k.value.setMinutes(n, k.value.getMinutes(B.value, I.value), I.value), G(n);
+		let t = k.value.setMinutes(z.value, e, I.value);
+		W(t);
 	}, q = (e) => {
-		let t = k.value.setMinutes(B.value, e, I.value);
-		G(t);
+		let t = k.value.setSeconds(z.value, e, I.value);
+		W(t);
 	}, J = (e) => {
-		let t = k.value.setSeconds(B.value, e, I.value);
-		G(t);
-	}, Y = (e) => {
-		let t = g(k.value.getHours(B.value, I.value)), n = _(t, e), r = k.value.setHours(B.value, n, I.value);
-		r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value), G(r);
-	}, X = a(() => {
-		let e = k.value.getHours(B.value, I.value), t = M.value.ampm ? g(e) : e;
-		return V.value.map((e) => {
-			let n = M.value.ampm ? _(e, U.value) : e, r = k.value.setHours(B.value, n, I.value);
-			r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value);
-			let i = W(r), a = e === t;
+		let t = g(k.value.getHours(z.value, I.value)), n = _(t, e), r = k.value.setHours(z.value, n, I.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(z.value, I.value), I.value), W(r);
+	}, Y = a(() => {
+		let e = k.value.getHours(z.value, I.value), t = M.value.ampm ? g(e) : e;
+		return ne.value.map((e) => {
+			let n = M.value.ampm ? _(e, H.value) : e, r = k.value.setHours(z.value, n, I.value);
+			r = k.value.setMinutes(r, k.value.getMinutes(z.value, I.value), I.value);
+			let i = U(r), a = e === t;
 			return {
 				state: m({
 					disabled: i,
@@ -79,10 +89,10 @@ function E(w, E, D) {
 				label: M.value.ampm ? String(e) : String(e).padStart(2, "0")
 			};
 		});
-	}), Z = a(() => {
-		let e = k.value.getMinutes(B.value, I.value);
-		return te.value.map((t) => {
-			let n = k.value.setMinutes(B.value, t, I.value), r = W(n), i = t === e;
+	}), X = a(() => {
+		let e = k.value.getMinutes(z.value, I.value);
+		return B.value.map((t) => {
+			let n = k.value.setMinutes(z.value, t, I.value), r = U(n), i = t === e;
 			return {
 				state: m({
 					disabled: r,
@@ -95,11 +105,11 @@ function E(w, E, D) {
 				disabled: r || !!M.value.readOnly
 			};
 		});
-	}), Q = a(() => {
+	}), Z = a(() => {
 		if (!M.value.showSeconds) return [];
-		let e = k.value.getSeconds(B.value, I.value);
-		return H.value.map((t) => {
-			let n = k.value.setSeconds(B.value, t, I.value), r = W(n), i = t === e;
+		let e = k.value.getSeconds(z.value, I.value);
+		return V.value.map((t) => {
+			let n = k.value.setSeconds(z.value, t, I.value), r = U(n), i = t === e;
 			return {
 				state: m({
 					disabled: r,
@@ -112,10 +122,10 @@ function E(w, E, D) {
 				disabled: r || !!M.value.readOnly
 			};
 		});
-	}), ne = a(() => M.value.ampm ? ["AM", "PM"].map((e) => {
-		let t = g(k.value.getHours(B.value, I.value)), n = _(t, e), r = k.value.setHours(B.value, n, I.value);
-		r = k.value.setMinutes(r, k.value.getMinutes(B.value, I.value), I.value);
-		let i = W(r), a = e === U.value;
+	}), re = a(() => M.value.ampm ? ["AM", "PM"].map((e) => {
+		let t = g(k.value.getHours(z.value, I.value)), n = _(t, e), r = k.value.setHours(z.value, n, I.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(z.value, I.value), I.value);
+		let i = U(r), a = e === H.value;
 		return {
 			state: m({
 				disabled: i,
@@ -127,52 +137,54 @@ function E(w, E, D) {
 			value: e,
 			disabled: i || !!M.value.readOnly
 		};
-	}) : []), re = a(() => n(N.value?.root, P.value, d({
-		"flex h-72 w-full min-w-fit flex-row gap-2": !0,
+	}) : []), ie = a(() => n(N.value?.root, P.value, x({
+		"flex h-72 flex-row gap-2": !0,
+		"w-full min-w-fit": M.value.fill,
+		"w-fit min-w-fit": !M.value.fill,
 		[F.value.root ?? ""]: !0
-	}))), ie = a(() => n(N.value?.column, {}, d({
+	}))), ae = a(() => n(N.value?.column, {}, x({
 		"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
-	}))), $ = (e, t) => {
-		let r = z.value;
+	}))), Q = (e, t) => {
+		let r = R.value;
 		return n(N.value?.item, {
 			type: "button",
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
-		}, d({
+		}, x({
 			"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,
+			[L.value ?? ""]: !0,
 			[r?.base ?? ""]: e.state === "base" || e.state === "hover",
 			[r?.hover ?? ""]: e.state === "base" || e.state === "hover",
 			[r?.selected ?? ""]: e.state === "selected",
 			[r?.disabled ?? ""]: e.state === "disabled",
 			[F.value.item ?? ""]: !0
 		}));
-	}, ae = (e) => $(e, (e) => {
+	}, oe = (e) => Q(e, (e) => {
+		typeof e == "number" && G(e);
+	}), $ = (e) => Q(e, (e) => {
 		typeof e == "number" && K(e);
-	}), oe = (e) => $(e, (e) => {
+	}), se = (e) => Q(e, (e) => {
 		typeof e == "number" && q(e);
-	}), se = (e) => $(e, (e) => {
-		typeof e == "number" && J(e);
-	}), ce = (e) => $(e, (e) => {
-		(e === "AM" || e === "PM") && Y(e);
+	}), ce = (e) => Q(e, (e) => {
+		(e === "AM" || e === "PM") && J(e);
 	}), le = a(() => !!M.value.ampm);
 	return {
 		merged: M,
-		rootBind: re,
-		hourItems: X,
-		columnBind: ie,
-		getHourBind: ae,
-		minuteItems: Z,
-		secondItems: Q,
-		displayDate: B,
+		rootBind: ie,
+		hourItems: Y,
+		columnBind: ae,
+		getHourBind: oe,
+		minuteItems: X,
+		secondItems: Z,
+		displayDate: z,
 		showSeconds: a(() => !!M.value.showSeconds),
 		showMeridiem: le,
-		getMinuteBind: oe,
+		getMinuteBind: $,
 		getSecondBind: se,
-		meridiemItems: ne,
+		meridiemItems: re,
 		getMeridiemBind: ce
 	};
 }

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 {
@@ -89,6 +91,19 @@ export interface TimePanelOwnProps {
      * @default undefined
      */
     disableTimes?: DisableTimesInput;
+    /**
+     * 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.
      *

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;
+    };
+};