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

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;
     /**
@@ -182,25 +182,25 @@ export interface ListboxSlots {
     /**
      * Content below the list.
      */
-    afterOptions?: Slot;
+    afterOptions?: Slot<undefined>;
     /**
      * Content above the list.
      */
-    beforeOptions?: Slot;
+    beforeOptions?: Slot<undefined>;
     /**
      * Composed list content (`ListSection` / `ListItem`). When set, replaces the
      * mapped `options` / `entries` render inside the list.
      */
-    default?: Slot;
+    default?: Slot<undefined>;
     /**
      * Custom empty-state content.
      */
-    empty?: Slot;
+    empty?: Slot<undefined>;
     /**
      * Custom loading content. Replaces the default `loadingMessage` when set.
      * The progress bar still renders above this content.
      */
-    loading?: Slot;
+    loading?: Slot<undefined>;
     /**
      * Custom option item content.
      */

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/Menu/menu.types.d.ts

@@ -54,13 +54,13 @@ export interface MenuEmits {
     close: [];
 }
 /**
- * Anchored menu panel (MUI `Menu`-like). Visibility is controlled with `v-model`
- * (not listed here — `defineModel` handles it). Anchor with `anchorEl` (MUI style)
+ * Anchored menu panel. Visibility is controlled with `v-model`
+ * (not listed here — `defineModel` handles it). Anchor with `anchorEl`
  * or put the opener in the `trigger` slot; menu items go in the default slot.
  */
 export interface MenuOwnProps {
     /**
-     * Element that anchors the menu panel (MUI `anchorEl`). When set, it is used
+     * Element that anchors the menu panel. When set, it is used
      * for positioning and click-away instead of the `trigger` slot wrapper.
      * Prefer this when the opener lives outside the `Menu` or is controlled manually.
      * Not merged into Bridge defaults (DOM nodes must not be deep-merged).

package/dist/Components/Modal/composables/useModal.js

@@ -65,7 +65,6 @@ function x(x, ue, S = {}) {
 		})
 	})), be = n(() => e(z.value?.wrapper, { onClick: Q }, l({
 		"flex min-h-full w-full transform p-4": !0,
-		"items-end justify-center": !0,
 		[fe.value ?? ""]: !0,
 		[s(B.value, "wrapper") ?? ""]: !0
 	}))), xe = n(() => e(z.value?.panel, {

package/dist/Components/Modal/modal.types.d.ts

@@ -59,8 +59,9 @@ export interface ModalEmits {
  */
 export interface ModalOwnProps {
     /**
-     * Panel position from the `sm` breakpoint up (`{row}-{column}` grid).
-     * Mobile always uses bottom sheet (`bottom-center`).
+     * Panel position on all breakpoints (`{row}-{column}` grid).
+     * Use `useBreakpoint` if you need a different align per viewport
+     * (e.g. bottom sheet on mobile, centered on desktop).
      *
      * @default "middle-center"
      */

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