@banzamel/mineralui 0.10.3 → 1.0.0

package/dist/cards-CYzgOCG5.js

@@ -0,0 +1,613 @@
+import { t as e } from "./MArrowUpIcon-CudFd1sD.js";
+import { t } from "./MArrowDownIcon-BslRpwqk.js";
+import { t as n } from "./MClockIcon-D4K6fmV9.js";
+import { a as r, i, n as a, o, r as s, s as c, t as l } from "./MSortIcon-DGHyltKa.js";
+import { t as u } from "./cn-B_veu23e.js";
+import { n as d, t as f } from "./creditCards-Bk9rsMJf.js";
+import { t as p } from "./MPopover-C7ZJz7Uj.js";
+import { i as m, r as h } from "./MDropdownMenu-BcRbNfoR.js";
+import { t as g } from "./MButton-BIWj6T2J.js";
+import { t as _ } from "./MBadge-jh7HI3jR.js";
+import { t as v } from "./MCheckbox-DhDggBnO.js";
+import { t as ee } from "./MAvatar-B_YPaZt9.js";
+import { t as te } from "./MRating-0-_XBF-T.js";
+import { t as y } from "./MInputSearch-CrVrpYsR.js";
+import { useCallback as b, useEffect as x, useMemo as S, useRef as C, useState as w } from "react";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/components/cards/MCardPayment/MCardPayment.tsx
+function O(e) {
+	let t = e.replace(/\D/g, "");
+	return t.length <= 4 ? t : `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${t.slice(-4)}`;
+}
+function k({ holder: e, number: t, expiry: n, brand: r, brandIcon: i, balance: a, balanceLabel: o = "Current balance", color: s, className: c, ...l }) {
+	let p = d(t), m = r ?? p.brand, h = f.find((e) => e.brand === m) ?? p, g = O(t), _ = h.iconLabel;
+	return /* @__PURE__ */ D("div", {
+		className: u("card-payment", s || "primary", c),
+		...l,
+		children: [
+			a !== void 0 && /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+				className: "cp-balance-label",
+				children: o
+			}), /* @__PURE__ */ E("p", {
+				className: "cp-balance",
+				children: a
+			})] }),
+			/* @__PURE__ */ D("div", {
+				className: "cp-row",
+				children: [/* @__PURE__ */ E("span", {
+					className: u("cp-brand", !i && m),
+					children: i ?? _
+				}), /* @__PURE__ */ E("span", {
+					className: "cp-number",
+					children: g
+				})]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "cp-details",
+				children: [/* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+					className: "cp-field-label",
+					children: "MCard holder"
+				}), /* @__PURE__ */ E("p", {
+					className: "cp-field-value",
+					children: e
+				})] }), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
+					className: "cp-field-label",
+					children: "Expiration date"
+				}), /* @__PURE__ */ E("p", {
+					className: "cp-field-value",
+					children: n
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/ServiceCardsShared/ServiceCardsShared.tsx
+function A({ variant: a, title: l, description: d, price: f, currency: p = "PLN", duration: v, available: y, image: b, gallery: S, galleryAutoPlay: C = !1, rating: O, reviewCount: k, favorite: A, onFavorite: j, menuItems: M, onAddToCart: N, actionLabel: P, icon: F, color: I = "primary", leader: L, participants: R, maxParticipants: z, quantity: B, onQuantityChange: V, date: H, location: U, status: W, value: ne, trend: G, className: K, ...q }) {
+	let [J, Y] = w(0), [X, re] = w(!1), [ie, ae] = w(1), Z = B ?? ie, Q = S && S.length > 0 ? S : b ? [b] : [];
+	x(() => {
+		J >= Q.length && Y(0);
+	}, [J, Q.length]), x(() => {
+		if (!X) return;
+		let e = window.setTimeout(() => {
+			re(!1);
+		}, 220);
+		return () => window.clearTimeout(e);
+	}, [J, X]);
+	function oe(e) {
+		e === J || e < 0 || e >= Q.length || (Q.length > 1 && re(!0), Y(e));
+	}
+	x(() => {
+		if (!C || Q.length <= 1) return;
+		let e = window.setInterval(() => {
+			re(!0), Y((e) => (e + 1) % Q.length);
+		}, 3500);
+		return () => window.clearInterval(e);
+	}, [C, Q.length]);
+	function se(e) {
+		let t = Math.max(1, e);
+		V ? V(t) : ae(t);
+	}
+	let ce = y === !0 ? "Available" : y === !1 ? "Unavailable" : typeof y == "number" ? `${y} spots` : null, $ = H ? H instanceof Date ? H : new Date(H) : null, le = $ ? $.getDate() : null, ue = $ ? $.toLocaleString("en", { month: "short" }).toUpperCase() : null, de = G === void 0 ? null : G > 0 ? "up" : G < 0 ? "down" : "neutral";
+	return a === "widget" ? /* @__PURE__ */ E("div", {
+		className: u("card-service", "widget", `color-${I}`, K),
+		...q,
+		children: /* @__PURE__ */ D("div", {
+			className: "cs-widget",
+			children: [F && /* @__PURE__ */ E("span", {
+				className: "cs-widget-icon",
+				children: F
+			}), /* @__PURE__ */ D("div", {
+				className: "cs-widget-content",
+				children: [
+					/* @__PURE__ */ E("span", {
+						className: "cs-widget-label",
+						children: l
+					}),
+					/* @__PURE__ */ E("span", {
+						className: "cs-widget-value",
+						children: ne
+					}),
+					G !== void 0 && /* @__PURE__ */ D("span", {
+						className: u("cs-widget-trend", de),
+						children: [
+							de === "up" && /* @__PURE__ */ E(e, { size: 14 }),
+							de === "down" && /* @__PURE__ */ E(t, { size: 14 }),
+							/* @__PURE__ */ D("span", { children: [
+								G > 0 ? "+" : "",
+								G,
+								"%"
+							] })
+						]
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ D("div", {
+		className: u("card-service", a, `color-${I}`, K),
+		...q,
+		children: [
+			Q.length > 0 && /* @__PURE__ */ D("div", {
+				className: "cs-gallery",
+				children: [
+					/* @__PURE__ */ E("img", {
+						src: Q[J],
+						alt: l,
+						className: u("cs-image", X && "is-transitioning")
+					}),
+					Q.length > 1 && /* @__PURE__ */ E("div", {
+						className: "cs-gallery-dots",
+						children: Q.map((e, t) => /* @__PURE__ */ E("button", {
+							type: "button",
+							className: u("cs-dot", t === J && "active"),
+							onClick: () => oe(t),
+							"aria-label": `Image ${t + 1}`
+						}, t))
+					}),
+					(j || M && M.length > 0) && /* @__PURE__ */ D("div", {
+						className: "cs-gallery-actions",
+						children: [M && M.length > 0 && /* @__PURE__ */ E(m, {
+							className: "cs-menu-wrap",
+							trigger: /* @__PURE__ */ E(g, {
+								variant: "ghost",
+								iconOnly: !0,
+								shape: "circle",
+								"aria-label": "More options",
+								className: "cs-overlay-btn",
+								children: /* @__PURE__ */ E(s, {})
+							}),
+							placement: "bottom-end",
+							children: M.map((e, t) => /* @__PURE__ */ E(h, {
+								icon: e.icon,
+								color: e.danger ? "error" : void 0,
+								label: e.label,
+								onClick: e.onClick
+							}, t))
+						}), j && /* @__PURE__ */ E(g, {
+							variant: "ghost",
+							iconOnly: !0,
+							shape: "circle",
+							onClick: j,
+							"aria-label": A ? "Remove from favorites" : "Add to favorites",
+							className: u("cs-overlay-btn", A && "cs-fav-active"),
+							children: E(A ? i : r, {})
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "cs-body",
+				children: [
+					a === "event" && $ && /* @__PURE__ */ D("div", {
+						className: "cs-event-header",
+						children: [/* @__PURE__ */ D("div", {
+							className: "cs-date-block",
+							children: [/* @__PURE__ */ E("span", {
+								className: "cs-date-day",
+								children: le
+							}), /* @__PURE__ */ E("span", {
+								className: "cs-date-month",
+								children: ue
+							})]
+						}), /* @__PURE__ */ D("div", {
+							className: "cs-event-info",
+							children: [/* @__PURE__ */ E("h3", {
+								className: "cs-title",
+								children: l
+							}), d && /* @__PURE__ */ E("p", {
+								className: "cs-desc",
+								children: d
+							})]
+						})]
+					}),
+					a !== "event" && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("div", {
+						className: "cs-top",
+						children: [F && /* @__PURE__ */ E("span", {
+							className: "cs-icon",
+							children: F
+						}), /* @__PURE__ */ E("h3", {
+							className: "cs-title",
+							children: l
+						})]
+					}), d && /* @__PURE__ */ E("p", {
+						className: "cs-desc",
+						children: d
+					})] }),
+					a === "event" && !$ && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("div", {
+						className: "cs-top",
+						children: [F && /* @__PURE__ */ E("span", {
+							className: "cs-icon",
+							children: F
+						}), /* @__PURE__ */ E("h3", {
+							className: "cs-title",
+							children: l
+						})]
+					}), d && /* @__PURE__ */ E("p", {
+						className: "cs-desc",
+						children: d
+					})] }),
+					O !== void 0 && /* @__PURE__ */ D("div", {
+						className: "cs-rating",
+						children: [
+							/* @__PURE__ */ E(te, {
+								value: Math.round(O),
+								size: "sm",
+								color: "warning",
+								readOnly: !0,
+								className: "cs-stars"
+							}),
+							/* @__PURE__ */ E("span", {
+								className: "cs-rating-value",
+								children: O.toFixed(1)
+							}),
+							k !== void 0 && /* @__PURE__ */ D("span", {
+								className: "cs-review-count",
+								children: [
+									"(",
+									k,
+									")"
+								]
+							})
+						]
+					}),
+					L && /* @__PURE__ */ D("div", {
+						className: "cs-leader",
+						children: [/* @__PURE__ */ E(ee, {
+							src: L.avatar,
+							name: L.name,
+							size: 28,
+							color: I
+						}), /* @__PURE__ */ E("span", {
+							className: "cs-leader-name",
+							children: L.name
+						})]
+					}),
+					a === "course" && R && /* @__PURE__ */ D("div", {
+						className: "cs-participants",
+						children: [/* @__PURE__ */ E("div", {
+							className: "cs-participants-avatars",
+							children: R.slice(0, 4).map((e, t) => /* @__PURE__ */ E(ee, {
+								src: e.avatar,
+								name: e.name,
+								size: 28,
+								color: I,
+								className: "cs-participant-avatar"
+							}, `${e.name}-${t}`))
+						}), z && /* @__PURE__ */ D("span", {
+							className: "cs-spots",
+							children: [
+								R.length,
+								"/",
+								z
+							]
+						})]
+					}),
+					/* @__PURE__ */ D("div", {
+						className: "cs-meta",
+						children: [
+							a === "event" && U && /* @__PURE__ */ E(_, {
+								size: "xs",
+								color: I,
+								children: U
+							}),
+							v && /* @__PURE__ */ E(_, {
+								size: "xs",
+								color: I,
+								icon: /* @__PURE__ */ E(n, {}),
+								children: v
+							}),
+							a === "event" && W && /* @__PURE__ */ E(_, {
+								size: "xs",
+								color: W.toLowerCase() === "sold out" ? "error" : I,
+								children: W
+							}),
+							ce && a !== "event" && /* @__PURE__ */ E(_, {
+								size: "xs",
+								color: y === !1 ? "error" : I,
+								children: ce
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ D("div", {
+				className: "cs-footer",
+				children: [f !== void 0 && /* @__PURE__ */ D("span", {
+					className: "cs-price",
+					children: [
+						typeof f == "number" ? f.toFixed(2) : f,
+						" ",
+						/* @__PURE__ */ E("span", {
+							className: "cs-currency",
+							children: p
+						})
+					]
+				}), /* @__PURE__ */ D("div", {
+					className: "cs-actions",
+					children: [a === "product" && N && /* @__PURE__ */ D("div", {
+						className: "cs-qty",
+						children: [
+							/* @__PURE__ */ E(g, {
+								variant: "ghost",
+								iconOnly: !0,
+								size: "sm",
+								onClick: () => se(Z - 1),
+								"aria-label": "Decrease",
+								className: "cs-qty-btn",
+								children: /* @__PURE__ */ E(o, {})
+							}),
+							/* @__PURE__ */ E("span", {
+								className: "cs-qty-value",
+								children: Z
+							}),
+							/* @__PURE__ */ E(g, {
+								variant: "ghost",
+								iconOnly: !0,
+								size: "sm",
+								onClick: () => se(Z + 1),
+								"aria-label": "Increase",
+								className: "cs-qty-btn",
+								children: /* @__PURE__ */ E(c, {})
+							})
+						]
+					}), N && /* @__PURE__ */ E(g, {
+						variant: "filled",
+						size: "sm",
+						color: I,
+						onClick: () => N(Z),
+						disabled: y === !1,
+						className: "cs-cart-btn",
+						children: P ?? (a === "event" ? "Register" : "Add to cart")
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/MCardOffer/MCardOffer.tsx
+function j(e) {
+	let { onAction: t, actionLabel: n = "Book now", ...r } = e;
+	return /* @__PURE__ */ E(A, {
+		variant: "service",
+		onAddToCart: t ? () => t() : void 0,
+		actionLabel: n,
+		...r
+	});
+}
+//#endregion
+//#region src/components/cards/MCardCourse/MCardCourse.tsx
+function M(e) {
+	let { onAction: t, actionLabel: n = "Join course", ...r } = e;
+	return /* @__PURE__ */ E(A, {
+		variant: "course",
+		onAddToCart: t ? () => t() : void 0,
+		actionLabel: n,
+		...r
+	});
+}
+//#endregion
+//#region src/components/cards/MCardProduct/MCardProduct.tsx
+function N(e) {
+	let { addToCartLabel: t = "Add to cart", ...n } = e;
+	return /* @__PURE__ */ E(A, {
+		variant: "product",
+		actionLabel: t,
+		...n
+	});
+}
+//#endregion
+//#region src/components/cards/MCardEvent/MCardEvent.tsx
+function P(e) {
+	let { onRegister: t, registerLabel: n = "Register", ...r } = e;
+	return /* @__PURE__ */ E(A, {
+		variant: "event",
+		onAddToCart: t ? () => t() : void 0,
+		actionLabel: n,
+		...r
+	});
+}
+//#endregion
+//#region src/components/cards/MCardWidget/MCardWidget.tsx
+function F(e, t) {
+	return t || (typeof e != "number" || e === 0 ? "neutral" : e > 0 ? "up" : "down");
+}
+function I(e) {
+	return typeof e == "number" && e > 0 ? `+${e}` : e;
+}
+function L({ title: n, value: r, trend: i, trendType: a, icon: o, color: s = "primary", helperText: c, className: l, ...d }) {
+	let f = i != null, p = F(i, a), m = I(i);
+	return /* @__PURE__ */ D("div", {
+		className: u("card-widget", `color-${s}`, l),
+		...d,
+		children: [
+			/* @__PURE__ */ D("div", {
+				className: "cw-top",
+				children: [/* @__PURE__ */ D("div", {
+					className: "cw-meta",
+					children: [/* @__PURE__ */ E("span", {
+						className: "cw-title",
+						children: n
+					}), /* @__PURE__ */ E("span", {
+						className: "cw-value",
+						children: r
+					})]
+				}), o && /* @__PURE__ */ E("span", {
+					className: "cw-icon",
+					children: o
+				})]
+			}),
+			f && /* @__PURE__ */ E("div", {
+				className: "cw-bottom",
+				children: /* @__PURE__ */ D("span", {
+					className: u("cw-trend", p),
+					children: [
+						p === "up" && /* @__PURE__ */ E(e, { size: 14 }),
+						p === "down" && /* @__PURE__ */ E(t, { size: 14 }),
+						/* @__PURE__ */ E("span", { children: m })
+					]
+				})
+			}),
+			c && /* @__PURE__ */ E("div", {
+				className: "cw-helper",
+				children: c
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/MCardGrid/MCardGrid.tsx
+function R(e, t) {
+	let n = t.split("."), r = e;
+	for (let e of n) {
+		if (typeof r != "object" || !r) return;
+		r = r[e];
+	}
+	return r;
+}
+function z({ items: n, renderCard: r, searchable: i = !1, searchKeys: o, searchPlaceholder: s = "Search...", filterable: c = !1, filterKeys: d = [], sortable: f = !1, sortKeys: m = [], defaultSort: h, columns: _ = 3, emptyMessage: ee = "No results found.", className: te, style: x, ...O }) {
+	let [k, A] = w(""), [j, M] = w({}), [N, P] = w(h?.key ?? null), [F, I] = w(h?.direction ?? "asc"), [L, z] = w(!1), [B, V] = w(!1), H = C(null), U = C(null), W = b(() => {
+		z((e) => !e), V(!1);
+	}, []), ne = b(() => {
+		V((e) => !e), z(!1);
+	}, []), G = S(() => {
+		let e = [...n];
+		if (k && o && o.length > 0) {
+			let t = k.toLowerCase();
+			e = e.filter((e) => o.some((n) => {
+				let r = R(e, n);
+				return r != null && String(r).toLowerCase().includes(t);
+			}));
+		}
+		for (let [t, n] of Object.entries(j)) n.size !== 0 && (e = e.filter((e) => {
+			let r = R(e, t);
+			return r != null && n.has(String(r));
+		}));
+		return N && e.sort((e, t) => {
+			let n = R(e, N), r = R(t, N);
+			if (n == null && r == null) return 0;
+			if (n == null) return 1;
+			if (r == null) return -1;
+			let i = String(n).localeCompare(String(r), void 0, { numeric: !0 });
+			return F === "asc" ? i : -i;
+		}), e;
+	}, [
+		n,
+		k,
+		o,
+		j,
+		N,
+		F
+	]);
+	function K(e, t) {
+		M((n) => {
+			let r = new Set(n[e] ?? []);
+			return r.has(t) ? r.delete(t) : r.add(t), {
+				...n,
+				[e]: r
+			};
+		});
+	}
+	let q = S(() => {
+		let e = {};
+		for (let t of d) {
+			if (t.options) {
+				e[t.key] = t.options;
+				continue;
+			}
+			let r = /* @__PURE__ */ new Set();
+			for (let e of n) {
+				let n = R(e, t.key);
+				n != null && r.add(String(n));
+			}
+			e[t.key] = Array.from(r).sort();
+		}
+		return e;
+	}, [n, d]), J = m.find((e) => e.key === N);
+	return /* @__PURE__ */ D("div", {
+		className: u("card-grid", te),
+		style: x,
+		...O,
+		children: [(i || c || f) && /* @__PURE__ */ D("div", {
+			className: "card-grid-toolbar",
+			children: [i && /* @__PURE__ */ E(y, {
+				className: "card-grid-search",
+				size: "sm",
+				fullWidth: !0,
+				placeholder: s,
+				value: k,
+				onChange: (e) => A(e.target.value),
+				onClear: () => A("")
+			}), /* @__PURE__ */ D("div", {
+				className: "card-grid-actions",
+				children: [c && d.length > 0 && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(g, {
+					ref: H,
+					variant: "outlined",
+					size: "sm",
+					startIcon: /* @__PURE__ */ E(a, {}),
+					"aria-expanded": L,
+					onClick: W,
+					children: "Filter"
+				}), /* @__PURE__ */ E(p, {
+					open: L,
+					anchorRef: H,
+					onClose: () => z(!1),
+					placement: "bottom-end",
+					className: "card-grid-dropdown",
+					children: d.map((e) => /* @__PURE__ */ D("div", {
+						className: "card-grid-filter-group",
+						children: [/* @__PURE__ */ E("span", {
+							className: "card-grid-filter-label",
+							children: e.label
+						}), (q[e.key] ?? []).map((t) => /* @__PURE__ */ E("div", {
+							className: "card-grid-filter-option",
+							children: /* @__PURE__ */ E(v, {
+								size: "sm",
+								clickEffect: "none",
+								checked: j[e.key]?.has(t) ?? !1,
+								onChange: () => K(e.key, t),
+								label: t
+							})
+						}, t))]
+					}, e.key))
+				})] }), f && m.length > 0 && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(g, {
+					ref: U,
+					variant: "outlined",
+					size: "sm",
+					startIcon: E(N ? F === "asc" ? e : t : l, {}),
+					"aria-expanded": B,
+					onClick: ne,
+					children: J ? `Sort: ${J.label}` : "Sort"
+				}), /* @__PURE__ */ E(p, {
+					open: B,
+					anchorRef: U,
+					onClose: () => V(!1),
+					placement: "bottom-end",
+					className: "card-grid-dropdown",
+					children: m.map((n) => /* @__PURE__ */ D("button", {
+						type: "button",
+						className: u("card-grid-sort-item", N === n.key && "active"),
+						onClick: () => {
+							N === n.key ? I(F === "asc" ? "desc" : "asc") : (P(n.key), I("asc")), V(!1);
+						},
+						children: [n.label, N === n.key && /* @__PURE__ */ E("span", {
+							className: "card-grid-sort-dir",
+							children: E(F === "asc" ? e : t, { className: "card-grid-sort-icon" })
+						})]
+					}, n.key))
+				})] })]
+			})]
+		}), G.length > 0 ? /* @__PURE__ */ E("div", {
+			className: "card-grid-items",
+			style: { gridTemplateColumns: `repeat(${_}, 1fr)` },
+			children: G.map((e, t) => r(e, t))
+		}) : /* @__PURE__ */ E("div", {
+			className: "card-grid-empty",
+			children: ee
+		})]
+	});
+}
+//#endregion
+export { M as a, N as i, L as n, j as o, P as r, k as s, z as t };
+
+//# sourceMappingURL=cards-CYzgOCG5.js.map