@studiolxd/brand 38.12.4

package/dist/tokens.js

@@ -0,0 +1,2 @@
+import { n as e, r as t, t as n } from "./_shared/tokens.js";
+export { n as token, e as tokenPx, t as tokens };

package/dist/tooltip.css

@@ -0,0 +1 @@
+.tooltip{box-sizing:border-box;max-width:var(--tooltip-max-width);padding-block:var(--tooltip-padding-block);padding-inline:var(--tooltip-padding-inline);border-radius:var(--tooltip-border-radius);background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);transform-origin:var(--transform-origin);animation-duration:var(--tooltip-transition-duration);animation-timing-function:var(--tooltip-transition-easing)}.tooltip[data-open]{animation-name:tooltip-in}.tooltip[data-closed]{animation-name:tooltip-out}.tooltip__arrow{fill:var(--tooltip-bg);line-height:0}.tooltip__arrow[data-side=top]{top:100%}.tooltip__arrow[data-side=bottom]{bottom:100%;rotate:180deg}.tooltip__arrow[data-side=left]{left:100%;translate:-25%;rotate:-90deg}.tooltip__arrow[data-side=right]{right:100%;translate:25%;rotate:90deg}@keyframes tooltip-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes tooltip-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.tooltip__positioner{z-index:var(--tooltip-z-index)}

package/dist/tooltip.js

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

package/dist/tree-view.css

@@ -0,0 +1 @@
+.tree-view,.tree-view__group{margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none}.tree-view__group{margin-inline-start:var(--tree-view-indent)}.tree-view__item{color:var(--tree-view-color)}.tree-view__item:focus{outline:none}.tree-view__item:focus-visible>.tree-view__row{outline:var(--tree-view-focus-ring-width) solid var(--tree-view-focus-ring-color);outline-offset:var(--tree-view-focus-ring-offset)}.tree-view__row{align-items:center;gap:var(--tree-view-row-gap);padding-block:var(--tree-view-row-padding-block);padding-inline:var(--tree-view-row-padding-inline);border-radius:var(--tree-view-row-border-radius);border:var(--tree-view-drop-target-border-width) var(--tree-view-drop-target-border-style) transparent;font-family:var(--tree-view-font-family);font-size:var(--tree-view-font-size);font-weight:var(--tree-view-font-weight);line-height:var(--tree-view-line-height);cursor:var(--tree-view-cursor);display:flex}.tree-view__item:not(.tree-view__item--disabled)>.tree-view__row:hover{color:var(--tree-view-color);box-shadow:none}.tree-view__item.tree-view__item--selected>.tree-view__row{color:var(--tree-view-selected-color);font-weight:var(--tree-view-selected-font-weight)}.tree-view__item.tree-view__item--disabled>.tree-view__row{opacity:var(--tree-view-disabled-opacity);cursor:var(--tree-view-disabled-cursor)}.tree-view__item.tree-view__item--drop-target>.tree-view__row{background-color:var(--tree-view-drop-target-bg);border-color:var(--tree-view-drop-target-border-color);color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-target>.tree-view__row .tree-view__chevron{color:var(--tree-view-drop-target-color)}.tree-view__item.tree-view__item--drop-disabled>.tree-view__row{opacity:var(--tree-view-drop-disabled-opacity);cursor:var(--tree-view-drop-disabled-cursor)}.tree-view__chevron-slot{inline-size:var(--tree-view-chevron-size);block-size:var(--tree-view-chevron-size);flex-shrink:0;display:inline-flex}.tree-view__chevron{color:var(--tree-view-chevron-color);transition:transform var(--tree-view-transition-duration) var(--tree-view-transition-easing);transform:rotate(0)}.tree-view__item[aria-expanded=true]>.tree-view__row .tree-view__chevron{transform:rotate(90deg)}.tree-view__icon{inline-size:var(--tree-view-icon-size);block-size:var(--tree-view-icon-size);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.tree-view__label{min-inline-size:0}.tree-view__label--truncated{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.tree-view__actions{opacity:0;transition:opacity var(--tree-view-transition-duration) var(--tree-view-transition-easing);flex-shrink:0;align-items:center;margin-inline-start:auto;padding-inline-start:var(--tree-view-actions-gap);display:inline-flex}.tree-view__row:hover .tree-view__actions,.tree-view__item:focus-visible>.tree-view__row .tree-view__actions,.tree-view__actions:focus-within{opacity:1}.tree-view__actions:has([data-popup-open]){opacity:1}@media (hover:none){.tree-view__actions{opacity:1}}

package/dist/tree-view.js

@@ -0,0 +1,165 @@
+'use client';
+import './tree-view.css';
+import { Icon as e } from "./icon.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useCallback as r, useId as i, useMemo as a, useRef as o, useState as s } from "react";
+//#region src/stories/molecules/TreeView/TreeView.tsx
+var c = 500;
+function l(e, t, n = 1, r) {
+	return e.flatMap((e) => [{
+		node: e,
+		level: n,
+		parentId: r
+	}, ...e.children && t.has(e.id) ? l(e.children, t, n + 1, e.id) : []]);
+}
+function u({ items: u, expanded: d, defaultExpanded: f, onExpandedChange: p, selected: m, defaultSelected: h, onSelectedChange: g, label: _ = "Árbol", truncateFromLevel: v = 4, nodeRef: y, className: b, ...x }) {
+	let S = i(), C = o(null), [w, T] = s(f ?? []), E = d !== void 0, D = E ? d : w, [O, k] = s(h), A = m !== void 0, j = A ? m : O, M = a(() => new Set(D), [D]), N = a(() => l(u, M), [u, M]), [P, F] = s(void 0), I = P && N.some((e) => e.node.id === P) ? P : j && N.some((e) => e.node.id === j) ? j : N[0]?.node.id, L = o(""), R = o(0), z = r((e) => {
+		E || T(e), p?.(e);
+	}, [E, p]), B = r((e, t) => {
+		let n = M.has(e), r = t ?? !n;
+		r !== n && z(r ? [...D, e] : D.filter((t) => t !== e));
+	}, [
+		D,
+		M,
+		z
+	]), V = r((e) => {
+		A || k(e), g?.(e);
+	}, [A, g]), H = r((e) => {
+		let t = N.filter((t) => t.parentId === e.parentId && t.node.children?.length).map((e) => e.node.id).filter((e) => !M.has(e));
+		t.length !== 0 && z([...D, ...t]);
+	}, [
+		D,
+		N,
+		M,
+		z
+	]), U = r((e) => `${S}-${e}`, [S]), W = r((e) => {
+		e && (F(e), C.current?.querySelector(`[data-tree-item="${CSS.escape(e)}"]`)?.focus());
+	}, []), G = r((e, t) => {
+		let n = Date.now(), r = n - R.current > c ? e : L.current + e;
+		L.current = r, R.current = n;
+		let i = r.length === 1 ? t + 1 : Math.max(t, 0), a = r.toLowerCase();
+		for (let e = 0; e < N.length; e++) {
+			let t = N[(i + e) % N.length].node.id;
+			if ((C.current?.querySelector(`[data-tree-item="${CSS.escape(t)}"] > .tree-view__row .tree-view__label`)?.textContent ?? "").trim().toLowerCase().startsWith(a)) {
+				W(t);
+				return;
+			}
+		}
+	}, [N, W]);
+	function K(e, t) {
+		let { node: n, parentId: r } = t, i = N.findIndex((e) => e.node.id === n.id), a = !!n.children?.length, o = M.has(n.id);
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), W(N[i + 1]?.node.id);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), W(N[i - 1]?.node.id);
+				break;
+			case "ArrowRight":
+				e.preventDefault(), a && !o ? B(n.id, !0) : a && o && W(N[i + 1]?.node.id);
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), a && o ? B(n.id, !1) : r && W(r);
+				break;
+			case "Home":
+				e.preventDefault(), W(N[0]?.node.id);
+				break;
+			case "End":
+				e.preventDefault(), W(N[N.length - 1]?.node.id);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), n.disabled || V(n.id);
+				break;
+			case "*":
+				e.preventDefault(), H(t);
+				break;
+			default:
+				e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && (e.preventDefault(), G(e.key, i));
+				break;
+		}
+	}
+	function q(r, i, a) {
+		return r.map((r) => {
+			let o = !!r.children?.length, s = o && M.has(r.id), c = j === r.id, l = s && r.iconExpanded || r.icon, u = i >= v, d = u && typeof r.label == "string" ? r.label : void 0, f = r.dropTarget ? "target" : r.dropDisabled ? "disabled" : void 0;
+			return /* @__PURE__ */ n("li", {
+				role: "treeitem",
+				"data-tree-item": r.id,
+				"aria-labelledby": U(r.id),
+				"aria-expanded": o ? s : void 0,
+				"aria-selected": c,
+				"aria-level": i,
+				"aria-disabled": r.disabled || void 0,
+				"data-drop": f,
+				tabIndex: I === r.id ? 0 : -1,
+				className: [
+					"tree-view__item",
+					c ? "tree-view__item--selected" : "",
+					r.disabled ? "tree-view__item--disabled" : "",
+					r.dropTarget ? "tree-view__item--drop-target" : "",
+					r.dropDisabled ? "tree-view__item--drop-disabled" : ""
+				].filter(Boolean).join(" "),
+				onKeyDown: (e) => {
+					e.target === e.currentTarget && K(e, {
+						node: r,
+						level: i,
+						parentId: a
+					});
+				},
+				onFocus: (e) => {
+					e.target === e.currentTarget && F(r.id);
+				},
+				onClick: r.disabled ? void 0 : (e) => {
+					e.stopPropagation(), o && B(r.id), V(r.id), W(r.id);
+				},
+				children: [/* @__PURE__ */ n("span", {
+					className: "tree-view__row",
+					ref: y ? (e) => y(r.id, e) : void 0,
+					children: [
+						/* @__PURE__ */ t("span", {
+							className: "tree-view__chevron-slot",
+							"aria-hidden": "true",
+							children: o && /* @__PURE__ */ t(e, {
+								name: "chevron",
+								className: "tree-view__chevron",
+								size: "sm"
+							})
+						}),
+						l && /* @__PURE__ */ t("span", {
+							className: "tree-view__icon",
+							"aria-hidden": "true",
+							children: l
+						}),
+						/* @__PURE__ */ t("span", {
+							className: ["tree-view__label", u ? "tree-view__label--truncated" : ""].filter(Boolean).join(" "),
+							id: U(r.id),
+							title: d,
+							children: r.label
+						}),
+						r.actions && /* @__PURE__ */ t("span", {
+							className: "tree-view__actions",
+							onClick: (e) => e.stopPropagation(),
+							onKeyDown: (e) => e.stopPropagation(),
+							onKeyUp: (e) => e.stopPropagation(),
+							children: r.actions
+						})
+					]
+				}), o && s && /* @__PURE__ */ t("ul", {
+					role: "group",
+					className: "tree-view__group",
+					children: q(r.children, i + 1, r.id)
+				})]
+			}, r.id);
+		});
+	}
+	return /* @__PURE__ */ t("ul", {
+		ref: C,
+		role: "tree",
+		"aria-label": _,
+		className: ["tree-view", b].filter(Boolean).join(" "),
+		...x,
+		children: q(u, 1)
+	});
+}
+//#endregion
+export { u as TreeView };

package/dist/typing-indicator.css

@@ -0,0 +1 @@
+.typing-indicator{align-items:center;gap:var(--typing-indicator-dot-gap);display:inline-flex}.typing-indicator__dot{width:var(--typing-indicator-dot-size);height:var(--typing-indicator-dot-size);background-color:var(--typing-indicator-dot-color);opacity:var(--typing-indicator-dot-opacity-inactive);animation:typing-bounce var(--typing-indicator-animation-duration) var(--typing-indicator-animation-easing) infinite;display:block}.typing-indicator__dot:nth-child(2){animation-delay:calc(var(--typing-indicator-animation-duration) / 5)}.typing-indicator__dot:nth-child(3){animation-delay:calc(var(--typing-indicator-animation-duration) / 5 * 2)}@media (prefers-reduced-motion:reduce){.typing-indicator__dot{opacity:var(--typing-indicator-dot-opacity-inactive);animation:none}.typing-indicator__dot:nth-child(2),.typing-indicator__dot:nth-child(3){animation-delay:0s}}@keyframes typing-bounce{0%,60%,to{opacity:var(--typing-indicator-dot-opacity-inactive);transform:translateY(0)}30%{opacity:var(--typing-indicator-dot-opacity-active);transform:translateY(calc(-1 * var(--typing-indicator-dot-rise)))}}

package/dist/typing-indicator.js

@@ -0,0 +1,27 @@
+import './typing-indicator.css';
+import { VisuallyHidden as e } from "./visually-hidden.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/stories/atoms/TypingIndicator/TypingIndicator.tsx
+function r({ label: r = "El asistente está escribiendo…" }) {
+	return /* @__PURE__ */ n("span", {
+		className: "typing-indicator",
+		role: "status",
+		children: [
+			/* @__PURE__ */ t("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t("span", {
+				className: "typing-indicator__dot",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ t(e, { children: r })
+		]
+	});
+}
+//#endregion
+export { r as TypingIndicator };

package/dist/untrustedtext.css

@@ -0,0 +1 @@
+.connector-untrusted{overflow-wrap:anywhere}.connector-untrusted bdi{unicode-bidi:isolate}.connector-untrusted__value.connector-untrusted__value--clamped{-webkit-line-clamp:var(--connector-auth-untrusted-max-lines);line-clamp:var(--connector-auth-untrusted-max-lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.connector-untrusted--expandable[open] .connector-untrusted__value.connector-untrusted__value--clamped{display:block;overflow:visible}.connector-untrusted__summary{cursor:var(--connector-auth-untrusted-toggle-cursor);list-style:none;display:block}.connector-untrusted__summary::-webkit-details-marker{display:none}.connector-untrusted__summary::marker{content:""}.connector-untrusted__summary:focus-visible{outline:var(--connector-auth-untrusted-focus-ring-width) solid var(--connector-auth-untrusted-focus-ring-color);outline-offset:var(--connector-auth-untrusted-focus-ring-offset)}.connector-untrusted__toggle{font-size:var(--connector-auth-untrusted-toggle-font-size);margin-block-start:var(--connector-auth-untrusted-toggle-gap);display:inline-block}.connector-untrusted--expandable[open] .connector-untrusted__more,.connector-untrusted--expandable:not([open]) .connector-untrusted__less{display:none}

package/dist/uptime-bars.css

@@ -0,0 +1 @@
+.uptime-bars{gap:var(--uptime-bars-footer-gap);flex-direction:column;inline-size:100%;display:flex}.uptime-bars__list{gap:var(--uptime-bars-gap);inline-size:100%;margin-block:0;margin-inline:0;padding-block:0;padding-inline:0;list-style:none;display:flex}.uptime-bars__item{flex:1 1 0;min-inline-size:0}.uptime-bars__bar{inline-size:100%;block-size:var(--uptime-bars-bar-height);border-radius:var(--uptime-bars-bar-radius);border:var(--uptime-bars-bar-border-width) solid var(--uptime-bars-bar-border-color);display:block}.uptime-bars__bar:focus-visible{outline:var(--uptime-bars-focus-ring-width) solid var(--uptime-bars-focus-ring-color);outline-offset:var(--uptime-bars-focus-ring-offset)}.uptime-bars__bar.uptime-bars__bar--ok{background-color:var(--uptime-bars-ok-bg)}.uptime-bars__bar.uptime-bars__bar--degraded{background-color:var(--uptime-bars-degraded-bg)}.uptime-bars__bar.uptime-bars__bar--down{background-color:var(--uptime-bars-down-bg)}.uptime-bars__bar.uptime-bars__bar--empty{background-color:var(--uptime-bars-empty-bg);background-image:repeating-linear-gradient(45deg, var(--uptime-bars-empty-pattern-color) 0, var(--uptime-bars-empty-pattern-color) var(--uptime-bars-empty-pattern-width), transparent var(--uptime-bars-empty-pattern-width), transparent calc(var(--uptime-bars-empty-pattern-width) * 2))}.uptime-bars__footer{align-items:baseline;column-gap:var(--uptime-bars-footer-column-gap);font-size:var(--uptime-bars-footer-font-size);grid-template-columns:1fr auto 1fr;margin-block:0;display:grid}.uptime-bars__edge{color:var(--uptime-bars-edge-color)}.uptime-bars__edge.uptime-bars__edge--end{text-align:end}.uptime-bars__summary{color:var(--uptime-bars-summary-color);font-weight:var(--uptime-bars-summary-font-weight);text-align:center}.uptime-bars__tooltip{gap:var(--uptime-bars-tooltip-gap);flex-direction:column;display:flex}.uptime-bars__tooltip-label{font-weight:var(--uptime-bars-tooltip-label-font-weight)}

package/dist/uptime-bars.js

@@ -0,0 +1,100 @@
+'use client';
+import './uptime-bars.css';
+import { Tooltip as e } from "./tooltip.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r, useRef as i, useState as a } from "react";
+//#region src/stories/molecules/UptimeBars/uptimeStatus.ts
+var o = {
+	ok: 99.65,
+	degraded: 95.83
+};
+function s(e, t) {
+	return e === null || !Number.isFinite(e) ? "empty" : e >= t.ok ? "ok" : e >= t.degraded ? "degraded" : "down";
+}
+//#endregion
+//#region src/stories/molecules/UptimeBars/UptimeBars.tsx
+var c = r(function({ points: r, summary: c, label: l = "Disponibilidad", startLabel: u, endLabel: d, thresholds: f, locale: p = "es-ES", maximumFractionDigits: m = 2, pointLabel: h, noDataLabel: g = "sin datos", tooltips: _ = !0, className: v, ...y }, b) {
+	let x = {
+		...o,
+		...f
+	}, S = i([]), [C, w] = a(0), T = new Intl.NumberFormat(p, {
+		style: "percent",
+		maximumFractionDigits: m
+	}), E = (e) => e === null || !Number.isFinite(e) ? null : T.format(e / 100), D = (e, t) => {
+		if (h) return h(e, t);
+		let n = `${e.label}: ${t ?? g}`;
+		return e.detail ? `${n}. ${e.detail}` : n;
+	}, O = (e) => {
+		let t = Math.max(0, Math.min(r.length - 1, e));
+		w(t), S.current[t]?.focus();
+	}, k = (e, t) => {
+		let n = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		}[e.key];
+		if (n) {
+			e.preventDefault(), O(t + n);
+			return;
+		}
+		e.key === "Home" ? (e.preventDefault(), O(0)) : e.key === "End" && (e.preventDefault(), O(r.length - 1));
+	}, A = Math.max(0, Math.min(C, r.length - 1));
+	return /* @__PURE__ */ n("div", {
+		ref: b,
+		className: ["uptime-bars", v].filter(Boolean).join(" "),
+		...y,
+		children: [/* @__PURE__ */ t("ol", {
+			className: "uptime-bars__list",
+			"aria-label": l,
+			children: r.map((r, i) => {
+				let a = E(r.value), o = /* @__PURE__ */ t("span", {
+					className: `uptime-bars__bar uptime-bars__bar--${s(r.value, x)}`,
+					role: "img",
+					"aria-label": D(r, a),
+					tabIndex: _ ? i === A ? 0 : -1 : void 0,
+					onKeyDown: _ ? (e) => k(e, i) : void 0,
+					onFocus: _ ? () => w(i) : void 0
+				});
+				return /* @__PURE__ */ t("li", {
+					className: "uptime-bars__item",
+					children: _ ? /* @__PURE__ */ t(e, {
+						ref: (e) => {
+							S.current[i] = e;
+						},
+						label: /* @__PURE__ */ n("span", {
+							className: "uptime-bars__tooltip",
+							children: [
+								/* @__PURE__ */ t("span", {
+									className: "uptime-bars__tooltip-label",
+									children: r.label
+								}),
+								/* @__PURE__ */ t("span", { children: a ?? g }),
+								r.detail ? /* @__PURE__ */ t("span", { children: r.detail }) : null
+							]
+						}),
+						children: o
+					}) : o
+				}, `${r.label}-${i}`);
+			})
+		}), /* @__PURE__ */ n("p", {
+			className: "uptime-bars__footer",
+			children: [
+				/* @__PURE__ */ t("span", {
+					className: "uptime-bars__edge",
+					children: u
+				}),
+				/* @__PURE__ */ t("span", {
+					className: "uptime-bars__summary",
+					children: c
+				}),
+				/* @__PURE__ */ t("span", {
+					className: "uptime-bars__edge uptime-bars__edge--end",
+					children: d
+				})
+			]
+		})]
+	});
+});
+//#endregion
+export { c as UptimeBars };

package/dist/user-menu.css

@@ -0,0 +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-header-gap);padding-block:var(--user-menu-header-padding-block);padding-inline:var(--user-menu-header-padding-inline);flex-direction:column;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)}

package/dist/user-menu.js

@@ -0,0 +1,85 @@
+'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";
+//#region src/stories/molecules/UserMenu/UserMenu.tsx
+function c(e) {
+	let t = parseFloat(e);
+	return Number.isNaN(t) ? 0 : e.endsWith("rem") ? t * parseFloat(getComputedStyle(document.documentElement).fontSize) : t;
+}
+function l() {
+	let e = document.documentElement;
+	return c(getComputedStyle(e).getPropertyValue("--user-menu-offset").trim());
+}
+function u({ children: e, ...t }) {
+	return /* @__PURE__ */ a("a", {
+		...t,
+		children: e
+	});
+}
+function d(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}`,
+			children: [
+				/* @__PURE__ */ o("span", {
+					className: "user-menu__avatar-wrap",
+					children: [/* @__PURE__ */ a(t, {
+						src: p,
+						name: c,
+						alt: "",
+						size: "sm"
+					}), !!m && m > 0 && /* @__PURE__ */ a(n, {
+						count: m,
+						variant: "danger",
+						"aria-label": `${m} notificaciones sin leer`,
+						className: "user-menu__notification-badge"
+					})]
+				}),
+				!_ && /* @__PURE__ */ a("span", {
+					className: "user-menu__name",
+					children: c
+				}),
+				/* @__PURE__ */ a(e, {
+					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
+				})] })]
+			})
+		}) })]
+	});
+}
+//#endregion
+export { f as UserMenu };

package/dist/user-message.css

@@ -0,0 +1 @@
+.user-message{align-items:flex-end;gap:var(--user-message-gap);flex-direction:column;display:flex}.user-message__author{font-family:var(--user-message-author-font-family);font-size:var(--user-message-author-font-size);font-weight:var(--user-message-author-font-weight);color:var(--user-message-author-color);padding-inline:var(--user-message-author-padding-inline)}.user-message__timestamp{font-family:var(--user-message-timestamp-font-family);font-size:var(--user-message-timestamp-font-size);color:var(--user-message-timestamp-color);padding-inline:var(--user-message-timestamp-padding-inline)}

package/dist/user-message.js

@@ -0,0 +1,31 @@
+import './user-message.css';
+import { MessageBubble as e } from "./message-bubble.js";
+import { t } from "./_shared/messagetimestamp.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+//#region src/stories/molecules/UserMessage/UserMessage.tsx
+var a = i(function({ children: i, author: a, timestamp: o, locale: s, timestampFormat: c, className: l, ...u }, d) {
+	let f = t(o, s, c);
+	return /* @__PURE__ */ r("div", {
+		ref: d,
+		className: `user-message${l ? ` ${l}` : ""}`,
+		...u,
+		children: [
+			a && /* @__PURE__ */ n("span", {
+				className: "user-message__author",
+				children: a
+			}),
+			/* @__PURE__ */ n(e, {
+				role: "user",
+				children: i
+			}),
+			f && /* @__PURE__ */ n("time", {
+				className: "user-message__timestamp",
+				dateTime: f.dateTime,
+				children: f.label
+			})
+		]
+	});
+});
+//#endregion
+export { a as UserMessage };

package/dist/visually-hidden.js

@@ -0,0 +1,14 @@
+/* empty css                       */
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+//#region src/stories/atoms/VisuallyHidden/VisuallyHidden.tsx
+var n = t(function({ children: t, as: n = "span", className: r, ...i }, a) {
+	return /* @__PURE__ */ e(n, {
+		ref: a,
+		className: ["visually-hidden", r].filter(Boolean).join(" "),
+		...i,
+		children: t
+	});
+});
+//#endregion
+export { n as VisuallyHidden };

package/dist/visuallyhidden.css

@@ -0,0 +1 @@
+.visually-hidden{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}