oraculo-ui 0.1.1 → 0.1.2

package/dist/index.css

@@ -214,3 +214,184 @@
     line-height: 26px;
   }
 }
+
+/* src/atoms/OraculoCarouselDots/OraculoCarouselDots.css */
+.orc-dots {
+  --dot-size: 8px;
+  --dot-cell: 20px;
+  --dot-active-h: 8px;
+  --dot-active-w: 20px;
+  --dot-bg: #ffffff;
+  --dot-surface: #ffffff;
+  --dot-accent: #9EE86E;
+  display: flex;
+  gap: 0px;
+  justify-content: center;
+  margin-top: 10px;
+}
+.orc-dots__cell {
+  width: var(--dot-cell);
+  display: inline-flex;
+  justify-content: center;
+}
+.orc-dots__dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: 9999px;
+  background: var(--dot-bg);
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+  position: relative;
+  transition:
+    transform .15s ease,
+    background .15s ease,
+    width .2s ease,
+    height .2s ease;
+}
+.orc-dots__dot:hover {
+  transform: scale(1.06);
+}
+.orc-dots__dot--active {
+  width: var(--dot-active-w);
+  height: var(--dot-active-h);
+  border-radius: 9999px;
+  background: #fff;
+  position: relative;
+  overflow: hidden;
+}
+.orc-dots__dot--active::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 40%;
+  background: var(--dot-accent);
+  border-radius: inherit;
+}
+.orc-dots__dot--active {
+  outline: 0;
+  outline-offset: 0;
+}
+.orc-dots__dot:focus-visible {
+  outline: 2px solid var(--dot-accent);
+  outline-offset: 2px;
+}
+
+/* src/organisms/OraculoSeccionClubOlimpo/OraculoSeccionClubOlimpo.css */
+.orc-co-wrap {
+  --orc-co-art-w: 887px;
+  --orc-co-art-h: 510px;
+  --orc-co-text: #ffffff;
+  --orc-co-art-left: clamp(120px, 18vw, 280px);
+  --orc-co-art-top: 20px;
+  --orc-co-logo-left: 163px;
+  --orc-co-logo-top: 120px;
+  --orc-co-logo-w: 220px;
+  --orc-co-content-left: 120px;
+  --orc-co-content-top: 290px;
+  min-height: var(--orc-co-minH, 520px);
+  position: relative;
+}
+.orc-co-fullBleed {
+  width: 100vw;
+  margin-left: 50%;
+  transform: translateX(-50%);
+}
+.orc-co-bottom {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 20px;
+  z-index: 2;
+  display: grid;
+  justify-items: center;
+  gap: 12px;
+  border-radius: 12px;
+}
+.orc-co-caption {
+  color: var(--orc-co-text);
+  font-size: 14px;
+  text-align: center;
+  font-weight: 400;
+  text-wrap: balance;
+  line-height: 1.4;
+}
+.orc-co-bgMobile {
+  position: relative;
+  width: 100%;
+  min-height: 360px;
+  overflow: hidden;
+}
+.orc-co-bgMobileImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.orc-co-bgDesktop,
+.orc-co-logo,
+.orc-co-desktopContent {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .orc-co-bgMobile {
+    display: none;
+  }
+  .orc-co-bottom {
+    display: none;
+  }
+  .orc-co-bgDesktop {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    display: block;
+  }
+  .orc-co-bgDesktop > .orc-co-fillHost {
+    position: absolute;
+    width: var(--orc-co-art-w);
+    height: var(--orc-co-art-h);
+    top: var(--orc-co-art-top);
+    left: var(--orc-co-art-left);
+  }
+  .orc-co-bgDesktopImg {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .orc-co-logo {
+    display: block;
+    position: absolute;
+    left: var(--orc-co-logo-left);
+    top: var(--orc-co-logo-top);
+    width: var(--orc-co-logo-w);
+    aspect-ratio: 3 / 2;
+    z-index: 2;
+  }
+  .orc-co-logoImg {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    display: block;
+  }
+  .orc-co-desktopContent {
+    display: grid;
+    position: absolute;
+    left: var(--orc-co-content-left);
+    top: var(--orc-co-content-top);
+    gap: 16px;
+    justify-items: center;
+    text-align: center;
+    z-index: 2;
+  }
+  .orc-co-captionDesktop {
+    margin: 0;
+    color: var(--orc-co-text);
+    font-family: var(--clmc-font, inherit);
+    font-weight: 400;
+    font-size: clamp(14px, 1.5vw, 18px);
+    max-width: 28ch;
+    text-wrap: balance;
+  }
+}

package/dist/index.d.mts

@@ -29,6 +29,14 @@ interface OraculoSectionTitleProps {
 }
 declare function OraculoSectionTitle({ title, iconUrl, size, className, }: OraculoSectionTitleProps): react_jsx_runtime.JSX.Element;
 
+interface OraculoCarouselDotsProps {
+    total: number;
+    active: number;
+    onSelect?: (index: number) => void;
+    className?: string;
+}
+declare const OraculoCarouselDots: React.FC<OraculoCarouselDotsProps>;
+
 interface OraculoCarouselOptions {
     type?: string;
     perPage?: number;
@@ -109,6 +117,32 @@ interface OraculoGameSlideProps {
 }
 declare const OraculoGameSlide: React.FC<OraculoGameSlideProps>;
 
+interface OraculoWelcomeBannerProps {
+    title?: string;
+    amount?: string;
+    subtitle?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+    backgroundImage?: string;
+    alt?: string;
+    className?: string;
+    /** Tamaño en desktop: "small" (456x272) o "large" (618x346) */
+    variant?: "small" | "large";
+}
+declare const OraculoWelcomeBanner: React.FC<OraculoWelcomeBannerProps>;
+
+interface OraculoClubOlimpoVisualProps {
+    text: string;
+    buttonLabel?: string;
+    onClick?: () => void;
+    imgAlt?: string;
+    imgSrcMobile: string;
+    imgSrcDesktopBg?: string;
+    imgSrcDesktopLogo?: string;
+    priority?: boolean;
+}
+declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
+
 interface OraculoDestacadoItem {
     id?: string | number;
     src: string;
@@ -219,4 +253,37 @@ interface OraculoSeccionVirtualesProps {
 }
 declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem };
+interface OraculoSeccionBonoBienvenidaProps {
+    /** Título principal, admite salto con "\n" para dos líneas */
+    headline?: string;
+    items: OraculoWelcomeBannerProps[];
+    /** Fondo de la sección (full width) */
+    backgroundImageUrl?: string;
+}
+declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoBienvenidaProps>;
+
+type OraculoClubOlimpoItem = {
+    text: string;
+    imgAlt: string;
+    images: {
+        mobile: string;
+        desktopBg: string;
+        desktopLogo: string;
+    };
+    onClick?: () => void;
+    priority?: boolean;
+};
+interface OraculoSeccionClubOlimpoProps {
+    className?: string;
+    /** Si true, hace el efecto full-bleed (100vw centrado) */
+    fullBleed?: boolean;
+    /** Lista de variantes (puedes pasar 1 o varias). */
+    items: OraculoClubOlimpoItem[];
+    /** Índice del item a mostrar si pasas varios. */
+    selectedIndex?: number;
+    /** aria-label de la sección (fallback al imgAlt del item seleccionado). */
+    ariaLabel?: string;
+}
+declare const OraculoSeccionClubOlimpo: React.FC<OraculoSeccionClubOlimpoProps>;
+
+export { OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoClubOlimpoItem, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoBienvenidaProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoProps, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };

package/dist/index.d.ts

@@ -29,6 +29,14 @@ interface OraculoSectionTitleProps {
 }
 declare function OraculoSectionTitle({ title, iconUrl, size, className, }: OraculoSectionTitleProps): react_jsx_runtime.JSX.Element;
 
+interface OraculoCarouselDotsProps {
+    total: number;
+    active: number;
+    onSelect?: (index: number) => void;
+    className?: string;
+}
+declare const OraculoCarouselDots: React.FC<OraculoCarouselDotsProps>;
+
 interface OraculoCarouselOptions {
     type?: string;
     perPage?: number;
@@ -109,6 +117,32 @@ interface OraculoGameSlideProps {
 }
 declare const OraculoGameSlide: React.FC<OraculoGameSlideProps>;
 
+interface OraculoWelcomeBannerProps {
+    title?: string;
+    amount?: string;
+    subtitle?: string;
+    buttonText?: string;
+    onButtonClick?: () => void;
+    backgroundImage?: string;
+    alt?: string;
+    className?: string;
+    /** Tamaño en desktop: "small" (456x272) o "large" (618x346) */
+    variant?: "small" | "large";
+}
+declare const OraculoWelcomeBanner: React.FC<OraculoWelcomeBannerProps>;
+
+interface OraculoClubOlimpoVisualProps {
+    text: string;
+    buttonLabel?: string;
+    onClick?: () => void;
+    imgAlt?: string;
+    imgSrcMobile: string;
+    imgSrcDesktopBg?: string;
+    imgSrcDesktopLogo?: string;
+    priority?: boolean;
+}
+declare const OraculoClubOlimpoVisual: React.FC<OraculoClubOlimpoVisualProps>;
+
 interface OraculoDestacadoItem {
     id?: string | number;
     src: string;
@@ -219,4 +253,37 @@ interface OraculoSeccionVirtualesProps {
 }
 declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem };
+interface OraculoSeccionBonoBienvenidaProps {
+    /** Título principal, admite salto con "\n" para dos líneas */
+    headline?: string;
+    items: OraculoWelcomeBannerProps[];
+    /** Fondo de la sección (full width) */
+    backgroundImageUrl?: string;
+}
+declare const OraculoSeccionBonoBienvenida: React.FC<OraculoSeccionBonoBienvenidaProps>;
+
+type OraculoClubOlimpoItem = {
+    text: string;
+    imgAlt: string;
+    images: {
+        mobile: string;
+        desktopBg: string;
+        desktopLogo: string;
+    };
+    onClick?: () => void;
+    priority?: boolean;
+};
+interface OraculoSeccionClubOlimpoProps {
+    className?: string;
+    /** Si true, hace el efecto full-bleed (100vw centrado) */
+    fullBleed?: boolean;
+    /** Lista de variantes (puedes pasar 1 o varias). */
+    items: OraculoClubOlimpoItem[];
+    /** Índice del item a mostrar si pasas varios. */
+    selectedIndex?: number;
+    /** aria-label de la sección (fallback al imgAlt del item seleccionado). */
+    ariaLabel?: string;
+}
+declare const OraculoSeccionClubOlimpo: React.FC<OraculoSeccionClubOlimpoProps>;
+
+export { OraculoButton, type OraculoButtonProps, OraculoCarousel, OraculoCarouselDots, type OraculoCarouselDotsProps, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoClubOlimpoItem, OraculoClubOlimpoVisual, type OraculoClubOlimpoVisualProps, type OraculoDestacadoItem, OraculoGameCard, type OraculoGameCardProps, type OraculoGameItem, OraculoGameRankCard, type OraculoGameRankCardProps, type OraculoGameRankCardSizes, OraculoGameSlide, type OraculoGameSlideItem, type OraculoGameSlideProps, OraculoLiveCasinoCard, type OraculoLiveCasinoCardProps, type OraculoLiveCasinoItem, OraculoSeccionBonoBienvenida, type OraculoSeccionBonoBienvenidaProps, OraculoSeccionCasino, OraculoSeccionCasinoEnVivo, type OraculoSeccionCasinoEnVivoProps, type OraculoSeccionCasinoProps, OraculoSeccionClubOlimpo, type OraculoSeccionClubOlimpoProps, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSeccionTopJuegos, type OraculoSeccionTopJuegosProps, OraculoSeccionVirtuales, type OraculoSeccionVirtualesProps, OraculoSectionTitle, type OraculoSectionTitleProps, type OraculoTopJuegoItem, OraculoWelcomeBanner, type OraculoWelcomeBannerProps };