@opexa/portal-components 0.0.29 → 0.0.31

package/dist/components/GameLaunch/GameLaunch.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Dialog, Portal, Presence } from '@ark-ui/react';
+import { useRef } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useShallow } from 'zustand/shallow';
+import { useDisclosure, useEndGameSessionMutation, useFavoriteGamesQuery, useGlobalStore, useMarkGameAsFavoriteMutation, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
+import { AlertCircleIcon, ChevronLeftIcon, CoinsHandIcon, Expand03Icon, SpinnerIcon, Star01Icon, XIcon, } from '../../icons/index.js';
+import { AlertDialog, Button, IconButton } from '../../ui/index.js';
+export function GameLaunch() {
+    const ref = useRef(null);
+    const maximizeDisclosure = useDisclosure({
+        defaultOpen: true,
+        onOpenChange(open) {
+            if (!open) {
+                setTimeout(() => {
+                    ref.current?.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start',
+                        inline: 'start',
+                    });
+                }, 25);
+            }
+        },
+    });
+    const cancelDisclosure = useDisclosure();
+    const endGameSessionMutation = useEndGameSessionMutation();
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        gameLaunch: ctx.gameLaunch,
+        depositWithdrawal: ctx.depositWithdrawal,
+    })));
+    async function endGameSession() {
+        if (globalStore.gameLaunch.details.status === 'PLAYING') {
+            await endGameSessionMutation.mutateAsync({
+                game: globalStore.gameLaunch.details.game,
+                session: globalStore.gameLaunch.details.session,
+            });
+        }
+        maximizeDisclosure.setOpen(true);
+        globalStore.gameLaunch.setDetails({
+            status: 'WAITING',
+            session: null,
+            game: null,
+        });
+    }
+    const favoriteGamesQuery = useFavoriteGamesQuery();
+    const favoriteGames = favoriteGamesQuery.data ?? [];
+    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const markedAsFavorite = favoriteGames.some((favoriteGame) => {
+        return !globalStore.gameLaunch.details.game
+            ? false
+            : 'reference' in globalStore.gameLaunch.details.game
+                ? favoriteGame.id === globalStore.gameLaunch.details.game.reference
+                : favoriteGame.id === globalStore.gameLaunch.details.game.id;
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs(Presence, { ref: ref, present: globalStore.gameLaunch.details.status !== 'WAITING' &&
+                    !maximizeDisclosure.open, lazyMount: true, unmountOnExit: globalStore.gameLaunch.details.status === 'WAITING', className: "border-border-primary bg-bg-primary-alt w-full overflow-hidden rounded-lg border ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsxs("section", { className: "aspect-[960/540] w-full", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session?.launchUrl ?? '', className: "size-full" }))] }), _jsxs("section", { className: "border-border-primary flex justify-end gap-2 border-t p-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => {
+                                    if (globalStore.gameLaunch.details.status !== 'PLAYING') {
+                                        endGameSession();
+                                        return;
+                                    }
+                                    cancelDisclosure.setOpen(true);
+                                }, disabled: globalStore.gameLaunch.details.status === 'LOADING', "aria-label": "Quit Game", children: _jsx(XIcon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", disabled: globalStore.gameLaunch.details.status === 'LOADING', "aria-label": markedAsFavorite ? 'Remove from Favorites' : 'Add to Favorites', onClick: () => {
+                                    if (!globalStore.gameLaunch.details.game)
+                                        return;
+                                    if (markedAsFavorite) {
+                                        unmarkGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                            ? globalStore.gameLaunch.details.game.reference
+                                            : globalStore.gameLaunch.details.game.id);
+                                    }
+                                    else {
+                                        markGameAsFavoriteMutation.mutate('reference' in globalStore.gameLaunch.details.game
+                                            ? globalStore.gameLaunch.details.game.reference
+                                            : globalStore.gameLaunch.details.game.id);
+                                    }
+                                }, children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
+                                        ? 'text-yellow-400 fill-yellow-400'
+                                        : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", colorScheme: "gray", onClick: () => maximizeDisclosure.setOpen(true), title: "Maximize", "aria-label": "Maximize", children: _jsx(Expand03Icon, { className: "size-5" }) })] })] }), _jsx(Dialog.Root, { open: globalStore.gameLaunch.details.status !== 'WAITING' &&
+                    maximizeDisclosure.open &&
+                    !cancelDisclosure.open, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsx(Portal, { children: _jsx(Dialog.Positioner, { className: "z-dialog fixed inset-0", children: _jsxs(Dialog.Content, { className: "ui-open:animate-dialog-in ui-closed:animate-dialog-out bg-bg-primary-alt flex size-full flex-col", children: [_jsxs("section", { className: "flex items-center gap-2 px-4 py-2", children: [_jsx(IconButton, { size: "xs", variant: "outline", onClick: () => {
+                                                if (globalStore.gameLaunch.details.status !== 'PLAYING') {
+                                                    endGameSession();
+                                                    return;
+                                                }
+                                                cancelDisclosure.setOpen(true);
+                                            }, disabled: globalStore.gameLaunch.details.status === 'LOADING', title: "Quit", "aria-label": "Quit Game", children: _jsx(ChevronLeftIcon, { className: "size-5" }) }), _jsx("div", { className: "grow" }), _jsx(IconButton, { size: "xs", variant: "outline", children: _jsx(Star01Icon, { className: twMerge('size-5', markedAsFavorite
+                                                    ? 'text-yellow-400 fill-yellow-400'
+                                                    : 'text-inherit') }) }), _jsx(IconButton, { size: "xs", variant: "outline", onClick: () => maximizeDisclosure.setOpen(false), title: "Minimize", "aria-label": "Minimize", children: _jsx(Expand03Icon, { className: "size-5" }) }), _jsx(IconButton, { size: "xs", fullWidth: false, onClick: () => {
+                                                globalStore.depositWithdrawal.setOpen(true);
+                                            }, children: _jsx(CoinsHandIcon, { className: "size-5" }) })] }), _jsxs("section", { className: "grow", children: [globalStore.gameLaunch.details.status === 'LOADING' && (_jsx("div", { className: "flex size-full items-center justify-center", children: _jsx(SpinnerIcon, { className: "size-8" }) })), globalStore.gameLaunch.details.status === 'FAILED' && (_jsx("div", {})), globalStore.gameLaunch.details.status === 'PLAYING' && (_jsx("iframe", { src: globalStore.gameLaunch.details.session.launchUrl ?? '', className: "size-full" }))] })] }) }) }) }), _jsx(AlertDialog.Root, { role: "alertdialog", open: cancelDisclosure.open, onOpenChange: (details) => {
+                    cancelDisclosure.setOpen(details.open);
+                }, lazyMount: true, closeOnEscape: false, closeOnInteractOutside: false, children: _jsxs(Portal, { children: [_jsx(AlertDialog.Backdrop, {}), _jsx(AlertDialog.Positioner, { children: _jsxs(AlertDialog.Content, { children: [_jsxs(AlertDialog.Header, { children: [_jsx("div", { className: "bg-error-700/25 text-error-200 flex size-12 items-center justify-center rounded-full", children: _jsx(AlertCircleIcon, {}) }), _jsx(AlertDialog.CloseTrigger, { children: _jsx(XIcon, {}) })] }), _jsxs(AlertDialog.Body, { children: [_jsx(AlertDialog.Title, { children: "Quit Game" }), _jsx(AlertDialog.Description, { children: "Are you sure you want to quit?" })] }), _jsx(AlertDialog.Context, { children: (api) => (_jsxs(AlertDialog.Footer, { children: [_jsx(Button, { variant: "outline", colorScheme: "gray", disabled: endGameSessionMutation.isPending, onClick: () => {
+                                                        api.setOpen(false);
+                                                    }, children: "Cancel" }), _jsx(Button, { colorScheme: "danger", disabled: endGameSessionMutation.isPending, onClick: async () => {
+                                                        await endGameSession();
+                                                        api.setOpen(false);
+                                                    }, children: "Proceed" })] })) })] }) })] }) })] }));
+}

package/dist/components/GameLaunch/GameLaunchTrigger.d.ts

@@ -4,4 +4,4 @@ export interface GameLaunchTriggerProps extends HTMLArkProps<'button'> {
     game: Game | FavoriteGame;
     asChild?: boolean;
 }
-export declare function GameLaunchTrigger(props: GameLaunchTriggerProps): import("react").JSX.Element;
+export declare function GameLaunchTrigger(props: GameLaunchTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameLaunch/{GameLaunchTrigger.jsx → GameLaunchTrigger.js}

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
 import { useCreateGameSessionMutation, useGlobalStore, useSessionQuery, } from '../../client/hooks/index.js';
@@ -15,7 +16,7 @@ export function GameLaunchTrigger(props) {
         : globalStore.gameLaunch.details.status !== 'WAITING'
             ? true
             : props.disabled;
-    return (<ark.button type="button" {...props} onClick={async (e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: async (e) => {
             props.onClick?.(e);
             if (sessionQuery.data?.status === 'unauthenticated') {
                 return globalStore.signIn.setOpen(true);
@@ -43,11 +44,11 @@ export function GameLaunchTrigger(props) {
                     description: error instanceof Error ? error.message : 'Failed to launch game',
                 });
             }
-        }} disabled={disabled} data-state={sessionQuery.data?.status === 'unauthenticated'
+        }, disabled: disabled, "data-state": sessionQuery.data?.status === 'unauthenticated'
             ? globalStore.signIn.open
                 ? 'open'
                 : 'closed'
             : globalStore.gameLaunch.details.status === 'WAITING'
                 ? 'closed'
-                : 'open'}/>);
+                : 'open' }));
 }

package/dist/components/GameLaunch/index.js

@@ -1,2 +1,2 @@
-export * from './GameLaunch';
-export * from './GameLaunchTrigger';
+export * from './GameLaunch.js';
+export * from './GameLaunchTrigger.js';

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

@@ -1,4 +1,4 @@
-import type { GameProviderData } from '../../types';
+import type { GameProviderData } from '~/types';
 export interface GameProvidersProps {
     gameProviders: GameProviderData[];
     heading?: string;
@@ -8,4 +8,4 @@ export interface GameProvidersProps {
     viewAllUrl?: string;
     className?: string;
 }
-export declare function GameProviders(props: GameProvidersProps): import("react").JSX.Element;
+export declare function GameProviders(props: GameProvidersProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GameProviders/GameProviders.js

@@ -0,0 +1,32 @@
+'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 { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
+import { Button } from '../../ui/index.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 ?? '/games/providers';
+    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: props.gameProviders.map((provider) => (_jsx(Link, { href: `${viewAllUrl}/${provider.slug}`, className: "bg-gray-800 flex w-full items-center rounded-md px-md py-sm lg:h-[5.75rem]", children: _jsx(Image, { src: provider.logo, alt: "", width: 300, height: 150, className: "mx-auto h-auto w-full" }) }, provider.id))) }) })] }));
+}

package/dist/components/GameProviders/index.js

@@ -1 +1 @@
-export * from './GameProviders';
+export * from './GameProviders.js';

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

@@ -1,2 +1,2 @@
 import type { GamesProps } from './Games';
-export declare function Games__client(props: GamesProps): import("react").JSX.Element;
+export declare function Games__client(props: GamesProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,84 @@
+'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 { useFavoriteGamesQuery, useGamesQuery, useMarkGameAsFavoriteMutation, useSessionQuery, useUnmarkGameAsFavoriteMutation, } from '../../client/hooks/index.js';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon, SpinnerIcon, Star01Icon, } from '../../icons/index.js';
+import { Button } from '../../ui/index.js';
+import { GameLaunchTrigger } from '../GameLaunch/index.js';
+export function Games__client(props) {
+    const numOfRows = props.numOfRows ?? 1;
+    const gamesQuery = useGamesQuery({
+        first: (numOfRows + 1) * 6,
+        filter: props.filter,
+    });
+    const games = gamesQuery.data?.pages
+        .map((page) => page.edges.map((edge) => edge.node))
+        .flat() ?? [];
+    const [emblaRef, emblaApi] = useEmblaCarousel({
+        align: 'start',
+        slidesToScroll: 3,
+        breakpoints: {
+            '(min-width: 1024px)': {
+                slidesToScroll: 6,
+            },
+        },
+    });
+    const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+    const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+    const onPrevButtonClick = useCallback(() => emblaApi?.scrollPrev(), [emblaApi]);
+    const onNextButtonClick = useCallback(async () => {
+        if (!emblaApi?.canScrollNext() && gamesQuery.hasNextPage) {
+            await gamesQuery.fetchNextPage();
+            emblaApi?.reInit();
+            await new Promise((resolve) => setTimeout(resolve, 1));
+        }
+        emblaApi?.scrollNext();
+    }, [emblaApi, gamesQuery]);
+    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]);
+    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
+                                            ? true
+                                            : gamesQuery.isFetchingNextPage, "aria-label": "Next", children: gamesQuery.isFetchingNextPage ? (_jsx(SpinnerIcon, { className: "size-5" })) : (_jsx(ArrowRightIcon, { className: "size-5" })) })] })] })] }), _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(Item, { game: game }, game.id))) }) })] }));
+}
+function Item({ game }) {
+    const sessionQuery = useSessionQuery();
+    const session = sessionQuery.data;
+    const favoriteGamesQuery = useFavoriteGamesQuery();
+    const favoriteGames = favoriteGamesQuery.data ?? [];
+    const markGameAsFavoriteMutation = useMarkGameAsFavoriteMutation();
+    const unmarkGameAsFavoriteMutation = useUnmarkGameAsFavoriteMutation();
+    const markedAsFavorite = favoriteGames.some((favoriteGame) => favoriteGame.id === game.id);
+    return (_jsxs(GameLaunchTrigger, { game: game, className: "relative block w-full shadow-sm", children: [session?.status === 'authenticated' && (_jsx("div", { role: "button", onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (markGameAsFavoriteMutation.isPending)
+                        return;
+                    if (unmarkGameAsFavoriteMutation.isPending)
+                        return;
+                    if (markedAsFavorite) {
+                        unmarkGameAsFavoriteMutation.mutate(game.reference);
+                    }
+                    else {
+                        markGameAsFavoriteMutation.mutate(game.reference);
+                    }
+                }, "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: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }));
+}

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

@@ -12,4 +12,4 @@ export interface GamesProps {
     className?: string;
     filter?: GamesInput['filter'];
 }
-export declare function Games(props: GamesProps): Promise<import("react").JSX.Element>;
+export declare function Games(props: GamesProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/Games/{Games.jsx → Games.js}

@@ -1,10 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { prefetchGamesQuery } from '../../server/utils/index.js';
-import { Games__client } from './Games.client';
+import { Games__client } from './Games.client.js';
 export async function Games(props) {
     const numOfRows = props.numOfRows ?? 1;
     await prefetchGamesQuery({
         first: (numOfRows + 1) * 6,
         filter: props.filter,
     });
-    return <Games__client {...props}/>;
+    return _jsx(Games__client, { ...props });
 }

package/dist/components/Games/index.js

@@ -1 +1 @@
-export * from './Games';
+export * from './Games.js';

package/dist/components/GamesSearch/GamesSearch.d.ts

@@ -2,5 +2,5 @@ import { type ImageProps } from 'next/image';
 interface GamesSearchProps {
     logo: ImageProps['src'];
 }
-export declare function GamesSearch(props: GamesSearchProps): import("react").JSX.Element;
+export declare function GamesSearch(props: GamesSearchProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/GamesSearch/GamesSearch.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '@ark-ui/react';
+import Image, {} from 'next/image';
+import { useRef, useState } from 'react';
+import { useShallow } from 'zustand/shallow';
+import { useGamesQuery, useGlobalStore } from '../../client/hooks/index.js';
+import { SearchLgIcon, XIcon } from '../../icons/index.js';
+import providerHacksaw from '../../images/hacksaw-gaming.png';
+import { Button, Dialog, Field, IconButton, Presence } from '../../ui/index.js';
+import { GameLaunchTrigger } from '../GameLaunch/index.js';
+export function GamesSearch(props) {
+    const globalStore = useGlobalStore(useShallow((ctx) => ({
+        gamesSearch: ctx.gamesSearch,
+    })));
+    const inputRef = useRef(null);
+    const [search, setSearch] = useState('');
+    const gamesQuery = useGamesQuery({
+        first: 18,
+        search,
+    }, {
+        enabled: search.length >= 3,
+    });
+    const games = gamesQuery.data?.pages
+        .map((page) => page.edges.map((edge) => edge.node))
+        .flat() ?? [];
+    return (_jsx(Dialog.Root, { open: globalStore.gamesSearch.open, onOpenChange: (details) => globalStore.gamesSearch.setOpen(details.open), lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsxs(Dialog.Content, { className: "bg-bg-primary lg:min-h-auto mx-auto min-h-full w-full pt-xl lg:mt-[132px] lg:max-w-[1136px] lg:bg-unset lg:pt-0", children: [_jsx(Dialog.Context, { children: (api) => (_jsxs("div", { className: "flex items-center justify-between px-4 lg:hidden", children: [_jsx(Image, { src: props.logo, alt: "", width: 200, height: 40, className: "h-8 w-auto" }), _jsx(IconButton, { size: "sm", colorScheme: "gray", onClick: () => api.setOpen(false), children: _jsx(XIcon, { className: "text-text-quinary size-6" }) })] })) }), _jsx("div", { className: "flex justify-end", children: _jsx(Dialog.Context, { children: (api) => (_jsx("button", { type: "button", onClick: () => api.setOpen(false), className: "hidden size-9 items-center justify-center rounded-md bg-white/20 lg:flex", children: _jsx(XIcon, { className: "size-5 text-white" }) })) }) }), _jsx("div", { className: "mt-2xl px-4 lg:mt-xl lg:px-0", children: _jsxs("div", { className: "relative", children: [_jsx(SearchLgIcon, { className: "text-text-quinary pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { ref: inputRef, type: "search", value: search, onChange: (e) => {
+                                                setSearch(e.target.value);
+                                            }, className: "pl-10 pr-16", placeholder: "Search", autoComplete: "off" }), _jsx(Presence, { present: search.length > 0, asChild: true, lazyMount: true, children: _jsx("button", { type: "button", className: "text-text-secondary-700 absolute right-3.5 top-1/2 -translate-y-1/2 font-semibold", onClick: () => {
+                                                    setSearch('');
+                                                    inputRef.current?.focus();
+                                                }, children: "Clear" }) })] }) }), _jsx("div", { className: "lg:bg-bg-primary lg:border-border-primary mt-2xl p-xl pb-3xl lg:mt-2 lg:rounded-xl lg:border", children: search.length <= 0 ? (_jsx(Alert, { message: "Search for your favorite game or provider." })) : search.length >= 1 && search.length <= 2 ? (_jsx(Alert, { message: "Search requires at least 3 characters." })) : (_jsxs(_Fragment, { children: [games.length <= 0 && _jsx(Alert, { message: "No results found" }), games.length > 0 && (_jsxs(_Fragment, { children: [_jsx("h2", { className: "text-lg font-semibold", children: "Providers" }), _jsx("div", { className: "mb-3xl mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: _jsx("div", { className: "bg-gray-800 flex h-14 w-full items-center rounded-md", children: _jsx(Image, { src: providerHacksaw, alt: "", width: 100, height: 50, className: "mx-auto h-auto w-full" }) }) }), _jsx("h2", { className: "text-lg font-semibold", children: "Games" }), _jsx("div", { className: "mt-3.5 grid grid-cols-3 gap-1.5 lg:grid-cols-9 lg:gap-3.5", children: games.map((game) => (_jsxs(GameLaunchTrigger, { game: game, className: "block w-full shadow-sm", onClick: () => {
+                                                            globalStore.gamesSearch.setOpen(false);
+                                                        }, children: [_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: "bg-bg-tertiary text-text-primary-brand block w-full truncate rounded-b-md px-2 py-2.5 text-center text-xs font-semibold", children: game.name })] }, game.id))) }), _jsx(Presence, { present: gamesQuery.hasNextPage, children: _jsx(Button, { variant: "outline", className: "mx-auto mt-12 w-fit", onClick: () => gamesQuery.fetchNextPage(), children: "Load More" }) })] }))] })) })] }) })] }) }));
+}
+function Alert({ message }) {
+    return (_jsxs("div", { className: "py-lg", role: "alert", "aria-live": "polite", children: [_jsx("div", { className: "bg-bg-secondary shadow-xs border-border-primary mx-auto flex size-12 items-center justify-center rounded-lg border", children: _jsx(SearchLgIcon, { className: "text-text-secondary-700 size-6" }) }), _jsx("p", { className: "text-text-secondary-700 mt-4 text-center", children: message })] }));
+}

package/dist/components/GamesSearch/GamesSearchTrigger.d.ts

@@ -2,4 +2,4 @@ import type { ComponentPropsWithRef } from 'react';
 export interface GamesSearchTriggerProps extends ComponentPropsWithRef<'button'> {
     asChild?: boolean;
 }
-export declare function GamesSearchTrigger(props: GamesSearchTriggerProps): import("react").JSX.Element;
+export declare function GamesSearchTrigger(props: GamesSearchTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/GamesSearch/{GamesSearchTrigger.jsx → GamesSearchTrigger.js}

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { ark } from '@ark-ui/react';
 import { useShallow } from 'zustand/shallow';
 import { useGlobalStore } from '../../client/hooks/index.js';
@@ -6,8 +7,8 @@ export function GamesSearchTrigger(props) {
     const globalStore = useGlobalStore(useShallow((ctx) => ({
         gamesSearch: ctx.gamesSearch,
     })));
-    return (<ark.button type="button" {...props} onClick={(e) => {
+    return (_jsx(ark.button, { type: "button", ...props, onClick: (e) => {
             globalStore.gamesSearch.setOpen(!globalStore.gamesSearch.open);
             return props.onClick?.(e);
-        }} data-state={globalStore.gamesSearch.open ? 'open' : 'closed'}/>);
+        }, "data-state": globalStore.gamesSearch.open ? 'open' : 'closed' }));
 }

package/dist/components/GamesSearch/index.js

@@ -1,2 +1,2 @@
-export * from './GamesSearch';
-export * from './GamesSearchTrigger';
+export * from './GamesSearch.js';
+export * from './GamesSearchTrigger.js';

package/dist/components/InfiniteScroll.d.ts

@@ -7,4 +7,4 @@ export interface InfiniteScrollProps {
     style?: React.CSSProperties;
     className?: string;
 }
-export declare function InfiniteScroll(props: InfiniteScrollProps): import("react").JSX.Element;
+export declare function InfiniteScroll(props: InfiniteScrollProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/{InfiniteScroll.jsx → InfiniteScroll.js}

@@ -1,4 +1,5 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from 'react';
 import { useBoolean, useDebounceCallback, useIntersectionObserver, } from 'usehooks-ts';
 export function InfiniteScroll(props) {
@@ -20,11 +21,5 @@ export function InfiniteScroll(props) {
                 loadMore();
         },
     });
-    return (<Fragment>
-      {props.children}
-
-      <div ref={ref} role="presentation" style={props.style} className={props.className} hidden={!hasMore}>
-        {!!hasMore && <Fragment>{loader}</Fragment>}
-      </div>
-    </Fragment>);
+    return (_jsxs(Fragment, { children: [props.children, _jsx("div", { ref: ref, role: "presentation", style: props.style, className: props.className, hidden: !hasMore, children: !!hasMore && _jsx(Fragment, { children: loader }) })] }));
 }

package/dist/components/JackpotCounter/JackpotCounter.client.d.ts

@@ -1,2 +1,2 @@
 import type { JackpotCounterProps } from './JackpotCounter';
-export declare function JackpotCounter__client(props: JackpotCounterProps): import("react").JSX.Element | null;
+export declare function JackpotCounter__client(props: JackpotCounterProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/JackpotCounter/{JackpotCounter.client.jsx → JackpotCounter.client.js}

@@ -1,11 +1,12 @@
 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useEmblaCarousel from 'embla-carousel-react';
 import Link from 'next/link';
 import { useCallback, useEffect, useState } from 'react';
 import { useJackpotsQuery } from '../../client/hooks/index.js';
 import { ArrowLeftIcon, ArrowRightIcon, ChevronRightIcon } from '../../icons/index.js';
 import { Button } from '../../ui/index.js';
-import { JackpotCounterItem } from './JackpotCounterItem';
+import { JackpotCounterItem } from './JackpotCounterItem.js';
 export function JackpotCounter__client(props) {
     const [emblaRef, emblaApi] = useEmblaCarousel({
         align: 'start',
@@ -52,33 +53,5 @@ export function JackpotCounter__client(props) {
     const jackpots = jackpotsQuery.data?.pages[0].edges.map((edge) => edge.node) ?? [];
     if (jackpots.length <= 0)
         return null;
-    return (<div className={props.className}>
-      <div className="flex items-center justify-between">
-        <div className="text-lg font-semibold">
-          {props.heading ?? 'Jackpots'}
-        </div>
-        <div className="flex items-center md:gap-3xl">
-          <Link href={props.viewAllUrl ?? '/jackpots'} className="text-button-tertiary-fg flex gap-sm text-sm font-semibold">
-            See All
-            <ChevronRightIcon className="size-5 lg:hidden"/>
-          </Link>
-
-          <div className="hidden lg:flex">
-            <Button disabled={!canScrollPrev} onClick={scrollPrev} variant="outline" colorScheme="gray" className="rounded-r-none border-r-0" aria-label="Previous">
-              <ArrowLeftIcon className="size-5"/>
-            </Button>
-            <Button disabled={!canScrollNext} onClick={scrollNext} variant="outline" colorScheme="gray" className="rounded-l-none" aria-label="Next">
-              <span className="sr-only">Next</span>
-              <ArrowRightIcon className="size-5"/>
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      <div className="relative mt-lg lg:overflow-hidden" ref={emblaRef}>
-        <div className="flex gap-2.5">
-          {jackpots.map((jackpot) => (<JackpotCounterItem key={jackpot.id} jackpot={jackpot} className="w-full" viewAllUrl={props.viewAllUrl}/>))}
-        </div>
-      </div>
-    </div>);
+    return (_jsxs("div", { className: props.className, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-lg font-semibold", children: props.heading ?? 'Jackpots' }), _jsxs("div", { className: "flex items-center md:gap-3xl", children: [_jsxs(Link, { href: props.viewAllUrl ?? '/jackpots', 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, { disabled: !canScrollPrev, onClick: scrollPrev, variant: "outline", colorScheme: "gray", className: "rounded-r-none border-r-0", "aria-label": "Previous", children: _jsx(ArrowLeftIcon, { className: "size-5" }) }), _jsxs(Button, { disabled: !canScrollNext, onClick: scrollNext, variant: "outline", colorScheme: "gray", className: "rounded-l-none", "aria-label": "Next", children: [_jsx("span", { className: "sr-only", children: "Next" }), _jsx(ArrowRightIcon, { className: "size-5" })] })] })] })] }), _jsx("div", { className: "relative mt-lg lg:overflow-hidden", ref: emblaRef, children: _jsx("div", { className: "flex gap-2.5", children: jackpots.map((jackpot) => (_jsx(JackpotCounterItem, { jackpot: jackpot, className: "w-full", viewAllUrl: props.viewAllUrl }, jackpot.id))) }) })] }));
 }

package/dist/components/JackpotCounter/JackpotCounter.d.ts

@@ -5,4 +5,4 @@ export interface JackpotCounterProps {
     viewAllUrl?: string;
     className?: string;
 }
-export declare function JackpotCounter(props: JackpotCounterProps): Promise<import("react").JSX.Element>;
+export declare function JackpotCounter(props: JackpotCounterProps): Promise<import("react/jsx-runtime").JSX.Element>;

package/dist/components/JackpotCounter/{JackpotCounter.jsx → JackpotCounter.js}

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { prefetchJackpotsQuery } from '../../server/utils/index.js';
-import { JackpotCounter__client } from './JackpotCounter.client';
+import { JackpotCounter__client } from './JackpotCounter.client.js';
 export async function JackpotCounter(props) {
     await prefetchJackpotsQuery({
         first: 100,
@@ -16,5 +17,5 @@ export async function JackpotCounter(props) {
             order: 'DESC',
         },
     });
-    return <JackpotCounter__client {...props}/>;
+    return _jsx(JackpotCounter__client, { ...props });
 }

package/dist/components/JackpotCounter/JackpotCounterItem.d.ts

@@ -5,5 +5,5 @@ export interface JackpotCounterCardProps {
     /** @default "/jackpots" */
     viewAllUrl?: string;
 }
-export declare function JackpotCounterItem({ jackpot, className, viewAllUrl, }: JackpotCounterCardProps): import("react").JSX.Element;
+export declare function JackpotCounterItem({ jackpot, className, viewAllUrl, }: JackpotCounterCardProps): import("react/jsx-runtime").JSX.Element;
 export declare function maskName(name: string): string;