@studiolxd/brand 38.12.4

package/dist/avatar-upload.js

@@ -0,0 +1,176 @@
+'use client';
+import './avatar-upload.css';
+import { Icon as e } from "./icon.js";
+import { VisuallyHidden as t } from "./visually-hidden.js";
+import { n } from "./_shared/form-size.js";
+import { Button as r } from "./button.js";
+import { Avatar as i } from "./avatar.js";
+import { ErrorText as ee } from "./error-text.js";
+import { n as te, t as a } from "./_shared/validate.js";
+import { t as o } from "./_shared/env.js";
+import { t as ne } from "./_shared/imagecropdialog.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useEffect as u, useId as re, useRef as d, useState as f } from "react";
+//#region src/stories/molecules/AvatarUpload/AvatarUpload.tsx
+var ie = {
+	sm: "2xl",
+	md: "3xl",
+	lg: "4xl"
+}, p = {
+	sm: "md",
+	md: "lg",
+	lg: "xl"
+};
+function m(e) {
+	return e.split(",").map((e) => e.trim()).filter(Boolean).map((e) => e.startsWith(".") ? e.slice(1) : e.split("/")[1] ?? e).map((e) => e.toUpperCase()).join(", ");
+}
+function h({ src: h, name: ae, alt: g, shape: _ = "circle", size: oe, accept: v = "image/jpeg,image/png,image/webp", maxSize: y, outputMimeType: b = "image/jpeg", outputSize: x, disabled: se = !1, busy: S = !1, errorMessage: ce, onChange: le, onSelect: C, onError: w, buttonLabel: T = "Subir", buttonAccessibleLabel: ue, hintLabel: de, formatsLabel: fe, maxSizeHint: pe = (e) => `máx. ${e}`, invalidTypeError: E = (e) => `Formato no admitido. Se aceptan ${e}.`, tooLargeError: D = (e) => `El archivo pesa demasiado. El máximo es ${e}.`, dropActiveMessage: me = "Suelta la imagen sobre el avatar para subirla", dropHintLabel: O = "…o arrastra la imagen hasta el avatar", cropTitle: he = "Recortar imagen", cropDescription: k, cropCancelLabel: A = "Cancelar", cropConfirmLabel: j = "Guardar", cropCloseLabel: M = "Cerrar", cropLoadingLabel: N, cropErrorMessage: P, className: F }) {
+	let I = n(oe), L = d(null), R = d(null), [z, B] = f(null), [V, H] = f(!1), [ge, U] = f(!1), [_e, W] = f(null), G = re(), K = `${G}-hint`, q = `${G}-error`, J = fe ?? m(v), Y = de ?? [J, y === void 0 ? null : pe(a(y))].filter(Boolean).join(" · "), X = _e ?? ce, Z = se || S, Q = ue ?? T;
+	o() && !Q.toLowerCase().includes(T.toLowerCase()) && console.warn(`[AvatarUpload] El nombre accesible del botón ("${Q}") no contiene su texto visible ("${T}"). WCAG 2.5.3 (Label in Name) lo exige: quien navega por voz dice lo que ve, y con estos textos no encontraría el control.`), u(() => {
+		R.current = z;
+	}, [z]), u(() => () => {
+		R.current && URL.revokeObjectURL(R.current.url);
+	}, []), u(() => {
+		if (Z) return;
+		let e = 0, t = (e) => Array.from(e.dataTransfer?.types ?? []).includes("Files"), n = (n) => {
+			t(n) && (e += 1, H(!0));
+		}, r = () => {
+			e = Math.max(0, e - 1), e === 0 && H(!1);
+		}, i = () => {
+			e = 0, H(!1);
+		};
+		return window.addEventListener("dragenter", n), window.addEventListener("dragleave", r), window.addEventListener("drop", i), window.addEventListener("dragend", i), () => {
+			window.removeEventListener("dragenter", n), window.removeEventListener("dragleave", r), window.removeEventListener("drop", i), window.removeEventListener("dragend", i), H(!1);
+		};
+	}, [Z]);
+	let $ = l((e) => {
+		let t = te(e, v, y, D, E(J));
+		if (t) {
+			W(t), w?.(t);
+			return;
+		}
+		W(null), C?.(e), B({
+			url: URL.createObjectURL(e),
+			file: e
+		});
+	}, [
+		v,
+		y,
+		D,
+		E,
+		J,
+		w,
+		C
+	]), ve = () => {
+		z && URL.revokeObjectURL(z.url), B(null);
+	}, ye = async (e) => {
+		z && await le(e, z.file);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: [
+			"avatar-upload",
+			_ === "square" ? "avatar-upload--square" : "",
+			V ? "avatar-upload--armed" : "",
+			ge ? "avatar-upload--over" : "",
+			Z ? "avatar-upload--inert" : "",
+			F ?? ""
+		].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "avatar-upload__target",
+				onClick: () => {
+					Z || L.current?.click();
+				},
+				onDragEnter: (e) => {
+					e.preventDefault(), Z || U(!0);
+				},
+				onDragOver: (e) => {
+					e.preventDefault(), !Z && (e.dataTransfer.dropEffect = "copy", U(!0));
+				},
+				onDragLeave: (e) => {
+					e.currentTarget.contains(e.relatedTarget) || U(!1);
+				},
+				onDrop: (e) => {
+					if (e.preventDefault(), U(!1), H(!1), Z) return;
+					let t = e.dataTransfer.files?.[0];
+					t && $(t);
+				},
+				children: [/* @__PURE__ */ s(i, {
+					src: h ?? void 0,
+					name: ae,
+					...g === void 0 ? {} : { alt: g },
+					shape: _,
+					size: ie[I]
+				}), /* @__PURE__ */ s("span", {
+					className: "avatar-upload__overlay",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ s(e, {
+						name: "upload",
+						size: p[I]
+					})
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "avatar-upload__body",
+				children: [
+					/* @__PURE__ */ s("input", {
+						ref: L,
+						type: "file",
+						className: "avatar-upload__input",
+						accept: v,
+						tabIndex: -1,
+						"aria-hidden": "true",
+						disabled: Z,
+						onChange: (e) => {
+							let t = e.target.files?.[0];
+							t && $(t), e.target.value = "";
+						}
+					}),
+					/* @__PURE__ */ s(r, {
+						variant: "outline",
+						size: I,
+						disabled: Z,
+						onClick: () => L.current?.click(),
+						...Q === T ? {} : { "aria-label": Q },
+						"aria-describedby": [Y ? K : null, X ? q : null].filter(Boolean).join(" ") || void 0,
+						children: T
+					}),
+					Y && /* @__PURE__ */ s(t, {
+						id: K,
+						children: Y
+					}),
+					O && /* @__PURE__ */ s("span", {
+						className: "avatar-upload__hint",
+						children: O
+					}),
+					X && /* @__PURE__ */ s(ee, {
+						id: q,
+						children: X
+					})
+				]
+			}),
+			/* @__PURE__ */ s(t, {
+				role: "status",
+				children: V ? me : ""
+			}),
+			/* @__PURE__ */ s(ne, {
+				sourceUrl: z?.url ?? null,
+				title: he,
+				description: k,
+				circularCrop: _ === "circle",
+				outputMimeType: b,
+				...x === void 0 ? {} : { outputSize: x },
+				busy: S,
+				cancelLabel: A,
+				confirmLabel: j,
+				closeLabel: M,
+				...N === void 0 ? {} : { loadingLabel: N },
+				...P === void 0 ? {} : { errorMessage: P },
+				onConfirm: ye,
+				onClose: ve
+			})
+		]
+	});
+}
+//#endregion
+export { h as AvatarUpload };

package/dist/avatar.css

@@ -0,0 +1 @@
+.avatar{--avatar-size:var(--avatar-size-md);--avatar-initials-font-size:var(--avatar-initials-font-size-md);inline-size:var(--avatar-size);block-size:var(--avatar-size);border-radius:var(--avatar-border-radius);object-fit:cover;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.avatar.avatar--sm{--avatar-size:var(--avatar-size-sm);--avatar-initials-font-size:var(--avatar-initials-font-size-sm)}.avatar.avatar--md{--avatar-size:var(--avatar-size-md);--avatar-initials-font-size:var(--avatar-initials-font-size-md)}.avatar.avatar--lg{--avatar-size:var(--avatar-size-lg);--avatar-initials-font-size:var(--avatar-initials-font-size-lg)}.avatar.avatar--xl{--avatar-size:var(--avatar-size-xl);--avatar-initials-font-size:var(--avatar-initials-font-size-xl)}.avatar.avatar--2xl{--avatar-size:var(--avatar-size-2xl);--avatar-initials-font-size:var(--avatar-initials-font-size-2xl)}.avatar.avatar--3xl{--avatar-size:var(--avatar-size-3xl);--avatar-initials-font-size:var(--avatar-initials-font-size-3xl)}.avatar.avatar--4xl{--avatar-size:var(--avatar-size-4xl);--avatar-initials-font-size:var(--avatar-initials-font-size-4xl)}.avatar.avatar--square{border-radius:var(--avatar-border-radius-square)}.avatar.avatar--initials{background-color:var(--avatar-initials-bg);color:var(--avatar-initials-color);font-size:var(--avatar-initials-font-size);font-weight:var(--avatar-initials-font-weight);line-height:var(--line-height-none);-webkit-user-select:none;user-select:none}

package/dist/avatar.js

@@ -0,0 +1,34 @@
+'use client';
+import './avatar.css';
+import { jsx as e } from "react/jsx-runtime";
+import { useState as t } from "react";
+//#region src/stories/atoms/Avatar/Avatar.tsx
+function n(e) {
+	let t = e.trim().split(/\s+/);
+	return t.length === 1 ? t[0].slice(0, 2).toUpperCase() : (t[0][0] + t[1][0]).toUpperCase();
+}
+function r({ src: r, alt: i, name: a, size: o = "md", shape: s = "circle", className: c }) {
+	let [l, u] = t(!1), d = [
+		"avatar",
+		`avatar--${o}`,
+		s === "square" ? "avatar--square" : "",
+		c
+	].filter(Boolean).join(" ");
+	if (r && !l) return /* @__PURE__ */ e("img", {
+		src: r,
+		alt: i ?? a ?? "",
+		className: d,
+		onError: () => u(!0)
+	});
+	let f = i ?? a ?? "";
+	return /* @__PURE__ */ e("span", {
+		className: `${d} avatar--initials`,
+		...f ? {
+			role: "img",
+			"aria-label": f
+		} : { "aria-hidden": !0 },
+		children: a ? n(a) : "?"
+	});
+}
+//#endregion
+export { r as Avatar };

package/dist/banner.css

@@ -0,0 +1 @@
+:root{--banner-padding-block:var(--spacing-3);--banner-padding-inline:var(--spacing-5);--banner-gap:var(--spacing-4);--banner-close-size:var(--size-component-sm);--banner-close-inset:var(--spacing-2);--banner-border-width:var(--border-width-default);--banner-font-size:var(--text-font-size);--banner-line-height:var(--text-line-height);--banner-info-bg:var(--color-primary);--banner-info-color:var(--color-text-on-dark);--banner-info-border-color:var(--color-text-on-dark);--banner-warning-bg:var(--color-warning-fill);--banner-warning-border-color:var(--color-warning-fill);--banner-warning-color:var(--color-warning-fill-text);--banner-warning-close-color:var(--color-warning-fill-text)}.banner{box-sizing:border-box;background-color:var(--banner-bg);inline-size:100%;color:var(--banner-color);border-block:var(--banner-border-width) solid var(--banner-border-color);padding-block:var(--banner-padding-block);padding-inline:var(--banner-padding-inline);font-size:var(--banner-font-size);line-height:var(--banner-line-height);align-items:flex-start;gap:var(--banner-gap);border-inline:0;flex-direction:column;display:flex;position:relative}.banner.banner--dismissible{padding-inline-end:calc(var(--banner-close-inset) * 2 + var(--banner-close-size))}.banner__content{min-inline-size:0}.banner__actions{align-items:center;gap:var(--banner-gap);flex-wrap:wrap;display:flex}.banner .banner__close{--close-button-size:var(--banner-close-size);position:absolute;inset-block-start:var(--banner-close-inset);inset-inline-end:var(--banner-close-inset)}@media (width>=768px){.banner{flex-direction:row;align-items:center}.banner__content{flex:1}}.banner.banner--info{--banner-bg:var(--banner-info-bg);--banner-color:var(--banner-info-color);--banner-border-color:var(--banner-info-border-color)}.banner.banner--warning{--banner-bg:var(--banner-warning-bg);--banner-color:var(--banner-warning-color);--banner-border-color:var(--banner-warning-border-color);--close-button-color:var(--banner-warning-close-color);--close-button-focus-ring-color:var(--banner-warning-close-color)}

package/dist/banner.js

@@ -0,0 +1,39 @@
+'use client';
+import './banner.css';
+import { CloseButton as e } from "./close-button.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+//#region src/stories/molecules/Banner/Banner.tsx
+var i = r(function({ variant: r = "info", children: i, actions: a, onDismiss: o, dismissLabel: s = "Descartar aviso", className: c, role: l, "aria-live": u, ...d }, f) {
+	let p = [
+		"banner",
+		`banner--${r}`,
+		r === "info" ? "surface-dark" : "",
+		o ? "banner--dismissible" : "",
+		c ?? ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		ref: f,
+		role: l ?? "status",
+		"aria-live": u ?? "polite",
+		className: p,
+		...d,
+		children: [
+			/* @__PURE__ */ t("div", {
+				className: "banner__content",
+				children: i
+			}),
+			a && /* @__PURE__ */ t("div", {
+				className: "banner__actions",
+				children: a
+			}),
+			o && /* @__PURE__ */ t(e, {
+				className: "banner__close",
+				label: s,
+				onClick: o
+			})
+		]
+	});
+});
+//#endregion
+export { i as Banner };

package/dist/brand-assets.js

@@ -0,0 +1,75 @@
+//#region src/assets/brand-assets.ts
+var e = "#BAABFF", t = "#111E30", n = [
+	{
+		path: "assets/logo.svg",
+		type: "image/svg+xml",
+		purpose: "source"
+	},
+	{
+		path: "assets/logomark.svg",
+		type: "image/svg+xml",
+		purpose: "source"
+	},
+	{
+		path: "assets/logomark-safe.svg",
+		type: "image/svg+xml",
+		purpose: "source"
+	}
+], r = [
+	{
+		path: "assets/icons/icon.svg",
+		type: "image/svg+xml",
+		purpose: "favicon"
+	},
+	{
+		path: "assets/icons/favicon.ico",
+		type: "image/vnd.microsoft.icon",
+		purpose: "favicon"
+	},
+	{
+		path: "assets/icons/icon-192.png",
+		size: 192,
+		type: "image/png",
+		purpose: "pwa-icon"
+	},
+	{
+		path: "assets/icons/icon-512.png",
+		size: 512,
+		type: "image/png",
+		purpose: "pwa-icon"
+	},
+	{
+		path: "assets/icons/icon-512-maskable.png",
+		size: 512,
+		type: "image/png",
+		purpose: "pwa-icon-maskable"
+	},
+	{
+		path: "assets/icons/apple-touch-icon.png",
+		size: 180,
+		type: "image/png",
+		purpose: "apple-touch-icon"
+	},
+	{
+		path: "assets/icons/manifest.webmanifest",
+		type: "application/manifest+json",
+		purpose: "manifest"
+	}
+], i = "logo-v3.png", a = {
+	width: 925.5,
+	height: 265.5
+};
+function o(e) {
+	return Math.round(e * a.width / a.height);
+}
+var s = "google-sans-flex-normal-latin-v1.woff2", c = [{
+	path: `assets/email/${i}`,
+	type: "image/png",
+	purpose: "source"
+}, {
+	path: `assets/email/${s}`,
+	type: "font/woff2",
+	purpose: "source"
+}];
+//#endregion
+export { c as BRAND_EMAIL_ASSETS, r as BRAND_ICON_ASSETS, e as BRAND_ICON_BG_COLOR, t as BRAND_ICON_INK_COLOR, n as BRAND_SOURCE_ASSETS, s as EMAIL_FONT_FILENAME, i as EMAIL_LOGO_FILENAME, a as EMAIL_LOGO_VIEW_BOX, o as emailLogoWidthFor };