oraculo-ui 0.1.14 → 0.1.16

package/dist/chunk-YWS57247.mjs

@@ -1,449 +0,0 @@
-import {
-  OraculoButton
-} from "./chunk-DHENVY2Z.mjs";
-
-// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-import React4, { 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 React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef
-} from "react";
-import {
-  Splide as SplideRaw,
-  SplideSlide as SplideSlideRaw
-} from "@splidejs/react-splide";
-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__ */ React.createElement("div", { className, style: { width: "100%" } }, /* @__PURE__ */ React.createElement(
-      Splide,
-      {
-        ref: splideRef,
-        options: mergedOptions,
-        onMove: handleMove,
-        onMounted: handleMounted
-      },
-      items.map((item, index) => {
-        var _a;
-        return /* @__PURE__ */ React.createElement(SplideSlide, { key: (_a = item.id) != null ? _a : index }, renderItem(item, index));
-      })
-    ));
-  }
-);
-var OraculoCarousel_default = OraculoCarousel;
-
-// src/molecules/OraculoWelcomeBanner/OraculoWelcomeBanner.tsx
-import React2 from "react";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-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__ */ React2.createElement(
-    Box,
-    {
-      className,
-      sx: {
-        position: "relative",
-        width: "100%",
-        maxWidth: {
-          xs: 328,
-          lg: isLarge ? 618 : 456
-        },
-        mx: "auto"
-      }
-    },
-    backgroundImage && /* @__PURE__ */ React2.createElement(
-      Box,
-      {
-        sx: {
-          position: "relative",
-          width: "100%",
-          aspectRatio: {
-            xs: "328 / 188",
-            lg: isLarge ? "618 / 346" : "456 / 272"
-          },
-          borderRadius: "14px",
-          overflow: "hidden"
-        }
-      },
-      /* @__PURE__ */ React2.createElement(
-        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__ */ React2.createElement(
-      Box,
-      {
-        sx: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          color: "#e7f8ff",
-          textAlign: "center",
-          pl: "14%",
-          pr: { xs: "14%", lg: "15%" }
-        }
-      },
-      /* @__PURE__ */ React2.createElement(
-        Box,
-        {
-          sx: {
-            maxWidth: "60%",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center"
-          }
-        },
-        title && /* @__PURE__ */ React2.createElement(
-          Typography,
-          {
-            sx: {
-              fontSize: { xs: 12, lg: 20 },
-              fontWeight: 400,
-              color: "#e7f8ff"
-            }
-          },
-          title
-        ),
-        amount && /* @__PURE__ */ React2.createElement(
-          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"
-            }
-          },
-          /* @__PURE__ */ React2.createElement(
-            Box,
-            {
-              component: "span",
-              sx: { fontSize: { xs: 35, lg: 48 }, mr: 0.5 }
-            },
-            symbol
-          ),
-          /* @__PURE__ */ React2.createElement(
-            Box,
-            {
-              component: "span",
-              sx: { fontSize: { xs: 52, lg: 77 } }
-            },
-            value
-          )
-        ),
-        subtitle && /* @__PURE__ */ React2.createElement(
-          Typography,
-          {
-            sx: {
-              pb: "20px",
-              fontSize: 14,
-              fontWeight: 600,
-              color: "#e7f8ff"
-            }
-          },
-          subtitle
-        ),
-        buttonText && /* @__PURE__ */ React2.createElement(OraculoButton, { onClick: onButtonClick }, buttonText)
-      )
-    )
-  );
-};
-var OraculoWelcomeBanner_default = OraculoWelcomeBanner;
-
-// src/atoms/OraculoCarouselDots/OraculoCarouselDots.tsx
-import React3 from "react";
-var OraculoCarouselDots = ({
-  total,
-  active,
-  onSelect,
-  className = ""
-}) => {
-  if (total <= 1) return null;
-  const rootClass = ["orc-dots", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React3.createElement("div", { className: rootClass, role: "tablist" }, Array.from({ length: total }).map((_, i) => /* @__PURE__ */ React3.createElement("span", { key: i, className: "orc-dots__cell" }, /* @__PURE__ */ React3.createElement(
-    "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)
-    }
-  ))));
-};
-var OraculoCarouselDots_default = OraculoCarouselDots;
-
-// src/organisms/OraculoSeccionBonoBienvenida/OraculoSeccionBonoBienvenida.tsx
-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__ */ React4.createElement(
-      Box2,
-      {
-        component: "section",
-        sx: {
-          ...sectionSx,
-          textAlign: "center"
-        }
-      },
-      (hl1 || hl2) && /* @__PURE__ */ React4.createElement(Box2, { sx: headlineBaseSx }, hl1 && /* @__PURE__ */ React4.createElement(Typography2, { component: "span", sx: hlTopSx }, hl1), hl2 && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Typography2, { component: "span", sx: hlBottomSx }, hl2))),
-      /* @__PURE__ */ React4.createElement(Box2, null, /* @__PURE__ */ React4.createElement(
-        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__ */ React4.createElement(OraculoWelcomeBanner_default, { ...it, onButtonClick: items[0].onButtonClick }),
-          onMove: ({ index, isStart, isEnd }) => {
-            setNavState({ isStart, isEnd });
-            setActiveIndex(index);
-          }
-        }
-      ), showDots && /* @__PURE__ */ React4.createElement(
-        OraculoCarouselDots_default,
-        {
-          total: items.length,
-          active: activeIndex,
-          onSelect: (i) => {
-            var _a;
-            setActiveIndex(i);
-            (_a = carouselRef.current) == null ? void 0 : _a.go(i);
-          }
-        }
-      ))
-    );
-  }
-  return /* @__PURE__ */ React4.createElement(Box2, { component: "section", sx: sectionSx }, /* @__PURE__ */ React4.createElement(
-    Box2,
-    {
-      sx: {
-        maxWidth: 1200,
-        mx: 5,
-        px: 2,
-        display: "grid",
-        gridTemplateColumns: "200px auto",
-        alignItems: "center"
-      }
-    },
-    (hl1 || hl2) && /* @__PURE__ */ React4.createElement(
-      Box2,
-      {
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          minHeight: "100%"
-        }
-      },
-      /* @__PURE__ */ React4.createElement(
-        Box2,
-        {
-          sx: {
-            ...headlineBaseSx,
-            textAlign: "left",
-            mb: 0
-          }
-        },
-        hl1 && /* @__PURE__ */ React4.createElement(Typography2, { component: "span", sx: hlTopSx }, hl1),
-        hl2 && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("br", null), /* @__PURE__ */ React4.createElement(Typography2, { component: "span", sx: hlBottomSx }, hl2))
-      )
-    ),
-    /* @__PURE__ */ React4.createElement(
-      Box2,
-      {
-        sx: {
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          flexWrap: "nowrap",
-          gap: 4
-        }
-      },
-      items.map((it, idx) => /* @__PURE__ */ React4.createElement(
-        OraculoWelcomeBanner_default,
-        {
-          key: idx,
-          onButtonClick: it.onButtonClick,
-          ...it
-        }
-      ))
-    )
-  ));
-};
-var OraculoSeccionBonoBienvenida_default = OraculoSeccionBonoBienvenida;
-
-export {
-  OraculoCarouselDots_default,
-  OraculoCarousel_default,
-  OraculoWelcomeBanner_default,
-  OraculoSeccionBonoBienvenida_default
-};