oraculo-ui 0.1.0 → 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;
@@ -64,6 +72,77 @@ interface OraculoCarouselProps<T = any> {
 }
 declare const OraculoCarousel: React.ForwardRefExoticComponent<OraculoCarouselProps<any> & React.RefAttributes<OraculoCarouselRef>>;
 
+type SizeOpt = {
+    w: number;
+    h: number;
+    r?: number;
+    font?: number;
+};
+interface OraculoGameRankCardSizes {
+    xs: SizeOpt;
+    md: SizeOpt;
+}
+interface OraculoGameRankCardProps {
+    imageUrl: string;
+    orden?: number;
+    onClick?: () => void;
+    sizes?: OraculoGameRankCardSizes;
+}
+declare function OraculoGameRankCard({ imageUrl, orden, onClick, sizes, }: OraculoGameRankCardProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoLiveCasinoCardProps {
+    logo: string;
+    provider?: string;
+    providerName?: string;
+    machine?: number | string;
+    onClick?: () => void;
+}
+declare const OraculoLiveCasinoCard: React.FC<OraculoLiveCasinoCardProps>;
+
+interface OraculoGameCardProps {
+    imageUrl: string;
+    onClick?: () => void;
+    size?: "lg" | "sm";
+}
+declare const OraculoGameCard: React.FC<OraculoGameCardProps>;
+
+interface OraculoGameSlideItem {
+    id: string | number;
+    imageUrl: string;
+}
+interface OraculoGameSlideProps {
+    items: OraculoGameSlideItem[];
+    layout?: "mosaic" | "grid";
+    onClick?: (item: OraculoGameSlideItem) => void;
+}
+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;
@@ -78,4 +157,133 @@ interface OraculoSeccionDestacadosProps {
 }
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSectionTitle, type OraculoSectionTitleProps };
+interface OraculoTopJuegoItem {
+    orden?: number;
+    logo?: string;
+    machine?: number | string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    background?: string;
+    rtp?: number;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionTopJuegosProps {
+    items: OraculoTopJuegoItem[];
+    title?: string;
+    iconUrl?: string;
+    onCardClick?: (juego: OraculoTopJuegoItem, index: number) => void;
+    className?: string;
+}
+declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, className, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoLiveCasinoItem {
+    machine?: number | string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    logo?: string;
+    background?: string;
+    rtp?: number;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionCasinoEnVivoProps {
+    items: OraculoLiveCasinoItem[];
+    title?: string;
+    subtitle?: string;
+    backgroundMobileUrl?: string;
+    backgroundDesktopUrl?: string;
+    onCardClick?: (juego: OraculoLiveCasinoItem, index: number) => void;
+    onViewMore?: () => void;
+    className?: string;
+}
+declare const OraculoSeccionCasinoEnVivo: React.FC<OraculoSeccionCasinoEnVivoProps>;
+
+interface OraculoGameItem {
+    id?: string | number;
+    machine?: number | string;
+    logo?: string;
+    imageUrl?: string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    background?: string;
+    rtp?: number | null;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionCasinoProps {
+    items: OraculoGameItem[];
+    title?: string;
+    iconUrl?: string;
+    onItemClick?: (game: OraculoGameItem) => void;
+    onViewMore?: () => void;
+    mosaicFirst?: boolean;
+    gridSize?: number;
+    className?: string;
+}
+declare const OraculoSeccionCasino: React.FC<OraculoSeccionCasinoProps>;
+
+interface OraculoSeccionVirtualesProps {
+    items: OraculoGameItem[];
+    title?: string;
+    iconUrl?: string;
+    onItemClick?: (game: OraculoGameItem) => void;
+    onViewMore?: () => void;
+    mosaicFirst?: boolean;
+    gridSize?: number;
+    className?: string;
+}
+declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
+
+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;
@@ -64,6 +72,77 @@ interface OraculoCarouselProps<T = any> {
 }
 declare const OraculoCarousel: React.ForwardRefExoticComponent<OraculoCarouselProps<any> & React.RefAttributes<OraculoCarouselRef>>;
 
+type SizeOpt = {
+    w: number;
+    h: number;
+    r?: number;
+    font?: number;
+};
+interface OraculoGameRankCardSizes {
+    xs: SizeOpt;
+    md: SizeOpt;
+}
+interface OraculoGameRankCardProps {
+    imageUrl: string;
+    orden?: number;
+    onClick?: () => void;
+    sizes?: OraculoGameRankCardSizes;
+}
+declare function OraculoGameRankCard({ imageUrl, orden, onClick, sizes, }: OraculoGameRankCardProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoLiveCasinoCardProps {
+    logo: string;
+    provider?: string;
+    providerName?: string;
+    machine?: number | string;
+    onClick?: () => void;
+}
+declare const OraculoLiveCasinoCard: React.FC<OraculoLiveCasinoCardProps>;
+
+interface OraculoGameCardProps {
+    imageUrl: string;
+    onClick?: () => void;
+    size?: "lg" | "sm";
+}
+declare const OraculoGameCard: React.FC<OraculoGameCardProps>;
+
+interface OraculoGameSlideItem {
+    id: string | number;
+    imageUrl: string;
+}
+interface OraculoGameSlideProps {
+    items: OraculoGameSlideItem[];
+    layout?: "mosaic" | "grid";
+    onClick?: (item: OraculoGameSlideItem) => void;
+}
+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;
@@ -78,4 +157,133 @@ interface OraculoSeccionDestacadosProps {
 }
 declare function OraculoSeccionDestacados({ items, title, iconUrl, onViewMore, className, }: OraculoSeccionDestacadosProps): react_jsx_runtime.JSX.Element;
 
-export { OraculoButton, type OraculoButtonProps, OraculoCarousel, type OraculoCarouselOptions, type OraculoCarouselProps, type OraculoCarouselRef, type OraculoDestacadoItem, OraculoSeccionDestacados, type OraculoSeccionDestacadosProps, OraculoSectionTitle, type OraculoSectionTitleProps };
+interface OraculoTopJuegoItem {
+    orden?: number;
+    logo?: string;
+    machine?: number | string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    background?: string;
+    rtp?: number;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionTopJuegosProps {
+    items: OraculoTopJuegoItem[];
+    title?: string;
+    iconUrl?: string;
+    onCardClick?: (juego: OraculoTopJuegoItem, index: number) => void;
+    className?: string;
+}
+declare function OraculoSeccionTopJuegos({ items, title, iconUrl, onCardClick, className, }: OraculoSeccionTopJuegosProps): react_jsx_runtime.JSX.Element;
+
+interface OraculoLiveCasinoItem {
+    machine?: number | string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    logo?: string;
+    background?: string;
+    rtp?: number;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionCasinoEnVivoProps {
+    items: OraculoLiveCasinoItem[];
+    title?: string;
+    subtitle?: string;
+    backgroundMobileUrl?: string;
+    backgroundDesktopUrl?: string;
+    onCardClick?: (juego: OraculoLiveCasinoItem, index: number) => void;
+    onViewMore?: () => void;
+    className?: string;
+}
+declare const OraculoSeccionCasinoEnVivo: React.FC<OraculoSeccionCasinoEnVivoProps>;
+
+interface OraculoGameItem {
+    id?: string | number;
+    machine?: number | string;
+    logo?: string;
+    imageUrl?: string;
+    name?: string;
+    web_name?: string;
+    provider?: string;
+    sub_provider?: string;
+    external_id?: string;
+    type?: string;
+    tags?: string;
+    lobby_tag?: string | null;
+    background?: string;
+    rtp?: number | null;
+    demo_allowed?: boolean;
+    gaming_session_required?: boolean;
+}
+interface OraculoSeccionCasinoProps {
+    items: OraculoGameItem[];
+    title?: string;
+    iconUrl?: string;
+    onItemClick?: (game: OraculoGameItem) => void;
+    onViewMore?: () => void;
+    mosaicFirst?: boolean;
+    gridSize?: number;
+    className?: string;
+}
+declare const OraculoSeccionCasino: React.FC<OraculoSeccionCasinoProps>;
+
+interface OraculoSeccionVirtualesProps {
+    items: OraculoGameItem[];
+    title?: string;
+    iconUrl?: string;
+    onItemClick?: (game: OraculoGameItem) => void;
+    onViewMore?: () => void;
+    mosaicFirst?: boolean;
+    gridSize?: number;
+    className?: string;
+}
+declare const OraculoSeccionVirtuales: React.FC<OraculoSeccionVirtualesProps>;
+
+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 };