@bridge-ui/vue 0.0.11 → 0.1.0

package/dist/Components/TimeField/TimeField.vue_vue_type_script_setup_true_lang.js

@@ -22,6 +22,11 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 		customProps: {},
 		defaultValue: {},
 		disableTimes: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
 		interval: {},
 		maxTime: {},
 		minTime: {},
@@ -74,49 +79,52 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 				N.value = e, L.value = e;
 			},
 			get: () => A(N.value) ? L.value : N.value
-		}), { open: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timePickerCustomProps: te } = o(P, R, F);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(H) }, p({
-			default: D(() => [f("div", j, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
-				onClick: o[0] ||= (...e) => T(G) && T(G)(...e),
+		}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timePickerCustomProps: ne } = o(P, R, F);
+		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
+			default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
+				onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
 				"aria-label": T(I)("Clear"),
-				onKeydown: [o[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+				onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
 			}), [m(T(n), v({
 				icon: "clear",
-				size: T(Y)
+				size: T(X)
 			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
 			_: 2
 		}, [C(T(t)(T(r), e.$slots), (t) => ({
 			name: t,
 			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
 		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(B),
+			overlay: T(V),
 			"model-value": T(z),
-			"custom-props": T(ee),
-			"onUpdate:modelValue": T(Z)
+			"custom-props": T(te),
+			"onUpdate:modelValue": T(Q)
 		}, {
 			default: D(() => [m(T(s), {
-				value: T(K),
-				class: y(T(J)),
-				ampm: T(V).ampm,
-				"show-footer": T(q),
+				fill: T(B),
+				value: T(q),
+				class: y(T(Y)),
+				ampm: T(H).ampm,
+				"show-footer": T(J),
 				"read-only": P.readonly,
-				"max-time": T(V).maxTime,
-				"min-time": T(V).minTime,
-				interval: T(V).interval,
-				"time-zone": T(V).timeZone,
-				onChange: T(Q),
-				onCancel: T($),
-				"show-seconds": T(V).showSeconds,
-				color: T(H).merged.value.color,
-				"custom-props": T(te),
-				disabled: T(H).isDisabled.value,
-				"disable-times": T(V).disableTimes,
-				rounded: T(H).merged.value.rounded
+				"max-time": T(H).maxTime,
+				"min-time": T(H).minTime,
+				interval: T(H).interval,
+				"time-zone": T(H).timeZone,
+				onChange: T($),
+				onCancel: T(ee),
+				"show-seconds": T(H).showSeconds,
+				error: T(U).invalidated.value,
+				color: T(U).merged.value.color,
+				"custom-props": T(ne),
+				disabled: T(U).isDisabled.value,
+				"disable-times": T(H).disableTimes,
+				rounded: T(U).merged.value.rounded
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
 				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
 				key: "0"
 			} : void 0]), 1032, [
+				"fill",
 				"value",
 				"class",
 				"ampm",
@@ -129,6 +137,7 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 				"onChange",
 				"onCancel",
 				"show-seconds",
+				"error",
 				"color",
 				"custom-props",
 				"disabled",

package/dist/Components/TimeField/composables/useTimeField.d.ts

@@ -7,9 +7,10 @@ import { TimeFieldEmits, TimeFieldOwnProps } from '../timeField.types';
  */
 export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null | TimeValue | undefined>, emit: SetupContext<TimeFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
+    fill: import('vue').ComputedRef<boolean>;
     overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
-    timeOnly: import('vue').ComputedRef<Pick<TimeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    timeOnly: import('vue').ComputedRef<Pick<TimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
@@ -686,8 +687,8 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, "class", {
-        readonly: boolean;
         value: string;
+        readonly: boolean;
         onFocus: (event: FocusEvent) => void;
         onKeydown: (event: KeyboardEvent) => void;
     }, undefined>>;
@@ -702,7 +703,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
+    pickerClass: import('vue').ComputedRef<string | undefined>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

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

@@ -1,20 +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, useFieldShowFooter as o } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as s, useFormField as c } from "../../FormField/composables/useFormField.js";
-import { computed as l, ref as u, useAttrs as d, useSlots as f } from "vue";
-import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
-import { isFieldOverlayDialog as g, resolveFieldOverlay as _ } from "@bridge-ui/core/Domain";
-import { listboxColorProps as v } from "@bridge-ui/core/Tokens";
-import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
+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",
@@ -24,86 +26,90 @@ var x = [
 	"defaultValue",
 	"disableTimes"
 ];
-function S(e, t, n, r, i) {
-	return m(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 = d(), D = f(), O = e(), k = r(), A = t(), j = u(!1), M = u(null), N = l(() => b({
+	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 = l(() => N.value.componentProps), F = l(() => A(P.value.timeZone)), I = l(() => w.value ?? null), L = l(() => P.value.clearable !== !1), R = l(() => !m(I.value)), z = l(() => _(P.value.overlay, k.mobile)), B = l(() => g(z.value) ? "w-full shadow-none" : void 0), V = (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 H(e) {
+	function U(e) {
 		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let ee = l(() => h(N.value.inheritedAttrs, ["class"])), U = l(() => {
-		let e = b({
-			bridgeKeys: s,
-			props: ee.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timePicker: o, ...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: V,
-					class: y({ "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]") || H(!0);
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
 					}
 				})
 			}
 		};
-	}), W = c(() => U.value, {
+	}), K = l(() => G.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "TimeField" }), G = l(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = l(() => 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 = o({
+	let X = o({
 		overlay: z,
 		componentName: "TimeField",
 		showFooter: () => P.value.showFooter
 	});
-	function Y(e) {
-		if (q(e), J.value) {
+	function Z(e) {
+		if (Y(e), X.value) {
 			T("apply");
 			return;
 		}
-		H(!1);
+		U(!1);
 	}
-	function X() {
+	function Q() {
 		T("cancel");
 	}
-	function Z(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), H(!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 $ = l(() => 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), H(!0);
+			K.inputBind.value.onFocus?.(e), U(!0);
 		},
 		onKeydown: (e) => {
-			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && H(!1);
+			K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
 		}
-	}, void 0, W.inputBind.value)), te = l(() => P.value.overlay), ne = l(() => {
+	}, void 0, K.inputBind.value)), re = u(() => P.value.overlay), ie = u(() => {
 		let e = P.value.customProps?.menu;
 		return {
 			modal: P.value.customProps?.modal,
@@ -114,42 +120,43 @@ function C(C, w, T) {
 				...e,
 				classes: {
 					...e?.classes,
-					content: y("min-w-0", e?.classes?.content)
+					content: b("min-w-0", e?.classes?.content)
 				}
 			}
 		};
-	}), re = l(() => P.value.customProps?.timePicker), ie = l(() => a(W.merged.value.size)), ae = l(() => p(v, [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: l(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: Q,
-			class: y({
+			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: H,
-		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

@@ -108,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.
      *

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

@@ -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

@@ -22,7 +22,7 @@ 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/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">>>>;
+    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/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     getHourBind: (item: TimePanelItem) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').ButtonHTMLAttributes | undefined, {

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

@@ -3,12 +3,14 @@ import { mergePartBind as n, useBridgeUIComponent as r, useBridgeUIMergedRegistr
 import { computed as a, toValue as o, useAttrs as s } from "vue";
 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";
+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",
@@ -24,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(() => S({
-		bridgeKeys: C,
+	let O = s(), k = e(), A = t(), j = a(() => ee({
+		bridgeKeys: te,
 		props: {
 			...O,
 			...o(w)
@@ -36,38 +38,45 @@ function E(w, E, D) {
 	}), 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(() => x(ee, M.value.tokens?.color)), R = a(() => {
-		let e = x(y, M.value.tokens?.rounded);
+	}), I = a(() => A(M.value.timeZone)), L = a(() => {
+		let e = C(b, M.value.tokens?.rounded);
 		return c(e, M.value.rounded);
-	}), z = a(() => c(L.value, M.value.color)), B = a(() => {
+	}), 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(() => 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, {
+	}), 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,
@@ -80,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,
@@ -96,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,
@@ -113,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,
@@ -128,52 +137,54 @@ function E(w, E, D) {
 			value: e,
 			disabled: i || !!M.value.readOnly
 		};
-	}) : []), re = a(() => n(N.value?.root, P.value, b({
-		"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, {}, b({
+	}))), 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)
-		}, b({
+		}, 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

@@ -91,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.
      *