@livestorm/ui-vue 3.0.0 → 4.0.0

package/README.md

@@ -36,7 +36,7 @@ A modern, strongly-typed Vue 3 component library for Livestorm’s design system
   - the logo link of `UiPageHeader` when `showLogo` is enabled;
   - the `@livestorm/ui-vue/utils` entry point: its `useRouteQueryModel` helper is built on the router, so importing this entry requires vue-router to be installed.
 - **Tailwind CSS 4**, since components are styled with Tailwind utility classes.
-- **The Inter font**, which components are designed for. The package never loads it for you: self-host it, or import the optional Google Fonts shortcut once (`import '@livestorm/ui-vue/fonts'`). Without Inter, components fall back to the system font stack.
+- **The Inter font**, which components are designed for. The package never loads it for you: load it yourself, or import the optional self-hosted shortcut once (`import '@livestorm/ui-vue/fonts'`, Inter Variable served from the `inter-ui` dependency). Without Inter, components fall back to the system font stack.
 
 Installing the package also pulls in `@livestorm/ui-tokens` (design tokens) and `@livestorm/ui-icons` (icon utilities).
 
@@ -160,7 +160,7 @@ registerComponents(app, 'Ls')    // <LsButton>, <LsTextField>, ...
 | --- | --- |
 | `@livestorm/ui-vue` | All components and utilities |
 | `@livestorm/ui-vue/style` | Base stylesheet (import once) |
-| `@livestorm/ui-vue/fonts` | Optional: loads Inter from Google Fonts (skip it if you self-host) |
+| `@livestorm/ui-vue/fonts` | Optional: declares Inter Variable from the bundled `inter-ui` package (skip it if you load Inter yourself) |
 | `@livestorm/ui-vue/components-vite` | `registerComponents` for global registration |
 | `@livestorm/ui-vue/integrations` | Toast helpers (`openToast`, ... — call client-side only: toast state is per-process on a server) and translation wiring (`setTranslator`, `UI_VUE_TRANSLATOR`) |
 | `@livestorm/ui-vue/layouts` | Layout components such as the toast container |
@@ -171,4 +171,4 @@ The package ships prebuilt ES modules, so no special bundler configuration is ne
 
 ## Contributing
 
-This package lives in Livestorm's [entropy](https://github.com/livestorm/entropy) monorepo, under `packages/ui-vue`. See that directory's `CONTRIBUTING.md` for architecture, conventions and the release process.
+This package lives in Livestorm's [entropy](https://github.com/livestorm/entropy) monorepo, under `packages/ui-vue`. See that directory's `AGENTS.md` for architecture, conventions and the release process.

package/components-vite.js

@@ -5,7 +5,7 @@ const NAME_REG = /Ui([a-z0-9]+)\./i
 export function registerComponents (app, prefix = 'Ui') {
   app.component('RenderSlot', RenderSlot)
 
-  const componentsLib = import.meta.glob('./src/components/**/Ui+([a-zA-Z0-9]).{js,jsx,vue,ts}', { eager: true })
+  const componentsLib = import.meta.glob(['./src/components/**/Ui*.{js,jsx,vue,ts}', '!./src/components/**/*.*.*'], { eager: true })
   for (const key in componentsLib) {
     const component = componentsLib[key]
     const name = key.match(NAME_REG)[1]
@@ -18,7 +18,7 @@ export function getComponents (prefix = 'Ui') {
 
   componentsMap.RenderSlot = RenderSlot
 
-  const componentsLib = import.meta.glob('./src/components/**/Ui+([a-zA-Z0-9]).{js,jsx,vue,ts}', { eager: true })
+  const componentsLib = import.meta.glob(['./src/components/**/Ui*.{js,jsx,vue,ts}', '!./src/components/**/*.*.*'], { eager: true })
   for (const key in componentsLib) {
     const component = componentsLib[key]
     const name = key.match(NAME_REG)[1]

package/dist/UiButton-uyW8EHRJ.mjs

@@ -0,0 +1,602 @@
+import { l as e, t } from "./UiTooltip-DZcPD6_N.mjs";
+import { RenderSlot as n, useSlotsAsComponents as r } from "./slot.mjs";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, getCurrentInstance as f, mergeProps as p, normalizeClass as m, normalizeStyle as h, openBlock as g, ref as _, renderSlot as v, resolveComponent as y, resolveDynamicComponent as b, toDisplayString as x, toValue as S, unref as C, useSlots as w, watch as T, withCtx as E } from "vue";
+//#region src/composables/useIconSize.ts
+var D = {
+	xs: "size-3",
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6",
+	xl: "size-7"
+};
+function O(e) {
+	return a(() => D[S(e)]);
+}
+var k = {
+	xs: "size-2.5",
+	sm: "size-3.5",
+	md: "size-4",
+	lg: "size-5",
+	xl: "size-6"
+};
+function ee(e) {
+	return a(() => k[S(e)]);
+}
+//#endregion
+//#region src/components/UiAvatar/UiAvatar.vue?vue&type=script&setup=true&lang.ts
+var te = ["data-size", "data-variant"], ne = ["src", "alt"], A = {
+	key: 1,
+	class: "px-0.5 overflow-hidden text-ellipsis whitespace-nowrap",
+	"data-recording-sensitive": ""
+}, j = /*@__PURE__*/ d({
+	__name: "UiAvatar",
+	props: {
+		src: { default: null },
+		firstName: { default: null },
+		lastName: { default: null },
+		customText: { default: null },
+		size: { default: "md" },
+		variant: { default: "default" },
+		alt: { default: void 0 },
+		color: { default: null },
+		icon: { default: "i-ph-user-fill" }
+	},
+	setup(e) {
+		let t = e, n = a(() => {
+			if (t.variant !== "more" && (!t.src || r.value) && t.color) return {
+				backgroundColor: t.color,
+				color: "white"
+			};
+		}), r = _(!1);
+		T(() => t.src, () => {
+			r.value = !1;
+		});
+		let i = a(() => t.customText ? t.customText : ((t.firstName?.trim()?.[0] ?? "") + (t.lastName?.trim()?.[0] ?? "")).toUpperCase() || null), o = a(() => `${t.firstName ?? ""} ${t.lastName ?? ""}`.trim()), u = a(() => {
+			switch (t.size) {
+				case "sm": return "w-8 h-8 text-content-legends-bold-md";
+				case "md": return "w-10 h-10 text-content-text-md-bold";
+				case "lg": return "w-12 h-12 text-content-text-lg-bold";
+				case "xl": return "w-16 h-16 text-title-md-bold";
+				case "10xl": return "w-32 h-32 text-title-lg-bold";
+				default: return "w-6 h-6 text-content-badges-bold-md";
+			}
+		}), d = a(() => {
+			switch (t.size) {
+				case "sm": return "w-3 h-3";
+				case "md": return "w-3.5 h-3.5";
+				case "lg": return "w-4 h-4";
+				case "xl": return "w-6 h-6";
+				case "10xl": return "w-8 h-8";
+				default: return "w-2.5 h-2.5";
+			}
+		}), f = a(() => {
+			switch (t.variant) {
+				case "more": return "bg-surface-neutral-100 text-text-neutral-base";
+				default: return "bg-surface-neutral-invert-bg-main text-text-neutral-invert-base";
+			}
+		}), p = w(), y = a(() => !!p.badge), b = a(() => y.value ? ["ui-avatar relative inline-flex shrink-0", u.value] : [
+			"ui-avatar inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden text-center",
+			u.value,
+			f.value
+		]), S = a(() => y.value ? ["inline-flex items-center justify-center w-full h-full rounded-full overflow-hidden text-center", f.value] : "contents");
+		return (t, a) => (g(), c("span", {
+			class: m(b.value),
+			style: h(y.value ? void 0 : n.value),
+			"data-size": e.size,
+			"data-variant": e.variant,
+			"data-testid": "ui-avatar"
+		}, [l("span", {
+			class: m(S.value),
+			style: h(y.value ? n.value : void 0)
+		}, [e.src && !r.value ? (g(), c("img", {
+			key: 0,
+			src: e.src,
+			alt: e.alt ?? o.value,
+			class: "w-full h-full object-cover",
+			onError: a[0] ||= (e) => r.value = !0
+		}, null, 40, ne)) : i.value ? (g(), c("span", A, x(i.value), 1)) : (g(), c("span", {
+			key: 2,
+			class: m([e.icon, d.value])
+		}, null, 2))], 6), y.value ? v(t.$slots, "badge", { key: 0 }) : s("", !0)], 14, te));
+	}
+}), M = /* @__PURE__ */ e({ default: () => N }), N = j, P = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, F = [
+	"xs",
+	"sm",
+	"md",
+	"lg"
+], I = [
+	"primary",
+	"neutral",
+	"success",
+	"warning",
+	"error",
+	"neutral-invert"
+], L = {
+	cta: {
+		primary: "bg-actions-primary-idle",
+		neutral: "bg-actions-neutral-idle",
+		"neutral-invert": "bg-actions-neutral-invert-idle",
+		success: "bg-actions-success-idle",
+		warning: "bg-actions-warning-idle",
+		error: "bg-actions-danger-idle"
+	},
+	"cta-alpha": {
+		primary: "bg-actions-primary-idle-alpha-strong",
+		neutral: "bg-actions-neutral-idle-alpha-strong",
+		"neutral-invert": "bg-actions-neutral-invert-idle-alpha-strong",
+		success: "bg-actions-success-idle-alpha-strong",
+		warning: "bg-actions-warning-idle-alpha-strong",
+		error: "bg-actions-danger-idle-alpha-strong"
+	},
+	secondary: {
+		primary: "bg-actions-primary-idle-alpha-light",
+		neutral: "bg-actions-neutral-idle-alpha-light",
+		"neutral-invert": "bg-actions-neutral-invert-idle-alpha-light",
+		success: "bg-actions-success-idle-alpha-light",
+		warning: "bg-actions-warning-idle-alpha-light",
+		error: "bg-actions-danger-idle-alpha-light"
+	}
+}, R = {
+	cta: {
+		primary: "text-actions-neutral-invert-idle",
+		neutral: "text-actions-neutral-invert-idle",
+		"neutral-invert": "text-actions-neutral-idle",
+		success: "text-actions-neutral-invert-idle",
+		warning: "text-actions-neutral-invert-idle",
+		error: "text-actions-neutral-invert-idle"
+	},
+	"cta-alpha": {
+		primary: "text-actions-neutral-invert-idle",
+		neutral: "text-actions-neutral-invert-idle",
+		"neutral-invert": "text-actions-neutral-idle",
+		success: "text-actions-neutral-invert-idle",
+		warning: "text-actions-neutral-invert-idle",
+		error: "text-actions-neutral-invert-idle"
+	},
+	secondary: {
+		primary: "text-actions-primary-idle",
+		neutral: "text-actions-neutral-idle",
+		"neutral-invert": "text-actions-neutral-invert-idle",
+		success: "text-actions-success-idle",
+		warning: "text-actions-warning-idle",
+		error: "text-actions-danger-idle"
+	},
+	tertiary: {
+		primary: "text-actions-primary-idle",
+		neutral: "text-actions-neutral-idle",
+		"neutral-invert": "text-actions-neutral-invert-idle",
+		success: "text-actions-success-idle",
+		warning: "text-actions-warning-idle",
+		error: "text-actions-danger-idle"
+	}
+}, z = {
+	"cta-primary": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-neutral": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-neutral-invert": "group-hover:bg-actions-neutral-hover-overlay",
+	"cta-success": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-warning": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-error": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-primary": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-neutral": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-neutral-invert": "group-hover:bg-actions-neutral-hover-overlay",
+	"cta-alpha-success": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-warning": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-error": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"secondary-primary": "group-hover:bg-actions-primary-hover-overlay",
+	"secondary-neutral": "group-hover:bg-actions-neutral-hover-overlay",
+	"secondary-neutral-invert": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"secondary-success": "group-hover:bg-actions-success-hover-overlay",
+	"secondary-warning": "group-hover:bg-actions-warning-hover-overlay",
+	"secondary-error": "group-hover:bg-actions-danger-hover-overlay",
+	"tertiary-primary": "group-hover:bg-actions-primary-hover-overlay",
+	"tertiary-neutral": "group-hover:bg-actions-neutral-hover-overlay",
+	"tertiary-neutral-invert": "group-hover:bg-actions-neutral-invert-hover-overlay",
+	"tertiary-success": "group-hover:bg-actions-success-hover-overlay",
+	"tertiary-warning": "group-hover:bg-actions-warning-hover-overlay",
+	"tertiary-error": "group-hover:bg-actions-danger-hover-overlay"
+}, B = {
+	"cta-primary": "group-active:bg-actions-primary-pressed-overlay",
+	"cta-neutral": "group-active:bg-actions-neutral-invert-pressed-overlay",
+	"cta-neutral-invert": "group-active:bg-actions-neutral-pressed-overlay",
+	"cta-success": "group-active:bg-actions-success-pressed-overlay",
+	"cta-warning": "group-active:bg-actions-warning-pressed-overlay",
+	"cta-error": "group-active:bg-actions-danger-pressed-overlay",
+	"cta-alpha-primary": "group-active:bg-actions-primary-pressed-overlay",
+	"cta-alpha-neutral": "group-active:bg-actions-neutral-pressed-overlay",
+	"cta-alpha-neutral-invert": "group-active:bg-actions-neutral-invert-pressed-overlay",
+	"cta-alpha-success": "group-active:bg-actions-neutral-pressed-overlay",
+	"cta-alpha-warning": "group-active:bg-actions-danger-pressed-overlay",
+	"cta-alpha-error": "group-active:bg-actions-danger-pressed-overlay",
+	"secondary-primary": "group-active:bg-actions-primary-pressed-overlay",
+	"secondary-neutral": "group-active:bg-actions-neutral-idle-alpha-light",
+	"secondary-neutral-invert": "group-active:bg-actions-neutral-invert-idle-alpha-light",
+	"secondary-success": "group-active:bg-actions-success-pressed-overlay",
+	"secondary-warning": "group-active:bg-actions-warning-pressed-overlay",
+	"secondary-error": "group-active:bg-actions-danger-pressed-overlay",
+	"tertiary-primary": "group-active:bg-actions-primary-pressed-overlay",
+	"tertiary-neutral": "group-active:bg-actions-neutral-pressed-overlay",
+	"tertiary-neutral-invert": "group-active:bg-actions-neutral-invert-pressed-overlay",
+	"tertiary-success": "group-active:bg-actions-success-pressed-overlay",
+	"tertiary-warning": "group-active:bg-actions-warning-pressed-overlay",
+	"tertiary-error": "group-active:bg-actions-danger-pressed-overlay"
+}, V = {
+	"cta-primary": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-neutral": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-neutral-invert": "before:bg-actions-neutral-hover-overlay",
+	"cta-success": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-warning": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-error": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-primary": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-neutral": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-neutral-invert": "before:bg-actions-neutral-hover-overlay",
+	"cta-alpha-success": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-warning": "before:bg-actions-neutral-invert-hover-overlay",
+	"cta-alpha-error": "before:bg-actions-neutral-invert-hover-overlay",
+	"secondary-primary": "before:bg-actions-primary-hover-overlay",
+	"secondary-neutral": "before:bg-actions-neutral-hover-overlay",
+	"secondary-neutral-invert": "before:bg-actions-neutral-invert-hover-overlay",
+	"secondary-success": "before:bg-actions-success-hover-overlay",
+	"secondary-warning": "before:bg-actions-warning-hover-overlay",
+	"secondary-error": "before:bg-actions-danger-hover-overlay",
+	"tertiary-primary": "before:bg-actions-primary-hover-overlay",
+	"tertiary-neutral": "before:bg-actions-neutral-hover-overlay",
+	"tertiary-neutral-invert": "before:bg-actions-neutral-invert-hover-overlay",
+	"tertiary-success": "before:bg-actions-success-hover-overlay",
+	"tertiary-warning": "before:bg-actions-warning-hover-overlay",
+	"tertiary-error": "before:bg-actions-danger-hover-overlay"
+};
+function H(e) {
+	let t = a(() => S(e.variant)), n = a(() => S(e.color)), r = a(() => S(e.disabled) ?? !1), i = a(() => `${t.value}-${n.value}`);
+	return {
+		variant: t,
+		color: n,
+		bgClass: a(() => L[t.value]?.[n.value] ?? ""),
+		textClass: a(() => R[t.value][n.value]),
+		borderClasses: a(() => t.value === "secondary" ? ["border", "border-control-soft-border"] : []),
+		decorationClass: a(() => t.value === "tertiary" ? "[text-decoration-line:var(--control-link-decoration)] underline-offset-3" : ""),
+		overlayClasses: a(() => r.value ? [] : [z[i.value] ?? "", B[i.value] ?? ""]),
+		beforeHoverOverlayClass: a(() => r.value ? "" : V[i.value] ?? "")
+	};
+}
+//#endregion
+//#region src/composables/useControlShape.ts
+var U = {
+	sm: {
+		height: "h-field-sm",
+		radius: "rounded-field-sm",
+		chevron: "size-3.5"
+	},
+	md: {
+		height: "h-field-md",
+		radius: "rounded-field-md",
+		chevron: "size-4"
+	},
+	lg: {
+		height: "h-field-lg",
+		radius: "rounded-field-lg",
+		chevron: "size-5"
+	},
+	xl: {
+		height: "h-field-xl",
+		radius: "rounded-field-xl",
+		chevron: "size-6"
+	}
+}, W = {
+	xs: {
+		height: "h-button-xs",
+		square: "size-button-xs",
+		radius: "rounded-button-xs"
+	},
+	sm: {
+		height: "h-button-sm",
+		square: "size-button-sm",
+		radius: "rounded-button-sm"
+	},
+	md: {
+		height: "h-button-md",
+		square: "size-button-md",
+		radius: "rounded-button-md"
+	},
+	lg: {
+		height: "h-button-lg",
+		square: "size-button-lg",
+		radius: "rounded-button-lg"
+	}
+};
+function G(e, t) {
+	return a(() => e === "field" ? U[S(t)] : W[S(t)]);
+}
+//#endregion
+//#region src/components/UiLoader/UiSpinnerIcon.vue
+var K = /* @__PURE__ */ e({ default: () => X }), q = {}, J = {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24"
+};
+function Y(e, t) {
+	return g(), c("svg", J, [...t[0] ||= [l("circle", {
+		class: "opacity-20",
+		cx: "12",
+		cy: "12",
+		r: "10",
+		stroke: "currentColor",
+		"stroke-width": "4"
+	}, null, -1), l("path", {
+		class: "opacity-100",
+		fill: "currentColor",
+		d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+	}, null, -1)]]);
+}
+var X = /*#__PURE__*/ P(q, [["render", Y]]), re = /*@__PURE__*/ d({
+	__name: "UiLoader",
+	props: { size: {
+		type: String,
+		default: "md",
+		validator: (e) => F.includes(e)
+	} },
+	setup(e) {
+		let t = e, n = O(() => t.size);
+		return (e, t) => (g(), c("div", null, [u(X, { class: m([C(n), "text-current animate-spin"]) }, null, 8, ["class"])]));
+	}
+}), ie = /* @__PURE__ */ e({ default: () => Z }), Z = re, ae = I, oe = ["action", "body"], se = {
+	components: {
+		RenderSlot: n,
+		UiLoader: Z,
+		UiTooltip: t
+	},
+	props: {
+		variant: {
+			type: String,
+			default: "cta"
+		},
+		size: {
+			type: String,
+			default: "md",
+			validator: (e) => F.includes(e)
+		},
+		color: {
+			type: String,
+			default: "primary",
+			validator: (e) => ae.includes(e)
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		showIconLeft: {
+			type: Boolean,
+			default: !0
+		},
+		icon: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		label: {
+			type: String,
+			default: void 0
+		},
+		iconRight: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		textStyle: {
+			type: String,
+			default: "action",
+			validator: (e) => oe.includes(e)
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		imageSource: {
+			type: String,
+			default: void 0
+		},
+		tooltip: {
+			type: [String, Object],
+			default: void 0
+		},
+		type: {
+			type: String,
+			default: "button"
+		},
+		href: {
+			type: String,
+			default: void 0
+		},
+		to: {
+			type: Object,
+			default: void 0
+		},
+		inline: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"click",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(e) {
+		let t = r(), n = a(() => t.default && t.default()), i = a(() => t.icon && t.icon()), o = a(() => !!n.value), s = a(() => !o.value && !n.value && (!!e.icon || !!e.iconRight)), c = a(() => e.disabled || e.loading), l = a(() => {
+			let t = c.value;
+			return e.inline && (t || !e.to && !e.href) ? {
+				is: "span",
+				props: {
+					role: "button",
+					tabindex: t ? -1 : 0,
+					"aria-disabled": t || void 0
+				}
+			} : t && (e.to || e.href) ? {
+				is: "button",
+				props: {
+					type: "button",
+					disabled: !0
+				}
+			} : e.to ? {
+				is: "router-link",
+				props: { to: e.to }
+			} : e.href ? {
+				is: "a",
+				props: { href: e.href }
+			} : {
+				is: "button",
+				props: {
+					type: e.type,
+					disabled: t
+				}
+			};
+		}), u = a(() => !c.value && (!!e.href || !!e.to)), d = ee(() => e.size), p = O(() => e.size), m = a(() => e.textStyle === "body" ? d.value : p.value), h = G("button", () => e.size), g = a(() => {
+			let t = (n.value && typeof n.value[0].children == "string" && n.value[0].children || e.label)?.trim();
+			if (t) return t;
+			if (s.value && e.icon && typeof e.icon == "string") {
+				let t = e.icon.replace(/^i-[a-z0-9]+-/, "").replace(/-/g, " ");
+				return t ? `${t} icon` : "icon";
+			}
+		}), _ = f();
+		function v(e) {
+			c.value ? e.preventDefault() : _?.emit("click", e);
+		}
+		let y = a(() => [
+			s.value ? h.value.square : h.value.height,
+			{ "grid place-items-center": s.value },
+			e.textStyle === "body" ? {
+				"text-content-legends-medium-md": e.size === "xs" || e.size === "sm",
+				"text-content-text-md-regular": e.size === "md",
+				"text-content-text-lg-regular": e.size === "lg"
+			} : {
+				"text-action-button-sm": e.size === "xs" || e.size === "sm",
+				"text-action-button-md": e.size === "md",
+				"text-action-button-lg": e.size === "lg"
+			},
+			e.size === "xs" ? "px-2" : e.size === "sm" ? "px-2.5" : e.size === "lg" ? "px-4" : "px-3",
+			{ "inline-flex": u.value }
+		]), { bgClass: b, textClass: x, borderClasses: S, decorationClass: C, overlayClasses: w } = H({
+			variant: () => e.inline ? "tertiary" : e.variant,
+			color: () => e.color,
+			disabled: c
+		}), E = b, D = a(() => x.value ? [x.value] : []);
+		function k(e) {
+			l.value.is !== "span" || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), e.currentTarget.click());
+		}
+		return T(() => !e.label && !e.icon && !e.iconRight && !n.value, (e) => {
+			e && console.warn("UiButton: You must provide a label or an icon to the button");
+		}, { immediate: !0 }), {
+			component: l,
+			defaultSlot: n,
+			iconSlot: i,
+			hasLabel: o,
+			isLink: u,
+			iconSizeClasses: m,
+			trailingIconSizeClasses: d,
+			shape: h,
+			buttonClasses: y,
+			bgClasses: E,
+			focusRingClasses: "group-focus-visible:focus-ring",
+			textClasses: D,
+			borderClasses: S,
+			decorationClass: C,
+			overlayClasses: w,
+			isSquare: s,
+			finalDisabled: c,
+			labelFinal: g,
+			onClick: v,
+			onInlineKeydown: k
+		};
+	}
+}, ce = /* @__PURE__ */ e({ default: () => $ }), le = { class: "button-wrapper flex items-center whitespace-nowrap h-full relative z-20" }, ue = ["src", "alt"];
+function Q(e, t, n, r, a, d) {
+	let f = y("RenderSlot"), h = y("UiLoader"), _ = y("UiTooltip");
+	return n.inline ? (g(), o(b(r.component.is), p({ key: 0 }, r.component.props, {
+		class: ["ui-button inline -mx-0.5 px-0.5 py-0.5 box-decoration-clone text-left font-semibold underline-offset-3 focus-indicator-none focus-visible:focus-ring", [
+			r.textClasses,
+			r.decorationClass,
+			r.finalDisabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer hover:underline"
+		]],
+		"data-testid": "ui-button",
+		onClick: r.onClick,
+		onKeydown: r.onInlineKeydown,
+		onMouseenter: t[0] ||= (t) => e.$emit("mouseenter"),
+		onMouseleave: t[1] ||= (t) => e.$emit("mouseleave")
+	}), {
+		default: E(() => [u(f, { vnodes: r.defaultSlot }, null, 8, ["vnodes"])]),
+		_: 1
+	}, 16, [
+		"class",
+		"onClick",
+		"onKeydown"
+	])) : (g(), o(b(r.component.is), p({ key: 1 }, r.component.props, {
+		"aria-label": !r.isLink || r.isSquare ? r.labelFinal : void 0,
+		class: ["ui-button group align-center flex justify-center relative transition-all duration-150 focus-indicator-none", [
+			r.shape.radius,
+			r.buttonClasses,
+			r.textClasses,
+			{ "cursor-pointer": !r.finalDisabled },
+			{ "cursor-not-allowed": r.finalDisabled },
+			{ "opacity-50": n.disabled }
+		]],
+		"data-testid": "ui-button",
+		onClick: r.onClick,
+		onMouseenter: t[2] ||= (t) => e.$emit("mouseenter"),
+		onMouseleave: t[3] ||= (t) => e.$emit("mouseleave")
+	}), {
+		default: E(() => [
+			l("div", { class: m(["absolute h-full top-0 left-0 z-0 rounded-[inherit] w-full", [
+				r.bgClasses,
+				r.borderClasses,
+				r.focusRingClasses
+			]]) }, null, 2),
+			l("div", { class: m(["button-overlay absolute h-full top-0 left-0 z-10 rounded-[inherit] w-full", r.overlayClasses]) }, null, 2),
+			u(_, { content: typeof n.tooltip == "string" ? n.tooltip : n.tooltip?.content }, {
+				default: E(() => [l("div", le, [
+					n.loading ? (g(), o(h, {
+						key: 0,
+						size: n.size,
+						class: m({ "mr-2": r.hasLabel })
+					}, null, 8, ["size", "class"])) : n.showIconLeft ? (g(), c(i, { key: 1 }, [r.iconSlot ? (g(), c("div", {
+						key: 0,
+						class: m([[r.iconSizeClasses, { "mr-2": r.hasLabel }], "shrink-0"])
+					}, [u(f, { vnodes: r.iconSlot }, null, 8, ["vnodes"])], 2)) : n.imageSource ? (g(), c("div", {
+						key: 1,
+						class: m([[r.iconSizeClasses, { "mr-2": r.hasLabel }], "shrink-0"])
+					}, [l("img", {
+						src: n.imageSource,
+						alt: `${r.labelFinal} button image`
+					}, null, 8, ue)], 2)) : n.icon ? (g(), c("div", {
+						key: 2,
+						class: m([[
+							n.icon,
+							r.iconSizeClasses,
+							{ "mr-2": r.hasLabel }
+						], "shrink-0"]),
+						"data-testid": "ui-button-icon"
+					}, null, 2)) : s("", !0)], 64)) : s("", !0),
+					l("span", { class: m(["content w-full", r.decorationClass]) }, [u(f, { vnodes: r.defaultSlot }, null, 8, ["vnodes"])], 2),
+					n.iconRight ? (g(), c("div", {
+						key: 2,
+						class: m([[
+							n.iconRight,
+							r.trailingIconSizeClasses,
+							{ "ml-2": r.hasLabel }
+						], "shrink-0"]),
+						"data-testid": "ui-button-icon-right"
+					}, null, 2)) : s("", !0)
+				])]),
+				_: 1
+			}, 8, ["content"])
+		]),
+		_: 1
+	}, 16, [
+		"aria-label",
+		"class",
+		"onClick"
+	]));
+}
+var $ = /*#__PURE__*/ P(se, [["render", Q]]);
+//#endregion
+export { X as a, H as c, M as d, O as f, ie as i, P as l, ce as n, K as o, Z as r, G as s, $ as t, N as u };