@solostylist/ui-kit 1.0.203 → 1.0.205

package/dist/s-image-modal/s-image-modal.js

@@ -1,388 +1,397 @@
-import { j as o } from "../jsx-runtime-tc70JA_2.js";
-import j, { useState as C, useEffect as k } from "react";
-import { Modal as L, Box as d, Paper as m, Typography as w, IconButton as y, Stack as A } from "@mui/material";
-import { motion as b, AnimatePresence as D } from "framer-motion";
-import F from "../s-lazy-image/s-lazy-image.js";
-import { C as N } from "../Close-lHCUMitI.js";
-import { C as T } from "../ChevronLeft-BmgmPHp9.js";
-import { C as $ } from "../ChevronRight-DbWSr8yz.js";
-const z = ({ item: r, onClick: l, style: c = {}, objectFit: e = "contain", disableVideoControls: s = !1 }) => r.type === "video" ? /* @__PURE__ */ o.jsx(
-  d,
-  {
-    component: "video",
-    onClick: l,
-    controls: !s,
-    sx: {
-      width: "100%",
-      height: "100%",
-      objectFit: e,
-      bgcolor: "background.paper",
-      ...c
-    },
-    children: /* @__PURE__ */ o.jsx("source", { src: r.url, type: "video/mp4" })
-  }
-) : /* @__PURE__ */ o.jsx(
-  F,
-  {
-    src: r.url,
-    alt: r.title ?? "",
-    onClick: l,
-    style: {
-      width: "100%",
-      height: "100%",
-      objectFit: e,
-      backgroundColor: "background.paper",
-      ...c
-    }
-  }
-), B = ({
-  selectedItem: r,
-  isOpen: l,
-  onClose: c,
-  onItemChange: e,
-  mediaItems: s = [],
-  renderMediaItem: h,
-  showNavigation: I = !0,
-  showThumbnailDock: S = !0,
-  showCounter: P = !0,
-  modalSx: R = {}
-}) => {
-  const [E, p] = C(r ?? null), t = r ?? E;
-  k(() => {
-    r && p(r);
-  }, [r]);
-  const a = I && s.length > 1 && t, n = t ? s.findIndex((i) => i.id === t.id) : -1, u = s.length, g = j.useCallback(() => {
-    if (a && n > 0) {
-      const i = s[n - 1];
-      e ? e(i) : p(i);
-    }
-  }, [a, n, s, e]), v = j.useCallback(() => {
-    if (a && n < u - 1) {
-      const i = s[n + 1];
-      e ? e(i) : p(i);
-    }
-  }, [a, n, u, s, e]);
-  return k(() => {
-    const i = (f) => {
-      if (l)
-        switch (f.key) {
-          case "ArrowLeft":
-            g();
-            break;
-          case "ArrowRight":
-            v();
-            break;
-          case "Escape":
-            c();
-            break;
-        }
-    };
-    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
-  }, [l, n, u, a, g, v, c]), !l || !t ? null : /* @__PURE__ */ o.jsx(
-    L,
-    {
-      open: l,
-      onClose: c,
-      sx: {
-        zIndex: (i) => i.zIndex.modal + 100,
-        ...R
-      },
-      slotProps: {
-        backdrop: {
-          sx: {
-            backdropFilter: "blur(8px)",
-            zIndex: (i) => i.zIndex.modal + 99
-          }
-        }
-      },
-      children: /* @__PURE__ */ o.jsxs(d, { children: [
-        /* @__PURE__ */ o.jsx(
-          b.div,
-          {
-            initial: { scale: 0.98 },
-            animate: { scale: 1 },
-            exit: { scale: 0.98 },
-            transition: { type: "spring", stiffness: 400, damping: 30 },
-            children: /* @__PURE__ */ o.jsxs(
-              m,
-              {
-                sx: {
-                  position: "fixed",
-                  inset: 0,
-                  width: "100%",
-                  minHeight: "100vh",
-                  borderRadius: 0,
-                  overflow: "hidden",
-                  zIndex: (i) => i.zIndex.modal + 101
-                },
-                children: [
-                  /* @__PURE__ */ o.jsx(
-                    d,
-                    {
-                      sx: {
-                        height: "100%",
-                        display: "flex",
-                        flexDirection: "column"
-                      },
-                      children: /* @__PURE__ */ o.jsx(
-                        d,
-                        {
-                          sx: {
-                            flex: 1,
-                            p: { xs: 1, sm: 2, md: 3 },
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            bgcolor: "background.default"
-                          },
-                          children: /* @__PURE__ */ o.jsx(D, { mode: "wait", children: /* @__PURE__ */ o.jsx(
-                            b.div,
-                            {
-                              style: { position: "relative" },
-                              initial: { y: 20, scale: 0.97 },
-                              animate: {
-                                y: 0,
-                                scale: 1,
-                                transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 }
-                              },
-                              exit: { y: 20, scale: 0.97, transition: { duration: 0.15 } },
-                              children: /* @__PURE__ */ o.jsxs(
-                                m,
-                                {
-                                  onClick: (i) => i.stopPropagation(),
-                                  sx: {
-                                    position: "relative",
-                                    width: "100%",
-                                    aspectRatio: "16 / 9",
-                                    maxWidth: { xs: "95%", sm: "85%", md: 960 },
-                                    height: "70vh",
-                                    borderRadius: 2,
-                                    overflow: "hidden"
-                                  },
-                                  children: [
-                                    h ? h(t) : /* @__PURE__ */ o.jsx(z, { item: t }),
-                                    (t.title || t.desc) && /* @__PURE__ */ o.jsxs(
-                                      d,
-                                      {
-                                        sx: {
-                                          position: "absolute",
-                                          left: 0,
-                                          right: 0,
-                                          bottom: 0,
-                                          p: { xs: 1.5, sm: 2, md: 3 },
-                                          background: (i) => `linear-gradient(to top, ${(i.vars ?? i).palette.background.paper}, transparent)`
-                                        },
-                                        onClick: (i) => i.stopPropagation(),
-                                        children: [
-                                          t.title && /* @__PURE__ */ o.jsx(w, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: t.title }),
-                                          t.desc && /* @__PURE__ */ o.jsx(w, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: t.desc })
-                                        ]
-                                      }
-                                    )
-                                  ]
-                                }
-                              )
-                            },
-                            t.id
-                          ) })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ o.jsx(
-                    y,
-                    {
-                      "aria-label": "Close",
-                      onClick: c,
-                      sx: {
-                        position: "absolute",
-                        top: { xs: 8, sm: 10, md: 12 },
-                        right: { xs: 8, sm: 10, md: 12 },
-                        zIndex: (i) => i.zIndex.modal + 102
-                      },
-                      children: /* @__PURE__ */ o.jsx(N, {})
-                    }
-                  ),
-                  P && a && /* @__PURE__ */ o.jsxs(
-                    d,
-                    {
-                      sx: {
-                        position: "absolute",
-                        top: { xs: 8, sm: 10, md: 12 },
-                        left: { xs: 8, sm: 10, md: 12 },
-                        zIndex: (i) => i.zIndex.modal + 102,
-                        padding: 1,
-                        px: 2,
-                        fontSize: { xs: 14, sm: 16 },
-                        color: "text.primary"
-                      },
-                      children: [
-                        n + 1,
-                        " / ",
-                        u
-                      ]
-                    }
-                  ),
-                  a && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-                    /* @__PURE__ */ o.jsx(
-                      y,
-                      {
-                        "aria-label": "Previous image",
-                        onClick: (i) => {
-                          i.stopPropagation(), g();
-                        },
-                        disabled: n === 0,
-                        sx: {
-                          position: "absolute",
-                          left: { xs: 8, sm: 10, md: 12 },
-                          top: "50%",
-                          transform: "translateY(-50%)",
-                          zIndex: (i) => i.zIndex.modal + 102,
-                          "&:disabled": {
-                            opacity: 0.5
-                          }
-                        },
-                        children: /* @__PURE__ */ o.jsx(T, {})
-                      }
-                    ),
-                    /* @__PURE__ */ o.jsx(
-                      y,
-                      {
-                        "aria-label": "Next image",
-                        onClick: (i) => {
-                          i.stopPropagation(), v();
-                        },
-                        disabled: n === u - 1,
-                        sx: {
-                          position: "absolute",
-                          right: { xs: 8, sm: 10, md: 12 },
-                          top: "50%",
-                          transform: "translateY(-50%)",
-                          zIndex: (i) => i.zIndex.modal + 102,
-                          "&:disabled": {
-                            opacity: 0.5
-                          }
-                        },
-                        children: /* @__PURE__ */ o.jsx($, {})
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          }
-        ),
-        S && a && s.length > 1 && /* @__PURE__ */ o.jsx(
-          d,
-          {
-            sx: {
-              position: "fixed",
-              zIndex: 1502,
-              left: "50%",
-              bottom: 16,
-              transform: "translateX(-50%)"
-            },
-            children: /* @__PURE__ */ o.jsx(
-              m,
-              {
-                sx: {
-                  position: "relative",
-                  borderRadius: 3,
-                  bgcolor: "background.paper",
-                  border: "1px solid",
-                  borderColor: "divider",
-                  backdropFilter: "blur(12px)",
-                  px: 1.5,
-                  py: 1
-                },
-                children: /* @__PURE__ */ o.jsx(A, { direction: "row", alignItems: "center", spacing: -1.5, children: s.map((i, f) => /* @__PURE__ */ o.jsxs(
-                  b.div,
-                  {
-                    onClick: (x) => {
-                      x.stopPropagation(), e ? e(i) : p(i);
-                    },
-                    style: {
-                      position: "relative",
-                      width: 40,
-                      height: 40,
-                      borderRadius: 10,
-                      overflow: "hidden",
-                      flexShrink: 0,
-                      zIndex: t.id === i.id ? 30 : s.length - f,
-                      border: t.id === i.id ? "1px solid" : void 0,
-                      borderColor: t.id === i.id ? "divider" : void 0,
-                      cursor: "pointer"
-                    },
-                    initial: { rotate: f % 2 === 0 ? -15 : 15 },
-                    animate: {
-                      scale: t.id === i.id ? 1.2 : 1,
-                      rotate: t.id === i.id ? 0 : f % 2 === 0 ? -15 : 15,
-                      y: t.id === i.id ? -8 : 0
-                    },
-                    whileHover: {
-                      scale: 1.3,
-                      rotate: 0,
-                      y: -10,
-                      transition: { type: "spring", stiffness: 400, damping: 25 }
-                    },
-                    children: [
-                      h ? h(i, () => {
-                        e ? e(i) : p(i);
-                      }) : /* @__PURE__ */ o.jsx(
-                        z,
-                        {
-                          item: i,
-                          objectFit: "cover",
-                          style: {
-                            width: "100%",
-                            height: "100%",
-                            // Disable pointer events for videos in thumbnails to ensure parent click handler works
-                            pointerEvents: i.type === "video" ? "none" : "auto"
-                          },
-                          disableVideoControls: !0
-                        }
-                      ),
-                      /* @__PURE__ */ o.jsx(
-                        d,
-                        {
-                          sx: {
-                            position: "absolute",
-                            inset: 0,
-                            background: (x) => `linear-gradient(to bottom, transparent, ${(x.vars ?? x).palette.action.hover}, ${(x.vars ?? x).palette.action.selected})`,
-                            pointerEvents: "none"
-                          }
-                        }
-                      ),
-                      t.id === i.id && /* @__PURE__ */ o.jsx(
-                        b.div,
-                        {
-                          layoutId: "activeGlow",
-                          style: {
-                            position: "absolute",
-                            inset: -8,
-                            background: "primary.main",
-                            filter: "blur(16px)"
-                          },
-                          initial: { opacity: 0 },
-                          animate: { opacity: 1 },
-                          transition: { duration: 0.2 }
-                        }
-                      )
-                    ]
-                  },
-                  i.id
-                )) })
-              }
-            )
-          }
-        )
-      ] })
-    }
-  );
-};
-B.displayName = "SImageModal";
-export {
-  z as DefaultMediaItem,
-  B as SImageModal,
-  B as default
+import "../createTheme-DuS5_nJb.js";
+import { t as e } from "../ChevronLeft-C7DUyLoc.js";
+import { t } from "../ChevronRight-VFk57Tte.js";
+import { t as n } from "../Close-OtVsJy75.js";
+import r from "../s-lazy-image/s-lazy-image.js";
+import i, { useEffect as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Box as u, IconButton as d, Modal as f, Paper as p, Stack as m, Typography as h } from "@mui/material";
+import { AnimatePresence as g, motion as _ } from "framer-motion";
+//#region lib/s-image-modal/s-image-modal.tsx
+var v = ({ item: e, onClick: t, style: n = {}, objectFit: i = "contain", disableVideoControls: a = !1 }) => e.type === "video" ? /* @__PURE__ */ c(u, {
+	component: "video",
+	onClick: t,
+	controls: !a,
+	sx: {
+		width: "100%",
+		height: "100%",
+		objectFit: i,
+		bgcolor: "background.paper",
+		...n
+	},
+	children: /* @__PURE__ */ c("source", {
+		src: e.url,
+		type: "video/mp4"
+	})
+}) : /* @__PURE__ */ c(r, {
+	src: e.url,
+	alt: e.title ?? "",
+	onClick: t,
+	style: {
+		width: "100%",
+		height: "100%",
+		objectFit: i,
+		backgroundColor: "background.paper",
+		...n
+	}
+}), y = ({ selectedItem: r, isOpen: y, onClose: b, onItemChange: x, mediaItems: S = [], renderMediaItem: C, showNavigation: w = !0, showThumbnailDock: T = !0, showCounter: E = !0, modalSx: D = {} }) => {
+	let [O, k] = o(r ?? null), A = r ?? O;
+	a(() => {
+		r && k(r);
+	}, [r]);
+	let j = w && S.length > 1 && A, M = A ? S.findIndex((e) => e.id === A.id) : -1, N = S.length, P = i.useCallback(() => {
+		if (j && M > 0) {
+			let e = S[M - 1];
+			x ? x(e) : k(e);
+		}
+	}, [
+		j,
+		M,
+		S,
+		x
+	]), F = i.useCallback(() => {
+		if (j && M < N - 1) {
+			let e = S[M + 1];
+			x ? x(e) : k(e);
+		}
+	}, [
+		j,
+		M,
+		N,
+		S,
+		x
+	]);
+	return a(() => {
+		let e = (e) => {
+			if (y) switch (e.key) {
+				case "ArrowLeft":
+					P();
+					break;
+				case "ArrowRight":
+					F();
+					break;
+				case "Escape":
+					b();
+					break;
+			}
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [
+		y,
+		M,
+		N,
+		j,
+		P,
+		F,
+		b
+	]), !y || !A ? null : /* @__PURE__ */ c(f, {
+		open: y,
+		onClose: b,
+		sx: {
+			zIndex: (e) => e.zIndex.modal + 100,
+			...D
+		},
+		slotProps: { backdrop: { sx: {
+			backdropFilter: "blur(8px)",
+			zIndex: (e) => e.zIndex.modal + 99
+		} } },
+		children: /* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(_.div, {
+			initial: { scale: .98 },
+			animate: { scale: 1 },
+			exit: { scale: .98 },
+			transition: {
+				type: "spring",
+				stiffness: 400,
+				damping: 30
+			},
+			children: /* @__PURE__ */ l(p, {
+				sx: {
+					position: "fixed",
+					inset: 0,
+					width: "100%",
+					minHeight: "100vh",
+					borderRadius: 0,
+					overflow: "hidden",
+					zIndex: (e) => e.zIndex.modal + 101
+				},
+				children: [
+					/* @__PURE__ */ c(u, {
+						sx: {
+							height: "100%",
+							display: "flex",
+							flexDirection: "column"
+						},
+						children: /* @__PURE__ */ c(u, {
+							sx: {
+								flex: 1,
+								p: {
+									xs: 1,
+									sm: 2,
+									md: 3
+								},
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								bgcolor: "background.default"
+							},
+							children: /* @__PURE__ */ c(g, {
+								mode: "wait",
+								children: /* @__PURE__ */ c(_.div, {
+									style: { position: "relative" },
+									initial: {
+										y: 20,
+										scale: .97
+									},
+									animate: {
+										y: 0,
+										scale: 1,
+										transition: {
+											type: "spring",
+											stiffness: 500,
+											damping: 30,
+											mass: .5
+										}
+									},
+									exit: {
+										y: 20,
+										scale: .97,
+										transition: { duration: .15 }
+									},
+									children: /* @__PURE__ */ l(p, {
+										onClick: (e) => e.stopPropagation(),
+										sx: {
+											position: "relative",
+											width: "100%",
+											aspectRatio: "16 / 9",
+											maxWidth: {
+												xs: "95%",
+												sm: "85%",
+												md: 960
+											},
+											height: "70vh",
+											borderRadius: 2,
+											overflow: "hidden"
+										},
+										children: [C ? C(A) : /* @__PURE__ */ c(v, { item: A }), (A.title || A.desc) && /* @__PURE__ */ l(u, {
+											sx: {
+												position: "absolute",
+												left: 0,
+												right: 0,
+												bottom: 0,
+												p: {
+													xs: 1.5,
+													sm: 2,
+													md: 3
+												},
+												background: (e) => `linear-gradient(to top, ${(e.vars ?? e).palette.background.paper}, transparent)`
+											},
+											onClick: (e) => e.stopPropagation(),
+											children: [A.title && /* @__PURE__ */ c(h, {
+												variant: "h6",
+												sx: {
+													fontWeight: 600,
+													fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													}
+												},
+												children: A.title
+											}), A.desc && /* @__PURE__ */ c(h, {
+												variant: "body2",
+												sx: {
+													opacity: .8,
+													mt: .5
+												},
+												children: A.desc
+											})]
+										})]
+									})
+								}, A.id)
+							})
+						})
+					}),
+					/* @__PURE__ */ c(d, {
+						"aria-label": "Close",
+						onClick: b,
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102
+						},
+						children: /* @__PURE__ */ c(n, {})
+					}),
+					E && j && /* @__PURE__ */ l(u, {
+						sx: {
+							position: "absolute",
+							top: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							zIndex: (e) => e.zIndex.modal + 102,
+							padding: 1,
+							px: 2,
+							fontSize: {
+								xs: 14,
+								sm: 16
+							},
+							color: "text.primary"
+						},
+						children: [
+							M + 1,
+							" / ",
+							N
+						]
+					}),
+					j && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(d, {
+						"aria-label": "Previous image",
+						onClick: (e) => {
+							e.stopPropagation(), P();
+						},
+						disabled: M === 0,
+						sx: {
+							position: "absolute",
+							left: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ c(e, {})
+					}), /* @__PURE__ */ c(d, {
+						"aria-label": "Next image",
+						onClick: (e) => {
+							e.stopPropagation(), F();
+						},
+						disabled: M === N - 1,
+						sx: {
+							position: "absolute",
+							right: {
+								xs: 8,
+								sm: 10,
+								md: 12
+							},
+							top: "50%",
+							transform: "translateY(-50%)",
+							zIndex: (e) => e.zIndex.modal + 102,
+							"&:disabled": { opacity: .5 }
+						},
+						children: /* @__PURE__ */ c(t, {})
+					})] })
+				]
+			})
+		}), T && j && S.length > 1 && /* @__PURE__ */ c(u, {
+			sx: {
+				position: "fixed",
+				zIndex: 1502,
+				left: "50%",
+				bottom: 16,
+				transform: "translateX(-50%)"
+			},
+			children: /* @__PURE__ */ c(p, {
+				sx: {
+					position: "relative",
+					borderRadius: 3,
+					bgcolor: "background.paper",
+					border: "1px solid",
+					borderColor: "divider",
+					backdropFilter: "blur(12px)",
+					px: 1.5,
+					py: 1
+				},
+				children: /* @__PURE__ */ c(m, {
+					direction: "row",
+					alignItems: "center",
+					spacing: -1.5,
+					children: S.map((e, t) => /* @__PURE__ */ l(_.div, {
+						onClick: (t) => {
+							t.stopPropagation(), x ? x(e) : k(e);
+						},
+						style: {
+							position: "relative",
+							width: 40,
+							height: 40,
+							borderRadius: 10,
+							overflow: "hidden",
+							flexShrink: 0,
+							zIndex: A.id === e.id ? 30 : S.length - t,
+							border: A.id === e.id ? "1px solid" : void 0,
+							borderColor: A.id === e.id ? "divider" : void 0,
+							cursor: "pointer"
+						},
+						initial: { rotate: t % 2 == 0 ? -15 : 15 },
+						animate: {
+							scale: A.id === e.id ? 1.2 : 1,
+							rotate: A.id === e.id ? 0 : t % 2 == 0 ? -15 : 15,
+							y: A.id === e.id ? -8 : 0
+						},
+						whileHover: {
+							scale: 1.3,
+							rotate: 0,
+							y: -10,
+							transition: {
+								type: "spring",
+								stiffness: 400,
+								damping: 25
+							}
+						},
+						children: [
+							C ? C(e, () => {
+								x ? x(e) : k(e);
+							}) : /* @__PURE__ */ c(v, {
+								item: e,
+								objectFit: "cover",
+								style: {
+									width: "100%",
+									height: "100%",
+									pointerEvents: e.type === "video" ? "none" : "auto"
+								},
+								disableVideoControls: !0
+							}),
+							/* @__PURE__ */ c(u, { sx: {
+								position: "absolute",
+								inset: 0,
+								background: (e) => `linear-gradient(to bottom, transparent, ${(e.vars ?? e).palette.action.hover}, ${(e.vars ?? e).palette.action.selected})`,
+								pointerEvents: "none"
+							} }),
+							A.id === e.id && /* @__PURE__ */ c(_.div, {
+								layoutId: "activeGlow",
+								style: {
+									position: "absolute",
+									inset: -8,
+									background: "primary.main",
+									filter: "blur(16px)"
+								},
+								initial: { opacity: 0 },
+								animate: { opacity: 1 },
+								transition: { duration: .2 }
+							})
+						]
+					}, e.id))
+				})
+			})
+		})] })
+	});
 };
+y.displayName = "SImageModal";
+//#endregion
+export { v as DefaultMediaItem, y as SImageModal, y as default };