@studiolxd/brand 38.17.0 → 39.0.0

package/dist/card.js

@@ -24,8 +24,7 @@ var l = s(function({ href: r, render: s, external: l = !1, title: u, description
 		}),
 		d && (typeof d == "string" ? /* @__PURE__ */ a("p", { children: d }) : d),
 		y,
-		f !== void 0 && /* @__PURE__ */ a(e, { children: f }),
-		/* @__PURE__ */ a(t, { size: "lg" })
+		f !== void 0 && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(e, { children: f }), /* @__PURE__ */ a(t, { size: "lg" })] })
 	] }), w = h && /* @__PURE__ */ a("div", {
 		className: "card__media",
 		children: /* @__PURE__ */ a("img", {

package/dist/confirm-dialog.css

@@ -1 +1 @@
-.confirm-dialog__actions.modal__footer{margin-block-start:var(--confirm-dialog-actions-space-before)}
+.confirm-dialog__actions.modal__footer{margin-block-start:var(--confirm-dialog-actions-space-before)}.confirm-dialog__phrase{margin-block-start:var(--confirm-dialog-phrase-space-before)}

package/dist/confirm-dialog.js

@@ -2,63 +2,86 @@
 import './confirm-dialog.css';
 import { Button as e } from "./button.js";
 import { Modal as t } from "./modal.js";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useEffect as a, useRef as o, useState as s } from "react";
+import { InputField as n } from "./input-field.js";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useEffect as o, useId as s, useRef as c, useState as l } from "react";
 //#region src/stories/molecules/ConfirmDialog/ConfirmDialog.tsx
-function c({ open: c, title: l, description: u, children: d, onConfirm: f, onCancel: p, onConfirmError: m, secondaryActionLabel: h, onSecondaryAction: g, destructive: _ = !1, confirmLabel: v = "Confirmar", cancelLabel: y = "Cancelar", pendingLabel: b = "Confirmando…", closeLabel: x = "Cerrar", container: S, className: C }) {
-	let w = o(null), [T, E] = s(!1);
-	a(() => {
-		c || E(!1);
-	}, [c]);
-	let D = () => {
-		T || p();
-	}, O = async () => {
-		if (T) return;
-		let e = f();
+function u({ open: u, title: d, description: f, children: p, onConfirm: m, onCancel: h, onConfirmError: g, secondaryActionLabel: _, onSecondaryAction: v, destructive: y = !1, confirmLabel: b = "Confirmar", cancelLabel: x = "Cancelar", pendingLabel: S = "Confirmando…", closeLabel: C = "Cerrar", confirmPhrase: w, confirmPhraseLabel: T, confirmPhraseMismatch: E, container: D, className: O }) {
+	let k = c(null), A = c(null), j = s(), [M, N] = l(!1), [P, F] = l(""), [I, L] = l(!1), R = w === void 0 || P.trim() === w, z = I && !R;
+	o(() => {
+		u || (N(!1), F(""), L(!1));
+	}, [u]);
+	let B = () => {
+		M || h();
+	}, V = async () => {
+		if (M || !R) return;
+		let e = m();
 		if (e instanceof Promise) {
-			E(!0);
+			N(!0);
 			try {
 				await e;
 			} catch (e) {
-				m?.(e);
+				g?.(e);
 			} finally {
-				E(!1);
+				N(!1);
 			}
 		}
 	};
-	return /* @__PURE__ */ r(t, {
-		open: c,
-		onClose: D,
-		title: l,
-		closeLabel: x,
-		container: S,
-		initialFocus: w,
-		...u == null ? {} : { description: u },
-		footerClassName: ["confirm-dialog__actions", C].filter(Boolean).join(" "),
-		footer: /* @__PURE__ */ i(n, { children: [
-			/* @__PURE__ */ r(e, {
-				ref: w,
+	return /* @__PURE__ */ a(t, {
+		open: u,
+		onClose: B,
+		title: d,
+		closeLabel: C,
+		container: D,
+		initialFocus: w === void 0 ? k : A,
+		...f == null ? {} : { description: f },
+		footerClassName: ["confirm-dialog__actions", O].filter(Boolean).join(" "),
+		footer: /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i(e, {
+				ref: k,
 				variant: "outline",
-				onClick: D,
-				disabled: T,
-				children: y
+				onClick: B,
+				disabled: M,
+				children: x
 			}),
-			h && g && /* @__PURE__ */ r(e, {
+			_ && v && /* @__PURE__ */ i(e, {
 				variant: "outline",
-				onClick: g,
-				disabled: T,
-				children: h
+				onClick: v,
+				disabled: M,
+				children: _
 			}),
-			/* @__PURE__ */ r(e, {
-				variant: _ ? "outline" : "primary",
-				destructive: _,
-				onClick: O,
-				disabled: T,
-				children: T ? b : v
+			/* @__PURE__ */ i(e, {
+				variant: y ? "outline" : "primary",
+				destructive: y,
+				onClick: V,
+				disabled: M || !R,
+				children: M ? S : b
 			})
 		] }),
-		children: d
+		children: [p, w !== void 0 && /* @__PURE__ */ i(n, {
+			ref: A,
+			id: `${j}-confirm-phrase`,
+			className: "confirm-dialog__phrase",
+			label: T ?? "",
+			value: P,
+			disabled: M,
+			autoComplete: "off",
+			autoCorrect: "off",
+			autoCapitalize: "none",
+			spellCheck: !1,
+			error: z,
+			...z ? { errorMessage: E } : {},
+			onChange: (e) => {
+				F(e.target.value), L(!1);
+			},
+			onBlur: () => {
+				P !== "" && L(!0);
+			},
+			onKeyDown: (e) => {
+				e.key === "Enter" && (e.preventDefault(), R ? V() : P !== "" && L(!0));
+			}
+		})]
 	});
 }
 //#endregion
-export { c as ConfirmDialog };
+export { u as ConfirmDialog };

package/dist/star-rating.css

@@ -1 +1 @@
-.star-rating{align-items:center;gap:var(--star-rating-gap);color:var(--star-rating-track-color);display:inline-flex}.star-rating__star{display:inline-flex;position:relative}.star-rating__glyph{--icon-size:var(--star-rating-star-size)}.star-rating__glyph--fill{color:var(--star-rating-fill-color);fill:var(--star-rating-fill-color);transition:color var(--star-rating-transition-duration) var(--star-rating-transition-easing);position:absolute;inset-block-start:0;inset-inline-start:0}.star-rating__glyph--half{clip-path:inset(0 50% 0 0)}[dir=rtl] .star-rating__glyph--half{clip-path:inset(0 0 0 50%)}.star-rating__option{cursor:var(--star-rating-cursor);display:inline-flex}.star-rating__input:focus-visible+.star-rating__star{outline:var(--star-rating-focus-ring-width) solid var(--star-rating-focus-ring-color);outline-offset:var(--star-rating-focus-ring-offset)}.star-rating__input:disabled+.star-rating__star{opacity:var(--star-rating-disabled-opacity)}.star-rating__option:has(.star-rating__input:disabled){cursor:var(--star-rating-disabled-cursor)}.star-rating.star-rating--sm{--star-rating-star-size:var(--star-rating-sm-star-size)}.star-rating.star-rating--lg{--star-rating-star-size:var(--star-rating-lg-star-size)}
+.star-rating{align-items:center;gap:var(--star-rating-count-gap);color:var(--star-rating-track-color);display:inline-flex}.star-rating__stars{align-items:center;gap:var(--star-rating-gap);display:inline-flex}.star-rating__count{color:var(--star-rating-count-color)}.star-rating__empty{color:var(--star-rating-empty-color)}.star-rating__star{display:inline-flex;position:relative}.star-rating__glyph{--icon-size:var(--star-rating-star-size)}.star-rating__glyph--fill{color:var(--star-rating-fill-color);fill:var(--star-rating-fill-color);transition:color var(--star-rating-transition-duration) var(--star-rating-transition-easing);position:absolute;inset-block-start:0;inset-inline-start:0}.star-rating__glyph--half{clip-path:inset(0 50% 0 0)}[dir=rtl] .star-rating__glyph--half{clip-path:inset(0 0 0 50%)}.star-rating.star-rating--input{gap:var(--star-rating-gap)}.star-rating__option{cursor:var(--star-rating-cursor);display:inline-flex}.star-rating__input:focus-visible+.star-rating__star{outline:var(--star-rating-focus-ring-width) solid var(--star-rating-focus-ring-color);outline-offset:var(--star-rating-focus-ring-offset)}.star-rating__input:disabled+.star-rating__star{opacity:var(--star-rating-disabled-opacity)}.star-rating__option:has(.star-rating__input:disabled){cursor:var(--star-rating-disabled-cursor)}.star-rating.star-rating--sm{--star-rating-star-size:var(--star-rating-sm-star-size)}.star-rating.star-rating--lg{--star-rating-star-size:var(--star-rating-lg-star-size)}

package/dist/star-rating.js

@@ -23,54 +23,68 @@ function c({ fill: t }) {
 		})]
 	});
 }
-function l({ value: e, defaultValue: l, onValueChange: u, max: d = 5, readOnly: f = !0, disabled: p = !1, size: m = "md", name: h, locale: g = "es-ES", valueLabel: _ = (e, t) => `${e.toLocaleString(g)} de ${t} estrellas`, optionLabel: v = (e, t) => `${e.toLocaleString(g)} de ${t} estrellas`, groupLabel: y = "Valoración", className: b, ...x }) {
-	let S = i(), [C, w] = a(l), [T, E] = a(void 0), D = e !== void 0, O = (D ? e : C) ?? 0, k = [
+function l(e) {
+	let { value: l, defaultValue: u, onValueChange: d, max: f = 5, reviewCount: p, readOnly: m = !0, disabled: h = !1, size: g = "md", name: _, valueLabel: v, optionLabel: y, groupLabel: b, countLabel: x, emptyLabel: S, className: C, ...w } = e, T = i(), [E, D] = a(u), [O, k] = a(void 0), A = l !== void 0, j = (A ? l : E) ?? 0, M = [
 		"star-rating",
-		m === "md" ? "" : `star-rating--${m}`,
-		f ? "" : "star-rating--input",
-		b ?? ""
-	].filter(Boolean).join(" "), A = Array.from({ length: d }, (e, t) => t);
-	if (f) {
-		let e = o(O, d);
-		return /* @__PURE__ */ n("div", {
-			className: k,
+		g === "md" ? "" : `star-rating--${g}`,
+		m ? "" : "star-rating--input",
+		C ?? ""
+	].filter(Boolean).join(" "), N = Array.from({ length: f }, (e, t) => t);
+	if (m) {
+		if (l === null) return /* @__PURE__ */ n("div", {
+			className: M,
+			...w,
+			children: /* @__PURE__ */ n("span", {
+				className: "star-rating__empty",
+				children: S ?? ""
+			})
+		});
+		let e = o(j, f);
+		return /* @__PURE__ */ r("div", {
+			className: M,
 			role: "img",
-			"aria-label": _(e, d),
-			...x,
-			children: A.map((t) => /* @__PURE__ */ n(c, { fill: s(t, e) }, t))
+			"aria-label": v?.(e, f, p) ?? "",
+			...w,
+			children: [/* @__PURE__ */ n("span", {
+				className: "star-rating__stars",
+				children: N.map((t) => /* @__PURE__ */ n(c, { fill: s(t, e) }, t))
+			}), p !== void 0 && /* @__PURE__ */ n("span", {
+				className: "star-rating__count",
+				children: x?.(p) ?? ""
+			})]
 		});
 	}
-	function j(e) {
-		D || w(e), u?.(e);
+	function P(e) {
+		A || D(e), d?.(e);
 	}
-	let M = T ?? Math.round(O);
+	let F = O ?? Math.round(j);
 	return /* @__PURE__ */ n("div", {
-		className: k,
+		className: M,
 		role: "radiogroup",
-		"aria-label": y,
-		onPointerLeave: () => E(void 0),
-		...x,
-		children: A.map((e) => {
+		"aria-label": b ?? "",
+		onPointerLeave: () => k(void 0),
+		...w,
+		children: N.map((e) => {
 			let i = e + 1;
 			return /* @__PURE__ */ r("label", {
 				className: "star-rating__option",
 				onPointerEnter: () => {
-					p || E(i);
+					h || k(i);
 				},
 				children: [
 					/* @__PURE__ */ n("input", {
 						className: "star-rating__input visually-hidden",
 						type: "radio",
-						name: h ?? S,
+						name: _ ?? T,
 						value: i,
-						checked: Math.round(O) === i,
-						disabled: p,
-						onChange: () => j(i),
-						onFocus: () => E(i),
-						onBlur: () => E(void 0)
+						checked: Math.round(j) === i,
+						disabled: h,
+						onChange: () => P(i),
+						onFocus: () => k(i),
+						onBlur: () => k(void 0)
 					}),
-					/* @__PURE__ */ n(c, { fill: i <= M ? "full" : "empty" }),
-					/* @__PURE__ */ n(t, { children: v(i, d) })
+					/* @__PURE__ */ n(c, { fill: i <= F ? "full" : "empty" }),
+					/* @__PURE__ */ n(t, { children: y?.(i, f) ?? "" })
 				]
 			}, i);
 		})