@validationcloud/fractal-ui 1.81.0 → 1.83.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,64 @@
-import { default as React } from 'react';
 import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
-type UserWithNameAndPicture = {
+import { IconID } from '../icon/icon';
+export type UserDropdownUser = {
     email: string;
-    picture?: string;
 };
-type UserDropdownProps = {
-    user: UserWithNameAndPicture | undefined;
+type UserDropdownRootProps = {
+    user: UserDropdownUser;
+    /** Display name shown on the trigger. Falls back to the email prefix when omitted. */
+    displayName?: string;
+    trigger: React.ReactNode;
+    /** When true, the dropdown content width matches the trigger width. */
+    matchTriggerWidth?: boolean;
+    className?: string;
+    children: React.ReactNode;
+} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger' | 'contentClassName' | 'contentStyle'>;
+declare function UserDropdownRoot({ user, displayName, trigger, matchTriggerWidth, className, children, ...props }: UserDropdownRootProps): import("react/jsx-runtime").JSX.Element;
+type UserDropdownTriggerProps = {
+    /** Plan tier label (e.g. "Free", "PRO \u00b7 Monthly") shown below the name. */
+    planLabel?: string;
+    /** Render a card-like background (use in sidebar context). */
+    card?: boolean;
+    /** Custom trailing content. Defaults to a chevron icon. */
+    trailing?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<'button'>;
+declare function UserDropdownTrigger({ planLabel, card, trailing, className, ...props }: UserDropdownTriggerProps): import("react/jsx-runtime").JSX.Element;
+type UserDropdownAvatarTriggerProps = React.ComponentPropsWithoutRef<'button'>;
+declare function UserDropdownAvatarTrigger({ className, ...props }: UserDropdownAvatarTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function UserDropdownUpgradeBadge(): import("react/jsx-runtime").JSX.Element;
+declare function UserDropdownEmail(): import("react/jsx-runtime").JSX.Element;
+type UserDropdownItemProps = {
+    href: string;
+    icon: IconID;
+    children: React.ReactNode;
+};
+declare function UserDropdownItem({ href, icon, children }: UserDropdownItemProps): import("react/jsx-runtime").JSX.Element;
+declare function UserDropdownUpgrade({ href }: {
+    href: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function UserDropdownAccount({ href }: {
+    href: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function UserDropdownLogout({ href }: {
+    href: string;
+}): import("react/jsx-runtime").JSX.Element;
+type UserDropdownLoggedOutProps = {
     loginUrl: string;
     signupUrl: string;
-    logoutUrl: string;
-    accountUrl?: string;
-    contactItem?: React.ReactNode;
-} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger'>;
-/**
- * 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
-
- * @example
- * // Example usage of UserDropdown
- * <UserDropdown
- *   user={{ email: 'john.doe@example.com', picture: 'picture-url' }}
- *   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;
+    className?: string;
+    /** Extra menu items rendered inside the mobile dropdown. */
+    children?: React.ReactNode;
+};
+declare function UserDropdownLoggedOut({ loginUrl, signupUrl, className, children }: UserDropdownLoggedOutProps): import("react/jsx-runtime").JSX.Element;
+export declare const UserDropdown: typeof UserDropdownRoot & {
+    Trigger: typeof UserDropdownTrigger;
+    AvatarTrigger: typeof UserDropdownAvatarTrigger;
+    UpgradeBadge: typeof UserDropdownUpgradeBadge;
+    Email: typeof UserDropdownEmail;
+    Item: typeof UserDropdownItem;
+    Upgrade: typeof UserDropdownUpgrade;
+    Account: typeof UserDropdownAccount;
+    Logout: typeof UserDropdownLogout;
+    LoggedOut: typeof UserDropdownLoggedOut;
+};
 export {};

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

@@ -1,74 +1,152 @@
 "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,
-  signupUrl: d,
-  logoutUrl: g,
-  accountUrl: c,
-  contactItem: n,
-  className: s,
-  ...m
+import { jsx as e, jsxs as a, Fragment as w } from "react/jsx-runtime";
+import { createContext as v, use as N } from "react";
+import U from "../../assets/default-avatar.svg.js";
+import { Button as g } from "../button/button.js";
+import { DropdownMenu as h, DropdownMenuItem as u } from "../dropdown-menu/dropdown-menu.js";
+import { Icon as p } from "../icon/icon.js";
+import { InitialsAvatar as f } from "./initials-avatar.js";
+import { twMerge as s } from "../../lib/tailwind-merge.js";
+const x = v(null);
+function m() {
+  const r = N(x);
+  if (!r)
+    throw new Error("UserDropdown compound components must be rendered inside <UserDropdown>.");
+  return r;
+}
+function D({
+  user: r,
+  displayName: n,
+  trigger: t,
+  matchTriggerWidth: o,
+  className: c,
+  children: d,
+  ...i
 }) {
-  return l ? /* @__PURE__ */ r(
-    f,
+  const b = n ?? r.email.split("@")[0] ?? r.email;
+  return /* @__PURE__ */ e(x, { value: { user: r, displayName: b }, children: /* @__PURE__ */ e(
+    h,
     {
-      trigger: /* @__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" })
-        }
-      ),
-      className: a("tg-caption-bold -mx-2 rounded-xl px-2 py-1", s),
+      trigger: t,
+      className: c,
       contentClassName: "bg-neutral-60",
-      ...m,
+      contentStyle: o ? { width: "var(--radix-dropdown-menu-trigger-width)" } : void 0,
+      ...i,
+      children: d
+    }
+  ) });
+}
+function y({ planLabel: r, card: n, trailing: t, className: o, ...c }) {
+  const { user: d, displayName: i } = m();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: s(
+        "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",
+        n && "bg-neutral-65 hover:bg-neutral-60 shadow-[0_-6px_12px_-4px_rgba(0,0,0,0.25)]",
+        o
+      ),
+      ...c,
       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 })
+        /* @__PURE__ */ e(f, { email: d.email, displayName: i, className: "shrink-0" }),
+        /* @__PURE__ */ a("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: i }),
+          r && /* @__PURE__ */ e("span", { className: "tg-caption text-neutral-40 group-data-[state=open]:text-neutral-10 truncate text-left", children: r })
         ] }),
-        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" }),
-          /* @__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" }),
-          /* @__PURE__ */ e("p", { className: "tg-body", children: "Log out" })
-        ] }) })
+        t ?? /* @__PURE__ */ e(
+          p,
+          {
+            icon: "chevron-vertical",
+            className: "text-neutral-40 group-data-[state=open]:text-neutral-10 size-3.5 shrink-0"
+          }
+        )
       ]
     }
-  ) : /* @__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" }) })
+  );
+}
+function C({ className: r, ...n }) {
+  const { user: t, displayName: o } = m();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "aria-label": "User menu",
+      className: s(
+        "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",
+        r
+      ),
+      ...n,
+      children: /* @__PURE__ */ e(
+        f,
+        {
+          email: t.email,
+          displayName: o,
+          className: "group-hover:brightness-125 group-data-[state=open]:brightness-125"
+        }
+      )
+    }
+  );
+}
+function A() {
+  return /* @__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" });
+}
+function z() {
+  const { user: r } = m();
+  return /* @__PURE__ */ a("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(p, { icon: "user", className: "size-4 flex-none" }),
+    /* @__PURE__ */ e("p", { className: "tg-body min-w-0 truncate", children: r.email })
+  ] });
+}
+function l({ href: r, icon: n, children: t }) {
+  return /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ a("a", { href: r, className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e(p, { icon: n, className: "size-4 flex-none text-white" }),
+    /* @__PURE__ */ e("p", { className: "tg-body", children: t })
+  ] }) });
+}
+function L({ href: r }) {
+  return /* @__PURE__ */ e(l, { href: r, icon: "sparkles", children: "Upgrade plan" });
+}
+function I({ href: r }) {
+  return /* @__PURE__ */ e(l, { href: r, icon: "cog", children: "Account" });
+}
+function j({ href: r }) {
+  return /* @__PURE__ */ e(l, { href: r, icon: "logout", children: "Log out" });
+}
+function k({ loginUrl: r, signupUrl: n, className: t, children: o }) {
+  return /* @__PURE__ */ a(w, { children: [
+    /* @__PURE__ */ a("div", { className: s("hidden gap-3 sm:flex", t), children: [
+      /* @__PURE__ */ e(g, { variant: "secondary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: r, children: "Log in" }) }),
+      /* @__PURE__ */ e(g, { variant: "primary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: n, children: "Sign up" }) })
     ] }),
-    /* @__PURE__ */ r(
-      f,
+    /* @__PURE__ */ a(
+      h,
       {
-        trigger: /* @__PURE__ */ e("img", { className: "size-7 cursor-pointer sm:hidden", src: h, alt: "User avatar" }),
-        className: a(
+        trigger: /* @__PURE__ */ e("img", { className: "size-7 cursor-pointer sm:hidden", src: U, alt: "User avatar" }),
+        className: s(
           "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
+          t
         ),
-        ...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 })
+          /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e("a", { href: r, className: "tg-body", children: "Log in" }) }),
+          /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ e("a", { href: n, className: "tg-body", children: "Sign up" }) }),
+          o
         ]
       }
     )
   ] });
 }
+const R = Object.assign(D, {
+  Trigger: y,
+  AvatarTrigger: C,
+  UpgradeBadge: A,
+  Email: z,
+  Item: l,
+  Upgrade: L,
+  Account: I,
+  Logout: j,
+  LoggedOut: k
+});
 export {
-  C as UserDropdown
+  R as UserDropdown
 };

package/dist/index.d.ts

@@ -25,5 +25,5 @@ export { Tooltip } from './components/tooltip/tooltip';
 export { TooltipProvider } from './components/tooltip-provider/tooltip-provider';
 export { TouchTarget } from './components/touch-target/touch-target';
 export { twMerge } from './lib/tailwind-merge';
-export { UserDropdown } from './components/user-dropdown/user-dropdown';
+export { UserDropdown, type UserDropdownUser } from './components/user-dropdown/user-dropdown';
 export { useScrollToBottom } from './hooks/use-scroll-to-bottom';

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.83.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
-};