@bridge-ui/vue 0.0.1-beta.6 → 0.0.1-beta.7

package/dist/Components/List/composables/useList.js

@@ -30,7 +30,7 @@ function f(f) {
 	return {
 		merged: h,
 		rootBind: i(() => e(_.value?.root, y.value, l({
-			"m-0 list-none py-2": !0,
+			"m-0 list-none py-2 text-dark-900 dark:text-dark-100": !0,
 			"pl-4": h.value.nested,
 			[s(v.value, "root") ?? ""]: !0
 		})))

package/dist/Components/ListItem/composables/useListItem.js

@@ -56,7 +56,7 @@ function C(t, n, C) {
 	}), B = l(() => "dense" in (u()?.vnode.props ?? {}) ? t.dense === !0 : t.dense === !0 ? !0 : T ? p(T).dense : !1), V = l(() => e(C, "primary") || e(C, "default") || !!k.value.primary), H = l(() => e(C, "secondary") || !!k.value.secondary), U = l(() => e(C, "start")), W = l(() => P.value ? !F.value || !j.value?.showCheckmark ? null : x : !k.value.selected || _(k.value.selectedIcon) ? null : k.value.selectedIcon ?? x), G = l(() => e(C, "end") || W.value != null), K = l(() => v(O.value.inheritedAttrs, [])), q = l(() => r(R.value?.root, K.value, {
 		class: y({
 			"list-none": !0,
-			"border-b border-black/10 last:border-b-0": k.value.divider,
+			"border-b border-black/10 last:border-b-0 dark:border-white/10": k.value.divider,
 			[g(z.value, "root") ?? ""]: !0
 		}),
 		id: P.value && j.value?.listboxId && I.value >= 0 ? s(j.value.listboxId, I.value) : void 0
@@ -73,13 +73,13 @@ function C(t, n, C) {
 			M.value && j.value?.onSelect(M.value);
 		} : void 0,
 		class: y({
-			"flex w-full min-w-0 items-center gap-x-3 text-left outline-hidden transition-colors": !0,
+			"flex w-full min-w-0 items-center gap-x-3 text-left text-dark-900 outline-hidden transition-colors dark:text-dark-100": !0,
 			"cursor-pointer select-none": !k.value.disabled,
 			"px-4": !0,
 			"py-2": !B.value,
 			"py-1.5": B.value,
-			"hover:bg-black/5 focus-visible:bg-black/5": !k.value.disabled && !P.value,
-			"bg-primary-50 text-primary-700": k.value.selected && !P.value,
+			"hover:bg-black/5 focus-visible:bg-black/5 dark:hover:bg-white/10 dark:focus-visible:bg-white/10": !k.value.disabled && !P.value,
+			"bg-dark-100 font-medium text-dark-900 dark:bg-white/15 dark:text-white": k.value.selected && !P.value,
 			[j.value?.optionSelectedClass ?? ""]: P.value && F.value,
 			[j.value?.mergedClasses.optionSelected ?? ""]: P.value && F.value,
 			[j.value?.optionHighlightedClass ?? ""]: P.value && L.value && !F.value,
@@ -90,17 +90,17 @@ function C(t, n, C) {
 		})
 	}) : null), Y = l(() => y({
 		"flex w-full min-w-0 gap-x-3": !0,
-		"items-center": !k.value.interactive,
+		"items-center text-dark-900 dark:text-dark-100": !k.value.interactive,
 		"px-4": !k.value.interactive,
 		"py-2": !k.value.interactive && !B.value,
 		"py-1.5": !k.value.interactive && B.value
 	})), X = l(() => r(R.value?.start, {}, y({
-		"flex shrink-0": !0,
+		"flex shrink-0 text-dark-600 dark:text-dark-300": !0,
 		[g(z.value, "start") ?? ""]: !0
 	}))), Z = l(() => r(R.value?.content, {}, y({
 		"min-w-0 flex-1": !0,
 		[g(z.value, "content") ?? ""]: !0
-	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
+	}))), Q = l(() => r(R.value?.primary, {}, y("block truncate text-sm font-medium", j.value?.sizeClasses?.primary, g(z.value, "primary")))), $ = l(() => r(R.value?.secondary, {}, y("mt-0.5 block truncate text-xs text-dark-500 dark:text-dark-400", j.value?.sizeClasses?.secondary, g(z.value, "secondary"))));
 	return {
 		merged: k,
 		hasEnd: G,

package/dist/Components/ListSection/composables/useListSection.js

@@ -32,13 +32,13 @@ function m(m, h) {
 		merged: y,
 		rootBind: a(() => t(x.value?.root, T.value, d({
 			"list-none": !0,
-			"sticky top-0 z-10 bg-white dark:bg-dark-950": y.value.sticky && !E.value,
+			"sticky top-0 z-10 bg-white dark:bg-dark-800": y.value.sticky && !E.value,
 			[l(S.value, "root") ?? ""]: !0
 		}))),
 		titleBind: a(() => t(x.value?.title, {}, {
 			role: "presentation",
 			class: d({
-				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-950 dark:text-dark-400": !0,
+				"bg-white px-4 text-xs font-semibold tracking-wide text-dark-500 uppercase dark:bg-dark-800 dark:text-dark-300": !0,
 				"sticky top-0 z-10": y.value.sticky && E.value,
 				"py-2": !C.value,
 				"py-1.5": C.value,

package/dist/Components/Listbox/Listbox.vue_vue_type_script_setup_true_lang.js

@@ -2,16 +2,17 @@ import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp
 import n from "../List/List.js";
 import { useListbox as r } from "./composables/useListbox.js";
 import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
-import ee from "../ListItem/ListItem.js";
-import a from "../ListSection/ListSection.js";
-import te from "../Menu/Menu.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as ne, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeModels as h, mergeProps as g, normalizeClass as re, normalizeProps as _, openBlock as v, provide as ie, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useModel as T, useSlots as E, watch as D, withCtx as O } from "vue";
-import { cn as k, entriesFromListboxOptions as A, flattenListboxOptions as j, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
+import a from "../ListItem/ListItem.js";
+import o from "../ListSection/ListSection.js";
+import s from "../Menu/Menu.js";
+import ee from "../Progress/Progress.js";
+import { Fragment as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as te, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, provide as S, ref as C, renderList as ne, renderSlot as w, resolveDynamicComponent as T, toDisplayString as E, unref as D, useModel as O, useSlots as k, watch as A, withCtx as j } from "vue";
+import { cn as M, entriesFromListboxOptions as re, flattenListboxOptions as ie, mapListboxEntriesToRows as ae } from "@bridge-ui/core";
 import { Check as oe } from "@lucide/vue";
 //#region src/Components/Listbox/Listbox.vue?vue&type=script&setup=true&lang.ts
-var se = { key: 1 }, M = /* @__PURE__ */ p({
+var se = { key: 1 }, N = /* @__PURE__ */ h({
 	__name: "Listbox",
-	props: /* @__PURE__ */ h({
+	props: /* @__PURE__ */ _({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -56,96 +57,107 @@ var se = { key: 1 }, M = /* @__PURE__ */ p({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ h([
+	emits: /* @__PURE__ */ _([
 		"registered-options-change",
 		"select",
 		"show-change"
 	], ["update:modelValue"]),
-	setup(p, { emit: h }) {
-		let M = E(), N = h, P = T(p, "modelValue");
-		D(P, (e) => {
-			N("show-change", e);
+	setup(h, { emit: _ }) {
+		let N = k(), P = _, F = O(h, "modelValue");
+		A(F, (e) => {
+			P("show-change", e);
 		});
-		let F = p, { merged: I, checkClass: L, scrollBind: R, messageBind: z, loadingBind: B, sizeClasses: V, mergedClasses: H, loadingTrackBind: U, optionSelectedClass: W, optionHighlightedClass: G } = r(F, {
+		let I = h, { merged: L, checkClass: R, scrollBind: z, messageBind: B, sizeClasses: V, mergedClasses: H, optionSelectedClass: U, optionHighlightedClass: W } = r(I, {
 			size: "md",
 			color: "primary"
-		}), ce = s(() => F.options ?? []), K = s(() => F.entries ? F.entries : A(ce.value)), q = s(() => j(K.value)), J = s(() => e(M, "default")), Y = s(() => !F.loading && !J.value && q.value.length === 0 && F.hideEmptyMessage !== !0), X = s(() => k(L.value, H.value.check)), Z = y([]);
+		}), G = l(() => I.options ?? []), K = l(() => I.entries ? I.entries : re(G.value)), q = l(() => ie(K.value)), J = l(() => e(N, "default")), Y = l(() => !I.loading && !J.value && q.value.length === 0 && I.hideEmptyMessage !== !0), X = l(() => M(R.value, H.value.check)), Z = C([]);
 		function Q(e) {
-			return F.isSelected?.(e) ?? !1;
+			return I.isSelected?.(e) ?? !1;
 		}
-		function le(e) {
-			return F.highlightedIndex === e;
+		function ce(e) {
+			return I.highlightedIndex === e;
 		}
-		function ue(e) {
+		function le(e) {
 			e.preventDefault();
 		}
-		function de(e, t) {
+		function ue(e, t) {
 			let n = {
 				tabindex: -1,
-				onMousedown: ue,
-				class: k(V.value?.option)
+				onMousedown: le,
+				class: M(V.value?.option)
 			};
-			return Q(e.value) ? n.class = k(n.class, W.value, H.value.optionSelected) : le(t) && (n.class = k(n.class, G.value, H.value.optionHighlighted)), {
+			return Q(e.value) ? n.class = M(n.class, U.value, H.value.optionSelected) : ce(t) && (n.class = M(n.class, W.value, H.value.optionHighlighted)), {
 				interactive: n,
 				primary: { class: V.value?.primary },
 				secondary: { class: V.value?.secondary }
 			};
 		}
 		function $(e) {
-			e.disabled || N("select", e);
+			e.disabled || P("select", e);
 		}
-		function fe(e) {
+		function de(e) {
 			return Z.value.some((t) => String(t.value) === String(e.value)) || (Z.value = [...Z.value, e]), () => {
 				Z.value = Z.value.filter((t) => String(t.value) !== String(e.value));
 			};
 		}
-		function pe(e) {
+		function fe(e) {
 			return (J.value ? Z.value : q.value).findIndex((t) => String(t.value) === String(e));
 		}
-		D(Z, (e) => {
-			J.value && N("registered-options-change", e);
-		}, { deep: !0 }), ie(i, s(() => ({
-			getOptionIndex: pe,
-			registerOption: fe,
+		A(Z, (e) => {
+			J.value && P("registered-options-change", e);
+		}, { deep: !0 }), S(i, l(() => ({
+			getOptionIndex: fe,
+			registerOption: de,
 			onSelect: $,
-			listboxId: F.listboxId,
+			listboxId: I.listboxId,
 			isSelected: Q,
 			sizeClasses: V.value,
-			showCheckmark: F.showCheckmark,
+			showCheckmark: I.showCheckmark,
 			checkClass: X.value,
-			highlightedIndex: F.highlightedIndex,
-			optionSelectedClass: W.value,
-			optionHighlightedClass: G.value,
+			highlightedIndex: I.highlightedIndex,
+			optionSelectedClass: U.value,
+			optionHighlightedClass: W.value,
 			mergedClasses: {
 				optionSelected: H.value.optionSelected,
 				optionHighlighted: H.value.optionHighlighted
 			}
 		})));
-		let me = s(() => ae(K.value, Q));
-		return (r, i) => (v(), c(w(te), {
-			modelValue: P.value,
-			"onUpdate:modelValue": i[0] ||= (e) => P.value = e,
-			"anchor-el": p.anchorEl,
-			placement: p.placement,
+		let pe = l(() => ae(K.value, Q));
+		return (r, i) => (x(), u(D(s), {
+			modelValue: F.value,
+			"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
+			"anchor-el": h.anchorEl,
+			placement: h.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": p.disableAutoFocus,
-			"custom-props": { content: w(I).customProps?.content }
+			"disable-auto-focus": h.disableAutoFocus,
+			"custom-props": { content: D(L).customProps?.content }
 		}, {
-			default: O(() => [
-				w(e)(w(M), "beforeOptions") ? (v(), c(S(w(t)(w(M), "beforeOptions")), { key: 0 })) : l("", !0),
-				p.loading ? (v(), u(o, { key: 1 }, [d("div", _(m(w(U))), [d("div", _(m(w(B))), null, 16)], 16), d("div", _(m(w(z))), [w(e)(w(M), "loading") ? (v(), c(S(w(t)(w(M), "loading")), { key: 0 })) : (v(), u("span", se, C(p.loadingMessage), 1))], 16)], 64)) : (v(), u("div", _(g({ key: 2 }, w(R))), [f(w(n), {
+			default: j(() => [
+				D(e)(D(N), "beforeOptions") ? (x(), u(T(D(t)(D(N), "beforeOptions")), { key: 0 })) : d("", !0),
+				h.loading ? (x(), f(c, { key: 1 }, [m(D(ee), {
+					size: "xs",
+					"aria-hidden": "",
+					class: "shrink-0",
+					color: D(L).color,
+					classes: { bar: D(H).loading },
+					"custom-props": { bar: D(L).customProps?.loading }
+				}, null, 8, [
+					"color",
+					"classes",
+					"custom-props"
+				]), p("div", b(g(D(B))), [D(e)(D(N), "loading") ? (x(), u(T(D(t)(D(N), "loading")), { key: 0 })) : (x(), f("span", se, E(h.loadingMessage), 1))], 16)], 64)) : (x(), f("div", b(v({ key: 2 }, D(z))), [m(D(n), {
 					dense: "",
 					class: "p-0",
 					role: "listbox",
-					id: p.listboxId,
-					"aria-labelledby": p.labelledBy,
-					"aria-multiselectable": p.multiple || void 0
+					id: h.listboxId,
+					"aria-labelledby": h.labelledBy,
+					"aria-multiselectable": h.multiple || void 0
 				}, {
-					default: O(() => [J.value ? x(r.$slots, "default", { key: 0 }) : (v(!0), u(o, { key: 1 }, b(me.value, (t) => (v(), u(o, { key: t.key }, [t.kind === "section" ? (v(), c(w(a), {
+					default: j(() => [J.value ? w(r.$slots, "default", { key: 0 }) : (x(!0), f(c, { key: 1 }, ne(pe.value, (t) => (x(), f(c, { key: t.key }, [t.kind === "section" ? (x(), u(D(o), {
 						key: 0,
 						title: t.title,
 						sticky: t.sticky
-					}, null, 8, ["title", "sticky"])) : (v(), c(w(ee), {
+					}, null, 8, ["title", "sticky"])) : (x(), u(D(a), {
 						key: 1,
 						interactive: "",
 						role: "option",
@@ -154,19 +166,19 @@ var se = { key: 1 }, M = /* @__PURE__ */ p({
 						disabled: t.option.disabled,
 						secondary: t.option.description,
 						onClick: (e) => $(t.option),
-						id: `${p.listboxId}-option-${t.index}`,
-						"custom-props": de(t.option, t.index),
-						primary: w(e)(w(M), "option") ? void 0 : t.option.label
-					}, ne({ _: 2 }, [w(e)(w(M), "option") ? {
+						id: `${h.listboxId}-option-${t.index}`,
+						"custom-props": ue(t.option, t.index),
+						primary: D(e)(D(N), "option") ? void 0 : t.option.label
+					}, te({ _: 2 }, [D(e)(D(N), "option") ? {
 						name: "default",
-						fn: O(() => [x(r.$slots, "option", {
+						fn: j(() => [w(r.$slots, "option", {
 							option: t.option,
 							selected: t.selected
 						})]),
 						key: "0"
-					} : void 0, p.showCheckmark && t.selected ? {
+					} : void 0, h.showCheckmark && t.selected ? {
 						name: "end",
-						fn: O(() => [f(w(oe), { class: re(X.value) }, null, 8, ["class"])]),
+						fn: j(() => [m(D(oe), { class: y(X.value) }, null, 8, ["class"])]),
 						key: "1"
 					} : void 0]), 1032, [
 						"aria-selected",
@@ -183,8 +195,8 @@ var se = { key: 1 }, M = /* @__PURE__ */ p({
 					"aria-labelledby",
 					"aria-multiselectable"
 				])], 16)),
-				Y.value && !w(e)(w(M), "empty") ? (v(), u("div", _(g({ key: 3 }, w(z))), C(p.emptyMessage), 17)) : Y.value && w(e)(w(M), "empty") ? (v(), c(S(w(t)(w(M), "empty")), { key: 4 })) : l("", !0),
-				w(e)(w(M), "afterOptions") ? (v(), c(S(w(t)(w(M), "afterOptions")), { key: 5 })) : l("", !0)
+				Y.value && !D(e)(D(N), "empty") ? (x(), f("div", b(v({ key: 3 }, D(B))), E(h.emptyMessage), 17)) : Y.value && D(e)(D(N), "empty") ? (x(), u(T(D(t)(D(N), "empty")), { key: 4 })) : d("", !0),
+				D(e)(D(N), "afterOptions") ? (x(), u(T(D(t)(D(N), "afterOptions")), { key: 5 })) : d("", !0)
 			]),
 			_: 3
 		}, 8, [
@@ -197,4 +209,4 @@ var se = { key: 1 }, M = /* @__PURE__ */ p({
 	}
 });
 //#endregion
-export { M as default };
+export { N as default };

package/dist/Components/Listbox/composables/useListbox.d.ts

@@ -8,13 +8,8 @@ export declare function useListbox(props: ListboxOwnProps, libDefaults: ListboxL
     checkClass: import('vue').ComputedRef<string>;
     scrollBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     messageBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
-    loadingBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core').ListboxSizeItem | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<ListboxClasses>>;
-    loadingTrackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {
-        role: string;
-        "aria-hidden": boolean;
-    }>>;
     optionSelectedClass: import('vue').ComputedRef<string | undefined>;
     optionHighlightedClass: import('vue').ComputedRef<string | undefined>;
 };

package/dist/Components/Listbox/composables/useListbox.js

@@ -27,33 +27,24 @@ function p(p, m) {
 	}), y = n({
 		entry: v,
 		props: () => g.value.componentProps
-	}), b = r(() => a(s(l, v.value?.customProps?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.customProps?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.customProps?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted), E = r(() => o(C.value?.check, S.value?.check)), D = r(() => {
-		let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
-		return e(_.value.customProps?.scroll, {}, o({
-			"overflow-y-auto overscroll-contain": !n,
-			[t]: !n,
-			[y.value.scroll ?? ""]: !0
-		}));
-	}), O = r(() => e({}, {
-		role: "progressbar",
-		"aria-hidden": !0
-	}, o({ "h-0.5 w-full shrink-0 overflow-hidden": !0 }))), k = r(() => e(_.value.customProps?.loading, {}, o({
-		"h-full w-1/3 animate-bridge-listbox-indeterminate": !0,
-		[b.value?.progressColor ?? ""]: !0,
-		[y.value.loading ?? ""]: !0
-	})));
+	}), b = r(() => a(s(l, v.value?.customProps?.color), _.value.color ?? "primary")), x = r(() => s(u, v.value?.customProps?.invalidated)), S = r(() => _.value.invalidated ? x.value : b.value), C = r(() => a(s(d, v.value?.customProps?.size), _.value.size ?? "md")), w = r(() => S.value?.selected), T = r(() => S.value?.highlighted);
 	return {
 		merged: _,
-		checkClass: E,
-		scrollBind: D,
+		checkClass: r(() => o(C.value?.check, S.value?.check)),
+		scrollBind: r(() => {
+			let t = _.value.maxHeight ?? "max-h-60", n = _.value.disableMaxHeight === !0;
+			return e(_.value.customProps?.scroll, {}, o({
+				"overflow-y-auto overscroll-contain": !n,
+				[t]: !n,
+				[y.value.scroll ?? ""]: !0
+			}));
+		}),
 		messageBind: r(() => e({}, {}, o({
 			"text-gray-500": !0,
 			[C.value?.message ?? ""]: !0
 		}))),
-		loadingBind: k,
 		sizeClasses: C,
 		mergedClasses: y,
-		loadingTrackBind: O,
 		optionSelectedClass: w,
 		optionHighlightedClass: T
 	};

package/dist/Components/Listbox/listbox.types.d.ts

@@ -8,7 +8,7 @@ export interface ListboxClasses {
      */
     check?: string;
     /**
-     * Classes merged onto the indeterminate loading progress bar.
+     * Classes forwarded to the loading `Progress` bar.
      */
     loading?: string;
     /**
@@ -30,7 +30,7 @@ export interface ListboxCustomProps {
      */
     content?: HTMLAttributes;
     /**
-     * Props forwarded to the indeterminate loading progress bar.
+     * Props forwarded to the loading `Progress` bar.
      */
     loading?: HTMLAttributes;
     /**

package/dist/Components/Menu/composables/useMenu.js

@@ -161,7 +161,7 @@ function y(y, le, b = {}) {
 		style: { zIndex: N.value },
 		"aria-hidden": V.value ? !0 : void 0,
 		class: f({
-			"bg-white ring-1 ring-black/5 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
+			"bg-white text-dark-900 dark:bg-dark-800 dark:text-dark-100 ring-1 ring-black/5 dark:ring-white/10 outline-hidden overflow-hidden min-w-32 w-max max-w-[calc(100vw-16px)]": !0,
 			"invisible pointer-events-none": V.value,
 			[de.value ?? ""]: !0,
 			[fe.value ?? ""]: !0,

package/dist/Components/Progress/Progress.js

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

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

@@ -0,0 +1,4 @@
+import { ProgressOwnProps } from './progress.types';
+declare const __VLS_export: import('vue').DefineComponent<ProgressOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ProgressOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/Progress/Progress.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,32 @@
+import { useProgress as e } from "./composables/useProgress.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, unref as l } from "vue";
+//#region src/Components/Progress/Progress.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "Progress",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		rounded: {},
+		size: {},
+		value: {},
+		valueBuffer: {},
+		variant: {}
+	},
+	setup(i) {
+		let { barBind: u, isBuffer: d, rootBind: f, trackBind: p, bufferBind: m } = e(i, {
+			size: "md",
+			rounded: "full",
+			color: "primary",
+			variant: "indeterminate"
+		});
+		return (e, i) => (c(), n("div", s(a(l(f))), [
+			r("div", s(a(l(p))), null, 16),
+			l(d) && l(m) ? (c(), n("div", s(o({ key: 0 }, l(m))), null, 16)) : t("", !0),
+			r("div", s(a(l(u))), null, 16)
+		], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/Components/Progress/composables/useProgress.d.ts

@@ -0,0 +1,29 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { ProgressOwnProps, ProgressProps } from '../progress.types';
+type ProgressLibDefaults = LibDefaultsShape<ProgressOwnProps, "size" | "color" | "rounded" | "variant">;
+type ProgressMerged = MergeLibDefaults<ProgressOwnProps, ProgressLibDefaults>;
+export declare function useProgress(props: ProgressOwnProps, libDefaults: ProgressLibDefaults): {
+    merged: import('vue').ComputedRef<ProgressMerged>;
+    barBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        style: {
+            width: string;
+        };
+    } | {
+        style?: undefined;
+    }>>;
+    isBuffer: import('vue').ComputedRef<boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        role: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ProgressProps, "color" | "size" | "value" | "classes" | "customProps" | "rounded" | "variant" | "valueBuffer">>>;
+    trackBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    bufferBind: import('vue').ComputedRef<(object & {
+        style: {
+            width: string;
+        };
+    } & Record<"class", string>) | null>;
+};
+export {};

package/dist/Components/Progress/composables/useProgress.js

@@ -0,0 +1,75 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i } from "vue";
+import { get as a, isNil as o } from "es-toolkit/compat";
+import { cn as s, mergeBridgeUILayeredClasses as c, splitComponentProps as l } from "@bridge-ui/core";
+import { colorProps as u, roundedProps as d, sizeProps as f, variantProps as p } from "@bridge-ui/core/Components/Progress";
+//#region src/Components/Progress/composables/useProgress.ts
+var m = [
+	"size",
+	"color",
+	"value",
+	"classes",
+	"rounded",
+	"variant",
+	"customProps",
+	"valueBuffer"
+];
+function h(e) {
+	return o(e) || Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+}
+function g(o, g) {
+	let _ = i(), v = r(() => l({
+		props: {
+			..._,
+			...o
+		},
+		bridgeKeys: m
+	})), { merged: y, entry: b } = t({
+		libDefaults: g,
+		componentName: "Progress",
+		props: () => v.value.componentProps
+	}), x = n({
+		entry: b,
+		props: () => v.value.componentProps
+	}), S = r(() => y.value.customProps), C = r(() => a(c(u, b.value?.customProps?.color), y.value.color)), w = r(() => a(c(f, b.value?.customProps?.size), y.value.size)), T = r(() => a(c(d, b.value?.customProps?.rounded), y.value.rounded)), E = r(() => a(c(p, b.value?.customProps?.variant), y.value.variant)), D = r(() => y.value.variant === "buffer"), O = r(() => y.value.variant === "determinate" || y.value.variant === "buffer"), k = r(() => y.value.variant === "indeterminate" || y.value.variant === "query"), A = r(() => h(y.value.value)), j = r(() => h(y.value.valueBuffer)), M = r(() => e(S.value?.root, v.value.inheritedAttrs, {
+		role: "progressbar",
+		...O.value ? {
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": A.value
+		} : {},
+		class: s({
+			"relative w-full overflow-hidden": !0,
+			[w.value ?? ""]: !0,
+			[T.value ?? ""]: !0,
+			[x.value.root ?? ""]: !0
+		})
+	})), N = r(() => e(S.value?.track, {}, s({
+		"absolute inset-0": !0,
+		[C.value?.track ?? ""]: !0,
+		[T.value ?? ""]: !0,
+		[x.value.track ?? ""]: !0
+	}))), P = r(() => D.value ? e(S.value?.buffer, { style: { width: `${j.value}%` } }, s({
+		"absolute top-0 left-0 h-full transition-[width] duration-200 ease-linear": !0,
+		[C.value?.buffer ?? ""]: !0,
+		[T.value ?? ""]: !0,
+		[x.value.buffer ?? ""]: !0
+	})) : null);
+	return {
+		merged: y,
+		barBind: r(() => e(S.value?.bar, O.value ? { style: { width: `${A.value}%` } } : {}, s({
+			"absolute top-0 left-0 h-full": !0,
+			"transition-[width] duration-200 ease-linear": O.value,
+			[E.value ?? ""]: k.value,
+			[C.value?.bar ?? ""]: !0,
+			[T.value ?? ""]: !0,
+			[x.value.bar ?? ""]: !0
+		}))),
+		isBuffer: D,
+		rootBind: M,
+		trackBind: N,
+		bufferBind: P
+	};
+}
+//#endregion
+export { g as useProgress };

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

@@ -0,0 +1,3 @@
+export { useProgress } from './composables/useProgress';
+export type { ProgressClasses, ProgressColorOverrides, ProgressCustomProps, ProgressOwnProps, ProgressProps, ProgressRoundedOverrides, ProgressSizeOverrides, ProgressVariantOverrides, } from './progress.types';
+export { default as Progress } from './Progress.vue';

package/dist/Components/Progress/index.js

@@ -0,0 +1,3 @@
+import { useProgress as e } from "./composables/useProgress.js";
+import t from "./Progress.js";
+export { t as Progress, e as useProgress };

package/dist/Components/Progress/progress.types.d.ts

@@ -0,0 +1,94 @@
+import { HTMLAttributes } from 'vue';
+import { MergeHtmlProps, MergeProps, ProgressColor, ProgressRounded, ProgressSize, ProgressVariant } from '@bridge-ui/core';
+export interface ProgressSizeOverrides {}
+export interface ProgressColorOverrides {}
+export interface ProgressRoundedOverrides {}
+export interface ProgressVariantOverrides {}
+export interface ProgressClasses {
+    /**
+     * The classes to apply to the primary progress bar.
+     */
+    bar?: string;
+    /**
+     * The classes to apply to the buffer bar.
+     */
+    buffer?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the track.
+     */
+    track?: string;
+}
+export interface ProgressCustomProps {
+    /**
+     * Props forwarded to the primary progress bar.
+     */
+    bar?: HTMLAttributes;
+    /**
+     * Props forwarded to the buffer bar.
+     */
+    buffer?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the track element.
+     */
+    track?: HTMLAttributes;
+}
+export interface ProgressOwnProps {
+    /**
+     * The classes to apply to progress parts.
+     *
+     * @default undefined
+     */
+    classes?: ProgressClasses;
+    /**
+     * The color of the progress indicator.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<ProgressColor, ProgressColorOverrides>;
+    /**
+     * Extra props for internal parts (`root`, `track`, `bar`, `buffer`).
+     * Root HTML attributes stay on the component top level.
+     *
+     * @default undefined
+     */
+    customProps?: ProgressCustomProps;
+    /**
+     * The roundedness of the progress bar.
+     *
+     * @default "full"
+     */
+    rounded?: MergeProps<ProgressRounded, ProgressRoundedOverrides>;
+    /**
+     * The height size of the progress bar.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<ProgressSize, ProgressSizeOverrides>;
+    /**
+     * Progress value from 0 to 100. Used by `determinate` and `buffer` variants.
+     *
+     * @default undefined
+     */
+    value?: number;
+    /**
+     * Buffer value from 0 to 100. Used by the `buffer` variant; should be ≥ `value`.
+     *
+     * @default undefined
+     */
+    valueBuffer?: number;
+    /**
+     * Visual variant of the progress indicator.
+     *
+     * @default "indeterminate"
+     */
+    variant?: MergeProps<ProgressVariant, ProgressVariantOverrides>;
+}
+export type ProgressProps = MergeHtmlProps<ProgressOwnProps, HTMLAttributes>;

package/dist/Components/Spinner/Spinner.js

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

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

@@ -0,0 +1,4 @@
+import { SpinnerOwnProps } from './spinner.types';
+declare const __VLS_export: import('vue').DefineComponent<SpinnerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SpinnerOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/Components/Spinner/Spinner.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+import { useSpinner as e } from "./composables/useSpinner.js";
+import { createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, unref as l } from "vue";
+//#region src/Components/Spinner/Spinner.vue?vue&type=script&setup=true&lang.ts
+var u = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "Spinner",
+	props: {
+		classes: {},
+		color: {},
+		customProps: {},
+		disableShrink: { type: Boolean },
+		enableTrack: { type: Boolean },
+		size: {},
+		thickness: {},
+		value: {},
+		variant: {}
+	},
+	setup(i) {
+		let { svgBind: u, rootBind: d, trackBind: f, circleBind: p, enableTrack: m } = e(i, {
+			size: "md",
+			thickness: 3.6,
+			color: "primary",
+			enableTrack: !1,
+			disableShrink: !1,
+			variant: "indeterminate"
+		});
+		return (e, i) => (c(), n("span", s(a(l(d))), [(c(), n("svg", s(a(l(u))), [l(m) && l(f) ? (c(), n("circle", s(o({ key: 0 }, l(f))), null, 16)) : t("", !0), r("circle", s(a(l(p))), null, 16)], 16))], 16));
+	}
+});
+//#endregion
+export { u as default };

package/dist/Components/Spinner/composables/useSpinner.d.ts

@@ -0,0 +1,58 @@
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { SpinnerOwnProps, SpinnerProps } from '../spinner.types';
+type SpinnerLibDefaults = LibDefaultsShape<SpinnerOwnProps, "size" | "color" | "variant" | "thickness" | "enableTrack" | "disableShrink">;
+type SpinnerMerged = MergeLibDefaults<SpinnerOwnProps, SpinnerLibDefaults>;
+export declare function useSpinner(props: SpinnerOwnProps, libDefaults: SpinnerLibDefaults): {
+    merged: import('vue').ComputedRef<SpinnerMerged>;
+    svgBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').SVGAttributes | undefined, {
+        viewBox: string;
+    }>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        role: string;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<SpinnerProps, "color" | "size" | "value" | "classes" | "customProps" | "variant" | "disableShrink" | "enableTrack" | "thickness">>>;
+    trackBind: import('vue').ComputedRef<(object & {
+        cx: number;
+        cy: number;
+        fill: string;
+        r: number;
+        "stroke-width": number;
+    } & Record<"class", string>) | null>;
+    circleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').SVGAttributes | undefined, {
+        r: number;
+        cx: number;
+        cy: number;
+        fill: string;
+        "stroke-width": number;
+        style: {
+            strokeDashoffset: number;
+            strokeDasharray: string;
+            transformOrigin: string;
+            transform: string;
+            transition: string;
+        } | {
+            strokeDashoffset: number;
+            strokeDasharray: number;
+            transformOrigin: string;
+            transform: string;
+            transition: string;
+        } | {
+            strokeDashoffset: number;
+            strokeDasharray: string;
+            transformOrigin?: undefined;
+            transform?: undefined;
+            transition?: undefined;
+        } | {
+            strokeDashoffset?: undefined;
+            strokeDasharray?: undefined;
+            transformOrigin?: undefined;
+            transform?: undefined;
+            transition?: undefined;
+        };
+    }>>;
+    enableTrack: import('vue').ComputedRef<boolean>;
+};
+export {};

package/dist/Components/Spinner/composables/useSpinner.js

@@ -0,0 +1,97 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, useAttrs as i } from "vue";
+import { get as a, isNil as o } from "es-toolkit/compat";
+import { DEFAULT_SPINNER_THICKNESS as s, SPINNER_VIEWBOX_SIZE as c, cn as l, getSpinnerCircleGeometry as u, mergeBridgeUILayeredClasses as d, splitComponentProps as f } from "@bridge-ui/core";
+import { colorProps as p, sizeProps as m, variantProps as h } from "@bridge-ui/core/Components/Spinner";
+//#region src/Components/Spinner/composables/useSpinner.ts
+var g = [
+	"size",
+	"color",
+	"value",
+	"classes",
+	"variant",
+	"thickness",
+	"customProps",
+	"enableTrack",
+	"disableShrink"
+];
+function _(e) {
+	return o(e) || Number.isNaN(e) ? 0 : Math.min(100, Math.max(0, e));
+}
+function v(o, v) {
+	let y = i(), b = r(() => f({
+		props: {
+			...y,
+			...o
+		},
+		bridgeKeys: g
+	})), { merged: x, entry: S } = t({
+		libDefaults: v,
+		componentName: "Spinner",
+		props: () => b.value.componentProps
+	}), C = n({
+		entry: S,
+		props: () => b.value.componentProps
+	}), w = r(() => x.value.customProps), T = r(() => a(d(p, S.value?.customProps?.color), x.value.color)), E = r(() => a(d(m, S.value?.customProps?.size), x.value.size)), D = r(() => a(d(h, S.value?.customProps?.variant), x.value.variant)), O = r(() => x.value.thickness ?? s), k = r(() => x.value.variant === "determinate"), A = r(() => x.value.variant === "indeterminate"), j = r(() => !!x.value.enableTrack), M = r(() => !!x.value.disableShrink), N = r(() => _(x.value.value)), P = r(() => u(O.value)), F = c / 2, I = r(() => e(w.value?.root, b.value.inheritedAttrs, {
+		role: "progressbar",
+		...k.value ? {
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": N.value
+		} : {},
+		class: l({
+			"inline-block": !0,
+			[E.value ?? ""]: !0,
+			[D.value ?? ""]: A.value,
+			[C.value.root ?? ""]: !0
+		})
+	}));
+	return {
+		merged: x,
+		svgBind: r(() => e(w.value?.svg, { viewBox: `0 0 ${c} ${c}` }, l({
+			"block size-full": !0,
+			[C.value.svg ?? ""]: !0
+		}))),
+		rootBind: I,
+		trackBind: r(() => j.value ? e(w.value?.track, {
+			cx: F,
+			cy: F,
+			fill: "none",
+			r: P.value.radius,
+			"stroke-width": O.value
+		}, l({
+			[T.value?.track ?? ""]: !0,
+			[C.value.track ?? ""]: !0
+		})) : null),
+		circleBind: r(() => {
+			let { radius: t, circumference: n } = P.value, r = k.value ? {
+				transformOrigin: "50% 50%",
+				transform: "rotate(-90deg)",
+				strokeDasharray: n,
+				transition: "stroke-dashoffset 200ms linear",
+				strokeDashoffset: (100 - N.value) / 100 * n
+			} : {}, i = A.value ? {
+				strokeDashoffset: 0,
+				strokeDasharray: M.value ? `${n * .8}px, ${n}px` : "80px, 200px"
+			} : {};
+			return e(w.value?.circle, {
+				r: t,
+				cx: F,
+				cy: F,
+				fill: "none",
+				"stroke-width": O.value,
+				style: {
+					...r,
+					...i
+				}
+			}, l({
+				[T.value?.circle ?? ""]: !0,
+				"animate-bridge-spinner-dash": A.value && !M.value,
+				[C.value.circle ?? ""]: !0
+			}));
+		}),
+		enableTrack: j
+	};
+}
+//#endregion
+export { v as useSpinner };

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

@@ -0,0 +1,3 @@
+export { useSpinner } from './composables/useSpinner';
+export type { SpinnerClasses, SpinnerColorOverrides, SpinnerCustomProps, SpinnerOwnProps, SpinnerProps, SpinnerSizeOverrides, SpinnerVariantOverrides, } from './spinner.types';
+export { default as Spinner } from './Spinner.vue';

package/dist/Components/Spinner/index.js

@@ -0,0 +1,3 @@
+import { useSpinner as e } from "./composables/useSpinner.js";
+import t from "./Spinner.js";
+export { t as Spinner, e as useSpinner };

package/dist/Components/Spinner/spinner.types.d.ts

@@ -0,0 +1,99 @@
+import { HTMLAttributes, SVGAttributes } from 'vue';
+import { MergeHtmlProps, MergeProps, SpinnerColor, SpinnerSize, SpinnerVariant } from '@bridge-ui/core';
+export interface SpinnerSizeOverrides {}
+export interface SpinnerColorOverrides {}
+export interface SpinnerVariantOverrides {}
+export interface SpinnerClasses {
+    /**
+     * The classes to apply to the progress circle.
+     */
+    circle?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the svg element.
+     */
+    svg?: string;
+    /**
+     * The classes to apply to the track circle.
+     */
+    track?: string;
+}
+export interface SpinnerCustomProps {
+    /**
+     * Props forwarded to the progress circle.
+     */
+    circle?: SVGAttributes;
+    /**
+     * Props forwarded to the root element.
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the svg element.
+     */
+    svg?: SVGAttributes;
+    /**
+     * Props forwarded to the track circle.
+     */
+    track?: SVGAttributes;
+}
+export interface SpinnerOwnProps {
+    /**
+     * The classes to apply to spinner parts.
+     *
+     * @default undefined
+     */
+    classes?: SpinnerClasses;
+    /**
+     * The color of the spinner.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<SpinnerColor, SpinnerColorOverrides>;
+    /**
+     * Extra props for internal parts (`root`, `svg`, `circle`, `track`).
+     * Root HTML attributes stay on the component top level.
+     *
+     * @default undefined
+     */
+    customProps?: SpinnerCustomProps;
+    /**
+     * Disables the indeterminate shrink animation on the circle.
+     *
+     * @default false
+     */
+    disableShrink?: boolean;
+    /**
+     * Renders a subtle track circle behind the progress arc.
+     *
+     * @default false
+     */
+    enableTrack?: boolean;
+    /**
+     * The size of the spinner.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<SpinnerSize, SpinnerSizeOverrides>;
+    /**
+     * The stroke thickness of the circle.
+     *
+     * @default 3.6
+     */
+    thickness?: number;
+    /**
+     * Progress value from 0 to 100. Used by the `determinate` variant.
+     *
+     * @default undefined
+     */
+    value?: number;
+    /**
+     * Visual variant of the spinner.
+     *
+     * @default "indeterminate"
+     */
+    variant?: MergeProps<SpinnerVariant, SpinnerVariantOverrides>;
+}
+export type SpinnerProps = MergeHtmlProps<SpinnerOwnProps, HTMLAttributes>;

package/dist/augments.d.ts

@@ -18,10 +18,12 @@ import { MenuClasses, MenuProps } from './Components/Menu';
 import { ModalClasses, ModalProps } from './Components/Modal';
 import { NumberFieldClasses } from './Components/NumberField';
 import { PasswordFieldClasses } from './Components/PasswordField';
+import { ProgressClasses, ProgressProps } from './Components/Progress';
 import { RadioClasses, RadioProps } from './Components/Radio';
 import { SelectClasses, SelectProps } from './Components/Select';
 import { SkeletonClasses, SkeletonProps } from './Components/Skeleton';
 import { SnackbarClasses, SnackbarProps } from './Components/Snackbar';
+import { SpinnerClasses, SpinnerProps } from './Components/Spinner';
 import { SwitchClasses, SwitchProps } from './Components/Switch';
 import { TextareaClasses, TextareaProps } from './Components/Textarea';
 declare module "@bridge-ui/core" {
@@ -100,6 +102,10 @@ declare module "@bridge-ui/core" {
     interface PasswordFieldConfigOverrides {
         classes: PasswordFieldClasses;
     }
+    interface ProgressConfigOverrides {
+        classes: ProgressClasses;
+        defaultProps: Partial<Pick<ProgressProps, "size" | "color" | "rounded" | "variant">>;
+    }
     interface RadioConfigOverrides {
         classes: RadioClasses;
         defaultProps: Partial<Pick<RadioProps, "size" | "color" | "rounded">>;
@@ -116,6 +122,10 @@ declare module "@bridge-ui/core" {
         classes: SkeletonClasses;
         defaultProps: Partial<Pick<SkeletonProps, "rounded">>;
     }
+    interface SpinnerConfigOverrides {
+        classes: SpinnerClasses;
+        defaultProps: Partial<Pick<SpinnerProps, "size" | "color" | "variant" | "thickness" | "enableTrack" | "disableShrink">>;
+    }
     interface SwitchConfigOverrides {
         classes: SwitchClasses;
         defaultProps: Partial<Pick<SwitchProps, "size" | "color" | "rounded">>;

package/dist/index.d.ts

@@ -40,6 +40,8 @@ export { NumberField, useNumberField } from './Components/NumberField';
 export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
 export { PasswordField, usePasswordField } from './Components/PasswordField';
 export type { PasswordFieldClasses, PasswordFieldCustomProps, PasswordFieldOwnProps, PasswordFieldProps, PasswordFieldSlots, } from './Components/PasswordField';
+export { Progress, useProgress } from './Components/Progress';
+export type { ProgressClasses, ProgressColorOverrides, ProgressCustomProps, ProgressOwnProps, ProgressProps, ProgressRoundedOverrides, ProgressSizeOverrides, ProgressVariantOverrides, } from './Components/Progress';
 export { Radio, useRadio } from './Components/Radio';
 export type { RadioClasses, RadioColorOverrides, RadioCustomProps, RadioOwnProps, RadioProps, RadioRoundedOverrides, RadioSizeOverrides, RadioSlots, } from './Components/Radio';
 export { Select, SelectOption } from './Components/Select';
@@ -48,6 +50,8 @@ export { Skeleton, useSkeleton } from './Components/Skeleton';
 export type { SkeletonClasses, SkeletonOwnProps, SkeletonProps, SkeletonRoundedOverrides, } from './Components/Skeleton';
 export { Snackbar, useSnackbar } from './Components/Snackbar';
 export type { SnackbarClasses, SnackbarColorOverrides, SnackbarCustomProps, SnackbarEmits, SnackbarOwnProps, SnackbarPaddingOverrides, SnackbarProps, SnackbarSlots, SnackbarTransitionOverrides, } from './Components/Snackbar';
+export { Spinner, useSpinner } from './Components/Spinner';
+export type { SpinnerClasses, SpinnerColorOverrides, SpinnerCustomProps, SpinnerOwnProps, SpinnerProps, SpinnerSizeOverrides, SpinnerVariantOverrides, } from './Components/Spinner';
 export { Switch, useSwitch } from './Components/Switch';
 export type { SwitchClasses, SwitchColorOverrides, SwitchCustomProps, SwitchOwnProps, SwitchProps, SwitchRoundedOverrides, SwitchSizeOverrides, SwitchSlots, } from './Components/Switch';
 export { Textarea, useTextarea } from './Components/Textarea';

package/dist/index.js

@@ -32,28 +32,32 @@ import I from "./Components/ListItem/ListItem.js";
 import L from "./Components/ListSection/ListSection.js";
 import { useMenu as R } from "./Components/Menu/composables/useMenu.js";
 import z from "./Components/Menu/Menu.js";
-import B from "./Components/Listbox/Listbox.js";
-import { useModal as V } from "./Components/Modal/composables/useModal.js";
-import H from "./Components/Modal/Modal.js";
-import { useNumberField as U } from "./Components/NumberField/composables/useNumberField.js";
-import W from "./Components/NumberField/NumberField.js";
-import { usePasswordField as G } from "./Components/PasswordField/composables/usePasswordField.js";
-import K from "./Components/PasswordField/PasswordField.js";
-import { useRadio as q } from "./Components/Radio/composables/useRadio.js";
-import J from "./Components/Radio/Radio.js";
-import Y from "./Components/Select/Select.js";
-import X from "./Components/Select/SelectOption.js";
-import { useSkeleton as Z } from "./Components/Skeleton/composables/useSkeleton.js";
-import Q from "./Components/Skeleton/Skeleton.js";
-import { useSnackbar as $ } from "./Components/Snackbar/composables/useSnackbar.js";
-import ee from "./Components/Snackbar/Snackbar.js";
-import { useSwitch as te } from "./Components/Switch/composables/useSwitch.js";
-import ne from "./Components/Switch/Switch.js";
-import { useTextarea as re } from "./Components/Textarea/composables/useTextarea.js";
-import ie from "./Components/Textarea/Textarea.js";
-import { useTextField as ae } from "./Components/TextField/composables/useTextField.js";
-import oe from "./Components/TextField/TextField.js";
-import se from "./Provider/BridgeUIProvider.js";
-import { createBridgeUI as ce } from "./Provider/createBridgeUI.js";
-import { BRIDGE_UI_DEFAULT_GLOBAL as le, cn as ue, mergeBridgeUIComponents as de, mergeBridgeUIGlobal as fe, resolveBridgeUIOptions as pe } from "@bridge-ui/core";
-export { a as Alert, o as Avatar, le as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, se as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, L as ListSection, B as Listbox, z as Menu, H as Modal, W as NumberField, K as PasswordField, J as Radio, Y as Select, X as SelectOption, Q as Skeleton, ee as Snackbar, ne as Switch, oe as TextField, ie as Textarea, ue as cn, ce as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, de as mergeBridgeUIComponents, fe as mergeBridgeUIGlobal, P as moveListboxHighlight, pe as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, R as useMenu, V as useModal, U as useNumberField, G as usePasswordField, q as useRadio, Z as useSkeleton, $ as useSnackbar, te as useSwitch, ae as useTextField, re as useTextarea };
+import { useProgress as B } from "./Components/Progress/composables/useProgress.js";
+import V from "./Components/Progress/Progress.js";
+import H from "./Components/Listbox/Listbox.js";
+import { useModal as U } from "./Components/Modal/composables/useModal.js";
+import W from "./Components/Modal/Modal.js";
+import { useNumberField as G } from "./Components/NumberField/composables/useNumberField.js";
+import K from "./Components/NumberField/NumberField.js";
+import { usePasswordField as q } from "./Components/PasswordField/composables/usePasswordField.js";
+import J from "./Components/PasswordField/PasswordField.js";
+import { useRadio as Y } from "./Components/Radio/composables/useRadio.js";
+import X from "./Components/Radio/Radio.js";
+import Z from "./Components/Select/Select.js";
+import Q from "./Components/Select/SelectOption.js";
+import { useSkeleton as $ } from "./Components/Skeleton/composables/useSkeleton.js";
+import ee from "./Components/Skeleton/Skeleton.js";
+import { useSnackbar as te } from "./Components/Snackbar/composables/useSnackbar.js";
+import ne from "./Components/Snackbar/Snackbar.js";
+import { useSpinner as re } from "./Components/Spinner/composables/useSpinner.js";
+import ie from "./Components/Spinner/Spinner.js";
+import { useSwitch as ae } from "./Components/Switch/composables/useSwitch.js";
+import oe from "./Components/Switch/Switch.js";
+import { useTextarea as se } from "./Components/Textarea/composables/useTextarea.js";
+import ce from "./Components/Textarea/Textarea.js";
+import { useTextField as le } from "./Components/TextField/composables/useTextField.js";
+import ue from "./Components/TextField/TextField.js";
+import de from "./Provider/BridgeUIProvider.js";
+import { createBridgeUI as fe } from "./Provider/createBridgeUI.js";
+import { BRIDGE_UI_DEFAULT_GLOBAL as pe, cn as me, mergeBridgeUIComponents as he, mergeBridgeUIGlobal as ge, resolveBridgeUIOptions as _e } from "@bridge-ui/core";
+export { a as Alert, o as Avatar, pe as BRIDGE_UI_DEFAULT_GLOBAL, c as Badge, de as BridgeUIProvider, u as Button, f as Card, g as Checkbox, v as Chip, b as Divider, m as FormControl, S as FormField, i as Icon, w as Label, E as Link, O as List, I as ListItem, L as ListSection, H as Listbox, z as Menu, W as Modal, K as NumberField, J as PasswordField, V as Progress, X as Radio, Z as Select, Q as SelectOption, ee as Skeleton, ne as Snackbar, ie as Spinner, oe as Switch, ue as TextField, ce as Textarea, me as cn, fe as createBridgeUI, A as findFirstEnabledOptionIndex, j as findLastEnabledOptionIndex, M as getListboxActiveDescendantId, N as getListboxOptionId, he as mergeBridgeUIComponents, ge as mergeBridgeUIGlobal, P as moveListboxHighlight, _e as resolveBridgeUIOptions, r as useAlert, s as useBadge, e as useBridgeUI, t as useBridgeUIComponent, n as useBridgeUIMergedRegistryClasses, l as useButton, d as useCard, h as useCheckbox, _ as useChip, y as useDivider, p as useFormControl, x as useFormField, C as useLabel, T as useLink, D as useList, k as useListbox, F as useListboxNavigation, R as useMenu, U as useModal, G as useNumberField, q as usePasswordField, B as useProgress, Y as useRadio, $ as useSkeleton, te as useSnackbar, re as useSpinner, ae as useSwitch, le as useTextField, se as useTextarea };

package/dist/theme.css

@@ -98,12 +98,18 @@
   --color-info-900: var(--color-blue-900);
   --color-info-950: var(--color-blue-950);
 
-  /* Listbox indeterminate loading bar */
-  --animate-bridge-listbox-indeterminate: bridge-listbox-indeterminate 1.4s
+  /* Progress linear bar animations */
+  --animate-bridge-progress-indeterminate: bridge-progress-indeterminate 1.4s
     ease-in-out infinite;
+  --animate-bridge-progress-query: bridge-progress-query 1.4s ease-in-out
+    infinite;
+
+  /* Spinner circular animations */
+  --animate-bridge-spinner-rotate: bridge-spinner-rotate 1.4s linear infinite;
+  --animate-bridge-spinner-dash: bridge-spinner-dash 1.4s ease-in-out infinite;
 }
 
-@keyframes bridge-listbox-indeterminate {
+@keyframes bridge-progress-indeterminate {
   0% {
     transform: translateX(-100%);
   }
@@ -113,6 +119,43 @@
   }
 }
 
+@keyframes bridge-progress-query {
+  0% {
+    transform: translateX(400%);
+  }
+
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes bridge-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes bridge-spinner-dash {
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+}
+
 /**
  * FormField slot adornments (`bridge-start-adornment` / `bridge-end-adornment`).
  * Parent `.group/field` sets `data-bridge-rounded` from FormField `rounded`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "license": "MIT",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.7",
   "author": "BridgeUI",
   "sideEffects": false,
   "name": "@bridge-ui/vue",
@@ -60,7 +60,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "@bridge-ui/core": "^0.0.1-beta.6",
+    "@bridge-ui/core": "^0.0.1-beta.7",
     "@lucide/vue": ">=1.0.0",
     "vue": "^3.4.0"
   },