oraculo-ui 0.1.13 → 0.1.15

package/dist/chunk-4LBAYKDQ.mjs

@@ -1,475 +0,0 @@
-import {
-  OraculoButton
-} from "./chunk-IJQLK4NO.mjs";
-
-// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-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 as jsx2, 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__ */ jsx2(
-          Box,
-          {
-            sx: {
-              position: "relative",
-              width: "100%",
-              aspectRatio: {
-                xs: "328 / 188",
-                lg: isLarge ? "618 / 346" : "456 / 272"
-              },
-              borderRadius: "14px",
-              overflow: "hidden"
-            },
-            children: /* @__PURE__ */ jsx2(
-              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__ */ jsx2(
-          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__ */ jsx2(
-                    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__ */ jsx2(
-                          Box,
-                          {
-                            component: "span",
-                            sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 },
-                            children: symbol
-                          }
-                        ),
-                        /* @__PURE__ */ jsx2(
-                          Box,
-                          {
-                            component: "span",
-                            sx: { fontSize: { xs: 52, lg: 77 } },
-                            children: value
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  subtitle && /* @__PURE__ */ jsx2(
-                    Typography,
-                    {
-                      sx: {
-                        pb: "20px",
-                        fontSize: 14,
-                        fontWeight: 600,
-                        color: "#e7f8ff"
-                      },
-                      children: subtitle
-                    }
-                  ),
-                  buttonText && /* @__PURE__ */ jsx2(OraculoButton, { onClick: onButtonClick, children: buttonText })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-};
-var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
-
-// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
-import { jsx as jsx3 } 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__ */ 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",
-      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 jsx4, 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 = useRef2(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__ */ jsx4(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
-            hl2 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-              /* @__PURE__ */ jsx4("br", {}),
-              /* @__PURE__ */ jsx4(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs2(Box2, { children: [
-            /* @__PURE__ */ jsx4(
-              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__ */ jsx4(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
-                onMove: ({ index, isStart, isEnd }) => {
-                  setNavState({ isStart, isEnd });
-                  setActiveIndex(index);
-                }
-              }
-            ),
-            showDots && /* @__PURE__ */ jsx4(
-              OraculoCarouselDots_default,
-              {
-                total: items.length,
-                active: activeIndex,
-                onSelect: (i) => {
-                  var _a;
-                  setActiveIndex(i);
-                  (_a = carouselRef.current) == null ? void 0 : _a.go(i);
-                }
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx4(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__ */ jsx4(
-          Box2,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-start",
-              minHeight: "100%"
-            },
-            children: /* @__PURE__ */ jsxs2(
-              Box2,
-              {
-                sx: {
-                  ...headlineBaseSx,
-                  textAlign: "left",
-                  mb: 0
-                },
-                children: [
-                  hl1 && /* @__PURE__ */ jsx4(Typography2, { component: "span", sx: hlTopSx, children: hl1 }),
-                  hl2 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-                    /* @__PURE__ */ jsx4("br", {}),
-                    /* @__PURE__ */ jsx4(Typography2, { component: "span", sx: hlBottomSx, children: hl2 })
-                  ] })
-                ]
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx4(
-          Box2,
-          {
-            sx: {
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              flexWrap: "nowrap",
-              gap: 4
-            },
-            children: items.map((it, idx) => /* @__PURE__ */ jsx4(
-              OraculoWelcomeBanner_default,
-              {
-                onButtonClick: it.onButtonClick,
-                ...it
-              },
-              idx
-            ))
-          }
-        )
-      ]
-    }
-  ) });
-};
-var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
-
-export {
-  OraculoCarouselDots_default,
-  OraculoCarousel_default,
-  OraculoWelcomeBanner_default,
-  OraculoSeccionBonoBienvenida_default
-};