@studiolxd/brand 49.4.0 → 49.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +33 -0
- package/dist/_shared/dropdownitems.js +29 -18
- package/dist/_types/molecules/_shared/dropdownItems.d.ts +18 -1
- package/dist/menu.css +1 -1
- package/dist/menu.js +1 -0
- package/dist/user-menu.css +1 -1
- package/dist/user-menu.js +16 -6
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,39 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
|
|
|
7
7
|
regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
|
|
8
8
|
para breaking changes.
|
|
9
9
|
|
|
10
|
+
## [49.5.0] — 2026-09-18
|
|
11
|
+
|
|
12
|
+
> **Minor.** La cuenta se lee en dos líneas: el ítem de menú acepta una segunda línea bajo la
|
|
13
|
+
> etiqueta, y la cabecera del menú de cuenta enseña la foto de la cuenta activa.
|
|
14
|
+
|
|
15
|
+
### `MenuItem description` — el ítem de dos líneas
|
|
16
|
+
|
|
17
|
+
Un ítem de menú solo sabía decir una cosa: icono y una línea. El selector de varias cuentas del
|
|
18
|
+
shell tenía que apretar ahí nombre y correo —«Ana García · ana@…»— con el avatar haciendo de
|
|
19
|
+
icono, que es justo la información que se lee peor cuando hay tres cuentas parecidas.
|
|
20
|
+
|
|
21
|
+
`description` (opcional, en los ítems `button` y `link`) pinta esa segunda línea debajo de la
|
|
22
|
+
etiqueta, más tenue, y centra el icono —el avatar— contra el bloque de las dos. Cada línea se
|
|
23
|
+
recorta con puntos suspensivos, así que un correo largo no ensancha el panel. Es **aditivo**: sin
|
|
24
|
+
`description` el ítem sale con el marcado de siempre —ni envoltorio de texto ni segunda línea—, y
|
|
25
|
+
los menús de una línea que ya existen no cambian ni un píxel.
|
|
26
|
+
|
|
27
|
+
No hay tokens nuevos. La segunda línea toma la letra y la tinta del rótulo de sección
|
|
28
|
+
(`menu.label-font-size`, `menu.label-color`), que es el papel que ya cumplen en este menú, y bajo
|
|
29
|
+
el puntero o el teclado va con la tinta del ítem resaltado en vez de con la suya, para no quedarse
|
|
30
|
+
gris sobre el relleno de marca. Las clases son `menu__item-icon`, `-text`, `-label` y
|
|
31
|
+
`-description`; el `UserMenu` las tiene con su prefijo y su propia tinta (la del correo de la
|
|
32
|
+
cabecera), para que una lista de cuentas dentro de ese panel se lea igual.
|
|
33
|
+
|
|
34
|
+
### `UserMenu` — la cabecera enseña a quién pertenece la cuenta
|
|
35
|
+
|
|
36
|
+
La cabecera del panel decía el nombre y el correo, pero no enseñaba la foto: el avatar solo
|
|
37
|
+
estaba en el disparador, y al abrir el menú desaparecía justo cuando hace falta confirmar en qué
|
|
38
|
+
cuenta estás. Ahora la cabecera es una fila: el `Avatar` de siempre a la izquierda (foto o, sin
|
|
39
|
+
`avatarUrl`, las iniciales) y, al lado, nombre y correo en columna. Decorativo (`alt=""`), porque
|
|
40
|
+
el nombre va escrito al lado. El aire entre foto y texto es el mismo que en el disparador
|
|
41
|
+
(`user-menu.trigger-gap`): es la misma pareja. Sin tokens nuevos.
|
|
42
|
+
|
|
10
43
|
## [49.4.0] — 2026-09-17
|
|
11
44
|
|
|
12
45
|
> **Minor.** Cuatro huecos que dejó al descubierto la campaña de crudos de bricks: un bocadillo
|
|
@@ -7,11 +7,22 @@ function i({ children: e, ...n }) {
|
|
|
7
7
|
children: e
|
|
8
8
|
});
|
|
9
9
|
}
|
|
10
|
-
function a(r, i) {
|
|
10
|
+
function a(r, i, a, o) {
|
|
11
|
+
let s = a && o ? /* @__PURE__ */ n("span", {
|
|
12
|
+
className: `${o}__item-text`,
|
|
13
|
+
children: [/* @__PURE__ */ t("span", {
|
|
14
|
+
className: `${o}__item-label`,
|
|
15
|
+
children: r
|
|
16
|
+
}), /* @__PURE__ */ t("span", {
|
|
17
|
+
className: `${o}__item-description`,
|
|
18
|
+
children: a
|
|
19
|
+
})]
|
|
20
|
+
}) : r;
|
|
11
21
|
return i ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
|
|
12
22
|
"aria-hidden": "true",
|
|
23
|
+
className: o ? `${o}__item-icon` : void 0,
|
|
13
24
|
children: i
|
|
14
|
-
}),
|
|
25
|
+
}), s] }) : /* @__PURE__ */ t(e, { children: s });
|
|
15
26
|
}
|
|
16
27
|
function o(e) {
|
|
17
28
|
return e.reduce((e, t) => {
|
|
@@ -22,8 +33,8 @@ function o(e) {
|
|
|
22
33
|
}), e;
|
|
23
34
|
}, []);
|
|
24
35
|
}
|
|
25
|
-
function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c,
|
|
26
|
-
let
|
|
36
|
+
function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, blockClass: l, radioValue: u, onRadioValueChange: d }) {
|
|
37
|
+
let f = (e, o) => {
|
|
27
38
|
if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: i }, o);
|
|
28
39
|
if (e.type === "label") return c ? /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ t(r.GroupLabel, {
|
|
29
40
|
className: c,
|
|
@@ -34,20 +45,20 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
|
|
|
34
45
|
value: e.value,
|
|
35
46
|
disabled: e.disabled,
|
|
36
47
|
closeOnClick: e.closeOnSelect !== !1,
|
|
37
|
-
children: a(e.label, e.icon)
|
|
48
|
+
children: a(e.label, e.icon, void 0, l)
|
|
38
49
|
}, o);
|
|
39
|
-
let
|
|
50
|
+
let u = a(e.label, e.icon, e.description, l);
|
|
40
51
|
return e.type === "link" ? e.disabled ? /* @__PURE__ */ t(r.Item, {
|
|
41
52
|
className: n(e.destructive),
|
|
42
53
|
disabled: !0,
|
|
43
|
-
children:
|
|
54
|
+
children: u
|
|
44
55
|
}, o) : /* @__PURE__ */ t(r.Item, {
|
|
45
56
|
className: n(e.destructive),
|
|
46
57
|
render: (t) => s({
|
|
47
58
|
...t,
|
|
48
59
|
href: e.href,
|
|
49
60
|
className: t.className ?? n(e.destructive),
|
|
50
|
-
children:
|
|
61
|
+
children: u
|
|
51
62
|
})
|
|
52
63
|
}, o) : /* @__PURE__ */ t(r.Item, {
|
|
53
64
|
className: n(e.destructive),
|
|
@@ -60,18 +71,18 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
|
|
|
60
71
|
}
|
|
61
72
|
setTimeout(() => e.onClick(), 0);
|
|
62
73
|
},
|
|
63
|
-
children:
|
|
74
|
+
children: u
|
|
64
75
|
}, o);
|
|
65
|
-
},
|
|
66
|
-
if (!
|
|
67
|
-
let
|
|
68
|
-
return o(
|
|
69
|
-
let i =
|
|
70
|
-
|
|
71
|
-
let a = e.items.map((e, t) =>
|
|
76
|
+
}, p = e;
|
|
77
|
+
if (!p.some((e) => e.type === "radio")) return p.map(f);
|
|
78
|
+
let m = 0;
|
|
79
|
+
return o(p).map((e, n) => {
|
|
80
|
+
let i = m;
|
|
81
|
+
m += e.items.length;
|
|
82
|
+
let a = e.items.map((e, t) => f(e, i + t));
|
|
72
83
|
return e.radio ? /* @__PURE__ */ t(r.RadioGroup, {
|
|
73
|
-
value:
|
|
74
|
-
onValueChange: (e) =>
|
|
84
|
+
value: u,
|
|
85
|
+
onValueChange: (e) => d?.(String(e)),
|
|
75
86
|
children: a
|
|
76
87
|
}, `radio-${n}`) : a;
|
|
77
88
|
});
|
|
@@ -2,6 +2,13 @@ import type { ReactNode } from 'react';
|
|
|
2
2
|
export type MenuButtonItem = {
|
|
3
3
|
type: 'button';
|
|
4
4
|
label: string;
|
|
5
|
+
/**
|
|
6
|
+
* Segunda línea del ítem, más tenue: el correo de una cuenta, el detalle de
|
|
7
|
+
* una acción. Con ella el ítem se pinta a dos líneas —`label` arriba,
|
|
8
|
+
* `description` debajo— y el icono se alinea al bloque entero. Sin ella, el
|
|
9
|
+
* ítem se pinta a una línea, exactamente igual que siempre.
|
|
10
|
+
*/
|
|
11
|
+
description?: string;
|
|
5
12
|
icon?: ReactNode;
|
|
6
13
|
onClick: () => void;
|
|
7
14
|
disabled?: boolean;
|
|
@@ -16,6 +23,8 @@ export type MenuButtonItem = {
|
|
|
16
23
|
export type MenuLinkItem = {
|
|
17
24
|
type: 'link';
|
|
18
25
|
label: string;
|
|
26
|
+
/** Segunda línea del ítem, más tenue. Igual que en el ítem `button`. */
|
|
27
|
+
description?: string;
|
|
19
28
|
icon?: ReactNode;
|
|
20
29
|
href: string;
|
|
21
30
|
disabled?: boolean;
|
|
@@ -63,9 +72,17 @@ interface RenderDropdownItemsOptions {
|
|
|
63
72
|
renderLink: (props: MenuRenderLinkProps) => ReactNode;
|
|
64
73
|
/** Clase del rótulo de sección (ítems `label`). Sin ella, no se renderizan. */
|
|
65
74
|
labelClass?: string;
|
|
75
|
+
/**
|
|
76
|
+
* Bloque BEM del menú que renderiza (`menu`, `user-menu`…): de él salen las
|
|
77
|
+
* clases del icono y de las dos líneas del ítem (`<bloque>__item-icon`,
|
|
78
|
+
* `-text`, `-label`, `-description`). Sin él, el ítem se pinta como siempre
|
|
79
|
+
* —una línea y el icono sin clase— y `description` se ignora: un menú que no
|
|
80
|
+
* viste la segunda línea no la dibuja a medias.
|
|
81
|
+
*/
|
|
82
|
+
blockClass?: string;
|
|
66
83
|
/** Valor activo del grupo de radio. */
|
|
67
84
|
radioValue?: string;
|
|
68
85
|
onRadioValueChange?: (value: string) => void;
|
|
69
86
|
}
|
|
70
|
-
export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
|
|
87
|
+
export declare function renderDropdownItems({ items, itemClass, separatorClass, renderLink, labelClass, blockClass, radioValue, onRadioValueChange, }: RenderDropdownItemsOptions): ReactNode;
|
|
71
88
|
export {};
|
package/dist/menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.menu__content{box-sizing:border-box;background-color:var(--menu-bg);border-width:var(--menu-border-width);border-style:solid;border-color:var(--menu-border-color);border-radius:var(--menu-border-radius);box-shadow:var(--menu-shadow);padding-block:var(--menu-padding-block);transform-origin:var(--transform-origin);max-height:var(--menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;padding-inline:0;overflow-y:auto}.menu__content[data-open]{animation:menu-open var(--menu-transition-duration) var(--menu-transition-easing)}.menu__content[data-closed]{animation:menu-close var(--menu-transition-duration) var(--menu-transition-easing)}.menu__item{align-items:center;gap:var(--menu-item-icon-gap);padding-block:var(--menu-item-padding-block);padding-inline:var(--menu-item-padding-inline);margin-inline:var(--menu-padding-inline);border-radius:var(--menu-item-border-radius);font-family:var(--menu-item-font-family);font-size:var(--menu-item-font-size);font-weight:var(--menu-item-font-weight);line-height:var(--menu-item-line-height);color:var(--menu-item-color);cursor:var(--menu-item-cursor);box-shadow:none;transition:background-color var(--menu-transition-duration) var(--menu-transition-easing), color var(--menu-transition-duration) var(--menu-transition-easing);outline:none;text-decoration:none;display:flex}.menu__item:focus-visible{outline:none}.menu__item[data-highlighted]{background-color:var(--menu-item-highlighted-bg);color:var(--menu-item-highlighted-color)}.menu__item:is(a):hover:not([data-highlighted]),.menu__item:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-color);box-shadow:none}.menu__item.menu__item--destructive:is(a):hover:not([data-highlighted]),.menu__item.menu__item--destructive:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-destructive-color)}.menu__item[data-disabled]{opacity:var(--menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.menu__item.menu__item--destructive{color:var(--menu-item-destructive-color)}.menu__item.menu__item--destructive[data-highlighted]{background-color:var(--menu-item-destructive-highlighted-bg);color:var(--menu-item-destructive-highlighted-color)}.menu__item svg{width:var(--menu-item-icon-size);height:var(--menu-item-icon-size);flex-shrink:0}.menu__label{padding-block:var(--menu-label-padding-block);padding-inline:var(--menu-label-padding-inline);font-family:var(--menu-item-font-family);font-size:var(--menu-label-font-size);font-weight:var(--menu-label-font-weight);color:var(--menu-label-color)}.menu__item[data-checked]{font-weight:var(--menu-item-selected-font-weight)}.menu__separator{height:var(--menu-separator-height);background-color:var(--menu-separator-color);margin-block:var(--menu-separator-margin-block);border:none;margin-inline:0}.menu__positioner{z-index:var(--menu-z-index)}.menu__content--sm .menu__item{font-size:var(--menu-sm-item-font-size);padding-block:var(--menu-sm-item-padding-block)}.menu__content--sm .menu__item svg{width:var(--menu-sm-item-icon-size);height:var(--menu-sm-item-icon-size)}.menu__content--lg .menu__item{font-size:var(--menu-lg-item-font-size);padding-block:var(--menu-lg-item-padding-block)}.menu__content--lg .menu__item svg{width:var(--menu-lg-item-icon-size);height:var(--menu-lg-item-icon-size)}
|
|
1
|
+
@keyframes menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.menu__content{box-sizing:border-box;background-color:var(--menu-bg);border-width:var(--menu-border-width);border-style:solid;border-color:var(--menu-border-color);border-radius:var(--menu-border-radius);box-shadow:var(--menu-shadow);padding-block:var(--menu-padding-block);transform-origin:var(--transform-origin);max-height:var(--menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;padding-inline:0;overflow-y:auto}.menu__content[data-open]{animation:menu-open var(--menu-transition-duration) var(--menu-transition-easing)}.menu__content[data-closed]{animation:menu-close var(--menu-transition-duration) var(--menu-transition-easing)}.menu__item{align-items:center;gap:var(--menu-item-icon-gap);padding-block:var(--menu-item-padding-block);padding-inline:var(--menu-item-padding-inline);margin-inline:var(--menu-padding-inline);border-radius:var(--menu-item-border-radius);font-family:var(--menu-item-font-family);font-size:var(--menu-item-font-size);font-weight:var(--menu-item-font-weight);line-height:var(--menu-item-line-height);color:var(--menu-item-color);cursor:var(--menu-item-cursor);box-shadow:none;transition:background-color var(--menu-transition-duration) var(--menu-transition-easing), color var(--menu-transition-duration) var(--menu-transition-easing);outline:none;text-decoration:none;display:flex}.menu__item:focus-visible{outline:none}.menu__item[data-highlighted]{background-color:var(--menu-item-highlighted-bg);color:var(--menu-item-highlighted-color)}.menu__item:is(a):hover:not([data-highlighted]),.menu__item:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-color);box-shadow:none}.menu__item.menu__item--destructive:is(a):hover:not([data-highlighted]),.menu__item.menu__item--destructive:is(a):focus-visible:not([data-highlighted]){color:var(--menu-item-destructive-color)}.menu__item[data-disabled]{opacity:var(--menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.menu__item.menu__item--destructive{color:var(--menu-item-destructive-color)}.menu__item.menu__item--destructive[data-highlighted]{background-color:var(--menu-item-destructive-highlighted-bg);color:var(--menu-item-destructive-highlighted-color)}.menu__item svg{width:var(--menu-item-icon-size);height:var(--menu-item-icon-size);flex-shrink:0}.menu__label{padding-block:var(--menu-label-padding-block);padding-inline:var(--menu-label-padding-inline);font-family:var(--menu-item-font-family);font-size:var(--menu-label-font-size);font-weight:var(--menu-label-font-weight);color:var(--menu-label-color)}.menu__item[data-checked]{font-weight:var(--menu-item-selected-font-weight)}.menu__separator{height:var(--menu-separator-height);background-color:var(--menu-separator-color);margin-block:var(--menu-separator-margin-block);border:none;margin-inline:0}.menu__positioner{z-index:var(--menu-z-index)}.menu__content--sm .menu__item{font-size:var(--menu-sm-item-font-size);padding-block:var(--menu-sm-item-padding-block)}.menu__content--sm .menu__item svg{width:var(--menu-sm-item-icon-size);height:var(--menu-sm-item-icon-size)}.menu__content--lg .menu__item{font-size:var(--menu-lg-item-font-size);padding-block:var(--menu-lg-item-padding-block)}.menu__content--lg .menu__item svg{width:var(--menu-lg-item-icon-size);height:var(--menu-lg-item-icon-size)}.menu__item-icon{flex-shrink:0}.menu__item-text{flex-direction:column;flex:1;min-width:0;display:flex}.menu__item-label,.menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.menu__item-description{font-size:var(--menu-label-font-size);color:var(--menu-label-color)}.menu__item[data-highlighted] .menu__item-description,.menu__item.menu__item--destructive .menu__item-description{color:inherit}
|
package/dist/menu.js
CHANGED
package/dist/user-menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);width:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{width:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-width:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-height:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{gap:var(--user-menu-
|
|
1
|
+
.user-menu__trigger{all:unset;box-sizing:border-box;align-items:center;gap:var(--user-menu-trigger-gap);width:100%;padding-block:var(--user-menu-trigger-padding-block);padding-inline:var(--user-menu-trigger-padding-inline);border-radius:var(--user-menu-trigger-border-radius);cursor:pointer;display:flex}.user-menu__trigger.user-menu__trigger--compact{width:auto;padding-inline:var(--user-menu-trigger-compact-padding-inline)}.user-menu__trigger:focus-visible{outline:var(--user-menu-focus-ring-width) solid var(--user-menu-focus-ring-color);outline-offset:var(--user-menu-focus-ring-offset)}.user-menu__avatar-wrap{flex-shrink:0;position:relative}.user-menu__notification-badge{position:absolute;inset-block-start:calc(-1 * var(--user-menu-badge-offset));inset-inline-end:calc(-1 * var(--user-menu-badge-offset))}.user-menu__name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--user-menu-name-font-size);font-weight:var(--user-menu-name-font-weight);color:var(--user-menu-name-color);flex:1;overflow:hidden}.user-menu__chevron{transition:transform var(--user-menu-transition-duration) var(--user-menu-transition-easing);flex-shrink:0;transform:rotate(90deg)}.user-menu__trigger[data-popup-open] .user-menu__chevron{transform:rotate(-90deg)}@keyframes user-menu-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes user-menu-close{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.user-menu__content{box-sizing:border-box;background-color:var(--user-menu-content-bg);border-width:var(--user-menu-content-border-width);border-style:solid;border-color:var(--user-menu-content-border-color);border-radius:var(--user-menu-content-border-radius);box-shadow:var(--user-menu-content-shadow);padding-block:var(--user-menu-content-padding-block);padding-inline:var(--user-menu-content-padding-inline);min-width:var(--user-menu-content-min-width);transform-origin:var(--transform-origin);max-height:var(--user-menu-content-max-height,var(--available-height));overscroll-behavior:contain;outline:none;overflow-y:auto}.user-menu__content[data-open]{animation:user-menu-open var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__content[data-closed]{animation:user-menu-close var(--user-menu-transition-duration) var(--user-menu-transition-easing)}.user-menu__header{align-items:center;gap:var(--user-menu-trigger-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);display:flex}.user-menu__header-text{gap:var(--user-menu-header-gap);flex-direction:column;min-width:0;display:flex}.user-menu__header-name{font-size:var(--user-menu-header-name-font-size);font-weight:var(--user-menu-header-name-font-weight);color:var(--user-menu-header-name-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__header-email{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item{align-items:center;gap:var(--user-menu-item-icon-gap);padding-block:var(--user-menu-item-padding-block);padding-inline:var(--user-menu-item-padding-inline);border-radius:var(--user-menu-item-border-radius);font-family:var(--user-menu-item-font-family);font-size:var(--user-menu-item-font-size);font-weight:var(--user-menu-item-font-weight);color:var(--user-menu-item-color);cursor:pointer;box-shadow:none;transition:background-color var(--user-menu-transition-duration) var(--user-menu-transition-easing), color var(--user-menu-transition-duration) var(--user-menu-transition-easing);outline:none;text-decoration:none;display:flex}.user-menu__item[data-highlighted]{background-color:var(--user-menu-item-highlighted-bg);color:var(--user-menu-item-highlighted-color)}.user-menu__item[data-disabled]{opacity:var(--user-menu-disabled-opacity);cursor:not-allowed;pointer-events:none}.user-menu__item.user-menu__item--destructive{color:var(--user-menu-item-destructive-color)}.user-menu__item.user-menu__item--destructive[data-highlighted]{background-color:var(--user-menu-item-destructive-highlighted-bg);color:var(--user-menu-item-destructive-highlighted-color)}.user-menu__separator{height:var(--user-menu-separator-height);background-color:var(--user-menu-separator-color);margin-block:var(--user-menu-separator-margin-block);border:none}.user-menu__positioner{z-index:var(--user-menu-content-z-index)}.user-menu__item-icon{flex-shrink:0}.user-menu__item-text{flex-direction:column;flex:1;min-width:0;display:flex}.user-menu__item-label,.user-menu__item-description{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.user-menu__item-description{font-size:var(--user-menu-header-email-font-size);color:var(--user-menu-header-email-color)}.user-menu__item[data-highlighted] .user-menu__item-description,.user-menu__item.user-menu__item--destructive .user-menu__item-description{color:inherit}
|
package/dist/user-menu.js
CHANGED
|
@@ -69,17 +69,27 @@ function m({ name: u, email: m, avatarUrl: h, notificationCount: g, items: _ = [
|
|
|
69
69
|
className: "user-menu__content",
|
|
70
70
|
children: [/* @__PURE__ */ c("div", {
|
|
71
71
|
className: "user-menu__header",
|
|
72
|
-
children: [/* @__PURE__ */ s(
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
72
|
+
children: [/* @__PURE__ */ s(r, {
|
|
73
|
+
src: h,
|
|
74
|
+
name: u,
|
|
75
|
+
alt: "",
|
|
76
|
+
size: "md",
|
|
77
|
+
className: "user-menu__header-avatar"
|
|
78
|
+
}), /* @__PURE__ */ c("div", {
|
|
79
|
+
className: "user-menu__header-text",
|
|
80
|
+
children: [/* @__PURE__ */ s("span", {
|
|
81
|
+
className: "user-menu__header-name",
|
|
82
|
+
children: u
|
|
83
|
+
}), /* @__PURE__ */ s("span", {
|
|
84
|
+
className: "user-menu__header-email",
|
|
85
|
+
children: m
|
|
86
|
+
})]
|
|
78
87
|
})]
|
|
79
88
|
}), _.length > 0 && /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(l.Separator, { className: "user-menu__separator" }), a({
|
|
80
89
|
items: _,
|
|
81
90
|
itemClass: p,
|
|
82
91
|
separatorClass: "user-menu__separator",
|
|
92
|
+
blockClass: "user-menu",
|
|
83
93
|
renderLink: b
|
|
84
94
|
})] })]
|
|
85
95
|
})
|