oraculo-ui 0.1.9 → 0.1.11

package/dist/OraculoSeccionTopJuegos-3AR4L7SZ.css

@@ -1,59 +0,0 @@
-/* src/atoms/OraculoSectionTitle/OraculoSectionTitle.css */
-.orc-section-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.orc-section-title__icon {
-  width: 40px;
-  height: 40px;
-  object-fit: none;
-}
-.orc-section-title__title {
-  margin: 0;
-  font-weight: 700;
-  letter-spacing: 0;
-  color: #ffffff;
-}
-.orc-section-title--xs .orc-section-title__title {
-  font-size: 14px;
-  line-height: 18px;
-}
-.orc-section-title--sm .orc-section-title__title {
-  font-size: 18px;
-  line-height: 24px;
-}
-.orc-section-title--md .orc-section-title__title {
-  font-size: 32px;
-  line-height: 48px;
-}
-.orc-section-title--lg .orc-section-title__title {
-  font-size: 22px;
-  line-height: 30px;
-}
-.orc-section-title--xs .orc-section-title__icon {
-  width: 24px;
-  height: 24px;
-}
-@media (max-width: 768px) {
-  .orc-section-title__icon {
-    width: 24px;
-    height: 24px;
-  }
-  .orc-section-title--xs .orc-section-title__title {
-    font-size: 14px;
-    line-height: 18px;
-  }
-  .orc-section-title--sm .orc-section-title__title {
-    font-size: 16px;
-    line-height: 22px;
-  }
-  .orc-section-title--md .orc-section-title__title {
-    font-size: 18px;
-    line-height: 24px;
-  }
-  .orc-section-title--lg .orc-section-title__title {
-    font-size: 20px;
-    line-height: 26px;
-  }
-}

package/dist/OraculoSeccionTopJuegos-FZUYQEMC.mjs

@@ -1,8 +0,0 @@
-import {
-  OraculoSeccionTopJuegos
-} from "./chunk-DKP3HTEP.mjs";
-import "./chunk-5GTDKE3I.mjs";
-import "./chunk-VIPLL6XT.mjs";
-export {
-  OraculoSeccionTopJuegos as default
-};

package/dist/chunk-5GTDKE3I.mjs

@@ -1,30 +0,0 @@
-// 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

@@ -1,174 +0,0 @@
-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

@@ -1,192 +0,0 @@
-// 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

@@ -1,183 +0,0 @@
-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
-};