oraculo-ui 0.1.9 → 0.1.11

package/dist/{chunk-WPLILXPP.mjs → chunk-4LBAYKDQ.mjs}

@@ -1,20 +1,105 @@
-import {
-  OraculoCarousel_default
-} from "./chunk-VHW77D2M.mjs";
 import {
   OraculoButton
 } from "./chunk-IJQLK4NO.mjs";
 
 // src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-import { useRef, useState } from "react";
+import { useRef as useRef2, useState } from "react";
 import Box2 from "@mui/material/Box";
 import Typography2 from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
+// 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;
+
 // src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var OraculoWelcomeBanner = ({
   title,
   amount,
@@ -43,7 +128,7 @@ var OraculoWelcomeBanner = ({
         mx: "auto"
       },
       children: [
-        backgroundImage && /* @__PURE__ */ jsx(
+        backgroundImage && /* @__PURE__ */ jsx2(
           Box,
           {
             sx: {
@@ -56,7 +141,7 @@ var OraculoWelcomeBanner = ({
               borderRadius: "14px",
               overflow: "hidden"
             },
-            children: /* @__PURE__ */ jsx(
+            children: /* @__PURE__ */ jsx2(
               Box,
               {
                 component: "img",
@@ -76,7 +161,7 @@ var OraculoWelcomeBanner = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           Box,
           {
             sx: {
@@ -100,7 +185,7 @@ var OraculoWelcomeBanner = ({
                   alignItems: "center"
                 },
                 children: [
-                  title && /* @__PURE__ */ jsx(
+                  title && /* @__PURE__ */ jsx2(
                     Typography,
                     {
                       sx: {
@@ -129,7 +214,7 @@ var OraculoWelcomeBanner = ({
                         justifyContent: "center"
                       },
                       children: [
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2(
                           Box,
                           {
                             component: "span",
@@ -137,7 +222,7 @@ var OraculoWelcomeBanner = ({
                             children: symbol
                           }
                         ),
-                        /* @__PURE__ */ jsx(
+                        /* @__PURE__ */ jsx2(
                           Box,
                           {
                             component: "span",
@@ -148,7 +233,7 @@ var OraculoWelcomeBanner = ({
                       ]
                     }
                   ),
-                  subtitle && /* @__PURE__ */ jsx(
+                  subtitle && /* @__PURE__ */ jsx2(
                     Typography,
                     {
                       sx: {
@@ -160,7 +245,7 @@ var OraculoWelcomeBanner = ({
                       children: subtitle
                     }
                   ),
-                  buttonText && /* @__PURE__ */ jsx(OraculoButton, { onClick: onButtonClick, children: buttonText })
+                  buttonText && /* @__PURE__ */ jsx2(OraculoButton, { onClick: onButtonClick, children: buttonText })
                 ]
               }
             )
@@ -173,7 +258,7 @@ var OraculoWelcomeBanner = ({
 var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
 
 // src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var OraculoCarouselDots = ({
   total,
   active,
@@ -182,7 +267,7 @@ var OraculoCarouselDots = ({
 }) => {
   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(
+  return /* @__PURE__ */ jsx3("div", { className: rootClass, role: "tablist", children: Array.from({ length: total }).map((_, i) => /* @__PURE__ */ jsx3("span", { className: "orc-dots__cell", children: /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -197,7 +282,7 @@ var OraculoCarouselDots = ({
 var OraculoCarouselDots_default = OraculoCarouselDots;
 
 // src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var buildSectionSx = (bgUrl) => ({
   width: "100vw",
   position: "relative",
@@ -249,7 +334,7 @@ var OraculoSeccionBonoBienvenida = ({
   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 carouselRef = useRef2(null);
   const [navState, setNavState] = useState({ isStart: true, isEnd: false });
   const [activeIndex, setActiveIndex] = useState(0);
   if (isMobile) {
@@ -263,14 +348,14 @@ var OraculoSeccionBonoBienvenida = ({
         },
         children: [
           (hl1 || hl2) && /* @__PURE__ */ jsxs2(Box2, { sx: headlineBaseSx, children: [
-            hl1 && /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
+            hl1 && /* @__PURE__ */ jsx4(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__ */ jsx4("br", {}),
+              /* @__PURE__ */ jsx4(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
             ] })
           ] }),
           /* @__PURE__ */ jsxs2(Box2, { children: [
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               OraculoCarousel_default,
               {
                 ref: carouselRef,
@@ -292,14 +377,14 @@ var OraculoSeccionBonoBienvenida = ({
                 options: {
                   autoWidth: false
                 },
-                renderItem: (it) => /* @__PURE__ */ jsx3(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
+                renderItem: (it) => /* @__PURE__ */ jsx4(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
                 onMove: ({ index, isStart, isEnd }) => {
                   setNavState({ isStart, isEnd });
                   setActiveIndex(index);
                 }
               }
             ),
-            showDots && /* @__PURE__ */ jsx3(
+            showDots && /* @__PURE__ */ jsx4(
               OraculoCarouselDots_default,
               {
                 total: items.length,
@@ -316,7 +401,7 @@ var OraculoSeccionBonoBienvenida = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(Box2, { component: "section", sx: sectionSx, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx4(Box2, { component: "section", sx: sectionSx, children: /* @__PURE__ */ jsxs2(
     Box2,
     {
       sx: {
@@ -328,7 +413,7 @@ var OraculoSeccionBonoBienvenida = ({
         alignItems: "center"
       },
       children: [
-        (hl1 || hl2) && /* @__PURE__ */ jsx3(
+        (hl1 || hl2) && /* @__PURE__ */ jsx4(
           Box2,
           {
             sx: {
@@ -346,17 +431,17 @@ var OraculoSeccionBonoBienvenida = ({
                   mb: 0
                 },
                 children: [
-                  hl1 && /* @__PURE__ */ jsx3(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
+                  hl1 && /* @__PURE__ */ jsx4(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__ */ jsx4("br", {}),
+                    /* @__PURE__ */ jsx4(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
                   ] })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           Box2,
           {
             sx: {
@@ -366,7 +451,7 @@ var OraculoSeccionBonoBienvenida = ({
               flexWrap: "nowrap",
               gap: 4
             },
-            children: items.map((it, idx) => /* @__PURE__ */ jsx3(
+            children: items.map((it, idx) => /* @__PURE__ */ jsx4(
               OraculoWelcomeBanner_default,
               {
                 onButtonClick: it.onButtonClick,
@@ -384,6 +469,7 @@ var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
 
 export {
   OraculoCarouselDots_default,
+  OraculoCarousel_default,
   OraculoWelcomeBanner_default,
   OraculoSeccionBonoBienvenida_default
 };