@opexa/portal-components 0.0.17 → 0.0.19

package/dist/components/Account/Account.d.ts

@@ -1,12 +1,21 @@
-import { ComponentProps, ComponentType, ReactNode } from 'react';
-interface AccountLink {
-    icon: ComponentType<ComponentProps<'svg'>>;
-    href: string;
-    label: string;
-}
+import { ReactNode } from 'react';
 export interface AccountProps {
-    links?: AccountLink[];
     children?: ReactNode;
+    /**
+     * @default '0px'
+     * @example
+     * ```tsx
+     * offsetTop="1em"
+     * offsetTop="1rem"
+     * offsetTop="16px"
+     * ```
+     */
+    offsetTop?: string;
+    /** @default '/rewards' */
+    rewardsUrl?: string;
+    /** @default '/bet-records' */
+    betRecordsUrl?: string;
+    /** @default '/transactions' */
+    transactionsUrl?: string;
 }
 export declare function Account(props: AccountProps): import("react").JSX.Element;
-export {};

package/dist/components/Account/Account.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("@ark-ui/react"),g=require("next/link"),u=require("zustand/shallow"),q=require("../../client/hooks/useAccountQuery.js");require("@tanstack/react-query");require("../../utils/capitalize.js");const y=require("../../utils/formatNumber.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");require("../../utils/parseDecimal.js");require("@opexa/portal-sdk-core");require("tiny-invariant");require("react");require("lodash-es");require("@opexa/portal-sdk-core/object-id");const d=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const N=require("../../client/hooks/useLocaleInfo.js");require("usehooks-ts");const w=require("../../client/hooks/useSignOutMutation.js"),O=require("../../client/hooks/useWalletQuery.js"),m=require("../../icons/ChevronRightIcon.js"),P=require("../../icons/Logout01Icon.js"),c=require("../../icons/User01Icon.js");require("../../ui/AlertDialog/AlertDialog.js");const o=require("../../ui/Avatar/Avatar.js");require("../../ui/Badge/Badge.js");const h=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");const n=require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");require("../../ui/IconButton/iconButton.recipe.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PinInput/PinInput.js");const a=require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");function v(s){const i=d.useGlobalStore(u.useShallow(r=>({profile:r.profile,mobileProfile:r.mobileProfile})));return e.jsxs(e.Fragment,{children:[e.jsxs(n.Root,{open:i.profile.open,onOpenChange:r=>{i.profile.setOpen(r.open)},lazyMount:!0,unmountOnExit:!0,children:[e.jsx(n.Trigger,{asChild:!0,className:"lg:hidden",children:s.children??e.jsx("button",{type:"button",children:e.jsx(o.Root,{children:e.jsx(o.Fallback,{children:e.jsx(c.User01Icon,{})})})})}),e.jsxs(x.Portal,{children:[e.jsx(n.Backdrop,{}),e.jsx(n.Positioner,{children:e.jsxs(n.Content,{className:"bg-gray-50 flex w-[316px] flex-col px-xl py-6",children:[e.jsx(f,{}),e.jsx(j,{}),e.jsx(b,{links:s.links??[]}),e.jsx("div",{className:"grow"}),e.jsx(p,{})]})})]})]}),e.jsxs(a.Root,{open:i.mobileProfile.open,onOpenChange:r=>{i.mobileProfile.setOpen(r.open)},lazyMount:!0,unmountOnExit:!0,positioning:{placement:"bottom"},children:[e.jsx(a.Trigger,{className:"hidden lg:flex",asChild:!0,children:s.children??e.jsx("button",{type:"button",children:e.jsx(o.Root,{children:e.jsx(o.Fallback,{children:e.jsx(c.User01Icon,{})})})})}),e.jsx(x.Portal,{children:e.jsx(a.Positioner,{children:e.jsxs(a.Content,{className:"border-gray-200 z-popover w-[316px] rounded-xl border bg-white p-xl ui-open:animate-fade-in ui-closed:animate-fade-out",children:[e.jsx(f,{}),e.jsx(j,{}),e.jsx(b,{links:s.links??[]}),e.jsx(p,{})]})})})]})]})}function p(){return e.jsx("div",{className:"text-gray-400 mt-xl text-center text-2xs",children:"© 2025 HappyBingo All rights reserved"})}function f(){var i,r,l,t;const s=q.useAccountQuery();return e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(o.Root,{children:e.jsx(o.Fallback,{children:e.jsx(c.User01Icon,{})})}),e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-semibold",children:(i=s.data)==null?void 0:i.name}),e.jsx("p",{className:"text-gray-400 text-xs",children:((r=s.data)==null?void 0:r.nickName)??((l=s.data)==null?void 0:l.emailAddress)??((t=s.data)==null?void 0:t.realName)})]})]})}function b(s){const i=w.useSignOutMutation(),r=d.useGlobalStore(u.useShallow(l=>({profile:l.profile,mobileProfile:l.mobileProfile})));return e.jsxs("nav",{className:"mt-xl space-y-xl",children:[e.jsx("ul",{children:s.links.map((l,t)=>e.jsx("li",{className:"border-gray-200 block border-x border-b bg-white first:rounded-t-xl first:border-t last:rounded-b-xl",children:e.jsxs(g,{href:l.href,onClick:()=>{r.profile.setOpen(!1),r.mobileProfile.setOpen(!1)},className:"flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold",children:[e.jsx(l.icon,{className:"size-5"}),e.jsx("span",{className:"grow",children:l.label}),e.jsx(m.ChevronRightIcon,{className:"text-gray-400 size-5"})]})},l.href+t))}),e.jsx("ul",{children:e.jsx("li",{className:"border-gray-200 block rounded-xl border bg-white",children:e.jsxs("button",{type:"button",className:"flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold",disabled:i.isPending,onClick:()=>{i.mutate(),r.profile.setOpen(!1),r.mobileProfile.setOpen(!1)},children:[e.jsx(P.Logout01Icon,{className:"size-5"}),e.jsx("span",{className:"grow",children:"Log Out"}),e.jsx(m.ChevronRightIcon,{className:"text-gray-400 size-5"})]})})})]})}function j(){var l;const s=N.useLocaleInfo(),i=O.useWalletQuery({refetchInterval:1e3}),r=d.useGlobalStore(u.useShallow(t=>({profile:t.profile,mobileProfile:t.mobileProfile,depositWithdrawal:t.depositWithdrawal})));return e.jsxs("div",{className:"border-gray-200 mt-3 rounded-lg border bg-white p-xl",children:[e.jsx("div",{className:"border-gray-200 bg-gray-50 text-gray-600 w-fit rounded-sm border px-1.5 py-0.5 text-xs font-medium",children:"Available Balance"}),e.jsx("div",{className:"mt-2 text-3xl font-semibold",children:y.formatNumber((l=i.data)==null?void 0:l.balance,{currency:s==null?void 0:s.currency.code,minDecimalPlaces:2})}),e.jsxs("div",{className:"mt-3 flex gap-lg",children:[e.jsx(h.Button,{size:"xs",variant:"outline",colorScheme:"gray",onClick:()=>{r.depositWithdrawal.setOpen(!0),r.depositWithdrawal.setTab("WITHDRAWAL"),r.profile.setOpen(!1),r.mobileProfile.setOpen(!1)},children:"Withdraw"}),e.jsx(h.Button,{size:"xs",onClick:()=>{r.depositWithdrawal.setOpen(!0),r.depositWithdrawal.setTab("DEPOSIT"),r.profile.setOpen(!1),r.mobileProfile.setOpen(!1)},children:"Deposit"})]})]})}exports.Account=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("@ark-ui/react"),p=require("next/image"),m=require("next/link"),C=require("zustand/shallow"),w=require("../../client/hooks/useAccountQuery.js");require("@tanstack/react-query");require("../../utils/capitalize.js");const x=require("../../utils/formatNumber.js");require("../../constants/index.js");require("../../utils/getLocaleInfo.js");require("../../utils/getQueryClient.js");require("../../utils/isMobile.js");const v=require("../../utils/parseDecimal.js");require("../../client/services/getSession.js");require("@opexa/portal-sdk-core");require("tiny-invariant");require("react");require("lodash-es");require("@opexa/portal-sdk-core/object-id");const P=require("../../client/hooks/useGlobalStore.js");require("../../client/hooks/useInfiniteQueryHelper.js");const R=require("../../client/hooks/useLocaleInfo.js");require("usehooks-ts");const S=require("../../client/hooks/useSignOutMutation.js"),L=require("../../client/hooks/useUnreadMessagesCountQuery.js"),k=require("../../client/hooks/useWalletQuery.js"),B=require("../../icons/AlertCircleIcon.js"),i=require("../../icons/ChevronRightIcon.js"),W=require("../../icons/CoinsStacked02Icon.js"),D=require("../../icons/CoinsSwap02Icon.js"),z=require("../../icons/Gift01Icon.js"),b=require("../../icons/Logout01Icon.js"),A=require("../../icons/Settings02Icon.js"),Q=require("../../icons/XIcon.js"),j=require("../../images/placeholder-avatar.png.js");require("../../ui/AlertDialog/AlertDialog.js");require("../../ui/Avatar/Avatar.js");const h=require("../../ui/Badge/Badge.js"),N=require("../../ui/Button/Button.js");require("../../ui/Checkbox/Checkbox.js");require("../../ui/Clipboard/Clipboard.js");require("../../ui/Collapsible/Collapsible.js");require("../../ui/Combobox/Combobox.js");require("../../ui/DatePicker/DatePicker.js");require("../../ui/Dialog/Dialog.js");const c=require("../../ui/Drawer/Drawer.js");require("../../ui/Field/Field.js");const q=require("../../ui/IconButton/IconButton.js");require("../../ui/NumberInput/NumberInput.js");require("../../ui/PasswordInput/PasswordInput.js");require("../../ui/PinInput/PinInput.js");const d=require("../../ui/Popover/Popover.js");require("tailwind-merge");require("../../ui/Progress/Progress.js");require("../../ui/SegmentGroup/SegmentGroup.js");require("../../ui/Select/Select.js");require("../../ui/Table/Table.js");require("../../ui/Tabs/Tabs.js");const T=require("./account.recipe.js"),r=T.accountRecipe();function M(n){const s=P.useGlobalStore(C.useShallow(a=>({profile:a.profile,mobileProfile:a.mobileProfile,messages:a.messages}))),t=S.useSignOutMutation(),o=L.useUnreadMessagesCountQuery({},{refetchInterval:5e3}),l=e.jsxs("nav",{className:r.nav(),children:[e.jsxs("ul",{children:[e.jsx("li",{className:r.navItemRoot(),children:e.jsxs("button",{type:"button",className:r.navItemLink(),onClick:()=>{s.profile.setOpen(!1),s.mobileProfile.setOpen(!1),s.messages.setOpen(!0)},children:[e.jsx(b.Logout01Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Notifications"}),e.jsx("span",{className:r.navItemBadge(),"data-type":"warning",children:o.data??0}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})}),e.jsx("li",{className:r.navItemRoot(),children:e.jsxs(m,{href:n.rewardsUrl??"/rewards",className:r.navItemLink(),onClick:()=>{s.profile.setOpen(!1),s.mobileProfile.setOpen(!1)},children:[e.jsx(z.Gift01Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Rewards"}),e.jsx("span",{className:r.navItemBadge(),"data-type":"warning",children:"0"}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})})]}),e.jsx("ul",{children:e.jsx("li",{className:r.navItemRoot(),children:e.jsxs("button",{type:"button",className:r.navItemLink(),onClick:()=>{s.profile.setOpen(!1),s.mobileProfile.setOpen(!1)},children:[e.jsx(A.Settings02Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Settings"}),e.jsx("span",{className:r.navItemBadge(),"data-type":"error",children:e.jsx(B.AlertCircleIcon,{})}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})})}),e.jsxs("ul",{children:[e.jsx("li",{className:r.navItemRoot(),children:e.jsxs(m,{href:n.betRecordsUrl??"/bet-records",className:r.navItemLink(),onClick:()=>{s.profile.setOpen(!1),s.mobileProfile.setOpen(!1)},children:[e.jsx(W.CoinsStacked02Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Bet Records"}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})}),e.jsx("li",{className:r.navItemRoot(),children:e.jsxs(m,{href:n.transactionsUrl??"/transactions",className:r.navItemLink(),onClick:()=>{s.profile.setOpen(!1),s.mobileProfile.setOpen(!1)},children:[e.jsx(D.CoinsSwap02Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Transactions"}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})})]}),e.jsx("ul",{children:e.jsx("li",{className:r.navItemRoot(),children:e.jsxs("button",{type:"button",className:r.navItemLink(),disabled:t.isPending,onClick:()=>{t.mutate(),s.profile.setOpen(!1),s.mobileProfile.setOpen(!1)},children:[e.jsx(b.Logout01Icon,{className:r.navItemIcon()}),e.jsx("span",{className:r.navItemLabel(),children:"Log Out"}),e.jsx(i.ChevronRightIcon,{className:r.navItemIndicator()})]})})})]});return e.jsxs(e.Fragment,{children:[e.jsxs(c.Root,{open:s.mobileProfile.open,onOpenChange:a=>{s.mobileProfile.setOpen(a.open)},lazyMount:!0,unmountOnExit:!0,children:[e.jsx(c.Trigger,{asChild:!0,className:"lg:hidden",children:n.children??e.jsx(q.IconButton,{size:"sm",colorScheme:"gray",children:s.mobileProfile.open?e.jsx(Q.XIcon,{}):e.jsx(p,{src:j,alt:"",width:100,height:100,className:"size-10"})})}),e.jsx(g.Portal,{children:e.jsx(c.Positioner,{children:e.jsxs(c.Content,{className:"top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6",style:{"--top":n.offsetTop??"0px"},children:[e.jsx(y,{}),e.jsx(O,{}),l]})})})]}),e.jsxs(d.Root,{open:s.profile.open,onOpenChange:a=>{s.profile.setOpen(a.open)},lazyMount:!0,unmountOnExit:!0,positioning:{placement:"bottom",strategy:"fixed"},children:[e.jsx(d.Trigger,{className:"hidden lg:flex",asChild:!0,children:n.children??e.jsx(q.IconButton,{size:"sm",colorScheme:"gray",children:e.jsx(p,{src:j,alt:"",width:48,height:48,className:"size-10"})})}),e.jsx(g.Portal,{children:e.jsx(d.Positioner,{children:e.jsxs(d.Content,{className:"border-border-primary bg-bg-primary z-popover w-[23.438rem] rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out",children:[e.jsx(y,{}),e.jsx(O,{}),l]})})})]})]})}function y(){const s=w.useAccountQuery().data;return e.jsxs("div",{className:"flex shrink-0 items-center gap-lg",children:[e.jsx(p,{src:j,alt:"",width:48,height:48,className:"size-12"}),e.jsxs("div",{className:"grow",children:[e.jsx("p",{className:"text-text-secondary-700 font-semibold leading-tight",children:s==null?void 0:s.name}),e.jsx("p",{className:"text-text-tertiary-600 leading-tight",children:(s==null?void 0:s.nickName)??(s==null?void 0:s.emailAddress)??(s==null?void 0:s.realName)})]}),e.jsxs(h.Root,{colorScheme:s!=null&&s.verified?"success":"danger",className:"self-start",children:[e.jsx(h.Indicator,{}),e.jsx(h.Label,{children:s!=null&&s.verified?"Verified":"Unverified"})]})]})}function O(){var f,I;const n=R.useLocaleInfo(),s=k.useWalletQuery({refetchInterval:1e3}),t=P.useGlobalStore(C.useShallow(u=>({profile:u.profile,mobileProfile:u.mobileProfile,depositWithdrawal:u.depositWithdrawal}))),o=v.parseDecimal((f=s.data)==null?void 0:f.balance,0),l=v.parseDecimal((I=s.data)==null?void 0:I.bonus,0),a=o+l;return e.jsxs("div",{className:"border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl",children:[e.jsx("div",{className:"text-text-secondary-700 text-sm",children:"Total Balance"}),e.jsx("div",{className:"text-3xl font-bold",children:x.formatNumber(a,{currency:n==null?void 0:n.currency.code,minDecimalPlaces:2})}),e.jsxs("div",{className:"mt-1.5 flex gap-7xl",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-text-secondary-700 text-2xs",children:"Deposit Balance"}),e.jsx("p",{className:"text-medium text-text-primary-brand",children:x.formatNumber(o,{currency:n==null?void 0:n.currency.code,minDecimalPlaces:2})})]}),e.jsxs("div",{children:[e.jsx("p",{className:"text-text-secondary-700 text-2xs",children:"Bonus Balance"}),e.jsx("p",{className:"text-medium text-text-primary-brand",children:x.formatNumber(l,{currency:n==null?void 0:n.currency.code,minDecimalPlaces:2})})]})]}),e.jsxs("div",{className:"mt-3 flex gap-lg",children:[e.jsx(N.Button,{size:"xs",variant:"outline",onClick:()=>{t.depositWithdrawal.setOpen(!0),t.depositWithdrawal.setTab("WITHDRAWAL"),t.profile.setOpen(!1),t.mobileProfile.setOpen(!1)},children:"Withdraw"}),e.jsx(N.Button,{size:"xs",onClick:()=>{t.depositWithdrawal.setOpen(!0),t.depositWithdrawal.setTab("DEPOSIT"),t.profile.setOpen(!1),t.mobileProfile.setOpen(!1)},children:"Deposit"})]})]})}exports.Account=M;

package/dist/components/Account/Account.mjs

@@ -1,205 +1,328 @@
 "use client";
-import { jsxs as i, Fragment as y, jsx as e } from "react/jsx-runtime";
-import { Portal as p } from "@ark-ui/react";
-import N from "next/link";
-import { useShallow as d } from "zustand/shallow";
-import { useAccountQuery as w } from "../../client/hooks/useAccountQuery.mjs";
+import { jsxs as a, jsx as e, Fragment as C } from "react/jsx-runtime";
+import { Portal as I } from "@ark-ui/react";
+import f from "next/image";
+import d from "next/link";
+import { useShallow as P } from "zustand/shallow";
+import { useAccountQuery as k } from "../../client/hooks/useAccountQuery.mjs";
 import "@tanstack/react-query";
 import "../../utils/capitalize.mjs";
-import { formatNumber as O } from "../../utils/formatNumber.mjs";
+import { formatNumber as p } from "../../utils/formatNumber.mjs";
 import "../../constants/index.mjs";
 import "../../utils/getLocaleInfo.mjs";
 import "../../utils/getQueryClient.mjs";
 import "../../utils/isMobile.mjs";
-import "../../utils/parseDecimal.mjs";
+import { parseDecimal as b } from "../../utils/parseDecimal.mjs";
+import "../../client/services/getSession.mjs";
 import "@opexa/portal-sdk-core";
 import "tiny-invariant";
 import "react";
 import "lodash-es";
 import "@opexa/portal-sdk-core/object-id";
-import { useGlobalStore as c } from "../../client/hooks/useGlobalStore.mjs";
+import { useGlobalStore as w } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as P } from "../../client/hooks/useLocaleInfo.mjs";
+import { useLocaleInfo as L } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
-import { useSignOutMutation as v } from "../../client/hooks/useSignOutMutation.mjs";
-import { useWalletQuery as k } from "../../client/hooks/useWalletQuery.mjs";
-import { ChevronRightIcon as f } from "../../icons/ChevronRightIcon.mjs";
-import { Logout01Icon as C } from "../../icons/Logout01Icon.mjs";
-import { User01Icon as a } from "../../icons/User01Icon.mjs";
+import { useSignOutMutation as R } from "../../client/hooks/useSignOutMutation.mjs";
+import { useUnreadMessagesCountQuery as B } from "../../client/hooks/useUnreadMessagesCountQuery.mjs";
+import { useWalletQuery as S } from "../../client/hooks/useWalletQuery.mjs";
+import { AlertCircleIcon as W } from "../../icons/AlertCircleIcon.mjs";
+import { ChevronRightIcon as l } from "../../icons/ChevronRightIcon.mjs";
+import { CoinsStacked02Icon as z } from "../../icons/CoinsStacked02Icon.mjs";
+import { CoinsSwap02Icon as T } from "../../icons/CoinsSwap02Icon.mjs";
+import { Gift01Icon as D } from "../../icons/Gift01Icon.mjs";
+import { Logout01Icon as v } from "../../icons/Logout01Icon.mjs";
+import { Settings02Icon as Q } from "../../icons/Settings02Icon.mjs";
+import { XIcon as A } from "../../icons/XIcon.mjs";
+import h from "../../images/placeholder-avatar.png.mjs";
 import "../../ui/AlertDialog/AlertDialog.mjs";
-import { Root as s, Fallback as m } from "../../ui/Avatar/Avatar.mjs";
-import "../../ui/Badge/Badge.mjs";
-import { Button as u } from "../../ui/Button/Button.mjs";
+import "../../ui/Avatar/Avatar.mjs";
+import { Root as M, Indicator as U, Label as $ } from "../../ui/Badge/Badge.mjs";
+import { Button as g } from "../../ui/Button/Button.mjs";
 import "../../ui/Checkbox/Checkbox.mjs";
 import "../../ui/Clipboard/Clipboard.mjs";
+import "../../ui/Collapsible/Collapsible.mjs";
+import "../../ui/Combobox/Combobox.mjs";
 import "../../ui/DatePicker/DatePicker.mjs";
 import "../../ui/Dialog/Dialog.mjs";
-import { Root as W, Trigger as z, Backdrop as S, Positioner as T, Content as A } from "../../ui/Drawer/Drawer.mjs";
+import { Root as E, Trigger as j, Positioner as G, Content as F } from "../../ui/Drawer/Drawer.mjs";
 import "../../ui/Field/Field.mjs";
-import "../../ui/IconButton/iconButton.recipe.mjs";
+import { IconButton as x } from "../../ui/IconButton/IconButton.mjs";
 import "../../ui/NumberInput/NumberInput.mjs";
+import "../../ui/PasswordInput/PasswordInput.mjs";
 import "../../ui/PinInput/PinInput.mjs";
-import { Root as R, Trigger as I, Positioner as L, Content as M } from "../../ui/Popover/Popover.mjs";
+import { Root as H, Trigger as V, Positioner as X, Content as q } from "../../ui/Popover/Popover.mjs";
 import "tailwind-merge";
+import "../../ui/Progress/Progress.mjs";
 import "../../ui/SegmentGroup/SegmentGroup.mjs";
 import "../../ui/Select/Select.mjs";
 import "../../ui/Table/Table.mjs";
 import "../../ui/Tabs/Tabs.mjs";
-function ze(t) {
-  const l = c(
-    d((r) => ({
-      profile: r.profile,
-      mobileProfile: r.mobileProfile
+import { accountRecipe as J } from "./account.recipe.mjs";
+const r = J();
+function rt(i) {
+  const t = w(
+    P((n) => ({
+      profile: n.profile,
+      mobileProfile: n.mobileProfile,
+      messages: n.messages
     }))
-  );
-  return /* @__PURE__ */ i(y, { children: [
-    /* @__PURE__ */ i(
-      W,
+  ), o = R(), m = B(
+    {},
+    { refetchInterval: 5e3 }
+  ), s = /* @__PURE__ */ a("nav", { className: r.nav(), children: [
+    /* @__PURE__ */ a("ul", { children: [
+      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: r.navItemLink(),
+          onClick: () => {
+            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1), t.messages.setOpen(!0);
+          },
+          children: [
+            /* @__PURE__ */ e(v, { className: r.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Notifications" }),
+            /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "warning", children: m.data ?? 0 }),
+            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+        d,
+        {
+          href: i.rewardsUrl ?? "/rewards",
+          className: r.navItemLink(),
+          onClick: () => {
+            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(D, { className: r.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Rewards" }),
+            /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "warning", children: "0" }),
+            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+      "button",
       {
-        open: l.profile.open,
-        onOpenChange: (r) => {
-          l.profile.setOpen(r.open);
+        type: "button",
+        className: r.navItemLink(),
+        onClick: () => {
+          t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
+        },
+        children: [
+          /* @__PURE__ */ e(Q, { className: r.navItemIcon() }),
+          /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Settings" }),
+          /* @__PURE__ */ e("span", { className: r.navItemBadge(), "data-type": "error", children: /* @__PURE__ */ e(W, {}) }),
+          /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ a("ul", { children: [
+      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+        d,
+        {
+          href: i.betRecordsUrl ?? "/bet-records",
+          className: r.navItemLink(),
+          onClick: () => {
+            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(z, { className: r.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Bet Records" }),
+            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+        d,
+        {
+          href: i.transactionsUrl ?? "/transactions",
+          className: r.navItemLink(),
+          onClick: () => {
+            t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
+          },
+          children: [
+            /* @__PURE__ */ e(T, { className: r.navItemIcon() }),
+            /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Transactions" }),
+            /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: r.navItemRoot(), children: /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: r.navItemLink(),
+        disabled: o.isPending,
+        onClick: () => {
+          o.mutate(), t.profile.setOpen(!1), t.mobileProfile.setOpen(!1);
+        },
+        children: [
+          /* @__PURE__ */ e(v, { className: r.navItemIcon() }),
+          /* @__PURE__ */ e("span", { className: r.navItemLabel(), children: "Log Out" }),
+          /* @__PURE__ */ e(l, { className: r.navItemIndicator() })
+        ]
+      }
+    ) }) })
+  ] });
+  return /* @__PURE__ */ a(C, { children: [
+    /* @__PURE__ */ a(
+      E,
+      {
+        open: t.mobileProfile.open,
+        onOpenChange: (n) => {
+          t.mobileProfile.setOpen(n.open);
         },
         lazyMount: !0,
         unmountOnExit: !0,
         children: [
-          /* @__PURE__ */ e(z, { asChild: !0, className: "lg:hidden", children: t.children ?? /* @__PURE__ */ e("button", { type: "button", children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(a, {}) }) }) }) }),
-          /* @__PURE__ */ i(p, { children: [
-            /* @__PURE__ */ e(S, {}),
-            /* @__PURE__ */ e(T, { children: /* @__PURE__ */ i(A, { className: "bg-gray-50 flex w-[316px] flex-col px-xl py-6", children: [
-              /* @__PURE__ */ e(b, {}),
-              /* @__PURE__ */ e(x, {}),
-              /* @__PURE__ */ e(g, { links: t.links ?? [] }),
-              /* @__PURE__ */ e("div", { className: "grow" }),
-              /* @__PURE__ */ e(h, {})
-            ] }) })
-          ] })
+          /* @__PURE__ */ e(j, { asChild: !0, className: "lg:hidden", children: i.children ?? /* @__PURE__ */ e(x, { size: "sm", colorScheme: "gray", children: t.mobileProfile.open ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ e(
+            f,
+            {
+              src: h,
+              alt: "",
+              width: 100,
+              height: 100,
+              className: "size-10"
+            }
+          ) }) }),
+          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(G, { children: /* @__PURE__ */ a(
+            F,
+            {
+              className: "top-[var(--top,0px)] flex h-[calc(100%-var(--top,0px))] w-full flex-col px-xl py-6",
+              style: {
+                "--top": i.offsetTop ?? "0px"
+              },
+              children: [
+                /* @__PURE__ */ e(y, {}),
+                /* @__PURE__ */ e(O, {}),
+                s
+              ]
+            }
+          ) }) })
         ]
       }
     ),
-    /* @__PURE__ */ i(
-      R,
+    /* @__PURE__ */ a(
+      H,
       {
-        open: l.mobileProfile.open,
-        onOpenChange: (r) => {
-          l.mobileProfile.setOpen(r.open);
+        open: t.profile.open,
+        onOpenChange: (n) => {
+          t.profile.setOpen(n.open);
         },
         lazyMount: !0,
         unmountOnExit: !0,
         positioning: {
-          placement: "bottom"
+          placement: "bottom",
+          strategy: "fixed"
         },
         children: [
-          /* @__PURE__ */ e(I, { className: "hidden lg:flex", asChild: !0, children: t.children ?? /* @__PURE__ */ e("button", { type: "button", children: /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(a, {}) }) }) }) }),
-          /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(L, { children: /* @__PURE__ */ i(M, { className: "border-gray-200 z-popover w-[316px] rounded-xl border bg-white p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [
-            /* @__PURE__ */ e(b, {}),
-            /* @__PURE__ */ e(x, {}),
-            /* @__PURE__ */ e(g, { links: t.links ?? [] }),
-            /* @__PURE__ */ e(h, {})
+          /* @__PURE__ */ e(V, { className: "hidden lg:flex", asChild: !0, children: i.children ?? /* @__PURE__ */ e(x, { size: "sm", colorScheme: "gray", children: /* @__PURE__ */ e(
+            f,
+            {
+              src: h,
+              alt: "",
+              width: 48,
+              height: 48,
+              className: "size-10"
+            }
+          ) }) }),
+          /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ a(q, { className: "border-border-primary bg-bg-primary z-popover w-[23.438rem] rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [
+            /* @__PURE__ */ e(y, {}),
+            /* @__PURE__ */ e(O, {}),
+            s
           ] }) }) })
         ]
       }
     )
   ] });
 }
-function h() {
-  return /* @__PURE__ */ e("div", { className: "text-gray-400 mt-xl text-center text-2xs", children: "© 2025 HappyBingo All rights reserved" });
-}
-function b() {
-  var l, r, o, n;
-  const t = w();
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
-    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(a, {}) }) }),
-    /* @__PURE__ */ i("div", { children: [
-      /* @__PURE__ */ e("p", { className: "text-sm font-semibold", children: (l = t.data) == null ? void 0 : l.name }),
-      /* @__PURE__ */ e("p", { className: "text-gray-400 text-xs", children: ((r = t.data) == null ? void 0 : r.nickName) ?? ((o = t.data) == null ? void 0 : o.emailAddress) ?? ((n = t.data) == null ? void 0 : n.realName) })
-    ] })
-  ] });
-}
-function g(t) {
-  const l = v(), r = c(
-    d((o) => ({
-      profile: o.profile,
-      mobileProfile: o.mobileProfile
-    }))
-  );
-  return /* @__PURE__ */ i("nav", { className: "mt-xl space-y-xl", children: [
-    /* @__PURE__ */ e("ul", { children: t.links.map((o, n) => /* @__PURE__ */ e(
-      "li",
+function y() {
+  const t = k().data;
+  return /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-lg", children: [
+    /* @__PURE__ */ e(
+      f,
       {
-        className: "border-gray-200 block border-x border-b bg-white first:rounded-t-xl first:border-t last:rounded-b-xl",
-        children: /* @__PURE__ */ i(
-          N,
-          {
-            href: o.href,
-            onClick: () => {
-              r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
-            },
-            className: "flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold",
-            children: [
-              /* @__PURE__ */ e(o.icon, { className: "size-5" }),
-              /* @__PURE__ */ e("span", { className: "grow", children: o.label }),
-              /* @__PURE__ */ e(f, { className: "text-gray-400 size-5" })
-            ]
-          }
-        )
-      },
-      o.href + n
-    )) }),
-    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: "border-gray-200 block rounded-xl border bg-white", children: /* @__PURE__ */ i(
-      "button",
+        src: h,
+        alt: "",
+        width: 48,
+        height: 48,
+        className: "size-12"
+      }
+    ),
+    /* @__PURE__ */ a("div", { className: "grow", children: [
+      /* @__PURE__ */ e("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: t == null ? void 0 : t.name }),
+      /* @__PURE__ */ e("p", { className: "text-text-tertiary-600 leading-tight", children: (t == null ? void 0 : t.nickName) ?? (t == null ? void 0 : t.emailAddress) ?? (t == null ? void 0 : t.realName) })
+    ] }),
+    /* @__PURE__ */ a(
+      M,
       {
-        type: "button",
-        className: "flex w-full items-center gap-lg px-xl py-xl text-left text-sm font-semibold",
-        disabled: l.isPending,
-        onClick: () => {
-          l.mutate(), r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
-        },
+        colorScheme: t != null && t.verified ? "success" : "danger",
+        className: "self-start",
         children: [
-          /* @__PURE__ */ e(C, { className: "size-5" }),
-          /* @__PURE__ */ e("span", { className: "grow", children: "Log Out" }),
-          /* @__PURE__ */ e(f, { className: "text-gray-400 size-5" })
+          /* @__PURE__ */ e(U, {}),
+          /* @__PURE__ */ e($, { children: t != null && t.verified ? "Verified" : "Unverified" })
         ]
       }
-    ) }) })
+    )
   ] });
 }
-function x() {
-  var o;
-  const t = P(), l = k({
+function O() {
+  var u, N;
+  const i = L(), t = S({
     refetchInterval: 1e3
-  }), r = c(
-    d((n) => ({
-      profile: n.profile,
-      mobileProfile: n.mobileProfile,
-      depositWithdrawal: n.depositWithdrawal
+  }), o = w(
+    P((c) => ({
+      profile: c.profile,
+      mobileProfile: c.mobileProfile,
+      depositWithdrawal: c.depositWithdrawal
     }))
-  );
-  return /* @__PURE__ */ i("div", { className: "border-gray-200 mt-3 rounded-lg border bg-white p-xl", children: [
-    /* @__PURE__ */ e("div", { className: "border-gray-200 bg-gray-50 text-gray-600 w-fit rounded-sm border px-1.5 py-0.5 text-xs font-medium", children: "Available Balance" }),
-    /* @__PURE__ */ e("div", { className: "mt-2 text-3xl font-semibold", children: O((o = l.data) == null ? void 0 : o.balance, {
-      currency: t == null ? void 0 : t.currency.code,
+  ), m = b((u = t.data) == null ? void 0 : u.balance, 0), s = b((N = t.data) == null ? void 0 : N.bonus, 0), n = m + s;
+  return /* @__PURE__ */ a("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [
+    /* @__PURE__ */ e("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }),
+    /* @__PURE__ */ e("div", { className: "text-3xl font-bold", children: p(n, {
+      currency: i == null ? void 0 : i.currency.code,
       minDecimalPlaces: 2
     }) }),
-    /* @__PURE__ */ i("div", { className: "mt-3 flex gap-lg", children: [
+    /* @__PURE__ */ a("div", { className: "mt-1.5 flex gap-7xl", children: [
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ e("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }),
+        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(m, {
+          currency: i == null ? void 0 : i.currency.code,
+          minDecimalPlaces: 2
+        }) })
+      ] }),
+      /* @__PURE__ */ a("div", { children: [
+        /* @__PURE__ */ e("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }),
+        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(s, {
+          currency: i == null ? void 0 : i.currency.code,
+          minDecimalPlaces: 2
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ a("div", { className: "mt-3 flex gap-lg", children: [
       /* @__PURE__ */ e(
-        u,
+        g,
         {
           size: "xs",
           variant: "outline",
-          colorScheme: "gray",
           onClick: () => {
-            r.depositWithdrawal.setOpen(!0), r.depositWithdrawal.setTab("WITHDRAWAL"), r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
+            o.depositWithdrawal.setOpen(!0), o.depositWithdrawal.setTab("WITHDRAWAL"), o.profile.setOpen(!1), o.mobileProfile.setOpen(!1);
           },
           children: "Withdraw"
         }
       ),
       /* @__PURE__ */ e(
-        u,
+        g,
         {
           size: "xs",
           onClick: () => {
-            r.depositWithdrawal.setOpen(!0), r.depositWithdrawal.setTab("DEPOSIT"), r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
+            o.depositWithdrawal.setOpen(!0), o.depositWithdrawal.setTab("DEPOSIT"), o.profile.setOpen(!1), o.mobileProfile.setOpen(!1);
           },
           children: "Deposit"
         }
@@ -208,5 +331,5 @@ function x() {
   ] });
 }
 export {
-  ze as Account
+  rt as Account
 };

package/dist/components/Account/account.recipe.d.ts

@@ -0,0 +1,61 @@
+export declare const accountRecipe: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            nav?: import('tailwind-variants').ClassValue;
+            navItemRoot?: import('tailwind-variants').ClassValue;
+            navItemLink?: import('tailwind-variants').ClassValue;
+            navItemIcon?: import('tailwind-variants').ClassValue;
+            navItemLabel?: import('tailwind-variants').ClassValue;
+            navItemIndicator?: import('tailwind-variants').ClassValue;
+            navItemBadge?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-variants').ClassValue | {
+            nav?: import('tailwind-variants').ClassValue;
+            navItemRoot?: import('tailwind-variants').ClassValue;
+            navItemLink?: import('tailwind-variants').ClassValue;
+            navItemIcon?: import('tailwind-variants').ClassValue;
+            navItemLabel?: import('tailwind-variants').ClassValue;
+            navItemIndicator?: import('tailwind-variants').ClassValue;
+            navItemBadge?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            nav?: import('tailwind-variants').ClassValue;
+            navItemRoot?: import('tailwind-variants').ClassValue;
+            navItemLink?: import('tailwind-variants').ClassValue;
+            navItemIcon?: import('tailwind-variants').ClassValue;
+            navItemLabel?: import('tailwind-variants').ClassValue;
+            navItemIndicator?: import('tailwind-variants').ClassValue;
+            navItemBadge?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    nav: string;
+    navItemRoot: string;
+    navItemLink: string;
+    navItemIcon: string;
+    navItemLabel: string;
+    navItemIndicator: string;
+    navItemBadge: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/Account/account.recipe.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),e=t.tv({slots:{nav:"mt-xl space-y-xl",navItemRoot:"bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl",navItemLink:"flex w-full items-center px-xl py-xl text-left text-sm font-semibold",navItemIcon:"text-text-quarterary-500 size-5",navItemLabel:"ml-lg grow",navItemIndicator:"text-gray-400 text-text-quarterary-500 size-5",navItemBadge:["mr-md","flex","items-center","justify-center","border","rounded-full","h-5.5","ui-type-[warning]:min-w-6","ui-type-[warning]:text-xs","ui-type-[warning]:font-medium","ui-type-[warning]:leading-tight","ui-type-[warning]:border-utility-brand-200","ui-type-[warning]:bg-utility-brand-50","ui-type-[warning]:text-utility-brand-700","ui-type-[error]:w-5.5","ui-type-[error]:icon:size-3","ui-type-[error]:border-utility-warning-200","ui-type-[error]:bg-utility-warning-50","ui-type-[error]:text-utility-warning-500"]}});exports.accountRecipe=e;