@bridge-ui/vue 0.5.1 → 0.7.0

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

@@ -1,12 +1,12 @@
 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 { 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 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";
+import { computed as a, toValue as ee, useAttrs as o } from "vue";
+import { get as s, isNumber 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 w } from "@bridge-ui/core/Utils";
 //#region src/Components/TimePanel/composables/useTimePanel.ts
-var C = [
+var T = [
 	"ampm",
 	"fill",
 	"color",
@@ -23,171 +23,171 @@ var C = [
 	"customProps",
 	"showSeconds",
 	"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,
+], E = "w-[3.75rem]", D = "min-w-[3.75rem]";
+function O(E, O, k) {
+	let A = o(), j = e(), M = t(), N = a(() => w({
+		bridgeKeys: T,
 		props: {
-			...O,
-			...o(w)
+			...A,
+			...ee(E)
 		}
-	})), { merged: M, entry: N } = r({
-		libDefaults: E,
+	})), { merged: P, entry: F } = r({
+		libDefaults: O,
 		componentName: "TimePanel",
-		props: () => j.value.componentProps
-	}), P = a(() => M.value.customProps), F = a(() => l(j.value.inheritedAttrs, ["onChange"])), I = i({
-		props: () => j.value.componentProps,
+		props: () => N.value.componentProps
+	}), I = a(() => P.value.customProps), L = a(() => l(N.value.inheritedAttrs, ["onChange"])), R = i({
+		props: () => N.value.componentProps,
 		entry: a(() => {})
-	}), L = a(() => A(M.value.timeZone)), R = a(() => {
-		let e = x(v, N.value?.tokens?.rounded);
-		return c(e, M.value.rounded);
-	}), z = a(() => {
-		let e = x(_, N.value?.tokens?.color);
-		return b({
+	}), z = a(() => M(P.value.timeZone)), B = a(() => {
+		let e = C(b, F.value?.tokens?.rounded);
+		return s(e, P.value.rounded);
+	}), V = a(() => {
+		let e = C(y, F.value?.tokens?.color);
+		return S({
 			tokens: e,
-			color: M.value.color,
-			invalid: M.value.error
+			color: P.value.color,
+			invalid: P.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: 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 ? 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, L.value);
-		G(t);
+	}), H = a(() => {
+		let e = P.value.value ?? j.value.now(z.value), t = h(j.value.getMinutes(e, z.value), P.value.interval), n = P.value.showSeconds ? j.value.getSeconds(e, z.value) : 0, r = j.value.setHours(e, j.value.getHours(e, z.value), z.value);
+		return r = j.value.setMinutes(r, t, z.value), r = j.value.setSeconds(r, n, z.value), r;
+	}), te = a(() => u({ ampm: P.value.ampm })), U = a(() => d({ interval: P.value.interval })), W = a(() => f()), G = a(() => v(j.value.getHours(H.value, z.value))), K = (e) => !!P.value.disabled || p(e, {
+		adapter: j.value,
+		context: z.value,
+		maxTime: P.value.maxTime,
+		minTime: P.value.minTime,
+		disableTimes: P.value.disableTimes
+	}), q = (e) => {
+		P.value.disabled || P.value.readOnly || K(e) || k("change", e);
 	}, J = (e) => {
-		let t = k.value.setSeconds(B.value, e, L.value);
-		G(t);
+		let t = P.value.ampm ? _(e, G.value) : e, n = j.value.setHours(H.value, t, z.value);
+		n = j.value.setMinutes(n, j.value.getMinutes(H.value, z.value), z.value), q(n);
 	}, Y = (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), G(r);
-	}, X = a(() => {
-		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;
+		let t = j.value.setMinutes(H.value, e, z.value);
+		q(t);
+	}, X = (e) => {
+		let t = j.value.setSeconds(H.value, e, z.value);
+		q(t);
+	}, Z = (e) => {
+		let t = g(j.value.getHours(H.value, z.value)), n = _(t, e), r = j.value.setHours(H.value, n, z.value);
+		r = j.value.setMinutes(r, j.value.getMinutes(H.value, z.value), z.value), q(r);
+	}, Q = a(() => {
+		let e = j.value.getHours(H.value, z.value), t = P.value.ampm ? g(e) : e;
+		return te.value.map((e) => {
+			let n = P.value.ampm ? _(e, G.value) : e, r = j.value.setHours(H.value, n, z.value);
+			r = j.value.setMinutes(r, j.value.getMinutes(H.value, z.value), z.value);
+			let i = K(r), a = e === t;
 			return {
 				state: m({
 					disabled: i,
 					selected: a,
-					readOnly: M.value.readOnly
+					readOnly: P.value.readOnly
 				}),
 				selected: a,
 				value: e,
-				disabled: i || !!M.value.readOnly,
-				label: M.value.ampm ? String(e) : String(e).padStart(2, "0")
+				disabled: i || !!P.value.readOnly,
+				label: P.value.ampm ? String(e) : String(e).padStart(2, "0")
 			};
 		});
-	}), Z = a(() => {
-		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;
+	}), ne = a(() => {
+		let e = j.value.getMinutes(H.value, z.value);
+		return U.value.map((t) => {
+			let n = j.value.setMinutes(H.value, t, z.value), r = K(n), i = t === e;
 			return {
 				state: m({
 					disabled: r,
 					selected: i,
-					readOnly: M.value.readOnly
+					readOnly: P.value.readOnly
 				}),
 				selected: i,
 				value: t,
 				label: String(t).padStart(2, "0"),
-				disabled: r || !!M.value.readOnly
+				disabled: r || !!P.value.readOnly
 			};
 		});
 	}), re = a(() => {
-		if (!M.value.showSeconds) return [];
-		let e = k.value.getSeconds(B.value, L.value);
-		return H.value.map((t) => {
-			let n = k.value.setSeconds(B.value, t, L.value), r = W(n), i = t === e;
+		if (!P.value.showSeconds) return [];
+		let e = j.value.getSeconds(H.value, z.value);
+		return W.value.map((t) => {
+			let n = j.value.setSeconds(H.value, t, z.value), r = K(n), i = t === e;
 			return {
 				state: m({
 					disabled: r,
 					selected: i,
-					readOnly: M.value.readOnly
+					readOnly: P.value.readOnly
 				}),
 				selected: i,
 				value: t,
 				label: String(t).padStart(2, "0"),
-				disabled: r || !!M.value.readOnly
+				disabled: r || !!P.value.readOnly
 			};
 		});
-	}), 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;
+	}), ie = a(() => P.value.ampm ? ["AM", "PM"].map((e) => {
+		let t = g(j.value.getHours(H.value, z.value)), n = _(t, e), r = j.value.setHours(H.value, n, z.value);
+		r = j.value.setMinutes(r, j.value.getMinutes(H.value, z.value), z.value);
+		let i = K(r), a = e === G.value;
 		return {
 			state: m({
 				disabled: i,
 				selected: a,
-				readOnly: M.value.readOnly
+				readOnly: P.value.readOnly
 			}),
 			selected: a,
 			label: e,
 			value: e,
-			disabled: i || !!M.value.readOnly
+			disabled: i || !!P.value.readOnly
 		};
-	}) : []), ae = a(() => n(P.value?.root, F.value, y({
+	}) : []), ae = a(() => n(I.value?.root, L.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,
-		[I.value.root ?? ""]: !0
-	}))), Q = a(() => n(P.value?.column, {}, y({
+		"w-full min-w-fit": P.value.fill,
+		"w-fit min-w-fit": !P.value.fill,
+		[R.value.root ?? ""]: !0
+	}))), oe = a(() => n(I.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 bridge-scroll-fade-y bridge-hide-scrollbar": !0,
-		[T]: !0,
-		[I.value.column ?? ""]: !0
+		[D]: !0,
+		[R.value.column ?? ""]: !0
 	}))), $ = (e, t, r) => {
-		let i = z.value;
-		return n(P.value?.item, {
+		let i = V.value;
+		return n(I.value?.item, {
 			type: "button",
 			"aria-label": r,
 			disabled: e.disabled,
 			"aria-pressed": e.selected,
 			onClick: () => t(e.value)
-		}, y({
+		}, x({
 			"w-full cursor-pointer px-3 py-2 text-sm transition-colors 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,
+			[B.value ?? ""]: !0,
 			[i?.base ?? ""]: e.state === "base" || e.state === "hover",
 			[i?.hover ?? ""]: e.state === "base" || e.state === "hover",
 			[i?.selected ?? ""]: e.state === "selected",
 			[i?.disabled ?? ""]: e.state === "disabled",
-			[I.value.item ?? ""]: !0
+			[R.value.item ?? ""]: !0
 		}));
-	}, oe = (e) => $(e, (e) => {
-		typeof e == "number" && K(e);
-	}, `Hour ${e.label}`), se = (e) => $(e, (e) => {
-		typeof e == "number" && q(e);
-	}, `Minute ${e.label}`), ce = (e) => $(e, (e) => {
-		typeof e == "number" && J(e);
-	}, `Second ${e.label}`), le = (e) => $(e, (e) => {
-		(e === "AM" || e === "PM") && Y(e);
-	}, String(e.label)), ue = a(() => !!M.value.ampm);
+	}, se = (e) => $(e, (e) => {
+		c(e) && J(e);
+	}, `Hour ${e.label}`), ce = (e) => $(e, (e) => {
+		c(e) && Y(e);
+	}, `Minute ${e.label}`), le = (e) => $(e, (e) => {
+		c(e) && X(e);
+	}, `Second ${e.label}`), ue = (e) => $(e, (e) => {
+		(e === "AM" || e === "PM") && Z(e);
+	}, String(e.label)), de = a(() => !!P.value.ampm);
 	return {
-		merged: M,
+		merged: P,
 		rootBind: ae,
-		hourItems: X,
-		columnBind: Q,
-		getHourBind: oe,
-		minuteItems: Z,
+		hourItems: Q,
+		columnBind: oe,
+		getHourBind: se,
+		minuteItems: ne,
 		secondItems: re,
-		displayDate: B,
-		showSeconds: a(() => !!M.value.showSeconds),
-		showMeridiem: ue,
-		getMinuteBind: se,
-		getSecondBind: ce,
+		displayDate: H,
+		showSeconds: a(() => !!P.value.showSeconds),
+		showMeridiem: de,
+		getMinuteBind: ce,
+		getSecondBind: le,
 		meridiemItems: ie,
-		getMeridiemBind: le
+		getMeridiemBind: ue
 	};
 }
 //#endregion
-export { T as TIME_PANEL_COLUMN_MIN_WIDTH_CLASS, w as TIME_PANEL_COLUMN_WIDTH_CLASS, E as useTimePanel };
+export { D as TIME_PANEL_COLUMN_MIN_WIDTH_CLASS, E as TIME_PANEL_COLUMN_WIDTH_CLASS, O as useTimePanel };

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

@@ -442,7 +442,6 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -460,6 +459,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;

package/dist/augments.d.ts

@@ -3,6 +3,7 @@ import { AutocompleteClasses, AutocompleteProps } from './Components/Autocomplet
 import { AvatarClasses, AvatarProps } from './Components/Avatar';
 import { BadgeClasses, BadgeProps } from './Components/Badge';
 import { ButtonClasses, ButtonProps } from './Components/Button';
+import { ButtonGroupClasses, ButtonGroupProps } from './Components/ButtonGroup';
 import { CardClasses, CardProps } from './Components/Card';
 import { CheckboxClasses, CheckboxProps } from './Components/Checkbox';
 import { ChipClasses, ChipProps } from './Components/Chip';
@@ -51,6 +52,10 @@ declare module "@bridge-ui/core/Config" {
         classes: ButtonClasses;
         defaultProps: Partial<Pick<ButtonProps, "size" | "color" | "density" | "rounded" | "variant">>;
     }
+    interface ButtonGroupConfigOverrides {
+        classes: ButtonGroupClasses;
+        defaultProps: Partial<Pick<ButtonGroupProps, "full" | "size" | "color" | "density" | "rounded" | "variant" | "separator" | "orientation">>;
+    }
     interface CardConfigOverrides {
         classes: CardClasses;
         defaultProps: Partial<Pick<CardProps, "shadow" | "padding" | "rounded" | "variant">>;

package/dist/index.d.ts

@@ -22,6 +22,8 @@ export { BreadcrumbItem, useBreadcrumbItem } from './Components/BreadcrumbItem';
 export type { BreadcrumbItemClasses, BreadcrumbItemCustomProps, BreadcrumbItemOwnProps, BreadcrumbItemProps, BreadcrumbItemSlots, } from './Components/BreadcrumbItem';
 export { Button, useButton } from './Components/Button';
 export type { ButtonClasses, ButtonColorOverrides, ButtonDensityOverrides, ButtonProps, ButtonRoundedOverrides, ButtonSizeOverrides, ButtonSlots, ButtonVariantOverrides, } from './Components/Button';
+export { BUTTON_GROUP_INJECTION_KEY, ButtonGroup, useButtonGroup, } from './Components/ButtonGroup';
+export type { ButtonGroupClasses, ButtonGroupContextValue, ButtonGroupCustomProps, ButtonGroupOrientationOverrides, ButtonGroupOwnProps, ButtonGroupProps, ButtonGroupSlots, } from './Components/ButtonGroup';
 export { Calendar, useCalendar } from './Components/Calendar';
 export type { CalendarClasses, CalendarColorOverrides, CalendarCustomProps, CalendarEmits, CalendarOwnProps, CalendarProps, CalendarRoundedOverrides, CalendarSlots, CalendarView, } from './Components/Calendar';
 export { CalendarDate, useCalendarDate } from './Components/CalendarDate';
@@ -152,6 +154,6 @@ export { BridgeUIProvider, createBridgeUI, useBridgeUI } from './Provider';
 export type { BridgeUIContextApi } from './Provider';
 export { useBreakpoint, useBridgeUIComponent, useBridgeUIMergedRegistryClasses, } from './Utils';
 export type { UseBreakpointOptions } from './Utils';
-export { SEMANTIC_ICON_NAMES, resolveMessage, type I18nAdapter, type IconAdapter, type SemanticIconNameOverrides, } from '@bridge-ui/core/Adapters';
+export { SEMANTIC_ICON_NAMES, interpolateMessage, resolveMessage, selectPluralMessage, type I18nAdapter, type IconAdapter, type SemanticIconNameOverrides, } from '@bridge-ui/core/Adapters';
 export { BRIDGE_UI_DEFAULT_GLOBAL, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, } from '@bridge-ui/core/Config';
 export { cn } from '@bridge-ui/core/Utils';