@validationcloud/fractal-ui 1.82.0 → 1.84.0

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

@@ -1,42 +1,65 @@
-import { default as React } from 'react';
 import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
-type UserDropdownUser = {
+import { IconID } from '../icon/icon';
+export type UserDropdownUser = {
     email: string;
 };
-type UserDropdownProps = {
-    user: UserDropdownUser | undefined;
-    loginUrl: string;
-    signupUrl: string;
-    logoutUrl: string;
-    accountUrl?: string;
-    /** 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. */
+type UserDropdownRootProps = {
+    user: UserDropdownUser;
+    /** Display name shown on the trigger. Falls back to the email prefix when omitted. */
     displayName?: string;
-    /** Plan tier label (e.g. "Free", "PRO · Monthly") shown below the name on the trigger card. */
+    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;
-    /** 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). */
+    /** Render a card-like background (use in sidebar context). */
     card?: boolean;
-} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger' | 'contentClassName'>;
-/**
- * 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
- * <UserDropdown
- *   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"
- * />
- */
-export declare function UserDropdown({ user, loginUrl, signupUrl, logoutUrl, accountUrl, menuItems, displayName, planLabel, upgradeUrl, collapsed, card, className, ...props }: UserDropdownProps): import("react/jsx-runtime").JSX.Element;
+    /** 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 = {
+    icon: IconID;
+    children: React.ReactNode;
+    /** When true, the single child element is rendered as the anchor. Use to integrate with client-side routers (e.g. next/link). */
+    asChild?: boolean;
+} & React.ComponentPropsWithoutRef<'a'>;
+declare function UserDropdownItem({ icon, children, asChild, className, ...props }: 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;
+    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,118 +1,154 @@
 "use client";
-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({
+import { jsx as e, jsxs as a, Fragment as v } from "react/jsx-runtime";
+import { Slot as g } from "radix-ui";
+import { createContext as N, use as U } from "react";
+import D from "../../assets/default-avatar.svg.js";
+import { Button as h } from "../button/button.js";
+import { DropdownMenu as f, DropdownMenuItem as u } from "../dropdown-menu/dropdown-menu.js";
+import { Icon as p } from "../icon/icon.js";
+import { InitialsAvatar as x } from "./initials-avatar.js";
+import { twMerge as l } from "../../lib/tailwind-merge.js";
+const b = N(null);
+function m() {
+  const r = U(b);
+  if (!r)
+    throw new Error("UserDropdown compound components must be rendered inside <UserDropdown>.");
+  return r;
+}
+function y({
   user: r,
-  loginUrl: c,
-  signupUrl: d,
-  logoutUrl: v,
-  accountUrl: u,
-  menuItems: m,
-  displayName: i,
-  planLabel: h,
-  upgradeUrl: l,
-  collapsed: g,
-  card: p,
-  className: s,
-  ...f
+  displayName: t,
+  trigger: n,
+  matchTriggerWidth: o,
+  className: i,
+  children: s,
+  ...c
 }) {
-  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,
+  const w = t ?? r.email.split("@")[0] ?? r.email;
+  return /* @__PURE__ */ e(b, { value: { user: r, displayName: w }, children: /* @__PURE__ */ e(
+    f,
     {
-      trigger: g ? /* @__PURE__ */ e(
-        "button",
-        {
-          type: "button",
-          "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: s,
+      trigger: n,
+      className: i,
       contentClassName: "bg-neutral-60",
-      contentStyle: p && !g ? { width: "var(--radix-dropdown-menu-trigger-width)" } : void 0,
-      ...f,
+      contentStyle: o ? { width: "var(--radix-dropdown-menu-trigger-width)" } : void 0,
+      ...c,
+      children: s
+    }
+  ) });
+}
+function C({ planLabel: r, card: t, trailing: n, className: o, ...i }) {
+  const { user: s, displayName: c } = m();
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      className: l(
+        "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",
+        t && "bg-neutral-65 hover:bg-neutral-60 shadow-[0_-6px_12px_-4px_rgba(0,0,0,0.25)]",
+        o
+      ),
+      ...i,
       children: [
-        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 })
+        /* @__PURE__ */ e(x, { email: s.email, displayName: c, 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: c }),
+          r && /* @__PURE__ */ e("span", { className: "tg-caption text-neutral-40 group-data-[state=open]:text-neutral-10 truncate text-left", children: r })
         ] }),
-        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" })
-        ] }) }),
-        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" })
-        ] }) })
+        n ?? /* @__PURE__ */ e(
+          p,
+          {
+            icon: "chevron-vertical",
+            className: "text-neutral-40 group-data-[state=open]:text-neutral-10 size-3.5 shrink-0"
+          }
+        )
       ]
     }
   );
 }
+function A({ className: r, ...t }) {
+  const { user: n, displayName: o } = m();
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "aria-label": "User menu",
+      className: l(
+        "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
+      ),
+      ...t,
+      children: /* @__PURE__ */ e(
+        x,
+        {
+          email: n.email,
+          displayName: o,
+          className: "group-hover:brightness-125 group-data-[state=open]:brightness-125"
+        }
+      )
+    }
+  );
+}
+function z() {
+  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 L() {
+  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 d({ icon: r, children: t, asChild: n, className: o, ...i }) {
+  const s = n ? g.Root : "a";
+  return /* @__PURE__ */ e(u, { asChild: !0, children: /* @__PURE__ */ a(s, { ...i, className: l("tg-body flex items-center gap-3", o), children: [
+    /* @__PURE__ */ e(p, { icon: r, className: "size-4 flex-none text-white" }),
+    /* @__PURE__ */ e(g.Slottable, { children: t })
+  ] }) });
+}
+function I({ href: r }) {
+  return /* @__PURE__ */ e(d, { href: r, icon: "sparkles", children: "Upgrade plan" });
+}
+function S({ href: r }) {
+  return /* @__PURE__ */ e(d, { href: r, icon: "cog", children: "Account" });
+}
+function j({ href: r }) {
+  return /* @__PURE__ */ e(d, { href: r, icon: "logout", children: "Log out" });
+}
+function k({ loginUrl: r, signupUrl: t, className: n, children: o }) {
+  return /* @__PURE__ */ a(v, { children: [
+    /* @__PURE__ */ a("div", { className: l("hidden gap-3 sm:flex", n), children: [
+      /* @__PURE__ */ e(h, { variant: "secondary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: r, children: "Log in" }) }),
+      /* @__PURE__ */ e(h, { variant: "primary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: t, children: "Sign up" }) })
+    ] }),
+    /* @__PURE__ */ a(
+      f,
+      {
+        trigger: /* @__PURE__ */ e("img", { className: "size-7 cursor-pointer sm:hidden", src: D, alt: "User avatar" }),
+        className: l(
+          "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",
+          n
+        ),
+        children: [
+          /* @__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: t, className: "tg-body", children: "Sign up" }) }),
+          o
+        ]
+      }
+    )
+  ] });
+}
+const G = Object.assign(y, {
+  Trigger: C,
+  AvatarTrigger: A,
+  UpgradeBadge: z,
+  Email: L,
+  Item: d,
+  Upgrade: I,
+  Account: S,
+  Logout: j,
+  LoggedOut: k
+});
 export {
-  S as UserDropdown
+  G 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.82.0",
+  "version": "1.84.0",
   "module": "./dist/index.js",
   "type": "module",
   "bin": {