@bridge-ui/vue 0.0.4 → 0.0.6

package/dist/Components/Tooltip/Tooltip.js

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

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

@@ -0,0 +1,35 @@
+import { TooltipOwnProps, TooltipSlots } from './tooltip.types';
+type __VLS_Slots = TooltipSlots;
+type __VLS_Props = TooltipOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+    "show-change": (show: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
+}>, {
+    color: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').TooltipColor, import('./tooltip.types').TooltipColorOverrides>;
+    offset: number;
+    size: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').TooltipSize, import('./tooltip.types').TooltipSizeOverrides>;
+    rounded: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').TooltipRounded, import('./tooltip.types').TooltipRoundedOverrides>;
+    disabled: boolean;
+    anchorEl: null | HTMLElement;
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@bridge-ui/core').PositionStrategy;
+    teleportTo: false | string;
+    arrow: boolean;
+    closeDelay: number;
+    openDelay: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/Components/Tooltip/Tooltip.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,73 @@
+import { hasNamedSlot as e, resolveNamedSlot as t, resolveSlotOrProp as n } from "../../Utils/slotOrProp.js";
+import { useTooltip as r } from "./composables/useTooltip.js";
+import { Fragment as i, Teleport as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeProps as m, openBlock as h, resolveDynamicComponent as g, unref as _, useModel as v, useSlots as y } from "vue";
+//#region src/Components/Tooltip/Tooltip.vue?vue&type=script&setup=true&lang.ts
+var b = /* @__PURE__ */ d({
+	inheritAttrs: !1,
+	__name: "Tooltip",
+	props: /* @__PURE__ */ f({
+		anchorEl: { default: null },
+		arrow: {
+			type: Boolean,
+			default: !0
+		},
+		classes: {},
+		closeDelay: { default: 0 },
+		color: { default: "dark" },
+		content: {},
+		customProps: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		offset: { default: 8 },
+		onShowChange: {},
+		openDelay: { default: 200 },
+		placement: { default: "top" },
+		rounded: { default: "md" },
+		size: { default: "md" },
+		strategy: { default: "fixed" },
+		teleportTo: {
+			type: [Boolean, String],
+			default: "body"
+		}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /* @__PURE__ */ f(["show-change"], ["update:modelValue"]),
+	setup(d, { emit: f }) {
+		let b = y(), x = f, S = d, { merged: C, mounted: w, rootBind: T, arrowBind: E, triggerBind: D, contentBind: O, setArrowRef: k, setTriggerRef: A, setContentRef: j } = r(S, {
+			offset: 8,
+			size: "md",
+			arrow: !0,
+			color: "dark",
+			rounded: "md",
+			closeDelay: 0,
+			openDelay: 200,
+			placement: "top",
+			strategy: "fixed",
+			teleportTo: "body"
+		}, {
+			show: v(d, "modelValue"),
+			onShowChange: (e) => {
+				S.onShowChange?.(e), x("show-change", e);
+			}
+		}), M = o(() => e(b, "trigger")), N = o(() => n(b, "default", C.value.content)), P = o(() => C.value.teleportTo === !1), F = o(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo);
+		return (e, n) => (h(), l(i, null, [M.value ? (h(), l("div", m(p({ key: 0 }, _(T))), [u("div", p({ ref: _(A) }, _(D)), [(h(), s(g(_(t)(_(b), "trigger"))))], 16)], 16)) : c("", !0), (h(), s(a, {
+			to: F.value,
+			disabled: P.value
+		}, [_(w) ? (h(), l("div", p({
+			key: 0,
+			ref: _(j)
+		}, _(O)), [(h(), s(g(N.value))), _(E) ? (h(), l("div", p({
+			key: 0,
+			ref: _(k)
+		}, _(E)), null, 16)) : c("", !0)], 16)) : c("", !0)], 8, ["to", "disabled"]))], 64));
+	}
+});
+//#endregion
+export { b as default };

package/dist/Components/Tooltip/composables/useTooltip.d.ts

@@ -0,0 +1,50 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
+import { TooltipOwnProps, TooltipProps } from '../tooltip.types';
+type TooltipLibDefaults = LibDefaultsShape<TooltipOwnProps, "size" | "arrow" | "color" | "offset" | "rounded" | "strategy" | "openDelay" | "placement" | "closeDelay" | "teleportTo">;
+type TooltipMerged = MergeLibDefaults<TooltipOwnProps, TooltipLibDefaults>;
+export type TooltipOptions = {
+    /**
+     * Called when `show` should change (controlled state).
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Whether the tooltip is visible (`defineModel()` / `v-model`).
+     *
+     * @default false
+     */
+    show?: Ref<boolean>;
+};
+export declare function useTooltip(props: TooltipOwnProps, libDefaults: TooltipLibDefaults, options?: TooltipOptions): {
+    show: import('vue').ComputedRef<boolean>;
+    merged: import('vue').ComputedRef<TooltipMerged>;
+    mounted: Ref<boolean, boolean>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Omit<Omit<TooltipProps, "color" | "offset" | "size" | "classes" | "customProps" | "rounded" | "disabled" | "placement" | "strategy" | "teleportTo" | "content" | "arrow" | "closeDelay" | "openDelay">, "anchorEl" | "onShowChange">>>;
+    tooltipId: string;
+    arrowBind: import('vue').ComputedRef<({
+        "aria-hidden": boolean;
+        class: string;
+    } & object & Record<"class", string>) | null>;
+    isPortaled: import('vue').ComputedRef<boolean>;
+    triggerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        onBlur: () => void;
+        onFocus: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+        onPointerenter: () => void;
+        onPointerleave: () => void;
+        "aria-describedby": string | undefined;
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    contentBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+        id: string;
+        role: string;
+        style: {
+            zIndex: number;
+        };
+        class: string;
+    }, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    setArrowRef: (element: null | Element | ComponentPublicInstance) => void;
+    setTriggerRef: (element: null | Element | ComponentPublicInstance) => void;
+    setContentRef: (element: null | Element | ComponentPublicInstance) => void;
+};
+export {};

package/dist/Components/Tooltip/composables/useTooltip.js

@@ -0,0 +1,208 @@
+import { mergePartBind as e, resolveVnodeRefElement as t, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
+import { computed as r, nextTick as i, onBeforeUnmount as a, ref as o, toValue as s, useAttrs as c, useId as l, watch as u } from "vue";
+import { get as d, omit as te } from "es-toolkit/compat";
+import { LAYER_STACK_BASE_Z_INDEX as f, acquireLayerStackOrder as p, cn as m, createPositionable as ne, mergeBridgeUILayeredClasses as h, pushLayerStack as g, splitComponentProps as _ } from "@bridge-ui/core";
+import { colorProps as v, roundedProps as y, sizeProps as re } from "@bridge-ui/core/Tokens/Tooltip";
+//#region src/Components/Tooltip/composables/useTooltip.ts
+var b = [
+	"size",
+	"arrow",
+	"color",
+	"offset",
+	"classes",
+	"content",
+	"rounded",
+	"disabled",
+	"strategy",
+	"openDelay",
+	"placement",
+	"closeDelay",
+	"teleportTo",
+	"customProps"
+];
+function x(x, ie, S = {}) {
+	let C = c(), w = l(), T = o(!1), E = o(""), D = o(null), O = o(null), k = o(null), A = null, j = !1, M = null, N = null, P = null, F = null, I = o(f), L = r(() => s(S.show ?? !1));
+	function R(e) {
+		S.show && (S.show.value = e), S.onShowChange?.(e);
+	}
+	let z = r(() => _({
+		bridgeKeys: b,
+		props: {
+			...C,
+			...x
+		}
+	})), { merged: B, entry: V } = ee({
+		libDefaults: ie,
+		componentName: "Tooltip",
+		props: () => z.value.componentProps
+	}), H = r(() => B.value.customProps), U = n({
+		entry: V,
+		props: () => z.value.componentProps
+	}), W = r(() => B.value.teleportTo !== !1), G = r(() => d(h(v, V.value?.tokens?.color), B.value.color)), K = r(() => d(h(re, V.value?.tokens?.size), B.value.size)), q = r(() => d(h(y, V.value?.tokens?.rounded), B.value.rounded)), J = r(() => te(z.value.inheritedAttrs, ["anchorEl", "onShowChange"]));
+	function Y() {
+		P !== null && (clearTimeout(P), P = null), F !== null && (clearTimeout(F), F = null);
+	}
+	function ae() {
+		return x.anchorEl ?? k.value;
+	}
+	function X() {
+		if (B.value.disabled) return;
+		Y();
+		let e = B.value.openDelay;
+		if (e <= 0) {
+			R(!0);
+			return;
+		}
+		P = setTimeout(() => {
+			P = null, R(!0);
+		}, e);
+	}
+	function Z() {
+		Y();
+		let e = B.value.closeDelay;
+		if (e <= 0) {
+			R(!1);
+			return;
+		}
+		F = setTimeout(() => {
+			F = null, R(!1);
+		}, e);
+	}
+	function oe() {
+		X();
+	}
+	function se() {
+		Z();
+	}
+	function ce() {
+		X();
+	}
+	function le() {
+		Z();
+	}
+	function ue(e) {
+		e.key !== "Escape" || !L.value || (e.preventDefault(), Y(), R(!1));
+	}
+	function Q() {
+		j = !1, N?.destroy(), N = null;
+	}
+	function de() {
+		Q();
+		let e = ae(), t = O.value;
+		!L.value || !e || !t || (N = ne({
+			floating: t,
+			reference: e,
+			shiftCrossAxis: !1,
+			offset: B.value.offset,
+			strategy: B.value.strategy,
+			placement: B.value.placement,
+			arrow: B.value.arrow ? () => D.value : void 0,
+			onReferenceHidden: () => {
+				!j || !L.value || (Y(), R(!1));
+			}
+		}), N.start(), i(() => {
+			j = !0;
+		}));
+	}
+	function $() {
+		M?.release(), M = null, E.value = "", I.value = f;
+	}
+	function fe() {
+		if ($(), !L.value) {
+			A = null;
+			return;
+		}
+		A === null && (A = p());
+		function e() {
+			L.value && (Y(), R(!1));
+		}
+		M = g({
+			order: A,
+			lockScroll: !1,
+			onEscape: e
+		}), E.value = M.id, I.value = M.zIndex;
+	}
+	function pe(e) {
+		k.value = t(e);
+	}
+	function me(e) {
+		O.value = t(e);
+	}
+	function he(e) {
+		D.value = t(e);
+	}
+	u(L, (e) => {
+		if (e) {
+			T.value = !0;
+			return;
+		}
+		T.value = !1;
+	}, { immediate: !0 }), u([
+		L,
+		T,
+		() => x.anchorEl,
+		() => B.value.arrow,
+		() => B.value.offset,
+		() => B.value.strategy,
+		() => B.value.placement
+	], async () => {
+		if (!L.value || !T.value) {
+			Q();
+			return;
+		}
+		await i(), de();
+	}, { flush: "post" }), u(L, () => {
+		fe();
+	}, { immediate: !0 }), a(() => {
+		Y(), Q(), $();
+	});
+	let ge = r(() => e(H.value?.root, J.value, m({
+		"relative inline-flex": !0,
+		[d(U.value, "root") ?? ""]: !0
+	}))), _e = r(() => e(H.value?.trigger, {}, {
+		onBlur: le,
+		onFocus: ce,
+		onKeydown: ue,
+		onPointerenter: oe,
+		onPointerleave: se,
+		"aria-describedby": L.value ? w : void 0,
+		class: m({
+			"inline-flex w-fit max-w-full outline-hidden": !0,
+			[d(U.value, "trigger") ?? ""]: !0
+		})
+	})), ve = r(() => e(H.value?.content, {}, {
+		id: w,
+		role: "tooltip",
+		style: { zIndex: I.value },
+		class: m({
+			"pointer-events-none absolute w-max max-w-xs font-medium shadow-md": !0,
+			[G.value?.content ?? ""]: !0,
+			[K.value?.content ?? ""]: !0,
+			[q.value ?? ""]: !0,
+			[d(U.value, "content") ?? ""]: !0
+		})
+	}));
+	return {
+		show: L,
+		merged: B,
+		mounted: T,
+		rootBind: ge,
+		tooltipId: w,
+		arrowBind: r(() => B.value.arrow ? e(H.value?.arrow, {}, {
+			"aria-hidden": !0,
+			class: m({
+				"pointer-events-none absolute size-2 rotate-45": !0,
+				[G.value?.arrow ?? ""]: !0,
+				[d(U.value, "arrow") ?? ""]: !0
+			})
+		}) : null),
+		isPortaled: W,
+		triggerBind: _e,
+		contentBind: ve,
+		setArrowRef: he,
+		setTriggerRef: pe,
+		setContentRef: me
+	};
+}
+//#endregion
+export { x as useTooltip };

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

@@ -0,0 +1,4 @@
+export { useTooltip } from './composables/useTooltip';
+export type { TooltipOptions } from './composables/useTooltip';
+export type { TooltipClasses, TooltipColorOverrides, TooltipCustomProps, TooltipEmits, TooltipOwnProps, TooltipProps, TooltipRoundedOverrides, TooltipSizeOverrides, TooltipSlots, } from './tooltip.types';
+export { default as Tooltip } from './Tooltip.vue';

package/dist/Components/Tooltip/index.js

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

package/dist/Components/Tooltip/tooltip.types.d.ts

@@ -0,0 +1,166 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { MergeHtmlProps, MergeProps, PositionPlacement, PositionStrategy, TooltipColor, TooltipRounded, TooltipSize } from '@bridge-ui/core';
+export interface TooltipSizeOverrides {}
+export interface TooltipColorOverrides {}
+export interface TooltipRoundedOverrides {}
+export interface TooltipClasses {
+    /**
+     * The classes to apply to the arrow.
+     */
+    arrow?: string;
+    /**
+     * The classes to apply to the content.
+     */
+    content?: string;
+    /**
+     * The classes to apply to the root.
+     */
+    root?: string;
+    /**
+     * The classes to apply to the trigger.
+     */
+    trigger?: string;
+}
+export interface TooltipCustomProps {
+    /**
+     * Props forwarded to the arrow element.
+     */
+    arrow?: HTMLAttributes;
+    /**
+     * Props forwarded to the floating tooltip panel.
+     */
+    content?: HTMLAttributes;
+    /**
+     * Props forwarded to the root wrapper (contains the trigger).
+     */
+    root?: HTMLAttributes;
+    /**
+     * Props forwarded to the trigger wrapper.
+     */
+    trigger?: HTMLAttributes;
+}
+export interface TooltipEmits {
+    /**
+     * Emitted when `show` should change (controlled state without `v-model`).
+     */
+    "show-change": [show: boolean];
+}
+/**
+ * Anchored tooltip. Visibility uses `v-model` (omit for uncontrolled hover/focus
+ * when using the `trigger` slot). Anchor with `anchorEl` or put the opener in
+ * the `trigger` slot. Use `content` for plain text, or the default slot for
+ * custom panel body (default slot wins when both are set).
+ */
+export interface TooltipOwnProps {
+    /**
+     * Element that anchors the tooltip panel. When set, it is used
+     * for positioning instead of the `trigger` slot wrapper.
+     * Prefer this when the opener lives outside the `Tooltip` or is controlled manually.
+     * Not merged into Bridge defaults (DOM nodes must not be deep-merged).
+     *
+     * @default undefined
+     */
+    anchorEl?: null | HTMLElement;
+    /**
+     * Whether the tooltip shows an arrow pointing at the trigger.
+     *
+     * @default true
+     */
+    arrow?: boolean;
+    /**
+     * The classes to apply to the tooltip.
+     *
+     * @default undefined
+     */
+    classes?: TooltipClasses;
+    /**
+     * Delay in ms before closing after pointer leave / blur.
+     *
+     * @default 0
+     */
+    closeDelay?: number;
+    /**
+     * The color of the tooltip.
+     *
+     * @default "dark"
+     */
+    color?: MergeProps<TooltipColor, TooltipColorOverrides>;
+    /**
+     * Plain text for the tooltip panel. Prefer the default slot for custom markup.
+     *
+     * @default undefined
+     */
+    content?: string;
+    /**
+     * Extra props for internal parts (`root`, `trigger`, `content`, `arrow`).
+     * Root HTML attributes stay on the component top level.
+     *
+     * @default undefined
+     */
+    customProps?: TooltipCustomProps;
+    /**
+     * When true, the tooltip does not open on hover or focus.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Gap between the trigger and the tooltip panel (px).
+     *
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Called when `show` should change (controlled state without `v-model`).
+     *
+     * @default undefined
+     */
+    onShowChange?: (show: boolean) => void;
+    /**
+     * Delay in ms before opening after pointer enter / focus.
+     *
+     * @default 200
+     */
+    openDelay?: number;
+    /**
+     * Preferred placement of the tooltip relative to the anchor (Floating UI).
+     *
+     * @default "top"
+     */
+    placement?: PositionPlacement;
+    /**
+     * The roundedness of the tooltip panel.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<TooltipRounded, TooltipRoundedOverrides>;
+    /**
+     * The size of the tooltip.
+     *
+     * @default "md"
+     */
+    size?: MergeProps<TooltipSize, TooltipSizeOverrides>;
+    /**
+     * CSS position strategy for the floating panel.
+     *
+     * @default "fixed"
+     */
+    strategy?: PositionStrategy;
+    /**
+     * Where to portal the tooltip panel. Pass `false` to render in place.
+     *
+     * @default "body"
+     */
+    teleportTo?: false | string;
+}
+export interface TooltipSlots {
+    /**
+     * Custom panel body. Wins over the `content` prop when both are set.
+     */
+    default?: Slot<undefined>;
+    /**
+     * The trigger element that opens the tooltip.
+     */
+    trigger?: Slot<undefined>;
+}
+export type TooltipProps = MergeHtmlProps<TooltipOwnProps, HTMLAttributes>;

package/dist/Provider/createBridgeUIApi.js

@@ -17,7 +17,8 @@ function o(o, s) {
 		partials: [l.value]
 	}));
 	function m(e) {
-		c.value = a(c.value, e);
+		let { icons: t, ...n } = e, r = a(c.value, n);
+		t !== void 0 && (r.icons = t), c.value = r;
 	}
 	function h(e) {
 		l.value = r({

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+export { setI18nAdapterForTests, useI18nAdapter } from './Adapters/I18n';
+export { setIconAdapterForTests, useIconAdapter } from './Adapters/Icon';
+export type { IconElement, IconSource, SemanticIconName, } from './Adapters/Icon';
 export { Alert, useAlert } from './Components/Alert';
 export type { AlertClasses, AlertColorOverrides, AlertPaddingOverrides, AlertProps, AlertRoundedOverrides, AlertShadowOverrides, AlertSlots, AlertVariantOverrides, } from './Components/Alert';
 export { Avatar } from './Components/Avatar';
@@ -70,8 +73,11 @@ export { Textarea, useTextarea } from './Components/Textarea';
 export type { TextareaClasses, TextareaCustomProps, TextareaOwnProps, TextareaProps, TextareaSlots, } from './Components/Textarea';
 export { TextField, useTextField } from './Components/TextField';
 export type { TextFieldClasses, TextFieldCustomProps, TextFieldOwnProps, TextFieldProps, TextFieldSlots, } from './Components/TextField';
+export { Tooltip, useTooltip } from './Components/Tooltip';
+export type { TooltipClasses, TooltipColorOverrides, TooltipCustomProps, TooltipEmits, TooltipOptions, TooltipOwnProps, TooltipProps, TooltipRoundedOverrides, TooltipSizeOverrides, TooltipSlots, } from './Components/Tooltip';
 export { BridgeUIProvider, createBridgeUI, useBridgeUI } from './Provider';
 export type { BridgeUIContextApi } from './Provider';
 export { useBreakpoint, useBridgeUIComponent, useBridgeUIMergedRegistryClasses, } from './Utils';
 export type { UseBreakpointOptions } from './Utils';
-export { BRIDGE_UI_DEFAULT_GLOBAL, cn, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, } from '@bridge-ui/core';
+export { BRIDGE_UI_DEFAULT_GLOBAL, SEMANTIC_ICON_NAMES, cn, createI18nAdapter, createIconAdapter, mergeBridgeUIComponents, mergeBridgeUIGlobal, resolveBridgeUIOptions, resolveMessage, } from '@bridge-ui/core';
+export type { I18nAdapter, IconAdapter, SemanticIconNameOverrides, } from '@bridge-ui/core';