@opexa/portal-components 0.0.18 → 0.0.20

package/dist/components/Account/Account.mjs

@@ -1,108 +1,219 @@
 "use client";
-import { jsxs as i, Fragment as P, jsx as e } from "react/jsx-runtime";
-import { Portal as u } from "@ark-ui/react";
-import m from "next/image";
-import v from "next/link";
-import { useShallow as p } from "zustand/shallow";
-import { useAccountQuery as C } 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 d } 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 f } from "../../client/hooks/useGlobalStore.mjs";
+import { useGlobalStore as w } from "../../client/hooks/useGlobalStore.mjs";
 import "../../client/hooks/useInfiniteQueryHelper.mjs";
-import { useLocaleInfo as I } from "../../client/hooks/useLocaleInfo.mjs";
+import { useLocaleInfo as L } from "../../client/hooks/useLocaleInfo.mjs";
 import "usehooks-ts";
-import { useSignOutMutation as z } from "../../client/hooks/useSignOutMutation.mjs";
-import { useUnreadMessagesCountQuery as T } from "../../client/hooks/useUnreadMessagesCountQuery.mjs";
-import { useWalletQuery as A } from "../../client/hooks/useWalletQuery.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 h } from "../../icons/ChevronRightIcon.mjs";
-import { Logout01Icon as S } from "../../icons/Logout01Icon.mjs";
-import { XIcon as k } from "../../icons/XIcon.mjs";
-import c from "../../images/placeholder-avatar.png.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 "../../ui/Avatar/Avatar.mjs";
-import { Root as R, Indicator as D, Label as L } from "../../ui/Badge/Badge.mjs";
-import { Button as x } from "../../ui/Button/Button.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 Q, Trigger as U, Positioner as E, Content as M } 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 { IconButton as b } from "../../ui/IconButton/IconButton.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 j, Trigger as B, Positioner as _, Content as $ } 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 $e(l) {
-  const t = f(
-    p((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(P, { children: [
-    /* @__PURE__ */ i(
-      Q,
+  ), 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",
+      {
+        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: (r) => {
-          t.mobileProfile.setOpen(r.open);
+        onOpenChange: (n) => {
+          t.mobileProfile.setOpen(n.open);
         },
         lazyMount: !0,
         unmountOnExit: !0,
         children: [
-          /* @__PURE__ */ e(U, { asChild: !0, className: "lg:hidden", children: l.children ?? /* @__PURE__ */ e(b, { size: "sm", colorScheme: "gray", children: t.mobileProfile.open ? /* @__PURE__ */ e(k, {}) : /* @__PURE__ */ e(
-            m,
+          /* @__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: c,
+              src: h,
               alt: "",
               width: 100,
               height: 100,
               className: "size-10"
             }
           ) }) }),
-          /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ i(
-            M,
+          /* @__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": l.offsetTop ?? "0px"
+                "--top": i.offsetTop ?? "0px"
               },
               children: [
-                /* @__PURE__ */ e(g, {}),
-                /* @__PURE__ */ e(N, {}),
-                /* @__PURE__ */ e(y, { links: l.links })
+                /* @__PURE__ */ e(y, {}),
+                /* @__PURE__ */ e(O, {}),
+                s
               ]
             }
           ) }) })
         ]
       }
     ),
-    /* @__PURE__ */ i(
-      j,
+    /* @__PURE__ */ a(
+      H,
       {
         open: t.profile.open,
-        onOpenChange: (r) => {
-          t.profile.setOpen(r.open);
+        onOpenChange: (n) => {
+          t.profile.setOpen(n.open);
         },
         lazyMount: !0,
         unmountOnExit: !0,
@@ -111,162 +222,107 @@ function $e(l) {
           strategy: "fixed"
         },
         children: [
-          /* @__PURE__ */ e(B, { className: "hidden lg:flex", asChild: !0, children: l.children ?? /* @__PURE__ */ e(b, { size: "sm", colorScheme: "gray", children: /* @__PURE__ */ e(
-            m,
+          /* @__PURE__ */ e(V, { className: "hidden lg:flex", asChild: !0, children: i.children ?? /* @__PURE__ */ e(x, { size: "sm", colorScheme: "gray", children: /* @__PURE__ */ e(
+            f,
             {
-              src: c,
+              src: h,
               alt: "",
               width: 48,
               height: 48,
               className: "size-10"
             }
           ) }) }),
-          /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(_, { children: /* @__PURE__ */ i($, { 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(g, {}),
-            /* @__PURE__ */ e(N, {}),
-            /* @__PURE__ */ e(y, { links: l.links })
+          /* @__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 g() {
-  const t = C().data;
-  return /* @__PURE__ */ i("div", { className: "flex shrink-0 items-center gap-lg", children: [
+function y() {
+  const t = k().data;
+  return /* @__PURE__ */ a("div", { className: "flex shrink-0 items-center gap-lg", children: [
     /* @__PURE__ */ e(
-      m,
+      f,
       {
-        src: c,
+        src: h,
         alt: "",
         width: 48,
         height: 48,
         className: "size-12"
       }
     ),
-    /* @__PURE__ */ i("div", { className: "grow", children: [
+    /* @__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__ */ i(
-      R,
+    /* @__PURE__ */ a(
+      M,
       {
         colorScheme: t != null && t.verified ? "success" : "danger",
         className: "self-start",
         children: [
-          /* @__PURE__ */ e(D, {}),
-          /* @__PURE__ */ e(L, { children: t != null && t.verified ? "Verified" : "Unverified" })
+          /* @__PURE__ */ e(U, {}),
+          /* @__PURE__ */ e($, { children: t != null && t.verified ? "Verified" : "Unverified" })
         ]
       }
     )
   ] });
 }
-function y(l) {
-  const t = z(), r = f(
-    p((n) => ({
-      profile: n.profile,
-      mobileProfile: n.mobileProfile
-    }))
-  ), s = Array.isArray(l.links[0]) ? l.links : [l.links], a = T(
-    {},
-    {
-      enabled: l.links.flat().some((n) => n.badge === "UNREAD_NOTIFICATIONS_COUNT"),
-      refetchInterval: 5e3
-    }
-  );
-  return /* @__PURE__ */ i("nav", { className: "mt-xl space-y-xl", children: [
-    s.map((n, O) => /* @__PURE__ */ e("ul", { children: n.map((o, w) => /* @__PURE__ */ e(
-      "li",
-      {
-        className: "bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl",
-        children: /* @__PURE__ */ i(
-          v,
-          {
-            href: o.href,
-            onClick: () => {
-              r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
-            },
-            className: "flex w-full items-center px-xl py-xl text-left text-sm font-semibold",
-            children: [
-              /* @__PURE__ */ e(o.icon, { className: "text-text-quarterary-500 size-5" }),
-              /* @__PURE__ */ e("span", { className: "ml-lg grow", children: o.label }),
-              o.badge === "UNREAD_NOTIFICATIONS_COUNT" && /* @__PURE__ */ e("span", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 mr-md flex h-5.5 min-w-6 items-center justify-center rounded-full border text-xs font-medium leading-tight", children: d(a.data, {
-                compact: !0
-              }) }),
-              o.badge === "REWARDS_COUNT" && /* @__PURE__ */ e("span", { className: "border-utility-brand-200 bg-utility-brand-50 text-utility-brand-700 mr-md flex h-5.5 min-w-6 items-center justify-center rounded-full border text-xs font-medium leading-tight", children: d(a.data, {
-                compact: !0
-              }) }),
-              o.badge === "WARNING" && /* @__PURE__ */ e("span", { className: "border-utility-warning-200 bg-utility-warning-50 text-utility-warning-500 mr-md flex size-5.5 items-center justify-center rounded-full border", children: /* @__PURE__ */ e(W, { className: "size-3" }) }),
-              /* @__PURE__ */ e(h, { className: "text-text-quarterary-500 size-5" })
-            ]
-          }
-        )
-      },
-      o.href + w
-    )) }, O)),
-    /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { className: "bg-bg-primary-alt block first:rounded-t-xl last:rounded-b-xl", children: /* @__PURE__ */ i(
-      "button",
-      {
-        type: "button",
-        className: "flex w-full items-center px-xl py-xl text-left text-sm font-semibold",
-        disabled: t.isPending,
-        onClick: () => {
-          t.mutate(), r.profile.setOpen(!1), r.mobileProfile.setOpen(!1);
-        },
-        children: [
-          /* @__PURE__ */ e(S, { className: "text-text-quarterary-500 size-5" }),
-          /* @__PURE__ */ e("span", { className: "ml-lg grow", children: "Log Out" }),
-          /* @__PURE__ */ e(h, { className: "text-gray-400 text-text-quarterary-500 size-5" })
-        ]
-      }
-    ) }) })
-  ] });
-}
-function N() {
-  var s;
-  const l = I(), t = A({
+function O() {
+  var u, N;
+  const i = L(), t = S({
     refetchInterval: 1e3
-  }), r = f(
-    p((a) => ({
-      profile: a.profile,
-      mobileProfile: a.mobileProfile,
-      depositWithdrawal: a.depositWithdrawal
+  }), o = w(
+    P((c) => ({
+      profile: c.profile,
+      mobileProfile: c.mobileProfile,
+      depositWithdrawal: c.depositWithdrawal
     }))
-  );
-  return /* @__PURE__ */ i("div", { className: "border-border-primary bg-bg-tertiary mt-3 rounded-xl border p-xl", children: [
+  ), 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: d((s = t.data) == null ? void 0 : s.balance, {
-      currency: l == null ? void 0 : l.currency.code,
+    /* @__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-1.5 flex gap-7xl", children: [
-      /* @__PURE__ */ i("div", { 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: "₱70.00" })
+        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: p(m, {
+          currency: i == null ? void 0 : i.currency.code,
+          minDecimalPlaces: 2
+        }) })
       ] }),
-      /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ e("p", { className: "text-text-secondary-700 text-2xs", children: "Wallet Balance" }),
-        /* @__PURE__ */ e("p", { className: "text-medium text-text-primary-brand", children: "₱70.00" })
+      /* @__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__ */ i("div", { className: "mt-3 flex gap-lg", children: [
+    /* @__PURE__ */ a("div", { className: "mt-3 flex gap-lg", children: [
       /* @__PURE__ */ e(
-        x,
+        g,
         {
           size: "xs",
           variant: "outline",
           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(
-        x,
+        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"
         }
@@ -275,5 +331,5 @@ function N() {
   ] });
 }
 export {
-  $e 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;

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

@@ -0,0 +1,35 @@
+import { tv as t } from "tailwind-variants";
+const r = t({
+  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"
+    ]
+  }
+});
+export {
+  r as accountRecipe
+};