oraculo-ui 0.1.9 → 0.1.11

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 
 interface OraculoButtonProps {
     children?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: any;
     href?: string;
     target?: React.HTMLAttributeAnchorTarget;
     rel?: string;
@@ -108,6 +108,7 @@ interface OraculoGameCardProps {
     imageUrl: string;
     onClick?: () => void;
     size?: "lg" | "sm";
+    fillParent?: boolean;
 }
 declare const OraculoGameCard: React.FC<OraculoGameCardProps>;
 

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import React, { ReactNode } from 'react';
 
 interface OraculoButtonProps {
     children?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: any;
     href?: string;
     target?: React.HTMLAttributeAnchorTarget;
     rel?: string;
@@ -108,6 +108,7 @@ interface OraculoGameCardProps {
     imageUrl: string;
     onClick?: () => void;
     size?: "lg" | "sm";
+    fillParent?: boolean;
 }
 declare const OraculoGameCard: React.FC<OraculoGameCardProps>;
 

package/dist/index.js

@@ -284,6 +284,108 @@ var init_OraculoCarousel = __esm({
   }
 });
 
+// src/molecules/OraculoGameCard/OraculoGameCard.tsx
+var import_Box, import_jsx_runtime5, OraculoGameCard, OraculoGameCard_default;
+var init_OraculoGameCard = __esm({
+  "src/molecules/OraculoGameCard/OraculoGameCard.tsx"() {
+    "use strict";
+    import_Box = __toESM(require("@mui/material/Box"));
+    init_index();
+    import_jsx_runtime5 = require("react/jsx-runtime");
+    OraculoGameCard = ({
+      imageUrl,
+      onClick,
+      size = "sm",
+      fillParent = false
+    }) => {
+      const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
+      const handleButtonClick = (e) => {
+        e.stopPropagation();
+        onClick == null ? void 0 : onClick();
+      };
+      const sizeStyles = fillParent ? { width: "100%", height: "100%" } : { width: `${dim.w}px`, height: `${dim.h}px` };
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        import_Box.default,
+        {
+          onClick,
+          role: "button",
+          sx: {
+            position: "relative",
+            borderRadius: "12px",
+            overflow: "hidden",
+            boxSizing: "border-box",
+            transition: "transform .15s ease, box-shadow .15s ease",
+            ...sizeStyles,
+            "&:hover": {
+              transform: "translateY(-2px)",
+              boxShadow: 8,
+              cursor: "pointer"
+            },
+            "&:hover .oraculo-game-card-overlay": {
+              opacity: 1
+            },
+            "&:hover .oraculo-game-card-btn": {
+              opacity: 1,
+              transform: "translate(-50%, -50%) scale(1)",
+              pointerEvents: "auto"
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "img",
+              {
+                src: imageUrl,
+                alt: "Juego de casino",
+                loading: "lazy",
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  display: "block",
+                  borderRadius: "inherit"
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_Box.default,
+              {
+                className: "oraculo-game-card-overlay",
+                sx: {
+                  position: "absolute",
+                  inset: 0,
+                  backgroundColor: "rgba(0, 0, 0, 0.45)",
+                  opacity: 0,
+                  transition: "opacity .15s ease",
+                  pointerEvents: "none",
+                  zIndex: 1
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_Box.default,
+              {
+                className: "oraculo-game-card-btn",
+                sx: {
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  zIndex: 2,
+                  transform: "translate(-50%, -50%) scale(0.95)",
+                  opacity: 0,
+                  transition: "opacity .15s ease, transform .15s ease",
+                  pointerEvents: "none"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(OraculoButton, { variant: "primary", onClick: handleButtonClick, children: "JUGAR" })
+              }
+            )
+          ]
+        }
+      );
+    };
+    OraculoGameCard_default = OraculoGameCard;
+  }
+});
+
 // src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
 function OraculoGameRankCard({
   imageUrl,
@@ -310,11 +412,9 @@ function OraculoGameRankCard({
     xs: Math.round(((_b = (_a = sizes.xs) == null ? void 0 : _a.font) != null ? _b : 64) * 0.28),
     md: Math.round(((_d = (_c = sizes.md) == null ? void 0 : _c.font) != null ? _d : 64) * 0.28)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_Box.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    import_Box2.default,
     {
-      onClick,
-      role: "button",
       sx: {
         position: "relative",
         width: "100%",
@@ -325,15 +425,12 @@ function OraculoGameRankCard({
         },
         borderRadius: { xs: `${R.xs}px`, md: `${R.md}px` },
         boxSizing: "border-box",
-        cursor: "pointer",
         overflow: "visible",
-        pb: { xs: `${hang.xs}px`, md: `${hang.md}px` },
-        transition: "transform .15s ease, box-shadow .15s ease",
-        "&:hover": { transform: "translateY(-2px)", boxShadow: 8 }
+        pb: { xs: `${hang.xs}px`, md: `${hang.md}px` }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          import_Box.default,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_Box2.default,
           {
             sx: {
               position: "absolute",
@@ -341,37 +438,19 @@ function OraculoGameRankCard({
               borderRadius: "inherit",
               overflow: "hidden"
             },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "img",
-                {
-                  src: `https://olimpo.bet${imageUrl}`,
-                  alt: "Juego de casino",
-                  loading: "lazy",
-                  style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                    display: "block"
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_Box.default,
-                {
-                  sx: {
-                    position: "absolute",
-                    inset: 0,
-                    background: "linear-gradient(21.29deg, rgba(11,13,27,.8) -1.16%, rgba(255,255,255,0) 55%)",
-                    mixBlendMode: "multiply"
-                  }
-                }
-              )
-            ]
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              OraculoGameCard_default,
+              {
+                imageUrl,
+                onClick,
+                size: "lg",
+                fillParent: true
+              }
+            )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_Box.default,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_Box2.default,
           {
             component: "span",
             sx: {
@@ -389,7 +468,7 @@ function OraculoGameRankCard({
               lineHeight: 1,
               color: "#3CC666",
               WebkitTextStroke: "1px #9ee86e",
-              zIndex: 2,
+              zIndex: 3,
               userSelect: "none"
             },
             children: orden
@@ -399,23 +478,24 @@ function OraculoGameRankCard({
     }
   );
 }
-var import_Box, import_jsx_runtime5;
+var import_Box2, import_jsx_runtime6;
 var init_OraculoGameRankCard = __esm({
   "src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx"() {
     "use strict";
-    import_Box = __toESM(require("@mui/material/Box"));
-    import_jsx_runtime5 = require("react/jsx-runtime");
+    import_Box2 = __toESM(require("@mui/material/Box"));
+    init_OraculoGameCard();
+    import_jsx_runtime6 = require("react/jsx-runtime");
   }
 });
 
 // src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
-var import_Box2, import_Typography, import_jsx_runtime6, OraculoLiveCasinoCard, OraculoLiveCasinoCard_default;
+var import_Box3, import_Typography, import_jsx_runtime7, OraculoLiveCasinoCard, OraculoLiveCasinoCard_default;
 var init_OraculoLiveCasinoCard = __esm({
   "src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx"() {
     "use strict";
-    import_Box2 = __toESM(require("@mui/material/Box"));
+    import_Box3 = __toESM(require("@mui/material/Box"));
     import_Typography = __toESM(require("@mui/material/Typography"));
-    import_jsx_runtime6 = require("react/jsx-runtime");
+    import_jsx_runtime7 = require("react/jsx-runtime");
     OraculoLiveCasinoCard = ({
       logo,
       provider,
@@ -424,8 +504,8 @@ var init_OraculoLiveCasinoCard = __esm({
       onClick
     }) => {
       var _a;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_Box2.default,
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        import_Box3.default,
         {
           onClick,
           sx: {
@@ -448,8 +528,8 @@ var init_OraculoLiveCasinoCard = __esm({
             }
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_Box2.default,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_Box3.default,
               {
                 component: "img",
                 src: logo,
@@ -464,8 +544,8 @@ var init_OraculoLiveCasinoCard = __esm({
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-              import_Box2.default,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              import_Box3.default,
               {
                 className: "orc-live-provider-label",
                 sx: {
@@ -478,7 +558,7 @@ var init_OraculoLiveCasinoCard = __esm({
                   transition: "opacity .25s ease",
                   pointerEvents: "none"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   import_Typography.default,
                   {
                     sx: {
@@ -500,61 +580,6 @@ var init_OraculoLiveCasinoCard = __esm({
   }
 });
 
-// src/molecules/OraculoGameCard/OraculoGameCard.tsx
-var import_Box3, import_jsx_runtime7, OraculoGameCard, OraculoGameCard_default;
-var init_OraculoGameCard = __esm({
-  "src/molecules/OraculoGameCard/OraculoGameCard.tsx"() {
-    "use strict";
-    import_Box3 = __toESM(require("@mui/material/Box"));
-    import_jsx_runtime7 = require("react/jsx-runtime");
-    OraculoGameCard = ({
-      imageUrl,
-      onClick,
-      size = "sm"
-    }) => {
-      const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_Box3.default,
-        {
-          onClick,
-          role: "button",
-          sx: {
-            position: "relative",
-            width: `${dim.w}px`,
-            height: `${dim.h}px`,
-            borderRadius: "12px",
-            overflow: "hidden",
-            boxSizing: "border-box",
-            transition: "transform .15s ease, box-shadow .15s ease",
-            "&:hover": {
-              transform: "translateY(-2px)",
-              boxShadow: 8,
-              cursor: "pointer"
-            },
-            opacity: 1
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "img",
-            {
-              src: imageUrl,
-              alt: "Juego de casino",
-              loading: "lazy",
-              style: {
-                width: "100%",
-                height: "100%",
-                objectFit: "cover",
-                display: "block",
-                borderRadius: "inherit"
-              }
-            }
-          )
-        }
-      );
-    };
-    OraculoGameCard_default = OraculoGameCard;
-  }
-});
-
 // src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
 var import_Box4, import_jsx_runtime8, GAP, OraculoGameSlide, OraculoGameSlide_default;
 var init_OraculoGameSlide = __esm({
@@ -605,14 +630,14 @@ var init_OraculoGameSlide = __esm({
                     height: { xs: 234, md: 352 },
                     gridRow: "1 / span 2",
                     overflow: "hidden",
-                    borderRadius: 2,
-                    "& > *": { width: "100%", height: "100%" }
+                    borderRadius: 2
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     OraculoGameCard_default,
                     {
                       imageUrl: `https://olimpo.bet${(_a = big.imageUrl) != null ? _a : ""}`,
                       size: "lg",
+                      fillParent: true,
                       onClick: () => onClick == null ? void 0 : onClick(big, 0)
                     }
                   )
@@ -627,14 +652,14 @@ var init_OraculoGameSlide = __esm({
                       width: { xs: 104, md: 152 },
                       height: { xs: 112, md: 168 },
                       overflow: "hidden",
-                      borderRadius: 2,
-                      "& > *": { width: "100%", height: "100%" }
+                      borderRadius: 2
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       OraculoGameCard_default,
                       {
                         imageUrl: `https://olimpo.bet${(_a2 = it.imageUrl) != null ? _a2 : ""}`,
                         size: "sm",
+                        fillParent: true,
                         onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
                       }
                     )
@@ -660,22 +685,29 @@ var init_OraculoGameSlide = __esm({
               md: `repeat(2, 168px)`
             },
             gap: `${GAP}px`,
-            "& > *": {
-              overflow: "hidden",
-              borderRadius: 2,
-              "& > *": { width: "100%", height: "100%" }
-            }
+            gridAutoFlow: "column"
           },
           children: items.map((it, index) => {
             var _a2, _b;
-            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              OraculoGameCard_default,
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_Box4.default,
               {
-                imageUrl: `https://olimpo.bet${(_b = it.imageUrl) != null ? _b : ""}`,
-                size: "sm",
-                onClick: () => onClick == null ? void 0 : onClick(it, index)
-              }
-            ) }, (_a2 = it.id) != null ? _a2 : index);
+                sx: {
+                  overflow: "hidden",
+                  borderRadius: 2
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  OraculoGameCard_default,
+                  {
+                    imageUrl: `https://olimpo.bet${(_b = it.imageUrl) != null ? _b : ""}`,
+                    size: "sm",
+                    fillParent: true,
+                    onClick: () => onClick == null ? void 0 : onClick(it, index)
+                  }
+                )
+              },
+              (_a2 = it.id) != null ? _a2 : index
+            );
           })
         }
       );
@@ -1045,32 +1077,31 @@ function OraculoSeccionDestacados({
           768: { perPage: 1.15, focus: "start" },
           1024: { perPage: 2.5, focus: "start" }
         },
-        renderItem: (item) => {
-          var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                marginTop: 16
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                "img",
-                {
-                  src: `https://olimpo.bet${(_a = item.image) != null ? _a : ""}`,
-                  alt: item.title,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            `${item.title}-${item.image}`
-          );
-        },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "img",
+              {
+                src: `https://olimpo.bet${item.image !== "" ? item.image : item.summary_image}`,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  // minHeight: "150px",
+                  // maxHeight: "150px",
+                  height: "150px",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -1128,15 +1159,18 @@ function OraculoSeccionTopJuegos({
           justifyItems: "center",
           width: "100%"
         },
-        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          OraculoGameRankCard,
-          {
-            imageUrl: juego.logo || "",
-            orden: juego.orden,
-            onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
-          },
-          juego.machine
-        ))
+        children: normalizedItems.slice(0, 6).map((juego) => {
+          var _a;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            OraculoGameRankCard,
+            {
+              imageUrl: `https://olimpo.bet${(_a = juego.logo) != null ? _a : ""}`,
+              orden: juego.orden,
+              onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
+            },
+            juego.machine
+          );
+        })
       }
     )
   ] }) });
@@ -2052,7 +2086,7 @@ function OraculoPageLanding({ props }) {
     ] })
   ] });
 }
-var import_material2, import_css, import_jsx_runtime20;
+var import_material2, import_jsx_runtime20;
 var init_OraculoPageLanding = __esm({
   "src/templates/OraculoPageLanding.tsx"() {
     "use strict";
@@ -2065,7 +2099,6 @@ var init_OraculoPageLanding = __esm({
     init_OraculoSeccionVirtuales();
     init_OraculoSeccionDestacados();
     init_OraculoSeccionClubOlimpo();
-    import_css = require("@splidejs/react-splide/css");
     import_jsx_runtime20 = require("react/jsx-runtime");
   }
 });
@@ -39633,7 +39666,7 @@ var init_ = __esm({
 });
 
 // src/templates/OraculoPageLandingPreview.tsx
-var import_react8, import_material3, import_css2, import_jsx_runtime21, HttpError, OraculoPageLandingPreview, OraculoPageLandingPreview_default;
+var import_react8, import_material3, import_jsx_runtime21, HttpError, OraculoPageLandingPreview, OraculoPageLandingPreview_default;
 var init_OraculoPageLandingPreview = __esm({
   "src/templates/OraculoPageLandingPreview.tsx"() {
     "use strict";
@@ -39642,7 +39675,6 @@ var init_OraculoPageLandingPreview = __esm({
     import_material3 = require("@mui/material");
     init_dist();
     init_fireabse();
-    import_css2 = require("@splidejs/react-splide/css");
     import_jsx_runtime21 = require("react/jsx-runtime");
     init_();
     HttpError = class extends Error {

package/dist/index.mjs

@@ -1,42 +1,30 @@
 import {
+  OraculoGameCard_default,
+  OraculoGameRankCard,
+  OraculoGameSlide_default,
   OraculoPageLanding,
   OraculoPageLandingPreview_default,
-  OraculoSeccionDestacados
-} from "./chunk-PXIOKT7L.mjs";
+  OraculoSeccionCasino_default,
+  OraculoSeccionDestacados,
+  OraculoSeccionTopJuegos,
+  OraculoSeccionVirtuales_default,
+  OraculoSectionTitle
+} from "./chunk-ECHAXSTL.mjs";
 import {
   OraculoClubOlimpoVisual_default,
   OraculoSeccionClubOlimpo_default
 } from "./chunk-2D7ZJMJV.mjs";
 import "./chunk-PZJSZNXJ.mjs";
-import {
-  OraculoGameRankCard,
-  OraculoSeccionTopJuegos
-} from "./chunk-DKP3HTEP.mjs";
 import {
   OraculoLiveCasinoCard_default,
   OraculoSeccionCasinoEnVivo_default
 } from "./chunk-PVY5Z3JS.mjs";
-import {
-  OraculoSeccionCasino_default
-} from "./chunk-AFPCFXMZ.mjs";
-import {
-  OraculoSeccionVirtuales_default
-} from "./chunk-YY5T37WR.mjs";
-import {
-  OraculoGameCard_default,
-  OraculoGameSlide_default
-} from "./chunk-AIT7B2J3.mjs";
-import {
-  OraculoSectionTitle
-} from "./chunk-5GTDKE3I.mjs";
 import {
   OraculoCarouselDots_default,
+  OraculoCarousel_default,
   OraculoSeccionBonoBienvenida_default,
   OraculoWelcomeBanner_default
-} from "./chunk-WPLILXPP.mjs";
-import {
-  OraculoCarousel_default
-} from "./chunk-VHW77D2M.mjs";
+} from "./chunk-4LBAYKDQ.mjs";
 import {
   OraculoButton
 } from "./chunk-IJQLK4NO.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oraculo-ui",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/dist/OraculoSeccionDestacados-QU6BT2NM.mjs

@@ -1,18 +0,0 @@
-import {
-  OraculoSeccionDestacados
-} from "./chunk-PXIOKT7L.mjs";
-import "./chunk-2D7ZJMJV.mjs";
-import "./chunk-PZJSZNXJ.mjs";
-import "./chunk-DKP3HTEP.mjs";
-import "./chunk-PVY5Z3JS.mjs";
-import "./chunk-AFPCFXMZ.mjs";
-import "./chunk-YY5T37WR.mjs";
-import "./chunk-AIT7B2J3.mjs";
-import "./chunk-5GTDKE3I.mjs";
-import "./chunk-WPLILXPP.mjs";
-import "./chunk-VHW77D2M.mjs";
-import "./chunk-IJQLK4NO.mjs";
-import "./chunk-VIPLL6XT.mjs";
-export {
-  OraculoSeccionDestacados as default
-};