@opexa/portal-components 0.0.78 → 0.0.79

package/dist/client/hooks/index.d.ts

@@ -10,6 +10,7 @@ export * from './useCashbackBonusQuery';
 export * from './useCashbackQuery';
 export * from './useCashbacksQuery';
 export * from './useCheckInDailyCheckInQuestMutation';
+export * from './useChunk';
 export * from './useClaimCashbackBonusMutation';
 export * from './useClaimSpotBonusMutation';
 export * from './useControllableState';

package/dist/client/hooks/index.js

@@ -10,6 +10,7 @@ export * from './useCashbackBonusQuery.js';
 export * from './useCashbackQuery.js';
 export * from './useCashbacksQuery.js';
 export * from './useCheckInDailyCheckInQuestMutation.js';
+export * from './useChunk.js';
 export * from './useClaimCashbackBonusMutation.js';
 export * from './useClaimSpotBonusMutation.js';
 export * from './useControllableState.js';

package/dist/client/hooks/useChunk.d.ts

@@ -0,0 +1,8 @@
+export declare function useChunk<T>(items: T[], size: number): {
+    totalItems: number;
+    currentItems: T[];
+    loadedItems: T[];
+    totalLoadedItems: number;
+    hasNext: boolean;
+    next: () => void;
+};

package/dist/client/hooks/useChunk.js

@@ -0,0 +1,26 @@
+import { chunk } from 'lodash-es';
+import { useState } from 'react';
+export function useChunk(items, size) {
+    const chunks = chunk(items, size);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const currentItems = chunks.at(currentIndex) ?? [];
+    const loadedItems = (() => {
+        return chunks.filter((_, index) => index <= currentIndex).flat();
+    })();
+    const next = () => {
+        if (currentIndex >= chunks.length - 1)
+            return;
+        setCurrentIndex((prevIndex) => prevIndex + 1);
+    };
+    const totalItems = items.length;
+    const totalLoadedItems = loadedItems.length;
+    const hasNext = currentIndex < chunks.length - 1;
+    return {
+        totalItems,
+        currentItems,
+        loadedItems,
+        totalLoadedItems,
+        hasNext,
+        next,
+    };
+}

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/OnlineBankDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const OnlineBankDepositContext: import("react").Context<{
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const OnlineBankDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useOnlineBankDepositContext: () => {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/OnlineBankDeposit/useOnlineBankDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '@opexa/portal-sdk-core';
 export type UseOnlineBankDepositReturn = ReturnType<typeof useOnlineBankDeposit>;
 export declare function useOnlineBankDeposit(): {
-    view: "vca" | "form";
+    view: "form" | "vca";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/QRPHDepositContext.d.ts

@@ -1,5 +1,5 @@
 export declare const QRPHDepositContext: import("react").Context<{
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;
@@ -9,7 +9,7 @@ export declare const QRPHDepositContext: import("react").Context<{
         promo?: string | null;
     }) => void;
 }>, useQRPHDepositContext: () => {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/DepositWithdrawal/Deposit/QRPHDeposit/useQRPHDeposit.d.ts

@@ -1,7 +1,7 @@
 import type { Deposit } from '@opexa/portal-sdk-core';
 export type UseQRPHDepositReturn = ReturnType<typeof useQRPHDeposit>;
 export declare function useQRPHDeposit(): {
-    view: "qrCode" | "form";
+    view: "form" | "qrCode";
     status: "waiting" | "processing" | "failed" | "verification-waiting" | "verification-processing" | "verification-failed" | "verification-success";
     verify: () => void;
     reset: () => void;

package/dist/components/GameProviders/GameProviders.d.ts

@@ -1,25 +1,4 @@
-import type { GameProvider } from '@opexa/portal-sdk-core';
-import type { GameProviderData } from '../../types';
-export interface GameProvidersProps {
-    gameProviders: GameProvider[];
-    heading?: string;
-    /**
-     * @default '/providers'
-     */
-    viewAllUrl?: string;
-    /**
-     * @default '/providers/<slug>'
-     * @example
-     * ```ts
-     * '/bingo/:slug' // '/bingo/jili'
-     * '/bingo/:id'   // '/bingo/JILI'
-     * // or using a function
-     * ({slug}) => `/bingo/${slug}`
-     * ```
-     */
-    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
-    className?: string;
-    gameProviderContainerClass?: string;
-    gameProviderImageClass?: string;
-}
+import { type GameProvidersCarouselProps } from './GameProvidersCarousel';
+import { type GameProvidersListProps } from './GameProvidersList';
+export type GameProvidersProps = GameProvidersCarouselProps | GameProvidersListProps;
 export declare function GameProviders(props: GameProvidersProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProviders.js

@@ -1,43 +1,11 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import useEmblaCarousel from 'embla-carousel-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useCallback, useEffect, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { GAME_PROVIDER_DATA } from '../../constants/index.js';
-import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
-import { Button } from '../../ui/index.js';
-import { callIfFn } from '../../utils/index.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GameProvidersCarousel, } from './GameProvidersCarousel.js';
+import { GameProvidersList, } from './GameProvidersList.js';
 export function GameProviders(props) {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-        align: 'start',
-        slidesToScroll: 1,
-    });
-    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
-    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
-    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
-    const onNextButtonClick = useCallback(async () => {
-        emblaApi?.scrollNext();
-    }, [emblaApi]);
-    const onSelect = useCallback((emblaApi) => {
-        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
-        setNextBtnDisabled(!emblaApi?.canScrollNext());
-    }, []);
-    useEffect(() => {
-        if (!emblaApi)
-            return;
-        onSelect(emblaApi);
-        emblaApi.on('reInit', onSelect).on('select', onSelect);
-    }, [emblaApi, onSelect]);
-    const viewAllUrl = props.viewAllUrl ?? '/providers';
-    const viewGamesUrl = (data) => {
-        return props.viewGamesUrl
-            ? callIfFn(props.viewGamesUrl, data)
-                .replace(':id', data.id)
-                .replace(':slug', data.slug)
-            : `/providers/${data.slug}`;
-    };
-    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: "grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', props.gameProviderContainerClass), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', props.gameProviderImageClass) }) }, provider.id))) }) })] }));
+    if (props.layout === 'list') {
+        return _jsx(GameProvidersList, { ...props });
+    }
+    else {
+        return _jsx(GameProvidersCarousel, { ...props });
+    }
 }

package/dist/components/GameProviders/GameProvidersCarousel.d.ts

@@ -0,0 +1,29 @@
+import type { GameProvider } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+}
+export interface GameProvidersCarouselProps {
+    layout: 'carousel';
+    gameProviders: GameProvider[];
+    heading?: string;
+    /**
+     * @default '/providers'
+     */
+    viewAllUrl?: string;
+    /**
+     * @default '/providers/<slug>'
+     * @example
+     * ```ts
+     * '/bingo/:slug' // '/bingo/jili'
+     * '/bingo/:id'   // '/bingo/JILI'
+     * // or using a function
+     * ({slug}) => `/bingo/${slug}`
+     * ```
+     */
+    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
+    className?: string | ClassNameEntries;
+}
+export declare function GameProvidersCarousel(props: GameProvidersCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProvidersCarousel.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from 'embla-carousel-react';
+import { isString } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useCallback, useEffect, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { callIfFn } from '../../utils/index.js';
+export function GameProvidersCarousel(props) {
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 1,
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        emblaApi?.scrollNext();
+    }, [emblaApi]);
+    const onSelect = useCallback((emblaApi) => {
+        setPrevBtnDisabled(!emblaApi?.canScrollPrev());
+        setNextBtnDisabled(!emblaApi?.canScrollNext());
+    }, []);
+    useEffect(() => {
+        if (!emblaApi)
+            return;
+        onSelect(emblaApi);
+        emblaApi.on('reInit', onSelect).on('select', onSelect);
+    }, [emblaApi, onSelect]);
+    const viewAllUrl = props.viewAllUrl ?? '/providers';
+    const viewGamesUrl = (data) => {
+        return props.viewGamesUrl
+            ? callIfFn(props.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: viewAllUrl, className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled, "aria-label": "Next", children: _jsx(ArrowRightIcon, { className: "size-5" }) })] })] })] }), _jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: "grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col grid-rows-1 gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md", children: gameProviders.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }) })] }));
+}

package/dist/components/GameProviders/GameProvidersList.d.ts

@@ -0,0 +1,25 @@
+import type { GameProvider } from '@opexa/portal-sdk-core';
+import type { GameProviderData } from '../../types';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailImage?: string;
+}
+export interface GameProvidersListProps {
+    layout: 'list';
+    gameProviders: GameProvider[];
+    heading?: string;
+    /**
+     * @default '/providers/<slug>'
+     * @example
+     * ```ts
+     * '/bingo/:slug' // '/bingo/jili'
+     * '/bingo/:id'   // '/bingo/JILI'
+     * // or using a function
+     * ({slug}) => `/bingo/${slug}`
+     * ```
+     */
+    viewGamesUrl?: string | ((gameProvider: GameProviderData) => string);
+    className?: string | ClassNameEntries;
+}
+export declare function GameProvidersList(props: GameProvidersListProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProvidersList.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isString, noop } from 'lodash-es';
+import Image from 'next/image';
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useChunk } from '../../client/hooks/index.js';
+import { GAME_PROVIDER_DATA } from '../../constants/index.js';
+import { Button, Progress } from '../../ui/index.js';
+import { callIfFn } from '../../utils/index.js';
+export function GameProvidersList(props) {
+    const viewGamesUrl = (data) => {
+        return props.viewGamesUrl
+            ? callIfFn(props.viewGamesUrl, data)
+                .replace(':id', data.id)
+                .replace(':slug', data.slug)
+            : `/providers/${data.slug}`;
+    };
+    const gameProviders = props.gameProviders.map((provider) => GAME_PROVIDER_DATA[provider]);
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    const chunked = useChunk(gameProviders, 18);
+    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Providers' }), _jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: chunked.loadedItems.map((provider) => (_jsx(Link, { href: viewGamesUrl(provider), className: twMerge('bg-gray-800 flex h-full w-full items-center overflow-hidden rounded-md lg:h-[5.75rem]', classNames.thumbnailRoot), "aria-label": `View ${provider.name} games`, children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: twMerge('mx-auto h-auto w-full', classNames.thumbnailImage) }) }, provider.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: chunked.totalItems, value: chunked.totalLoadedItems, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${chunked.totalLoadedItems} of ${chunked.totalItems}` }), chunked.hasNext && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: chunked.next, className: "mt-lg", children: "Load More" }))] })] }));
+}

package/dist/components/Games/Game.d.ts

@@ -1,5 +1,10 @@
+interface ClassNameEntries {
+    root?: string;
+    title?: string;
+}
 export interface GameProps {
     badge?: 'top' | 'new' | 'popular';
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function Game(props: GameProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Games/Game.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isString } from 'lodash-es';
 import Image from 'next/image';
 import { twMerge } from 'tailwind-merge';
 import { useFavoriteGamesQuery, useMarkGameAsFavoriteMutation, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
@@ -7,7 +8,7 @@ import { GameLaunchTrigger } from '../GameLaunch/index.js';
 import { BadgeNew } from './BadgeNew.js';
 import { BadgePopular } from './BadgePopular.js';
 import { BadgeTop } from './BadgeTop.js';
-import { useGameContext } from './GameContext.js';
+import { useGameContext } from './GamesContext.js';
 export function Game(props) {
     const game = useGameContext();
     const sessionQuery = useSessionQuery();
@@ -17,7 +18,10 @@ export function Game(props) {
     const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
     const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
     const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
-    return (_jsxs(GameLaunchTrigger, { game: game, className: "animate-scale-in relative block w-full shadow-sm", children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute left-0 top-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs(GameLaunchTrigger, { game: game, className: twMerge('animate-scale-in relative block w-full shadow-sm', classNames.root), children: [props.badge === 'new' && (_jsx(BadgeNew, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'top' && (_jsx(BadgeTop, { className: "absolute left-0 top-0 size-[3.75rem]" })), props.badge === 'popular' && (_jsx(BadgePopular, { className: "absolute left-0 top-0 size-[3.75rem]" })), session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (markGameAsFavoriteMutation.isPending)
@@ -33,5 +37,5 @@ export function Game(props) {
                 }, "aria-disabled": markGameAsFavoriteMutation.isPending ||
                     unmarkGameAsFavoriteMutation.isPending, className: "rounded-xs absolute right-2 top-2 flex size-9 items-center justify-center bg-black/65 blur-[0.5px]", children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
                         ? 'fill-yellow-400 text-yellow-400'
-                        : 'text-white') }) })), _jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', props.gameNameClass), children: game.name })] }));
+                        : 'text-white') }) })), _jsx(Image, { src: game.image, alt: "", width: 200, height: 200, priority: true, className: "aspect-square w-full rounded-t-md object-cover" }), _jsx("span", { className: twMerge('bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-3.5 text-center text-xs font-semibold', classNames.title), children: game.name })] }));
 }

package/dist/components/Games/Games.d.ts

@@ -1,8 +1,4 @@
 import { type GamesCarouselProps } from './GamesCarousel';
 import { type GamesListProps } from './GamesList';
-export type GamesProps = ({
-    layout: 'list';
-} & GamesListProps) | ({
-    layout?: 'carousel';
-} & GamesCarouselProps);
+export type GamesProps = GamesListProps | GamesCarouselProps;
 export declare function Games(props: GamesProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Games/GamesCarousel.client.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel, {} from 'embla-carousel-react';
+import { isString } from 'lodash-es';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
@@ -9,7 +10,7 @@ import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, GamingPad01Icon, Spinn
 import { Button } from '../../ui/index.js';
 import { Empty } from '../Empty.js';
 import { Game } from './Game.js';
-import { GameContext } from './GameContext.js';
+import { GameContext } from './GamesContext.js';
 export function GamesCarousel__client(props) {
     const numOfRows = props.numOfRows ?? 1;
     const gamesQuery = useGamesQuery({
@@ -51,11 +52,17 @@ export function GamesCarousel__client(props) {
         onSelect(emblaApi);
         emblaApi.on('reInit', onSelect).on('select', onSelect);
     }, [emblaApi, onSelect]);
-    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), _jsx("div", { className: "grow" }), _jsxs("div", { className: "flex items-center justify-center gap-xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/games', className: "text-button-tertiary-fg flex gap-sm text-sm font-semibold", children: ["See All", _jsx(ChevronRightIcon, { className: "size-5 lg:hidden" })] }), _jsxs("div", { className: "hidden lg:flex", children: [_jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", onClick: onPrevButtonClick, disabled: prevBtnDisabled, "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "rounded-l-none", onClick: onNextButtonClick, disabled: nextBtnDisabled && !gamesQuery.hasNextPage
                                             ? true
                                             : gamesQuery.isFetchingNextPage, "aria-label": "Next", children: gamesQuery.isFetchingNextPage ? (_jsx(SpinnerIcon, { className: "size-5" })) : (_jsx(ArrowRightIcon, { className: "size-5" })) })] })] })] }), games.length <= 0 && (_jsx(Empty, { icon: GamingPad01Icon, title: "No games", message: "No game is currently available. Please check back later", className: "mt-lg" })), games.length >= 1 && (_jsx("div", { ref: emblaRef, className: "relative mt-lg lg:overflow-hidden", children: _jsx("div", { className: twMerge('grid auto-cols-[calc((100%-(0.375rem*2))/3)] grid-flow-col gap-sm lg:auto-cols-[calc((100%-(0.5rem*5))/6)] lg:gap-md', numOfRows === 3
                         ? 'grid-rows-3'
                         : numOfRows === 2
                             ? 'grid-rows-2'
-                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }) }))] }));
+                            : 'grid-rows-1'), children: games.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
+                                root: classNames.thumbnailRoot,
+                                title: classNames.thumbnailTitle,
+                            } }) }, game.id))) }) }))] }));
 }

package/dist/components/Games/GamesCarousel.d.ts

@@ -1,5 +1,11 @@
 import type { GamesInput__Next } from '@opexa/portal-sdk-core';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
 export interface GamesCarouselProps {
+    layout: 'carousel';
     /** @default "Games" */
     heading?: string;
     /**
@@ -13,7 +19,6 @@ export interface GamesCarouselProps {
     filter?: GamesInput__Next['filter'];
     search?: string;
     sort?: GamesInput__Next['sort'];
-    className?: string;
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function GamesCarousel(props: GamesCarouselProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Games/GamesContext.d.ts

@@ -0,0 +1,4 @@
+import type { Game } from '@opexa/portal-sdk-core';
+import type { GamesProps } from './Games';
+export declare const GamesPropsContext: import("react").Context<GamesProps>, useGamesPropsContext: () => GamesProps;
+export declare const GameContext: import("react").Context<Game>, useGameContext: () => Game;

package/dist/components/Games/GamesContext.js

@@ -0,0 +1,3 @@
+import { createContext } from '../../client/utils/index.js';
+export const [GamesPropsContext, useGamesPropsContext] = createContext();
+export const [GameContext, useGameContext] = createContext();

package/dist/components/Games/GamesList.client.js

@@ -1,12 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { noop } from 'lodash-es';
+import { isString, noop } from 'lodash-es';
 import { useGamesQuery, useInfiniteQueryHelper } from '../../client/hooks/index.js';
 import { GamingPad01Icon, SpinnerIcon } from '../../icons/index.js';
 import { Button, Progress } from '../../ui/index.js';
 import { Empty } from '../Empty.js';
 import { Game } from './Game.js';
-import { GameContext } from './GameContext.js';
+import { GameContext } from './GamesContext.js';
 export function GamesList__client(props) {
     const { loading, availableRows, totalRows, totalAvailableRows, hasNextPage, next, } = useInfiniteQueryHelper(useGamesQuery, {
         first: props.first ?? 24,
@@ -14,7 +14,13 @@ export function GamesList__client(props) {
         search: props.search,
         sort: props.sort,
     });
-    return (_jsxs("div", { className: props.className, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
+    const classNames = isString(props.className)
+        ? { root: props.className }
+        : (props.className ?? {});
+    return (_jsxs("div", { className: classNames.root, children: [_jsx("h2", { className: "text-lg font-semibold", children: props.heading ?? 'Games' }), totalRows <= 0 && (_jsx(Empty, { icon: loading ? SpinnerIcon : GamingPad01Icon, title: loading ? 'Just a moment' : 'No games', message: loading
                     ? 'Fetching latest games...'
-                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, gameNameClass: props.gameNameClass }) }, game.id))) }), _jsxs("div", { className: "mt-3xl flex flex-col items-center", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }))] }));
+                    : 'No game is currently available. Please check back later', className: "mt-lg" })), totalRows >= 1 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-lg grid grid-cols-3 gap-1.5 lg:grid-cols-6 lg:gap-2.5", children: availableRows.map((game) => (_jsx(GameContext, { value: game, children: _jsx(Game, { badge: props.badge, className: {
+                                    root: classNames.thumbnailRoot,
+                                    title: classNames.thumbnailTitle,
+                                } }) }, game.id))) }), _jsxs("div", { className: "mt-2xl flex flex-col items-center lg:mt-3xl", children: [_jsx(Progress.Root, { min: 0, max: totalRows, value: totalAvailableRows, onValueChange: noop, className: "w-[12.5rem]", children: _jsx(Progress.Track, { className: "bg-bg-tertiary", children: _jsx(Progress.Range, {}) }) }), _jsx("p", { className: "text-button-tertiary-fg mt-md text-sm", children: `Displaying ${totalAvailableRows} of ${totalRows}` }), hasNextPage && (_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, onClick: next, className: "mt-lg", children: "Load More" }))] })] }))] }));
 }

package/dist/components/Games/GamesList.d.ts

@@ -1,5 +1,11 @@
 import type { GamesInput__Next } from '@opexa/portal-sdk-core';
+export interface ClassNameEntries {
+    root?: string;
+    thumbnailRoot?: string;
+    thumbnailTitle?: string;
+}
 export interface GamesListProps {
+    layout: 'list';
     badge?: 'top' | 'new' | 'popular';
     /** @default 24 */
     first?: number;
@@ -8,7 +14,6 @@ export interface GamesListProps {
     search?: string;
     /** @default "Games"*/
     heading?: string;
-    className?: string;
-    gameNameClass?: string;
+    className?: string | ClassNameEntries;
 }
 export declare function GamesList(props: GamesListProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promos/Promos.d.ts

@@ -1,15 +1,4 @@
-export interface PromosProps {
-    /** @default "Promotions" */
-    heading?: string;
-    /** @default "/promos" */
-    viewAllUrl?: string;
-    /** @default "/promos" */
-    viewPromoDetailsUrl?: string;
-    /** @default "/promos/cashback" */
-    viewCashbackDetailsUrl?: string;
-    /** @default 1 */
-    className?: string;
-    /** @default 'carousel' */
-    layout?: 'carousel' | 'grid';
-}
+import { type PromosCarouselProps } from './PromosCarousel';
+import { type PromosGridProps } from './PromosGrid';
+export type PromosProps = PromosCarouselProps | PromosGridProps;
 export declare function Promos(props: PromosProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Promos/PromosCarousel.d.ts

@@ -1,2 +1,13 @@
-import type { PromosProps } from './Promos';
-export declare function PromosCarousel(props: PromosProps): import("react/jsx-runtime").JSX.Element;
+export interface PromosCarouselProps {
+    layout: 'carousel';
+    /** @default "Promotions" */
+    heading?: string;
+    /** @default "/promos" */
+    viewAllUrl?: string;
+    /** @default "/promos" */
+    viewPromoDetailsUrl?: string;
+    /** @default "/promos/cashback" */
+    viewCashbackDetailsUrl?: string;
+    className?: string;
+}
+export declare function PromosCarousel(props: PromosCarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Promos/PromosGrid.d.ts

@@ -1,2 +1,11 @@
-import type { PromosProps } from './Promos';
-export declare function PromosGrid(props: PromosProps): import("react/jsx-runtime").JSX.Element;
+export interface PromosGridProps {
+    layout: 'grid';
+    /** @default "Promotions" */
+    heading?: string;
+    /** @default "/promos" */
+    viewPromoDetailsUrl?: string;
+    /** @default "/promos/cashback" */
+    viewCashbackDetailsUrl?: string;
+    className?: string;
+}
+export declare function PromosGrid(props: PromosGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/constants/gameProviders.js

@@ -101,7 +101,7 @@ export const GAME_PROVIDER_DATA = {
         id: 'ETENGJUE',
         name: 'Etengjue',
         slug: 'etengjue',
-        logo: '' /* FIXME */,
+        logo: '',
     },
     EVOLUTION: {
         id: 'EVOLUTION',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "exports": {
     ".": {
       "types": "./dist/components/index.d.ts",