oraculo-ui 0.1.8 → 0.1.10

package/dist/chunk-4LBAYKDQ.mjs

@@ -0,0 +1,475 @@
+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
+};

package/dist/chunk-IJQLK4NO.mjs

@@ -0,0 +1,73 @@
+// src/atoms/OraculoButton/OraculoButton.tsx
+import { Link as MuiLink } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OraculoButton({
+  children,
+  onClick,
+  href,
+  target,
+  rel,
+  type = "button",
+  disabled = false,
+  variant = "primary",
+  size,
+  fullWidth = false,
+  fullHeight = false,
+  className = "",
+  ariaLabel,
+  leftIcon,
+  rightIcon,
+  iconOnly
+}) {
+  const hasText = !!children && children !== true;
+  const hasLeft = !!leftIcon;
+  const hasRight = !!rightIcon;
+  const onlyOneIcon = (hasLeft ? 1 : 0) + (hasRight ? 1 : 0) === 1;
+  const isIconOnly = iconOnly != null ? iconOnly : onlyOneIcon && !hasText;
+  const cls = [
+    "orc-btn",
+    variant === "secondary" ? "orc-btn--secondary" : variant === "tertiary" ? "orc-btn--tertiary" : "orc-btn--primary",
+    size ? `orc-btn--${size}` : "",
+    fullWidth ? "orc-btn--full" : "",
+    fullHeight ? "orc-btn--fullHeight" : "",
+    isIconOnly ? "orc-btn--iconOnly" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    leftIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: leftIcon }),
+    !isIconOnly && /* @__PURE__ */ jsx("span", { className: "orc-btn__label", children }),
+    rightIcon && /* @__PURE__ */ jsx("span", { className: "orc-btn__icon", children: rightIcon })
+  ] });
+  const ariaDisabled = disabled ? true : void 0;
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      MuiLink,
+      {
+        href,
+        target,
+        rel,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        tabIndex: ariaDisabled ? -1 : void 0,
+        className: cls,
+        onClick: ariaDisabled ? (e) => e.preventDefault() : onClick,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      onClick,
+      disabled: !!ariaDisabled,
+      "aria-label": ariaLabel,
+      className: cls,
+      children: content
+    }
+  );
+}
+
+export {
+  OraculoButton
+};