oraculo-ui 0.1.8 → 0.1.9

package/dist/chunk-PZJSZNXJ.mjs

@@ -0,0 +1,6 @@
+// src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css
+var OraculoSeccionClubOlimpo_default = {};
+
+export {
+  OraculoSeccionClubOlimpo_default
+};

package/dist/chunk-VHW77D2M.mjs

@@ -0,0 +1,91 @@
+// src/molecules/OraculoCarousel/OraculoCarousel.tsx
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef
+} from "react";
+import {
+  Splide as SplideRaw,
+  SplideSlide as SplideSlideRaw
+} from "@splidejs/react-splide";
+import { jsx } from "react/jsx-runtime";
+var Splide = SplideRaw;
+var SplideSlide = SplideSlideRaw;
+var OraculoCarousel = forwardRef(
+  ({
+    items = [],
+    renderItem,
+    perPage = 1,
+    gap = "0px",
+    breakpoints,
+    options = {},
+    className = "",
+    onMove
+  }, ref) => {
+    const splideRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      next: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(">");
+      },
+      prev: () => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go("<");
+      },
+      go: (index) => {
+        var _a;
+        return (_a = splideRef.current) == null ? void 0 : _a.go(index);
+      }
+    }));
+    const handleMove = useCallback(
+      (splide) => {
+        const index = splide.index;
+        const total = splide.length;
+        const currentPerPage = splide.options.perPage || 1;
+        const isStart = index === 0;
+        const isEnd = index >= total - currentPerPage;
+        onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
+      },
+      [onMove]
+    );
+    const handleMounted = useCallback(
+      (splide) => {
+        handleMove(splide);
+      },
+      [handleMove]
+    );
+    const mergedOptions = {
+      type: "slide",
+      trimSpace: false,
+      drag: true,
+      pagination: false,
+      arrows: false,
+      rewind: false,
+      focus: "start",
+      autoWidth: false,
+      perPage,
+      gap,
+      breakpoints,
+      ...options
+    };
+    return /* @__PURE__ */ jsx("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx(
+      Splide,
+      {
+        ref: splideRef,
+        options: mergedOptions,
+        onMove: handleMove,
+        onMounted: handleMounted,
+        children: items.map((item, index) => {
+          var _a;
+          return /* @__PURE__ */ jsx(SplideSlide, { children: renderItem(item, index) }, (_a = item.id) != null ? _a : index);
+        })
+      }
+    ) });
+  }
+);
+var OraculoCarousel_default = OraculoCarousel;
+
+export {
+  OraculoCarousel_default
+};

package/dist/chunk-VIPLL6XT.mjs

@@ -0,0 +1,43 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __glob = (map) => (path) => {
+  var fn = map[path];
+  if (fn) return fn();
+  throw new Error("Module not found in bundle: " + path);
+};
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __require,
+  __glob,
+  __commonJS,
+  __toESM
+};

package/dist/chunk-WPLILXPP.mjs

@@ -0,0 +1,389 @@
+import {
+  OraculoCarousel_default
+} from "./chunk-VHW77D2M.mjs";
+import {
+  OraculoButton
+} from "./chunk-IJQLK4NO.mjs";
+
+// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
+import { useRef, useState } from "react";
+import Box2 from "@mui/material/Box";
+import Typography2 from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+
+// src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OraculoWelcomeBanner = ({
+  title,
+  amount,
+  subtitle,
+  buttonText,
+  onButtonClick,
+  backgroundImage,
+  alt,
+  className = "",
+  variant = "small"
+}) => {
+  const symbol = amount ? amount.slice(0, 2) : "";
+  const value = amount ? amount.slice(2) : "";
+  const isLarge = variant === "large";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100%",
+        maxWidth: {
+          xs: 328,
+          lg: isLarge ? 618 : 456
+        },
+        mx: "auto"
+      },
+      children: [
+        backgroundImage && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "relative",
+              width: "100%",
+              aspectRatio: {
+                xs: "328 / 188",
+                lg: isLarge ? "618 / 346" : "456 / 272"
+              },
+              borderRadius: "14px",
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              Box,
+              {
+                component: "img",
+                src: backgroundImage,
+                alt: alt != null ? alt : "Fondo promocional",
+                sx: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover",
+                  objectPosition: {
+                    xs: "50% 0%",
+                    lg: "45% 0%"
+                  },
+                  display: "block"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              color: "#e7f8ff",
+              textAlign: "center",
+              pl: "14%",
+              pr: { xs: "14%", lg: "15%" }
+            },
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  maxWidth: "60%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center"
+                },
+                children: [
+                  title && /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      sx: {
+                        fontSize: { xs: 12, lg: 20 },
+                        fontWeight: 400,
+                        color: "#e7f8ff"
+                      },
+                      children: title
+                    }
+                  ),
+                  amount && /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      component: "p",
+                      sx: {
+                        fontFamily: '"secondary", sans-serif',
+                        lineHeight: { xs: 0.9, lg: 0.87 },
+                        m: "4px 0",
+                        background: "linear-gradient(175deg, #EDC421 -12.56%, #FFFABF 17.99%, #EDC421 49.74%)",
+                        WebkitBackgroundClip: "text",
+                        WebkitTextFillColor: "transparent",
+                        WebkitTextStroke: "0.5px #fff8c1",
+                        filter: "drop-shadow(0px 4px 0px #8D4406) drop-shadow(0px 4px 4px rgba(28, 28, 28, 0.4))",
+                        display: "flex",
+                        alignItems: "baseline",
+                        justifyContent: "center"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 },
+                            children: symbol
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            component: "span",
+                            sx: { fontSize: { xs: 52, lg: 77 } },
+                            children: value
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      sx: {
+                        pb: "20px",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        color: "#e7f8ff"
+                      },
+                      children: subtitle
+                    }
+                  ),
+                  buttonText && /* @__PURE__ */ jsx(OraculoButton, { onClick: onButtonClick, children: buttonText })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
+
+// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var OraculoCarouselDots = ({
+  total,
+  active,
+  onSelect,
+  className = ""
+}) => {
+  if (total <= 1) return null;
+  const rootClass = ["orc-dots", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: rootClass, role: "tablist", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx2("span", { className: "orc-dots__cell", children: /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": i === active,
+      "aria-label": `Ir al slide ${i + 1}`,
+      className: "orc-dots__dot" + (i === active ? " orc-dots__dot--active" : ""),
+      onClick: () => onSelect == null ? void 0 : onSelect(i)
+    }
+  ) }, i)) });
+};
+var OraculoCarouselDots_default = OraculoCarouselDots;
+
+// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var buildSectionSx = (bgUrl) => ({
+  width: "100vw",
+  position: "relative",
+  left: "50%",
+  right: "50%",
+  marginLeft: "-50vw",
+  marginRight: "-50vw",
+  py: 8,
+  color: "#fff",
+  backgroundImage: `
+    linear-gradient(to bottom,#121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to top,   #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to left,  #121212 0%, rgba(18,18,18,0) 10%),
+    linear-gradient(to right, #121212 0%, rgba(18,18,18,0) 10%),
+    url("${bgUrl}")
+  `,
+  backgroundRepeat: "no-repeat",
+  backgroundPosition: "center",
+  backgroundSize: "cover"
+});
+var headlineBaseSx = {
+  textAlign: "center",
+  lineHeight: 1.1,
+  mb: 1.5
+};
+var hlTopSx = {
+  display: "inline-block",
+  fontWeight: 600,
+  fontSize: 24
+};
+var hlBottomSx = {
+  display: "inline-block",
+  fontSize: 24,
+  lineHeight: 1.1,
+  WebkitTextStroke: "0.3px rgba(255, 255, 255, .5)",
+  textShadow: `
+    0 0 2px rgba(255, 255, 255, .95),
+    0 0 6px rgba(255, 255, 255, .6),
+    0 1px 0 rgba(137, 137, 137, .85)
+  `
+};
+var OraculoSeccionBonoBienvenida = ({
+  headline,
+  items,
+  backgroundImageUrl
+}) => {
+  const [hl1 = "", hl2 = ""] = (headline || "").split("\n");
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const showDots = items.length > 1;
+  const bgUrl = backgroundImageUrl != null ? backgroundImageUrl : "/assets/img/home/BonoBienvenida/Fondobg.png";
+  const sectionSx = buildSectionSx(bgUrl);
+  const carouselRef = useRef(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const [activeIndex, setActiveIndex] = useState(0);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs2(
+      Box2,
+      {
+        component: "section",
+        sx: {
+          ...sectionSx,
+          textAlign: "center"
+        },
+        children: [
+          (hl1 || hl2) && /* @__PURE__ */ jsxs2(Box2, { sx: headlineBaseSx, children: [
+            hl1 && /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
+            hl2 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx3("br", {}),
+              /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs2(Box2, { children: [
+            /* @__PURE__ */ jsx3(
+              OraculoCarousel_default,
+              {
+                ref: carouselRef,
+                items,
+                perPage: 1,
+                gap: "12px",
+                breakpoints: {
+                  480: {
+                    perPage: 1,
+                    gap: "8px",
+                    padding: { left: "8px", right: "8px" }
+                  },
+                  768: {
+                    perPage: 1,
+                    gap: "12px",
+                    padding: { left: "8px", right: "8px" }
+                  }
+                },
+                options: {
+                  autoWidth: false
+                },
+                renderItem: (it) => /* @__PURE__ */ jsx3(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
+                onMove: ({ index, isStart, isEnd }) => {
+                  setNavState({ isStart, isEnd });
+                  setActiveIndex(index);
+                }
+              }
+            ),
+            showDots && /* @__PURE__ */ jsx3(
+              OraculoCarouselDots_default,
+              {
+                total: items.length,
+                active: activeIndex,
+                onSelect: (i) => {
+                  var _a;
+                  setActiveIndex(i);
+                  (_a = carouselRef.current) == null ? void 0 : _a.go(i);
+                }
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(Box2, { component: "section", sx: sectionSx, children: /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      sx: {
+        maxWidth: 1200,
+        mx: 5,
+        px: 2,
+        display: "grid",
+        gridTemplateColumns: "200px auto",
+        alignItems: "center"
+      },
+      children: [
+        (hl1 || hl2) && /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              minHeight: "100%"
+            },
+            children: /* @__PURE__ */ jsxs2(
+              Box2,
+              {
+                sx: {
+                  ...headlineBaseSx,
+                  textAlign: "left",
+                  mb: 0
+                },
+                children: [
+                  hl1 && /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
+                  hl2 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                    /* @__PURE__ */ jsx3("br", {}),
+                    /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Box2,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              flexWrap: "nowrap",
+              gap: 4
+            },
+            children: items.map((it, idx) => /* @__PURE__ */ jsx3(
+              OraculoWelcomeBanner_default,
+              {
+                onButtonClick: it.onButtonClick,
+                ...it
+              },
+              idx
+            ))
+          }
+        )
+      ]
+    }
+  ) });
+};
+var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
+
+export {
+  OraculoCarouselDots_default,
+  OraculoWelcomeBanner_default,
+  OraculoSeccionBonoBienvenida_default
+};

package/dist/chunk-YY5T37WR.mjs

@@ -0,0 +1,175 @@
+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/OraculoSeccionVirtuales/OraculoSeccionVirtuales.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 buildVirtualSlides = (games, mosaicFirst = true, gridSize = 4) => {
+  const baseItems = games.map((g, idx) => {
+    var _a, _b;
+    return {
+      id: (_a = g.orden) != null ? _a : idx,
+      imageUrl: (_b = g.logo) != null ? _b : ""
+    };
+  });
+  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 OraculoSeccionVirtuales = ({
+  items,
+  title = "Virtuales",
+  iconUrl = "/assets/img/home/Virtuales/virtuales.svg",
+  onItemClick,
+  onViewMore,
+  mosaicFirst = true,
+  gridSize = 4
+}) => {
+  const carouselRef = useRef(null);
+  const [navState, setNavState] = useState({ isStart: true, isEnd: false });
+  const slides = buildVirtualSlides(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: "0",
+        options: {
+          autoWidth: true,
+          gap: "12px",
+          trimSpace: false,
+          pagination: false,
+          arrows: false,
+          drag: true,
+          focus: "start",
+          perMove: 1
+        },
+        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 OraculoSeccionVirtuales_default = OraculoSeccionVirtuales;
+
+export {
+  OraculoSeccionVirtuales_default
+};