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

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

@@ -1,15 +1,18 @@
 import { hasNamedSlot as e, resolveNamedSlot as t } from "../../Utils/slotOrProp.js";
 import n from "../List/List.js";
 import { useListbox as r } from "./composables/useListbox.js";
-import i from "../ListItem/ListItem.js";
-import a 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 f, createVNode as p, defineComponent as m, guardReactiveProps as h, mergeModels as g, mergeProps as _, normalizeClass as v, normalizeProps as y, openBlock as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useModel as E, useSlots as D, watch as O, withCtx as k } from "vue";
-import { cn as A } from "@bridge-ui/core";
-import { Check as j } from "@lucide/vue";
+import { LISTBOX_INJECTION_KEY as i } from "./listboxInjectionKey.js";
+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 M = { key: 1 }, N = /* @__PURE__ */ m({
+var se = { key: 1 }, N = /* @__PURE__ */ h({
 	__name: "Listbox",
-	props: /* @__PURE__ */ g({
+	props: /* @__PURE__ */ _({
 		anchorEl: {},
 		classes: {},
 		color: { default: "primary" },
@@ -20,6 +23,7 @@ var M = { key: 1 }, N = /* @__PURE__ */ m({
 		},
 		disableMaxHeight: { type: Boolean },
 		emptyMessage: { default: "No options" },
+		entries: {},
 		hideEmptyMessage: {
 			type: Boolean,
 			default: !1
@@ -53,99 +57,146 @@ var M = { key: 1 }, N = /* @__PURE__ */ m({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ g(["select", "show-change"], ["update:modelValue"]),
-	setup(m, { emit: g }) {
-		let N = D(), P = g, F = E(m, "modelValue");
-		O(F, (e) => {
+	emits: /* @__PURE__ */ _([
+		"registered-options-change",
+		"select",
+		"show-change"
+	], ["update:modelValue"]),
+	setup(h, { emit: _ }) {
+		let N = k(), P = _, F = O(h, "modelValue");
+		A(F, (e) => {
 			P("show-change", e);
 		});
-		let I = m, { merged: L, checkClass: R, scrollBind: z, messageBind: B, loadingBind: V, sizeClasses: H, mergedClasses: U, loadingTrackBind: W, optionSelectedClass: G, optionHighlightedClass: K } = r(I, {
+		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"
-		}), q = s(() => !I.loading && I.options.length === 0 && I.hideEmptyMessage !== !0), J = s(() => A(R.value, U.value.check));
-		function Y(e) {
+		}), 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 I.isSelected?.(e) ?? !1;
 		}
-		function X(e) {
+		function ce(e) {
 			return I.highlightedIndex === e;
 		}
-		function Z(e) {
+		function le(e) {
 			e.preventDefault();
 		}
-		function Q(e, t) {
+		function ue(e, t) {
 			let n = {
 				tabindex: -1,
-				onMousedown: Z,
-				class: A(H.value?.option)
+				onMousedown: le,
+				class: M(V.value?.option)
 			};
-			return Y(e.value) ? n.class = A(n.class, G.value, U.value.optionSelected) : X(t) && (n.class = A(n.class, K.value, U.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: H.value?.primary },
-				secondary: { class: H.value?.secondary }
+				primary: { class: V.value?.primary },
+				secondary: { class: V.value?.secondary }
 			};
 		}
 		function $(e) {
 			e.disabled || P("select", e);
 		}
-		return (r, s) => (b(), c(T(a), {
+		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 fe(e) {
+			return (J.value ? Z.value : q.value).findIndex((t) => String(t.value) === String(e));
+		}
+		A(Z, (e) => {
+			J.value && P("registered-options-change", e);
+		}, { deep: !0 }), S(i, l(() => ({
+			getOptionIndex: fe,
+			registerOption: de,
+			onSelect: $,
+			listboxId: I.listboxId,
+			isSelected: Q,
+			sizeClasses: V.value,
+			showCheckmark: I.showCheckmark,
+			checkClass: X.value,
+			highlightedIndex: I.highlightedIndex,
+			optionSelectedClass: U.value,
+			optionHighlightedClass: W.value,
+			mergedClasses: {
+				optionSelected: H.value.optionSelected,
+				optionHighlighted: H.value.optionHighlighted
+			}
+		})));
+		let pe = l(() => ae(K.value, Q));
+		return (r, i) => (x(), u(D(s), {
 			modelValue: F.value,
-			"onUpdate:modelValue": s[0] ||= (e) => F.value = e,
-			"anchor-el": m.anchorEl,
-			placement: m.placement,
+			"onUpdate:modelValue": i[0] ||= (e) => F.value = e,
+			"anchor-el": h.anchorEl,
+			placement: h.placement,
 			"close-on-click-away": !0,
-			"disable-auto-focus": m.disableAutoFocus,
-			"custom-props": { content: T(L).customProps?.content }
+			"disable-auto-focus": h.disableAutoFocus,
+			"custom-props": { content: D(L).customProps?.content }
 		}, {
-			default: k(() => [
-				T(e)(T(N), "beforeOptions") ? (b(), c(C(T(t)(T(N), "beforeOptions")), { key: 0 })) : l("", !0),
-				m.loading ? (b(), u(o, { key: 1 }, [d("div", y(h(T(W))), [d("div", y(h(T(V))), null, 16)], 16), d("div", y(h(T(B))), [T(e)(T(N), "loading") ? (b(), c(C(T(t)(T(N), "loading")), { key: 0 })) : (b(), u("span", M, w(m.loadingMessage), 1))], 16)], 64)) : (b(), u("div", y(_({ key: 2 }, T(z))), [p(T(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",
-					padding: "none",
-					id: m.listboxId,
-					"aria-labelledby": m.labelledBy,
-					"aria-multiselectable": m.multiple || void 0
+					id: h.listboxId,
+					"aria-labelledby": h.labelledBy,
+					"aria-multiselectable": h.multiple || void 0
 				}, {
-					default: k(() => [(b(!0), u(o, null, x(m.options, (t, n) => (b(), c(T(i), {
+					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"])) : (x(), u(D(a), {
+						key: 1,
 						interactive: "",
 						role: "option",
 						selected: !1,
-						primary: t.label,
-						key: String(t.value),
-						disabled: t.disabled,
-						secondary: t.description,
-						onClick: (e) => $(t),
-						id: `${m.listboxId}-option-${n}`,
-						"aria-selected": Y(t.value),
-						"custom-props": Q(t, n)
-					}, f({ _: 2 }, [T(e)(T(N), "option") ? {
+						"aria-selected": t.selected,
+						disabled: t.option.disabled,
+						secondary: t.option.description,
+						onClick: (e) => $(t.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: k(() => [S(r.$slots, "option", {
-							option: t,
-							selected: Y(t.value)
+						fn: j(() => [w(r.$slots, "option", {
+							option: t.option,
+							selected: t.selected
 						})]),
 						key: "0"
-					} : void 0, m.showCheckmark && Y(t.value) ? {
+					} : void 0, h.showCheckmark && t.selected ? {
 						name: "end",
-						fn: k(() => [p(T(j), { class: v(J.value) }, null, 8, ["class"])]),
+						fn: j(() => [m(D(oe), { class: y(X.value) }, null, 8, ["class"])]),
 						key: "1"
 					} : void 0]), 1032, [
-						"primary",
+						"aria-selected",
 						"disabled",
 						"secondary",
 						"onClick",
 						"id",
-						"aria-selected",
-						"custom-props"
-					]))), 128))]),
+						"custom-props",
+						"primary"
+					]))], 64))), 128))]),
 					_: 3
 				}, 8, [
 					"id",
 					"aria-labelledby",
 					"aria-multiselectable"
 				])], 16)),
-				q.value && !T(e)(T(N), "empty") ? (b(), u("div", y(_({ key: 3 }, T(B))), w(m.emptyMessage), 17)) : q.value && T(e)(T(N), "empty") ? (b(), c(C(T(t)(T(N), "empty")), { key: 4 })) : l("", !0),
-				T(e)(T(N), "afterOptions") ? (b(), c(C(T(t)(T(N), "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, [

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/index.d.ts

@@ -1,4 +1,5 @@
 export { useListbox } from './composables/useListbox';
 export { findFirstEnabledOptionIndex, findLastEnabledOptionIndex, getListboxActiveDescendantId, getListboxOptionId, moveListboxHighlight, useListboxNavigation, } from './composables/useListboxNavigation';
-export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './listbox.types';
+export type { ListboxClasses, ListboxColorOverrides, ListboxCustomProps, ListboxEmits, ListboxEntry, ListboxOption, ListboxOwnProps, ListboxProps, ListboxSlots, ListboxValue, } from './listbox.types';
 export { default as Listbox } from './Listbox.vue';
+export { LISTBOX_INJECTION_KEY, type ListboxContextValue, } from './listboxInjectionKey';

package/dist/Components/Listbox/index.js

@@ -1,4 +1,5 @@
 import { useListbox as e } from "./composables/useListbox.js";
 import { findFirstEnabledOptionIndex as t, findLastEnabledOptionIndex as n, getListboxActiveDescendantId as r, getListboxOptionId as i, moveListboxHighlight as a, useListboxNavigation as o } from "./composables/useListboxNavigation.js";
-import s from "./Listbox.js";
-export { s as Listbox, t as findFirstEnabledOptionIndex, n as findLastEnabledOptionIndex, r as getListboxActiveDescendantId, i as getListboxOptionId, a as moveListboxHighlight, e as useListbox, o as useListboxNavigation };
+import { LISTBOX_INJECTION_KEY as s } from "./listboxInjectionKey.js";
+import c from "./Listbox.js";
+export { s as LISTBOX_INJECTION_KEY, c as Listbox, t as findFirstEnabledOptionIndex, n as findLastEnabledOptionIndex, r as getListboxActiveDescendantId, i as getListboxOptionId, a as moveListboxHighlight, e as useListbox, o as useListboxNavigation };

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes, Slot } from 'vue';
-import { ListboxColor, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
+import { ListboxColor, ListboxEntry, ListboxOption, ListboxSize, ListboxValue, MergeHtmlProps, MergeProps, PositionPlacement } from '@bridge-ui/core';
 export interface ListboxSizeOverrides {}
 export interface ListboxColorOverrides {}
 export interface ListboxClasses {
@@ -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;
     /**
@@ -38,8 +38,12 @@ export interface ListboxCustomProps {
      */
     scroll?: HTMLAttributes;
 }
-export type { ListboxOption, ListboxValue } from '@bridge-ui/core';
+export type { ListboxEntry, ListboxOption, ListboxValue, } from '@bridge-ui/core';
 export interface ListboxEmits {
+    /**
+     * Emitted when composed `ListItem` options register or unregister.
+     */
+    "registered-options-change": [options: ListboxOption[]];
     /**
      * Emitted when the user activates an option.
      */
@@ -88,6 +92,11 @@ export interface ListboxOwnProps {
      * @default "No options"
      */
     emptyMessage?: string;
+    /**
+     * Structured entries (sections + options). When set, preferred over a flat
+     * `options` map for rendering section headers.
+     */
+    entries?: ListboxEntry[];
     /**
      * Hides the empty-state message.
      *
@@ -144,9 +153,12 @@ export interface ListboxOwnProps {
      */
     multiple?: boolean;
     /**
-     * Options to render.
+     * Options to render. Used for empty-state and as a flat fallback when
+     * `entries` is omitted. Ignored for list body when the default slot is set.
+     *
+     * @default []
      */
-    options: ListboxOption[];
+    options?: ListboxOption[];
     /**
      * Preferred placement of the panel relative to the anchor.
      *
@@ -175,6 +187,11 @@ export interface ListboxSlots {
      * Content above the list.
      */
     beforeOptions?: Slot;
+    /**
+     * Composed list content (`ListSection` / `ListItem`). When set, replaces the
+     * mapped `options` / `entries` render inside the list.
+     */
+    default?: Slot;
     /**
      * Custom empty-state content.
      */

package/dist/Components/Listbox/listboxInjectionKey.d.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { ListboxOption, ListboxSizeItem, ListboxValue } from '@bridge-ui/core';
+/**
+ * Shared listbox state for composed `ListItem` children with `value`.
+ */
+export type ListboxContextValue = {
+    checkClass?: string;
+    getOptionIndex: (value: ListboxValue) => number;
+    highlightedIndex: number;
+    isSelected: (value: ListboxValue) => boolean;
+    listboxId?: string;
+    mergedClasses: {
+        optionHighlighted?: string;
+        optionSelected?: string;
+    };
+    onSelect: (option: ListboxOption) => void;
+    optionHighlightedClass?: string;
+    optionSelectedClass?: string;
+    registerOption: (option: ListboxOption) => () => void;
+    showCheckmark: boolean;
+    sizeClasses?: ListboxSizeItem;
+};
+export declare const LISTBOX_INJECTION_KEY: InjectionKey<ComputedRef<ListboxContextValue>>;

package/dist/Components/Listbox/listboxInjectionKey.js

@@ -0,0 +1,4 @@
+//#region src/Components/Listbox/listboxInjectionKey.ts
+var e = Symbol("bridge-listbox");
+//#endregion
+export { e as LISTBOX_INJECTION_KEY };

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

@@ -16,13 +16,13 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('./menu.types').MenuRoundedOverrides>;
     shadow: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('./menu.types').MenuShadowOverrides>;
     anchorEl: null | HTMLElement;
+    disableAutoFocus: boolean;
+    placement: import('@floating-ui/utils').Placement;
     closeOnClickAway: boolean;
     closeOnEscape: boolean;
-    disableAutoFocus: boolean;
     disableScrollLock: boolean;
     keepMounted: boolean;
     persistent: boolean;
-    placement: import('@floating-ui/utils').Placement;
     strategy: import('@bridge-ui/core').PositionStrategy;
     teleportTo: false | string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/Components/Menu/composables/useMenu.d.ts

@@ -24,9 +24,7 @@ export declare function useMenu(props: MenuOwnProps, libDefaults: MenuLibDefault
     merged: import('vue').ComputedRef<MenuMerged>;
     menuId: string;
     mounted: Ref<boolean, boolean>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
-        class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "closeOnClickAway" | "closeOnEscape" | "disableAutoFocus" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<MenuProps, "offset" | "classes" | "customProps" | "rounded" | "shadow" | "disableAutoFocus" | "placement" | "closeOnClickAway" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "strategy" | "teleportTo">, "anchorEl" | "onShowChange">>>;
     isPortaled: import('vue').ComputedRef<boolean>;
     triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         tabindex: number;

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

@@ -139,10 +139,10 @@ function y(y, le, b = {}) {
 	function $() {
 		j?.(), j = null, A?.(), A = null, O?.(), O = null, D?.release(), D = null, E = null, C.value = "", N.value = u, Y();
 	}
-	let xe = r(() => e(z.value?.root, pe.value, { class: f({
+	let xe = r(() => e(z.value?.root, pe.value, f({
 		"relative inline-block text-left": !0,
 		[c(B.value, "root") ?? ""]: !0
-	}) })), Se = r(() => e(z.value?.trigger, {}, {
+	}))), Se = r(() => e(z.value?.trigger, {}, {
 		tabindex: 0,
 		role: "button",
 		"aria-expanded": P.value,
@@ -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/Modal/composables/useModal.d.ts

@@ -34,7 +34,7 @@ export declare function useModal(props: ModalOwnProps, libDefaults: ModalLibDefa
         };
         "aria-hidden": boolean | undefined;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "align" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "blur" | "scroll" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<ModalProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "teleportTo" | "blur" | "scroll" | "align" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition">>>;
     panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         "data-modal-part": string;
         "data-state": "open" | "closed";

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