oraculo-ui 0.1.7 → 0.1.9

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
+};

package/dist/chunk-PVY5Z3JS.mjs

@@ -0,0 +1,249 @@
+import {
+  OraculoButton
+} from "./chunk-IJQLK4NO.mjs";
+
+// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
+import Box2 from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography2 from "@mui/material/Typography";
+
+// src/molecules/OraculoLiveCasinoCard/OraculoLiveCasinoCard.tsx
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OraculoLiveCasinoCard = ({
+  logo,
+  provider,
+  providerName,
+  machine,
+  onClick
+}) => {
+  var _a;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      onClick,
+      sx: {
+        flex: "0 0 auto",
+        position: "relative",
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: { xs: 100, md: 180 },
+        height: { xs: 200, md: 380 },
+        transition: "width .50s ease, transform .28s ease",
+        willChange: "width, transform",
+        cursor: "pointer",
+        zIndex: 0,
+        "&:hover": {
+          zIndex: 2,
+          width: { md: 260, xs: 110 }
+        },
+        "&:hover .orc-live-provider-label": {
+          opacity: 1
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "img",
+            src: logo,
+            alt: `Juego ${machine != null ? machine : ""}`,
+            sx: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              display: "block"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "orc-live-provider-label",
+            sx: {
+              position: "absolute",
+              left: "50%",
+              top: { xs: "75%", md: "80%" },
+              transform: "translate(-50%, -50%)",
+              zIndex: 3,
+              opacity: 0,
+              transition: "opacity .25s ease",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              Typography,
+              {
+                sx: {
+                  color: "#fff",
+                  fontWeight: 700,
+                  fontSize: { xs: 11, md: 14 },
+                  textTransform: "capitalize"
+                },
+                children: (_a = provider != null ? provider : providerName) != null ? _a : ""
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoLiveCasinoCard_default = OraculoLiveCasinoCard;
+
+// src/organisms/OraculoSeccionCasinoEnVivo/OraculoSeccionCasinoEnVivo.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OraculoSeccionCasinoEnVivo = ({
+  items,
+  title = "Casino en vivo",
+  subtitle = "Disfruta la emoci\xF3n en tus juegos favoritos y gana en tiempo real.",
+  backgroundMobileUrl = "/assets/img/home/CasinoEnVivo/FondoMobile3.png",
+  backgroundDesktopUrl = "/assets/img/home/CasinoEnVivo/FondoDesktop3.png",
+  onCardClick,
+  onViewMore,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      className,
+      sx: {
+        position: "relative",
+        width: "100vw",
+        left: "50%",
+        right: "50%",
+        transform: "translateX(-50%)",
+        color: "white",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          Box2,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              backgroundImage: {
+                xs: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundMobileUrl}')
+            `,
+                md: `
+              linear-gradient(to bottom, #121212 0%, rgba(18,18,18,0) 10%),
+              linear-gradient(to top,    #121212 0%, rgba(18,18,18,0) 10%),
+              url('${backgroundDesktopUrl}')
+            `
+              },
+              backgroundSize: "cover",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              zIndex: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Box2,
+          {
+            sx: {
+              position: "relative",
+              zIndex: 1,
+              maxWidth: 1200,
+              height: { xs: "450px", md: "550px" },
+              mx: "auto",
+              px: { xs: 2.5, md: 6 },
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: { xs: "center", md: "center" },
+              justifyContent: "center",
+              gap: { xs: 0, md: 15 },
+              textAlign: { xs: "center", md: "left" }
+            },
+            children: [
+              /* @__PURE__ */ jsxs2(Stack, { spacing: 3, sx: { maxWidth: { md: 280 } }, children: [
+                /* @__PURE__ */ jsx2(
+                  Typography2,
+                  {
+                    variant: "h4",
+                    sx: {
+                      fontWeight: 800,
+                      fontSize: { xs: 24, md: 40 },
+                      WebkitTextStroke: "0.5px rgba(255, 255, 255, .5)",
+                      textShadow: "0 0 2px rgba(255, 255, 255, .95),0 0 4px rgba(255, 255, 255, .6),0 1px 0 #898989"
+                    },
+                    children: title
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  Typography2,
+                  {
+                    sx: {
+                      fontSize: { xs: 14, md: 18 },
+                      color: "rgba(255,255,255,0.9)",
+                      marginX: { xs: 4, md: 0 },
+                      lineHeight: 1.5
+                    },
+                    children: subtitle
+                  }
+                ),
+                /* @__PURE__ */ jsx2(Box2, { sx: { display: { xs: "none", md: "block" } }, children: /* @__PURE__ */ jsx2(
+                  OraculoButton,
+                  {
+                    variant: "primary",
+                    size: "md",
+                    onClick: () => onViewMore == null ? void 0 : onViewMore(),
+                    children: "Ver m\xE1s"
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx2(
+                Box2,
+                {
+                  sx: {
+                    display: "flex",
+                    gap: { xs: 2, md: 3 },
+                    justifyContent: "center",
+                    overflowX: { xs: "auto", md: "visible" },
+                    py: { xs: 3, md: 0 },
+                    alignItems: "center"
+                  },
+                  children: (items != null ? items : []).slice(0, 3).map((juego, idx) => {
+                    var _a, _b;
+                    return /* @__PURE__ */ jsx2(
+                      OraculoLiveCasinoCard_default,
+                      {
+                        logo: `https://olimpo.bet${(_b = juego.logo) != null ? _b : ""}`,
+                        provider: juego.provider,
+                        providerName: juego.web_name,
+                        machine: juego.machine,
+                        onClick: () => onCardClick == null ? void 0 : onCardClick(juego, idx)
+                      },
+                      (_a = juego.orden) != null ? _a : idx
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx2(Box2, { sx: { display: { xs: "block", md: "none" } }, children: /* @__PURE__ */ jsx2(
+                OraculoButton,
+                {
+                  variant: "primary",
+                  size: "lg",
+                  onClick: () => onViewMore == null ? void 0 : onViewMore(),
+                  children: "Ver m\xE1s"
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var OraculoSeccionCasinoEnVivo_default = OraculoSeccionCasinoEnVivo;
+
+export {
+  OraculoLiveCasinoCard_default,
+  OraculoSeccionCasinoEnVivo_default
+};