@opexa/portal-components 0.0.893 → 0.0.895

package/dist/components/Tournaments/TournamentsList/TournamentsListItem.CrazyWin.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Image from 'next/image';
+import React, { useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import coins from '../../../images/coins.webp';
+import starTrophy from '../../../images/star-trophy.webp';
+import { Tabs } from '../../../ui/Tabs/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { CRAZYWIN_TOURNAMENT_VARIATIONS } from '../utils.js';
+import TournamentTable from './TournamentListItemTable.CrazyWin.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemCrazyWin({ index }) {
+    const variation = CRAZYWIN_TOURNAMENT_VARIATIONS[index % CRAZYWIN_TOURNAMENT_VARIATIONS.length];
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [seeDetails, setSeeDetails] = useState(false);
+    const numberOfWinnersText = useMemo(() => `${tournament.winnersCount} winner${Number(tournament.winnersCount) > 1 ? 's' : ''}`, [tournament.winnersCount]);
+    return (_jsxs("div", { className: "w-full shrink-0 overflow-hidden rounded-2xl", children: [_jsxs("div", { className: twMerge('relative w-full flex-1 gap-4 rounded-t-[10px] p-4 lg:gap-10 lg:p-6', variation.background), children: [_jsx(Image, { src: variation.bgImage, alt: "treasure chest background", className: "absolute top-0 right-0 hidden h-full w-[720px] rounded-t-[10px] object-cover opacity-20 mix-blend-luminosity [mask-image:linear-gradient(to_right,transparent,black)] lg:block", priority: false, loading: "lazy", unoptimized: true }), _jsx("div", { className: "relative z-1 flex w-full flex-col", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsx("div", { className: "relative flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col lg:flex-row", children: [_jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: "flex w-fit items-center justify-center gap-1 rounded-[10px] border-[#82F0D0] border-[1px] px-[10px] py-1 text-[#82F0D0] text-xs lg:text-sm", children: [_jsx(Award01Icon, { className: "h-4 w-4 text-[#82F0D0]" }), "Multiplier"] }), _jsx("div", { className: "w-1/2 text-left font-bold text-lg lg:w-[68%] lg:text-[32px]", children: tournament.name }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]'), children: formatNumber(tournamentReward, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) }), _jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'mt-[6px] flex w-fit rounded-lg px-2 py-1 font-bold text-base lg:text-2xl'), children: numberOfWinnersText })] })] }), _jsxs("div", { className: "flex flex-col items-center justify-between", children: [_jsx("div", { className: twMerge('relative my-4 h-[129px] w-full overflow-hidden rounded-lg lg:hidden', variation.background), children: _jsx(Image, { src: variation.bgImage, alt: "image", className: "h-full w-full object-cover mix-blend-luminosity", priority: false, loading: "lazy", unoptimized: true }) }), _jsxs("div", { className: "flex w-full flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-bg-primary px-2 py-1.5 font-semibold text-[#EAAA08] text-sm'), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-text-secondary-700'), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-bg-primary py-1 font-semibold text-brand-500 text-sm'), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit w-full gap-2", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge(variation.poolBg, variation.textColor, variation.timeBorderColor, 'flex h-fit flex-1 flex-col items-center rounded-lg border-[1px] py-3 lg:w-[59px] lg:py-[6px]'), children: [_jsx("span", { className: "font-semibold text-lg lg:text-2xl", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-2xs lg:text-xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex shrink-0 flex-col justify-center gap-1.5 px-1", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) }))] }), _jsx("div", { className: "mt-2xl w-fit", children: _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex h-full flex-row-reverse items-center justify-start lg:flex-col", children: [_jsx(Image, { src: coins, alt: "coins", className: "w-[179.2px] lg:w-[132.26px]", unoptimized: true }), _jsxs("div", { className: "text-start lg:text-center", children: [_jsx("p", { className: "mt-1 font-semibold text-[16px] leading-6", children: "No one has won big yet" }), _jsx("p", { className: "mt-1 text-start text-xs leading-[1.125rem] lg:text-center", children: "You could be the first to win the tournament!" })] })] }) }) })] })] }) }) }) }) }) })] }), _jsxs("div", { className: "relative flex w-full flex-col items-center rounded-b-2xl bg-[#171b26] px-4 text-[#94969C]", children: [_jsxs("div", { className: "flex w-full justify-between py-4", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center rounded-lg border border-[#333741] px-4 py-2.5 font-semibold text-[#CECFD2]", children: "Tournament Rules" })] }), seeDetails && (_jsxs("div", { className: "mt-2 w-full", children: [_jsx("div", { children: _jsx("div", { className: "mt-[6px] flex justify-between text-[#CECFD2] text-lg", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: starTrophy, alt: "star trophy", unoptimized: true }), "Ranking"] }) }) }), _jsx("div", { children: _jsxs(Tabs.Root, { defaultValue: "current", className: "mt-4", children: [_jsxs(Tabs.List, { className: "flex gap-1 rounded-xl border border-[#1F242F] bg-[#1A1620] p-1 font-semibold text-[#757278] text-sm leading-[0.01em] lg:w-fit", children: [_jsx(Tabs.Trigger, { value: "current", className: "ui-selected:text-white", children: "Current" }), _jsx(Tabs.Trigger, { value: "previous", className: "ui-selected:text-white", children: "Previous" }), _jsx(Tabs.Indicator, { className: "bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]" })] }), _jsx(Tabs.Content, { value: "current", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) }), _jsx(Tabs.Content, { value: "previous", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) })] }) }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })) })] }))] })] }));
+}

package/dist/components/Tournaments/TournamentsList/TournamentsListItem.HappyBingo.d.ts

@@ -0,0 +1,3 @@
+export declare function TournamentsListItemHappyBingo({ index }: {
+    index: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tournaments/TournamentsList/TournamentsListItem.HappyBingo.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { format } from 'date-fns';
+import Image from 'next/image';
+import React, { useMemo, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { Award01Icon } from '../../../icons/Award01Icon.js';
+import { ChevronDownIcon } from '../../../icons/ChevronDownIcon.js';
+import { ChevronUpIcon } from '../../../icons/ChevronUpIcon.js';
+import star from '../../../images/3d-star.webp';
+import coins from '../../../images/happy-bingo-coins.webp';
+import { Tabs } from '../../../ui/Tabs/index.js';
+import { formatNumber } from '../../../utils/formatNumber.js';
+import { HAPPY_BINGO_TOURNAMENT_VARIATIONS } from '../utils.js';
+import TournamentTable from './TournamentListItemTable.HappyBingo.js';
+import { useTournamentsListItemContext } from './TournamentsListContext.js';
+import { TournamentsListItemGameProviders } from './TournamentsListItemGameProviders.js';
+import { useTournamentsListItemData } from './useTournamentListItemData.js';
+import { useTournamentTimer } from './useTournamentTimer.js';
+export function TournamentsListItemHappyBingo({ index }) {
+    const variation = HAPPY_BINGO_TOURNAMENT_VARIATIONS[index % HAPPY_BINGO_TOURNAMENT_VARIATIONS.length];
+    const tournament = useTournamentsListItemContext();
+    const { isLaunchStarts, timeParts, now } = useTournamentTimer({
+        activationEndDateTime: tournament.activationEndDateTime,
+        activationStartDateTime: tournament.activationStartDateTime,
+    });
+    const { tournamentReward, filteredGameProviders, localeInfo } = useTournamentsListItemData();
+    const isEnded = new Date(tournament.activationEndDateTime) < now;
+    const [seeDetails, setSeeDetails] = useState(false);
+    const numberOfWinnersText = useMemo(() => `${tournament.winnersCount} winner${Number(tournament.winnersCount) > 1 ? 's' : ''}`, [tournament.winnersCount]);
+    return (_jsxs("div", { className: "w-full shrink-0 overflow-hidden rounded-2xl", children: [_jsxs("div", { className: twMerge('relative w-full flex-1 gap-4 rounded-t-[10px] p-4 lg:gap-10 lg:p-6', variation.background), children: [_jsx(Image, { src: variation.bgImage, alt: "treasure chest background", className: "absolute top-0 right-0 hidden h-full w-[720px] rounded-t-[10px] object-cover opacity-20 mix-blend-luminosity [mask-image:linear-gradient(to_right,transparent,black)] lg:block", priority: false, loading: "lazy", unoptimized: true }), _jsx("div", { className: "relative z-1 flex w-full flex-col", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsx("div", { className: "flex w-full justify-between", children: _jsx("div", { className: "flex w-full flex-col", children: _jsx("div", { className: "relative flex w-full justify-between", children: _jsxs("div", { className: "flex w-full flex-col lg:flex-row", children: [_jsxs("div", { className: "flex w-full flex-col", children: [_jsxs("div", { className: twMerge('flex h-fit w-fit items-center justify-center gap-1 rounded-[8px] border-[1px] bg-[#EFF8FF] px-[10px] py-1 text-xs lg:text-sm', variation.multiplierBadgeColor, variation.multiplierBadgeBorderColor, variation.darkMultiplierBadgeColor, variation.darkMultiplierBadgeBorderColor, variation.darkMultiplierBg), children: [_jsx(Award01Icon, { className: "size-4" }), _jsx("span", { children: "Multiplier" })] }), _jsx("div", { className: "w-1/2 text-left font-bold text-lg lg:w-[68%] lg:text-[32px]", children: tournament.name }), _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'flex w-fit rounded-lg px-2 font-semibold text-[26px] lg:text-[36px]'), children: formatNumber(tournamentReward, {
+                                                                        currency: localeInfo.currency.code,
+                                                                        minDecimalPlaces: 2,
+                                                                        maxDecimalPlaces: 2,
+                                                                    }) }), _jsx("div", { className: twMerge(variation.poolBg, variation.textColor, 'mt-[6px] flex w-fit rounded-lg px-2 py-1 font-bold text-base lg:text-2xl'), children: numberOfWinnersText })] })] }), _jsxs("div", { className: "flex flex-col items-center justify-between", children: [_jsx("div", { className: twMerge('relative my-4 h-[129px] w-full overflow-hidden rounded-lg lg:hidden', variation.background), children: _jsx(Image, { src: variation.bgImage, alt: "image", className: 'h-full w-full object-cover mix-blend-luminosity', priority: false, loading: "lazy", unoptimized: true }) }), _jsxs("div", { className: "flex w-full flex-col", children: [isEnded && (_jsxs("div", { className: twMerge('mb-2 flex flex-col items-center justify-center whitespace-nowrap rounded-md bg-bg-primary px-2 py-1.5 font-semibold text-[#EAAA08] text-sm'), children: [_jsx("span", { className: "font-semibold", children: "Ended" }), _jsx("span", { className: twMerge('text-[9px] text-text-secondary-700'), children: format(tournament.activationEndDateTime, 'MMMM dd, yyyy') })] })), !isLaunchStarts && !isEnded && (_jsx("div", { className: twMerge('mb-2 flex items-center justify-center rounded-md bg-bg-primary py-1 font-semibold text-brand-500 text-sm'), children: "Launching Soon" })), !isEnded && (_jsx("div", { className: "flex h-fit w-full gap-2", children: timeParts.map((part, idx) => (_jsxs(React.Fragment, { children: [_jsxs("div", { className: twMerge(variation.poolBg, variation.textColor, variation.timeBorderColor, 'flex h-fit flex-1 flex-col items-center rounded-lg border-[1px] py-3 lg:w-[59px] lg:py-[6px]'), children: [_jsx("span", { className: "font-semibold text-lg lg:text-2xl", children: String(part.value).padStart(2, '0') }), _jsx("span", { className: "text-2xs lg:text-xs", children: part.label })] }), idx < timeParts.length - 1 && (_jsxs("div", { className: "flex shrink-0 flex-col justify-center gap-1.5 px-1", children: [_jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" }), _jsx("div", { className: "h-1 w-1 rounded-full bg-bg-primary" })] }))] }, part.label))) }))] }), _jsx("div", { className: "mt-2xl w-fit", children: _jsx("div", { className: "flex w-full", children: _jsxs("div", { className: "flex h-full flex-row-reverse items-center justify-start lg:flex-col", children: [_jsx(Image, { src: coins, alt: "coins", className: "w-[179.2px] lg:w-[132.26px]", unoptimized: true }), _jsxs("div", { className: "text-start lg:text-center", children: [_jsx("p", { className: "mt-1 font-semibold text-[16px] leading-6", children: "No one has won big yet" }), _jsx("p", { className: "mt-1 text-start text-xs leading-[1.125rem] lg:text-center", children: "You could be the first to win the tournament!" })] })] }) }) })] })] }) }) }) }) }) })] }), _jsxs("div", { className: "relative flex w-full flex-1 flex-col items-center justify-between bg-white px-4 py-3.5 text-[#475467] dark:bg-[#161B26] dark:text-[#94969C]", children: [_jsxs("div", { className: "flex w-full justify-between", children: [_jsxs("button", { onClick: () => setSeeDetails((v) => !v), type: "button", className: "flex items-center gap-1 font-medium text-sm", children: ["See details", ' ', seeDetails ? (_jsx(ChevronUpIcon, { className: "h-5" })) : (_jsx(ChevronDownIcon, { className: "h-5" }))] }), _jsx("button", { type: "button", className: "inline-flex h-9 items-center justify-center gap-1.5 rounded-lg border border-[#EAAA08] bg-white px-4 py-2.5 font-semibold text-[#A15C07] text-sm shadow-xs transition-colors duration-200 hover:border-[#FDE272] hover:bg-[#FEFBE8] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-[#EAAA08] disabled:hover:bg-white dark:border-[#333741] dark:bg-[#161B26] dark:text-[#CECFD2] dark:disabled:hover:border-[#333741] dark:disabled:hover:bg-[#161B26]", children: "Tournament Rules" })] }), seeDetails && (_jsxs("div", { className: "mt-2 w-full", children: [_jsx("div", { children: _jsx("div", { className: "mt-[6px] flex justify-between text-[#344054] text-lg dark:text-[#CECFD2]", children: _jsxs("div", { className: "flex items-center gap-3 font-semibold", children: [_jsx(Image, { src: star, alt: "3d star", className: "size-6", unoptimized: true }), "Ranking"] }) }) }), _jsx("div", { children: _jsxs(Tabs.Root, { defaultValue: "current", className: "mt-4", children: [_jsxs(Tabs.List, { className: "flex gap-1 rounded-xl border border-[#EAECF0] bg-[#F9FAFB] p-1 font-semibold text-[#667085] text-sm leading-[0.01em] lg:w-fit dark:border-[#1F242F] dark:bg-[#0C111D] dark:text-[#757278]", children: [_jsx(Tabs.Trigger, { value: "current", className: "ui-selected:text-[#475467] ui-selected:dark:text-[#94969C]", children: "Current" }), _jsx(Tabs.Trigger, { value: "previous", className: "ui-selected:text-[#475467] ui-selected:dark:text-[#94969C]", children: "Previous" }), _jsx(Tabs.Indicator, { className: "bg-[white] dark:bg-[#161B26]" })] }), _jsx(Tabs.Content, { value: "current", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) }), _jsx(Tabs.Content, { value: "previous", children: _jsx(TournamentTable, { winnersCount: Number(tournament.winnersCount), rewardSettings: tournament.rewardSettings, leaderboard: tournament.currentLeaderboard
+                                                    .edges }) })] }) }), _jsx("div", { className: "w-full", children: Boolean(filteredGameProviders.length) && (_jsx(TournamentsListItemGameProviders, { gameProviders: filteredGameProviders })) })] }))] })] }));
+}

package/dist/components/Tournaments/utils.d.ts

@@ -0,0 +1,31 @@
+export declare const HAPPY_BINGO_TOURNAMENT_VARIATIONS: {
+    background: string;
+    progressBg: string;
+    textColor: string;
+    poolBg: string;
+    multiplierColor: string;
+    multiplierBg: string;
+    topRankImgBorderColor: string;
+    topRankImgBg: string;
+    timeBorderColor: string;
+    timeEllipsesColor: string;
+    multiplierBadgeColor: string;
+    multiplierBadgeBorderColor: string;
+    darkMultiplierBadgeColor: string;
+    darkMultiplierBadgeBorderColor: string;
+    darkMultiplierBg: string;
+    bgImage: import("next/image").StaticImageData;
+}[];
+export declare const CRAZYWIN_TOURNAMENT_VARIATIONS: {
+    background: string;
+    progressBg: string;
+    textColor: string;
+    poolBg: string;
+    multiplierColor: string;
+    multiplierBg: string;
+    topRankImgBorderColor: string;
+    topRankImgBg: string;
+    timeBorderColor: string;
+    timeEllipsesColor: string;
+    bgImage: import("next/image").StaticImageData;
+}[];

package/dist/components/Tournaments/utils.js

@@ -0,0 +1,106 @@
+import tournaBgOne from '../../images/tournament-bg-1.webp';
+import tournaBgTwo from '../../images/tournament-bg-2.webp';
+import tournaBgThree from '../../images/tournament-bg-3.webp';
+export const HAPPY_BINGO_TOURNAMENT_VARIATIONS = [
+    // Yellow
+    {
+        background: 'bg-[linear-gradient(241.67deg,#FFD238_1.19%,#FF7D02_100%)]',
+        progressBg: 'bg-[#CA8504]',
+        textColor: 'text-[#713B12]',
+        poolBg: 'bg-[linear-gradient(180deg,#FFDE21_0%,#FFD012_47%,#FFBF00_100%)]',
+        multiplierColor: 'text-[#713B12]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#FFD238_1.19%,#FF7D02_100%)]',
+        topRankImgBorderColor: 'bg-[linear-gradient(180deg,#FFDE21_28.33%,#FFBF00_57.84%,#FF9442_100%)]',
+        topRankImgBg: 'bg-[#FFD238]',
+        timeBorderColor: 'border-[#ffe74d]',
+        timeEllipsesColor: 'bg-[#A15C07]',
+        multiplierBadgeColor: 'text-[#B54708]',
+        multiplierBadgeBorderColor: 'border-[#FEDF89]',
+        darkMultiplierBadgeColor: 'dark:text-[#FEC84B]',
+        darkMultiplierBadgeBorderColor: 'dark:border-[#93370D]',
+        darkMultiplierBg: 'dark:bg-[#4E1D09]',
+        bgImage: tournaBgTwo,
+    },
+    // Blue
+    {
+        background: 'bg-[linear-gradient(241.67deg,#01C1FA_1.19%,#015EEA_100%)]',
+        progressBg: 'bg-[#01C4FB]',
+        textColor: 'text-[#344054]',
+        poolBg: 'bg-[linear-gradient(180deg,_#89F7FE_0%,_#66A6FF_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,_#01C1FA_1.19%,_#015EEA_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topRankImgBorderColor: 'bg-[linear-gradient(180deg,_#89F7FE_0%,_#66A6FF_100%)]',
+        topRankImgBg: 'bg-[#01C1FA]',
+        timeBorderColor: 'border-[#85baff]',
+        timeEllipsesColor: 'bg-white',
+        multiplierBadgeColor: 'text-[#175CD3]',
+        multiplierBadgeBorderColor: 'border-[#B2DDFF]',
+        darkMultiplierBadgeColor: 'dark:text-[#84CAFF]',
+        darkMultiplierBadgeBorderColor: 'dark:border-[#1849A9]',
+        darkMultiplierBg: 'dark:bg-[#102A56]',
+        bgImage: tournaBgOne,
+    },
+    // Purple
+    {
+        background: 'bg-[linear-gradient(45deg,#4300B1_0%,#A531DC_100%)]',
+        progressBg: 'bg-[#B485FF]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,#9E77ED_0%,#8057D9_100%)]',
+        multiplierBg: 'bg-[linear-gradient(45deg,_#4300B1_0%,_#A531DC_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topRankImgBorderColor: 'bg-[linear-gradient(180deg,#9E77ED_0%,#8057D9_100%)]',
+        topRankImgBg: 'bg-[#5E0DBD]',
+        timeBorderColor: 'border-[#9879e0]',
+        timeEllipsesColor: 'bg-white',
+        multiplierBadgeColor: 'text-[#6941C6]',
+        multiplierBadgeBorderColor: 'border-[#E9D7FE]',
+        darkMultiplierBadgeColor: 'dark:text-[#D6BBFB]',
+        darkMultiplierBadgeBorderColor: 'dark:border-[#53389E]',
+        darkMultiplierBg: 'dark:bg-[#2C1C5F]',
+        bgImage: tournaBgThree,
+    },
+];
+export const CRAZYWIN_TOURNAMENT_VARIATIONS = [
+    // Green
+    {
+        background: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        progressBg: 'bg-[#073333]',
+        textColor: 'text-[#09232E]',
+        poolBg: 'bg-[linear-gradient(6.3deg,#215B5F_4.86%,#88FFD7_119.22%)]',
+        multiplierColor: 'text-[#fff]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        topRankImgBorderColor: 'bg-[linear-gradient(6.3deg,#215B5F_4.86%,#88FFD7_119.22%)]',
+        topRankImgBg: 'bg-[linear-gradient(241.67deg,#1A534C_1.19%,#051B29_100%)]',
+        timeBorderColor: 'border-[#4e7c80]',
+        timeEllipsesColor: 'bg-[#09232E]',
+        bgImage: tournaBgTwo,
+    },
+    // Purple
+    {
+        background: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        progressBg: 'bg-[#301059]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,#7442D9_0%,#451C7D_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topRankImgBorderColor: 'bg-[linear-gradient(180deg,_#9E77ED_0%,#8057D9_100%)]',
+        topRankImgBg: 'bg-[linear-gradient(241.67deg,#1C1D83_1.19%,#31033F_100%)]',
+        timeBorderColor: 'border-[#6b4b99]',
+        timeEllipsesColor: 'bg-white',
+        bgImage: tournaBgThree,
+    },
+    // Red
+    {
+        background: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        progressBg: 'bg-[#A63D40]',
+        textColor: 'text-[#fff]',
+        poolBg: 'bg-[linear-gradient(180deg,_#D05C58_0%,_#75222E_100%)]',
+        multiplierBg: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        multiplierColor: 'text-[#fff]',
+        topRankImgBorderColor: 'bg-[linear-gradient(180deg,#D05C58_0%,#75222E_100%)]',
+        topRankImgBg: 'bg-[linear-gradient(241.67deg,#F86246_1.19%,#5B0A26_100%)]',
+        timeBorderColor: 'border-[#914e59]',
+        timeEllipsesColor: 'bg-white',
+        bgImage: tournaBgOne,
+    },
+];

package/dist/components/shared/IdDocumentField.client.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../utils/validateFile';
+export interface IdDocumentFieldProps extends UseIdDocumentFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError) => void;
+}
+export declare function IdDocumentField__client(props: IdDocumentFieldProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * -------------------------------------
+ *  Context
+ * -------------------------------------
+ */
+interface UseIdDocumentFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export {};

package/dist/components/shared/IdDocumentField.client.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldContext } from '@ark-ui/react';
+import Image from 'next/image';
+import { useEffect, useId, useRef, useState, } from 'react';
+import { twMerge } from 'tailwind-merge';
+import { useMediaQuery } from 'usehooks-ts';
+import { useCamera } from '../../client/hooks/useCamera.js';
+import { useControllableState } from '../../client/hooks/useControllableState.js';
+import { useDisclosure } from '../../client/hooks/useDisclosure.js';
+import { useFileQuery } from '../../client/hooks/useFileQuery.js';
+import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { createContext } from '../../client/utils/createContext.js';
+import { toaster } from '../../client/utils/toaster.js';
+import { Camera01Icon } from '../../icons/Camera01Icon.js';
+import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
+import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
+import { RefreshCcw01Icon } from '../../icons/RefreshCcw01Icon.js';
+import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
+import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
+import { XIcon } from '../../icons/XIcon.js';
+import { Button } from '../../ui/Button/index.js';
+import { Dialog } from '../../ui/Dialog/index.js';
+import { Portal } from '../../ui/Portal/index.js';
+import { validateFile } from '../../utils/validateFile.js';
+export function IdDocumentField__client(props) {
+    const context = useIdDocumentField(props);
+    return (_jsxs(IdDocumentFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0];
+                    if (!file)
+                        return;
+                    const error = validateFile(file);
+                    if (error)
+                        return props.onError?.(error);
+                    context.mutation.mutate({ file });
+                }, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                            const file = e.target.files?.[0];
+                            if (!file)
+                                return;
+                            const error = validateFile(file);
+                            if (error)
+                                return props.onError?.(error);
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            props.disabled, readOnly: context.field?.readOnly || props.readOnly, required: context.field?.required || props.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
+                                                    props.disabled ||
+                                                    props.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
+                                    props.disabled ||
+                                    props.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useIdDocumentFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
+                                                    context.camera.reopen();
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
+                                        context.camera.snap({
+                                            crop: context.guideRef.current?.getBoundingClientRect(),
+                                        });
+                                    }, disabled: context.camera.snapping ||
+                                        context.camera.loading ||
+                                        !!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
+                                            const file = context.camera.data?.file;
+                                            if (!file)
+                                                return;
+                                            context.mutation.mutate({ file });
+                                            context.disclosure.setOpen(false);
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/**
+ * -------------------------------------
+ *  Video
+ * -------------------------------------
+ */
+function Video() {
+    const id = useId();
+    const context = useIdDocumentFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        const update = () => {
+            const guide = context.guideRef.current;
+            const mask = context.maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            const x = guideRect.left - maskRect.left;
+            const y = guideRect.top - maskRect.top;
+            const width = guideRect.width;
+            const height = guideRect.height;
+            if (width && height) {
+                setMaskBox({
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+            }
+        };
+        const observer = new ResizeObserver(update);
+        if (context.guideRef.current)
+            observer.observe(context.guideRef.current);
+        if (context.maskRef.current)
+            observer.observe(context.maskRef.current);
+        requestAnimationFrame(update);
+        return () => observer.disconnect();
+    }, [context.guideRef, context.maskRef]);
+    return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
+            ? 'block'
+            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
+                    mask: `url(#${id})`,
+                    WebkitMask: `url(#${id})`,
+                    maskRepeat: 'no-repeat',
+                    WebkitMaskRepeat: 'no-repeat',
+                } }), _jsx("div", { ref: context.guideRef, className: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed transition-all duration-200" })] }));
+}
+function useIdDocumentField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    const camera = useCamera({
+        video: {
+            facingMode: desktop ? 'user' : 'environment',
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}
+const [IdDocumentFieldProvider, useIdDocumentFieldContext] = createContext();

package/dist/components/shared/IdDocumentField.d.ts

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

package/dist/components/shared/IdDocumentField.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
+const Component = dynamic(() => import('./IdDocumentField.client.js').then((mod) => mod.IdDocumentField__client), {
+    ssr: false,
+    loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
+});
+export function IdDocumentField(props) {
+    return _jsx(Component, { ...props });
+}

package/dist/components/shared/SelfieField.client.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties, type RefObject } from 'react';
+import { type ValidateFileError } from '../../utils/validateFile';
+export interface SelfieFieldProps extends UseSelfieFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    invalid?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onError?: (error: ValidateFileError<'FaceNotFoundError'>) => void;
+}
+export declare function SelfieField__client(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
+interface UseSelfieFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export {};