oraculo-ui 0.1.7 → 0.1.9

package/dist/chunk-2D7ZJMJV.mjs

@@ -0,0 +1,118 @@
+import {
+  OraculoButton
+} from "./chunk-IJQLK4NO.mjs";
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+import { useLayoutEffect, useRef } from "react";
+
+// src/molecules/OraculoClubOlimpoVisual/OraculoClubOlimpoVisual.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var OraculoClubOlimpoVisual = ({
+  text,
+  buttonLabel = "Conoce m\xE1s",
+  onClick,
+  imgAlt = "Club Olimpo",
+  imgSrcMobile,
+  imgSrcDesktopBg,
+  imgSrcDesktopLogo
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "orc-co-bgMobile", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imgSrcMobile,
+        alt: imgAlt,
+        className: "orc-co-bgMobileImg"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "orc-co-bgDesktop", children: [
+      imgSrcDesktopBg && /* @__PURE__ */ jsx("div", { className: "orc-co-fillHost", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imgSrcDesktopBg,
+          alt: `${imgAlt} fondo`,
+          className: "orc-co-bgDesktopImg"
+        }
+      ) }),
+      imgSrcDesktopLogo && /* @__PURE__ */ jsx("div", { className: "orc-co-logo", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imgSrcDesktopLogo,
+          alt: `${imgAlt} logo`,
+          className: "orc-co-logoImg"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "orc-co-desktopContent", children: [
+        /* @__PURE__ */ jsx("p", { className: "orc-co-captionDesktop", children: text }),
+        /* @__PURE__ */ jsx(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "orc-co-bottom", children: [
+      /* @__PURE__ */ jsx("p", { className: "orc-co-caption", children: text }),
+      /* @__PURE__ */ jsx(OraculoButton, { onClick, variant: "primary", size: "md", children: buttonLabel })
+    ] })
+  ] });
+};
+var OraculoClubOlimpoVisual_default = OraculoClubOlimpoVisual;
+
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+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__ */ jsx2(
+    "section",
+    {
+      ref: rootRef,
+      className: rootClass,
+      "aria-label": ariaLabel || item.imgAlt || "Club Olimpo",
+      children: /* @__PURE__ */ jsx2("div", { ref: bottomRef, children: /* @__PURE__ */ jsx2(
+        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-5GTDKE3I.mjs

@@ -0,0 +1,30 @@
+// src/atoms/OraculoSectionTitle/OraculoSectionTitle.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OraculoSectionTitle({
+  title,
+  iconUrl,
+  size = "md",
+  className = ""
+}) {
+  const sizeClass = size ? `orc-section-title--${size}` : "";
+  const wrapperClass = [
+    "orc-section-title",
+    sizeClass,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: wrapperClass, children: [
+    iconUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: iconUrl,
+        alt: "",
+        className: "orc-section-title__icon"
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { className: "orc-section-title__title", children: title })
+  ] });
+}
+
+export {
+  OraculoSectionTitle
+};

package/dist/chunk-AFPCFXMZ.mjs

@@ -0,0 +1,174 @@
+import {
+  ChevronLeftRounded_default,
+  ChevronRightRounded_default,
+  OraculoGameSlide_default
+} from "./chunk-AIT7B2J3.mjs";
+import {
+  OraculoSectionTitle
+} from "./chunk-5GTDKE3I.mjs";
+import {
+  OraculoCarousel_default
+} from "./chunk-VHW77D2M.mjs";
+import {
+  OraculoButton
+} from "./chunk-IJQLK4NO.mjs";
+
+// src/organisms/OraculoSeccionCasino/OraculoSeccionCasino.tsx
+import { useRef, useState } from "react";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import { jsx, jsxs } from "react/jsx-runtime";
+var buildCasinoSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b, _c;
+    return {
+      id: (_b = (_a = g.orden) != null ? _a : g.machine) != null ? _b : idx,
+      imageUrl: (_c = g.logo) != null ? _c : ""
+    };
+  });
+  if (!baseItems.length) return [];
+  const slides = [];
+  let start = 0;
+  if (mosaicFirst) {
+    const take = Math.min(baseItems.length, 5);
+    slides.push({
+      id: "mosaic-0",
+      kind: "mosaic",
+      items: baseItems.slice(0, take)
+    });
+    start = take;
+  }
+  while (start < baseItems.length) {
+    const end = Math.min(start + gridSize, baseItems.length);
+    slides.push({
+      id: `grid-${start}`,
+      kind: "grid",
+      items: baseItems.slice(start, end)
+    });
+    start = end;
+  }
+  return slides;
+};
+var OraculoSeccionCasino = ({
+  items,
+  title = "Casino",
+  iconUrl = "/assets/img/home/Casino/diamante.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const slides = buildCasinoSlides(items, mosaicFirst, gridSize);
+  const handlePrev = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.prev();
+  };
+  const handleNext = () => {
+    var _a;
+    (_a = carouselRef.current) == null ? void 0 : _a.next();
+  };
+  const handleViewMore = () => {
+    onViewMore == null ? void 0 : onViewMore();
+  };
+  return /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsxs(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: "1fr auto auto",
+          alignItems: "center",
+          columnGap: 1.5,
+          rowGap: 1
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            OraculoSectionTitle,
+            {
+              title,
+              iconUrl,
+              size: "md"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              sx: {
+                display: "flex",
+                gap: 1,
+                justifyContent: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Anterior",
+                    variant: "secondary",
+                    iconOnly: true,
+                    leftIcon: /* @__PURE__ */ jsx(ChevronLeftRounded_default, {}),
+                    onClick: handlePrev,
+                    disabled: navState.isStart
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  OraculoButton,
+                  {
+                    ariaLabel: "Siguiente",
+                    variant: "secondary",
+                    iconOnly: true,
+                    rightIcon: /* @__PURE__ */ jsx(ChevronRightRounded_default, {}),
+                    onClick: handleNext,
+                    disabled: navState.isEnd
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Box, { sx: { justifySelf: "end" }, children: /* @__PURE__ */ jsx(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OraculoCarousel_default,
+      {
+        ref: carouselRef,
+        items: slides,
+        perPage: 1,
+        gap: "0px",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start"
+        },
+        renderItem: (slide) => /* @__PURE__ */ jsx("div", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx(
+          OraculoGameSlide_default,
+          {
+            items: slide.items,
+            layout: slide.kind === "mosaic" ? "mosaic" : "grid",
+            onClick: (itm) => {
+              const game = items.find(
+                (g, idx) => {
+                  var _a;
+                  return ((_a = g.orden) != null ? _a : idx) === itm.id;
+                }
+              );
+              if (game) onItemClick == null ? void 0 : onItemClick(game);
+            }
+          }
+        ) }),
+        onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
+      }
+    )
+  ] }) });
+};
+var OraculoSeccionCasino_default = OraculoSeccionCasino;
+
+export {
+  OraculoSeccionCasino_default
+};

package/dist/chunk-AIT7B2J3.mjs

@@ -0,0 +1,192 @@
+// src/molecules/OraculoGameCard/OraculoGameCard.tsx
+import Box from "@mui/material/Box";
+import { jsx } from "react/jsx-runtime";
+var OraculoGameCard = ({
+  imageUrl,
+  onClick,
+  size = "sm"
+}) => {
+  const dim = size === "lg" ? { w: 280, h: 352 } : { w: 152, h: 168 };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      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__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: "Juego de casino",
+          loading: "lazy",
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+            borderRadius: "inherit"
+          }
+        }
+      )
+    }
+  );
+};
+var OraculoGameCard_default = OraculoGameCard;
+
+// src/molecules/OraculoGameSlide/OraculoGameSlide.tsx
+import Box2 from "@mui/material/Box";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var GAP = 12;
+var OraculoGameSlide = ({
+  items,
+  layout = "grid",
+  onClick
+}) => {
+  var _a;
+  if (layout === "mosaic") {
+    const big = items[0];
+    const smalls = items.slice(1, 5);
+    return /* @__PURE__ */ jsxs(
+      Box2,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateRows: {
+            xs: `repeat(2, 112px)`,
+            md: `repeat(2, 168px)`
+          },
+          gridTemplateColumns: {
+            xs: `184px`,
+            md: `280px`
+          },
+          gridAutoFlow: "column",
+          gridAutoColumns: {
+            xs: `104px`,
+            md: `152px`
+          },
+          columnGap: `${GAP}px`,
+          rowGap: `${GAP}px`,
+          alignItems: "stretch",
+          justifyItems: "stretch"
+        },
+        children: [
+          big && /* @__PURE__ */ jsx2(
+            Box2,
+            {
+              sx: {
+                width: { xs: 184, md: 280 },
+                height: { xs: 234, md: 352 },
+                gridRow: "1 / span 2",
+                overflow: "hidden",
+                borderRadius: 2,
+                "& > *": { width: "100%", height: "100%" }
+              },
+              children: /* @__PURE__ */ jsx2(
+                OraculoGameCard_default,
+                {
+                  imageUrl: `https://olimpo.bet${(_a = big.imageUrl) != null ? _a : ""}`,
+                  size: "lg",
+                  onClick: () => onClick == null ? void 0 : onClick(big, 0)
+                }
+              )
+            }
+          ),
+          smalls.map((it, index) => {
+            var _a2;
+            return /* @__PURE__ */ jsx2(
+              Box2,
+              {
+                sx: {
+                  width: { xs: 104, md: 152 },
+                  height: { xs: 112, md: 168 },
+                  overflow: "hidden",
+                  borderRadius: 2,
+                  "& > *": { width: "100%", height: "100%" }
+                },
+                children: /* @__PURE__ */ jsx2(
+                  OraculoGameCard_default,
+                  {
+                    imageUrl: `https://olimpo.bet${(_a2 = it.imageUrl) != null ? _a2 : ""}`,
+                    size: "sm",
+                    onClick: () => onClick == null ? void 0 : onClick(it, index + 1)
+                  }
+                )
+              },
+              it.id
+            );
+          })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: {
+          xs: `repeat(2, 104px)`,
+          md: `repeat(2, 152px)`
+        },
+        gridTemplateRows: {
+          xs: `repeat(2, 112px)`,
+          md: `repeat(2, 168px)`
+        },
+        gap: `${GAP}px`,
+        "& > *": {
+          overflow: "hidden",
+          borderRadius: 2,
+          "& > *": { width: "100%", height: "100%" }
+        }
+      },
+      children: items.map((it, index) => {
+        var _a2, _b;
+        return /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(
+          OraculoGameCard_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);
+      })
+    }
+  );
+};
+var OraculoGameSlide_default = OraculoGameSlide;
+
+// ../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js
+import { createSvgIcon } from "@mui/material/utils";
+
+// ../node_modules/@mui/icons-material/esm/ChevronLeftRounded.js
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChevronLeftRounded_default = createSvgIcon(/* @__PURE__ */ _jsx("path", {
+  d: "M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41"
+}), "ChevronLeftRounded");
+
+// ../node_modules/@mui/icons-material/esm/ChevronRightRounded.js
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var ChevronRightRounded_default = createSvgIcon(/* @__PURE__ */ _jsx2("path", {
+  d: "M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41s1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01"
+}), "ChevronRightRounded");
+
+export {
+  OraculoGameCard_default,
+  OraculoGameSlide_default,
+  ChevronLeftRounded_default,
+  ChevronRightRounded_default
+};

package/dist/chunk-DKP3HTEP.mjs

@@ -0,0 +1,183 @@
+import {
+  OraculoSectionTitle
+} from "./chunk-5GTDKE3I.mjs";
+
+// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { useMemo } from "react";
+import Stack from "@mui/material/Stack";
+import Box2 from "@mui/material/Box";
+
+// src/molecules/OraculoGameRankCard/OraculoGameRankCard.tsx
+import Box from "@mui/material/Box";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OraculoGameRankCard({
+  imageUrl,
+  orden = 1,
+  onClick,
+  sizes = {
+    xs: { w: 104, h: 112, r: 18, font: 48 },
+    md: { w: 186, h: 264, r: 22.6, font: 64 }
+  }
+}) {
+  var _a, _b, _c, _d;
+  const getVal = (k, def) => {
+    var _a2, _b2, _c2, _d2;
+    return {
+      xs: (_b2 = (_a2 = sizes.xs) == null ? void 0 : _a2[k]) != null ? _b2 : def,
+      md: (_d2 = (_c2 = sizes.md) == null ? void 0 : _c2[k]) != null ? _d2 : def
+    };
+  };
+  const W = getVal("w", 186);
+  const H = getVal("h", 264);
+  const R = getVal("r", 22.6);
+  const F = getVal("font", 64);
+  const hang = {
+    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__ */ jsxs(
+    Box,
+    {
+      onClick,
+      role: "button",
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: { xs: `${W.xs}px`, md: `${W.md}px` },
+        aspectRatio: {
+          xs: `${W.xs}/${H.xs}`,
+          md: `${W.md}/${H.md}`
+        },
+        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 }
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `https://olimpo.bet${imageUrl}`,
+                  alt: "Juego de casino",
+                  loading: "lazy",
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover",
+                    display: "block"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  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"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "span",
+            sx: {
+              position: "absolute",
+              left: 8,
+              bottom: {
+                xs: `-${hang.xs}px`,
+                md: `-${hang.md}px`
+              },
+              fontFamily: "secondary",
+              fontSize: {
+                xs: `${F.xs}px`,
+                md: `${F.md}px`
+              },
+              lineHeight: 1,
+              color: "#3CC666",
+              WebkitTextStroke: "1px #9ee86e",
+              zIndex: 2,
+              userSelect: "none"
+            },
+            children: orden
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/organisms/OraculoSeccionTopJuegos/OraculoSeccionTopJuegos.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function OraculoSeccionTopJuegos({
+  items,
+  title = "Top Juegos",
+  iconUrl,
+  onCardClick
+}) {
+  const normalizedItems = useMemo(
+    () => items.map((item, index) => {
+      var _a;
+      return {
+        ...item,
+        // si no viene orden, usamos el índice (1-based)
+        orden: (_a = item.orden) != null ? _a : index + 1,
+        _originalIndex: index
+      };
+    }).sort((a, b) => {
+      if (a.orden != null && b.orden != null) return a.orden - b.orden;
+      return a._originalIndex - b._originalIndex;
+    }),
+    [items]
+  );
+  return /* @__PURE__ */ jsx2("section", { style: { width: "100%" }, children: /* @__PURE__ */ jsxs2(Stack, { direction: "column", spacing: 2, useFlexGap: true, children: [
+    /* @__PURE__ */ jsx2(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+    /* @__PURE__ */ jsx2(
+      Box2,
+      {
+        sx: {
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "repeat(3, minmax(0, 1fr))",
+            md: "repeat(6, minmax(0, 1fr))"
+          },
+          gap: { xs: 1.5, md: 2 },
+          justifyItems: "center",
+          width: "100%"
+        },
+        children: normalizedItems.slice(0, 6).map((juego) => /* @__PURE__ */ jsx2(
+          OraculoGameRankCard,
+          {
+            imageUrl: juego.logo || "",
+            orden: juego.orden,
+            onClick: () => onCardClick == null ? void 0 : onCardClick(juego)
+          },
+          juego.machine
+        ))
+      }
+    )
+  ] }) });
+}
+
+export {
+  OraculoGameRankCard,
+  OraculoSeccionTopJuegos
+};