@bridge-ui/vue 0.0.11 → 0.1.1

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

@@ -2,15 +2,16 @@ import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapte
 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 { 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 { buildHourOptions as u, buildMinuteOptions as d, buildSecondOptions as f, isTimeDisabled as p, resolveCalendarDayInteractionState as m, snapMinutes as ee, to12Hour as h, to24Hour as g, toMeridiem as te } from "@bridge-ui/core/Domain";
+import { timeColorProps as _, timeRoundedProps as v } from "@bridge-ui/core/Tokens";
+import { cn as y, getColorToken as b, mergeBridgeUILayeredClasses as x, splitComponentProps as S } from "@bridge-ui/core/Utils";
 //#region src/Components/TimePanel/composables/useTimePanel.ts
 var C = [
 	"ampm",
+	"fill",
 	"color",
+	"error",
 	"value",
-	"tokens",
 	"classes",
 	"maxTime",
 	"minTime",
@@ -30,43 +31,51 @@ function E(w, E, D) {
 			...O,
 			...o(w)
 		}
-	})), { merged: M } = r({
+	})), { merged: M, entry: N } = r({
 		libDefaults: E,
+		componentName: "TimePanel",
 		props: () => j.value.componentProps
-	}), N = a(() => M.value.customProps), P = a(() => l(j.value.inheritedAttrs, ["onChange"])), F = i({
+	}), P = a(() => M.value.customProps), F = a(() => l(j.value.inheritedAttrs, ["onChange"])), I = 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);
+	}), L = a(() => A(M.value.timeZone)), R = a(() => {
+		let e = x(v, N.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(() => 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, {
+	}), z = a(() => {
+		let e = x(_, N.value?.tokens?.color);
+		return b({
+			tokens: e,
+			color: M.value.color,
+			invalid: M.value.error
+		});
+	}), B = a(() => {
+		let e = M.value.value ?? k.value.now(L.value), t = ee(k.value.getMinutes(e, L.value), M.value.interval), n = M.value.showSeconds ? k.value.getSeconds(e, L.value) : 0, r = k.value.setHours(e, k.value.getHours(e, L.value), L.value);
+		return r = k.value.setMinutes(r, t, L.value), r = k.value.setSeconds(r, n, L.value), r;
+	}), ne = a(() => u({ ampm: M.value.ampm })), V = a(() => d({ interval: M.value.interval })), H = a(() => f()), U = a(() => te(k.value.getHours(B.value, L.value))), W = (e) => !!M.value.disabled || p(e, {
 		adapter: k.value,
-		context: I.value,
+		context: L.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);
 	}, 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 = M.value.ampm ? g(e, U.value) : e, n = k.value.setHours(B.value, t, L.value);
+		n = k.value.setMinutes(n, k.value.getMinutes(B.value, L.value), L.value), G(n);
 	}, q = (e) => {
-		let t = k.value.setMinutes(B.value, e, I.value);
+		let t = k.value.setMinutes(B.value, e, L.value);
 		G(t);
 	}, J = (e) => {
-		let t = k.value.setSeconds(B.value, e, I.value);
+		let t = k.value.setSeconds(B.value, e, L.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);
+		let t = h(k.value.getHours(B.value, L.value)), n = g(t, e), r = k.value.setHours(B.value, n, L.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(B.value, L.value), L.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 e = k.value.getHours(B.value, L.value), t = M.value.ampm ? h(e) : e;
+		return ne.value.map((e) => {
+			let n = M.value.ampm ? g(e, U.value) : e, r = k.value.setHours(B.value, n, L.value);
+			r = k.value.setMinutes(r, k.value.getMinutes(B.value, L.value), L.value);
 			let i = W(r), a = e === t;
 			return {
 				state: m({
@@ -81,9 +90,9 @@ function E(w, E, D) {
 			};
 		});
 	}), 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;
+		let e = k.value.getMinutes(B.value, L.value);
+		return V.value.map((t) => {
+			let n = k.value.setMinutes(B.value, t, L.value), r = W(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(() => {
+	}), re = a(() => {
 		if (!M.value.showSeconds) return [];
-		let e = k.value.getSeconds(B.value, I.value);
+		let e = k.value.getSeconds(B.value, L.value);
 		return H.value.map((t) => {
-			let n = k.value.setSeconds(B.value, t, I.value), r = W(n), i = t === e;
+			let n = k.value.setSeconds(B.value, t, L.value), r = W(n), i = t === e;
 			return {
 				state: m({
 					disabled: r,
@@ -113,9 +122,9 @@ 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);
+	}), ie = a(() => M.value.ampm ? ["AM", "PM"].map((e) => {
+		let t = h(k.value.getHours(B.value, L.value)), n = g(t, e), r = k.value.setHours(B.value, n, L.value);
+		r = k.value.setMinutes(r, k.value.getMinutes(B.value, L.value), L.value);
 		let i = W(r), a = e === U.value;
 		return {
 			state: m({
@@ -128,53 +137,55 @@ 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,
-		[F.value.root ?? ""]: !0
-	}))), ie = a(() => n(N.value?.column, {}, b({
+	}) : []), ae = a(() => n(P.value?.root, F.value, y({
+		"flex h-72 flex-row gap-2": !0,
+		"w-full min-w-fit": M.value.fill,
+		"w-fit min-w-fit": !M.value.fill,
+		[I.value.root ?? ""]: !0
+	}))), Q = a(() => n(P.value?.column, {}, y({
 		"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
+		[I.value.column ?? ""]: !0
 	}))), $ = (e, t) => {
 		let r = z.value;
-		return n(N.value?.item, {
+		return n(P.value?.item, {
 			type: "button",
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
-		}, b({
+		}, y({
 			"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",
 			[r?.hover ?? ""]: e.state === "base" || e.state === "hover",
 			[r?.selected ?? ""]: e.state === "selected",
 			[r?.disabled ?? ""]: e.state === "disabled",
-			[F.value.item ?? ""]: !0
+			[I.value.item ?? ""]: !0
 		}));
-	}, ae = (e) => $(e, (e) => {
+	}, oe = (e) => $(e, (e) => {
 		typeof e == "number" && K(e);
-	}), oe = (e) => $(e, (e) => {
-		typeof e == "number" && q(e);
 	}), se = (e) => $(e, (e) => {
-		typeof e == "number" && J(e);
+		typeof e == "number" && q(e);
 	}), ce = (e) => $(e, (e) => {
+		typeof e == "number" && J(e);
+	}), le = (e) => $(e, (e) => {
 		(e === "AM" || e === "PM") && Y(e);
-	}), le = a(() => !!M.value.ampm);
+	}), ue = a(() => !!M.value.ampm);
 	return {
 		merged: M,
-		rootBind: re,
+		rootBind: ae,
 		hourItems: X,
-		columnBind: ie,
-		getHourBind: ae,
+		columnBind: Q,
+		getHourBind: oe,
 		minuteItems: Z,
-		secondItems: Q,
+		secondItems: re,
 		displayDate: B,
 		showSeconds: a(() => !!M.value.showSeconds),
-		showMeridiem: le,
-		getMinuteBind: oe,
-		getSecondBind: se,
-		meridiemItems: ne,
-		getMeridiemBind: ce
+		showMeridiem: ue,
+		getMinuteBind: se,
+		getSecondBind: ce,
+		meridiemItems: ie,
+		getMeridiemBind: le
 	};
 }
 //#endregion

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

@@ -1,3 +1,3 @@
 export { TIME_PANEL_COLUMN_WIDTH_CLASS, useTimePanel, type TimePanelItem, } from './composables/useTimePanel';
-export type { TimePanelClasses, TimePanelColorOverrides, TimePanelCustomProps, TimePanelEmits, TimePanelOwnProps, TimePanelProps, TimePanelRoundedOverrides, TimePanelTokens, } from './timePanel.types';
+export type { TimePanelClasses, TimePanelColorOverrides, TimePanelCustomProps, TimePanelEmits, TimePanelOwnProps, TimePanelProps, TimePanelRoundedOverrides, } from './timePanel.types';
 export { default as TimePanel } from './TimePanel.vue';

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

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
 import { DisableTimesInput, TimeValue } from '@bridge-ui/core/Domain';
-import { TimeColor, TimeColorItem, TimeRounded } from '@bridge-ui/core/Tokens';
+import { TimeColor, TimeRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 export interface TimePanelColorOverrides {}
 export interface TimePanelRoundedOverrides {}
@@ -44,16 +44,6 @@ export interface TimePanelEmits {
      */
     change: [value: Date | null];
 }
-export interface TimePanelTokens {
-    /**
-     * Color token map overrides.
-     */
-    color?: Record<string, Partial<TimeColorItem>>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-}
 export interface TimePanelOwnProps {
     /**
      * Uses a 12-hour clock with an AM/PM column.
@@ -91,6 +81,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.
      *
@@ -133,12 +136,6 @@ export interface TimePanelOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: TimePanelTokens;
     /**
      * Selected time (`Date` wall clock).
      *

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

@@ -14,6 +14,8 @@ var v = /*@__PURE__*/ c({
 		defaultValue: {},
 		disabled: { type: Boolean },
 		disableTimes: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		interval: {},
 		maxTime: {},
 		minTime: {},
@@ -25,7 +27,6 @@ var v = /*@__PURE__*/ c({
 		},
 		showSeconds: { type: Boolean },
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -34,18 +35,19 @@ var v = /*@__PURE__*/ c({
 		"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, {
+		let { merged: y, rootBind: b, footerBind: x, showFooter: S, applyLabel: C, contentBind: w, handleApply: T, cancelLabel: E, displayValue: D, handleCancel: O, applyButtonProps: k, cancelButtonProps: A, handlePanelChange: j } = n(c, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
 			color: "primary",
 			showSeconds: !1
 		}, v);
-		return (n, c) => (p(), i("div", f(l(g(b))), [a("div", { class: d(g(T)) }, [s(g(t), {
+		return (n, c) => (p(), i("div", f(l(g(b))), [a("div", { class: d(g(w)) }, [s(g(t), {
 			ampm: g(y).ampm,
-			tokens: g(w),
+			fill: g(y).fill,
 			color: g(y).color,
-			value: g(O),
+			value: g(D),
+			error: g(y).error,
 			rounded: g(y).rounded,
 			"max-time": g(y).maxTime,
 			"min-time": g(y).minTime,
@@ -53,14 +55,15 @@ var v = /*@__PURE__*/ c({
 			interval: g(y).interval,
 			"read-only": g(y).readOnly,
 			"time-zone": g(y).timeZone,
-			onChange: g(M),
+			onChange: g(j),
 			"show-seconds": g(y).showSeconds,
 			"disable-times": g(y).disableTimes
 		}, null, 8, [
 			"ampm",
-			"tokens",
+			"fill",
 			"color",
 			"value",
+			"error",
 			"rounded",
 			"max-time",
 			"min-time",
@@ -72,16 +75,16 @@ var v = /*@__PURE__*/ c({
 			"show-seconds",
 			"disable-times"
 		])], 2), g(S) ? (p(), i("div", f(u({ key: 0 }, g(x))), [m(n.$slots, "footer", {
-			apply: g(E),
-			cancel: g(k)
+			apply: g(T),
+			cancel: g(O)
 		}, () => [s(g(e), u({
 			variant: "flat",
 			color: "secondary",
-			onClick: g(k)
-		}, g(j)), {
-			default: _(() => [o(h(g(D)), 1)]),
+			onClick: g(O)
+		}, g(A)), {
+			default: _(() => [o(h(g(E)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), s(g(e), u({ color: "primary" }, g(A), { onClick: g(E) }), {
+		}, 16, ["onClick"]), s(g(e), u({ color: "primary" }, g(k), { onClick: g(T) }), {
 			default: _(() => [o(h(g(C)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));

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

@@ -9,13 +9,9 @@ type TimePickerMerged = MergeLibDefaults<TimePickerOwnProps, TimePickerLibDefaul
  */
 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/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">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<TimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "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/Tokens').TimeColorItem>> | undefined;
-        rounded: Record<string, string> | undefined;
-    }>;
     contentBind: import('vue').ComputedRef<string>;
     handleApply: () => void;
     displayValue: import('vue').ComputedRef<Date | null>;

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

@@ -8,9 +8,10 @@ import { cn as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/TimePicker/composables/useTimePicker.ts
 var _ = [
 	"ampm",
+	"fill",
 	"color",
+	"error",
 	"value",
-	"tokens",
 	"classes",
 	"maxTime",
 	"minTime",
@@ -50,43 +51,41 @@ function v(v, y, b) {
 	u(() => [N.value, T.value.showFooter], ([e, t]) => {
 		t && (P.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) => {
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = (e) => {
 		j.value || (M.value = e), b("change", e);
-	}, R = (e) => {
+	}, L = (e) => {
 		if (T.value.showFooter) {
 			P.value = e;
 			return;
 		}
-		L(e);
+		I(e);
+	}, R = () => {
+		I(P.value), b("apply"), S.apply();
 	}, z = () => {
-		L(P.value), b("apply"), S.apply();
-	}, B = () => {
 		P.value = N.value, b("cancel"), S.cancel();
-	}, V = a(() => {
+	}, B = 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,
+			"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"w-full": T.value.fill,
+			"w-fit": !T.value.fill,
 			[e]: !0,
 			[k.value.root ?? ""]: !0
 		}));
-	}), H = a(() => h({ "px-2.5": !0 }));
+	}), V = a(() => h({ "px-2.5": !0 }));
 	return {
 		merged: T,
-		rootBind: V,
+		rootBind: B,
 		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,
 			[k.value.footer ?? ""]: !0
 		}))),
 		showFooter: a(() => !!T.value.showFooter),
-		timeTokens: I,
-		contentBind: H,
-		handleApply: z,
+		contentBind: V,
+		handleApply: R,
 		displayValue: F,
-		handleCancel: B,
-		handlePanelChange: R,
+		handleCancel: z,
+		handlePanelChange: L,
 		applyLabel: a(() => C("Apply")),
 		cancelLabel: a(() => C("Cancel")),
 		applyButtonProps: a(() => D.value?.applyButton),

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, TimePickerSlots, TimePickerTokens, } from './timePicker.types';
+export type { TimePickerClasses, TimePickerColorOverrides, TimePickerCustomProps, TimePickerEmits, TimePickerOwnProps, TimePickerProps, TimePickerRoundedOverrides, TimePickerSlots, } from './timePicker.types';
 export { default as TimePicker } from './TimePicker.vue';

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DisableTimesInput, FieldOverlayFooterSlotProps, TimeValue } from '@bridge-ui/core/Domain';
-import { TimeColor, TimeColorItem, TimeRounded } from '@bridge-ui/core/Tokens';
+import { TimeColor, TimeRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 export interface TimePickerColorOverrides {}
@@ -98,6 +98,19 @@ export interface TimePickerOwnProps {
      * @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.
      *
@@ -153,12 +166,6 @@ export interface TimePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: TimePickerTokens;
     /**
      * Controlled value.
      *
@@ -175,21 +182,4 @@ export interface TimePickerSlots {
      */
     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

@@ -23,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: TimeRangeValue | null | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
     showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;

package/dist/Components/TimeRangeField/TimeRangeField.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, timeRangePickerCustomProps: 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, timeRangePickerCustomProps: 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,
-				disabled: T(H).isDisabled.value,
-				"disable-times": T(V).disableTimes,
-				rounded: T(H).merged.value.rounded,
-				"custom-props": T(te)
+				"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,
+				disabled: T(U).isDisabled.value,
+				"disable-times": T(H).disableTimes,
+				rounded: T(U).merged.value.rounded,
+				"custom-props": T(ne)
 			}, 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",
 				"disabled",
 				"disable-times",

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -7,9 +7,10 @@ import { TimeRangeFieldEmits, TimeRangeFieldOwnProps } from '../timeRangeField.t
  */
 export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model: Ref<null | undefined | TimeRangeValue>, emit: SetupContext<TimeRangeFieldEmits>["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<TimeRangeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    timeOnly: import('vue').ComputedRef<Pick<TimeRangeFieldOwnProps & 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 useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         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 useTimeRangeField(props: TimeRangeFieldOwnProps, model:
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<TimeRangeValue | 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>;