@opexa/portal-components 0.0.64 → 0.0.65

package/dist/components/Bonuses/Bonuses.client.js

@@ -9,11 +9,11 @@ import { useInterval } from 'usehooks-ts';
 import { z } from 'zod';
 import { useBonusesQuery, useCashbackBonusesQuery, useClaimCashbackBonusMutation, useLocaleInfo, } from '../../client/hooks/index.js';
 import { Gift01Icon, StopWatchIcon } from '../../icons/index.js';
+import moneyOnHand from '../../images/money-on-hand.png';
+import piggyBank from '../../images/piggy-bank.png';
 import { Badge, Button, Progress, SegmentGroup } from '../../ui/index.js';
 import { capitalize, formatNumber, parseDecimal } from '../../utils/index.js';
-import { Empty } from '../Empty.js';
-import moneyOnHand from './money-on-hand.png';
-import piggyBank from './piggy-bank.png';
+import { Empty } from '../Empty';
 const TABS = ['ALL', 'ACTIVE', 'CASHBACKS'];
 export function Bonuses__client(props) {
     const [tab, setTab] = useState(TABS[0]);
@@ -83,5 +83,5 @@ function CashbackBonus(props) {
 function DefaultImage({ type }) {
     return (_jsxs("div", { style: {
             background: 'radial-gradient(75.21% 75.21% at 50% 50%, rgba(249, 163, 8, 0.3) 0%, rgba(0, 0, 0, 0) 100%), var(--color-bg-primary-alt)',
-        }, children: [type === 'bonus' && (_jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600 })), type === 'cashback' && (_jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600 }))] }));
+        }, children: [type === 'bonus' && (_jsx(Image, { src: piggyBank, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600, height: 600 })), type === 'cashback' && (_jsx(Image, { src: moneyOnHand, alt: "", className: "mx-auto h-auto w-[50%] shrink-0", draggable: false, width: 600, height: 600 }))] }));
 }

package/dist/components/Bonuses/BonusesTrigger.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef } from 'react';
+interface BonusesTriggerProps extends ComponentPropsWithRef<'a'> {
+}
+export declare function BonusesTrigger(props: BonusesTriggerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Bonuses/BonusesTrigger.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import { twMerge } from 'tailwind-merge';
+import { useBonusesQuery, useCashbackBonusesQuery } from '../../client/hooks/index.js';
+import { Gift01Icon } from '../../icons/index.js';
+import { iconButtonRecipe } from '../../ui/IconButton/iconButton.recipe.js';
+export function BonusesTrigger(props) {
+    const bonusesQuery = useBonusesQuery();
+    const bonusesCount = bonusesQuery.data?.length ?? 0;
+    const cashbackBonusesQuery = useCashbackBonusesQuery();
+    const cashbackBonusesCount = cashbackBonusesQuery.data?.length ?? 0;
+    const totalCount = bonusesCount + cashbackBonusesCount;
+    return (_jsx(Link, { "aria-label": "View Rewards", "data-count": totalCount, ...props, href: props.href ?? '/rewards', className: iconButtonRecipe({
+            size: 'sm',
+            colorScheme: 'gray',
+            className: twMerge('relative', props.className),
+        }), children: props.children ?? (_jsxs(_Fragment, { children: [totalCount > 0 && (_jsx("div", { className: "bg-brand-500 leading-4.5 text-button-primary-fg absolute -right-1.5 -top-1.5 min-w-5 rounded-full border px-1.5 text-2xs font-semibold", children: totalCount })), _jsx(Gift01Icon, {})] })) }));
+}

package/dist/components/Bonuses/index.d.ts

@@ -1 +1,2 @@
 export * from './Bonuses';
+export * from './BonusesTrigger';

package/dist/components/Bonuses/index.js

@@ -1 +1,2 @@
-export * from './Bonuses.js';
+export * from './Bonuses';
+export * from './BonusesTrigger.js';

package/package.json

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

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

@@ -1,23 +0,0 @@
-import type { ReactNode } from 'react';
-export interface AccountProps {
-    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;
-    /** @default '/account' */
-    accountSettingsUrl?: string;
-}
-export declare function Account(props: AccountProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/Account.js

@@ -1,107 +0,0 @@
-'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 Link from 'next/link';
-import { twMerge } from 'tailwind-merge';
-import { useShallow } from 'zustand/shallow';
-import { useAccountQuery, useGlobalStore, useLocaleInfo, useSignOutMutation, useUnreadMessagesCountQuery, useWalletQuery, } from '../../client/hooks/index.js';
-import { AlertCircleIcon, ChevronRightIcon, CoinsStacked02Icon, CoinsSwap02Icon, Gift01Icon, Logout01Icon, Settings02Icon, XIcon, } from '../../icons/index.js';
-import avatarPlaceholder from '../../images/placeholder-avatar.png';
-import { Badge, Button, Drawer, IconButton, Popover } from '../../ui/index.js';
-import { formatNumber, parseDecimal } from '../../utils/index.js';
-import { accountRecipe } from './account.recipe.js';
-const recipe = accountRecipe();
-export function Account(props) {
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-    })));
-    const rewardsUrl = props.rewardsUrl ?? '/rewards';
-    const betRecordsUrl = props.betRecordsUrl ?? '/bet-records';
-    const transactionsUrl = props.transactionsUrl ?? '/transactions';
-    const accountSettingsUrl = props.accountSettingsUrl ?? '/account';
-    const [mobileOffsetTop, desktopOffsetTop] = Array.isArray(props.offsetTop)
-        ? props.offsetTop
-        : [props.offsetTop ?? '0px', props.offsetTop ?? '0px'];
-    return (_jsxs(_Fragment, { children: [_jsxs(Drawer.Root, { open: globalStore.account__mobile.open, onOpenChange: (details) => {
-                    globalStore.account__mobile.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, children: [_jsx(Drawer.Trigger, { asChild: true, className: "lg:hidden", children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: globalStore.account__mobile.open ? (_jsx(XIcon, {})) : (_jsx(Image, { src: avatarPlaceholder, alt: "", width: 100, height: 100, className: "size-10" })) })) }), _jsx(Portal, { children: _jsx(Drawer.Positioner, { children: _jsxs(Drawer.Content, { className: twMerge('relative', 'flex', 'flex-col', 'top-[var(--offset-top-mobile)]', 'h-[calc(100%-var(--offset-top-mobile))]', 'w-full', 'px-xl', 'py-6', 'lg:top-[var(--offset-top-desktop)]', 'lg:h-[calc(100%-var(--offset-top-desktop))]'), style: {
-                                    ['--offset-top-mobile']: mobileOffsetTop,
-                                    ['--offset-top-desktop']: desktopOffsetTop,
-                                }, children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] }), _jsxs(Popover.Root, { open: globalStore.account.open, onOpenChange: (details) => {
-                    globalStore.account.setOpen(details.open);
-                }, lazyMount: true, unmountOnExit: true, positioning: {
-                    placement: 'bottom',
-                    strategy: 'fixed',
-                }, children: [_jsx(Popover.Trigger, { className: "hidden lg:flex", asChild: true, children: props.children ?? (_jsx(IconButton, { size: "sm", colorScheme: "gray", children: _jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-10" }) })) }), _jsx(Portal, { children: _jsx(Popover.Positioner, { children: _jsxs(Popover.Content, { className: "border-border-primary bg-bg-primary relative z-popover w-[23.438rem] overflow-hidden rounded-xl border p-xl ui-open:animate-fade-in ui-closed:animate-fade-out", children: [_jsx(Profile, {}), _jsx(Wallet, {}), _jsx(Links, { rewardsUrl: rewardsUrl, betRecordsUrl: betRecordsUrl, transactionsUrl: transactionsUrl, accountSettingsUrl: accountSettingsUrl })] }) }) })] })] }));
-}
-function Profile() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    return (_jsxs("div", { className: "flex shrink-0 items-center gap-lg", children: [_jsx(Image, { src: avatarPlaceholder, alt: "", width: 48, height: 48, className: "size-12" }), _jsxs("div", { className: "grow", children: [_jsx("p", { className: "text-text-secondary-700 font-semibold leading-tight", children: account?.name }), _jsxs("div", { className: "flex", children: [_jsx("p", { className: "text-text-tertiary-600 grow items-center leading-tight", children: account?.id }), _jsxs(Badge.Root, { colorScheme: account?.verified ? 'success' : 'danger', className: "self-start", children: [_jsx(Badge.Indicator, {}), _jsx(Badge.Label, { children: account?.verified ? 'Verified' : 'Unverified' })] })] })] })] }));
-}
-function Wallet() {
-    const localeInfo = useLocaleInfo();
-    const walletQuery = useWalletQuery({
-        refetchInterval: 1000,
-    });
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        profile: ctx.account,
-        mobileProfile: ctx.account__mobile,
-        depositWithdrawal: ctx.depositWithdrawal,
-    })));
-    const depositBalance = parseDecimal(walletQuery.data?.balance, 0);
-    const bonusBalance = parseDecimal(walletQuery.data?.bonus, 0);
-    const totalBalance = depositBalance + bonusBalance;
-    return (_jsxs("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [_jsx("div", { className: "text-text-secondary-700 text-sm", children: "Total Balance" }), _jsx("div", { className: "text-3xl font-bold", children: formatNumber(totalBalance, {
-                    currency: localeInfo?.currency.code,
-                    minDecimalPlaces: 2,
-                }) }), _jsxs("div", { className: "mt-1.5 flex gap-7xl", children: [_jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Deposit Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(depositBalance, {
-                                    currency: localeInfo?.currency.code,
-                                    minDecimalPlaces: 2,
-                                }) })] }), _jsxs("div", { children: [_jsx("p", { className: "text-text-secondary-700 text-2xs", children: "Bonus Balance" }), _jsx("p", { className: "text-medium text-text-primary-brand", children: formatNumber(bonusBalance, {
-                                    currency: localeInfo?.currency.code,
-                                    minDecimalPlaces: 2,
-                                }) })] })] }), _jsxs("div", { className: "mt-3 flex gap-lg", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('WITHDRAWAL');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Withdraw" }), _jsx(Button, { size: "xs", onClick: () => {
-                            globalStore.depositWithdrawal.setOpen(true);
-                            globalStore.depositWithdrawal.setTab('DEPOSIT');
-                            globalStore.profile.setOpen(false);
-                            globalStore.mobileProfile.setOpen(false);
-                        }, children: "Deposit" })] })] }));
-}
-function Links(props) {
-    const signOutMutation = useSignOutMutation();
-    const globalStore = useGlobalStore(useShallow((ctx) => ({
-        account: ctx.account,
-        account__mobile: ctx.account__mobile,
-        messages: ctx.messages,
-    })));
-    const unreadMessagesCountQuery = useUnreadMessagesCountQuery({}, { refetchInterval: 5000 });
-    return (_jsxs("nav", { className: recipe.nav({ className: 'mt-xl' }), children: [_jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                                globalStore.messages.setOpen(true);
-                            }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Notifications" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: unreadMessagesCountQuery.data ?? 0 }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.rewardsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(Gift01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Rewards" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "warning", children: "0" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.accountSettingsUrl, className: recipe.navItemLink(), onClick: () => {
-                            globalStore.account.setOpen(false);
-                            globalStore.account__mobile.setOpen(false);
-                        }, children: [_jsx(Settings02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Settings" }), _jsx("span", { className: recipe.navItemBadge(), "data-type": "error", children: _jsx(AlertCircleIcon, {}) }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) }), _jsxs("ul", { children: [_jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.betRecordsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(CoinsStacked02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Bet Records" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }), _jsx("li", { className: recipe.navItemRoot(), children: _jsxs(Link, { href: props.transactionsUrl, className: recipe.navItemLink(), onClick: () => {
-                                globalStore.account.setOpen(false);
-                                globalStore.account__mobile.setOpen(false);
-                            }, children: [_jsx(CoinsSwap02Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Transactions" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) })] }), _jsx("ul", { children: _jsx("li", { className: recipe.navItemRoot(), children: _jsxs("button", { type: "button", className: recipe.navItemLink(), disabled: signOutMutation.isPending, onClick: () => {
-                            signOutMutation.mutate();
-                            globalStore.account.setOpen(false);
-                            globalStore.account__mobile.setOpen(false);
-                        }, children: [_jsx(Logout01Icon, { className: recipe.navItemIcon() }), _jsx("span", { className: recipe.navItemLabel(), children: "Log Out" }), _jsx(ChevronRightIcon, { className: recipe.navItemIndicator() })] }) }) })] }));
-}

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

@@ -1,6 +0,0 @@
-import type { ComponentPropsWithRef } from 'react';
-export interface AccountTriggerProps extends ComponentPropsWithRef<'button'> {
-    mobile?: boolean;
-    asChild?: boolean;
-}
-export declare function AccountTrigger(props: AccountTriggerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Account/AccountTrigger.js

@@ -1,13 +0,0 @@
-'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';
-export function AccountTrigger(props) {
-    const { mobile, ...rest } = props;
-    const { open, setOpen } = useGlobalStore(useShallow((ctx) => (mobile ? ctx.account__mobile : ctx.account)));
-    return (_jsx(ark.button, { type: "button", "aria-label": "Toggle account menu", "data-open": open ? 'open' : 'closed', ...rest, onClick: (e) => {
-            setOpen(!open);
-            return props.onClick?.(e);
-        } }));
-}

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

@@ -1,61 +0,0 @@
-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

@@ -1,32 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const accountRecipe = tv({
-    slots: {
-        nav: '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-nav-item-button-icon 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',
-        ],
-    },
-});

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

@@ -1,2 +0,0 @@
-export * from './Account';
-export * from './AccountTrigger';

package/dist/components/Account/index.js

@@ -1,2 +0,0 @@
-export * from './Account.js';
-export * from './AccountTrigger.js';

package/dist/components/AccountInfo/AccountInfo.d.ts

@@ -1,4 +0,0 @@
-export interface AccountInfoProps {
-    className?: string;
-}
-export declare function AccountInfo(props: AccountInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/AccountInfo/AccountInfo.js

@@ -1,143 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { zodResolver } from '@hookform/resolvers/zod';
-import { differenceInYears, format } from 'date-fns';
-import Image from 'next/image';
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { twMerge } from 'tailwind-merge';
-import { z } from 'zod';
-import { useAccountQuery, useLocaleInfo, useMobileNumberParser, useUpdateAccountMutation, } from '../../client/hooks/index.js';
-import { toaster } from '../../client/utils/index.js';
-import { FacebookIcon, GoogleIcon } from '../../icons/index.js';
-import avatar from '../../images/placeholder-avatar.png';
-import { Button, Field, IconButton } from '../../ui/index.js';
-export function AccountInfo(props) {
-    return (_jsxs("div", { className: twMerge('space-y-3xl', props.className), children: [_jsx(ProfileInfo, {}), _jsx(ContactInfo, {}), _jsx(PersonalInfo, {}), _jsx(SSO, {})] }));
-}
-function ProfileInfo() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Profile Info" }), _jsxs("div", { className: "bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", children: [_jsx("div", { className: "border-border-secondary border-b px-4 py-5", children: _jsxs("div", { className: "flex items-center gap-xl", children: [_jsx(Image, { src: avatar, alt: "", width: 80, height: 80, className: "size-14 shrink-0 rounded-md object-cover" }), _jsxs("div", { children: [_jsx("h3", { className: "text-text-secondary-700 text-lg font-semibold leading-tight", children: account?.name }), _jsx("p", { className: "text-text-tertiary-600 leading-tight", children: account?.id })] })] }) }), _jsx("div", { className: "flex justify-end px-xl py-lg", children: _jsx(Button, { size: "sm", variant: "outline", fullWidth: false, children: "Upload New Avatar" }) })] })] }));
-}
-function PersonalInfo() {
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const updateAccountMutation = useUpdateAccountMutation({
-        onSuccess() {
-            toaster.success({
-                description: 'Changes saved!',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const schema = z.object({
-        realName: z.string().min(4).max(50).optional().or(z.literal('')),
-        birthDay: z
-            .string()
-            .optional()
-            .or(z.literal(''))
-            .superRefine((val, ctx) => {
-            if (!val)
-                return;
-            const date = new Date(val);
-            const age = differenceInYears(new Date(), date);
-            if (age < 21) {
-                ctx.addIssue({
-                    code: z.ZodIssueCode.custom,
-                    message: 'You must be at least 21 years old',
-                });
-            }
-        }),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(schema),
-        defaultValues: {
-            birthDay: '',
-            realName: '',
-        },
-    });
-    useEffect(() => {
-        if (account) {
-            form.reset({
-                realName: account.realName ?? '',
-                birthDay: account.birthDay
-                    ? format(account.birthDay, 'yyyy-MM-dd')
-                    : '',
-            });
-        }
-    }, [account, form]);
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Personal Data" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
-                    updateAccountMutation.mutate({
-                        realName: data.realName && account?.realName !== data.realName
-                            ? data.realName
-                            : undefined,
-                        birthDay: data.birthDay && account?.birthDay !== data.birthDay
-                            ? data.birthDay
-                            : undefined,
-                    });
-                }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
-}
-function ContactInfo() {
-    const localeInfo = useLocaleInfo();
-    const accountQuery = useAccountQuery();
-    const account = accountQuery.data;
-    const { parse, format, equals } = useMobileNumberParser();
-    const updateAccountMutation = useUpdateAccountMutation({
-        onSuccess() {
-            toaster.success({
-                description: 'Changes saved!',
-            });
-        },
-        onError(error) {
-            toaster.error({
-                description: error.message,
-            });
-        },
-    });
-    const schema = z.object({
-        emailAddress: z.string().email().optional().or(z.literal('')),
-        mobileNumber: z
-            .string()
-            .regex(localeInfo.mobileNumber.pattern, 'Invalid mobile number')
-            .optional()
-            .or(z.literal('')),
-    });
-    const form = useForm({
-        mode: 'all',
-        resolver: zodResolver(schema),
-        defaultValues: {
-            mobileNumber: '',
-            emailAddress: '',
-        },
-    });
-    useEffect(() => {
-        if (account) {
-            form.reset({
-                emailAddress: account.emailAddress ?? '',
-                mobileNumber: account.mobileNumber
-                    ? parse(account.mobileNumber).mobileNumber
-                    : '',
-            });
-        }
-    }, [account, form, parse]);
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Contact Info" }), _jsxs("form", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border", onSubmit: form.handleSubmit((data) => {
-                    updateAccountMutation.mutate({
-                        emailAddress: data.emailAddress && account?.emailAddress !== data.emailAddress
-                            ? data.emailAddress
-                            : undefined,
-                        mobileNumber: data.mobileNumber &&
-                            !equals(account?.mobileNumber, data.mobileNumber)
-                            ? format(data.mobileNumber)
-                            : undefined,
-                    });
-                }), children: [_jsxs("div", { className: "px-xl py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.mobileNumber, children: [_jsx(Field.Label, { children: "Mobile Number" }), _jsxs("div", { className: "relative", children: [_jsx(localeInfo.country.flag, { className: "pointer-events-none absolute left-3.5 top-1/2 size-5 -translate-y-1/2" }), _jsx(Field.Input, { className: "pl-10.5", readOnly: account?.mobileNumber != null, ...form.register('mobileNumber') })] }), _jsx(Field.ErrorText, { children: form.formState.errors.mobileNumber?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.emailAddress, children: [_jsx(Field.Label, { children: "Email address" }), _jsx(Field.Input, { ...form.register('emailAddress') }), _jsx(Field.ErrorText, { children: form.formState.errors.emailAddress?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: updateAccountMutation.isPending || !form.formState.isValid, children: "Save Changes" })] }))] })] }));
-}
-function SSO() {
-    return (_jsxs("div", { children: [_jsx("h2", { className: "text-text-secondary-700 text-sm font-semibold", children: "Account Connections" }), _jsxs("div", { className: "shadow-xs bg-bg-primary-alt border-border-secondary mt-5 rounded-xl border px-4 py-5", children: [_jsxs("div", { className: "flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(GoogleIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Google" }), _jsx("p", { className: "text-text-secondary-700 mt-xs text-xs leading-tight", children: "Not Connected" })] })] }), _jsx(Button, { fullWidth: false, children: "Connect" })] }), _jsxs("div", { className: "mt-6 flex items-center", children: [_jsxs("div", { className: "flex grow items-center gap-sm", children: [_jsx(IconButton, { variant: "outline", colorScheme: "gray", children: _jsx(FacebookIcon, { className: "size-6" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium leading-tight", children: "Facebook" }), _jsx("p", { className: "text-text-success-primary-600 mt-xs text-xs leading-tight", children: "Connected" })] })] }), _jsx("button", { className: "text-button-tertiary-error-fg text-sm font-semibold", children: "Disconnect" })] })] })] }));
-}

package/dist/components/AccountInfo/index.d.ts

@@ -1 +0,0 @@
-export * from './AccountInfo';

package/dist/components/AccountInfo/index.js

@@ -1 +0,0 @@
-export * from './AccountInfo.js';

package/dist/components/AccountSecurity/AccountSecurity.d.ts

@@ -1,4 +0,0 @@
-export interface AccountSecurityProps {
-    className?: string;
-}
-export declare function AccountSecurity(props: AccountSecurityProps): import("react/jsx-runtime").JSX.Element;