@studiolxd/brand 49.28.0 → 51.0.0

package/dist/_shared/connectorrequestsummary.js

@@ -0,0 +1,46 @@
+import '../connectorrequestsummary.css';
+import { r as e } from "./brandmessagescontext.js";
+import { DescriptionDetails as t, DescriptionList as n, DescriptionTerm as r } from "../description-list.js";
+import { t as i } from "./untrustedtext.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/connectorRequestSummary.ts
+var c = {
+	client: "Herramienta",
+	product: "Producto",
+	account: "Cuenta",
+	scope: "Permiso",
+	redirect: "Destino"
+};
+//#endregion
+//#region src/stories/templates/ConnectorAuth/ConnectorRequestSummary.tsx
+function l({ clientName: l, productName: u, accountEmail: d, scope: f, redirectHost: p, clientLabel: m, productLabel: h, accountLabel: g, scopeLabel: _, redirectLabel: v, scopeReadLabel: y, scopeWriteLabel: b, expandLabel: x, collapseLabel: S, valueQuotes: C, className: w }) {
+	let T = e("connectorRequestSummary", c), E = (e) => /* @__PURE__ */ o(i, {
+		value: e,
+		expandable: !0,
+		expandLabel: x,
+		collapseLabel: S,
+		quotes: C
+	});
+	return /* @__PURE__ */ s(n, {
+		className: ["connector-request-summary", w].filter(Boolean).join(" "),
+		children: [
+			/* @__PURE__ */ o(r, { children: T("client", m) }),
+			/* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(l)
+			}),
+			u !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("product", h) }), /* @__PURE__ */ o(t, { children: u })] }),
+			d !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("account", g) }), /* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(d)
+			})] }),
+			f !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("scope", _) }), /* @__PURE__ */ o(t, { children: f === "read" ? y : b })] }),
+			p !== void 0 && /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(r, { children: T("redirect", v) }), /* @__PURE__ */ o(t, {
+				className: "connector-request-summary__untrusted",
+				children: E(p)
+			})] })
+		]
+	});
+}
+//#endregion
+export { l as t };

package/dist/_shared/{copy-to-clipboard.js → copy.js}

@@ -27,4 +27,11 @@ function i(i = r) {
 	};
 }
 //#endregion
-export { i as n, r as t };
+//#region src/stories/messages/es/copy.ts
+var a = {
+	label: "Copiar",
+	copied: "Copiado",
+	error: "No se pudo copiar"
+};
+//#endregion
+export { r as n, i as r, a as t };

package/dist/_shared/datepicker.js

@@ -1,22 +1,23 @@
 import '../datepicker.css';
-import { n as e } from "./brandmessagescontext.js";
+import { r as e } from "./brandmessagescontext.js";
 import { Icon as t } from "../icon.js";
 import { Input as n } from "../input.js";
-import { Popover as r } from "../popover.js";
-import { Calendar as i } from "../calendar.js";
-import { forwardRef as a, useCallback as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { t as r } from "./assign-ref.js";
+import { Popover as i } from "../popover.js";
+import { Calendar as a } from "../calendar.js";
+import { forwardRef as o, useCallback as s, useId as c, useMemo as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region src/stories/molecules/DatePicker/dateMask.ts
-var p = /[‎‏؜]/g, m = new Date(2026, 8, 25);
-function h(e, t) {
+var m = /[‎‏؜]/g, h = new Date(2026, 8, 25);
+function g(e, t) {
 	return String(e).padStart(t, "0");
 }
-function g(e) {
+function _(e) {
 	let t = new Intl.DateTimeFormat(e, {
 		day: "2-digit",
 		month: "2-digit",
 		year: "numeric"
-	}).formatToParts(m), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(p, "").trim() !== "")?.value.replace(p, "").trim() || "/", i = {
+	}).formatToParts(h), n = t.filter((e) => e.type === "day" || e.type === "month" || e.type === "year").map((e) => e.type), r = t.find((e) => e.type === "literal" && e.value.replace(m, "").trim() !== "")?.value.replace(m, "").trim() || "/", i = {
 		day: 2,
 		month: 2,
 		year: 4
@@ -27,13 +28,13 @@ function g(e) {
 			month: e.getMonth() + 1,
 			year: e.getFullYear()
 		};
-		return n.map((e) => h(t[e], i[e])).join(r);
+		return n.map((e) => g(t[e], i[e])).join(r);
 	}
 	function o(e) {
 		return n.map((t) => e[t]).join(r);
 	}
 	function s(e) {
-		let t = e.replace(p, "").trim();
+		let t = e.replace(m, "").trim();
 		if (/\p{L}/u.test(t)) return null;
 		let r = t.split(/\D+/).filter(Boolean);
 		if (r.length !== 3) return null;
@@ -53,117 +54,131 @@ function g(e) {
 	};
 }
 //#endregion
+//#region src/stories/messages/es/datePicker.ts
+var v = {
+	openCalendar: "Abrir calendario",
+	invalid: "Escribe una fecha completa, con el día, el mes y el año.",
+	calendar: "Calendario",
+	maskLetters: {
+		day: "dd",
+		month: "mm",
+		year: "aaaa"
+	}
+};
+//#endregion
 //#region src/stories/molecules/DatePicker/DatePicker.tsx
-function _(e) {
+function y(e) {
 	return `${String(e.getFullYear()).padStart(4, "0")}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}`;
 }
-var v = a(function({ value: a, onChange: p, placeholder: m, maskLetters: h, invalidMessage: v, openCalendarLabel: y, minDate: b, maxDate: x, disabledDates: S, size: C = "md", disabled: w, readOnly: T, error: E = !1, locale: D = "es-ES", id: O, name: k, describedBy: ee, "aria-describedby": te, "aria-label": ne, calendarLabel: re, previousMonthLabel: ie, nextMonthLabel: ae, previousYearsLabel: A, nextYearsLabel: j, yearGridLabel: M, gridLabel: N, onBlur: P, className: F }, I) {
-	let L = e("datePicker"), [R, z] = u(!1), B = c(() => g(D), [D]), V = a instanceof Date ? B.format(a) : "", [H, U] = u(V), [W, G] = u(V);
-	V !== W && (G(V), U(V));
-	let K = l(null), q = o((e) => {
-		K.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
-	}, [I]), J = H.trim(), Y = J ? B.parse(H) : null, X = J !== "" && !Y, oe = E || X, Z = `${s()}-date-picker-invalid`, se = [ee ?? te, X ? Z : void 0].filter(Boolean).join(" ") || void 0, ce = o((e) => {
-		(T || w) && e || z(e);
-	}, [w, T]), le = o((e) => {
+var b = o(function({ value: o, onChange: m, placeholder: h, maskLetters: g, invalidMessage: b, openCalendarLabel: ee, minDate: x, maxDate: te, disabledDates: ne, size: S = "md", disabled: C, readOnly: w, required: re, error: T = !1, locale: E = "es-ES", id: D, name: O, describedBy: ie, "aria-describedby": ae, "aria-label": oe, calendarLabel: k, previousMonthLabel: A, nextMonthLabel: j, previousYearsLabel: M, nextYearsLabel: N, yearGridLabel: P, gridLabel: F, today: I, onBlur: L, className: R }, z) {
+	let B = e("datePicker", v), [V, H] = d(!1), U = l(() => _(E), [E]), W = o instanceof Date ? U.format(o) : "", [G, K] = d(W), [q, se] = d(W);
+	W !== q && (se(W), K(W));
+	let J = u(null), ce = s((e) => {
+		J.current = e, r(z, e);
+	}, [z]), Y = G.trim(), X = Y ? U.parse(G) : null, Z = Y !== "" && !X, le = T || Z, Q = `${c()}-date-picker-invalid`, ue = [ie ?? ae, Z ? Q : void 0].filter(Boolean).join(" ") || void 0, de = s((e) => {
+		(w || C) && e || H(e);
+	}, [C, w]), fe = s((e) => {
 		let t = e.target.value;
-		if (U(t), t.trim() === "") {
-			p?.(null);
+		if (K(t), t.trim() === "") {
+			m?.(null);
 			return;
 		}
-		let n = B.parse(t);
-		n && p?.(n);
-	}, [B, p]), ue = o((e) => {
-		if (e.key === "ArrowDown" && !T && !w) {
-			e.preventDefault(), z(!0);
+		let n = U.parse(t);
+		n && m?.(n);
+	}, [U, m]), pe = s((e) => {
+		if (e.key === "ArrowDown" && !w && !C) {
+			e.preventDefault(), H(!0);
 			return;
 		}
-		e.key === "Escape" && R && (e.preventDefault(), z(!1));
+		e.key === "Escape" && V && (e.preventDefault(), H(!1));
 	}, [
-		w,
-		R,
-		T
-	]), Q = o((e) => {
-		U(B.format(e)), p?.(e), z(!1), requestAnimationFrame(() => K.current?.focus());
-	}, [B, p]), de = /* @__PURE__ */ d("button", {
+		C,
+		V,
+		w
+	]), me = s((e) => {
+		K(U.format(e)), m?.(e), H(!1), requestAnimationFrame(() => J.current?.focus());
+	}, [U, m]), he = /* @__PURE__ */ f("button", {
 		type: "button",
 		className: "date-picker__button",
-		"aria-label": L("openCalendar", y),
+		"aria-label": B("openCalendar", ee),
 		"aria-haspopup": "dialog",
-		"aria-expanded": R,
-		disabled: w,
-		tabIndex: T ? -1 : void 0,
-		children: /* @__PURE__ */ d(t, {
+		"aria-expanded": V,
+		disabled: C,
+		tabIndex: w ? -1 : void 0,
+		children: /* @__PURE__ */ f(t, {
 			name: "calendar",
 			size: "sm",
 			className: "date-picker__glyph"
 		})
-	}), $ = L("calendar", re);
-	return /* @__PURE__ */ f("div", {
+	}), $ = B("calendar", k);
+	return /* @__PURE__ */ p("div", {
 		className: [
 			"date-picker",
-			C === "md" ? "" : `date-picker--${C}`,
-			F ?? ""
+			S === "md" ? "" : `date-picker--${S}`,
+			R ?? ""
 		].filter(Boolean).join(" "),
 		children: [
-			k && /* @__PURE__ */ d("input", {
+			O && /* @__PURE__ */ f("input", {
 				type: "hidden",
-				name: k,
-				value: a instanceof Date ? _(a) : ""
+				name: O,
+				value: o instanceof Date ? y(o) : ""
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ p("div", {
 				className: "date-picker__control",
-				children: [/* @__PURE__ */ d(n, {
-					ref: q,
-					id: O,
+				children: [/* @__PURE__ */ f(n, {
+					ref: ce,
+					id: D,
 					className: "date-picker__input",
 					type: "text",
 					inputMode: "numeric",
 					autoComplete: "off",
-					size: C,
-					error: oe,
-					value: H,
-					placeholder: m ?? B.mask(L("maskLetters", h)),
-					disabled: w,
-					readOnly: T,
-					"aria-label": ne,
-					"aria-describedby": se,
-					onChange: le,
-					onKeyDown: ue,
-					onBlur: P
-				}), /* @__PURE__ */ d(r, {
-					trigger: de,
+					size: S,
+					error: le,
+					value: G,
+					placeholder: h ?? U.mask(B("maskLetters", g)),
+					disabled: C,
+					readOnly: w,
+					required: re,
+					"aria-label": oe,
+					"aria-describedby": ue,
+					onChange: fe,
+					onKeyDown: pe,
+					onBlur: L
+				}), /* @__PURE__ */ f(i, {
+					trigger: he,
 					label: $,
-					open: R,
-					onOpenChange: ce,
+					open: V,
+					onOpenChange: de,
 					side: "bottom",
 					align: "end",
 					sideOffset: -1,
 					className: "date-picker__popover",
-					children: /* @__PURE__ */ d(i, {
-						value: Y ?? a ?? null,
-						onChange: Q,
-						gridLabel: N ?? $,
-						previousMonthLabel: ie,
-						nextMonthLabel: ae,
-						previousYearsLabel: A,
-						nextYearsLabel: j,
-						yearGridLabel: M,
-						minDate: b,
-						maxDate: x,
-						disabledDates: S,
-						locale: D,
-						size: C
+					children: /* @__PURE__ */ f(a, {
+						value: X ?? o ?? null,
+						onChange: me,
+						gridLabel: F ?? $,
+						previousMonthLabel: A,
+						nextMonthLabel: j,
+						previousYearsLabel: M,
+						nextYearsLabel: N,
+						yearGridLabel: P,
+						today: I,
+						minDate: x,
+						maxDate: te,
+						disabledDates: ne,
+						locale: E,
+						size: S
 					})
 				})]
 			}),
-			X && /* @__PURE__ */ d("span", {
-				id: Z,
+			Z && /* @__PURE__ */ f("span", {
+				id: Q,
 				className: "date-picker__message",
 				role: "alert",
-				children: L("invalid", v)
+				children: B("invalid", b)
 			})
 		]
 	});
 });
 //#endregion
-export { v as t };
+export { b as t };

package/dist/_shared/default-render-link.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/stories/constants/default-render-link.tsx
+function t(t) {
+	return /* @__PURE__ */ e("a", { ...t });
+}
+function n(t) {
+	return function(n) {
+		return /* @__PURE__ */ e(t, { ...n });
+	};
+}
+//#endregion
+export { n, t };

package/dist/_shared/dialogsurface.js

@@ -7,7 +7,7 @@ function r({ className: r }) {
 	return /* @__PURE__ */ e(t.Backdrop, { className: n("dialog-overlay", r) });
 }
 function i({ layout: t, noTitle: r = !1, className: i, children: a }) {
-	return /* @__PURE__ */ e("header", {
+	return /* @__PURE__ */ e("div", {
 		className: n("dialog-header", `dialog-header--${t}`, r && "dialog-header--no-title", i),
 		children: a
 	});

package/dist/_shared/dotsbutton.js

@@ -0,0 +1,31 @@
+import '../dotsbutton.css';
+import { r as e } from "./brandmessagescontext.js";
+import { Icon as t } from "../icon.js";
+import { t as n } from "./focusable-when-disabled.js";
+import { Button as r } from "../button.js";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/stories/messages/es/dotsButton.ts
+var o = { label: "Más opciones" }, s = i(function({ size: n = "md", orientation: i = "horizontal", "aria-label": s, className: c, ...l }, u) {
+	let d = e("dotsButton", o), f = [
+		"dots-button",
+		i === "vertical" ? "dots-button--vertical" : "",
+		c
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ a(r, {
+		ref: u,
+		variant: "ghost",
+		iconOnly: !0,
+		size: n,
+		"aria-label": d("label", s),
+		className: f,
+		...l,
+		children: /* @__PURE__ */ a(t, {
+			name: "dots",
+			size: n === "lg" ? "md" : "sm"
+		})
+	});
+});
+n(s);
+//#endregion
+export { s as t };

package/dist/_shared/dropdownitems.js

@@ -1,13 +1,7 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Menu as r } from "@base-ui/react/menu";
 //#region src/stories/molecules/_shared/dropdownItems.tsx
-function i({ children: e, ...n }) {
-	return /* @__PURE__ */ t("a", {
-		...n,
-		children: e
-	});
-}
-function a(r, i, a, o) {
+function i(r, i, a, o) {
 	let s = a && o ? /* @__PURE__ */ n("span", {
 		className: `${o}__item-text`,
 		children: [/* @__PURE__ */ t("span", {
@@ -24,7 +18,7 @@ function a(r, i, a, o) {
 		children: i
 	}), s] }) : /* @__PURE__ */ t(e, { children: s });
 }
-function o(e) {
+function a(e) {
 	return e.reduce((e, t) => {
 		let n = t.type === "radio", r = e[e.length - 1];
 		return r && r.radio === n ? r.items.push(t) : e.push({
@@ -33,26 +27,26 @@ function o(e) {
 		}), e;
 	}, []);
 }
-function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClass: c, blockClass: l, radioValue: u, onRadioValueChange: d }) {
-	let f = (e, o) => {
-		if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: i }, o);
+function o({ items: e, itemClass: n, separatorClass: o, renderLink: s, labelClass: c, blockClass: l, radioValue: u, onRadioValueChange: d }) {
+	let f = (e, a) => {
+		if (e.type === "separator") return /* @__PURE__ */ t(r.Separator, { className: o }, a);
 		if (e.type === "label") return c ? /* @__PURE__ */ t(r.Group, { children: /* @__PURE__ */ t(r.GroupLabel, {
 			className: c,
 			children: e.label
-		}) }, o) : null;
+		}) }, a) : null;
 		if (e.type === "radio") return /* @__PURE__ */ t(r.RadioItem, {
 			className: n(),
 			value: e.value,
 			disabled: e.disabled,
 			closeOnClick: e.closeOnSelect !== !1,
-			children: a(e.label, e.icon, void 0, l)
-		}, o);
-		let u = a(e.label, e.icon, e.description, l);
+			children: i(e.label, e.icon, void 0, l)
+		}, a);
+		let u = i(e.label, e.icon, e.description, l);
 		return e.type === "link" ? e.disabled ? /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			disabled: !0,
 			children: u
-		}, o) : /* @__PURE__ */ t(r.Item, {
+		}, a) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			render: (t) => s({
 				...t,
@@ -60,7 +54,7 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 				className: t.className ?? n(e.destructive),
 				children: u
 			})
-		}, o) : /* @__PURE__ */ t(r.Item, {
+		}, a) : /* @__PURE__ */ t(r.Item, {
 			className: n(e.destructive),
 			disabled: e.disabled,
 			closeOnClick: e.closeOnSelect !== !1,
@@ -72,11 +66,11 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 				setTimeout(() => e.onClick(), 0);
 			},
 			children: u
-		}, o);
+		}, a);
 	}, p = e;
 	if (!p.some((e) => e.type === "radio")) return p.map(f);
 	let m = 0;
-	return o(p).map((e, n) => {
+	return a(p).map((e, n) => {
 		let i = m;
 		m += e.items.length;
 		let a = e.items.map((e, t) => f(e, i + t));
@@ -88,4 +82,4 @@ function s({ items: e, itemClass: n, separatorClass: i, renderLink: s, labelClas
 	});
 }
 //#endregion
-export { s as n, i as t };
+export { o as t };

package/dist/_shared/env.js

@@ -1,6 +1,17 @@
 //#region src/stories/constants/env.ts
 function e() {
-	return globalThis.process?.env?.NODE_ENV !== "production";
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return !1;
+	}
+}
+var t = /* @__PURE__ */ new Set();
+function n(n, r) {
+	!e() || t.has(n) || (t.add(n), console.warn(`@studiolxd/brand: ${r}`));
+}
+function r(e, t, r) {
+	n(`deprecated:${e}:${t}`, `\`<${e} ${t}>\` está obsoleta; usa ${r}. Se retira en la v52.`);
 }
 //#endregion
-export { e as t };
+export { r as n, e as t };

package/dist/_shared/field-optional.js

@@ -0,0 +1,9 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/stories/constants/field-optional.ts
+var n = e(!1);
+function r(e, r) {
+	let i = t(n);
+	return e ?? (i && !r);
+}
+//#endregion
+export { r as n, n as t };

package/dist/_shared/fieldshell.js

@@ -0,0 +1,85 @@
+import { r as e } from "./brandmessagescontext.js";
+import { VisuallyHidden as t } from "../visually-hidden.js";
+import { ErrorText as n } from "../error-text.js";
+import { Label as r } from "../label.js";
+import { useId as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/stories/messages/es/field.ts
+var c = {
+	optional: "(opcional)",
+	required: "obligatorio"
+};
+//#endregion
+//#region src/stories/molecules/_shared/FieldShell.tsx
+function l(e) {
+	return `${e}-required`;
+}
+function u({ id: n, label: r }) {
+	return /* @__PURE__ */ o(t, {
+		id: n,
+		children: e("field", c)("required", r)
+	});
+}
+function d(...e) {
+	return e.filter(Boolean).join(" ") || void 0;
+}
+function f({ id: e, error: t = !1, errorMessage: n, helperText: r, describedBy: a }) {
+	let o = i(), s = e ?? o, c = n ? `${s}-error` : void 0, l = r ? `${s}-helper` : void 0;
+	return {
+		id: s,
+		labelId: `${s}-label`,
+		errorId: c,
+		helperId: l,
+		describedBy: d(c, l, a),
+		hasError: t || !!n,
+		errorMessage: n,
+		helperText: r
+	};
+}
+function p({ field: i, block: l, modifiers: u = [], className: d, size: f = "md", label: p, optional: m = !1, optionalLabel: h, labelHidden: g = !1, layout: _ = "stack", labelFor: v, labelIdentified: y = !1, rootProps: b, children: x, footer: S }) {
+	let C = v ?? i.id, w = y ? i.labelId : void 0, T = e("field", c), E = m && p ? /* @__PURE__ */ s(a, { children: [
+		p,
+		" ",
+		/* @__PURE__ */ o("span", {
+			className: "label__optional",
+			children: T("optional", h)
+		})
+	] }) : p;
+	return /* @__PURE__ */ s("div", {
+		...b,
+		className: [
+			l,
+			...u,
+			d
+		].filter(Boolean).join(" "),
+		children: [
+			_ === "inline" ? /* @__PURE__ */ s("label", {
+				className: `${l}__control`,
+				htmlFor: C,
+				children: [x, o(g ? t : "span", {
+					id: w,
+					className: `${l}__label`,
+					children: E
+				})]
+			}) : /* @__PURE__ */ s(a, { children: [p ? /* @__PURE__ */ o(r, {
+				id: w,
+				htmlFor: C,
+				hidden: g,
+				size: f,
+				children: E
+			}) : null, x] }),
+			i.errorMessage && /* @__PURE__ */ o(n, {
+				id: i.errorId,
+				children: i.errorMessage
+			}),
+			i.helperText && /* @__PURE__ */ o("span", {
+				id: i.helperId,
+				className: `${l}__helper`,
+				children: i.helperText
+			}),
+			S
+		]
+	});
+}
+//#endregion
+export { f as a, l as i, p as n, d as r, u as t };