oraculo-ui 0.1.12 → 0.1.14

package/dist/{chunk-IJQLK4NO.mjs → chunk-DHENVY2Z.mjs}

@@ -1,6 +1,6 @@
 // src/atoms/OraculoButton/OraculoButton.tsx
+import React from "react";
 import { Link as MuiLink } from "@mui/material";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function OraculoButton({
   children,
   onClick,
@@ -33,14 +33,10 @@ function OraculoButton({
     isIconOnly ? "orc-btn--iconOnly" : "",
     className
   ].filter(Boolean).join(" ");
-  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    leftIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: leftIcon }),
-    !isIconOnly && /* @__PURE__ */ jsx("span", { className: "orc-btn__label", children }),
-    rightIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: rightIcon })
-  ] });
+  const content = /* @__PURE__ */ React.createElement(React.Fragment, null, leftIcon && /* @__PURE__ */ React.createElement("span", { className: "orc-btn__icon" }, leftIcon), !isIconOnly && /* @__PURE__ */ React.createElement("span", { className: "orc-btn__label" }, children), rightIcon && /* @__PURE__ */ React.createElement("span", { className: "orc-btn__icon" }, rightIcon));
   const ariaDisabled = disabled ? true : void 0;
   if (href) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ React.createElement(
       MuiLink,
       {
         href,
@@ -50,21 +46,21 @@ function OraculoButton({
         "aria-disabled": ariaDisabled,
         tabIndex: ariaDisabled ? -1 : void 0,
         className: cls,
-        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick,
-        children: content
-      }
+        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick
+      },
+      content
     );
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(
     "button",
     {
       type,
       onClick,
       disabled: !!ariaDisabled,
       "aria-label": ariaLabel,
-      className: cls,
-      children: content
-    }
+      className: cls
+    },
+    content
   );
 }
 

package/dist/chunk-JSQWAWJ2.mjs

@@ -0,0 +1,103 @@
+import {
+  OraculoButton
+} from "./chunk-DHENVY2Z.mjs";
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+import React2, { useLayoutEffect, useRef } from "react";
+
+// src/molecules/OraculoClubOlimpoVisual/OraculoClubOlimpoVisual.tsx
+import React from "react";
+var OraculoClubOlimpoVisual = ({
+  text,
+  buttonLabel = "Conoce m\xE1s",
+  onClick,
+  imgAlt = "Club Olimpo",
+  imgSrcMobile,
+  imgSrcDesktopBg,
+  imgSrcDesktopLogo
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "orc-co-bgMobile" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: imgSrcMobile,
+      alt: imgAlt,
+      className: "orc-co-bgMobileImg"
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "orc-co-bgDesktop" }, imgSrcDesktopBg && /* @__PURE__ */ React.createElement("div", { className: "orc-co-fillHost" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: imgSrcDesktopBg,
+      alt: `${imgAlt} fondo`,
+      className: "orc-co-bgDesktopImg"
+    }
+  )), imgSrcDesktopLogo && /* @__PURE__ */ React.createElement("div", { className: "orc-co-logo" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: imgSrcDesktopLogo,
+      alt: `${imgAlt} logo`,
+      className: "orc-co-logoImg"
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: "orc-co-desktopContent" }, /* @__PURE__ */ React.createElement("p", { className: "orc-co-captionDesktop" }, text), /* @__PURE__ */ React.createElement(OraculoButton, { onClick, variant: "primary", size: "md" }, buttonLabel))), /* @__PURE__ */ React.createElement("div", { className: "orc-co-bottom" }, /* @__PURE__ */ React.createElement("p", { className: "orc-co-caption" }, text), /* @__PURE__ */ React.createElement(OraculoButton, { onClick, variant: "primary", size: "md" }, buttonLabel)));
+};
+var OraculoClubOlimpoVisual_default = OraculoClubOlimpoVisual;
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+var OraculoSeccionClubOlimpo = ({
+  className = "",
+  fullBleed = true,
+  items,
+  selectedIndex = 0,
+  ariaLabel
+}) => {
+  const rootRef = useRef(null);
+  const bottomRef = useRef(null);
+  if (!items) return null;
+  const safeIndex = Math.min(Math.max(selectedIndex, 0), 1);
+  const item = items;
+  useLayoutEffect(() => {
+    if (!rootRef.current || !bottomRef.current) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const root = rootRef.current;
+    const bottom = bottomRef.current;
+    const update = () => {
+      root.style.setProperty(
+        "--orc-co-bottomH",
+        `${bottom.offsetHeight + 16}px`
+      );
+    };
+    const ro = new ResizeObserver(update);
+    ro.observe(bottom);
+    update();
+    return () => ro.disconnect();
+  }, []);
+  const rootClass = [
+    "orc-co-wrap",
+    fullBleed ? "orc-co-fullBleed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React2.createElement(
+    "section",
+    {
+      ref: rootRef,
+      className: rootClass,
+      "aria-label": ariaLabel || item.imgAlt || "Club Olimpo"
+    },
+    /* @__PURE__ */ React2.createElement("div", { ref: bottomRef }, /* @__PURE__ */ React2.createElement(
+      OraculoClubOlimpoVisual_default,
+      {
+        text: item.text,
+        onClick: item.onClick,
+        imgAlt: item.imgAlt,
+        imgSrcMobile: item.images.mobile,
+        imgSrcDesktopBg: item.images.desktopBg,
+        imgSrcDesktopLogo: item.images.desktopLogo
+      }
+    ))
+  );
+};
+var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
+
+export {
+  OraculoClubOlimpoVisual_default,
+  OraculoSeccionClubOlimpo_default
+};

package/dist/chunk-NPAHCXJM.mjs

@@ -0,0 +1,239 @@
+import {
+  OraculoButton
+} from "./chunk-DHENVY2Z.mjs";
+
+// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
+import React2 from "react";
+import Box2 from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography2 from "@mui/material/Typography";
+
+// src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
+import React from "react";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+var OraculoLiveCasinoCard = ({
+  logo,
+  provider,
+  providerName,
+  machine,
+  onClick
+}) => {
+  var _a;
+  return /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      onClick,
+      sx: {
+        flex: "0 0 auto",
+        position: "relative",
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: { xs: 100, md: 180 },
+        height: { xs: 200, md: 380 },
+        transition: "width .50s ease, transform .28s ease",
+        willChange: "width, transform",
+        cursor: "pointer",
+        zIndex: 0,
+        "&:hover": {
+          zIndex: 2,
+          width: { md: 260, xs: 110 }
+        },
+        "&:hover .orc-live-provider-label": {
+          opacity: 1
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        component: "img",
+        src: logo,
+        alt: `Juego ${machine != null ? machine : ""}`,
+        sx: {
+          position: "absolute",
+          inset: 0,
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          display: "block"
+        }
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        className: "orc-live-provider-label",
+        sx: {
+          position: "absolute",
+          left: "50%",
+          top: { xs: "75%", md: "80%" },
+          transform: "translate(-50%, -50%)",
+          zIndex: 3,
+          opacity: 0,
+          transition: "opacity .25s ease",
+          pointerEvents: "none"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          sx: {
+            color: "#fff",
+            fontWeight: 700,
+            fontSize: { xs: 11, md: 14 },
+            textTransform: "capitalize"
+          }
+        },
+        (_a = provider != null ? provider : providerName) != null ? _a : ""
+      )
+    )
+  );
+};
+var OraculoLiveCasinoCard_default = OraculoLiveCasinoCard;
+
+// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
+var OraculoSeccionCasinoEnVivo = ({
+  items,
+  title = "Casino en vivo",
+  subtitle = "Disfruta la emoci\xF3n en tus juegos favoritos y gana en tiempo real.",
+  backgroundMobileUrl = "/assets/img/home/CasinoEnVivo/FondoMobile3.png",
+  backgroundDesktopUrl = "/assets/img/home/CasinoEnVivo/FondoDesktop3.png",
+  onCardClick,
+  onViewMore,
+  className
+}) => {
+  return /* @__PURE__ */ React2.createElement(
+    Box2,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100vw",
+        left: "50%",
+        right: "50%",
+        transform: "translateX(-50%)",
+        color: "white",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      Box2,
+      {
+        sx: {
+          position: "absolute",
+          inset: 0,
+          backgroundImage: {
+            xs: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundMobileUrl}')
+            `,
+            md: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundDesktopUrl}')
+            `
+          },
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          backgroundRepeat: "no-repeat",
+          zIndex: 0
+        }
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      Box2,
+      {
+        sx: {
+          position: "relative",
+          zIndex: 1,
+          maxWidth: 1200,
+          height: { xs: "450px", md: "550px" },
+          mx: "auto",
+          px: { xs: 2.5, md: 6 },
+          display: "flex",
+          flexDirection: { xs: "column", md: "row" },
+          alignItems: { xs: "center", md: "center" },
+          justifyContent: "center",
+          gap: { xs: 0, md: 15 },
+          textAlign: { xs: "center", md: "left" }
+        }
+      },
+      /* @__PURE__ */ React2.createElement(Stack, { spacing: 3, sx: { maxWidth: { md: 280 } } }, /* @__PURE__ */ React2.createElement(
+        Typography2,
+        {
+          variant: "h4",
+          sx: {
+            fontWeight: 800,
+            fontSize: { xs: 24, md: 40 },
+            WebkitTextStroke: "0.5px rgba(255, 255, 255, .5)",
+            textShadow: "0 0 2px rgba(255, 255, 255, .95),0 0 4px rgba(255, 255, 255, .6),0 1px 0 #898989"
+          }
+        },
+        title
+      ), /* @__PURE__ */ React2.createElement(
+        Typography2,
+        {
+          sx: {
+            fontSize: { xs: 14, md: 18 },
+            color: "rgba(255,255,255,0.9)",
+            marginX: { xs: 4, md: 0 },
+            lineHeight: 1.5
+          }
+        },
+        subtitle
+      ), /* @__PURE__ */ React2.createElement(Box2, { sx: { display: { xs: "none", md: "block" } } }, /* @__PURE__ */ React2.createElement(
+        OraculoButton,
+        {
+          variant: "primary",
+          size: "md",
+          onClick: () => onViewMore == null ? void 0 : onViewMore()
+        },
+        "Ver m\xE1s"
+      ))),
+      /* @__PURE__ */ React2.createElement(
+        Box2,
+        {
+          sx: {
+            display: "flex",
+            gap: { xs: 2, md: 3 },
+            justifyContent: "center",
+            overflowX: { xs: "auto", md: "visible" },
+            py: { xs: 3, md: 0 },
+            alignItems: "center"
+          }
+        },
+        (items != null ? items : []).slice(0, 3).map((juego, idx) => {
+          var _a, _b;
+          return /* @__PURE__ */ React2.createElement(
+            OraculoLiveCasinoCard_default,
+            {
+              key: (_a = juego.orden) != null ? _a : idx,
+              logo: `https://olimpo.bet${(_b = juego.logo) != null ? _b : ""}`,
+              provider: juego.provider,
+              providerName: juego.web_name,
+              machine: juego.machine,
+              onClick: () => onCardClick == null ? void 0 : onCardClick(juego, idx)
+            }
+          );
+        })
+      ),
+      /* @__PURE__ */ React2.createElement(Box2, { sx: { display: { xs: "block", md: "none" } } }, /* @__PURE__ */ React2.createElement(
+        OraculoButton,
+        {
+          variant: "primary",
+          size: "lg",
+          onClick: () => onViewMore == null ? void 0 : onViewMore()
+        },
+        "Ver m\xE1s"
+      ))
+    )
+  );
+};
+var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
+
+export {
+  OraculoLiveCasinoCard_default,
+  OraculoSeccionCasinoEnVivo_default
+};