@validationcloud/fractal-ui 1.61.0 → 1.63.0

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

@@ -2,8 +2,6 @@ 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 = {
@@ -15,7 +13,7 @@ type UserDropdownProps = {
     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.
+ * 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
@@ -26,7 +24,7 @@ type UserDropdownProps = {
  * @example
  * // Example usage of UserDropdown
  * <UserDropdown
- *   user={{ email: 'john.doe@example.com', name: 'John Doe', team: 'Validation Cloud', picture: 'picture-url' }}
+ *   user={{ email: 'john.doe@example.com', picture: 'picture-url' }}
  *   loginUrl="/auth/login"
  *   signupUrl="/auth/login?screen_hint=signup"
  *   logoutUrl="/auth/logout"

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

@@ -1,22 +1,23 @@
 "use client";
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, Fragment as p, 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
+import m 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 s } from "../icon/icon.js";
+import { twMerge as t } from "../../lib/tailwind-merge.js";
+function C({
+  user: l,
+  loginUrl: o,
+  signupUrl: d,
+  logoutUrl: g,
+  accountUrl: c,
+  contactItem: n,
+  className: a,
+  ...h
 }) {
-  return i ? /* @__PURE__ */ r(
-    p,
+  return l ? /* @__PURE__ */ r(
+    f,
     {
       trigger: /* @__PURE__ */ r(
         "button",
@@ -24,39 +25,53 @@ function w({
           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" })
+            /* @__PURE__ */ e("img", { className: "size-7 rounded-full sm:size-9", src: l.picture ?? m, alt: "User avatar" }),
+            /* @__PURE__ */ e(s, { icon: "chevron", className: "hidden size-2.5 flex-none text-white sm:block sm:size-3" })
           ]
         }
       ),
-      className: o("tg-caption-bold -mx-2 rounded-xl px-2 py-1", s),
+      className: t("tg-caption-bold -mx-2 rounded-xl px-2 py-1", a),
       contentClassName: "bg-neutral-60",
-      ...u,
+      ...h,
       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 })
+        /* @__PURE__ */ r(i, { className: "text-neutral-40 flex cursor-default items-center gap-3", disabled: !0, children: [
+          /* @__PURE__ */ e(s, { icon: "user", className: "size-4 flex-none" }),
+          /* @__PURE__ */ e("p", { className: "tg-body", children: l.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" }),
+        c && /* @__PURE__ */ e(i, { asChild: !0, children: /* @__PURE__ */ r("a", { href: c, className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ e(s, { 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" }),
+        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(s, { 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" }) })
+  ) : /* @__PURE__ */ r(p, { children: [
+    /* @__PURE__ */ r("div", { className: t("hidden gap-3 sm:flex", a), 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: m, alt: "User avatar" }),
+        className: t(
+          "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",
+          a
+        ),
+        ...h,
+        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 {
-  w as UserDropdown
+  C as UserDropdown
 };

package/dist/index.d.ts

@@ -25,5 +25,4 @@ 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/dist/index.js

@@ -1,19 +1,19 @@
-import { AnimatedLoader as e } from "./components/animated-loader/animated-loader.js";
+import { AnimatedLoader as t } from "./components/animated-loader/animated-loader.js";
 import { Badge as p } from "./components/badge/badge.js";
 import { Box as x } from "./components/box/box.js";
 import { Button as n } from "./components/button/button.js";
-import { ClientModal as d } from "./components/client-modal/client-modal.js";
-import { Collapsible as i, CollapsibleContent as u, CollapsibleTrigger as c } from "./components/collapsible/collapsible.js";
+import { ClientModal as a } from "./components/client-modal/client-modal.js";
+import { Collapsible as u, CollapsibleContent as i, CollapsibleTrigger as c } from "./components/collapsible/collapsible.js";
 import { CopyButton as B } from "./components/copy-button/copy-button.js";
 import { DecoratedIcon as C } from "./components/decorated-icon/decorated-icon.js";
 import { DropdownMenu as T, DropdownMenuItem as s } from "./components/dropdown-menu/dropdown-menu.js";
 import { ErrorBoundary as M } from "./components/error-boundary/error-boundary.js";
-import { ScrollArea as b } from "./components/scroll-area/index.js";
+import { ScrollArea as P } from "./components/scroll-area/index.js";
 import { Icon as h } from "./components/icon/icon.js";
 import { IconButton as y } from "./components/icon-button/icon-button.js";
 import { InputButton as L } from "./components/input-button/input-button.js";
-import { MountSvgSprite as k } from "./components/mount-svg-sprite/mount-svg-sprite.js";
-import { NotFoundComponent as F } from "./components/not-found-component/not-found-component.js";
+import { MountSvgSprite as E } from "./components/mount-svg-sprite/mount-svg-sprite.js";
+import { NotFoundComponent as N } from "./components/not-found-component/not-found-component.js";
 import { PagePadding as j } from "./components/page-padding/page-padding.js";
 import { ProtocolLogo as z } from "./components/protocol-logo/protocol-logo.js";
 import { Select as H, SelectItem as J } from "./components/select/select.js";
@@ -23,18 +23,17 @@ import { TextInput as W } from "./components/text-input/text-input.js";
 import { Tooltip as Y } from "./components/tooltip/tooltip.js";
 import { TooltipProvider as _ } from "./components/tooltip-provider/tooltip-provider.js";
 import { TouchTarget as oo } from "./components/touch-target/touch-target.js";
-import { twMerge as eo } from "./lib/tailwind-merge.js";
+import { twMerge as to } from "./lib/tailwind-merge.js";
 import { UserDropdown as po } from "./components/user-dropdown/user-dropdown.js";
-import { UserDropdownMobile as xo } from "./components/user-dropdown-mobile/user-dropdown-mobile.js";
-import { useScrollToBottom as no } from "./hooks/use-scroll-to-bottom.js";
+import { useScrollToBottom as xo } from "./hooks/use-scroll-to-bottom.js";
 export {
-  e as AnimatedLoader,
+  t as AnimatedLoader,
   p as Badge,
   x as Box,
   n as Button,
-  d as ClientModal,
-  i as Collapsible,
-  u as CollapsibleContent,
+  a as ClientModal,
+  u as Collapsible,
+  i as CollapsibleContent,
   c as CollapsibleTrigger,
   B as CopyButton,
   C as DecoratedIcon,
@@ -44,11 +43,11 @@ export {
   h as Icon,
   y as IconButton,
   L as InputButton,
-  k as MountSvgSprite,
-  F as NotFoundComponent,
+  E as MountSvgSprite,
+  N as NotFoundComponent,
   j as PagePadding,
   z as ProtocolLogo,
-  b as ScrollArea,
+  P as ScrollArea,
   H as Select,
   J as SelectItem,
   O as Skeleton,
@@ -58,7 +57,6 @@ export {
   _ as TooltipProvider,
   oo as TouchTarget,
   po as UserDropdown,
-  xo as UserDropdownMobile,
-  eo as twMerge,
-  no as useScrollToBottom
+  to as twMerge,
+  xo as useScrollToBottom
 };

package/dist/styles/gradients.css

@@ -77,6 +77,16 @@
   --background-image-gradient12: linear-gradient(269deg, #fff 11.19%, #e4e7f5 50.65%, #d2d8ee 76.77%, #3d476d 112.51%);
   --background-image-gradient13: radial-gradient(circle, #1a1d1f 0%, #1a1d1f 45%, #6f767e 100%);
   --background-image-gradient14: linear-gradient(327deg, #fff 0%, #e4e7f5 38.95%, #d2d8ee 64.79%, #3d476d 100%);
+  --background-image-gradient15: conic-gradient(
+    from 30deg,
+    #825a67 0deg,
+    #825a67 30deg,
+    #ad818c 45deg,
+    #50434e 90deg,
+    #3d323d 225deg,
+    #443843 270deg,
+    #825a67 360deg
+  );
   --background-image-angular: conic-gradient(
     from 180deg at 50% 50%,
     #eb9eab 0deg,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@validationcloud/fractal-ui",
   "private": false,
-  "version": "1.61.0",
+  "version": "1.63.0",
   "module": "./dist/index.js",
   "type": "module",
   "files": [

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

@@ -1,37 +0,0 @@
-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/components/user-dropdown-mobile/user-dropdown-mobile.js

@@ -1,59 +0,0 @@
-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
-};