@validationcloud/fractal-ui 1.81.0 → 1.82.0

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -8,6 +8,7 @@ type DropdownMenuProps = {
     baseColor?: 'bg-neutral-60' | 'bg-neutral-80';
     className?: string;
     contentClassName?: string;
+    contentStyle?: React.CSSProperties;
     disabled?: boolean;
 } & React.ComponentProps<typeof DropdownMenuPrimitive.Root>;
 /**
@@ -17,5 +18,5 @@ type DropdownMenuProps = {
  *
  * @see {@link https://www.radix-ui.com/primitives/docs/components/dropdown-menu}
  */
-export declare function DropdownMenu({ trigger, baseColor, children, className, contentClassName, disabled, ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ trigger, baseColor, children, className, contentClassName, contentStyle, disabled, ...props }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/dropdown-menu/dropdown-menu.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import { DropdownMenu as t, ScrollArea as n } from "radix-ui";
-import { forwardRef as g } from "react";
-import { twMerge as s } from "../../lib/tailwind-merge.js";
-const p = g(
+import { forwardRef as p } from "react";
+import { twMerge as d } from "../../lib/tailwind-merge.js";
+const m = p(
   ({ className: o, baseColor: r = "bg-neutral-60", textValue: l, ...a }, i) => /* @__PURE__ */ e(
     t.Item,
     {
-      className: s(
+      className: d(
         "tg-button-small data-highlighted:text-neutral-10 flex cursor-pointer items-center truncate rounded-[4px] px-4 py-2.5 transition-colors outline-none select-none",
         r === "bg-neutral-60" && "text-neutral-20 data-highlighted:bg-neutral-55",
         r === "bg-neutral-80" && "text-neutral-40 data-highlighted:bg-neutral-60",
@@ -19,41 +19,43 @@ const p = g(
     }
   )
 );
-p.displayName = "DropdownMenuItem";
-function w({
+m.displayName = "DropdownMenuItem";
+function v({
   trigger: o,
   baseColor: r = "bg-neutral-60",
   children: l,
   className: a,
   contentClassName: i,
-  disabled: d,
-  ...c
+  contentStyle: u,
+  disabled: c,
+  ...h
 }) {
-  return /* @__PURE__ */ u(t.Root, { ...c, children: [
-    /* @__PURE__ */ e(t.Trigger, { className: s("", a), asChild: !0, disabled: d, children: o }),
+  return /* @__PURE__ */ s(t.Root, { ...h, children: [
+    /* @__PURE__ */ e(t.Trigger, { className: d("", a), asChild: !0, disabled: c, children: o }),
     /* @__PURE__ */ e(t.Portal, { children: /* @__PURE__ */ e(
       n.Root,
       {
         type: "hover",
         style: { "--scrollbar-size": "10px" },
         asChild: !0,
-        children: /* @__PURE__ */ u(
+        children: /* @__PURE__ */ s(
           t.Content,
           {
-            onCloseAutoFocus: (h) => {
-              h.preventDefault();
+            onCloseAutoFocus: (g) => {
+              g.preventDefault();
             },
-            className: s(
+            className: d(
               "max-h-(--radix-dropdown-menu-content-available-height) overflow-hidden rounded-lg shadow-[0px_8px_20px_2px_rgba(0,0,0,0.40)]",
               r === "bg-neutral-60" && "bg-neutral-60",
               r === "bg-neutral-80" && "bg-neutral-80",
               i
             ),
+            style: u,
             align: "end",
             sideOffset: 8,
             collisionPadding: 8,
             children: [
-              /* @__PURE__ */ e(n.Viewport, { className: "max-h-(--radix-dropdown-menu-content-available-height) p-1", children: l }),
+              /* @__PURE__ */ e(n.Viewport, { className: "max-h-(--radix-dropdown-menu-content-available-height) overflow-x-hidden p-1 [&>div]:block!", children: l }),
               /* @__PURE__ */ e(
                 n.Scrollbar,
                 {
@@ -70,6 +72,6 @@ function w({
   ] });
 }
 export {
-  w as DropdownMenu,
-  p as DropdownMenuItem
+  v as DropdownMenu,
+  m as DropdownMenuItem
 };

package/dist/components/sidebar/sidebar.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-type SidebarItemId = 'home' | 'mavrik' | 'nodeApi' | 'staking' | 'apiKey' | 'docs';
+type SidebarItemId = 'home' | 'mavrik' | 'nodeApi' | 'staking';
 type SidebarDestination = {
     href: string;
     matchPaths?: string | string[];
@@ -16,7 +16,7 @@ type SidebarProps = {
      *
      * Provide a key to show that item; omit it to hide it.
      *
-     * Possible keys: 'home', 'mavrik', 'nodeApi', 'staking', 'apiKey', 'docs'.
+     * Possible keys: 'home', 'mavrik', 'nodeApi', 'staking'.
      *
      * Destination shape (per key):
      * - `href` (required): URL or in-app route string
@@ -30,8 +30,6 @@ type SidebarProps = {
      *   mavrik: { href: '/mavrik', matchPaths: '/ai/[[...rest]]' },
      *   nodeApi: { href: '/node-api', matchPaths: '/node/[[...rest]]' },
      *   staking: { href: '/staking', matchPaths: '/staking/[[...rest]]' },
-     *   apiKey: { href: '/settings/api-keys' },
-     *   docs: { href: 'https://docs.validationcloud.io', external: true, openInNewTab: true },
      * };
      * ```
      */
@@ -61,24 +59,14 @@ type SidebarProps = {
      * ```
      */
     renderLink: (props: RenderLinkProps) => React.ReactElement;
-    /**
-     * Bottom item content for the account area (e.g. `UserDropdown`).
-     *
-     * Rendered at the bottom of the Sidebar.
-     */
-    accountItem: React.ReactNode;
-    /**
-     * Optional bottom contact item (e.g. `IntercomButton`).
-     *
-     * Rendered above `accountItem` when provided.
-     */
-    helpItem?: React.ReactNode;
     /**
      * The app's current pathname (e.g. value from`usePathname()` ).
      *
      * Used to compute active state for product items via each destination's `matchPaths`.
      */
     currentPathname: string;
+    /** Content rendered at the bottom of the icon rail (e.g. a collapsed `<UserDropdown>`). */
+    footer?: React.ReactNode;
 } & React.ComponentProps<'nav'>;
 /**
  * Vertical navigation sidebar.
@@ -88,5 +76,5 @@ type SidebarProps = {
  * - Provide `renderLink` to hook into your app router.
  * - Provide `currentPathname` + per-route `matchPaths` to enable active styling for product items.
  */
-export declare function Sidebar({ routes, renderLink, helpItem, accountItem, currentPathname, className }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ routes, renderLink, currentPathname, footer, className }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/sidebar/sidebar.js

@@ -1,75 +1,58 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import s from "react";
-import N from "../../assets/mavrik-icon-muted.svg.js";
-import b from "../../assets/mavrik-icon.svg.js";
-import I from "../../assets/node-api-icon-muted.svg.js";
-import A from "../../assets/node-api-icon.svg.js";
-import k from "../../assets/staking-icon-muted.svg.js";
-import x from "../../assets/staking-icon.svg.js";
-import P from "../../assets/vc-logo-sm-white.svg.js";
-import { Icon as d } from "../icon/icon.js";
-import { BottomNavItem as u } from "./bottom-nav-item.js";
-import { ProductNavItem as H } from "./product-nav-item.js";
-import { twMerge as w } from "../../lib/tailwind-merge.js";
-import { matchesPathname as f } from "../../utils/matches-pathname.js";
-const y = [
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import g from "react";
+import v from "../../assets/mavrik-icon-muted.svg.js";
+import h from "../../assets/mavrik-icon.svg.js";
+import N from "../../assets/node-api-icon-muted.svg.js";
+import k from "../../assets/node-api-icon.svg.js";
+import I from "../../assets/staking-icon-muted.svg.js";
+import A from "../../assets/staking-icon.svg.js";
+import H from "../../assets/vc-logo-sm-white.svg.js";
+import { ProductNavItem as P } from "./product-nav-item.js";
+import { twMerge as b } from "../../lib/tailwind-merge.js";
+import { matchesPathname as n } from "../../utils/matches-pathname.js";
+const w = [
   {
     id: "mavrik",
     label: "Mavrik",
-    icon: /* @__PURE__ */ o("img", { src: N, alt: "Mavrik", className: "w-5" }),
-    iconHover: /* @__PURE__ */ o("img", { src: b, alt: "Mavrik", className: "w-5" })
+    icon: /* @__PURE__ */ o("img", { src: v, alt: "Mavrik", className: "w-5" }),
+    iconHover: /* @__PURE__ */ o("img", { src: h, alt: "Mavrik", className: "w-5" })
   },
   {
     id: "nodeApi",
     label: "Node API",
-    icon: /* @__PURE__ */ o("img", { src: I, alt: "Node API", className: "w-4" }),
-    iconHover: /* @__PURE__ */ o("img", { src: A, alt: "Node API", className: "w-4" })
+    icon: /* @__PURE__ */ o("img", { src: N, alt: "Node API", className: "w-4" }),
+    iconHover: /* @__PURE__ */ o("img", { src: k, alt: "Node API", className: "w-4" })
   },
   {
     id: "staking",
     label: "Staking",
-    icon: /* @__PURE__ */ o("img", { src: k, alt: "Staking", className: "w-4" }),
-    iconHover: /* @__PURE__ */ o("img", { src: x, alt: "Staking", className: "w-4" })
+    icon: /* @__PURE__ */ o("img", { src: I, alt: "Staking", className: "w-4" }),
+    iconHover: /* @__PURE__ */ o("img", { src: A, alt: "Staking", className: "w-4" })
   }
-], M = [
-  { id: "apiKey", label: "API Key", icon: /* @__PURE__ */ o(d, { icon: "key", className: "size-5 flex-none" }) },
-  { id: "docs", label: "Docs", icon: /* @__PURE__ */ o(d, { icon: "documents", className: "mb-1 size-4 flex-none" }) }
 ];
-function U({ routes: c, renderLink: r, helpItem: n, accountItem: p, currentPathname: l, className: g }) {
-  const m = c.home;
-  return /* @__PURE__ */ t("nav", { className: w("bg-neutral-80 flex h-full w-16 flex-col items-center gap-4 pt-4 pb-9", g), children: [
-    m && r({
-      destination: m,
+function F({ routes: e, renderLink: m, currentPathname: t, footer: l, className: s }) {
+  const c = e.home;
+  return /* @__PURE__ */ f("nav", { className: b("bg-neutral-80 flex h-full w-16 flex-col items-center gap-4 pt-4", s), children: [
+    c && m({
+      destination: c,
       "aria-label": "Home",
-      children: /* @__PURE__ */ o("div", { className: "px-5 py-2", children: /* @__PURE__ */ o("img", { src: P, alt: "Company Logo" }) })
+      children: /* @__PURE__ */ o("div", { className: "px-5 py-2", children: /* @__PURE__ */ o("img", { src: H, alt: "Company Logo" }) })
     }),
-    y.map((a) => {
-      const i = c[a.id];
-      if (!i) return null;
-      let e = !1;
-      i.matchPaths && (Array.isArray(i.matchPaths) ? e = i.matchPaths.some((h) => f(l, h)) : e = f(l, i.matchPaths));
-      const v = r({
-        destination: i,
-        children: /* @__PURE__ */ o(H, { icon: a.icon, iconHover: a.iconHover, label: a.label, isActive: e })
+    w.map((i) => {
+      const a = e[i.id];
+      if (!a) return null;
+      let r = !1;
+      a.matchPaths && (Array.isArray(a.matchPaths) ? r = a.matchPaths.some((d) => n(t, d)) : r = n(t, a.matchPaths));
+      const p = m({
+        destination: a,
+        children: /* @__PURE__ */ o(P, { icon: i.icon, iconHover: i.iconHover, label: i.label, isActive: r })
       });
-      return /* @__PURE__ */ o(s.Fragment, { children: v }, a.id);
+      return /* @__PURE__ */ o(g.Fragment, { children: p }, i.id);
     }),
     /* @__PURE__ */ o("div", { className: "flex-1" }),
-    /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-6", children: [
-      M.map((a) => {
-        const i = c[a.id];
-        if (!i) return null;
-        const e = r({
-          destination: i,
-          children: /* @__PURE__ */ o(u, { icon: a.icon, label: a.label })
-        });
-        return /* @__PURE__ */ o(s.Fragment, { children: e }, a.id);
-      }),
-      n && n,
-      p
-    ] })
+    l
   ] });
 }
 export {
-  U as Sidebar
+  F as Sidebar
 };

package/dist/components/user-dropdown/initials-avatar.d.ts

@@ -0,0 +1,7 @@
+type InitialsAvatarProps = {
+    email: string;
+    displayName: string | undefined;
+    className?: string;
+};
+export declare function InitialsAvatar({ email, displayName, className }: InitialsAvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user-dropdown/initials-avatar.js

@@ -0,0 +1,42 @@
+import { jsx as a } from "react/jsx-runtime";
+import { twMerge as s } from "../../lib/tailwind-merge.js";
+const n = [
+  "var(--color-primary-50)",
+  "var(--color-secondary-50)",
+  "var(--color-purple)",
+  "var(--color-success-50)",
+  "var(--color-primary-60)",
+  "var(--color-secondary-60)",
+  "var(--color-warning-60)",
+  "var(--color-secondary-70)"
+], c = /\s+/;
+function i(o, r) {
+  if (o) {
+    const t = o.trim().split(c), e = t[0]?.[0] ?? "";
+    return t.length >= 2 ? (e + (t.at(-1)?.[0] ?? "")).toUpperCase() : e.toUpperCase();
+  }
+  return (r[0] ?? "").toUpperCase();
+}
+function l(o) {
+  let r = 0;
+  for (const t of o)
+    r = (r << 5) - r + t.charCodeAt(0) | 0;
+  return n[Math.abs(r) % n.length] ?? "var(--color-primary-50)";
+}
+function p({ email: o, displayName: r, className: t }) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: s(
+        "flex size-8 items-center justify-center rounded-full text-xs font-semibold text-white outline-1 -outline-offset-1 outline-white/10 select-none",
+        t
+      ),
+      style: { backgroundColor: l(o) },
+      "aria-hidden": "true",
+      children: i(r, o)
+    }
+  );
+}
+export {
+  p as InitialsAvatar
+};

package/dist/components/user-dropdown/user-dropdown.d.ts

@@ -1,36 +1,42 @@
 import { default as React } from 'react';
 import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
-type UserWithNameAndPicture = {
+type UserDropdownUser = {
     email: string;
-    picture?: string;
 };
 type UserDropdownProps = {
-    user: UserWithNameAndPicture | undefined;
+    user: UserDropdownUser | undefined;
     loginUrl: string;
     signupUrl: string;
     logoutUrl: string;
     accountUrl?: string;
-    contactItem?: React.ReactNode;
-} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger'>;
+    /** Extra menu items rendered between account and logout. */
+    menuItems?: React.ReactNode;
+    /** Display name shown on the trigger card. Falls back to email prefix when omitted. */
+    displayName?: string;
+    /** Plan tier label (e.g. "Free", "PRO · Monthly") shown below the name on the trigger card. */
+    planLabel?: string;
+    /** When provided, shows an "Upgrade" badge on the trigger and an upgrade menu item in the dropdown. */
+    upgradeUrl?: string;
+    /** When true, renders a compact avatar-only trigger (e.g. when the sidebar is collapsed). */
+    collapsed?: boolean;
+    /** When true, renders the trigger with a card-like background (use in sidebar context). */
+    card?: boolean;
+} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger' | 'contentClassName'>;
 /**
- * User dropdown menu that displays a user's email, account, and logout options.
- * @param user - The user to display in the dropdown
- * @param loginUrl - The URL to navigate to the login page
- * @param signupUrl - The URL to navigate to the signup page
- * @param logoutUrl - The URL to navigate to the logout page
- * @param accountUrl - The URL to navigate to the account page
- * @param contactItem - The item to display in the contact dropdown
-
+ * User dropdown menu with a trigger card showing avatar, display name, plan
+ * tier, and an optional upgrade pill. Opens a dropdown with email, account,
+ * contact, and logout items.
+ *
  * @example
- * // Example usage of UserDropdown
  * <UserDropdown
- *   user={{ email: 'john.doe@example.com', picture: 'picture-url' }}
+ *   user={{ email: 'john.doe@example.com' }}
+ *   displayName="John"
+ *   planLabel="PRO · Monthly"
  *   loginUrl="/auth/login"
  *   signupUrl="/auth/login?screen_hint=signup"
  *   logoutUrl="/auth/logout"
  *   accountUrl="/account"
- *   contactItem={<IntercomButton><Icon icon="help-center"/><p className="tg-body">Contact Support</p></IntercomButton>}
  * />
  */
-export declare function UserDropdown({ user, loginUrl, signupUrl, logoutUrl, accountUrl, contactItem, className, ...props }: UserDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserDropdown({ user, loginUrl, signupUrl, logoutUrl, accountUrl, menuItems, displayName, planLabel, upgradeUrl, collapsed, card, className, ...props }: UserDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/user-dropdown/user-dropdown.js

@@ -1,74 +1,118 @@
 "use client";
-import { jsxs as r, Fragment as p, jsx as e } from "react/jsx-runtime";
-import "react";
-import h from "../../assets/default-avatar.svg.js";
-import { Button as u } from "../button/button.js";
-import { DropdownMenu as f, DropdownMenuItem as i } from "../dropdown-menu/dropdown-menu.js";
-import { Icon as t } from "../icon/icon.js";
-import { twMerge as a } from "../../lib/tailwind-merge.js";
-function C({
-  user: l,
-  loginUrl: o,
+import { jsxs as t, Fragment as y, jsx as e } from "react/jsx-runtime";
+import z from "../../assets/default-avatar.svg.js";
+import { Button as x } from "../button/button.js";
+import { DropdownMenu as b, DropdownMenuItem as n } from "../dropdown-menu/dropdown-menu.js";
+import { Icon as a } from "../icon/icon.js";
+import { InitialsAvatar as N } from "./initials-avatar.js";
+import { twMerge as o } from "../../lib/tailwind-merge.js";
+function S({
+  user: r,
+  loginUrl: c,
   signupUrl: d,
-  logoutUrl: g,
-  accountUrl: c,
-  contactItem: n,
+  logoutUrl: v,
+  accountUrl: u,
+  menuItems: m,
+  displayName: i,
+  planLabel: h,
+  upgradeUrl: l,
+  collapsed: g,
+  card: p,
   className: s,
-  ...m
+  ...f
 }) {
-  return l ? /* @__PURE__ */ r(
-    f,
+  if (!r)
+    return /* @__PURE__ */ t(y, { children: [
+      /* @__PURE__ */ t("div", { className: o("hidden gap-3 sm:flex", s), children: [
+        /* @__PURE__ */ e(x, { variant: "secondary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: c, children: "Log in" }) }),
+        /* @__PURE__ */ e(x, { variant: "primary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: d, children: "Sign up" }) })
+      ] }),
+      /* @__PURE__ */ t(
+        b,
+        {
+          trigger: /* @__PURE__ */ e("img", { className: "size-7 cursor-pointer sm:hidden", src: z, alt: "User avatar" }),
+          className: o(
+            "hover:bg-neutral-60 focus-visible:ring-neutral-60 data-[state=open]:bg-neutral-60 rounded-full outline-none focus-visible:ring-2 sm:hidden",
+            s
+          ),
+          ...f,
+          children: [
+            /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e("a", { href: c, className: "tg-body", children: "Log in" }) }),
+            /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ e("a", { href: d, className: "tg-body", children: "Sign up" }) }),
+            m
+          ]
+        }
+      )
+    ] });
+  const w = i ?? r.email.split("@")[0] ?? r.email;
+  return /* @__PURE__ */ t(
+    b,
     {
-      trigger: /* @__PURE__ */ e(
+      trigger: g ? /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          className: "gap-r3 focus-visible:ring-neutral-40 flex h-10 shrink cursor-pointer flex-row items-center overflow-hidden px-3 py-6 focus:outline-none focus-visible:rounded-xl focus-visible:ring-2",
-          children: /* @__PURE__ */ e("img", { className: "size-7 rounded-full sm:size-9", src: l.picture ?? h, alt: "User avatar" })
+          "aria-label": "User menu",
+          className: "group focus-visible:ring-neutral-40 flex h-14 w-16 cursor-pointer items-center justify-center rounded-xl focus:outline-none focus-visible:ring-2",
+          children: /* @__PURE__ */ e(
+            N,
+            {
+              email: r.email,
+              displayName: i,
+              className: "group-hover:brightness-125 group-data-[state=open]:brightness-125"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          className: o(
+            "group focus-visible:ring-neutral-40 flex h-14 w-full cursor-pointer items-center gap-4 rounded-xl pr-3.5 pl-4 focus:outline-none focus-visible:ring-2",
+            p && "bg-neutral-65 hover:bg-neutral-60 shadow-[0_-6px_12px_-4px_rgba(0,0,0,0.25)]"
+          ),
+          children: [
+            /* @__PURE__ */ e(N, { email: r.email, displayName: i, className: "shrink-0" }),
+            /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+              /* @__PURE__ */ e("span", { className: "tg-body-bold text-neutral-10 truncate text-left", children: w }),
+              h && /* @__PURE__ */ e("span", { className: "tg-caption text-neutral-40 group-data-[state=open]:text-neutral-10 truncate text-left", children: h })
+            ] }),
+            l ? /* @__PURE__ */ e("span", { className: "tg-caption-bold text-neutral-20 shrink-0 rounded-full border border-neutral-50 px-2.5 py-0.5", children: "Upgrade" }) : /* @__PURE__ */ e(
+              a,
+              {
+                icon: "chevron-vertical",
+                className: "text-neutral-40 group-data-[state=open]:text-neutral-10 size-3.5 shrink-0"
+              }
+            )
+          ]
         }
       ),
-      className: a("tg-caption-bold -mx-2 rounded-xl px-2 py-1", s),
+      className: s,
       contentClassName: "bg-neutral-60",
-      ...m,
+      contentStyle: p && !g ? { width: "var(--radix-dropdown-menu-trigger-width)" } : void 0,
+      ...f,
       children: [
-        /* @__PURE__ */ r("div", { className: "tg-button-small text-neutral-40 flex items-center gap-3 px-4 py-2.5 select-text", children: [
-          /* @__PURE__ */ e(t, { icon: "user", className: "size-4 flex-none" }),
-          /* @__PURE__ */ e("p", { className: "tg-body", children: l.email })
+        l && /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ t("a", { href: l, className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e(a, { icon: "sparkles", className: "size-4 flex-none text-white" }),
+          /* @__PURE__ */ e("p", { className: "tg-body", children: "Upgrade plan" })
+        ] }) }),
+        /* @__PURE__ */ t("div", { className: "tg-button-small text-neutral-40 flex items-center gap-3 overflow-hidden px-4 py-2.5 select-text", children: [
+          /* @__PURE__ */ e(a, { icon: "user", className: "size-4 flex-none" }),
+          /* @__PURE__ */ e("p", { className: "tg-body min-w-0 truncate", children: r.email })
         ] }),
-        c && /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ r("a", { href: c, className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e(t, { icon: "cog", className: "size-4 flex-none text-white" }),
+        u && /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ t("a", { href: u, className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e(a, { icon: "cog", className: "size-4 flex-none text-white" }),
           /* @__PURE__ */ e("p", { className: "tg-body", children: "Account" })
         ] }) }),
-        n && /* @__PURE__ */ e(i, { asChild: !0, children: n }),
-        /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ r("a", { href: g, className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e(t, { icon: "logout", className: "size-4 flex-none text-white" }),
+        m,
+        /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ t("a", { href: v, className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e(a, { icon: "logout", className: "size-4 flex-none text-white" }),
           /* @__PURE__ */ e("p", { className: "tg-body", children: "Log out" })
         ] }) })
       ]
     }
-  ) : /* @__PURE__ */ r(p, { children: [
-    /* @__PURE__ */ r("div", { className: a("hidden gap-3 sm:flex", s), children: [
-      /* @__PURE__ */ e(u, { variant: "secondary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: o, children: "Log in" }) }),
-      /* @__PURE__ */ e(u, { variant: "primary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: d, children: "Sign up" }) })
-    ] }),
-    /* @__PURE__ */ r(
-      f,
-      {
-        trigger: /* @__PURE__ */ e("img", { className: "size-7 cursor-pointer sm:hidden", src: h, alt: "User avatar" }),
-        className: a(
-          "hover:bg-neutral-60 focus-visible:ring-neutral-60 data-[state=open]:bg-neutral-60 rounded-full outline-none focus-visible:ring-2 sm:hidden",
-          s
-        ),
-        ...m,
-        children: [
-          /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ e("a", { href: o, className: "tg-body", children: "Log in" }) }),
-          /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ e("a", { href: d, className: "tg-body", children: "Sign up" }) }),
-          n && /* @__PURE__ */ e(i, { children: n })
-        ]
-      }
-    )
-  ] });
+  );
 }
 export {
-  C as UserDropdown
+  S as UserDropdown
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@validationcloud/fractal-ui",
   "description": "Validation Cloud's shared React component library with design tokens, Tailwind CSS utilities, and CLI tools",
   "private": false,
-  "version": "1.81.0",
+  "version": "1.82.0",
   "module": "./dist/index.js",
   "type": "module",
   "bin": {

package/dist/components/sidebar/bottom-nav-item.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-type BottomNavItemProps = {
-    icon: React.ReactNode;
-    label: string;
-} & React.ComponentPropsWithoutRef<'div'>;
-export declare function BottomNavItem({ icon, label, className, ...props }: BottomNavItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/sidebar/bottom-nav-item.js

@@ -1,19 +0,0 @@
-import { jsxs as o, jsx as c } from "react/jsx-runtime";
-import "react";
-import { twMerge as i } from "../../lib/tailwind-merge.js";
-function l({ icon: t, label: e, className: r, ...n }) {
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: i("text-neutral-40 hover:text-neutral-10 flex flex-col items-center justify-center", r),
-      ...n,
-      children: [
-        t,
-        /* @__PURE__ */ c("span", { className: "tg-caption text-center", children: e })
-      ]
-    }
-  );
-}
-export {
-  l as BottomNavItem
-};