@studiolxd/brand 46.0.0 → 47.1.0

package/dist/tooltip.js

@@ -1,60 +1,64 @@
 'use client';
 import './tooltip.css';
-import { forwardRef as e, useId as t, useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Tooltip as a } from "@base-ui/react/tooltip";
+import { n as e } from "./_shared/portal-container.js";
+import { forwardRef as t, useId as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Tooltip as o } from "@base-ui/react/tooltip";
 //#region src/stories/atoms/Tooltip/Tooltip.tsx
-function o({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
-	return /* @__PURE__ */ r(a.Provider, {
+function s({ children: e, delayDuration: t = 0, skipDelayDuration: n }) {
+	return /* @__PURE__ */ i(o.Provider, {
 		delay: t,
 		...n === void 0 ? {} : { timeout: n },
 		children: e
 	});
 }
-function s(e, t) {
+function c(e, t) {
 	let n = parseFloat(e);
 	return Number.isNaN(n) ? 0 : e.endsWith("rem") ? n * parseFloat(getComputedStyle(document.documentElement).fontSize) : e.endsWith("em") ? n * parseFloat(getComputedStyle(t).fontSize) : n;
 }
-function c() {
+function l() {
 	let e = document.documentElement;
-	return s(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
+	return c(getComputedStyle(e).getPropertyValue("--tooltip-offset").trim(), e);
 }
-var l = e(function({ label: e, children: o, side: s = "top", align: l = "center", sideOffset: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, describe: h = !0, className: g, ..._ }, v) {
-	let y = t(), [b, x] = n(f ?? !1), S = d ?? b;
-	return /* @__PURE__ */ i(a.Root, {
-		open: d,
-		defaultOpen: f,
+var u = t(function({ label: t, children: s, side: c = "top", align: u = "center", sideOffset: d, open: f, defaultOpen: p, onOpenChange: m, delayDuration: h, describe: g = !0, container: _, className: v, ...y }, b) {
+	let x = e(_), S = n(), [C, w] = r(p ?? !1), T = f ?? C;
+	return /* @__PURE__ */ a(o.Root, {
+		open: f,
+		defaultOpen: p,
 		onOpenChange: (e) => {
-			d === void 0 && x(e), p?.(e);
+			f === void 0 && w(e), m?.(e);
 		},
-		children: [/* @__PURE__ */ r(a.Trigger, {
-			ref: v,
-			render: o,
-			"aria-describedby": S && h ? y : void 0,
-			...m === void 0 ? {} : { delay: m },
-			..._
-		}), /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ r(a.Positioner, {
-			className: "tooltip__positioner",
-			side: s,
-			align: l,
-			sideOffset: u ?? c,
-			children: /* @__PURE__ */ i(a.Popup, {
-				id: y,
-				role: "tooltip",
-				className: ["tooltip", g].filter(Boolean).join(" "),
-				children: [e, /* @__PURE__ */ r(a.Arrow, {
-					className: "tooltip__arrow",
-					children: /* @__PURE__ */ r("svg", {
-						width: "10",
-						height: "5",
-						viewBox: "0 0 30 10",
-						preserveAspectRatio: "none",
-						children: /* @__PURE__ */ r("polygon", { points: "0,0 30,0 15,10" })
-					})
-				})]
+		children: [/* @__PURE__ */ i(o.Trigger, {
+			ref: b,
+			render: s,
+			"aria-describedby": T && g ? S : void 0,
+			...h === void 0 ? {} : { delay: h },
+			...y
+		}), /* @__PURE__ */ i(o.Portal, {
+			container: x,
+			children: /* @__PURE__ */ i(o.Positioner, {
+				className: "tooltip__positioner",
+				side: c,
+				align: u,
+				sideOffset: d ?? l,
+				children: /* @__PURE__ */ a(o.Popup, {
+					id: S,
+					role: "tooltip",
+					className: ["tooltip", v].filter(Boolean).join(" "),
+					children: [t, /* @__PURE__ */ i(o.Arrow, {
+						className: "tooltip__arrow",
+						children: /* @__PURE__ */ i("svg", {
+							width: "10",
+							height: "5",
+							viewBox: "0 0 30 10",
+							preserveAspectRatio: "none",
+							children: /* @__PURE__ */ i("polygon", { points: "0,0 30,0 15,10" })
+						})
+					})]
+				})
 			})
-		}) })]
+		})]
 	});
 });
 //#endregion
-export { l as Tooltip, o as TooltipProvider };
+export { u as Tooltip, s as TooltipProvider };

package/dist/user-menu.js

@@ -1,85 +1,91 @@
 'use client';
 import './user-menu.css';
-import { Icon as e } from "./icon.js";
-import { Avatar as t } from "./avatar.js";
-import { NumberBadge as n } from "./number-badge.js";
-import { n as r } from "./_shared/dropdownitems.js";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Menu as s } from "@base-ui/react/menu";
+import { n as e } from "./_shared/brandmessagescontext.js";
+import { Icon as t } from "./icon.js";
+import { n } from "./_shared/portal-container.js";
+import { Avatar as r } from "./avatar.js";
+import { NumberBadge as i } from "./number-badge.js";
+import { n as a } from "./_shared/dropdownitems.js";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Menu as l } from "@base-ui/react/menu";
 //#region src/stories/molecules/UserMenu/UserMenu.tsx
-function c(e) {
+function u(e) {
 	let t = parseFloat(e);
 	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
 }
-function l() {
+function d() {
 	let e = document.documentElement;
-	return c(getComputedStyle(e).getPropertyValue("--user-menu-offset").trim());
+	return u(getComputedStyle(e).getPropertyValue("--user-menu-offset").trim());
 }
-function u({ children: e, ...t }) {
-	return /* @__PURE__ */ a("a", {
+function f({ children: e, ...t }) {
+	return /* @__PURE__ */ s("a", {
 		...t,
 		children: e
 	});
 }
-function d(e) {
+function p(e) {
 	return ["user-menu__item", e ? "user-menu__item--destructive" : ""].filter(Boolean).join(" ");
 }
-function f({ name: c, email: f, avatarUrl: p, notificationCount: m, items: h = [], label: g, compact: _ = !1, renderLink: v = u, onOpenChange: y, defaultOpen: b }) {
-	return /* @__PURE__ */ o(s.Root, {
-		onOpenChange: (e) => y?.(e),
-		defaultOpen: b,
-		children: [/* @__PURE__ */ o(s.Trigger, {
-			className: ["user-menu__trigger", _ ? "user-menu__trigger--compact" : ""].filter(Boolean).join(" "),
-			"aria-label": g ?? `Cuenta de ${c}`,
+function m({ name: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [], label: v, compact: y = !1, renderLink: b = f, onOpenChange: x, defaultOpen: S }) {
+	let C = e("userMenu"), w = n(void 0);
+	return /* @__PURE__ */ c(l.Root, {
+		onOpenChange: (e) => x?.(e),
+		defaultOpen: S,
+		children: [/* @__PURE__ */ c(l.Trigger, {
+			className: ["user-menu__trigger", y ? "user-menu__trigger--compact" : ""].filter(Boolean).join(" "),
+			"aria-label": v ?? C("trigger")(u),
 			children: [
-				/* @__PURE__ */ o("span", {
+				/* @__PURE__ */ c("span", {
 					className: "user-menu__avatar-wrap",
-					children: [/* @__PURE__ */ a(t, {
-						src: p,
-						name: c,
+					children: [/* @__PURE__ */ s(r, {
+						src: h,
+						name: u,
 						alt: "",
 						size: "sm"
-					}), !!m && m > 0 && /* @__PURE__ */ a(n, {
-						count: m,
+					}), !!g && g > 0 && /* @__PURE__ */ s(i, {
+						count: g,
 						variant: "danger",
-						"aria-label": `${m} notificaciones sin leer`,
+						"aria-label": C("unread")(g),
 						className: "user-menu__notification-badge"
 					})]
 				}),
-				!_ && /* @__PURE__ */ a("span", {
+				!y && /* @__PURE__ */ s("span", {
 					className: "user-menu__name",
-					children: c
+					children: u
 				}),
-				/* @__PURE__ */ a(e, {
+				/* @__PURE__ */ s(t, {
 					name: "chevron",
 					size: "sm",
 					className: "user-menu__chevron"
 				})
 			]
-		}), /* @__PURE__ */ a(s.Portal, { children: /* @__PURE__ */ a(s.Positioner, {
-			className: "user-menu__positioner",
-			sideOffset: l,
-			align: "start",
-			children: /* @__PURE__ */ o(s.Popup, {
-				className: "user-menu__content",
-				children: [/* @__PURE__ */ o("div", {
-					className: "user-menu__header",
-					children: [/* @__PURE__ */ a("span", {
-						className: "user-menu__header-name",
-						children: c
-					}), /* @__PURE__ */ a("span", {
-						className: "user-menu__header-email",
-						children: f
-					})]
-				}), h.length > 0 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(s.Separator, { className: "user-menu__separator" }), r({
-					items: h,
-					itemClass: d,
-					separatorClass: "user-menu__separator",
-					renderLink: v
-				})] })]
+		}), /* @__PURE__ */ s(l.Portal, {
+			container: w,
+			children: /* @__PURE__ */ s(l.Positioner, {
+				className: "user-menu__positioner",
+				sideOffset: d,
+				align: "start",
+				children: /* @__PURE__ */ c(l.Popup, {
+					className: "user-menu__content",
+					children: [/* @__PURE__ */ c("div", {
+						className: "user-menu__header",
+						children: [/* @__PURE__ */ s("span", {
+							className: "user-menu__header-name",
+							children: u
+						}), /* @__PURE__ */ s("span", {
+							className: "user-menu__header-email",
+							children: m
+						})]
+					}), _.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Separator, { className: "user-menu__separator" }), a({
+						items: _,
+						itemClass: p,
+						separatorClass: "user-menu__separator",
+						renderLink: b
+					})] })]
+				})
 			})
-		}) })]
+		})]
 	});
 }
 //#endregion
-export { f as UserMenu };
+export { m as UserMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "46.0.0",
+  "version": "47.1.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/molecules/page-intro.css

@@ -5,6 +5,6 @@
 :root {
   --page-intro-title-space-after: var(--text-heading-space-after); /** Aire bajo el título cuando comparte fila con las acciones: el mismo em que deja un título suelto, para que una cabecera con acciones y una sin ellas separen igual el título de la entradilla */
   --page-intro-row-column-gap: var(--spacing-5); /** Aire entre el título y las acciones cuando comparten fila (a partir de `md`) */
-  --page-intro-row-gap: var(--spacing-3); /** Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`) */
+  --page-intro-row-gap: var(--spacing-3); /** Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`); también el aire entre el `eyebrow` y el título */
   --page-intro-actions-gap: var(--form-actions-gap); /** Aire entre las acciones — el de los botones de un formulario: la fila de acciones del sistema es una sola */
 }

package/src/tokens/scss/molecules/_page-intro.scss

@@ -3,5 +3,5 @@
 
 $lxd-page-intro-title-space-after: 0.5em; // Aire bajo el título cuando comparte fila con las acciones: el mismo em que deja un título suelto, para que una cabecera con acciones y una sin ellas separen igual el título de la entradilla
 $lxd-page-intro-row-column-gap: 1.5rem; // Aire entre el título y las acciones cuando comparten fila (a partir de `md`)
-$lxd-page-intro-row-gap: 0.75rem; // Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`)
+$lxd-page-intro-row-gap: 0.75rem; // Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`); también el aire entre el `eyebrow` y el título
 $lxd-page-intro-actions-gap: 0.75rem; // Aire entre las acciones — el de los botones de un formulario: la fila de acciones del sistema es una sola