@bridge-ui/vue 0.0.0

package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,156 @@
+import e from "../Icon/Icon.js";
+import { useSnackbar as t } from "./composables/useSnackbar.js";
+import { Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, guardReactiveProps as d, mergeModels as f, mergeProps as p, normalizeClass as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useModel as b, useSlots as x } from "vue";
+import { cn as S } from "@bridge-ui/core";
+import { X as C } from "lucide-vue-next";
+//#region src/Components/Snackbar/Snackbar.vue?vue&type=script&setup=true&lang.ts
+var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { class: "flex ml-4 shrink-0" }, D = ["src"], O = { class: "flex ml-4 shrink-0" }, k = /* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "Snackbar",
+	props: /* @__PURE__ */ f({
+		classes: {},
+		closeButton: {
+			type: Boolean,
+			default: !0
+		},
+		color: {},
+		customProps: {},
+		description: {},
+		duration: {
+			type: [Boolean, Number],
+			default: 5e3
+		},
+		icon: {},
+		img: {},
+		padding: {},
+		position: { default: "bottom-center" },
+		progressbar: {
+			type: Boolean,
+			default: !0
+		},
+		rounded: {},
+		stackId: {},
+		teleportTo: {
+			type: [Boolean, String],
+			default: "body"
+		},
+		title: {},
+		transition: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ f([
+		"close",
+		"leave-complete",
+		"show-change"
+	], ["update:modelValue"]),
+	setup(u, { emit: f }) {
+		let k = x(), A = f, j = u, { merged: M, rendered: N, iconBind: P, panelBind: F, titleBind: I, isPortaled: L, portalBind: R, contentBind: z, showProgress: B, progressBind: V, resolvedIcon: H, requestClose: U, descriptionBind: W } = t(j, {
+			rounded: "lg",
+			duration: 5e3,
+			color: "primary",
+			padding: "medium",
+			closeButton: !0,
+			progressbar: !0,
+			teleportTo: "body",
+			transition: "slide",
+			position: "bottom-center"
+		}, {
+			show: b(u, "modelValue"),
+			stackId: j.stackId,
+			onClose: () => A("close"),
+			onLeaveComplete: () => A("leave-complete"),
+			onShowChange: (e) => A("show-change", e)
+		}), G = r(() => !!(k.icon || H.value || M.value.img)), K = r(() => !!(k.title || M.value.title)), q = r(() => !!(k.description || M.value.description)), J = r(() => !!k.right), Y = r(() => M.value.teleportTo === !1), X = r(() => M.value.teleportTo === !1 ? "body" : M.value.teleportTo);
+		return (t, r) => (g(), i(n, {
+			to: X.value,
+			disabled: Y.value
+		}, [y(N) && y(L) ? (g(), o("div", h(p({ key: 0 }, y(R))), [s("div", w, [s("div", p(y(F), { class: y(S)(y(F).class, { flex: J.value }) }), [
+			s("div", h(d(y(z)(J.value))), [s("div", { class: m({
+				"flex items-start": !J.value,
+				"w-full flex": J.value
+			}) }, [
+				G.value ? (g(), o("div", {
+					key: 0,
+					class: m(["shrink-0", {
+						"w-6": !!(y(H) || y(k).icon),
+						"pt-0.5": !!y(M).img
+					}])
+				}, [
+					_(t.$slots, "icon"),
+					!y(k).icon && y(M).img ? (g(), o("img", {
+						key: 0,
+						alt: "",
+						src: y(M).img,
+						class: "w-10 h-10 rounded-full"
+					}, null, 8, T)) : a("", !0),
+					!y(k).icon && !y(M).img && y(H) ? (g(), i(y(e), p({ key: 1 }, y(P), { icon: y(H) }), null, 16, ["icon"])) : a("", !0)
+				], 2)) : a("", !0),
+				s("div", { class: m(["w-0 flex-1 pt-0.5", { "ml-3": G.value }]) }, [
+					K.value ? (g(), o("p", h(p({ key: 0 }, y(I))), [_(t.$slots, "title", {}, () => [c(v(y(M).title), 1)])], 16)) : a("", !0),
+					q.value ? (g(), o("p", h(p({ key: 1 }, y(W))), [_(t.$slots, "description", {}, () => [c(v(y(M).description), 1)])], 16)) : a("", !0),
+					_(t.$slots, "default"),
+					y(k).actions ? (g(), o("div", {
+						key: 2,
+						class: m(["flex mt-3 gap-x-3", y(M).classes?.actions])
+					}, [_(t.$slots, "actions")], 2)) : a("", !0)
+				], 2),
+				s("div", E, [_(t.$slots, "trailing"), y(M).closeButton === !1 ? a("", !0) : (g(), o("button", {
+					key: 0,
+					type: "button",
+					"aria-label": "Close",
+					onClick: r[0] ||= (...e) => y(U) && y(U)(...e),
+					class: "cursor-pointer inline-flex rounded-md text-dark-400 hover:text-dark-500 focus:outline-hidden"
+				}, [l(y(C), { class: "w-5 h-5" })]))])
+			], 2)], 16),
+			_(t.$slots, "right"),
+			y(B) ? (g(), o("div", h(p({ key: 0 }, y(V))), null, 16)) : a("", !0)
+		], 16)])], 16)) : y(N) ? (g(), o("div", p({ key: 1 }, y(F), { class: y(S)(y(F).class, { flex: J.value }) }), [
+			s("div", h(d(y(z)(J.value))), [s("div", { class: m({
+				"flex items-start": !J.value,
+				"w-full flex": J.value
+			}) }, [
+				G.value ? (g(), o("div", {
+					key: 0,
+					class: m(["shrink-0", {
+						"w-6": !!(y(H) || y(k).icon),
+						"pt-0.5": !!y(M).img
+					}])
+				}, [
+					_(t.$slots, "icon"),
+					!y(k).icon && y(M).img ? (g(), o("img", {
+						key: 0,
+						alt: "",
+						src: y(M).img,
+						class: "w-10 h-10 rounded-full"
+					}, null, 8, D)) : a("", !0),
+					!y(k).icon && !y(M).img && y(H) ? (g(), i(y(e), p({ key: 1 }, y(P), { icon: y(H) }), null, 16, ["icon"])) : a("", !0)
+				], 2)) : a("", !0),
+				s("div", { class: m(["w-0 flex-1 pt-0.5", { "ml-3": G.value }]) }, [
+					K.value ? (g(), o("p", h(p({ key: 0 }, y(I))), [_(t.$slots, "title", {}, () => [c(v(y(M).title), 1)])], 16)) : a("", !0),
+					q.value ? (g(), o("p", h(p({ key: 1 }, y(W))), [_(t.$slots, "description", {}, () => [c(v(y(M).description), 1)])], 16)) : a("", !0),
+					_(t.$slots, "default"),
+					y(k).actions ? (g(), o("div", {
+						key: 2,
+						class: m(["flex mt-3 gap-x-3", y(M).classes?.actions])
+					}, [_(t.$slots, "actions")], 2)) : a("", !0)
+				], 2),
+				s("div", O, [_(t.$slots, "trailing"), y(M).closeButton === !1 ? a("", !0) : (g(), o("button", {
+					key: 0,
+					type: "button",
+					"aria-label": "Close",
+					onClick: r[1] ||= (...e) => y(U) && y(U)(...e),
+					class: "cursor-pointer inline-flex rounded-md text-dark-400 hover:text-dark-500 focus:outline-hidden"
+				}, [l(y(C), { class: "w-5 h-5" })]))])
+			], 2)], 16),
+			_(t.$slots, "right"),
+			y(B) ? (g(), o("div", h(p({ key: 0 }, y(V))), null, 16)) : a("", !0)
+		], 16)) : a("", !0)], 8, ["to", "disabled"]));
+	}
+});
+//#endregion
+export { k as default };

package/dist/Components/Snackbar/composables/useSnackbar.d.ts

@@ -0,0 +1,248 @@
+import { LucideIcon } from 'lucide-vue-next';
+import { Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { SnackbarOwnProps, SnackbarProps } from '../snackbar.types';
+type SnackbarLibDefaults = LibDefaultsShape<SnackbarOwnProps, "color" | "padding" | "rounded" | "duration" | "position" | "teleportTo" | "transition" | "closeButton" | "progressbar">;
+type SnackbarMerged = MergeLibDefaults<SnackbarOwnProps, SnackbarLibDefaults>;
+export type SnackbarOptions = {
+    /**
+     * Called when the snackbar requests to close.
+     */
+    onClose?: () => void;
+    /**
+     * Called after the leave transition when `show` is already `false`.
+     *
+     * @internal Used by `BridgeSnackbarHost` to remove registry entries.
+     */
+    onLeaveComplete?: () => void;
+    /**
+     * Called when `show` should change (controlled state).
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Whether the snackbar is visible.
+     *
+     * @default false
+     */
+    show?: boolean | Ref<boolean>;
+    /**
+     * Pre-assigned stack id (BridgeSnackbarHost).
+     */
+    stackId?: string;
+};
+export declare function useSnackbar(props: SnackbarProps, libDefaults: SnackbarLibDefaults, options?: SnackbarOptions): {
+    merged: import('vue').ComputedRef<SnackbarMerged>;
+    iconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+    rendered: Ref<boolean, boolean>;
+    panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        "data-snackbar-part": string;
+        onMouseenter: () => void;
+        onMouseleave: () => void;
+        "data-state": "open" | "closed";
+        onTransitionend: (event: TransitionEvent) => void;
+        role: string;
+        "aria-live": "off" | "assertive" | "polite";
+        onCopy?: ((payload: ClipboardEvent) => void) | undefined;
+        onCut?: ((payload: ClipboardEvent) => void) | undefined;
+        onPaste?: ((payload: ClipboardEvent) => void) | undefined;
+        onCompositionend?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionstart?: ((payload: CompositionEvent) => void) | undefined;
+        onCompositionupdate?: ((payload: CompositionEvent) => void) | undefined;
+        onDrag?: ((payload: DragEvent) => void) | undefined;
+        onDragend?: ((payload: DragEvent) => void) | undefined;
+        onDragenter?: ((payload: DragEvent) => void) | undefined;
+        onDragexit?: ((payload: DragEvent) => void) | undefined;
+        onDragleave?: ((payload: DragEvent) => void) | undefined;
+        onDragover?: ((payload: DragEvent) => void) | undefined;
+        onDragstart?: ((payload: DragEvent) => void) | undefined;
+        onDrop?: ((payload: DragEvent) => void) | undefined;
+        onFocus?: ((payload: FocusEvent) => void) | undefined;
+        onFocusin?: ((payload: FocusEvent) => void) | undefined;
+        onFocusout?: ((payload: FocusEvent) => void) | undefined;
+        onBlur?: ((payload: FocusEvent) => void) | undefined;
+        onChange?: ((payload: Event) => void) | undefined;
+        onBeforeinput?: ((payload: InputEvent) => void) | undefined;
+        onFormdata?: ((payload: FormDataEvent) => void) | undefined;
+        onInput?: ((payload: InputEvent) => void) | undefined;
+        onReset?: ((payload: Event) => void) | undefined;
+        onSubmit?: ((payload: SubmitEvent) => void) | undefined;
+        onInvalid?: ((payload: Event) => void) | undefined;
+        onFullscreenchange?: ((payload: Event) => void) | undefined;
+        onFullscreenerror?: ((payload: Event) => void) | undefined;
+        onLoad?: ((payload: Event) => void) | undefined;
+        onError?: ((payload: Event) => void) | undefined;
+        onKeydown?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeypress?: ((payload: KeyboardEvent) => void) | undefined;
+        onKeyup?: ((payload: KeyboardEvent) => void) | undefined;
+        onDblclick?: ((payload: MouseEvent) => void) | undefined;
+        onMousedown?: ((payload: MouseEvent) => void) | undefined;
+        onMousemove?: ((payload: MouseEvent) => void) | undefined;
+        onMouseout?: ((payload: MouseEvent) => void) | undefined;
+        onMouseover?: ((payload: MouseEvent) => void) | undefined;
+        onMouseup?: ((payload: MouseEvent) => void) | undefined;
+        onAbort?: ((payload: UIEvent) => void) | undefined;
+        onCanplay?: ((payload: Event) => void) | undefined;
+        onCanplaythrough?: ((payload: Event) => void) | undefined;
+        onDurationchange?: ((payload: Event) => void) | undefined;
+        onEmptied?: ((payload: Event) => void) | undefined;
+        onEncrypted?: ((payload: MediaEncryptedEvent) => void) | undefined;
+        onEnded?: ((payload: Event) => void) | undefined;
+        onLoadeddata?: ((payload: Event) => void) | undefined;
+        onLoadedmetadata?: ((payload: Event) => void) | undefined;
+        onLoadstart?: ((payload: Event) => void) | undefined;
+        onPause?: ((payload: Event) => void) | undefined;
+        onPlay?: ((payload: Event) => void) | undefined;
+        onPlaying?: ((payload: Event) => void) | undefined;
+        onProgress?: ((payload: ProgressEvent<EventTarget>) => void) | undefined;
+        onRatechange?: ((payload: Event) => void) | undefined;
+        onSeeked?: ((payload: Event) => void) | undefined;
+        onSeeking?: ((payload: Event) => void) | undefined;
+        onStalled?: ((payload: Event) => void) | undefined;
+        onSuspend?: ((payload: Event) => void) | undefined;
+        onTimeupdate?: ((payload: Event) => void) | undefined;
+        onVolumechange?: ((payload: Event) => void) | undefined;
+        onWaiting?: ((payload: Event) => void) | undefined;
+        onSelect?: ((payload: Event) => void) | undefined;
+        onScroll?: ((payload: Event) => void) | undefined;
+        onScrollend?: ((payload: Event) => void) | undefined;
+        onTouchcancel?: ((payload: TouchEvent) => void) | undefined;
+        onTouchend?: ((payload: TouchEvent) => void) | undefined;
+        onTouchmove?: ((payload: TouchEvent) => void) | undefined;
+        onTouchstart?: ((payload: TouchEvent) => void) | undefined;
+        onAuxclick?: ((payload: PointerEvent) => void) | undefined;
+        onClick?: ((payload: PointerEvent) => void) | undefined;
+        onContextmenu?: ((payload: PointerEvent) => void) | undefined;
+        onGotpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onLostpointercapture?: ((payload: PointerEvent) => void) | undefined;
+        onPointerdown?: ((payload: PointerEvent) => void) | undefined;
+        onPointermove?: ((payload: PointerEvent) => void) | undefined;
+        onPointerup?: ((payload: PointerEvent) => void) | undefined;
+        onPointercancel?: ((payload: PointerEvent) => void) | undefined;
+        onPointerenter?: ((payload: PointerEvent) => void) | undefined;
+        onPointerleave?: ((payload: PointerEvent) => void) | undefined;
+        onPointerover?: ((payload: PointerEvent) => void) | undefined;
+        onPointerout?: ((payload: PointerEvent) => void) | undefined;
+        onBeforetoggle?: ((payload: ToggleEvent) => void) | undefined;
+        onToggle?: ((payload: ToggleEvent) => void) | undefined;
+        onWheel?: ((payload: WheelEvent) => void) | undefined;
+        onAnimationcancel?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationstart?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationend?: ((payload: AnimationEvent) => void) | undefined;
+        onAnimationiteration?: ((payload: AnimationEvent) => void) | undefined;
+        onSecuritypolicyviolation?: ((payload: SecurityPolicyViolationEvent) => void) | undefined;
+        onTransitioncancel?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
+        onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
+        innerHTML?: string | undefined | undefined;
+        class?: import('vue').ClassValue;
+        style?: import('vue').StyleValue;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        tabindex?: (string | number) | undefined;
+        'aria-activedescendant'?: string | undefined | undefined;
+        'aria-atomic'?: (boolean | "true" | "false") | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        'aria-busy'?: (boolean | "true" | "false") | undefined;
+        'aria-checked'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-colcount'?: (string | number) | undefined;
+        'aria-colindex'?: (string | number) | undefined;
+        'aria-colspan'?: (string | number) | undefined;
+        'aria-controls'?: string | undefined | undefined;
+        'aria-current'?: (boolean | "true" | "false") | "page" | "step" | "location" | "date" | "time" | undefined;
+        'aria-describedby'?: string | undefined | undefined;
+        'aria-details'?: string | undefined | undefined;
+        'aria-disabled'?: (boolean | "true" | "false") | undefined;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        'aria-errormessage'?: string | undefined | undefined;
+        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-flowto'?: string | undefined | undefined;
+        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
+        'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        'aria-hidden'?: (boolean | "true" | "false") | undefined;
+        'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
+        'aria-keyshortcuts'?: string | undefined | undefined;
+        'aria-label'?: string | undefined | undefined;
+        'aria-labelledby'?: string | undefined | undefined;
+        'aria-level'?: (string | number) | undefined;
+        'aria-modal'?: (boolean | "true" | "false") | undefined;
+        'aria-multiline'?: (boolean | "true" | "false") | undefined;
+        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined | undefined;
+        'aria-owns'?: string | undefined | undefined;
+        'aria-placeholder'?: string | undefined | undefined;
+        'aria-posinset'?: (string | number) | undefined;
+        'aria-pressed'?: (boolean | "true" | "false") | "mixed" | undefined;
+        'aria-readonly'?: (boolean | "true" | "false") | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
+        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-roledescription'?: string | undefined | undefined;
+        'aria-rowcount'?: (string | number) | undefined;
+        'aria-rowindex'?: (string | number) | undefined;
+        'aria-rowspan'?: (string | number) | undefined;
+        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-setsize'?: (string | number) | undefined;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        'aria-valuemax'?: (string | number) | undefined;
+        'aria-valuemin'?: (string | number) | undefined;
+        'aria-valuenow'?: (string | number) | undefined;
+        'aria-valuetext'?: string | undefined | undefined;
+        accesskey?: string | undefined | undefined;
+        contenteditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        contextmenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
+        draggable?: (boolean | "true" | "false") | undefined;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: "" | "until-found" | (boolean | "true" | "false") | "hidden" | undefined;
+        inert?: (boolean | "true" | "false") | undefined;
+        placeholder?: string | undefined | undefined;
+        spellcheck?: (boolean | "true" | "false") | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        radiogroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
+        inlist?: any;
+        prefix?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autocapitalize?: string | undefined | undefined;
+        autocorrect?: string | undefined | undefined;
+        autosave?: string | undefined | undefined;
+        itemprop?: string | undefined | undefined;
+        itemscope?: (boolean | "true" | "false") | undefined;
+        itemtype?: string | undefined | undefined;
+        itemid?: string | undefined | undefined;
+        itemref?: string | undefined | undefined;
+        results?: (string | number) | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
+    }>>;
+    titleBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    isPortaled: import('vue').ComputedRef<boolean>;
+    portalBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        "data-snackbar-layer": boolean;
+        style: {
+            zIndex: number;
+        };
+    }>>;
+    contentBind: (hasRight: boolean) => import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>;
+    showProgress: import('vue').ComputedRef<boolean>;
+    progressBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        class: string;
+        style: {
+            transformOrigin: string;
+            transform: string;
+            transition: string;
+        } | undefined;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    requestClose: () => void;
+    resolvedIcon: import('vue').ComputedRef<LucideIcon | null>;
+    descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+};
+export {};

package/dist/Components/Snackbar/composables/useSnackbar.js

@@ -0,0 +1,210 @@
+import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { snackbarDefaultIcons as ee } from "../snackbarDefaultIcons.js";
+import { computed as r, nextTick as te, onBeforeUnmount as i, ref as a, toValue as ne, useAttrs as re, watch as o } from "vue";
+import { get as s, isNil as ie, isNull as c, isObject as l, omit as u } from "es-toolkit/compat";
+import { LAYER_STACK_BASE_Z_INDEX as d, acquireLayerStackOrder as f, cn as p, getLayerStackEntry as ae, getSnackbarTransitionClass as oe, hasSnackbarTransition as se, mergeBridgeUILayeredClasses as m, pushLayerStack as ce, snackbarColorProps as le, snackbarPaddingProps as ue, snackbarPositionProps as de, snackbarRoundedProps as fe, snackbarTransitionProps as pe, splitComponentProps as me, subscribeLayerStack as he } from "@bridge-ui/core";
+//#region src/Components/Snackbar/composables/useSnackbar.ts
+var ge = [
+	"img",
+	"icon",
+	"color",
+	"title",
+	"classes",
+	"padding",
+	"rounded",
+	"stackId",
+	"duration",
+	"position",
+	"teleportTo",
+	"transition",
+	"closeButton",
+	"customProps",
+	"description",
+	"progressbar"
+];
+function h(h, _e, g = {}) {
+	let _ = re(), v = a(!1), y = a(""), b = a(1), x = a(0), S = a(!1), C = a(!1), w = a(0), T = a(!1), E = a(0), D = a(d), O = a("closed"), k = a(null), A = null, j = null, M = null, N = r(() => me({
+		props: {
+			..._,
+			...h
+		},
+		bridgeKeys: ge
+	})), { merged: P, entry: F } = t({
+		libDefaults: _e,
+		componentName: "Snackbar",
+		props: () => N.value.componentProps
+	}), I = r(() => P.value.customProps), L = r(() => u(N.value.inheritedAttrs, ["onShowChange"])), R = n({
+		entry: F,
+		props: () => N.value.componentProps
+	}), z = r(() => ie(g.show) ? !1 : ne(g.show)), B = r(() => {
+		let e = P.value.transition ?? "none";
+		return e in pe ? e : "none";
+	}), V = r(() => se(B.value)), ve = r(() => oe(B.value)), H = r(() => s(m(le, F.value?.customProps?.color), P.value.color)), U = r(() => s(m(ue, F.value?.customProps?.padding), P.value.padding)), ye = r(() => s(m(fe, F.value?.customProps?.rounded), P.value.rounded)), be = r(() => c(P.value.icon) ? null : P.value.icon ? P.value.icon : s(H.value, "icon") ?? s(ee, P.value.color)), W = r(() => P.value.duration === !1 ? 0 : P.value.duration ?? 0), G = r(() => z.value && v.value && W.value > 0 && P.value.progressbar !== !1), K = r(() => P.value.teleportTo !== !1), xe = r(() => K.value ? s(m(de, F.value?.customProps?.position), P.value.position ?? "bottom-center") : "");
+	function q() {
+		k.value &&= (clearTimeout(k.value), null);
+	}
+	function J(e) {
+		e || g.onClose?.(), l(g.show) && "value" in g.show && (g.show.value = e), g.onShowChange?.(e);
+	}
+	function Y() {
+		C.value && (C.value = !1, O.value = "closed", q(), z.value ? J(!1) : g.onLeaveComplete?.(), v.value = !1);
+	}
+	function X() {
+		if (q(), C.value = !0, !V.value) {
+			Y();
+			return;
+		}
+		O.value = "closed";
+	}
+	function Se() {
+		if (C.value = !1, !V.value) {
+			O.value = "open";
+			return;
+		}
+		O.value = "closed", te(() => {
+			requestAnimationFrame(() => {
+				O.value = "open";
+			});
+		});
+	}
+	function Z() {
+		if (!V.value) {
+			J(!1);
+			return;
+		}
+		v.value && X();
+	}
+	function Q(e) {
+		q(), x.value = e, w.value = Date.now(), E.value = e, k.value = setTimeout(() => {
+			Z();
+		}, e);
+	}
+	function Ce() {
+		!k.value || W.value <= 0 || (q(), x.value -= Date.now() - w.value, b.value = Math.max(x.value / W.value, 0), T.value = !1, S.value = !0);
+	}
+	function we() {
+		if (W.value <= 0 || !S.value) return;
+		let e = Math.max(x.value, 0);
+		S.value = !1, T.value = !1, requestAnimationFrame(() => {
+			T.value = !0;
+		}), Q(e);
+	}
+	function Te(e) {
+		!v.value || O.value !== "closed" || e.target === e.currentTarget && (e.propertyName === "none" || e.elapsedTime === 0 || Y());
+	}
+	o(z, (e) => {
+		if (e) {
+			v.value = !0, Se();
+			return;
+		}
+		v.value && X();
+	}, { immediate: !0 }), o([
+		z,
+		v,
+		W
+	], ([e, t, n]) => {
+		if (!e || !t || n <= 0) {
+			q();
+			return;
+		}
+		S.value = !1, Q(n);
+	}, { immediate: !0 }), o([G, W], ([e]) => {
+		if (!e) {
+			T.value = !1, b.value = 1;
+			return;
+		}
+		T.value = !1, b.value = 1;
+		let t = requestAnimationFrame(() => {
+			T.value = !0;
+		});
+		return () => {
+			cancelAnimationFrame(t);
+		};
+	}, { immediate: !0 });
+	function $() {
+		let e = ae(y.value);
+		e && (D.value = e.zIndex);
+	}
+	o([v, K], ([e, t]) => {
+		t && (e ? (A = f(), j = ce({
+			order: A,
+			lockScroll: !1,
+			id: g.stackId,
+			onEscape: () => {
+				Z();
+			}
+		}), y.value = j.id, D.value = j.zIndex, $(), M = he($)) : (M?.(), M = null, j?.release(), j = null, A = null, y.value = "", D.value = d));
+	}, { immediate: !0 }), i(() => {
+		q(), M?.(), M = null, j?.release(), j = null;
+	});
+	let Ee = r(() => e(I.value?.portal, {
+		"data-snackbar-layer": !0,
+		style: { zIndex: D.value }
+	}, p({
+		"fixed inset-0 flex pointer-events-none px-4 py-6 sm:p-5 sm:pt-4": !0,
+		[xe.value ?? ""]: !0,
+		[s(R.value, "portal") ?? ""]: !0
+	}))), De = r(() => e(I.value?.root, {
+		...L.value,
+		"data-snackbar-part": "panel",
+		onMouseenter: Ce,
+		onMouseleave: we,
+		"data-state": O.value,
+		onTransitionend: Te,
+		role: L.value.role ?? "status",
+		"aria-live": L.value["aria-live"] ?? "polite"
+	}, p({
+		"relative w-full max-w-sm overflow-hidden pointer-events-auto": !0,
+		"bg-white shadow-lg ring-1 ring-black/5": !0,
+		"dark:bg-dark-800 dark:border dark:border-dark-700": !0,
+		[s(ye.value, "base") ?? ""]: !0,
+		[ve.value]: V.value,
+		[s(R.value, "root") ?? ""]: !0
+	}))), Oe = r(() => e(I.value?.icon, {}, p({
+		"w-6 h-6 shrink-0": !0,
+		[s(H.value, "iconColor") ?? ""]: !0,
+		[s(R.value, "icon") ?? ""]: !0
+	}))), ke = r(() => e(I.value?.title, {}, p({
+		"text-sm font-medium": !0,
+		[s(H.value, "titleColor") ?? ""]: !0,
+		[s(R.value, "title") ?? ""]: !0
+	}))), Ae = r(() => e(I.value?.description, {}, p({
+		"mt-1 text-sm text-dark-500 dark:text-dark-500": !0,
+		[s(R.value, "description") ?? ""]: !0
+	}))), je = r(() => e(I.value?.progress, {}, {
+		class: p({
+			"absolute bottom-0 left-0 h-0.5 w-full rounded-full": !0,
+			[s(H.value, "progressColor") ?? ""]: !0,
+			[s(R.value, "progress") ?? ""]: !0
+		}),
+		style: G.value ? {
+			transformOrigin: "left center",
+			transform: `scaleX(${T.value && !S.value ? 0 : b.value})`,
+			transition: T.value && !S.value ? `transform ${E.value}ms linear` : "none"
+		} : void 0
+	}));
+	function Me(t) {
+		return e(I.value?.content, {}, p({
+			[s(U.value, "contentRight") ?? ""]: t,
+			[s(U.value, "content") ?? ""]: !t,
+			[s(R.value, "content") ?? ""]: !0
+		}));
+	}
+	return {
+		merged: P,
+		iconBind: Oe,
+		rendered: v,
+		panelBind: De,
+		titleBind: ke,
+		isPortaled: K,
+		portalBind: Ee,
+		contentBind: Me,
+		showProgress: G,
+		progressBind: je,
+		requestClose: Z,
+		resolvedIcon: be,
+		descriptionBind: Ae
+	};
+}
+//#endregion
+export { h as useSnackbar };

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

@@ -0,0 +1,4 @@
+export { useSnackbar } from './composables/useSnackbar';
+export type { SnackbarOptions } from './composables/useSnackbar';
+export type { SnackbarClasses, SnackbarColorOverrides, SnackbarCustomProps, SnackbarEmits, SnackbarOwnProps, SnackbarPaddingOverrides, SnackbarProps, SnackbarRoundedOverrides, SnackbarSlots, SnackbarTransitionOverrides, } from './snackbar.types';
+export { default as Snackbar } from './Snackbar.vue';

package/dist/Components/Snackbar/index.js

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