@banzamel/mineralui 0.9.0 → 0.10.0

package/dist/CardGrid-nqnCwmTD.js

@@ -0,0 +1,581 @@
+import { n as e, t } from "./ArrowDownIcon-DzDirevG.js";
+import { t as n } from "./ClockIcon-CTHDAJUU.js";
+import { n as r, t as i } from "./PhoneIcon-DXlB7Uz0.js";
+import { $ as a, A as o, B as s, E as c, H as l, I as u, J as d, K as f, M as p, O as m, P as h, Q as g, R as _, S as v, W as y, X as b, Y as x, Z as S, et as C, g as w, m as T, q as E, tt as D, v as O } from "./BrandMoreIcons-DnusZA-G.js";
+import { t as k } from "./cn-BIeeqGZv.js";
+import { n as A } from "./creditCards-pLOxJ6gs.js";
+import { t as j } from "./Checkbox-B4t7uzS2.js";
+import { n as M, t as N } from "./QrCode-CP1sYiXF.js";
+import { t as P } from "./InputSearch-BO_j0nAW.js";
+import { useEffect as F, useMemo as I, useRef as L, useState as R } from "react";
+import { jsx as z, jsxs as B } from "react/jsx-runtime";
+//#region src/components/cards/CardPayment/CardPayment.tsx
+function V(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 H({ holder: e, number: t, expiry: n, brand: r, brandIcon: i, balance: a, balanceLabel: o = "Current balance", color: s, className: c, ...l }) {
+	let u = r ?? A(t).brand, d = V(t), f = A(t).iconLabel;
+	return /* @__PURE__ */ B("div", {
+		className: k("card-payment", c),
+		...l,
+		children: [
+			a !== void 0 && /* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("p", {
+				className: "cp-balance-label",
+				children: o
+			}), /* @__PURE__ */ z("p", {
+				className: "cp-balance",
+				children: a
+			})] }),
+			/* @__PURE__ */ B("div", {
+				className: "cp-row",
+				children: [/* @__PURE__ */ z("span", {
+					className: k("cp-brand", !i && u),
+					children: i ?? f
+				}), /* @__PURE__ */ z("span", {
+					className: "cp-number",
+					children: d
+				})]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "cp-details",
+				children: [/* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("p", {
+					className: "cp-field-label",
+					children: "Card holder"
+				}), /* @__PURE__ */ z("p", {
+					className: "cp-field-value",
+					children: e
+				})] }), /* @__PURE__ */ B("div", { children: [/* @__PURE__ */ z("p", {
+					className: "cp-field-label",
+					children: "Expiration date"
+				}), /* @__PURE__ */ z("p", {
+					className: "cp-field-value",
+					children: n
+				})] })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/CardBusiness/CardBusiness.tsx
+function U(e) {
+	return e.split(/\s+/).slice(0, 2).map((e) => e[0]?.toUpperCase() ?? "").join("");
+}
+function W(e) {
+	return e ? [
+		e.street,
+		[e.zip, e.city].filter(Boolean).join(" "),
+		e.country
+	].filter(Boolean).join(", ") : null;
+}
+function G(e) {
+	return e.trim().toLowerCase().replace(/[\s._-]+/g, "");
+}
+function K(e) {
+	switch (G(e)) {
+		case "github": return /* @__PURE__ */ z(h, {});
+		case "linkedin": return /* @__PURE__ */ z(s, {});
+		case "x":
+		case "twitter": return /* @__PURE__ */ z(y, {});
+		case "instagram": return /* @__PURE__ */ z(_, {});
+		case "facebook": return /* @__PURE__ */ z(o, {});
+		case "youtube": return /* @__PURE__ */ z(f, {});
+		case "discord": return /* @__PURE__ */ z(m, {});
+		case "figma": return /* @__PURE__ */ z(p, {});
+		case "slack": return /* @__PURE__ */ z(l, {});
+		case "google": return /* @__PURE__ */ z(u, {});
+		case "spotify": return /* @__PURE__ */ z(w, {});
+		case "pinterest": return /* @__PURE__ */ z(T, {});
+		case "tumblr": return /* @__PURE__ */ z(O, {});
+		case "vimeo": return /* @__PURE__ */ z(v, {});
+		case "vk":
+		case "vkontakte": return /* @__PURE__ */ z(c, {});
+		default: return null;
+	}
+}
+function q({ variant: e = "user", name: t, title: n, avatar: a, address: o, contact: s, socials: c, online: l, lastActive: u, qrCode: d, qrValue: f, color: p = "primary", className: m, ...h }) {
+	let g = W(o);
+	return /* @__PURE__ */ B("div", {
+		className: k("card-business", e, p, m),
+		...h,
+		children: [
+			/* @__PURE__ */ B("div", {
+				className: "cb-header",
+				children: [
+					/* @__PURE__ */ B("div", {
+						className: "cb-avatar-wrap",
+						children: [a ? /* @__PURE__ */ z("img", {
+							src: a,
+							alt: t,
+							className: k("cb-avatar", e)
+						}) : /* @__PURE__ */ z("span", {
+							className: k("cb-avatar", "cb-initials", e),
+							children: U(t)
+						}), l !== void 0 && /* @__PURE__ */ z("span", { className: k("cb-status", l ? "online" : "offline") })]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "cb-info",
+						children: [
+							/* @__PURE__ */ z("h3", {
+								className: "cb-name",
+								children: t
+							}),
+							n && /* @__PURE__ */ z("p", {
+								className: "cb-title",
+								children: n
+							}),
+							u && /* @__PURE__ */ z("p", {
+								className: "cb-last-active",
+								children: u
+							})
+						]
+					}),
+					(f || d) && /* @__PURE__ */ z("div", {
+						className: "cb-qr",
+						children: f ? /* @__PURE__ */ z(N, {
+							value: f,
+							size: 56,
+							padding: 3,
+							className: "cb-qr-code"
+						}) : /* @__PURE__ */ z("img", {
+							src: d,
+							alt: "QR",
+							className: "cb-qr-img"
+						})
+					})
+				]
+			}),
+			(s || g) && /* @__PURE__ */ B("div", {
+				className: "cb-details",
+				children: [
+					s?.email && /* @__PURE__ */ B("div", {
+						className: "cb-detail",
+						children: [/* @__PURE__ */ z("span", {
+							className: "cb-detail-icon",
+							children: /* @__PURE__ */ z(r, {})
+						}), /* @__PURE__ */ z("a", {
+							href: `mailto:${s.email}`,
+							className: "cb-detail-value",
+							children: s.email
+						})]
+					}),
+					s?.phone && /* @__PURE__ */ B("div", {
+						className: "cb-detail",
+						children: [/* @__PURE__ */ z("span", {
+							className: "cb-detail-icon",
+							children: /* @__PURE__ */ z(i, {})
+						}), /* @__PURE__ */ z("a", {
+							href: `tel:${s.phone}`,
+							className: "cb-detail-value",
+							children: s.phone
+						})]
+					}),
+					s?.website && /* @__PURE__ */ B("div", {
+						className: "cb-detail",
+						children: [/* @__PURE__ */ z("span", {
+							className: "cb-detail-icon",
+							children: /* @__PURE__ */ z(D, {})
+						}), /* @__PURE__ */ z("a", {
+							href: s.website,
+							target: "_blank",
+							rel: "noopener noreferrer",
+							className: "cb-detail-value",
+							children: s.website.replace(/^https?:\/\//, "")
+						})]
+					}),
+					g && /* @__PURE__ */ B("div", {
+						className: "cb-detail",
+						children: [/* @__PURE__ */ z("span", {
+							className: "cb-detail-icon",
+							children: /* @__PURE__ */ z(C, {})
+						}), /* @__PURE__ */ z("span", {
+							className: "cb-detail-value",
+							children: g
+						})]
+					})
+				]
+			}),
+			c && c.length > 0 && /* @__PURE__ */ z("div", {
+				className: "cb-socials",
+				children: c.map((e) => /* @__PURE__ */ z("a", {
+					href: e.url,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "cb-social",
+					title: e.platform,
+					"aria-label": e.platform,
+					children: e.icon ?? K(e.platform) ?? /* @__PURE__ */ z("span", {
+						className: "cb-social-text",
+						children: e.platform
+					})
+				}, e.platform))
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/CardService/CardService.tsx
+function J({ people: e, max: t = 4 }) {
+	if (!e || e.length === 0) return null;
+	let n = e.slice(0, t), r = e.length - t;
+	return /* @__PURE__ */ B("div", {
+		className: "cs-avatars",
+		children: [n.map((e, t) => /* @__PURE__ */ z("span", {
+			className: "cs-avatar-sm",
+			title: e.name,
+			children: e.avatar ? /* @__PURE__ */ z("img", {
+				src: e.avatar,
+				alt: e.name
+			}) : /* @__PURE__ */ z("span", { children: e.name[0]?.toUpperCase() })
+		}, t)), r > 0 && /* @__PURE__ */ B("span", {
+			className: "cs-avatar-sm cs-overflow",
+			children: ["+", r]
+		})]
+	});
+}
+function Y({ variant: e = "service", title: t, description: r, price: i, currency: o = "PLN", duration: s, available: c, image: l, gallery: u, rating: d, reviewCount: f, favorite: p, onFavorite: m, menuItems: h, onAddToCart: _, icon: v, color: y = "primary", leader: C, participants: w, maxParticipants: T, quantity: E, onQuantityChange: D, className: O, ...A }) {
+	let [j, N] = R(!1), [P, I] = R(0), [V, H] = R(1), U = L(null), W = E ?? V, G = u && u.length > 0 ? u : l ? [l] : [];
+	F(() => {
+		if (!j) return;
+		function e(e) {
+			U.current && !U.current.contains(e.target) && N(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [j]);
+	function K(e) {
+		let t = Math.max(1, e);
+		D ? D(t) : H(t);
+	}
+	let q = c === !0 ? "Available" : c === !1 ? "Unavailable" : typeof c == "number" ? `${c} spots` : null;
+	return /* @__PURE__ */ B("div", {
+		className: k("card-service", e, y, O),
+		...A,
+		children: [
+			G.length > 0 && /* @__PURE__ */ B("div", {
+				className: "cs-gallery",
+				children: [
+					/* @__PURE__ */ z("img", {
+						src: G[P],
+						alt: t,
+						className: "cs-image"
+					}),
+					G.length > 1 && /* @__PURE__ */ z("div", {
+						className: "cs-gallery-dots",
+						children: G.map((e, t) => /* @__PURE__ */ z("button", {
+							className: k("cs-dot", t === P && "active"),
+							onClick: () => I(t),
+							"aria-label": `Image ${t + 1}`
+						}, t))
+					}),
+					m && /* @__PURE__ */ z("button", {
+						className: k("cs-fav", p && "active"),
+						onClick: m,
+						"aria-label": p ? "Remove from favorites" : "Add to favorites",
+						children: z(p ? b : S, {})
+					}),
+					h && h.length > 0 && /* @__PURE__ */ B("div", {
+						className: "cs-menu-wrap",
+						ref: U,
+						children: [/* @__PURE__ */ z("button", {
+							className: "cs-menu-btn",
+							onClick: () => N(!j),
+							"aria-label": "More options",
+							children: /* @__PURE__ */ z(x, {})
+						}), j && /* @__PURE__ */ z("div", {
+							className: "cs-menu",
+							children: h.map((e, t) => /* @__PURE__ */ B("button", {
+								className: k("cs-menu-item", e.danger && "danger"),
+								onClick: () => {
+									e.onClick?.(), N(!1);
+								},
+								children: [e.icon && /* @__PURE__ */ z("span", {
+									className: "cs-menu-icon",
+									children: e.icon
+								}), e.label]
+							}, t))
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "cs-body",
+				children: [
+					/* @__PURE__ */ B("div", {
+						className: "cs-top",
+						children: [v && /* @__PURE__ */ z("span", {
+							className: "cs-icon",
+							children: v
+						}), /* @__PURE__ */ z("h3", {
+							className: "cs-title",
+							children: t
+						})]
+					}),
+					r && /* @__PURE__ */ z("p", {
+						className: "cs-desc",
+						children: r
+					}),
+					d !== void 0 && /* @__PURE__ */ B("div", {
+						className: "cs-rating",
+						children: [
+							/* @__PURE__ */ z(M, {
+								value: Math.round(d),
+								size: "sm",
+								color: "warning",
+								readOnly: !0,
+								className: "cs-stars"
+							}),
+							/* @__PURE__ */ z("span", {
+								className: "cs-rating-value",
+								children: d.toFixed(1)
+							}),
+							f !== void 0 && /* @__PURE__ */ B("span", {
+								className: "cs-review-count",
+								children: [
+									"(",
+									f,
+									")"
+								]
+							})
+						]
+					}),
+					C && /* @__PURE__ */ B("div", {
+						className: "cs-leader",
+						children: [/* @__PURE__ */ z("span", {
+							className: "cs-avatar-sm",
+							title: C.name,
+							children: C.avatar ? /* @__PURE__ */ z("img", {
+								src: C.avatar,
+								alt: C.name
+							}) : /* @__PURE__ */ z("span", { children: C.name[0]?.toUpperCase() })
+						}), /* @__PURE__ */ z("span", {
+							className: "cs-leader-name",
+							children: C.name
+						})]
+					}),
+					e === "course" && w && /* @__PURE__ */ B("div", {
+						className: "cs-participants",
+						children: [/* @__PURE__ */ z(J, { people: w }), T && /* @__PURE__ */ B("span", {
+							className: "cs-spots",
+							children: [
+								w.length,
+								"/",
+								T
+							]
+						})]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "cs-meta",
+						children: [s && /* @__PURE__ */ B("span", {
+							className: "cs-tag",
+							children: [/* @__PURE__ */ z(n, {}), s]
+						}), q && /* @__PURE__ */ z("span", {
+							className: k("cs-tag", c === !1 && "unavailable"),
+							children: q
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ B("div", {
+				className: "cs-footer",
+				children: [i !== void 0 && /* @__PURE__ */ B("span", {
+					className: "cs-price",
+					children: [
+						typeof i == "number" ? i.toFixed(2) : i,
+						" ",
+						/* @__PURE__ */ z("span", {
+							className: "cs-currency",
+							children: o
+						})
+					]
+				}), /* @__PURE__ */ B("div", {
+					className: "cs-actions",
+					children: [e === "product" && _ && /* @__PURE__ */ B("div", {
+						className: "cs-qty",
+						children: [
+							/* @__PURE__ */ z("button", {
+								className: "cs-qty-btn",
+								onClick: () => K(W - 1),
+								"aria-label": "Decrease",
+								children: /* @__PURE__ */ z(g, {})
+							}),
+							/* @__PURE__ */ z("span", {
+								className: "cs-qty-value",
+								children: W
+							}),
+							/* @__PURE__ */ z("button", {
+								className: "cs-qty-btn",
+								onClick: () => K(W + 1),
+								"aria-label": "Increase",
+								children: /* @__PURE__ */ z(a, {})
+							})
+						]
+					}), _ && /* @__PURE__ */ z("button", {
+						className: "cs-cart-btn",
+						onClick: () => _(W),
+						disabled: c === !1,
+						children: "Add to cart"
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/cards/CardGrid/CardGrid.tsx
+function X(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: a, searchPlaceholder: o = "Search...", filterable: s = !1, filterKeys: c = [], sortable: l = !1, sortKeys: u = [], defaultSort: f, columns: p = 3, emptyMessage: m = "No results found.", className: h, style: g, ..._ }) {
+	let [v, y] = R(""), [b, x] = R({}), [S, C] = R(f?.key ?? null), [w, T] = R(f?.direction ?? "asc"), [D, O] = R(!1), [A, M] = R(!1), N = L(null), V = L(null);
+	F(() => {
+		function e(e) {
+			N.current && !N.current.contains(e.target) && O(!1), V.current && !V.current.contains(e.target) && M(!1);
+		}
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, []);
+	let H = I(() => {
+		let e = [...n];
+		if (v && a && a.length > 0) {
+			let t = v.toLowerCase();
+			e = e.filter((e) => a.some((n) => {
+				let r = X(e, n);
+				return r != null && String(r).toLowerCase().includes(t);
+			}));
+		}
+		for (let [t, n] of Object.entries(b)) n.size !== 0 && (e = e.filter((e) => {
+			let r = X(e, t);
+			return r != null && n.has(String(r));
+		}));
+		return S && e.sort((e, t) => {
+			let n = X(e, S), r = X(t, S);
+			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 w === "asc" ? i : -i;
+		}), e;
+	}, [
+		n,
+		v,
+		a,
+		b,
+		S,
+		w
+	]);
+	function U(e, t) {
+		x((n) => {
+			let r = new Set(n[e] ?? []);
+			return r.has(t) ? r.delete(t) : r.add(t), {
+				...n,
+				[e]: r
+			};
+		});
+	}
+	let W = I(() => {
+		let e = {};
+		for (let t of c) {
+			if (t.options) {
+				e[t.key] = t.options;
+				continue;
+			}
+			let r = /* @__PURE__ */ new Set();
+			for (let e of n) {
+				let n = X(e, t.key);
+				n != null && r.add(String(n));
+			}
+			e[t.key] = Array.from(r).sort();
+		}
+		return e;
+	}, [n, c]), G = u.find((e) => e.key === S);
+	return /* @__PURE__ */ B("div", {
+		className: k("card grid", h),
+		style: g,
+		..._,
+		children: [(i || s || l) && /* @__PURE__ */ B("div", {
+			className: "card grid toolbar",
+			children: [i && /* @__PURE__ */ z(P, {
+				className: "card grid search",
+				size: "sm",
+				fullWidth: !0,
+				placeholder: o,
+				value: v,
+				onChange: (e) => y(e.target.value),
+				onClear: () => y("")
+			}), /* @__PURE__ */ B("div", {
+				className: "card grid actions",
+				children: [s && c.length > 0 && /* @__PURE__ */ B("div", {
+					className: "card grid dropdown wrap",
+					ref: N,
+					children: [/* @__PURE__ */ B("button", {
+						type: "button",
+						className: "card grid toolbar button",
+						"aria-expanded": D,
+						onClick: () => {
+							O(!D), M(!1);
+						},
+						children: [/* @__PURE__ */ z(d, { className: "card grid button icon" }), "Filter"]
+					}), D && /* @__PURE__ */ z("div", {
+						className: "card grid dropdown",
+						children: c.map((e) => /* @__PURE__ */ B("div", {
+							className: "card grid filter group",
+							children: [/* @__PURE__ */ z("span", {
+								className: "card grid filter label",
+								children: e.label
+							}), (W[e.key] ?? []).map((t) => /* @__PURE__ */ z("div", {
+								className: "card grid filter option",
+								children: /* @__PURE__ */ z(j, {
+									size: "sm",
+									clickEffect: "none",
+									checked: b[e.key]?.has(t) ?? !1,
+									onChange: () => U(e.key, t),
+									label: t
+								})
+							}, t))]
+						}, e.key))
+					})]
+				}), l && u.length > 0 && /* @__PURE__ */ B("div", {
+					className: "card grid dropdown wrap",
+					ref: V,
+					children: [/* @__PURE__ */ B("button", {
+						type: "button",
+						className: "card grid toolbar button",
+						"aria-expanded": A,
+						onClick: () => {
+							M(!A), O(!1);
+						},
+						children: [z(S ? w === "asc" ? e : t : E, { className: "card grid button icon" }), G ? `Sort: ${G.label}` : "Sort"]
+					}), A && /* @__PURE__ */ z("div", {
+						className: "card grid dropdown",
+						children: u.map((n) => /* @__PURE__ */ B("button", {
+							type: "button",
+							className: k("card grid sort item", S === n.key && "active"),
+							onClick: () => {
+								S === n.key ? T(w === "asc" ? "desc" : "asc") : (C(n.key), T("asc")), M(!1);
+							},
+							children: [n.label, S === n.key && /* @__PURE__ */ z("span", {
+								className: "card grid sort dir",
+								children: z(w === "asc" ? e : t, { className: "card grid sort icon" })
+							})]
+						}, n.key))
+					})]
+				})]
+			})]
+		}), H.length > 0 ? /* @__PURE__ */ z("div", {
+			className: "card grid items",
+			style: { gridTemplateColumns: `repeat(${p}, 1fr)` },
+			children: H.map((e, t) => r(e, t))
+		}) : /* @__PURE__ */ z("div", {
+			className: "card grid empty",
+			children: m
+		})]
+	});
+}
+//#endregion
+export { H as i, Y as n, q as r, Z as t };
+
+//# sourceMappingURL=CardGrid-nqnCwmTD.js.map