@validationcloud/fractal-ui 1.46.0 → 1.48.0

package/dist/src/components/protocol-logo/protocol-logo-ids.d.ts

@@ -1 +1 @@
-export declare const protocolLogoIds: readonly ["abs", "aleo", "ape", "apt", "arb", "astr", "avax", "axl", "b2", "babylon", "base", "bera", "bnb", "bob", "btc", "btr", "celo", "cfx", "core", "corn", "cro", "cspr", "eigenlayer", "eth", "eth_light", "fhe", "frax", "gno", "hash", "hbar", "hsk", "hype", "icp", "ink", "kat", "lens", "linea", "lsk", "matic", "merl", "metal", "metis", "mezo", "mint", "mnt", "mode", "mon", "obol", "okb", "op", "opbnb", "optimism", "plume", "rbtc", "ron", "s", "saga", "sauce", "scr", "sei", "shibarium", "sol", "soneium", "ssv", "starknet", "stt", "supr", "taiko", "tac", "tao", "ton", "trx", "uni", "union", "wemix", "wld", "xlm", "xtz", "zk"];
+export declare const protocolLogoIds: readonly ["abs", "aleo", "ape", "apt", "arb", "astr", "avax", "axl", "b2", "babylon", "base", "bera", "bnb", "bob", "btc", "btr", "celo", "cfx", "core", "corn", "cro", "cspr", "eigenlayer", "eth", "eth_light", "fhe", "frax", "gno", "hash", "hbar", "hsk", "hype", "icp", "ink", "jovay", "kat", "lens", "linea", "lsk", "matic", "merl", "metal", "metis", "mezo", "mint", "mnt", "mode", "mon", "obol", "okb", "op", "opbnb", "optimism", "plume", "rbtc", "ron", "s", "saga", "sauce", "scr", "sei", "shibarium", "sol", "soneium", "ssv", "starknet", "stt", "supr", "taiko", "tac", "tao", "ton", "trx", "uni", "union", "wemix", "wld", "xlm", "xtz", "zk"];

package/dist/src/components/scroll-area/index.d.ts

@@ -1,12 +1,7 @@
-import { Root, Scrollbar, Thumb, Corner } from './scroll-area';
+import { Corner, Root, Scrollbar, Thumb, Viewport } from './scroll-area';
 export declare const ScrollArea: {
     Root: typeof Root;
-    Viewport: import('react').ForwardRefExoticComponent<{
-        autoScrollToBottom?: boolean;
-        nearBottomThreshold?: number;
-        onNearBottomChange?: (isNearBottom: boolean) => void;
-        snapToBottomOnMount?: boolean;
-    } & Omit<import('@radix-ui/react-scroll-area').ScrollAreaViewportProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    Viewport: typeof Viewport;
     Scrollbar: typeof Scrollbar;
     Thumb: typeof Thumb;
     Corner: typeof Corner;

package/dist/src/components/scroll-area/scroll-area-viewport.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as v, jsx as g } from "react/jsx-runtime";
-import { composeRefs as H } from "../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
+import { composeRefs as H } from "../../../node_modules/.pnpm/@radix-ui_react-compose-refs@1.1.2_@types_react@19.2.6_react@19.2.0/node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { ScrollArea as x } from "radix-ui";
 import { forwardRef as q, useRef as u, useEffect as i } from "react";
 import { useScrollToBottom as F } from "../../hooks/use-scroll-to-bottom.js";

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
+type UserWithNameAndPicture = {
+    email: string;
+    name?: string;
+    team?: string;
+    picture?: string;
+};
+type UserDropdownProps = {
+    user: UserWithNameAndPicture | undefined;
+    loginUrl: string;
+    signupUrl: string;
+    logoutUrl: string;
+    accountUrl?: string;
+    contactItem?: React.ReactNode;
+} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger'>;
+/**
+ * A component that displays a not found message and a button to navigate to the specified page.
+ * @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', name: 'John Doe', team: 'Validation Cloud', 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;
+export {};

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

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import "react";
+import { Button as c } from "../button/button.js";
+import { DropdownMenu as p, DropdownMenuItem as n } from "../dropdown-menu/dropdown-menu.js";
+import { Icon as t } from "../icon/icon.js";
+import { twMerge as o } from "../../lib/tailwind-merge.js";
+function w({
+  user: i,
+  loginUrl: d,
+  signupUrl: m,
+  logoutUrl: h,
+  accountUrl: l,
+  contactItem: a,
+  className: s,
+  ...u
+}) {
+  return i ? /* @__PURE__ */ r(
+    p,
+    {
+      trigger: /* @__PURE__ */ r(
+        "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: [
+            i.picture && /* @__PURE__ */ e("img", { className: "hidden size-9 rounded-full sm:block", src: i.picture, alt: "User avatar" }),
+            /* @__PURE__ */ r("div", { className: "flex shrink flex-col items-start truncate", children: [
+              /* @__PURE__ */ e("span", { className: "tg-caption-bold truncate", children: i.name || i.email }),
+              i.team && /* @__PURE__ */ e("p", { className: "tg-caption text-neutral-40", children: i.team })
+            ] }),
+            /* @__PURE__ */ e(t, { icon: "chevron", className: "size-3 flex-none text-white" })
+          ]
+        }
+      ),
+      className: o("tg-caption-bold -mx-2 rounded-xl px-2 py-1", s),
+      contentClassName: "bg-neutral-60",
+      ...u,
+      children: [
+        /* @__PURE__ */ r(n, { className: "text-neutral-40 flex cursor-default items-center gap-3", disabled: !0, children: [
+          /* @__PURE__ */ e(t, { icon: "user", className: "size-4 flex-none" }),
+          /* @__PURE__ */ e("p", { className: "tg-body", children: i.email })
+        ] }),
+        l && /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ r("a", { href: l, 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" })
+        ] }) }),
+        a && /* @__PURE__ */ e(n, { asChild: !0, children: a }),
+        /* @__PURE__ */ e(n, { asChild: !0, children: /* @__PURE__ */ r("a", { href: h, 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" })
+        ] }) })
+      ]
+    }
+  ) : /* @__PURE__ */ r("div", { className: o("flex gap-3", s), children: [
+    /* @__PURE__ */ e(c, { variant: "secondary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: d, children: "Log in" }) }),
+    /* @__PURE__ */ e(c, { variant: "primary", size: "medium", asChild: !0, children: /* @__PURE__ */ e("a", { href: m, children: "Sign up" }) })
+  ] });
+}
+export {
+  w as UserDropdown
+};

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

@@ -0,0 +1,37 @@
+import { DropdownMenu } from '../dropdown-menu/dropdown-menu';
+type UserWithNameAndPicture = {
+    email: string;
+    name?: string;
+    team?: string;
+    picture?: string;
+};
+type UserDropdownMobileProps = {
+    user: UserWithNameAndPicture | undefined;
+    loginUrl: string;
+    signupUrl: string;
+    logoutUrl: string;
+    accountUrl?: string;
+    contactItem?: React.ReactNode;
+} & Omit<React.ComponentProps<typeof DropdownMenu>, 'trigger'>;
+/**
+ * A component that displays a not found message and a button to navigate to the specified page.
+ * @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', name: 'John Doe', team: 'Validation Cloud', 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 UserDropdownMobile({ user, loginUrl, signupUrl, logoutUrl, accountUrl, contactItem, className, ...props }: UserDropdownMobileProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,59 @@
+import { jsxs as l, jsx as e, Fragment as t } from "react/jsx-runtime";
+import u from "../../assets/default-avatar.svg.js";
+import { DropdownMenu as g, DropdownMenuItem as r } from "../dropdown-menu/dropdown-menu.js";
+import { Icon as n } from "../icon/icon.js";
+import { twMerge as f } from "../../lib/tailwind-merge.js";
+function v({
+  user: i,
+  loginUrl: o,
+  signupUrl: c,
+  logoutUrl: d,
+  accountUrl: s,
+  contactItem: a,
+  className: h,
+  ...m
+}) {
+  return /* @__PURE__ */ l(
+    g,
+    {
+      trigger: /* @__PURE__ */ e(
+        "img",
+        {
+          className: "size-7 cursor-pointer",
+          src: i && i.picture ? i.picture : u,
+          alt: "User avatar"
+        }
+      ),
+      className: f(
+        "hover:bg-neutral-60 focus-visible:ring-neutral-60 data-[state=open]:bg-neutral-60 rounded-full outline-none focus-visible:ring-2",
+        h
+      ),
+      ...m,
+      children: [
+        !i && /* @__PURE__ */ l(t, { children: [
+          /* @__PURE__ */ e(r, { asChild: !0, children: /* @__PURE__ */ e("a", { href: o, className: "tg-body", children: "Log in" }) }),
+          /* @__PURE__ */ e(r, { asChild: !0, children: /* @__PURE__ */ e("a", { href: c, className: "tg-body", children: "Sign up" }) }),
+          a && /* @__PURE__ */ e(r, { children: a })
+        ] }),
+        i && /* @__PURE__ */ l(t, { children: [
+          /* @__PURE__ */ l(r, { className: "text-neutral-40 flex cursor-default items-center gap-3", disabled: !0, children: [
+            /* @__PURE__ */ e(n, { icon: "user", className: "size-4 flex-none" }),
+            /* @__PURE__ */ e("p", { className: "tg-body", children: i.email })
+          ] }),
+          s && /* @__PURE__ */ e(r, { asChild: !0, children: /* @__PURE__ */ l("a", { href: s, className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ e(n, { icon: "cog", className: "size-4 flex-none text-white" }),
+            /* @__PURE__ */ e("p", { className: "tg-body", children: "Account" })
+          ] }) }),
+          a && /* @__PURE__ */ e(r, { asChild: !0, children: a }),
+          /* @__PURE__ */ e(r, { asChild: !0, children: /* @__PURE__ */ l("a", { href: d, className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ e(n, { icon: "logout", className: "size-4 flex-none text-white" }),
+            /* @__PURE__ */ e("p", { className: "tg-body", children: "Log out" })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  v as UserDropdownMobile
+};

package/dist/src/index.d.ts

@@ -22,4 +22,6 @@ 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 { UserDropdownMobile } from './components/user-dropdown-mobile/user-dropdown-mobile';
 export { useScrollToBottom } from './hooks/use-scroll-to-bottom';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.46.0",
+  "version": "1.48.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [
@@ -32,6 +32,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "packageManager": "pnpm@10.20.0",
+  "engines": {
+    "node": ">=22.0.0"
+  },
   "dependencies": {
     "radix-ui": "^1",
     "react": "^19",
@@ -71,6 +75,7 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "peerDependencies": {
+    "@radix-ui/react-compose-refs": "^1",
     "radix-ui": "^1",
     "react": "^19",
     "react-dom": "^19",