oraculo-ui 0.1.6 → 0.1.8

package/dist/index.d.mts

@@ -43,6 +43,11 @@ interface OraculoCarouselOptions {
     gap?: string;
     pagination?: boolean;
     arrows?: boolean;
+    drag?: boolean;
+    focus?: string | "center";
+    autoWidth?: boolean;
+    trimSpace?: boolean;
+    rewind?: boolean;
     padding?: {
         left?: string;
         right?: string;
@@ -60,7 +65,7 @@ interface OraculoCarouselProps<T = any> {
     renderItem: (item: T, index: number) => ReactNode;
     perPage?: number;
     gap?: string;
-    breakpoints?: {};
+    breakpoints?: Record<string | number, OraculoCarouselOptions>;
     options?: OraculoCarouselOptions;
     className?: string;
     onMove?: (info: {
@@ -142,18 +147,26 @@ interface OraculoClubOlimpoVisualProps {
 }
 declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
 
-interface OraculoDestacadoItem {
-    id?: string | number;
-    src: string;
-    alt: string;
+interface OraculoSeccionDestacadosItem {
+    body: string;
+    image: string;
+    title: string;
+    summary_body: string;
+    summary_title: string;
+    groups_forbidden: number[];
+    groups_allowed: number[];
+    promotion: string;
+    tags: string;
+    summary_image?: string;
 }
 interface OraculoSeccionDestacadosProps {
-    items: OraculoDestacadoItem[];
+    items: OraculoSeccionDestacadosItem[];
     title?: string;
     iconUrl?: string;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
 interface OraculoGameItem {
@@ -267,9 +280,10 @@ interface parametros {
     casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
     virtuales: OraculoSeccionVirtualesProps;
     clubOlimpo: OraculoSeccionClubOlimpoItem;
+    destacados: OraculoSeccionDestacadosProps;
 }
 declare function OraculoPageLanding({ props }: {
     props: parametros;
 }): react_jsx_runtime.JSX.Element;
 
-export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosItem, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.d.ts

@@ -43,6 +43,11 @@ interface OraculoCarouselOptions {
     gap?: string;
     pagination?: boolean;
     arrows?: boolean;
+    drag?: boolean;
+    focus?: string | "center";
+    autoWidth?: boolean;
+    trimSpace?: boolean;
+    rewind?: boolean;
     padding?: {
         left?: string;
         right?: string;
@@ -60,7 +65,7 @@ interface OraculoCarouselProps<T = any> {
     renderItem: (item: T, index: number) => ReactNode;
     perPage?: number;
     gap?: string;
-    breakpoints?: {};
+    breakpoints?: Record<string | number, OraculoCarouselOptions>;
     options?: OraculoCarouselOptions;
     className?: string;
     onMove?: (info: {
@@ -142,18 +147,26 @@ interface OraculoClubOlimpoVisualProps {
 }
 declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
 
-interface OraculoDestacadoItem {
-    id?: string | number;
-    src: string;
-    alt: string;
+interface OraculoSeccionDestacadosItem {
+    body: string;
+    image: string;
+    title: string;
+    summary_body: string;
+    summary_title: string;
+    groups_forbidden: number[];
+    groups_allowed: number[];
+    promotion: string;
+    tags: string;
+    summary_image?: string;
 }
 interface OraculoSeccionDestacadosProps {
-    items: OraculoDestacadoItem[];
+    items: OraculoSeccionDestacadosItem[];
     title?: string;
     iconUrl?: string;
     onViewMore?: () => void;
     className?: string;
 }
+
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
 interface OraculoGameItem {
@@ -267,9 +280,10 @@ interface parametros {
     casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
     virtuales: OraculoSeccionVirtualesProps;
     clubOlimpo: OraculoSeccionClubOlimpoItem;
+    destacados: OraculoSeccionDestacadosProps;
 }
 declare function OraculoPageLanding({ props }: {
     props: parametros;
 }): react_jsx_runtime.JSX.Element;
 
-export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };
+export { type OraculoBonosItem, OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, OraculoPageLanding, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosItem, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, OraculoSeccionTopJuegos as OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.js

@@ -183,12 +183,9 @@ var OraculoCarousel = (0, import_react.forwardRef)(
   ({
     items = [],
     renderItem,
-    perPage = 4,
-    gap = "12px",
-    breakpoints = {
-      1024: { perPage: 3, gap: "10px" },
-      768: { perPage: 1.3, gap: "10px", padding: { right: "16px" } }
-    },
+    perPage = 1,
+    gap = "0px",
+    breakpoints,
     options = {},
     className = "",
     onMove
@@ -212,9 +209,9 @@ var OraculoCarousel = (0, import_react.forwardRef)(
       (splide) => {
         const index = splide.index;
         const total = splide.length;
-        const perPage2 = splide.options.perPage || 1;
+        const currentPerPage = splide.options.perPage || 1;
         const isStart = index === 0;
-        const isEnd = index >= total - perPage2;
+        const isEnd = index >= total - currentPerPage;
         onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
       },
       [onMove]
@@ -225,24 +222,25 @@ var OraculoCarousel = (0, import_react.forwardRef)(
       },
       [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__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Splide,
       {
         ref: splideRef,
-        options: {
-          type: "slide",
-          trimSpace: false,
-          perPage,
-          gap,
-          drag: true,
-          pagination: false,
-          rewind: false,
-          arrows: false,
-          focus: 0,
-          autoWidth: true,
-          breakpoints,
-          ...options
-        },
+        options: mergedOptions,
         onMove: handleMove,
         onMounted: handleMounted,
         children: items.map((item, index) => {
@@ -610,14 +608,17 @@ var OraculoGameSlide = ({
           "& > *": { width: "100%", height: "100%" }
         }
       },
-      children: items.map((it, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        OraculoGameCard_default,
-        {
-          imageUrl: it.imageUrl,
-          size: "sm",
-          onClick: () => onClick == null ? void 0 : onClick(it, index)
-        }
-      ) }, it.id))
+      children: items.map((it, index) => {
+        var _a;
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Box4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          OraculoGameCard_default,
+          {
+            imageUrl: it.imageUrl,
+            size: "sm",
+            onClick: () => onClick == null ? void 0 : onClick(it, index)
+          }
+        ) }, (_a = it.id) != null ? _a : index);
+      })
     }
   );
 };
@@ -888,47 +889,31 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 8
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              OraculoButton,
+              {
+                ariaLabel: "Anterior",
+                variant: "secondary",
+                iconOnly: true,
+                leftIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronLeftRounded_default, {}),
+                onClick: handlePrev,
+                disabled: navState.isStart
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              OraculoButton,
+              {
+                ariaLabel: "Siguiente",
+                variant: "secondary",
+                iconOnly: true,
+                rightIcon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRightRounded_default, {}),
+                onClick: handleNext,
+                disabled: navState.isEnd
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
@@ -945,32 +930,29 @@ 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: item.src,
-                  alt: item.alt,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            (_a = item.id) != null ? _a : item.src
-          );
-        },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "img",
+              {
+                src: item.image,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  height: "auto",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -1748,6 +1730,7 @@ var OraculoSeccionClubOlimpo_default = OraculoSeccionClubOlimpo;
 
 // src/templates/OraculoPageLanding.tsx
 var import_material2 = require("@mui/material");
+var import_css = require("@splidejs/react-splide/css");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 function OraculoPageLanding({ props }) {
   const clubOlimpoItems = [
@@ -1763,10 +1746,52 @@ function OraculoPageLanding({ props }) {
     }
   ];
   const listaDestacados = [
-    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
-    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      // aquí puedes usar la ruta que antes estaba en href
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+      // summary_image: "/lo-que-sea.png", // opcional
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    }
   ];
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_material2.Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(

package/dist/index.mjs

@@ -121,10 +121,10 @@ var OraculoCarouselDots_default = OraculoCarouselDots;
 
 // src/molecules/OraculoCarousel/OraculoCarousel.tsx
 import {
-  useRef,
-  useImperativeHandle,
   forwardRef,
-  useCallback
+  useCallback,
+  useImperativeHandle,
+  useRef
 } from "react";
 import {
   Splide as SplideRaw,
@@ -137,12 +137,9 @@ var OraculoCarousel = forwardRef(
   ({
     items = [],
     renderItem,
-    perPage = 4,
-    gap = "12px",
-    breakpoints = {
-      1024: { perPage: 3, gap: "10px" },
-      768: { perPage: 1.3, gap: "10px", padding: { right: "16px" } }
-    },
+    perPage = 1,
+    gap = "0px",
+    breakpoints,
     options = {},
     className = "",
     onMove
@@ -166,9 +163,9 @@ var OraculoCarousel = forwardRef(
       (splide) => {
         const index = splide.index;
         const total = splide.length;
-        const perPage2 = splide.options.perPage || 1;
+        const currentPerPage = splide.options.perPage || 1;
         const isStart = index === 0;
-        const isEnd = index >= total - perPage2;
+        const isEnd = index >= total - currentPerPage;
         onMove == null ? void 0 : onMove({ index, isStart, isEnd, total });
       },
       [onMove]
@@ -179,24 +176,25 @@ var OraculoCarousel = forwardRef(
       },
       [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__ */ jsx4("div", { className, style: { width: "100%" }, children: /* @__PURE__ */ jsx4(
       Splide,
       {
         ref: splideRef,
-        options: {
-          type: "slide",
-          trimSpace: false,
-          perPage,
-          gap,
-          drag: true,
-          pagination: false,
-          rewind: false,
-          arrows: false,
-          focus: 0,
-          autoWidth: true,
-          breakpoints,
-          ...options
-        },
+        options: mergedOptions,
         onMove: handleMove,
         onMounted: handleMounted,
         children: items.map((item, index) => {
@@ -564,14 +562,17 @@ var OraculoGameSlide = ({
           "& > *": { width: "100%", height: "100%" }
         }
       },
-      children: items.map((it, index) => /* @__PURE__ */ jsx8(Box4, { children: /* @__PURE__ */ jsx8(
-        OraculoGameCard_default,
-        {
-          imageUrl: it.imageUrl,
-          size: "sm",
-          onClick: () => onClick == null ? void 0 : onClick(it, index)
-        }
-      ) }, it.id))
+      children: items.map((it, index) => {
+        var _a;
+        return /* @__PURE__ */ jsx8(Box4, { children: /* @__PURE__ */ jsx8(
+          OraculoGameCard_default,
+          {
+            imageUrl: it.imageUrl,
+            size: "sm",
+            onClick: () => onClick == null ? void 0 : onClick(it, index)
+          }
+        ) }, (_a = it.id) != null ? _a : index);
+      })
     }
   );
 };
@@ -842,47 +843,31 @@ function OraculoSeccionDestacados({
           marginBottom: 16
         },
         children: [
-          /* @__PURE__ */ jsx11(
-            OraculoSectionTitle,
-            {
-              title,
-              iconUrl,
-              size: "md"
-            }
-          ),
-          /* @__PURE__ */ jsxs8(
-            "div",
-            {
-              style: {
-                display: "flex",
-                gap: 8
-              },
-              children: [
-                /* @__PURE__ */ jsx11(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Anterior",
-                    variant: "secondary",
-                    iconOnly: true,
-                    leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
-                    onClick: handlePrev,
-                    disabled: navState.isStart
-                  }
-                ),
-                /* @__PURE__ */ jsx11(
-                  OraculoButton,
-                  {
-                    ariaLabel: "Siguiente",
-                    variant: "secondary",
-                    iconOnly: true,
-                    rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
-                    onClick: handleNext,
-                    disabled: navState.isEnd
-                  }
-                )
-              ]
-            }
-          ),
+          /* @__PURE__ */ jsx11(OraculoSectionTitle, { title, iconUrl, size: "md" }),
+          /* @__PURE__ */ jsxs8("div", { style: { display: "flex", gap: 8 }, children: [
+            /* @__PURE__ */ jsx11(
+              OraculoButton,
+              {
+                ariaLabel: "Anterior",
+                variant: "secondary",
+                iconOnly: true,
+                leftIcon: /* @__PURE__ */ jsx11(ChevronLeftRounded_default, {}),
+                onClick: handlePrev,
+                disabled: navState.isStart
+              }
+            ),
+            /* @__PURE__ */ jsx11(
+              OraculoButton,
+              {
+                ariaLabel: "Siguiente",
+                variant: "secondary",
+                iconOnly: true,
+                rightIcon: /* @__PURE__ */ jsx11(ChevronRightRounded_default, {}),
+                onClick: handleNext,
+                disabled: navState.isEnd
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx11(OraculoButton, { variant: "secondary", onClick: handleViewMore, children: "Ver m\xE1s" })
         ]
       }
@@ -899,32 +884,29 @@ function OraculoSeccionDestacados({
           768: { perPage: 1.15, focus: "start" },
           1024: { perPage: 2.5, focus: "start" }
         },
-        renderItem: (item) => {
-          var _a;
-          return /* @__PURE__ */ jsx11(
-            "div",
-            {
-              style: {
-                textAlign: "center",
-                marginTop: 16
-              },
-              children: /* @__PURE__ */ jsx11(
-                "img",
-                {
-                  src: item.src,
-                  alt: item.alt,
-                  style: {
-                    width: "100%",
-                    height: "auto",
-                    borderRadius: 8,
-                    display: "block"
-                  }
-                }
-              )
+        renderItem: (item) => /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              marginTop: 16
             },
-            (_a = item.id) != null ? _a : item.src
-          );
-        },
+            children: /* @__PURE__ */ jsx11(
+              "img",
+              {
+                src: item.image,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  height: "auto",
+                  borderRadius: 8,
+                  display: "block"
+                }
+              }
+            )
+          },
+          `${item.title}-${item.image}`
+        ),
         onMove: ({ isStart, isEnd }) => setNavState({ isStart, isEnd })
       }
     )
@@ -1705,6 +1687,7 @@ import {
   Container,
   Stack as Stack5
 } from "@mui/material";
+import "@splidejs/react-splide/css";
 import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function OraculoPageLanding({ props }) {
   const clubOlimpoItems = [
@@ -1720,10 +1703,52 @@ function OraculoPageLanding({ props }) {
     }
   ];
   const listaDestacados = [
-    { id: 1, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 2, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" },
-    { id: 3, src: "/assets/img/home/Destacados/Banner01.png", alt: "Gol Seguro", href: "/destacados" },
-    { id: 4, src: "/assets/img/home/Destacados/Banner02.png", alt: "Promo 2", href: "/destacados" }
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      // aquí puedes usar la ruta que antes estaba en href
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+      // summary_image: "/lo-que-sea.png", // opcional
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner01.png",
+      title: "Gol Seguro",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    },
+    {
+      image: "/assets/img/home/Destacados/Banner02.png",
+      title: "Promo 2",
+      tags: "/destacados",
+      body: "",
+      summary_body: "",
+      summary_title: "",
+      groups_forbidden: [],
+      groups_allowed: [],
+      promotion: ""
+    }
   ];
   return /* @__PURE__ */ jsxs14(Container, { className: "oli-font", sx: { backgroundColor: "#121212", position: "relative", pb: 5 }, maxWidth: false, children: [
     /* @__PURE__ */ jsx18(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oraculo-ui",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -15,9 +15,9 @@
   },
   "peerDependencies": {
     "@mui/material": ">=5",
+    "@splidejs/react-splide": ">=0.7.0",
     "react": ">=18",
-    "react-dom": ">=18",
-    "@splidejs/react-splide": ">=0.7.0"
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@types/react": "^18.3.27",