oraculo-ui 0.1.7 → 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: {
@@ -275,6 +280,7 @@ interface parametros {
     casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
     virtuales: OraculoSeccionVirtualesProps;
     clubOlimpo: OraculoSeccionClubOlimpoItem;
+    destacados: OraculoSeccionDestacadosProps;
 }
 declare function OraculoPageLanding({ props }: {
     props: parametros;

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: {
@@ -275,6 +280,7 @@ interface parametros {
     casinoEnVivo: OraculoSeccionCasinoEnVivoProps;
     virtuales: OraculoSeccionVirtualesProps;
     clubOlimpo: OraculoSeccionClubOlimpoItem;
+    destacados: OraculoSeccionDestacadosProps;
 }
 declare function OraculoPageLanding({ props }: {
     props: parametros;

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);
+      })
     }
   );
 };
@@ -1729,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 = [

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);
+      })
     }
   );
 };
@@ -1686,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 = [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oraculo-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",